/* =====================================================================
   Hearth dark: no old brown anywhere (Tom, 30 Oct 2026, phone test of PR #71)
   Every old leather / oak / parchment surface becomes a dark card colour and Final2 gold. Colours only: no layout,
   size or wording changes. Loaded last, so it wins over the palette's leather.
   Unbrown (1 Nov, Tom's phone test: "the brown UI skin"): the 30 Oct dark was a warm brown-black (#1c1510, #130e0b,
   #2a2017 ...) that read brown on a phone. It is now a neutral charcoal, very slightly cool so it never reads warm
   next to the gold, on the same lightness steps, so every contrast holds. Gold and the cream ink are unchanged.
     page             #0b0b0d                               (was #0b0807)   deepest well / input #08080a (was #090705)
     panel / dialog   linear-gradient(180deg,#19191c,#121214) bg #121214   (was #1c1510 -> #130e0b)
     tile / card      linear-gradient(#1a1a1d,#111113)      (was #1d1611 -> #120e0b)  edge rgba(201,153,63,.32); picked #f0cf86
     row / well       #111113, line #26262a                 (was #120d0a, #2e231a)
     button           linear-gradient(#26262a,#17171a)      (was #2a2017 -> #18120d)  edge gold hairline rgba(201,153,63,.38), ink #e2cba3
     picked / on      linear-gradient(#2a2a2e,#18181b)      (was #2c2115 -> #17110c)  + the gold edge / inset that marks it
     header           #0b0b0d -> #19191c                    (was #0b0807 -> #1c1510)
     neutral edge     #2c2c31 (was #3a2a1c / #342813 / #4a3828), divider #34343a (was #4a3520)
     scrim            rgba(5,5,7,.74)                       (was rgba(8,6,4,.74))
     muted text       #b9ad97                               (was #c4a77a; 7.9:1 on #19191c, 8.5:1 on #111113)
     primary          linear-gradient(#e9c06a,#b4863a)      ink #1a1007 (unchanged)
     gold #e9bd62 / #c9993f / #f0cf86, gold hairlines rgba(201,153,63,.3-.38), cream ink #f4e6cc / #e2cba3: unchanged
   Kept warm on purpose: map art (painted maps, map tiles incl. Wood and Dirt, token art) and the Classic sheet
   (app/ui/paper-sheet.js, Jenny's paper chrome, Tom 31 Oct).
   ===================================================================== */
