:root {
  --bg: #14110e;
  --panel: #1f1a15;
  --panel2: #2a231c;
  --ink: #ece3d4;
  --muted: #9a8f7d;
  --accent: #c0392b;
  --accent2: #d4a24e;
  --line: #3a3127;
  --good: #7fb069;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* beats .field{display:flex} so el.hidden works */
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.4;
}
header {
  padding: 18px 24px;
  border-bottom: 2px solid var(--accent);
  background: linear-gradient(180deg, #241d16, #14110e);
}
header h1 { margin: 0; font-size: 1.5rem; letter-spacing: .5px; }
header .sub { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }

main {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  padding: 18px;
  align-items: start;
}
@media (max-width: 880px) { main { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
}
.card h2 { margin: 0 0 12px; font-size: 1.1rem; color: var(--accent2); }
.card h3 {
  margin: 18px 0 8px; font-size: .78rem; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted); border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.card h3 small { text-transform: none; letter-spacing: 0; color: var(--muted); }

/* ---- Character bar: saved characters, import/export ---- */
.roster {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 18px 0;
}
.roster-pick { display: flex; align-items: center; gap: 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.roster-pick select { width: auto; min-width: 220px; max-width: 360px; padding: 5px 8px; text-transform: none; letter-spacing: 0; }
.roster-gap { flex: 0 0 8px; }
.btn-danger:hover { border-color: var(--accent); color: var(--accent); }
.save-status { margin-left: auto; font-size: .76rem; color: var(--muted); }
.save-status.error { color: var(--accent); }
.roster-note { padding: 4px 18px 0; min-height: 0; }
.roster-note:empty { display: none; }

/* ---- Build tabs: Create / Level up / Play ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -4px 0 12px; }
.tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--muted); padding: 8px 12px; font-size: .86rem; cursor: pointer;
}
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { color: var(--accent2); border-bottom-color: var(--accent2); font-weight: 600; }
.tabs [role="tab"]:focus-visible { outline: 1px solid var(--accent2); }
.tab-badge {
  background: var(--accent); color: #fff; border-radius: 9px;
  font-size: .68rem; font-weight: 600; padding: 0 6px; line-height: 1.5;
}
.tab-panel > h3:first-child { margin-top: 0; }
.level-hint { color: var(--accent2); font-size: .8rem; margin: 0 0 10px; }
.level-hint:empty { display: none; }
#hpHint { margin-bottom: 12px; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-width: 0; }
.field > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.row { display: flex; gap: 10px; }
.row .field { flex: 1; }
.field.grow { flex: 2; }
.field.level { flex: 0 0 70px; }

input, select, textarea {
  width: 100%;
  max-width: 100%;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .9rem;
}
/* Keep the dropdown arrow inside the control and truncate long option text
   instead of forcing the <select> wider than its column. */
select { text-overflow: ellipsis; }
textarea { font: inherit; font-size: .86rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent2); }
.hint { font-size: .78rem; color: var(--muted); margin: 2px 0 0; min-height: 1em; }

/* ---- Searchable combobox ---- */
.combo { position: relative; }
.combo-input { padding-right: 28px; } /* room for the caret */
.combo-input:disabled { opacity: .45; cursor: not-allowed; }
.combo::after {
  content: "▾";
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--muted); font-size: .7rem;
}
.combo.no-caret::after { content: ""; }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px);
  z-index: 40; max-height: 244px; overflow-y: auto;
  background: var(--panel2);
  border: 1px solid var(--accent2);
  border-radius: 7px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
