/* Ember · design tokens of the reference style (SHEET-RESTYLE-07).
   Source of truth: materials/design/ember-style-guide/01-tokens.md.
   Drop-in for prototype/: load before application.css; fonts live in prototype/assets/fonts/. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 700;font-display:swap;src:url('assets/fonts/CormorantGaramond-normal-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('assets/fonts/CormorantGaramond-italic-500.woff2') format('woff2')}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/AlegreyaSans-normal-400.woff2') format('woff2')}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/AlegreyaSans-normal-500.woff2') format('woff2')}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/AlegreyaSans-normal-700.woff2') format('woff2')}

:root{--serif:'Cormorant Garamond',Garamond,Georgia,serif;--sans:'Alegreya Sans','Gill Sans',Optima,sans-serif;--r:10px;--topbar:60px}
[data-theme=night]{
  color-scheme:dark;
  --bg:#080604;--bg-glow:rgba(196,104,52,.10);
  --surface:#1b1610;--raised:#261f17;--sunken:#0e0b08;--well:#0a0805;--overlay:#1a1410;
  --line:rgba(214,178,116,.2);--line-strong:rgba(214,178,116,.42);
  --ink:#f0e7d7;--muted:#bfb39e;--faint:#aa9c86;
  --gold:#c9a25e;--gold-hi:#e8cb8f;--gold-wash:rgba(201,162,94,.11);--on-gold:#1b140c;
  --ember:#e07052;--ember-deep:#8e2f1e;--ember-wash:rgba(208,96,63,.13);--ember-field:color-mix(in srgb,var(--ember) 13%,var(--sunken));
  --frost:#9cbccf;--frost-wash:rgba(140,180,205,.10);
  --arcane:#c0a6e2;--arcane-wash:rgba(170,140,220,.12);
  --ok:#86b592;
  --adv:#80dca6;--dis:#ff9a9e;--react:#ed9554;--crit-ok-bg:#163c2b;--crit-fail-bg:#48232b;
  --grain:.05;--shadow:0 1px 0 rgba(255,236,200,.035) inset,0 18px 40px -26px rgba(0,0,0,.85);
  --backdrop:rgba(6,4,3,.72);
}
[data-theme=parchment]{
  color-scheme:light;
  --bg:#dccfb1;--bg-glow:rgba(176,112,50,.14);
  --surface:#f6efdf;--raised:#ece2cb;--sunken:#e2d6ba;--well:#d6c8a6;--overlay:#f7f0e0;
  --line:rgba(92,62,24,.22);--line-strong:rgba(92,62,24,.42);
  --ink:#2a1f15;--muted:#5f4f3a;--faint:#614f38;
  --gold:#704b16;--gold-hi:#6b4810;--gold-wash:rgba(142,101,36,.10);--on-gold:#fff8ea;
  --ember:#a63c26;--ember-deep:#7a2414;--ember-wash:rgba(166,60,38,.09);--ember-field:color-mix(in srgb,var(--ember) 9%,var(--sunken));
  --frost:#3f6478;--frost-wash:rgba(63,100,120,.09);
  --arcane:#6d4f98;--arcane-wash:rgba(109,79,152,.09);
  --ok:#3f7a4f;
  --adv:#2f7a4a;--dis:#b3343c;--react:#b4560f;--crit-ok-bg:#d9efdf;--crit-fail-bg:#f6d9db;
  --grain:.09;--shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 30px -24px rgba(70,45,10,.45);
  --backdrop:rgba(60,40,20,.45);
}

/* Base rules that the tokens assume (copied from the reference). */
*{box-sizing:border-box}
*{font-variant-numeric:lining-nums!important}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--line-strong) 70%,transparent) transparent}
*:hover{scrollbar-color:var(--line-strong) transparent}
html{background:var(--bg)}
body{margin:0;font:16px/1.5 var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:radial-gradient(900px 520px at 10% -10%,var(--bg-glow),transparent 62%),radial-gradient(700px 480px at 100% 0%,var(--gold-wash),transparent 70%),var(--bg)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:lining-nums tabular-nums!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* The desktop sheet owns the viewport; its content panels scroll independently. */
@media(min-width:1280px){
 #app.sheet-open{position:relative;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 #app.sheet-open>.topbar,#app.sheet-open>.alert,#app.sheet-open>.action-tracker{flex:none}
 #app.sheet-open>.page{flex:1;min-height:0;width:100%;max-width:1800px;margin:0 auto;padding:18px 24px 16px}
 #app.sheet-open .sheet{height:100%;min-height:0;grid-template-rows:minmax(0,1fr)}
 #app.sheet-open [data-sheet-scroll]{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;scroll-padding:8px;padding-right:12px;padding-bottom:8px;margin-right:-8px;outline-offset:-2px}
 #app.sheet-open .sheet-main{padding:18px 16px 32px 0}
 #app.sheet-open .rail-body[data-sheet-scroll]{padding:16px 12px 20px;margin:0;scroll-padding:12px 8px}
 /* History controls (112 px) stay sticky above the list: keep keyboard focus clear of them. */
 #app.sheet-open .rail-body[data-sheet-scroll]:has(.hist-controls){scroll-padding-top:130px}
}
/* ── Rail (UI-05) ─────────────────────────────────────────────────────────
   Guide: materials/design/ember-style-guide/02-components.md §2.11; reference: sheet-restyle-v7 `.rail`.
   The tabs stay fixed on top of the card, only .rail-body scrolls. */
.rail{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.rail>.tabs{flex:none;padding:8px;position:relative;z-index:1}
.rail-tabs>button{flex:1;min-height:38px;padding:0 6px;font-size:16px}
.rail-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 12px 20px;scrollbar-gutter:stable;scroll-padding-top:12px}
.rail-body:has(.hist-controls){scroll-padding-top:130px}
.rail-body:focus-visible{outline-offset:-3px}
.rail-body>.stack{gap:14px}
.block{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--sunken)}
.block>h3{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 10px;font:600 21px/1 var(--serif)}
.block>h3 small{font:400 14px var(--sans);color:var(--faint)}
.pool+.pool{margin-top:12px}
.pool-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pool-head h4{margin:0;font-size:16px;font-weight:700;overflow-wrap:anywhere}
.pool-head small,.pool .rec{font-size:14px;color:var(--muted)}
.pool .rec{display:block;margin-top:2px;line-height:1.5}
.pool>p{margin:2px 0 0;font-size:14px}
.slot-row{display:flex;align-items:center;gap:6px;margin-top:6px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.slot-row .lv{min-width:44px;font-size:15px;color:var(--muted)}
.pips{display:flex;flex-wrap:wrap;gap:2px;flex:1;min-width:0}
.pip{display:grid;place-items:center;flex:none;width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:6px;background:transparent}
.pip::before{content:'';width:12px;height:12px;transform:rotate(45deg);background:var(--gold);border:1px solid var(--gold-hi);box-shadow:0 0 10px var(--gold-wash);transition:all .2s}
.pip.spent::before{background:transparent;border-color:var(--faint);box-shadow:none}
.pip:hover:not(:disabled){background:var(--gold-wash);border:0}
.pip[aria-pressed=true]{background:transparent}
.pip[aria-pressed=true]:hover:not(:disabled){background:var(--gold-wash)}
.slot-row strong{font:700 17px/1 var(--sans);white-space:nowrap}
.dice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.die{padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);text-align:center}
.die b{display:block;font:700 22px/1.1 var(--sans)}
.die span{font-size:14px;color:var(--muted)}
/* ── Shared components (UI-02) ─────────────────────────────────────────────
   Guide: materials/design/ember-style-guide/02-components.md §2.1–2.7, 2.14–2.16.
   Reference: sheet-restyle-v7/sheet.css. Control height is one variable:
   36 px on desktop, 44 px target zones at 760 px and below (guide §2, preamble). */
:root{--hit:36px;--card-pad:20px}
@media(max-width:760px){:root{--hit:44px}}
button,input,select,textarea{font:inherit;color:inherit}

/* Buttons §2.1 */
button,.btn{border:1px solid var(--line-strong);background:var(--raised);border-radius:8px;padding:6px 13px;min-height:var(--hit);min-width:var(--hit);font-size:14px;line-height:1.4;color:var(--ink);transition:border-color .15s,background .15s,color .15s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
button:hover:not(:disabled),.btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold-hi);background:var(--gold-wash)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary,.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:700}
button.primary:hover:not(:disabled),.btn.primary:hover:not(:disabled){background:var(--gold-hi);border-color:var(--gold-hi);color:var(--on-gold)}
button.quiet,.btn.quiet{background:transparent;border-color:var(--line)}
button.danger,.btn.danger{color:var(--ember);border-color:color-mix(in srgb,var(--ember) 45%,transparent)}
button.danger:hover:not(:disabled),.btn.danger:hover:not(:disabled){background:var(--ember-wash);border-color:var(--ember);color:var(--ember)}
button.harm,.btn.harm{color:var(--ember)}
button.harm:hover:not(:disabled),.btn.harm:hover:not(:disabled){background:var(--ember-wash);border-color:var(--ember);color:var(--ember)}
button.small,.btn.small{min-height:30px;padding:0 10px;font-size:13px}
button.selected,button[aria-pressed=true]{background:var(--gold-wash);border-color:var(--gold);color:var(--gold-hi)}
button.icon{padding:8px}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border-color:transparent;background:transparent;border-radius:8px;color:var(--muted)}
.icon-btn:hover:not(:disabled){color:var(--gold-hi);background:var(--gold-wash);border-color:transparent}
.icon-btn svg{width:20px;height:20px}
.chip{min-height:34px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:14px;color:var(--muted);white-space:nowrap}
.chip:hover:not(:disabled){color:var(--gold-hi);border-color:var(--line-strong);background:var(--gold-wash)}

/* Fields §2.2 */
input,textarea,select{background:var(--sunken);border:1px solid var(--line-strong);border-radius:8px;min-height:var(--hit);padding:6px 10px;width:100%;color:var(--ink)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select{height:var(--hit);padding-block:0;line-height:1.2}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=checkbox],input[type=radio]{width:20px;min-height:20px;accent-color:var(--gold);flex:none}
input[type=number]{-moz-appearance:textfield;appearance:textfield;text-align:center;font-variant-numeric:tabular-nums}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
textarea{resize:vertical;min-height:112px}
label,.field{display:grid;gap:5px;color:var(--muted);font-size:14px}
label.check{display:flex;align-items:center;gap:12px;min-height:var(--hit);color:var(--ink)}

/* Badges, empty states §2.16 */
.badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;line-height:1;color:var(--muted);white-space:nowrap}
.badge.gold,.badge.custom{border-color:var(--line-strong);color:var(--gold-hi);background:var(--gold-wash)}
.badge.conc{border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--gold-hi)}
.badge.active{color:var(--ok)}
.empty{padding:20px 16px;text-align:center;font:italic 500 19px/1.4 var(--serif);color:var(--faint)}

/* Cards §2.3 */
.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:var(--card-pad);box-shadow:var(--shadow)}
.card.compact{--card-pad:16px}
button.card{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:8px;min-height:116px;--card-pad:16px;font-size:inherit;color:inherit}
button.card:hover:not(:disabled){border-color:var(--gold);color:inherit;background:var(--raised)}
button.card strong{overflow-wrap:anywhere}
button.card .badge{align-self:flex-start}
button.card small{display:block}
.card-head{display:flex;align-items:center;gap:14px;min-height:46px;margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);padding:0 16px;border-bottom:1px solid var(--line-strong);border-radius:13px 13px 0 0;background:linear-gradient(90deg,var(--gold-wash),var(--raised) 60%)}
.card-head h2{display:flex;align-items:center;gap:10px}
.card-head h2::before{content:'';width:8px;height:8px;transform:rotate(45deg);background:var(--gold);flex:none}
.card-head .card-note,.card-note{font-size:14px;color:var(--muted)}
.card-head>.right{margin-left:auto}

/* ===== Heading scale (UI-13; guide 02-components.md §2.0): five levels, one style per role on every screen, drawer and window except the sheet =====
   T1 page/window title · T2 card title · T3 section title · T4 group / setting / filter-block title · T5 field and fact label.
   Size, weight, family, colour and line-height of a role are set only here; screen rules below keep layout (margins, flex, decoration). */
:root{--fs-t1:28px;--fs-t2:21px;--fs-t3:20px;--fs-t4:16px;--fs-t5:14px;--fs-eyebrow:11px}
@media(max-width:760px){:root{--fs-t1:24px}}
.page-top h1,#codex-title,.dlg-head h2{font:600 var(--fs-t1)/1.15 var(--serif);letter-spacing:0;color:var(--ink)}
.card-head h1,.card-head h2,.creation-title,.codex-layout #codex-preview>h2{font:600 var(--fs-t2)/1.1 var(--serif);letter-spacing:0;color:var(--gold-hi)}
.sub-head h2,.sub-head h3,h2.sub-head,h3.sub-head,.editor-section>h3,.editor-section>summary,.feature-field-group.sub-card>legend,.wizard .creation-body>.wizard-group-card legend,
h3.creation-title,#codex-preview>h3,.codex-progression>h3,.codex-description-feature>h3,.manage-spell-preview>h3,.feat-picker-preview>h3,.item-picker-preview>h2,.dossier-modal summary,dialog .block>h3{font:600 var(--fs-t3)/1.15 var(--serif);letter-spacing:0;color:var(--ink)}
legend,.setting-text strong,.creation-switch strong,.codex-filter-label,.manage-spell-section>h3,.effect-add-section>h4,.effect-list-heading,.reference-prose h3,.creation-feature-description h3,.reference-sources>h3,.prose h3,.feat-picker-list h3,dialog .pool-head h4,dialog .proficiency-group h4{font:600 var(--fs-t4)/1.4 var(--sans);letter-spacing:0;color:var(--ink)}
label:where(:not(.sheet label,.check,.option,.settings-toggle,.option-row,.ammunition-picker,:has(>input[type=checkbox]),:has(>input[type=radio]))),.wizard-field,.wizard-field>span,dt:where(:not(.sheet dt)),.spell-meta small{font:400 var(--fs-t5)/1.4 var(--sans);letter-spacing:0;color:var(--muted)}
.eyebrow{font:400 var(--fs-eyebrow)/1.4 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-hi)}

/* Sub-cards, their heads and toolbars §2.4 */
.sub-card{border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.sub-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:48px;padding:6px 14px;margin-bottom:14px;border:1px solid var(--line);border-radius:10px;background:var(--well)}
.sub-card>.sub-head{margin-bottom:0;border:0;border-bottom:1px solid var(--line);border-radius:0}
.sub-head h2 small,.sub-head h3 small{margin-left:8px;font:400 14px var(--sans);color:var(--muted)}
.sub-head p{font-size:14px;color:var(--muted)}
.sub-head input{max-width:300px}
.sub-body{padding:6px 14px 12px}
.toolbar{display:flex;flex-direction:column;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--well)}
.sub-card>.toolbar{border:0;border-bottom:1px solid var(--line);border-radius:0}

/* Single-choice switches §2.5: the only filter / section switch of the app */
.subtabs{display:flex;gap:2px;margin:0;padding:0 8px;overflow-x:auto;overflow-y:hidden;max-width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--well)}
.sub-head>.subtabs,.toolbar>.subtabs{border:0;background:transparent;padding:0}
/* Buttons in a sub-card head sit together at the right edge: the first button takes the free space, the rest follow with the usual gap. */
.sub-head>button{margin-left:auto}
.sub-head>button+button{margin-left:0}
/* Short rest: the Song of Rest details (own Bard die note / the performing Bard's die) show only while the box is ticked. */
.song-detail{display:none}
.check:has(input[name=songOfRest]:checked)+.song-detail{display:block}
.subtabs>*{flex-shrink:0}
.subtabs button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 12px;border:0;border-radius:0;background:transparent;font-size:15px;line-height:1.4;color:var(--muted);white-space:nowrap}
.subtabs button:hover:not(:disabled){background:transparent;border:0;color:var(--ink)}
.subtabs button strong{margin-left:6px;font-weight:700;color:var(--ink)}
.subtabs button.selected,.subtabs button[aria-pressed=true],.subtabs button[aria-current=step]{background:transparent;border:0;color:var(--gold-hi);font-weight:700}
.subtabs button.selected strong,.subtabs button[aria-pressed=true] strong{color:var(--gold-hi)}
.subtabs button.selected::after,.subtabs button[aria-pressed=true]::after,.subtabs button[aria-current=step]::after{content:'';position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--gold);border-radius:2px}
.subtabs>:focus-visible{outline-offset:-2px}
.subtabs.vertical{flex-direction:column;gap:2px;padding:6px;overflow-x:visible;overflow-y:auto}
.subtabs.vertical button{justify-content:space-between;width:100%;text-align:left}
.subtabs.vertical button.selected::after,.subtabs.vertical button[aria-pressed=true]::after,.subtabs.vertical button[aria-current=step]::after{left:0;right:auto;top:8px;bottom:8px;width:2px;height:auto}

/* Panel tabs §2.6 */
.tabs{display:flex;gap:6px;padding:8px 10px;margin:0;border-bottom:1px solid var(--line-strong);background:var(--raised);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;min-width:0;max-width:100%}
.tabs>*{flex-shrink:0}
.tabs>button{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid transparent;border-radius:8px;background:transparent;font:500 16px/1 var(--sans);color:var(--muted);white-space:nowrap}
.tabs>button:hover:not(:disabled){color:var(--ink);background:var(--gold-wash);border-color:transparent}
.tabs>button.selected,.tabs>button[aria-pressed=true]{color:var(--gold-hi);background:var(--surface);border-color:var(--gold);box-shadow:0 2px 8px color-mix(in srgb,black 25%,transparent)}
.tabs>:focus-visible{outline-offset:-4px}
.tabs svg{width:17px;height:17px;color:var(--faint);flex:none}
.tabs>button.selected svg,.tabs>button[aria-pressed=true] svg{color:var(--gold)}