html:root[data-palette][data-palette] {
  /* textures off: leather, the brown oak of the dialogs and parchment. The floors stay: the sheet's black oak and the
     app's charcoal are near-black with a faint grain, not brown, and the sheet is locked */
  --hx-leather: none; --hx-parch: none; --hearth-oak-dlg: none;
  --tex: linear-gradient(#1a1a1d, #111113); --tex-parch: linear-gradient(#1a1a1d, #111113);
  /* app tokens */
  --page: #0b0b0d; --page-deep: #0b0b0d; --page-edge: #19191c;
  --page-grad-top: #0e0e10; --page-grad-bottom: #0b0b0d;
  --leather: #26262a; --leather-deep: #17171a; --leather-soft: rgba(201,153,63,.38);
  --card-surface: #121214; --card-border: rgba(201,153,63,.34);
  --rs-card: linear-gradient(180deg, #19191c, #121214);
  --rs-card-sunk: #111113;
  --rs-btn2: linear-gradient(#26262a, #17171a);
  --rs-card-border: rgba(201,153,63,.32);
  --header-a: #0b0b0d; --header-b: #19191c;
  --parch: #121214; --parch-ink: #f4e6cc; --hx-ink-on-parch: #f4e6cc; --hx-ink2-on-parch: #b9ad97;
  --control-fill: #111113; --control-fill-hover: #1a1a1d;
  --u-surface: #121214;
  /* the sheet's oak and leather */
  --oak-card: linear-gradient(#19191c, #121214);
  --oak-leather: linear-gradient(#1a1a1d, #111113);
  --oak-leather-on: linear-gradient(#2a2a2e, #18181b);
  --oak-btn: linear-gradient(#26262a, #17171a);
  /* the More-tile pop-ups' tokens (already dark) stay as they are */
  /* dividers and the old backdrop token (1 Nov): were #4a3520 and rgba(6,4,2,.7) */
  --rule: #34343a; --rule-soft: rgba(52,52,58,.4); --rs-backdrop: rgba(5,5,7,.7);
}
/* the page floor: the charcoal grain (--hx-charcoal, on average #14100d) and the hearth glows over it read brown on a
   phone; luminosity keeps their light and dark and takes the hue from the neutral page colour (1 Nov) */
html:root[data-palette][data-palette] body { background-color: #0b0b0d !important; background-blend-mode: luminosity; }
/* the sheet's black oak floor (ui.css) the same way: its grain kept, its warm brown taken out (1 Nov).
   luminosity takes only the oak's light and dark from the image and the hue from the neutral fill under it. */
html.u2-boot-sheet, html.u2-boot-sheet body,
html:root[data-palette][data-palette] body[data-u-route="sheet"], html:root[data-palette][data-palette] body[data-u-route="sheet"] #content.u-csm,
html:root[data-palette][data-palette] body.u-cs3split[data-u-route="sheet"] :is(.u-cs3-l, .u-cs3-r) { background-color: #050506 !important; background-blend-mode: luminosity; }
html:root[data-palette][data-palette] body :is(.u-top, .u-obsheet) { background-color: #0b0b0d !important; background-blend-mode: luminosity; }
html:root[data-palette][data-palette] body[data-u-route="sheet"] .u-tabbar { background-color: #050506 !important; background-blend-mode: normal, luminosity; }
html:root[data-palette][data-palette] body :is(.cs3-bcmb, .u-cs3-bcmb) { background-color: #050506 !important; background-blend-mode: normal, luminosity; }

/* The palette's leather rules painted a brown fill under their (now gone) textures: buttons, inputs, dialogs, tabs and
   the stats bar. Same selectors, one step more specific, dark colours. */
html:root[data-palette][data-palette][data-palette] body :is(.btn:not(.primary):not(.danger), .dm-map-tool, .dm-manage-btn, .dm-tile-mini, .hp-btn.more, .action-tab-card, .action-tab) {
  background: linear-gradient(#26262a, #17171a) !important; border-color: rgba(201,153,63,.38) !important; color: #e2cba3;
}
html:root[data-palette][data-palette][data-palette] body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea, .hp-input) {
  background: #08080a !important; background-image: none !important; border-color: #2c2c31 !important; color: #f4e6cc !important;
}
html:root[data-palette][data-palette][data-palette] body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea, .hp-input):focus { border-color: #e9bd62 !important; }
html:root[data-palette][data-palette][data-palette] body .dialog {
  background: linear-gradient(180deg, #19191c, #121214) !important; background-color: #121214 !important; border-color: rgba(201,153,63,.3) !important; color: #e2cba3;
}
html:root[data-palette][data-palette][data-palette] body .tabs,
html:root[data-palette][data-palette][data-palette] body .stats-bar .stat-cell,
html:root[data-palette][data-palette][data-palette] .header-compact {
  background: linear-gradient(180deg, #19191c, #121214) !important; background-color: #121214 !important;
}

/* The old parchment reading surfaces (feature text, the tour, notes, the sheet's boosts and resources strips, the
   "Not included in this build" note): a dark tile with cream ink, the gold hairline and the ember edge kept. */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.vellum-box, .feature-desc, .hearth-tour, .parchment, .srd-omitted),
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.boosts-strip, .resources-strip):not(.u-cs-strip) {
  background: linear-gradient(180deg, #1a1a1d, #111113) !important; background-color: #111113 !important;
  box-shadow: inset 0 0 0 1px rgba(201,153,63,.32) !important; color: #f4e6cc !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.boosts-strip, .resources-strip):not(.u-cs-strip) { border-color: #26262a !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.boosts-strip, .resources-strip):not(.u-cs-strip) *:not(.defense-chip):not(.defense-chip *):not(.danger):not(.danger *):not(.res-pip) { color: #f4e6cc !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.boosts-strip, .resources-strip):not(.u-cs-strip) :is(.boosts-label, .resources-label) { color: #f08a6e !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.boosts-strip, .resources-strip):not(.u-cs-strip) :is(button, .btn, input):not(.defense-chip *):not(.danger) {
  background: linear-gradient(#26262a, #17171a) !important; box-shadow: inset 0 0 0 1px rgba(201,153,63,.38) !important; color: #e2cba3 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.srd-omitted-text) { color: #f4e6cc !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.srd-omitted-info) { color: #e9bd62 !important; }

/* A pop-up asked for the light scrim (the Themes picker on a laptop, Jenny) keeps it: rgba(0,0,0,.42), no blur.
   The darker sheet scrim is for the card's own pop-ups. */
html:root[data-palette][data-palette][data-palette] body .u-layer:has(> .u-hx-sh) > .u-scrim.u-light,
html:root[data-palette][data-palette][data-palette] body .u-layer > .u-scrim.u-light,
.u-layer > .u-scrim.u-light { background: rgba(0,0,0,.42) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Colour sweep (31 Oct 2026, tests/colour-sweep.test.js): brown is hue 20-45, sat > 20 %, light 15-60 % (deep gold,
   light >= 35 % and sat >= 45 %, is gold). The palette's #5a4430 button edge and #3a2a1c dialog edge above are now
   the gold hairline; the other browns were literals in the modules' own CSS and were changed there:
   home-v2.css (#7a5520 ring end -> #957131), gm-v2.css (#3a2a1c faces, #3a2a1a / #3a2e1c pressed, #6b5436 grab),
   screens-sheet3.js (#3a2a1a skills edge, #5e4714 Divine pill), screens-creator.js / screens-builder.js / ui.css
   (#5a4430 / #4a3828 / #3a2a1c edges), index.html (#4a3112 brand ring). */

/* The 0 HP death-save board, redesigned (1 Nov, Tom): no 1-20 grid; Roll d20 and one big result between the passed
   and failed dots; one row of Healed / Hit / Crit; one rules line with the full rules behind "?". Dark panels, the
   gold hairline and gold text; muted green and ember red only as thin accents (dot fills, a 2 px line). Every
   button and panel takes the shared small radius, var(--r-sm). The rules are unchanged: markup in renderDeathSaveBoard. */
html:root[data-palette][data-palette][data-palette][data-palette] body .death-lock-dialog {
  background: linear-gradient(180deg, #19191c, #121214) !important; border: 1px solid rgba(201,153,63,.34) !important; border-radius: var(--r-sm) !important;
  color: #e2cba3; padding: 16px !important; max-width: 480px !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .death-lock-title { color: #e9bd62 !important; font-size: 20px !important; line-height: 1.25; margin-bottom: 0 !important; overflow-wrap: anywhere; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.death-lock-helper, .death-lock-feature-meta) { color: #b9ad97 !important; font-family: var(--sans) !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-save-board.ds2-board {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr) !important; gap: 8px !important; margin: 12px 0 10px !important; align-items: stretch;
}
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.ds2-tally, .ds2-result, .ds2-rules, .death-lock-feature) {
  background: #111113 !important; border: 1px solid rgba(201,153,63,.34) !important; border-radius: var(--r-sm) !important; color: #f4e6cc;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-tally { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; min-width: 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-pass { box-shadow: inset 0 2px 0 #6e8f5e; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-fail { box-shadow: inset 0 2px 0 #b3261e; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-tally-label { font: 600 13px/1.2 var(--sans); color: #e9bd62; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-dots { display: flex; gap: 6px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-count { font: 500 12px/1 var(--sans); color: #b9ad97; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-board .ds-pip { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(201,153,63,.5) !important; background: #08080a !important; transform: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-board .ds-pip.success.filled { background: #6e8f5e !important; border-color: #86a676 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-board .ds-pip.failure.filled { background: #b3261e !important; border-color: #d9493b !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-result { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; min-width: 0; text-align: center; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-result.is-pass { box-shadow: inset 0 -2px 0 #6e8f5e; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-result.is-fail { box-shadow: inset 0 -2px 0 #b3261e; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-result-num { font: 700 48px/1 var(--serif); color: #e9bd62; font-variant-numeric: tabular-nums; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-result.is-empty .ds2-result-num { color: rgba(233,189,98,.4); }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-result-note { font: 500 12px/1.25 var(--sans); color: #b9ad97; overflow-wrap: anywhere; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-result.is-pass .ds2-result-note { color: #86a676; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-result.is-fail .ds2-result-note { color: #d9493b; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-roll, html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-rules-line, html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-rules { grid-column: 1 / -1; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-rules-line { display: flex; align-items: center; gap: 8px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-rules-line .death-save-rules {
  flex: 1 1 auto; min-width: 0; margin: 0 !important; text-align: left !important; font: 13px/1.35 var(--sans) !important; color: #b9ad97 !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-rules { margin: 0; padding: 10px 12px 10px 28px; font: 13px/1.45 var(--sans); color: #e2cba3 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-rules li { margin: 0 0 4px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-rules li:last-child { margin-bottom: 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-survival-options { margin: 0 !important; padding: 0 !important; border: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-survive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hf142-lock-hp { margin: 0 0 8px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-lock-feature { padding: 10px 12px; margin: 0 0 8px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-lock-feature-name { color: #f4e6cc; }
/* the sheet's own 0 HP strip around the same board (1 Nov): was a dark red panel with a salmon edge and title. Now a
   dark panel, the gold hairline and a gold title; stable and dead keep only a thin green / ember line. */
html:root[data-palette][data-palette][data-palette][data-palette] body .death-saves-strip {
  background: linear-gradient(180deg, #19191c, #121214) !important; border: 1px solid rgba(201,153,63,.34) !important; border-radius: var(--r-sm) !important; color: #e2cba3;
  box-shadow: inset 0 2px 0 #b3261e;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .death-saves-strip.stable { box-shadow: inset 0 2px 0 #6e8f5e; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-saves-strip.dead { box-shadow: inset 0 2px 0 #5b5b5b; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-saves-strip .death-saves-title { color: #e9bd62 !important; font: 700 20px/1.25 var(--serif) !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 10px !important; overflow-wrap: anywhere; }
/* one death-save screen (1 Nov, Tom): the card inside the sheet now carries the pop-up's controls, laid out the same way */
html:root[data-palette][data-palette][data-palette][data-palette] body .death-saves-strip { padding: 14px !important; margin: 0 0 12px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-saves-strip .death-survival-options { margin-top: 10px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-saves-strip :is(.hf142-dead-note, .death-saves-hint) { color: #b9ad97 !important; font-family: var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
/* every button on the board: sentence case, the app's sans, 44 px tall, the shared small radius */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.death-save-roll-btn, .ds-roll-btn, .death-lock-pickup-btn, .death-lock-feature-btn, .ds2-help, :is(.death-lock-dialog, .death-saves-strip) .hp-btn) {
  min-height: 44px; border-radius: var(--r-sm) !important; font: 600 14px/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
}
/* the HP box keeps its gold edge: one step above the generic input rule, whose #342813 edge (now #2c2c31) used to win (1 Nov) */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.death-lock-dialog, .death-saves-strip) .hp-input.hp-input.hp-input { border-radius: var(--r-sm) !important; border-color: rgba(201,153,63,.34) !important; }
/* Roll d20 is the one gold primary */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.death-save-roll-btn, .ds-roll-btn) {
  background: linear-gradient(#e9c06a, #b4863a) !important; border: 1px solid #c9993f !important; color: #1a1007 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .death-save-roll-btn.ds2-roll { min-height: 48px; margin: 0 !important; font-size: 16px !important; }
/* Healed / Hit / Crit, the trait buttons, Damage / Heal and "?": the dark button with the gold hairline and gold text */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.death-lock-pickup-btn, .death-lock-feature-btn, .ds2-help, :is(.death-lock-dialog, .death-saves-strip) .hp-btn) {
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important; color: #e9bd62 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-survive > button { width: 100%; margin: 0 !important; padding: 6px 4px !important; white-space: normal; overflow-wrap: anywhere; line-height: 1.2 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-help { flex: 0 0 44px; width: 44px; padding: 0 !important; font-size: 16px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-help[aria-expanded="true"] { background: #111113 !important; border-color: #c9993f !important; }
@media (max-width: 380px) {
  html:root[data-palette][data-palette][data-palette][data-palette] body .death-lock-backdrop { padding: 10px !important; }
  html:root[data-palette][data-palette][data-palette][data-palette] body .death-lock-dialog { padding: 12px !important; }
  html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-board { gap: 6px !important; }
  html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-result-num { font-size: 42px; }
  html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-survive { gap: 6px; }
  html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-survive > button { font-size: 13px !important; }
}
/* Old-style pop-ups in the current Hearth dialog look (QA 1 Nov, Tom: dark + gold only). The legacy dialogs (Gear &
   Items and its add / change dialogs, the post-create Skill Versatility / Expertise / bonus-skill picker, the High Elf
   cantrip list) kept the old mono uppercase buttons, tiny italic notes and a cream "picked" fill. Here: the app's sans
   in sentence case, 44 px targets, 13 px+ notes in upright type, the dark tile with the gold hairline for each choice
   and the picked-tile gold for what you pick. Colours only come from the dark palette above. The "+ Custom Armor..."
   option keeps its green on purpose (Tom). */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dialog-backdrop, .gear-popup-backdrop) :is(.dialog-close, .skill-choice-btn, .gear-edit-btn, .gear-card-btn, .gear-add-btn, .shield-toggle, .item-toggle-btn, .weapon-magic-btn.wide) {
  min-height: 44px !important; font: 600 14px/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dialog-backdrop, .gear-popup-backdrop) :is(.dialog-close, .gear-edit-btn, .gear-card-btn, .shield-toggle, .item-toggle-btn) { border-radius: 10px !important; padding: 0 14px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dialog-backdrop, .gear-popup-backdrop) .gear-add-btn { border-radius: 12px !important; border-style: solid !important; }
/* a long choice (a cantrip and its text): the name over its note, left-aligned, not a name squeezed beside a paragraph */
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .dialog-option:has(> .small-note) {
  flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 2px; text-align: left !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .dialog-option:has(> .small-note) > div:first-child { font: 600 15px/1.3 var(--sans) !important; }
/* notes: upright and readable, no tiny italic */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dialog-backdrop, .gear-popup-backdrop) :is(.dialog-helper, .small-note, .gear-empty) {
  font-family: var(--sans) !important; font-style: normal !important; font-size: 13.5px !important; line-height: 1.4 !important; margin-top: 2px;
}
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dialog-backdrop, .gear-popup-backdrop) :is(.dialog-option-meta, .gear-card-meta) {
  font-family: var(--sans) !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important;
}
/* the gear sections: the dark tile with the gold hairline, a gold sentence-case label */
html:root[data-palette][data-palette][data-palette][data-palette] body .gear-popup-backdrop .weapon-magic-label { font: 600 13px/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: #b9ad97 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dialog-backdrop, .gear-popup-backdrop) .shield-meta { font: 500 12.5px/1.3 var(--sans) !important; letter-spacing: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .dialog .section-mini { font: 600 13px/1.2 var(--sans) !important; letter-spacing: .02em !important; text-transform: none !important; color: #e9bd62 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .armor-bonus-btn { min-width: 44px; min-height: 44px; border-radius: 10px; font: 600 14px/1 var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gear-popup-backdrop .gear-section-label {
  font: 600 13px/1.2 var(--sans) !important; letter-spacing: .02em !important; text-transform: none !important; color: #e9bd62 !important;
}
/* skill picks: each a row on the dark well with the gold hairline; a pick is the picked-tile gold, was a cream fill */
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .skill-choice-btn {
  background: #111113 !important; border: 1px solid rgba(201,153,63,.32) !important; border-radius: 12px !important; color: #f4e6cc !important; padding: 0 14px !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .skill-choice-btn.active {
  background: linear-gradient(#2a2a2e, #18181b) !important; border-color: #e9bd62 !important; color: #f0cf86 !important; box-shadow: inset 0 0 0 1px #e9bd62 !important;
}

/* The sheet's "Active conditions" banner (QA 1 Nov): the dark tile with the gold hairline, a gold sentence-case title and
   a 44 px Remove in the dark button style, was a bare strip with a square uppercase brown REMOVE. */
html:root[data-palette][data-palette][data-palette][data-palette] body .active-condition-tracker {
  background: linear-gradient(180deg, #19191c, #121214) !important; border: 1px solid rgba(201,153,63,.34) !important; border-radius: 16px !important; padding: 12px 14px !important; color: #f4e6cc;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .active-condition-title {
  font: 600 14px/1.2 var(--sans) !important; letter-spacing: .02em !important; text-transform: none !important; color: #e9bd62 !important; margin-bottom: 4px;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .active-condition-row { border-top: 1px solid rgba(201,153,63,.18) !important; padding-top: 10px !important; gap: 12px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .active-condition-name { font: 600 15px/1.3 var(--sans) !important; color: #f4e6cc !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .active-condition-desc { font: 400 13.5px/1.4 var(--sans) !important; color: #b9ad97 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .active-condition-remove {
  min-height: 44px; padding: 0 16px !important; border-radius: 10px !important; font: 600 14px/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.38) !important; color: #e2cba3 !important;
}

/* Level-up's class-pick and HP Apply buttons (1 Nov): the v0.91.2 dark-mode fill was brown rgba(110,72,40,.35) with a
   crimson hover. Now the dark button with the gold hairline, gold edge on hover. */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(#levelupOpenClassPick, .hp-apply-btn) {
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.38) !important; color: #e2cba3 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body :is(#levelupOpenClassPick, .hp-apply-btn):hover { border-color: #e9bd62 !important; background: linear-gradient(#2a2a2e, #18181b) !important; }

/* Add Enemies sheet (Tom, 1 Nov): near-black sheet, gold for accents only. A slim Legendary Bosses button beside the
   title, the search, then ONE sideways-scrolling CR chip row and one creature-type row, and the monster list takes the
   rest of the sheet (6 rows on a 390x844 phone). The sheet keeps one height so filtering never makes it jump. */
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog.enemy-picker {
  background: var(--page) !important; background-image: none !important; background-color: var(--page) !important;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden !important;
  height: min(88dvh, 860px); max-height: min(88dvh, 860px); padding: 16px 16px 12px !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker > * { flex: none; margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-picker-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-picker-head .dialog-title { flex: 1 1 auto; min-width: 0; margin: 0 !important; font-size: 21px !important; line-height: 1.2; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .boss-entry-btn {
  flex: none; width: auto; min-height: 44px; margin: 0; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  background: var(--card-surface) !important; background-image: none !important; border: 1px solid var(--card-border) !important;
  color: var(--gold) !important; font: 600 13px/1 var(--sans); letter-spacing: 0;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .boss-entry-btn:hover { border-color: var(--gold) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-search { min-height: 44px; border-radius: 10px; font: 400 15px/1.2 var(--sans); }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-chip-row {
  position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow: auto hidden;
  margin: 0 -16px !important; padding: 0 16px; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-chip-row::-webkit-scrollbar { display: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-chip-label { flex: none; font: 700 11px/1 var(--sans); letter-spacing: .06em; color: var(--oak-faded); padding-right: 2px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-cr-chip {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-surface) !important; background-image: none !important; border: 1px solid var(--card-border) !important;
  color: #e2cba3 !important; font: 600 13px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-cr-chip.on {
  background: var(--brass-grad) !important; border-color: var(--gold) !important; color: var(--page) !important; font-weight: 700 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-list {
  flex: 1 1 auto; min-height: 0; overflow: hidden auto; display: flex; flex-direction: column; gap: 6px; padding: 0 !important; columns: auto;
  -webkit-mask-image: none !important; mask-image: none !important; /* the 12 px edge fade clipped the first row's text */
}
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-list > * { flex: none; margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-row {
  min-height: 52px; padding: 6px 12px; border-radius: 10px; box-sizing: border-box;
  background: var(--card-surface) !important; background-image: none !important; border: 1px solid rgba(201,153,63,.2) !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-row:hover { border-color: var(--card-border) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-row-name { font-size: 15px; line-height: 1.25; color: #f4e6cc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-row-meta { font: 400 12px/1.3 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: #b9ad97; margin-top: 1px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-row-chev { color: var(--gold); }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-custom-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-custom-pair .enemy-row {
  min-height: 44px; justify-content: center; text-align: center; background: transparent !important; border: 1px dashed var(--card-border) !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-custom-pair .enemy-row-name { font: 600 14px/1.2 var(--sans); color: var(--gold); }
html:root[data-palette][data-palette][data-palette][data-palette] body .enemy-picker .enemy-done-bar { position: static; background: transparent !important; padding: 4px 0 var(--hearth-safe-bottom, 0px) !important; }
/* Roll result toast (1 Nov, found while checking the death-save card): its --btn-main fill no longer exists in the new
   shell, so the card was see-through, and it sat 18 px from the bottom, over the tab bar. Now the charcoal panel with
   the gold hairline, sentence case, the shared small radius, and it sits above the tab bar when one is showing. */
html:root[data-palette][data-palette][data-palette][data-palette] body .hearth-roll-toast-card {
  background: linear-gradient(180deg, #19191c, #121214) !important; color: #f4e6cc !important; border: 1px solid rgba(201,153,63,.45) !important;
  border-radius: var(--r-sm) !important; box-shadow: 0 10px 30px #000c !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .hearth-roll-toast-label { text-transform: none !important; letter-spacing: 0 !important; color: #e9bd62; opacity: 1 !important; font-weight: 600; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hearth-roll-toast-total { color: #e9bd62; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hearth-roll-toast-detail { color: #b9ad97; opacity: 1 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body:has(.u-tabbar:not([hidden])) .hearth-roll-toast { bottom: calc(var(--u-tabbar-h, 84px) + 12px + env(safe-area-inset-bottom, 0px)) !important; }
/* (1 Nov, Tom) your own d20: a label, the number box and Use roll on one row under Roll d20 */
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-own { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 76px auto; align-items: center; gap: 8px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-own-label { font: 500 13px/1.25 var(--sans); color: #b9ad97; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-own .ds2-own-input.hp-input { min-height: 44px; width: 76px; margin: 0 !important; text-align: center; font: 700 18px var(--sans); border-radius: var(--r-sm) !important; border: 1px solid rgba(201,153,63,.34) !important; background: #08080a !important; color: #f4e6cc !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-own .ds2-own-input[aria-invalid="true"] { border-color: #d9493b !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .ds2-own .ds2-own-btn { width: auto; margin: 0 !important; padding: 0 14px !important; white-space: nowrap; }
/* the outcome message (Stable / Dead / Back in the fight): sentence case, the card's look */
html:root[data-palette][data-palette][data-palette][data-palette] body .death-outcome-dialog { border-radius: var(--r-sm) !important; background: linear-gradient(180deg, #19191c, #121214) !important; border: 1px solid rgba(201,153,63,.45) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.death-outcome-title, .death-outcome-btn) { text-transform: none !important; letter-spacing: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-outcome-icon:empty { display: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-outcome-title { font: 700 22px/1.25 var(--serif) !important; color: #e9bd62 !important; text-shadow: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-outcome-title.dead { color: #e2cba3 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-outcome-helper { font: 500 14px/1.4 var(--sans) !important; font-style: normal !important; color: #b9ad97 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .death-outcome-btn { min-height: 44px; border-radius: var(--r-sm) !important; background: linear-gradient(#e9c06a, #b4863a) !important; border: 1px solid #c9993f !important; color: #1a1007 !important; font: 600 15px var(--sans) !important; }
/* Class development (1-20), Tom found it 1 Nov (audit L3): salmon current level and badge, a brown "pick your
   subclass" band, capitals and letter-spacing. Now the charcoal panels with gold for "you are here". */
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog :is(.cdev-jump, .cdev-row, .cdev-subclass-pick, .cdev-jump-btn, .cdev-current-tag) { border-radius: var(--r-sm) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-jump { background: none !important; border: 0 !important; border-left: 0 !important; box-shadow: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-jump-btn { box-sizing: border-box !important; min-height: 46px !important; height: 46px !important; display: flex !important; align-items: center; justify-content: center; background: linear-gradient(#26262a, #17171a) !important; border: 1px solid #2c2c31 !important; color: #e2cba3 !important; font: 600 14px var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-jump-btn.current { background: linear-gradient(#e9c06a, #b4863a) !important; border-color: #c9993f !important; color: #1a1007 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-row { background: linear-gradient(180deg, #19191c, #121214) !important; border: 1px solid #26262a !important; border-left: 1px solid #26262a !important; box-shadow: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-row.current { border-color: rgba(201,153,63,.6) !important; box-shadow: inset 2px 0 0 #c9993f !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-row.past { opacity: .78; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-current-tag { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; color: #e9bd62 !important; font: 700 12px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; padding: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog :is(.cdev-prof, .cdev-slots, .feature-lvl, .cdev-feats-label) { font-family: var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-prof { color: #b9ad97 !important; font-weight: 500 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog :is(.cdev-slots, .cdev-now) { color: #e9bd62 !important; font-weight: 600 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-subclass-pick { background: #111113 !important; border: 1px solid rgba(201,153,63,.34) !important; border-left: 2px solid #c9993f !important; color: #e9bd62 !important; font: 600 14px/1.35 var(--sans) !important; font-style: normal !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-empty { color: #b9ad97 !important; font-style: normal !important; }
/* the 20 level chips are one swipeable row (was four rows of 5) so the levels start higher on the screen */
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-class-block { min-width: 0; max-width: 100%; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-jump-clip { position: relative; max-width: 100%; min-width: 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-jump-clip::after { content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: 8px; width: 40px; pointer-events: none; background: linear-gradient(to right, rgba(25,25,28,0), #19191c 72%); }
@media (max-width: 360px) {
  html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog > .dialog-title { font-size: 18px !important; line-height: 1.15 !important; white-space: nowrap; }
}
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-jump { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #c9993f #111113; padding: 8px 36px 8px 8px !important; margin-bottom: 12px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-jump::-webkit-scrollbar { display: block; height: 6px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-jump::-webkit-scrollbar-thumb { background: #c9993f; border-radius: 3px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-jump-btn { flex: 0 0 52px !important; min-width: 52px; padding: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-row { padding: 14px 16px !important; margin-bottom: 8px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-lvl { font: 700 20px var(--serif) !important; color: #f4e6cc !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-row.current .cdev-lvl { color: #e9bd62 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-prof { font-size: 13px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-slots { font-size: 13px !important; margin-bottom: 8px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-subclass-pick { padding: 10px 12px !important; margin: 0 0 8px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-subclass-pick.chose { color: #e2cba3 !important; border-left-color: #c9993f !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-feat-name { font: 700 16px/1.3 var(--serif) !important; color: #f4e6cc !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-feat-desc { font: 400 14px/1.45 var(--sans) !important; color: #e2cba3 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-feats.subclass { border-top: 1px solid #26262a !important; margin-top: 10px !important; padding-top: 10px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .cdev-feats-label { font-size: 13px !important; font-weight: 600 !important; color: #e9bd62 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cdev-dialog .dialog-close { min-height: 44px; border-radius: var(--r-sm) !important; }
/* Condition pop-ups (2 Nov, Tom): the description sat in a salmon-edged box; now the dark well with the gold edge.
   Exhaustion: level chips 0-6 (no white system list) and the stacking effects listed under them, your levels lit. */
html:root[data-palette][data-palette][data-palette][data-palette] body .cond-dialog-desc { background: #111113 !important; border: 1px solid #26262a !important; border-left: 2px solid #c9993f !important; border-radius: var(--r-sm) !important; color: #e2cba3 !important; font-family: var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-levels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 14px 0 10px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-chip { min-height: 44px; border-radius: var(--r-sm); background: linear-gradient(#26262a, #17171a); border: 1px solid rgba(201,153,63,.45); color: #e9bd62; font: 700 16px var(--sans); cursor: pointer; }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-chip.on { background: linear-gradient(#e9c06a, #b4863a); border-color: #c9993f; color: #1a1007; }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-effects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-effects li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); color: #b9ad97; font: 400 14px/1.35 var(--sans); }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-effects li b { color: #b9ad97; font-weight: 700; text-align: center; }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-effects li.on { background: #111113; border: 1px solid rgba(201,153,63,.34); color: #f4e6cc; }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-effects li.on b { color: #e9bd62; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-actions .btn { font-family: var(--sans) !important; border-radius: var(--r-sm) !important; min-height: 44px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-levels .exh-chip.on { background: linear-gradient(#e9c06a, #b4863a) !important; border-color: #c9993f !important; color: #1a1007 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-levels .exh-chip:not(.on) { background: linear-gradient(#26262a, #17171a) !important; color: #e9bd62 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .exh-note { margin-top: 10px; color: #b9ad97; font: 400 13px/1.4 var(--sans); }

/* Pickers (2 Nov, pickers; Tom approved 2 Nov 00:03): Add weapon, Add or change armour / shield and Add gear follow the
   Add Enemies sheet: charcoal panel, the green "+ Custom ..." row, one search box, ONE sideways-scrolling chip row (gold
   when picked) and a list that fills the rest of the sheet (about 6 rows on a 390x844 phone). One height, so filtering
   never makes it jump. Long names wrap, never clip. */
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog.pk-sheet {
  background: linear-gradient(180deg, #19191c, #121214) !important; background-color: #121214 !important;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden !important;
  height: min(88dvh, 860px); max-height: min(88dvh, 860px); padding: 16px 16px 12px !important; box-sizing: border-box;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet > * { flex: none; margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .dialog-title { font-size: 21px !important; line-height: 1.2; color: #f4e6cc !important; text-transform: none !important; letter-spacing: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-helper { font: 400 13px/1.35 var(--sans); color: #b9ad97; font-style: normal; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-custom {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm, 10px); text-align: left; cursor: pointer;
  background: transparent !important; background-image: none !important; border: 1px dashed color-mix(in srgb, var(--moss) 60%, transparent) !important;
  color: var(--moss) !important; font: 600 15px/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-custom:hover { border-color: var(--moss) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-search {
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: var(--r-sm, 10px);
  background: #08080a !important; border: 1px solid rgba(201,153,63,.45) !important; color: #e2cba3 !important; font: 400 15px/1.2 var(--sans); -webkit-appearance: none; appearance: none;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-search::placeholder { color: #8f8574; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-search:focus { outline: none; border-color: #e9bd62 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-chip-row {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow: auto hidden;
  margin: 0 -16px !important; padding: 0 16px; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-chip-row::-webkit-scrollbar { display: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-chip {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important;
  color: #e2cba3 !important; font: 600 13px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-chip.on {
  background: linear-gradient(#e9c06a, #b4863a) !important; border-color: #e9bd62 !important; color: #1a1007 !important; font-weight: 700 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-list {
  flex: 1 1 auto !important; min-height: 0; overflow: hidden auto; display: flex; flex-direction: column; gap: 6px; padding: 0 !important;
  overscroll-behavior: contain; -webkit-mask-image: none !important; mask-image: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-list > * { flex: none; margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet [hidden] { display: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-row {
  display: flex; align-items: stretch; gap: 0; min-height: 52px; border-radius: var(--r-sm, 10px); box-sizing: border-box; overflow: hidden;
  background: #111113 !important; background-image: none !important; border: 1px solid rgba(201,153,63,.2) !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-row:hover { border-color: rgba(201,153,63,.45) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-main {
  flex: 1 1 auto; min-width: 0; min-height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
  padding: 7px 12px; margin: 0; text-align: left; cursor: pointer; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important;
  font-family: var(--sans); letter-spacing: 0; text-transform: none; white-space: normal;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-name { font: 600 15.5px/1.25 var(--serif) !important; color: #f4e6cc !important; overflow-wrap: anywhere; white-space: normal; text-transform: none !important; letter-spacing: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-meta { font: 400 12.5px/1.3 var(--sans) !important; color: #b9ad97 !important; overflow-wrap: anywhere; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-tag {
  display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(201,153,63,.55); color: #e9bd62; background: transparent; font: 600 11px/1.35 var(--sans); letter-spacing: 0; text-transform: none;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-side {
  flex: none; align-self: center; min-width: 56px; min-height: 44px; margin: 0 6px 0 0; padding: 0 12px; border-radius: var(--r-sm, 10px); cursor: pointer;
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important; color: #e9bd62 !important;
  font: 600 13px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-row.pk-danger .pk-name { color: #e2cba3 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-empty { padding: 18px 4px; text-align: center; color: #b9ad97; font: 400 14px/1.3 var(--sans); }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .dialog-close { flex: none; min-height: 44px; margin-top: 2px !important; }
/* the detail pop-ups over a picker (weapon, armour): same charcoal card, sentence-case labels */
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog.pk-detail { background: linear-gradient(180deg, #19191c, #121214) !important; background-color: #121214 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-detail .pk-detail-head { margin-top: 14px; font: 600 14px/1.3 var(--sans); color: #e9bd62; text-transform: none; letter-spacing: 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-detail .wd-lbl { color: #b9ad97; text-transform: none !important; letter-spacing: 0 !important; font: 600 13px/1.3 var(--sans); margin-right: 4px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-detail .weapon-detail-desc { color: #e2cba3; font: 400 14px/1.45 var(--sans); font-style: normal; margin-top: 10px; background: none !important; border: 0 !important; padding: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.pk-detail, .pk-sheet) :is(.btn, .dialog-close) { font: 600 15px/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; min-height: 44px; }
/* (2 Nov, pickers) a short choice as chips (custom armour category, custom weapon damage type and bonus): wraps or
   scrolls sideways, never a native select */
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-choice { display: flex; flex-wrap: wrap; gap: 6px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-choice.pk-choice-scroll { flex-wrap: nowrap; overflow: auto hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-choice.pk-choice-scroll::-webkit-scrollbar { display: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-choice .pk-chip {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important;
  color: #e2cba3 !important; font: 600 13px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-choice .pk-chip.on { background: linear-gradient(#e9c06a, #b4863a) !important; border-color: #e9bd62 !important; color: #1a1007 !important; font-weight: 700 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .cw-type-line { flex: 1 0 100%; min-width: 0; margin-top: 6px; }
/* (2 Nov, pickers) the custom weapon / armour / item forms: sentence-case labels, sans, no red */
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-form .hp-control-label { text-transform: none !important; letter-spacing: 0 !important; font: 600 13px/1.3 var(--sans) !important; color: #b9ad97 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-form .radio-label { font: 400 15px/1.3 var(--sans) !important; color: #e2cba3 !important; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-style: normal !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-form .small-note { font-style: normal !important; color: #b9ad97 !important; font-size: 12.5px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-form .cw-remove-row { min-width: 44px; min-height: 44px; color: #b9ad97 !important; background: transparent !important; border: 1px solid rgba(201,153,63,.3) !important; border-radius: var(--r-sm, 10px); }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-form .cw-add-damage { min-height: 44px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-form .dialog-title { text-transform: none !important; letter-spacing: 0 !important; }
/* Add gear (2 Nov, pickers): the item form inside the same sheet, and the quiet "Added ..." line above Close */
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet.pk-item-form .pk-form-body { flex: 1 1 auto !important; min-height: 0; overflow: hidden auto; display: flex; flex-direction: column; gap: 10px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet.pk-item-form .pk-form-body .hp-control-group { margin: 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet.pk-item-form .pk-item-desc { color: #e2cba3; font: 400 14px/1.45 var(--sans); white-space: pre-line; padding-top: 4px; border-top: 1px solid #26262a; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet.pk-item-form .dialog-actions { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .pk-toast {
  position: static !important; transform: none !important; inset: auto !important; display: block; padding: 8px 12px !important; border-radius: var(--r-sm, 10px);
  background: #111113 !important; border: 1px solid rgba(201,153,63,.45) !important; color: #e9bd62 !important; font: 600 14px/1.3 var(--sans) !important; text-align: center; box-shadow: none !important;
}

/* Spells panel (2 Nov, pickers; Tom 2 Nov 00:04): one cast line, one counts line, one "Learn or browse spells"
   button, a search box and a level chip row, then your spells grouped by level. Charcoal + gold, sentence case, no
   purple box, no blue tags, no italics. The slots stay as the diamond rows above (tap to spend or restore). */
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; min-width: 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-panel > * { margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-castline { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 14px/1.35 var(--sans); color: #b9ad97; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-castline b { font-weight: 700; color: #f4e6cc; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-castline > span + span::before { content: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-counts { font: 400 13px/1.35 var(--sans); color: #b9ad97; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-warn { font: 400 13px/1.35 var(--sans); color: #e9bd62; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-browse {
  width: 100%; min-height: 44px; border-radius: var(--r-sm, 10px); cursor: pointer;
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important; color: #e9bd62 !important;
  font: 600 15px/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-browse:hover { border-color: #e9bd62 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-search {
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: var(--r-sm, 10px);
  background: #08080a !important; border: 1px solid rgba(201,153,63,.45) !important; color: #e2cba3 !important; font: 400 15px/1.2 var(--sans) !important; -webkit-appearance: none; appearance: none;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-search::placeholder { color: #8f8574; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-search:focus { outline: none; border-color: #e9bd62 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-chip-row { display: flex; flex-wrap: nowrap; gap: 6px; overflow: auto hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-chip-row::-webkit-scrollbar { display: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.spl-chip-row, .spb-chip-row) :is(.spl-chip, .pk-chip) {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important;
  color: #e2cba3 !important; font: 600 13px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-chip-row .spl-chip.on { background: linear-gradient(#e9c06a, #b4863a) !important; border-color: #e9bd62 !important; color: #1a1007 !important; font-weight: 700 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.spl-panel, .pk-sheet) [hidden] { display: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-group { display: flex; flex-direction: column; gap: 6px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-level-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 2px 0; font: 600 14px/1.3 var(--sans); color: #e9bd62; text-transform: none; letter-spacing: 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-level-note { font: 400 12.5px/1.3 var(--sans); color: #b9ad97; text-align: right; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-empty { padding: 14px 4px; text-align: center; color: #b9ad97; font: 400 14px/1.35 var(--sans); }
/* the spell rows (also on the Action / Bonus / Reaction tabs, same renderSpellCard) */
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card.spell-action-card {
  display: flex !important; align-items: center !important; gap: 8px !important; min-height: 52px; margin: 0 !important; padding: 8px 8px 8px 12px !important; border-radius: var(--r-sm, 10px) !important;
  background: #111113 !important; background-image: none !important; border: 1px solid rgba(201,153,63,.2) !important; box-shadow: none !important; opacity: 1 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card.spell-action-card::before,
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card.spell-action-card::after { content: none !important; display: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card .action-card-main { flex: 1 1 auto; min-width: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card .action-card-name { font: 600 16px/1.25 var(--serif) !important; color: #f4e6cc !important; overflow-wrap: anywhere; text-transform: none !important; letter-spacing: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card .action-card-meta { font: 400 12.5px/1.35 var(--sans) !important; color: #b9ad97 !important; text-transform: none !important; letter-spacing: 0 !important; font-style: normal !important; overflow-wrap: anywhere; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card .spell-effect { font: 600 13px/1.35 var(--sans); color: #e9bd62; overflow-wrap: anywhere; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card .spell-unavailable-note { font: 400 12.5px/1.3 var(--sans) !important; color: #b9ad97 !important; font-style: normal !important; background: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card.no-slot .action-card-name { color: #b9ad97 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card .action-roll-btn {
  flex: none; min-width: 72px; min-height: 44px; padding: 0 12px !important; border-radius: var(--r-sm, 10px) !important; margin: 0 !important;
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important; color: #e9bd62 !important; box-shadow: none !important;
  font: 600 14px/1.15 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card .action-roll-btn:is(:disabled, .muted, .disabled, .used) { background: #111113 !important; color: #8f8574 !important; border-color: #2c2c31 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card .action-roll-btn small { font: 400 11.5px/1.2 var(--sans); color: inherit; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.spell-action-card, .pk-sheet, .spell-detail-dialog, .spl-panel) :is(.spl-pill, .spell-source-tag, .feature-spell-tag, .ed24-tag, .free-cast-mark) {
  display: inline-block; vertical-align: 2px; margin: 0 0 0 4px; padding: 1px 7px !important; border-radius: 999px !important; white-space: nowrap;
  background: transparent !important; border: 1px solid rgba(201,153,63,.55) !important; color: #e9bd62 !important;
  font: 600 11px/1.35 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .spell-action-card .free-cast-mark.used { color: #8f8574 !important; border-color: #2c2c31 !important; }
/* Browse spells (2 Nov, pickers): the picker sheet with spell rows: name (+ edition / status pills), meta line, gold
   effect line, and the sentence-case action buttons on the right; a row's text opens the spell's detail. */
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-row { align-items: center; padding: 0 8px 0 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-row .pk-main { min-height: 56px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-effect { font: 600 13px/1.35 var(--sans); color: #e9bd62; overflow-wrap: anywhere; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-acts { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-acts .browse-action-btn {
  min-width: 92px; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm, 10px); cursor: pointer; margin: 0 !important;
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important; color: #e9bd62 !important; box-shadow: none !important;
  font: 600 14px/1.15 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-acts .browse-action-btn:disabled { background: #111113 !important; color: #8f8574 !important; border-color: #2c2c31 !important; cursor: default; }
/* Known / Forget (Tom, 2 Nov). Learn stays gold. Forget is a plain outline. A spell the player knows
   takes a coloured border and a Known tag: attack red and heal green match the feature pills
   (martial #b8141f / #ff5a5a, nature #17603a / #6fd39a); utility is the indigo pill. */
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-acts .browse-action-btn.learn,
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-acts .browse-action-btn.learn_cantrip {
  background: linear-gradient(#f0cf86, #c9953f) !important; border-color: #f6dc9c !important; color: #2a1708 !important; font-weight: 700 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-acts .browse-action-btn.forget,
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-acts .browse-action-btn.forget_cantrip {
  background: transparent !important; border: 1px solid rgba(244, 230, 204, .55) !important; color: #f4e6cc !important; box-shadow: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-acts .browse-action-btn.forget:is(:hover, :focus-visible),
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-acts .browse-action-btn.forget_cantrip:is(:hover, :focus-visible) {
  border-color: rgba(244, 230, 204, .85) !important; box-shadow: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-row.spb-known.spb-attack { border-color: #ff5a5a !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-row.spb-known.spb-heal { border-color: #6fd39a !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-row.spb-known.spb-utility { border-color: #9aa8dc !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-row.spb-known.spb-attack:hover { border-color: #ff5a5a !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-row.spb-known.spb-heal:hover { border-color: #6fd39a !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-row.spb-known.spb-utility:hover { border-color: #9aa8dc !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-status.spb-tone-attack {
  background: linear-gradient(#b8141f, #7a0a12) !important; border-color: #ff5a5a !important; color: #fff0f0 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-status.spb-tone-heal {
  background: linear-gradient(#17603a, #0d3d24) !important; border-color: #6fd39a !important; color: #e4f8e6 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .pk-sheet .spb-status.spb-tone-utility {
  background: linear-gradient(#2a3f78, #1a2748) !important; border-color: #9aa8dc !important; color: #e8eeff !important;
}
/* the spell detail card (audit H6): one description block, no inner form-like box, sans buttons */
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog.spd-card {
  background: linear-gradient(180deg, #19191c, #121214) !important; background-color: #121214 !important;
  display: flex; flex-direction: column; gap: 6px; overflow: hidden !important; max-height: min(88dvh, 860px); padding: 16px 16px 12px !important; box-sizing: border-box;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card > * { flex: none; margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card .dialog-title { font-size: 22px !important; line-height: 1.2; color: #f4e6cc !important; text-transform: none !important; letter-spacing: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card .spd-meta { font: 400 13.5px/1.4 var(--sans); color: #b9ad97; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card .spd-effect { font: 600 14px/1.4 var(--sans); color: #e9bd62; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card .spd-pills { display: flex; flex-wrap: wrap; gap: 6px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card .spd-pills > * { margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card .spd-body { flex: 1 1 auto !important; min-height: 0; overflow: hidden auto; padding: 8px 0 0 !important; border-top: 1px solid #26262a; background: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card .spd-desc { font: 400 15px/1.5 var(--sans); color: #e2cba3; white-space: pre-line; overflow-wrap: anywhere; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card .spd-credit { margin-top: 10px; font: 400 12.5px/1.4 var(--sans); color: #b9ad97; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card .spd-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card .spd-actions > * { margin: 0 !important; width: 100%; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-card :is(.btn, .dialog-close) { min-height: 44px; font: 600 15px/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spd-backdrop#spellDetailBackdrop { z-index: 320; }
/* 2024 characters' Spells panel (2 Nov, pickers): same cast and counts lines; Manage buttons side by side; spells as
   gold-edged chips that open the detail; the slot rows only when the diamonds above do not show them */
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-chip {
  min-height: 44px; padding: 0 14px; border-radius: var(--r-sm, 10px); cursor: pointer; max-width: 100%; white-space: normal; text-align: left;
  background: #111113 !important; border: 1px solid rgba(201,153,63,.3) !important; color: #f4e6cc !important; font: 600 15px/1.2 var(--serif) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-slots { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-slots .b55-slot-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px 4px 12px; border-radius: var(--r-sm, 10px); background: #111113 !important; border: 1px solid rgba(201,153,63,.2) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-slots .b55-slot-label { flex: 1 1 auto; min-width: 0; font: 600 14px/1.3 var(--sans) !important; color: #f4e6cc !important; text-transform: none !important; letter-spacing: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-slots .b55-slot-pips { display: flex; gap: 8px; flex: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-slots .b55-pip { width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; background: linear-gradient(135deg, #f0cf86, #c9993f); border: 1px solid #f0cf86; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-slots .b55-pip.spent { background: #08080a; border-color: #c9993f; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-slots .b55-res-btns { display: flex; gap: 6px; flex: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-slots .b55-res-btn {
  min-height: 44px; min-width: 56px; padding: 0 10px; border-radius: var(--r-sm, 10px);
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important; color: #e9bd62 !important; font: 600 13px/1 var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-b55-slots .b55-res-btn:disabled { background: #111113 !important; color: #8f8574 !important; border-color: #2c2c31 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .spl-panel { padding-top: 4px; }

/* Spells panel slot rows (2 Nov): the title stays on one line next to the diamonds on a phone */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-cs3-panel="spells"] :is(.cs3-rm, .u-cs3-rm) > b { white-space: nowrap !important; font-size: 15px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-cs3-panel="spells"] :is(.cs3-pips, .u-cs3-pips) :is(.slot-pip, .u-slot-pip) { margin: 14px 11px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-cs3-panel="spells"] :is(.cs3-rm, .u-cs3-rm) > span { font-size: 12.5px !important; }

/* =====================================================================
   Whole-app check (2 Nov, whole-app check): Tom's bar for the morning, "no bugs, all checked, all the same style".
   ===================================================================== */
/* In-app picker for native selects (2 Nov, whole-app check): app/ui/ui.js selectPicker. Charcoal dialog, 44 px rows,
   gold for the picked one; it sits over every screen (GM, map builder, Forge pop-ups). */
html:root[data-palette][data-palette][data-palette][data-palette] body .u-layer.u-hx-pick-layer { z-index: 2147483000 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick { display: flex !important; flex-direction: column !important; max-height: min(78vh, 640px) !important; padding: 22px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important; background: linear-gradient(180deg, #19191c, #121214) !important; border: 1px solid rgba(201,153,63,.34) !important; border-radius: var(--r-sm) var(--r-sm) 0 0 !important; overflow: hidden !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-dialog.u-hx-pick { border-radius: var(--r-sm) !important; width: 420px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick-h .u-t-h3 { color: #f4e6cc !important; font: 600 18px/1.25 var(--serif) !important; text-transform: none !important; letter-spacing: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick-x { flex: none; width: 44px; height: 44px; border-radius: var(--r-sm); background: linear-gradient(#26262a, #17171a); border: 1px solid rgba(201,153,63,.45); color: #e9bd62; font: 400 22px/1 var(--sans); cursor: pointer; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; overscroll-behavior: contain; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 14px; text-align: left; border-radius: var(--r-sm); background: #111113; border: 1px solid #26262a; color: #e2cba3; font: 500 15px/1.3 var(--sans); cursor: pointer; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick-row.u-on { background: linear-gradient(#2a2a2e, #18181b); border-color: #c9993f; color: #f0cf86; box-shadow: inset 0 0 0 1px rgba(201,153,63,.35); }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick-row b { color: #e9bd62; font-weight: 700; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick-row:disabled { opacity: .45; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick-g { margin: 8px 4px 2px; color: #b9ad97; font: 600 13px var(--sans); }
/* One type style everywhere (2 Nov, whole-app check; Tom: "all the same style"): no uppercase or letter-spaced labels and
   no italics anywhere in the app chrome. Kept as they are: the jewel feature pills and pearl-blue condition chips, the
   coin abbreviations, the death-save card, Class development, exhaustion, the Classic paper sheet, and the sheet's
   Spells panel and Browse / learn spells / spell detail (hands off, being redesigned). */
html:root[data-palette][data-palette][data-palette][data-palette] body :where(*):not([class*="cs3-pill"], [class*="cs3-pill"] *, [class*="cs3-chip"], [class*="cs3-chip"] *, [class*="cs3-coin"], [class*="cs3-coin"] *, .death-saves-strip, .death-saves-strip *, [class*="ds2-"], [class*="ds2-"] *, [class*="death-outcome"], [class*="death-outcome"] *, [class*="cdev-"], [class*="cdev-"] *, [class*="exh-"], [class*="exh-"] *, [class*="cls-"], [class*="cls-"] *, .paper-sheet, .paper-sheet *, [data-cs3-panel="spells"], [data-cs3-panel="spells"] *, .browse-dialog:has([data-browse-action]), .browse-dialog:has([data-browse-action]) *, .spell-detail-dialog, .spell-detail-dialog *, svg, svg *) {
  text-transform: none !important; font-style: normal !important;
}
/* the wide-tracked label styles (letter-spacing over 1 px) lose the tracking; the slight negative tracking that keeps
   'Save +3' inside the Fold cover's ability boxes stays */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.u-t-label, .t-label, .cv-lab, .u-cs3-skh, .resource-use-btn, .grip-locked, .u-cs-sech, .gm2-sec, .section-label, .section-mini, .hp-control-label, .skills-edit-group-title, .skills-edit-legend, .stat-edit-roll-label, .roll-line-label, .xp-label, .forge-section-label, .dm-link-beta, .hw-label, .os-lbl, .tab-header-title, .active-condition-title, .tactical-toggles-label, .lvb small, .u-lvb small, .os-h, .cv-stat > span, .u-cv-stat > span) { letter-spacing: normal !important; }
/* Old-style pop-ups (2 Nov, whole-app check): the .dialog family (AC, Initiative, rolls, Passive scores, ability scores,
   XP, Gear & Items, Join ...) takes the card's corners, sans buttons and plain muted helper text. */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dialog-backdrop, .skills-dialog-backdrop) .dialog { border-radius: var(--r-sm) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dialog-backdrop, .skills-dialog-backdrop) :is(.dialog-helper, .section-helper, .roll-dialog-hint, .small-note) { color: #b9ad97 !important; font-family: var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dialog-backdrop, .skills-dialog-backdrop) :is(.dialog-close, .btn, .hp-apply-btn, .roll-line-btn, .dialog-btn) { font-family: var(--sans) !important; border-radius: var(--r-sm) !important; min-height: 44px; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dialog-backdrop, .skills-dialog-backdrop) :is(.hp-control-label, .section-mini, .section-label, .roll-line-label, .stat-edit-roll-label, .stat-edit-skills-label, .layered-section-label, .xp-label, .skills-edit-group-title, .skills-edit-legend) { font-family: var(--sans) !important; font-size: 13px !important; font-weight: 600 !important; color: #b9ad97 !important; }
/* Manual AC modifier (2 Nov, whole-app check): one line, AC once, − / + stepper */
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-acdlg .hx-ac-note { color: #b9ad97; font: 400 14px/1.4 var(--sans); margin: 0 0 12px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-acdlg .hx-ac-now { text-align: center; color: #e2cba3; font: 500 15px var(--sans); margin: 0 0 12px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-acdlg .hx-ac-now strong { color: #e9bd62; font: 700 26px var(--serif); margin-left: 4px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-acdlg .hx-ac-now span { color: #b9ad97; font-size: 13px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-acdlg .hx-ac-step { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; align-items: center; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-acdlg .hx-ac-step .btn { min-height: 48px !important; font-size: 22px !important; padding: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-acdlg .hx-ac-step input { height: 48px; margin: 0; text-align: center; font: 700 20px var(--sans) !important; background: #08080a !important; border: 1px solid #2c2c31 !important; border-radius: var(--r-sm) !important; color: #f4e6cc !important; width: 100%; box-sizing: border-box; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-acdlg .hx-ac-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-acdlg .dialog-close.primary { background: linear-gradient(#e9c06a, #b4863a) !important; color: #1a1007 !important; border-color: #c9993f !important; }
/* Skills edit (2 Nov, whole-app check): sans throughout, 44 px tap areas on the proficiency / expertise dots, one gold
   edge (was a double gold border), Done inside the panel. */
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog { border: 1px solid rgba(201,153,63,.34) !important; box-shadow: 0 18px 50px rgba(0,0,0,.6) !important; outline: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog .dialog-title { font: 600 20px var(--serif) !important; color: #f4e6cc !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog :is(.skills-edit-hint, .skills-edit-mod, .skills-edit-legend, .skills-edit-group-title) { font-family: var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog .skills-edit-hint { text-align: left !important; color: #b9ad97 !important; font-size: 13px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog :is(.skills-edit-row, .skills-edit-legend) { grid-template-columns: minmax(0, 1fr) 48px 48px 40px !important; gap: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog .skills-edit-legend span { text-align: center; font-size: 12px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog .skills-edit-row { padding: 0 4px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog .skills-edit-name { font: 500 15px var(--sans) !important; color: #e2cba3 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog .skills-edit-dot { width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; background: radial-gradient(circle, transparent 0 8px, rgba(201,153,63,.6) 8.5px 10px, transparent 10.5px) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog .skills-edit-dot.active { background: radial-gradient(circle, #e9bd62 0 6px, transparent 6.5px 8px, #e9bd62 8.5px 10px, transparent 10.5px) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog .skills-edit-mod { color: #f4e6cc !important; font-size: 14px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .skills-dialog .skills-edit-group-title { border-bottom: 1px solid #26262a !important; }
/* Spell class tags on the sheet's action lists (2 Nov, whole-app check): one gold tag for every class (were salmon,
   blue, purple, green per class). The Spells panel itself is hands off. */
html:root[data-palette][data-palette][data-palette][data-palette] body :not([data-cs3-panel="spells"]) .action-card .spell-source-tag, html:root[data-palette][data-palette][data-palette][data-palette] body .action-card-name :is(.spell-source-tag, .racial-spell-tag) { background: rgba(201,153,63,.12) !important; color: #e9bd62 !important; border: 1px solid rgba(201,153,63,.4) !important; border-radius: var(--r-sm) !important; font-family: var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; padding: 1px 7px !important; vertical-align: 2px !important; }
/* Ability score pop-up (2 Nov, whole-app check): the proficient skill's dot is gold, like the Skills list (was salmon). */
html:root[data-palette][data-palette][data-palette][data-palette] body .stat-edit-skill-prof { border-color: rgba(201,153,63,.6) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .stat-edit-skill-prof.on { background: #e9bd62 !important; border-color: #e9bd62 !important; }
/* Adjust HP / Temp HP and more (2 Nov, whole-app check): each amount sits beside its button (was field, then a full-width
   'Apply −' under it, three times); Done is the gold button. */
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-hpdlg .hx-ac-note, html:root[data-palette][data-palette][data-palette][data-palette] body .hx-acdlg .hx-ac-note { color: #b9ad97; font: 400 14px/1.4 var(--sans); margin: 0 0 12px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-hpdlg .hp-dialog-controls { display: flex !important; flex-direction: column !important; gap: 12px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-hpdlg .hp-control-group { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important; gap: 6px 8px !important; align-items: center !important; margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-hpdlg .hp-control-label { grid-column: 1 / -1; margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-hpdlg .hp-input { height: 48px !important; margin: 0 !important; width: 100% !important; box-sizing: border-box; border-radius: var(--r-sm) !important; font: 700 18px var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-hpdlg .hp-apply-btn { height: 48px !important; margin: 0 !important; width: 100% !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.hx-hpdlg, .hx-acdlg) .dialog-close.primary { background: linear-gradient(#e9c06a, #b4863a) !important; color: #1a1007 !important; border-color: #c9993f !important; }
/* Features and proficiencies (2 Nov, whole-app check): each value is plain text under its name (it sat in a thin second
   box that looked like a clipped input field). */
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .dialog .quick-feature-card .feature-desc { background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px 0 0 !important; color: #e2cba3 !important; font: 400 14px/1.4 var(--sans) !important; }
/* Short rest / Long rest (2 Nov, whole-app check): sentence case, the summary is a plain well (no gold left bar), the
   helper lines are muted sans (were serif, one green, one italic). */
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .rest-status { background: #111113 !important; border: 1px solid #26262a !important; border-radius: var(--r-sm) !important; box-shadow: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .rest-status-row { font-family: var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop :is(.ai-helper, .forge-section-label) { font-family: var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .ai-helper { color: #b9ad97 !important; font-size: 13px !important; line-height: 1.45 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .forge-section-label { color: #f4e6cc !important; font-size: 15px !important; font-weight: 600 !important; }
/* Sheet ⋮ menu (2 Nov, whole-app check): a 2-column grid of 48 px pills with their icons, one phone screen. */
html:root[data-palette][data-palette][data-palette][data-palette] body .u-csmenu .u-list.u-cs-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-csmenu .u-cs-grid .u-cs-mrow { min-height: 48px !important; height: auto !important; padding: 6px 10px !important; gap: 8px !important; border-radius: var(--r-sm) !important; background: linear-gradient(#1a1a1d, #111113) !important; border: 1px solid #26262a !important; font: 500 14px/1.2 var(--sans) !important; text-align: left; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-csmenu .u-cs-grid .u-cs-mrow .u-grow { white-space: normal !important; overflow-wrap: anywhere; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-csmenu .u-cs-grid .u-cs-mrow svg { flex: none; width: 18px; height: 18px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-csmenu .u-cs-del { margin-top: 18px !important; padding-top: 14px !important; border-top: 1px solid rgba(201,153,63,.4) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-csmenu .u-cs-del .u-cs-mrow { width: 100% !important; }
/* Native checkboxes, radios and range sliders (2 Nov, whole-app check): gold, not the browser's blue (Forge house rules,
   GM environment, Long rest, Settings). */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(input[type=checkbox], input[type=radio], input[type=range], progress) { accent-color: #c9993f !important; }
/* GM in-game Menu (2 Nov, whole-app check; audit H1, Tom's example): a 2-column grid of 44 px pills under short section
   headings, half the scrolling of 50 full-width rows; the rename fields span both columns. */
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; align-items: stretch !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-menu > :is(.gm2-sec, input, label, p, div) { grid-column: 1 / -1 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-menu > .gm2-sec { margin: 10px 2px 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-menu > button { min-height: 44px !important; margin: 0 !important; text-align: left !important; border-radius: 6px !important; font-family: var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-menu > button.gm2-mitem, html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-mchange { box-sizing: border-box !important; display: flex !important; align-items: center; gap: 8px; min-height: 46px !important; height: 46px !important; padding: 0 10px !important; white-space: nowrap !important; line-height: 1 !important; font-size: 13px !important; overflow: hidden; background: #111113 !important; border: 1px solid #2c2c32 !important; color: #e9e4d8 !important; }
@media (max-width: 380px) {
  html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-menu > button.gm2-mitem { padding: 0 7px !important; gap: 5px; font-size: 12px !important; }
  html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-menu > button.gm2-mitem .gm2-mi { width: 14px; height: 14px; }
}
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-mchange { display: flex !important; align-items: center; gap: 8px; width: 100%; height: 46px !important; min-height: 46px !important; margin: 2px 0 8px; padding: 0 10px; box-sizing: border-box; border-radius: 6px !important; border: 1px solid #2c2c32 !important; background: #111113 !important; color: #e9e4d8 !important; font: 500 13px/1 var(--sans) !important; text-align: left; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-menu > .gm2-sec { margin: 8px 2px 0 !important; color: #9a978f !important; font: 600 11px/1.2 var(--sans) !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
/* GM screens (2 Nov, whole-app check): every GM button label in the app's sans (Environment presets, weather, sound,
   time chips were serif); titles, round and initiative numbers keep the serif. */
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 button:not(.gm2-hub):not(.gm2-game) { font-family: var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2 :is(.gm2-presets, .gm2-wx, .gm2-sound, .gm2-timelabels, .gm2-crs) button { border-radius: var(--r-sm) !important; }
/* Button labels in the sans everywhere (2 Nov, whole-app check): About & Credits, Report a bug, AI Core, rest and roll
   pop-ups had serif buttons. Buttons that carry a title (game cards, hero rows, home tiles) keep their serif title. */
html:root[data-palette][data-palette][data-palette][data-palette] body button:not(:has(h1, h2, h3, h4, b, strong, .t-h2, .t-h3, .u-t-h2, .u-t-h3, .t-display)):not([class*="cs3-pill"], [class*="cs3-chip"], [class*="cls-"], [class*="cls-"] *, [class*="ds2-"], [class*="cdev-"], [class*="exh-"], .gm2-hub, [data-cs3-panel="spells"] *, .browse-dialog:has([data-browse-action]) *, .spell-detail-dialog *, #mb *) { font-family: var(--sans) !important; }
/* GM help (2 Nov, whole-app check): paragraphs spaced so it reads as steps, not one wall; a Done button on every copy. */
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-help p { margin: 0 0 10px !important; line-height: 1.45 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-help .gm2-gold { width: 100%; min-height: 44px; margin-top: 6px; }
/* World map chrome (2 Nov, whole-app check; audit L18): the library screen, the side panel, the nav bar, the chip and the
   encounter prompt sat on light parchment; now the charcoal page, panels and dark wells. The painted world map itself
   (canvas ink on parchment) is map art and stays. */
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root { --parch: #121214; --tex-parch: none; --parch-ink: #e2cba3; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root:not(.hw-map) .hw-stage { background: #0b0b0d !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root :is(.hw-sheet, .hw-sheet .hw-lead, .hw-sheet .hw-help, .hw-sheet .hw-label, .hw-side, .hw-label, .hw-enc-prompt, .hw-nav) { color: #e2cba3 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root :is(.hw-side, .hw-enc-prompt, .hw-nav, .hw-chip) { background: linear-gradient(180deg, #19191c, #121214) !important; border-color: rgba(201,153,63,.34) !important; color: #e2cba3 !important; font-family: var(--sans) !important; border-radius: var(--r-sm) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root :is(.hw-side, .hw-enc-prompt, .hw-nav, .hw-chip, .hw-sheet) .hw-btn:not(.hw-primary) { color: #e9bd62 !important; background: linear-gradient(#26262a, #17171a) !important; border-color: rgba(201,153,63,.45) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root .hw-btn { border-radius: var(--r-sm) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root .hw-btn.hw-primary { background: linear-gradient(#e9c06a, #b4863a) !important; color: #1a1007 !important; -webkit-text-fill-color: #1a1007 !important; border-color: #c9993f !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root :is(.hw-field, .hw-side select, .hw-side input[type="text"], .hw-side input[type="number"], .hw-side textarea, .hw-sheet input[type="text"], .hw-sheet input[type="number"], .hw-sheet select, .hw-sheet textarea) { background: #08080a !important; color: #f4e6cc !important; border: 1px solid #2c2c31 !important; border-radius: var(--r-sm) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root .hw-label { font: 600 13px var(--sans) !important; color: #b9ad97 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root .hw-title b { font-family: var(--serif) !important; }
/* GM Campaign notes (2 Nov, whole-app check): a clear title in sentence case (no emoji, was faded) and 44 px New and close. */
html:root[data-palette][data-palette][data-palette][data-palette] body .dm-notes-titlebar { background: linear-gradient(180deg, #19191c, #121214) !important; border-bottom: 1px solid rgba(201,153,63,.34) !important; opacity: 1 !important; min-height: 52px; align-items: center !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dm-notes-tb-label { color: #f4e6cc !important; font: 600 17px var(--serif) !important; opacity: 1 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.dm-notes-close, .dm-notes-tb-btn) { min-width: 44px !important; min-height: 44px !important; border-radius: var(--r-sm) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dm-notes-close { color: #e9bd62 !important; background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important; }
/* GM Roll log (2 Nov, whole-app check): 'Clear log' on one line. */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-roll-log-clear], html:root[data-palette][data-palette][data-palette][data-palette] body .roll-log-clear { white-space: nowrap !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hw-root .hw-sheet :is(.hw-lead, .hw-help, p, div:not(.hw-card)) { font-family: var(--sans) !important; }
/* 44 px tap targets (2 Nov, whole-app check): GM map picker header buttons (were 40), the Add Enemies − / + (were 40 wide). */
html:root[data-palette][data-palette][data-palette][data-palette] body .gmp-top .gmp-chip { min-width: 44px !important; min-height: 44px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-stepper .gm2-mi { min-width: 44px !important; min-height: 44px !important; }
/* Map builder name prompt (2 Nov, whole-app check; audit L12): the name field full width and 48 px, Save the gold
   button, then Cancel (was a half-width field with small text and a grey 'Save' row above 'Done'). */
html:root[data-palette][data-palette][data-palette][data-palette] body .mb-explain #mbSaveName { width: 100% !important; box-sizing: border-box; height: 48px; padding: 0 12px; background: #08080a !important; color: #f4e6cc !important; border: 1px solid #2c2c31 !important; border-radius: var(--r-sm) !important; font: 500 16px var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog-backdrop .dialog.mb-explain button.mb-explain-yes.dialog-option { justify-content: center !important; text-align: center !important; min-height: 48px !important; margin-top: 12px !important; background: linear-gradient(#e9c06a, #b4863a) !important; color: #1a1007 !important; border: 1px solid #c9993f !important; border-radius: var(--r-sm) !important; font: 700 15px var(--sans) !important; }
/* One-shot builder (2 Nov, whole-app check; audit M15): sentence-case title, one short intro line in the sans on the
   left, 44 px steppers and chips, the theme chips one scrolling row. */
html:root[data-palette][data-palette][data-palette][data-palette] body .os-panel .rules-home-title { text-align: left !important; font: 600 22px var(--serif) !important; color: #f4e6cc !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .os-panel .rules-home-helper { text-align: left !important; font: 400 14px/1.4 var(--sans) !important; color: #b9ad97 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .os-panel :is(.os-stepbtn, .os-chip) { min-width: 44px !important; min-height: 44px !important; border-radius: var(--r-sm) !important; font-family: var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .os-panel .os-lbl { font: 600 14px var(--sans) !important; color: #b9ad97 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .os-panel .os-chips { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body .os-panel .os-chip { flex: none !important; padding: 0 14px !important; }
/* Join a live game (2 Nov, whole-app check; audit M2): the code field in the sans, 44 px, on the dark well. */
html:root[data-palette][data-palette][data-palette][data-palette] body .link-code-input { font: 600 16px var(--sans) !important; min-height: 44px !important; background: #08080a !important; color: #f4e6cc !important; border: 1px solid #2c2c31 !important; border-radius: var(--r-sm) !important; }
/* Creator ability scores (2 Nov, whole-app check): a negative modifier in the muted ink, not salmon. */
html:root[data-palette][data-palette][data-palette][data-palette] body .cv-tot span.neg { color: #b9ad97 !important; }
/* Active conditions (2 Nov, whole-app check): the name and rule on the left, the buttons stacked on the right, so
   Frightened's 'Source in sight' and Remove line up with every other row (Remove dropped under the text). */
html:root[data-palette][data-palette][data-palette][data-palette] body .active-condition-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; align-items: center !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .active-condition-acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
html:root[data-palette][data-palette][data-palette][data-palette] body .active-condition-acts .active-condition-remove { min-height: 44px; margin: 0 !important; white-space: nowrap; }
/* Level up (2 Nov, whole-app check; audit H13): Average / Roll are the two big choices; the die's numbers are one
   scrolling row of 44 px chips under "Or tap the number you rolled" (was a 2-row grid of 10 buttons above them). */
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-lu-own { margin: 10px 0 6px; color: #b9ad97; font: 500 13px var(--sans); }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-lu-nums { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 6px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-lu-nums::-webkit-scrollbar { display: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-lu-nums .hp-quick-btn { flex: none !important; width: 44px !important; min-width: 44px !important; height: 44px !important; }
/* Feature pill pop-ups (2 Nov, whole-app check): 'Uses …' is a plain line with a gold label (it sat in a thin gold box
   that read like a text field). The jewel pills themselves are unchanged. */
html:root[data-palette][data-palette][data-palette][data-palette] body .u-cs3-popu { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 0 14px !important; }
/* Toasts (2 Nov, whole-app check; live game on a phone): a message toast never blocks a tap. "The GM is sharing the
   battle map" sat over the HP sheet's −1 / +1 for four seconds; taps now go through to the buttons under it. */
html:root[data-palette][data-palette][data-palette][data-palette] body .hearth-toast:not(:has(button, a)) { pointer-events: none !important; }
/* Bug (2 Nov, whole-app check): in the live player view, Inspiration switched on turned the 'Insp' button blank (dark
   ink on the dark button); lit is the gold button with dark ink. */
html:root[data-palette][data-palette][data-palette][data-palette] body .rpv-insp.lit { background: linear-gradient(#e9c06a, #b4863a) !important; color: #1a1007 !important; -webkit-text-fill-color: #1a1007 !important; border-color: #c9993f !important; }
/* GM Round history (2 Nov, whole-app check): the title once (the log repeated 'Round history' under the sheet's own title). */
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-sheet .mi-rh > b:first-child { display: none !important; }
/* Features panel ability read-out (2 Nov, whole-app check): a proficient save is marked with a gold underline (was salmon). */
html:root[data-palette][data-palette][data-palette][data-palette] body .ability-readout .a-cell.save { border-bottom-color: #c9993f !important; }
/* Single-word tags written in lower case keep their capital (2 Nov, whole-app check): the type-style reset above made the
   weapon property chips read 'two-handed', 'finesse'; they read 'Two-handed', 'Finesse' again. */
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.u-cs3-wp, .cs3-wp, .prop-chip, .cat-card-tag, .cat-count, .dm-status-choice):not(#hx-none)::first-letter { text-transform: uppercase !important; } /* first letter only: "Two-handed", not "Two-Handed" */
/* Features panel (2 Nov, whole-app check; audit H12): the 'Use' buttons are 44 px in the standard button look (were
   48 x 30 gold rectangles). */
html:root[data-palette][data-palette][data-palette][data-palette] body .resource-use-btn { min-height: 44px !important; min-width: 56px !important; padding: 0 14px !important; border-radius: var(--r-sm) !important; font: 600 14px var(--sans) !important; }
/* GM initiative tie (2 Nov, whole-app check): sentence case, the rule line as plain muted text (no gold left bar), the
   name rows and buttons on var(--r-sm) (were 4 px). */
html:root[data-palette][data-palette][data-palette][data-palette] body .dm-tie-rule { border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; margin: 8px 0 10px !important; color: #b9ad97 !important; font: 400 13px/1.4 var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dm-tie-choice { min-height: 48px !important; border-radius: var(--r-sm) !important; font-family: var(--sans) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .dm-tie-backdrop .dialog-actions .btn { border-radius: var(--r-sm) !important; }
/* GM Environment (2 Nov, whole-app check): the weather and sound labels (bold inside their buttons) in the sans too. */
html:root[data-palette][data-palette][data-palette][data-palette] body :is([data-gm2-atmo], [data-gm2-snd], [data-gm2-time], [data-gm2-wind], [data-gm2-cond]) :not(svg, svg *) { font-family: var(--sans) !important; }
/* GM monster card (2 Nov, whole-app check): the 'Attack' tag in gold like the app's other tags (was salmon on red). */
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-atktag { border-color: rgba(201,153,63,.55) !important; color: #e9bd62 !important; background: rgba(201,153,63,.1) !important; }
/* Forge import from photo (2 Nov, whole-app check; audit L16): the three buttons sit in a 2 + 1 grid so no label wraps
   to three lines; the Forge's helper text in the sans. */
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-ai-acts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-ai-acts .btn { width: 100% !important; min-height: 44px !important; white-space: nowrap !important; margin: 0 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body .hx-ai-acts #aiClearHomebrewBtn { grid-column: 1 / -1; }
html:root[data-palette][data-palette][data-palette][data-palette] body :is(.ai-helper, .ai-progress, .rules-home-helper, .forge-helper) { font-family: var(--sans) !important; }
/* GM Environment > More weather tools (2 Nov, whole-app check; audit M7): the eight wind arrows are 44 px (were 16-18 wide). */
html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-wx [data-gm2-wind] { min-width: 44px !important; min-height: 44px !important; }
/* Ritual 'R' mark on the sheet's action lists (2 Nov, whole-app check): gold, not periwinkle blue. */
html:root[data-palette][data-palette][data-palette][data-palette] body .action-card-name .ritual-mark { background: rgba(201,153,63,.14) !important; color: #e9bd62 !important; border: 1px solid rgba(201,153,63,.45) !important; }
/* Post-create pickers (Favored Enemy, Skill Versatility, Expertise ...) (2 Nov, whole-app check; audit L5): the options
   in a 2-column grid of 44 px rows, so the list and Confirm fit one phone screen (was one long column, Confirm below
   the fold). */
html:root[data-palette][data-palette][data-palette][data-palette] body #loreSkillsBackdrop .skill-choice-buttons { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body #loreSkillsBackdrop .skill-choice-btn { min-height: 44px !important; margin: 0 !important; padding: 6px 10px !important; white-space: normal !important; text-align: left !important; font: 500 14px/1.2 var(--sans) !important; border-radius: var(--r-sm) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body #loreSkillsBackdrop .skill-choice-btn.active { border-color: #c9993f !important; color: #f0cf86 !important; box-shadow: inset 0 0 0 1px rgba(201,153,63,.35) !important; }
/* Settings > Data & backups (2 Nov, whole-app check): a section heading that follows text gets breathing room
   ('Sample data' sat on the line above it). */
html:root[data-palette][data-palette][data-palette][data-palette] body .u-setpane > .u-sec-h:not(:first-child) { margin-top: 16px !important; }
/* Creator standard array (2 Nov, whole-app check): the values not picked read in a neutral grey, not the old brown ghost ink. */
html:root[data-palette][data-palette][data-palette][data-palette] body .u-cv .u-cv-v:not(.u-on), html:root[data-palette][data-palette][data-palette][data-palette] body .cv .cv-v:not(.on) { color: #9a958c !important; }
/* Live attacks (Tom, 2 Nov): "Tap a target" bar over the map, the target list, and the target / result lines in the
   roll dialog and on the roll result. Charcoal, gold, 44 px buttons. */
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-bar { position: fixed; z-index: 9600; left: 16px; right: auto; top: 68px; width: calc(100vw - 32px); max-width: 460px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; background: #1b1b1f; border: 1px solid rgba(201,153,63,.6); border-radius: var(--r-sm, 10px); box-shadow: 0 8px 24px rgba(0,0,0,.55); color: #f4ead6; font-family: var(--sans); box-sizing: border-box; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-t b { color: #e9bd62; font-size: 16px; font-weight: 700; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-t span { color: #b9b1a3; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-btn { min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: var(--r-sm, 10px); border: 1px solid rgba(201,153,63,.55); background: #232328; color: #f4ead6; font: 600 14px/1 var(--sans); cursor: pointer; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-btn.primary { background: linear-gradient(180deg, #e9c06a, #b4863a); color: #1a1208; border-color: transparent; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-btn:disabled { opacity: .45; cursor: default; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-row.on { border-color: #e9bd62; background: rgba(201,153,63,.14); }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-row.on span { color: #e9bd62; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-list .dialog { max-width: 420px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-rows { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; max-height: 50vh; overflow: auto; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: var(--r-sm, 10px); border: 1px solid rgba(201,153,63,.4); background: #1f1f23; color: #f4ead6; font: 600 15px/1.2 var(--sans); text-align: left; cursor: pointer; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-row span { color: #b9b1a3; font-weight: 400; font-size: 13px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-atk-row.ally { border-color: rgba(255,255,255,.12); }
html:root[data-palette][data-palette][data-palette][data-palette] body .roll-live-target { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: rgba(201,153,63,.08); border: 1px solid rgba(201,153,63,.35); font-family: var(--sans); }
html:root[data-palette][data-palette][data-palette][data-palette] body .roll-live-target > span { color: #b9b1a3; font-size: 13px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .roll-live-target > b { color: #e9bd62; font-size: 16px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .roll-live-target > em, html:root[data-palette][data-palette][data-palette][data-palette] body .roll-live-target > ul { grid-column: 1 / -1; margin: 4px 0 0; padding: 0; list-style: none; font-style: normal; color: #f4ead6; font-size: 14px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .roll-live-target > em { color: #b9b1a3; }
html:root[data-palette][data-palette][data-palette][data-palette] body .roll-outcome-live { margin: 10px auto 0; max-width: 320px; padding: 8px 12px; border-radius: var(--r-sm, 10px); background: rgba(201,153,63,.12); border: 1px solid rgba(201,153,63,.45); color: #f0cf86; font: 600 15px/1.3 var(--sans); }
html:root[data-palette][data-palette][data-palette][data-palette] body .roll-outcome-live.miss { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color: #d8d2c6; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-dc-live { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: rgba(201,153,63,.12); border: 1px solid rgba(201,153,63,.45); color: #f0cf86; font: 600 15px/1.3 var(--sans); }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-dc-live .u-i { flex: none; color: #e9bd62; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-dc-live.u-miss { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color: #d8d2c6; }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-dc-live.u-miss .u-i { color: #b9b1a3; }
/* Live attacks and spells (Tom, 2 Nov): the small pop-up over the map with what to roll and what came back. Charcoal
   and gold, at most a third of the screen, placed on the side of the map away from the targets. */
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop { position: fixed; z-index: 9610; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 12px; background: #19191d; border: 1px solid rgba(201,153,63,.65); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.6); color: #f4ead6; font-family: var(--sans); font-size: 15px; line-height: 1.35; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-head { display: flex; align-items: flex-start; gap: 8px; margin: -12px -14px 6px; padding: 12px 14px 4px; position: sticky; top: -12px; z-index: 2; background: #19191d; border-radius: 14px 14px 0 0; } /* (2 Nov) the title and × stay in view while the pop-up scrolls */
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-name { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-name b { font-family: var(--serif, var(--sans)); font-size: 19px; font-weight: 700; color: #f4ead6; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-name span { color: #b9b1a3; font-size: 13px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-x { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 10px; background: transparent; color: #b9b1a3; font: 400 26px/1 var(--sans); cursor: pointer; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-tgt { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-tgt span { color: #b9b1a3; font-size: 13px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-tgt b { color: #e9bd62; font-size: 16px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-what { color: #f4ead6; font-weight: 600; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-what small { color: #b9b1a3; font-weight: 400; font-size: 13px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-dmg { color: #d8d2c6; font-size: 14px; margin-top: 2px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-adv, html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-riders { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-riders { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-riders .lap-chip { flex: none; white-space: nowrap; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-chip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(201,153,63,.45); background: #222227; color: #e8e1d3; font: 600 13px/1 var(--sans); cursor: pointer; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-adv .lap-chip { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 4px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-chip.on { background: rgba(201,153,63,.22); border-color: #e9bd62; color: #f0cf86; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-chip:disabled { cursor: default; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-res { list-style: none; margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(201,153,63,.10); border: 1px solid rgba(201,153,63,.35); display: flex; flex-direction: column; gap: 4px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-res li { color: #f0cf86; font-weight: 600; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-res li.miss { color: #d8d2c6; font-weight: 500; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-act { display: flex; align-items: center; gap: 8px; margin: 10px -14px 0; padding: 0 14px; position: sticky; bottom: -12px; padding-bottom: 12px; margin-bottom: -12px; background: #19191d; z-index: 1; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-act + .lap-own { margin-top: 18px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-own { margin-top: 10px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-btn { flex: 1; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(201,153,63,.55); background: #232328; color: #f4ead6; font: 700 15px/1 var(--sans); cursor: pointer; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-btn.primary { background: linear-gradient(180deg, #e9c06a, #b4863a); color: #1a1208; border-color: transparent; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-wait { flex: 1; color: #b9b1a3; font-size: 14px; min-height: 44px; display: flex; align-items: center; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-own { margin-top: 6px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-link { flex: 0 1 118px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: #e9bd62; font: 600 13px/1.25 var(--sans); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-ownrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-ownrow label { display: flex; flex-direction: column; gap: 4px; color: #b9b1a3; font-size: 12px; flex: 1 1 80px; min-width: 76px; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-ownrow input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(201,153,63,.45); background: #111114; color: #f4ead6; font: 700 18px/1 var(--sans); text-align: center; }
html:root[data-palette][data-palette][data-palette][data-palette] body .live-pop .lap-ownrow .lap-btn { flex: 1 1 120px; }

/* ===== HearthPop: the ONE pop-up style (Tom, 2 Nov 13:15) =====
   Every pop-up's panel carries data-hpop (ui.js HearthPop marks U.modal, the classic .dialog-backdrop dialogs,
   confirmDialog and the one-offs) and its backdrop / layer data-hpop-layer. One look: charcoal panel #19191c -> #121214,
   gold hairline, the small radius, serif cream title, muted sans helper, a 44 px x top right, a body that scrolls
   inside, gold primary and charcoal secondary buttons, a dimmed page behind. Under 700 px: a bottom sheet with a grab
   handle, full width, up to 88 % of the screen. From 700 px (Fold open, tablets, the live view, laptops): a centred
   card, 560 px (sm 420, lg and picker 720), never stretched edge to edge. Both stay above the on-screen keyboard
   (--u-kb) and inside the safe areas. The live attack pop-up is the 'anchored' size: same look, its own place. */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] { --hpop-w: 560px; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop][data-hpop-size="sm"] { --hpop-w: 420px; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]:is([data-hpop-size="lg"], [data-hpop-size="picker"]) { --hpop-w: 720px; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop-layer]:not(.u-layer),
html:root[data-palette][data-palette][data-palette][data-palette] body .u-layer[data-hpop-layer] > .u-scrim:not(.u-light) { background: rgba(5,5,7,.74) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop-layer]:not(.u-layer) { display: flex !important; justify-content: center !important; box-sizing: border-box; }
/* a layer its own code hides (style display:none, or hidden) stays hidden: the Roll log closes by display:none */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop-layer]:is([style*="display: none"], [style*="display:none"], [hidden]) { display: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] {
  background-color: #121214 !important; background-image: linear-gradient(180deg, #19191c, #121214) !important; color: #e2cba3; box-sizing: border-box; overscroll-behavior: contain;
}
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]:not([data-hpop-size="docked"]) { border: 1px solid rgba(201,153,63,.45) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]:not([data-hpop-size="docked"]):not([data-hpop-size="anchored"]) { box-shadow: 0 18px 48px rgba(0,0,0,.6) !important; }
/* the anchored variant: the same panel and hairline at its own place, the small radius */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop][data-hpop-size="anchored"] { border-radius: var(--r-sm) !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop-layer]:not(.u-layer) > [data-hpop] { position: relative; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]) { overflow: hidden auto !important; }
/* title, helper */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] :is(.dialog-title, .u-dialog-title, .u-sheet-title, .hpop-title, .u-hpop-title, .u-hx-pick-h .u-t-h3, .u-cs3-poph, .char-popup-title, .enemy-picker-head .dialog-title, .gm2-sheet-h h2, .mb-sheet h2, .mb-sizepop h2, .mb-floorpop h2, .sbk-h3, .cv-sheet h2, .cv-sheet h3, .hv-nhp-box > h2) {
  font-family: var(--serif) !important; color: #f4e6cc !important; -webkit-text-fill-color: #f4e6cc; background: none !important; text-transform: none !important; letter-spacing: 0 !important; font-style: normal !important; font-weight: 600 !important;
}
/* the GM side panel keeps its lighter title weight so "Environment" fits beside its buttons */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop][data-hpop-size="docked"] .gm2-sheet-h h2 { font-weight: 500 !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] :is(.dialog-helper, .pk-helper, .hpop-helper, .u-hpop-helper) { color: #b9ad97 !important; font-family: var(--sans) !important; font-style: normal !important; }
/* the x: 44 px, top right; the title keeps clear of it */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] > .hpop-x {
  position: absolute; top: 6px; right: 6px; z-index: 3; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0 !important; padding: 0 !important;
  display: inline-grid; place-items: center; border: 0 !important; border-radius: var(--r-sm) !important; background: transparent !important; box-shadow: none !important;
  color: #b9ad97 !important; font: 400 28px/1 var(--sans) !important; cursor: pointer; flex: none;
}
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] > .hpop-x:is(:hover, :focus-visible) { color: #e9bd62 !important; background: rgba(201,153,63,.12) !important; outline: none; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop][data-hpop-x="1"] > :is(.dialog-title, .u-dialog-title, .u-sheet-title, .hpop-title, .u-hpop-title, .pk-helper) { padding-right: 44px !important; }
/* a pop-up whose title is not its first line (a card inside, a grid of buttons) gives the x a row of its own */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop][data-hpop-x="1"]:not(:has(> :is(.dialog-title, .u-dialog-title, .u-sheet-title, .hpop-title, .u-hpop-title, h1, h2, h3, .u-t-h3, .u-cs3-poph, .skills-edit-hint))) { padding-top: 54px !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .hpop-own-x { min-width: 44px !important; min-height: 44px !important; }
/* actions: gold primary, charcoal secondary with a gold hairline */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] :is(.btn.primary, .dialog-btn.primary, .u-btn.u-primary):not(:disabled):not(.danger):not(.u-danger) {
  background: linear-gradient(#e9c06a, #b4863a) !important; border: 1px solid #c9993f !important; color: #1a1007 !important; -webkit-text-fill-color: #1a1007;
}
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] :is(.dialog-actions, .u-dialog-actions, .hpop-actions, .u-hpop-actions) :is(.btn:not(.primary):not(.danger), .dialog-btn:not(.primary), .u-btn:not(.u-primary):not(.u-danger):not(.u-heal)),
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .dialog-close:not(.primary) {
  background: linear-gradient(#26262a, #17171a) !important; border: 1px solid rgba(201,153,63,.45) !important; color: #e9bd62 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] :is(.dialog-actions, .u-dialog-actions, .hpop-actions, .u-hpop-actions) :is(.btn, .dialog-btn, .u-btn) { min-height: 44px; border-radius: var(--r-sm) !important; font-family: var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important; }
/* the grab handle (bottom sheet only) */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] > .u-grab { display: none !important; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]::before { content: none !important; display: none !important; }

/* ---- phones (under 700 px, or a phone on its side: under 560 px tall): a bottom sheet ---- */
@media (max-width: 699px), (max-height: 559px) {
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop-layer]:not(.u-layer) { align-items: flex-end !important; padding: var(--hearth-safe-top, 0px) 0 var(--u-kb, 0px) 0 !important; }
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]) {
    border-radius: var(--r-sm) var(--r-sm) 0 0 !important; border-bottom: 0 !important; padding-top: 22px !important;
    padding-bottom: calc(14px + var(--hearth-safe-bottom, 0px)) !important;
  }
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop-layer]:not(.u-layer) > [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]) {
    width: 100% !important; max-width: none !important; margin: 0 !important; max-height: min(88vh, calc(100% - 12px)) !important;
  }
  html:root[data-palette][data-palette][data-palette][data-palette] body .u-layer > [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]) {
    position: absolute !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: var(--u-kb, 0px) !important; margin: 0 !important;
    width: auto !important; max-width: none !important; height: auto !important; max-height: min(88vh, calc(100% - 12px - var(--u-kb, 0px))) !important;
  }
  html:root[data-palette][data-palette][data-palette][data-palette] body .u-layer > [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]):not([style*="translateY"]) { transform: none !important; }
  /* One scrollport. An inner overflow:auto that is as tall as its content traps the finger, so tiles and buttons could not scroll the sheet. */
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]:not([data-hpop-size="anchored"]) { touch-action: pan-y; }
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]:not([data-hpop-size="anchored"]) :is(button, a, [role="button"], .cdev-row, .card, .skill-row, .skills-edit-row) { touch-action: pan-y; }
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .cdev-jump :is(a, button) { touch-action: pan-x pan-y !important; }
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] :is(.browse-body, .cdev-body) { overflow: visible !important; max-height: none !important; clip-path: none !important; touch-action: pan-y; }
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop].hpop-drag { transform: none !important; scale: 1 !important; rotate: none !important; transform-origin: 0 0 !important; translate: 0 var(--hpop-dy, 0px) !important; animation: none !important; transition: none !important; }
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop].hpop-drag.hpop-drop { transition: translate .18s ease-out !important; }
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"])::before {
    content: "" !important; display: block !important; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin: 0 0 0 -20px !important;
    border-radius: 3px; background: rgba(201,153,63,.7) !important; opacity: 1 !important; z-index: 2; pointer-events: none;
  }
}
/* the keyboard open on a bottom sheet: every pixel above it is the sheet's (a phone on its side has little room) */
@media (max-width: 699px), (max-height: 559px) {
  html.u-kb-open:root[data-palette][data-palette][data-palette][data-palette] body .u-layer > [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]) { max-height: calc(100% - var(--u-kb, 0px)) !important; padding-top: 14px !important; }
  html.u-kb-open:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop-layer]:not(.u-layer) > [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]) { max-height: 100% !important; padding-top: 14px !important; }
  html.u-kb-open:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]:not([data-hpop-size="anchored"])::before { display: none !important; }
}
/* ---- 700 px and up (Fold open, tablets, the live view, laptops, the GM screen): a centred card ---- */
@media (min-width: 700px) and (min-height: 560px) {
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop-layer]:not(.u-layer) {
    align-items: center !important;
    padding: calc(24px + var(--hearth-safe-top, 0px)) calc(24px + var(--hearth-safe-right, 0px)) calc(24px + max(var(--hearth-safe-bottom, 0px), var(--u-kb, 0px))) calc(24px + var(--hearth-safe-left, 0px)) !important;
  }
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]) { border-radius: var(--r-sm) !important; border-bottom: 1px solid rgba(201,153,63,.45) !important; }
  html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop-layer]:not(.u-layer) > [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]) {
    width: min(var(--hpop-w), 100%) !important; max-width: 100% !important; margin: auto !important; max-height: min(88vh, 100%) !important;
  }
  html:root[data-palette][data-palette][data-palette][data-palette] body .u-layer > [data-hpop]:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]) {
    position: absolute !important; top: 0 !important; bottom: var(--u-kb, 0px) !important; left: var(--hpop-left, 0px) !important; right: 0 !important; margin: auto !important;
    height: fit-content !important; width: min(var(--hpop-w), calc(100% - var(--hpop-left, 0px) - 48px)) !important; max-width: none !important;
    max-height: min(88vh, calc(100% - 48px - var(--u-kb, 0px))) !important; transform: none !important;
  }
  /* the onboarding tour keeps its designed locked height (Jenny's mockup): the art, title and dots sit in the same place on every step */
  html:root[data-palette][data-palette][data-palette][data-palette] body .u-layer.u-obl > [data-hpop].u-obd:not([data-hpop-size="anchored"]):not([data-hpop-size="docked"]) { height: min(664px, calc(100vh - 48px)) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 40px 44px 32px !important; /* its own padding: the shared close sits in the corner, clear of the centred art */ }
  /* and it covers the whole screen, so it centres on the screen, not in the main column beside the side bar */
  html:root[data-palette][data-palette][data-palette][data-palette] body .u-layer.u-obl { --hpop-left: 0px !important; }
  /* a laptop with the side bar: centred in the main column, as before */
  html:root[data-palette][data-palette][data-palette][data-palette] body.u-desk:not(.gm2-on):not(.rpv-on) .u-layer { --hpop-left: var(--u-side-w, 0px); }
}
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick .u-hx-pick-q { flex: none; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 0 14px; border-radius: var(--r-sm); background: #08080a !important; border: 1px solid #2c2c31 !important; color: #f4e6cc !important; font: 400 15px var(--sans); }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick .u-hx-pick-row[hidden] { display: none !important; }
/* the one-offs' own grab handles give way to the shared one; the docked GM panel takes the small radius as a bottom sheet */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] :is(.hv-nhp-grab, .hv-grab, .cv-grab, .sbk-grab) { display: none !important; }
@media (max-width: 699px) { html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-side [data-hpop][data-hpop-size="docked"], html:root[data-palette][data-palette][data-palette][data-palette] body .gm2-side:has(> [data-hpop-size="docked"]) { border-radius: var(--r-sm) var(--r-sm) 0 0 !important; } }
html:root[data-palette][data-palette][data-palette][data-palette] body .u-hx-pick .u-hx-pick-row.u-danger { color: var(--crimson-ink, #e0614f); }

/* ===== Hearth+ card (6 Nov): the free-tier hero cap, one gentle card in the shared pop-up =====
   Gold serif title, one cream line, a small muted count, and two buttons the SAME size side by side: Maybe later
   (charcoal) and Hearth+ · coming soon (gold, dimmed since nothing can be bought yet, still a 44 px target). */
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop].u-plusdlg { text-align: left; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .u-plus-title {
  font: 600 26px/1.2 var(--serif) !important; color: #e9bd62 !important; -webkit-text-fill-color: #e9bd62; margin: 0 0 8px; padding-right: 44px;
}
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .u-plus-line { color: #e2cba3 !important; font: 400 15px/1.5 var(--sans) !important; margin: 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .u-plus-price { color: #b9ad97 !important; font: 400 13px/1.45 var(--sans) !important; margin: 8px 0 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .u-plus-count { color: #b9ad97 !important; font: 400 13px/1.4 var(--sans) !important; margin: 10px 0 0; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .u-plus-acts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .u-plus-acts .u-btn { width: 100%; min-width: 0; min-height: 48px !important; padding: 0 10px !important; justify-content: center; white-space: nowrap; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .u-plus-acts .u-plus-soon { opacity: .62; cursor: default; }
html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .u-plus-acts .u-plus-soon:is(:hover, :focus-visible) { opacity: .78; }
/* a narrow phone (under 360 px): the gold label may wrap to two lines rather than clip */
@media (max-width: 359px) { html:root[data-palette][data-palette][data-palette][data-palette] body [data-hpop] .u-plus-acts .u-btn { white-space: normal; font-size: 14px !important; } }

/* Add weapon / armour / gear lists (6 Nov): Close is a footer under the list, never a bar over a row.
   On a phone the shared "one scrollport" rule set .browse-body to overflow:visible, so the rows painted
   through Close. The list is the scrollport (touch and wheel); the last row clears the footer. */
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog.pk-sheet[data-hpop][data-pk-kind] {
  display: flex !important; flex-direction: column !important; overflow: hidden !important; min-height: 0 !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog.pk-sheet[data-hpop][data-pk-kind] .pk-list {
  flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important;
  overflow: auto !important; overscroll-behavior: contain !important; touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch; padding-bottom: 12px !important; scroll-padding-bottom: 12px;
  clip-path: none !important;
}
html:root[data-palette][data-palette][data-palette][data-palette] body .dialog.pk-sheet[data-hpop][data-pk-kind] > .dialog-close {
  position: static !important; flex: none !important; z-index: auto; margin-top: 8px !important;
}