.combo-option {
  padding: 7px 11px; font-size: .86rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--line);
}
.combo-option:last-child { border-bottom: 0; }
.combo-option.active { background: var(--accent); color: #fff; }
.combo-option.selected { color: var(--accent2); }
.combo-option.active.selected { color: #fff; }
.combo-option .match { text-decoration: underline; text-underline-offset: 2px; }
.combo-empty { padding: 8px 11px; font-size: .82rem; color: var(--muted); }

.abilities-input { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.abilities-input label { display: flex; flex-direction: column; gap: 3px; }
.abilities-input span { font-size: .7rem; color: var(--muted); text-transform: uppercase; }
.abilities-input input { text-align: center; padding: 6px; }

.skills-input { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.skills-input label { display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.skills-input label.disabled { opacity: .4; }
.skills-input input { width: auto; }

/* ---- Sheet: laid out like the official 5e character sheet ----
   The columns follow the sheet's own width (container queries): one column
   on a phone, two when there's room, the PDF's three on a wide screen. */
.sheet { container: sheet / inline-size; }
.sheet-head { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 10px 18px; align-items: end; margin-bottom: 14px; }
.sheet-title { display: flex; flex-direction: column; min-width: 0; }
.sheet-title .meta-label { padding-left: 36px; }
/* The name on the PDF's scroll: its folded left end and right end kept, the
   band stretched to the name (two lines when it wraps). The band's lower edge
   waves up, so it gets more room below the name than above, for descenders
   (g, y) in any font. */
#sheetName {
  margin: 0; font-size: 1.4rem; color: var(--ink); overflow-wrap: anywhere;
  min-height: 66px; display: flex; align-items: center; padding: 12px 16px 22px 26px;
  border: 0 solid transparent; border-image: url(gfx/scroll.svg) 14 10 20 52 fill / 14px 10px 20px 52px stretch;
}
.sheet-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
/* The PDF's header banner, its ends kept and its middle stretched. */
.sheet-meta, .looks {
  border: solid transparent; border-width: 10px 44px 10px 22px; padding: 2px 0 4px;
  border-image: url(gfx/banner.svg) 16 96 16 75 fill / 11px 67px 11px 52px stretch;
}
.meta { display: flex; flex-direction: column; min-width: 0; border-bottom: 1px solid var(--line); }
.meta b { font-weight: 600; font-size: .9rem; padding: 3px 0; min-height: 1.6em; overflow-wrap: anywhere; }
.meta input {
  background: transparent; border: 0; border-radius: 0; padding: 3px 0; font-size: .9rem; font-weight: 600;
}
.meta-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
@container sheet (max-width: 600px) {
  .sheet-head { grid-template-columns: 1fr; }
  .sheet-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.btn-small {
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; font-size: .78rem; cursor: pointer;
}
.btn-small:hover { border-color: var(--accent2); color: var(--accent2); }

/* Boxes: the sheet's bordered sections. */
.box {
  border: 10px solid transparent; padding: 4px 6px; min-width: 0;
  border-image: url(gfx/frame.svg) 18 fill / 18px stretch;
}
.card .box > h3:first-child { margin-top: 0; }
.box-inline { display: flex; align-items: center; gap: 10px; }
.box-num { min-width: 2.6em; text-align: center; font-size: 1.15rem; font-weight: 700; color: var(--accent2); font-variant-numeric: tabular-nums; }
.box-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
/* Inspiration, proficiency bonus and passive perception: the PDF's pills,
   the value in the round or square end and the bar stretched to fit. */
.box.pill { border-width: 0; padding: 0 22px 0 0; gap: 8px; } /* not the border shorthand: it would reset the image */
.pill-insp { height: 37.5px; border-image: url(gfx/pill-insp.svg) 0 18 0 40 fill / 0 18px 0 40px stretch; }
.pill-prof { height: 46px; border-image: url(gfx/pill-prof.svg) 0 18 0 50 fill / 0 18px 0 50px stretch; }
.pill-passive { height: 36px; border-image: url(gfx/pill-passive.svg) 0 18 0 50 fill / 0 18px 0 50px stretch; }
.pill .box-num { flex: 0 0 43px; min-width: 0; padding: 0; }
.pill-prof .box-title, .pill-passive .box-title { margin-left: 6px; }
.note-field { display: flex; flex-direction: column; gap: 4px; }
.personality { display: grid; gap: 8px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Each trait in its own frame, as on the PDF. */
.box.personality { border: 0; border-image: none; padding: 0; }
.personality .note-field { border: 10px solid transparent; padding: 2px 6px 4px; border-image: url(gfx/frame.svg) 18 fill / 18px stretch; }
@container sheet (max-width: 620px) { .personality { grid-template-columns: 1fr; } }

/* Main page (PDF page 1): left = abilities, saves, skills, proficiencies;
   middle = combat, HP, attacks; right = features, then the class resources
   most of them come from (the personality boxes and the equipment are on the
   Details page). On a phone the middle (play) column comes first. */
.page-main { display: grid; gap: 12px; grid-template-areas: "mid" "left" "right"; }
.col-left { grid-area: left; }
.col-mid { grid-area: mid; }
.col-right { grid-area: right; }
.col-left, .col-mid, .col-right { display: grid; gap: 10px; align-content: start; min-width: 0; }
@container sheet (min-width: 620px) {
  .page-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "left mid" "right right"; }
}
@container sheet (min-width: 900px) {
  .page-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "left mid right"; }
}
.left-split { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; align-items: start; }
.left-stack { display: grid; gap: 8px; min-width: 0; }
.combat-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.col-mid > .ac-breakdown { margin: -4px 2px 0; }
.col-mid > .ac-breakdown:empty { display: none; }
.stat {
  border: 10px solid transparent; padding: 2px 0; text-align: center;
  border-image: url(gfx/stat.svg) 12 fill / 12px stretch;
}
.stat.stat-ac { border: 0; border-image: none; padding: 0; }
.stat-ac .stat-val {
  height: 76px; display: flex; align-items: center; justify-content: center; padding-bottom: 6px;
  background: url(gfx/shield.svg) center / contain no-repeat;
}
.stat-val { font-size: 1.5rem; font-weight: 700; color: var(--accent2); }
.stat-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 2px; }

.ability-strip { display: grid; gap: 8px; }
.ab-card {
  position: relative; aspect-ratio: 71 / 83.2; text-align: center; padding: 9px 4px 0;
  background: url(gfx/ability.svg) center / 100% 100% no-repeat;
}
.ab-card .name { font-size: .64rem; text-transform: uppercase; color: var(--muted); }
.ab-card .mod { font-size: 1.3rem; font-weight: 700; line-height: 1.5; }
.ab-card .score {
  position: absolute; left: 50%; top: 83%; transform: translate(-50%, -50%);
  font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

.statline { list-style: none; margin: 0; padding: 0; }
.statline li {
  display: flex; justify-content: space-between; padding: 4px 6px;
  border-bottom: 1px solid var(--line); font-size: .86rem;
}
.statline li .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.statline li.prof { color: var(--ink); }
.statline li.prof .dot { color: var(--good); }
.statline .dot { margin-right: 6px; color: var(--line); }
.statline.skills li { font-size: .82rem; }
.sk-ability { color: var(--muted); font-size: .7rem; text-transform: uppercase; margin-left: 4px; }

/* ---- Equipment ---- */
.toggles { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.toggles label { display: flex; align-items: center; gap: 6px; font-size: .84rem; }
.toggles input { width: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel2); border: 1px solid var(--accent2); border-radius: 14px;
  padding: 3px 6px 3px 10px; font-size: .78rem;
}
.chip .chip-bonus { color: var(--accent2); font-variant-numeric: tabular-nums; }
.chip button {
  width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--line); color: var(--ink); font-size: .8rem; line-height: 1; padding: 0;
}
.chip button:hover { background: var(--accent); color: #fff; }
.ac-breakdown { font-size: .78rem; color: var(--muted); margin: 4px 2px 0; min-height: 1em; }

.sc-block .stat {
  border: 9px solid transparent; font-size: .8rem; text-align: center;
  border-image: url(gfx/sc-stat.svg) 12 fill / 12px stretch;
}
/* The frame's dots at mid-height on each side, drawn here so they stay round
   when the frame stretches (in the SVG they'd sit in a stretched edge). */
.sc-block .stat { position: relative; }
.sc-block .stat::before, .sc-block .stat::after {
  content: ""; position: absolute; top: 50%; width: 2.6px; height: 2.6px; margin-top: -1.3px;
  border-radius: 50%; background: #a08a62;
}
.sc-block .stat::before { left: -8px; } /* 9px border: centred 2.2px in from the frame's edge */
.sc-block .stat::after { right: -8px; }

/* Spells page (PDF page 3): one header row per casting class. */
.page-spells, .page-details { display: grid; gap: 10px; }
.sc-row { display: grid; gap: 8px; }
.sc-block { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 8px; }
.sc-block .stat-val { font-size: 1.15rem; }
@container sheet (max-width: 520px) { .sc-block { grid-template-columns: 1fr 1fr; } }
.main-spells { display: grid; gap: 6px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.spell-summary { font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spell-summary:empty, .conc-line:empty, .main-slots:empty { display: none; }
.conc-line { font-size: .78rem; color: var(--accent2); display: flex; align-items: center; gap: 6px; }
.main-slots { display: grid; gap: 6px; }
.main-slot {
  display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 4px 8px; align-items: center;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; font-size: .82rem;
}
.main-slot:last-child { border-bottom: 0; padding-bottom: 0; }
.main-slot .lv { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.main-slot-count { display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.main-slot-count .slot-boxes { margin-top: 0; }
.main-slot-cast { grid-column: 2; }
.main-slot-cast select { flex: 1; min-width: 0; max-width: none; }
.main-slot.pact .slot-box { border-color: var(--accent); background: var(--accent); }
.main-slot.pact .slot-box.used { background: transparent; }

/* Details page (PDF page 2). */
.looks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 14px; }
@container sheet (max-width: 620px) { .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.details-grid {
  display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas: "appearance allies" "backstory features" "backstory equipment" "backstory treasure";
}
.d-appearance { grid-area: appearance; } .d-allies { grid-area: allies; } .d-backstory { grid-area: backstory; }
.d-features { grid-area: features; } .d-equipment { grid-area: equipment; } .d-treasure { grid-area: treasure; }
.d-equipment > h3 { font-size: .7rem; font-weight: 400; letter-spacing: .8px; border-bottom: 0; padding-bottom: 0; margin-bottom: 4px; } /* like the page's other box titles */
.d-backstory textarea { flex: 1; }
.details-grid .box { border-width: 9px; border-image: url(gfx/frame-bracket.svg) 12 fill / 12px stretch; }
@container sheet (max-width: 620px) {
  .details-grid { grid-template-columns: 1fr; grid-template-areas: "appearance" "allies" "backstory" "features" "equipment" "treasure"; }
}
.equip-list { font-size: .82rem; display: grid; gap: 4px; margin-bottom: 8px; }
.equip-notes { margin-bottom: 8px; }
.equip-list .prof-kind { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; }

/* ---- Selectable class options ---- */
#selectableSection:not(:empty) { margin-top: 6px; }
.sel-group { margin-bottom: 10px; }
.sel-label { display: flex; align-items: baseline; gap: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; }
.sel-label .sel-name { color: var(--ink); font-weight: 600; }
.sel-count { margin-left: auto; color: var(--accent2); font-variant-numeric: tabular-nums; text-transform: none; }

/* ---- ASIs and feature choices ---- */
.asi-slot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.asi-slot .sel-label { grid-column: 1 / -1; margin-bottom: 0; }
.effects-note { margin-top: 10px; font-size: .78rem; color: var(--muted); }
.effects-note ul { margin: 4px 0 0; padding-left: 18px; }

/* ---- Proficiencies, inspiration, bonuses, money ---- */
.prof-list { font-size: .82rem; display: grid; gap: 4px; }
.prof-list .prof-kind { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; }
.prof-list .prof-choice { color: var(--accent2); }
.insp-toggle {
  flex: 0 0 auto; width: 37px; height: 37px; background: transparent; color: var(--muted); border: 0;
  border-radius: 6px; padding: 0; font-size: 1.1rem; cursor: pointer;
}
.insp-toggle .insp-mark { opacity: .3; }
.insp-toggle[aria-pressed="true"] { color: var(--accent2); text-shadow: 0 0 8px rgba(212, 162, 78, .7); }
.insp-toggle[aria-pressed="true"] .insp-mark { opacity: 1; }
.bonus-rows { display: grid; gap: 6px; margin-bottom: 8px; }
.bonus-row { display: grid; grid-template-columns: 1.3fr 64px 1fr 24px; gap: 6px; align-items: center; }
.bonus-row select, .bonus-row input { padding: 5px 7px; font-size: .8rem; }
.bonus-row button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--line); color: var(--ink); cursor: pointer; padding: 0; }
.coins { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 340px; } /* the tags scale with their width */
.coins label { display: flex; flex-direction: column; gap: 3px; font-size: .7rem; text-transform: uppercase; color: var(--muted); }
.coins input {
  aspect-ratio: 58.3 / 29.9; text-align: center; padding: 0 8px; font-weight: 600;
  background: transparent center / 100% 100% no-repeat; border: 0; border-radius: 0;
  appearance: textfield; -moz-appearance: textfield;
}
.coins input::-webkit-inner-spin-button, .coins input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#coin_cp { background-image: url(gfx/coin-cp.svg); }
#coin_sp { background-image: url(gfx/coin-sp.svg); }
#coin_ep { background-image: url(gfx/coin-ep.svg); }
#coin_gp { background-image: url(gfx/coin-gp.svg); }
#coin_pp { background-image: url(gfx/coin-pp.svg); }

/* ---- Class resources ---- */

.resource-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.resource { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; }
.resource-head { display: flex; align-items: baseline; gap: 6px; font-size: .84rem; }
.resource-head b { flex: 1; min-width: 0; }
.resource .muted { font-size: .72rem; }
.resource-tag { font-size: .64rem; border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; color: var(--muted); white-space: nowrap; }
.resource-tag.short { border-color: var(--good); color: var(--good); }
.resource-tag.long { border-color: var(--accent2); color: var(--accent2); }
.resource-count { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-variant-numeric: tabular-nums; }
.resource-count input { width: 60px; padding: 3px 6px; text-align: center; }
.resource-count > button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; padding: 0; }
/* Font of Magic, under the Sorcery Points card */
.font-magic { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
.font-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .76rem; }
.font-label { width: 100%; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.font-row select { flex: 1; min-width: 0; width: auto; padding: 3px 6px; font-size: .76rem; }

/* ---- Spells ---- */
.slot-boxes { display: inline-flex; gap: 3px; margin-top: 3px; }
.slot-box {
  width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--accent2);
  background: var(--accent2); cursor: pointer; padding: 0;
}
.slot-box.used { background: transparent; }
.slot-box.created { outline: 1px dashed var(--accent2); outline-offset: 1px; margin: 0 1px; } /* made with Font of Magic */
.slot-box.created:focus-visible { outline: 2px solid var(--ink); } /* the dashed ring would hide the focus ring */

.spell-book { margin-bottom: 14px; }
.spell-book-head { font-size: .86rem; margin-bottom: 4px; }
.spell-book-head .muted { font-size: .78rem; }
.spell-level {
  position: relative; display: flex; align-items: center; height: 35px; margin: 10px 0 4px; padding: 0 20px 0 38px;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); font-weight: 600;
  border: 0 solid transparent; border-image: url(gfx/spell-level.svg) 0 23 0 42 fill / 0 16px 0 29px stretch;
}
/* The level's slots on the right of its header, as the PDF's slot boxes. */
.spell-level-slots { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.spell-level-slots .slot-boxes { margin-top: 0; }
.spell-level-slots.pact .slot-box { border-color: var(--accent); background: var(--accent); }
.spell-level-slots.pact .slot-box.used { background: transparent; }
.spell-level::before {
  content: attr(data-lv); position: absolute; left: 0; width: 17.5px; text-align: center;
  font-size: .82rem; font-weight: 700; color: var(--accent2); letter-spacing: 0;
}
.spell-row { display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--line); padding: 4px 2px; }
.spell-row details { flex: 1; min-width: 0; }
.spell-row summary { cursor: pointer; list-style: none; font-size: .86rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.spell-row summary::-webkit-details-marker { display: none; }
.spell-row .spell-name { font-weight: 600; }
.spell-row.inactive .spell-name { color: var(--muted); font-weight: 400; }
.spell-tag { font-size: .64rem; border: 1px solid var(--line); border-radius: 8px; padding: 0 5px; color: var(--muted); }
.spell-tag.conc { border-color: var(--accent2); color: var(--accent2); }
.spell-meta { font-size: .74rem; color: var(--muted); }
.spell-body { font-size: .8rem; white-space: pre-wrap; padding: 6px 0 4px; }
.spell-cast { display: flex; gap: 4px; align-items: center; }
.spell-cast select { width: auto; max-width: 190px; padding: 3px 6px; font-size: .76rem; }
.granted-list { font-size: .78rem; color: var(--muted); margin: 4px 0 8px; }

/* ---- Hit point tracker ---- */
.hp-tracker { padding: 4px 6px 2px; }
.hp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-now { font-size: 1.35rem; font-weight: 700; color: var(--accent2); font-variant-numeric: tabular-nums; }
.hp-temp { color: var(--good); font-weight: 600; font-size: .9rem; }
.hp-bar { flex: 1; min-width: 120px; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.hp-bar > div { height: 100%; width: 0; background: var(--good); transition: width .2s; }
.hp-bar > div.low { background: var(--accent2); }
.hp-bar > div.critical { background: var(--accent); }
.hp-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hp-actions input { width: 90px; padding: 5px 8px; }
.hp-gap { flex: 1; }
.hp-dice { font-size: .78rem; color: var(--muted); }
.rest-panel { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rest-title { width: 100%; font-size: .78rem; color: var(--muted); }
.rest-dice { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.rest-dice label, .rest-roll { display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.rest-dice input, .rest-roll input { width: 64px; padding: 4px 6px; }
.rest-buttons { display: flex; gap: 6px; }
.rest-recovery { width: 100%; display: grid; gap: 8px; }
.rest-recover { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.death-saves { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .82rem; }
.death-status { font-weight: 600; color: var(--accent); }
.ds-group { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.ds-group input { width: auto; margin: 0 1px; }
.hp-note-line { margin-top: 6px; display: flex; align-items: center; gap: 8px; min-height: 1.2em; }

/* ---- Weapons (builder) and attacks (sheet) ---- */
.weapon-row {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 10px; margin-bottom: 8px;
}
.weapon-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .86rem; font-weight: 600; }
.weapon-head .muted { font-weight: 400; font-size: .74rem; }
.weapon-head button {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--line); color: var(--ink); line-height: 1; padding: 0;
}
.weapon-head button:hover { background: var(--accent); color: #fff; }
.weapon-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.weapon-controls .combo { grid-column: 1 / -1; }
.weapon-controls select, .weapon-controls input[type="text"] { padding: 6px 8px; font-size: .82rem; }
.weapon-controls label { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.weapon-controls label input { width: auto; }


.attack { border-bottom: 1px solid var(--line); padding: 6px 4px; }
.attack-main { display: flex; align-items: baseline; gap: 10px; font-size: .88rem; }
.attack-name { font-weight: 600; flex: 1; min-width: 0; }
.attack-hit { color: var(--accent2); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
.attack-dmg { min-width: 40%; font-variant-numeric: tabular-nums; }
.attack-sub { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.attack-notes { font-size: .74rem; color: var(--good); margin-top: 2px; }

/* ---- Class features ---- */

.attacks-note { font-size: .74rem; color: var(--accent2); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.feature {
  border: 1px solid var(--line); border-radius: 7px; margin-bottom: 6px;
  background: var(--panel2); overflow: hidden;
}
.feature > summary {
  cursor: pointer; padding: 8px 11px; font-size: .86rem; list-style: none;
  display: flex; align-items: baseline; gap: 8px;
}
.feature > summary::-webkit-details-marker { display: none; }
.feature > summary::before { content: "▸"; color: var(--muted); font-size: .7rem; }
.feature[open] > summary::before { content: "▾"; }
.feature .f-lvl {
  font-size: .64rem; background: var(--line); color: var(--ink);
  border-radius: 10px; padding: 1px 7px; white-space: nowrap;
}
.feature .f-name { font-weight: 600; }
.feature .f-src { color: var(--muted); font-size: .72rem; margin-left: auto; }
.feature .f-body {
  padding: 0 11px 10px 11px; font-size: .82rem; color: var(--ink);
  white-space: pre-wrap; border-top: 1px solid var(--line); padding-top: 8px;
}

.warnings { margin-top: 12px; color: var(--accent); font-size: .82rem; }
.muted { color: var(--muted); }