/* Ledger tables §2.7 */
.table-scroll{position:relative;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:6px;outline-offset:2px}
table.ledger{width:100%;border-collapse:separate;border-spacing:0 8px;margin-top:-8px;font-size:16px}
.ledger thead th{padding:8px 10px;text-align:left;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--muted);border-bottom:1px solid var(--line-strong);white-space:nowrap}
.ledger tbody tr:not(.group)>*{background:var(--raised);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ledger tbody tr:not(.group)>*:first-child{border-left:1px solid var(--line);border-radius:10px 0 0 10px}
.ledger tbody tr:not(.group)>*:last-child{border-right:1px solid var(--line);border-radius:0 10px 10px 0}
.ledger td,.ledger tbody th{padding:10px;vertical-align:middle;text-align:left;font-weight:400;overflow-wrap:anywhere}
.ledger tbody tr{transition:background .15s}
.ledger tbody tr:not(.group):hover>*{background:color-mix(in srgb,var(--gold-wash) 60%,var(--raised))}
.ledger .c{text-align:center}
.ledger .nowrap{white-space:nowrap}
.ledger small{display:block;margin-top:3px;font-size:14px;color:var(--muted)}
.ledger .name{font:500 17px/1.3 var(--sans);color:var(--ink)}
.ledger button.name{min-height:0;padding:0;border:0;background:transparent;text-align:left}
.ledger button.item-name,.ledger button.spell-name,.ledger button.feature-name{min-height:0;padding:0;border:0;background:transparent;text-align:left;font:500 17px/1.3 var(--sans);color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.ledger button.item-name:hover:not(:disabled),.ledger button.spell-name:hover:not(:disabled),.ledger button.feature-name:hover:not(:disabled),.ledger button.name:hover:not(:disabled){color:var(--gold-hi);background:transparent;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.ledger tr.group>th{padding:6px 2px 0;border:0;background:transparent;font:600 17px/1.2 var(--serif);color:var(--gold-hi)}
.ledger-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--raised);border:1px solid var(--line);border-radius:10px;transition:background .15s}
.ledger-row:hover{background:color-mix(in srgb,var(--gold-wash) 60%,var(--raised))}
.ledger-row .item-name{border:0;background:none;text-align:left;padding:0;min-width:0}
.ledger-row .item-name:hover:not(:disabled){background:none;color:var(--gold-hi)}
.ledger-row .item-name strong{overflow-wrap:anywhere}
.ledger-row small{display:block;color:var(--muted)}
.ledger-row .quantity{color:var(--gold-hi);min-width:36px;text-align:center}

/* Top bar §2.15 */
.topbar{position:relative;z-index:3;display:flex;align-items:center;gap:18px;min-height:var(--topbar);padding:0 28px;border-bottom:1px solid var(--line);background:var(--surface)}
@media(min-width:768px){.topbar{height:var(--topbar)}}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none;margin-left:auto}
.top-actions>button,.top-actions>.btn{white-space:nowrap}
.theme-toggle svg{width:16px;height:16px;flex:none}
.theme-toggle[aria-pressed=true],.theme-toggle[aria-pressed=true]:hover:not(:disabled){background:transparent;border-color:var(--line);color:var(--ink)}
.theme-toggle:hover:not(:disabled){border-color:var(--gold);color:var(--gold-hi);background:var(--gold-wash)}
.alert{padding:8px 28px;color:var(--ember);font-size:14px;background:var(--ember-wash);border-bottom:1px solid color-mix(in srgb,var(--ember) 40%,transparent)}
.alert strong{font-weight:700}

/* Windows §2.14 */
dialog{border:1px solid var(--line-strong);border-radius:16px;background:var(--overlay);color:var(--ink);padding:0;width:min(620px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 48px);box-shadow:0 32px 100px color-mix(in srgb,black 60%,transparent)}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
.dlg-head{padding:18px 24px 12px;position:sticky;top:0;background:var(--overlay);display:flex;gap:16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);z-index:2}
.dlg-head p{margin-top:4px;font-size:14px;color:var(--muted)}
.dlg-body{padding:18px 24px}
.dlg-foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:24px}
.dlg-foot .left{margin-right:auto;display:flex;gap:8px;flex-wrap:wrap}
.dlg-body .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
.nav-links{display:grid;gap:4px}
.nav-links button{justify-content:flex-start;min-height:46px;padding:0 14px;border:0;border-radius:9px;background:transparent;text-align:left;font-size:16px;color:var(--ink)}
.nav-links button:hover:not(:disabled),.nav-links button.selected,.nav-links button[aria-current=page]{background:var(--gold-wash);color:var(--gold-hi);border:0}
.char-list{display:grid;gap:8px}
.char-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px;border:1px solid var(--line);border-radius:10px;background:transparent;text-align:left}
.char-opt.selected,.char-opt[aria-current]{border-color:var(--gold);background:var(--gold-wash);color:var(--ink)}
.char-opt .portrait.small{width:44px;height:44px;aspect-ratio:1;border-radius:50%;font-size:20px}
.char-opt-text{min-width:0;flex:1}
.char-opt-text strong{display:block;font-size:16px;font-weight:500;overflow-wrap:anywhere}
.char-opt-text small{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.5}
.char-opt>svg{color:var(--gold-hi)}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,select{cursor:pointer}
a{color:var(--gold-hi);text-underline-offset:3px}
h1,h2,h3,p{margin:0}
h1{font-size:30px;line-height:1.2;letter-spacing:-.7px}
h2{font-size:18px;line-height:1.35}
h3{font-size:15px}
small,.muted{color:var(--muted)}
small{font-size:12px}
.muted{font-size:13px}
.amber{color:var(--gold-hi)}
.red{color:var(--ember)}
.green{color:var(--ok)}
.mono{font-variant-numeric:tabular-nums}
.grow{flex:1;min-width:0}
.row{display:flex;align-items:center;gap:8px;min-width:0}
.spread{justify-content:space-between}
.wrap{flex-wrap:wrap}
.stack{display:grid;gap:16px}
.gap8{gap:8px}
.mt{margin-top:16px}
.mb{margin-bottom:16px}
.hide{display:none!important}
.pill{border-radius:30px}
.formula{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:4px}
.page{max-width:1488px;margin:auto;padding:32px 24px 64px}
.page-top{margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.sheet{display:grid;grid-template-columns:224px minmax(0,1fr) 280px;gap:24px}
.sheet-main,.sidebar{min-width:0}
.portrait{aspect-ratio:3/4;border-radius:12px;background:var(--sunken);position:relative;overflow:hidden;display:grid;place-items:center;font-size:48px;color:var(--gold-hi)}
.portrait.reference{background-image:url('assets/character-reference.png');background-size:713% 266%;background-position:0.5% 2%;background-repeat:no-repeat}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 60%,transparent));pointer-events:none}
.portrait.small{width:64px;height:72px;aspect-ratio:auto;flex:none;border-radius:10px;font-size:24px}

summary{cursor:pointer;min-height:var(--hit);display:flex;align-items:center;gap:8px}
summary:before{content:'›';color:var(--gold-hi)}
details[open]>summary:before{transform:rotate(90deg)}
details>p,details>.prose{margin-top:8px}
.attack-cards{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.save-hint{font-size:11px;color:var(--muted)}
.resource-line{padding:12px 0;border-bottom:1px solid var(--line)}
.history-list{list-style:none;padding:0;margin:0}
.history-list li{overflow-wrap:anywhere}
.history-list .badge{margin:0}
.history-list pre{white-space:pre-wrap;word-break:break-word;font-size:11px}
.hero{padding:64px 0;max-width:780px}
.hero h1{font-size:52px;margin:12px 0 20px}
.hero p{color:var(--muted);font-size:17px;max-width:540px}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px}
.menu-tile{text-align:left;min-height:180px;padding:24px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.menu-tile strong{font-size:23px}
.menu-tile small{font-size:14px}
.wizard{max-width:1000px;margin:auto}
.wizard-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid .full{grid-column:1/-1}
.fieldset{border:1px solid var(--line-strong);padding:16px;border-radius:12px;margin:0}
.fieldset legend{padding:0 8px;color:var(--gold-hi);font-size:13px}
.choice-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.choice-options.scroll{max-height:280px;overflow:auto}
.choice-options label{overflow-wrap:anywhere;align-items:flex-start;padding:8px 0}
.choice-options input{margin-top:2px}
.wizard-footer{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between}
.form-errors{color:var(--dis);background:var(--ember-wash);border:1px solid var(--ember);padding:12px 16px;border-radius:10px;white-space:pre-line;margin:16px 0}
.form-errors:empty{display:none}
.prose{font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.prose p{margin:0 0 12px}
.prose ul{padding-left:20px}
.prose code{color:var(--gold-hi)}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.inventory-grid{display:grid;gap:10px}
.wallet-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:20px 0}
.wallet-coin{text-align:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:16px 4px}
.wallet-coin strong{display:block;font-size:22px;overflow-wrap:anywhere}
.wallet-total{font-size:32px;color:var(--gold-hi)}
.spell-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
.spell-meta>div{padding:10px;background:var(--sunken);border-radius:8px;font-size:13px}
.spell-meta small{display:block}
.option-row{padding:12px;border:1px solid var(--line-strong);border-radius:10px;min-height:52px!important}
.option-row:has(:checked){border-color:var(--gold-hi);background:var(--gold-wash)}
.mobile-resources{display:none}
.source{font-size:11px;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.footer{margin-top:40px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:11px}
.skip-link{position:fixed;left:12px;top:-60px;padding:12px;background:var(--surface);z-index:100}
.skip-link:focus{top:12px}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);box-shadow:0 8px 40px color-mix(in srgb,black 53%,transparent);border-radius:10px;padding:12px 20px;max-width:calc(100% - 32px);z-index:50;pointer-events:none;opacity:0;transition:opacity .15s;overflow-wrap:anywhere}
#toast.visible{opacity:1}
@media(max-width:1279px){.sheet{grid-template-columns:minmax(0,1fr) 280px;gap:22px}.page{padding:24px 20px 60px}.hero h1{font-size:44px}}
@media(max-width:767px){
 body{font-size:14px}
 .topbar{padding:12px 16px;gap:8px}
 .brand{font-size:17px}
 .alert{padding:12px 16px;font-size:12px}
 .page{padding:24px 16px calc(110px + env(safe-area-inset-bottom))}










 .tabs{margin-bottom:16px}
 .ledger.attacks{display:none}
 .attack-cards{display:grid;gap:12px}
 .attack-card{padding:16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface)}
 .attack-numbers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
 .attack-numbers button{width:100%;margin-top:4px}
 .sub-head{flex-wrap:wrap}
 .sub-head input{max-width:none;flex:1;min-width:160px}
 .hero{padding:24px 0 32px}
 .hero h1{font-size:38px}
 .hero p{font-size:15px}
 .menu-grid,.catalog-grid{grid-template-columns:1fr}
 .menu-tile{min-height:140px}
 .wizard-layout{display:block}
 .wizard-preview{margin-top:24px}
 .steps button{flex:none}
 .form-grid{grid-template-columns:1fr}
 .form-grid .full{grid-column:auto}
 .choice-options{grid-template-columns:1fr}
 .wallet-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .wallet-coin strong{font-size:24px}
 .ledger-row{padding:12px;gap:8px}
 .ledger-row .row{flex-wrap:wrap}
 .ledger-row button{padding:8px}
 .dlg-body{padding:16px}
 .dlg-head{padding:12px 16px}
 .dlg-head h2{overflow-wrap:anywhere}
 .dlg-body .catalog-grid{grid-template-columns:1fr}
 .dlg-foot button{flex:1}
 .page-top{align-items:flex-start;flex-wrap:wrap}
 dialog{width:calc(100% - 20px);max-height:calc(100dvh - 24px)}
 #resource-drawer{margin:auto 0 0;width:100%;max-width:none;max-height:88dvh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
 #toast{bottom:96px}
 .footer{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.sheet-main{container:character-sheet / inline-size}

/* ── Sheet top (UI-03) ─────────────────────────────────────────────────────
   Guide: 02-components.md §2.8–2.10 and 03-screens.md §3.1 (rows 1–11).
   Reference: sheet-restyle-v7/sheet.css (identity, dossier, quick, vitals, abilities).
   The centre column is one flex column with a 20 px rhythm between its blocks. */
.sheet-main{display:flex;flex-direction:column;gap:20px}
.sheet-main>*{flex:none}
.sheet-main>.character-section-panel,.sheet-main>.footer,.sheet-main>.form-errors{margin-top:0;margin-bottom:0}
.diamond{display:inline-block;width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gold);flex:none}

/* Identity card: portrait, name, rest tiles, Inspiration, dossier */
.identity{display:flex;flex-direction:column;min-width:0;min-height:0;padding:14px 12px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.identity>.reference-alert{margin:0 0 10px}
.portrait-wrap{position:relative;flex:none;min-width:0}
.identity .portrait{width:100%;height:180px;aspect-ratio:auto;border-radius:112px 112px 10px 10px;outline:1px solid var(--line-strong);outline-offset:0;background-color:var(--sunken)}
.identity .portrait.reference{background-size:706% auto;background-position:.9% 2%}
.identity .portrait img{display:block;object-fit:cover;object-position:50% 20%}
.identity .portrait::after{inset:0;background:linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--well) 80%,transparent))}
.effects{position:absolute;z-index:1;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px;max-height:96px;overflow:auto;overscroll-behavior:contain}
.effect{display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:29px;max-width:100%;padding:4px 10px;border:1px solid var(--gold);border-radius:8px;background:color-mix(in srgb,var(--well) 90%,transparent);color:var(--gold-hi);font-size:13px;line-height:1.2;text-align:left;box-shadow:0 0 14px color-mix(in srgb,var(--gold) 25%,transparent)}
.effect:hover:not(:disabled){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 18%,var(--well));color:var(--gold-hi)}
.effect .diamond{width:6px;height:6px;background:var(--gold);border-color:var(--gold-hi)}
.effect-concentration{border-color:var(--gold-hi)}
.who{margin-top:14px;min-width:0}
.who h1{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font:600 36px/1.05 var(--serif);letter-spacing:-.005em}
.who .lvl{font:500 15px/1 var(--sans);color:var(--gold-hi);white-space:nowrap}
.who .lvl b{font:600 22px/1 var(--serif)}
.sheet-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.sheet-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:54px;padding:6px 4px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:14px;line-height:1.3;color:var(--ink)}
.sheet-actions svg{width:20px;height:20px;color:var(--gold)}
.sheet-actions .rest-icon-fire{color:var(--ember)}
.id-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.id-row .inspiration{flex:1;min-width:0}
.details-toggle{display:none}
.inspiration{display:flex;align-items:center;gap:4px;padding:6px;border:1px solid color-mix(in srgb,var(--arcane) 35%,transparent);border-radius:10px;background:linear-gradient(135deg,var(--arcane-wash),transparent 80%)}
.inspiration h2{display:flex;align-items:center;gap:6px;margin-right:auto;font:500 16px/1 var(--sans);color:var(--ink);white-space:nowrap}
.inspiration h2 .icon{width:17px;height:17px;color:var(--arcane)}
.inspiration-controls{display:flex;align-items:center;gap:5px}
.inspiration output{display:inline-block;min-width:2ch;text-align:center;font:700 20px/1 var(--sans)}
.inspiration button{display:grid;place-items:center;flex:none;width:30px;height:34px;min-width:0;min-height:0;padding:0;border:1px solid var(--line-strong);border-radius:7px;font-size:17px;line-height:1}
.inspiration button:hover:not(:disabled){border-color:var(--arcane);background:transparent;color:var(--arcane)}
.icon{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Dossier: five folds; also shown inside the Character details window below 1280 px */
.dossier{flex:1;min-height:0;margin:14px -12px -12px;padding:0 12px;overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--line-strong);border-radius:0 0 13px 13px;background:var(--sunken)}
@media(min-width:1280px){#app.sheet-open .dossier{margin-right:-12px}#app.sheet-open .effects{margin:0;padding:0}}
:is(.dossier,.dossier-modal) details{border-bottom:1px solid var(--line)}
:is(.dossier,.dossier-modal) summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none}
.dossier summary{font:600 18px/1 var(--serif);color:var(--ink)}
:is(.dossier,.dossier-modal) summary::-webkit-details-marker{display:none}
:is(.dossier,.dossier-modal) summary::before{content:none}
:is(.dossier,.dossier-modal) summary::after{content:'';margin-left:auto;margin-right:3px;width:7px;height:7px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:rotate(-45deg);transition:transform .15s}
:is(.dossier,.dossier-modal) details[open]>summary::after{transform:rotate(45deg)}
:is(.dossier,.dossier-modal) summary .count{font:500 13px var(--sans);color:var(--faint)}
:is(.dossier,.dossier-modal) .body{padding:0 0 10px;font-size:16px}
:is(.dossier,.dossier-modal) dl{margin:0}
:is(.dossier,.dossier-modal) .fact{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0}
:is(.dossier,.dossier-modal) .fact dt,:is(.dossier,.dossier-modal) .item-benefits dt{color:var(--muted)}
:is(.dossier,.dossier-modal) .fact dd,:is(.dossier,.dossier-modal) .item-benefits dd{margin:0;font-weight:500;text-align:right;overflow-wrap:anywhere}
:is(.dossier,.dossier-modal) .item-benefits{padding:5px 0}
:is(.dossier,.dossier-modal) .item-benefits dd{text-align:left;margin-top:2px}
.general-class-list{list-style:none;margin:0;padding:0}
.class-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0}
.general-class-details{min-width:0}
.general-class-name{display:block;font-weight:500;font-size:15px;line-height:22px;overflow-wrap:anywhere}
.general-class-subclass{display:block;font-size:14px;line-height:21px;color:var(--muted);overflow-wrap:anywhere}
.class-item .n{font:600 24px/1 var(--serif);color:var(--gold-hi)}
.proficiency-group+.proficiency-group{margin-top:8px}
.proficiency-group h4{margin:0;font-size:13px;line-height:20px;font-weight:700;color:var(--muted)}
.proficiency-group p{font-size:16px;line-height:24px;overflow-wrap:anywhere}
.proficiency-group p.muted{font-size:16px}

/* Quick stats: Speed, Proficiency bonus, Passive senses */
.quick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);gap:14px;margin:0}
.stat{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:12px 16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.stat>dt{font:600 16px/1.2 var(--sans);color:var(--ink)}
.stat>dd{display:flex;align-items:baseline;gap:10px;margin:0}
.stat>dd>.num{font:700 24px/1.2 var(--sans)}
.stat>dd small{margin-left:3px;font:500 15px var(--serif);color:var(--faint)}
.stat .extra{font:400 14px var(--sans);color:var(--muted)}
.passive-senses{display:flex;flex-wrap:wrap;gap:18px;margin:0}
.passive-sense{display:flex;align-items:baseline;gap:6px}
.passive-sense dt{font:400 14px/1.2 var(--sans);color:var(--muted)}
.passive-sense dd{margin:0;font:700 24px/1.2 var(--sans);color:var(--ink)}

/* Vitals: Hit points, Temporary HP, Armor class (172 px cards) */
.vitals{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1.12fr) minmax(0,1fr);gap:14px}
.v{position:relative;display:grid;grid-template-rows:38px minmax(0,1fr) 36px;row-gap:6px;min-width:0;min-height:172px;padding:14px;border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow)}
.v.hp{border-color:color-mix(in srgb,var(--ember) 45%,var(--line-strong));background:linear-gradient(135deg,var(--ember-wash),var(--surface) 70%)}
.v.temp{border-color:color-mix(in srgb,var(--frost) 45%,var(--line-strong));background:linear-gradient(135deg,var(--frost-wash),var(--surface) 70%)}
.v.ac{height:172px;border-color:color-mix(in srgb,var(--react) 55%,var(--line-strong));background:linear-gradient(135deg,color-mix(in srgb,var(--react) 20%,transparent),var(--surface) 70%)}
.v-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.v-head h2{display:flex;align-items:center;gap:7px;min-width:0;font:600 16px/1.3 var(--sans);color:var(--ink);white-space:nowrap}
.v-head h2 .icon{width:16px;height:16px}
.v.hp h2 .icon{color:var(--ember)}
.v.temp h2 .icon{color:var(--frost)}
.v.ac h2 .icon{color:var(--react)}
.v-value{font:700 32px/1 var(--sans);white-space:nowrap}
.v-value small{margin-left:4px;font:400 18px var(--sans);color:var(--muted)}
.v.temp .v-value{color:var(--frost)}
.v.hp.low .v-value strong{color:var(--ember)}
.v .bar{align-self:start;height:5px;margin:4px 0 0;border-radius:3px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.v .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--ember-deep),var(--ember));transition:width .3s ease}
.v.hp.low .bar span{background:var(--ember)}
.v-note{align-self:center;font-size:14px;color:var(--muted)}
.v .ctl{display:grid;grid-template-columns:60px 1fr 1fr;gap:6px;margin:0}
.v .ctl input{width:100%;min-width:0;padding:0 6px}
.v .ctl button{min-width:0;padding:0 8px}
.ac-body{align-self:center;min-width:0;max-height:100%;overflow:auto;overscroll-behavior:contain}
.crest{position:relative;flex:none;display:grid;place-items:center;width:34px;height:38px;color:var(--gold)}
.crest svg{position:absolute;inset:0;width:100%;height:100%}
.crest span{position:relative;margin-top:-2px;font:700 22px/1 var(--sans);color:var(--ink)}
.v.ac .crest{color:var(--react)}
.v.ac .crest svg path:first-child{fill:color-mix(in srgb,var(--react) 16%,transparent)}
.ac-terms{list-style:none;margin:0;padding:0;min-width:0;font-size:14px;line-height:1.3;outline-offset:-2px}
.ac-terms li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;color:var(--muted);border-bottom:1px dashed var(--line)}
.ac-terms li>span{overflow-wrap:anywhere}
.ac-terms b{color:var(--ink);font-weight:500}
.ac-mod{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:14px;color:var(--muted)}
.ac-mod input{flex:none;width:calc(5ch + 24px);min-width:0;padding:0 6px}

/* Abilities & saving throws: one card, seven merged tiles, Initiative first */
.abilities-card{--card-pad:0;padding:0;overflow:hidden}
.legend{display:flex;gap:12px;margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.legend span{display:inline-flex;align-items:center;gap:7px}
.abilities{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:0;padding:14px 16px}
.ability{display:flex;flex-direction:column;align-items:stretch;min-width:0;border:1px solid var(--line-strong);border-radius:50% 50% var(--r) var(--r)/24px 24px var(--r) var(--r);background:linear-gradient(180deg,var(--raised),var(--surface));box-shadow:var(--shadow);text-align:center;overflow:hidden}
.ability.init{border-color:color-mix(in srgb,var(--gold) 55%,var(--line-strong));border-radius:var(--r);background:var(--gold-wash)}
.ability .check{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:1;min-width:0;min-height:72px;padding:10px 6px 8px;border:0;border-radius:0;background:transparent;font-size:inherit;text-align:center;color:var(--ink)}
.ability .save{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:34px;padding:0 6px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;font-size:14px;color:var(--muted)}
.ability .save strong{font-weight:700;color:var(--ink)}
.ability .save.prof strong{color:var(--gold-hi)}
.ability .save.note{font-size:13px;color:var(--faint);cursor:default}
.ability .check:hover:not(:disabled),.ability .save:not(.note):hover:not(:disabled){border-color:transparent;background:var(--gold-wash);color:var(--ink)}
.ability .save:not(.note):hover:not(:disabled){border-top-color:var(--line)}
.ability .name{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.ability .mod{display:inline-flex;align-items:center;gap:6px;margin:0;font:700 26px/1 var(--sans);color:var(--ink)}
.ability .score{min-width:24px;padding:0 5px;border:1px solid var(--line);border-radius:999px;background:var(--sunken);font:400 12px/18px var(--sans);color:var(--muted)}
.mark{position:relative;display:inline-block;flex:none;width:9px;height:9px;transform:rotate(45deg);border:1.3px solid var(--faint)}
.mark.full{border-color:var(--gold-hi);background:var(--gold)}
.mark.half{border-color:var(--gold);background:linear-gradient(135deg,var(--gold) 50%,transparent 50%)}
.mark.expertise{border-color:var(--gold-hi);background:var(--gold-hi);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--gold)}

/* Responsive: identity becomes a strip under 1280 px, then a compact one under 760 px */
@media(max-width:1279px){
 .identity{grid-column:1/-1;display:grid;grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"pic who acts" "pic insp acts" "pic exh acts";align-items:center;gap:4px 18px;padding:12px 14px}
 .identity>.reference-alert{grid-column:1/-1;grid-area:auto}
 .portrait-wrap{grid-area:pic}
 .identity .portrait{height:112px;border-radius:48px 48px 10px 10px;outline-offset:3px}
 .effects{position:static;max-height:none;margin-top:8px}
 .effect{font-size:12px}
 .who{grid-area:who;align-self:end;margin:0}
 .who h1{font-size:34px}
 .id-row{grid-area:insp;align-self:start;margin-top:6px}
 .id-row+.id-row{grid-area:exh}
 .id-row .inspiration{flex:none;padding:4px 6px 4px 10px}
 .sheet-actions{grid-area:acts;grid-template-columns:repeat(3,92px);margin:0}
 .dossier{display:none}
 .details-toggle{display:inline-flex}
 .quick{grid-template-columns:1fr 1fr}
 .stat.passive-cell{grid-column:1/-1}
 .ability .check{padding:10px 4px 8px}
 .ability .name{font-size:14px}
}
@media(max-width:980px){
 .vitals{grid-template-columns:1fr 1fr}
 .v.ac{grid-column:1/-1}
 .abilities{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
 .identity{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"pic who" "insp insp" "exh exh" "acts acts";padding:12px;margin:0}
 .identity .portrait{height:86px;border-radius:36px 36px 8px 8px}
 .who h1{font-size:30px}
 .id-row{margin-top:10px;flex-wrap:wrap}
 .id-row .inspiration{flex:1}
 .sheet-actions{grid-template-columns:repeat(3,1fr);margin-top:10px}
 .effect{min-height:44px}
 .sheet-main{overflow:visible;gap:14px;padding-top:16px}
 .vitals,.quick{grid-template-columns:1fr}
 .v{grid-template-rows:38px minmax(0,1fr) 44px}
 .v.ac{grid-column:auto}
 .abilities{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}
 .ability .name{white-space:normal;text-align:center}
 .stat{padding-right:10px}
 .stat+.stat{padding-left:12px}
}

.rest-button,.dice-button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.rest-icon,.dice-icon{width:18px;height:18px;flex:none}
.rest-icon-fire{color:var(--ember)}

.dice-mode,.dice-set{border:0;padding:0;margin:0;min-width:0}
.dice-mode{margin-bottom:16px}
.dice-mode legend{margin-bottom:8px;padding:0}
.dice-mode .subtabs{width:max-content}
.subtabs label{position:relative;display:block;gap:0;cursor:pointer;font-size:inherit;color:inherit}
.subtabs label input{position:absolute;opacity:0;width:100%;height:100%;margin:0}
.subtabs label span{display:flex;align-items:center;min-height:42px;padding:0 12px;font-size:15px;line-height:1.4;color:var(--muted);white-space:nowrap}
.subtabs label:hover span{color:var(--ink)}
.subtabs label input:checked+span{color:var(--gold-hi);font-weight:700}
.subtabs label input:checked+span::after{content:'';position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--gold);border-radius:2px}
.subtabs label input:focus-visible+span{outline:2px solid var(--gold-hi);outline-offset:-2px;border-radius:0}
.dice-set-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dice-set-entry{display:flex;gap:4px;padding:8px;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg)}
.dice-set-entry button{flex:none;padding:8px;min-width:50px}
.dice-set-entry label{min-width:0}
.dice-set-entry input{padding:8px 4px;text-align:center}
/* One action row at the bottom, reachable even while a long dialog scrolls. */
#modal .dlg-body>.dlg-foot,#modal-form>.dlg-foot{position:sticky;bottom:0;z-index:1;padding:16px 24px;margin:24px -24px -24px;background:var(--surface);border-top:1px solid var(--line)}

/* Keep overlay scrollbars away from long choice labels. */
.choice-options.scroll{padding-right:12px;margin-right:-8px}

.check-label{display:flex;align-items:center;gap:6px;min-width:0;text-align:left}

/* Filter rows stay on one line and scroll within their available width. */
.hist-controls{position:sticky;top:-16px;z-index:1;display:grid;gap:8px;min-width:0;margin:-16px -12px 10px;padding:14px 12px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.hist-controls>select{width:100%;min-width:0}
.hist-controls :focus-visible{outline-offset:-2px}
.history-search-row{display:flex;align-items:center;gap:8px;min-width:0}
.history-search-row>input{flex:1;width:auto;min-width:0;min-height:44px}
button.trash{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid color-mix(in srgb,var(--ember) 45%,transparent);border-radius:8px;color:var(--ember)}
button.trash:hover:not(:disabled){background:var(--ember-wash);border-color:var(--ember);color:var(--ember)}
.event{position:relative;padding:10px 0;border-bottom:1px solid var(--line)}
.history-event-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}
.event time{min-width:0;font-size:13px;color:var(--faint)}
button.undo{flex:none;height:28px;min-height:28px;min-width:0;padding:0 10px;border:1px solid var(--line-strong);border-radius:6px;background:transparent;font-size:12px;line-height:1;color:var(--muted)}
button.undo:hover:not(:disabled){border-color:var(--gold);background:transparent;color:var(--gold-hi)}
.event .tags{display:flex;flex-wrap:wrap;gap:6px;margin:3px 0 4px}
.event p{margin:0;font-size:16px;line-height:1.45}
.event.undone p{color:var(--faint);text-decoration:line-through}
.attacks-heading{justify-content:space-between;gap:20px;flex-wrap:nowrap;min-width:0}
.attacks-heading>.subtabs{min-width:0}
.attacks-title{flex:none;min-width:0;display:flex;align-items:baseline;gap:10px}
.attacks-title .muted{margin-top:0;font-size:14px;white-space:nowrap}
.attacks-heading h2{min-width:0}

/* Reserve 52 px of the 100 px calculation area for the fixed bonus row. */

.skill-check{width:100%;justify-content:space-between;text-align:left}
button.skill{display:flex;align-items:center;gap:7px;width:100%;min-height:36px;margin:0;padding:0 2px;border:0;border-bottom:1px solid var(--line);border-radius:4px;background:transparent;font-size:15px;color:var(--ink)}
button.skill:hover:not(:disabled){border-color:var(--line);background:var(--gold-wash);color:var(--ink)}
button.skill .check-label{flex:1;gap:7px}
button.skill .ab{width:28px;flex:none;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--faint)}
button.skill strong{margin-left:auto;font:700 17px var(--sans)}
button.skill.prof strong{color:var(--gold-hi)}
.block[data-resource] .resource-line{padding:0;border:0}
.block[data-resource] .resource-line>.row{align-items:flex-start}
.block[data-resource] .resource-line>.row>div{min-width:0;overflow-wrap:anywhere}
.block[data-resource] .resource-line h3{margin:0 0 4px;font:600 21px/1.1 var(--serif)}
.block[data-resource] .resource-line small{font-size:14px;color:var(--muted)}
.block[data-resource] .resource-recovery{display:block;margin-top:6px;color:var(--faint)}
.block[data-resource] [data-action=use-resource]{flex-shrink:0}
.resource-remaining{display:block}
.resource-recovery{display:block;margin-top:4px;font-size:11px;line-height:1.5}

h1,h2,h3{overflow-wrap:anywhere}.prose{white-space:pre-line}
/* Source line breaks must not constrain descriptions to a printed column. */
#modal .prose{white-space:normal}

/* Main navigation: top bar crumbs, menu panel, character switcher. */
.icon-btn svg,.drawer svg,#character-switcher svg{width:20px;height:20px;flex:none}
.crumbs{min-width:0;flex:1}
.crumbs ol{display:flex;align-items:center;gap:10px;list-style:none;padding:0;margin:0;min-width:0;font-size:15px;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:10px;min-width:0}
.crumbs li+li::before{content:'/';color:var(--faint);flex:none}
.crumbs button{display:inline-flex;align-items:center;gap:4px;min-width:0;padding:0 6px;border:0;border-radius:6px;background:transparent;font-size:15px;color:var(--muted)}
.crumbs button:hover:not(:disabled){color:var(--gold-hi);background:transparent}
.crumbs button svg{width:15px;height:15px}
.crumbs .crumb-char{flex:0 1 auto;max-width:360px}
.crumb-char button{color:var(--ink);font-weight:500}
.crumb-char button[aria-expanded=true]{color:var(--gold-hi);background:var(--gold-wash)}
.crumb-char button>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs .current{color:var(--ink);font-weight:500}
.crumbs .current>span{display:block;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Round resources stay above all three independently scrolling sheet columns. */
.action-tracker{position:relative;z-index:2;display:flex;align-items:center;gap:18px;padding:8px 28px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--gold-wash),transparent 70%)}
.tracking-round{font:600 20px/1 var(--serif);color:var(--ink);white-space:nowrap}
.tracking-round strong{margin-left:4px;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.action-tracker-resources,.action-tracker-controls{display:flex;align-items:center;gap:8px}
.action-tracker-controls{margin:0 0 0 auto}
.action-tracker-controls button{white-space:nowrap}
button.action-resource{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;text-align:left;background:transparent;border:1px solid var(--line-strong);border-radius:8px;font-size:14px;color:var(--ink)}
button.action-resource[aria-pressed=true]{background:transparent;border-color:var(--line-strong);color:var(--ink)}
button.action-resource:hover:not(:disabled){background:var(--raised);border-color:var(--line-strong);color:var(--ink)}
.action-resource small{display:block;font-size:12px;line-height:1.3;color:var(--ok)}
.action-resource-icon{width:16px;height:16px;flex:none;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
[data-resource=action] .action-resource-icon{color:var(--adv)}
[data-resource=bonus] .action-resource-icon{color:var(--gold)}
[data-resource=reaction] .action-resource-icon{color:var(--react)}
button.action-resource.spent{border-style:dashed;color:var(--faint)}
.action-resource.spent small{color:var(--faint)}
.action-resource.spent .action-resource-icon{color:var(--faint);fill:none}
.action-resource.resource-changed{animation:resource-feedback .7s ease-out}
@keyframes resource-feedback{0%{background:color-mix(in srgb,var(--gold) 19%,transparent)}100%{background:transparent}}
@media(prefers-reduced-motion:reduce){.action-resource.resource-changed{animation:none}}
@media(max-width:900px){.action-tracker{gap:8px;flex-wrap:wrap;padding:8px 16px}.action-tracker-resources{gap:0;flex:1;justify-content:space-between}.action-tracker-controls{justify-content:flex-end;width:100%}.action-resource{font-size:12px}button.action-resource{padding:6px;gap:6px}.tracking-round{font-size:12px}}
@media(max-width:479px){.action-tracker .tracking-round{width:100%}.action-tracker-resources{width:100%}.action-tracker-controls>button{flex:1}.top-actions>[data-action=start-action-tracking]{font-size:12px}}
#main:focus{outline:none}
/* Native modal dialogs make the background inert, but do not lock its scroll. */
html:has(dialog[open]),body:has(dialog[open]){overflow:hidden;overscroll-behavior:none}
dialog{overscroll-behavior:contain}

.drawer{position:fixed;inset:0 auto 0 0;margin:0;width:min(320px,90vw);max-width:calc(100% - 24px);height:100dvh;max-height:none;border:0;border-right:1px solid var(--line);border-radius:0 16px 16px 0;overflow:hidden;box-shadow:16px 0 64px color-mix(in srgb,black 40%,transparent)}
.drawer[open]{display:flex;flex-direction:column;animation:navigation-enter .22s cubic-bezier(.2,.8,.2,1)}
.drawer::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
.drawer .dlg-head{position:static;flex:none}
.drawer .dlg-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.drawer .dlg-foot{flex:none;margin:0;padding:12px 20px 16px;border-top:1px solid var(--line)}
#character-switcher{position:fixed;inset:auto;margin:0;width:360px;max-width:calc(100% - 24px);border-radius:14px;overflow:hidden;box-shadow:0 16px 56px color-mix(in srgb,black 53%,transparent)}
#character-switcher[open]{display:flex;flex-direction:column}
#character-switcher::backdrop{background:color-mix(in srgb,var(--backdrop) 40%,transparent);backdrop-filter:none}
#character-switcher .dlg-head{position:static;flex:none;padding:12px 16px}
#character-switcher .dlg-body{flex:1;min-height:0;padding:12px 16px;overflow-y:auto;overscroll-behavior:contain}
#character-switcher .dlg-foot{flex:none;margin:0;padding:10px 16px 12px;border-top:1px solid var(--line)}
@keyframes navigation-enter{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.drawer[open]{animation:none}}
/* Offline reference cards in the existing Codex. */
.entry-origin{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:8px}
.reference-alert{padding:16px;margin-bottom:16px;border:1px solid var(--gold);border-radius:12px;color:var(--ink);background:var(--gold-wash)}
.reference-heading{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.reference-image{object-fit:contain;border-radius:12px;background:var(--bg);flex-shrink:0}
.reference-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:0 0 24px;padding:16px;background:var(--bg);border-radius:12px}
.reference-fields dt{margin-bottom:4px}.reference-fields dd{margin:0;overflow-wrap:anywhere}
.reference-prose{line-height:1.7;overflow-wrap:anywhere}.reference-prose p{margin:0 0 16px}.reference-prose h3{margin:24px 0 12px}
.reference-list-item{padding-left:20px;position:relative}.reference-list-item:before{content:'•';position:absolute;left:0;color:var(--gold-hi)}
button.reference-link{display:inline-block;min-width:var(--hit);min-height:var(--hit);padding:8px 4px;margin:0;border:0;background:none;color:var(--gold-hi);line-height:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:3px;white-space:normal}
.reference-link:hover{color:var(--gold-hi);background:var(--gold-wash)}.reference-table-wrap{overflow:auto;margin:16px 0;border:1px solid var(--line-strong);border-radius:8px}
.ledger.reference{font-size:14px}.ledger.reference td{min-width:70px;vertical-align:top}.ledger.reference tr:first-child{font-weight:600}
.reference-sources{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;color:var(--muted)}.reference-sources small{display:block;margin-top:8px}
/* CREATE-01–05: desktop wizard, matching the supplied navigation and field order. */
.creation-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
.creation-navigation{position:sticky;top:24px;min-height:calc(100dvh - 164px);border:1px solid var(--line-strong);background:var(--surface);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:16px}
.creation-navigation nav:not(.subtabs){display:grid;gap:8px}.creation-navigation nav:not(.subtabs) button{text-align:left;background:transparent;border-color:transparent}.creation-navigation nav:not(.subtabs) button.selected{background:var(--gold-wash);border-color:var(--gold)}
.creation-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:auto}
.creation-actions>button{min-width:0;padding-inline:12px}
.creation-content{min-width:0;padding:24px;min-height:220px}.creation-title{margin-bottom:24px}
.wizard-field{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:start;gap:16px;margin-bottom:12px;min-width:0}.wizard-field>span{padding-top:10px}.wizard-field.readonly>div{padding:10px 0;color:var(--muted);overflow-wrap:anywhere}
.wizard-field select,.wizard-field input,.wizard-field textarea{min-width:0;width:100%}.wizard-field textarea{min-height:76px}.wizard-field .portrait-upload{min-width:0}
.class-select-row{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:16px}.class-select-row .wizard-field{grid-template-columns:64px minmax(0,1fr)}
.wizard-band{background:var(--raised);color:var(--ink);padding:10px 12px;margin:0 0 16px;border-radius:8px}
.wizard-band.mt{margin-top:24px}.class-level+.class-level{margin-top:24px}
.wizard-help{font-size:12px;color:var(--muted);margin:4px 0 16px 216px}.wizard-description{margin:8px 0 0 216px}.wizard-score{display:grid;grid-template-columns:minmax(100px,180px) 1fr;align-items:center;gap:16px}.wizard-asi{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.creation-content .form-errors:empty{display:none}.creation-content .form-errors:not(:empty){margin-bottom:24px;white-space:pre-line}.pending-spell-features{margin:16px 0;padding:16px;border:1px solid var(--line-strong);border-radius:10px;color:var(--muted)}
/* Chosen classes and the active editor share the main form. */
.chosen-classes{position:sticky;top:24px;min-width:0;min-height:calc(100dvh - 164px);padding:16px;display:flex;flex-direction:column;gap:16px}
.chosen-classes h2{font-size:14px;padding:8px 12px}.chosen-class-list{display:grid;gap:8px}
.chosen-class{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;background:transparent;border-color:transparent;padding:8px 12px}
.chosen-class strong{font-size:14px;min-width:0;overflow-wrap:anywhere}.chosen-class>span{white-space:nowrap;font-size:12px;color:var(--muted)}.chosen-class.selected>span{color:inherit}
.class-editor-actions{display:flex;justify-content:flex-end;border-top:1px solid var(--line);margin-top:24px;padding-top:16px}
.wizard-field select.choice-empty{border:2px solid var(--ember);background-color:var(--ember-field)}
.wizard-field select.choice-empty:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.wizard-choice-help{color:var(--muted);font-size:12px;line-height:1.6;margin:0 0 20px}
.wizard select option,.wizard select optgroup{background-color:var(--sunken);color:var(--ink)}
.wizard-field option:disabled{color:var(--muted)}
/* UI-06: characters list = card with a ledger of row-cards (guide 3.2). */
.character-grid{width:100%;table-layout:fixed}
.character-name-column{width:auto}.character-system-column{width:170px}.character-level-column{width:84px}.character-actions-column{width:268px}
.character-grid tbody tr{cursor:pointer}
.ledger.character-grid thead th.c{text-align:center}
.character-grid tbody tr:focus-within>*{background:color-mix(in srgb,var(--gold-wash) 60%,var(--raised))}
.character-grid td{color:var(--muted)}
.character-grid tbody th{font-weight:400}
.character-row-identity{display:flex;align-items:center;gap:14px;min-width:0}
.character-grid .portrait.small{flex:none;width:44px;height:44px;aspect-ratio:1;border-radius:50%;font-size:20px}
.character-row-text{min-width:0;flex:1}
.character-row-open{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;max-width:100%}
.ledger button.character-row-open{min-height:0;padding:0;border:0;background:transparent;text-align:left;font:500 17px/1.3 var(--sans);color:var(--ink)}
.ledger button.character-row-open:hover:not(:disabled){background:transparent;color:var(--gold-hi);text-decoration:underline}
.character-row-text small{display:block;margin-top:3px;font-size:14px;color:var(--muted)}
.character-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.character-row-actions button{white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0!important}

/* Inert creation references and explicit optional features. */
.wizard-description{ min-width: 0; overflow-wrap: anywhere; margin: 8px 0; }
.wizard-description summary{ min-height: 44px; padding: 12px 8px; cursor: pointer; color: var(--ink); }
.wizard-description p{ line-height: 1.55; margin: 8px; }
.wizard-table-scroll{ max-width: 100%; overflow: auto; }
.wizard-table-scroll td{ padding: 8px; }
.wizard-optional{ border: 1px solid var(--line-strong); border-radius: 12px; margin: 12px 0; padding: 12px; }
.wizard-optional > label{ display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.wizard-optional input{ min-width: 24px; width: 24px; height: 24px; }
.wizard-review{ border-left: 2px solid var(--gold); padding-left: 8px; color: var(--muted); }

/* Class features share one labelled row; details open in a read-only dialog. */
.wizard-field.readonly > .wizard-feature-list{ display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; padding: 0; }
.wizard-feature-row > span{ padding-top: 12px; }
.wizard-feature-link{ display: inline; min-width: 44px; min-height: 44px; height: auto; max-width: 100%; padding: 8px 2px; border: 0; border-radius: 4px; background: transparent; color: var(--gold-hi); font: inherit; line-height: 1.5; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.wizard-feature-link:hover{ background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.wizard-feature-link:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.feature-separator{ color: var(--muted); margin-left: -3px; }
.wizard-optional-heading{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.creation-feature-description{ min-width: 0; overflow-wrap: anywhere; line-height: 1.65; }
.creation-feature-description p{ margin: 0 0 16px; }
.creation-feature-description h3{ margin: 24px 0 12px; }

/* Ammunition belongs to its weapon; tracking is an application preference. */
#roll-menu{position:fixed;inset:auto;margin:0;width:280px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:6px;border:1px solid var(--line-strong);border-radius:12px;background:var(--overlay);color:var(--ink);box-shadow:0 22px 60px color-mix(in srgb,black 55%,transparent);overflow:auto}
.roll-menu-heading{display:grid;gap:4px;padding:6px 10px 8px;overflow-wrap:anywhere}
.roll-menu-heading strong{font:600 17px/1.2 var(--serif);color:var(--gold-hi)}
.roll-menu-hint{margin:0;padding:0 10px 12px;font-size:12px;color:var(--muted)}
#roll-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:52px;padding:8px 10px;background:transparent;border:0;border-radius:8px;text-align:left;font-size:15px}
#roll-menu button:hover,#roll-menu button:focus-visible{background:var(--gold-wash);color:var(--gold-hi);outline:none}
#roll-menu button small{font-size:13px;color:var(--muted)}
/* Mode colours stay on the word itself, so hover and focus (which recolour the button) keep them. */
.roll-mode[data-roll-mode=advantage]{color:var(--adv)}
.roll-mode[data-roll-mode=disadvantage]{color:var(--dis)}
.roll-mode[data-roll-mode=critical]{color:var(--ember)}
.cast-roll-modes{display:grid;gap:8px;padding:0;border:0;min-width:0}
.cast-roll-modes legend{margin-bottom:8px}
#roll-results{position:fixed;top:24px;right:24px;z-index:60;display:flex;flex-direction:column;gap:8px;width:340px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;pointer-events:none;padding:4px 12px 4px 4px}
#roll-results .result-notice{display:grid;gap:8px;flex:none;width:100%;padding:8px 14px;border:1px solid var(--gold);border-radius:12px;background:var(--overlay);color:var(--ink);box-shadow:0 18px 44px color-mix(in srgb,black 50%,transparent);text-align:left;overflow-wrap:anywhere;pointer-events:auto;animation:result-rise .2s ease}
#roll-results .result-notice:hover{border-color:var(--gold-hi);background:var(--raised)}
/* Roll cards: the total sits in its own column left of the text, like the reference .result. */
#roll-results .roll-result{grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center}
#roll-results .roll-result>*{grid-column:2}
#roll-results .roll-result>.roll-result-value{grid-column:1;grid-row:1 / span 5;flex-direction:column;align-items:center;gap:0;min-width:40px;text-align:center}
@keyframes result-rise{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){#roll-results .result-notice{animation:none}}
.spell-cast-name{font-size:22px;line-height:1.3}
#roll-results .roll-result[data-critical=success]{background:var(--crit-ok-bg);border-color:var(--adv)}
#roll-results .roll-result[data-critical=failure]{background:var(--crit-fail-bg);border-color:var(--dis)}
#roll-results .roll-result[data-critical=success]:hover{background:color-mix(in srgb,var(--adv) 12%,var(--crit-ok-bg))}
#roll-results .roll-result[data-critical=failure]:hover{background:color-mix(in srgb,var(--dis) 12%,var(--crit-fail-bg))}
.roll-result[data-critical=success] .roll-critical-label,.roll-result[data-critical=success] .roll-total{color:var(--adv)}
.roll-result[data-critical=failure] .roll-critical-label,.roll-result[data-critical=failure] .roll-total{color:var(--dis)}
.roll-result[data-critical] .muted,.roll-result[data-critical] .roll-term-label,.roll-result[data-critical] .roll-dismiss-hint{color:var(--ink)}
.roll-critical-label{font-size:12px;line-height:1.4;letter-spacing:.06em;font-weight:700}
.roll-result-heading{font-size:14px;line-height:1.4;font-weight:500}
.roll-result .roll-total{font:600 32px/1 var(--serif);color:var(--gold-hi);flex:none}
.roll-result-value{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.roll-damage-type{font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.spell-slot-usage{display:block;border-top:1px solid var(--line);padding-top:8px;font-size:12px;line-height:1.5}
.spell-resource-usage{display:block;font-size:12px;line-height:1.5}
.roll-result-dice{display:grid;gap:4px;font-size:14px;line-height:1.5;color:var(--muted)}
.roll-term-label{color:var(--muted)}
.roll-addends{font-variant-numeric:tabular-nums}
.spell-roll-list{display:grid;gap:6px}
.spell-roll-row{display:grid;gap:4px;border-top:1px solid var(--line);padding-top:6px;font-size:12px;line-height:1.4}
.spell-roll-label{font-weight:600}
.spell-roll-values{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.spell-roll-row .roll-total{font-size:20px}
.spell-roll-row .roll-damage-type{font-size:12px}
.spell-roll-row[data-critical]{padding:8px;border-radius:6px}
.spell-roll-row[data-critical=success]{background:var(--crit-ok-bg);color:var(--adv)}
.spell-roll-row[data-critical=failure]{background:var(--crit-fail-bg);color:var(--dis)}
.spell-roll-row[data-critical] .muted,.spell-roll-row[data-critical] .roll-term-label{color:var(--ink)}
.roll-dismiss-hint{color:var(--muted);font-size:11px}
.ledger.attacks,.ledger.actions,.ledger.features,.ledger.spells{table-layout:fixed}
.ledger.attacks th:nth-child(1){width:22%}.ledger.attacks th:nth-child(2){width:13%}.ledger.attacks th:nth-child(3){width:10%}.ledger.attacks th:nth-child(4){width:12%}.ledger.attacks th:nth-child(5){width:23%}
.ledger.actions th:nth-child(1){width:17%}.ledger.actions th:nth-child(2){width:12%}.ledger.actions th:nth-child(3){width:12%}.ledger.actions th:nth-child(4){width:12%}.ledger.actions th:nth-child(5){width:37%}.ledger.actions th:nth-child(6){width:10%}
.ledger.features th:nth-child(1){width:18%}.ledger.features th:nth-child(2){width:26%}.ledger.features th:nth-child(3){width:56%}
.ledger.spells th:nth-child(1){width:20%}.ledger.spells th:nth-child(2){width:13%}.ledger.spells th:nth-child(3){width:11%}.ledger.spells th:nth-child(4){width:10%}.ledger.spells th:nth-child(5){width:15%}.ledger.spells th:nth-child(6){width:19%}.ledger.spells th:nth-child(7){width:12%}
.ledger.inventory{table-layout:fixed}
.ledger.attacks :is(th:nth-child(5),.weapon-ammunition-cell){text-align:center}
.item-properties{margin:0;padding:0;max-height:6.4em;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;overflow-wrap:anywhere;line-height:1.6;background:transparent}
.item-properties:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.ledger.attacks [data-action=roll]{width:100%}
/* Only the inventory list adopts the compact table from OPT-04. */
.inventory-grid{position:relative;min-width:0;overflow-x:auto}
.ledger.inventory{min-width:580px}
.inventory-quantity-col{width:96px}
.inventory-weight-col{width:88px}
.inventory-properties-col{width:30%}
.inventory-action-col{width:80px}
.inventory-item-type{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.inventory-item-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ledger.inventory .item-quantity{width:72px;max-width:100%;padding:0 6px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.ledger.inventory .item-quantity[aria-invalid=true]{border-color:var(--ember)}
.inventory-item-weight{font-variant-numeric:tabular-nums}
.inventory-item-action button{min-width:var(--hit);font-size:12px;padding:8px;white-space:nowrap}
.weapon-ammunition{display:grid;gap:2px}
.weapon-ammunition{font-size:12px;overflow-wrap:anywhere}
.weapon-ammunition .ammo-count{font-size:16px}
.ammunition-picker{position:relative;display:flex;align-items:center;gap:6px;min-height:var(--hit);min-width:0;padding:6px;border:1px solid var(--line-strong);border-radius:8px;color:var(--muted);font-size:12px;line-height:1.4}
.ammunition-picker:hover{border-color:var(--gold-hi);color:var(--ink)}
.ammunition-picker:has(select:focus-visible){outline:2px solid var(--gold-hi);outline-offset:2px}
.ammunition-picker .ammo-name{flex:1;min-width:0;overflow-wrap:anywhere}
.ammunition-chevron{flex:none;color:var(--gold-hi)}
.ammunition-picker select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.other-action-uses strong{white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums}
.other-action-description{padding:12px;background:var(--sunken);border-radius:8px;max-height:160px;overflow-y:auto;scrollbar-width:thin}
.other-action-description .prose{white-space:normal;font-size:12px;line-height:1.55}
.other-action-description .prose p:last-child{margin-bottom:0}

.ledger.features .feature-origin{font-size:14px}
.feature-origin small{display:block;margin-top:4px;line-height:1.45;font-size:11px}
.feature-description{padding:12px;background:var(--sunken);border-radius:8px;max-height:224px;overflow-y:auto;scrollbar-width:thin}
.feature-description .prose{font-size:12px;line-height:1.55;white-space:normal}
.feature-description .prose p:last-child{margin-bottom:0}
.other-action-control button{width:100%;min-width:var(--hit);padding:8px}
.settings-page{max-width:800px}
/* UI-06: settings = one card, one row per setting: name, hint, control on the right (guide 3.4). */
.settings-list{display:flex;flex-direction:column;margin:calc(var(--card-pad) * -1) 0}
.setting-row{justify-content:space-between;gap:24px;min-height:64px;padding:14px 4px;border-bottom:1px solid var(--line)}
.setting-row:last-child{border-bottom:0}
.setting-row .setting-text{flex:1 1 200px;min-width:0}
.setting-row .setting-text strong{display:block}
.setting-row .setting-text small{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--muted)}
.setting-row>input[role=switch]{flex:none;width:20px;height:20px;min-height:20px;accent-color:var(--gold);cursor:pointer}
.setting-row>input[type=number]{flex:none;width:calc(5ch + 24px);padding-inline:0}
.setting-row>label.setting-text,label.setting-row{cursor:pointer}
.setting-row .theme-choice{flex:none;width:auto}
#toast{padding:0}
#toast.visible{pointer-events:auto}
#toast>button{width:100%;padding:12px 20px;border:0;border-radius:inherit;color:inherit;background:transparent;text-align:left;overflow-wrap:anywhere}
#toast>button:hover{background:transparent}
.settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;min-height:var(--hit)}
.settings-toggle>span{min-width:0}.settings-toggle strong{display:block}.settings-toggle small{display:block;margin-top:8px}
.settings-toggle input[role=switch]{appearance:none;flex:0 0 52px;width:52px;height:32px;min-height:32px;padding:0;border-radius:20px;background:var(--line);position:relative;cursor:pointer}
.settings-toggle input[role=switch]::before{content:'';position:absolute;width:24px;height:24px;top:3px;left:3px;border-radius:50%;background:var(--ink)}
.settings-toggle input[role=switch]:checked{background:var(--gold);border-color:var(--gold-hi)}
.settings-toggle input[role=switch]:checked::before{left:23px;background:var(--bg)}

/* Compact wallet rows align each currency, balance and inline controls. */
.wallet-panel{position:relative}
.wallet-rows{display:grid;gap:8px}
.wallet-row{display:grid;grid-template-columns:minmax(120px,140px) minmax(100px,140px) minmax(0,1fr);align-items:center;gap:12px;min-height:62px;padding:8px 12px;background:var(--section-row-surface,var(--surface));border:1px solid var(--line-strong);border-radius:8px;min-width:0;font-size:14px}
.wallet-row>strong{min-width:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.wallet-balance{min-width:0;font-size:16px;overflow-wrap:anywhere}
.wallet-operation-controls{display:grid;grid-template-columns:112px repeat(3,max-content);align-items:center;gap:6px;min-width:0}
.wallet-row input{min-width:0;width:100%;min-height:var(--hit);text-align:center}
.wallet-row button{min-width:var(--hit);min-height:var(--hit);padding:8px;font-size:14px;overflow-wrap:anywhere}
.wallet-total-row{min-height:48px;background:var(--raised);border-color:var(--line-strong)}
.wallet-total-row .wallet-balance{color:var(--gold-hi);font-size:17px;font-weight:600}
.wallet-transfer-note{margin:0 0 12px;color:var(--muted);overflow-wrap:anywhere}
.wallet-transfer-note strong{color:var(--ink);font-weight:500}
.wallet-footer{display:flex;align-items:center;gap:12px;margin-top:12px}
.wallet-footer button{flex:none}
@container character-sheet (max-width:720px){
 .wallet-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .wallet-balance{justify-self:end;text-align:right}
 .wallet-operation-controls{grid-column:1/-1}
}
@container character-sheet (max-width:540px){
 .wallet-operation-controls{grid-template-columns:repeat(3,minmax(0,1fr))}
 .wallet-operation-controls>input{grid-column:1/-1}
}

/* CHAR-03: class tabs and per-spell reference columns. */
.spell-list-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;gap:12px;margin:0 0 12px}
.spell-list-tools>input{min-width:0}
.spell-list-tools>.spell-counts{min-width:0;margin:0}
.spell-counts{margin:0 0 12px}
.spell-counts-with-total{display:flex;align-items:center;gap:12px}
.spell-counts-with-total>.spell-count-grid{flex:1;min-width:0}
.spell-preparation-total{flex:none;display:inline-flex;align-items:center;gap:8px;padding:0 12px;background:var(--well);border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--muted);text-align:center}
.spell-preparation-total>strong{font-size:15px;line-height:1.2;color:var(--gold-hi);white-space:nowrap}
.spell-preparation-total>strong.over-limit{color:var(--ember)}
.spell-count-grid{gap:2px}
.spell-count>span{white-space:nowrap}
.spell-preparation-total.selected{border-color:var(--gold);color:var(--gold-hi)}
.spell-count>strong.mono{font-size:15px;line-height:1.2;white-space:nowrap}
.spell-count>strong.over-limit{color:var(--ember)}
.spell-count>small{color:var(--muted);font-size:12px;line-height:1.2}
.ledger.spells td>span{display:block}
.ledger [data-action=cast],.ledger [data-action=use-resource],.ledger .other-action-control button{padding:0 8px;white-space:nowrap}
.ledger.spells .badge{white-space:normal;margin-top:4px}
.ledger.spells .spell-effect{color:var(--gold-hi)}
.ledger.spells .spell-concentration{display:inline-flex;max-width:100%}
.ledger.spells .spell-damage{display:block;width:100%;white-space:normal;color:var(--gold-hi);margin:4px 0;text-align:center}

/* Character creation validation switches follow the General fields. */
.creation-switches{display:grid;gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.creation-switch p{margin:8px 0 0;line-height:1.5;max-width:72ch}

.ledger-row{align-items:center;gap:16px}
.manage-spell-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.ledger-row .grow{min-width:0;overflow-wrap:anywhere}
.ledger-row .spell-limit-reason{margin-top:4px;color:var(--muted)}

/* Shared inventory sections follow the personal sections. */
.subtabs[aria-label="Inventory sections"]>[data-id="party-wallet"]{margin-left:0}
.wallet-transfer{border-color:var(--line-strong);color:var(--gold-hi)}

.manage-spell-section{margin-top:16px}
.manage-spell-section h3{padding-bottom:6px;margin-bottom:8px;border-bottom:1px solid var(--line);color:var(--ink)}

/* Spell selection and its description share one dialog, each with its own scroll. */
#modal[data-kind="manage-spells"][open]{display:flex;flex-direction:column;width:min(1280px,calc(100% - 32px));height:calc(100dvh - 48px);max-height:calc(100dvh - 48px);overflow:hidden}
#modal[data-kind="manage-spells"]>.dlg-head{flex:none}
#modal[data-kind="manage-spells"]>.dlg-body{display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:0;overflow:hidden}
.manage-spell-sources{flex:none;display:grid;gap:8px;margin-bottom:12px}
.manage-spell-sources .spell-counts{margin:0}
.manage-spell-browser{display:flex;flex-direction:column;min-width:0;min-height:0}
.manage-spell-browser>.toolbar{flex:none;margin-bottom:12px}
.manage-spell-browser>.toolbar label{font-size:14px;color:var(--muted)}
.manage-spell-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;flex:1;min-height:0}
.manage-spell-list,.manage-spell-preview{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;outline-offset:-2px;scroll-padding:8px}
.manage-spell-list{flex:1;padding:0 16px 8px 0;margin-right:-8px}
.manage-spell-list>.manage-spell-section:first-child{margin-top:0}
.manage-spell-list>.muted{font-size:12px;line-height:1.6;margin-top:24px}
.ledger-row{padding:8px 10px;gap:8px}
.manage-spell-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.manage-owned-spell{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}
.ledger-row.selected{border-color:var(--gold);background:var(--gold-wash)}
.ledger-row [aria-pressed="true"]{color:var(--gold-hi)}
.manage-spell-actions{max-width:50%;flex-shrink:0}
.manage-spell-preview{border-left:1px solid var(--line);padding:0 16px 8px 20px;margin-right:-8px;overflow-wrap:anywhere}
.manage-spell-preview h3{margin-bottom:12px}
.manage-spell-preview .spell-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#modal[data-kind="manage-spells"] .dlg-body>.dlg-foot{flex:none;position:static;margin:16px -24px 0}
.weapon-enhancements{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}
.weapon-enhancements h3{margin-bottom:12px}
.weapon-enhancement-row{display:block;padding:16px;border:1px solid var(--line-strong);border-radius:12px;margin-top:12px;background:var(--bg)}
.weapon-enhancement-row .check{margin:0;min-height:var(--hit);gap:12px}
.weapon-enhancement-row p{font-size:14px;line-height:1.5;margin:8px 0 0}
.weapon-enhancement-row .badge{margin-left:auto;white-space:nowrap}
.weapon-enhancement-row .chips,.weapon-enhancement-row select{margin-top:12px}
.character-section-panel{--section-surface:var(--surface);--section-row-surface:var(--raised);--section-muted:var(--muted);min-width:0;margin-top:24px;padding:0;background:var(--section-surface);border:1px solid var(--line-strong);border-radius:14px;overflow:hidden}
.character-section-panel>.tabs{border-radius:13px 13px 0 0}
.character-section-panel>.tabs>button{flex:none}
.character-section-icon{width:17px;height:17px;flex:none}
.panel-body{display:flex;flex-direction:column;gap:14px;min-width:0;padding:14px;background:var(--sunken)}
.character-section-panel>#sheet-content{min-width:0}
.sub-body{min-width:0;padding:6px 14px 12px}
.sub-body>.table-scroll{margin:0 -14px;padding:0 14px 6px}
.sub-body>.empty{padding:18px 6px}
.sub-body>.pending-spell-features,.sub-body>.sub-note{margin:8px 0}
.panel-body>.subtabs{margin:0}
.toolbar.spell-list-tools{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0}
.toolbar.spell-list-tools>.spell-counts{margin:0}
.toolbar .subtabs{border:0;background:transparent;padding:0}
.sub-head h2 small,.sub-head h3 small{white-space:nowrap}
.comp{display:inline-flex;gap:3px}
.comp abbr{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:5px;font-size:12px;font-weight:700;color:var(--muted);text-decoration:none;cursor:help}
.ledger.spells td>.comp{display:inline-flex}
.glyph{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;color:var(--gold)}
.glyph svg{width:17px;height:17px}
.weapon-cell{display:flex;align-items:center;gap:10px;min-width:0}
.weapon-cell>span:last-child{min-width:0}

.table-scroll>.ledger.spells{min-width:760px}
.table-scroll>.ledger.actions{min-width:720px}
.table-scroll>.ledger.features{min-width:600px}
.character-section-panel .sub-head{margin-bottom:0}
.character-section-panel .attack-card{background:var(--section-row-surface);border-color:var(--line-strong)}
.character-section-panel :is(.attack-card h3){color:var(--ink);font-size:17px;font-weight:500;line-height:1.3}
.character-section-panel :is(.other-action-description,.feature-description) .prose{font-size:14px}
.character-section-panel :is(.muted,.inventory-item-type,.feature-origin,.other-action-source){color:var(--section-muted)}
.character-section-panel :is(.ledger.attacks,.attack-card,.ledger.spells) [data-action=roll],.character-section-panel [data-action=cast],.character-section-panel :is(.other-action-control,.inventory-item-action)>button{border-color:var(--gold);background:var(--raised);color:var(--gold-hi);font-weight:600;min-height:var(--hit)}
.character-section-panel :is(.ledger.attacks,.attack-card) [data-action=roll]{font-size:16px}
.character-section-panel :is(.ledger.attacks,.attack-card,.ledger.spells) [data-action=roll]:hover:not(:disabled),.character-section-panel [data-action=cast]:hover:not(:disabled),.character-section-panel :is(.other-action-control,.inventory-item-action)>button:hover:not(:disabled){background:var(--gold-wash);border-color:var(--gold-hi)}
@container character-sheet (max-width:540px){
 .character-section-panel :is(.ledger.spells,.ledger.actions) thead th:last-child{width:72px}
 .character-section-panel .spell-list-tools{grid-template-columns:minmax(0,1fr)}
 .character-section-panel .spell-list-tools>input{height:var(--hit)}
}
.wizard-field.readonly>.wizard-feature-content{display:grid;gap:8px;min-width:0;padding:0}
.wizard-feature-content>.creation-asi-select{width:100%;min-height:var(--hit);color:var(--ink)}
.wizard-feature-content>.wizard-feature-list{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}

/* Feats are selected transactionally in one searchable, source-grouped dialog. */
.creation-feat-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--hit);width:100%;padding:10px 16px;text-align:left;background:var(--bg);border-color:var(--line-strong);font:inherit}
.creation-feat-trigger>span:first-child{min-width:0;overflow-wrap:anywhere}
.creation-feat-trigger strong{display:block;font-weight:500}
.creation-feat-trigger small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.creation-feat-trigger.choice-empty{border:2px solid var(--ember);background:var(--ember-wash)}
#modal[data-kind="creation-feat"][open]{display:flex;flex-direction:column;width:min(1080px,calc(100% - 32px));height:min(800px,calc(100dvh - 48px));overflow:hidden}
#modal[data-kind="creation-feat"]>.dlg-head{flex:none}
#modal[data-kind="creation-feat"]>.dlg-body{display:flex;flex-direction:column;min-height:0;flex:1;padding-bottom:0;overflow:hidden}
#modal[data-kind="creation-feat"] #modal-form{display:flex;flex-direction:column;min-height:0;flex:1}
#modal[data-kind="creation-feat"] #modal-form>.dlg-foot{flex:none;position:static;margin:16px -24px 0}
.feat-picker-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:24px;min-height:0;flex:1}
.feat-picker-browser{display:flex;flex-direction:column;min-height:0;min-width:0}
.feat-picker-browser>label{margin-bottom:8px}
.feat-picker-browser>input{flex:none;width:100%;min-width:0;margin-bottom:16px}
.feat-picker-list,.feat-picker-preview{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;min-height:0;min-width:0;scroll-padding:8px}
.feat-picker-list{flex:1;padding:0 16px 4px 0;margin-right:-8px}
.feat-picker-list h3{padding:16px 12px 8px;overflow-wrap:anywhere}
.feat-picker-list [role="option"]{display:block;width:100%;min-height:var(--hit);text-align:left;font-size:14px;padding:12px;border:1px solid transparent;background:transparent;overflow-wrap:anywhere}
.feat-picker-list [aria-selected="true"]{color:var(--gold-hi);border-color:var(--gold);background:var(--gold-wash)}
.feat-picker-list [role="option"]:hover:not(:disabled){background:var(--raised)}
.feat-picker-list [role="option"]:focus-visible{outline-offset:-3px}
.feat-picker-preview{border-left:1px solid var(--line);padding:0 16px 8px 24px;margin-right:-8px;overflow-wrap:anywhere;outline-offset:-2px}
.feat-picker-preview>h3{margin-bottom:12px}
.feat-picker-preview p{line-height:1.65;margin-bottom:12px}
.feat-picker-empty{padding:16px 12px}

/* Codex: filters, a grid of entry rows, and the selected description. */
.codex-page{--codex-rail-width:224px;--codex-column-gap:20px;padding-top:20px}
.codex-heading{flex:1;min-width:0}
.codex-heading{display:flex;align-items:baseline;gap:12px}
.codex-heading .eyebrow{order:2}
.codex-rail>.toolbar{display:grid;gap:16px;margin-top:20px}
.codex-rail>.toolbar summary:focus-visible{outline-offset:-2px}

.codex-layout{display:grid;grid-template-columns:var(--codex-rail-width) minmax(0,1fr) 360px;grid-template-areas:"rail results preview";gap:16px var(--codex-column-gap);align-items:stretch;min-height:0}
.codex-rail{--card-pad:16px;grid-area:rail;min-width:0;min-height:0}
.codex-rail>.subtabs.vertical{padding:6px}
.codex-filter-label{display:block;margin-bottom:8px}
.codex-type-picker{position:relative}
.codex-type-picker>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--hit);padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg);cursor:pointer;font-size:12px;list-style:none}
.codex-type-picker>summary::-webkit-details-marker{display:none}
.codex-type-picker>summary::before{display:none}
.codex-type-picker>summary::after{content:'⌄';font-size:16px}
.codex-type-picker[open]>summary::after{content:'⌃'}
.codex-type-options{position:fixed;z-index:15;max-height:320px;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:8px 12px 8px 8px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);box-shadow:0 12px 28px color-mix(in srgb,black 53%,transparent);min-width:0}
.codex-type-options>button{width:100%;min-height:var(--hit);font-size:12px}
.codex-type-options label{display:flex;align-items:center;gap:8px;min-height:var(--hit);padding:8px 4px;margin:0;font-size:12px;color:var(--ink);cursor:pointer;overflow-wrap:anywhere}
.codex-type-options input{width:16px;height:16px;min-height:0;flex:none;accent-color:var(--gold-hi)}
.codex-results{grid-area:results;display:flex;flex-direction:column;min-width:0;min-height:0}
.codex-search{display:grid;gap:8px;margin-bottom:12px}
.codex-search input{flex:1;min-width:0;min-height:var(--hit)}
.codex-search p{flex:none;margin:0;font-size:12px}
.codex-list-head,.codex-entry{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.75fr) minmax(0,1.15fr);gap:12px;align-items:start;text-align:left}
.codex-list-head{padding:10px 12px;color:var(--muted);font-size:11px;border-bottom:1px solid var(--line)}
.codex-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:4px}
.codex-list-scroll,.item-picker-list{padding-right:8px;margin-right:-8px}
.codex-entry{min-height:60px;padding:12px 8px;border:1px solid transparent;border-radius:8px;background:var(--surface);min-width:0;width:100%;overflow-wrap:anywhere}
.codex-entry-name{display:grid;justify-items:start;gap:6px;font-size:13px;line-height:1.45}
.codex-entry-type,.codex-entry-source{color:var(--muted);font-size:11px;line-height:1.5}
.codex-entry-source{margin:0}
.codex-grid>.empty{grid-column:1/-1}
.codex-reference-note{font-size:11px;margin-top:12px}
:is(#codex-preview,.item-picker-preview){grid-area:preview;min-width:0;min-height:0;overflow-wrap:anywhere}
:is(#codex-preview,.item-picker-preview) h2{margin-bottom:20px}
:is(#codex-preview,.item-picker-preview) .spell-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
.codex-preview-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
:is(#codex-preview,.item-picker-preview) .reference-image{flex:none}
/* Hierarchical class/race navigation shares the catalog's independent panels. */
.codex-hierarchy .codex-list-head{grid-template-columns:minmax(0,1fr) 120px}
.codex-hierarchy .codex-list-head>span:last-child{text-align:right}
.codex-tree{gap:6px;padding:4px}
.codex-tree-group{min-width:0}
.codex-parent-row{display:flex;align-items:stretch;min-width:0;border:1px solid transparent;border-radius:9px;background:var(--surface)}
.codex-parent-row.expanded{background:var(--raised);border-color:var(--line-strong)}
.codex-parent-row:has(>.selected){background:var(--gold-wash);border-color:var(--gold)}
.codex-tree-arrow{display:grid;place-items:center;width:28px;user-select:none;pointer-events:none}
.codex-tree-arrow svg{width:15px;height:15px}
.codex-tree-entry[aria-expanded=true] .codex-tree-arrow svg{transform:rotate(90deg)}
.codex-tree .codex-tree-entry{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px;min-height:var(--hit);align-items:center;padding:9px 12px;background:transparent}
.codex-parent-row>.codex-tree-entry{flex:1;grid-template-columns:28px minmax(0,1fr) 120px;padding-left:0;min-height:50px;border-color:transparent}
.codex-tree-entry .codex-entry-name{display:flex;align-items:center;gap:10px;min-width:0}
.codex-tree-entry strong{font-size:14px;font-weight:600;line-height:1.45}
.codex-child-entry strong{font-weight:500}
.codex-child-count{font-size:11px;line-height:21px;min-width:24px;padding:0 5px;text-align:center;color:var(--muted);border:1px solid color-mix(in srgb,var(--ink) 3.5%,transparent);border-radius:5px;background:color-mix(in srgb,var(--ink) 2.7%,transparent);flex:none}
.codex-tree-source{font-size:12px;color:var(--muted);text-align:right;overflow-wrap:anywhere}
.codex-tree-source abbr{text-decoration:none}
.codex-tree-children{display:grid;gap:3px;margin:6px 0 10px 20px;padding-left:14px;border-left:1px solid var(--line-strong)}
.codex-tree-children[hidden]{display:none}
.codex-child-entry{position:relative}
.codex-child-entry::before{content:'';position:absolute;left:-15px;top:50%;width:10px;height:1px;background:var(--line-strong)}
.codex-tree .codex-child-entry.selected{background:var(--gold-wash);border-color:var(--gold)}
.codex-child-entry.selected::after{content:'';position:absolute;left:-18px;top:calc(50% - 2px);width:5px;height:5px;border-radius:50%;background:var(--gold)}
.codex-tree-entry.selected .codex-tree-source{color:var(--gold-hi)}
.codex-parent-link{color:var(--gold-hi);border:0;padding:0 6px 0 0;margin-bottom:12px}
.codex-entry-kind{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.codex-hierarchy #codex-preview h2{margin-bottom:12px}
.codex-tree-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.codex-source-versions,.codex-related{border-top:1px solid var(--line);margin-top:24px;padding-top:16px}
.codex-source-versions>div,.codex-related>div{display:grid;gap:8px;margin-top:12px}
.codex-source-versions button,.codex-related button{width:100%;text-align:left;white-space:normal}
.codex-related button{display:flex;align-items:center;justify-content:space-between;gap:16px}
.codex-related .codex-tree-source{flex:none;max-width:40%}
.codex-description-features{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}
.codex-section-label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.codex-description-feature{margin-bottom:24px}
.codex-description-feature>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}
.codex-description-feature h3{margin-bottom:8px}
.codex-description-feature .badge{flex:none;margin-bottom:8px}
.codex-description-feature .prose p,.codex-description-feature>p{font-size:14px;line-height:1.8;color:var(--ink)}
.codex-progression{margin:0 0 28px;min-width:0}
.codex-progression h3{margin-bottom:8px}
.codex-progression-note{font-size:12px;line-height:1.6;margin-bottom:14px}
.codex-progression-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--line-strong);border-radius:8px}
.ledger.progression{font-size:14px;line-height:1.55}
.ledger.progression abbr{text-decoration:none}
.ledger.progression th:first-child{width:56px;min-width:56px;white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums}
.ledger.progression th:nth-child(2),.ledger.progression td:nth-child(2){width:72px;text-align:center;font-variant-numeric:tabular-nums}
.codex-progression-features{min-width:175px;overflow-wrap:anywhere}
.ledger.progression .reference-link{font-size:inherit;line-height:inherit;text-align:left;white-space:normal;min-width:0;min-height:24px;padding:2px 0;border:0;border-radius:3px;background:transparent}
@media(max-width:680px){
 .codex-hierarchy .codex-list-head{grid-template-columns:minmax(0,1fr) 85px}
 .codex-tree .codex-tree-entry{grid-template-columns:minmax(0,1fr) 85px;gap:8px}
 .codex-parent-row>.codex-tree-entry{grid-template-columns:24px minmax(0,1fr) 85px}
 .codex-tree-arrow{width:24px}
 .codex-tree-children{margin-left:16px;padding-left:10px}
 .codex-child-entry::before{left:-11px;width:7px}
 .codex-child-entry.selected::after{left:-14px}
}
/* Item selection uses the Codex list and preview inside one bounded dialog. */
#modal[data-kind="add-item"][open]{display:flex;flex-direction:column;width:min(1280px,calc(100% - 32px));height:calc(100dvh - 48px);overflow:hidden}
#modal[data-kind="add-item"]>.dlg-head{flex:none}
#modal[data-kind="add-item"]>.dlg-body{display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:0;overflow:hidden}
.item-picker-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;flex:1;min-height:0}
.item-picker-browser{display:flex;flex-direction:column;min-width:0;min-height:0}
.item-picker-browser>.codex-search,.item-picker-browser>.codex-list-head,#item-picker-count{flex:none}
#item-picker-count{font-size:12px;margin-bottom:8px}
.item-picker-list,.item-picker-preview{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;scroll-padding:8px;outline-offset:-2px}
.item-picker-list{flex:1}
.item-picker-preview{border-left:1px solid var(--line);padding:0 16px 8px 24px;margin-right:-8px}
.item-picker-preview>.dlg-foot:empty{display:none}
#modal[data-kind="add-item"] .dlg-body>.dlg-foot{flex:none;position:static;margin:16px -24px 0}
@media(max-width:767px){
 #modal[data-kind="add-item"][open]{width:calc(100% - 20px);height:calc(100dvh - 24px)}
 .item-picker-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,1fr) minmax(0,1fr);gap:16px}
 .item-picker-preview{border-left:0;border-top:1px solid var(--line);padding:16px 12px 0 4px}
 #modal[data-kind="add-item"] .dlg-body>.dlg-foot{margin:16px -16px 0;padding:12px 16px}
}
@media(min-width:1100px){
 #app.codex-open{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 #app.codex-open>.topbar,#app.codex-open>.alert{flex:none}
 .codex-page{display:flex;flex:1;flex-direction:column;min-height:0;width:100%;padding-bottom:16px}
 .codex-layout{flex:1}
 .codex-rail,.codex-list-scroll,:is(#codex-preview,.item-picker-preview){overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scroll-padding:8px;outline-offset:-2px}
 .codex-list-scroll{flex:1;min-height:0}
 .codex-page>.footer{flex:none;margin:12px 0 0;padding:0;font-size:10px}
}
@media(max-width:1099px){
 .codex-page{--codex-rail-width:200px}
 .codex-layout{grid-template-columns:var(--codex-rail-width) minmax(0,1fr);grid-template-areas:"rail results" "rail preview"}
 .codex-list-scroll{max-height:45dvh;overflow-y:auto}
 :is(#codex-preview,.item-picker-preview){max-height:65dvh;overflow-y:auto}
}
@media(max-width:680px){
 #app.codex-open>.topbar{flex-wrap:wrap}
 #app.codex-open .top-actions{flex-basis:100%;flex-wrap:wrap}
 .codex-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"rail" "results" "preview"}
}

/* UI review: readable labels and explicitly grouped forms. */

#sheet-content th,.codex-list-head,.codex-entry-name,.codex-entry-type,.codex-entry-source,
.codex-type-picker>summary,
.codex-type-options label,.codex-type-options>button,.codex-search p,.codex-reference-note,
:is(#codex-preview,.item-picker-preview) .muted,:is(#codex-preview,.item-picker-preview) small,:is(#codex-preview,.item-picker-preview) .prose,:is(#codex-preview,.item-picker-preview) .reference-fields dt,:is(#codex-preview,.item-picker-preview) .spell-meta>div,
.ledger.reference,.manage-spell-browser>.toolbar label,.ledger-row small,.ledger-row .muted,
.manage-spell-list>.muted,.manage-spell-preview .prose,.manage-spell-preview .muted,
.manage-spell-preview .spell-meta,.manage-spell-preview .spell-meta>div,.manage-spell-preview small,.ledger-row .badge,.character-grid thead,
.wizard-help,.wizard-choice-help,.chosen-class>span,
.creation-content .muted,.catalog-editor-sections label,.editor-help,.wizard-group-help{font-size:14px;line-height:1.5}
.catalog-editor-sections{display:grid;gap:20px;min-width:0}
.editor-section,.wizard-choice-group{min-width:0;margin:0;padding:16px;border:1px solid var(--line-strong);border-radius:10px}
.editor-section legend,.wizard-choice-group legend{padding:0 8px}
.editor-section summary{min-height:var(--hit);align-content:center;cursor:pointer}
.editor-section .editor-section{margin-top:16px}
.editor-section .form-grid{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.editor-section label{min-width:0;overflow-wrap:anywhere}
.editor-section .full{grid-column:1/-1}
.editor-section .check{align-self:end;min-height:var(--hit)}
.editor-help,.wizard-group-help{color:var(--muted);margin:8px 0 16px}
.wizard-choice-group{margin:0 0 20px}
.wizard-group-fields>.wizard-field:last-child{margin-bottom:0}
.wizard-section-title{font-size:18px;margin:24px 0 16px}
.wizard-section-title:first-child{margin-top:0}
.creation-content,.creation-navigation,.chosen-classes{overflow-wrap:anywhere}
/* Character wizard (UI-08): Ember v7, guide 03-screens.md §3.5. Steps card 224 px with number / diamond / ember marks and the
   Back / Save bar; centre card with a title head (class tabs or the race / background picker on the right), an ember error stripe,
   sub-cards on --sunken, fields in an auto-fit grid, choice groups as blocks, options and rule switches as rows. */
.option{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.option+.option{margin-top:8px}
.option:has(:checked){border-color:var(--gold);background:var(--gold-wash)}
.option:has(:disabled){opacity:.5;cursor:default}
.option small{display:block;color:var(--muted)}
.wizard{--wizard-body-size:15px;--wizard-note-size:14px;--wizard-pad:16px;max-width:1200px;font-size:var(--wizard-body-size);line-height:1.5}
.wizard .creation-layout{grid-template-columns:224px minmax(0,1fr);gap:20px;align-items:start}
.wizard :is(.creation-navigation,.creation-content){--card-pad:0;min-width:0;padding:0}
.wizard .creation-navigation{top:20px;display:flex;flex-direction:column;gap:0;min-height:calc(100dvh - 164px);overflow:hidden}
.wizard .creation-navigation>.card-head{flex:none;margin:0}
.wizard .creation-steps.subtabs.vertical{flex:none;display:grid;gap:4px;padding:10px 10px 6px;border:0;border-radius:0;background:transparent;overflow:visible;counter-reset:wizard-step}
.wizard .creation-steps.subtabs.vertical button{counter-increment:wizard-step;position:relative;display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:46px;padding:0 14px 0 28px;border:0;border-radius:9px;background:transparent;font-size:16px;font-weight:400;text-align:left;color:var(--ink)}
.wizard .creation-steps.subtabs.vertical button::before{content:counter(wizard-step);flex:none;min-width:1ch;font-size:14px;font-variant-numeric:tabular-nums;color:var(--faint)}
.wizard .creation-steps.subtabs.vertical button:hover:not(:disabled),.wizard .creation-steps.subtabs.vertical button.selected{border:0;background:var(--gold-wash);color:var(--gold-hi)}
.wizard .creation-steps.subtabs.vertical button.selected{font-weight:600}
.wizard .creation-steps.subtabs.vertical button.selected::before{color:var(--gold-hi)}
.wizard .creation-steps.subtabs.vertical button.selected::after{content:'';position:absolute;left:12px;right:auto;top:50%;bottom:auto;width:7px;height:7px;border-radius:0;background:var(--gold);transform:translateY(-50%) rotate(45deg)}
.wizard .creation-steps.subtabs.vertical button[data-error]:not(:disabled),.wizard .creation-steps.subtabs.vertical button[data-error]::before{color:var(--ember)}
.wizard .creation-steps.subtabs.vertical button[data-error].selected::after{background:var(--ember)}
.wizard .creation-steps.subtabs.vertical>:focus-visible{outline-offset:-2px}
.wizard .creation-actions{flex:none;display:flex;gap:8px;justify-content:flex-end;margin:auto 0 0;padding:12px 16px 14px;border-top:1px solid var(--line)}
.wizard .creation-actions>button{flex:1;min-width:0;padding-inline:12px}
.wizard .creation-content{display:flex;flex-direction:column;min-height:calc(100dvh - 164px);overflow:hidden}
.wizard .creation-heading{flex:none;flex-wrap:wrap;gap:8px 14px;margin:0;padding:4px 16px}
.wizard .creation-title{display:flex;align-items:center;gap:10px;margin:0}
.wizard .creation-title::before{content:'';flex:none;width:8px;height:8px;transform:rotate(45deg);background:var(--gold)}
.wizard .creation-heading .creation-title label{display:inline;font:inherit;color:inherit}
.wizard .creation-heading>:is(select,.race-picker){margin-left:auto;width:min(380px,100%);min-width:0}
.wizard .creation-heading>.chosen-classes{position:static;display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0;min-height:0;margin:0 0 0 auto;padding:0}
.wizard .chosen-class-list.subtabs{display:flex;flex:0 1 auto;flex-wrap:nowrap;gap:2px;min-width:0;overflow-x:auto}
.wizard .chosen-class-list.subtabs button.chosen-class{flex:0 0 auto;width:auto;min-height:42px;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--muted)}
.wizard .chosen-class-list.subtabs button.chosen-class.selected{color:var(--gold-hi);font-weight:700}
.wizard .chosen-class strong{margin:0;font-size:15px;font-weight:inherit;color:inherit;overflow-wrap:normal}
.wizard .chosen-class>span{font-size:13px;font-weight:400;color:var(--faint)}
.wizard .chosen-class.selected>span{color:var(--muted)}
.wizard .creation-content>.form-errors:not(:empty){flex:none;margin:0;padding:12px 16px;border:0;border-bottom:1px solid var(--ember);border-radius:0;background:var(--ember-wash);white-space:pre-line}
.wizard #creator-errors:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-4px}
.wizard .creation-body{flex:1;display:grid;align-content:start;gap:14px;min-width:0;padding:14px;background:var(--sunken)}
.wizard :is(#creation-class-editor,.class-levels){display:grid;gap:14px;min-width:0}
.wizard .class-level+.class-level{margin-top:0}
.wizard .race-picker{min-width:0}
.wizard .race-picker select[hidden],.wizard .race-picker-popup[hidden],.wizard .race-picker-empty[hidden]{display:none}
.wizard .race-picker-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:var(--hit);padding:0 16px;border:1px solid var(--line-strong);border-radius:8px;background:var(--sunken);color:var(--ink);font:inherit;font-weight:400;text-align:left}
.wizard .race-picker-trigger>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wizard .race-picker-trigger.choice-empty{box-shadow:inset 0 0 0 1px var(--ember);background:var(--ember-wash)}
.wizard .race-picker-chevron{flex:none;color:var(--muted)}
.wizard .race-picker-popup{position:fixed;z-index:45;display:flex;flex-direction:column;gap:8px;min-width:0;padding:8px;border:1px solid var(--line-strong);border-radius:10px;background:var(--overlay);box-shadow:0 12px 32px color-mix(in srgb,black 40%,transparent)}
.wizard .race-picker-popup>input{flex:none;width:100%;min-width:0;padding:10px 12px}
.wizard .race-picker-options{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.wizard .race-picker-book{padding:12px 10px 4px;color:var(--muted);font-size:13px;font-weight:500;line-height:1.5}
.wizard .race-picker-options [role=option]{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--hit);padding:10px;border-radius:5px;font-size:var(--wizard-body-size);line-height:1.5;cursor:pointer}
.wizard .race-picker-options [role=option].active{background:var(--gold-wash);box-shadow:inset 0 0 0 1px var(--line-strong)}
.wizard .race-picker-options [aria-selected=true]::after{content:'✓';flex:none;color:var(--ink)}
.wizard .race-picker-options [aria-disabled=true]{color:var(--muted);cursor:default;opacity:.65}
.wizard .race-picker-empty{margin:4px 10px 12px;color:var(--muted);font-size:var(--wizard-note-size);line-height:1.6}
/* Sub-cards: a step section is a .sub-card with a .sub-head on --well; its content is the field grid. */
.wizard .wizard-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-content:start;gap:12px 24px;min-width:0;margin:0;padding:var(--wizard-pad);overflow:hidden}
.wizard .wizard-panel>*{grid-column:1/-1;min-width:0}
.wizard .wizard-panel>.sub-head{display:flex;align-items:center;min-height:48px;margin:calc(-1 * var(--wizard-pad)) calc(-1 * var(--wizard-pad)) 0;padding:6px var(--wizard-pad);border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--well)}
.wizard :is(.wizard-panel,.wizard-group-fields)>.wizard-field:not(.wizard-feature-row,.wizard-optional-row,:has(>textarea),:has(>.portrait-upload)){grid-column:auto}
/* Choice groups (fieldset): inside a section they are plain headings with a thin top line, no box; a step that shows them alone gives each a sub-card of its own (the step's level-1 frame). */
.wizard .wizard-group-card{min-width:0;padding:0}
.wizard .wizard-panel .wizard-group-card{margin-top:4px;padding-top:18px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.wizard .wizard-panel>.sub-head+.wizard-group-card,.wizard .wizard-panel>.sub-head+.wizard-asi>.wizard-group-card{margin-top:0;padding-top:0;border-top:0}
.wizard .wizard-choice-group{min-width:0;margin:0;padding:0;border:0}
.wizard .wizard-choice-group legend{display:block;float:left;width:100%;padding:0;margin:0 0 12px}
.wizard .wizard-group-help{clear:both;margin:-6px 0 12px;padding:0;border:0;background:none}
.wizard .wizard-group-fields{clear:both;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 24px}
.wizard .wizard-group-fields>*{min-width:0}
.wizard .wizard-group-fields>:is(textarea,.wizard-asi,.wizard-description,.wizard-feature-row,.wizard-optional-row,.wizard-help){grid-column:1/-1}
.wizard .wizard-group-fields>textarea{min-height:112px}
.wizard .wizard-panel>.wizard-group-help{margin:0}
.wizard .creation-body>.wizard-group-card{padding:0;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.wizard .creation-body>.wizard-group-card legend{display:flex;align-items:center;box-sizing:border-box;min-height:48px;padding:6px var(--wizard-pad);margin:0;border-bottom:1px solid var(--line);background:var(--well)}
.wizard .creation-body>.wizard-group-card .wizard-group-help{padding:12px var(--wizard-pad) 0;margin:0}
.wizard .creation-body>.wizard-group-card .wizard-group-fields{padding:var(--wizard-pad)}
.wizard .wizard-asi{border:0;padding:0;margin:0}
/* Fields: label over control, 14 px --muted; read-only facts are borderless cells: 14 px label over a 16 px value. */
.wizard .wizard-field{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:6px;min-width:0;min-height:0;margin:0}
.wizard .wizard-field>span{padding:0;text-wrap:balance}
.wizard .wizard-field.readonly{padding:0;border:0;border-radius:0;background:transparent}
.wizard .wizard-field.readonly>div{padding:0;font-size:16px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.wizard .wizard-field.readonly>:is(.wizard-feature-list,.wizard-feature-content){padding:0}
/* General: the character name is the dominant field; System is a one-line caption under it. */
.wizard .wizard-panel>.wizard-field.wizard-name{grid-column:1/-1}
.wizard .wizard-panel>.wizard-field.wizard-name>input{height:56px;min-height:56px;font:500 28px/1.2 var(--serif);color:var(--ink)}
.wizard .wizard-panel>.wizard-field.readonly.caption{grid-column:1/-1;margin-top:-8px;padding:0;border:0;border-radius:0;background:transparent;font-size:14px;line-height:1.5;color:var(--muted)}
.wizard .wizard-feature-link{padding:4px 2px;min-width:0;min-height:var(--hit);color:var(--gold-hi);text-decoration:none;text-underline-offset:3px;font-size:14px}
.wizard .wizard-feature-link:hover{background:transparent;text-decoration:underline}
.wizard .wizard-feature-link:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:4px}
.wizard .feature-separator{margin-left:-6px;color:var(--muted)}
.wizard :is(input,select,textarea,.creation-feat-trigger){font-size:var(--wizard-body-size);font-weight:400;line-height:1.5;color:var(--ink)}
.wizard input:not([type=checkbox]):not([type=radio]),.wizard select{height:var(--hit)}
.wizard :is(select,.creation-feat-trigger).choice-empty{border-width:1px;box-shadow:inset 0 0 0 1px var(--ember)}
.wizard textarea{min-height:112px}
.wizard input::placeholder,.wizard textarea::placeholder{color:var(--faint);opacity:1}
.wizard input[type=file]{padding:5px}
.wizard input[type=file]::file-selector-button{height:26px;margin:0 12px 0 0;padding:0 10px;border:1px solid var(--line-strong);border-radius:4px;background:var(--raised);color:var(--ink);font:inherit;cursor:pointer}
.wizard .class-select-row{grid-template-columns:minmax(0,1fr) 136px;gap:14px}
.wizard .wizard-score{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.wizard .wizard-score .mono{color:var(--muted)}
/* Abilities step: Generation Method (and Point Buy points) first, then the sheet's .abilities/.ability tiles showing the final score; the base-score control sits in the tile footer */
.wizard .ability-method-row{display:grid;grid-template-columns:minmax(0,360px) auto;align-items:start;gap:12px 24px}
.wizard .abilities.wizard-abilities{grid-template-columns:repeat(6,minmax(0,1fr));padding:0}
.wizard-abilities .ability .check:hover:not(:disabled){background:transparent}
.wizard-abilities .ability .check{flex:none}
.wizard-abilities .ability.draft .mod strong{color:var(--muted)}
.wizard-abilities .ability .base{display:grid;flex:1;align-content:start;gap:6px;min-width:0;padding:8px;border-top:1px solid var(--line)}
.wizard-abilities .ability .base :is(input,select){width:100%;min-width:0}
.wizard-abilities .ability .base input{text-align:center}
.wizard-abilities .ability .base option:disabled{color:var(--muted)}
.wizard-abilities .ability .base-note{display:grid;gap:2px;font-size:14px;line-height:1.4;color:var(--muted)}
@media(max-width:1099px){.wizard .abilities.wizard-abilities{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:759px){.wizard .abilities.wizard-abilities{grid-template-columns:repeat(2,minmax(0,1fr))}.wizard .ability-method-row{grid-template-columns:minmax(0,1fr)}}
.wizard :is(.muted,.wizard-help,.wizard-group-help,.wizard-setting-help,.wizard-context-note,.creation-feat-trigger small){font-size:var(--wizard-note-size);font-weight:400;line-height:1.6;color:var(--muted)}
.wizard .wizard-help{margin:0;padding:12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--raised)}
.wizard .wizard-context-note{margin:0}
.wizard .wizard-description{font-size:var(--wizard-note-size);line-height:1.6;margin:0;border:1px solid var(--line-strong);border-radius:8px;background:var(--sunken)}
.wizard .wizard-description summary{padding:10px 12px}
.wizard .wizard-description p{margin:12px}
.wizard .wizard-optional-row>span{color:var(--muted)}
.wizard .wizard-optional-list{min-width:0}
.wizard .wizard-optional.option{display:block;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:default}
.wizard .wizard-optional.option:has(:checked){border-color:var(--gold);background:var(--gold-wash)}
.wizard .wizard-optional.option+.wizard-optional.option{margin-top:8px}
.wizard .wizard-optional-heading{flex-wrap:nowrap;align-items:start;gap:4px}
.wizard .wizard-optional-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 32px;min-height:var(--hit);cursor:pointer}
.wizard .wizard-optional input{appearance:none;display:grid;place-content:center;min-width:18px;width:18px;min-height:18px;height:18px;margin:0;padding:0;border:1px solid var(--line-strong);border-radius:4px;background:var(--bg);cursor:pointer}
.wizard .wizard-optional input:checked{background:var(--gold);border-color:var(--gold-hi)}
.wizard .wizard-optional input:checked::after{content:'';width:8px;height:4px;margin-top:-2px;border:solid var(--bg);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.wizard .wizard-optional-copy{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;min-width:0}
.wizard .wizard-optional-source{font-size:var(--wizard-note-size);line-height:1.6;color:var(--muted);text-decoration:none;white-space:nowrap}
.wizard .wizard-optional p{margin:0 0 8px 36px}
@media(forced-colors:active){.wizard .wizard-optional input{appearance:auto}.wizard .wizard-optional input:checked::after{display:none}}
/* Rule switches: Settings rows (name 16 px 500, note 14 px --muted, switch on the right, rows divided by --line). */
.wizard .creation-switches{display:block;margin:0;padding:0;border:0}
.wizard .creation-switch{padding:14px 0}
.wizard .creation-switch:first-child{padding-top:0}
.wizard .creation-switch+.creation-switch{border-top:1px solid var(--line)}
.wizard .creation-switch:last-child{padding-bottom:0}
.wizard .creation-switch p{margin:0}
.wizard .settings-toggle{gap:24px;color:var(--ink);align-items:center}
.wizard .settings-toggle strong{display:block}
.wizard .wizard-setting-help{display:block;margin-top:2px;max-width:62ch}
.character-list-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;outline-offset:4px}
@media(max-width:1100px){
 .wizard .creation-layout{grid-template-columns:200px minmax(0,1fr);gap:16px}
 .creation-layout{grid-template-columns:180px minmax(0,1fr);gap:16px}
 .creation-content{padding:20px}
 .wizard-field{grid-template-columns:minmax(120px,35%) minmax(0,1fr);gap:12px}
 .wizard-help,.wizard-description{margin-left:0}
 .class-select-row{grid-template-columns:minmax(0,1fr) 140px}
}
@media(max-width:767px){
 .wizard{--wizard-pad:12px}
 .wizard .settings-toggle{gap:16px}
 .wizard .creation-layout{gap:14px}
 .wizard .creation-navigation{position:static;min-height:0}
 .wizard .creation-steps.subtabs.vertical{display:flex;flex-direction:row;flex-wrap:wrap;gap:2px;padding:6px 8px;overflow:visible}
 .wizard .creation-steps.subtabs.vertical button{flex:1 1 auto;width:auto;min-height:44px;padding:0 12px;justify-content:center}
 .wizard .creation-steps.subtabs.vertical button.selected::after{display:none}
 .wizard .creation-actions{padding:10px 12px 12px}
 .wizard .creation-content{min-height:0}
 .wizard .creation-heading{padding:6px 12px}
 .wizard .creation-heading>:is(select,.race-picker,.chosen-classes){margin-left:0;width:100%}
 .wizard .creation-heading>.chosen-classes{flex-wrap:wrap}
 .wizard .chosen-class-list.subtabs{flex:1 1 100%;overflow-x:auto}
 .wizard .creation-body{padding:10px}
 .wizard .class-select-row{grid-template-columns:minmax(0,1fr)}

 .crumbs ol{flex-wrap:wrap;gap:0}
 .crumbs li{max-width:100%}
 .crumbs .crumb-char{flex:1 1 100%;max-width:100%}
 .crumbs li+li::before{display:none}
 .crumbs button{padding:4px 8px;max-width:100%}
 .crumb-char button>span{min-width:0}
 .creation-layout{display:flex;flex-direction:column;gap:16px}
 .creation-layout>*{width:100%}
 .creation-navigation,.chosen-classes{position:static;min-height:0;padding:12px}
 .creation-navigation nav:not(.subtabs){grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .creation-navigation nav:not(.subtabs) button{white-space:normal;padding:8px}
 .creation-actions{margin-top:0}
 .creation-content{padding:16px}
 .wizard-field,.class-select-row .wizard-field{grid-template-columns:minmax(0,1fr);gap:6px}
 .wizard-field>span{padding-top:0}
 .wizard-field.readonly>div{padding-top:0}
 .wizard-score{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
 .class-select-row{grid-template-columns:minmax(0,1fr)}
 .editor-section .form-grid{grid-template-columns:minmax(0,1fr)}
 .editor-section,.wizard-choice-group{padding:12px}
 #modal[data-kind="catalog-editor"] .dlg-foot{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
 .character-grid colgroup,.character-grid thead{display:none}
 .character-grid,.character-grid tbody{display:block}
 .ledger.character-grid{border-spacing:0;margin-top:0}
 .character-grid tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id id" "sys lvl" "act act";gap:2px 12px;margin-bottom:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--raised)}
 .ledger.character-grid tbody tr>*{padding:0;border:0;border-radius:0;background:transparent}
 .ledger.character-grid tbody tr:hover>*,.ledger.character-grid tbody tr:focus-within>*{background:transparent}
 .character-grid tbody tr:hover,.character-grid tbody tr:focus-within{background:color-mix(in srgb,var(--gold-wash) 60%,var(--raised))}
 .character-grid tbody tr>th{grid-area:id}
 .character-grid tbody tr>td:nth-child(2){grid-area:sys;align-self:center}
 .character-grid tbody tr>td:nth-child(3){grid-area:lvl;align-self:center;text-align:right}
 .character-grid tbody tr>td:nth-child(3)::before{content:'Level ';color:var(--faint)}
 .character-grid tbody tr>td:nth-child(4){grid-area:act;margin-top:8px}
 .character-row-actions{justify-content:flex-start}
 .character-row-actions button.btn{flex:1;min-height:var(--hit)}
 #sheet-content .subtabs>button,#sheet-content [data-action="attack-filter"]{min-width:var(--hit)}
}

/* Keep each ability name and score together as the sheet narrows. */

/* Optional Custom feature effects reuse the catalogue form layout. */
.custom-effect-list{display:grid;gap:16px;margin-top:16px}
.custom-effect-card{padding:16px;border:1px solid var(--line-strong);border-radius:10px;min-width:0}
.custom-effect-card .form-grid>*{min-width:0}
.custom-effect-card input,.custom-effect-card select{max-width:100%;width:100%}
.custom-effect-card .check input{width:auto}
.custom-effect-card select[multiple]{min-height:140px}
.custom-effect-card small{color:var(--muted);font-size:12px;line-height:1.5}
.custom-feature-summary{padding-left:20px;display:grid;gap:12px}
.custom-feature-summary p{margin-top:4px;overflow-wrap:anywhere}

@media(max-width:767px){
 #modal .dlg-body>.dlg-foot,#modal-form>.dlg-foot{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}

/* Custom feature authoring: aligned controls, explicit groups and searchable choices. */
.effect-add-section{margin:20px 0;padding-bottom:20px;border-bottom:1px solid var(--line)}
.effect-add-section>h4,.effect-list-heading{margin:0}
.effect-add-section>h4{margin-bottom:12px}
.effect-list-section>[data-effect-empty]{margin-top:16px}
.effect-add-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px}
.effect-label-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;margin-bottom:16px}
.effect-label-row>button{margin-top:27px}
.custom-effect-card>summary{align-items:flex-start}
.effect-card-heading>span{min-width:0;flex:1}
.effect-card-heading>[data-effect-remove]{flex:none;font-weight:400;white-space:nowrap}
.effect-card-heading strong,.effect-card-heading small{display:block;overflow-wrap:anywhere}
.effect-card-heading small{font-weight:400;margin-top:4px}
.effect-card-body{margin-top:16px}
.custom-effect-card .effect-group{min-width:0;border:0;padding:0;margin:20px 0 0}
.effect-group legend{padding:0;margin-bottom:8px}
.effect-field{position:relative;min-width:0;display:grid;gap:6px;align-content:start}
.effect-field>label{min-height:21px}
.effect-field>small:empty{display:none}
.effect-checkbox{padding-top:27px}
.form-grid>.effect-checkbox:nth-child(odd):last-child{padding-top:0}
.effect-checkbox>label{min-height:var(--hit)}
.effect-checkbox-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.effect-checkbox-list.is-components{grid-template-columns:repeat(3,minmax(0,1fr))}
.effect-checkbox-list .effect-checkbox{padding-top:0}
.form-grid+.effect-checkbox-list{margin-top:12px}
.custom-effect-card .effect-leading-fields{margin-bottom:16px}
[data-effect-kind=weapon] .effect-field:is([data-field=name],[data-field=label]){grid-column:1/-1}
[data-action-group=availability] .effect-conditions{margin-top:0}
.effect-picker{position:relative;min-width:0}
.effect-picker-toggle{width:100%;text-align:left;display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:var(--hit);background:var(--sunken);border-color:var(--line-strong);padding:10px 12px;line-height:21px}
.effect-picker-toggle>span{flex:none}
.effect-picker-panel{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:12;background:var(--surface);border:1px solid var(--gold);border-radius:8px;padding:10px;box-shadow:0 8px 20px color-mix(in srgb,black 53%,transparent);min-width:0}
.effect-picker-panel[hidden],.effect-picker-results>button[hidden],.effect-choice-list>label[hidden]{display:none}
.effect-picker-panel>p{margin:6px 0;overflow-wrap:anywhere}
.effect-picker-results{max-height:220px;overflow:auto;overscroll-behavior:contain;display:grid;gap:4px}
.effect-picker-results>button{text-align:left;width:100%;overflow-wrap:anywhere}
.effect-picker-results>button[aria-selected=true]{border-color:var(--gold-hi)}
.effect-choice-list{max-height:240px;overflow:auto;overscroll-behavior:contain;display:grid;gap:4px;margin-top:8px}
.custom-effect-card .effect-choice-list input{width:20px}
.effect-field-error{color:var(--dis);font-size:13px}
.effect-create-link{justify-self:start;font-size:12px}
.effect-stacking-help{margin-bottom:12px;padding:4px 14px;background:var(--gold-wash);border:1px solid var(--line-strong);border-left:3px solid var(--gold);border-radius:10px}
.effect-stacking-help>summary{font-size:14px;font-weight:600;color:var(--gold-hi)}
.effect-stacking-help>summary:hover{color:var(--gold-hi)}
.effect-stacking-help>summary:focus-visible{border-radius:4px;outline-offset:2px}
.effect-stacking-help>p{margin:4px 0 10px;color:var(--ink);line-height:1.6}
[data-bonus-overlap]{border-left:3px solid var(--gold);padding:8px 12px}
[data-effect-field][aria-invalid=true]{border-color:var(--ember)}
@media(max-width:767px){
 .effect-add-bar,.effect-label-row{grid-template-columns:minmax(0,1fr)}
 .effect-add-bar button{width:100%}
 .effect-label-row>button{margin-top:0;justify-self:start}
 .effect-checkbox{padding-top:0}
 .custom-effect-card{padding:12px}
 .effect-picker-results{max-height:180px}
}
.effect-picker-toggle .effect-picker-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.effect-picker-panel.is-above{top:auto;bottom:calc(100% + 4px)}

/* Feature creation uses flat sections; only individual effects have card outlines. */
.feature-catalog-editor{gap:24px}
.feature-catalog-editor>.editor-section{border:0;border-radius:0;padding:0}
.feature-catalog-editor>.editor-section,.feature-catalog-editor>.feature-description{border-top:1px solid var(--line);padding-top:16px}
.feature-field-group{min-width:0;border:0;padding:0;margin:0}
.feature-field-group>legend{padding:0;margin-bottom:12px}
.feature-catalog-editor>details .feature-field-group+.feature-field-group{margin-top:20px}
.feature-catalog-editor>details .feature-field-group>legend{margin-bottom:8px}
.feature-catalog-editor #feature-effects-heading{font-size:16px;line-height:1.5}
.feature-catalog-editor .form-grid{align-items:start}
.feature-catalog-editor [data-collapse-effects][hidden]{display:none}

/* Custom features follow the character wizard: section navigation and one editor pane. */
#modal:has(.feature-wizard)[open]{display:flex;flex-direction:column;width:min(1040px,calc(100% - 32px));height:min(840px,calc(100dvh - 48px));overflow:hidden}
#modal:has(.feature-wizard)>.dlg-head{flex:none}
#modal:has(.feature-wizard)>.dlg-body{display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:0;overflow:hidden}
#modal:has(.feature-wizard)>.dlg-body>.form-errors{flex:none;max-height:160px;overflow:auto}
.feature-wizard-form{display:flex;flex-direction:column;flex:1;min-height:0}
.feature-wizard{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;flex:1;min-height:0}
.feature-wizard>.creation-navigation{position:static;min-height:0;overflow:auto;align-self:stretch}
.feature-wizard-content.creation-content{min-height:0;padding:0 4px;overflow-y:auto;overscroll-behavior:contain}
.feature-wizard [data-feature-panel][hidden]{display:none}
.feature-wizard nav button>small{display:block;font-size:11px;font-weight:400;margin-top:3px}
.effect-selection{display:grid;gap:12px;margin-bottom:16px}
.effect-selection>.effect-field[data-field=choose]{max-width:240px}
.effect-options-title{font-size:13px;color:var(--ink);font-weight:600}
.effect-choice-list.is-short{max-height:none;overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr))}
.effect-choice-list label:has(input:disabled){color:var(--muted)}
.effect-choice-list label small{margin-left:auto}
.effect-conditions{margin-top:20px}
.effect-conditions>.form-grid.mt{margin-top:12px}
.effect-custom-label{display:grid;gap:8px;margin-top:16px}
.feature-wizard-form button.primary:hover:not(:disabled),.feature-wizard-form button.primary:focus-visible:not(:disabled){background:var(--gold-hi);color:var(--on-gold);border-color:var(--gold-hi)}
.feature-wizard-form button.primary:active:not(:disabled){background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.feature-wizard .custom-effects-editor{border:0;border-radius:0;padding:0;margin:0}
.feature-wizard .creation-title,.feature-wizard #feature-effects-heading{margin-bottom:20px}
.feature-wizard [data-feature-panel=general] textarea{min-height:200px}
.feature-bonus-groups{display:grid;gap:20px}
.feature-bonus-groups .feature-field-group>legend{margin-bottom:8px}
#modal-form.feature-wizard-form>.dlg-foot{position:static;flex:none;margin:16px -24px 0}
@media(max-width:767px){
 #modal:has(.feature-wizard)[open]{width:calc(100% - 20px);height:calc(100dvh - 24px)}
 .feature-wizard{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:16px}
 .feature-wizard>.creation-navigation{padding:8px}
 .feature-wizard>.creation-navigation nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .feature-wizard>.creation-navigation nav button{text-align:center;font-size:12px;padding:8px 4px;min-width:0}
 .feature-wizard-content.creation-content{padding-right:2px}
 #modal-form.feature-wizard-form>.dlg-foot{margin-left:-16px;margin-right:-16px}
 .feature-wizard [data-feature-panel=general] textarea{min-height:140px}
 .effect-checkbox-list,.effect-checkbox-list.is-components,.effect-choice-list.is-short{grid-template-columns:minmax(0,1fr)}
}

/* Field explanations stay available without taking space in the form. */
.feature-help-source[hidden],.feature-field-tooltip[hidden]{display:none!important}
.feature-help-caption{width:fit-content;max-width:100%;cursor:help;text-decoration:underline dotted var(--faint);text-underline-offset:4px;text-decoration-thickness:1px}
.feature-help-caption:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px;border-radius:2px}
.feature-field-tooltip{position:fixed;z-index:40;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--overlay);color:var(--ink);box-shadow:0 6px 22px color-mix(in srgb,black 53%,transparent);font-size:13px;line-height:1.5;font-weight:400;white-space:pre-line;overflow:auto;overflow-wrap:anywhere;overscroll-behavior:contain}

/* Linked Codex abilities in the existing feature editor. */
.feature-field-group.codex-grants-editor{margin-top:24px}
.codex-grants-editor>button{margin-top:12px}
.feature-field-group.codex-grant{margin-top:20px;padding:16px;border:1px solid var(--line-strong);border-radius:12px}
.codex-grant>legend{padding:0 6px;margin-bottom:8px}
.codex-grant button[data-codex-remove]{justify-self:start;align-self:end}

/* Inventory, spell management and their Codex forms share the wizard's quiet hierarchy. */
#modal.management-dialog{font-size:15px;line-height:1.5}
#modal.management-dialog>.dlg-head{padding:20px 24px}
#modal.management-dialog #modal-title{margin:0}
#modal.management-dialog :is(input:not([type=checkbox]),select,textarea){min-width:0;border-color:var(--line-strong);border-radius:8px;font-size:15px;font-weight:400;line-height:1.5;background:var(--sunken)}
#modal.management-dialog :is(input:not([type=checkbox]),select){min-height:var(--hit)}
#modal.management-dialog textarea{min-height:112px}
#modal.management-dialog button:not(.subtabs button){font-size:14px;line-height:1.5}
#modal.management-dialog :is(.muted,.editor-help,small){font-size:14px;font-weight:400;line-height:1.6;color:var(--muted)}
#modal.management-dialog .prose{font-size:15px;line-height:1.7}
#modal.management-dialog .source{margin-top:24px;padding-top:12px;font-size:14px;line-height:1.6;color:var(--muted)}
#modal.management-dialog :is(.source a,.source button){color:var(--muted);font-size:inherit;font-weight:400}
#modal.management-dialog .source a:hover{color:var(--ink)}
#modal.management-dialog .badge{padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-size:14px;font-weight:400;line-height:1.5}
#modal.management-dialog .row>.badge+.badge::before{content:'·';margin-right:8px}
#modal.management-dialog :is(.spell-meta,.reference-fields){gap:16px 24px;margin:20px 0 24px;padding:0 0 20px;background:none;border-bottom:1px solid var(--line);border-radius:0}
#modal.management-dialog .spell-meta>div{min-width:0;padding:0;background:none;border-radius:0;font-size:15px;line-height:1.5}
#modal.management-dialog :is(.spell-meta small,.reference-fields dt){margin-bottom:4px;font-size:14px;color:var(--muted)}
#modal.management-dialog .reference-fields dd{font-size:15px;line-height:1.5}
#modal.management-dialog summary::before{color:var(--muted)}
#modal.management-dialog .check{gap:10px;min-height:var(--hit);font-weight:400}
#modal.management-dialog input[type=checkbox]{flex:none;width:18px;min-width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--gold-hi)}
#modal.management-dialog .dlg-foot{gap:8px}

/* A list needs selection and separators, not a card around every spell. */
#modal.management-dialog .manage-spell-section>h3{padding:12px 0;margin:0;border-bottom:1px solid var(--line)}
#modal.management-dialog .manage-spell-section>.stack{gap:0}
#modal.management-dialog .ledger-row{padding:12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
#modal.management-dialog .ledger-row.selected{background:var(--gold-wash);box-shadow:inset 3px 0 var(--gold);border-radius:4px}
#modal.management-dialog .ledger-row .item-name{min-height:32px;font-size:15px;color:var(--ink)}
#modal.management-dialog .ledger-row .item-name strong{font-weight:500}
#modal.management-dialog .ledger-row .grow{min-width:0}
#modal.management-dialog .ledger-row .danger{color:var(--muted)}
#modal.management-dialog .ledger-row .danger:hover{color:var(--dis)}
#modal.management-dialog .manage-spell-actions button{padding:8px 10px}
#modal.management-dialog #manage-preview-title,#modal.management-dialog #item-picker-title{margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.4;color:var(--ink)}
#modal.management-dialog [data-spell-group]{padding:0 0 20px;margin:0 0 20px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
#modal.management-dialog [data-spell-group]>.muted{margin:4px 0 12px}

/* The preview must not inherit the Codex page's named grid area. */
#modal.management-dialog .item-picker-preview{grid-area:auto;max-height:none}
#modal.management-dialog .codex-entry{border-radius:0;border-bottom:1px solid var(--line)}
#modal.management-dialog .codex-entry.selected{background:var(--gold-wash);border-color:var(--line-strong);box-shadow:inset 3px 0 var(--gold)}
#modal.management-dialog .codex-entry.selected .codex-entry-name{color:var(--ink)}
#modal.management-dialog .codex-entry-name{font-size:15px;font-weight:500}
#modal.management-dialog :is(.codex-entry-type,.codex-entry-source,.codex-list-head){font-size:14px;line-height:1.5}
#modal.management-dialog .item-notes{display:block;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
#modal.management-dialog .weapon-enhancement-row{padding:0;margin:12px 0 0;border:0;border-radius:0;background:none}
#modal.management-dialog .weapon-enhancement-row p{margin:2px 0 8px 28px}
#modal.management-dialog .weapon-enhancement-row .check{gap:10px}
#modal.management-dialog .inventory-item-reference{margin-top:24px;padding-top:12px;border-top:1px solid var(--line)}
#modal.management-dialog .inventory-item-reference>summary{font-weight:500}
#modal.management-dialog .inventory-item-reference>.row{margin-top:12px}
#modal.management-dialog .inventory-add-fields .editor-help{margin:8px 0 0}

/* Flat form sections keep optional settings subordinate to the editable fields. */
#modal.management-dialog[data-kind=catalog-editor]{width:min(800px,calc(100% - 32px))}
.simple-catalog-editor{gap:24px}
.simple-catalog-editor .editor-price{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:12px;min-width:0}
.simple-catalog-editor .editor-section{padding:0;margin:0;border:0;border-radius:0;background:none}
.simple-catalog-editor>.editor-section+.editor-section{padding-top:20px;border-top:1px solid var(--line)}
.simple-catalog-editor .editor-section>h3{margin:0 0 16px}
.simple-catalog-editor .editor-section>summary{min-height:var(--hit);padding:0}
.simple-catalog-editor .editor-section>summary::before{font-size:20px}
.simple-catalog-editor .editor-section[open]>summary{margin-bottom:8px}
.simple-catalog-editor .editor-section .editor-section{margin:20px 0 0}
.simple-catalog-editor .editor-section .editor-section>h3{margin-bottom:12px}
.simple-catalog-editor>.editor-section:first-child>.form-grid>label:first-child{grid-column:1/-1}
.simple-catalog-editor .editor-help{margin:0 0 12px}
.simple-catalog-editor .form-grid>.editor-help{margin:-8px 0 0}
.simple-catalog-editor .form-grid>.editor-help:first-child{margin:0}
#modal.management-dialog .editor-description textarea{margin-top:12px}
@media(max-width:767px){
 #modal.management-dialog>.dlg-head{padding:16px}
 #modal.management-dialog[data-kind=catalog-editor]{width:calc(100% - 20px)}
 #modal.management-dialog :is(.manage-spell-layout,.item-picker-layout){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(240px,1.15fr) minmax(0,1fr);gap:16px}
 #modal.management-dialog :is(.manage-spell-preview,.item-picker-preview){margin-right:0;padding:16px 8px 8px 0;border-left:0;border-top:1px solid var(--line)}
 #modal.management-dialog .manage-spell-list{padding-right:8px;margin-right:0}
 #modal.management-dialog .manage-spell-actions{max-width:58%}
 #modal.management-dialog .ledger-row{padding:10px 8px;gap:6px}
 #modal.management-dialog .ledger-row .item-name{padding:0}
 #modal.management-dialog[data-kind=manage-spells] .dlg-body>.dlg-foot{margin:16px -16px 0;padding:12px 16px}
 .simple-catalog-editor .editor-section .form-grid{grid-template-columns:minmax(0,1fr)}
 .simple-catalog-editor .editor-section .check{align-self:start}
}
.character-section-panel>#sheet-content>.subtabs{margin:0}
.character-section-panel>.tabs{margin-bottom:0}
.wallet-rows{gap:0}
.wallet-row.coin-row{grid-template-columns:minmax(120px,1fr) minmax(90px,140px) auto;gap:14px;min-height:0;padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.wallet-row.coin-row>strong{font-size:16px;font-weight:500}
.wallet-row.coin-row .wallet-balance{font:600 22px/1 var(--serif);text-align:right}
.wallet-row.coin-row .wallet-operation-controls{justify-content:end}
.wallet-row.coin-total{display:flex;align-items:baseline;justify-content:space-between;min-height:0;padding:6px 0 12px;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent}
.wallet-row.coin-total>strong{font-size:16px;font-weight:500}
.wallet-row.coin-total .wallet-balance{font:600 34px/1 var(--serif);color:var(--gold-hi)}
.wallet-panel .wallet-footer{justify-content:flex-start}
.ledger.attacks td.muted{color:var(--ink);font-size:16px}
.ledger.attacks .weapon-ammunition{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px}
.ledger.attacks .weapon-ammunition .ammo-count{font:600 22px/1 var(--serif)}
.ledger.attacks .weapon-ammunition .ammunition-picker{flex:1;max-width:130px;min-height:36px}
#sheet-content .ledger tr.group>th{padding:10px 4px 0;font:600 17px/1.2 var(--serif);letter-spacing:.04em;color:var(--gold-hi)}
@media(max-width:760px){
 .sub-body>.table-scroll{margin:0 -10px;padding:0 10px 6px}
 .sub-body{padding:6px 10px 10px}
 .panel-body{padding:10px}
 .sub-head{gap:8px}
 .attacks-heading{flex-wrap:wrap}
}
/* ── Compact vitals strip, mobile bar (UI-05) ──────────────────────────────
   Reference: sheet-restyle-v7 `.mini`, `.mobile-bar`. The strip is a zero-height sticky anchor in the
   scrolling column; app.js adds `.on` while the vitals card is scrolled out of view. */
.mini{position:sticky;top:0;z-index:4;height:0;margin-bottom:-20px}
.mini-bar{position:absolute;left:0;right:-16px;top:-18px;display:flex;align-items:center;gap:18px;padding:10px 14px;border-bottom:1px solid var(--line-strong);background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(6px);font-size:14px;color:var(--muted);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.mini.on .mini-bar{opacity:1;transform:none}
.mini b{margin-left:5px;font:600 20px/1 var(--serif);color:var(--ink)}
.mini .hp b{color:var(--ember)}
.mini .temp b{color:var(--frost)}
.mini .conc{margin-left:auto;color:var(--gold-hi)}
@media(max-width:1279px){.mini-bar{top:0;right:0}}
@media(max-width:760px){
 .mini{display:none}
 .pip{width:44px;height:44px}
 .sheet{display:block}
 .sidebar{display:none}
 .mobile-bar{position:fixed;z-index:15;left:0;right:0;bottom:0;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line-strong);background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(6px)}
 .mobile-bar>button{flex:1}
}
/* Panels inside the mobile drawer scroll with the dialog body, not on their own. */
.dlg-body>.rail-body{overflow:visible;padding:16px 0 0}
.dlg-body>.rail-tabs{border:1px solid var(--line-strong);border-radius:12px}
.dlg-body .hist-controls{top:0;margin:0 0 10px;padding:0 0 10px}
@media(max-width:1279px){.rail{align-self:start;position:sticky;top:12px;max-height:calc(100dvh - 24px)}}

/* UI-07: Codex in the Ember v7 style (03-screens §3.3). Three cards: menu + filter blocks, toolbar + ledger rows, description with an action bar. */
.fold-mark{display:inline-block;width:8px;height:8px;margin-right:4px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.codex-tree-entry[aria-expanded=true] .fold-mark{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.fold-mark{transition:none}}
.codex-layout .codex-rail{--card-pad:0;display:flex;flex-direction:column}
.codex-rail>.card-head{flex:none;margin:0}
.codex-menu.subtabs.vertical{flex:none;display:grid;gap:4px;padding:10px 10px 6px;border:0;border-radius:0;background:transparent;overflow:visible}
.codex-menu.subtabs.vertical button{justify-content:flex-start;width:100%;min-height:46px;padding:0 14px;border-radius:9px;font-size:16px;font-weight:400;text-align:left;color:var(--ink)}
.codex-menu.subtabs.vertical button:hover:not(:disabled),.codex-menu.subtabs.vertical button.selected,.codex-menu.subtabs.vertical button[aria-pressed=true]{border:0;background:var(--gold-wash);color:var(--gold-hi)}
.codex-menu.subtabs.vertical button.selected,.codex-menu.subtabs.vertical button[aria-pressed=true]{font-weight:600}
.codex-menu.subtabs.vertical button.selected::after,.codex-menu.subtabs.vertical button[aria-pressed=true]::after{display:none}
.codex-menu.subtabs.vertical>:focus-visible{outline-offset:-2px}
.codex-rail>.toolbar{flex:none;display:grid;gap:12px;margin:0;padding:6px 10px 14px;border:0;border-radius:0;background:transparent}
.codex-types-filter.block{min-width:0}
.codex-types-filter .codex-filter-label{margin:0 0 10px}
.codex-types-filter .codex-filter-label small{display:block;margin-top:5px;font:400 var(--fs-t5)/1.4 var(--sans);color:var(--muted)}
.codex-filter-label .sep{font-size:0}
.codex-type-picker>summary{background:var(--raised);border-radius:8px;font-size:14px}
.codex-type-options label.check{gap:10px;color:var(--ink);font-weight:400}
.codex-type-options label.check input{accent-color:var(--gold)}
.codex-layout .codex-results{--card-pad:0;overflow:hidden}
.codex-results>.toolbar.codex-search{flex:none;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0;padding:10px 14px;border:0;border-bottom:1px solid var(--line-strong);border-radius:0}
.codex-results>.toolbar.codex-search input{flex:1 1 220px;max-width:420px}
.codex-results>.toolbar.codex-search p{margin:0;font-size:14px;color:var(--muted)}
.codex-results>.codex-list-head{padding:10px 27px 6px;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.codex-results>.reference-alert{margin:12px 14px 0}
.codex-results .codex-list-scroll{padding:10px 14px 14px;margin:0}
.codex-results .codex-grid{gap:8px;padding:0}
.codex-layout .codex-grid:not(.codex-tree)>.codex-entry{min-height:58px;padding:10px 12px;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--raised);transition:background .15s,border-color .15s}
.codex-layout .codex-grid:not(.codex-tree)>.codex-entry:not(.selected):hover{background:color-mix(in srgb,var(--gold-wash) 60%,var(--raised))}
.codex-layout .codex-grid:not(.codex-tree)>.codex-entry.selected{border-color:var(--gold);background:var(--gold-wash)}
.codex-layout .codex-entry-name{gap:4px}
.codex-layout .codex-entry-name strong,.codex-layout .codex-tree-entry strong{font:500 17px/1.3 var(--sans);color:var(--ink)}
.codex-layout .codex-parent-row strong{font-weight:600}
.codex-layout .codex-entry.selected .codex-entry-name strong{color:var(--gold-hi)}
.codex-layout .codex-entry-type{font-size:14px;color:var(--muted)}
.codex-layout .codex-entry-source,.codex-layout .codex-tree-source{display:flex;flex-wrap:wrap;gap:4px 6px}
.codex-layout .codex-tree-source{justify-content:flex-end;font-size:0;line-height:0}
.codex-layout :is(.codex-entry-source,.codex-tree-source) .badge{font-size:12px;line-height:1.3;min-height:22px;padding:2px 8px;border-radius:11px;white-space:normal;text-align:left;text-decoration:none;color:var(--muted)}
.codex-layout .codex-tree-entry.selected .codex-tree-source .badge{color:var(--gold-hi)}
.codex-tree{gap:8px;padding:0}
.codex-parent-row{border:1px solid var(--line);border-radius:10px;background:var(--raised);transition:background .15s,border-color .15s}
.codex-parent-row:not(.expanded):not(:has(>.selected)):hover{background:color-mix(in srgb,var(--gold-wash) 60%,var(--raised))}
.codex-parent-row.expanded{border-color:var(--line-strong)}
.codex-parent-row:has(>.selected){border-color:var(--gold);background:var(--gold-wash)}
.codex-parent-row>.codex-tree-entry,.codex-parent-row>.codex-tree-entry.selected{border-color:transparent;border-radius:9px;background:transparent}
.codex-tree-children{margin:8px 0 4px 24px;gap:8px}
.codex-tree .codex-child-entry{border:1px solid var(--line);border-radius:10px;background:var(--raised)}
.codex-tree .codex-child-entry:not(.selected):hover{background:color-mix(in srgb,var(--gold-wash) 60%,var(--raised))}
.codex-tree .codex-child-entry.selected{border-color:var(--gold);background:var(--gold-wash)}
.codex-child-count{font-size:12px;border-radius:999px;color:var(--muted)}
.codex-layout #codex-preview{--card-pad:0;display:flex;flex-direction:column;padding:0}
.codex-layout #codex-preview>*{flex:none;margin-left:20px;margin-right:20px}
.codex-layout #codex-preview::after{content:'';flex:none;height:20px}
.codex-layout #codex-preview>h2{order:-1;position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;min-height:46px;margin:0 0 16px;padding:8px 20px;border-bottom:1px solid var(--line-strong);background-color:var(--surface);background-image:linear-gradient(90deg,var(--gold-wash),var(--raised) 60%)}
.codex-layout #codex-preview>h2::before{content:'';flex:none;width:8px;height:8px;transform:rotate(45deg);background:var(--gold)}
.codex-layout #codex-preview>button{align-self:flex-start;margin-top:14px;margin-bottom:0}
.codex-layout #codex-preview>.codex-parent-link{margin-bottom:6px}
.codex-layout #codex-preview>.empty{margin:auto 20px}
.codex-layout #codex-preview .spell-meta{gap:8px;margin:12px 20px 14px}
.codex-layout #codex-preview .spell-meta>div{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--sunken);font-size:14px;line-height:1.4}
.codex-layout #codex-preview .spell-meta small{margin-bottom:2px}
.codex-layout #codex-preview .reference-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 20px 14px;padding:0;border-radius:0;background:none}
.codex-layout #codex-preview .reference-fields>div{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--sunken)}
.codex-layout #codex-preview .reference-fields dd{font-size:14px}
.codex-layout #codex-preview .prose,.codex-layout #codex-preview .codex-description-feature .prose p,.codex-layout #codex-preview .codex-description-feature>p{font-size:16px;line-height:1.65;color:var(--ink)}
.codex-layout #codex-preview .source{font-size:14px;color:var(--muted)}
.codex-layout #codex-preview .codex-progression-scroll{border:0;border-radius:0}
.codex-layout #codex-preview>.codex-preview-actions{order:1;position:sticky;bottom:0;z-index:2;justify-content:flex-end;margin:auto 0 0;padding:12px 20px 14px;border-top:1px solid var(--line);background:var(--surface)}
.codex-layout #codex-preview>.codex-preview-actions:has(~.codex-preview-actions){position:static;padding-bottom:0}
.codex-layout #codex-preview>.codex-preview-actions~.codex-preview-actions{margin-top:0;padding-top:8px;border-top:0}
.codex-layout #codex-preview>.badge{align-self:flex-start}
.codex-preview-actions .danger{order:-1;margin-right:auto}
.codex-preview-actions [data-action=edit-catalog-entry]{border-color:var(--gold);background:var(--gold);color:var(--on-gold);font-weight:700}
.codex-preview-actions [data-action=edit-catalog-entry]:hover:not(:disabled){border-color:var(--gold-hi);background:var(--gold-hi);color:var(--on-gold)}

/* UI-07: Custom editor dialogs (03-screens §3.6): wide window 860 px, sections as sub-cards with a head on --well. */
#modal.management-dialog[data-kind=catalog-editor]{width:min(860px,calc(100% - 32px))}
#modal:has(.feature-wizard)[open]{width:min(860px,calc(100% - 32px))}
@media(min-width:768px){.feature-wizard{grid-template-columns:200px minmax(0,1fr)}}
.simple-catalog-editor .editor-section.sub-card{margin:0;padding:0;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.simple-catalog-editor>.editor-section.sub-card+.editor-section.sub-card{padding-top:0;border-top:1px solid var(--line-strong)}
#modal .simple-catalog-editor .editor-section.sub-card>:is(h3,summary){display:flex;align-items:center;min-height:48px;margin:0;padding:6px 14px;background:var(--well);border-bottom:1px solid var(--line)}
.simple-catalog-editor details.editor-section.sub-card:not([open])>summary{border-bottom:0}
.simple-catalog-editor .editor-section.sub-card[open]>summary{margin-bottom:0}
.simple-catalog-editor .editor-section.sub-card>.form-grid{padding:14px}
.simple-catalog-editor .editor-section.sub-card>.editor-help{margin:12px 14px 0}
.simple-catalog-editor .editor-section.sub-card .editor-section.sub-card{margin:0 14px 14px;background:var(--sunken)}
#modal .simple-catalog-editor .editor-section.sub-card .editor-section.sub-card>h3{min-height:40px;background:var(--raised)}
.simple-catalog-editor .editor-description.sub-card{padding:14px}
.feature-catalog-editor .feature-field-group.sub-card{border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.feature-catalog-editor .feature-field-group.sub-card>legend{float:left;box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:48px;margin:0;padding:6px 14px;background:var(--well);border-bottom:1px solid var(--line)}
.feature-catalog-editor .feature-field-group.sub-card>legend+*{clear:both}
.feature-catalog-editor .feature-field-group.sub-card>.form-grid{padding:14px}

/* Parties */
.nav-party{margin:0 0 8px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--gold-wash);color:var(--muted);font-size:14px}
.nav-party strong{color:var(--gold-hi)}
.drawer .nav-links+.nav-links{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.party-page .page-top p{margin:4px 0 0}
.party-list{display:grid;gap:8px}
.party-row{align-items:center;gap:16px}
.party-row .party-name{min-height:0;padding:0;border:0;background:transparent;text-align:left;font:500 17px/1.3 var(--sans);color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.party-row .party-name:hover:not(:disabled){background:transparent;color:var(--gold-hi);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.party-row .party-name:disabled{color:var(--ink);opacity:1;cursor:default}
.party-row .badge{vertical-align:middle}
.party-panel{padding:0;overflow:hidden}
.party-panel>.tabs{border-radius:13px 13px 0 0}
.party-panel>.tabs>button{flex:none}
.party-panel-body{padding:var(--card-pad)}
.party-tab-actions{margin-bottom:16px}
.party-grid tbody tr{cursor:default}
.party-grid .character-row-text .name{font:500 17px/1.3 var(--sans);color:var(--ink)}
.party-owner-column{width:260px}.party-actions-column{width:120px}
.party-loading{margin:0}
.party-rolls{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.party-roll{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--raised)}
.party-roll-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px;color:var(--muted)}
.party-roll-meta time{font-variant-numeric:tabular-nums}
.party-roll-meta strong{color:var(--gold-hi)}
.party-roll-summary{margin-top:4px;font-size:16px;overflow-wrap:anywhere}
.party-roll.undone .party-roll-summary{color:var(--muted)}
.party-roll.undone .party-roll-summary s{text-decoration:line-through}
.party-roll-details{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.5}
.party-section+.party-section{margin-top:24px}
.party-section h3{margin:0 0 10px;font:600 var(--fs-t2)/1.1 var(--serif);letter-spacing:0;color:var(--gold-hi)}
.party-members,.party-invites{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.party-members small,.party-invites small{display:block;margin-top:2px}
.party-invite-form{align-items:flex-end}
.party-invite-form label{flex:1;min-width:240px}
.party-invite-result{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--raised)}
.party-invite-result p{margin:0 0 8px;font-size:14px;color:var(--muted)}
.party-invite-result input{flex:1;min-width:240px;font-size:14px}
/* Sign in / Create account: a narrow centred card instead of a full-width form. */
.auth-page{display:flex;justify-content:center;align-items:flex-start;padding-top:48px}
.auth-page .card{width:100%;max-width:460px}
.auth-page .form-actions{display:flex;gap:8px;flex-wrap:wrap}