/* ============================================================
   CONSOLIDATED 2026-06-17 (Integration P1): the former inline
   <style> block from sage_character_sheet.html (the "Apr 28
   snapshot") was moved here verbatim, ABOVE the post-Apr-28
   rules below, preserving the original cascade order (it loaded
   before this file, so later rules still win). Dedupe of
   overlapping selectors is Integration P2.
   ============================================================ */
/* ═══════════════════════════════════════════════════════════════
   SAGE Legend — Character Sheet (v1, read-only, tabbed)
   Loads .sage files exported by sage_character_generator.html
   Tab layout mirrors the 10.7 builder's CS-* record tabs.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-darkest: #0f0f1a;
  --bg-dark: #1a1a2e;
  --bg-mid: #232340;
  --bg-card: #2a2a48;
  --bg-card-hover: #33335a;
  --gold: #d4a853;
  --gold-light: #e8c878;
  --gold-dim: #a07830;
  --cream: #e8e0d0;
  --cream-dim: #b0a898;
  --cream-dark: #888070;
  --red: #c44040;
  --green: #40a858;
  --blue: #4888dd;
  --error: #e04848;
  --success: #48c868;
  --font-title: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-body: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --transition: 0.25s ease;
  --radius: 6px;
  --radius-lg: 10px;
}
















/* ─── TOP BAR ────────────────────────────────────────── */

















/* ─── PAGE CONTAINER ─────────────────────────────────── */



/* ─── UPLOAD VIEW (shown when no character loaded) ───── */























/* ─── CHARACTER VIEW ─────────────────────────────────── */




.loaded-banner {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-mid) 100%);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 14px 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  /* STATS-01 (Rome 2026-07-20): pin the banner so defenses stay glanceable
     while scrolling any tab — this was the real gap behind Tim's request. */
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
/* Name stays compact on the left; the Defenses plaque claims the freed
   real estate (meta cluster removed per Rome 2026-07-20). */
.loaded-banner .name-block { flex: 0 0 auto; }
.loaded-banner #cv-meta { display: none; }







/* Banner Defenses block — Rome 2026-04-26 — moved here from the
   quick-stats row to save vertical space. Same .qs-cell.def styling
   as the bar; the wrapper just spaces them visually with a small label
   above. */










/* Subtle "modified" tint on the defense cell value (Rome 2026-05-10) —
   replaces the previously inline green +N pill, which crowded the row.
   Hover the cell for the full base + delta + source breakdown. */
.loaded-banner .banner-defenses-cells .qs-cell.modified {
  border-color: rgba(168, 224, 184, 0.45);
}
.loaded-banner .banner-defenses-cells .qs-cell.modified .qs-val {
  color: #a8e0b8;
}









/* ─── QUICK-STATS STRIP ──────────────────────────────
   Always-visible compact row under the banner showing all 5 Defenses +
   4 Pools. Two visually-grouped clusters so the player can scan either
   set without reading labels. */

.quick-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0 18px 0;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
}









/* When the quick-stats cell carries a modifier, its badge floats in the
   top-right corner instead of expanding the cell's width. Keeps all
   cells aligned regardless of whether any modifier is active. */















/* Phase 9 (Rome 2026-05-05): Fate-binding badge on the FP cell.
   Styled like a small reddish pill so the player can see at a glance
   that some Fate is suspended by Devotion bindings. */
.quick-stats .qs-pool-start-binding {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(170, 60, 60, 0.20);
  border: 1px solid rgba(170, 60, 60, 0.50);
  color: #e8b0b0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.quick-stats .qs-pool-fp-bound .qs-pool-start-val {
  color: #e8c896; /* Slightly desaturated to indicate binding pressure */
}













@media (max-width: 720px) {
  .quick-stats { gap: 8px; padding: 6px 8px; }
  .quick-stats .qs-cell { min-width: 38px; padding: 2px 5px; }
  .quick-stats .qs-val { font-size: 1.1rem; }
  .quick-stats .qs-group-label { display: none; }
}

/* ─── TAB BAR ────────────────────────────────────────── */










/* Star marker dropped from the active tab (previous ::before added
   ~16px of width per active tab, pushing the bar past typical viewport
   widths). Active state is signalled by color + background + border. */

/* ─── TAB PANELS ─────────────────────────────────────── */



@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── SHEET SECTIONS ─────────────────────────────────── */











/* ─── ATTRIBUTE GRID ─────────────────────────────────── */

















/* ─── DERIVED GRID ───────────────────────────────────── */

















/* ─── TRAINING TAB: DISCIPLINE BLOCKS ────────────────── */



/* Training tab discipline + competency headers — grid layout so the
   name column, the N/M count column, and the badges all line up across
   every row regardless of name length. Per Rome 2026-04-26. */



















/* ── Collapsible discipline blocks ───────────────────────── */






/* When collapsed, reduce the visual weight of the block so the scannable
   list reads as a compact menu. */



/* Toolbar above the discipline list — expand-all / collapse-all shortcuts. */






















/* Note pill — passive reminder for player-tracked mechanics the engine
   can't auto-aggregate (triggered resource gains, event-based Momentum,
   etc.). Distinguished from blue numeric pills by a muted grey + italic
   treatment; displays meta.display text verbatim. */


/* Expandable note pill — for long canonical text (e.g. multi-part abilities
   like Lexicon of Power). Uses native <details>/<summary>. Click the pill
   to reveal the full body inline. */








/* Gated pill — rendered next to a toggle. Muted when toggle is off so it
   reads as "this is what WOULD fire"; brightens when toggle is on. */



/* Inline toggle container — wraps the checkbox/select plus its gated pill. */


















/* ─── SOCIAL TAB: TONE GRID ────────────────────────── */
















/* Modifier overlay badges on tone cells. Two kinds:
   .tone-badge.track  — track-level delta (e.g., "+3" from Cut to the Chase)
   .tone-badge.check  — "+Nd on checks" from check.skill tone-narrowed mods (e.g., Hostile Presence)
*/




/* ─── STORY TAB ─────────────────────────────────────── */

















/* ─── STORY v2 — Paths, Catalogs, Compensators, Events ─── */











.path-catalog table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.path-catalog th,
.path-catalog td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--bg-mid);
  vertical-align: top;
}
.path-catalog th {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.7rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-weight: 500;
}
.path-catalog td.pc-name {
  color: var(--cream);
  font-weight: 600;
  white-space: nowrap;
}
.path-catalog td.pc-prereq {
  color: var(--cream-dim);
}
.path-catalog tr.eligible td.pc-name {
  color: #a8e0b8;
}
.path-catalog tr.eligible td.pc-name::after {
  content: ' ✓';
  color: #a8e0b8;
  font-size: 0.8rem;
}


.compensator-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}


.compensator-card .cmp-name {
  font-weight: 600;
  color: var(--cream);
}
.compensator-card .cmp-beacon {
  font-size: 0.78rem;
  color: var(--cream-dark);
}













/* ─── DOWNTIME TAB (worksheet v2) ───────────────────── */













































/* Legacy schedule table style retained for fallback. v3 uses cards. */



/* v3 schedule: per-day cards */











/* Per-day stack strip — lives in the Day header between the title and
   the Copy-to-rest button. One `.ddc-stack-item` per stackable unlock
   (currently: Phytomancy I's "Spent time in the Sun", 2 stacks/day).
   Only renders when a matching capability is granted. */







/* Row 1 — Food / Shelter / Recreation setup (3 equal columns). */

/* Row 2 — three Activity dropdowns (3 equal columns). */

/* Row 3 — Segments used (compact) + Notes (fills remaining width). */





.downtime-day-card .ddc-field-notes,
.downtime-day-card .ddc-field-seg {
  /* Notes stretches across; seg stays compact */
}

/* Narrow-screen graceful fallback — collapse all rows to single column. */
@media (max-width: 720px) {
  .downtime-day-card .ddc-row-setup,
  .downtime-day-card .ddc-row-activities,
  .downtime-day-card .ddc-row-bottom {
    grid-template-columns: 1fr;
  }
}

/* ── Downtime workflow (Rome 2026-06-17): stepper strip + numbered step
   sections so the top of the Downtime tab reads as a clear order of
   operations (Setup → QoL → Schedule → Healing → Summary → Commit). ── */
.dt-workflow-stepper {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 0 0 16px 0; padding: 10px 14px;
  background: rgba(212,168,83,0.05);
  border: 1px solid rgba(212,168,83,0.20);
  border-radius: 8px;
}
.dt-workflow-stepper .dt-step {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-title); font-size: 0.82rem;
  color: var(--cream-dim, #c9b78f); text-decoration: none;
  border: 1px solid transparent;
}
.dt-workflow-stepper .dt-step:hover {
  color: var(--cream); border-color: rgba(212,168,83,0.35);
  background: rgba(212,168,83,0.10);
}
.dt-workflow-stepper .dt-step:not(:last-child)::after {
  content: '→'; margin-left: 6px; color: var(--cream-dark, #8a7d5f); opacity: 0.55;
}
.dt-workflow-stepper .dt-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(212,168,83,0.18); color: var(--gold-light, #f0d97a);
  font-size: 0.74rem; font-weight: 700;
}
.dt-workflow-stepper .dt-step-commit .dt-step-n {
  background: rgba(143,198,160,0.20); color: #8fc6a0;
}
/* Numbered step sections — gold left accent groups them as "the workflow";
   scroll-margin clears the sticky tab-bar when a stepper chip jumps here. */
.dt-step-section { scroll-margin-top: 56px; border-left: 3px solid rgba(212,168,83,0.30); }
.dt-step-section.dt-step-section-commit { border-left-color: rgba(143,198,160,0.45); }
.dt-step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-right: 10px;
  background: rgba(212,168,83,0.15); border: 1px solid rgba(212,168,83,0.40);
  color: var(--gold-light, #f0d97a); font-size: 0.9rem; font-weight: 700;
  vertical-align: middle; flex: 0 0 auto;
}





/* v3 summary cards */











































/* Summary band */




















/* Activity reference panel */














/* Legacy WP grid styles retained for possible reuse; not rendered in v2. */












































/* ─── ADVANCEMENT TAB ───────────────────────────────── */



















/* ── Chapter Log (Advancement tab) — Q1.2 CP-by-Category ───────── */






/* Collapsible chapter log — Rome 2026-05-04. Toolbar stays visible so the
   running CP total + uncommitted note are always at-a-glance; cards and
   Add-Chapter button collapse. State persists per-character in localStorage
   under sage-sheet:chapterLogCollapsed:<_characterKey>. */
.chapter-log .cl-toolbar.cl-toolbar-clickable {
  cursor: pointer;
  user-select: none;
}

/* Section-header collapse affordance — Phase polish (Rome 2026-05-04).
   Click the H2 itself OR the inline toolbar chevron to toggle the
   chapter log. State persists in localStorage. The chevron rotates -90°
   when the section is collapsed. */
.section-header-collapsible {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.section-header-collapsible:hover {
  color: var(--gold-light);
}
.section-header-collapsible .sh-chevron {
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.18s ease;
  color: var(--gold-dim);
  font-size: 0.7rem;
  vertical-align: middle;
}
.section-header-collapsible.section-header-collapsed .sh-chevron {
  transform: rotate(-90deg);
}
.chapter-log .cl-chevron {
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.18s ease;
  color: var(--gold-dim);
  font-size: 0.75rem;
}
.chapter-log.cl-collapsed .cl-chevron {
  transform: rotate(-90deg);
}
.chapter-log.cl-collapsed .cl-card,
.chapter-log.cl-collapsed .cl-empty,
.chapter-log.cl-collapsed .cl-add-btn {
  display: none;
}











/* Chapter Log commit/decommit + lock state — Rome 2026-04-26.
   When a chapter row is committed, all its inputs become disabled and
   the card gets a "locked" visual treatment so it's clear at a glance
   which chapters' CP/SC/SP are currently applied to the character. */






























/* ── Modifier overlay badge (on defense / pool / stat values) ───── */




/* ── Modifiers in Effect panel (Stats tab rollup) ─────────────────── */


















/* ── Milestone banner + Quality modal (Q2.1 per D-2026-04-23-11) ──── */


























/* ── Spend CP — shopping-cart staging surface (Q8.4 / Q3.1) ── */
/* Sticky header at the top of the Spend CP host — CP available + staged
   totals across CP / Silver / Downtime, visible while scrolling through
   long category sections. Themed to match .advancement-summary (gold-on-
   bg-dark cells with the available-cp cell highlighted in the same green
   the summary strip uses for CP Available). Rome 2026-04-26. */






/* "Available" cells across all groups get the gold-highlight treatment,
   marking the primary "what you have to spend" number for each resource. */



/* Available cells use the same green as .as-highlight on the summary
   strip — visual continuity across both surfaces. */




/* ── Modifier Watch widget (right margin, all pages) ───────────────────
   Fixed-position aside on the right side of the viewport. Lives just
   below the topbar + tab-bar (~84px) and runs to the bottom of the
   viewport. Body content shifts left via #character-view padding-right
   when expanded; collapses to a thin handle when the user wants the
   space back. Per Rome 2026-04-26. */
















































/* Debt summary row inside the staged pool */






/* Use Social Capital toggle row */







/* Inline numeric input for kvBlock cells (Social tab Status). */



/* Derived display — read-only field whose value is computed elsewhere. */



/* ── Languages & Literacy (Theme tab) — read-only display ── */













/* ── Training Obligations (Downtime tab) ── */




/* Current Focus picker */










































.dt-obl-add {
  margin-top: 10px; background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  color: var(--cream-dark); padding: 6px 12px; border-radius: 4px;
  font-size: 12px; cursor: pointer;
}


/* Per-day "training debt pending" inline warning */



/* Commit Downtime widget at the bottom of the Downtime tab */










/* Section <details> — collapsible category groups */





.scp-section[open] .scp-summary::before { transform: rotate(90deg); }








/* Card — used by every category */

















/* Skills & Focuses combined card */


















/* ── Save error summary (Q3.5) — persistent region near Save button ── */










/* ─── COMMON TABLE STYLE ─────────────────────────────── */





























/* First focus cell gets extra left padding to visually separate it from Base Roll */








/* Custom dice adjustment input — lets the player add situational dice to a focus roll */






/* Section-header toggle (e.g. show/hide untrained skills) */








/* ─── KEY/VALUE GRID ─────────────────────────────────── */












/* Phase 9 (Rome 2026-05-05): Fate-binding inline badge on the Themes tab
   Species Factors → Fate row. The number reflects the deduction; the
   pill explains why so the player isn't left wondering where the lost
   Fate went. Coordinated with .qs-pool-start-binding on the pools bar. */
.theme-fate-with-binding { display: inline-flex; align-items: center; gap: 8px; }
.theme-fate-with-binding .theme-fate-val { color: var(--cream); font-weight: 600; }
.theme-fate-with-binding .theme-fate-binding-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(170, 60, 60, 0.18);
  border: 1px solid rgba(170, 60, 60, 0.45);
  color: #e8b0b0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ─── OVERVIEW LAYOUT ────────────────────────────────── */







/* Pools widget — Stats tab. Rome 2026-04-26 redesign.
   Derived pools (AP/RP/Fate) get a Start cell; manual pools (Morale,
   Tactics, Strain, Prophecy) skip it. ± buttons flank the persisted
   current value. */


















/* ─── TAG / PILL ─────────────────────────────────────── */





/* ─── TRAIT CARDS (behaviors / qualities / directive) ─── */
/* Used by the Theme tab's behavior and quality blocks. Each card shows
   a name on top and a small italic description below. Grid parent lays
   them out responsively. */



/* Full-width kv-block — span every column of the parent .kv-grid so
   wide content (Qualities tile-grid, Languages list) gets horizontal
   room to fill instead of crammed into one column. Per Rome 2026-04-25. */












/* Toggle UI region inside a trait card (Qualities — and any other family
   wired through `_traitCardsBlock` with opts.toggleFamily). Reuses the
   `.ab-toggle*` widget styles from the abilities table; this wrapper just
   provides a small gap below the description so the dropdown / checkbox
   doesn't collide with it. The inner widgets carry their own background,
   border, and dropdown chrome. */






/* ─── IDENTITY CARDS (archetype + flaw callouts) ─── */
/* Larger, more prominent than trait-cards. Used in the Theme tab's
   Thematic Identity section to show Archetype and Flaw names with their
   canonical SLHH descriptions. Two-column on wide screens, stacks on narrow. */















/* ─── COMBAT TAB ─────────────────────────────────────── */
/* Two-column top band: armor + resists on the left, wound matrix on the
   right. Stacks on narrow widths. Weapons loadout takes the full width
   below. Table-style grids use monospace for column alignment. */



@media (max-width: 900px) {
  .combat-top { grid-template-columns: 1fr; }
}

















/* Combat status bar — compact strip above armor that aggregates
   character-level combat stats (Distinctive, and future additions like
   Skulk Rating, Distinctive, Stability, etc.) by pulling from
   ModifierEngine targets like stat.Distinctive. */

/* Combat Stances — selectable buttons + status note */
.combat-stances-section { margin-bottom: 10px; }
.stance-btn-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.stance-btn {
  font-family: inherit; font-size: 0.8rem;
  padding: 5px 11px; cursor: pointer;
  color: var(--cream, #e8dcc0);
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.stance-btn:hover:not(.disabled) { border-color: var(--gold-dim); }
.stance-btn.active {
  background: var(--gold-dim, #8a6d3b);
  border-color: var(--gold-light, #d4af6a);
  color: #1a1208; font-weight: 600;
}
.stance-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.stance-note { font-size: 0.8rem; line-height: 1.55; }
.stance-note .stance-cost { color: var(--gold-dim); font-size: 0.74rem; }
.stance-note .stance-applied { color: var(--gold-light, #d4af6a); }
.stance-note .stance-applied em { color: var(--cream-dim, #b3a589); font-style: italic; }
.stance-note .stance-advisory { color: var(--cream-dim, #b3a589); font-size: 0.76rem; }






/* Pain tile — red accent when active, gold when ignored. Houses the
   Ignore checkbox under the numeric value. */





/* ── Strain tile (Phase 3, Combat status bar) ─────────────────── */
.csb-tile.csb-strain { min-width: 132px; }
.csb-tile.csb-strain .csb-value { font-family: 'Courier New', monospace; font-size: 1.1rem; }
.csb-strain-band { font-size: 0.74rem; letter-spacing: 1px;
  text-transform: uppercase; text-align: center; margin-top: 4px;
  padding: 2px 6px; border-radius: 3px; font-weight: 700; }
.csb-strain-band-fresh     { color: var(--cream);  background: rgba(255,255,255,0.04); }
.csb-strain-band-fatigued  { color: #d4c44e;       background: rgba(212,196,78,0.10);  }
.csb-strain-band-exhausted { color: #d4974e;       background: rgba(212,151,78,0.10);  }
.csb-strain-band-dead      { color: #c25555;       background: rgba(192,80,77,0.15);   }
.csb-tile.csb-strain-fatigued  { border-left-color: #d4c44e; }
.csb-tile.csb-strain-exhausted { border-left-color: #d4974e; background: rgba(212,151,78,0.05); }
.csb-tile.csb-strain-dead      { border-left-color: #c25555; background: rgba(192,80,77,0.10);  }






/* Combat-bottom: vertical stack — full-width Weapons loadout on top, the
   Parry + Block Calculator pair side-by-side below. Per Rome 2026-05-25,
   opened up so the weapons card has the width to surface more ranged-
   weapon info (Loadtime, Misfire, range bands, etc.). */


/* Parry + Block row — two equal columns side-by-side, stacking on narrow
   viewports so neither calculator gets crushed. */


@media (max-width: 900px) {
  .combat-parry-block-row { grid-template-columns: 1fr; }
}

/* Parry Calculator — rows per Parry Boost ability, each with name, EVA
   bonus, cost_display, and a toggle checkbox. Bottom totals row shows
   effective EVA bonus from active toggles + a comma-separated cost list. */














/* Armor / resists hardness row — 8 damage types + extent */











/* Armor panel meta row (name + keywords) */



/* Combat-tab armor: per-slot layered picker (SLHH 6) */






















/* Resist strip — compact row mirroring the armor Hardness bar footprint.
   12 canonical subtypes + All. Keep the same visual language as
   `.hardness-grid` but with narrower cells so the whole row fits under
   the armor panel without hogging the column. */





/* Modifier-aggregated resist cell — subtle gold tint + cursor hint to
   signal that the displayed total incorporates ModifierEngine deltas
   (gear keywords + derivedFromDefense entries like Psychic Resilience).
   Hover the cell for the per-source breakdown. */




/* Static Wound Matrix — fixed 5-column × 12-row grid (Rome's v3 spec,
   narrowed per monster team ruling 2026-05-28).
   Column A = wound label, B = Mort value, C-E = 3 block cells.
   Rows 2-6 = Light/Moderate/Heavy/Severe/Critical (LP-driven, 3 cells each).
   Row 7 = spacer.  Rows 8-10 = Mortal (8 cells, 3+3+2 layout, BOD-driven).
   Row 11 = "Minor Wounds" banner. Row 12 = Minor-Wound cells (flex row).
   Each block cell has a pre-computed threshold and flips white when the
   relevant stat meets it; black otherwise. Purely informational display. */













/* Mortal blocks render red (not white) when active — death tier cue. */






/* Minor-Wound cells live in their own flex row below the banner so the
   count can grow beyond 6 without wrapping to a new grid row. Spans all
   5 grid columns; cells inside share width evenly. */



/* Minor-Wound bonus slot — marks cells that exist only because of active
   modifier blocks (e.g. Bearskin Warrior::Red Rage's +1 while Berserk).
   Gold border distinguishes them from the 6 base slots; fills normally
   when a minor wound reaches that threshold. */



/* Block-slot cell — deprecated visual distinction. Blocks are just buffer
   slots filled by a modifier source; the player sees them as normal filled
   slots (same cream-white as damage-absorbed slots). The banner + tooltip
   convey the source; no visual divergence needed. */




/* Wound Log — interactive list of individual wound records. Add button
   opens an inline form; each entry shows severity, type, mortality, HP
   to Heal (SLHH 9 Table 6C), notes, lingering toggle, and controls. */











/* Subtype badge on lingering wounds — Burning / Frostbitten / Lingering (manual).
   Distinguishes Burning-flagged Fire wounds from one-shot Fire wounds, etc. */













/* New-wound form (inline, slides in above the log). */























/* Weapons loadout cards */


















/* New Combat-tab weapon card layout — header row, skill badge,
   live attack-profile table with computed pool/power/modifier sources. */








/* Ranged attack tables widen the Range column to fit the bands list. */










/* Per-attack skill override pill — surfaces when an attack uses a different
   skill than the weapon's main skill (e.g. Pommel Punch on a sword uses
   Unarmed Combat). Cool blue distinguishes it from the dynamic modifier
   pills (green) and focus pill (gold). Per Rome 2026-05-11. */
.wc-mod-pill-skill {
  background: rgba(120, 160, 220, 0.16);
  border-color: rgba(140, 180, 230, 0.4);
  color: #b8d0e8;
}
/* Focus pill — always visible when an attack has a resolved focus, even
   if the character has zero focus rank (so they can see WHICH focus the
   attack draws from). Gold to match focus styling elsewhere. */
.wc-mod-pill-focus {
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--gold-light, #e8c878);
}














/* ─── PLACEHOLDERS (WIP tab content) ─────────────────── */









/* ─── BEACON (six-color) ─────────────────────────────── */











  
  
  
  
  
  

/* ─── DEBUG PANEL (used on Overview tab, can be removed later) ─── */







/* ─── RESPONSIVE ─────────────────────────────────────── */

@media (max-width: 720px) {
  #page { padding: 16px 14px 40px; }
  .loaded-banner { padding: 16px 18px; gap: 14px; }
  .loaded-banner .name-block h1 { font-size: 1.4rem; }
  .tab-btn { padding: 6px 9px; font-size: 0.74rem; letter-spacing: 0.6px; }
  .sheet-section { padding: 18px 16px; }
  .stat-grid-compact { grid-template-columns: repeat(2, 1fr); }
}

/* Rest & Recovery — Sleep Quality color chip variants. Colors graded
   from Oppressive (alert) through Good (felt-good green). */








/* Activity Reference — collapsible Downtime section. The <summary>
   carries the same .section-header styling as static sections; we
   suppress the native disclosure triangle and add a chevron on the
   right that rotates when [open]. */








/* Generic collapsible <details> styling for top-level sheet sections.
   Same visual contract as a static .sheet-section / .section-header pair,
   but the ▸ chevron rotates 90° on [open], native marker is hidden, and
   the body padding adjusts so a collapsed section sits at header height
   only. */








/* ─── REST & RECOVERY — visual integration with project shell ─── */
/* Calculator panels reuse the project's .kv-block shell (gold-dim title,
   bg-dark / bg-mid border, project radius).  The CSS below adds only
   calculator-specific bits the .kv-block defaults don't cover. */
























































/* Sleep Quality color chips (existing) — re-tinted to read better against bg-dark */


/* SC selector + Blacklisted flag styling — Rome 2026-04-26.
   The sticky header gets a "→ N" trailing annotation showing post-commit
   balances; .scp-sticky-after is a small inline note.  Per-staged-row SC
   stepper sits next to the cost string with a tight ± pair.  The
   .sc-blacklisted-flag is the burnt-orange chip that appears on the
   Social tab's SC row and inside the sticky Staged-SC label when the
   Blacklisted Notable Event is active. */










/* Indebted debt tracker (Social tab Standing block) — Rome 2026-04-27. */











/* ─── Gear-tab picker (Phase 1 pilot — Armor) ────────────────── */


















@media (max-width: 900px) { .gp-body { grid-template-columns: 1fr; } }













/* Row layout — name takes the remaining flex, meta is a narrow fixed
   column, hardness column is fixed-width to hold the compact grid with
   consistent cell dimensions even for 2-digit values. */




/* Row hardness column — wraps the inline compact grid. Display:flex with
   end justification floats the grid to the right edge of its column. */











/* Hardness grid — table-style layout with consistent borders.
   7 columns × 2 rows: header row (damage type letters) + value row.
   Outer border on the wrap, internal grid lines via per-cell border-right
   and the head row's border-bottom. Used in three contexts:
     • Owned cards (full size)
     • For Sale row body (compact via .gp-hardness-grid.compact)
     • For Sale row expand-detail (full size) */







/* Compact variant — used inline on For Sale rows. Fills its container
   (the 260px hardness column on the row), so each cell is ~37px wide and
   easily fits 2-digit values (C12, P10) at consistent widths. */

















/* Kind badge — melee/ranged label on weapon row names */




/* Attack-profile summary text in the weapon row (replaces Hardness grid) */


/* Attack-profile detail table — canonical 3D/3G layout */













/* Gear-tab view switch — segmented control below Gross Wealth that toggles
   between Owned (default) and For Sale. */







/* Owned view — Ammunition stacks. */






/* Conveyance view: cards per mount/vehicle with traits + cargo bar. */















/* Owned view — Containers section: expandable cards with capacity bars. */































/* Owned view — rich card display of each owned armor piece */






/* Cart-staged banner on the Owned view — shown when the cart has items
   so the player has a one-click path to For Sale's Commit button. */
















@media (max-width: 720px) { .gp-owned-card-body { grid-template-columns: 1fr; } }


/* Cart bar — sticky purchase staging strip at top of picker */



/* Resource groups — Silver / SC / WP, same paired-cell idiom as the
   Advancement sticky header. Three columns; WP gets a wider cell since
   it's reserved for richer crafting data. */















/* Action row — Commit + Clear. Sits below the resource groups. */

















/* Price chip — prominent cost beside item name */


/* Three-state buttons on item rows */











/* Social Capital stepper in cart bar */










/* Active Pricing Effects strip */



.gp-pe-tag.neutral { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--cream-dim); }
.gp-pe-tag.boon { background: rgba(120, 180, 90, 0.15); border-color: rgba(120, 180, 90, 0.4); color: #a8d080; }

/* ─── Gods tab (Phase 9) ─────────────────────────────────────────── */
.gods-empty { color: var(--cream-dark); font-style: italic;
  padding: 12px; background: var(--bg-card); border: 1px dashed var(--bg-mid);
  border-radius: 4px; margin: 6px 0; }

/* Fate Binding summary card — Phase 9 (Rome 2026-05-05). Each non-free
   Devotion suspends 1 FP (or 2 if "Forsaken"). Visible at the top of the
   Devotions section so players see why FP dropped after binding. */
.gods-fate-binding { padding: 8px 12px; margin-bottom: 10px;
  border-radius: 3px; font-size: 0.88rem;
  background: rgba(212,168,83,0.08);
  border-left: 3px solid var(--gold-dim);
  color: var(--cream); }
.gods-fate-binding-forsaken { background: rgba(192,80,77,0.08);
  border-left-color: #c05049; }
.gods-fate-binding-icon { display: inline-block; margin-right: 6px;
  color: var(--gold-dim); font-size: 1.1rem; vertical-align: middle; }
.gods-fate-binding-forsaken .gods-fate-binding-icon { color: #c05049; }
.gods-fate-binding-total { color: #e0a060; font-weight: 600; }
.gods-fate-binding-forsaken-note { color: #e09b97; font-size: 0.78rem;
  font-style: italic; margin-left: 4px; }

.gods-free-summary { background: rgba(120,180,90,0.05);
  border-left: 3px solid #a8d080; padding: 8px 12px; margin-bottom: 10px;
  border-radius: 3px; font-size: 0.88rem;
  display: flex; flex-direction: column; gap: 4px; }
.gods-free-summary-head { padding-bottom: 4px;
  border-bottom: 1px dashed rgba(120,180,90,0.2); margin-bottom: 4px; }
.gods-free-summary-head .hint { display: block; color: var(--cream-dim);
  font-size: 0.78rem; font-weight: normal; margin-top: 2px; }

.gods-free-row { display: flex; justify-content: space-between;
  align-items: center; gap: 12px; padding: 4px 6px;
  border-radius: 3px; }
.gods-free-row:hover { background: rgba(120,180,90,0.06); }
.gods-free-row.gods-free-consumed { opacity: 0.55; }
.gods-free-row-left { flex: 1; }
.gods-free-label { color: var(--cream); font-weight: 600; }
.gods-free-arrow { color: var(--cream-dim); margin: 0 4px; }
.gods-free-deity { color: var(--gold-light); font-style: italic; }
.gods-free-selectable { color: var(--cream-dim); font-style: italic;
  font-size: 0.8rem; }
.gods-free-row-right { display: flex; gap: 6px; align-items: center; }
.gods-free-bind-btn { background: rgba(120,180,90,0.18);
  color: #b8d090; border: 1px solid rgba(120,180,90,0.4);
  border-radius: 3px; padding: 3px 12px; font-size: 0.8rem;
  cursor: pointer; }
.gods-free-bind-btn:hover { background: rgba(120,180,90,0.28);
  color: #d8eab0; }
.gods-free-pick-select { background: var(--bg-card);
  color: var(--cream); border: 1px solid var(--bg-mid);
  border-radius: 3px; padding: 2px 6px; font-size: 0.82rem; }
.gods-free-status { padding: 2px 8px; border-radius: 3px;
  font-size: 0.75rem; font-weight: 600; }
.gods-free-status-bound { background: rgba(212,168,83,0.10);
  color: var(--gold-dim); border: 1px solid rgba(212,168,83,0.25); }
.gods-free-pill { display: inline-block; padding: 2px 8px; margin: 2px 4px 2px 0;
  background: rgba(120,180,90,0.12); border-radius: 3px;
  border: 1px solid rgba(120,180,90,0.3); color: #b8d090; font-size: 0.8rem; }

.gods-devotion-list { display: flex; flex-direction: column; gap: 6px; }
.gods-devotion-row { display: grid;
  grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--bg-card);
  border: 1px solid var(--bg-mid); border-radius: 4px; }
.gods-devotion-row.gods-free-bound { border-left: 3px solid #a8d080; }
.gods-devotion-row.gods-fp-bound { border-left: 3px solid var(--gold-dim); }
.gods-deity-name { font-family: var(--font-title); color: var(--gold);
  font-size: 1rem; }
.gods-deity-church { color: var(--cream-dim); font-size: 0.82rem; margin-left: 4px; }
.gods-deity-concerns { color: var(--cream-dark); font-size: 0.78rem;
  font-style: italic; margin-left: 8px; }
.gods-bind-pill { padding: 2px 8px; border-radius: 3px;
  font-size: 0.78rem; font-weight: 600; white-space: normal;
  line-height: 1.25; text-align: center; }
/* let the deity-info column shrink/wrap instead of forcing the row wide */
.gods-row-main { min-width: 0; }
.gods-row-meta { min-width: 0; }
.gods-bind-free { background: rgba(120,180,90,0.15); color: #a8d080;
  border: 1px solid rgba(120,180,90,0.3); }
.gods-bind-bound { background: rgba(212,168,83,0.10); color: var(--gold);
  border: 1px solid rgba(212,168,83,0.3); }
.gods-remove-btn { background: transparent; color: var(--cream-dark);
  border: 1px solid var(--bg-mid); border-radius: 3px;
  padding: 2px 8px; cursor: pointer; font-size: 1.1rem; }
.gods-remove-btn:hover { color: #e09080; border-color: #c05049; }

.gods-add-row { display: flex; gap: 8px; margin-top: 10px;
  align-items: center; }
.gods-deity-select { flex: 1; max-width: 480px;
  background: var(--bg-card); color: var(--cream);
  border: 1px solid var(--bg-mid); border-radius: 3px;
  padding: 6px 10px; font-size: 0.9rem; }
.gods-add-btn { background: var(--gold-dim); color: var(--bg-darkest);
  border: none; padding: 6px 14px; border-radius: 3px;
  font-family: var(--font-title); font-size: 0.88rem; cursor: pointer; }
.gods-add-btn:hover { background: var(--gold); }

.gods-favor-wrap { display: flex; flex-direction: column; gap: 10px; }
.gods-favor-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; }
.gods-favor-cell { padding: 10px 14px; background: var(--bg-card);
  border: 1px solid var(--bg-mid); border-radius: 4px;
  display: flex; flex-direction: column; gap: 2px; }
.gods-favor-cell.gods-favor-highlight { border-color: var(--gold-dim);
  background: rgba(212,168,83,0.06); }
.gods-favor-label { color: var(--cream-dim); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.5px; }
.gods-favor-val { font-family: 'Courier New', monospace;
  color: var(--gold); font-size: 1.4rem; font-weight: 600; }
.gods-favor-breakdown { font-size: 0.85rem; color: var(--cream-dim);
  padding: 8px 12px; background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--gold-dim); border-radius: 3px; }
.gods-favor-breakdown strong { color: var(--cream); }

.gods-favor-input-cell { display: flex; flex-direction: column; gap: 2px; }
.gods-favor-input-label { color: var(--cream-dim); font-size: 0.78rem; }
.gods-favor-input { width: 80px; background: var(--bg-card);
  color: var(--cream); border: 1px solid var(--bg-mid); border-radius: 3px;
  padding: 4px 8px; font-family: 'Courier New', monospace;
  text-align: center; }

/* Phase 9 follow-up (Rome 2026-05-05): Faith Abilities row + Surges log.
   Faith Abilities surfaces actionable Favor-bonus buttons from owned
   abilities (Pact, Divine Inspiration, Dangerous Ponderances). Surges
   logs the applied one-shots so the player can remove mis-clicks. */
/* Now lives inside its own .sheet-section card (#gods-faith-abilities), so the
   wrap stays transparent/flush — no tinted box, no top offset. (Rome 2026-06-17) */
.gods-faith-abilities {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.gods-faith-abilities-head {
  font-size: 0.92rem;
  margin-bottom: 8px;
  color: var(--cream);
}
.gods-faith-abilities-head .hint {
  display: block;
  font-size: 0.78rem;
  color: var(--cream-dim);
  font-weight: normal;
  margin-top: 2px;
}
.gods-ability-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
}
.gods-ability-card:last-child { margin-bottom: 0; }
.gods-ability-label {
  font-size: 0.86rem;
  color: var(--cream);
}
.gods-ability-tier {
  color: var(--gold-dim);
  font-size: 0.78rem;
  margin-left: 4px;
}
.gods-ability-effect {
  display: block;
  color: var(--cream-dim);
  font-size: 0.80rem;
  font-style: italic;
  margin-top: 2px;
}
.gods-ability-ctrl {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.gods-ability-tag {
  padding: 2px 8px;
  background: rgba(120, 90, 50, 0.15);
  border-radius: 3px;
  color: var(--gold-dim);
  font-size: 0.82rem;
}
.gods-ability-note {
  color: var(--cream-dim);
  font-style: italic;
  font-size: 0.82rem;
}
.gods-ability-select {
  background: var(--bg-darkest);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.84rem;
}
.gods-ability-btn {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 5px 12px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.84rem;
  cursor: pointer;
}
.gods-ability-btn:hover:not(:disabled) { background: var(--gold); }
.gods-ability-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.gods-eluc-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.gods-eluc-label {
  flex: 1;
  font-size: 0.84rem;
  color: var(--cream);
}
.gods-eluc-label .gods-eluc-formula {
  display: block;
  color: var(--cream-dim);
  font-size: 0.78rem;
  font-style: italic;
}
.gods-eluc-note {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(80, 80, 100, 0.10);
  border-radius: 3px;
  color: var(--cream-dim);
  font-size: 0.78rem;
}
.gods-surges-wrap {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.gods-surges-head {
  font-size: 0.90rem;
  color: var(--cream);
  margin-bottom: 8px;
}
.gods-surges-head .hint {
  display: block;
  font-size: 0.76rem;
  color: var(--cream-dim);
  font-weight: normal;
  margin-top: 2px;
}
.gods-surge-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(120, 180, 120, 0.15);
  font-size: 0.84rem;
}
.gods-surge-row:last-child { border-bottom: none; }
.gods-surge-label { flex: 1; color: var(--cream); }
.gods-surge-amount {
  font-family: 'Courier New', monospace;
  font-weight: 600;
}
.gods-surge-amount.up { color: #a8e0b8; }
.gods-surge-amount.down { color: #d88080; }
.gods-surge-remove {
  background: transparent;
  border: 1px solid var(--bg-mid);
  color: var(--cream-dim);
  border-radius: 3px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 0.86rem;
}
.gods-surge-remove:hover { color: #e09080; border-color: #c05049; }

.gods-stricture-card, .gods-article-card, .gods-sacrament-placeholder {
  margin: 8px 0; padding: 10px 14px; background: var(--bg-card);
  border: 1px solid var(--bg-mid); border-radius: 4px; }
.gods-stricture-head, .gods-article-head, .gods-sacrament-head {
  font-family: var(--font-title); color: var(--gold);
  font-size: 0.95rem; margin: 0 0 8px 0; }
.gods-stricture-list { display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 6px; }
.gods-stricture-item { display: flex; gap: 6px; align-items: center; }
.gods-stricture-text { flex: 1; background: rgba(255,255,255,0.02);
  color: var(--cream); border: 1px solid var(--bg-mid); border-radius: 3px;
  padding: 4px 8px; font-size: 0.88rem; }
.gods-stricture-remove { background: transparent; color: var(--cream-dark);
  border: 1px solid var(--bg-mid); border-radius: 3px;
  padding: 2px 8px; cursor: pointer; }
.gods-stricture-remove:hover { color: #e09080; border-color: #c05049; }
.gods-stricture-add { background: transparent; color: var(--gold-dim);
  border: 1px dashed var(--bg-mid); border-radius: 3px;
  padding: 4px 12px; cursor: pointer; font-size: 0.85rem; }
.gods-stricture-add:hover { color: var(--gold); border-color: var(--gold-dim); }

.gods-class-ref { padding: 10px 14px; background: rgba(212,168,83,0.05);
  border-left: 3px solid var(--gold-dim); border-radius: 3px;
  margin-bottom: 12px; }
.gods-class-ref-title { margin-bottom: 8px; }
.gods-class-grid { display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 6px; }
.gods-class-cell { display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; background: var(--bg-card);
  border: 1px solid var(--bg-mid); border-radius: 3px; text-align: center; }
.gods-class-name { color: var(--gold); font-family: var(--font-title); font-size: 0.85rem; }
.gods-class-gate { color: var(--cream-dim); font-size: 0.72rem; }
.gods-class-cost { color: var(--gold-light); font-family: 'Courier New', monospace;
  font-size: 0.78rem; }

.gods-inv-block { margin: 10px 0; }
.gods-inv-block-head { font-family: var(--font-title);
  color: var(--gold); font-size: 0.95rem; margin: 0 0 6px 0; }
.gods-inv-table { width: 100%; border-collapse: collapse;
  font-size: 0.82rem; }
.gods-inv-table th, .gods-inv-table td { padding: 4px 8px;
  text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.gods-inv-table th { color: var(--cream-dim); font-weight: normal;
  text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.7rem; }
.gods-inv-table td { color: var(--cream); }
.gods-inv-table strong { color: var(--gold); }
.gods-inv-effect { color: var(--cream-dim); font-style: italic;
  max-width: 360px; }

/* Responsive: collapse to 1 column on a narrow card so the inputs never
   overflow. (Rome 2026-06-17) */
.gods-article-grid, .gods-church-wrap { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.gods-article-cell, .gods-church-cell { display: flex; flex-direction: column;
  gap: 4px; min-width: 0; }
.gods-article-label, .gods-church-label { color: var(--cream-dim);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }
.gods-article-input, .gods-church-textarea { background: var(--bg-card);
  color: var(--cream); border: 1px solid var(--bg-mid); border-radius: 3px;
  padding: 6px 10px; font-size: 0.88rem;
  width: 100%; min-width: 0; box-sizing: border-box; }
.gods-church-textarea { resize: vertical; min-height: 50px;
  font-family: inherit; }
.gods-church-select { background: var(--bg-card); color: var(--cream);
  border: 1px solid var(--bg-mid); border-radius: 3px;
  padding: 6px 10px; font-size: 0.9rem; }
.gods-sacrament-placeholder { background: rgba(120,80,180,0.06);
  border-left: 3px solid #a890d0; }
.gods-sacrament-placeholder p { font-size: 0.88rem;
  margin: 6px 0; color: var(--cream); }
.gods-sacrament-placeholder .hint { font-style: italic; }

/* ── Damage Helper (Phase 2, Combat tab) ────────────────────────── */
.damage-helper { display: flex; flex-direction: column; gap: 12px; }

.dh-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bg-mid);
  padding-bottom: 4px; }
.dh-tab { background: transparent; border: 1px solid transparent;
  border-bottom: none; color: var(--cream-dim); padding: 6px 14px;
  font-family: var(--font-title); font-size: 0.85rem; cursor: pointer;
  border-top-left-radius: 4px; border-top-right-radius: 4px;
  transition: all 0.15s; }
.dh-tab:hover { color: var(--cream); background: rgba(255,255,255,0.04); }
.dh-tab-active { color: var(--gold); border-color: var(--bg-mid);
  background: var(--bg-card); }

.dh-grid { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; margin-top: 6px; }
.dh-cell { display: flex; flex-direction: column; gap: 4px; }
.dh-label { color: var(--cream-dim); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.5px; }
.dh-input { background: var(--bg-card); color: var(--cream);
  border: 1px solid var(--bg-mid); border-radius: 3px;
  padding: 6px 8px; font-family: 'Courier New', monospace;
  font-size: 0.95rem; text-align: center; }
.dh-input:focus { outline: none; border-color: var(--gold-dim); }

.dh-computed { display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px; background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--gold-dim); border-radius: 3px;
  font-size: 0.85rem; }
.dh-computed-row span:first-child { color: var(--cream-dim); }
.dh-computed-row strong { color: var(--gold); font-family: 'Courier New', monospace; }
.dh-computed-note { color: var(--cream-dark); font-size: 0.75rem;
  margin-left: 6px; }

.dh-table { width: 100%; border-collapse: collapse; margin-top: 4px;
  font-size: 0.85rem; }
.dh-table th, .dh-table td { padding: 4px 10px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06); }
.dh-table th { color: var(--cream-dim); font-weight: normal;
  text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.7rem; }
.dh-table td { color: var(--cream); font-family: 'Courier New', monospace; }
.dh-no-dmg { color: var(--cream-dark); font-style: italic; }
.dh-row-nodmg td { color: var(--cream-dark); }
.dh-row-minor td { color: #b0b0a0; }
.dh-row-critical td { color: #e09080; font-weight: 600; }

.dh-roll-wrap { display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--bg-mid); }
.dh-roll-btn { background: var(--gold-dim); color: var(--bg-darkest);
  border: none; padding: 8px 16px; font-family: var(--font-title);
  font-size: 0.95rem; cursor: pointer; border-radius: 3px;
  transition: background 0.15s; align-self: flex-start; }
.dh-roll-btn:hover:not(:disabled) { background: var(--gold); }
.dh-roll-btn:disabled { background: var(--bg-mid); color: var(--cream-dark);
  cursor: not-allowed; }

.dh-roll-result { display: flex; flex-direction: column; gap: 6px;
  padding: 8px 12px; background: rgba(212,168,83,0.06);
  border: 1px solid rgba(212,168,83,0.2); border-radius: 3px; }
.dh-roll-dice { display: flex; flex-wrap: wrap; gap: 4px; }
.dh-die { display: inline-block; width: 28px; height: 28px;
  line-height: 28px; text-align: center; border-radius: 3px;
  font-family: 'Courier New', monospace; font-size: 0.9rem;
  font-weight: 600; }
.dh-die-hit { background: rgba(120,180,90,0.2); color: #a8d080;
  border: 1px solid rgba(120,180,90,0.5); }
.dh-die-miss { background: rgba(255,255,255,0.04); color: var(--cream-dark);
  border: 1px solid rgba(255,255,255,0.08); }
.dh-roll-summary { font-size: 0.9rem; }
.dh-roll-summary strong { color: var(--gold); font-family: 'Courier New', monospace; }
.dh-result-wound { padding: 1px 8px; border-radius: 3px; font-weight: 600;
  background: rgba(255,255,255,0.05); }
.dh-wound-minor { color: #b0b0a0; }
.dh-wound-light { color: #d8c890; }
.dh-wound-moderate { color: #e8b878; }
.dh-wound-heavy { color: #e09660; }
.dh-wound-severe { color: #e08060; }
.dh-wound-critical { color: #e06860; }
.dh-wound-mortal { color: #ff6060; background: rgba(192,80,77,0.15); }
.dh-result-mort { color: var(--cream-dim); font-size: 0.82rem; }

/* Phase 9 follow-up (Rome 2026-05-05): Global collapsible sheet-sections.
   Click any .section-header to toggle .section-collapsed on its parent.
   When collapsed, every direct child of .sheet-section EXCEPT the header
   is hidden. Chevron rotates -90deg via the existing .sh-chevron rule. */
.sheet-section.section-collapsed > :not(.section-header) {
  display: none;
}
.sheet-section.section-collapsed {
  padding-bottom: 14px;
}
.sheet-section .section-header.section-header-collapsible {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.sheet-section .section-header.section-header-collapsible:hover {
  color: var(--gold-light);
}
.sheet-section .section-header .sh-chevron {
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.18s ease;
  color: var(--gold-dim);
  font-size: 0.7rem;
}
.sheet-section .section-header.section-header-collapsed .sh-chevron {
  transform: rotate(-90deg);
}

/* Phase 10 (Rome 2026-05-05): Magic-tab placeholder scaffolding + draft Spells catalog. */
.magic-placeholder-card {
  background: linear-gradient(145deg, var(--bg-card) 0%, rgba(60, 50, 70, 0.4) 100%);
}
.magic-placeholder-body p {
  margin: 6px 0;
  color: var(--cream-dim);
  line-height: 1.5;
}
.magic-placeholder-body .magic-placeholder-status {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(170, 60, 60, 0.10);
  border-left: 3px solid rgba(170, 60, 60, 0.50);
  border-radius: 3px;
  color: var(--cream);
  font-size: 0.84rem;
}
.magic-placeholder-body code {
  font-family: 'Courier New', monospace;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--gold-dim);
  font-size: 0.86em;
}
.magic-spells-banner {
  margin: 8px 0 14px;
  padding: 10px 14px;
  background: rgba(212, 168, 83, 0.08);
  border: 1px dashed rgba(212, 168, 83, 0.40);
  border-radius: 3px;
  color: var(--cream-dim);
  font-size: 0.86rem;
}
.magic-spells-banner strong {
  color: var(--gold);
}

/* Phase Modalities-IP (Rome 2026-05-16) — Inner Pillar / Hedge Mage
   modality-incomplete warning. Shows when an Inner Pillar mage hasn't
   filled all 3 modality slots OR hasn't activated them in the tracker.
   Red-amber tone so it reads as actionable, not just informational. */
.magic-modality-warning {
  margin: 8px 0 14px;
  padding: 10px 14px;
  background: rgba(220, 80, 60, 0.12);
  border: 1px solid rgba(232, 110, 90, 0.55);
  border-left: 4px solid #d05540;
  border-radius: 3px;
  color: #f0c8b8;
  font-size: 0.86rem;
  line-height: 1.4;
}
.magic-modality-warning strong {
  color: #ffb898;
}
.magic-modality-warning em {
  color: rgba(232, 200, 120, 0.85);
  font-style: italic;
}
/* When the Hedge Mage card carries an active warning, tint its border
   so the whole card pops as needs-attention. */
.magic-hedge-card.modality-warning {
  border-color: rgba(232, 110, 90, 0.55);
  background: linear-gradient(to bottom, rgba(220, 80, 60, 0.04), transparent 60%);
}

.magic-class-card {
  margin-bottom: 12px;
}
.magic-school-block {
  margin: 10px 0 14px;
}
.magic-school-head {
  margin: 6px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bg-mid);
  color: var(--gold-light);
  font-family: var(--font-title);
  font-size: 0.95rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.magic-school-head .hint {
  color: var(--cream-dim);
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.magic-spell-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.magic-spell-table thead th {
  text-align: left;
  padding: 4px 8px;
  color: var(--gold-dim);
  font-weight: 600;
  border-bottom: 1px solid var(--bg-mid);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.magic-spell-table tbody td {
  padding: 3px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--cream-dim);
}
.magic-spell-table tbody tr:hover {
  background: rgba(212, 168, 83, 0.05);
  color: var(--cream);
}
.magic-spell-table tbody td:first-child {
  color: var(--cream);
}


/* Phase 10a (Rome 2026-05-05): Gates subsystem UI. */
.magic-gates-card .magic-gates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.magic-gate-cell {
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.86rem;
}
.magic-gate-cell.gate-open {
  border-color: var(--gold-dim);
  background: linear-gradient(145deg, var(--bg-card) 0%, rgba(212, 168, 83, 0.08) 100%);
}
.magic-gate-cell .gate-num-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-title);
}
.magic-gate-cell .gate-num {
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 600;
}
.magic-gate-cell.gate-open .gate-num {
  color: var(--gold-light);
}
.magic-gate-cell .gate-name {
  color: var(--cream);
  font-size: 0.9rem;
}
.magic-gate-cell .gate-meta {
  font-size: 0.78rem;
  color: var(--cream-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.magic-gate-cell .gate-beacon-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 0.74rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.magic-gate-cell .gate-beacon-pill.beacon-Orange { background: rgba(220, 140, 60, 0.18); color: #e8b888; border: 1px solid rgba(220, 140, 60, 0.45); }
.magic-gate-cell .gate-beacon-pill.beacon-Purple { background: rgba(160, 90, 200, 0.18); color: #c89cd8; border: 1px solid rgba(160, 90, 200, 0.45); }
.magic-gate-cell .gate-beacon-pill.beacon-Red    { background: rgba(200, 70, 70, 0.18);  color: #e09898; border: 1px solid rgba(200, 70, 70, 0.45); }
.magic-gate-cell .gate-beacon-pill.beacon-Blue   { background: rgba(80, 130, 200, 0.18); color: #98b8e0; border: 1px solid rgba(80, 130, 200, 0.45); }
.magic-gate-cell .gate-beacon-pill.beacon-Green  { background: rgba(90, 170, 90, 0.18);  color: #a8d098; border: 1px solid rgba(90, 170, 90, 0.45); }
.magic-gate-cell .gate-beacon-pill.beacon-Yellow { background: rgba(220, 200, 80, 0.18); color: #e0d088; border: 1px solid rgba(220, 200, 80, 0.45); }
.magic-gate-cell .gate-action {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.magic-gate-cell .gate-btn {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 4px 10px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.78rem;
  cursor: pointer;
}
.magic-gate-cell .gate-btn:hover:not(:disabled) { background: var(--gold); }
.magic-gate-cell .gate-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.magic-gate-cell .gate-status {
  font-size: 0.74rem;
  color: var(--cream-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.magic-gate-cell.gate-open .gate-status { color: var(--gold-light); font-weight: 600; }
.magic-flare-pool {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(120, 90, 50, 0.06);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
}
.magic-flare-pool-head {
  font-size: 0.86rem;
  color: var(--cream);
  margin-bottom: 6px;
}
.magic-flare-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.magic-flare-cell {
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  text-align: center;
  font-size: 0.78rem;
}
.magic-flare-cell .flare-color {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.magic-flare-cell .flare-amount {
  font-family: 'Courier New', monospace;
  font-size: 1.0rem;
  color: var(--cream);
  font-weight: 600;
}



/* Phase 10a (Rome 2026-05-05): Gates subsystem UI placeholder */
.magic-gates-card {
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
  /* margin-top removed (Rome 2026-06-17): the grid gap handles spacing now;
     the old 10px pushed the Gates card below its row-mates' top edge. */
}
.magic-gates-placeholder {
  font-size: 0.85rem;
  color: var(--cream-dim);
  line-height: 1.5;
}
.magic-gates-placeholder p {
  margin: 6px 0;
}
.magic-gates-placeholder strong {
  color: var(--cream);
}
.magic-gates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.magic-gate-cell {
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.86rem;
}
.magic-gate-cell.gate-open {
  border-color: var(--gold-dim);
  background: linear-gradient(145deg, var(--bg-card) 0%, rgba(212, 168, 83, 0.08) 100%);
}
.magic-gate-cell .gate-num-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-title);
}
.magic-gate-cell .gate-num {
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 600;
}
.magic-gate-cell.gate-open .gate-num {
  color: var(--gold-light);
}
.magic-gate-cell .gate-name {
  color: var(--cream);
  font-size: 0.9rem;
}
.magic-gate-cell .gate-meta {
  font-size: 0.78rem;
  color: var(--cream-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.magic-gate-cell .gate-beacon-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 0.74rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.magic-gate-cell .gate-beacon-pill.beacon-Orange { background: rgba(220, 140, 60, 0.18); color: #e8b888; border: 1px solid rgba(220, 140, 60, 0.45); }
.magic-gate-cell .gate-beacon-pill.beacon-Purple { background: rgba(160, 90, 200, 0.18); color: #c89cd8; border: 1px solid rgba(160, 90, 200, 0.45); }
.magic-gate-cell .gate-beacon-pill.beacon-Red { background: rgba(200, 70, 70, 0.18); color: #e09898; border: 1px solid rgba(200, 70, 70, 0.45); }
.magic-gate-cell .gate-beacon-pill.beacon-Blue { background: rgba(80, 130, 200, 0.18); color: #98b8e0; border: 1px solid rgba(80, 130, 200, 0.45); }
.magic-gate-cell .gate-beacon-pill.beacon-Green { background: rgba(90, 170, 90, 0.18); color: #a8d098; border: 1px solid rgba(90, 170, 90, 0.45); }
.magic-gate-cell .gate-beacon-pill.beacon-Yellow { background: rgba(220, 200, 80, 0.18); color: #e0d088; border: 1px solid rgba(220, 200, 80, 0.45); }
.magic-gate-cell .gate-action {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.magic-gate-cell .gate-btn {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 4px 10px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.78rem;
  cursor: pointer;
}
.magic-gate-cell .gate-btn:hover:not(:disabled) { background: var(--gold); }
.magic-gate-cell .gate-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.magic-gate-cell .gate-status {
  font-size: 0.74rem;
  color: var(--cream-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.magic-gate-cell.gate-open .gate-status { color: var(--gold-light); font-weight: 600; }
.magic-flare-pool {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(120, 90, 50, 0.06);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
}
.magic-flare-pool-head {
  font-size: 0.86rem;
  color: var(--cream);
  margin-bottom: 6px;
}
.magic-flare-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.magic-flare-cell {
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  text-align: center;
  font-size: 0.78rem;
}
.magic-flare-cell .flare-color {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.magic-flare-cell .flare-amount {
  font-family: 'Courier New', monospace;
  font-size: 1.0rem;
  color: var(--cream);
  font-weight: 600;
}

/* Phase 10b (Rome 2026-05-05): Flare tracker card. Per-Beacon Rating + Flare
   + Surging + Stress, plus Beacon Evaluation manual trigger. */
.magic-flare-card .magic-flare-banner {
  margin: 8px 0 14px;
  padding: 10px 14px;
  background: rgba(212, 168, 83, 0.06);
  border-left: 3px solid var(--gold-dim);
  border-radius: 3px;
  color: var(--cream);
  font-size: 0.88rem;
}
.magic-flare-grid-detailed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.magic-flare-beacon-card {
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-left-width: 4px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.86rem;
}
.magic-flare-beacon-card.beacon-color-red    { border-left-color: rgba(200, 70, 70, 0.7); }
.magic-flare-beacon-card.beacon-color-orange { border-left-color: rgba(220, 140, 60, 0.7); }
.magic-flare-beacon-card.beacon-color-yellow { border-left-color: rgba(220, 200, 80, 0.7); }
.magic-flare-beacon-card.beacon-color-green  { border-left-color: rgba(90, 170, 90, 0.7); }
.magic-flare-beacon-card.beacon-color-blue   { border-left-color: rgba(80, 130, 200, 0.7); }
.magic-flare-beacon-card.beacon-color-purple { border-left-color: rgba(160, 90, 200, 0.7); }
.magic-flare-beacon-card.beacon-surging {
  background: linear-gradient(145deg, var(--bg-card) 0%, rgba(220, 140, 60, 0.10) 100%);
  border-color: rgba(220, 140, 60, 0.45);
}
.magic-flare-beacon-card .fb-name {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 0.92rem;
  letter-spacing: 0.6px;
}
.magic-flare-beacon-card .fb-emotion {
  color: var(--cream-dim);
  font-size: 0.74rem;
  font-style: italic;
}
.magic-flare-beacon-card .fb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--cream);
}
.magic-flare-beacon-card .fb-row-label {
  color: var(--cream-dim);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.magic-flare-beacon-card .fb-val {
  font-family: 'Courier New', monospace;
  font-weight: 600;
}
.magic-flare-beacon-card .fb-val.surging { color: #f0b070; }
.magic-flare-beacon-card .fb-pm {
  display: inline-flex;
  gap: 4px;
}
.magic-flare-beacon-card .fb-btn {
  background: transparent;
  border: 1px solid var(--bg-mid);
  color: var(--gold-dim);
  width: 22px;
  height: 22px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1;
}
.magic-flare-beacon-card .fb-btn:hover { color: var(--gold); border-color: var(--gold-dim); }
.magic-flare-beacon-card .fb-surging-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  background: rgba(220, 140, 60, 0.20);
  border: 1px solid rgba(220, 140, 60, 0.50);
  border-radius: 3px;
  font-size: 0.72rem;
  color: #f0b070;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}
.magic-flare-beacon-card .fb-shift-line {
  font-size: 0.72rem;
  color: #c89cb0;
  font-style: italic;
}
.magic-flare-beacon-card .fb-stress {
  font-size: 0.74rem;
  color: var(--cream-dim);
  text-align: center;
}
.magic-flare-beacon-card .fb-stress.has-stress { color: #d88080; font-weight: 600; }
.magic-flare-eval-btn {
  display: block;
  margin: 14px auto 4px;
  padding: 8px 18px;
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.92rem;
  letter-spacing: 0.6px;
  cursor: pointer;
}
.magic-flare-eval-btn:hover:not(:disabled) { background: var(--gold); }
.magic-flare-eval-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.magic-flare-eval-note {
  margin-top: 4px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--cream-dim);
  font-style: italic;
}


/* Phase 10c (Rome 2026-05-05; trimmed Rome 2026-05-07): Story-tab Stress
   display, fed live from Beacon ratings via the same canon lookup as the
   Magic-tab Flare tracker. Restructured for at-a-glance reading: status
   row + band ladder + Beacon strip + (mitigation if active) + collapsible
   Failings — replaces the older multi-section layout. */
.story-stress-wrap { display: flex; flex-direction: column; gap: 8px; }

/* Status row — Net Stress | Band | Acc/Failings chips, all on one line. */
.story-stress-status {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  background: rgba(212, 168, 83, 0.06);
  border-left: 3px solid var(--gold-dim);
  border-radius: 3px;
  color: var(--cream);
  font-size: 0.92rem;
  flex-wrap: wrap;
}
.story-stress-status.sss-band-pressured { border-left-color: rgba(220, 200, 80, 0.7); background: rgba(220, 200, 80, 0.06); }
.story-stress-status.sss-band-cracking  { border-left-color: rgba(220, 140, 60, 0.7); background: rgba(220, 140, 60, 0.06); }
.story-stress-status.sss-band-crushing  { border-left-color: rgba(216, 128, 128, 0.8); background: rgba(216, 128, 128, 0.08); }
.story-stress-status.sss-band-breaking  { border-left-color: rgba(200, 70, 70, 0.85); background: rgba(200, 70, 70, 0.10); }
.story-stress-status.sss-band-broken    { border-left-color: rgba(160, 50, 50, 0.95); background: rgba(160, 50, 50, 0.13); }
.sss-net, .sss-band { display: flex; align-items: baseline; gap: 6px; }
.sss-net-label, .sss-band-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cream-dim);
}
.sss-net-val {
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-light);
}
.sss-net-raw { font-size: 0.74rem; color: var(--cream-dim); font-style: italic; }
.sss-band-val {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--gold);
}
.sss-mods { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.sss-acc-chip, .sss-fail-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 10px;
  letter-spacing: 0.4px;
  cursor: help;
}
.sss-acc-chip {
  background: rgba(216, 128, 128, 0.18);
  color: #e79090;
  border: 1px solid rgba(231, 144, 144, 0.4);
}
.sss-fail-chip {
  background: rgba(212, 168, 83, 0.16);
  color: var(--gold-light);
  border: 1px solid rgba(212, 168, 83, 0.4);
}

/* Compact band ladder — one short pill per band. */
.story-stress-bands {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.ssb-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 6px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-size: 0.74rem;
  color: var(--cream-dim);
  cursor: help;
}
.ssb-pill .ssb-state { font-family: var(--font-title); color: var(--cream); font-size: 0.78rem; }
.ssb-pill .ssb-range { font-family: 'Courier New', monospace; font-size: 0.7rem; }
.ssb-pill.ssb-current {
  background: rgba(212, 168, 83, 0.16);
  border-color: var(--gold-dim);
  color: var(--gold-light);
  box-shadow: 0 0 0 1px var(--gold-dim);
}
.ssb-pill.ssb-current .ssb-state { color: var(--gold-light); }
.ssb-pill.ssb-current .ssb-range { color: var(--cream); }

/* Beacon strip — compact 6-col row. */
.story-stress-grid {
  display: grid;
  /* Responsive: as many beacon cells as fit, then wrap. repeat(6,1fr) forced
     6 fixed tracks that couldn't shrink below content → overflowed the narrow
     Story card. (Rome 2026-06-17) */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}
.story-stress-cell { min-width: 0; }
.story-stress-cell {
  padding: 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-left-width: 4px;
  border-radius: 4px;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.story-stress-cell.beacon-color-red    { border-left-color: rgba(200, 70, 70, 0.7); }
.story-stress-cell.beacon-color-orange { border-left-color: rgba(220, 140, 60, 0.7); }
.story-stress-cell.beacon-color-yellow { border-left-color: rgba(220, 200, 80, 0.7); }
.story-stress-cell.beacon-color-green  { border-left-color: rgba(90, 170, 90, 0.7); }
.story-stress-cell.beacon-color-blue   { border-left-color: rgba(80, 130, 200, 0.7); }
.story-stress-cell.beacon-color-purple { border-left-color: rgba(160, 90, 200, 0.7); }
.story-stress-cell.has-stress { background: linear-gradient(145deg, var(--bg-card) 0%, rgba(216, 128, 128, 0.10) 100%); }
.story-stress-cell .ssc-name { font-family: var(--font-title); color: var(--gold); font-size: 0.84rem; line-height: 1.1; }
.story-stress-cell .ssc-emotion { color: var(--cream-dim); font-size: 0.7rem; font-style: italic; }
.story-stress-cell .ssc-rating { color: var(--cream); font-size: 0.74rem; }
.story-stress-cell .ssc-tier { color: var(--cream-dim); font-size: 0.7rem; }
.story-stress-cell .ssc-stress { font-family: 'Courier New', monospace; font-weight: 600; color: var(--cream-dim); font-size: 0.74rem; }
.story-stress-cell .ssc-stress.has-stress { color: #d88080; }
.ssc-mitigated { font-size: 0.66rem; color: var(--cream-dim); font-style: italic; font-weight: 400; }

/* Mitigation panel — only renders when there's something to show. */
.story-stress-mitigation {
  background: rgba(212, 168, 83, 0.04);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 0.8rem;
}
.ssm-list { display: flex; flex-direction: column; gap: 2px; }
.ssm-row { display: flex; justify-content: space-between; gap: 10px; }
.ssm-source { color: var(--cream); }
.ssm-amount { font-family: 'Courier New', monospace; font-weight: 600; color: #a8e0b8; }
.ssm-row.ssm-offpath .ssm-source { color: var(--cream-dim); text-decoration: line-through; text-decoration-color: rgba(216, 128, 128, 0.6); }
.ssm-amount-strike { text-decoration: line-through; color: var(--cream-dim); }
.ssm-offpath-tag {
  margin-left: 6px;
  padding: 0 5px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(216, 128, 128, 0.18);
  color: #e79090;
  border: 1px solid rgba(231, 144, 144, 0.4);
  border-radius: 8px;
  text-decoration: none;
}

/* Collapsible Failings — tucked away by default, opens when relevant. */
details.story-stress-failings {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 10px;
}
details.story-stress-failings[open] { padding-bottom: 10px; }
details.story-stress-failings .ssf-summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.84rem;
  list-style: none;
}
details.story-stress-failings .ssf-summary::-webkit-details-marker { display: none; }
details.story-stress-failings .ssf-summary::before {
  content: '▸';
  color: var(--cream-dim);
  font-size: 0.7rem;
}
details.story-stress-failings[open] .ssf-summary::before { content: '▾'; }
.ssf-summary-label { font-family: var(--font-title); color: var(--gold); }
.ssf-count strong { color: var(--gold-light); font-family: 'Courier New', monospace; }
.ssf-explainer { font-size: 0.76rem; color: var(--cream-dim); font-style: italic; padding: 4px 0 6px; }
.ssf-list { display: flex; flex-direction: column; gap: 6px; }
.ssf-card {
  padding: 6px 8px;
  background: var(--bg-darkest);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ssf-card.ssf-dormant { opacity: 0.55; border-left-color: var(--bg-mid); }
.ssf-label-input {
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 0.84rem;
}
.ssf-notes {
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 0.78rem;
  font-family: inherit;
  resize: vertical;
}
.ssf-ctrls { display: flex; gap: 8px; align-items: center; font-size: 0.76rem; color: var(--cream-dim); }
.ssf-toggle {
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.76rem;
  cursor: pointer;
}
.ssf-toggle.is-active { color: var(--gold-light); border-color: var(--gold-dim); }
.ssf-toggle.is-dormant { color: var(--cream-dim); }
.ssf-remove {
  margin-left: auto;
  background: transparent;
  color: var(--cream-dim);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.74rem;
  cursor: pointer;
}
.ssf-remove:hover { color: #e79090; border-color: rgba(231, 144, 144, 0.4); }
.ssf-empty { font-size: 0.78rem; color: var(--cream-dim); padding: 4px 0; }
.ssf-add-btn {
  margin-top: 8px;
  background: var(--bg-card);
  color: var(--gold-light);
  border: 1px solid var(--gold-dim);
  border-radius: 14px;
  padding: 3px 14px;
  font-size: 0.78rem;
  cursor: pointer;
}
.ssf-add-btn:hover { background: rgba(212, 168, 83, 0.16); }
.ssf-mismatch {
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(216, 128, 128, 0.10);
  border-left: 2px solid rgba(216, 128, 128, 0.5);
  border-radius: 2px;
  font-size: 0.76rem;
  color: var(--cream);
}

/* Phase 10c (Rome 2026-05-05): Cast Spell widget on Spells placeholder.
   Resolves OQ-Spell-Cast-Spend-Floor-2026-05-05. */
.magic-cast-card { margin-bottom: 12px; }
.magic-cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.magic-cast-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.magic-cast-label {
  color: var(--cream-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.magic-cast-select, .magic-cast-input {
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.86rem;
}
.magic-cast-input { font-family: 'Courier New', monospace; }
.magic-cast-mod-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.magic-cast-mod-btn {
  background: var(--bg-card);
  color: var(--cream-dim);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  flex: 1;
  min-width: 50px;
}
.magic-cast-mod-btn:hover { color: var(--gold); border-color: var(--gold-dim); }
.magic-cast-mod-btn.active {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border-color: var(--gold);
}
.magic-cast-total-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(212, 168, 83, 0.06);
  border-radius: 3px;
  font-size: 0.86rem;
  color: var(--cream);
}
.magic-cast-total strong { font-family: 'Courier New', monospace; color: var(--gold-light); }
.magic-cast-warn { color: #d88080; font-weight: 600; margin-left: 6px; }
.magic-cast-btn {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 6px 16px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.86rem;
  cursor: pointer;
}
.magic-cast-btn:hover { background: var(--gold); }

/* Downtime Recovery sub-block on Magic Flare card */
.magic-downtime-recovery {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(120, 90, 50, 0.06);
  border-left: 3px solid var(--gold-dim);
  border-radius: 3px;
}
.magic-downtime-recovery .mdr-head {
  font-size: 0.88rem;
  color: var(--cream);
  margin-bottom: 8px;
}
.magic-downtime-recovery .mdr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.magic-downtime-recovery .mdr-select {
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.82rem;
}
.magic-downtime-recovery .mdr-effect {
  font-size: 0.78rem;
  color: var(--cream-dim);
  font-style: italic;
}
.magic-downtime-recovery .mdr-btn {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 4px 12px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.82rem;
  cursor: pointer;
}
.magic-downtime-recovery .mdr-btn:hover { background: var(--gold); }


/* Phase 10d (Rome 2026-05-05): Modalities tracker. Lists modalities
   from owned Mastery Disciplines + manual entries for Hedge mages.
   Mechanical bonuses tied to modalities live on Training tab. */
.magic-modalities-card .magic-modalities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.magic-modality-block {
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
}
.magic-modality-head {
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bg-mid);
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 0.92rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.magic-modality-head .hint {
  color: var(--cream-dim);
  font-size: 0.74rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
  margin-left: 4px;
}
.magic-modality-empty {
  color: var(--cream-dim);
  font-size: 0.78rem;
  font-style: italic;
}
.magic-modality-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.84rem;
}
.magic-modality-row:last-child { border-bottom: none; }
.magic-modality-row.modality-active {
  background: rgba(212, 168, 83, 0.06);
  border-left: 2px solid var(--gold-dim);
  padding-left: 4px;
}
.magic-modality-checkbox {
  cursor: pointer;
  accent-color: var(--gold-dim);
}
.magic-modality-label-wrap { flex: 1; }
.magic-modality-name { color: var(--cream); }
.magic-modality-source {
  color: var(--cream-dim);
  font-size: 0.74rem;
  font-style: italic;
}
.magic-modality-remove {
  background: transparent;
  border: 1px solid var(--bg-mid);
  color: var(--cream-dim);
  border-radius: 3px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1;
}
.magic-modality-remove:hover { color: #e09080; border-color: #c05049; }
.magic-modality-add-row {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(120, 90, 50, 0.06);
  border: 1px dashed var(--bg-mid);
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.magic-modality-add-label {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.82rem;
  letter-spacing: 0.5px;
}
.magic-modality-type-select {
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.82rem;
}
.magic-modality-name-input {
  flex: 1;
  min-width: 200px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.82rem;
}
.magic-modality-add-btn {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 4px 14px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.82rem;
  cursor: pointer;
}
.magic-modality-add-btn:hover { background: var(--gold); }
.magic-modality-add-note {
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--cream-dim);
  font-style: italic;
}

  /* Phase 10e (Rome 2026-05-05): Hedge Mage Modalities card. */
.magic-hedge-card .magic-hedge-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.magic-hedge-slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  flex-wrap: wrap;
}
.magic-hedge-slot-label {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  min-width: 50px;
}
.magic-hedge-type-select {
  background: var(--bg-darkest);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.84rem;
  min-width: 120px;
}
.magic-hedge-name-input {
  flex: 1;
  min-width: 200px;
  background: var(--bg-darkest);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.84rem;
}
.magic-hedge-clear {
  background: transparent;
  border: 1px solid var(--bg-mid);
  color: var(--cream-dim);
  border-radius: 3px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1;
}
.magic-hedge-clear:hover { color: #e09080; border-color: #c05049; }
.magic-hedge-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(120, 90, 50, 0.06);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
}
.magic-hedge-note-label {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.magic-hedge-note-area {
  width: 100%;
  background: var(--bg-darkest);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 0.86rem;
  font-family: var(--font-body);
  resize: vertical;
}

/* Phase 10e fix (Rome 2026-05-05): force dark bg + cream text on <option>
   elements in the Hedge Mage card and other Magic-tab selects, since
   browsers default <option> to OS-native styling (white bg + grey text). */
.magic-hedge-type-select option,
.magic-modality-type-select option,
.magic-cast-select option,
.mdr-select option,
.gods-deity-select option,
.gods-free-pick-select option,
.gods-ability-select option {
  background: var(--bg-darkest);
  color: var(--cream);
}

/* Phase 10f (Rome 2026-05-05): Unified Spell Tool — picker + known list +
   6 cast circles. Replaces old separate Spells/Cast Spell cards. */
.magic-spell-tool-card .spell-tool-layout {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  align-items: flex-start;
}
.spell-tool-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.spell-tool-cast {
  flex: 0 0 auto;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(212, 168, 83, 0.04);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
}
.spell-cast-title {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 0.92rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0;
}
.cast-circles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  justify-items: center;
}
.cast-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid;
  background: var(--bg-card);
  color: var(--cream);
  font-family: var(--font-title);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  padding: 0;
}
.cast-circle:disabled { opacity: 0.35; cursor: not-allowed; }
.cast-circle .cc-amount { font-size: 1.4rem; font-weight: 600; line-height: 1; }
.cast-circle .cc-label { font-size: 0.66rem; letter-spacing: 0.4px; margin-top: 2px; opacity: 0.85; }
.cast-circle-red    { border-color: rgba(200,  70,  70, 0.75); }
.cast-circle-orange { border-color: rgba(220, 140,  60, 0.75); }
.cast-circle-yellow { border-color: rgba(220, 200,  80, 0.75); }
.cast-circle-green  { border-color: rgba( 90, 170,  90, 0.75); }
.cast-circle-blue   { border-color: rgba( 80, 130, 200, 0.75); }
.cast-circle-purple { border-color: rgba(160,  90, 200, 0.75); }
.cast-circle-castable { box-shadow: 0 0 6px var(--gold-dim); }
.cast-circle-castable:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 0 12px var(--gold);
}
.cast-circle-surging {
  background: linear-gradient(145deg, var(--bg-card) 0%, rgba(220, 140, 60, 0.18) 100%);
}
.spell-cast-status {
  font-size: 0.78rem;
  color: var(--cream-dim);
  font-style: italic;
  text-align: center;
  line-height: 1.3;
}

/* Picker */
.spell-picker {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
}
.sp-class, .sp-school, .sp-spell {
  background: var(--bg-darkest);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.84rem;
}
.sp-class option, .sp-school option, .sp-spell option {
  background: var(--bg-darkest);
  color: var(--cream);
}
.sp-spell { flex: 1; min-width: 200px; }
.spell-add-btn {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 4px 14px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.82rem;
  cursor: pointer;
}
.spell-add-btn:hover { background: var(--gold); }

/* Known list */
.spell-known-wrap {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
  padding: 10px 12px;
}
.spell-known-empty { color: var(--cream-dim); font-style: italic; padding: 8px 0; }
.spell-known-head { margin-bottom: 8px; color: var(--cream); font-size: 0.86rem; }
.spell-known-list { display: flex; flex-direction: column; }
.spell-known-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.84rem;
}
.spell-known-row:last-child { border-bottom: none; }
.spell-known-row.armed {
  background: rgba(212, 168, 83, 0.08);
  border-left: 2px solid var(--gold-dim);
  padding-left: 4px;
}
.spell-known-radio { cursor: pointer; accent-color: var(--gold-dim); }
.spell-known-meta { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.spell-known-name { color: var(--cream); }
.spell-known-stats {
  color: var(--cream-dim);
  font-size: 0.74rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.2px;
}
.spell-known-remove {
  background: transparent;
  border: 1px solid var(--bg-mid);
  color: var(--cream-dim);
  border-radius: 3px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1;
}
.spell-known-remove:hover { color: #e09080; border-color: #c05049; }
.spell-armed-detail {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(212, 168, 83, 0.10);
  border-left: 3px solid var(--gold-dim);
  border-radius: 3px;
  color: var(--cream);
  font-size: 0.86rem;
}
.spell-armed-detail .armed-total {
  color: var(--gold-light);
  font-family: 'Courier New', monospace;
}
.spell-armed-effect {
  margin-top: 6px;
  font-size: 0.80rem;
  color: var(--cream-dim);
  font-style: italic;
}

/* Cast log */
.spell-cast-log {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(120, 90, 50, 0.05);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-size: 0.78rem;
  color: var(--cream-dim);
}
.cast-log-item { color: var(--cream); margin-right: 4px; }

/* Responsive: stack on narrow screens */
@media (max-width: 720px) {
  .magic-spell-tool-card .spell-tool-layout { flex-direction: column; }
  .spell-tool-cast { width: 100%; }
  .cast-circles { grid-template-columns: repeat(3, 1fr); }
}

/* Phase 10h (Rome 2026-05-05): Spend CP "Learn Spell" widget. */
.spendcp-section-spells .spendcp-spells-banner {
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: rgba(212, 168, 83, 0.06);
  border-left: 3px solid var(--gold-dim);
  border-radius: 3px;
  color: var(--cream);
  font-size: 0.86rem;
}
.spendcp-section-spells .spendcp-empty {
  padding: 12px;
  background: rgba(160, 60, 60, 0.08);
  border: 1px dashed rgba(160, 60, 60, 0.4);
  border-radius: 3px;
  color: var(--cream-dim);
  font-size: 0.86rem;
}
.spendcp-spells-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.spendcp-spells-row-head {
  width: 100%;
  color: var(--gold-dim);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
}
.spendcp-spells-label {
  color: var(--cream-dim);
  font-size: 0.82rem;
}


.spendcp-spells-select {
  background: var(--bg-darkest);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.84rem;
}
.spendcp-spells-select option {
  background: var(--bg-darkest);
  color: var(--cream);
}
.spendcp-spells-select:disabled { opacity: 0.5; }
.spendcp-spells-spell-select { flex: 1; min-width: 240px; }
.spendcp-spells-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
}
.spendcp-spells-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  cursor: pointer;
  color: var(--cream);
}

.spendcp-spells-toggle .spendcp-spells-auto {
  color: var(--gold-dim);
  font-size: 0.74rem;
  font-style: italic;
}
.spendcp-spells-extra-input {
  width: 50px;
  background: var(--bg-darkest);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: 'Courier New', monospace;
}
.spendcp-spells-cost {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(212, 168, 83, 0.05);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
}
.spendcp-spells-cost-row {
  font-size: 0.88rem;
  color: var(--cream);
  margin: 4px 0;
}
.spendcp-spells-cost-label {
  color: var(--cream-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 4px;
}
.spendcp-spells-cost-row strong {
  font-family: 'Courier New', monospace;
  color: var(--gold-light);
}
.spendcp-spells-check {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(80, 100, 160, 0.06);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.spendcp-spells-pool {
  background: rgba(120, 160, 200, 0.18);
  border: 1px solid rgba(120, 160, 200, 0.4);
  color: #b8d0e8;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.82rem;
  font-family: 'Courier New', monospace;
}
.spendcp-spells-roll {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 4px 12px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.82rem;
  cursor: pointer;
}
.spendcp-spells-roll:hover:not(:disabled) { background: var(--gold); }
.spendcp-spells-roll:disabled { opacity: 0.4; cursor: not-allowed; }
.spendcp-spells-manual { font-size: 0.82rem; color: var(--cream-dim); }
.spendcp-spells-manual-input {
  width: 60px;
  background: var(--bg-darkest);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: 'Courier New', monospace;
}
.spendcp-spells-rollresult {
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--bg-card);
  border-radius: 3px;
  font-size: 0.84rem;
  color: var(--cream);
}
.spendcp-spells-success { color: #a0e0a8; font-weight: 600; }
.spendcp-spells-fail { color: #d88080; font-weight: 600; }
.spendcp-spells-add-row {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spendcp-spells-add-btn {
  align-self: flex-start;
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 6px 16px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.88rem;
  cursor: pointer;
}
.spendcp-spells-add-btn:hover:not(:disabled) { background: var(--gold); }
.spendcp-spells-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.spendcp-spells-add-note {
  font-size: 0.78rem;
  color: var(--cream-dim);
  font-style: italic;
}

/* Phase 10h-3 (Rome 2026-05-05): Spend CP section title styling — match
   the gold/uppercase look of .section-header (used by the Learn Spell card)
   so all six Spend CP sections look identical. Also brighten chevron + title
   on hover/open. */







/* ─── Toggles Tab (Rome 2026-05-10) ──────────────────────────────────
   Consolidated tab listing every togglable modifier. Cards group by
   family then by source. The summary bar at top shows active/total. */
.toggles-summary-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--gold-dim, rgba(212,175,55,0.4));
  border-radius: 6px;
  margin-bottom: 18px;
}
.toggles-stat { color: var(--cream, #e8d8b0); font-size: 0.95rem; }
.toggles-stat strong { color: var(--gold-light, #e8c878); font-size: 1.15rem; font-weight: 700; }
.toggles-stat-sep { color: var(--gold-dim, rgba(212,175,55,0.4)); }
.toggles-deactivate-all {
  margin-left: auto;
  background: rgba(180, 60, 60, 0.18);
  border: 1px solid rgba(220, 120, 120, 0.55);
  color: #f4c8c8;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.toggles-deactivate-all:hover { background: rgba(220, 80, 80, 0.30); color: #ffeaea; }

.toggles-family {
  margin-bottom: 22px;
}
.toggles-family-header {
  font-size: 1.05rem;
  color: var(--gold, #d4a853);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold-dim, rgba(212,175,55,0.4));
}
.toggles-family-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Collapsible family <details> — Rome 2026-05-11. Default open; the
   user collapses a family via the summary, and the state persists
   per-character (Sheet._togglesExpanded). The summary keeps the same
   visual weight as the prior <h3> header but adds a rotating ▸
   disclosure arrow and a right-aligned "N active · M available" meta
   pill so the count is visible even when the family is collapsed. */
details.toggles-family > summary.toggles-family-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gold-dim, rgba(212,175,55,0.4));
}
details.toggles-family > summary.toggles-family-summary::-webkit-details-marker { display: none; }
details.toggles-family > summary.toggles-family-summary::before {
  content: '▸';
  display: inline-block;
  color: var(--gold-dim, rgba(212,175,55,0.55));
  transition: transform 0.15s ease, color 0.15s ease;
}
details.toggles-family[open] > summary.toggles-family-summary::before {
  transform: rotate(90deg);
  color: var(--gold, #d4a853);
}
details.toggles-family > summary.toggles-family-summary:hover .toggles-family-header { color: var(--gold-light, #e8c878); }
details.toggles-family[open] > summary.toggles-family-summary .toggles-family-header { color: var(--gold-light, #e8c878); }
/* The .toggles-family-header is now a <span> inside <summary> instead
   of a block <h3>. Strip the legacy block-level border/margin/padding
   so the summary's own border-bottom isn't duplicated underneath the
   text. The font/color rules higher up still apply. */
details.toggles-family > summary.toggles-family-summary .toggles-family-header {
  border-bottom: none;
  margin: 0;
  padding-bottom: 0;
}
.toggles-family-meta {
  margin-left: auto;
  color: var(--cream-dim, #b0a898);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.4px;
}
.toggles-source-card {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 4px;
  padding: 10px 12px;
}
.toggles-source-name {
  color: var(--gold-light, #e8c878);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.toggles-source-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.toggles-row {
  display: flex;
  align-items: flex-start;     /* anchor checkbox/name to top so wrapped pill text stays right-aligned beside them */
  gap: 10px;
  padding: 6px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.toggles-row:hover { background: rgba(212, 175, 55, 0.08); }
.toggles-row.on {
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(212, 175, 55, 0.40);
}
.toggles-row-name {
  flex: 1 1 auto;
  min-width: 0;                /* allow shrink so long names wrap too */
  font-size: 0.92rem;
  color: var(--cream, #e8d8b0);
  word-break: break-word;
  padding-top: 1px;            /* nudge to align with checkbox baseline */
}
.toggles-row.on .toggles-row-name { color: var(--gold-light, #e8c878); }
.toggles-row input[type="checkbox"] { flex: 0 0 auto; cursor: pointer; margin-top: 4px; }
.toggles-row-select {
  flex: 0 0 auto;
  min-width: 140px;
  background: rgba(0, 0, 0, 0.40);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--cream, #e8d8b0);
  padding: 3px 6px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.85rem;
}
/* Effect pill — stays right-aligned, allowed to wrap when text is long.
   Cap at ~60% of the row so the name + control retain breathing room. */
.toggles-row-pill {
  flex: 0 1 auto;
  max-width: 60%;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: rgba(212, 175, 55, 0.65);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.78rem;
  font-family: 'Courier New', monospace;
  line-height: 1.35;
  text-align: right;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;     /* break inside long unbroken tokens too */
}
.toggles-row-pill.on {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.55);
  color: var(--gold-light, #e8c878);
}

/* ===== end consolidated inline block ===== */

/* SAGE Legend character sheet styles
 * Extracted 2026-04-28 to slim sage_character_sheet.html.
 * Edit this file directly. Loaded via <link rel="stylesheet">
 * from sage_character_sheet.html.
 */


/* ═══════════════════════════════════════════════════════════════
   SAGE Legend — Character Sheet (v1, read-only, tabbed)
   Loads .sage files exported by sage_character_generator.html
   Tab layout mirrors the 10.7 builder's CS-* record tabs.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;            /* dark-themed native form controls */
  --bg-darkest: #0f0f1a;
  --bg-dark: #1a1a2e;
  --bg-mid: #232340;
  --bg-card: #2a2a48;
  --bg-card-hover: #33335a;
  --gold: #d4a853;
  --gold-light: #e8c878;
  --gold-dim: #a07830;
  --cream: #e8e0d0;
  --cream-dim: #b0a898;
  --cream-dark: #888070;
  --red: #c44040;
  --green: #40a858;
  --blue: #4888dd;
  --error: #e04848;
  --success: #48c868;
  --font-title: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-body: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --transition: 0.25s ease;
  --radius: 6px;
  --radius-lg: 10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }

body {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(212,168,83,0.06) 0%, transparent 55%),
    var(--bg-darkest);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-darkest); }
::-webkit-scrollbar-thumb { background: var(--bg-mid); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

/* Force dark-themed native form controls and dropdown options across
   the sheet (ammo slot picker, weapon load-out picker, container move-to,
   etc.). Per Rome 2026-05-25. */
select { color-scheme: dark; }
select option {
  background: var(--bg-dark);
  color: var(--cream);
}

code { font-family: ui-monospace, Menlo, Consolas, monospace; background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 3px; font-size: 0.85em; color: var(--gold-light); }

/* ─── TOP BAR ────────────────────────────────────────── */

.topbar {
  background: var(--bg-dark);
  border-bottom: 1px solid var(--bg-mid);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar .nav-left, .topbar .nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── Steward's Office nav cart icon + badge (GEAR-01 follow-up, Rome 2026-07-20) ── */
.steward-cart-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 32px; padding: 0; flex: 0 0 auto;
  /* sits right after Notes with the normal tab gap (Rome 2026-07-20) */
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--gold-dim, #c9a978); cursor: pointer;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
.steward-cart-btn:hover { color: var(--gold-light, #e8c878); background: rgba(212,168,83,0.12); transform: translateY(-1px); }
.steward-cart-btn.has-items { color: var(--gold-light, #e8c878); }
.steward-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; box-sizing: border-box;
  background: var(--danger, #c2603f); color: #fff;
  font: 700 0.66rem/16px 'Segoe UI', sans-serif; text-align: center;
  border: 1px solid rgba(0,0,0,0.35);
}

/* ── Steward's Office overlay ── */
.stewards-office {
  position: fixed; inset: 0; z-index: 2147482700;
  display: none; align-items: flex-start; justify-content: center;
  background: rgba(10, 8, 14, 0.62);
  padding: 4vh 16px;
}
.stewards-office.open { display: flex; }
.stewards-office .so-panel {
  width: min(920px, 100%); max-height: 92vh; overflow-y: auto;
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-mid) 100%);
  border: 1px solid var(--gold-dim, #c9a978); border-radius: 10px;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,0.7);
}
.stewards-office .so-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid rgba(212,168,83,0.25);
  background: linear-gradient(160deg, var(--bg-card), var(--bg-mid));
}
.stewards-office .so-title {
  margin: 0; font-family: var(--font-title); color: var(--gold-light, #e8c878);
  font-size: 1.25rem; letter-spacing: 0.5px;
}
.stewards-office .so-close {
  background: transparent; border: none; color: var(--cream-dim, #b8ad98);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 6px;
}
.stewards-office .so-close:hover { color: var(--cream, #e8e0d0); }
.stewards-office .so-body { padding: 16px 20px 24px; }
.stewards-office .so-section { margin-bottom: 20px; }
.stewards-office .so-section-head {
  margin: 0 0 8px; font-family: var(--font-title); color: var(--gold-dim, #c9a978);
  font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase;
  border-bottom: 1px dashed rgba(160,120,48,0.3); padding-bottom: 4px;
}
.stewards-office .so-empty { color: var(--cream-dim, #b8ad98); font-style: italic; font-size: 0.85rem; padding: 8px 2px; }
.stewards-office .so-wallet { margin-bottom: 10px; }
.so-ledger > summary {
  cursor: pointer; color: var(--gold-dim, #c9a978); font-family: var(--font-title);
  font-size: 0.82rem; letter-spacing: 0.4px;
}
.so-ledger-count {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px;
  background: rgba(212,168,83,0.14); color: var(--gold-dim, #c9a978); font-size: 0.72rem;
}
.so-ledger-list { margin-top: 8px; max-height: 260px; overflow-y: auto; border: 1px solid var(--bg-mid); border-radius: 5px; }
.so-ledger-row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: baseline;
  padding: 5px 10px; border-bottom: 1px solid var(--bg-mid); font-size: 0.82rem;
}
.so-ledger-row:last-child { border-bottom: none; }
.so-ledger-type { color: var(--gold-dim, #c9a978); text-transform: capitalize; font-size: 0.74rem; }
.so-ledger-label { color: var(--cream, #e8e0d0); }
.so-ledger-when { color: var(--cream-dark, #8a8070); font-size: 0.72rem; white-space: nowrap; }
@media (max-width: 560px) {
  .so-ledger-row { grid-template-columns: 1fr; gap: 2px; }
  .so-ledger-when { white-space: normal; }
}

.topbar .brand {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.topbar .link-btn {
  color: var(--cream-dim);
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: var(--radius);
  transition: all var(--transition);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.topbar .link-btn:hover {
  color: var(--gold);
  background: rgba(212,168,83,0.08);
  border-color: var(--gold-dim);
}

.topbar .link-btn.primary {
  color: var(--gold-light);
  background: rgba(212,168,83,0.14);
  border-color: var(--gold-dim);
  font-weight: 600;
}

.topbar .link-btn.primary:hover {
  background: rgba(212,168,83,0.28);
  color: var(--cream);
}

.topbar .link-btn.save-feedback {
  color: #a8e0b8;
  background: rgba(100, 180, 120, 0.22);
  border-color: rgba(100, 180, 120, 0.5);
}

/* ─── PAGE CONTAINER ─────────────────────────────────── */

#page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* ─── UPLOAD VIEW (shown when no character loaded) ───── */

#upload-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 0;
}

#upload-view h1 {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 2.4rem;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  text-align: center;
}

#upload-view .tagline {
  color: var(--cream-dim);
  font-style: italic;
  margin-bottom: 36px;
  text-align: center;
  max-width: 560px;
}

.dropzone {
  width: 100%;
  max-width: 640px;
  padding: 56px 32px;
  border: 2px dashed var(--gold-dim);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-mid) 100%);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.dropzone:hover, .dropzone.drag-over {
  border-color: var(--gold);
  background: linear-gradient(145deg, var(--bg-card-hover) 0%, var(--bg-card) 100%);
  box-shadow: 0 0 0 4px rgba(212,168,83,0.08);
}

.dropzone .icon {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 3rem;
  margin-bottom: 16px;
}

.dropzone .title {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.3rem;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.dropzone .hint {
  color: var(--cream-dim);
  font-size: 0.92rem;
}

.dropzone .hint strong { color: var(--gold); font-weight: 600; }

.dropzone input[type="file"] { display: none; }

.dropzone .error {
  margin-top: 20px;
  color: var(--error);
  font-size: 0.9rem;
  background: rgba(224,72,72,0.1);
  border: 1px solid var(--error);
  padding: 10px 16px;
  border-radius: var(--radius);
  text-align: left;
}

/* ─── CHARACTER VIEW ─────────────────────────────────── */

#character-view { display: none; }
#character-view.active { display: block; }

.loaded-banner {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-mid) 100%);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  margin-bottom: 16px;
  display: flex;
  /* Top-align children (Rome 2026-05-16). Previously `center` caused the
     gold name to bob up and down whenever a banner-stat grew a `.sub` line
     (e.g., the Status pill's "1 slot bare" hint) — re-centering shifted
     every flex sibling. With flex-start, name + subtitle stay anchored at
     the top edge regardless of meta-block height. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.loaded-banner .name-block h1 {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1.9rem;
  letter-spacing: 1px;
  margin-bottom: 4px;
  display: inline-block;
  vertical-align: middle;
}

/* Phase Rename (Rome 2026-05-16) — pencil-click rename button next to
   the character name in the banner. Inline next to the H1; muted by
   default so it doesn't compete with the name, but readable on hover. */
.banner-rename-btn {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  background: transparent;
  border: 1px solid rgba(232, 200, 120, 0.30);
  border-radius: 4px;
  color: rgba(232, 200, 120, 0.55);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.2;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.banner-rename-btn:hover {
  background: rgba(232, 200, 120, 0.12);
  color: var(--gold);
  border-color: rgba(232, 200, 120, 0.6);
}
.banner-rename-btn:focus { outline: 2px solid rgba(232, 200, 120, 0.4); outline-offset: 1px; }

.loaded-banner .name-block .subtitle {
  color: var(--cream-dim);
  font-size: 0.95rem;
  font-style: italic;
}

.loaded-banner .meta-block {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

/* Banner Defenses block — Rome 2026-04-26 — moved here from the
   quick-stats row to save vertical space. Same .qs-cell.def styling
   as the bar; the wrapper just spaces them visually with a small label
   above. */
/* STATS-01 (Rome 2026-07-20): the Defenses plaque — a framed, engraved panel
   that claims the banner's freed real estate. Ornament lives in the chrome
   (header rules, gold inset frame); the cells themselves stay clean and
   high-contrast so the numbers read at a glance. */
.loaded-banner .banner-defenses {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  padding: 12px 30px 12px;
  border: 1px solid var(--gold-dim);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(212, 168, 83, 0.06), rgba(0, 0, 0, 0)), var(--bg-darkest);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 83, 0.12), inset 0 1px 12px rgba(0, 0, 0, 0.45);
  position: relative;
}
/* Gold filigree corner flourishes (Rome 2026-07-20). Inline SVG data-URI so
   the sheet stays single-file; low opacity + pointer-events:none so the
   ornament frames the plaque without touching legibility. Top-right mirrors
   the top-left via scaleX(-1); the bottom pair flips vertically. */
.loaded-banner .banner-defenses::before,
.loaded-banner .banner-defenses::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 96px;
  height: 46px;
  background: no-repeat left top / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='46' viewBox='0 0 96 46'%3E%3Cg fill='none' stroke='%23c9a978' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M4 42 C 28 42 32 18 19 12 C 10 8 4 15 9 21 C 12 24 18 22 16 16'/%3E%3Cpath d='M19 12 C 42 3 70 5 94 2'/%3E%3Cpath d='M33 9 C 36 3 43 2 48 6'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.6' fill='%23c9a978'/%3E%3Ccircle cx='94' cy='2' r='1.5' fill='%23c9a978'/%3E%3C/svg%3E");
  opacity: 0.55;
  pointer-events: none;
}
.loaded-banner .banner-defenses::before { left: 6px; }
.loaded-banner .banner-defenses::after { right: 6px; transform: scaleX(-1); }
/* Engraved "DEFENSES" header: centred, flanked by fading gold rules that
   fill the width (the "golden scroll" read, without art behind the digits). */
.loaded-banner .banner-defenses .qs-group-label {
  font-family: var(--font-title);
  color: var(--gold-light, #e8c878);
  font-size: 0.74rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  justify-content: center;
}
.loaded-banner .banner-defenses .qs-group-label::before,
.loaded-banner .banner-defenses .qs-group-label::after {
  content: "\25C6"; /* ◆ diamond terminal on a fading rule */
  flex: 1 1 auto;
  max-width: 240px;
  height: 1px;
  color: var(--gold-dim);
  font-size: 0.5rem;
  line-height: 1;
  text-align: right;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.loaded-banner .banner-defenses .qs-group-label::after {
  text-align: left;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
}
.loaded-banner .banner-defenses-cells {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: stretch;
  /* Claim the plaque's horizontal real estate: the 5 standing defenses share
     the row (AVO + adjust bar sit beside them) — flex:5 so each cell is as
     wide as the widest was. (Rome 2026-07-20) */
  flex: 5 1 auto;
}
.loaded-banner .banner-defenses-cells .qs-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 16px 8px;
  flex: 1 1 0;
  min-width: 110px;
  border: 1px solid var(--bg-mid);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--bg-mid), var(--bg-darkest));
  box-shadow: inset 0 3px 0 var(--acc, var(--gold-dim));
  position: relative;
}
.loaded-banner .banner-defenses-cells .qs-code {
  font-family: var(--font-title);
  color: var(--acc, var(--gold-dim));
  font-size: 0.72rem;
  letter-spacing: 1px;
  font-weight: 600;
}
.loaded-banner .banner-defenses-cells .qs-val {
  font-family: var(--font-title);
  color: var(--cream);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  position: relative;
}
/* Fixed per-defense accent hues — stable colours build muscle memory
   ("the violet one is Spirit"); green/red on the value still signals
   buffed/debuffed. (Rome 2026-07-20) */
.def-AWA { --acc: #5bc8d8; } /* Awareness — cyan   */
.def-BOD { --acc: #d8705f; } /* Body      — crimson */
.def-EVA { --acc: #6fca7a; } /* Evasion   — green   */
.def-GRI { --acc: #e0a94e; } /* Grit      — amber   */
.def-SPI { --acc: #b384dc; } /* Spirit    — violet  */
.def-AVO { --acc: #6f8fd8; } /* Avoidance — steel   */
.loaded-banner .banner-defenses-cells .qs-val .mod-badge {
  position: absolute;
  top: -7px;
  right: -8px;
  font-size: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 0 4px;
  border-radius: 8px;
  border: 1px solid var(--gold-dim);
  background: var(--bg-darkest);
}
.loaded-banner .banner-defenses-cells .qs-val .mod-badge.up { color: #a8e0b8; }
.loaded-banner .banner-defenses-cells .qs-val .mod-badge.down { color: #d88080; }

/* AVO (Avoidance) — sixth defense joined to the Defenses group
   under a single header. The AVO cell uses the same qs-cell visual
   styling as the five standing defenses; the vertical +/- bar to
   its right covers the variable component (Range Increment + cover
   + size). Per Rome 2026-05-11. */
.loaded-banner .banner-defenses-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  width: 100%;
}
.loaded-banner .banner-defenses-row .qs-cell-avo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 16px 8px;
  flex: 1 1 0;
  min-width: 110px;
  border: 1px solid var(--bg-mid);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--bg-mid), var(--bg-darkest));
  box-shadow: inset 0 3px 0 var(--acc, var(--gold-dim));
  position: relative;
}
.loaded-banner .banner-defenses-row .qs-cell-avo .qs-code {
  font-family: var(--font-title);
  color: var(--acc, var(--gold-dim));
  font-size: 0.72rem;
  letter-spacing: 1px;
  font-weight: 600;
}
.loaded-banner .banner-defenses-row .qs-cell-avo .qs-val {
  font-family: var(--font-title);
  color: var(--cream);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
}
.loaded-banner .banner-defenses-row .qs-cell-avo.modified .qs-val {
  color: var(--gold-light, #e8c878);
}
.loaded-banner .avo-adjust-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.loaded-banner .avo-btn {
  width: 22px;
  flex: 1 1 auto;
  min-height: 18px;
  border: 1px solid var(--bg-mid);
  background: var(--bg-darkest);
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  line-height: 1;
}
.loaded-banner .avo-btn:hover {
  background: var(--bg-mid);
  color: var(--gold-light, #e8c878);
}
.loaded-banner .avo-btn:active {
  background: var(--gold-dim);
  color: var(--bg-darkest);
}

.banner-stat {
  text-align: center;
  min-width: 64px;
}

.banner-stat .label {
  color: var(--gold-dim);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin-bottom: 2px;
}

.banner-stat .value {
  color: var(--gold-light);
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}

.banner-stat .sub {
  color: var(--cream-dark);
  font-size: 0.72rem;
  margin-top: 2px;
}

/* ─── QUICK-STATS STRIP ──────────────────────────────
   Always-visible compact row under the banner showing all 5 Defenses +
   4 Pools. Two visually-grouped clusters so the player can scan either
   set without reading labels. */

.quick-stats {
  /* Phase Pools-Squeeze (Rome 2026-05-24): smaller gap + wider wrap.
     The bar carries up to 11 pool cells (AP/RP/Morale/Tactics/Strain/
     Prophecy/Doom/FP/Fate Dice) + Momentum/Guard, which overflowed
     1280px viewports. Tighter gap + min-width: 0 on qs-group lets
     children shrink before clipping the page edge. */
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0 18px 0;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
}

.quick-stats .qs-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  position: relative;
  flex-wrap: wrap;
  min-width: 0;
}

.quick-stats .qs-group + .qs-group {
  border-left: 1px solid var(--bg-mid);
}

.quick-stats .qs-group-label {
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
  color: var(--gold-dim);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding-right: 6px;
  writing-mode: horizontal-tb;
}

.quick-stats .qs-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 8px;
  min-width: 44px;
  border-radius: 4px;
  transition: background var(--transition);
  position: relative; /* anchor for the mod-badge overlay */
}

/* When the quick-stats cell carries a modifier, its badge floats in the
   top-right corner instead of expanding the cell's width. Keeps all
   cells aligned regardless of whether any modifier is active. */
.quick-stats .qs-cell .qs-val .mod-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.58rem;
  padding: 0 5px;
  line-height: 14px;
  min-width: 14px;
  text-align: center;
  pointer-events: none; /* cell tooltip still works */
}

.quick-stats .qs-cell:hover {
  background: rgba(212, 168, 83, 0.08);
}

/* Situational "vs <Type>" defense bonuses (Rome 2026-07-20): small
   sign-colored chips stacked under the Quick-Stats defense value — green for a
   bonus, red for a debuff, full "+N Defense vs Type — Source" on hover. These
   are conditional (only vs a specific attack type) so they never fold into the
   flat defense number. Class-scoped (not under .quick-stats) so the chips also
   style in the compact banner defenses row. */
.qs-def-conds {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 2px;
}
.qs-def-cond {
  font-size: 0.56rem;
  line-height: 1.3;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.2px;
  cursor: default;
}
.qs-def-cond.pos { color: var(--success, #48c868); background: rgba(72, 200, 104, 0.12); }
.qs-def-cond.neg { color: var(--danger, #c2603f); background: rgba(194, 96, 63, 0.14); }

/* ── Character Profile Card (THEME-01, Rome 2026-07-20) ──
   Leads the Theme tab: the character presented as a person. Editable
   narrative blurbs + physical fields + pronoun + visible Qualities. The
   reference sections below it collapse behind <details> expanders. */
.theme-profile-section { padding: 0; background: none; border: none; }
.theme-portrait-section { padding: 0; background: none; border: none; }
.profile-card {
  background: var(--bg-card);
  border: 1px solid rgba(212, 168, 83, 0.35);
  border-radius: var(--radius, 6px);
  padding: 14px 16px;
}

/* ── Character Portrait Card (THEME-01 part 2, Rome 2026-07-20) ──
   Multi-image carousel. Images stored downscaled as data-URLs on
   sheet_state.profile.portraits (rides autosave + .sage). */
.portrait-card {
  background: var(--bg-card);
  border: 1px solid rgba(212, 168, 83, 0.35);
  border-radius: var(--radius, 6px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portrait-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-mid);
  border: 1px solid rgba(212, 168, 83, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-stage.is-drop { outline: 2px dashed var(--gold-light, #e8c878); outline-offset: -6px; }
.portrait-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; color: var(--cream-dim, #b8ad98);
  font-size: 0.85rem; padding: 16px; cursor: pointer; width: 100%; height: 100%;
}
.portrait-empty .pt-plus { font-size: 2rem; line-height: 1; color: var(--gold-dim, #c9a978); }
.portrait-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(20,16,12,0.55); color: var(--cream, #e8e0d0);
  border: 1px solid rgba(212,168,83,0.35); border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.portrait-nav:hover { background: rgba(20,16,12,0.8); }
.portrait-nav.prev { left: 8px; }
.portrait-nav.next { right: 8px; }
.portrait-count {
  position: absolute; bottom: 8px; right: 10px;
  background: rgba(20,16,12,0.6); color: var(--cream-dim, #b8ad98);
  border-radius: 10px; padding: 1px 8px; font-size: 0.72rem;
}
.portrait-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.portrait-thumb {
  width: 40px; height: 52px; border-radius: 3px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--bg-mid); flex: 0 0 auto; position: relative;
}
.portrait-thumb img { width: 100%; height: 100%; object-fit: cover; }
.portrait-thumb.active { border-color: var(--gold-light, #e8c878); }
.portrait-thumb .pt-del {
  position: absolute; top: 0; right: 0; background: rgba(20,16,12,0.7);
  color: var(--danger, #c2603f); border: none; cursor: pointer; font-size: 0.7rem;
  line-height: 1; padding: 1px 3px; border-radius: 0 0 0 4px; display: none;
}
.portrait-thumb:hover .pt-del { display: block; }
.portrait-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.portrait-actions .pt-btn {
  background: rgba(212,168,83,0.14); border: 1px solid rgba(212,168,83,0.3);
  border-radius: 4px; color: var(--cream, #e8e0d0); cursor: pointer;
  font-size: 0.8rem; padding: 4px 10px;
}
.portrait-actions .pt-btn:hover { background: rgba(212,168,83,0.28); }
.portrait-actions .pt-btn.danger { color: var(--danger, #c2603f); }
.profile-card .pc-head { border-bottom: 1px solid var(--bg-mid); padding-bottom: 8px; margin-bottom: 10px; }
.profile-card .pc-name { font-size: 1.5rem; font-weight: 700; color: var(--gold-light, #e8c878); line-height: 1.1; }
.profile-card .pc-sub { font-size: 0.85rem; color: var(--cream-dim, #b8ad98); margin-top: 3px; }
.profile-card .pc-flaw { color: var(--danger, #c2603f); margin-left: 6px; font-style: italic; }

/* Physical field controls — used on the Profile Card AND in the Physical
   Details block within Species & Traits (pronoun/height/weight/age moved
   there, Rome 2026-07-20). */
.profile-card .pc-physical,
.pc-physical-block .pc-physical { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.profile-card .pc-field,
.pc-physical-block .pc-field { display: flex; flex-direction: column; gap: 2px; }
.profile-card .pc-field-label,
.pc-physical-block .pc-field-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gold-dim, #c9a978); }
.profile-card .pc-field-input,
.pc-physical-block .pc-field-input { display: inline-flex; align-items: center; gap: 4px; }
.profile-card .pc-input,
.pc-physical-block .pc-input {
  background: var(--bg-mid); border: 1px solid rgba(212,168,83,0.25); border-radius: 4px;
  color: var(--cream, #e8e0d0); font-size: 0.9rem; padding: 3px 6px; width: 8.5em;
}
.profile-card select.pc-pronoun,
.pc-physical-block select.pc-pronoun { width: auto; }
.profile-card .pc-roll,
.pc-physical-block .pc-roll {
  background: rgba(212,168,83,0.14); border: 1px solid rgba(212,168,83,0.3); border-radius: 4px;
  cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 3px 5px;
}
.profile-card .pc-roll:hover,
.pc-physical-block .pc-roll:hover { background: rgba(212,168,83,0.28); }
.pc-physical-block { margin-top: 4px; }
.pc-physical-block > h3 { margin: 0 0 6px; }

.profile-card .pc-blurb { margin-bottom: 10px; }
.profile-card .pc-blurb-label {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--gold-dim, #c9a978); margin-bottom: 3px; display: flex; align-items: center; gap: 8px;
}
.profile-card .pc-blurb-auto {
  font-size: 0.62rem; text-transform: none; letter-spacing: 0; cursor: pointer;
  background: none; border: 1px solid rgba(212,168,83,0.3); border-radius: 3px;
  color: var(--gold-dim, #c9a978); padding: 0 5px;
}
.profile-card .pc-blurb-auto:hover { color: var(--gold-light, #e8c878); border-color: var(--gold-light, #e8c878); }
.profile-card .pc-blurb-text {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg-mid); border: 1px solid rgba(212,168,83,0.2); border-radius: 4px;
  color: var(--cream, #e8e0d0); font-family: inherit; font-size: 0.92rem; line-height: 1.45; padding: 6px 8px;
}

.profile-card .pc-qualities { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--bg-mid); padding-top: 10px; }
.profile-card .pc-qual-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gold-dim, #c9a978); }
.profile-card .pc-qual-chip {
  font-size: 0.78rem; padding: 1px 8px; border-radius: 10px; cursor: default;
  background: rgba(212,168,83,0.1); border: 1px solid rgba(212,168,83,0.25); color: var(--cream, #e8e0d0);
}

/* Collapsed detail sections beneath the card */
.theme-collapse > summary.section-header { cursor: pointer; list-style: none; user-select: none; }
.theme-collapse > summary.section-header::-webkit-details-marker { display: none; }
.theme-collapse > summary.section-header::before { content: '\25B8'; display: inline-block; margin-right: 6px; color: var(--gold-dim, #c9a978); transition: transform var(--transition, 0.15s); }
.theme-collapse[open] > summary.section-header::before { transform: rotate(90deg); }

.quick-stats .qs-code {
  font-family: var(--font-title);
  font-size: 0.64rem;
  color: var(--gold-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}

.quick-stats .qs-pool-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 5px 6px;
  min-width: 72px;
  /* Each cell has exactly 3 stacked rows (code / start / controls) so
     pool names line up across the bar and ± buttons line up across the
     bar regardless of whether the pool is derived or manual. */
}
.quick-stats .qs-pool-start.qs-pool-start-empty {
  visibility: hidden;
  /* visibility:hidden keeps the element's box, just paints nothing —
     so the 3-row grid stays consistent across cells. */
}
.quick-stats .qs-pool-cell .qs-code {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.7px;
  color: var(--gold-dim);
  font-weight: 600;
}
.quick-stats .qs-pool-start {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--cream-dim);
  background: rgba(212, 168, 83, 0.05);
  border: 1px dashed rgba(212, 168, 83, 0.18);
  border-radius: 4px;
  padding: 2px 6px;
}
.quick-stats .qs-pool-start-lbl {
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--gold-dim);
  font-size: 0.7rem;
}
.quick-stats .qs-pool-start-val {
  color: var(--gold-light);
  font-weight: 600;
  font-family: var(--font-title);
  font-size: 1.0rem;
}
.quick-stats .qs-pool-start-mod {
  font-size: 0.76rem;
  font-family: var(--font-body);
  font-weight: 600;
}
.quick-stats .qs-pool-start-mod.up { color: #a8e0b8; }
.quick-stats .qs-pool-start-mod.down { color: #d88080; }

/* Momentum / Guard binary cells in the pools bar (Phase Pools-Squeeze,
   Rome 2026-05-24). Gold-bordered button when off; green-filled when
   active. Click toggles _modifierToggles[Momentum (Active)] or
   [Guard (Active)] via the inline handler in _renderPools. */
.quick-stats .qs-binary-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 8px;
  min-width: 64px;
  background: var(--bg-dark, #1d1d34);
  color: var(--gold-light, #f5d791);
  border: 1px solid var(--gold-dim, #c9a978);
  border-radius: var(--radius, 6px);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  font-family: var(--font-title, inherit);
}
.quick-stats .qs-binary-cell:hover {
  background: rgba(212, 168, 83, 0.10);
  border-color: var(--gold-light, #f5d791);
}
.quick-stats .qs-binary-cell.qs-binary-on {
  background: rgba(112, 200, 144, 0.18);
  border-color: rgba(160, 220, 168, 0.65);
  color: #a8e0b8;
}
.quick-stats .qs-binary-cell.qs-binary-on:hover {
  background: rgba(112, 200, 144, 0.28);
}
.quick-stats .qs-binary-code {
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.quick-stats .qs-binary-state {
  font-size: 0.7rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}

.quick-stats .qs-pool-ctrls {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  gap: 4px;
  align-items: center;
}
.quick-stats .qs-pool-btn {
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  border-radius: 4px;
  height: 30px;
  font-size: 1.15rem;
  line-height: 1;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.quick-stats .qs-pool-btn:hover { background: rgba(212, 168, 83, 0.18); }
.quick-stats .qs-pool-cur {
  text-align: center;
  font-family: var(--font-title);
  color: var(--cream);
  font-weight: 600;
  font-size: 1.2rem;
  background: var(--bg-darkest);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 3px 0;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-stats .qs-fate-dice-val {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  background: var(--bg-darkest);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 3px 6px;
}
.quick-stats .qs-fate-dice-num {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
}
.quick-stats .qs-fate-dice-d10 {
  font-family: var(--font-body);
  color: var(--cream-dim);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.quick-stats .qs-val {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1.1;
  margin-top: 2px;
}

.quick-stats .qs-cell.pool .qs-val { color: var(--cream); }

@media (max-width: 720px) {
  .quick-stats { gap: 8px; padding: 6px 8px; }
  .quick-stats .qs-cell { min-width: 38px; padding: 2px 5px; }
  .quick-stats .qs-val { font-size: 1.1rem; }
  .quick-stats .qs-group-label { display: none; }
}

/* ─── TAB BAR ────────────────────────────────────────── */

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--bg-mid);
  margin-bottom: 24px;
  padding-bottom: 1px;
  position: sticky;
  /* Pin below the sticky defenses banner (dynamic height). Rome 2026-07-20. */
  top: var(--banner-h, 0px);
  background: var(--bg-darkest);
  z-index: 10;
  padding-top: 4px;
  /* Hide the horizontal scrollbar entirely — overflow is a fallback for
     very narrow viewports where flex-wrap would also do the job, but
     the scrollbar itself was ugly. Firefox + Chromium both respected. */
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  font-family: var(--font-title);
  font-size: 0.8rem;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--cream-dim);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 7px 11px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: var(--gold-light);
  background: rgba(212,168,83,0.05);
}

.tab-btn.active {
  color: var(--gold);
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-mid) 100%);
  border-color: var(--bg-mid);
  border-bottom-color: transparent;
}

/* Star marker dropped from the active tab (previous ::before added
   ~16px of width per active tab, pushing the bar past typical viewport
   widths). Active state is signalled by color + background + border. */

/* ─── TAB PANELS ─────────────────────────────────────── */

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── SHEET SECTIONS ─────────────────────────────────── */

.sheet-section {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-mid) 100%);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 18px;
}

.section-header {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bg-mid);
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-header::before {
  content: "✦";
  color: var(--gold-dim);
  font-size: 0.9em;
}

.section-header .hint {
  margin-left: auto;
  font-family: var(--font-body);
  color: var(--cream-dark);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-transform: none;
  font-style: italic;
}
/* Collapsible sheet-section variant — uses <details>/<summary>. Matches
   the standard .sheet-section card visually; the summary mirrors
   .section-header (gold uppercase title + right-aligned hint) and adds
   a rotating disclosure caret in place of the ✦ ornament. When the
   <details> is closed, the summary loses its bottom border + margin
   so the closed-state visual is compact. Per Rome 2026-05-11. */
details.sheet-section-collapsible {
  /* The element itself uses .sheet-section's card chrome. */
}
details.sheet-section-collapsible > summary.section-header-collapsible {
  /* Mirror .section-header — font, color, letter-spacing, gap — but
     swap the ✦ for a rotating ▸ disclosure caret via ::-webkit-details-marker
     suppression + ::before content. */
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bg-mid);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease;
}
details.sheet-section-collapsible > summary.section-header-collapsible::-webkit-details-marker { display: none; }
/* Keep the ✦ ornament that .section-header uses, so the collapsible
   reads visually as the same family of section header. The disclosure
   caret moves to ::after (after the hint). */
details.sheet-section-collapsible > summary.section-header-collapsible::before {
  content: '✦';
  color: var(--gold-dim);
  font-size: 0.9em;
}
details.sheet-section-collapsible > summary.section-header-collapsible::after {
  content: '▸';
  color: var(--gold-dim);
  font-size: 0.9em;
  margin-left: 8px;
  transition: transform 0.15s ease, color 0.15s ease;
  display: inline-block;
}
details.sheet-section-collapsible[open] > summary.section-header-collapsible::after {
  transform: rotate(90deg);
  color: var(--gold);
}
details.sheet-section-collapsible > summary.section-header-collapsible:hover {
  color: var(--gold-light, #e8c878);
}
details.sheet-section-collapsible > summary.section-header-collapsible:hover::before {
  color: var(--gold);
}
details.sheet-section-collapsible > summary.section-header-collapsible:hover::after {
  color: var(--gold);
}
details.sheet-section-collapsible > summary.section-header-collapsible .hint {
  margin-left: auto;
  font-family: var(--font-body);
  color: var(--cream-dark);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-transform: none;
  font-style: italic;
}
/* When closed, drop the summary's bottom border + margin so the section
   compresses to just the title row — matches the at-rest visual of
   collapsibles elsewhere on the sheet. */
details.sheet-section-collapsible:not([open]) > summary.section-header-collapsible {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}



.subsection-header {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 16px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(160,120,48,0.3);
}
/* Governing-attribute tag on a skill name in the A–Z skills list (STATS-02,
   Rome 2026-07-20). Small, muted pill — a secondary label, not a shout. */
.skill-attr-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid rgba(212,168,83,0.3);
  border-radius: 3px;
  background: rgba(212,168,83,0.1);
  color: var(--gold-dim);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* ─── ATTRIBUTE GRID ─────────────────────────────────── */

.attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.attr-card {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
  transition: border-color var(--transition);
}

.attr-card:hover { border-color: var(--gold-dim); }

.attr-card .code {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.78rem;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.attr-card .value {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2px;
}

.attr-card .roll {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

/* Per-Level derived mod chips (Def / Pool / Stat) under the attribute roll.
   Dice Pool + Threshold are on .roll above; these complete the five canon
   per-Level values (SLHH 5). Rome 2026-06-23. */
.attr-card .attr-mods {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.attr-card .attr-mod {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(212,168,83,0.07);
  border: 1px solid rgba(212,168,83,0.18);
  font-size: 0.62rem;
  line-height: 1.4;
}
.attr-card .attr-mod .attr-mod-k {
  color: var(--cream-dark, #8a7d5f);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.attr-card .attr-mod .attr-mod-v {
  color: var(--gold, #d4a853);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.attr-card .step {
  color: var(--cream-dim);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.attr-card .step .range {
  color: var(--cream-dark);
  font-size: 0.68rem;
  display: block;
  margin-top: 2px;
}

/* ─── DERIVED GRID ───────────────────────────────────── */

.derived-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.derived-block {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.derived-block h3 {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--bg-mid);
}

.derived-rows {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 6px;
  column-gap: 14px;
  font-size: 0.92rem;
}

.derived-rows .label { color: var(--cream-dim); }

.derived-rows .value {
  color: var(--gold-light);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.derived-rows .value.drift {
  color: var(--red);
  cursor: help;
}

.derive-note {
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--cream-dark);
  font-style: italic;
  text-align: right;
}

/* ─── TRAINING TAB: DISCIPLINE BLOCKS ────────────────── */

.discipline-block {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* Training tab discipline + competency headers — grid layout so the
   name column, the N/M count column, and the badges all line up across
   every row regardless of name length. Per Rome 2026-04-26. */
.discipline-header {
  display: grid;
  grid-template-columns: 20px minmax(220px, 1fr) 70px auto;
  grid-template-areas: "chev title count badges";
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.discipline-chevron { grid-area: chev; }
.discipline-title   { grid-area: title; }
.discipline-count   { grid-area: count; }
.discipline-badges  { grid-area: badges; }

.discipline-title {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  /* Truncate gracefully on narrow viewports rather than overflow into
     the count column. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discipline-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.discipline-badges .tag {
  font-size: 0.68rem;
  letter-spacing: 0.6px;
  margin: 0;
  text-transform: uppercase;
}

.discipline-badges .tag-trained {
  background: rgba(100, 180, 120, 0.18);
  color: #a8e0b8;
}

.discipline-badges .tag-background {
  background: rgba(180, 140, 220, 0.18);
  color: #d4baf0;
}

/* Untrained badge — red flag on a Discipline with remaining training obligation.
   Per Rome 2026-05-12 pool refactor. Matches the Untrained pill in the
   Training Obligations card on the Downtime tab. */
.discipline-badges .tag-untrained,
.ability-name .tag-untrained {
  background: rgba(224, 100, 100, 0.18);
  color: #ffb8b8;
  border: 1px solid rgba(224, 100, 100, 0.55);
  cursor: help;
  font-weight: 600;
}
/* Tighten size when it sits next to a regular ability name + Core pill */
.ability-name .tag-untrained {
  font-size: 9.5px;
  padding: 1px 6px;
  margin-left: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.discipline-badges .tag-competency {
  background: rgba(100, 180, 220, 0.18);
  color: #9fcde8;
}

/* ── Collapsible discipline blocks ───────────────────────── */
.discipline-header {
  cursor: pointer;
  user-select: none;
}
.discipline-header:hover {
  background: rgba(212,168,83,0.04);
}
.discipline-chevron {
  display: inline-block;
  width: 14px;
  color: var(--gold-dim);
  font-size: 0.9rem;
  margin-right: 8px;
  text-align: center;
  transition: color 0.12s ease;
}
.discipline-header:hover .discipline-chevron {
  color: var(--gold-light);
}
.discipline-count {
  /* Grid-area: count — fixed-width column. Right-aligned so the slash
     in N/M lines up vertically across rows. Per Rome 2026-04-26. */
  text-align: right;
  font-family: 'Courier New', monospace;
  color: var(--cream-dark);
  font-size: 0.78rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.discipline-collapsed .discipline-body {
  display: none;
}
/* When collapsed, reduce the visual weight of the block so the scannable
   list reads as a compact menu. */
.discipline-collapsed {
  margin-bottom: 4px;
}
.discipline-collapsed .discipline-header {
  padding-bottom: 8px;
}

/* Toolbar above the discipline list — expand-all / collapse-all shortcuts. */
.discipline-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.disc-tb-btn {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  color: var(--cream-dim);
  padding: 4px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.74rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.disc-tb-btn:hover {
  background: rgba(212,168,83,0.10);
  color: var(--gold-light);
  border-color: var(--gold-dim);
}

.ability-table .tag-purchased {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(100, 180, 120, 0.18);
  color: #a8e0b8;
  font-size: 0.68rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.ability-table .tag-available {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(212, 168, 83, 0.10);
  color: var(--gold-dim);
  font-size: 0.68rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.discipline-desc {
  font-size: 0.86rem;
  color: var(--cream-dim);
  line-height: 1.45;
  margin: 4px 0 10px 0;
  font-style: italic;
}

.ability-table {
  font-size: 0.84rem;
  margin-bottom: 0;
}

.ability-table td.ability-name {
  color: var(--gold-light);
  font-weight: 600;
  white-space: nowrap;
}

.ability-table td.ability-desc {
  color: var(--cream);
  font-size: 0.82rem;
  line-height: 1.4;
}

.ability-table td.ability-notes {
  font-size: 0.72rem;
  color: var(--cream-dim);
}

.ability-table .ab-action {
  display: inline-block;
  padding: 1px 7px;
  margin: 1px 2px 1px 0;
  border-radius: 10px;
  background: rgba(212,168,83,0.10);
  color: var(--gold-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.3px;
}

.ability-table .ab-mod {
  display: inline-block;
  padding: 1px 7px;
  margin: 1px 2px 1px 0;
  border-radius: 10px;
  background: rgba(100, 180, 220, 0.14);
  color: #9fcde8;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2px;
}

/* Note pill — passive reminder for player-tracked mechanics the engine
   can't auto-aggregate (triggered resource gains, event-based Momentum,
   etc.). Distinguished from blue numeric pills by a muted grey + italic
   treatment; displays meta.display text verbatim. */
.ability-table .ab-note {
  display: inline-block;
  padding: 1px 7px;
  margin: 1px 2px 1px 0;
  border-radius: 10px;
  background: rgba(180, 180, 200, 0.08);
  color: var(--cream-dim);
  border: 1px dashed rgba(180, 180, 200, 0.25);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.2px;
}

/* Expandable note pill — for long canonical text (e.g. multi-part abilities
   like Lexicon of Power). Uses native <details>/<summary>. Click the pill
   to reveal the full body inline. */
.ability-table details.ab-note-long {
  display: inline-block;
  vertical-align: middle;
  margin: 1px 2px 1px 0;
}
.ability-table details.ab-note-long > summary {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(180, 180, 200, 0.08);
  color: var(--cream-dim);
  border: 1px dashed rgba(180, 180, 200, 0.25);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.2px;
  cursor: pointer;
  list-style: none;        /* hide Firefox default triangle */
  user-select: none;
}
.ability-table details.ab-note-long > summary::-webkit-details-marker {
  display: none;           /* hide WebKit default triangle */
}
.ability-table details.ab-note-long > summary::before {
  content: '▸ ';
  font-style: normal;
  color: var(--gold-dim);
  margin-right: 2px;
}
.ability-table details[open].ab-note-long > summary::before {
  content: '▾ ';
}
.ability-table details.ab-note-long > summary:hover {
  background: rgba(212, 168, 83, 0.10);
  border-color: var(--gold-dim);
  color: var(--cream);
}
.ability-table details.ab-note-long > .ab-note-body {
  display: block;
  margin-top: 4px;
  padding: 8px 12px;
  background: rgba(180, 180, 200, 0.05);
  border: 1px solid rgba(180, 180, 200, 0.18);
  border-left: 3px solid rgba(180, 180, 200, 0.4);
  border-radius: 4px;
  color: var(--cream);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  max-width: 520px;
}

/* Gated pill — rendered next to a toggle. Muted when toggle is off so it
   reads as "this is what WOULD fire"; brightens when toggle is on. */
.ability-table .ab-mod-gated {
  background: rgba(100, 180, 220, 0.06);
  color: rgba(159, 205, 232, 0.55);
  border: 1px dashed rgba(100, 180, 220, 0.25);
}
.ability-table .ab-mod-gated.on {
  background: rgba(100, 180, 220, 0.22);
  color: #bfdfef;
  border-color: transparent;
}

/* Inline toggle container — wraps the checkbox/select plus its gated pill. */
.ability-table .ab-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 1px 4px 1px 0;
  vertical-align: middle;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
}
.ability-table .ab-toggle-checkbox { cursor: pointer; }
.ability-table .ab-toggle-checkbox input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--gold);
}
.ability-table .ab-toggle-select {
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
  padding: 1px 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  cursor: pointer;
}
.ability-table .ab-toggle-select:focus {
  outline: none;
  border-color: var(--gold-dim);
}

.ability-table tr.auto-granted { background: rgba(100, 180, 120, 0.03); }

.training-footer {
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(212,168,83,0.05);
  border-top: 1px solid var(--bg-mid);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 0.74rem;
  color: var(--cream-dim);
  line-height: 1.4;
}

.training-footer .tf-label {
  color: var(--gold-dim);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin-right: 3px;
}

.training-footer .tf-value {
  color: var(--gold-light);
  font-family: 'Courier New', monospace;
}

.training-footer .tf-breakdown {
  color: var(--cream-dark);
  font-family: 'Courier New', monospace;
}

.training-footer .tf-cp {
  color: var(--cream);
  font-family: 'Courier New', monospace;
}

/* ─── SOCIAL TAB: TONE GRID ────────────────────────── */
.tone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.tone-cell {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.tone-cell.pos { border-left-color: #8fc6a0; }
.tone-cell.neg { border-left-color: #e2705e; }

.tone-cell .tone-label {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.tone-cell .tone-value {
  font-family: var(--font-title);
  color: var(--cream);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
}

.tone-cell.pos .tone-value { color: #a8e0b8; }
.tone-cell.neg .tone-value { color: #e9a36b; }

.tone-cell .tone-shift {
  color: var(--cream-dim);
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.35;
  margin-top: 3px;
}

/* Modifier overlay badges on tone cells. Two kinds:
   .tone-badge.track  — track-level delta (e.g., "+3" from Cut to the Chase)
   .tone-badge.check  — "+Nd on checks" from check.skill tone-narrowed mods (e.g., Hostile Presence)
*/
.tone-cell .tone-badge {
  display: inline-block;
  font-size: 0.68rem;
  padding: 0 5px;
  border-radius: 2px;
  letter-spacing: 0.3px;
  font-weight: bold;
  cursor: help;
}
.tone-cell .tone-badge.track {
  margin-left: 5px;
  background: rgba(212, 168, 83, 0.18);
  border: 1px solid rgba(212, 168, 83, 0.45);
  color: var(--gold-light);
  vertical-align: middle;
}
.tone-cell .tone-badge.check {
  display: block;
  margin-top: 4px;
  background: rgba(129, 199, 174, 0.14);
  border: 1px solid rgba(129, 199, 174, 0.4);
  color: #a8e0b8;
  font-size: 0.66rem;
  padding: 1px 5px;
}

/* ─── STORY TAB ─────────────────────────────────────── */

.story-item {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 8px;
}

.story-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.story-item-label {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 0.92rem;
  letter-spacing: 0.4px;
}

.story-item-subtle {
  color: var(--cream-dark);
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.3px;
}

.story-item-body {
  color: var(--cream);
  font-size: 0.84rem;
  line-height: 1.5;
}

.story-subsection {
  margin-top: 14px;
}

.story-subsection-header {
  color: var(--gold-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bg-mid);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.story-pursuits {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─── STORY v2 — Paths, Catalogs, Compensators, Events ─── */
.path-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.path-slot {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.path-slot.selected { border-color: var(--gold-dim); background: rgba(212,168,83,0.06); }
.path-slot .ps-cat {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.path-slot .ps-name {
  font-family: var(--font-body);
  color: var(--cream);
  font-size: 1.0rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.path-slot .ps-none {
  color: var(--cream-dark);
  font-style: italic;
  font-size: 0.88rem;
}
.path-slot .ps-meta {
  color: var(--cream-dim);
  font-size: 0.8rem;
  line-height: 1.4;
}

.path-catalog {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.path-catalog h3 {
  font-family: var(--font-title);
  color: var(--gold-light);
  margin: 0 0 4px 0;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.path-catalog .pc-rule {
  font-size: 0.8rem;
  color: var(--cream-dark);
  margin-bottom: 6px;
}
.path-catalog .pc-section { margin-bottom: 4px; }
.path-catalog .pc-empty {
  font-size: 0.8rem;
  color: var(--cream-dim);
  font-style: italic;
  padding: 4px 0;
}

/* Catalog cards — collapsible <details> per Path with description, tenets,
   virtues. Closed by default; click summary to expand the body. */
.path-catalog .pc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.path-catalog .pc-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-left-width: 3px;
  border-radius: 3px;
  padding: 0;
}
.path-catalog .pc-card.pc-eligible { border-left-color: rgba(168, 224, 184, 0.55); }
.path-catalog .pc-card.pc-ineligible { border-left-color: var(--bg-mid); opacity: 0.85; }
.path-catalog .pc-card[open] { padding-bottom: 8px; }
.path-catalog .pc-card-summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(140px, max-content) auto 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  list-style: none;
  font-size: 0.86rem;
}
.path-catalog .pc-card-summary::-webkit-details-marker { display: none; }
.path-catalog .pc-card-summary::before {
  content: '▸';
  color: var(--cream-dim);
  font-size: 0.7rem;
  margin-right: -4px;
}
.path-catalog .pc-card[open] .pc-card-summary::before { content: '▾'; }
.path-catalog .pc-card-summary .pc-card-name {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 0.94rem;
  letter-spacing: 0.4px;
}
.path-catalog .pc-card.pc-eligible .pc-card-summary .pc-card-name { color: #a8e0b8; }
.path-catalog .pc-card-summary .pc-elig-mark {
  color: #a8e0b8;
  font-weight: 700;
  font-size: 0.84rem;
}
.path-catalog .pc-card-summary .pc-inelig-mark {
  color: var(--cream-dim);
  font-size: 0.8rem;
}
.path-catalog .pc-card-summary .pc-card-prereq {
  color: var(--cream-dim);
  font-size: 0.76rem;
  font-style: italic;
}
.path-catalog .pc-card-body {
  padding: 0 14px 4px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.path-catalog .pc-card-desc {
  color: var(--cream);
  font-size: 0.84rem;
  line-height: 1.45;
  padding: 4px 0 6px;
  border-bottom: 1px dashed var(--bg-mid);
}
.path-catalog .pc-block-head {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-top: 2px;
}
.path-catalog .pc-tenet-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
  color: var(--cream);
}
.path-catalog .pc-tenet-item { line-height: 1.4; }
.path-catalog .pc-virtue-list {
  margin: 0;
  padding-left: 18px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
}
.path-catalog .pc-virtue-item {
  position: relative;
  line-height: 1.4;
  color: var(--cream);
}
.path-catalog .pc-virtue-item::before {
  content: '◆';
  color: var(--gold-dim);
  font-size: 0.6rem;
  position: absolute;
  left: -14px;
  top: 4px;
}
.path-catalog .pc-virtue-name { color: var(--gold-light); font-family: var(--font-title); font-size: 0.84rem; letter-spacing: 0.3px; }
.path-catalog .pc-virtue-rule { color: var(--cream); }

.compensator-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compensator-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compensator-card.active {
  border-left: 3px solid var(--gold-dim);
}
.compensator-card.dormant {
  opacity: 0.78;
  border-left: 3px solid var(--bg-mid);
}

/* Row 1 — three-dropdown picker (Beacon | Compensator | Level) */
.compensator-card .cmp-picker-row3 {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.2fr;
  gap: 10px;
  align-items: end;
}
.compensator-card .cmp-field { display: flex; flex-direction: column; gap: 3px; }
.compensator-card .cmp-field label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.compensator-card .cmp-select {
  background: var(--bg-darkest);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.86rem;
  font-family: inherit;
  cursor: pointer;
}
.compensator-card .cmp-select:hover { border-color: var(--gold-dim); }
.compensator-card .cmp-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim); }

/* Row 2 — status row (state badge | reduction badge | state-override | remove) */
.compensator-card .cmp-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.compensator-card .cmp-state {
  font-family: var(--font-title);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 10px;
}
.compensator-card.active .cmp-state {
  color: var(--gold-light);
  background: rgba(212, 168, 83, 0.14);
  border: 1px solid var(--gold-dim);
}
.compensator-card.dormant .cmp-state {
  color: var(--cream-dark);
  background: var(--bg-mid);
}
.compensator-card .cmp-reduction {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  font-size: 0.78rem;
  color: #a8e0b8;
  background: rgba(168, 224, 184, 0.10);
  border: 1px solid rgba(168, 224, 184, 0.30);
  border-radius: 10px;
  padding: 2px 10px;
  cursor: help;
}
.compensator-card.dormant .cmp-reduction {
  color: var(--cream-dim);
  background: var(--bg-mid);
  border-color: transparent;
}
.compensator-card .cmp-state-override {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--cream-dim);
}
.compensator-card .cmp-state-override label {
  font-family: var(--font-title);
  font-size: 0.66rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.compensator-card .cmp-state-override .cmp-select {
  font-size: 0.78rem;
  padding: 2px 6px;
}
.compensator-card .cmp-remove-btn {
  margin-left: auto;
  background: transparent;
  color: var(--cream-dim);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 2px 10px;
  font-size: 0.76rem;
  cursor: pointer;
}
.compensator-card .cmp-remove-btn:hover { color: #e79090; border-color: rgba(231, 144, 144, 0.4); }

/* Row 3 — body: description + benefit + flaws */
.compensator-card .cmp-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px dashed var(--bg-mid);
}
.compensator-card .cmp-body-dormant { opacity: 0.7; }
.compensator-card .cmp-description {
  color: var(--cream);
  font-size: 0.84rem;
  line-height: 1.4;
}
.compensator-card .cmp-benefit {
  font-size: 0.82rem;
  color: var(--cream);
}
.compensator-card .cmp-cap-note {
  color: var(--cream-dim);
  font-size: 0.74rem;
  font-style: italic;
}
.compensator-card .cmp-flaw-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.compensator-card .cmp-flaw-item {
  font-size: 0.82rem;
  color: var(--cream);
  line-height: 1.4;
}
.compensator-card .cmp-bullet {
  display: inline-block;
  width: 14px;
  font-weight: 700;
  margin-right: 4px;
}
.compensator-card .cmp-bullet-good { color: #a8e0b8; }
.compensator-card .cmp-bullet-bad { color: #e79090; }
.compensator-card .cmp-warn {
  font-size: 0.78rem;
  color: var(--cream-dim);
  font-style: italic;
  padding: 4px 0;
  border-top: 1px dashed var(--bg-mid);
}

.story-v2-note {
  font-size: 0.82rem;
  color: var(--cream-dim);
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--bg-dark);
  border: 1px dashed var(--bg-mid);
  border-radius: var(--radius);
  margin-top: 8px;
}
.story-v2-note strong {
  color: var(--gold-light);
}

.formative-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.formative-events .fe-entry {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.formative-events .fe-title {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.92rem;
}
.formative-events .fe-meta {
  color: var(--cream-dark);
  font-size: 0.78rem;
}
.formative-events .fe-body {
  color: var(--cream-dim);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 4px;
}

/* ─── DOWNTIME TAB (worksheet v2) ───────────────────── */

.downtime-setup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.downtime-setup .dts-row {
  display: grid;
  grid-template-columns: 180px auto 1fr;
  gap: 10px;
  align-items: center;
}

.downtime-setup .dts-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.76rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.downtime-setup .dts-input,
.downtime-setup .dts-select {
  background: var(--bg-dark);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 5px 10px;
  font-family: 'Courier New', monospace;
  font-size: 0.86rem;
  min-width: 160px;
}

.downtime-setup .dts-note {
  color: var(--cream-dim);
  font-size: 0.78rem;
  font-style: italic;
}

.downtime-setup .dts-summary-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(212,168,83,0.06);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
}

.downtime-setup .dts-summary-cell { text-align: center; }

.downtime-setup .dts-summary-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.downtime-setup .dts-summary-val {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
}

.downtime-setup .dts-summary-note {
  color: var(--cream-dark);
  font-size: 0.68rem;
  font-style: italic;
  margin-top: 2px;
}

.downtime-setup .dts-flag {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(100, 180, 220, 0.08);
  border-left: 3px solid rgba(100, 180, 220, 0.5);
  border-radius: var(--radius);
  font-size: 0.74rem;
  color: var(--cream-dim);
  line-height: 1.4;
}

.dts-flare-summary {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
}

.dts-flare-summary .dtfs-header {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bg-mid);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.dts-flare-summary .dtfs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
}

.dts-flare-summary .dtfs-cell {
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 3px solid var(--gold-dim);
  background: rgba(0,0,0,0.2);
}

.dts-flare-summary .dtfs-cell.beacon-red    { border-left-color: #e2705e; }
.dts-flare-summary .dtfs-cell.beacon-orange { border-left-color: #e9a36b; }
.dts-flare-summary .dtfs-cell.beacon-yellow { border-left-color: #e7d47a; }
.dts-flare-summary .dtfs-cell.beacon-green  { border-left-color: #8fc6a0; }
.dts-flare-summary .dtfs-cell.beacon-blue   { border-left-color: #9fcde8; }
.dts-flare-summary .dtfs-cell.beacon-purple { border-left-color: #c8a0e0; }
.dts-flare-summary .dtfs-cell.dtfs-any      { border-left-color: var(--gold-light); }

.dts-flare-summary .dtfs-label {
  font-family: var(--font-title);
  color: var(--cream);
  font-size: 0.76rem;
  letter-spacing: 0.4px;
}

.dts-flare-summary .dtfs-val {
  font-family: 'Courier New', monospace;
  color: var(--gold-light);
  font-size: 0.92rem;
  font-weight: 600;
}

.dts-flare-summary .dtfs-total {
  font-size: 0.7rem;
  color: var(--cream-dim);
  font-style: italic;
  margin-top: 2px;
}

/* Legacy schedule table style retained for fallback. v3 uses cards. */
.downtime-schedule select,
.downtime-schedule input[type="number"],
.downtime-schedule input[type="text"] {
  background: var(--bg-dark);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  width: 100%;
  box-sizing: border-box;
}
.downtime-schedule select:focus,
.downtime-schedule input:focus { outline: 1px solid var(--gold-dim); }

/* v3 schedule: per-day cards */
.downtime-days {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.downtime-day-card {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.downtime-day-card .ddc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.downtime-day-card .ddc-title {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.downtime-day-card .ddc-copy {
  background: rgba(212,168,83,0.08);
  color: var(--gold-dim);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 3px 10px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.3px;
}
.downtime-day-card .ddc-copy:hover { background: rgba(212,168,83,0.2); color: var(--gold-light); }

/* Per-day stack strip — lives in the Day header between the title and
   the Copy-to-rest button. One `.ddc-stack-item` per stackable unlock
   (currently: Phytomancy I's "Spent time in the Sun", 2 stacks/day).
   Only renders when a matching capability is granted. */
.downtime-day-card .ddc-day-stacks {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  margin-left: 14px;
}
.downtime-day-card .ddc-stack-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--cream);
  cursor: pointer;
}
.downtime-day-card .ddc-stack-name {
  color: var(--gold-dim);
  letter-spacing: 0.3px;
}
.downtime-day-card .ddc-stack-box {
  margin: 0 1px;
  accent-color: var(--gold-dim);
  cursor: pointer;
}
.downtime-day-card .ddc-stack-hint {
  color: var(--cream-dim);
  font-style: italic;
  font-size: 0.68rem;
}

.downtime-day-card .ddc-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}
/* Row 1 — Food / Shelter / Recreation setup (3 equal columns). */
.downtime-day-card .ddc-row-setup {
  grid-template-columns: repeat(3, 1fr);
}
/* Row 2 — three Activity dropdowns (3 equal columns). */
.downtime-day-card .ddc-row-activities {
  grid-template-columns: repeat(3, 1fr);
}
/* Row 3 — Segments used (compact) + Notes (fills remaining width). */
.downtime-day-card .ddc-row-bottom {
  grid-template-columns: 120px 1fr;
}
.downtime-day-card .ddc-grid:last-child { margin-bottom: 0; }

.downtime-day-card .ddc-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;   /* let fields shrink inside the grid cells */
}

.downtime-day-card .ddc-field-notes,
.downtime-day-card .ddc-field-seg {
  /* Notes stretches across; seg stays compact */
}

/* Narrow-screen graceful fallback — collapse all rows to single column. */
@media (max-width: 720px) {
  .downtime-day-card .ddc-row-setup,
  .downtime-day-card .ddc-row-activities,
  .downtime-day-card .ddc-row-bottom {
    grid-template-columns: 1fr;
  }
}

.downtime-day-card .ddc-field-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.62rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.downtime-day-card select,
.downtime-day-card input[type="number"],
.downtime-day-card input[type="text"] {
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
}
.downtime-day-card select:focus,
.downtime-day-card input:focus { outline: 1px solid var(--gold-dim); }

/* v3 summary cards */
.ds-card {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 10px;
}

.ds-card.ds-pending-card {
  border-left: 3px solid rgba(100, 180, 220, 0.4);
  background: linear-gradient(180deg, var(--bg-dark) 0%, rgba(0,0,0,0.15) 100%);
}

.ds-card .ds-card-header {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bg-mid);
  padding-bottom: 5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.ds-card .ds-card-hint {
  color: var(--cream-dark);
  font-family: 'Courier New', monospace;
  font-size: 0.66rem;
  font-style: italic;
  letter-spacing: 0.3px;
  text-transform: none;
}

.ds-card .ds-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.ds-card .ds-metric {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  padding: 6px 10px;
  border-left: 3px solid var(--gold-dim);
}
.ds-card .ds-metric.good { border-left-color: #8fc6a0; background: rgba(100, 180, 120, 0.08); }
.ds-card .ds-metric.ds-tbd { border-left-color: var(--bg-mid); }
.ds-card .ds-metric.ds-any { border-left-color: var(--gold-light); }

.ds-card .ds-metric.beacon-red    { border-left-color: #e2705e; }
.ds-card .ds-metric.beacon-orange { border-left-color: #e9a36b; }
.ds-card .ds-metric.beacon-yellow { border-left-color: #e7d47a; }
.ds-card .ds-metric.beacon-green  { border-left-color: #8fc6a0; }
.ds-card .ds-metric.beacon-blue   { border-left-color: #9fcde8; }
.ds-card .ds-metric.beacon-purple { border-left-color: #c8a0e0; }

.ds-card .ds-m-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.64rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.ds-card .ds-metric.ds-tbd .ds-m-label { color: var(--cream-dark); }

.ds-card .ds-m-val {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2px;
}
.ds-card .ds-metric.ds-tbd .ds-m-val { color: var(--cream-dim); }

.ds-card .ds-m-sub {
  color: var(--cream-dim);
  font-size: 0.66rem;
  font-style: italic;
  margin-top: 2px;
}

.ds-card .ds-pending {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(100, 180, 220, 0.06);
  border-left: 2px solid rgba(100, 180, 220, 0.4);
  color: var(--cream-dim);
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.4;
  border-radius: 2px;
}

.ds-card .ds-placeholder {
  color: var(--cream-dim);
  font-style: italic;
  font-size: 0.78rem;
  padding: 4px 2px;
}

.ds-card .ds-breakdown {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ds-card .ds-breakdown-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.82rem;
}

.ds-card .ds-count {
  color: var(--gold-light);
  font-family: 'Courier New', monospace;
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}
.ds-card .ds-activity-label { color: var(--cream); }

.downtime-setup .dts-prompt {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(212,168,83,0.06);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--cream-dim);
  line-height: 1.4;
}

/* Summary band */
.downtime-summary-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.downtime-summary-band .dsb-cell {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 8px 12px;
  text-align: center;
}

.downtime-summary-band .dsb-cell.good {
  background: rgba(100, 180, 120, 0.08);
  border-color: rgba(100, 180, 120, 0.4);
}

.downtime-summary-band .dsb-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.downtime-summary-band .dsb-val {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.1;
}

.downtime-breakdown {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
}

.downtime-breakdown .db-header {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bg-mid);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.downtime-breakdown .db-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  font-size: 0.82rem;
}

.downtime-breakdown .db-count {
  color: var(--gold-light);
  font-family: 'Courier New', monospace;
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}

.downtime-breakdown .db-label { color: var(--cream); }

/* Activity reference panel */
.downtime-ref-group {
  margin-bottom: 12px;
}

.downtime-ref-group .drg-header {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bg-mid);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.downtime-ref-group .drg-item {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 6px 10px;
  margin-bottom: 4px;
}

.downtime-ref-group .drg-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.downtime-ref-group .drg-item-name {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 0.86rem;
}

.downtime-ref-group .drg-item-cost {
  font-family: 'Courier New', monospace;
  color: var(--cream-dim);
  font-size: 0.72rem;
}

.downtime-ref-group .drg-item-hint {
  color: var(--cream-dim);
  font-size: 0.76rem;
  margin-top: 2px;
  line-height: 1.4;
}

/* Legacy WP grid styles retained for possible reuse; not rendered in v2. */
.wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.wp-cell {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wp-cell .wp-type {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 0.9rem;
  letter-spacing: 0.4px;
}

.wp-cell .wp-rate {
  font-family: 'Courier New', monospace;
  color: var(--cream-dim);
  font-size: 0.76rem;
}

.wp-cell .wp-balance-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 2px 0;
}

.wp-cell .wp-balance-row button {
  background: rgba(212,168,83,0.08);
  color: var(--gold-light);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 3px 10px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}
.wp-cell .wp-balance-row button:hover { background: rgba(212,168,83,0.2); }

.wp-cell .wp-balance {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.3rem;
  font-weight: 600;
  min-width: 36px;
  text-align: center;
}

.wp-cell .wp-source {
  font-family: 'Courier New', monospace;
  color: var(--cream-dark);
  font-size: 0.7rem;
  font-style: italic;
}

.downtime-activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.downtime-activity-card {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.downtime-activity-card .dta-source {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 0.86rem;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.downtime-activity-card .dta-body {
  color: var(--cream);
  font-size: 0.82rem;
  line-height: 1.5;
}

.healing-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.healing-row {
  display: grid;
  grid-template-columns: 80px 120px 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  font-size: 0.82rem;
}

.healing-row .hw-sev {
  font-family: var(--font-title);
  color: var(--gold-light);
  letter-spacing: 0.3px;
}

.healing-row .hw-type {
  font-family: 'Courier New', monospace;
  color: var(--cream);
  font-size: 0.76rem;
}

.healing-row .hw-cost {
  font-family: 'Courier New', monospace;
  color: #8fc6a0;
  font-size: 0.78rem;
}

.healing-row .hw-notes {
  font-size: 0.74rem;
}

.healing-summary {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(212,168,83,0.06);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--cream);
}

.healing-summary .hs-label {
  color: var(--gold-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-right: 4px;
}

.healing-summary .hs-reduce { color: #e9a36b; }
.healing-summary .hs-heal   { color: #8fc6a0; }

/* ─── RECOVERY & HEALING PANEL (Phase 1a) ─────────────── */

.rh-header-strip {
  display: flex;
  align-items: stretch;
  margin-bottom: 8px;
}

.rh-pool {
  flex: 1;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(143,198,160,0.10), rgba(143,198,160,0.04));
  border: 1px solid rgba(143,198,160,0.35);
  border-radius: var(--radius);
}

.rh-pool.rh-pool-empty {
  background: rgba(212,168,83,0.04);
  border-color: var(--bg-mid);
}

.rh-pool-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.rh-pool-value {
  font-family: var(--font-title);
  font-size: 1.6rem;
  letter-spacing: 1px;
  margin: 2px 0 4px;
}

.rh-pool-value .rh-pool-avail { color: #8fc6a0; }
.rh-pool-value .rh-pool-sep   { color: var(--cream-dark); margin: 0 4px; font-size: 1.2rem; }
.rh-pool-value .rh-pool-total { color: var(--cream); }

.rh-pool-sub {
  color: var(--cream-dark);
  font-size: 0.74rem;
  font-style: italic;
}

.rh-strain-forecast {
  padding: 8px 12px;
  background: rgba(212,168,83,0.05);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.rh-strain-forecast.rh-strain-rested {
  background: rgba(143,198,160,0.08);
  border-left-color: rgba(143,198,160,0.55);
}

.rh-strain-forecast.rh-strain-warn {
  background: rgba(233,163,107,0.08);
  border-left-color: rgba(233,163,107,0.55);
}

.rh-strain-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.rh-strain-value {
  font-family: var(--font-title);
  font-size: 1.4rem;
  letter-spacing: 1px;
  margin: 2px 0 4px;
  color: var(--cream);
}

.rh-strain-rested .rh-strain-value.rh-strain-zero {
  color: #8fc6a0;
  font-size: 1.15rem;
}

.rh-strain-warn .rh-strain-value {
  color: #e9a36b;
}

.rh-strain-unit {
  font-size: 0.85rem;
  color: var(--cream-dark);
  letter-spacing: 0.5px;
}

.rh-strain-math {
  font-family: 'Courier New', monospace;
  color: var(--cream-dark);
  font-size: 0.74rem;
  font-style: italic;
}

.rh-day-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.rh-chip {
  flex: 0 0 auto;
  min-width: 78px;
  padding: 5px 8px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.74rem;
}

.rh-chip.rh-chip-good { border-color: rgba(143,198,160,0.45); }
.rh-chip.rh-chip-low  { border-color: rgba(233,163,107,0.45); }

.rh-chip-day {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.66rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.rh-chip-rl {
  font-family: 'Courier New', monospace;
  color: #8fc6a0;
  font-size: 0.92rem;
  font-weight: bold;
  margin: 1px 0;
}

.rh-chip.rh-chip-low .rh-chip-rl { color: #e9a36b; }

.rh-chip-stack {
  margin-top: 2px;
  font-size: 0.66rem;
  color: #e9c476;
  font-style: italic;
}

.rh-chip-shelter {
  color: var(--cream-dark);
  font-size: 0.7rem;
  font-style: italic;
}

.rh-rp-note {
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(90,143,184,0.06);
  border-left: 3px solid rgba(90,143,184,0.5);
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--cream);
  line-height: 1.45;
}

.rh-rp-note .rh-note-icon {
  color: var(--gold-dim);
  margin-right: 6px;
  font-size: 0.85rem;
}

.rh-wound-section {
  margin-top: 10px;
  margin-bottom: 12px;
}

.rh-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--bg-mid);
  margin-bottom: 6px;
}

.rh-section-header .rh-sh-title {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 0.84rem;
  letter-spacing: 0.4px;
}

.rh-section-header .rh-sh-hint {
  color: var(--cream-dark);
  font-size: 0.72rem;
  font-style: italic;
}

.rh-wound-row {
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  margin-bottom: 6px;
}

.rh-wr-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.rh-wr-sev {
  font-family: var(--font-title);
  color: var(--gold-light);
  letter-spacing: 0.4px;
  font-size: 0.86rem;
}

.rh-wr-sev-mortal { color: #d46f6f; }
.rh-wr-sev-critical { color: #e9a36b; }
.rh-wr-sev-severe { color: #d4974e; }

.rh-wr-type {
  font-family: 'Courier New', monospace;
  color: var(--cream);
  font-size: 0.78rem;
}

.rh-wr-blocks-num {
  margin-left: auto;
  font-family: 'Courier New', monospace;
  color: var(--cream-dark);
  font-size: 0.74rem;
}

.rh-wr-bar-track {
  display: block;
  height: 8px;
  background: rgba(212,168,83,0.10);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.rh-wr-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #8fc6a0, #5e9472);
  transition: width 0.2s ease;
}

.rh-wr-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.rh-wr-actions button {
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.rh-wr-actions button:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}

.rh-wr-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rh-wr-actions .rh-spend {
  color: #8fc6a0;
  border-color: rgba(143,198,160,0.4);
}

.rh-wr-actions .rh-reset {
  color: var(--cream-dark);
}

.rh-wr-notes {
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--cream-dark);
  font-style: italic;
}

.rh-healing-pool {
  margin-top: 8px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(143,198,160,0.06), rgba(143,198,160,0.02));
  border-color: rgba(143,198,160,0.35);
}

.rh-hp-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.rh-hp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--cream);
  cursor: pointer;
}

.rh-hp-toggle input { cursor: pointer; }

.rh-treat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 6px;
  padding: 5px 8px;
  background: rgba(212,168,83,0.03);
  border-radius: var(--radius);
}

.rh-treat-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 240px;
}

.rh-treat-rolls {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 6px;
  border-left: 2px solid var(--bg-mid);
  font-family: 'Courier New', monospace;
  font-size: 0.66rem;
  color: var(--cream-dark);
  font-style: italic;
  line-height: 1.4;
  align-self: stretch;
  justify-content: center;
}

.rh-treat-roll-line.rh-treat-disabled {
  opacity: 0.5;
}

.rh-treat-cell.rh-treat-disabled {
  opacity: 0.5;
}

.rh-treat-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.66rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.rh-treat-cell select {
  padding: 3px 6px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  color: var(--cream);
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  border-radius: 3px;
}

.rh-hp-dirt, .rh-treat-row .rh-hp-treat {
  align-self: flex-end;
  padding: 4px 9px;
  font-size: 0.72rem;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Courier New', monospace;
}

.rh-hp-dirt:hover, .rh-treat-row .rh-hp-treat:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}

.rh-toggle-on {
  background: rgba(143,198,160,0.18) !important;
  border-color: rgba(143,198,160,0.55) !important;
  color: #c8e8d4 !important;
}

.rh-flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.rh-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(212,168,83,0.04);
  border: 1px solid var(--bg-mid);
  border-radius: 12px;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  color: var(--cream-dark);
  cursor: pointer;
  user-select: none;
}

.rh-flag input { display: none; }

.rh-flag.rh-flag-on {
  background: rgba(143,198,160,0.18);
  border-color: rgba(143,198,160,0.55);
  color: #c8e8d4;
}

.rh-hp-row .rh-hp-actions {
  flex-wrap: wrap;
  gap: 5px;
}

.rh-hp-actions button {
  white-space: nowrap;
  padding: 4px 9px;
  font-size: 0.72rem;
}

.rh-hp-reduce { color: #e9a36b; border-color: rgba(233,163,107,0.4); }
.rh-hp-heal   { color: #8fc6a0; border-color: rgba(143,198,160,0.4); }

/* ── Healing & Recovery tab (Rome 2026-06-23) — match the app button/input
   style; the tab's buttons were falling back to browser defaults. ── */
#tab-healing button {
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#tab-healing button:hover:not(:disabled) { background: var(--bg-mid); border-color: var(--gold-dim); }
#tab-healing button:disabled { opacity: 0.45; cursor: not-allowed; }
#tab-healing .mh-reduce, #tab-healing .rest-reduce { color: #e9a36b; border-color: rgba(233,163,107,0.4); }
#tab-healing .mh-heal,   #tab-healing .rest-heal   { color: #8fc6a0; border-color: rgba(143,198,160,0.4); }
#tab-healing .rest-rp { color: #8fb8d8; border-color: rgba(143,184,216,0.4); }
#tab-healing select,
#tab-healing input[type="number"] {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.8rem;
  border-radius: var(--radius);
  padding: 3px 6px;
}
#tab-healing input[type="number"] { width: 64px; }
#tab-healing select { max-width: 340px; }

/* Structural classes (inline-style sweep) */
#tab-healing .heal-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
#tab-healing .heal-tile { flex: 1 1 120px; min-width: 110px; border: 1px solid var(--bg-mid); border-radius: var(--radius); padding: 8px 10px; }
#tab-healing .heal-tile .ht-label { font-size: 0.7rem; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.7; }
#tab-healing .heal-tile .ht-val { font-size: 1.25rem; font-weight: 600; }
#tab-healing .heal-tile.warn .ht-val { color: var(--gold); }
#tab-healing .heal-tile.crit .ht-val { color: #d9776a; }
#tab-healing .heal-dying { margin-top: 8px; color: #d9776a; }
#tab-healing .heal-sub { margin-top: 6px; font-size: 0.8rem; }

#tab-healing .heal-pool-box { border: 1px solid var(--gold-dim); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; }
#tab-healing .heal-pool-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#tab-healing .heal-pool-remain { font-weight: 600; }
#tab-healing .heal-pool-remain b { color: var(--gold); }
#tab-healing .heal-pool-clear { margin-left: auto; }
#tab-healing .heal-src-row { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

#tab-healing .heal-whead { display: flex; gap: 10px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.55; padding: 0 4px 4px; }
#tab-healing .heal-wrow { display: flex; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--bg-mid); }
#tab-healing .hw-sev { min-width: 78px; font-weight: 600; }
#tab-healing .hw-type { min-width: 88px; opacity: 0.85; }
#tab-healing .hw-tags { flex: 1; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
#tab-healing .hw-act { white-space: nowrap; }
#tab-healing .hw-mort { opacity: 0.7; font-size: 0.8rem; white-space: nowrap; }
#tab-healing .hw-blocks { opacity: 0.7; font-size: 0.8rem; margin-right: 8px; }

#tab-healing .heal-pill { display: inline-block; font-size: 0.7rem; padding: 1px 7px; border-radius: 10px; border: 1px solid currentColor; white-space: nowrap; }
#tab-healing .heal-pill.treated { color: var(--green); }
#tab-healing .heal-pill.untreated { color: #d9776a; }
#tab-healing .heal-pill.lingering { color: var(--gold); }
#tab-healing .heal-pill.bad { color: #d9776a; }
#tab-healing .heal-pill.neutral { color: var(--cream-dark); }

#tab-healing .heal-calc { border: 1px solid var(--bg-mid); border-radius: var(--radius); padding: 10px 12px; margin: 2px 0 14px; }
#tab-healing .heal-calc-line { margin-top: 6px; }
#tab-healing .heal-calc-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin-top: 8px; }
#tab-healing .heal-calc-table th { text-align: left; padding: 2px 6px; opacity: 0.6; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: normal; }
#tab-healing .heal-calc-table th.num, #tab-healing .heal-calc-table td.num { text-align: center; }
#tab-healing .heal-calc-table td { padding: 3px 6px; border-top: 1px solid var(--bg-mid); }
#tab-healing .heal-calc-table td.days { text-align: center; font-weight: 600; }
#tab-healing .heal-note { margin-top: 10px; }

/* Effect summary line on spell/ritual/invocation rows (Rome 2026-06-23) —
   compact mechanical "meat" (damage dice, +deltas) under each row. */
.fx-effect-line {
  grid-column: 1 / -1;   /* span all columns when the row list is a CSS grid */
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.72;
  color: var(--gold);
  padding: 0 8px 3px 8px;
  line-height: 1.3;
}
.rh-hp-firstaid { color: var(--cream); }
.rh-hp-stitch   { color: var(--cream); }
.rh-hp-treat    { color: var(--cream-dark); }

.rh-other-section {
  opacity: 0.85;
}

.rh-minor-note {
  margin-top: 8px;
  color: var(--cream-dark);
  font-size: 0.76rem;
  font-style: italic;
}

.hw-blocks-info {
  margin-left: 8px;
  color: var(--cream-dark);
  font-size: 0.72rem;
}

/* ─── WOUND FORM — damage-blocks stepper (Phase 1a-ter) ──── */

.wound-form .wf-blocks {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}

.wound-form .wf-blocks-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.wound-form .wf-blocks-input {
  width: 56px;
  padding: 3px 6px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  color: var(--cream);
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  border-radius: var(--radius);
}

.wound-form .wf-blocks-preview {
  color: #8fc6a0;
  font-size: 0.76rem;
  font-style: italic;
}

/* Recovery row +1 Worse button — sibling to spend/reset */
.rh-wr-actions .rh-worse {
  color: #e9a36b;
  border-color: rgba(233,163,107,0.4);
}

/* ─── COMPETENCIES SECTION (Phase 3a) ─────────────────── */

#downtime-competencies .comp-wp-widget {
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(143,198,160,0.06), rgba(143,198,160,0.02));
  border: 1px solid var(--bg-mid);
  border-left: 3px solid rgba(143,198,160,0.5);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

#downtime-competencies .comp-wp-empty {
  color: var(--cream-dark);
  font-style: italic;
  font-size: 0.78rem;
}

#downtime-competencies .comp-wp-head {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

#downtime-competencies .comp-wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}

#downtime-competencies .comp-wp-cell {
  padding: 5px 8px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
}

#downtime-competencies .cwp-track {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}

#downtime-competencies .cwp-balance {
  font-family: 'Courier New', monospace;
  color: #8fc6a0;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 1px 0;
}

#downtime-competencies .cwp-unit {
  font-size: 0.7rem;
  color: var(--cream-dark);
  font-weight: normal;
}

#downtime-competencies .cwp-meta {
  color: var(--cream-dark);
  font-size: 0.7rem;
  font-family: 'Courier New', monospace;
}

#downtime-competencies .cwp-incoming {
  color: #e9c476;
}

#downtime-competencies .comp-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#downtime-competencies .comp-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  overflow: hidden;
}

#downtime-competencies .comp-card-bespoke {
  border-style: dashed;
  opacity: 0.85;
}

#downtime-competencies .comp-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
  font-size: 0.84rem;
  user-select: none;
}

#downtime-competencies .comp-card-head::-webkit-details-marker { display: none; }

#downtime-competencies .comp-card-head::before {
  content: '\25B6';
  font-size: 0.65rem;
  color: var(--gold-dim);
  transition: transform 0.15s ease;
  display: inline-block;
}

#downtime-competencies .comp-card[open] .comp-card-head::before {
  transform: rotate(90deg);
}

#downtime-competencies .cc-name {
  font-family: var(--font-title);
  color: var(--gold-light);
  letter-spacing: 0.4px;
  flex: 1;
}

#downtime-competencies .cc-track-chip {
  padding: 2px 7px;
  background: rgba(143,198,160,0.1);
  border: 1px solid rgba(143,198,160,0.35);
  border-radius: 3px;
  color: #8fc6a0;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
}

#downtime-competencies .cc-bespoke-chip {
  background: rgba(212,168,83,0.08);
  border-color: rgba(212,168,83,0.35);
  color: var(--gold-dim);
}

#downtime-competencies .cc-bal {
  font-family: 'Courier New', monospace;
  color: var(--cream-dark);
  font-size: 0.74rem;
}

#downtime-competencies .comp-card-body {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--bg-mid);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#downtime-competencies .cc-section {
  padding: 6px 8px;
  background: rgba(212,168,83,0.03);
  border-left: 2px solid var(--bg-mid);
  border-radius: 0 var(--radius) var(--radius) 0;
}

#downtime-competencies .cc-section-tbd {
  border-left-color: var(--gold-dim);
  background: rgba(212,168,83,0.05);
}

#downtime-competencies .cc-section-note {
  border-left-color: rgba(143,198,160,0.4);
  background: rgba(143,198,160,0.04);
}

#downtime-competencies .cc-section-head {
  font-family: var(--font-title);
  color: var(--gold);            /* contrast pass 2026-05-21: gold-dim 4.24:1 → gold 7.74:1 (AAA) */
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

#downtime-competencies .cc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  margin: 2px 0;
}

#downtime-competencies .cc-row-label {
  color: var(--cream-dim);       /* contrast pass 2026-05-21: cream-dark 4.36:1 → cream-dim 7.23:1 (AAA) */
}

#downtime-competencies .cc-row-val {
  font-family: 'Courier New', monospace;
  color: var(--cream);
}

/* ── Guided-flow grid (Study Ritual; reusable for other competency activities,
   Rome 2026-06-15). Semantic columns: Step · Status · Action · Adjust. Rows in
   workflow order; locked rows greyed so the player works top→bottom. ───────── */
#downtime-competencies .cc-flow-reqs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  margin: 6px 0 8px;
}
#downtime-competencies .cc-flow-reqs-label {
  color: var(--cream-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#downtime-competencies .cc-flow-req {
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}
#downtime-competencies .cc-flow-req.ok  { color: #7fc99a; border-color: rgba(127, 201, 154, 0.4); }
#downtime-competencies .cc-flow-req.bad { color: #e0a36a; border-color: rgba(224, 163, 106, 0.45); }

#downtime-competencies .cc-flow-grid {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  margin: 6px 0 8px;
}
#downtime-competencies .cc-flow-head,
#downtime-competencies .cc-flow-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.05fr) minmax(110px, 0.95fr) minmax(190px, 1.7fr) minmax(78px, auto);
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
}
#downtime-competencies .cc-flow-head {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dim);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#downtime-competencies .cc-flow-row {
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: opacity 0.15s ease, background 0.15s ease;
}
#downtime-competencies .cc-flow-row:last-child { border-bottom: none; }

#downtime-competencies .cc-flow-row.locked {
  opacity: 0.4;
  pointer-events: none;       /* truly inert until unlocked */
  filter: grayscale(0.4);
}
#downtime-competencies .cc-flow-row.active {
  background: rgba(212, 168, 83, 0.12);
  box-shadow: inset 3px 0 0 var(--gold, #d4a853);
}
#downtime-competencies .cc-flow-row.done {
  opacity: 0.82;
}

#downtime-competencies .cc-flow-step {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 7px;
}
#downtime-competencies .cc-flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--bg, #1a1410);
  background: var(--cream-dim, #c9b78f);
  flex: 0 0 auto;
}
#downtime-competencies .cc-flow-row.active .cc-flow-num { background: var(--gold, #d4a853); }
#downtime-competencies .cc-flow-row.done   .cc-flow-num { background: #7fc99a; }
#downtime-competencies .cc-flow-title { color: var(--cream); }
#downtime-competencies .cc-flow-hint {
  flex-basis: 100%;
  font-size: 0.66rem;
  color: var(--cream-dim);
  font-style: italic;
}
#downtime-competencies .cc-flow-status { font-family: 'Courier New', monospace; color: var(--cream); }
#downtime-competencies .cc-flow-action { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#downtime-competencies .cc-flow-adjust { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
#downtime-competencies .cc-flow-muted { color: var(--cream-dim); }
#downtime-competencies .cc-flow-bad   { color: #e0a36a; }
#downtime-competencies .cc-flow-sub   { color: var(--cream-dim); font-size: 0.72rem; }
#downtime-competencies .cc-flow-action input.cc-manual-prac-hits { width: 56px; }

#downtime-competencies .cc-adjust {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

#downtime-competencies .cc-adjust button {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#downtime-competencies .cc-adjust button:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}

#downtime-competencies .cc-wp-minus { color: #e9a36b; }
#downtime-competencies .cc-wp-plus  { color: #8fc6a0; }
#downtime-competencies .cc-wp-zero  { color: var(--cream-dark); margin-left: auto; }

#downtime-competencies .cc-tbd {
  color: var(--cream-dark);
  font-style: italic;
  font-size: 0.76rem;
}

#downtime-competencies .cc-note {
  color: var(--cream);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* ─── DAY CARD INLINE RL CHIP (Phase 1a) ──────────────── */

.ddc-rl-chip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 10px;
  margin: 4px 0 6px;
  background: rgba(143,198,160,0.06);
  border-left: 3px solid rgba(143,198,160,0.45);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.74rem;
}

.ddc-rl-chip .ddc-rl-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.66rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.ddc-rl-chip .ddc-rl-calc {
  font-family: 'Courier New', monospace;
  color: var(--cream-dark);
  font-size: 0.72rem;
}

.ddc-rl-chip .ddc-rl-total {
  margin-left: auto;
  font-family: 'Courier New', monospace;
  color: #8fc6a0;
  font-weight: bold;
}

/* ─── ADVANCEMENT TAB ───────────────────────────────── */

.advancement-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.advancement-summary .as-cell {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-align: center;
}

.advancement-summary .as-highlight {
  background: rgba(212,168,83,0.10);
  border-color: var(--gold-dim);
}

.advancement-summary .as-progress {
  grid-column: span 2;
  text-align: left;
}

.advancement-summary .as-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.68rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.advancement-summary .as-val {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
}

.advancement-summary .as-highlight .as-val { color: #a8e0b8; }

.advancement-summary .as-bonus {
  font-size: 0.82rem;
  color: #8fc6a0;
  margin-left: 4px;
}

.advancement-summary .as-progress .as-val {
  font-size: 0.95rem;
  color: var(--cream);
}

/* ── Chapter Log (Advancement tab) — Q1.2 CP-by-Category ───────── */
.chapter-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chapter-log .cl-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--cream-dim);
}
.chapter-log .cl-running {
  color: var(--cream-dim);
}
.chapter-log .cl-running strong {
  color: var(--gold-light);
}
.chapter-log .cl-running.mismatch strong {
  color: #e79090;
}
.chapter-log .cl-empty {
  background: var(--bg-card);
  border: 1px dashed var(--bg-mid);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  color: var(--cream-dark);
  font-size: 0.9rem;
}
.chapter-log .cl-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.chapter-log .cl-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}
.chapter-log .cl-head-left {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  flex: 1 1 60%;
}
.chapter-log .cl-num {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.chapter-log .cl-title {
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--bg-mid);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 2px 4px;
  min-width: 160px;
  flex: 1 1 auto;
}
.chapter-log .cl-title:focus {
  outline: none;
  border-color: var(--gold-dim);
  background: var(--bg-dark);
}
.chapter-log .cl-total {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.chapter-log .cl-del-btn {
  background: transparent;
  border: 1px solid var(--bg-mid);
  color: var(--cream-dark);
  border-radius: var(--radius);
  padding: 3px 10px;
  cursor: pointer;
  font-size: 0.78rem;
}
.chapter-log .cl-del-btn:hover {
  border-color: #a04040;
  color: #e79090;
}

/* Chapter Log commit/decommit + lock state — Rome 2026-04-26.
   When a chapter row is committed, all its inputs become disabled and
   the card gets a "locked" visual treatment so it's clear at a glance
   which chapters' CP/SC/SP are currently applied to the character. */
.cl-card.cl-committed {
  background: rgba(120, 180, 120, 0.06);
  border-left: 3px solid var(--gold-dim);
}
.cl-card.cl-committed .cl-field,
.cl-card.cl-committed .cl-title,
.cl-card.cl-committed .cl-notes {
  background: rgba(50, 50, 50, 0.25);
  color: var(--cream-dim);
  cursor: not-allowed;
}

/* Compact committed-chapter view (Rome 2026-05-11). When a chapter is
   committed, _renderChapterCard renders a stripped-down version of the
   card — just a summary line, the note (read-only), and the Decommit
   button. These styles handle the compact-card chrome. */
.chapter-log .cl-card.cl-committed .cl-head-committed {
  margin-bottom: 6px;
}
.chapter-log .cl-card.cl-committed .cl-title-static {
  font-family: var(--font-title);
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  color: var(--cream);
  font-style: italic;
  padding-left: 4px;
}
.chapter-log .cl-card.cl-committed .cl-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 4px;
  font-size: 0.84rem;
  color: var(--cream-dim);
}
.chapter-log .cl-card.cl-committed .cl-sum-cell {
  white-space: nowrap;
}
.chapter-log .cl-card.cl-committed .cl-sum-cell strong {
  color: var(--gold-light, #e8c878);
  font-weight: 600;
  font-family: 'Courier New', monospace;
  font-size: 0.92em;
  margin-left: 2px;
}
.chapter-log .cl-card.cl-committed .cl-notes-static {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.14);
  border-left: 2px solid rgba(212, 175, 55, 0.30);
  border-radius: 3px;
  color: var(--cream-dim);
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.cl-commit-btn {
  background: rgba(120, 180, 120, 0.18);
  color: #a8e0b8;
  border: 1px solid #a8e0b8;
  border-radius: var(--radius);
  padding: 4px 12px;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s, color 0.15s;
}
.cl-commit-btn.pending {
  background: rgba(120, 180, 120, 0.18);
  color: #a8e0b8;
  border-color: #a8e0b8;
}
.cl-commit-btn.pending:hover {
  background: rgba(120, 180, 120, 0.32);
}
.cl-commit-btn.committed {
  background: rgba(180, 140, 80, 0.18);
  color: var(--gold-light);
  border-color: var(--gold-dim);
}
.cl-commit-btn.committed:hover {
  background: rgba(180, 140, 80, 0.32);
}

.chapter-log .cl-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.chapter-log .cl-cat {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.chapter-log .cl-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.chapter-log .cl-cat-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.68rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.chapter-log .cl-cat-cap {
  font-size: 0.7rem;
  color: var(--cream-dark);
}
.chapter-log .cl-cat-total {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.05rem;
  font-weight: 600;
}
.chapter-log .cl-cat-total.over-cap {
  color: #e79090;
}
.chapter-log .cl-breakdown {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  font-size: 0.8rem;
  color: var(--cream-dim);
}
.chapter-log .cl-breakdown label {
  white-space: nowrap;
}
.chapter-log .cl-breakdown input {
  width: 44px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  color: var(--cream);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: var(--font-body);
  text-align: right;
}
.chapter-log .cl-breakdown input:focus {
  outline: none;
  border-color: var(--gold-dim);
}
.chapter-log .cl-notes {
  width: 100%;
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  resize: vertical;
  min-height: 38px;
}
.chapter-log .cl-notes:focus {
  outline: none;
  border-color: var(--gold-dim);
}
.chapter-log .cl-commit-btn {
  font-size: 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chapter-log .cl-commit-btn:hover {
  background: var(--gold-dim);
  color: var(--bg-card);
}
.chapter-log .cl-card--committed .cl-commit-btn {
  background: var(--gold-dim);
  color: var(--bg-card);
  border-color: var(--gold-light);
}
.chapter-log .cl-card--committed {
  opacity: 0.85;
  border-color: var(--gold-dim);
}
.chapter-log .cl-card--committed input,
.chapter-log .cl-card--committed textarea {
  background: var(--bg-card);
  color: var(--cream-dim);
  cursor: not-allowed;
}
.chapter-log .cl-card--committed .cl-del-btn {
  opacity: 0.5;
  pointer-events: none;
}
.chapter-log .cl-add-btn {
  background: var(--bg-card);
  border: 1px dashed var(--gold-dim);
  color: var(--gold-light);
  padding: 10px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  align-self: flex-start;
}
.chapter-log .cl-add-btn:hover {
  background: rgba(212,168,83,0.10);
}

/* ── Modifier overlay badge (on defense / pool / stat values) ───── */
.mod-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 10px;
  letter-spacing: 0.3px;
  cursor: help;
  vertical-align: middle;
}
.mod-badge.up   { background: rgba(168, 224, 184, 0.14); color: #a8e0b8; border: 1px solid rgba(168,224,184,0.3); }
.mod-badge.down { background: rgba(231, 144, 144, 0.14); color: #e79090; border: 1px solid rgba(231,144,144,0.3); }

/* ── Stress Acc badge (Skills tab Base Roll) ─────────────────────────
   Inline pill on the Skill row's Base Roll cell that flags Stress Acc(-N)
   raising the threshold. Tone is dim red — same family as .mod-badge.down
   but smaller and uppercased. Hover-tip explains the band + magnitude. */
.stress-acc-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 0.62rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 10px;
  background: rgba(216, 128, 128, 0.16);
  color: #e79090;
  border: 1px solid rgba(231, 144, 144, 0.35);
  cursor: help;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Modifiers in Effect panel (Stats tab rollup) ─────────────────── */
.modifier-rollup {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modifier-rollup .mr-group {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.modifier-rollup .mr-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.modifier-rollup .mr-family {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.modifier-rollup .mr-count {
  color: var(--cream-dark);
  font-size: 0.72rem;
}
.modifier-rollup .mr-source {
  padding: 4px 0;
  border-top: 1px solid var(--bg-mid);
}
.modifier-rollup .mr-source:first-child { border-top: none; padding-top: 0; }
.modifier-rollup .mr-source-name {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 3px;
}
.modifier-rollup .mr-mods {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.modifier-rollup .mr-mod {
  font-size: 0.82rem;
  color: var(--cream-dim);
  font-family: var(--font-mono, Menlo, monospace);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.modifier-rollup .mr-mod .mr-effect {
  color: var(--gold-light);
  white-space: nowrap;
}
.modifier-rollup .mr-mod .mr-text {
  flex: 1 1 auto;
  color: var(--cream-dim);
  text-align: right;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modifier-rollup .mr-empty {
  padding: 14px;
  text-align: center;
  color: var(--cream-dark);
  font-style: italic;
  font-size: 0.85rem;
}
.modifier-rollup .mr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--cream-dim);
  font-size: 0.78rem;
  font-family: var(--font-body);
  margin-top: 2px;
}
.modifier-rollup .mr-toggle input {
  cursor: pointer;
}
.modifier-rollup .mr-toggle-label {
  color: var(--cream-dark);
}
.modifier-rollup .mr-toggle-label.on {
  color: var(--gold-light);
}

/* ── Milestone banner + Quality modal (Q2.1 per D-2026-04-23-11) ──── */
.milestone-banner {
  background: rgba(212,168,83,0.10);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.milestone-banner .mb-msg {
  color: var(--cream);
  font-size: 0.9rem;
}
.milestone-banner .mb-msg strong {
  color: var(--gold-light);
  font-family: var(--font-title);
  letter-spacing: 0.5px;
}
.milestone-banner .mb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.milestone-banner button {
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.milestone-banner button:hover {
  background: rgba(212,168,83,0.18);
}
.milestone-banner .mb-elected {
  font-size: 0.82rem;
  color: #a8e0b8;
  font-style: italic;
}

.milestone-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow: auto;
}
.milestone-modal-scrim.active { display: flex; }
.milestone-modal {
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  max-width: 720px;
  width: 100%;
  padding: 22px 24px;
  color: var(--cream);
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
}
.milestone-modal h3 {
  font-family: var(--font-title);
  color: var(--gold-light);
  margin: 0 0 6px 0;
  letter-spacing: 0.8px;
}
.milestone-modal .mm-sub {
  color: var(--cream-dim);
  font-size: 0.88rem;
  margin-bottom: 14px;
}
.milestone-modal .mm-arc {
  color: var(--cream-dark);
  font-size: 0.8rem;
  margin-bottom: 10px;
}
.milestone-modal .mm-qual-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  max-height: 50vh;
  overflow: auto;
  padding-right: 4px;
}
.milestone-modal .mm-qual {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
}
.milestone-modal .mm-qual:hover,
.milestone-modal .mm-qual.selected {
  border-color: var(--gold-dim);
  background: rgba(212,168,83,0.08);
}
.milestone-modal .mm-qual-name {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.92rem;
}
.milestone-modal .mm-qual-type {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.milestone-modal .mm-qual-desc {
  grid-column: 1 / -1;
  color: var(--cream-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}
.milestone-modal .mm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--bg-mid);
  padding-top: 12px;
}
.milestone-modal .mm-actions button {
  padding: 8px 16px;
  border-radius: var(--radius);
  font-family: var(--font-title);
  font-size: 0.82rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
}
.milestone-modal .mm-cancel {
  background: transparent;
  border: 1px solid var(--bg-mid);
  color: var(--cream-dim);
}
.milestone-modal .mm-confirm {
  background: var(--gold-dim);
  border: 1px solid var(--gold-dim);
  color: var(--bg-dark);
}
.milestone-modal .mm-confirm:disabled {
  background: var(--bg-mid);
  border-color: var(--bg-mid);
  color: var(--cream-dark);
  cursor: not-allowed;
}

/* ── Spend CP — shopping-cart staging surface (Q8.4 / Q3.1) ── */
/* Sticky header at the top of the Spend CP host — CP available + staged
   totals across CP / Silver / Downtime, visible while scrolling through
   long category sections. Themed to match .advancement-summary (gold-on-
   bg-dark cells with the available-cp cell highlighted in the same green
   the summary strip uses for CP Available). Rome 2026-04-26. */
.scp-sticky {
  position: sticky;
  /* Sits just below the sticky .tab-bar, which now pins below the sticky
     defenses banner (top: var(--banner-h)). The tab-bar is ~36-40px tall;
     +44px keeps a small gap. (Rome 2026-07-20) */
  top: calc(var(--banner-h, 0px) + 44px);
  z-index: 5;
  display: grid;
  /* 4 resource groups: CP / Silver / SC / Downtime. CP, Silver, SC each
     hold a paired Available + Staged sub-grid; Downtime is solo. */
  grid-template-columns: 2fr 2fr 2fr 1fr;
  gap: 10px;
  padding: 10px;
  margin-bottom: 12px;
  background: rgba(20, 24, 32, 0.96);
  backdrop-filter: blur(6px);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.scp-sticky-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px 6px 4px 6px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(212, 168, 83, 0.18);
  border-radius: var(--radius);
  position: relative;
}
.scp-sticky-group.solo {
  grid-template-columns: 1fr;
}
.scp-sticky-group-label {
  position: absolute;
  top: -8px;
  left: 10px;
  background: rgba(20, 24, 32, 0.96);
  padding: 0 6px;
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  z-index: 1;
}
.scp-sticky-group-flag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  font-size: 0.62rem;
  background: rgba(180, 80, 60, 0.22);
  border: 1px solid rgba(180, 80, 60, 0.5);
  border-radius: 2px;
  color: #e09080;
  vertical-align: middle;
  letter-spacing: 0.5px;
}
.scp-sticky .scp-sticky-cell {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 6px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* "Available" cells across all groups get the gold-highlight treatment,
   marking the primary "what you have to spend" number for each resource. */
.scp-sticky .scp-sticky-cell.available {
  background: rgba(212, 168, 83, 0.10);
  border-color: var(--gold-dim);
}
.scp-sticky .scp-sticky-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.62rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.scp-sticky .scp-sticky-val {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
}
/* Available cells use the same green as .as-highlight on the summary
   strip — visual continuity across both surfaces. */
.scp-sticky .scp-sticky-cell.available .scp-sticky-val { color: #a8e0b8; }
.scp-sticky .scp-sticky-val.overspend {
  color: #d88080;
}
.scp-sticky .scp-sticky-after {
  font-size: 0.78rem;
  color: var(--cream-dim);
  font-weight: 400;
  font-family: var(--font-body);
  margin-left: 4px;
}

/* ── Modifier Watch widget (right margin, all pages) ───────────────────
   Fixed-position aside on the right side of the viewport. Lives just
   below the topbar + tab-bar (~84px) and runs to the bottom of the
   viewport. Body content shifts left via #character-view padding-right
   when expanded; collapses to a thin handle when the user wants the
   space back. Per Rome 2026-04-26. */
#character-view { padding-right: 0; transition: padding-right 0.18s ease; }
#character-view.mw-has-watch { padding-right: 308px; }
#character-view.mw-has-watch.mw-collapsed { padding-right: 40px; }

/* Concoction Active toggle — buff state on Owned cards (added 2026-04-28). */
.wc-ammo-fire.concoction-active {
  background: #2d2d2d;
  color: #ddd;
  border: 1px solid #555;
}
.wc-ammo-fire.concoction-active.on {
  background: #6a3;
  color: #fff;
  border-color: #4a2;
  font-weight: 500;
}
.wc-ammo-fire.concoction-active:hover { filter: brightness(1.15); }

.modifier-watch {
  position: fixed;
  top: 84px;
  right: 12px;
  bottom: 12px;
  width: 296px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  background: var(--bg-darkest);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0,0,0,0.55);
  overflow: hidden;
  transition: width 0.18s ease, right 0.18s ease;
}
.modifier-watch.mw-collapsed {
  width: 32px;
  right: 12px;
}
.modifier-watch.mw-collapsed .mw-title,
.modifier-watch.mw-collapsed .mw-count,
.modifier-watch.mw-collapsed .mw-body {
  display: none;
}
.modifier-watch .mw-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(212, 168, 83, 0.10);
  border-bottom: 1px solid var(--gold-dim);
}
.modifier-watch .mw-title {
  flex: 1;
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.72rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.modifier-watch .mw-count {
  background: var(--bg-mid);
  color: var(--cream);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-family: var(--font-body);
}
.modifier-watch .mw-toggle {
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  font-family: inherit;
  transition: transform 0.2s ease;
}
.modifier-watch .mw-toggle:hover { background: rgba(212, 168, 83, 0.15); }
.modifier-watch.mw-collapsed .mw-toggle { transform: rotate(180deg); }
.modifier-watch.mw-collapsed .mw-head {
  flex-direction: column;
  padding: 6px 4px;
  border-bottom: none;
}

.modifier-watch .mw-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modifier-watch .mw-empty {
  color: var(--cream-dim);
  font-size: 0.78rem;
  font-style: italic;
  padding: 12px 4px;
  text-align: center;
}
.modifier-watch .mw-group {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
  padding: 6px 8px;
}
.modifier-watch .mw-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.62rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.modifier-watch .mw-group-count {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--cream-dim);
}
.modifier-watch .mw-source {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dotted rgba(255,255,255,0.05);
}
.modifier-watch .mw-source:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.modifier-watch .mw-source-name {
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.modifier-watch .mw-mod {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--cream-dim);
  padding: 1px 0;
}
.modifier-watch .mw-mod-effect {
  color: #a8e0b8;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
}
.modifier-watch .mw-mod-effect.dim { color: var(--cream-dark); }
.modifier-watch .mw-mod-target {
  color: var(--cream-dim);
  flex: 1;
  text-align: right;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staged-pool {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.staged-pool .sp-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.staged-pool .sp-title { font-weight: 600; color: var(--cream); }
.staged-pool .sp-count {
  display: inline-block; background: var(--bg-mid); color: var(--cream);
  border-radius: 10px; padding: 1px 8px; font-size: 11px; margin-left: 4px;
}
.staged-pool .sp-total { margin-left: auto; color: #a8e0b8; font-weight: 600; }
.staged-pool .sp-total.overspend { color: #e0a8a8; }
.staged-pool .sp-commit {
  background: rgba(168, 224, 184, 0.15);
  border: 1px solid rgba(168, 224, 184, 0.5);
  color: #c8e8d8; padding: 3px 12px; border-radius: 3px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.staged-pool .sp-commit:hover { background: rgba(168, 224, 184, 0.28); }
.staged-pool .sp-commit:disabled {
  background: transparent; border-color: rgba(255, 255, 255, 0.10);
  color: var(--cream-dark); cursor: not-allowed;
}
.staged-pool .sp-discard {
  background: transparent; border: 1px solid rgba(255, 100, 100, 0.4);
  color: #e0a8a8; padding: 3px 10px; border-radius: 3px;
  font-size: 12px; cursor: pointer;
}
.staged-pool .sp-discard:hover { background: rgba(255, 100, 100, 0.1); }
.staged-pool .sp-empty { color: var(--cream-dark); font-size: 13px; font-style: italic; }
.staged-pool .sp-list { list-style: none; margin: 0; padding: 0; }
.staged-pool .sp-item {
  display: grid; grid-template-columns: 110px 1fr auto auto;
  gap: 10px; align-items: center; padding: 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px;
}
.staged-pool .sp-type { text-transform: capitalize; color: var(--cream-dark); font-size: 11px; }
.staged-pool .sp-label { color: var(--cream); }
.staged-pool .sp-cp { color: #a8e0b8; font-weight: 600; }
.staged-pool .sp-remove {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--cream-dark); font-size: 11px; padding: 2px 8px;
  border-radius: 3px; cursor: pointer;
}
.staged-pool .sp-remove:hover { color: #e0a8a8; border-color: rgba(255, 100, 100, 0.4); }

/* Debt summary row inside the staged pool */
.staged-pool .sp-debt {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid rgba(212, 168, 83, 0.5);
  border-radius: 0 4px 4px 0;
  font-size: 11.5px;
  color: var(--cream-dark);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
  line-height: 1.6;
}
.staged-pool .sp-debt-label { color: var(--cream); font-weight: 600; margin-right: 4px; }
.staged-pool .sp-debt-item { color: var(--cream); }
.staged-pool .sp-debt-item.sp-debt-warn { color: #e0a8a8; }
.staged-pool .sp-debt-sep { color: var(--cream-dark); opacity: 0.5; }

/* Use Social Capital toggle row */
.staged-pool .sp-sc-toggle {
  margin-top: 4px; padding: 4px 10px 4px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 3px 3px 0;
  border-left: 3px solid rgba(168, 184, 224, 0.4);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-size: 11px; color: var(--cream-dark);
}
.staged-pool .sp-sc-label {
  display: flex; align-items: center; gap: 6px;
  color: var(--cream); cursor: pointer; user-select: none;
}
.staged-pool .sp-sc-label input[type="checkbox"] { cursor: pointer; margin: 0; }
.staged-pool .sp-sc-label input[type="checkbox"]:disabled { cursor: not-allowed; }
.staged-pool .sp-sc-label input[type="checkbox"]:disabled + span {
  color: var(--cream-dark); opacity: 0.6;
}
.staged-pool .sp-sc-detail { margin-left: auto; opacity: 0.7; font-size: 10.5px; }

/* Inline numeric input for kvBlock cells (Social tab Status). */
.inline-num-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--cream);
  padding: 2px 6px; border-radius: 3px;
  font-size: 12px; width: 70px; text-align: right;
}
.inline-num-input:focus { outline: 1px solid var(--gold-dim); }

/* Derived display — read-only field whose value is computed elsewhere. */
.derived-display { color: var(--cream); font-weight: 500; }
.derived-display-hint {
  color: var(--cream-dark);
  font-size: 0.78rem;
  font-style: italic;
  margin-left: 6px;
  opacity: 0.75;
}

/* ── Languages & Literacy (Theme tab) — read-only display ── */
.kv-h3-hint {
  font-weight: 400;
  color: var(--cream-dark);
  font-size: 0.78rem;
  margin-left: 8px;
  font-style: italic;
}
.lang-empty {
  color: var(--cream-dark);
  font-size: 13px;
  font-style: italic;
  padding: 4px 0 8px;
  line-height: 1.45;
}
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.lang-card {
  background: rgba(212, 168, 83, 0.06);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lang-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lang-card-family {
  color: var(--cream-dark);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lang-card-name {
  color: var(--cream);
  font-weight: 600;
  font-size: 13px;
}
.lang-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  margin-top: 2px;
}
.lang-card-fluency {
  color: var(--cream);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
}
.lang-card-literate {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.lang-card-literate.lang-literate-yes {
  color: #a8e0b8;
  background: rgba(168, 224, 184, 0.12);
}
.lang-card-literate.lang-literate-no {
  color: var(--cream-dark);
  background: rgba(255, 255, 255, 0.04);
}
/* Clickable literacy pill — gold outline on hover/active, cursor pointer.
   Sheet-elected pills (Literate via mech.adhoc_literacy) keep the green
   tint of .lang-literate-yes; revoke action shown via title. Per Rome
   2026-05-11. */
.lang-card-literate.lang-literate-clickable {
  cursor: pointer;
  outline: 1px solid transparent;
  transition: outline-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lang-card-literate.lang-literate-clickable:hover {
  outline-color: var(--gold-dim, #a07830);
  color: var(--gold-light, #e8c878);
  background: rgba(212, 175, 55, 0.12);
}
/* Literacy pool indicator in the section header. Renders next to the
   "SLHH 10 Table 7I" hint (or replaces it when pool > 0). Gold-tinted so
   the "available" count is glanceable; <strong> bumps it harder. */
.kv-h3-hint.lang-literacy-pool {
  font-style: normal;
}
.kv-h3-hint.lang-literacy-pool strong {
  color: var(--gold-light, #e8c878);
  font-family: 'Courier New', monospace;
  font-weight: 700;
  margin: 0 2px;
}

/* ── Training Obligations (Downtime tab) ── */
.dt-obl-empty {
  color: var(--cream-dark); font-size: 13px; padding: 8px 0;
}
.dt-obl-banner {
  background: rgba(224, 200, 168, 0.10);
  border: 1px solid rgba(224, 200, 168, 0.4);
  border-left: 4px solid rgba(224, 200, 168, 0.7);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: #f0d8a8;
  margin-bottom: 10px;
  line-height: 1.45;
}
.dt-obl-banner strong { color: #fff0c8; }
.dt-obl-pool {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(168, 184, 224, 0.15);
  border: 1px solid rgba(168, 184, 224, 0.45);
  border-radius: 10px;
  color: #c8d8e8;
}
.dt-obl-pool strong { color: #e8f0ff; }
.dt-obl-pool-detail { color: var(--cream-dark); margin-left: 4px; font-size: 11.5px; }
.dt-obl-pool-hint { color: var(--cream-dark); font-style: italic; margin-left: 6px; }

/* Untrained pill — red flag on any obligation with remaining segments.
   Per Rome 2026-05-12: visibility cue that an item hasn't completed
   training yet. */
.dt-obl-untrained-pill {
  display: inline-block;
  padding: 1px 8px;
  background: rgba(224, 100, 100, 0.18);
  border: 1px solid rgba(224, 100, 100, 0.6);
  border-radius: 10px;
  color: #ffb8b8;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-left: 6px;
  cursor: help;
}

/* Spend-from-Pool button — distinct from the ±1 segment Sage-adjust buttons */
.dt-obl-spend-pool {
  background: rgba(168, 184, 224, 0.18);
  border: 1px solid rgba(168, 184, 224, 0.55);
  color: #d8e0f0;
  padding: 4px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.12s ease;
}
.dt-obl-spend-pool:hover:not(:disabled) {
  background: rgba(168, 184, 224, 0.32);
  border-color: rgba(168, 184, 224, 0.8);
  color: #f0f4ff;
}
.dt-obl-spend-pool:disabled {
  opacity: 0.4; cursor: not-allowed;
}

/* Current Focus picker — retained selectors for legacy save-loads */
.dt-obl-focus {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  margin-bottom: 10px; font-size: 12px;
}
.dt-obl-focus-label {
  color: var(--cream); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dt-obl-focus-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.dt-obl-focus-pill {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--cream-dark); padding: 3px 10px; border-radius: 12px;
  font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.dt-obl-focus-pill:hover {
  border-color: rgba(255, 255, 255, 0.30); color: var(--cream);
}
.dt-obl-focus-pill.active {
  background: rgba(168, 224, 184, 0.15);
  border-color: rgba(168, 224, 184, 0.5);
  color: #c8e8d8; font-weight: 500;
}
.dt-obl-focus-pill-meta { color: var(--cream-dark); font-size: 10px; opacity: 0.75; }
.dt-obl-focus-pill.active .dt-obl-focus-pill-meta { color: #a8e0b8; opacity: 0.9; }

.dt-obl-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px;
}
.dt-obl-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: 12.5px;
}
.dt-obl-card.dt-obl-paid { opacity: 0.65; }
.dt-obl-card.dt-obl-paid .dt-obl-actions { display: none; }
.dt-obl-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.dt-obl-label { font-weight: 600; color: var(--cream); font-size: 13px; }
.dt-obl-status {
  font-size: 10px; padding: 1px 8px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid currentColor;
}
.dt-obl-status-pending     { color: #e0c8a8; }
.dt-obl-status-in_progress { color: #c8d8e0; }
.dt-obl-status-paid        { color: #a8e0b8; }

.dt-obl-meta {
  display: flex; gap: 8px; flex-wrap: wrap; font-size: 10.5px; color: var(--cream-dark);
}
.dt-obl-meta-item {
  background: rgba(255, 255, 255, 0.05); border-radius: 3px; padding: 1px 6px;
}
.dt-obl-meta-item.dt-obl-warn {
  background: rgba(224, 200, 168, 0.10); color: #e0c8a8;
  border: 1px solid rgba(224, 200, 168, 0.3);
}

.dt-obl-progress { display: flex; align-items: center; gap: 8px; }
.dt-obl-bar {
  flex: 1; height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px; overflow: hidden;
}
.dt-obl-bar-fill {
  height: 100%; background: rgba(168, 224, 184, 0.55);
  transition: width 0.18s ease;
}
.dt-obl-progress-label { font-size: 11px; color: var(--cream-dark); white-space: nowrap; }

.dt-obl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dt-obl-field { display: flex; flex-direction: column; gap: 2px; }
.dt-obl-field-label {
  font-size: 10px; color: var(--cream-dark);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dt-obl-field input[type="text"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--cream); padding: 3px 6px; border-radius: 3px;
  font-size: 12px; width: 100%; box-sizing: border-box;
}
.dt-obl-field input[type="text"]:focus { outline: 1px solid var(--gold-dim); }

.dt-obl-actions { display: flex; gap: 6px; margin-top: 4px; }
.dt-obl-actions button {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--cream); padding: 3px 10px; border-radius: 3px;
  font-size: 11.5px; cursor: pointer;
}
.dt-obl-actions button:hover { background: rgba(255, 255, 255, 0.06); }
.dt-obl-actions button:disabled { color: var(--cream-dark); opacity: 0.5; cursor: not-allowed; }
.dt-obl-actions .dt-obl-remove {
  margin-left: auto; border-color: rgba(255, 100, 100, 0.3); color: #e0a8a8;
}
.dt-obl-actions .dt-obl-remove:hover { background: rgba(255, 100, 100, 0.10); }

.dt-obl-footer {
  display: flex; gap: 10px; align-items: center;
  margin-top: 10px; flex-wrap: wrap;
}

.dt-obl-add {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  color: var(--cream-dim); padding: 6px 12px; border-radius: 4px;
  font-size: 12px; cursor: pointer;
}
.dt-obl-add:hover { background: rgba(255, 255, 255, 0.04); color: var(--cream); }

/* Clear All — destructive twin of the Add button. Red-tinted dashed
   border + muted text by default, red wash on hover. Disabled state
   greys out cleanly. Per Rome 2026-05-22. */
.dt-obl-clear {
  margin-left: auto;
  background: transparent;
  border: 1px dashed rgba(224, 168, 168, 0.35);
  color: #c8a0a0;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dt-obl-clear:hover:not(:disabled) {
  background: rgba(255, 100, 100, 0.08);
  border-color: rgba(255, 100, 100, 0.5);
  color: #e0a8a8;
}
.dt-obl-clear:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Per-day "training debt pending" inline warning */
.ddc-training-warn {
  margin-top: 6px; padding: 4px 10px;
  background: rgba(224, 200, 168, 0.08);
  border-left: 3px solid rgba(224, 200, 168, 0.6);
  border-radius: 0 3px 3px 0;
  color: #e0c8a8; font-size: 11.5px; line-height: 1.45;
}
.ddc-training-warn-icon { margin-right: 4px; font-size: 12px; }

/* Commit Downtime widget at the bottom of the Downtime tab */
.dt-commit {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
}
.dt-commit-empty {
  color: var(--cream-dark); font-size: 13px; font-style: italic; padding: 8px 0;
}
.dt-commit-summary {
  flex: 1; min-width: 240px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px; color: var(--cream);
}
.dt-commit-row { line-height: 1.45; }
.dt-commit-label { color: var(--cream-dark); font-weight: 500; margin-right: 4px; }
.dt-commit-hint {
  color: var(--cream-dark); font-size: 11px; font-style: italic; margin-top: 2px;
}
.dt-commit-actions { flex-shrink: 0; }
.dt-commit-btn {
  background: rgba(168, 224, 184, 0.15);
  border: 1px solid rgba(168, 224, 184, 0.5);
  color: #c8e8d8; padding: 6px 16px; border-radius: 4px;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.dt-commit-btn:hover { background: rgba(168, 224, 184, 0.28); }

/* Section <details> — collapsible category groups */
.scp-section {
  margin: 12px 0; border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px; background: rgba(255, 255, 255, 0.02);
}
.scp-section[open] { padding-bottom: 8px; }
.scp-section .scp-summary {
  cursor: pointer; padding: 8px 12px; display: flex;
  align-items: baseline; gap: 12px; flex-wrap: wrap; list-style: none;
}
.scp-section .scp-summary::-webkit-details-marker { display: none; }
.scp-section .scp-summary::before {
  content: '✦'; display: inline-block; margin-right: 8px;
  color: var(--gold-dim); font-size: 0.9em;
  transition: color 0.15s ease;
}
.scp-section .scp-summary::after {
  content: '▸'; display: inline-block; margin-left: 6px;
  color: var(--gold-dim); transition: transform 0.15s ease, color 0.15s ease;
}
.scp-section[open] .scp-summary::after { transform: rotate(90deg); color: var(--gold); }
.scp-section[open] .scp-summary::before { color: var(--gold); }
.scp-section .scp-title { font-family: var(--font-title); font-weight: 600; color: var(--gold); font-size: 1.0rem; letter-spacing: 1.2px; text-transform: uppercase; transition: color 0.15s ease; }
.scp-section .scp-hint { color: var(--cream-dim); font-size: 0.78rem; font-style: italic; }
.scp-section .scp-body {
  padding: 4px 12px 8px 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
}
.scp-section .scp-disc-block {
  grid-column: 1 / -1; display: contents;
}
.scp-section .scp-disc-head, .scp-section .scp-subhead {
  grid-column: 1 / -1; padding: 6px 0 2px 0; font-weight: 600;
  color: var(--cream); font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.scp-section .scp-disc-meta {
  font-weight: 400; color: var(--cream-dark); font-size: 11px; margin-left: 8px;
}
.scp-section .scp-empty {
  grid-column: 1 / -1; color: var(--cream-dark);
  font-size: 13px; font-style: italic; padding: 8px 0;
}

/* Card — used by every category */
.scp-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px; font-size: 12.5px;
}
.scp-card .scp-card-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.scp-card .scp-card-name { color: var(--cream); font-weight: 600; }
.scp-card .scp-code {
  color: var(--cream-dark); font-size: 10px; font-weight: 400; margin-left: 4px;
}
.scp-card .scp-card-cp { color: #a8e0b8; font-weight: 600; font-size: 12px; }
.scp-card .scp-card-status { color: var(--cream-dark); font-size: 11px; line-height: 1.35; }

/* Spend-CP click-to-show description toggles (Rome 2026-05-11). Each
   purchase card carries a <details><summary> "Show description" link
   that expands to reveal the canonical description from the data layer
   (ability.Description, disciplineMeta.description, competencyMeta.core,
   talent.Description). The summary uses the gold-dim italic styling of
   small affordances elsewhere on the Spend-CP card; the body sits in a
   quiet inset block so the prose doesn't compete with the action chrome
   above it. */
.scp-desc-wrap {
  margin-top: 4px;
  font-size: 11.5px;
}
.scp-desc-wrap > .scp-desc-toggle {
  cursor: pointer;
  color: var(--gold-dim);
  font-style: italic;
  list-style: none;
  user-select: none;
  letter-spacing: 0.2px;
  padding: 1px 0;
  display: inline-block;
}
.scp-desc-wrap > .scp-desc-toggle::-webkit-details-marker { display: none; }
.scp-desc-wrap > .scp-desc-toggle::before {
  content: '▸';                         /* ▸ */
  margin-right: 4px;
  display: inline-block;
  color: var(--gold-dim);
  transition: transform 0.15s ease, color 0.15s ease;
}
.scp-desc-wrap[open] > .scp-desc-toggle::before {
  transform: rotate(90deg);
  color: var(--gold);
}
.scp-desc-wrap > .scp-desc-toggle:hover {
  color: var(--gold-light, #e8c878);
}
.scp-desc-wrap[open] > .scp-desc-toggle {
  color: var(--gold);
}
.scp-desc-body {
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 2px solid rgba(212, 175, 55, 0.30);
  border-radius: 3px;
  color: var(--cream-dim, #b0a898);
  font-style: italic;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Talent description wrapper — talent rows are a horizontal flex
   layout, so the description toggle needs to break to its own line. */
.scp-focus-desc-wrap {
  /* Parent .scp-focus-row is a 4-col grid (8px | 1fr | auto | auto). The
     wrapper must span the entire row, otherwise it lands in the 8px
     bullet column on a new implicit row and the body wraps one
     character at a time. Per Rome 2026-05-11. */
  grid-column: 1 / -1;
  margin-top: 2px;
  width: 100%;
  min-width: 0;
}
.scp-focus-desc-wrap .scp-desc-wrap {
  margin-left: 14px;     /* indent under the bullet */
}
.scp-focus-desc-wrap .scp-desc-body {
  /* Body lives inside a tight card, so cap typography to match the
     compact talent row above it. */
  font-size: 11px;
  line-height: 1.4;
}
.scp-card .scp-tier {
  display: inline-block; padding: 1px 6px; border-radius: 8px;
  font-size: 10px; font-weight: 500; margin-left: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.scp-card .scp-tier-core         { color: #c8c8c8; }
.scp-card .scp-tier-basic        { color: #a8c8e0; border-color: rgba(168, 200, 224, 0.3); }
.scp-card .scp-tier-intermediate { color: #c8a8e0; border-color: rgba(200, 168, 224, 0.3); }
.scp-card .scp-tier-advanced     { color: #e0c8a8; border-color: rgba(224, 200, 168, 0.3); }
.scp-card .scp-warn {
  font-size: 10.5px; color: #e0c8a8; font-style: italic;
  background: rgba(224, 200, 168, 0.06); padding: 3px 6px;
  border-radius: 3px; border-left: 2px solid rgba(224, 200, 168, 0.4);
}
.scp-card .scp-stage {
  align-self: flex-start; background: rgba(168, 224, 184, 0.10);
  border: 1px solid rgba(168, 224, 184, 0.35); color: #a8e0b8;
  padding: 3px 10px; border-radius: 3px; font-size: 11.5px; cursor: pointer;
}
.scp-card .scp-stage:hover { background: rgba(168, 224, 184, 0.20); }
.scp-card .scp-stage:disabled {
  background: transparent; border-color: rgba(255, 255, 255, 0.10);
  color: var(--cream-dark); cursor: not-allowed;
}
.scp-card .scp-stage.staged {
  background: rgba(168, 224, 184, 0.20); color: var(--cream);
  border-color: rgba(168, 224, 184, 0.4);
}

/* Skills & Focuses combined card */
.scp-card-skill { padding: 8px 10px; }
.scp-card-skill .scp-skill-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding-bottom: 4px;
}
.scp-card-skill .scp-skill-meta {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; flex: 1; min-width: 0;
}
.scp-card-skill .scp-skill-meta .scp-card-name { font-size: 13px; font-weight: 600; color: var(--cream); }
.scp-card-skill .scp-skill-meta .scp-code {
  font-size: 10px; color: var(--cream-dark); background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px; border-radius: 3px; letter-spacing: 0.04em;
}
.scp-card-skill .scp-skill-status { font-size: 11px; color: var(--cream-dark); }
.scp-card-skill .scp-skill-status em { color: #a8e0b8; font-style: normal; }
.scp-card-skill .scp-focus-list {
  border-left: 2px solid rgba(212, 168, 83, 0.25);
  margin-left: 6px; padding-left: 10px;
  display: flex; flex-direction: column; gap: 3px; margin-top: 4px;
}
.scp-card-skill .scp-focus-row {
  display: grid; grid-template-columns: 8px 1fr auto auto;
  align-items: center; gap: 6px; padding: 2px 0; font-size: 11.5px;
}
.scp-card-skill .scp-focus-bullet {
  color: var(--cream-dark); text-align: center; font-size: 11px; opacity: 0.6;
}
.scp-card-skill .scp-focus-name {
  color: var(--cream); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.scp-card-skill .scp-focus-status {
  color: var(--cream-dark); font-size: 10.5px; white-space: nowrap;
}
.scp-card-skill .scp-focus-row.scp-focus-locked .scp-focus-name,
.scp-card-skill .scp-focus-row.scp-focus-locked .scp-focus-status { opacity: 0.5; }
.scp-card-skill .scp-focus-stage {
  background: rgba(168, 224, 184, 0.10);
  border: 1px solid rgba(168, 224, 184, 0.30);
  color: #a8e0b8; padding: 2px 8px; border-radius: 3px;
  font-size: 10.5px; cursor: pointer; white-space: nowrap;
}
.scp-card-skill .scp-focus-stage:hover { background: rgba(168, 224, 184, 0.20); }
.scp-card-skill .scp-focus-stage:disabled {
  background: transparent; border-color: rgba(255, 255, 255, 0.08);
  color: var(--cream-dark); cursor: not-allowed; opacity: 0.65;
}
.scp-card-skill .scp-focus-stage.staged {
  background: rgba(168, 224, 184, 0.20); color: var(--cream);
  border-color: rgba(168, 224, 184, 0.4);
}

/* ── Save error summary (Q3.5) — persistent region near Save button ── */
.save-error-summary {
  position: fixed;
  top: 54px;
  right: 16px;
  z-index: 50;
  max-width: 380px;
  background: rgba(70, 30, 30, 0.96);
  border: 1px solid #a04040;
  border-radius: var(--radius);
  padding: 10px 12px;
  color: #f3cfcf;
  font-size: 0.82rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  display: none;
}
.save-error-summary.active {
  display: block;
}
.save-error-summary .ses-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: var(--font-title);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #e79090;
  font-size: 0.72rem;
}
.save-error-summary .ses-count {
  background: #a04040;
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-family: var(--font-body);
}
.save-error-summary ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.save-error-summary li {
  line-height: 1.35;
}
.save-error-summary .ses-source {
  color: #f3cfcf;
  font-weight: 600;
  margin-right: 4px;
}

.ability-table .tag-core-auto {
  display: inline-block;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 10px;
  background: rgba(100, 180, 120, 0.20);
  color: #a8e0b8;
  font-size: 0.62rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
  vertical-align: middle;
}

/* ─── COMMON TABLE STYLE ─────────────────────────────── */

.sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-bottom: 12px;
}

/* Skills & Focuses (Rome 2026-06-17): each Attribute group is a separate
   table, so with the default auto layout each one sizes its columns to its
   own content and the columns drift out of alignment between groups. Lock
   them to a fixed grid — the thead width:% values (18/10/12/30/30) become
   authoritative, so every group's Skill/Training/Base Roll/Focus/Focus
   columns line up. Scoped to #skills-body so other tabs' tables are
   unaffected. */
#skills-body table.sheet-table { table-layout: fixed; }
#skills-body table.sheet-table td,
#skills-body table.sheet-table th { overflow-wrap: anywhere; }

.sheet-table thead th {
  background: var(--bg-dark);
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 12px;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid var(--bg-mid);
}

.sheet-table tbody tr {
  border-bottom: 1px solid rgba(35,35,64,0.5);
}

.sheet-table tbody tr:last-child { border-bottom: none; }

.sheet-table tbody tr:hover { background: rgba(212,168,83,0.04); }

.sheet-table td {
  padding: 8px 12px;
  color: var(--cream);
  vertical-align: top;
}

.sheet-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--gold-light);
}

.sheet-table td.muted { color: var(--cream-dim); }

.sheet-table td.pool {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--gold-light);
}

.sheet-table .focus-list {
  color: var(--cream-dim);
  font-size: 0.88rem;
}

.sheet-table .focus-list .focus-tag {
  display: inline-block;
  padding: 1px 8px;
  margin: 1px 4px 1px 0;
  border-radius: 10px;
  background: rgba(212,168,83,0.1);
  color: var(--gold-light);
  border: 1px solid var(--gold-dim);
  font-size: 0.82rem;
}

.sheet-table .focus-list .focus-tag .lvl { color: var(--cream-dark); margin-left: 4px; }

.sheet-table td.focus-cell {
  font-size: 0.88rem;
  white-space: nowrap;
}

.sheet-table th.col-center, .sheet-table td.col-center { text-align: center; }

/* First focus cell gets extra left padding to visually separate it from Base Roll */
.sheet-table td.focus-cell.focus-first,
.sheet-table th.focus-first { padding-left: 28px; }

.sheet-table td.focus-cell .fname { color: var(--cream); }
.sheet-table td.focus-cell .fadd  { color: var(--cream-dim); margin: 0 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem; }
.sheet-table td.focus-cell .fadd.zero { color: var(--cream-dark); }
.sheet-table td.focus-cell .ftotal {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.sheet-table td.focus-cell.trained .fname { color: var(--gold-light); font-weight: 500; }

/* Custom dice adjustment input — lets the player add situational dice to a focus roll */
.sheet-table td.focus-cell .fadj {
  width: 40px;
  padding: 1px 4px;
  margin: 0 6px;
  background: var(--bg-dark);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.sheet-table td.focus-cell .fadj::-webkit-outer-spin-button,
.sheet-table td.focus-cell .fadj::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sheet-table td.focus-cell .fadj:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-base);
}
.sheet-table td.focus-cell .fadj.nonzero {
  border-color: var(--gold-dim);
  color: var(--gold-light);
}
.sheet-table td.focus-cell.adjusted .ftotal { color: var(--gold); font-weight: 600; }

/* Section-header toggle (e.g. show/hide untrained skills) */
.section-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--cream-dim);
  cursor: pointer;
  user-select: none;
}
.section-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.section-toggle .switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  background: var(--bg-mid);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.section-toggle .switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--cream-dark);
  border-radius: 50%;
  transition: transform 0.15s ease, background 0.15s ease;
}
.section-toggle input:checked + .switch {
  background: rgba(212,168,83,0.25);
  border-color: var(--gold);
}
.section-toggle input:checked + .switch::after {
  transform: translateX(14px);
  background: var(--gold-light);
}
.section-toggle:hover .switch { border-color: var(--gold); }

/* ─── KEY/VALUE GRID ─────────────────────────────────── */

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.kv-block {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.kv-block h3 {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--bg-mid);
}

.kv-rows { display: grid; grid-template-columns: max-content 1fr; row-gap: 6px; column-gap: 14px; font-size: 0.92rem; }
.kv-rows dt { color: var(--gold-dim); font-size: 0.82rem; letter-spacing: 0.5px; }
.kv-rows dd { color: var(--cream); }
.kv-rows dd.muted { color: var(--cream-dim); font-style: italic; }
.kv-rows dd .kv-desc { color: var(--cream-dim); font-style: italic; font-size: 0.86em; margin-left: 6px; }
/* A derived value with a hover breakdown (species factors / attributes show
   their modifications on hover). Dotted underline signals "hover for the math."
   Rome 2026-06-23. */
.kv-rows dd .kv-derived { border-bottom: 1px dotted var(--gold-dim, #c9a978); cursor: help; }

/* ─── OVERVIEW LAYOUT ────────────────────────────────── */

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.stat-tile {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.stat-tile h3 {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--bg-mid);
}

/* Pools widget — Stats tab. Rome 2026-04-26 redesign.
   Derived pools (AP/RP/Fate) get a Start cell; manual pools (Morale,
   Tactics, Strain, Prophecy) skip it. ± buttons flank the persisted
   current value. */
.pools-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pools-bar .pool-row {
  display: grid;
  grid-template-columns: 110px 80px 28px 56px 28px;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
}
.pools-bar .pool-row-sep {
  height: 1px;
  background: var(--gold-dim);
  opacity: 0.35;
  margin: 4px 0;
}
.pools-bar .pool-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.74rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.pools-bar .pool-start {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(212, 168, 83, 0.05);
  border: 1px dashed rgba(212, 168, 83, 0.18);
  border-radius: 3px;
  color: var(--cream-dim);
  font-size: 0.78rem;
}
.pools-bar .pool-start.pool-start-empty {
  background: transparent;
  border: 1px dashed transparent;
}
.pools-bar .pool-start-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pools-bar .pool-start-val {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-weight: 600;
  font-size: 0.95rem;
}
.pools-bar .pool-btn {
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  border-radius: 4px;
  width: 26px;
  height: 24px;
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
}
.pools-bar .pool-btn:hover {
  background: rgba(212, 168, 83, 0.15);
}
.pools-bar .pool-cur {
  text-align: center;
  font-family: var(--font-title);
  color: var(--cream);
  font-weight: 600;
  font-size: 1.05rem;
  background: var(--bg-darkest);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  padding: 2px 0;
}

.stat-grid-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 10px;
  text-align: center;
}

.stat-grid-compact .cell .code {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.68rem;
  letter-spacing: 1.5px;
}

.stat-grid-compact .cell .val {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
}

/* ─── TAG / PILL ─────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 2px 10px;
  margin: 2px 4px 2px 0;
  border-radius: 12px;
  background: rgba(212,168,83,0.1);
  color: var(--gold-light);
  border: 1px solid var(--gold-dim);
  font-size: 0.82rem;
  letter-spacing: 0.3px;
}

.tag.muted { color: var(--cream-dim); border-color: var(--bg-mid); background: rgba(0,0,0,0.2); }

/* ─── TRAIT CARDS (behaviors / qualities / directive) ─── */
/* Used by the Theme tab's behavior and quality blocks. Each card shows
   a name on top and a small italic description below. Grid parent lays
   them out responsively. */

.trait-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

/* Full-width kv-block — span every column of the parent .kv-grid so
   wide content (Qualities tile-grid, Languages list) gets horizontal
   room to fill instead of crammed into one column. Per Rome 2026-04-25. */
.kv-block-wide { grid-column: 1 / -1; }

.trait-card {
  background: rgba(212,168,83,0.06);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 8px 12px;
}

.trait-card .t-name {
  color: var(--gold-light);
  font-family: var(--font-title);
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}

.trait-card .t-desc {
  color: var(--cream-dim);
  font-size: 0.82rem;
  line-height: 1.4;
}

.trait-card .t-desc.missing {
  color: var(--cream-dark);
  font-style: italic;
  font-size: 0.78rem;
}

.trait-card .t-type {
  display: inline-block;
  background: rgba(212,168,83,0.12);
  border: 1px solid var(--gold-dim);
  color: var(--gold-dim);
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 10px;
  margin-bottom: 5px;
}

/* Toggle UI region inside a trait card (Qualities — and any other family
   wired through `_traitCardsBlock` with opts.toggleFamily). Reuses the
   `.ab-toggle*` widget styles from the abilities table; this wrapper just
   provides a small gap below the description so the dropdown / checkbox
   doesn't collide with it. The inner widgets carry their own background,
   border, and dropdown chrome. */
.trait-card .t-notes {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.directive-quote {
  background: rgba(212,168,83,0.06);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-style: italic;
  color: var(--cream);
  font-size: 0.92rem;
  line-height: 1.5;
}

.directive-quote.muted { color: var(--cream-dim); font-style: normal; }

/* ─── IDENTITY CARDS (archetype + flaw callouts) ─── */
/* Larger, more prominent than trait-cards. Used in the Theme tab's
   Thematic Identity section to show Archetype and Flaw names with their
   canonical SLHH descriptions. Two-column on wide screens, stacks on narrow. */

.identity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.identity-card {
  background: rgba(212,168,83,0.08);
  border: 1px solid var(--bg-mid);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.identity-card .i-label {
  color: var(--gold-dim);
  font-size: 0.68rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.identity-card .i-name {
  color: var(--gold-light);
  font-family: var(--font-title);
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.identity-card .i-sub {
  color: var(--gold-dim);
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.identity-card .i-desc {
  color: var(--cream);
  font-size: 0.85rem;
  line-height: 1.5;
}

.identity-card .i-desc.missing {
  color: var(--cream-dark);
  font-style: italic;
  font-size: 0.8rem;
}

/* ─── COMBAT TAB ─────────────────────────────────────── */
/* Two-column top band: armor + resists on the left, wound matrix on the
   right. Stacks on narrow widths. Weapons loadout takes the full width
   below. Table-style grids use monospace for column alignment. */

.combat-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .combat-top { grid-template-columns: 1fr; }
}

.combat-equip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.combat-select-label {
  color: var(--gold-dim);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.combat-select {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  color: var(--cream);
  padding: 4px 8px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.88rem;
  min-width: 180px;
}

.combat-select:focus {
  outline: none;
  border-color: var(--gold-dim);
}

.combat-add-btn {
  background: rgba(212,168,83,0.12);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  padding: 4px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
}

.combat-add-btn:hover:not(:disabled) {
  background: rgba(212,168,83,0.2);
}

.combat-add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.combat-subhead {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 14px 0 6px 0;
}

/* Phase 7 W6 follow-up (Rome 2026-05-15) — Senses panel on the Combat
   tab. Shows active Senses (Species-conferred + magic-item grants) as
   compact rows alongside Armor and Resists. */
.combat-senses-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
}
.combat-sense-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  padding: 2px 4px;
}
.combat-sense-name {
  font-weight: 600;
  color: var(--cream);
}
.combat-sense-name.magic {
  color: #c8b0e8;
}
.combat-sense-detail {
  font-size: 0.76rem;
  color: rgba(200, 190, 170, 0.75);
}
.combat-sense-source {
  font-size: 0.74rem;
  color: rgba(200, 190, 170, 0.55);
  font-style: italic;
}
.combat-senses-empty {
  padding: 6px 8px;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(200, 190, 170, 0.55);
  background: rgba(0, 0, 0, 0.12);
  border: 1px dashed var(--bg-mid);
  border-radius: var(--radius);
}

/* Combat status bar — compact strip above armor that aggregates
   character-level combat stats (Distinctive, and future additions like
   Skulk Rating, Distinctive, Stability, etc.) by pulling from
   ModifierEngine targets like stat.Distinctive. */
.combat-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
}
.csb-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 112px;
  padding: 6px 10px;
  border-left: 3px solid var(--gold-dim);
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
}
.csb-tile .csb-label {
  font-family: var(--font-title);
  font-size: 0.68rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.csb-tile .csb-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--gold-light);
  line-height: 1.1;
}
.csb-tile .csb-value.zero { color: var(--cream-dark); }
.csb-tile .csb-sources {
  font-size: 0.72rem;
  color: var(--cream-dark);
  margin-top: 3px;
  line-height: 1.35;
}
.csb-tile .csb-source-pill {
  display: inline-block;
  padding: 0 5px;
  margin: 1px 2px 0 0;
  border-radius: 2px;
  background: rgba(212,168,83,0.12);
  border: 1px solid rgba(212,168,83,0.25);
  color: var(--gold-light);
  font-size: 0.68rem;
}
/* Pain tile — red accent when active, gold when ignored. Houses the
   Ignore checkbox under the numeric value. */
.csb-tile.csb-pain { border-left-color: rgba(192,80,77,0.45); min-width: 128px; }
.csb-tile.csb-pain .csb-value { color: var(--cream-dark); }
.csb-tile.csb-pain-active { border-left-color: #c05049; background: rgba(192,80,77,0.10); }
.csb-tile.csb-pain-active .csb-value { color: #e09b97; }
.csb-tile .csb-pain-ignore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--cream-dark);
  cursor: pointer;
}
.csb-tile .csb-pain-ignore input { accent-color: var(--gold-dim); cursor: pointer; }
.csb-tile .csb-pain-ignore input:disabled { cursor: not-allowed; }

.csb-tile .csb-source-pill.negative {
  background: rgba(192,80,77,0.12);
  border-color: rgba(192,80,77,0.4);
  color: #e09b97;
}

/* Stress tile — Phase 12+ (Rome 2026-05-07). Sits next to Strain on the
   Combat status bar. Color scales by canonical SLHH 9 §503-520 Band:
   Steady (calm gold) → Pressured / Cracking (warning amber) → Crushing /
   Breaking / Broken (escalating red). Acc penalty pill in the corner. */
.csb-tile.csb-stress { min-width: 130px; }
.csb-tile.csb-stress-steady    { border-left-color: rgba(168, 224, 184, 0.45); }
.csb-tile.csb-stress-steady .csb-value { color: #a8e0b8; }
.csb-tile.csb-stress-pressured { border-left-color: rgba(212, 168, 83, 0.55); background: rgba(212, 168, 83, 0.06); }
.csb-tile.csb-stress-pressured .csb-value { color: var(--gold-light, #e8c878); }
.csb-tile.csb-stress-cracking  { border-left-color: rgba(212, 132, 53, 0.65); background: rgba(212, 132, 53, 0.08); }
.csb-tile.csb-stress-cracking  .csb-value { color: #e8a45a; }
.csb-tile.csb-stress-crushing  { border-left-color: rgba(196, 96, 64, 0.7);  background: rgba(196, 96, 64, 0.10); }
.csb-tile.csb-stress-crushing  .csb-value { color: #e08a64; }
.csb-tile.csb-stress-breaking  { border-left-color: rgba(196, 64, 64, 0.75); background: rgba(196, 64, 64, 0.12); }
.csb-tile.csb-stress-breaking  .csb-value { color: #e08a8a; }
.csb-tile.csb-stress-broken    { border-left-color: #c44040; background: rgba(196, 64, 64, 0.18); }
.csb-tile.csb-stress-broken    .csb-value { color: #f0a0a0; }

.csb-tile .csb-stress-band {
  display: inline-block;
  padding: 1px 7px;
  margin-top: 4px;
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.3);
  color: var(--cream, #e8e0d0);
  font-weight: 500;
}
.csb-tile .csb-stress-band-steady    { color: #a8e0b8; }
.csb-tile .csb-stress-band-pressured { color: var(--gold-light, #e8c878); }
.csb-tile .csb-stress-band-cracking  { color: #e8a45a; }
.csb-tile .csb-stress-band-crushing  { color: #e08a64; }
.csb-tile .csb-stress-band-breaking  { color: #e08a8a; }
.csb-tile .csb-stress-band-broken    { color: #f0a0a0; }

.csb-tile .csb-stress-acc {
  margin-top: 3px;
  font-size: 0.72rem;
  color: #e08a8a;
  font-weight: 600;
}

/* Combat-bottom: vertical stack — full-width Weapons loadout on top, the
   Parry + Block Calculator pair side-by-side below. Per Rome 2026-05-25,
   opened up so the weapons card has the width to surface more ranged-
   weapon info (Loadtime, Misfire, range bands, etc.). */
.combat-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.combat-weapons-col {
  min-width: 0;
}
/* Parry + Block row — two equal columns side-by-side, stacking on narrow
   viewports so neither calculator gets crushed. */
.combat-parry-block-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.combat-parry-block-row > .sheet-section {
  min-width: 0;
}
@media (max-width: 900px) {
  .combat-parry-block-row { grid-template-columns: 1fr; }
}

/* Parry Calculator — rows per Parry Boost ability, each with name, EVA
   bonus, cost_display, and a toggle checkbox. Bottom totals row shows
   effective EVA bonus from active toggles + a comma-separated cost list. */
.parry-calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.parry-calc-table th,
.parry-calc-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--bg-mid);
  text-align: left;
}
.parry-calc-table thead th {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gold-dim);
}
.parry-calc-table .pc-eva {
  text-align: center;
  font-weight: bold;
  color: var(--gold-light);
  width: 58px;
  white-space: nowrap;
}
.parry-calc-table .pc-eva.zero { color: var(--cream-dark); font-weight: normal; }
.parry-calc-table .pc-cost {
  color: var(--cream-dim);
  font-size: 0.76rem;
  font-style: italic;
}
.parry-calc-table .pc-toggle {
  width: 40px;
  text-align: center;
}
.parry-calc-table .pc-toggle input { accent-color: var(--gold-dim); cursor: pointer; }
.parry-calc-table tr.pc-active { background: rgba(212,168,83,0.08); }
.parry-calc-table tr.pc-active .pc-name { color: var(--gold-light); }
.parry-calc-table tfoot td {
  border-top: 2px solid var(--gold-dim);
  border-bottom: none;
  padding-top: 8px;
  font-weight: bold;
  color: var(--gold-light);
}
.parry-calc-table tfoot .pc-eva { font-size: 1rem; }
.parry-calc-empty {
  color: var(--cream-dim);
  font-style: italic;
  font-size: 0.85rem;
  padding: 10px;
}

/* Armor / resists hardness row — 8 damage types + extent */
.hardness-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 8 damage types; Extent moved to per-layer rows (Rome 2026-07-20, COMBAT-01) */
  gap: 2px;
  background: var(--bg-mid);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  overflow: hidden;
}

.hardness-grid .hg-head,
.hardness-grid .hg-cell {
  padding: 6px 4px;
  text-align: center;
  background: var(--bg-card);
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
}

.hardness-grid .hg-head {
  background: rgba(212,168,83,0.08);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hardness-grid .hg-cell {
  color: var(--cream);
}

.hardness-grid .hg-cell.zero { color: var(--cream-dark); }
.hardness-grid .hg-cell.extent { color: var(--gold-light); font-weight: bold; }

/* COMBAT-02 (Rome 2026-07-20): data-first armor layout — Total grid on top,
   per-layer blocks (each with its own grid + Extent/Cover + toggles). */
.armor-total-block { margin-bottom: 10px; }
.armor-total-label,
.armor-layer-name {
  font-family: var(--font-title); color: var(--gold-dim);
  font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 4px;
}
.armor-total-block .hardness-grid .hg-cell { font-weight: 700; }
.armor-layer-block {
  border: 1px solid rgba(212,168,83,0.18);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(212,168,83,0.03);
}
.armor-layer-block.bypassed { opacity: 0.5; }
.armor-layer-block.armor-layer-spell { border-left: 3px solid var(--accent, #6e85b7); }
.armor-layer-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.armor-layer-name { margin-bottom: 0; text-transform: none; letter-spacing: 0.4px; font-size: 0.82rem; }
.armor-layer-name .hint { color: var(--cream-dim); font-weight: 400; }
.armor-layer-ext {
  margin-left: auto; font-family: 'Courier New', monospace; font-size: 0.82rem;
  color: var(--cream); white-space: nowrap;
}
.armor-layer-ext.combat-armor-cover .combat-armor-ext-lbl { color: var(--accent, #6e85b7); }
.armor-layer-ext .combat-armor-ext-lbl { color: var(--gold-dim); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 3px; }
.armor-layer-ext .combat-armor-ext-helm { color: var(--cream-dark); font-size: 0.72rem; margin-left: 4px; }
.hardness-grid-layer .hg-head { font-size: 0.62rem; padding: 3px 4px; }
.hardness-grid-layer .hg-cell { font-size: 0.82rem; padding: 4px 4px; }

/* Armor panel meta row (name + keywords) */
.armor-meta {
  padding: 6px 0 8px 0;
  color: var(--cream-dim);
  font-size: 0.82rem;
  line-height: 1.4;
}

.armor-meta .tag { margin-right: 4px; }
/* Combat-tab armor: per-slot layered picker (SLHH 6) */
.combat-armor-slots {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.combat-armor-slot-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
}
.combat-armor-slot-row .combat-select-label {
  font-size: 0.72rem; letter-spacing: 0.6px; text-align: left;
  color: var(--gold-dim); text-transform: uppercase;
  white-space: nowrap;
}
.combat-armor-slot-row .combat-select { width: 100%; min-width: 0; }
.combat-armor-slot-row.locked .combat-select-label { opacity: 0.45; }
.combat-armor-slot-row.locked .combat-select {
  opacity: 0.5; cursor: not-allowed;
}
.combat-armor-slot-sub {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-left: 100px; padding-top: 1px;
  font-size: 0.72rem; letter-spacing: 0.5px; color: var(--cream-dim);
  text-transform: uppercase;
}
.combat-armor-slot-sub.bypassed { opacity: 0.55; }
.combat-armor-ext {
  display: inline-flex; align-items: baseline; gap: 4px;
}
.combat-armor-ext-lbl {
  color: var(--gold-dim); font-size: 0.66rem; letter-spacing: 0.7px;
}
.combat-armor-ext strong {
  color: var(--gold-light); font-family: 'Courier New', monospace;
  font-size: 0.85rem;
}
.combat-armor-bypass-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; white-space: nowrap;
}
.combat-armor-bypass-toggle input { margin: 0; cursor: pointer; }
.combat-armor-slot-toggles {
  display: inline-flex; align-items: center; gap: 12px;
}
.combat-armor-helm-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; white-space: nowrap;
  color: var(--gold-light);
}
.combat-armor-helm-toggle input { margin: 0; cursor: pointer; }
.combat-armor-ext-helm {
  color: var(--gold-light); font-size: 0.66rem; letter-spacing: 0.4px;
  margin-left: 3px;
}

/* Cycle Maintenance Assignments panel — top of Combat tab (above Body
   Power). Four canonical toggles in a responsive grid. Per Rome
   2026-05-11. */
#combat-cycle-assignments .cma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.cma-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--bg-mid);
  background: rgba(0, 0, 0, 0.20);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}
.cma-card:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--gold-dim, rgba(212,175,55,0.4));
}
.cma-card.on {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--gold-dim, rgba(212,175,55,0.55));
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.15);
}
.cma-card.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cma-card .cma-toggle {
  flex: 0 0 auto;
  margin-top: 3px;
  cursor: pointer;
}
.cma-card.disabled .cma-toggle { cursor: not-allowed; }
.cma-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cma-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}
.cma-name {
  font-family: var(--font-title);
  font-size: 1.0rem;
  color: var(--cream, #e8d8b0);
  letter-spacing: 0.4px;
}
.cma-card.on .cma-name { color: var(--gold-light, #e8c878); }
.cma-cost {
  flex: 0 0 auto;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--gold-dim, rgba(212,175,55,0.4));
  color: var(--gold-dim, rgba(212,175,55,0.85));
  background: rgba(0,0,0,0.30);
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.cma-card.on .cma-cost {
  color: var(--gold-light, #e8c878);
  border-color: var(--gold-dim, rgba(212,175,55,0.65));
}
.cma-effect {
  font-size: 0.86rem;
  color: var(--cream-dim, #b0a898);
  line-height: 1.4;
  word-break: break-word;
}
.cma-note {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--cream-dim, #b0a898);
  opacity: 0.85;
  line-height: 1.35;
  word-break: break-word;
  padding-top: 2px;
}
.cma-footnote {
  font-size: 0.74rem;
  font-style: italic;
  color: var(--cream-dim, #b0a898);
  opacity: 0.70;
  text-align: right;
  padding-top: 4px;
}


.armor-meta-line { margin-top: 3px; font-size: 0.82rem; line-height: 1.4; }
.armor-meta-line strong { color: var(--gold-light); margin-right: 4px; }


/* Resist strip — compact row mirroring the armor Hardness bar footprint.
   12 canonical subtypes + All. Keep the same visual language as
   `.hardness-grid` but with narrower cells so the whole row fits under
   the armor panel without hogging the column. */
.resist-strip {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2px;
  background: var(--bg-mid);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  overflow: hidden;
}
.resist-strip .rs-head,
.resist-strip .rs-cell {
  padding: 4px 2px;
  text-align: center;
  background: var(--bg-card);
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  line-height: 1.1;
  min-width: 0;
}
.resist-strip .rs-head {
  background: rgba(212,168,83,0.08);
  color: var(--gold-dim);
  font-size: 0.62rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.resist-strip .rs-cell { color: var(--cream); }
.resist-strip .rs-cell.zero { color: var(--cream-dark); }
/* Modifier-aggregated resist cell — subtle gold tint + cursor hint to
   signal that the displayed total incorporates ModifierEngine deltas
   (gear keywords + derivedFromDefense entries like Psychic Resilience).
   Hover the cell for the per-source breakdown. */
.resist-strip .rs-cell.has-mod { color: var(--gold-light); cursor: help; }
.resist-strip .rs-head.all,
.resist-strip .rs-cell.all {
  background: rgba(212,168,83,0.16);
  color: var(--gold-light);
  font-weight: bold;
}
.resist-strip .rs-head[title] { cursor: help; }

/* Static Wound Matrix — fixed 5-column × 12-row grid (Rome's v3 spec,
   narrowed per monster team ruling 2026-05-28).
   Column A = wound label, B = Mort value, C-E = 3 block cells.
   Rows 2-6 = Light/Moderate/Heavy/Severe/Critical (LP-driven, 3 cells each).
   Row 7 = spacer.  Rows 8-10 = Mortal (8 cells, 3+3+2 layout, BOD-driven).
   Row 11 = "Minor Wounds" banner. Row 12 = Minor-Wound cells (flex row).
   Each block cell has a pre-computed threshold and flips white when the
   relevant stat meets it; black otherwise. Purely informational display. */
.static-wound-grid {
  display: grid;
  grid-template-columns: auto auto repeat(3, minmax(28px, 1fr));
  gap: 1px;
  background: var(--bg-mid);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.82rem;
}

.static-wound-grid .swg-head {
  padding: 5px 10px;
  background: rgba(0,0,0,0.3);
  color: var(--gold-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
}
.static-wound-grid .swg-head.blocks { grid-column: span 3; }

.static-wound-grid .swg-label {
  padding: 6px 12px;
  background: var(--bg-card);
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.92rem;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
}

.static-wound-grid .swg-mort {
  padding: 6px 12px;
  background: var(--bg-card);
  color: var(--cream-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  text-align: center;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.static-wound-grid .swg-empty {
  background: var(--bg-card);
  /* Match swg-block min-height so Mortal rows 9-10 (which use empties as
     col A/B filler) don't collapse shorter than row 8's label-driven height.
     Per Rome 2026-05-28 — keeps the whole matrix grid visually uniform. */
  min-height: 32px;
}

.static-wound-grid .swg-block {
  background: #0a0a0a;
  min-height: 32px;
  border: 1px solid transparent;
}
.static-wound-grid .swg-block.white {
  background: var(--cream);
  border-color: rgba(0,0,0,0.35);
}
/* Mortal blocks render red (not white) when active — death tier cue. */
.static-wound-grid .swg-block.mortal.white {
  background: #c33030;
  border-color: #6a1515;
}

.static-wound-grid .swg-spacer {
  grid-column: span 5;
  background: var(--bg-card);
  min-height: 6px;
}

.static-wound-grid .swg-mw-banner {
  grid-column: span 5;
  padding: 5px 10px;
  background: rgba(0,0,0,0.3);
  color: var(--gold-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
}

/* Minor-Wound cells live in their own flex row below the banner so the
   count can grow beyond 6 without wrapping to a new grid row. Spans all
   5 grid columns; cells inside share width evenly. */
.static-wound-grid .swg-mw-row {
  grid-column: span 5;
  display: flex;
  gap: 1px;
  background: var(--bg-mid);
}
.static-wound-grid .swg-mw-row .swg-block {
  flex: 1 1 0;
  min-width: 28px;
}

/* Minor-Wound bonus slot — marks cells that exist only because of active
   modifier blocks (e.g. Bearskin Warrior::Red Rage's +1 while Berserk).
   Gold border distinguishes them from the 6 base slots; fills normally
   when a minor wound reaches that threshold. */
.static-wound-grid .swg-block.swg-mw-bonus {
  border: 1px dashed var(--gold);
  background: rgba(212, 168, 83, 0.08);
}
.static-wound-grid .swg-block.swg-mw-bonus.white {
  background: var(--gold-light);
  border-color: var(--gold);
}

/* Block-slot cell — deprecated visual distinction. Blocks are just buffer
   slots filled by a modifier source; the player sees them as normal filled
   slots (same cream-white as damage-absorbed slots). The banner + tooltip
   convey the source; no visual divergence needed. */

.wound-matrix-meta {
  display: flex;
  gap: 12px;
  font-size: 0.72rem;
  color: var(--cream-dark);
  margin-bottom: 6px;
  font-style: italic;
  flex-wrap: wrap;
}
.wound-matrix-meta span {
  color: var(--gold-dim);
  font-style: normal;
}

/* Wound Log — interactive list of individual wound records. Add button
   opens an inline form; each entry shows severity, type, mortality, HP
   to Heal (SLHH 9 Table 6C), notes, lingering toggle, and controls. */
.wound-log {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wound-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gold-dim);
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 2px;
}
.wound-log-header button {
  background: rgba(212,168,83,0.12);
  color: var(--gold-light);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 3px 10px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
}
.wound-log-header button:hover { background: rgba(212,168,83,0.22); }
.wound-entry {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 6px 8px;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(60px, 1fr) minmax(0, auto);
  gap: 4px 10px;
  align-items: center;
  font-size: 0.78rem;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.wound-entry.severity-mortal { border-left-color: #b43838; }
.wound-entry.severity-critical { border-left-color: #e2705e; }
.wound-entry.severity-severe { border-left-color: #e9a36b; }
.wound-entry.lingering { background: rgba(138, 30, 30, 0.08); }
.wound-entry .we-sev {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  min-width: 66px;
}
.wound-entry .we-type {
  font-family: 'Courier New', monospace;
  color: var(--cream);
  font-size: 0.76rem;
  min-width: 68px;
}
/* Subtype badge on lingering wounds — Burning / Frostbitten / Lingering (manual).
   Distinguishes Burning-flagged Fire wounds from one-shot Fire wounds, etc. */
.wound-entry .we-ling-tag {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 3px;
  background: rgba(138, 30, 30, 0.18);
  color: var(--cream-dark);
  border: 1px solid rgba(138, 30, 30, 0.35);
  vertical-align: middle;
}
.wound-entry .we-meta {
  color: var(--cream-dark);
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  line-height: 1.3;
  white-space: nowrap;
  min-width: 0;
}
.wound-entry .we-meta span.mort { color: var(--gold-light); }
.wound-entry .we-meta span.heal { color: #8fc6a0; }
.wound-entry .we-notes {
  background: transparent;
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  color: var(--cream);
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  padding: 3px 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.wound-entry .we-notes:focus { outline: 1px solid var(--gold-dim); }
.wound-entry .we-ctl {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wound-entry .we-ctl button {
  background: rgba(212,168,83,0.06);
  color: var(--cream-dark);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 2px 5px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.wound-entry .we-ctl button:hover {
  background: rgba(212,168,83,0.2);
  color: var(--gold-light);
}
.wound-entry .we-ctl button.ling.on {
  background: rgba(138, 30, 30, 0.3);
  color: #ffcbcb;
  border-color: rgba(180, 40, 40, 0.5);
}

/* Eth/Psy: lingering is canonically always-on; show a locked variant
   so the button reads as fixed rather than just disabled. */
.wound-entry .we-ctl button.ling.locked {
  background: rgba(138, 30, 30, 0.22);
  color: #ffcbcb;
  border-color: rgba(180, 40, 40, 0.4);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 0.95;
}
.wound-entry .we-ctl button.ling.locked:hover {
  background: rgba(138, 30, 30, 0.22);
  color: #ffcbcb;
}

/* Wound form Lingering checkbox label — locked-on visual cue. */
.wound-form .ling-toggle.locked-on {
  color: #ffcbcb;
  opacity: 0.9;
}
.wound-entry .we-ctl button.escalate {
  color: #e9a36b;
}
.wound-entry .we-ctl button.del:hover {
  background: rgba(180, 40, 40, 0.3);
  color: #ffcbcb;
}

/* New-wound form (inline, slides in above the log). */
.wound-form {
  background: rgba(212,168,83,0.06);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 6px 8px;
  align-items: center;
  font-size: 0.78rem;
}
.wound-form select,
.wound-form input[type="text"] {
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  color: var(--cream);
  font-family: 'Courier New', monospace;
  font-size: 0.76rem;
  padding: 4px 6px;
  min-width: 0;
}
.wound-form button {
  background: rgba(212,168,83,0.18);
  color: var(--gold-light);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 4px 12px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 0.76rem;
}
.wound-form button:hover { background: rgba(212,168,83,0.3); }
.wound-form button.cancel {
  background: transparent;
  color: var(--cream-dark);
}
.wound-form label.ling-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--cream-dark);
  font-size: 0.72rem;
  white-space: nowrap;
}

.minor-wounds-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(212,168,83,0.04);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--cream-dark);
}
.minor-wounds-row label {
  color: var(--gold-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.minor-wounds-row button {
  background: rgba(212,168,83,0.08);
  color: var(--gold-light);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 3px 10px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}
.minor-wounds-row button:hover {
  background: rgba(212,168,83,0.18);
}
.minor-wounds-row .mw-count {
  font-family: 'Courier New', monospace;
  color: var(--gold-light);
  font-weight: bold;
  min-width: 24px;
  text-align: center;
}

.wound-mortality-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(212,168,83,0.06);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  font-size: 0.82rem;
}

.wound-mortality-summary .label {
  color: var(--gold-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.wound-mortality-summary .value {
  color: var(--gold-light);
  font-family: var(--font-title);
  font-size: 1rem;
}

.wound-mortality-summary .value.warn {
  color: #e9a36b;
}

.wound-mortality-summary .value.critical {
  color: #e8665a;
}

/* Weapons loadout cards */
.weapon-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  gap: 12px;
}

.weapon-card {
  background: rgba(212,168,83,0.06);
  border: 1px solid var(--bg-mid);
  border-left: 4px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 10px 14px;
  position: relative;
}

.weapon-card .wc-name {
  color: var(--gold-light);
  font-family: var(--font-title);
  font-size: 1rem;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  padding-right: 24px;
}

.weapon-card .wc-remove {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--cream-dark);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
}

.weapon-card .wc-remove:hover { color: var(--gold-light); }

.weapon-card .wc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 4px 10px;
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.weapon-card .wc-stat .s-label {
  color: var(--gold-dim);
  font-size: 0.66rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: block;
}

.weapon-card .wc-stat .s-value {
  color: var(--cream);
  font-family: 'Courier New', monospace;
}

.weapon-card .wc-keywords {
  margin-top: 4px;
}

/* New Combat-tab weapon card layout — header row, skill badge,
   live attack-profile table with computed pool/power/modifier sources. */
.weapon-card .wc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.weapon-card .wc-name .wc-name-txt {
  color: var(--gold-light); font-family: var(--font-title); font-size: 1rem;
  letter-spacing: 0.4px;
}
.weapon-card .wc-skill-badge {
  display: inline-block; padding: 1px 7px; border-radius: 3px; margin-left: 4px;
  font-size: 0.7rem; letter-spacing: 0.5px;
  background: rgba(212,168,83,0.12); border: 1px solid rgba(212,168,83,0.4);
  color: var(--gold);
}
.weapon-card .wc-head .wc-remove {
  position: static; padding: 0 6px; font-size: 1.1rem; line-height: 1;
  background: transparent; border: none; color: var(--cream-dark); cursor: pointer;
}
.weapon-card .wc-head .wc-remove:hover { color: var(--gold-light); }

.wc-attacks-table {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(212,168,83,0.35); border-radius: 4px;
  background: rgba(0,0,0,0.18); overflow: hidden;
  margin-top: 8px;
}
.wc-attk-row {
  display: grid;
  grid-template-columns:
    minmax(120px, 1.6fr) /* Attack name */
    72px                 /* Tier      */
    48px                 /* Spd       */
    minmax(100px, 1fr)   /* Pool      */
    minmax(130px, 1.2fr) /* Pow@Th    */
    40px                 /* DT        */
    40px                 /* Pen       */
    minmax(70px, 1fr)    /* RI / mmMM */;
  gap: 8px; padding: 6px 10px; font-size: 0.78rem; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
/* Ranged attack tables need a wider Range column to fit the bands list
   ("11/22/44" up to "11/22/44/88/176" when Cat 4/5 talents are trained). */
.wc-attacks-table-ranged .wc-attk-row {
  grid-template-columns:
    minmax(120px, 1.6fr) /* Attack name */
    72px                 /* Tier      */
    48px                 /* Spd       */
    minmax(100px, 1fr)   /* Pool      */
    minmax(130px, 1.2fr) /* Pow@Th    */
    40px                 /* DT        */
    40px                 /* Pen       */
    minmax(130px, 1.5fr) /* Range bands */;
}
.wc-attk-row:last-child { border-bottom: none; }
.wc-attk-row > div { text-align: center; line-height: 1.2; }
.wc-attk-row .wc-attk-name { text-align: left; font-weight: 600; color: var(--cream); }
.wc-attk-head {
  background: rgba(212,168,83,0.1); border-bottom: 1px solid rgba(212,168,83,0.3);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gold-dim); font-family: var(--font-title); font-weight: 500;
}
.wc-attk-pool { font-family: 'Courier New', monospace; }
.wc-attk-pool strong { color: #a8e0b8; font-size: 0.95rem; }
.wc-attk-pow { font-family: 'Courier New', monospace; }
.wc-attk-pow strong { color: #e4b888; font-size: 0.95rem; }   /* damage pool — warmer than action pool */
/* Fallback styling for Pow when the formula can't be resolved (no BP yet);
   normal path uses _dicePoolPill which carries its own styling. */
.wc-attk-thr {
  color: #e4b888; font-size: 0.78rem; margin-left: 2px;
  font-family: 'Courier New', monospace;
}
/* Deadly badge — shows the Effect modifier from Deadly(+N) keywords next
   to the Pow pill so the player sees the bonus before rolling. Green to
   read as a positive damage rider, not a warning. Per Rome 2026-05-25. */
.wc-attk-deadly {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 0.7rem;
  background: rgba(140,180,120,0.18);
  border: 1px solid rgba(140,180,120,0.55);
  color: #b8d89c;
  font-family: 'Courier New', monospace;
  cursor: help;
}

/* Ammo move prompt modal — opens when player drops ammo into a container
   via the move-to dropdown. Per Rome 2026-05-25 — supports splitting one
   ammo pool across multiple containers (e.g. two arrow types in one
   quiver) by asking for the desired quantity rather than auto-moving the
   max. */
.ammo-move-prompt-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  overflow: auto;
}
.ammo-move-prompt-scrim.active { display: flex; }
.ammo-move-prompt-modal {
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  max-width: 460px;
  width: 100%;
  padding: 22px 24px 18px;
  color: var(--cream);
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
}
.ammo-move-prompt-modal .amp-title {
  font-family: var(--font-title);
  color: var(--gold-light);
  margin: 0 0 4px;
  letter-spacing: 0.8px;
  font-size: 1.05rem;
}
.ammo-move-prompt-modal .amp-sub {
  color: var(--cream-dim);
  font-size: 0.92rem;
  margin-bottom: 14px;
  font-style: italic;
}
.ammo-move-prompt-modal .amp-route {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.88rem;
}
.ammo-move-prompt-modal .amp-from,
.ammo-move-prompt-modal .amp-to {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ammo-move-prompt-modal .amp-lbl {
  font-family: var(--font-title);
  font-size: 0.62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.ammo-move-prompt-modal .amp-arrow {
  color: var(--gold-dim);
  font-size: 1.1rem;
}
.ammo-move-prompt-modal .amp-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.84rem;
  margin-bottom: 14px;
  color: var(--cream-dim);
}
.ammo-move-prompt-modal .amp-meta strong { color: var(--cream); }
.ammo-move-prompt-modal .amp-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.ammo-move-prompt-modal .amp-input-row label {
  font-size: 0.88rem;
  color: var(--cream-dim);
}
.ammo-move-prompt-modal .amp-input-row input[type="number"] {
  flex: 1;
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  color: var(--cream);
  padding: 6px 10px;
  font-size: 1rem;
  font-family: 'Courier New', monospace;
  text-align: right;
}
.ammo-move-prompt-modal .amp-input-row input[type="number"]:focus {
  outline: none;
  border-color: var(--gold-dim);
  background: rgba(212,168,83,0.06);
}
.ammo-move-prompt-modal .amp-max-btn {
  background: rgba(212,168,83,0.12);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  color: var(--gold-light);
  padding: 6px 14px;
  font-family: var(--font-title);
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.ammo-move-prompt-modal .amp-max-btn:hover {
  background: rgba(212,168,83,0.24);
}
.ammo-move-prompt-modal .amp-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ammo-move-prompt-modal .amp-cancel,
.ammo-move-prompt-modal .amp-confirm {
  padding: 7px 16px;
  border-radius: var(--radius);
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.ammo-move-prompt-modal .amp-cancel {
  background: transparent;
  border: 1px solid var(--bg-mid);
  color: var(--cream-dim);
}
.ammo-move-prompt-modal .amp-cancel:hover {
  border-color: var(--cream-dim);
  color: var(--cream);
}
.ammo-move-prompt-modal .amp-confirm {
  background: var(--gold-dim);
  border: 1px solid var(--gold-light);
  color: var(--bg-dark);
  font-weight: 600;
}
.ammo-move-prompt-modal .amp-confirm:hover {
  background: var(--gold-light);
}
.wc-attk-formula { color: var(--cream-dim); font-size: 0.7rem; }

/* Range Categories — visible bands per attack RI (SLHH 8 ¶274–289).
   Gated bands (Cat 4 / 5) are hidden when the talent isn't trained;
   tooltip on the row spells out what each band covers. */
.wc-range-bands {
  display: inline-flex; gap: 1px; align-items: baseline;
  font-family: 'Courier New', monospace; font-size: 0.78rem;
  color: var(--cream);
}
.wc-rb {
  padding: 0 2px; border-radius: 2px;
}
.wc-rb-c1 { color: #d8eed8; }
.wc-rb-c2 { color: #c8dec8; }
.wc-rb-c3 { color: #b8d0b8; }
.wc-rb-c4 { color: #d4c898; }   /* Long Distance talent — warmer */
.wc-rb-c5 { color: #e4a878; }   /* Extreme Distance talent — warmer */
.wc-rb-sep { color: rgba(255,255,255,0.25); padding: 0 1px; }

/* Ranged-meta row — Loadtime / Misfire / Heft labeled pills. Sits between
   the keyword chips and the attacks table so reload-cycle info reads at a
   glance instead of being buried in generic chips. */
.wc-ranged-meta {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 6px 0 0;
}
.wc-rmeta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 10px;
  font-size: 0.72rem; line-height: 1.2;
  background: rgba(180,150,90,0.10);
  border: 1px solid rgba(180,150,90,0.35);
  color: var(--cream);
}
.wc-rmeta-lbl {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gold-dim); font-family: var(--font-title);
}
.wc-rmeta-pill strong { font-weight: 600; color: var(--cream); }
.wc-rmeta-loadtime { background: rgba(120,150,180,0.08); border-color: rgba(120,150,180,0.35); }
.wc-rmeta-misfire  { background: rgba(192,80,77,0.10);   border-color: rgba(192,80,77,0.40);   }
.wc-rmeta-heft     { background: rgba(140,170,110,0.08); border-color: rgba(140,170,110,0.35); }
.wc-rmeta-warn {
  background: rgba(192,80,77,0.14);
  border-color: rgba(192,80,77,0.55);
  color: #f0c8c4;
}
.wc-rmeta-warn-icon { color: #e6a098; font-size: 0.85rem; }

/* Per-attack keyword strip (below each attack row in the attacks table).
   Per Rome 2026-05-25 — keywords surfaced as hoverable pills so the player
   can see the mechanical effect on hover. Pills carry tooltips populated
   from SLHH_7_Keywords.json via sageKeywordLookup(). */
.wc-attk-kws-row {
  padding: 4px 12px 6px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(212,168,83,0.04);
}
.wc-attk-kws-label {
  font-family: var(--font-title);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-dim);
  margin-right: 4px;
}
.wc-kw-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  line-height: 1.4;
  background: rgba(120,150,180,0.10);
  border: 1px solid rgba(120,150,180,0.40);
  color: var(--cream);
  cursor: help;             /* signals hoverable tooltip */
  white-space: nowrap;
}
.wc-kw-pill:hover {
  background: rgba(120,150,180,0.20);
  border-color: rgba(120,150,180,0.65);
}
/* Category coloring — different domains read differently at a glance. */
.wc-kw-cat-combat-attack    { background: rgba(140,180,120,0.10); border-color: rgba(140,180,120,0.40); }
.wc-kw-cat-combat-attack:hover { background: rgba(140,180,120,0.20); border-color: rgba(140,180,120,0.65); }
.wc-kw-cat-combat-defense   { background: rgba(120,170,200,0.10); border-color: rgba(120,170,200,0.40); }
.wc-kw-cat-combat-defense:hover { background: rgba(120,170,200,0.20); border-color: rgba(120,170,200,0.65); }
.wc-kw-cat-equipment-item   { background: rgba(200,170,110,0.10); border-color: rgba(200,170,110,0.40); }
.wc-kw-cat-equipment-item:hover { background: rgba(200,170,110,0.20); border-color: rgba(200,170,110,0.65); }
.wc-kw-cat-damage-type      { background: rgba(192,120,90,0.10); border-color: rgba(192,120,90,0.40); }
.wc-kw-cat-damage-type:hover { background: rgba(192,120,90,0.20); border-color: rgba(192,120,90,0.65); }
.wc-kw-cat-damage-behavior  { background: rgba(192,120,90,0.10); border-color: rgba(192,120,90,0.40); }
.wc-kw-cat-damage-behavior:hover { background: rgba(192,120,90,0.20); border-color: rgba(192,120,90,0.65); }
/* W1 (2026-05-28) — Sundering: anti-Structure / siege weapons. Distinct
   amber-orange accent so the Sage can spot which weapons can break Constructs
   and bulk objects without expanding the tooltip. */
.wc-kw-pill.wc-kw-sundering {
  background: rgba(220, 130, 50, 0.18);
  border-color: rgba(220, 130, 50, 0.55);
  color: #f0b870;
  font-weight: 600;
}
.wc-kw-pill.wc-kw-sundering:hover {
  background: rgba(220, 130, 50, 0.32);
  border-color: rgba(220, 130, 50, 0.85);
}
.wc-kw-pill.wc-kw-penetrating {
  background: rgba(180, 110, 200, 0.14);
  border-color: rgba(180, 110, 200, 0.45);
  color: #d8a0e8;
}
.wc-kw-pill.wc-kw-penetrating:hover {
  background: rgba(180, 110, 200, 0.28);
  border-color: rgba(180, 110, 200, 0.75);
}
.wc-mod-pill {
  display: inline-block; padding: 1px 5px; border-radius: 3px; margin: 0 1px;
  font-size: 0.68rem;
  background: rgba(120, 180, 90, 0.12); border: 1px solid rgba(120, 180, 90, 0.3);
  color: #a8d080; font-family: var(--font-body);
}
.wc-mod-hint {
  font-size: 0.68rem; color: var(--cream-dim); font-style: italic;
}
.wc-attk-ammo-row {
  padding: 5px 10px;
  background: rgba(140,180,140,0.05);
  border-top: 1px dashed rgba(140,180,140,0.25);
  font-size: 0.78rem;
  display: flex; align-items: center; gap: 6px;
  color: var(--cream-dim);
}
.wc-ammo-label { color: var(--gold-dim); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.66rem; }
.wc-ammo-count { color: #a8d080; font-family: 'Courier New', monospace; font-size: 0.95rem; }
.wc-ammo-name { color: var(--cream); flex: 0 1 auto; }
/* Slot-picker row — "from <select>" sits between the ammo name and Fire
   button so the player can pick which location to draw from. Per Rome
   2026-05-25. */
.wc-ammo-from {
  color: var(--gold-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 4px;
}
.wc-ammo-slot-select {
  background: var(--bg-dark);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.74rem;
  font-family: inherit;
  cursor: pointer;
  max-width: 200px;
}
.wc-ammo-slot-select:hover  { border-color: var(--gold-dim); }
.wc-ammo-slot-select:focus  { outline: none; border-color: var(--gold-dim); background: rgba(212,168,83,0.06); }
/* Per-resource breakdown cells in the firearm Combat-row (powder + lead).
   When a resource is the limiting bottleneck it tints amber so the player
   can see at a glance which one to top up. Per Rome 2026-04-29. */
.wc-ammo-stock { color: var(--cream-dim); font-family: 'Courier New', monospace; font-size: 0.85rem; padding: 0 6px; }
.wc-ammo-stock.wc-ammo-bottleneck { color: #e0a060; font-weight: 600; }
.wc-ammo-stock.muted { font-style: italic; opacity: 0.7; }
.wc-ammo-alt { color: var(--gold-dim); cursor: help; font-size: 0.85rem; }
.wc-ammo-none { font-style: italic; }
.wc-ammo-fire {
  background: rgba(140,180,140,0.18);
  color: var(--cream);
  border: 1px solid rgba(140,180,140,0.5);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.72rem; letter-spacing: 0.5px;
  text-transform: uppercase; cursor: pointer;
}
.wc-ammo-fire:hover:not(:disabled) { background: rgba(140,180,140,0.35); }
.wc-ammo-fire:disabled { opacity: 0.4; cursor: not-allowed; }


.combat-empty-note {
  background: var(--bg-card);
  border: 1px dashed var(--bg-mid);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  color: var(--cream-dark);
  font-size: 0.85rem;
  font-style: italic;
}

/* ─── PLACEHOLDERS (WIP tab content) ─────────────────── */

.section-placeholder {
  background: var(--bg-card);
  border: 1px dashed var(--bg-mid);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--cream-dark);
}

.section-placeholder .title {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.section-placeholder .wip-list {
  max-width: 460px;
  margin: 12px auto 0;
  text-align: left;
  font-size: 0.88rem;
  color: var(--cream-dim);
}

.section-placeholder .wip-list li {
  margin-left: 18px;
  margin-bottom: 4px;
}

/* ─── BEACON (six-color) ─────────────────────────────── */

.beacon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.beacon-cell {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

/* Surging marker (Rome 2026-05-10) — when Flare exceeds Rating + 10,
   the beacon Surges. Subtle gold glow + the lightning bolt in the
   color-name row. Beacon ratings still respect their per-color
   border-left tint, so the surge state stacks visually on top. */
.beacon-cell.beacon-surging {
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 12px rgba(212, 175, 55, 0.18);
}
.beacon-cell .beacon-surge-marker {
  margin-left: 4px;
  color: var(--gold);
  font-size: 0.85em;
  font-weight: normal;
}

.beacon-cell .color-name {
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.beacon-cell .rating {
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}

.beacon-cell .sub {
  color: var(--cream-dim);
  font-size: 0.74rem;
  margin-top: 2px;
}

.beacon-red    { border-left-color: #c44040; }  .beacon-red    .color-name { color: #e48080; }
.beacon-orange { border-left-color: #d48030; }  .beacon-orange .color-name { color: #e8a060; }
.beacon-yellow { border-left-color: #d4a828; }  .beacon-yellow .color-name { color: #e8c848; }
.beacon-green  { border-left-color: #40a858; }  .beacon-green  .color-name { color: #60c878; }
.beacon-blue   { border-left-color: #4888dd; }  .beacon-blue   .color-name { color: #78a8f0; }
.beacon-purple { border-left-color: #9848c8; }  .beacon-purple .color-name { color: #c080e0; }

/* ─── DEBUG PANEL (used on Overview tab, can be removed later) ─── */

.debug-keys {
  background: var(--bg-dark);
  border: 1px solid var(--bg-mid);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 18px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--cream-dim);
}
.debug-keys h3 {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.debug-keys .kv { display: grid; grid-template-columns: 200px 1fr; gap: 4px 16px; }
.debug-keys .kv dt { color: var(--gold-dim); }
.debug-keys .kv dd { color: var(--cream); }

/* ─── RESPONSIVE ─────────────────────────────────────── */

@media (max-width: 720px) {
  #page { padding: 16px 14px 40px; }
  .loaded-banner { padding: 16px 18px; gap: 14px; }
  .loaded-banner .name-block h1 { font-size: 1.4rem; }
  .tab-btn { padding: 6px 9px; font-size: 0.74rem; letter-spacing: 0.6px; }
  .sheet-section { padding: 18px 16px; }
  .stat-grid-compact { grid-template-columns: repeat(2, 1fr); }
}

/* Rest & Recovery — Sleep Quality color chip variants. Colors graded
   from Oppressive (alert) through Good (felt-good green). */
.rest-quality-chip {
  display:inline-block; padding:2px 8px; border-radius:10px; font-weight:700;
  font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase;
}
.rest-q-oppressive  { background:#5a1f1f; color:#ffd6d6; }
.rest-q-squalid     { background:#5a3a1f; color:#ffe7c5; }
.rest-q-poor        { background:#4a4322; color:#fff5cc; }
.rest-q-common      { background:#2a4233; color:#d8f0d8; }
.rest-q-comfortable { background:#1f3f56; color:#cfe6ff; }
.rest-q-good        { background:#1f5535; color:#c5f3d8; }

/* Activity Reference — collapsible Downtime section. The <summary>
   carries the same .section-header styling as static sections; we
   suppress the native disclosure triangle and add a chevron on the
   right that rotates when [open]. */
details.dt-activities-section { padding: 22px 26px; }
details.dt-activities-section[open] { padding-bottom: 22px; }
summary.dt-activities-summary {
  cursor: pointer;
  list-style: none;
  outline: none;
  margin-bottom: 0;
}
summary.dt-activities-summary::-webkit-details-marker { display: none; }
summary.dt-activities-summary::before {
  content: '✦';
  color: var(--gold-dim);
  font-size: 0.9em;
  margin-right: 10px;
}
summary.dt-activities-summary::after {
  content: '▸';
  margin-left: 6px;
  color: var(--gold-dim);
  transition: transform 0.15s ease;
  display: inline-block;
}
details[open] > summary.dt-activities-summary::before { color: var(--gold); }
details[open] > summary.dt-activities-summary::after {
  transform: rotate(90deg);
}
details.dt-activities-section[open] summary.dt-activities-summary {
  margin-bottom: 18px;
}

/* Generic collapsible <details> styling for top-level sheet sections.
   Same visual contract as a static .sheet-section / .section-header pair,
   but the ▸ chevron rotates 90° on [open], native marker is hidden, and
   the body padding adjusts so a collapsed section sits at header height
   only. */
details.collapsible-sheet-section { padding: 22px 26px; }
details.collapsible-sheet-section[open] { padding-bottom: 22px; }
summary.collapsible-sheet-summary {
  cursor: pointer;
  list-style: none;
  outline: none;
  margin-bottom: 0;
}
summary.collapsible-sheet-summary::-webkit-details-marker { display: none; }
summary.collapsible-sheet-summary::before {
  content: '✦';
  color: var(--gold-dim);
  font-size: 0.9em;
  margin-right: 10px;
}
summary.collapsible-sheet-summary::after {
  content: '▸';
  margin-left: 6px;
  color: var(--gold-dim);
  transition: transform 0.15s ease;
  display: inline-block;
}
details[open] > summary.collapsible-sheet-summary::before { color: var(--gold); }
details[open] > summary.collapsible-sheet-summary::after {
  transform: rotate(90deg);
}
details.collapsible-sheet-section[open] summary.collapsible-sheet-summary {
  margin-bottom: 18px;
}

/* Defensive: ensure flex layout + visible carets across every top-level
   collapsible summary class — some pages mount summaries with only the
   collapsible-* class (no .section-header companion), and a few legacy
   browsers don't propagate the cascade reliably. Forcing display:flex
   + align-items:center here guarantees the ✦ / hint / ▸ row layout,
   and bumping caret to --gold (full) + 1em + bold makes the indicator
   unambiguously visible. Per Rome 2026-05-11. */
summary.collapsible-sheet-summary,
summary.dt-activities-summary,
.scp-section .scp-summary,
details.sheet-section-collapsible > summary.section-header-collapsible {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
summary.collapsible-sheet-summary::after,
summary.dt-activities-summary::after,
.scp-section .scp-summary::after,
details.sheet-section-collapsible > summary.section-header-collapsible::after {
  content: '▸' !important;          /* ▸ — explicit Unicode to dodge any text-transform weirdness */
  color: var(--gold) !important;
  font-size: 1em !important;
  font-weight: bold !important;
  margin-left: 8px !important;
  text-transform: none !important;
  display: inline-block !important;
  transition: transform 0.15s ease, color 0.15s ease;
  flex: 0 0 auto;
}
details[open] > summary.collapsible-sheet-summary::after,
details[open] > summary.dt-activities-summary::after,
.scp-section[open] .scp-summary::after,
details.sheet-section-collapsible[open] > summary.section-header-collapsible::after {
  transform: rotate(90deg);
  color: var(--gold-light, #e8c878) !important;
}

/* Advancement History audit-log table needs internal wrapping — the
   Details column serializes JSON entries that can be very long. Force
   word-wrap on the table cells inside #advancement-history so the
   table doesn't blow out the section width. Per Rome 2026-05-11. */
#advancement-history { overflow-x: auto; }
#advancement-history table.sheet-table { table-layout: fixed; width: 100%; }
#advancement-history table.sheet-table td,
#advancement-history table.sheet-table th {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  vertical-align: top;
}

/* ─── REST & RECOVERY — visual integration with project shell ─── */
/* Calculator panels reuse the project's .kv-block shell (gold-dim title,
   bg-dark / bg-mid border, project radius).  The CSS below adds only
   calculator-specific bits the .kv-block defaults don't cover. */

.rest-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.rest-calc-grid > .kv-block-wide { grid-column: 1 / -1; }

.rest-panel select,
.rest-panel input[type="number"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--cream);
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--font-body);
}
.rest-panel select:focus,
.rest-panel input[type="number"]:focus { outline: 1px solid var(--gold-dim); }
.rest-panel select option { background: var(--bg-dark); color: var(--cream); }

.rest-panel .rest-mode-row {
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: var(--cream-dim);
}
.rest-panel .rest-mode-row label { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

.rest-panel .rest-factor-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  align-items: center;
  font-size: 0.82rem;
}
.rest-panel .rest-factor-grid > .rest-factor-label {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.74rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.rest-panel .rest-out {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bg-mid);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  align-items: center;
  font-size: 0.86rem;
}
.rest-panel .rest-out-key {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.rest-panel .rest-out-val { color: var(--cream); }

.rest-panel .rest-serving-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
}
.rest-panel .rest-serving-row select { flex: 1; }
.rest-panel .rest-serving-row input[type="number"] { width: 48px; text-align: right; }
.rest-panel .rest-serving-row .rest-serving-x {
  font-size: 0.72rem;
  color: var(--cream-dark);
  letter-spacing: 0.5px;
}

.rest-panel .rest-add-serving {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--cream-dim);
  padding: 4px 12px;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 10px;
  transition: border-color var(--transition);
}
.rest-panel .rest-add-serving:hover {
  border-color: var(--gold-dim);
  color: var(--cream);
}

.rest-panel .rest-segments-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rest-panel .rest-segments-stepper > span {
  min-width: 22px;
  text-align: center;
  font-family: var(--font-title);
  color: var(--gold-light);
  font-size: 1rem;
}

.rest-panel .rest-maint-note {
  font-size: 0.78rem;
  color: var(--cream-dark);
  font-style: italic;
  margin-bottom: 10px;
}

.rest-panel .rest-maint-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  margin-bottom: 6px;
}
.rest-panel .rest-maint-row > .rest-maint-slot-label {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-width: 56px;
}
.rest-panel .rest-maint-row select { flex: 1; }

.rest-panel .rest-process-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(160,120,48,0.3);
}
.rest-panel .rest-process-row > span:first-child {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.rest-rollup-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  align-items: center;
  font-size: 0.88rem;
}
.rest-rollup-grid > .rest-out-key {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.74rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.rest-rollup-grid strong { color: var(--gold-light); font-weight: 700; }

.rest-strain-band-fresh     { color: var(--cream); font-weight: 700; }
.rest-strain-band-fatigued  { color: #d4c44e;       font-weight: 700; }
.rest-strain-band-exhausted { color: #d4974e;       font-weight: 700; }
.rest-strain-band-dead      { color: #c25555;       font-weight: 700; }

.rest-commit-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(160,120,48,0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--cream-dark);
  font-style: italic;
}
.rest-commit-row > button {
  background: rgba(160,120,48,0.10);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  padding: 4px 12px;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-style: normal;
  transition: background var(--transition);
}
.rest-commit-row > button:hover { background: rgba(160,120,48,0.20); }

.rest-modifier-sources {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--cream-dark);
}
.rest-modifier-sources strong {
  color: var(--gold-dim);
  font-family: var(--font-title);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.rest-footnote {
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--cream-dark);
  font-style: italic;
  line-height: 1.4;
}

/* Sleep Quality color chips (existing) — re-tinted to read better against bg-dark */
.rest-quality-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* SC selector + Blacklisted flag styling — Rome 2026-04-26.
   The sticky header gets a "→ N" trailing annotation showing post-commit
   balances; .scp-sticky-after is a small inline note.  Per-staged-row SC
   stepper sits next to the cost string with a tight ± pair.  The
   .sc-blacklisted-flag is the burnt-orange chip that appears on the
   Social tab's SC row and inside the sticky Staged-SC label when the
   Blacklisted Notable Event is active. */
.scp-sticky-after {
  font-size: 0.78rem;
  color: var(--cream-dark);
  font-weight: 400;
  margin-left: 4px;
}
.sp-sc-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px dashed rgba(160,120,48,0.3);
  font-size: 0.82rem;
}
.sp-sc-stepper .sp-sc-lbl {
  color: var(--cream-dark);
  font-size: 0.74rem;
  letter-spacing: 0.5px;
}
.sp-sc-stepper .sp-sc-lbl strong {
  color: var(--gold-light);
  font-weight: 700;
  margin-left: 3px;
}
.sp-sc-stepper .sp-sc-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--cream);
  width: 22px;
  height: 22px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.sp-sc-stepper .sp-sc-btn:hover:not(:disabled) {
  border-color: var(--gold-dim);
  color: var(--gold-light);
}
.sp-sc-stepper .sp-sc-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.sp-sc-note {
  color: var(--cream-dark);
  font-size: 0.76rem;
  font-style: italic;
}
.sc-blacklisted-flag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(180, 80, 60, 0.25);
  color: #e09080;
  border: 1px solid rgba(180, 80, 60, 0.5);
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: help;
}

/* Indebted debt tracker (Social tab Standing block) — Rome 2026-04-27. */
.indebted-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.indebted-row .indebted-amt {
  color: #e09080;
  font-weight: 600;
  font-size: 0.86rem;
}
.indebted-row .indebted-paid {
  color: #94c890;
  font-weight: 700;
  font-family: var(--font-title);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.indebted-row .indebted-defaulted {
  color: #e09080;
  font-weight: 700;
  font-family: var(--font-title);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.indebted-row .indebted-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--cream);
  padding: 3px 10px;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  cursor: pointer;
  letter-spacing: 0.4px;
  transition: border-color 0.2s, background 0.2s;
}
.indebted-row .indebted-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold-light);
}
.indebted-row .indebted-btn.pay {
  background: rgba(110, 160, 100, 0.15);
  border-color: rgba(110, 160, 100, 0.4);
  color: #94c890;
}
.indebted-row .indebted-btn.pay:hover {
  background: rgba(110, 160, 100, 0.25);
}
.indebted-row .indebted-btn.default {
  background: rgba(180, 80, 60, 0.15);
  border-color: rgba(180, 80, 60, 0.45);
  color: #e09080;
}
.indebted-row .indebted-btn.default:hover {
  background: rgba(180, 80, 60, 0.28);
}

/* ─── Gear-tab picker (Phase 1 pilot — Armor) ────────────────── */
.gp-section { margin-top: 18px; }
.gp-section-title { font-size: 1.1rem; color: var(--gold); margin: 0 0 10px 0;
  border-bottom: 1px solid rgba(212,175,55,0.25); padding-bottom: 4px; }
.gp-class-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gp-class-pill { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12); cursor: pointer; font-size: 0.85rem; user-select: none;
  color: var(--cream); }
.gp-class-pill:hover:not(.disabled) { background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.4); }
.gp-class-pill.active { background: rgba(212,175,55,0.25); border-color: rgba(212,175,55,0.7); color: var(--gold); }
.gp-class-pill.disabled { opacity: 0.45; cursor: not-allowed; font-style: italic; }
.gp-class-pill em { color: var(--cream-dim); font-size: 0.8em; font-style: normal; }

.gp-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.gp-search { width: 100%; padding: 7px 11px; border-radius: 6px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); color: var(--cream); font-size: 0.9rem; }
.gp-search:focus { outline: none; border-color: rgba(212,175,55,0.6); background: rgba(0,0,0,0.45); }
.gp-layer-row { display: flex; flex-wrap: wrap; gap: 4px; }
.gp-layer-pill { padding: 3px 9px; border-radius: 4px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1); cursor: pointer; font-size: 0.8rem; user-select: none;
  color: var(--cream); }
.gp-layer-pill:hover { background: rgba(212,175,55,0.1); }
.gp-layer-pill.active { background: rgba(212,175,55,0.22); border-color: rgba(212,175,55,0.6); color: var(--gold); }

.gp-body { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .gp-body { grid-template-columns: 1fr; } }

.gp-equipped-panel { padding: 12px; background: rgba(0,0,0,0.25); border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08); }
.gp-equipped-title { margin: 0 0 8px 0; font-size: 0.95rem; color: var(--gold); }
.gp-equipped-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.gp-equipped-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 7px; background: rgba(255,255,255,0.04); border-radius: 4px; }
.gp-eq-name { font-size: 0.85rem; }
.gp-equipped-total { padding-top: 7px; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem; color: var(--cream); font-family: 'Courier New', monospace; letter-spacing: 1px; }
.gp-empty { padding: 14px; color: var(--cream-dim); font-size: 0.85rem; font-style: italic; text-align: center; }

.gp-list-col { min-width: 0; }
.gp-item-list { display: flex; flex-direction: column; gap: 5px; }
.gp-row { background: rgba(255,255,255,0.03); border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.06); overflow: hidden; }
.gp-row.open { border-color: rgba(212,175,55,0.5); }
/* Row layout — name takes the remaining flex, meta is a narrow fixed
   column, hardness column is fixed-width to hold the compact grid with
   consistent cell dimensions even for 2-digit values. */
.gp-row-main { display: grid; grid-template-columns: 1fr 140px 260px; gap: 10px;
  padding: 8px 11px; cursor: pointer; align-items: center; }
.gp-row-main:hover { background: rgba(212,175,55,0.06); }
.gp-row-name { font-weight: 600; font-size: 0.9rem; color: var(--cream); }
.gp-row-meta { font-size: 0.8rem; color: var(--cream-dim); }
/* Row hardness column — wraps the inline compact grid. Display:flex with
   end justification floats the grid to the right edge of its column. */
.gp-row-hardness { display: flex; justify-content: flex-end; align-items: center; }
.gp-row-actions { padding: 0 11px 8px 11px; }
.gp-btn-sm { padding: 3px 11px; font-size: 0.8rem; cursor: pointer; border-radius: 4px;
  background: rgba(212,175,55,0.18); border: 1px solid rgba(212,175,55,0.5); color: var(--gold); }
.gp-btn-sm:hover { background: rgba(212,175,55,0.3); }
.gp-btn-sm.remove { background: rgba(180,80,60,0.15); border-color: rgba(180,80,60,0.4); color: #e09080; }
.gp-btn-sm.remove:hover { background: rgba(180,80,60,0.28); }

.gp-row-detail { padding: 11px 13px; border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2); }
.gp-detail-card { display: flex; flex-direction: column; gap: 9px; font-size: 0.85rem; }
.gp-detail-section { display: flex; flex-direction: column; gap: 4px; }
.gp-detail-section strong { font-size: 0.75rem; color: var(--gold); text-transform: uppercase;
  letter-spacing: 1px; }
/* Hardness grid — table-style layout with consistent borders.
   7 columns × 2 rows: header row (damage type letters) + value row.
   Outer border on the wrap, internal grid lines via per-cell border-right
   and the head row's border-bottom. Used in three contexts:
     • Owned cards (full size)
     • For Sale row body (compact via .gp-hardness-grid.compact)
     • For Sale row expand-detail (full size) */
.gp-hardness-grid { display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid rgba(212,175,55,0.4); border-radius: 4px; overflow: hidden;
  max-width: 320px; background: rgba(0,0,0,0.2); }
.gp-h-head, .gp-h-cell { padding: 4px 0; text-align: center; line-height: 1.1;
  border-right: 1px solid rgba(212,175,55,0.22); }
.gp-h-head:last-child, .gp-h-cell:last-child { border-right: none; }
.gp-h-head { font-size: 0.7rem; color: var(--gold-dim); letter-spacing: 1px;
  text-transform: uppercase; background: rgba(212,175,55,0.08);
  border-bottom: 1px solid rgba(212,175,55,0.3); font-family: var(--font-title); }
.gp-h-cell { font-size: 1rem; font-weight: 600; color: var(--cream);
  font-family: 'Courier New', monospace; }
.gp-h-cell.zero { color: var(--cream-dim); opacity: 0.55; }

/* Compact variant — used inline on For Sale rows. Fills its container
   (the 260px hardness column on the row), so each cell is ~37px wide and
   easily fits 2-digit values (C12, P10) at consistent widths. */
.gp-hardness-grid.compact { max-width: none; width: 100%; }
.gp-hardness-grid.compact .gp-h-head { font-size: 0.65rem; padding: 2px 0; }
.gp-hardness-grid.compact .gp-h-cell { font-size: 0.85rem; padding: 3px 0;
  min-width: 28px; }
.gp-stats-row { display: flex; flex-wrap: wrap; gap: 7px 14px; font-size: 0.85rem; color: var(--cream); }
.gp-stats-row em { color: var(--cream-dim); font-style: normal; font-size: 0.8rem; margin-right: 3px; }
.gp-kw-list { display: flex; flex-wrap: wrap; gap: 4px; }
.gp-kw { padding: 1px 7px; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3);
  border-radius: 3px; font-size: 0.75rem; color: var(--gold); }
.gp-notes { color: var(--cream); font-style: italic; font-size: 0.8rem; }
.gp-source { color: var(--cream-dim); font-size: 0.7rem; }

.gp-layer-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; vertical-align: middle; }
.gp-layer-under { background: rgba(120, 180, 220, 0.18); color: #b9d8f0; border: 1px solid rgba(120,180,220,0.3); }
.gp-layer-main  { background: rgba(180, 130, 90, 0.18);  color: #e0b48a; border: 1px solid rgba(180,130,90,0.3); }
.gp-layer-outer { background: rgba(190, 190, 190, 0.18); color: #dadada; border: 1px solid rgba(190,190,190,0.3); }
.gp-layer-thick { background: rgba(140, 100, 60, 0.18);  color: #c69a6b; border: 1px solid rgba(140,100,60,0.3); }
.gp-layer-shield { background: rgba(150, 110, 180, 0.18); color: #c8a8e0; border: 1px solid rgba(150,110,180,0.3); }

/* Kind badge — melee/ranged label on weapon row names */
.gp-kind-badge { display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 3px; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.5px; vertical-align: middle; }
.gp-kind-melee  { background: rgba(180, 80, 60, 0.18); color: #e09080;
  border: 1px solid rgba(180, 80, 60, 0.4); }
.gp-kind-ranged { background: rgba(90, 140, 180, 0.18); color: #a0c8e0;
  border: 1px solid rgba(90, 140, 180, 0.4); }

/* Attack-profile summary text in the weapon row (replaces Hardness grid) */
.gp-row-attack-summary { font-family: 'Courier New', monospace; font-size: 0.78rem;
  color: var(--cream); padding: 4px 6px; background: rgba(0,0,0,0.2);
  border: 1px solid rgba(212,175,55,0.2); border-radius: 4px;
  text-align: center; }

/* Attack-profile detail table — canonical 3D/3G layout */
.gp-attacks-table { display: flex; flex-direction: column; gap: 2px;
  border: 1px solid rgba(212,175,55,0.4); border-radius: 4px;
  background: rgba(0,0,0,0.25); overflow: hidden; max-width: 100%; }
.gp-attk-row { display: grid;
  grid-template-columns: 2fr 0.8fr 0.5fr 0.7fr 0.5fr 0.4fr 0.4fr 0.7fr 0.3fr 2.5fr;
  gap: 6px; padding: 4px 8px; font-size: 0.78rem; align-items: center; }
.gp-attk-row > div { text-align: center; line-height: 1.2; }
.gp-attk-row .gp-attk-name { text-align: left; font-weight: 600; color: var(--cream); }
.gp-attk-row .gp-attk-kw   { text-align: left; }
.gp-attk-head { background: rgba(212,175,55,0.1); border-bottom: 1px solid rgba(212,175,55,0.3);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-dim);
  font-family: var(--font-title); }
.gp-attk-row:not(.gp-attk-head):nth-child(odd) { background: rgba(255,255,255,0.02); }
.gp-attk-row:not(.gp-attk-head) { color: var(--cream); }
.gp-attk-tier-pill { padding: 1px 6px; border-radius: 3px; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.5px; }
.gp-attk-tier-basic    { background: rgba(120, 180, 90, 0.15); color: #a8d080;
  border: 1px solid rgba(120, 180, 90, 0.3); }
.gp-attk-tier-advanced { background: rgba(180, 130, 60, 0.18); color: #e0b070;
  border: 1px solid rgba(180, 130, 60, 0.4); }
/* Aura / spell-enchant tier pill + rows in the attack table (Rome 2026-06-23).
   Cyan reads as a "magical rider," distinct from the physical attack rows. */
.gp-attk-tier-aura     { background: rgba(128, 200, 255, 0.16); color: #80c8ff;
  border: 1px solid rgba(128, 200, 255, 0.4); }
.wc-attk-row.wc-attk-aura-row { background: rgba(128, 200, 255, 0.05); }
.wc-attk-aura-row .wc-aura-name { color: #80c8ff; font-weight: 600; }
.wc-attk-aura-row .wc-aura-kw { color: #80c8ff; font-style: italic; opacity: 0.9; }
.wc-attk-aura-row .wc-aura-src { color: var(--cream-dim, #c9b78f); font-size: 0.72rem;
  font-style: italic; opacity: 0.8; }
.gp-kw-sm { font-size: 0.7rem; padding: 0 5px; }

/* Gear-tab view switch — segmented control below Gross Wealth that toggles
   between Owned (default) and For Sale. */
.gp-view-switch { display: flex; gap: 0; margin: 14px 0 16px 0;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(212,175,55,0.25);
  border-radius: 6px; padding: 3px; width: fit-content; }
.gp-view-switch-btn { padding: 6px 18px; font-size: 0.88rem; cursor: pointer;
  border: 1px solid transparent; border-radius: 4px; user-select: none;
  color: var(--cream-dim); background: transparent; transition: all 0.12s; }
.gp-view-switch-btn:hover { color: var(--cream); }
.gp-view-switch-btn.active { background: rgba(212,175,55,0.22);
  border-color: rgba(212,175,55,0.5); color: var(--gold); font-weight: 600; }
.gp-view-switch-count { display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: 0.72rem; background: rgba(255,255,255,0.08); border-radius: 8px;
  color: var(--cream); }
.gp-view-switch-btn.active .gp-view-switch-count { background: rgba(212,175,55,0.3); color: var(--gold); }

/* Owned view — Ammunition stacks. */
.gp-ammo-stacks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.gp-ammo-stack { display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  padding: 5px 10px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid rgba(140,180,140,0.6);
  border-radius: 4px; align-items: baseline; font-size: 0.88rem; }
.gp-ammo-name { color: var(--cream); font-weight: 600; }
.gp-ammo-count { color: var(--gold-light); font-family: 'Courier New', monospace; font-size: 0.85rem; }
.gp-ammo-pack { color: var(--cream-dim); font-size: 0.78rem; font-style: italic; }

/* Conveyance view: cards per mount/vehicle with traits + cargo bar. */
.gp-conveyance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px; margin-bottom: 10px; }
.gp-conveyance-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid rgba(150,180,200,0.6);
  border-radius: 4px;
  padding: 8px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.gp-conveyance-card.overcap { border-left-color: var(--red, #d05050); }
.gp-conveyance-name { font-weight: 600; color: var(--cream); font-size: 0.95rem; }
.gp-conveyance-traits { font-size: 0.78rem; color: var(--cream-dim); font-style: italic; }
.gp-conveyance-cap { font-size: 0.78rem; color: var(--cream-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gp-conveyance-cap-label { color: var(--gold-dim); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.66rem; }
.gp-conveyance-cap.muted { font-style: italic; }
.gp-conveyance-cap strong { color: var(--gold-light); font-family: 'Courier New', monospace; }
.gp-conveyance-bar { display: inline-block; width: 90px; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.gp-conveyance-bar-fill { display: block; height: 100%; background: rgba(150,180,200,0.6); transition: width 0.2s; }
.gp-conveyance-card.overcap .gp-conveyance-bar-fill { background: rgba(208,80,80,0.7); }
.gp-conveyance-cost { font-size: 0.72rem; color: var(--gold-dim); margin-top: 2px; }
.gp-kind-mount { background: rgba(150,180,200,0.12); border-color: rgba(150,180,200,0.35); color: #a0c0d0; }
.gp-kind-concoction { background: rgba(160,90,180,0.12); border-color: rgba(160,90,180,0.35); color: #c0a0d0; }
.gp-kind-strap { background: rgba(180,140,80,0.12); border-color: rgba(180,140,80,0.4); color: #d8b878; }
.gp-container-item-pts { font-family: 'Courier New', monospace; color: #d8b878;
  font-size: 0.78rem; padding: 1px 6px; background: rgba(180,140,80,0.08);
  border: 1px solid rgba(180,140,80,0.3); border-radius: 3px; }
.gp-container-card.nested { margin-left: 16px; margin-top: 4px;
  border-left-style: solid; border-left-color: rgba(140,140,180,0.5); }
.gp-container-card.nested.depth-2 { margin-left: 28px; }
.gp-container-card.nested.depth-3 { margin-left: 40px; }
.gp-container-card.nested.depth-4 { margin-left: 52px; }
.gp-container-rack-moveto { margin-left: 8px; }

.gp-container-singledose { font-size: 0.65rem; padding: 1px 5px; border-radius: 3px;
  background: rgba(160,90,180,0.12); border: 1px solid rgba(160,90,180,0.4);
  color: #c8a0d8; text-transform: uppercase; letter-spacing: 0.4px; }
/* Attachment-point system: belts/bandoliers/packs are racks. */
.gp-container-card.rack { border-left-style: dashed; border-left-color: rgba(180,140,80,0.8); }
.gp-container-card.rack .gp-container-name::before { content: '⛓ '; color: rgba(180,140,80,0.7); }
.gp-container-pts { display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 0.78rem; color: var(--cream-dim);
  padding: 1px 6px; background: rgba(180,140,80,0.08);
  border: 1px solid rgba(180,140,80,0.3); border-radius: 3px; }
.gp-container-pts.overpts { background: rgba(208,80,80,0.18); border-color: rgba(208,80,80,0.5); }
.gp-container-pts-label { color: var(--gold-dim); font-size: 0.66rem; letter-spacing: 0.5px; text-transform: uppercase; }
.gp-container-pts strong { color: #d8b878; font-family: 'Courier New', monospace; }
.gp-moveto.strap { background: rgba(180,140,80,0.18); border-color: rgba(180,140,80,0.45); }

/* Owned view — Containers section: expandable cards with capacity bars. */
.gp-container-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid rgba(180,140,80,0.6); border-radius: 4px; margin-bottom: 6px; }
.gp-container-card.loose { border-left-color: rgba(160,160,160,0.4); }
.gp-container-card.builtin { border-left-color: rgba(180,140,80,0.9); background: rgba(180,140,80,0.06); }
.gp-container-card.builtin .gp-container-cat { background: rgba(180,140,80,0.15); border-color: rgba(180,140,80,0.4); color: var(--gold-light); }
.gp-container-card.open { background: rgba(255,255,255,0.05); }
.gp-container-card.overcap { border-left-color: var(--red, #d05050); }
.gp-container-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer;
  user-select: none; }
.gp-container-head:hover { background: rgba(212,175,55,0.05); }
.gp-container-chevron { font-size: 0.9rem; color: var(--gold-dim); width: 14px; }
.gp-container-name { font-weight: 600; color: var(--cream); flex: 0 1 auto; }
.gp-container-cat { font-size: 0.72rem; color: var(--gold-dim); text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 6px; border: 1px solid rgba(212,175,55,0.3); border-radius: 3px; }
.gp-container-cap { font-size: 0.78rem; color: var(--cream-dim); font-family: 'Courier New', monospace; }
.gp-container-bar { display: inline-block; width: 80px; height: 6px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden; }
.gp-container-bar-fill { display: block; height: 100%; background: rgba(120,180,90,0.6); transition: width 0.2s; }
.gp-container-card.overcap .gp-container-bar-fill { background: rgba(208,80,80,0.7); }
.gp-container-bar-fill.full { background: rgba(180,140,80,0.85); }
.gp-container-bar-fill.overcap { background: rgba(208,80,80,0.7); }
/* FULL marker — applied to .gp-container-cap and .gp-container-pts when at capacity. */
.gp-container-cap.full,
.gp-container-pts.full {
  background: rgba(180,140,80,0.18);
  border: 1px solid rgba(180,140,80,0.5);
  color: #d8b878;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.gp-container-cap.full::after,
.gp-container-pts.full::after { content: ' FULL'; color: #e8c878; font-size: 0.66rem; letter-spacing: 0.5px; margin-left: 4px; }
.gp-container-cap.overcap { color: #d8a878; }
.gp-container-count { font-size: 0.72rem; color: var(--cream-dim); margin-left: auto; }
.gp-container-body { padding: 6px 12px 10px 36px; display: flex; flex-direction: column; gap: 4px; }
.gp-container-empty { color: var(--cream-dim); font-size: 0.78rem; font-style: italic; padding: 4px 0; }
.gp-container-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  background: rgba(0,0,0,0.15); border-radius: 3px; font-size: 0.85rem; }
/* Drag-and-drop equipment management (Rome 2026-06-17). Item rows are
   draggable; container cards are drop targets. Reorder within a list +
   move between zones/containers. */
.gp-draggable { cursor: grab; }
.gp-draggable:active { cursor: grabbing; }
.gp-container-item.gp-dragging { opacity: 0.4; }
.gp-container-card.gp-drop-target { outline: 2px dashed var(--gold, #e8c878); outline-offset: -2px; }
.gp-container-card.gp-drop-target > .gp-container-head { background: rgba(232,200,120,0.10); }
.gp-container-item.gp-drop-row { box-shadow: inset 0 2px 0 var(--gold, #e8c878); }
.gp-container-item-kind { font-size: 0.65rem; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.gp-container-item-name { flex: 1 1 auto; color: var(--cream); }
.gp-container-item-sp { font-family: 'Courier New', monospace; font-size: 0.78rem; color: var(--cream-dim); }
/* Bulk chip — sits next to the Sp chip on each owned-item line. Phase
   Bulk-Chip (Rome 2026-05-24). Same monospace, slightly warmer tint
   so the load-axis (Bulk → Burdened) is visually distinguishable from
   the volume-axis (Sp → container capacity). */
.gp-container-item-bulk { font-family: 'Courier New', monospace; font-size: 0.78rem; color: rgba(245, 215, 145, 0.7); margin-left: 2px; }
.gp-container-item-rounds { font-family: 'Courier New', monospace; color: #a8d080;
  font-size: 0.85rem; padding: 1px 6px; background: rgba(140,180,140,0.1);
  border: 1px solid rgba(140,180,140,0.3); border-radius: 3px; }
.gp-container-item-doses { font-family: 'Courier New', monospace; color: #c0a0d0;
  font-size: 0.85rem; padding: 1px 6px; background: rgba(160,90,180,0.1);
  border: 1px solid rgba(160,90,180,0.35); border-radius: 3px; }
.wc-ammo-fire.concoction-use { background: rgba(160,90,180,0.18); border-color: rgba(160,90,180,0.5); color: #d8b0e8; }
.wc-ammo-fire.concoction-use:hover:not(:disabled) { background: rgba(160,90,180,0.32); }
.gp-kind-ammo { background: rgba(140,180,140,0.15); border-color: rgba(140,180,140,0.4); color: #a8d080; }
.gp-kind-gear { background: rgba(150,150,200,0.12); border-color: rgba(150,150,200,0.35); color: #b8b8e0; }
.gp-kind-food { background: rgba(200,160,100,0.12); border-color: rgba(200,160,100,0.35); color: #e0c080; }
.gp-kind-treasure { background: rgba(180,90,180,0.12); border-color: rgba(180,90,180,0.35); color: #d0a0d0; }
.gp-quality-badge { font-size: 0.7rem; padding: 1px 5px; border-radius: 3px;
  background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.35);
  color: var(--gold-light); margin-left: 4px; }
.gp-moveto { background: rgba(0,0,0,0.4); color: var(--cream); border: 1px solid rgba(212,175,55,0.3);
  border-radius: 3px; padding: 1px 4px; font-size: 0.78rem; cursor: pointer; }
/* Dropdown panel styling — fix poor contrast on the open option list. The
   select element's open panel inherits browser defaults which on dark
   themes can render as near-invisible text. Explicit option colors fix it. */
.gp-moveto option { background: #1a1a2e; color: var(--cream); padding: 4px; }
.gp-moveto option:checked { background: #3a2a1a; color: var(--gold-light); }
.gp-moveto-noid { font-size: 0.7rem; padding: 0 4px; }

/* Owned view — rich card display of each owned armor piece */
.gp-owned-view { display: flex; flex-direction: column; gap: 10px; }

/* Read-only Coin Purse on the Gear tab (wealth reporting; management lives in
   the Steward's Office). Rome 2026-07-20. */
.gp-coinpurse {
  border: 1px solid rgba(212,168,83,0.25); border-radius: 6px;
  background: rgba(212,168,83,0.05); padding: 8px 12px; margin-bottom: 8px;
}
.gp-coinpurse-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px dashed rgba(160,120,48,0.3); padding-bottom: 5px; margin-bottom: 5px;
}
.gp-coinpurse-title {
  font-family: var(--font-title); color: var(--gold-dim, #c9a978);
  font-size: 0.74rem; letter-spacing: 1.5px; text-transform: uppercase;
}
.gp-coinpurse-total { font-family: var(--font-title); color: var(--gold-light, #e8c878); font-weight: 600; font-size: 1.05rem; }
.gp-coinpurse-rows { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.gp-coinpurse-row { display: flex; gap: 8px; font-size: 0.85rem; }
.gp-coinpurse-row .cp-lbl { color: var(--cream-dim, #b8ad98); }
.gp-coinpurse-row .cp-val { color: var(--cream, #e8e0d0); font-family: 'Courier New', monospace; }
.gp-coinpurse-note {
  margin-top: 6px; font-size: 0.78rem; color: var(--cream-dim, #b8ad98); cursor: pointer;
}
.gp-coinpurse-note:hover { color: var(--cream, #e8e0d0); }
.gp-coinpurse-note strong { color: var(--gold-light, #e8c878); }

/* Slim pointer where the For-Sale cart bar used to be — cart now lives in the
   Steward's Office (GEAR-01 follow-up, Rome 2026-07-20). */
.gp-cart-moved-hint {
  margin: 6px 0 10px; padding: 8px 12px; cursor: pointer;
  border: 1px dashed rgba(212,168,83,0.35); border-radius: 6px;
  background: rgba(212,168,83,0.06); color: var(--cream-dim, #b8ad98);
  font-size: 0.84rem; line-height: 1.4;
}
.gp-cart-moved-hint:hover { background: rgba(212,168,83,0.12); color: var(--cream, #e8e0d0); }
.gp-cart-moved-hint strong { color: var(--gold-light, #e8c878); }

/* GEAR-01 (Rome 2026-07-20): item-first Carry view. */
.gp-carry-view { display: flex; flex-direction: column; gap: 10px; }
.gp-carry-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gp-carry-search {
  flex: 0 1 260px; background: var(--bg-mid); border: 1px solid rgba(212,168,83,0.25);
  border-radius: 5px; color: var(--cream); font-size: 0.9rem; padding: 6px 10px;
}
.gp-carry-hint { font-size: 0.78rem; color: var(--cream-dim); }
.gp-carry-table-wrap { overflow-x: auto; }
.gp-carry-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.gp-carry-table thead th {
  text-align: left; color: var(--gold-dim); font-family: var(--font-title);
  font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 10px; border-bottom: 1px solid rgba(212,168,83,0.25); white-space: nowrap;
}
.gp-carry-table thead th.col-center { text-align: center; }
.gp-carry-th { cursor: pointer; user-select: none; }
.gp-carry-th:hover { color: var(--cream); }
.gp-carry-th.active { color: var(--gold-light, #e8c878); }
.gp-carry-sort-ind { font-size: 0.7em; }
.gp-carry-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--bg-mid); vertical-align: middle; }
.gp-carry-table tbody td.col-center { text-align: center; font-family: 'Courier New', monospace; color: var(--cream-dim); }
.gp-carry-table tbody tr:hover { background: rgba(212,168,83,0.05); }
.gp-carry-name { color: var(--cream); line-height: 1.7; }
.gp-carry-name > * { vertical-align: middle; }
.gp-carry-table tbody td.gp-carry-name { min-width: 200px; }
.gp-carry-type { color: var(--cream-dim); font-size: 0.8rem; }
.gp-carry-worn .gp-carry-name { color: var(--gold-light, #e8c878); }
.gp-carry-worn-tag {
  margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(212,168,83,0.14); border: 1px solid rgba(212,168,83,0.3); color: var(--gold-dim);
}
.gp-carry-loc {
  background: var(--bg-mid); border: 1px solid rgba(212,168,83,0.25); border-radius: 4px;
  color: var(--cream); font-size: 0.85rem; padding: 3px 6px; max-width: 180px;
}
.gp-carry-empty { text-align: center; color: var(--cream-dim); font-style: italic; padding: 18px; }
.gp-owned-empty { padding: 32px 20px; text-align: center;
  background: rgba(0,0,0,0.2); border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 6px; color: var(--cream-dim); }
.gp-owned-empty-msg { font-size: 0.95rem; margin-bottom: 12px; color: var(--cream); }
.gp-owned-empty-cta { padding: 7px 18px; cursor: pointer; border-radius: 4px;
  background: rgba(212,175,55,0.18); border: 1px solid rgba(212,175,55,0.55);
  color: var(--gold); font-size: 0.88rem; }
.gp-owned-empty-cta:hover { background: rgba(212,175,55,0.3); }

/* Cart-staged banner on the Owned view — shown when the cart has items
   so the player has a one-click path to For Sale's Commit button. */
.gp-owned-cart-banner { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; background: rgba(212, 168, 83, 0.12);
  border: 1px solid rgba(212, 168, 83, 0.45); border-radius: 6px; }
.gp-owned-cart-msg { font-size: 0.88rem; color: var(--cream); }
.gp-owned-cart-msg strong { color: var(--gold); font-family: 'Courier New', monospace; }

.gp-owned-summary { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 12px;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(212,175,55,0.18);
  border-radius: 6px; }
.gp-owned-summary-cell { display: flex; flex-direction: column; gap: 2px; }
.gp-owned-summary-label { font-size: 0.65rem; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--cream-dim); }
.gp-owned-summary-val { font-family: 'Courier New', monospace; font-size: 0.95rem;
  color: var(--cream); font-weight: 600; }

.gp-owned-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; padding: 12px 14px; }
.gp-owned-card-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08); }
.gp-owned-card-name { font-size: 1rem; font-weight: 600; color: var(--cream); }
.gp-owned-card-copy { display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 0.7rem; font-weight: 500; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 3px;
  color: var(--cream-dim); vertical-align: middle; }
.gp-owned-card-meta { font-size: 0.82rem; color: var(--cream-dim); }
.gp-owned-card-actions { display: flex; gap: 6px; }
.gp-owned-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .gp-owned-card-body { grid-template-columns: 1fr; } }
.gp-owned-card-section strong { display: block; font-size: 0.68rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }

/* Cart bar — sticky purchase staging strip at top of picker */
.gp-cart-bar { position: sticky; top: var(--banner-h, 0px); z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px;
  background: rgba(20, 16, 10, 0.95); backdrop-filter: blur(4px);
  border: 1px solid rgba(212,175,55,0.35); border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.gp-cart-bar.empty { background: rgba(20, 16, 10, 0.55); border-color: rgba(255,255,255,0.08); }

/* Resource groups — Silver / SC / WP, same paired-cell idiom as the
   Advancement sticky header. Three columns; WP gets a wider cell since
   it's reserved for richer crafting data. */
.gp-rgroups { display: grid; grid-template-columns: 2fr 2fr 3fr; gap: 10px; }
.gp-rgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 6px 6px 4px 6px; background: rgba(0,0,0,0.18);
  border: 1px solid rgba(212,175,55,0.18); border-radius: 4px; position: relative; }
.gp-rgroup.solo { grid-template-columns: 1fr; }
.gp-rgroup-label { position: absolute; top: -8px; left: 10px;
  background: rgba(20,16,10,0.95); padding: 0 6px;
  font-size: 0.62rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold); z-index: 1; }
.gp-rgroup-flag { display: inline-block; margin-left: 4px; padding: 0 4px;
  font-size: 0.6rem; background: rgba(180,80,60,0.22);
  border: 1px solid rgba(180,80,60,0.5); border-radius: 2px; color: #e09080;
  vertical-align: middle; letter-spacing: 0.5px; }
.gp-rcell { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px; padding: 5px 8px; text-align: center;
  display: flex; flex-direction: column; gap: 3px; }
.gp-rcell.available { background: rgba(212,168,83,0.10); border-color: rgba(212,168,83,0.35); }
.gp-rcell.over { color: #e09080; }
.gp-rcell-label { font-size: 0.6rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--cream-dim); }
.gp-rcell-val { font-size: 0.95rem; color: var(--cream); font-weight: 600;
  font-family: 'Courier New', monospace; line-height: 1.1; }
.gp-rcell.available .gp-rcell-val { color: #a8e0b8; }
.gp-rcell-val.over { color: #d88080; }
.gp-rcell-after { font-size: 0.72rem; color: var(--cream-dim); font-weight: normal;
  font-family: var(--font-body); margin-left: 3px; }
.gp-rcell-hint { font-size: 0.7rem; color: var(--cream-dim); font-style: italic; }

/* Action row — Commit + Clear. Sits below the resource groups. */
.gp-cart-action-row { display: flex; justify-content: flex-end; gap: 8px; }
.gp-cart-actions { display: flex; gap: 8px; }
.gp-btn { padding: 6px 14px; font-size: 0.85rem; cursor: pointer; border-radius: 4px;
  border: 1px solid; user-select: none; }
.gp-btn-commit { background: rgba(120, 180, 90, 0.18); border-color: rgba(120, 180, 90, 0.55); color: #b8e090; }
.gp-btn-commit:hover:not(.locked) { background: rgba(120, 180, 90, 0.32); }
.gp-btn-commit.locked { background: rgba(180, 80, 60, 0.15); border-color: rgba(180, 80, 60, 0.5); color: #e09080;
  cursor: not-allowed; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.78rem; font-weight: 700; }
.gp-btn-commit.locked::before { content: '🔒 '; }
.gp-btn-clear { background: rgba(180, 80, 60, 0.12); border-color: rgba(180, 80, 60, 0.4); color: #e09080; }
.gp-btn-clear:hover { background: rgba(180, 80, 60, 0.22); }
.gp-cart-list { width: 100%; display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); }
.gp-cart-item { display: flex; align-items: center; gap: 10px;
  padding: 4px 8px; background: rgba(255,255,255,0.04); border-radius: 3px; font-size: 0.82rem; }
.gp-cart-item-name { flex: 1; color: var(--cream); }
.gp-cart-item-qty { display: inline-flex; align-items: center; gap: 4px; }
.gp-cart-item-cost { min-width: 70px; text-align: right; color: var(--gold);
  font-family: 'Courier New', monospace; font-weight: 600; }
.gp-cart-item-remove { background: none; border: none; color: var(--cream-dim); cursor: pointer; font-size: 1rem;
  padding: 0 4px; line-height: 1; }
.gp-cart-item-remove:hover { color: #e09080; }

/* Price chip — prominent cost beside item name */
.gp-row-price { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 3px;
  background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.35);
  font-family: 'Courier New', monospace; font-size: 0.85rem; font-weight: 700; color: var(--gold);
  vertical-align: middle; }

/* Three-state buttons on item rows */
.gp-btn-buy { background: rgba(212,175,55,0.18); border-color: rgba(212,175,55,0.55); color: var(--gold); }
.gp-btn-buy:hover { background: rgba(212,175,55,0.3); }
.gp-btn-staged { background: rgba(180, 130, 60, 0.18); border-color: rgba(180, 130, 60, 0.5); color: #e0b070;
  cursor: default; }
.gp-btn-staged-remove { background: rgba(180, 130, 60, 0.12); border-color: rgba(180, 130, 60, 0.4);
  color: #e0b070; }
.gp-btn-staged-remove:hover { background: rgba(180, 130, 60, 0.24); }
.gp-btn-equipped { background: rgba(120, 180, 90, 0.15); border-color: rgba(120, 180, 90, 0.4); color: #a8d080;
  cursor: default; }
.gp-row-actions { display: flex; gap: 6px; align-items: center; }
.gp-status-pill { padding: 2px 8px; font-size: 0.72rem; border-radius: 3px; text-transform: uppercase;
  letter-spacing: 0.5px; }
.gp-status-pill.staged { background: rgba(180, 130, 60, 0.15); color: #e0b070;
  border: 1px solid rgba(180, 130, 60, 0.4); }
.gp-status-pill.owned { background: rgba(120, 180, 90, 0.15); color: #a8d080;
  border: 1px solid rgba(120, 180, 90, 0.4); }

/* Social Capital stepper in cart bar */
.gp-sc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: 100%; padding-top: 8px; margin-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.1); font-size: 0.82rem; }
.gp-sc-label { color: var(--cream-dim); text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem; }
.gp-sc-stepper { display: inline-flex; align-items: center; gap: 4px; }
.gp-sc-btn { width: 22px; height: 22px; border-radius: 3px; cursor: pointer; user-select: none;
  background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.4); color: var(--gold);
  font-size: 0.95rem; line-height: 1; padding: 0; }
.gp-sc-btn:hover:not(:disabled) { background: rgba(212,175,55,0.28); }
.gp-sc-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.gp-sc-value { min-width: 20px; text-align: center; font-family: 'Courier New', monospace;
  font-size: 0.95rem; color: var(--gold); font-weight: 600; }
.gp-sc-meta { color: var(--cream-dim); font-size: 0.78rem; }
.gp-sc-saving { color: #a8d080; font-weight: 600; font-family: 'Courier New', monospace; }

/* Active Pricing Effects strip */
.gp-pricing-effects { display: flex; flex-wrap: wrap; gap: 6px;
  width: 100%; padding-top: 6px; margin-top: 4px;
  font-size: 0.78rem; }
.gp-pricing-effects .gp-pe-label { color: var(--cream-dim); text-transform: uppercase;
  letter-spacing: 1px; font-size: 0.72rem; margin-right: 4px; }
.gp-pe-tag {
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--cream);
  font-size: 0.78rem;
}

/* Impeded tile in the combat status bar — sits between Pain and Facing.
   Inactive: faint gold accent, 0/no-penalty look. Active: amber accent
   matching the encumbrance Burdened tier. Per Rome 2026-04-30. */
/* Burdened tile — Bulk over Stability, Accurate(-N) on Physical Action
   Checks. Renamed from csb-impeded 2026-05-24 to match canon. */
.csb-tile.csb-burdened { border-left-color: rgba(176,122,23,0.45); min-width: 128px; }
.csb-tile.csb-burdened .csb-value { color: var(--cream-dark); }
.csb-tile.csb-burdened-active { border-left-color: #b07a17; background: rgba(176,122,23,0.10); }
.csb-tile.csb-burdened-active .csb-value { color: #e0c290; }

/* Combat tab — wield toggle on weapon cards. Per Rome 2026-04-30.
   Two visual states per button: neutral "Stowed" or active "Wielded" /
   "Off Hand". Active labels share the page's gold/amber language. */
/* Match the .combat-add-btn style — gold-tinted rounded button. Per Rome 2026-04-30. */
.wc-wield {
  background: rgba(212, 168, 83, 0.12);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  padding: 4px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  margin-left: auto;
  margin-right: 6px;
  min-width: 78px;
  text-align: center;
}
.wc-wield:hover { background: rgba(212, 168, 83, 0.2); }
.wc-wield.on.main {
  background: rgba(212, 168, 83, 0.30);
  border-color: var(--gold-light);
  color: var(--gold-light);
  font-weight: 700;
}
.wc-wield.on.main:hover { background: rgba(212, 168, 83, 0.42); }
.wc-wield.on.off {
  background: rgba(176, 122, 23, 0.22);
  border-color: #b07a17;
  color: #d8a23a;
  font-weight: 700;
}
.wc-wield.on.off:hover { background: rgba(176, 122, 23, 0.34); }

/* Whole-card visual hint when wielded. */
.weapon-card.wielded-main { box-shadow: 4px 0 0 var(--gold, #d4af37) inset; border-color: rgba(212, 175, 55, 0.5) !important; }
.weapon-card.wielded-off  { box-shadow: 4px 0 0 #b07a17 inset; border-color: rgba(176, 122, 23, 0.5) !important; }

/* Penalty banner — appears under keywords when wielded off-hand or thrown
   attacks are present. Styled to read as part of the card, not pasted on. */
.wc-wield-penalties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 10px;
  margin: 6px 0 4px 0;
  background: rgba(176, 122, 23, 0.06);
  border-left: 3px solid rgba(176, 122, 23, 0.5);
  border-radius: 0 3px 3px 0;
  font-size: 0.78rem;
}
.wc-pen-label {
  color: var(--gold-dim, #c9a93f);
  font-weight: 700;
  font-family: var(--font-title, serif);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-size: 0.74rem;
  margin-right: 2px;
}
.wc-pen-tag {
  padding: 1px 8px;
  border-radius: 10px;
  font-family: 'Courier New', monospace;
  font-size: 0.76rem;
  border: 1px solid;
}
.wc-pen-tag.active {
  background: rgba(180, 60, 40, 0.20);
  border-color: rgba(220, 90, 70, 0.55);
  color: #e8b8b0;
}
.wc-pen-tag.mitigated {
  background: transparent;
  border-color: rgba(140, 140, 140, 0.3);
  border-style: dashed;
  color: var(--cream-dark, #8a8276);
  text-decoration: line-through;
}
.wc-pen-mit {
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(80, 140, 90, 0.16);
  border: 1px solid rgba(110, 180, 120, 0.45);
  color: #b8d4b8;
  font-size: 0.74rem;
  font-family: var(--font-title, serif);
  letter-spacing: 0.5px;
}
.wc-pen-mit::before { content: '· '; opacity: 0.6; }

/* Per-attack penalty pill — slots into the Mods column when a wielded-state
   penalty (off-hand or thrown) is reducing this row's pool/power.
   Per Rome 2026-04-30. */
.wc-mod-pill.wc-mod-pen {
  background: rgba(180, 60, 40, 0.22);
  border-color: rgba(220, 90, 70, 0.55);
  color: #e8b8b0;
}

/* Phase 7 W2 (Rome 2026-05-15) — magic-item weapon stat-mod pills.
   Distinct teal-purple cast so the magic bonuses don't visually merge
   with the green dynamic-modifier pills or the red wield-penalty pills. */
.wc-mod-pill.wc-mod-magic {
  background: rgba(120, 90, 200, 0.22);
  border-color: rgba(170, 130, 240, 0.55);
  color: #c8b0e8;
}


/* ─── PHASE 3B AUTHORED COMPETENCY CARDS (Rome 2026-05-01) ─────── */

#downtime-competencies .cc-section-convert {
  border-left-color: rgba(212,168,83,0.5);
  background: rgba(212,168,83,0.06);
}

#downtime-competencies .cc-convert-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
  font-size: 0.74rem;
}

#downtime-competencies .cc-convert-rate {
  font-family: 'Courier New', monospace;
  color: var(--gold-dim);
}

#downtime-competencies .cc-convert-cite {
  color: var(--cream-dark);
  font-style: italic;
  font-size: 0.7rem;
}

#downtime-competencies .cc-convert-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#downtime-competencies .cc-convert-btn {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-convert-btn:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}

#downtime-competencies .cc-convert-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#downtime-competencies .cc-convert-all {
  margin-left: auto;
}

#downtime-competencies .cc-section-projects {
  border-left-color: rgba(143,198,160,0.4);
  background: rgba(143,198,160,0.03);
}

#downtime-competencies .cc-locked {
  font-size: 0.76rem;
  color: var(--cream-dark);
}

#downtime-competencies .cc-locked-msg {
  margin-bottom: 5px;
}

#downtime-competencies .cc-locked-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
}

#downtime-competencies .cc-locked-list strong {
  color: var(--gold-dim);
}

#downtime-competencies .cc-talent-cp {
  color: var(--cream-dark);
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
}

#downtime-competencies .cc-proj-group {
  margin-top: 6px;
}

#downtime-competencies .cc-proj-group:first-child {
  margin-top: 0;
}

#downtime-competencies .cc-proj-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px dotted var(--bg-mid);
}

#downtime-competencies .cc-proj-group-name {
  font-family: var(--font-title);
  color: var(--cream);
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}

#downtime-competencies .cc-proj-group-talent {
  color: var(--cream-dark);
  font-size: 0.7rem;
  font-style: italic;
}

#downtime-competencies .cc-proj-group-note {
  color: var(--cream-dark);
  font-size: 0.7rem;
  font-style: italic;
  margin-bottom: 4px;
}

#downtime-competencies .cc-proj-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#downtime-competencies .cc-proj-row {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 3px 4px;
  border-radius: 3px;
  font-size: 0.76rem;
}

#downtime-competencies .cc-proj-row:hover {
  background: rgba(212,168,83,0.04);
}

#downtime-competencies .cc-proj-locked {
  opacity: 0.55;
}

#downtime-competencies .cc-proj-name {
  color: var(--cream);
}

#downtime-competencies .cc-proj-cost {
  font-family: 'Courier New', monospace;
  color: var(--gold-dim);
  text-align: right;
  white-space: nowrap;
}

#downtime-competencies .cc-proj-traits {
  color: var(--cream-dark);
  font-size: 0.72rem;
  font-style: italic;
}

#downtime-competencies .cc-proj-spend {
  padding: 2px 8px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-proj-spend:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}

#downtime-competencies .cc-proj-spend:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ─── PHASE 3B FIX-UP #2: PROJECT COMPLETION COUNTERS (Rome 2026-05-01) ── */

#downtime-competencies .cc-proj-row {
  /* widen grid to make room for the ×N chip between traits and Spend */
  grid-template-columns: 1fr auto 1.2fr auto auto;
}

#downtime-competencies .cc-proj-count {
  display: inline-block;
  min-width: 26px;
  padding: 2px 6px;
  background: rgba(143,198,160,0.12);
  border: 1px solid rgba(143,198,160,0.35);
  border-radius: 10px;
  color: #8fc6a0;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  text-align: center;
  font-weight: 600;
}

#downtime-competencies .cc-proj-count-zero {
  /* placeholder so the grid columns stay aligned even when no count */
  background: transparent;
  border-color: transparent;
  color: transparent;
}

#downtime-competencies .cc-proj-done .cc-proj-name {
  color: var(--gold-dim);
}

#downtime-competencies .cc-proj-group-tally {
  margin-left: 8px;
  padding: 1px 8px;
  background: rgba(143,198,160,0.12);
  border: 1px solid rgba(143,198,160,0.35);
  border-radius: 9px;
  color: #8fc6a0;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
}


/* ─── PHASE 3B APOTHECARY (Rome 2026-05-01) ─────────────────── */

#downtime-competencies .cc-section-pharmacist {
  border-left-color: rgba(231,153,109,0.4);
  background: rgba(231,153,109,0.04);
}

#downtime-competencies .cc-pharmacist-desc {
  font-size: 0.74rem;
  color: var(--cream-dark);
  margin-bottom: 5px;
}

#downtime-competencies .cc-pharmacist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#downtime-competencies .cc-pharmacist-convert-btn {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-pharmacist-convert-btn:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(231,153,109,0.7);
  color: #e9a36b;
}

#downtime-competencies .cc-pharmacist-convert-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#downtime-competencies .cc-pharmacist-all {
  margin-left: auto;
}

#downtime-competencies .cc-section-herbs {
  border-left-color: rgba(143,198,160,0.4);
  background: rgba(143,198,160,0.04);
}

#downtime-competencies .cc-herbs-hint {
  font-size: 0.72rem;
  color: var(--cream-dark);
  margin: 4px 0;
  font-style: italic;
}

#downtime-competencies .cc-herbs-locked {
  opacity: 0.7;
}

#downtime-competencies .cc-herbs-adjust button {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#downtime-competencies .cc-herbs-adjust button:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}

#downtime-competencies .cc-herbs-minus { color: #e9a36b; }
#downtime-competencies .cc-herbs-plus  { color: #8fc6a0; }
#downtime-competencies .cc-herbs-zero  { color: var(--cream-dark); margin-left: auto; }

#downtime-competencies .cc-section-diagnose {
  border-left-color: rgba(212,168,83,0.4);
  background: rgba(212,168,83,0.04);
}

#downtime-competencies .cc-diagnose-desc {
  font-size: 0.75rem;
  color: var(--cream);
  line-height: 1.45;
  margin-bottom: 6px;
}

#downtime-competencies .cc-diagnose-pool {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(212,168,83,0.08);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.76rem;
}

#downtime-competencies .cc-diagnose-label {
  color: var(--cream-dark);
}

#downtime-competencies .cc-diagnose-val {
  color: var(--gold-dim);
  font-weight: 600;
  font-size: 0.85rem;
}

#downtime-competencies .cc-diagnose-mod {
  color: var(--cream-dark);
  font-style: italic;
}

#downtime-competencies .cc-section-domains {
  border-left-color: rgba(212,168,83,0.3);
  background: rgba(212,168,83,0.025);
}

#downtime-competencies .cc-domain-list,
#downtime-competencies .cc-talents-list {
  margin: 0 0 6px;
  padding-left: 18px;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--cream);
}

#downtime-competencies .cc-domain-list strong,
#downtime-competencies .cc-talents-list strong {
  color: var(--gold-dim);
}

#downtime-competencies .cc-talent-state {
  display: inline-block;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 9px;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  font-style: italic;
}

#downtime-competencies .cc-on {
  background: rgba(143,198,160,0.12);
  border: 1px solid rgba(143,198,160,0.35);
  color: #8fc6a0;
}

#downtime-competencies .cc-off {
  background: rgba(120,120,120,0.08);
  border: 1px solid rgba(120,120,120,0.25);
  color: var(--cream-dark);
}

/* Collapsible Talent rows in the Downtime / Competencies cards.
   Each trained/untrained talent is now a <details class="cc-talent">
   wrapped in an <li class="cc-talent-li">. Closed state shows just the
   name + trained/untrained pill (with a small disclosure caret); the
   talent's specific mechanics live in .cc-talent-body and only appear
   when the row is expanded. Core-tier talent <li>s are unchanged —
   they stay flat at the top of the list as canonical core abilities.
   Per Rome 2026-05-11. */
#downtime-competencies li.cc-talent-li {
  list-style: none;
  margin-left: -18px;          /* offset the .cc-domain-list padding-left */
  padding-left: 0;
}
#downtime-competencies details.cc-talent {
  margin: 1px 0;
}
/* Locked project category (talent not yet trained) — dimmed but still
   expandable to show the unlock note. */
#downtime-competencies details.cc-talent.cc-proj-cat-locked {
  opacity: 0.6;
}
#downtime-competencies details.cc-talent > summary.cc-talent-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  user-select: none;
}
#downtime-competencies details.cc-talent > summary.cc-talent-summary::-webkit-details-marker { display: none; }
#downtime-competencies details.cc-talent > summary.cc-talent-summary::before {
  content: '▸';
  color: var(--gold-dim);
  font-size: 0.85em;
  margin-right: 2px;
  flex: 0 0 auto;
  transition: transform 0.15s ease, color 0.15s ease;
}
#downtime-competencies details.cc-talent[open] > summary.cc-talent-summary::before {
  transform: rotate(90deg);
  color: var(--gold);
}
#downtime-competencies details.cc-talent > summary.cc-talent-summary:hover {
  color: var(--gold-light, #e8c878);
}
#downtime-competencies details.cc-talent > summary.cc-talent-summary:hover::before {
  color: var(--gold);
}
#downtime-competencies details.cc-talent > summary.cc-talent-summary strong {
  color: var(--gold-dim);
}
#downtime-competencies details.cc-talent[open] > summary.cc-talent-summary strong {
  color: var(--gold-light, #e8c878);
}
#downtime-competencies details.cc-talent .cc-talent-body {
  padding: 4px 8px 6px 22px;     /* indent under the caret + name */
  margin-top: 2px;
  background: rgba(0, 0, 0, 0.12);
  border-left: 2px solid rgba(212, 175, 55, 0.20);
  border-radius: 3px;
  color: var(--cream-dim);
  font-size: 0.74rem;
  line-height: 1.5;
}
#downtime-competencies details.cc-talent .cc-talent-body strong {
  color: var(--gold-light, #e8c878);
}
#downtime-competencies details.cc-talent .cc-talent-body em {
  color: var(--cream);
  font-style: italic;
}

/* Embedded mechanics sections (Worked Days, Briefs, Damage Control,
   Dissertation Projects, Treatment Projects, etc.) that live INSIDE a
   talent's <details> body. Tightened margin and a thinner accent so
   they read as belonging to the parent talent rather than competing
   with top-level card sections. Per Rome 2026-05-11. */
#downtime-competencies details.cc-talent .cc-talent-body .cc-section.cc-talent-section,
#downtime-competencies details.cc-talent .cc-talent-body .cc-talent-section {
  margin: 6px 0 4px 0;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.10);
  border-left: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 2px;
}
#downtime-competencies details.cc-talent .cc-talent-body .cc-talent-section > .cc-section-head {
  font-size: 0.78rem;
  margin-bottom: 4px;
}
#downtime-competencies details.cc-talent .cc-talent-body .cc-talent-section .cc-section-head:not(:first-child) {
  margin-top: 6px;
}
#downtime-competencies details.cc-talent .cc-talent-cp {
  color: var(--cream-dark);
  font-style: italic;
  font-size: 0.85em;
  margin-left: 2px;
}

#downtime-competencies .cc-domain-note {
  font-size: 0.72rem;
  color: var(--cream-dark);
  font-style: italic;
}

#downtime-competencies .cc-talent-via {
  margin-left: 4px;
  color: var(--cream-dark);
  font-size: 0.7rem;
  font-style: italic;
}


/* ─── PHASE 3B ARTIST (Rome 2026-05-01) ─────────────────────── */

#downtime-competencies .cc-section-jeweler {
  border-left-color: rgba(168,140,212,0.4);
  background: rgba(168,140,212,0.04);
}

#downtime-competencies .cc-jeweler-desc {
  font-size: 0.74rem;
  color: var(--cream-dark);
  margin-bottom: 5px;
}

#downtime-competencies .cc-jeweler-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#downtime-competencies .cc-jeweler-convert-btn {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-jeweler-convert-btn:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(168,140,212,0.7);
  color: #a88cd4;
}

#downtime-competencies .cc-jeweler-convert-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Artist Project rows have more columns (mat / status / value chips). */
#downtime-competencies .cc-proj-row-art {
  grid-template-columns: 1.2fr auto auto auto auto auto auto;
  gap: 6px;
  font-size: 0.74rem;
}

#downtime-competencies .cc-proj-mat {
  font-family: 'Courier New', monospace;
  color: var(--cream-dark);
  white-space: nowrap;
}

#downtime-competencies .cc-proj-status {
  font-family: 'Courier New', monospace;
  color: #8fc6a0;
  white-space: nowrap;
}

#downtime-competencies .cc-proj-value {
  font-family: 'Courier New', monospace;
  color: var(--gold-dim);
  white-space: nowrap;
}

/* Completed Works inventory section. */
#downtime-competencies .cc-section-works {
  border-left-color: rgba(143,198,160,0.4);
  background: rgba(143,198,160,0.03);
}

#downtime-competencies .cc-works-group {
  margin-top: 5px;
}

#downtime-competencies .cc-works-group:first-child {
  margin-top: 0;
}

#downtime-competencies .cc-works-group-head {
  font-family: var(--font-title);
  color: var(--cream);
  font-size: 0.76rem;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px dotted var(--bg-mid);
}

#downtime-competencies .cc-works-count {
  color: var(--cream-dark);
  font-size: 0.7rem;
  font-style: italic;
  font-family: 'Courier New', monospace;
}

#downtime-competencies .cc-works-row {
  display: grid;
  grid-template-columns: 1.5fr 1.4fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 3px 4px;
  border-radius: 3px;
  font-size: 0.75rem;
}

#downtime-competencies .cc-works-row:hover {
  background: rgba(212,168,83,0.04);
}

#downtime-competencies .cc-works-active {
  background: rgba(143,198,160,0.06);
}

#downtime-competencies .cc-works-name {
  color: var(--cream);
}

#downtime-competencies .cc-works-meta {
  color: var(--cream-dark);
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
}

#downtime-competencies .cc-works-toggle {
  padding: 2px 8px;
  background: var(--bg-card);
  color: var(--cream-dark);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-works-toggle:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}

#downtime-competencies .cc-works-active .cc-works-toggle {
  background: rgba(143,198,160,0.15);
  border-color: rgba(143,198,160,0.5);
  color: #8fc6a0;
}


/* Sell button on Completed Works rows (Phase 3b Artist, Rome 2026-05-01). */
#downtime-competencies .cc-works-row {
  /* widen grid for the new Sell button */
  grid-template-columns: 1.5fr 1.4fr auto auto;
}

#downtime-competencies .cc-works-sell {
  padding: 2px 8px;
  background: var(--bg-card);
  color: var(--cream-dark);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-works-sell:hover {
  background: var(--bg-mid);
  border-color: rgba(231,153,109,0.7);
  color: #e9a36b;
}


/* Manual ± adjusters on Social tab Social Capital row (Rome 2026-05-01). */
.sc-manual-adjust {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 10px;
}

.sc-adj-btn {
  padding: 2px 7px;
  background: var(--bg-card);
  color: var(--cream-dark);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sc-adj-btn:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--cream);
}

/* Shared Spend/Earn control (Rome 2026-06-08) — amount field + Spend/Earn
   buttons. Replaces the fixed-step button arrays on Legend, Social Capital,
   and the Wallet Free-sp row. */
.se-ctl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.se-amt {
  width: 56px;
  padding: 2px 6px;
  background: var(--bg-card);
  color: #f4efe4;
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  text-align: right;
}
.se-amt:focus {
  outline: none;
  border-color: var(--gold-dim);
}
.se-btn {
  padding: 2px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.se-btn:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: #f4efe4;
}
.se-spend:hover {
  border-color: #c4694f;
  color: #d98a72;
}
.se-earn:hover {
  border-color: var(--gold, #d4a853);
  color: var(--gold-light, #e8c878);
}


/* ─── PHASE 3B BUREAUCRAT (Rome 2026-05-01) ─────────────────── */

#downtime-competencies .cc-section-worked-days {
  border-left-color: rgba(212,168,83,0.4);
  background: rgba(212,168,83,0.04);
}

#downtime-competencies .cc-section-briefs {
  border-left-color: rgba(143,198,160,0.4);
  background: rgba(143,198,160,0.04);
}

#downtime-competencies .cc-wd-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

#downtime-competencies .cc-wd-label {
  font-size: 0.74rem;
  color: var(--cream-dark);
}

#downtime-competencies .cc-wd-settlement {
  padding: 3px 6px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
}

#downtime-competencies .cc-wd-spend {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-wd-spend:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}

#downtime-competencies .cc-wd-spend:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#downtime-competencies .cc-wd-note {
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--cream-dark);
  font-style: italic;
}

#downtime-competencies .cc-wd-adjust button,
#downtime-competencies .cc-brief-adjust button {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#downtime-competencies .cc-wd-adjust button:hover,
#downtime-competencies .cc-brief-adjust button:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}

#downtime-competencies .cc-wd-minus,
#downtime-competencies .cc-brief-minus { color: #e9a36b; }
#downtime-competencies .cc-wd-plus,
#downtime-competencies .cc-brief-plus  { color: #8fc6a0; }
#downtime-competencies .cc-wd-zero,
#downtime-competencies .cc-brief-zero  { color: var(--cream-dark); margin-left: auto; }

#downtime-competencies .cc-brief-spend-sp,
#downtime-competencies .cc-brief-spend-sc {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-brief-spend-sp:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}

#downtime-competencies .cc-brief-spend-sc:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(143,198,160,0.7);
  color: #8fc6a0;
}

#downtime-competencies .cc-brief-spend-sp:disabled,
#downtime-competencies .cc-brief-spend-sc:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ─── PHASE 3B CARPENTER (Rome 2026-05-01) ─────────────────── */

#downtime-competencies .cc-section-buildings {
  border-left-color: rgba(212,168,83,0.35);
  background: rgba(212,168,83,0.04);
}

#downtime-competencies .cc-bld-desc {
  font-size: 0.74rem;
  color: var(--cream-dark);
  line-height: 1.45;
  margin-bottom: 6px;
}

#downtime-competencies .cc-bld-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

#downtime-competencies .cc-bld-label {
  font-size: 0.74rem;
  color: var(--cream-dark);
}

#downtime-competencies .cc-bld-step {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#downtime-competencies .cc-bld-step:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}

#downtime-competencies .cc-bld-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#downtime-competencies .cc-bld-val {
  min-width: 28px;
  text-align: center;
  font-family: 'Courier New', monospace;
  color: var(--gold-dim);
  font-weight: 600;
  font-size: 0.85rem;
}

#downtime-competencies .cc-bld-fine {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.78rem;
  margin-bottom: 5px;
  cursor: pointer;
}

#downtime-competencies .cc-bld-fine-hint {
  color: var(--cream-dark);
  font-size: 0.7rem;
  font-style: italic;
}

#downtime-competencies .cc-bld-fine-locked {
  font-size: 0.72rem;
  color: var(--cream-dark);
  font-style: italic;
  margin-bottom: 5px;
  opacity: 0.7;
}

#downtime-competencies .cc-bld-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 5px;
  padding: 4px 8px;
  background: rgba(212,168,83,0.06);
  border-radius: 3px;
  font-size: 0.78rem;
}

#downtime-competencies .cc-bld-total-label {
  color: var(--cream-dark);
  font-size: 0.74rem;
}

#downtime-competencies .cc-bld-total-val {
  font-family: 'Courier New', monospace;
  color: var(--gold-dim);
  font-weight: 600;
}

#downtime-competencies .cc-bld-fine-flag,
#downtime-competencies .cc-bld-fine-flag-inline {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(231,153,109,0.15);
  border: 1px solid rgba(231,153,109,0.45);
  border-radius: 8px;
  color: #e9a36b;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
}

#downtime-competencies .cc-bld-spend {
  padding: 5px 12px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-bld-spend:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}

#downtime-competencies .cc-bld-spend:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Carpenter buildings aggregate row + Fine Finished note (Rome 2026-05-01). */
#downtime-competencies .cc-bld-aggregate {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 6px;
  flex-wrap: wrap;
}

#downtime-competencies .cc-bld-agg-count {
  font-family: var(--font-title);
  color: var(--cream);
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}

#downtime-competencies .cc-bld-agg-meta {
  flex: 1;
  color: var(--cream-dark);
  font-size: 0.74rem;
  font-family: 'Courier New', monospace;
}

#downtime-competencies .cc-bld-sell-all {
  padding: 3px 10px;
  background: var(--bg-card);
  color: var(--cream-dark);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-bld-sell-all:hover {
  background: var(--bg-mid);
  border-color: rgba(231,153,109,0.7);
  color: #e9a36b;
}

#downtime-competencies .cc-bld-fine-note {
  margin: 4px 0 6px;
  padding: 5px 8px;
  font-size: 0.72rem;
  color: var(--cream-dark);
  font-style: italic;
  background: rgba(212,168,83,0.04);
  border-left: 2px solid rgba(212,168,83,0.25);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.45;
}


/* ─── PHASE 3B CLERIC (Rome 2026-05-01) ─────────────────────── */

#downtime-competencies .cc-section-mercies {
  border-left-color: rgba(143,198,160,0.4);
  background: rgba(143,198,160,0.04);
}

#downtime-competencies .cc-mercy-spend-sp,
#downtime-competencies .cc-mercy-spend-sc {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-mercy-spend-sp:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}

#downtime-competencies .cc-mercy-spend-sc:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(143,198,160,0.7);
  color: #8fc6a0;
}

#downtime-competencies .cc-mercy-spend-sp:disabled,
#downtime-competencies .cc-mercy-spend-sc:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#downtime-competencies .cc-mercy-adjust button {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#downtime-competencies .cc-mercy-adjust button:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}

#downtime-competencies .cc-mercy-minus { color: #e9a36b; }
#downtime-competencies .cc-mercy-plus  { color: #8fc6a0; }
#downtime-competencies .cc-mercy-zero  { color: var(--cream-dark); margin-left: auto; }


/* ─── PHASE 3B-B CLERIC SERMON / PROSELYTIZE (Rome 2026-05-01) ─ */

#downtime-competencies .cc-section-drafting {
  border-left-color: rgba(212,168,83,0.35);
  background: rgba(212,168,83,0.04);
}

#downtime-competencies .cc-section-sermons {
  border-left-color: rgba(168,140,212,0.35);
  background: rgba(168,140,212,0.04);
}

#downtime-competencies .cc-section-prosel-tokens {
  border-left-color: rgba(143,198,160,0.35);
  background: rgba(143,198,160,0.04);
}

#downtime-competencies .cc-drafting-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
}

#downtime-competencies .cc-sermon-complete {
  align-self: flex-start;
  padding: 5px 12px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-sermon-complete:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}

#downtime-competencies .cc-sermon-complete:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#downtime-competencies .cc-drafting-hint {
  font-size: 0.7rem;
  color: var(--cream-dark);
  font-style: italic;
  line-height: 1.45;
}

#downtime-competencies .cc-drafting-adjust button,
#downtime-competencies .cc-prosel-adjust button {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#downtime-competencies .cc-drafting-adjust button:hover,
#downtime-competencies .cc-prosel-adjust button:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}

#downtime-competencies .cc-drafting-minus,
#downtime-competencies .cc-prosel-tok-minus,
#downtime-competencies .cc-favor-minus { color: #e9a36b; }
#downtime-competencies .cc-drafting-plus,
#downtime-competencies .cc-prosel-tok-plus,
#downtime-competencies .cc-favor-plus  { color: #8fc6a0; }
#downtime-competencies .cc-drafting-zero,
#downtime-competencies .cc-favor-zero  { color: var(--cream-dark); margin-left: auto; }

#downtime-competencies .cc-empty-note {
  font-size: 0.74rem;
  color: var(--cream-dark);
  font-style: italic;
}

#downtime-competencies .cc-sermon-row {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(168,140,212,0.05);
  border-radius: 3px;
}

#downtime-competencies .cc-sermon-row:first-child { margin-top: 0; }

#downtime-competencies .cc-sermon-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

#downtime-competencies .cc-sermon-name {
  font-family: var(--font-title);
  color: var(--cream);
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  flex: 1;
}

#downtime-competencies .cc-sermon-sway {
  font-family: 'Courier New', monospace;
  color: #a88cd4;
  font-size: 0.78rem;
  font-weight: 600;
}

#downtime-competencies .cc-sermon-delete {
  padding: 1px 7px;
  background: transparent;
  color: var(--cream-dark);
  border: 1px solid var(--bg-mid);
  border-radius: 50%;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  cursor: pointer;
}

#downtime-competencies .cc-sermon-delete:hover {
  background: rgba(231,153,109,0.15);
  border-color: rgba(231,153,109,0.5);
  color: #e9a36b;
}

#downtime-competencies .cc-sermon-meta {
  font-size: 0.7rem;
  color: var(--cream-dark);
  font-family: 'Courier New', monospace;
  margin-bottom: 5px;
}

#downtime-competencies .cc-prosel-form {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px dashed var(--bg-mid);
}

#downtime-competencies .cc-prosel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
}

#downtime-competencies .cc-prosel-label {
  color: var(--cream-dark);
}

#downtime-competencies .cc-prosel-label-inline {
  color: var(--cream-dark);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

#downtime-competencies .cc-prosel-settlement,
#downtime-competencies .cc-prosel-dos {
  padding: 2px 6px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
}

#downtime-competencies .cc-prosel-favor {
  width: 50px;
  padding: 2px 6px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
}

#downtime-competencies .cc-prosel-apply {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  margin-left: auto;
}

#downtime-competencies .cc-prosel-apply:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(168,140,212,0.7);
  color: #a88cd4;
}

#downtime-competencies .cc-prosel-apply:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#downtime-competencies .cc-favor-pos { color: #8fc6a0; font-weight: 600; }
#downtime-competencies .cc-favor-neg { color: #e9a36b; font-weight: 600; }


/* ─── PROSELYTIZER LEGIBILITY PASS (Rome 2026-05-21) ─────────────────
   Strips inline styles from the JS render in favor of class-based
   styling that matches the rest of the downtime cards: gold-dim
   section heads, muted cream-dim body text, soft gold-bordered CTAs
   that fill on hover (vs. always-solid-gold). */

/* Inline value + adjust row used by Sermon Drafting / Proselytize /
   Queued Favor — label on the left, value+buttons grouped on the right. */
#downtime-competencies .cc-row-inline-adjust {
  flex-wrap: wrap;
  gap: 8px;
}

#downtime-competencies .cc-row-val-group {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

#downtime-competencies .cc-row-inline-adjust .cc-row-val {
  font-size: 0.84rem;
  font-weight: 600;
}

#downtime-competencies .cc-row-val-suffix {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--cream-dark);
  margin-left: 3px;
  font-family: inherit;
}

#downtime-competencies .cc-row-inline-adjust .cc-adjust {
  gap: 4px;
}

/* Body hint under a section head — visible but soft. */
#downtime-competencies .cc-section-hint {
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--cream-dim);
  font-style: italic;
  line-height: 1.4;
}

/* ── Complete Sermon sub-section (only when ≥8 segments) ─────────── */
#downtime-competencies .cc-section-sermon-complete {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--bg-mid);
}

#downtime-competencies .cc-section-sermon-complete > .cc-section-head {
  color: var(--gold);
  margin-bottom: 5px;
}

#downtime-competencies .cc-sermon-name-row {
  gap: 8px;
  align-items: center;
  margin-top: 5px;
}

#downtime-competencies .cc-sermon-stage-name {
  flex: 1;
  min-width: 180px;
  padding: 4px 8px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.8rem;
}

#downtime-competencies .cc-sermon-stage-name::placeholder {
  color: var(--cream-dark);
  font-style: italic;
}

#downtime-competencies .cc-sermon-stage-name:focus {
  outline: none;
  border-color: var(--gold-dim);
}

/* Per-skill roller row */
#downtime-competencies .cc-sermon-roll-row {
  margin-top: 5px;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

#downtime-competencies .cc-roll-skill-label {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.78rem;
}

#downtime-competencies .cc-roll-pool-info {
  color: var(--cream-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
}

#downtime-competencies .cc-roll-effect-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--cream-dark);
  font-size: 0.74rem;
}

#downtime-competencies .cc-sermon-stage-effect,
#downtime-competencies .cc-prosel-hits {
  width: 54px;
  padding: 2px 6px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  text-align: right;
}

#downtime-competencies .cc-sermon-stage-effect:focus,
#downtime-competencies .cc-prosel-hits:focus {
  outline: none;
  border-color: var(--gold-dim);
}

#downtime-competencies .cc-sermon-autoroll,
#downtime-competencies .cc-prosel-autoroll {
  padding: 3px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#downtime-competencies .cc-sermon-autoroll:hover:not(:disabled),
#downtime-competencies .cc-prosel-autoroll:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold);
}

#downtime-competencies .cc-sermon-autoroll:disabled,
#downtime-competencies .cc-prosel-autoroll:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sway preview row */
#downtime-competencies .cc-sermon-sway-row {
  margin-top: 6px;
}

#downtime-competencies .cc-sermon-sway-val {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cream-dim);
}

#downtime-competencies .cc-sermon-sway-val.ready {
  color: var(--gold);
}

/* ── Block CTAs (Complete Sermon, Deliver, Apply Queued Favor) ──── */
#downtime-competencies .cc-cta-block {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#downtime-competencies .cc-cta-block:hover:not(:disabled) {
  background: var(--gold-dim);
  color: var(--bg-dark);
}

#downtime-competencies .cc-cta-block:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--bg-mid);
  color: var(--cream-dark);
}

/* Sermon Complete is the most prominent CTA — slightly bigger. */
#downtime-competencies .cc-sermon-complete.cc-cta-block {
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Deliver button when in cta-block mode — override the existing
   margin-left:auto on .cc-prosel-apply so it stretches full-width. */
#downtime-competencies .cc-prosel-apply.cc-cta-block {
  margin-left: 0;
  margin-top: 8px;
  padding: 7px 12px;
  font-size: 0.78rem;
}

/* ── Delivery form refinements ──────────────────────────────────── */
#downtime-competencies .cc-prosel-form .cc-prosel-row {
  font-size: 0.76rem;
  gap: 10px;
  align-items: baseline;
}

#downtime-competencies .cc-prosel-roll-row {
  margin-top: 5px;
}

#downtime-competencies .cc-prosel-pool-info {
  color: var(--cream-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
}

#downtime-competencies .cc-prosel-tn {
  color: var(--cream);
  font-weight: 600;
}

#downtime-competencies .cc-prosel-result {
  color: var(--cream-dark);
  font-size: 0.74rem;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

#downtime-competencies .cc-prosel-effect,
#downtime-competencies .cc-prosel-dos-display {
  color: var(--gold);
  font-family: 'Courier New', monospace;
  font-weight: 600;
  font-size: 0.8rem;
}

#downtime-competencies .cc-prosel-favor-suffix {
  color: var(--cream-dark);
  font-size: 0.7rem;
  font-style: italic;
  margin-left: 2px;
}

/* Wider favor input now that suffix and cap-hint share the row. */
#downtime-competencies .cc-prosel-form .cc-prosel-favor {
  width: 54px;
  text-align: right;
}

/* ── Queued Favor for next Chapter ──────────────────────────────── */
#downtime-competencies .cc-section-queued-favor {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--bg-mid);
  border-left-color: rgba(212,168,83,0.35);
  background: rgba(212,168,83,0.04);
}

#downtime-competencies .cc-queued-favor-val {
  font-family: 'Courier New', monospace;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cream);
}

/* ─── Proselytizer-card CONTRAST OVERRIDES (Rome 2026-05-21 v2) ──────
   The original CSS uses --gold-dim section heads and --cream-dark row
   labels, which against the dark bg sit right at WCAG threshold and read
   as muddy. Brighten everything inside the Proselytizer card's five
   sections without touching the other downtime renderers. */

/* Section heads — gold-dim → gold (brighter, still warm) */
#downtime-competencies .cc-section-drafting > .cc-section-head,
#downtime-competencies .cc-section-sermon-complete > .cc-section-head,
#downtime-competencies .cc-section-sermons > .cc-section-head,
#downtime-competencies .cc-section-prosel-tokens > .cc-section-head,
#downtime-competencies .cc-section-queued-favor > .cc-section-head {
  color: var(--gold);
  font-size: 0.74rem;
}

/* Row labels — cream-dark → cream-dim (much more legible) */
#downtime-competencies .cc-section-drafting .cc-row-label,
#downtime-competencies .cc-section-sermon-complete .cc-row-label,
#downtime-competencies .cc-section-sermons .cc-row-label,
#downtime-competencies .cc-section-prosel-tokens .cc-row-label,
#downtime-competencies .cc-section-queued-favor .cc-row-label {
  color: var(--cream-dim);
  font-size: 0.8rem;
}

/* Hints under section heads — cream-dim → cream */
#downtime-competencies .cc-section-drafting .cc-section-hint,
#downtime-competencies .cc-section-sermon-complete .cc-section-hint {
  color: var(--cream-dim);
  font-size: 0.74rem;
}

/* Pool-info / roll-info text — cream-dim → cream */
#downtime-competencies .cc-section-sermon-complete .cc-roll-pool-info,
#downtime-competencies .cc-section-sermons .cc-prosel-pool-info {
  color: var(--cream);
  font-size: 0.76rem;
}

/* Effect-input label — cream-dark → cream-dim */
#downtime-competencies .cc-section-sermon-complete .cc-roll-effect-label {
  color: var(--cream-dim);
  font-size: 0.78rem;
}

/* Sermon meta line ("P(H) 11 + C(D) 7 + C(I) 12 · Last delivered…") */
#downtime-competencies .cc-sermon-meta {
  color: var(--cream-dim);
  font-size: 0.74rem;
}

/* Delivery-row result chips ("Effect: —" / "DoS: —") */
#downtime-competencies .cc-prosel-result {
  color: var(--cream-dim);
}

/* Suffix text ("(need 2 per delivery)", "/ 17 avail") — bump from
   cream-dark to cream-dim so it's readable but still secondary. */
#downtime-competencies .cc-section-prosel-tokens .cc-row-val-suffix,
#downtime-competencies .cc-section-sermons .cc-prosel-favor-suffix {
  color: var(--cream-dim);
  font-size: 0.74rem;
  font-style: normal;
}

/* Disabled CTAs (especially Deliver when tokens < 2) — drop opacity
   entirely (opacity blending was pulling the rendered contrast under AA
   at 3.65:1). Use a clean cream-dim text + muted border so the button is
   visibly "off" but the label still reads at AA (5.66:1). */
#downtime-competencies .cc-cta-block:disabled {
  opacity: 1;
  color: var(--cream-dim);
  background: var(--bg-card);
  border-color: var(--bg-mid);
  font-style: italic;
}

/* Take-SC checkbox label — its parent uses cc-prosel-label-inline which
   is cream-dark. Lift to cream-dim inside the form for readability. */
#downtime-competencies .cc-prosel-form .cc-prosel-label-inline {
  color: var(--cream-dim);
  font-size: 0.78rem;
}

/* ─── TAB-WIDE CONTRAST PASS (Rome 2026-05-21) ──────────────────────
   Every #downtime-competencies text element that was sitting on cream-
   dark (4.36:1, fails WCAG AA 4.5:1 for normal text) or gold-dim
   (4.24:1, fails) is lifted to cream-dim (7.23:1, AAA) or gold (7.74:1,
   AAA). Scoped to the downtime tab so the rest of the app palette is
   untouched. Companion audit lives in chat history; numbers verified
   programmatically. */

/* Accent-color text — gold-dim → gold ----------------------------------- */
#downtime-competencies .comp-wp-head,
#downtime-competencies .cc-bespoke-chip,
#downtime-competencies .cc-convert-rate,
#downtime-competencies .cc-locked-list strong,
#downtime-competencies .cc-proj-cost,
#downtime-competencies .cc-proj-value,
#downtime-competencies .cc-proj-done .cc-proj-name,
#downtime-competencies .cc-diagnose-val,
#downtime-competencies .cc-domain-list strong,
#downtime-competencies .cc-talents-list strong,
#downtime-competencies details.cc-talent > summary.cc-talent-summary > strong,
#downtime-competencies .cc-bld-val,
#downtime-competencies .cc-bld-total-val,
#downtime-competencies .cc-clout-add,
#downtime-competencies .cc-siege-table th,
#downtime-competencies .cc-grimoire-books th,
#downtime-competencies .cc-occ-hunter-spend-head,
#downtime-competencies .cc-occ-hunter-rating-label {
  color: var(--gold);
}

/* Hover states using gold-dim — promote to gold for consistency ------- */
#downtime-competencies .cc-convert-btn:hover:not(:disabled),
#downtime-competencies .cc-proj-spend:hover:not(:disabled),
#downtime-competencies .cc-wd-spend:hover:not(:disabled),
#downtime-competencies .cc-brief-spend-sp:hover:not(:disabled),
#downtime-competencies .cc-brief-spend-sc:hover:not(:disabled),
#downtime-competencies .cc-mercy-spend-sp:hover:not(:disabled),
#downtime-competencies .cc-mercy-spend-sc:hover:not(:disabled),
#downtime-competencies .cc-sermon-complete:hover:not(:disabled),
#downtime-competencies .cc-gossip-spend:hover:not(:disabled),
#downtime-competencies .cc-station-toggle:hover:not(:disabled),
#downtime-competencies .cc-perform-spend:hover:not(:disabled),
#downtime-competencies .cc-trap-check:hover:not(:disabled),
#downtime-competencies .cc-manual-apply:hover:not(:disabled),
#downtime-competencies .cc-hand-convert:hover:not(:disabled),
#downtime-competencies .cc-bld-spend:hover:not(:disabled),
#downtime-competencies .cc-occ-auth-step:hover:not(:disabled) {
  color: var(--gold);
}

/* Body text / labels / meta / hints — cream-dark → cream-dim --------- */
#downtime-competencies .comp-wp-empty,
#downtime-competencies .cwp-unit,
#downtime-competencies .cwp-meta,
#downtime-competencies .cc-bal,
#downtime-competencies .cc-tbd,
#downtime-competencies .cc-convert-cite,
#downtime-competencies .cc-locked,
#downtime-competencies .cc-talent-cp,
#downtime-competencies details.cc-talent .cc-talent-cp,
#downtime-competencies .cc-proj-group-talent,
#downtime-competencies .cc-proj-group-note,
#downtime-competencies .cc-proj-traits,
#downtime-competencies .cc-proj-mat,
#downtime-competencies .cc-pharmacist-desc,
#downtime-competencies .cc-herbs-hint,
#downtime-competencies .cc-jeweler-desc,
#downtime-competencies .cc-diagnose-label,
#downtime-competencies .cc-diagnose-mod,
#downtime-competencies .cc-off,
#downtime-competencies .cc-domain-note,
#downtime-competencies .cc-talent-via,
#downtime-competencies .cc-works-count,
#downtime-competencies .cc-works-meta,
#downtime-competencies .cc-works-toggle,
#downtime-competencies .cc-works-sell,
#downtime-competencies .cc-wd-label,
#downtime-competencies .cc-wd-note,
#downtime-competencies .cc-bld-desc,
#downtime-competencies .cc-bld-label,
#downtime-competencies .cc-bld-fine-hint,
#downtime-competencies .cc-bld-fine-locked,
#downtime-competencies .cc-bld-total-label,
#downtime-competencies .cc-bld-agg-meta,
#downtime-competencies .cc-bld-sell-all,
#downtime-competencies .cc-bld-fine-note,
#downtime-competencies .cc-drafting-hint,
#downtime-competencies .cc-empty-note,
#downtime-competencies .cc-sermon-delete,
#downtime-competencies .cc-prosel-label,
#downtime-competencies .cc-section-cite,
#downtime-competencies .cc-occ-prac-forget,
#downtime-competencies .cc-occ-eluc-option-effect,
#downtime-competencies .cc-occ-eluc-cancel,
#downtime-competencies .cc-occ-begin-chapter:disabled,
#downtime-competencies .cc-clout-empty,
#downtime-competencies .cc-perform-label,
#downtime-competencies .cc-gossip-label {
  color: var(--cream-dim);
}

/* "Zero" buttons — keep their right-aligned, muted look but lift the
   color so the label is actually readable. */
#downtime-competencies .cc-wp-zero,
#downtime-competencies .cc-drafting-zero,
#downtime-competencies .cc-favor-zero,
#downtime-competencies .cc-mercy-zero,
#downtime-competencies .cc-brief-zero,
#downtime-competencies .cc-wd-zero,
#downtime-competencies .cc-host-light-zero,
#downtime-competencies .cc-gossip-zero,
#downtime-competencies .cc-trap-zero,
#downtime-competencies .cc-perform-zero {
  color: var(--cream-dim);
}

/* ─── PHASE 3B COURTIER CARD (Rome 2026-05-03) ─────────────────────────
   Mirrors Cleric / Bureaucrat / Apothecary patterns. Three sections:
   Gossip Tokens, Clout per Settlement size, Host Event. Plus inline
   talent unlock chips and Honeyed Tongue note. */

#downtime-competencies .cc-section-gossip {
  border-left-color: rgba(212,168,83,0.35);
  background: rgba(212,168,83,0.04);
}
#downtime-competencies .cc-section-clout {
  border-left-color: rgba(143,198,160,0.35);
  background: rgba(143,198,160,0.04);
}
#downtime-competencies .cc-section-host-event {
  border-left-color: rgba(168,140,212,0.35);
  background: rgba(168,140,212,0.04);
}

/* ─── Gossip form (mirrors .cc-prosel-form) ───────────────────────── */
#downtime-competencies .cc-gossip-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px dashed var(--bg-mid);
}
#downtime-competencies .cc-gossip-label,
#downtime-competencies .cc-host-label {
  color: var(--cream-dark);
  font-size: 0.74rem;
}
#downtime-competencies .cc-gossip-size,
#downtime-competencies .cc-gossip-dos,
#downtime-competencies .cc-host-size,
#downtime-competencies .cc-host-draw,
#downtime-competencies .cc-host-dos {
  padding: 2px 6px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
}
#downtime-competencies .cc-host-draw {
  max-width: 360px;
}
#downtime-competencies .cc-gossip-spend,
#downtime-competencies .cc-host-stage {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-gossip-spend:hover:not(:disabled),
#downtime-competencies .cc-host-stage:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
#downtime-competencies .cc-gossip-spend:disabled,
#downtime-competencies .cc-host-stage:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Gossip / Clout / Station / Labor nudge buttons ──────────────── */
#downtime-competencies .cc-gossip-adjust button,
#downtime-competencies .cc-clout-adjust button {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#downtime-competencies .cc-gossip-adjust button:hover,
#downtime-competencies .cc-clout-adjust button:hover {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}
#downtime-competencies .cc-gossip-minus,
#downtime-competencies .cc-clout-minus { color: #e9a36b; }
#downtime-competencies .cc-gossip-plus,
#downtime-competencies .cc-clout-plus  { color: #8fc6a0; }
#downtime-competencies .cc-gossip-zero,
#downtime-competencies .cc-clout-zero  { color: var(--cream-dark); margin-left: auto; }

/* ─── Clout rows (per-Settlement-size grid) ────────────────────────── */
#downtime-competencies .cc-clout-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
#downtime-competencies .cc-clout-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
  font-size: 0.74rem;
}
#downtime-competencies .cc-clout-row.cc-station-on {
  border-color: rgba(212,168,83,0.6);
  background: rgba(212,168,83,0.08);
}
#downtime-competencies .cc-clout-size {
  font-weight: 600;
  color: var(--cream);
  min-width: 60px;
}
#downtime-competencies .cc-clout-val {
  font-family: 'Courier New', monospace;
  color: var(--cream-dim);
  min-width: 60px;
}
#downtime-competencies .cc-clout-spend-sc {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-clout-spend-sc:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(143,198,160,0.7);
  color: #8fc6a0;
}
#downtime-competencies .cc-clout-spend-sc:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Station toggle (stateful: off vs on) ─────────────────────────── */
#downtime-competencies .cc-station-toggle {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-station-toggle:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
#downtime-competencies .cc-station-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Active-state styling — when toggled on, button shows gold highlight */
#downtime-competencies .cc-clout-row.cc-station-on .cc-station-toggle {
  background: rgba(212,168,83,0.18);
  border-color: var(--gold);
  color: var(--gold);
}
#downtime-competencies .cc-clout-row.cc-station-on .cc-station-toggle:hover:not(:disabled) {
  background: rgba(212,168,83,0.28);
  color: var(--gold-light);
}

/* ─── Host Event Labor progress ────────────────────────────────────── */
#downtime-competencies .cc-host-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bg-mid);
  border-radius: 4px;
}
#downtime-competencies .cc-host-progress-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
}
#downtime-competencies .cc-host-progress-label {
  font-weight: 600;
  color: var(--cream);
  min-width: 110px;
}
#downtime-competencies .cc-host-progress-val {
  font-family: 'Courier New', monospace;
  color: var(--cream-dim);
  min-width: 130px;
}
#downtime-competencies .cc-host-progress-row.cc-host-progress-ready .cc-host-progress-val {
  color: #8fc6a0;
  font-weight: 600;
}

/* Light / Medium Labor nudge buttons (same look as other ± buttons) */
#downtime-competencies .cc-host-light-minus,
#downtime-competencies .cc-host-medium-minus,
#downtime-competencies .cc-host-light-plus,
#downtime-competencies .cc-host-medium-plus,
#downtime-competencies .cc-host-light-zero,
#downtime-competencies .cc-host-medium-zero {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#downtime-competencies .cc-host-light-minus:hover:not(:disabled),
#downtime-competencies .cc-host-medium-minus:hover:not(:disabled),
#downtime-competencies .cc-host-light-plus:hover:not(:disabled),
#downtime-competencies .cc-host-medium-plus:hover:not(:disabled),
#downtime-competencies .cc-host-light-zero:hover:not(:disabled),
#downtime-competencies .cc-host-medium-zero:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}
#downtime-competencies .cc-host-light-minus,
#downtime-competencies .cc-host-medium-minus { color: #e9a36b; }
#downtime-competencies .cc-host-light-plus,
#downtime-competencies .cc-host-medium-plus  { color: #8fc6a0; }
#downtime-competencies .cc-host-light-zero,
#downtime-competencies .cc-host-medium-zero  { color: var(--cream-dark); }
#downtime-competencies .cc-host-light-minus:disabled,
#downtime-competencies .cc-host-medium-minus:disabled,
#downtime-competencies .cc-host-light-plus:disabled,
#downtime-competencies .cc-host-medium-plus:disabled,
#downtime-competencies .cc-host-light-zero:disabled,
#downtime-competencies .cc-host-medium-zero:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Host form (mirrors .cc-prosel-form) ──────────────────────────── */
#downtime-competencies .cc-host-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed var(--bg-mid);
}

/* ─── Gossip pool preview + last-roll display (Rome 2026-05-03) ──── */
#downtime-competencies .cc-gossip-pool {
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  color: var(--cream-dim);
  padding: 2px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--bg-mid);
  border-radius: 3px;
}
#downtime-competencies .cc-gossip-lastroll {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(212,168,83,0.06);
  border: 1px solid rgba(212,168,83,0.25);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--cream);
}
#downtime-competencies .cc-gossip-lastroll strong {
  color: var(--gold);
  font-weight: 700;
}

/* ─── Host Event pool preview + last-roll display (Rome 2026-05-03) ── */
#downtime-competencies .cc-host-pool {
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  color: var(--cream-dim);
  padding: 2px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--bg-mid);
  border-radius: 3px;
}
#downtime-competencies .cc-host-lastroll {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(168,140,212,0.06);
  border: 1px solid rgba(168,140,212,0.25);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--cream);
}
#downtime-competencies .cc-host-lastroll strong {
  color: #c0a8e8;
  font-weight: 700;
}

/* ─── Clout free-form Settlement entries (Rome 2026-05-03) ────────── */
#downtime-competencies .cc-clout-controls {
  margin: 4px 0 6px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
#downtime-competencies .cc-clout-add {
  padding: 4px 12px;
  background: var(--bg-card);
  color: var(--gold-dim);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-clout-add:hover {
  background: rgba(212, 168, 83, 0.12);
  border-color: var(--gold);
  color: var(--gold);
}
#downtime-competencies .cc-clout-empty {
  padding: 8px 10px;
  color: var(--cream-dark);
  font-style: italic;
  font-size: 0.78rem;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--bg-mid);
  border-radius: 3px;
}
#downtime-competencies .cc-clout-name {
  flex: 1 1 140px;
  min-width: 100px;
  padding: 3px 7px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.78rem;
}
#downtime-competencies .cc-clout-name:focus {
  outline: none;
  border-color: var(--gold-dim);
  background: var(--bg-mid);
}
#downtime-competencies .cc-clout-size-sel {
  padding: 3px 6px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  min-width: 80px;
}
#downtime-competencies .cc-clout-delete {
  padding: 3px 8px;
  background: var(--bg-card);
  color: #c44040;
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 700;
  margin-left: 4px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-clout-delete:hover {
  background: rgba(196,64,64,0.12);
  border-color: #c44040;
  color: #ff5050;
}

/* ─── PHASE 3B ENTERTAINER CARD (Rome 2026-05-03) ──────────────────── */
#downtime-competencies .cc-section-perform {
  border-left-color: rgba(140,168,212,0.35);
  background: rgba(140,168,212,0.04);
}

/* Perform segment nudge buttons (mirror cc-mercy-adjust pattern) */
#downtime-competencies .cc-perform-adjust button {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#downtime-competencies .cc-perform-adjust button:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}
#downtime-competencies .cc-perform-adjust button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#downtime-competencies .cc-perform-minus { color: #e9a36b; }
#downtime-competencies .cc-perform-plus  { color: #8fc6a0; }
#downtime-competencies .cc-perform-zero  { color: var(--cream-dark); margin-left: auto; }

/* Has-instrument toggle label */
#downtime-competencies .cc-perform-instr-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--cream);
  cursor: pointer;
}
#downtime-competencies .cc-perform-instr-label input[type=checkbox] {
  cursor: pointer;
}

/* Perform form (mirrors cc-prosel-form) */
#downtime-competencies .cc-perform-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px dashed var(--bg-mid);
}
#downtime-competencies .cc-perform-label {
  color: var(--cream-dark);
  font-size: 0.74rem;
}
#downtime-competencies .cc-perform-size {
  padding: 2px 6px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
}
#downtime-competencies .cc-perform-pool {
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  color: var(--cream-dim);
  padding: 2px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--bg-mid);
  border-radius: 3px;
}
#downtime-competencies .cc-perform-spend {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-perform-spend:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
#downtime-competencies .cc-perform-spend:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Earnings preview line */
#downtime-competencies .cc-perform-preview {
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  color: var(--cream-dim);
}
#downtime-competencies .cc-perform-preview strong {
  color: var(--gold);
  font-weight: 700;
}

/* Last-roll display (mirrors cc-gossip-lastroll) */
#downtime-competencies .cc-perform-lastroll {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(140,168,212,0.06);
  border: 1px solid rgba(140,168,212,0.25);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--cream);
}
#downtime-competencies .cc-perform-lastroll strong {
  color: #a8c0e8;
  font-weight: 700;
}

/* ─── PHASE 3B HUNTSMAN CARD (Rome 2026-05-03) ─────────────────────── */
#downtime-competencies .cc-section-traps {
  border-left-color: rgba(190,140,90,0.35);
  background: rgba(190,140,90,0.04);
}

/* Trap nudge buttons (mirror cc-mercy-adjust) */
#downtime-competencies .cc-trap-adjust button {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#downtime-competencies .cc-trap-adjust button:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}
#downtime-competencies .cc-trap-adjust button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#downtime-competencies .cc-trap-minus { color: #e9a36b; }
#downtime-competencies .cc-trap-plus  { color: #8fc6a0; }
#downtime-competencies .cc-trap-zero  { color: var(--cream-dark); margin-left: auto; }

/* Trap form + check button (mirrors cc-perform-form) */
#downtime-competencies .cc-trap-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px dashed var(--bg-mid);
}
#downtime-competencies .cc-trap-pool {
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  color: var(--cream-dim);
  padding: 2px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--bg-mid);
  border-radius: 3px;
}
#downtime-competencies .cc-trap-check {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-trap-check:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
#downtime-competencies .cc-trap-check:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Last-roll display (warm orange-tan accent for the rural / wilderness theme) */
#downtime-competencies .cc-trap-lastroll {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(190,140,90,0.06);
  border: 1px solid rgba(190,140,90,0.25);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--cream);
}
#downtime-competencies .cc-trap-lastroll strong {
  color: #d4a070;
  font-weight: 700;
}

/* ─── WAYFARER'S CAMP — Hunt + Forage + Servings (Rome 2026-05-03) ─── */
/* Lives outside #downtime-competencies; uses wc-* namespace to avoid
   collisions with the cc-* card classes. */

#downtime-rest .wc-hunt-forage {
  /* Inherits .kv-block chrome (bg-dark, border, radius, padding 14px 16px).
     Only adjust top-margin to separate it from the panels above. */
  margin-top: 14px;
}
/* h3 inherits .kv-block h3 styling — uppercase gold-dim title, letter-spacing 2px */
#downtime-rest .wc-hunt-forage .wc-canon-cite,
#downtime-rest .wc-hunt-forage .wc-cite {
  font-weight: normal;
  font-size: 0.7rem;
  color: var(--cream-dark);
  margin-left: 6px;
  font-style: italic;
}
#downtime-rest .wc-hunt-forage h4 {
  margin: 12px 0 6px 0;
  font-size: 0.88rem;
  color: var(--gold-dim);
}

#downtime-rest .wc-section-banked .wc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  font-size: 0.78rem;
}
#downtime-rest .wc-section-banked .wc-row-label {
  min-width: 140px;
  color: var(--cream-dim);
}
#downtime-rest .wc-section-banked .wc-row-val {
  font-family: 'Courier New', monospace;
  color: var(--cream);
  font-weight: 600;
  min-width: 36px;
  padding: 1px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed var(--bg-mid);
  border-radius: 3px;
  text-align: right;
  margin-right: 8px;
}

#downtime-rest .wc-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px dashed rgba(168, 132, 92, 0.25);
  font-size: 0.74rem;
}
#downtime-rest .wc-label {
  color: var(--cream-dark);
}
#downtime-rest .wc-env,
#downtime-rest .wc-season {
  padding: 2px 6px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
}
#downtime-rest .wc-pool {
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  color: var(--cream-dim);
  padding: 2px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--bg-mid);
  border-radius: 3px;
}

#downtime-rest .wc-hunt-roll,
#downtime-rest .wc-forage-roll {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-rest .wc-hunt-roll:hover:not(:disabled),
#downtime-rest .wc-forage-roll:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
#downtime-rest .wc-hunt-roll:disabled,
#downtime-rest .wc-forage-roll:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Banked-output nudge buttons — match the cc-adjust pattern used on
   the competency cards (slim padding, subtle text-color tints, Zero
   pushed to the far right of the row). */
#downtime-rest .wc-section-banked button {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-rest .wc-section-banked button:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
}
#downtime-rest .wc-section-banked button:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}
#downtime-rest .wc-serv-minus,
#downtime-rest .wc-prey-minus { color: #e9a36b; }
#downtime-rest .wc-serv-plus,
#downtime-rest .wc-prey-plus  { color: #8fc6a0; }
#downtime-rest .wc-serv-zero,
#downtime-rest .wc-prey-zero  { color: var(--cream-dark); margin-left: auto; }
#downtime-rest .wc-serv-zero:hover:not(:disabled),
#downtime-rest .wc-prey-zero:hover:not(:disabled) {
  border-color: var(--cream-dark);
}

#downtime-rest .wc-lastroll {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(190, 140, 90, 0.06);
  border: 1px solid rgba(190, 140, 90, 0.25);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--cream);
}
#downtime-rest .wc-lastroll strong { color: #d4a070; font-weight: 700; }
#downtime-rest .wc-forage-lastroll {
  background: rgba(143, 180, 120, 0.06);
  border-color: rgba(143, 180, 120, 0.25);
}
#downtime-rest .wc-forage-lastroll strong { color: #a8c898; }

#downtime-rest .wc-domain-note,
#downtime-rest .wc-note {
  font-size: 0.74rem;
  color: var(--cream-dim);
  margin-top: 4px;
  line-height: 1.4;
}

/* ============================================================
   Wayfarer's Camp — Hunt & Forage three-section layout
   (visual parity with cc-* competency cards)
   ============================================================ */

#downtime-rest .wc-hunt-forage .wc-section {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(212,168,83,0.04);
  border-left: 2px solid var(--bg-mid);
  border-radius: 0 var(--radius) var(--radius) 0;
}

#downtime-rest .wc-hunt-forage .wc-section-head {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
#downtime-rest .wc-hunt-forage .wc-section-head .wc-cite {
  font-family: inherit;
  font-style: italic;
  font-weight: normal;
  font-size: 0.66rem;
  color: var(--cream-dark);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0;
}

/* Section accents — banked output (gold), opportunity (warm brown),
   stalk (forest green), harvest (russet/blood), forage (leafy green). */
#downtime-rest .wc-section-banked {
  border-left-color: var(--gold-dim);
  background: rgba(212,168,83,0.07);
}
#downtime-rest .wc-section-opportunity {
  border-left-color: rgba(190, 140, 90, 0.55);
  background: rgba(190, 140, 90, 0.05);
}
#downtime-rest .wc-section-stalk {
  border-left-color: rgba(120, 165, 130, 0.55);
  background: rgba(120, 165, 130, 0.05);
}
#downtime-rest .wc-section-harvest {
  border-left-color: rgba(180, 95, 90, 0.55);
  background: rgba(180, 95, 90, 0.05);
}
#downtime-rest .wc-section-forage {
  margin-top: 14px;
  border-left-color: rgba(143, 198, 160, 0.55);
  background: rgba(143, 198, 160, 0.05);
  padding-top: 9px;
}

/* Tighter form rows inside sections */
#downtime-rest .wc-hunt-forage .wc-section .wc-form {
  border-top: none;
  margin-top: 6px;
  padding-top: 0;
  gap: 8px;
}
#downtime-rest .wc-hunt-forage .wc-section .wc-note {
  font-size: 0.74rem;
  color: var(--cream-dim);
  line-height: 1.45;
  margin: 2px 0 6px 0;
}
#downtime-rest .wc-hunt-forage .wc-section .wc-note strong {
  color: var(--cream);
}

/* Banked section row spacing override (more vertical rhythm) */
#downtime-rest .wc-section-banked .wc-row {
  padding: 1px 0;
}
#downtime-rest .wc-section-banked .wc-row + .wc-row {
  margin-top: 2px;
}

/* Prey selector — wider so the descriptive text is readable */
#downtime-rest .wc-prey-sel {
  flex: 1 1 240px;
  min-width: 240px;
  padding: 3px 6px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
}
#downtime-rest .wc-prey-sel:focus {
  outline: none;
  border-color: var(--gold-dim);
}

/* Stalk and Harvest action buttons share the hunt-roll look */
#downtime-rest .wc-stalk-roll,
#downtime-rest .wc-harvest-go {
  padding: 4px 10px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-rest .wc-stalk-roll:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(120, 165, 130, 0.7);
  color: rgba(180, 220, 190, 1);
}
#downtime-rest .wc-harvest-go:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(180, 95, 90, 0.7);
  color: rgba(220, 170, 165, 1);
}
#downtime-rest .wc-stalk-roll:disabled,
#downtime-rest .wc-harvest-go:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Last-roll badges tinted per section */
#downtime-rest .wc-section-stalk .wc-lastroll {
  background: rgba(120, 165, 130, 0.07);
  border-color: rgba(120, 165, 130, 0.30);
}
#downtime-rest .wc-section-stalk .wc-lastroll strong {
  color: rgba(180, 220, 190, 1);
}


/* ── Manual-entry rows on Hunt sections ─────────────────────────────── */
#downtime-rest .wc-manual-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--bg-mid);
  font-size: 0.74rem;
}
#downtime-rest .wc-manual-label {
  color: var(--cream-dim);
  font-style: italic;
}
#downtime-rest .wc-manual-hits {
  width: 110px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  text-align: center;
}
#downtime-rest .wc-manual-hits:focus {
  outline: 1px solid var(--gold-dim);
  border-color: var(--gold-dim);
}

/* ── Manual hits-entry rows on cc-card rollers (Gossip / Host / Perform / Trap) ─── */
#downtime-competencies .cc-manual-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--bg-mid);
  font-size: 0.74rem;
}
#downtime-competencies .cc-manual-label {
  color: var(--cream-dim);
  font-style: italic;
}
#downtime-competencies .cc-manual-hits {
  width: 110px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  text-align: center;
}
#downtime-competencies .cc-manual-hits:focus {
  outline: 1px solid var(--gold-dim);
  border-color: var(--gold-dim);
}
#downtime-competencies .cc-manual-tn {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--cream-dim);
}
#downtime-competencies .cc-manual-apply {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-manual-apply:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
#downtime-competencies .cc-manual-apply:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}

/* ── Laborer card — Hand WP conversion form (Phase 3b) ─────────────────
   Buttons match the cc-adjust pattern (slim padding, bg-card, cream
   text, gold-dim hover). The form container uses the same flex layout
   as wc-form so the balance + 2 buttons sit on one row. */
#downtime-competencies .cc-hand-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--bg-mid);
}
#downtime-competencies .cc-hand-bal {
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  color: var(--cream-dim);
  padding: 2px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed var(--bg-mid);
  border-radius: 3px;
  margin-right: 4px;
}
#downtime-competencies .cc-hand-bal strong {
  color: var(--cream);
  font-weight: 600;
}
#downtime-competencies .cc-hand-convert {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-hand-convert:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
#downtime-competencies .cc-hand-convert:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}

/* ── Section-head citation chip + canon-flag note (used by Laborer card,
   reusable by future cards). Italic small text inside section heads. */
#downtime-competencies .cc-section-cite {
  font-family: inherit;
  font-style: italic;
  font-weight: normal;
  font-size: 0.66rem;
  color: var(--cream-dark);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}
#downtime-competencies .cc-canon-flag {
  font-size: 0.72rem;
  color: #e0a060;
  background: rgba(224, 160, 96, 0.07);
  border-left: 2px solid rgba(224, 160, 96, 0.45);
  padding: 4px 8px;
  margin-top: 4px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#downtime-competencies .cc-canon-flag strong {
  color: #e8b888;
}

/* ── Marshall — Siegeworks engine costs table ────────────────────────
   Compact 3-column reference table (Engine / Intellectual / Labor).
   Numbers right-aligned, monospace, dim cell borders. */
#downtime-competencies .cc-siege-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 0.74rem;
}
#downtime-competencies .cc-siege-table th,
#downtime-competencies .cc-siege-table td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--bg-mid);
  text-align: left;
}
#downtime-competencies .cc-siege-table th {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.66rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-dim);
}
#downtime-competencies .cc-siege-table td:nth-child(2),
#downtime-competencies .cc-siege-table th:nth-child(2),
#downtime-competencies .cc-siege-table td:nth-child(3),
#downtime-competencies .cc-siege-table th:nth-child(3) {
  text-align: right;
  font-family: 'Courier New', monospace;
  width: 90px;
}
#downtime-competencies .cc-siege-table td:first-child {
  color: var(--cream);
}
#downtime-competencies .cc-siege-table tr:last-child td {
  border-bottom: none;
}

/* ── Occultist (Phase O-1, Rome 2026-05-03) ───────────────────────── */
#downtime-competencies .cc-section-grimoire {
  border-left-color: rgba(180, 120, 200, 0.45);
  background: rgba(180, 120, 200, 0.04);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#downtime-competencies .cc-section-musings {
  border-left-color: rgba(140, 110, 180, 0.45);
  background: rgba(140, 110, 180, 0.04);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#downtime-competencies .cc-grimoire-auth {
  font-weight: 700;
  color: var(--gold);
}
#downtime-competencies .cc-occ-musings-wp {
  font-family: 'Courier New', monospace;
  color: var(--cream);
}
#downtime-competencies .cc-grimoire-books {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 0.74rem;
}
#downtime-competencies .cc-grimoire-books th,
#downtime-competencies .cc-grimoire-books td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--bg-mid);
  text-align: left;
}
#downtime-competencies .cc-grimoire-books th {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.66rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-dim);
}
#downtime-competencies .cc-grimoire-books td:nth-child(4),
#downtime-competencies .cc-grimoire-books td:nth-child(5),
#downtime-competencies .cc-grimoire-books th:nth-child(4),
#downtime-competencies .cc-grimoire-books th:nth-child(5) {
  text-align: right;
  font-family: 'Courier New', monospace;
  width: 80px;
}
#downtime-competencies .cc-grimoire-books tr:last-child td {
  border-bottom: none;
}
#downtime-competencies .cc-occ-auth-step,
#downtime-competencies .cc-occ-tb-step,
#downtime-competencies .cc-occ-musings-spend,
#downtime-competencies .cc-occ-auth-roll {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-occ-auth-step:hover:not(:disabled),
#downtime-competencies .cc-occ-tb-step:hover:not(:disabled),
#downtime-competencies .cc-occ-musings-spend:hover:not(:disabled),
#downtime-competencies .cc-occ-auth-roll:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
#downtime-competencies .cc-occ-auth-step:disabled,
#downtime-competencies .cc-occ-tb-step:disabled,
#downtime-competencies .cc-occ-musings-spend:disabled,
#downtime-competencies .cc-occ-auth-roll:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}
#downtime-competencies .cc-occ-lastroll {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(180, 120, 200, 0.07);
  border: 1px solid rgba(180, 120, 200, 0.30);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--cream);
}
#downtime-competencies .cc-occ-lastroll strong {
  color: rgba(220, 180, 240, 1);
  font-weight: 700;
}

/* ── Occultist Consorter (Phase O-2, Rome 2026-05-03) ─────────────── */
#downtime-competencies .cc-section-consorter {
  border-left-color: rgba(160, 80, 200, 0.55);
  background: rgba(160, 80, 200, 0.05);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#downtime-competencies .cc-occ-consorter-spend,
#downtime-competencies .cc-occ-consorter-roll,
#downtime-competencies .cc-occ-consorter-reset-chapter {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-occ-consorter-spend:hover:not(:disabled),
#downtime-competencies .cc-occ-consorter-roll:hover:not(:disabled),
#downtime-competencies .cc-occ-consorter-reset-chapter:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(200, 130, 230, 0.7);
  color: rgba(220, 170, 240, 1);
}
#downtime-competencies .cc-occ-consorter-spend:disabled,
#downtime-competencies .cc-occ-consorter-roll:disabled,
#downtime-competencies .cc-occ-consorter-reset-chapter:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}
#downtime-competencies .cc-occ-eluc-result {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(160, 80, 200, 0.08);
  border: 1px solid rgba(160, 80, 200, 0.30);
  border-radius: 3px;
}
#downtime-competencies .cc-occ-eluc-head {
  font-size: 0.85rem;
  color: rgba(220, 180, 240, 1);
  margin-bottom: 4px;
}
#downtime-competencies .cc-occ-eluc-head strong {
  font-weight: 700;
  color: rgba(240, 200, 255, 1);
}
#downtime-competencies .cc-occ-eluc-meta {
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  color: var(--cream-dim);
  font-weight: normal;
  margin-left: 6px;
}
#downtime-competencies .cc-occ-eluc-effect {
  font-size: 0.78rem;
  color: var(--cream);
  line-height: 1.45;
  padding: 4px 0;
}
#downtime-competencies .cc-occ-eluc-applied {
  font-size: 0.74rem;
  color: #a0d0a0;
  margin-top: 4px;
  padding: 3px 6px;
  background: rgba(160, 200, 160, 0.08);
  border-left: 2px solid rgba(160, 200, 160, 0.5);
  border-radius: 0 3px 3px 0;
}

/* ── Occultist Hunter (Phase O-3, Rome 2026-05-03) ────────────────── */
#downtime-competencies .cc-section-hunter {
  border-left-color: rgba(180, 90, 90, 0.55);
  background: rgba(180, 90, 90, 0.05);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#downtime-competencies .cc-occ-hunter-spec,
#downtime-competencies .cc-occ-hunter-tier {
  padding: 3px 8px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  min-width: 200px;
}
#downtime-competencies .cc-occ-hunter-spec:focus,
#downtime-competencies .cc-occ-hunter-tier:focus {
  outline: 1px solid rgba(220, 130, 130, 0.7);
  border-color: rgba(220, 130, 130, 0.7);
}
#downtime-competencies .cc-occ-hunter-roll,
#downtime-competencies .cc-occ-hunter-reset-chapter {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-occ-hunter-roll:hover:not(:disabled),
#downtime-competencies .cc-occ-hunter-reset-chapter:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(220, 130, 130, 0.7);
  color: rgba(240, 170, 170, 1);
}
#downtime-competencies .cc-occ-hunter-roll:disabled,
#downtime-competencies .cc-occ-hunter-reset-chapter:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}
#downtime-competencies .cc-occ-hunter-lastroll {
  background: rgba(180, 90, 90, 0.07);
  border-color: rgba(180, 90, 90, 0.30);
}
#downtime-competencies .cc-occ-hunter-lastroll strong {
  color: rgba(240, 170, 170, 1);
}
#downtime-competencies .cc-occ-hunter-spend-grid {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(180, 90, 90, 0.04);
  border-left: 3px solid rgba(180, 90, 90, 0.45);
  border-radius: 0 3px 3px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#downtime-competencies .cc-occ-hunter-spend-head {
  width: 100%;
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.66rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
#downtime-competencies .cc-occ-hunter-spend {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-occ-hunter-spend:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(220, 130, 130, 0.7);
  color: rgba(240, 170, 170, 1);
}
#downtime-competencies .cc-occ-hunter-spend:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Occultist Practitioner (Phase O-4, Rome 2026-05-03) ──────────── */
#downtime-competencies .cc-section-practitioner {
  border-left-color: rgba(120, 70, 180, 0.55);
  background: rgba(120, 70, 180, 0.05);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#downtime-competencies .cc-occ-prac-name {
  flex: 1 1 240px;
  min-width: 240px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.04);
  color: var(--cream);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 3px;
  font-size: 0.78rem;
}
#downtime-competencies .cc-occ-prac-name:focus {
  outline: 1px solid rgba(180, 130, 230, 0.7);
  border-color: rgba(180, 130, 230, 0.7);
}
#downtime-competencies .cc-occ-fragments {
  font-family: 'Courier New', monospace;
  color: var(--cream);
  font-weight: 700;
}
#downtime-competencies .cc-occ-prac-frag-step,
#downtime-competencies .cc-occ-prac-spend,
#downtime-competencies .cc-occ-prac-roll,
#downtime-competencies .cc-occ-prac-mark-learned {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-occ-prac-frag-step:hover:not(:disabled),
#downtime-competencies .cc-occ-prac-spend:hover:not(:disabled),
#downtime-competencies .cc-occ-prac-roll:hover:not(:disabled),
#downtime-competencies .cc-occ-prac-mark-learned:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(180, 130, 230, 0.7);
  color: rgba(220, 180, 250, 1);
}
#downtime-competencies .cc-occ-prac-frag-step:disabled,
#downtime-competencies .cc-occ-prac-spend:disabled,
#downtime-competencies .cc-occ-prac-roll:disabled,
#downtime-competencies .cc-occ-prac-mark-learned:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}
#downtime-competencies .cc-occ-prac-mark-learned {
  background: rgba(180, 130, 230, 0.20);
  border-color: rgba(180, 130, 230, 0.55);
  color: rgba(220, 180, 250, 1);
}
#downtime-competencies .cc-occ-prac-mark-learned:hover {
  background: rgba(180, 130, 230, 0.35);
}
#downtime-competencies .cc-occ-prac-lastroll {
  background: rgba(120, 70, 180, 0.07);
  border-color: rgba(120, 70, 180, 0.30);
}
#downtime-competencies .cc-occ-prac-lastroll strong {
  color: rgba(220, 180, 250, 1);
}
#downtime-competencies .cc-occ-prac-learned-cta {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(180, 130, 230, 0.10);
  border: 1px dashed rgba(180, 130, 230, 0.50);
  border-radius: 3px;
  font-size: 0.78rem;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#downtime-competencies .cc-occ-prac-learned-cta strong {
  color: rgba(220, 180, 250, 1);
}
#downtime-competencies .cc-occ-prac-needs-name {
  border-color: rgba(224, 160, 96, 0.50);
  background: rgba(224, 160, 96, 0.07);
}
#downtime-competencies .cc-occ-prac-needs-name strong {
  color: #e8b888;
}
#downtime-competencies .cc-occ-prac-learned-list {
  margin: 4px 0 0 0;
  padding-left: 18px;
  font-size: 0.78rem;
  color: var(--cream);
}
#downtime-competencies .cc-occ-prac-learned-list li {
  margin: 2px 0;
}
#downtime-competencies .cc-occ-prac-forget {
  padding: 0 5px;
  background: transparent;
  color: var(--cream-dark);
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  margin-left: 4px;
}
#downtime-competencies .cc-occ-prac-forget:hover {
  color: #e08080;
}

/* ── Occultist Seeker + Begin-New-Chapter (Phase O-5+O-6, Rome 2026-05-03) ── */
#downtime-competencies .cc-section-seeker {
  border-left-color: rgba(110, 160, 200, 0.55);
  background: rgba(110, 160, 200, 0.05);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#downtime-competencies .cc-occ-chapter-reset-row {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(212, 168, 83, 0.05);
  border-left: 3px solid var(--gold);
  border-radius: 0 3px 3px 0;
}
#downtime-competencies .cc-occ-begin-chapter {
  padding: 5px 14px;
  background: rgba(212, 168, 83, 0.18);
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#downtime-competencies .cc-occ-begin-chapter:hover:not(:disabled) {
  background: rgba(212, 168, 83, 0.35);
}
#downtime-competencies .cc-occ-begin-chapter:disabled {
  opacity: 0.40;
  cursor: not-allowed;
  color: var(--cream-dark);
  border-color: var(--bg-mid);
  background: var(--bg-card);
}
#downtime-competencies .cc-occ-chapter-reset-summary {
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--cream-dim);
  font-style: italic;
}

/* ── Per-Chapter Trackers (Phase O-7, Rome 2026-05-03) ────────────── */
.advancement-summary .as-trackers {
  grid-column: span 2;
  background: rgba(180, 120, 200, 0.05);
  border: 1px solid rgba(180, 120, 200, 0.30);
  border-radius: var(--radius);
  padding: 6px 10px;
}
.advancement-summary .as-trackers-list {
  font-size: 0.78rem;
  color: var(--cream);
  line-height: 1.5;
  margin-top: 2px;
}
.advancement-summary .as-tracker-cite {
  font-style: italic;
  font-weight: normal;
  font-size: 0.62rem;
  color: var(--cream-dim);
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.advancement-summary .as-tracker-ready {
  color: #a0d0a0;
  font-weight: 600;
}
.advancement-summary .as-tracker-used {
  color: #e08080;
  font-weight: 600;
}
.advancement-summary .as-tracker-partial {
  color: #e0b070;
  font-weight: 600;
}
.advancement-summary .as-tracker-detail {
  font-style: italic;
  font-weight: normal;
  font-size: 0.72rem;
  color: var(--cream-dim);
  margin-left: 4px;
}

/* ── Hunter specialty Rating stepper (Phase O-7b, Rome 2026-05-03) ── */
#downtime-competencies .cc-occ-hunter-rating-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.66rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-left: 4px;
}
#downtime-competencies .cc-occ-hunter-rating-step {
  padding: 2px 7px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-occ-hunter-rating-step:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(220, 130, 130, 0.7);
  color: rgba(240, 170, 170, 1);
}
#downtime-competencies .cc-occ-hunter-rating-step:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}
#downtime-competencies .cc-occ-hunter-rating-val {
  font-family: 'Courier New', monospace;
  color: rgba(240, 170, 170, 1);
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 16px;
  text-align: center;
  padding: 0 4px;
}

/* ── Elucidations selection list (Phase O-2.b, Rome 2026-05-03) ──── */
#downtime-competencies .cc-occ-eluc-pending {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(160, 80, 200, 0.10);
  border: 1px solid rgba(160, 80, 200, 0.45);
  border-radius: 4px;
}
#downtime-competencies .cc-occ-eluc-pending-head {
  font-size: 0.85rem;
  color: rgba(220, 180, 240, 1);
  margin-bottom: 4px;
}
#downtime-competencies .cc-occ-eluc-pending-head strong {
  color: rgba(240, 200, 255, 1);
  font-family: 'Courier New', monospace;
}
#downtime-competencies .cc-occ-eluc-options {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}
#downtime-competencies .cc-occ-eluc-option {
  display: grid;
  grid-template-columns: auto 60px 1fr;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--bg-mid);
  border-radius: 0 3px 3px 0;
  align-items: start;
}
#downtime-competencies .cc-occ-eluc-option-base {
  background: rgba(160, 80, 200, 0.12);
  border-left-color: rgba(220, 180, 240, 0.7);
}
#downtime-competencies .cc-occ-eluc-confirm {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  align-self: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-occ-eluc-confirm:hover {
  background: rgba(160, 80, 200, 0.30);
  border-color: rgba(220, 180, 240, 0.7);
  color: rgba(240, 200, 255, 1);
}
#downtime-competencies .cc-occ-eluc-option-roll {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: rgba(240, 200, 255, 1);
  font-size: 0.95rem;
  align-self: center;
  text-align: center;
}
#downtime-competencies .cc-occ-eluc-option-shift {
  display: block;
  font-size: 0.66rem;
  color: var(--cream-dim);
  font-weight: normal;
  margin-top: 2px;
}
#downtime-competencies .cc-occ-eluc-option-body {
  font-size: 0.78rem;
  color: var(--cream);
  line-height: 1.4;
}
#downtime-competencies .cc-occ-eluc-option-name {
  margin-bottom: 2px;
}
#downtime-competencies .cc-occ-eluc-option-name strong {
  color: rgba(220, 180, 240, 1);
}
#downtime-competencies .cc-occ-eluc-option-effect {
  color: var(--cream-dark);
  font-size: 0.74rem;
}
#downtime-competencies .cc-occ-eluc-pending-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
#downtime-competencies .cc-occ-eluc-cancel {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream-dark);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
}
#downtime-competencies .cc-occ-eluc-cancel:hover {
  background: var(--bg-mid);
  border-color: #e08080;
  color: #e08080;
}

/* ── Physician (Phase Phys-1, Rome 2026-05-03) ────────────────────── */
#downtime-competencies .cc-section-physician-care {
  border-left-color: rgba(140, 200, 200, 0.55);
  background: rgba(140, 200, 200, 0.05);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#downtime-competencies .cc-section-physician-treatments {
  border-left-color: rgba(120, 180, 200, 0.55);
  background: rgba(120, 180, 200, 0.05);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#downtime-competencies .cc-occ-phys-care-spend,
#downtime-competencies .cc-occ-phys-care-reset,
#downtime-competencies .cc-occ-phys-treat-spend,
#downtime-competencies .cc-occ-phys-treat-clear {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-occ-phys-care-spend:hover:not(:disabled),
#downtime-competencies .cc-occ-phys-care-reset:hover:not(:disabled),
#downtime-competencies .cc-occ-phys-treat-spend:hover:not(:disabled),
#downtime-competencies .cc-occ-phys-treat-clear:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(170, 220, 220, 0.7);
  color: rgba(190, 240, 240, 1);
}
#downtime-competencies .cc-occ-phys-care-spend:disabled,
#downtime-competencies .cc-occ-phys-care-reset:disabled,
#downtime-competencies .cc-occ-phys-treat-spend:disabled,
#downtime-competencies .cc-occ-phys-treat-clear:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}
#downtime-competencies .cc-occ-phys-treat-notes {
  flex: 1 1 240px;
  min-width: 240px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.04);
  color: var(--cream);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.4;
  resize: vertical;
}
#downtime-competencies .cc-occ-phys-treat-notes:focus {
  outline: 1px solid rgba(170, 220, 220, 0.7);
  border-color: rgba(170, 220, 220, 0.7);
}

/* ── Care HP bonus stepper on healing card (Phase Phys-2, Rome 2026-05-03) ── */
.rh-care-bonus-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--bg-mid);
}
.rh-care-bonus-label {
  font-family: var(--font-title);
  color: var(--gold-dim);
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-right: 4px;
}
.rh-care-bonus-btn {
  padding: 2px 8px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rh-care-bonus-btn:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(140, 200, 200, 0.7);
  color: rgba(170, 220, 220, 1);
}
.rh-care-bonus-btn:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}
.rh-care-bonus-val {
  font-family: 'Courier New', monospace;
  color: rgba(170, 220, 220, 1);
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 50px;
  text-align: center;
  padding: 0 6px;
}
.rh-care-bonus-reset {
  margin-left: auto;
  color: var(--cream-dark);
}
.rh-care-bonus-reset:hover:not(:disabled) {
  border-color: var(--cream-dark);
  color: var(--cream);
}

/* ─────────────────────────────────────────────────────────────────
   Sage Philosopher — New Ideas project UI (Phase Sage-2, 2026-05-03)
   Reuses cc-occ-* base styling but with a gold/amber accent.
   ───────────────────────────────────────────────────────────────── */
#downtime-competencies .cc-occ-philos-draft-step,
#downtime-competencies .cc-occ-philos-roll-rumination,
#downtime-competencies .cc-occ-philos-roll-lecture,
#downtime-competencies .cc-occ-philos-establish {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-occ-philos-draft-step:hover:not(:disabled),
#downtime-competencies .cc-occ-philos-roll-rumination:hover:not(:disabled),
#downtime-competencies .cc-occ-philos-roll-lecture:hover:not(:disabled),
#downtime-competencies .cc-occ-philos-establish:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(220, 180, 110, 0.70);
  color: rgba(245, 215, 145, 1);
}
#downtime-competencies .cc-occ-philos-draft-step:disabled,
#downtime-competencies .cc-occ-philos-roll-rumination:disabled,
#downtime-competencies .cc-occ-philos-roll-lecture:disabled,
#downtime-competencies .cc-occ-philos-establish:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}
#downtime-competencies .cc-occ-philos-establish {
  background: rgba(220, 180, 110, 0.20);
  border-color: rgba(220, 180, 110, 0.55);
  color: rgba(245, 215, 145, 1);
}
#downtime-competencies .cc-occ-philos-establish:hover:not(:disabled) {
  background: rgba(220, 180, 110, 0.35);
}

/* ─────────────────────────────────────────────────────────────────
   Sailor Damage Control — 1:1 Labor → Tailoring/Carpentry converter
   (Phase Sai-1, 2026-05-03). Mirrors the cc-hand-convert palette but
   uses a sea-blue accent on hover to match the Sailor card identity.
   ───────────────────────────────────────────────────────────────── */
#downtime-competencies .cc-sailor-damage-convert {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-sailor-damage-convert:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(110, 180, 220, 0.70);
  color: rgba(160, 215, 245, 1);
}
#downtime-competencies .cc-sailor-damage-convert:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────
   Scholar Dissertation mechanic (Phase Sch-2, 2026-05-03)
   Gold-amber palette to align with Scholar's intellectual identity.
   ───────────────────────────────────────────────────────────────── */
#downtime-competencies .cc-scholar-diss-thor-step,
#downtime-competencies .cc-scholar-diss-tb-step,
#downtime-competencies .cc-scholar-diss-wp-step,
#downtime-competencies .cc-scholar-diss-begin,
#downtime-competencies .cc-scholar-diss-complete,
#downtime-competencies .cc-scholar-diss-abandon,
#downtime-competencies .cc-scholar-diss-sell,
#downtime-competencies .cc-scholar-diss-forget {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-scholar-diss-thor-step:hover:not(:disabled),
#downtime-competencies .cc-scholar-diss-tb-step:hover:not(:disabled),
#downtime-competencies .cc-scholar-diss-wp-step:hover:not(:disabled),
#downtime-competencies .cc-scholar-diss-begin:hover:not(:disabled),
#downtime-competencies .cc-scholar-diss-complete:hover:not(:disabled),
#downtime-competencies .cc-scholar-diss-abandon:hover:not(:disabled),
#downtime-competencies .cc-scholar-diss-sell:hover:not(:disabled),
#downtime-competencies .cc-scholar-diss-forget:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(220, 180, 110, 0.70);
  color: rgba(245, 215, 145, 1);
}
#downtime-competencies .cc-scholar-diss-thor-step:disabled,
#downtime-competencies .cc-scholar-diss-tb-step:disabled,
#downtime-competencies .cc-scholar-diss-wp-step:disabled,
#downtime-competencies .cc-scholar-diss-begin:disabled,
#downtime-competencies .cc-scholar-diss-complete:disabled,
#downtime-competencies .cc-scholar-diss-abandon:disabled,
#downtime-competencies .cc-scholar-diss-sell:disabled,
#downtime-competencies .cc-scholar-diss-forget:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}
#downtime-competencies .cc-scholar-diss-begin {
  background: rgba(220, 180, 110, 0.20);
  border-color: rgba(220, 180, 110, 0.55);
  color: rgba(245, 215, 145, 1);
}
#downtime-competencies .cc-scholar-diss-begin:hover:not(:disabled) {
  background: rgba(220, 180, 110, 0.35);
}
#downtime-competencies .cc-scholar-diss-complete {
  background: rgba(160, 200, 150, 0.20);
  border-color: rgba(160, 200, 150, 0.55);
  color: rgba(200, 235, 175, 1);
}
#downtime-competencies .cc-scholar-diss-complete:hover:not(:disabled) {
  background: rgba(160, 200, 150, 0.35);
  border-color: rgba(160, 200, 150, 0.85);
  color: rgba(220, 245, 195, 1);
}
#downtime-competencies .cc-scholar-diss-sell {
  background: rgba(220, 180, 110, 0.10);
  border-color: rgba(220, 180, 110, 0.35);
}
#downtime-competencies .cc-scholar-diss-toggle {
  margin-right: 4px;
}

/* Buy-a-Book CTA inside the Dissertation begin-form (Phase Sch-2.1) */
#downtime-competencies .cc-scholar-diss-buybook {
  margin-left: 8px;
  padding: 3px 9px;
  background: rgba(220, 180, 110, 0.20);
  color: rgba(245, 215, 145, 1);
  border: 1px solid rgba(220, 180, 110, 0.55);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-scholar-diss-buybook:hover {
  background: rgba(220, 180, 110, 0.35);
  border-color: rgba(220, 180, 110, 0.85);
}

/* Smith Whitesmith — 2 Smithing → 1 Beautification converter (Phase Smi-1) */
#downtime-competencies .cc-smith-whitesmith-convert {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-smith-whitesmith-convert:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(220, 200, 130, 0.70);
  color: rgba(245, 230, 175, 1);
}
#downtime-competencies .cc-smith-whitesmith-convert:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}

/* Tailor Embroiderer — 2 Tailoring → 1 Beautification converter (Phase Tai-1) */
#downtime-competencies .cc-tailor-embroiderer-convert {
  padding: 3px 9px;
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#downtime-competencies .cc-tailor-embroiderer-convert:hover:not(:disabled) {
  background: var(--bg-mid);
  border-color: rgba(180, 140, 200, 0.70);
  color: rgba(225, 195, 240, 1);
}
#downtime-competencies .cc-tailor-embroiderer-convert:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────
   Gear → Buildings subtab (Phase Bld-1, 2026-05-03)
   ───────────────────────────────────────────────────────────────── */
.gp-buildings-view { display: flex; flex-direction: column; gap: 12px; }
.gp-buildings-head { padding: 12px 16px; background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.20); border-radius: 4px; }
.gp-buildings-title { margin: 0 0 4px; color: var(--gold-light); font-size: 1.05rem; font-weight: 600; }
.gp-buildings-sub { font-size: 0.84rem; color: var(--cream-dim); font-style: italic; }
.gp-buildings-list { display: flex; flex-direction: column; gap: 8px; }
.gp-buildings-card { padding: 10px 14px; background: var(--bg-card);
  border: 1px solid var(--bg-mid); border-radius: 4px; color: var(--cream); }
.gp-buildings-roadmap { padding: 10px 14px; font-size: 0.78rem;
  color: var(--cream-dim); background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--bg-mid); border-radius: 3px; line-height: 1.55; }
.gp-buildings-roadmap strong { color: var(--gold-dim); }

/* ─────────────────────────────────────────────────────────────────
   Phase Bld-2 — Property catalog + custom builder
   ───────────────────────────────────────────────────────────────── */
.gp-buildings-section { margin-top: 4px; }
.gp-buildings-section-head { padding: 8px 12px; background: rgba(212, 175, 55, 0.04);
  border: 1px solid var(--bg-mid); border-radius: 4px 4px 0 0; color: var(--gold-light);
  font-weight: 600; font-size: 0.92rem; }
.gp-buildings-section-count { color: var(--cream-dim); font-weight: normal;
  font-size: 0.8rem; margin-left: 6px; }

/* Owned cards */
.gp-buildings-card-owned { padding: 10px 14px; border-left: 3px solid rgba(212, 175, 55, 0.55);
  background: var(--bg-card); margin-top: 6px; }
.gp-buildings-card-head strong { color: var(--gold-light); font-size: 0.95rem; }
.gp-buildings-card-meta { color: var(--cream-dim); font-size: 0.78rem; font-style: italic;
  margin-left: 6px; }
.gp-buildings-card-tenure { font-size: 0.82rem; color: var(--cream); margin: 4px 0; }
.gp-tenure-leased { color: rgba(110, 180, 220, 1); font-weight: 600; }
.gp-tenure-owned  { color: rgba(220, 180, 110, 1); font-weight: 600; }
.gp-buildings-card-note { font-size: 0.78rem; color: var(--cream-dim); margin: 3px 0; }
.gp-buildings-card-actions { margin-top: 6px; }
.gp-buildings-sell-btn { padding: 4px 10px; background: rgba(220, 180, 110, 0.10);
  color: var(--cream); border: 1px solid rgba(220, 180, 110, 0.35);
  border-radius: 3px; font-family: 'Courier New', monospace;
  font-size: 0.78rem; cursor: pointer; }
.gp-buildings-sell-btn:hover { background: rgba(220, 180, 110, 0.25); }

/* Builder */
.gp-buildings-builder { padding: 12px 14px; background: var(--bg-card);
  border: 1px solid var(--bg-mid); border-radius: 0 0 4px 4px; margin-top: -1px;
  display: flex; flex-direction: column; gap: 8px; }
.gp-bld-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gp-bld-row-rooms { align-items: flex-start; }
.gp-bld-label { color: var(--gold-dim); font-size: 0.84rem; min-width: 130px; }
.gp-bld-step { padding: 3px 9px; background: var(--bg-mid); color: var(--cream);
  border: 1px solid var(--bg-mid); border-radius: 3px; cursor: pointer;
  font-family: 'Courier New', monospace; font-size: 0.74rem; }
.gp-bld-step:hover:not(:disabled) { border-color: rgba(212, 175, 55, 0.6); }
.gp-bld-step:disabled { opacity: 0.4; cursor: not-allowed; }
.gp-bld-val { font-family: 'Courier New', monospace; color: var(--cream);
  font-size: 0.85rem; min-width: 130px; }
.gp-bld-meta { color: var(--cream-dim); font-size: 0.78rem; font-style: italic; }
.gp-bld-select { padding: 4px 8px; background: var(--bg-mid); color: var(--cream);
  border: 1px solid var(--bg-mid); border-radius: 3px; font-size: 0.84rem; flex: 1; min-width: 200px; }
.gp-bld-name { flex: 1; min-width: 200px; padding: 4px 8px; background: var(--bg-mid);
  color: var(--cream); border: 1px solid var(--bg-mid); border-radius: 3px;
  font-size: 0.84rem; }
.gp-bld-rooms { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.gp-bld-room-cb { font-size: 0.78rem; color: var(--cream); cursor: pointer;
  display: flex; align-items: baseline; gap: 6px; }
.gp-bld-room-cb input { margin-right: 4px; }
.gp-bld-room-cb strong { color: var(--gold-light); }
.gp-bld-room-cb em { color: var(--cream-dim); }
.gp-bld-room-canonical { display: inline-block; padding: 1px 6px;
  background: rgba(110, 180, 220, 0.15); color: rgba(160, 215, 245, 1);
  border: 1px solid rgba(110, 180, 220, 0.35); border-radius: 2px;
  font-size: 0.66rem; font-style: normal; font-weight: 600; margin-right: 4px; }

/* Builder calculator readout */
.gp-bld-calc { background: rgba(212, 175, 55, 0.05); padding: 8px 12px;
  border: 1px dashed rgba(212, 175, 55, 0.30); border-radius: 3px;
  display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.gp-bld-calc-row { display: flex; justify-content: space-between; font-size: 0.82rem; }
.gp-bld-calc-row span { color: var(--cream-dim); }
.gp-bld-calc-row strong { color: var(--gold-light); font-family: 'Courier New', monospace; }
.gp-bld-calc-split strong { color: rgba(110, 180, 220, 1); font-size: 0.78rem; }

/* Builder action buttons */
.gp-bld-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.gp-bld-action { padding: 6px 14px; border-radius: 3px; cursor: pointer;
  font-family: 'Courier New', monospace; font-size: 0.82rem;
  transition: background 0.15s, border-color 0.15s; }
.gp-bld-action:disabled { opacity: 0.4; cursor: not-allowed; }
.gp-bld-buy { background: rgba(212, 175, 55, 0.20); color: rgba(245, 215, 145, 1);
  border: 1px solid rgba(212, 175, 55, 0.55); }
.gp-bld-buy:hover:not(:disabled) { background: rgba(212, 175, 55, 0.35); }
.gp-bld-build { background: rgba(150, 200, 130, 0.15); color: rgba(180, 230, 165, 1);
  border: 1px solid rgba(150, 200, 130, 0.45); }
.gp-bld-build:hover:not(:disabled) { background: rgba(150, 200, 130, 0.30); }
.gp-bld-lease { background: rgba(110, 180, 220, 0.15); color: rgba(160, 215, 245, 1);
  border: 1px solid rgba(110, 180, 220, 0.45); }
.gp-bld-lease:hover:not(:disabled) { background: rgba(110, 180, 220, 0.30); }
.gp-bld-station-gate { padding: 6px 10px;
  background: rgba(208, 80, 80, 0.10); color: rgba(230, 130, 130, 1);
  border: 1px solid rgba(208, 80, 80, 0.40); border-radius: 3px;
  font-size: 0.82rem; width: 100%; }

/* Catalog cards */
.gp-buildings-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px; margin-top: 6px; }
.gp-buildings-sample { padding: 10px 12px; background: var(--bg-card);
  border: 1px solid var(--bg-mid); border-radius: 4px;
  display: flex; flex-direction: column; gap: 5px; }
.gp-buildings-sample-name strong { color: var(--gold-light); font-size: 0.92rem; }
.gp-buildings-sample-meta { font-size: 0.74rem; color: var(--cream-dim); font-style: italic; }
.gp-buildings-sample-note { font-size: 0.78rem; color: var(--cream); }
.gp-buildings-sample-prices { font-size: 0.82rem; color: var(--cream-dim); }
.gp-buildings-sample-prices strong { color: var(--gold-light); font-family: 'Courier New', monospace; }
.gp-buildings-sample-actions { display: flex; gap: 6px; margin-top: 4px; }

/* Specialty Room description line — Phase Bld-2 follow-up 2026-05-03 */
.gp-bld-room-cb { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.gp-bld-room-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.gp-bld-room-desc { font-size: 0.74rem; color: var(--cream-dim);
  font-style: italic; padding-left: 22px; line-height: 1.4; }

/* Phase Wks-1 — Workshop subtype dropdown (renders inside .gp-bld-room-desc
   when the Workshop checkbox is checked). */
.gp-bld-workshop-pick { display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 22px; margin-top: 4px;
  background: rgba(110, 180, 220, 0.06);
  border-left: 2px solid rgba(110, 180, 220, 0.40);
  font-style: normal; }
.gp-bld-workshop-pick-label { color: var(--gold-dim); font-size: 0.78rem;
  font-style: normal; flex-shrink: 0; }
.gp-bld-workshop-select { flex: 1; padding: 4px 8px; background: var(--bg-mid);
  color: var(--cream); border: 1px solid rgba(110, 180, 220, 0.30);
  border-radius: 3px; font-size: 0.82rem; max-width: 360px; }

/* Specialty Room — custom Sage-approved flavor rooms */
.gp-bld-room-flavor { color: var(--cream-dim); font-size: 0.74rem;
  font-style: italic; margin-left: 4px; }
.gp-bld-room-add { display: flex; gap: 6px; margin-top: 6px;
  padding: 6px 8px; background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--bg-mid); border-radius: 3px; }
.gp-bld-room-add-input { flex: 1; padding: 4px 8px; background: var(--bg-mid);
  color: var(--cream); border: 1px solid var(--bg-mid); border-radius: 3px;
  font-size: 0.82rem; }
.gp-bld-room-add-btn { padding: 3px 12px; background: rgba(212, 175, 55, 0.15);
  color: var(--cream); border: 1px solid rgba(212, 175, 55, 0.40);
  border-radius: 3px; font-family: 'Courier New', monospace;
  font-size: 0.78rem; cursor: pointer; }
.gp-bld-room-add-btn:hover { background: rgba(212, 175, 55, 0.30); }

/* Canon-named flavor room pill — distinct from ratified canon pill */
.gp-bld-room-canonical-flavor { display: inline-block; padding: 1px 6px;
  background: rgba(180, 140, 100, 0.12); color: rgba(220, 190, 150, 1);
  border: 1px solid rgba(180, 140, 100, 0.30); border-radius: 2px;
  font-size: 0.66rem; font-style: normal; font-weight: 600; margin-right: 4px; }

/* Cancel-Lease button — visually distinct from the Sell button */
#gear-picker .gp-buildings-cancel-btn {
  background: rgba(208, 80, 80, 0.10);
  color: rgba(230, 130, 130, 1);
  border-color: rgba(208, 80, 80, 0.35);
}
#gear-picker .gp-buildings-cancel-btn:hover {
  background: rgba(208, 80, 80, 0.25);
  border-color: rgba(208, 80, 80, 0.55);
}

/* Phase Bld-3 — inline lease payment row */
.gp-buildings-pay-row { padding: 8px 12px; margin-top: 6px;
  background: rgba(110, 180, 220, 0.05); border: 1px dashed rgba(110, 180, 220, 0.30);
  border-radius: 3px; }
.gp-buildings-pay-head { color: rgba(160, 215, 245, 1); font-size: 0.84rem;
  font-weight: 600; margin-bottom: 6px; }
.gp-buildings-pay-controls { display: flex; flex-direction: column; gap: 6px; }
.gp-buildings-pay-input { display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; flex-wrap: wrap; }
.gp-buildings-pay-input span { color: var(--cream-dim); min-width: 140px; }
.gp-buildings-pay-sc { width: 70px; padding: 3px 6px; background: var(--bg-mid);
  color: var(--cream); border: 1px solid var(--bg-mid); border-radius: 3px;
  font-family: 'Courier New', monospace; font-size: 0.82rem; text-align: center; }
.gp-buildings-pay-summary { font-size: 0.78rem; color: var(--cream-dim);
  font-style: italic; padding-left: 4px; }
.gp-buildings-pay-summary strong { color: var(--cream); font-style: normal;
  font-family: 'Courier New', monospace; }
.gp-buildings-pay-btn { padding: 6px 14px; background: rgba(110, 180, 220, 0.20);
  color: rgba(160, 215, 245, 1); border: 1px solid rgba(110, 180, 220, 0.45);
  border-radius: 3px; font-family: 'Courier New', monospace; font-size: 0.82rem;
  cursor: pointer; transition: background 0.15s, border-color 0.15s; align-self: flex-start; }
.gp-buildings-pay-btn:hover:not(:disabled) {
  background: rgba(110, 180, 220, 0.35); border-color: rgba(110, 180, 220, 0.65); }
.gp-buildings-pay-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.gp-buildings-pay-cap-note { font-size: 0.74rem; color: var(--cream-dim);
  font-style: italic; padding-left: 4px; }

/* Phase QoL-1 — Quality of Life pane (renamed from Phase Bld-4 Property panel).
   Always visible during Downtime Setup, surfaces Property/Shelter, Food + Mess Kit,
   and auto-detected QoL modifiers from culture trait + Foundation Path virtues. */
.downtime-property-panel,
.downtime-qol-panel { margin-top: 8px; padding: 10px 14px;
  background: rgba(110, 180, 220, 0.05);
  border: 1px solid rgba(110, 180, 220, 0.25); border-radius: 4px; }
.dt-qol-head { display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px dashed rgba(110, 180, 220, 0.25); }
.dt-qol-title { font-size: 1.0rem; font-weight: bold;
  color: rgba(160, 215, 245, 1); letter-spacing: 0.04em;
  text-transform: uppercase; }
.dt-qol-toggle { display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 0.92rem; }
.dt-qol-toggle strong { color: rgba(160, 215, 245, 1); }
.dt-qol-sub { color: var(--cream-dim); font-style: italic; font-size: 0.78rem; line-height: 1.4; }
.dt-qol-section { margin-top: 10px; padding-top: 8px;
  border-top: 1px dotted rgba(110, 180, 220, 0.20);
  display: flex; flex-direction: column; gap: 6px; }
.dt-qol-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.dt-qol-section-title { font-size: 0.78rem; font-weight: bold;
  color: var(--gold-dim); letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 2px; }
/* Collapsible Hirelings subsection (Rome 2026-06-18). Summary acts as the
   section title with a custom disclosure caret; default closed. */
.dt-qol-section-summary { cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
.dt-qol-section-summary::-webkit-details-marker { display: none; }
.dt-qol-section-summary::before { content: '\25b8'; font-size: 0.72rem;
  color: var(--gold-dim); }
details.dt-qol-hirelings[open] > .dt-qol-section-summary::before { content: '\25be'; }
details.dt-qol-hirelings[open] > .dt-qol-section-summary { margin-bottom: 4px; }
.dt-qol-checkbox { display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 0.84rem; color: var(--cream); }
.dt-qol-checkbox strong { color: rgba(160, 215, 245, 1); }
.dt-qol-effective { padding: 6px 10px; margin-top: 2px;
  background: rgba(150, 200, 130, 0.08);
  border: 1px solid rgba(150, 200, 130, 0.30); border-radius: 3px;
  font-size: 0.84rem; color: var(--cream); }
.dt-qol-effective-label { color: var(--gold-dim); font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
.dt-qol-effective strong { color: rgba(180, 230, 165, 1); }
.dt-qol-mods { display: flex; flex-direction: column; gap: 4px; }
.dt-qol-mod { padding: 6px 10px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.20); }
.dt-qol-mod-active { background: rgba(150, 200, 130, 0.08);
  border-color: rgba(150, 200, 130, 0.40); }
.dt-qol-mod-toggle { cursor: pointer; }
.dt-qol-mod-line { display: flex; align-items: center; gap: 8px;
  font-size: 0.84rem; flex-wrap: wrap; }
.dt-qol-mod-line input[type="checkbox"] { flex-shrink: 0; }
.dt-qol-mod-source { color: rgba(160, 215, 245, 1); font-weight: bold;
  font-size: 0.82rem; }
.dt-qol-mod-effect { color: var(--cream-dim); font-style: italic;
  font-size: 0.80rem; flex: 1; }
.dt-qol-mod-badge { padding: 1px 6px; background: rgba(150, 200, 130, 0.20);
  color: rgba(180, 230, 165, 1); border: 1px solid rgba(150, 200, 130, 0.40);
  border-radius: 2px; font-family: 'Courier New', monospace;
  font-size: 0.70rem; text-transform: uppercase; letter-spacing: 0.06em; }
.dt-qol-canon { padding: 6px 10px; margin-top: 6px;
  background: rgba(212, 175, 55, 0.05);
  border: 1px dashed rgba(212, 175, 55, 0.25); border-radius: 3px;
  font-size: 0.74rem; color: var(--cream-dim); font-style: italic; line-height: 1.5; }

/* Legacy Phase Bld-4 classes kept for back-compat with any saved widget HTML */
.dt-prop-head { display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; font-size: 0.92rem; }
.dt-prop-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.dt-prop-toggle strong { color: rgba(160, 215, 245, 1); }
.dt-prop-note { color: var(--cream-dim); font-style: italic; font-size: 0.8rem; }
.dt-prop-body { margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(110, 180, 220, 0.25);
  display: flex; flex-direction: column; gap: 6px; }
.dt-prop-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.84rem; }
.dt-prop-label { color: var(--gold-dim); min-width: 150px; font-size: 0.82rem; }
.dt-prop-val { color: var(--cream); font-family: 'Courier New', monospace;
  font-size: 0.84rem; flex: 1; }
.dt-prop-val-derived strong { color: rgba(160, 215, 245, 1); }
.dt-prop-meta { color: var(--cream-dim); font-style: italic; font-size: 0.78rem; margin-left: 4px; }
.dt-prop-select { padding: 4px 8px; background: var(--bg-mid);
  color: var(--cream); border: 1px solid var(--bg-mid); border-radius: 3px;
  font-size: 0.82rem; flex: 1; min-width: 200px; }
.dt-prop-share { font-size: 0.82rem; color: var(--cream); cursor: pointer; }
.dt-prop-note-line { padding-left: 158px; font-size: 0.74rem;
  color: var(--cream-dim); font-style: italic; line-height: 1.4; }
.dt-prop-canon { padding: 6px 10px; margin-top: 4px;
  background: rgba(212, 175, 55, 0.05);
  border: 1px dashed rgba(212, 175, 55, 0.25); border-radius: 3px;
  font-size: 0.74rem; color: var(--cream-dim); font-style: italic; line-height: 1.5; }
.dt-prop-canon code { color: var(--gold-dim); font-family: 'Courier New', monospace;
  background: rgba(255, 255, 255, 0.04); padding: 0 4px; border-radius: 2px; }

.ddc-locked { padding: 4px 8px; display: inline-block;
  background: rgba(110, 180, 220, 0.10);
  color: rgba(160, 215, 245, 1);
  border: 1px solid rgba(110, 180, 220, 0.30); border-radius: 3px;
  font-family: 'Courier New', monospace; font-size: 0.82rem;
  cursor: not-allowed; }

/* Phase Fac-1 — competency-card facility status (reads from owned/leased
   Properties' specialtyRooms + shopTrade fields). Green = facility present;
   amber = facility missing (Sage may waive). */
.cc-section-facility { padding: 0; margin-bottom: 8px; }
.cc-facility { padding: 8px 12px; border-radius: 4px;
  display: flex; align-items: center; gap: 10px; font-size: 0.86rem; }
.cc-facility-ok { background: rgba(150, 200, 130, 0.10);
  border: 1px solid rgba(150, 200, 130, 0.40); color: var(--cream); }
.cc-facility-ok .cc-facility-icon { color: rgba(180, 230, 165, 1); }
.cc-facility-ok strong { color: rgba(180, 230, 165, 1); }
.cc-facility-ok em { color: rgba(220, 255, 200, 0.95); font-style: italic; }
.cc-facility-missing { background: rgba(220, 180, 110, 0.08);
  border: 1px solid rgba(220, 180, 110, 0.35); color: var(--cream); }
.cc-facility-missing .cc-facility-icon { color: rgba(245, 215, 145, 1); }
.cc-facility-missing strong { color: rgba(245, 215, 145, 1); }
.cc-facility-icon { font-size: 1.1rem; flex-shrink: 0;
  font-family: 'Courier New', monospace; font-weight: bold; }
.cc-facility-text { flex: 1; line-height: 1.4; }
.cc-facility-note { padding: 4px 12px; margin-top: 2px;
  font-size: 0.74rem; color: var(--cream-dim); font-style: italic;
  line-height: 1.4; }

/* Phase Bld-4 follow-up — inhabitants count + occupancy status */
.dt-prop-inhab { width: 60px; padding: 4px 8px; background: var(--bg-mid);
  color: var(--cream); border: 1px solid var(--bg-mid); border-radius: 3px;
  font-family: 'Courier New', monospace; font-size: 0.84rem; text-align: center; }
.dt-prop-occ { padding: 2px 8px; border-radius: 3px;
  font-family: 'Courier New', monospace; font-size: 0.78rem; }
.dt-prop-occ-comfortable { background: rgba(150, 200, 130, 0.15);
  color: rgba(180, 230, 165, 1); border: 1px solid rgba(150, 200, 130, 0.40); }
.dt-prop-occ-crowded { background: rgba(220, 180, 110, 0.15);
  color: rgba(245, 215, 145, 1); border: 1px solid rgba(220, 180, 110, 0.40); }
.dt-prop-occ-overcap { background: rgba(208, 80, 80, 0.15);
  color: rgba(230, 130, 130, 1); border: 1px solid rgba(208, 80, 80, 0.40); }

/* Phase Stat-1 — Standing/Status canonical breakdown pills.
   Five contributor pills laid out left-to-right with a Total pill at the
   end. Each pill labels its source clearly; +/- tinting indicates
   direction. The Adj pill embeds the manual ± buttons inline. */
.status-aggregator { display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; }
.status-pill { display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  font-family: 'Courier New', monospace; font-size: 0.84rem;
  color: var(--cream); }
.status-pill-label { font-size: 0.70rem; color: var(--cream-dark);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: inherit; }
.status-pill-value { font-weight: 600; min-width: 18px; text-align: center; }
.status-pill-base { background: rgba(110, 180, 220, 0.06);
  border-color: rgba(110, 180, 220, 0.30); }
.status-pill-base .status-pill-value { color: rgba(160, 215, 245, 1); }
.status-pill-up   { color: rgba(180, 230, 165, 1); }
.status-pill-down { color: rgba(230, 130, 130, 1); }
.status-pill-up.status-pill   { background: rgba(150, 200, 130, 0.10);
  border-color: rgba(150, 200, 130, 0.35); }
.status-pill-down.status-pill { background: rgba(208, 80, 80, 0.10);
  border-color: rgba(208, 80, 80, 0.35); }
.status-pill-adj { padding: 1px 6px; }
.status-pill-adj .status-adj-btn { padding: 0 6px; min-width: 18px;
  font-size: 0.78rem; line-height: 1.4; cursor: pointer;
  background: var(--bg-input); color: var(--cream);
  border: 1px solid var(--border-soft); border-radius: 2px; }
.status-pill-adj .status-adj-btn:hover { background: rgba(212, 175, 55, 0.10); }
.status-pill-adj-val { min-width: 22px; }
.status-pill-total { background: rgba(212, 175, 55, 0.10);
  border-color: rgba(212, 175, 55, 0.40); padding: 4px 10px; }
.status-pill-total .status-pill-label { color: var(--gold-dim); font-weight: bold; }
.status-pill-total .status-pill-value { color: var(--gold-light);
  font-size: 1.0rem; font-weight: 700; }


/* Phase 10h-3 (Rome 2026-05-05): Spend CP section title styling — match
   the gold/uppercase look of .section-header so all six Spend CP sections
   look identical. Hover/open brighten. */
.scp-section .scp-summary { transition: background 0.15s ease; }
.scp-section .scp-summary:hover .scp-title { color: var(--gold-light); }
.scp-section .scp-summary:hover::before { color: var(--gold); }
.scp-section .scp-summary:hover::after { color: var(--gold); }
.scp-section[open] .scp-summary { border-bottom: 1px solid var(--bg-mid); }
.scp-section[open] .scp-title { color: var(--gold-light); }

/* Phase 10i (Rome 2026-05-05): Uncanny + Pulse sub-blocks on Gates card. */
.magic-gates-card .magic-gates-subhead {
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bg-mid);
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 0.92rem;
  letter-spacing: 0.6px;
}
.magic-gates-card .magic-gates-subhead .hint {
  color: var(--cream-dim);
  font-size: 0.74rem;
  font-weight: normal;
  letter-spacing: 0;
  margin-left: 4px;
}
.magic-gates-card .magic-gates-empty {
  padding: 8px 12px;
  color: var(--cream-dim);
  font-style: italic;
  font-size: 0.84rem;
}
.magic-gates-uncanny-list { display: flex; flex-direction: column; gap: 4px; }
.magic-gates-uncanny-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(160, 90, 200, 0.06);
  border-left: 3px solid rgba(160, 90, 200, 0.4);
  border-radius: 3px;
  font-size: 0.84rem;
}
.magic-gates-uncanny-row .magic-gates-unc-tag {
  flex: 0 0 auto;
  color: var(--gold-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  padding-right: 4px;
  white-space: nowrap;
}
.magic-gates-uncanny-row .magic-gates-unc-effect {
  flex: 1;
  color: var(--cream);
  line-height: 1.4;
}
.magic-gates-unc-remove {
  background: transparent;
  border: 1px solid var(--bg-mid);
  color: var(--cream-dim);
  border-radius: 3px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 0.86rem;
  flex: 0 0 auto;
}
.magic-gates-unc-remove:hover { color: #e09080; border-color: #c05049; }

.magic-gates-pulse-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: rgba(80, 130, 200, 0.06);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  font-size: 0.84rem;
}
.magic-gates-pulse-btn {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 4px 12px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.82rem;
  cursor: pointer;
}
.magic-gates-pulse-btn:hover:not(:disabled) { background: var(--gold); }
.magic-gates-pulse-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.magic-gates-pulse-btn-manual {
  background: transparent;
  color: var(--gold-dim);
  border: 1px solid var(--bg-mid);
}
.magic-gates-pulse-btn-manual:hover:not(:disabled) {
  background: rgba(212, 168, 83, 0.10);
  color: var(--gold);
  border-color: var(--gold-dim);
}
.magic-gates-pulse-manual-lbl { color: var(--cream-dim); font-size: 0.78rem; }
.magic-gates-pulse-manual {
  width: 60px;
  background: var(--bg-darkest);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: 'Courier New', monospace;
}
.magic-gates-pulse-log {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(80, 130, 200, 0.04);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
}
.magic-gates-pulse-log strong {
  display: block;
  color: var(--cream-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.magic-gates-pulse-log-list { display: flex; flex-direction: column; gap: 3px; }
.magic-gates-pulse-log-row {
  font-size: 0.80rem;
  color: var(--cream);
  line-height: 1.3;
}
.magic-gates-pulse-log-row .mglp-formula {
  color: var(--cream-dim);
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  margin-right: 4px;
}
.magic-gates-pulse-log-row .mglp-name { color: var(--gold-light); }
.magic-gates-pulse-log-row .mglp-effect { color: var(--cream-dim); font-style: italic; }

/* Phase 10i — Flare distribution modal (Rome 2026-05-05).
   Replaces window.prompt() text picker with a clean overlay + radio buttons. */
.magic-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 26, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}
.magic-modal {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-mid) 100%);
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  padding: 20px 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(212, 168, 83, 0.25);
  min-width: 320px;
  max-width: 460px;
  color: var(--cream);
}
.magic-modal-title {
  margin: 0 0 10px;
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.6px;
}
.magic-modal-desc {
  margin: 0 0 16px;
  color: var(--cream);
  font-size: 0.88rem;
  line-height: 1.4;
}
.magic-modal-desc strong { color: var(--gold-light); }
.magic-modal-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.magic-modal-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-left-width: 4px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.magic-modal-radio:hover {
  background: var(--bg-card-hover);
}
.magic-modal-radio input[type=radio] {
  cursor: pointer;
  accent-color: var(--gold-dim);
}
.magic-modal-radio.beacon-color-red    { border-left-color: rgba(200,  70,  70, 0.7); }
.magic-modal-radio.beacon-color-orange { border-left-color: rgba(220, 140,  60, 0.7); }
.magic-modal-radio.beacon-color-yellow { border-left-color: rgba(220, 200,  80, 0.7); }
.magic-modal-radio.beacon-color-green  { border-left-color: rgba( 90, 170,  90, 0.7); }
.magic-modal-radio.beacon-color-blue   { border-left-color: rgba( 80, 130, 200, 0.7); }
.magic-modal-radio.beacon-color-purple { border-left-color: rgba(160,  90, 200, 0.7); }
.magic-modal-radio-label {
  font-family: var(--font-title);
  letter-spacing: 0.5px;
  color: var(--cream);
}
.magic-modal-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.magic-modal-apply {
  background: var(--gold-dim);
  color: var(--bg-darkest);
  border: none;
  padding: 8px 18px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.9rem;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.magic-modal-apply:hover { background: var(--gold); }

/* Phase 10j (Rome 2026-05-05): Discretionary Flare widget on Magic tab —
   surfaces pending gains/drains from Downtime commits so the player can
   pick which Beacon(s) take the change. */
.magic-discretionary-flare {
  margin: 12px 0;
  padding: 12px 14px;
  background: linear-gradient(145deg, rgba(212, 168, 83, 0.10) 0%, rgba(212, 168, 83, 0.04) 100%);
  border: 1px solid rgba(212, 168, 83, 0.45);
  border-radius: 4px;
}
.magic-discretionary-flare .mdf-head {
  font-size: 0.88rem;
  color: var(--cream);
  margin-bottom: 8px;
}
.magic-discretionary-flare .mdf-head strong { color: var(--gold-light); }
.magic-discretionary-flare .mdf-head .hint {
  display: block;
  font-size: 0.78rem;
  color: var(--cream-dim);
  font-weight: normal;
  font-style: italic;
  margin-top: 2px;
}
.magic-discretionary-flare .mdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.magic-discretionary-flare .mdf-cell {
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-mid);
  border-left-width: 4px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.magic-discretionary-flare .mdf-cell.beacon-color-red    { border-left-color: rgba(200, 70, 70, 0.7); }
.magic-discretionary-flare .mdf-cell.beacon-color-orange { border-left-color: rgba(220, 140, 60, 0.7); }
.magic-discretionary-flare .mdf-cell.beacon-color-yellow { border-left-color: rgba(220, 200, 80, 0.7); }
.magic-discretionary-flare .mdf-cell.beacon-color-green  { border-left-color: rgba(90, 170, 90, 0.7); }
.magic-discretionary-flare .mdf-cell.beacon-color-blue   { border-left-color: rgba(80, 130, 200, 0.7); }
.magic-discretionary-flare .mdf-cell.beacon-color-purple { border-left-color: rgba(160, 90, 200, 0.7); }
.magic-discretionary-flare .mdf-cell-label {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 0.84rem;
  letter-spacing: 0.5px;
}
.magic-discretionary-flare .mdf-cell-current {
  font-family: 'Courier New', monospace;
  color: var(--cream-dim);
  font-size: 0.78rem;
}
.magic-discretionary-flare .mdf-btn-row {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.magic-discretionary-flare .mdf-btn {
  flex: 1;
  padding: 4px 8px;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.82rem;
  cursor: pointer;
  border: 1px solid;
}
.magic-discretionary-flare .mdf-btn-gain {
  background: rgba(90, 170, 90, 0.18);
  border-color: rgba(90, 170, 90, 0.5);
  color: #b8d8a8;
}
.magic-discretionary-flare .mdf-btn-gain:hover { background: rgba(90, 170, 90, 0.32); color: #d8e8c8; }
.magic-discretionary-flare .mdf-btn-drain {
  background: rgba(200, 70, 70, 0.15);
  border-color: rgba(200, 70, 70, 0.5);
  color: #e0a0a0;
}
.magic-discretionary-flare .mdf-btn-drain:hover:not(:disabled) {
  background: rgba(200, 70, 70, 0.30);
  color: #f0c0c0;
}
.magic-discretionary-flare .mdf-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Phase 10j-fix4 (Rome 2026-05-05): Zero-discretionary button on the
   Discretionary Flare widget — discards leftover gains/drains. */
.magic-discretionary-flare .mdf-zero-btn {
  margin-bottom: 8px;
  padding: 4px 12px;
  background: transparent;
  border: 1px dashed rgba(216, 128, 128, 0.5);
  color: #e0a0a0;
  border-radius: 3px;
  font-family: var(--font-title);
  font-size: 0.78rem;
  cursor: pointer;
  align-self: flex-start;
}
.magic-discretionary-flare .mdf-zero-btn:hover {
  background: rgba(216, 128, 128, 0.10);
  border-color: rgba(216, 128, 128, 0.8);
  color: #f0c0c0;
}

/* ─── Phase 11 — Magic tab: Beacons + Legend side-by-side ────────── */
.magic-top-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}
.magic-top-row .sheet-section { margin-bottom: 0; }
@media (max-width: 900px) {
  .magic-top-row { grid-template-columns: 1fr; }
}

.legend-tracker {
  padding: 16px 12px 12px;
  text-align: center;
}
.legend-value-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}
.legend-value {
  font-family: var(--font-title, "Palatino Linotype", "Book Antiqua", serif);
  color: var(--gold, #d4a853);
  font-size: 2.6rem;
  letter-spacing: 1px;
  min-width: 80px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(212,168,83,0.18);
}
.legend-step-btn {
  background: var(--bg-darkest, #0f0f1a);
  color: var(--gold, #d4a853);
  border: 1px solid var(--gold-dim, #a07830);
  border-radius: 6px;
  width: 36px;
  height: 36px;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legend-step-btn:hover {
  background: rgba(212,168,83,0.12);
  border-color: var(--gold, #d4a853);
  color: var(--gold-light, #e8c878);
}
/* QoL ±10 buttons (Rome 2026-05-10) — wider footprint and slightly
   subdued tint so they read as the bigger-step variant rather than
   the dominant action. The label needs more horizontal room than ±1. */
.legend-step-btn-big {
  width: 48px;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  background: var(--bg-dark, #161620);
  border-color: var(--gold-dim, #a07830);
  opacity: 0.92;
}
.legend-step-btn-big:hover {
  opacity: 1;
}
.legend-note {
  color: var(--cream-dim, #b0a898);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.4;
  border-top: 1px solid rgba(212,168,83,0.12);
  padding-top: 10px;
}

/* ─── Phase 12 — Story tab editable items + path UI ────────────── */

/* Editable Personal Pursuits + Formative Events */
.story-item-editable {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.story-item-editable .story-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-item-name-input,
.fe-title-input {
  flex: 1;
  background: var(--bg-darkest, #0f0f1a);
  color: var(--cream, #e8e0d0);
  border: 1px solid var(--bg-mid, #232340);
  border-radius: 4px;
  padding: 6px 10px;
  font: inherit;
  font-weight: 600;
}
.story-item-name-input:focus,
.fe-title-input:focus,
.fe-age-input:focus,
.story-item-body-input:focus,
.fe-body-input:focus {
  outline: none;
  border-color: var(--gold-dim, #a07830);
  box-shadow: 0 0 0 2px rgba(212,168,83,0.15);
}
.story-item-body-input,
.fe-body-input {
  width: 100%;
  background: var(--bg-darkest, #0f0f1a);
  color: var(--cream, #e8e0d0);
  border: 1px solid var(--bg-mid, #232340);
  border-radius: 4px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  resize: vertical;
}
.fe-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.fe-age-input {
  width: 130px;
  background: var(--bg-darkest, #0f0f1a);
  color: var(--cream, #e8e0d0);
  border: 1px solid var(--bg-mid, #232340);
  border-radius: 4px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.86rem;
}
.story-item-remove {
  background: transparent;
  color: var(--cream-dark, #888070);
  border: 1px solid var(--bg-mid, #232340);
  border-radius: 4px;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.story-item-remove:hover {
  color: #c44040;
  border-color: #c44040;
}
.story-add-btn {
  margin-top: 12px;
  background: rgba(212,168,83,0.08);
  color: var(--gold, #d4a853);
  border: 1px dashed var(--gold-dim, #a07830);
  border-radius: 4px;
  padding: 8px 16px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.story-add-btn:hover {
  background: rgba(212,168,83,0.18);
  border-color: var(--gold, #d4a853);
  border-style: solid;
}
.story-empty-hint {
  color: var(--cream-dark, #888070);
  font-style: italic;
  font-size: 0.86rem;
  padding: 8px 0;
}

/* Path slot enhancements */
.path-slot { position: relative; }
.path-slot.selected { border-color: var(--gold-dim, #a07830); }
.ps-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 0.86rem;
  color: var(--cream-dim, #b0a898);
}
.ps-level-select {
  background: var(--bg-darkest, #0f0f1a);
  color: var(--cream, #e8e0d0);
  border: 1px solid var(--bg-mid, #232340);
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  font-size: 0.86rem;
}
.ps-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ps-btn {
  background: var(--bg-darkest, #0f0f1a);
  color: var(--cream, #e8e0d0);
  border: 1px solid var(--bg-mid, #232340);
  border-radius: 4px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.ps-btn:hover {
  background: rgba(212,168,83,0.1);
  border-color: var(--gold-dim, #a07830);
}
.ps-btn-primary {
  background: rgba(212,168,83,0.18);
  color: var(--gold-light, #e8c878);
  border-color: var(--gold-dim, #a07830);
}
.ps-btn-primary:hover {
  background: rgba(212,168,83,0.28);
  border-color: var(--gold, #d4a853);
}
.ps-btn-danger:hover {
  background: rgba(196,64,64,0.15);
  color: #c44040;
  border-color: #c44040;
}
.ps-placeholder {
  color: var(--cream-dark, #888070);
  font-size: 0.82rem;
}

/* ──────────────────────────────────────────────────────────────────
   Path Progression panel — Tier-gated picker (canon SLHH 9 §555-562)
   Sits above the path-slot grid. Gold-pill button language, matching
   the rest of the sheet's Palatino-on-dark aesthetic.
   ────────────────────────────────────────────────────────────────── */
.story-path-progression {
  background: linear-gradient(145deg, rgba(42, 42, 72, 0.55) 0%, rgba(35, 35, 64, 0.55) 100%);
  border: 1px solid rgba(212, 168, 83, 0.22);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.story-path-progression .story-v2-note {
  font-size: 0.85rem;
  color: var(--cream-dim, #b0a898);
  margin-bottom: 10px;
  line-height: 1.5;
}
.story-path-progression .story-v2-note strong { color: var(--gold-light, #e8c878); }

.sp-timeline-header {
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gold-dim, #a07830);
  margin-top: 8px;
  margin-bottom: 6px;
}
.sp-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.sp-timeline-row {
  font-size: 0.86rem;
  color: var(--cream, #e8e0d0);
  padding: 6px 10px;
  background: rgba(15, 15, 26, 0.4);
  border-radius: 4px;
  border-left: 2px solid rgba(212, 168, 83, 0.35);
}
.sp-tier-tag {
  display: inline-block;
  background: rgba(212, 168, 83, 0.18);
  color: var(--gold-light, #e8c878);
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}
.sp-cat {
  color: var(--cream-dark, #888070);
  font-size: 0.82rem;
  font-style: italic;
}

.sp-pending-empty {
  font-size: 0.85rem;
  color: var(--cream-dim, #b0a898);
  padding: 8px 10px;
  font-style: italic;
}

.sp-picker {
  background: rgba(15, 15, 26, 0.5);
  border: 1px solid rgba(212, 168, 83, 0.18);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 10px;
}
.sp-picker-title {
  color: var(--gold-light, #e8c878);
  font-size: 0.95rem;
  margin-bottom: 10px;
  font-family: var(--font-title, "Palatino Linotype", serif);
}
.sp-picker-grouphead {
  font-size: 0.74rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold-dim, #a07830);
  margin-top: 10px;
  margin-bottom: 6px;
}
.sp-picker-grouphead:first-child { margin-top: 0; }
.sp-picker-cat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.sp-picker-catlabel {
  font-size: 0.78rem;
  color: var(--cream-dim, #b0a898);
  margin-right: 4px;
  min-width: 90px;
  text-transform: capitalize;
}
.sp-picker-empty {
  color: var(--cream-dark, #888070);
  font-size: 0.85rem;
  font-style: italic;
}

/* Pill buttons — dark background, gold border, gold text */
.sp-choice-btn {
  display: inline-block;
  background: var(--bg-darkest, #0f0f1a);
  color: var(--gold-light, #e8c878);
  border: 1px solid var(--gold-dim, #a07830);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 6px 6px 0;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition, 0.25s ease);
  letter-spacing: 0.2px;
}
.sp-choice-btn:hover {
  background: rgba(212, 168, 83, 0.15);
  border-color: var(--gold, #d4a853);
  color: var(--gold, #d4a853);
}
.sp-choice-btn:active {
  background: rgba(212, 168, 83, 0.28);
}
.sp-choice-levelup {
  /* Slight emphasis on level-up — implies upward progression */
  border-color: var(--gold, #d4a853);
}
.sp-choice-levelup:hover {
  background: rgba(212, 168, 83, 0.22);
}
.sp-choice-new {
  /* New-path buttons get a subtler treatment than level-ups */
  background: rgba(15, 15, 26, 0.7);
}

/* Path Slot card — read-only level row (replaces former dropdown).
   Overrides the parent .ps-level-row's flex layout to a single block so
   the inline pieces flow naturally and the hint drops to its own line. */
.ps-level-readonly {
  display: block;
  background: rgba(15, 15, 26, 0.4);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 0.85rem;
  color: var(--cream, #e8e0d0);
  line-height: 1.6;
}
.ps-level-readonly .ps-level-label {
  color: var(--cream-dim, #b0a898);
  margin-right: 6px;
}
.ps-level-readonly .ps-level-current {
  color: var(--gold-light, #e8c878);
  white-space: nowrap;
}
.ps-level-readonly .ps-level-title {
  color: var(--cream-dim, #b0a898);
  font-style: italic;
  margin-right: 8px;
  white-space: nowrap;
}
.ps-level-readonly .ps-level-stress {
  display: inline-block;
  background: rgba(212, 168, 83, 0.12);
  color: var(--gold-light, #e8c878);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  margin-left: 4px;
  white-space: nowrap;
}
.ps-level-readonly-hint {
  display: block;
  margin-top: 4px;
  color: var(--cream-dark, #888070);
  font-size: 0.74rem;
  line-height: 1.4;
}

/* Empty-slot hint (shown in place of the old "Select Path" button) */
.ps-empty-hint {
  font-size: 0.85rem;
  color: var(--cream-dim, #b0a898);
  margin-top: 6px;
  font-style: italic;
}

/* Off-Path toggle row — player-controlled per canon SLHH 9 §568-575.
   Pill button matching the .sp-choice-btn aesthetic, with hint text
   beside it. Hint wraps naturally on narrow cards. */
.ps-offpath-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 8px;
}
.ps-offpath-btn {
  display: inline-block;
  background: var(--bg-darkest, #0f0f1a);
  color: var(--gold-light, #e8c878);
  border: 1px solid var(--gold-dim, #a07830);
  border-radius: 999px;
  padding: 5px 14px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition, 0.25s ease);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.ps-offpath-btn:hover {
  background: rgba(212, 168, 83, 0.15);
  border-color: var(--gold, #d4a853);
  color: var(--gold, #d4a853);
}
/* On-Path state — calm gold-on-dark */
.ps-offpath-btn.ps-offpath-off {
  /* default styling above is the On-Path resting state */
}
/* Off-Path state — warning red tint */
.ps-offpath-btn.ps-offpath-on {
  background: rgba(196, 64, 64, 0.12);
  color: #e08a8a;
  border-color: #c44040;
}
.ps-offpath-btn.ps-offpath-on:hover {
  background: rgba(196, 64, 64, 0.22);
  border-color: #e05050;
  color: #f0a0a0;
}
.ps-offpath-hint {
  font-size: 0.78rem;
  color: var(--cream-dark, #888070);
  flex: 1 1 250px;
  line-height: 1.4;
}
.ps-offpath-hint em { font-style: italic; }

/* Per-Tenet violation row — checkbox + numbered text + Violated badge */
.ps-tenet-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  margin: 4px 0;
  background: rgba(15, 15, 26, 0.35);
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.ps-tenet-row.ps-tenet-violated {
  background: rgba(196, 64, 64, 0.08);
  border-left: 2px solid rgba(196, 64, 64, 0.5);
}
.ps-tenet-violation-cb {
  margin-top: 4px;
  cursor: pointer;
  accent-color: var(--gold-dim, #a07830);
}
.ps-tenet-row.ps-tenet-violated .ps-tenet-violation-cb {
  accent-color: #c44040;
}
.ps-tenet-num {
  color: var(--gold-dim, #a07830);
  font-weight: 600;
  min-width: 18px;
}
.ps-tenet-text {
  flex: 1 1 auto;
  color: var(--cream, #e8e0d0);
}
.ps-tenet-violated-badge {
  display: inline-block;
  background: rgba(196, 64, 64, 0.18);
  color: #e08a8a;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 4px;
  white-space: nowrap;
  align-self: center;
}

/* ── Virtues block (per-Path slot, dropdown picker + active-bonus card) ──
   One slot at L2 (Conviction), a second at L3 (Embodiment). Each slot is
   a label + dropdown row; once a Virtue is chosen, the bonus card below
   surfaces its rule text. Off Path renders the bonus card greyed-out. */
.ps-virtues {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.ps-virtues .ps-section-label {
  font-size: 0.84rem;
  color: var(--cream);
  margin-bottom: 2px;
}
.ps-virtues .ps-section-label .hint {
  color: var(--cream-dim);
  font-size: 0.74rem;
  font-style: italic;
  margin-left: 4px;
}
.ps-virtue-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg-darkest, #1a1d2a);
  border: 1px solid var(--bg-mid, #2a2f3e);
  border-radius: 3px;
}
.ps-virtue-slot-label {
  font-family: var(--font-title);
  color: var(--gold-dim, #a07830);
  font-size: 0.72rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.ps-virtue-select {
  background: var(--bg-card);
  color: var(--cream);
  border: 1px solid var(--bg-mid);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.86rem;
  font-family: inherit;
  cursor: pointer;
}
.ps-virtue-select:hover { border-color: var(--gold-dim); }
.ps-virtue-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim); }

.ps-virtue-bonus {
  margin-top: 4px;
  padding: 6px 10px;
  background: linear-gradient(145deg, rgba(168, 224, 184, 0.06) 0%, rgba(168, 224, 184, 0.02) 100%);
  border: 1px solid rgba(168, 224, 184, 0.25);
  border-left: 3px solid #a8e0b8;
  border-radius: 3px;
}
.ps-virtue-bonus.ps-virtue-bonus-off {
  background: var(--bg-card);
  border-color: var(--bg-mid);
  border-left-color: var(--cream-dim);
  opacity: 0.55;
}
.ps-virtue-bonus-name {
  font-family: var(--font-title);
  color: #a8e0b8;
  font-size: 0.86rem;
  letter-spacing: 0.4px;
}
.ps-virtue-bonus.ps-virtue-bonus-off .ps-virtue-bonus-name {
  color: var(--cream-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(216, 128, 128, 0.5);
}
.ps-virtue-bonus-off-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  background: rgba(216, 128, 128, 0.18);
  color: #e79090;
  border: 1px solid rgba(231, 144, 144, 0.4);
  border-radius: 8px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-decoration: none;
}
.ps-virtue-bonus-rule {
  color: var(--cream);
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 2px;
}
.ps-virtue-bonus.ps-virtue-bonus-off .ps-virtue-bonus-rule { color: var(--cream-dim); }
.ps-virtue-bonus-empty {
  margin-top: 4px;
  padding: 4px 10px;
  font-size: 0.78rem;
  color: var(--cream-dim);
  font-style: italic;
}
.ps-virtue-locked-note,
.ps-virtue-reminder {
  font-size: 0.78rem;
  color: var(--cream-dim);
  font-style: italic;
  padding: 4px 0;
}

/* Spend CP cart — pending-state visual cue for sections that have banked
   work the player needs to attend to (currently the Paths section). */
.scp-section-pending {
  border-color: var(--gold-dim, #a07830) !important;
  box-shadow: 0 0 0 1px rgba(212, 168, 83, 0.25);
}
.scp-section-pending > .scp-summary {
  background: linear-gradient(90deg, rgba(212, 168, 83, 0.08) 0%, rgba(212, 168, 83, 0.02) 100%);
}
.scp-pending-badge {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 10px;
  background: rgba(212, 168, 83, 0.22);
  color: var(--gold-light, #e8c878);
  border: 1px solid var(--gold-dim, #a07830);
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

/* Per-Tier Path-pending banner — same shape and rhythm as the unresolved
   Quality / Fate milestone banners; rendered alongside them. Gold-tinted
   left border distinguishes it as a Tier-transition prompt. */
.mb-path-pending {
  border-color: var(--gold, #d4a853) !important;
  background: linear-gradient(90deg, rgba(212, 168, 83, 0.10) 0%, rgba(212, 168, 83, 0.03) 100%);
}
.mb-path-pending .mb-msg strong:first-child {
  color: var(--gold-light, #e8c878);
}
.mb-path-pending .mb-choose-path {
  /* Inherits the same .mb-actions button styling that .mb-choose-quality uses */
}

/* Path elections in the resolved-summary banner — tagged variant so they
   visually group apart from Quality / Fate elections. */
.mb-elected-path {
  color: var(--gold-light, #e8c878);
}

/* Modal — Path picker uses the same scrim as the Quality modal but adds
   group headers (Level Up Existing / Begin New Path — Foundation / etc.)
   and slightly different row layout. */
.milestone-modal .mm-group-head {
  font-size: 0.74rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold-dim, #a07830);
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(212, 168, 83, 0.2);
}
.milestone-modal .mm-group-head:first-child { margin-top: 0; }
.milestone-modal .mm-path-row {
  /* Inherits .mm-qual styling — same hover/selected states as Quality picker. */
}

/* Path picker modal (also reused by Compensator picker) */
.path-picker-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.path-picker-modal {
  background: linear-gradient(145deg, var(--bg-card, #2a2a48) 0%, var(--bg-mid, #232340) 100%);
  border: 1px solid var(--gold-dim, #a07830);
  border-radius: 10px;
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 28px 24px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.path-picker-modal h3 {
  font-family: var(--font-title, "Palatino Linotype", serif);
  color: var(--gold-light, #e8c878);
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.path-picker-intro {
  color: var(--cream-dim, #b0a898);
  font-size: 0.88rem;
  margin-bottom: 16px;
  font-style: italic;
}
.path-picker-empty {
  color: var(--cream-dark, #888070);
  font-size: 0.88rem;
  padding: 16px;
  background: var(--bg-darkest, #0f0f1a);
  border-radius: 4px;
  text-align: center;
  font-style: italic;
}
.path-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.path-picker-row {
  background: var(--bg-darkest, #0f0f1a);
  border: 1px solid var(--bg-mid, #232340);
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.path-picker-row:hover {
  background: rgba(212,168,83,0.06);
  border-color: var(--gold-dim, #a07830);
}
.path-picker-row.eligible {
  border-color: rgba(90, 170, 90, 0.5);
}
.path-picker-row.ineligible {
  opacity: 0.7;
}
.ppr-name {
  font-family: var(--font-title, "Palatino Linotype", serif);
  color: var(--gold, #d4a853);
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.ppr-prereq {
  color: var(--cream-dim, #b0a898);
  font-size: 0.84rem;
  font-style: italic;
}
.ppr-desc {
  color: var(--cream-dim, #b0a898);
  font-size: 0.82rem;
  margin-top: 6px;
  line-height: 1.4;
}
.path-picker-close {
  background: transparent;
  color: var(--cream-dim, #b0a898);
  border: 1px solid var(--bg-mid, #232340);
  border-radius: 4px;
  padding: 8px 18px;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  margin-right: 8px;
}
.path-picker-close:hover {
  color: var(--cream, #e8e0d0);
  border-color: var(--cream-dark, #888070);
}
.cmp-picker-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}


/* ─── Phase Spells-3e — Spell Tool single-line grid (Rome 2026-05-13) ──── */
.spell-known-grid {
  display: block;
}
.spell-known-row {
  display: grid;
  grid-template-columns:
    24px                /* radio */
    minmax(140px, 1.4fr) /* name */
    44px                /* Cx */
    52px                /* Flare */
    50px                /* Pool */
    42px                /* Thr */
    44px                /* Def */
    110px               /* Action */
    minmax(120px, 1fr)  /* Range · Target */
    minmax(110px, 1fr)  /* Duration */
    28px;               /* expand */
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(212,168,83,0.10);
  font-size: 0.85rem;
  white-space: nowrap;
}
.spell-known-row.armed {
  background: rgba(240,217,122,0.06);
}
.spell-known-row.spell-known-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dim, #c9b78f);
  border-bottom: 1px solid rgba(212,168,83,0.30);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.spell-known-row .spell-col-radio { display: flex; align-items: center; justify-content: center; }
.spell-known-row .spell-col-name { overflow: hidden; text-overflow: ellipsis; }
.spell-known-row .spell-col-cx,
.spell-known-row .spell-col-flare,
.spell-known-row .spell-col-pool,
.spell-known-row .spell-col-thr,
.spell-known-row .spell-col-def { text-align: center; font-variant-numeric: tabular-nums; }
.spell-known-row .spell-col-action,
.spell-known-row .spell-col-rt,
.spell-known-row .spell-col-dur { overflow: hidden; text-overflow: ellipsis; color: var(--cream-dim, #c9b78f); }
.spell-known-row .spell-col-expand { display: flex; align-items: center; justify-content: center; }
.spell-known-row .spell-expand-btn {
  background: transparent;
  color: var(--gold, #d4a853);
  border: 1px solid rgba(212,168,83,0.30);
  border-radius: 3px;
  cursor: pointer;
  padding: 0 4px;
  font-size: 0.85rem;
}
.spell-known-row .spell-expand-btn:hover { background: rgba(212,168,83,0.08); }
.spell-cell-base { color: var(--cream-dim, #c9b78f); text-decoration: line-through; opacity: 0.6; margin-right: 2px; }
.spell-cell-adj  { color: var(--gold-light, #f0d97a); }
/* Phase Spells-119 (Rome 2026-05-14): collapsed adj display.
   When a modifier fires, the row shows the final value only — colored
   green for a net beneficial change, red for a net detrimental one. The
   base→adj strike-through form (above) is retained for any legacy callers
   but the spell row no longer uses it. */
.spell-cell-adj-pos { color: var(--green-bright, #6fcf6f); font-weight: 600; }
.spell-cell-adj-neg { color: var(--red-bright,   #e07070); font-weight: 600; }
.spell-row-desc-wrap { grid-column: 1 / -1; }
.spell-row-desc {
  padding: 8px 12px 8px 36px;
  background: rgba(212,168,83,0.04);
  border-left: 2px solid rgba(212,168,83,0.30);
  margin: 4px 0 6px 0;
  font-size: 0.85rem;
  color: var(--cream, #e8d5a7);
  white-space: normal;
}
.spell-row-desc p { margin: 4px 0; }
.spell-row-desc .kw-tag {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 4px 2px 0;
  border-radius: 3px;
  background: rgba(212,168,83,0.10);
  font-size: 0.78rem;
}

/* Restore the snipped .cmp-picker-form rule below. */
.cmp-picker-form { display: block; }


/* ─── Phase Spells-3f — Collapsible school nesting (Rome 2026-05-13) ──── */
details.spell-school-block {
  margin: 6px 0 10px 0;
  border-left: 2px solid rgba(212,168,83,0.18);
  padding-left: 10px;
}
details.spell-school-block > summary.spell-school-head {
  cursor: pointer;
  list-style: none;             /* hide default disclosure */
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0 6px 0;
  font-size: 0.95rem;
  color: var(--cream, #e8d5a7);
  border-bottom: 1px solid rgba(212,168,83,0.12);
  margin-bottom: 4px;
  user-select: none;
}
details.spell-school-block > summary.spell-school-head::-webkit-details-marker { display: none; }
details.spell-school-block > summary.spell-school-head::before {
  content: '▸';
  display: inline-block;
  color: var(--gold, #d4a853);
  font-size: 0.78rem;
  width: 0.9em;
  transition: transform 0.12s ease;
}
details.spell-school-block[open] > summary.spell-school-head::before {
  transform: rotate(90deg);
}
details.spell-school-block > summary.spell-school-head > strong {
  color: var(--gold-light, #f0d97a);
}
details.spell-school-block > summary.spell-school-head > .hint {
  color: var(--cream-dim, #c9b78f);
  font-size: 0.78rem;
  font-style: italic;
}
details.spell-school-block > .spell-known-list {
  padding-left: 4px;
}


/* ─── Phase Spells-3g — Class card as <details> (Rome 2026-05-13) ──── */
details.magic-spell-class-card > summary.section-header {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
details.magic-spell-class-card > summary.section-header::-webkit-details-marker { display: none; }
details.magic-spell-class-card > summary.section-header::before {
  content: '▸';
  display: inline-block;
  color: var(--gold, #d4a853);
  font-size: 0.85rem;
  width: 0.95em;
  transition: transform 0.15s ease;
}
details.magic-spell-class-card[open] > summary.section-header::before {
  transform: rotate(90deg);
}


/* ─── Custom Modifiers (Modifiers tab) — Rome 2026-06-14; restyled 2026-06-23 ──── */
.custmod-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.custmod-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: rgba(212,168,83,0.05);
  border: 1px solid rgba(212,168,83,0.16);
  border-left: 3px solid var(--gold-dim, #c9a978);
  border-radius: 5px;
  font-size: 0.9rem;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.custmod-row:hover { background: rgba(212,168,83,0.09); border-color: rgba(212,168,83,0.30); }
.custmod-row.custmod-off { opacity: 0.45; border-left-color: rgba(150,150,150,0.4); }
.custmod-row input[type="checkbox"] { accent-color: var(--gold-dim, #c9a978); cursor: pointer; flex: 0 0 auto; }
.custmod-row .custmod-text { flex: 1 1 auto; line-height: 1.4; }
.custmod-row .custmod-text strong { color: var(--gold-light, #f0d97a); font-variant-numeric: tabular-nums; }
.custmod-row .custmod-text .hint { color: var(--cream-dim, #c9b78f); opacity: 0.85; }
/* Aura entries read in the same cyan language as the combat-card aura rows. */
.custmod-aura-el { color: #80c8ff !important; }
.custmod-aura-dmg {
  font-family: 'Courier New', monospace; font-size: 0.82rem;
  color: #80c8ff; background: rgba(128,200,255,0.10);
  border: 1px solid rgba(128,200,255,0.30); border-radius: 3px;
  padding: 0 5px; white-space: nowrap;
}
.custmod-remove {
  flex: 0 0 auto; background: none; border: none; color: var(--color-danger, #d66);
  cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 6px; border-radius: 3px;
  transition: background 0.12s ease;
}
.custmod-remove:hover { background: rgba(214,102,102,0.15); }
.custmod-add {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px;
  padding: 10px; border: 1px solid rgba(212,168,83,0.18);
  border-radius: 6px; background: rgba(0,0,0,0.12);
}
.custmod-add select,
.custmod-add input[type="number"],
.custmod-add input[type="text"] {
  font-size: 0.85rem; padding: 4px 7px;
  background: rgba(0,0,0,0.25); color: var(--cream, #e8d5a7);
  border: 1px solid rgba(212,168,83,0.25); border-radius: 4px;
}
.custmod-add select:focus, .custmod-add input:focus {
  outline: none; border-color: var(--gold-dim, #c9a978);
}
/* The dropdown text is light (cream), so the option list + optgroup HEADERS
   need a dark background or the group labels render light-on-light-grey and
   become unreadable. Headers: bold gold on dark; options: cream on dark.
   Rome 2026-06-23. */
.custmod-add select option {
  background-color: #2b2620; color: var(--cream, #e8d5a7); font-weight: 400;
}
.custmod-add select optgroup {
  background-color: #211d18; color: var(--gold-light, #f0d97a);
  font-weight: 700; font-style: normal;
}
.custmod-add .custmod-amt { width: 60px; text-align: center; }
.custmod-add .custmod-note { flex: 1 1 200px; min-width: 140px; }
.custmod-add .custmod-unit { font-size: 0.76rem; color: var(--cream-dim, #c9b78f); font-style: italic; }
.custmod-help { display: block; margin-top: 8px; font-size: 0.78rem; font-style: italic; color: var(--cream-dark, #8a7d5f); line-height: 1.45; }
.custmod-empty { margin-bottom: 10px; color: var(--cream-dim, #c9b78f); font-style: italic; }

/* Cast help note — how to cast (spells + rituals share the Flare circles). */
.spell-cast-note {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--cream-dark, #8a7d5f);
  line-height: 1.45;
}

/* ─── Cast card ritual-resource strip: TSA + Legend (Rome 2026-06-14) ──── */
.cast-resource-strip {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 2px 0 6px 0;
  font-size: 0.82rem;
}
.cast-resource-strip .cast-res { white-space: nowrap; color: var(--cream-dim, #c9b78f); }
.cast-resource-strip .cast-res strong { color: var(--gold-light, #f0d97a); font-variant-numeric: tabular-nums; }
.cast-resource-strip .cast-res .hint { color: var(--cream-dark, #8a7d5f); font-size: 0.92em; }

/* In the horizontal cast bar: push TSA/Legend to the far right and enlarge the
   values so they read at the same scale as the Flare circles. */
.spell-cast-bar .cast-resource-strip {
  margin-left: auto;
  align-items: center;
  gap: 20px;
  font-size: 0.95rem;
}
.spell-cast-bar .cast-resource-strip .cast-res strong { font-size: 1.5rem; line-height: 1; }


/* ─── Rituals card: grid rows + category nesting (Rome 2026-06-14) ──── */
.ritual-known-grid { display: block; }
.ritual-known-row {
  display: grid;
  grid-template-columns:
    24px                 /* radio */
    minmax(130px, 1.5fr) /* name */
    38px                 /* Cx */
    50px                 /* Flare */
    56px                 /* Pool */
    42px                 /* Thr */
    80px                 /* Gate */
    90px                 /* Time */
    minmax(90px, 1fr)    /* Duration */
    58px;                /* cast + expand */
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(212,168,83,0.10);
  font-size: 0.85rem;
  white-space: nowrap;
}
.ritual-known-row.armed { background: rgba(240,217,122,0.06); }
.ritual-known-row.ritual-known-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dim, #c9b78f);
  border-bottom: 1px solid rgba(212,168,83,0.30);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.ritual-known-row .ritual-col-radio { display: flex; align-items: center; justify-content: center; }
.ritual-known-row .ritual-col-expand { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.ritual-cast-btn {
  background: rgba(212,168,83,0.10);
  color: var(--gold-light, #f0d97a);
  border: 1px solid rgba(212,168,83,0.40);
  border-radius: 3px;
  cursor: pointer;
  padding: 0 5px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.ritual-cast-btn:hover { background: rgba(212,168,83,0.22); }
.ritual-known-row .ritual-col-name { overflow: hidden; text-overflow: ellipsis; }
.ritual-known-row .ritual-col-cx,
.ritual-known-row .ritual-col-flare,
.ritual-known-row .ritual-col-pool,
.ritual-known-row .ritual-col-thr { text-align: center; font-variant-numeric: tabular-nums; }
.ritual-known-row .ritual-col-gate,
.ritual-known-row .ritual-col-time,
.ritual-known-row .ritual-col-dur { overflow: hidden; text-overflow: ellipsis; color: var(--cream-dim, #c9b78f); }
.ritual-expand-btn {
  background: transparent;
  color: var(--gold, #d4a853);
  border: 1px solid rgba(212,168,83,0.30);
  border-radius: 3px;
  cursor: pointer;
  padding: 0 4px;
  font-size: 0.85rem;
}
.ritual-expand-btn:hover { background: rgba(212,168,83,0.08); }
.ritual-row-desc {
  padding: 8px 12px 8px 36px;
  background: rgba(212,168,83,0.04);
  border-left: 2px solid rgba(212,168,83,0.30);
  margin: 2px 0 6px 0;
  font-size: 0.85rem;
  color: var(--cream, #e8d5a7);
  white-space: normal;
}
.ritual-row-desc p { margin: 4px 0; }
/* Category headers sit one notch larger than their nested schools. */
details.spell-school-block.ritual-cat > summary.spell-school-head > strong { font-size: 1.02rem; }


/* ─── Invocations card grid (Gods tab) — Favor-gated, no dice (Rome 2026-06-14) ──── */
.invocation-known-grid { display: block; }
.invocation-known-row {
  display: grid;
  grid-template-columns:
    24px                 /* radio */
    minmax(140px, 1.6fr) /* name */
    92px                 /* class/tier */
    48px                 /* favor */
    104px                /* action */
    minmax(110px, 1fr)   /* range · target */
    minmax(90px, 1fr)    /* duration */
    28px;                /* expand */
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(212,168,83,0.10);
  font-size: 0.85rem;
  white-space: nowrap;
}
.invocation-known-row.armed { background: rgba(240,217,122,0.06); }
.invocation-known-row .inv-col-radio { display: flex; align-items: center; justify-content: center; }
/* Total-Favor cell becomes a cast affordance when an invocation is armed. */
.gods-favor-cell.gods-favor-castable {
  border: 1px solid var(--gold, #d4a853);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(212,168,83,0.25);
}
.gods-favor-cell.gods-favor-castable:hover { background: rgba(212,168,83,0.10); }
.gods-favor-cast-note {
  margin-top: 8px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--cream-dim, #c9b78f);
  line-height: 1.45;
}
/* Favor management buttons (Apply Queued Favor / New Chapter) — Rome 2026-06-15 */
.gods-favor-ctrls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.gods-favor-ctrl-btn {
  padding: 5px 12px;
  font-size: 0.82rem;
  border-radius: 5px;
  border: 1px solid rgba(212,168,83,0.40);
  background: rgba(212,168,83,0.10);
  color: var(--cream, #ece3cf);
  cursor: pointer;
}
.gods-favor-ctrl-btn:hover:not(:disabled) { background: rgba(212,168,83,0.20); }
.gods-favor-ctrl-btn:disabled { opacity: 0.5; cursor: default; }
.gods-favor-new-chapter {
  border-color: rgba(143,198,160,0.40);
  background: rgba(143,198,160,0.10);
}
.gods-favor-new-chapter:hover:not(:disabled) { background: rgba(143,198,160,0.20); }
.invocation-known-row.invocation-known-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dim, #c9b78f);
  border-bottom: 1px solid rgba(212,168,83,0.30);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.invocation-known-row .inv-col-name { overflow: hidden; text-overflow: ellipsis; }
.invocation-known-row .inv-col-favor { text-align: center; font-variant-numeric: tabular-nums; }
.invocation-known-row .inv-col-class,
.invocation-known-row .inv-col-action,
.invocation-known-row .inv-col-rt,
.invocation-known-row .inv-col-dur { overflow: hidden; text-overflow: ellipsis; color: var(--cream-dim, #c9b78f); }
.invocation-known-row .inv-col-expand { display: flex; align-items: center; justify-content: center; }


/* ─── Phase Spells-3h — Learn Spell card layout (Rome 2026-05-13) ──── */
.spendcp-spells-banner {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(212,168,83,0.06);
  border-left: 3px solid var(--gold-dim, #a87f3a);
  border-radius: 3px;
  line-height: 1.5;
  font-size: 0.88rem;
}
.spendcp-spells-toggles {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(212,168,83,0.04);
  border-radius: 3px;
}
.spendcp-spells-toggles .spendcp-spells-row-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cream-dim, #c9b78f);
  flex-basis: 100%;
  margin-bottom: 4px;
}
.spendcp-spells-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.spendcp-spells-toggle .hint {
  color: var(--cream-dim, #c9b78f);
  font-style: italic;
  font-size: 0.78rem;
}
.spendcp-spells-toggle .spendcp-spells-auto {
  color: var(--gold-light, #f0d97a);
  font-size: 0.72rem;
}
.spendcp-spells-extra {
  flex-basis: 100%;
  margin-top: 4px;
}
.spendcp-spells-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  grid-column: 1 / -1;
}
.spendcp-spells-row .spendcp-spells-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cream-dim, #c9b78f);
  min-width: 70px;
}
.spendcp-spells-cascade {
  gap: 8px;
}
.spendcp-spells-select {
  flex: 1 1 0;
  min-width: 120px;
  padding: 4px 8px;
  background: var(--bg-card, #1a1815);
  color: var(--cream, #e8d5a7);
  border: 1px solid var(--gold-dim, #a87f3a);
  border-radius: 3px;
}
.spendcp-spells-select.spendcp-spells-spell-select { flex: 2 1 0; }
.spendcp-spells-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  cursor: pointer;
}

/* Spell description block — loads when a spell is in the dropdown */
.spendcp-spells-desc {
  padding: 12px 14px;
  grid-column: 1 / -1;
  margin: 8px 0 12px 0;
  background: rgba(212,168,83,0.05);
  border: 1px solid rgba(212,168,83,0.20);
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.55;
}
.spendcp-spells-desc-empty {
  color: var(--cream-dim, #c9b78f);
  font-style: italic;
}
.spendcp-spells-desc-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212,168,83,0.18);
}
.spendcp-spells-desc-name {
  color: var(--gold-light, #f0d97a);
  font-size: 1rem;
}
.spendcp-spells-desc-meta {
  color: var(--cream-dim, #c9b78f);
  font-size: 0.82rem;
}
.spendcp-spells-desc-check,
.spendcp-spells-desc-kw {
  margin: 4px 0;
  color: var(--cream, #e8d5a7);
}
.spendcp-spells-desc-kw .kw-tag {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 4px 2px 0;
  border-radius: 3px;
  background: rgba(212,168,83,0.10);
  font-size: 0.78rem;
}
.spendcp-spells-desc-body {
  margin-top: 6px;
  color: var(--cream, #e8d5a7);
  white-space: normal;
}


/* Phase Spells-3h follow-up — additional full-width spans for Learn Spell card */
.spendcp-spells-empty,
.spendcp-spells-cost,
.spendcp-spells-check,
.spendcp-spells-add-row { grid-column: 1 / -1; }


/* Phase Spells-3h fix — wrap entire Learn Spell content in one grid cell
   so the parent scp-body grid doesn't fragment rows into columns. */
.spendcp-spells-wrapper {
  grid-column: 1 / -1;
  display: block;
}


/* ─── Phase Spells-3j — Cast circles single-column (Rome 2026-05-13) ──── */
/* Previously the 6 Beacon cast-circles were laid out as a 2×3 grid which
   visually overlapped the per-row expand chevrons on the spell list to the
   left. Stack them vertically in one narrow column on the right side of
   the spell-tool-layout. */
.spell-tool-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.spell-tool-main {
  flex: 1 1 auto;
  min-width: 0;
}
.spell-tool-cast {
  flex: 0 0 auto;
  width: 110px;
  position: sticky;
  top: calc(var(--banner-h, 0px) + 16px);
  padding: 8px;
  background: rgba(212,168,83,0.04);
  border: 1px solid rgba(212,168,83,0.20);
  border-radius: 4px;
}
.spell-tool-cast .spell-cast-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  text-align: center;
  color: var(--gold-light, #f0d97a);
  margin: 0 0 8px 0;
}
.cast-circles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.cast-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  border: 2px solid;
  background: rgba(0,0,0,0.30);
  cursor: default;
  user-select: none;
}
.cast-circle.cast-circle-castable { cursor: pointer; }
.cast-circle.cast-circle-castable:hover { background: rgba(212,168,83,0.10); }
.cast-circle.cast-circle-red    { color: #c44040; border-color: #c44040; }
.cast-circle.cast-circle-orange { color: #d49c5a; border-color: #d49c5a; }
.cast-circle.cast-circle-yellow { color: #d4c45a; border-color: #d4c45a; }
.cast-circle.cast-circle-green  { color: #5ac46a; border-color: #5ac46a; }
.cast-circle.cast-circle-blue   { color: #5a9cd4; border-color: #5a9cd4; }
.cast-circle.cast-circle-purple { color: #a85ad4; border-color: #a85ad4; }
.cast-circle.cast-circle-surging { box-shadow: 0 0 6px currentColor; }
.cast-circle .cast-cap-label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
  opacity: 0.7;
}


/* Cast circle: Gate-closed state (Rome 2026-05-13) — Beacons whose Gate
   isn't open are visually muted and non-castable, even if the Beacon has
   Flare in it. */
.cast-circle.cast-circle-gate-closed {
  opacity: 0.32;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.cast-circle.cast-circle-gate-closed::after {
  content: '🔒';
  position: absolute;
  font-size: 0.7rem;
  margin-left: 38px;
  margin-top: -56px;
}
.cast-circle { position: relative; }


/* ─── Phase Spells-A2 — Cast Modifier toggles panel (Rome 2026-05-13) ──── */
.magic-spell-toggles-card { margin-bottom: 12px; }
.magic-spell-toggles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 8px 12px;
}
.magic-spell-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(212,168,83,0.04);
  border: 1px solid rgba(212,168,83,0.18);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.magic-spell-toggle:hover { background: rgba(212,168,83,0.10); }
.magic-spell-toggle input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--gold, #d4a853);
}
.magic-spell-toggle .mst-text strong { color: var(--cream, #e8d5a7); }
.magic-spell-toggle .mst-text .hint { color: var(--cream-dim, #c9b78f); font-style: italic; font-size: 0.78rem; }
.magic-spell-toggle .mst-sub { color: var(--cream-dim, #c9b78f); font-size: 0.82rem; margin-top: 2px; }


/* ─── Phase Spells-110 — Sticky Matrix/Rod horizontal strip (Rome 2026-05-13) ──
   Replaces the two stacked vertical Matrix + Rod cards with a single
   compact horizontal strip pinned to the top of the Spells tab. Matrix and
   Rod (when trained) sit side-by-side as lanes within the strip. Chips
   replace the vertical row list so dozens of woven copies stay scannable. */
.magic-spell-matrix-strip {
  position: sticky;
  top: var(--banner-h, 0px);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 8px;
  margin: 0 0 10px 0;
  background: var(--bg-card, #1a1815);
  border: 1px solid rgba(212,168,83,0.30);
  border-radius: 4px;
  /* Subtle shadow when scrolled so the strip lifts above the spell list. */
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.magic-spell-matrix-strip .matrix-lane {
  flex: 1 1 280px;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(212,168,83,0.04);
  border: 1px solid rgba(212,168,83,0.20);
  border-radius: 3px;
}
.magic-spell-matrix-strip .matrix-lane.matrix-lane-rod {
  border-left: 3px solid #5ac46a;
}
.magic-spell-matrix-strip .matrix-lane.over .matrix-lane-cap strong {
  color: var(--red, #c44040);
}
.matrix-lane-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 6px 2px 0;
  border-right: 1px solid rgba(212,168,83,0.15);
  margin-right: 4px;
  min-width: 88px;
}
.matrix-lane-title {
  font-family: var(--font-title, serif);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gold-light, #f0d97a);
  cursor: help;
  text-align: center;
  line-height: 1.15;
}
.matrix-lane-cap {
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--cream-dim, #c9b78f);
}
.matrix-lane-cap strong {
  color: var(--gold-light, #f0d97a);
  font-size: 1.05rem;
}
.matrix-lane-cap .matrix-lane-sep { padding: 0 2px; opacity: 0.6; }
.matrix-lane-cap-total { color: var(--cream-dim, #c9b78f); }
.matrix-lane-chips {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-width: 0;
}
.matrix-lane-empty {
  flex: 1 1 auto;
  color: var(--cream-dim, #c9b78f);
  font-size: 0.8rem;
  padding: 2px 4px;
}
.matrix-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  background: rgba(212,168,83,0.08);
  border: 1px solid rgba(212,168,83,0.30);
  border-radius: 12px;
  font-size: 0.78rem;
  line-height: 1.2;
  max-width: 100%;
}
.matrix-lane-rod .matrix-chip {
  background: rgba(90,196,106,0.08);
  border-color: rgba(90,196,106,0.30);
}
.matrix-chip-name {
  color: var(--cream, #e8d5a7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.matrix-chip-flare {
  color: var(--gold-light, #f0d97a);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  opacity: 0.8;
}
.matrix-lane-rod .matrix-chip-flare { color: #5ac46a; }
.matrix-chip-x {
  background: transparent;
  color: var(--red, #c44040);
  border: none;
  cursor: pointer;
  padding: 0 4px;
  font-size: 0.95rem;
  line-height: 1;
}
.matrix-chip-x:hover { color: #ff6464; }

/* Legacy card classes — preserved as no-op selectors. The old renderer was
   retired but other code may still touch these names defensively. */
.magic-spell-matrix-card { margin-bottom: 0; }

/* ─── Phase Spells-111 — Sticky top bar (Cast + Matrix/Rod) (Rome 2026-05-13) ──
   The Cast card and the Matrix/Rod strip sit together in a single sticky
   container at the top of the Spells tab. Cast goes first; Matrix/Rod
   (when present) sits below it. The container pins to the viewport so
   both controls stay reachable while scrolling the spell list. */
.spells-top-bar {
  position: sticky;
  top: var(--banner-h, 0px);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px 0;
  padding: 6px 8px;
  background: var(--bg-card, #1a1815);
  border: 1px solid rgba(212,168,83,0.30);
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}
/* Matrix strip drops its own sticky when nested in the top bar — the
   parent does the pinning, and stacked stickies just fight each other. */
.spells-top-bar .magic-spell-matrix-strip {
  position: static;
  z-index: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Cast card as a horizontal bar (when lifted into the top bar). The
   .spell-tool-cast styles below still apply for the legacy two-column
   fallback; this variant flips circles to a row and tightens spacing. */
.spell-tool-cast.spell-cast-bar {
  position: static;          /* parent does the sticky */
  top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: rgba(212,168,83,0.04);
  border: 1px solid rgba(212,168,83,0.20);
  border-radius: 3px;
}
/* Larger title + larger, centered circles to use the wide cast bar's real
   estate (Rome 2026-06-17). */
.spell-tool-cast.spell-cast-bar .spell-cast-title {
  flex: 0 0 auto;
  margin: 0 0 4px 0;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-light, #f0d97a);
  text-align: center;
  line-height: 1.1;
}
.spell-tool-cast.spell-cast-bar .cast-circles {
  flex: 0 0 auto;
  flex-direction: row;       /* row layout — six circles inline */
  gap: 18px;
  align-items: center;
  justify-content: center;   /* center the circle row across the wide bar */
}
.spell-tool-cast.spell-cast-bar .cast-circle {
  width: 78px;
  height: 78px;
  font-size: 1.4rem;
}
.spell-tool-cast.spell-cast-bar .cast-circle .cc-amount { font-size: 1.75rem; }
.spell-tool-cast.spell-cast-bar .cast-circle .cc-label {
  font-size: 0.62rem;
}
.spell-tool-cast.spell-cast-bar .spell-cast-status {
  flex: 1 1 auto;
  font-size: 0.78rem;
  color: var(--cream-dim, #c9b78f);
  padding-left: 10px;
  border-left: 1px solid rgba(212,168,83,0.15);
  text-align: left;
  min-width: 0;
}

/* When viewport is narrow, allow the cast bar to wrap (status drops below). */
@media (max-width: 720px) {
  .spell-tool-cast.spell-cast-bar { flex-wrap: wrap; }
  .spell-tool-cast.spell-cast-bar .spell-cast-status {
    flex: 1 1 100%;
    border-left: none;
    border-top: 1px solid rgba(212,168,83,0.15);
    padding: 4px 0 0 0;
    margin-top: 4px;
  }
}

/* ─── Phase Spells-117 — Wud Intonations card (Rome 2026-05-13) ─────────
   Conditional card surfacing Lexicon of Power (Core) and Shaping Words
   (Intermediate) as dropdown selectors. Renders only when Wud Discipline
   is trained. Each row has a label, a dropdown, an optional sub-stepper
   (Fer Burst Degree), and a description line that highlights when the
   selection actually pushes a dice delta. */
.magic-wud-intonations-card {
  margin-bottom: 10px;
}
.magic-wud-intonations-card .wud-intonation-row {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(110px, 200px) 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(212,168,83,0.10);
}
.magic-wud-intonations-card .wud-intonation-row:last-child {
  border-bottom: none;
}
.magic-wud-intonations-card .wud-intonation-label {
  font-family: var(--font-title, serif);
  color: var(--gold-light, #f0d97a);
  font-size: 0.9rem;
}
.magic-wud-intonations-card .wud-intonation-sublabel {
  font-size: 0.78rem;
  color: var(--cream-dim, #c9b78f);
  grid-column: 1;
  text-align: right;
}
.magic-wud-intonations-card .wud-intonation-select {
  background: var(--bg-card, #1a1815);
  color: var(--cream, #e8d5a7);
  border: 1px solid rgba(212,168,83,0.30);
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 0.85rem;
}
.magic-wud-intonations-card .wud-intonation-select:hover {
  border-color: var(--gold, #d4a853);
}
.magic-wud-intonations-card .wud-intonation-desc {
  font-size: 0.8rem;
  color: var(--cream-dim, #c9b78f);
  line-height: 1.3;
  min-width: 0;
}
.magic-wud-intonations-card .wud-intonation-desc.wud-intonation-active {
  color: var(--gold-light, #f0d97a);
  font-weight: 500;
}
/* When Fer sub-stepper is showing, allow the row to expand to a second line. */
.magic-wud-intonations-card .wud-intonation-row:has(.wud-intonation-sub) {
  grid-template-columns: minmax(160px, auto) minmax(110px, 200px) auto minmax(160px, 200px) 1fr;
}

/* Per-row Matrix checkbox column — appears only when Inner Pillar trained.
   Inserted between Duration and the expand chevron.
   Phase Spells-109 (Rome 2026-05-13): multi-copy support — checkbox array
   that wraps when many copies are woven. Each spell can be placed in the
   Matrix and Rod multiple times (Inner Pillar spells often need two rows). */
.spell-known-row .spell-col-matrix,
.spell-known-row .spell-col-rod {
  display: flex;
  align-items: center;
  justify-content: center;
}
.spell-col-matrix-multi {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  justify-content: center;
  max-width: 56px;
}
.spell-matrix-checkbox {
  accent-color: var(--gold, #d4a853);
  cursor: pointer;
  flex: 0 0 auto;
}
/* Rod checkboxes get a different accent so the column reads as distinct */
.spell-col-rod .spell-matrix-checkbox {
  accent-color: #5ac46a;
}

/* Grid template widens for Inner Pillar layout — JS-side header already
   adds the extra <span class="spell-col-matrix"> and optional
   <span class="spell-col-rod">. CSS opts in via :has so layouts without
   Matrix preserve existing widths. Row height auto-grows so multi-copy
   checkbox wraps push the row taller as needed. */
.spell-known-row:has(.spell-col-matrix) {
  grid-template-columns:
    24px                /* radio */
    minmax(140px, 1.4fr) /* name */
    44px                /* Cx */
    52px                /* Flare */
    50px                /* Pool */
    42px                /* Thr */
    44px                /* Def */
    110px               /* Action */
    minmax(120px, 1fr)  /* Range · Target */
    minmax(110px, 1fr)  /* Duration */
    60px                /* Matrix */
    28px;               /* expand */
  min-height: 28px;
  align-items: center;
}
.spell-known-row:has(.spell-col-rod) {
  grid-template-columns:
    24px                /* radio */
    minmax(140px, 1.4fr) /* name */
    44px                /* Cx */
    52px                /* Flare */
    50px                /* Pool */
    42px                /* Thr */
    44px                /* Def */
    110px               /* Action */
    minmax(120px, 1fr)  /* Range · Target */
    minmax(110px, 1fr)  /* Duration */
    60px                /* Matrix */
    60px                /* Rod */
    28px;               /* expand */
}


/* ─── Phase Spells-108 — Per-row Matrix selector + Rod card (Rome 2026-05-13) ──── */
.spell-matrix-select {
  font-size: 0.72rem;
  padding: 1px 2px;
  background: var(--bg-card, #1a1815);
  color: var(--gold-light, #f0d97a);
  border: 1px solid rgba(212,168,83,0.30);
  border-radius: 3px;
  cursor: pointer;
  max-width: 60px;
}
.spell-matrix-select:hover { border-color: var(--gold, #d4a853); }

/* Rod of Channeling card distinct color so it reads as separate from Main Matrix */
.magic-spell-matrix-card.matrix-kind-rod { border-left: 3px solid #5ac46a; }
.magic-spell-matrix-card.matrix-kind-rod .smsum-cell-remaining .smsum-val { color: #5ac46a; }

/* Phase Spells-120 (Rome 2026-05-14): Sustained Spells feature */
/* Duration column — Sustain spells show a checkbox instead of "Sustain (1AP)" text */
.spell-col-dur-sustain { padding-left: 4px; }
.spell-dur-sustain-label {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; user-select: none;
}
.spell-dur-sustain-checkbox { margin: 0; cursor: pointer; }
.spell-dur-sustain-text {
  font-size: 0.85rem;
  color: var(--cream, #e8d5a7);
}
.spell-dur-sustain-checkbox:checked + .spell-dur-sustain-text {
  color: var(--gold-light, #f0d97a);
  font-weight: 500;
}

/* Sustained Spells card — sits above the main spell list when sustains active */
.magic-sustained-card { margin-bottom: 12px; }
.magic-sustained-banner {
  padding: 8px 12px;
  background: rgba(212,168,83,0.06);
  border-left: 2px solid var(--gold, #d4a853);
  margin: 4px 0 10px 0;
  font-size: 0.85rem;
  color: var(--cream, #e8d5a7);
  border-radius: 0 4px 4px 0;
}
.magic-sustained-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.magic-sustained-subcard {
  background: rgba(212,168,83,0.04);
  border: 1px solid rgba(212,168,83,0.25);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msc-header { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.msc-name { color: var(--gold-light, #f0d97a); }
.msc-class { font-size: 0.8rem; color: var(--cream-dim, #c9b78f); }
.msc-ap-cost {
  margin-left: auto;
  font-size: 0.78rem;
  background: rgba(224,112,112,0.15);
  border: 1px solid rgba(224,112,112,0.35);
  color: #e07070;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.msc-drop-btn {
  background: transparent;
  border: 1px solid rgba(224,112,112,0.4);
  color: #e07070;
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
}
.msc-drop-btn:hover { background: rgba(224,112,112,0.15); }
.msc-stats {
  font-size: 0.82rem;
  color: var(--cream, #e8d5a7);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.msc-stats em { font-style: normal; color: var(--cream-dim, #c9b78f); margin-right: 2px; }
/* Spell tool — scene filter bar above the known-spells list. The
   <select> lets the player narrow the list to spells with rules for a
   specific scene type (Combat / Chase / Social / Infiltration /
   Exploration / Travel). Phase Spells-Scenes (Rome 2026-05-24). */
.spell-scene-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 12px 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  font-size: 0.88rem;
}
.spell-scene-filter-label {
  color: var(--cream-dim, #c9b78f);
  font-weight: 500;
}
.spell-scene-filter-select {
  background: rgba(0, 0, 0, 0.4);
  color: var(--cream, #e8d5a7);
  border: 1px solid rgba(232, 213, 167, 0.3);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.88rem;
  cursor: pointer;
}
.spell-scene-filter-hint {
  color: var(--cream-dim, #c9b78f);
  font-size: 0.82rem;
  font-style: italic;
}
/* Expand all / Collapse all toggle buttons on the spell card. Sit at the
   right end of the scene-filter bar. Phase Spells-ExpandAll, Rome 2026-05-24. */
.spell-bulk-toggle {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.spell-bulk-toggle-btn {
  background: rgba(0, 0, 0, 0.4);
  color: var(--cream, #e8d5a7);
  border: 1px solid rgba(232, 213, 167, 0.3);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.spell-bulk-toggle-btn:hover {
  background: rgba(232, 213, 167, 0.14);
  border-color: var(--cream, #e8d5a7);
}
.spell-bulk-toggle-btn:active {
  background: rgba(232, 213, 167, 0.22);
}
/* Scene-use block in each expanded spell description. Only renders when
   the spell has at least one non-combat scene entry. */
.spell-row-desc-scenes {
  margin-top: 8px;
  margin-bottom: 4px;
}
.spell-row-desc-scenes-list {
  margin: 0 0 4px 16px;
  padding-left: 0;
  list-style: disc;
}
.spell-row-desc-scenes-list li {
  margin: 4px 0;
  line-height: 1.45;
}
.spell-scene-primary {
  color: var(--gold, #f5d791);
  font-size: 0.82rem;
  font-style: italic;
}
/* Scene Content sub-block under "Scene Use" — surfaces SC_* rationale
   (Stunt / Mod / Event / Narrative roles per scene). Phase Spells-SCExpand
   (Rome 2026-05-24). Slightly indented and muted so the SA notes
   above stay the primary read. */
.spell-row-desc-sc {
  margin: 6px 0 4px 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.12);
  border-left: 2px solid rgba(245, 215, 145, 0.25);
  border-radius: 0 4px 4px 0;
}
.spell-row-desc-sc em {
  color: var(--cream-dim, #c9b78f);
}
.spell-row-desc-sc-list {
  margin: 4px 0 0 16px;
  padding-left: 0;
  list-style: square;
}
.spell-row-desc-sc-list li {
  margin: 3px 0;
  line-height: 1.4;
  font-size: 0.86rem;
}

/* Per-entry Mysticaria rules text under each row in the magic-item
   detail. The Rules array carries the canon's mechanical description
   ("+5d to all Action Checks on one named Skill" / "Long Flight —
   1 Strain/cumulative Segment …"). Phase Magic-Modal, Rome 2026-05-24. */
.gp-magic-row-rules {
  margin: 2px 0 6px 28px;
  padding-left: 6px;
  border-left: 2px solid rgba(245, 215, 145, 0.25);
}
.gp-magic-row-rule {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--cream, #e8d5a7);
  opacity: 0.92;
  margin: 2px 0;
}

/* "Needs a target" flag — a parametric Power (its Mods reference $AMOUNT)
   contributes nothing until the player picks a Defense/Statistic/Skill.
   Amber so it reads as "incomplete, fix me," not an error (Rome 2026-06-22). */
.gp-magic-row.needs-target {
  border-left: 2px solid rgba(232, 180, 90, 0.7);
  background: rgba(232, 180, 90, 0.06);
}
.gp-magic-row-warn {
  margin-left: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #e8b45a;
  white-space: nowrap;
}
/* Editor mirror — same amber language inside the Mysticaria editor. */
.me-row-amount-edit.needs-target {
  border-left: 2px solid rgba(232, 180, 90, 0.7);
  padding-left: 6px;
}
.me-needs-target {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #e8b45a;
}

/* Magic item name click affordance (Phase Magic-Modal, Rome 2026-05-24).
   When the item is magical, the name is clickable and opens a detail
   modal. Dotted underline + hover lift announces interactivity without
   competing with the ✎ edit button next to it. */
.gp-item-name-magic {
  cursor: pointer;
  border-bottom: 1px dotted var(--gold-dim, #c9a978);
  transition: color 0.12s ease, background 0.12s ease;
}
.gp-item-name-magic:hover {
  color: var(--gold, #f5d791);
  background: rgba(245, 215, 145, 0.08);
  border-bottom-color: transparent;
}
/* Modal that hosts the magic-item card. Uses the same overlay/box
   chassis as the Edit Item modal. The body re-uses .gp-item-magic-display
   already styled elsewhere for the inline Magic ▾ expansion. */
.gp-magic-modal {
  max-width: 720px;
  width: calc(100% - 32px);
}
.gp-magic-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(232, 213, 167, 0.18);
}
.gp-magic-modal-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--gold, #f5d791);
}
.gp-magic-modal-close {
  background: transparent;
  border: 1px solid rgba(232, 213, 167, 0.3);
  color: var(--cream, #e8d5a7);
  width: 32px; height: 32px;
  border-radius: 4px;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.gp-magic-modal-close:hover {
  background: rgba(232, 213, 167, 0.12);
  border-color: var(--cream, #e8d5a7);
}
.gp-magic-modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* Click-to-copy dice pool macro (Phase Dice-Pill, Rome 2026-05-24).
   Any element with .dice-pool-pill is wired to copy `!dc <pool> <threshold> 0`
   to the clipboard on click. Style is subtle by default so it doesn't
   compete with adjacent labels — a dotted underline announces clickability,
   and the hover state lifts the pill into a focusable pill shape. */
.dice-pool-pill {
  cursor: pointer;
  border-bottom: 1px dotted var(--cream-dim, #c9b78f);
  padding: 0 2px;
  border-radius: 3px;
  transition: background 0.12s ease, color 0.12s ease;
}
.dice-pool-pill:hover {
  background: rgba(232, 213, 167, 0.12);
  color: var(--cream, #e8d5a7);
  border-bottom-color: transparent;
}
.dice-pool-pill:active {
  background: rgba(232, 213, 167, 0.22);
}
/* Floating confirmation toast — shows for ~1.6s after a successful copy.
   Single shared element (id=dice-pool-toast). The animation pulses it in
   and out via opacity + transform; the keyframes own the lifecycle so no
   JS timer is needed to clear it. */
.dice-pool-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 9999;
  padding: 8px 14px;
  background: rgba(20, 18, 14, 0.92);
  color: var(--cream, #e8d5a7);
  font-size: 0.88rem;
  font-family: monospace;
  border: 1px solid var(--cream-dim, #c9b78f);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dice-pool-toast-show {
  animation: dice-pool-toast-pulse 1.6s ease-out forwards;
}
@keyframes dice-pool-toast-pulse {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0);  }
  78%  { opacity: 1; transform: translateX(-50%) translateY(0);  }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}
/* Spell-description block on each Sustained sub-card. Players read this
   to see what the sustained spell actually does. Phase Spells-156 (Rome
   2026-05-24). */
.msc-description {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cream, #e8d5a7);
  background: rgba(0,0,0,0.12);
  border-radius: 4px;
  padding: 6px 8px;
}
.msc-description strong { color: var(--cream-dim, #c9b78f); margin-right: 4px; }
.msc-result {
  background: rgba(0,0,0,0.18);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.82rem;
}
.msc-result-row { line-height: 1.4; }
.msc-result-row strong { color: var(--cream-dim, #c9b78f); margin-right: 4px; }
.msc-effect-pos { color: var(--green-bright, #6fcf6f); font-weight: 500; }
.msc-effect-neg { color: var(--red-bright,   #e07070); font-weight: 500; }
.msc-raw {
  color: var(--cream-dim, #c9b78f);
  font-family: monospace;
  font-size: 0.78rem;
}
.msc-controls {
  display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap;
}
.msc-auto-btn {
  background: rgba(212,168,83,0.15);
  border: 1px solid rgba(212,168,83,0.4);
  color: var(--gold-light, #f0d97a);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.82rem;
}
.msc-auto-btn:hover { background: rgba(212,168,83,0.25); }
.msc-manual {
  font-size: 0.82rem;
  color: var(--cream-dim, #c9b78f);
  display: inline-flex; align-items: center; gap: 4px;
}
.msc-hits-input {
  width: 50px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(212,168,83,0.3);
  color: var(--cream, #e8d5a7);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.85rem;
}
.msc-delta {
  font-size: 0.78rem;
  color: var(--cream, #e8d5a7);
  padding-top: 4px;
  border-top: 1px dashed rgba(212,168,83,0.15);
}
.msc-delta strong { color: var(--gold-light, #f0d97a); }
.msc-delta-empty { font-style: italic; color: var(--cream-dim, #c9b78f); }

/* Quick-Stats AP cell — Suspended row */
.qs-pool-suspended {
  display: flex;
  gap: 4px;
  align-items: baseline;
  font-size: 0.7rem;
  margin-top: 1px;
  color: var(--red-bright, #e07070);
}
.qs-pool-suspended-lbl {
  font-size: 0.65rem;
  color: var(--cream-dim, #c9b78f);
}
.qs-pool-suspended-val { font-weight: 500; }
.qs-pool-suspended-avail {
  color: var(--cream, #e8d5a7);
  margin-left: auto;
  font-size: 0.7rem;
}
.qs-cell.qs-pool-suspended-active {
  border-color: rgba(224,112,112,0.3);
}

/* Phase Spells-125 (Rome 2026-05-14): Armor of Life feature */
/* Sustained-card armor block */
.msc-armor-overlay {
  background: rgba(108,168,108,0.07);
  border: 1px solid rgba(108,168,108,0.25);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.82rem;
}
.msc-armor-overlay strong { color: var(--green-bright, #6fcf6f); }
.msc-armor-stats {
  font-size: 0.78rem;
  color: var(--cream, #e8d5a7);
  margin-top: 2px;
}
.msc-armor-stats em { font-style: normal; color: var(--cream-dim, #c9b78f); margin-right: 2px; }
.msc-shifted-pill {
  font-size: 0.7rem;
  background: rgba(212,168,83,0.18);
  border: 1px solid rgba(212,168,83,0.4);
  color: var(--gold-light, #f0d97a);
  padding: 0 5px;
  border-radius: 3px;
  margin-left: 2px;
}

/* Ability picker */
.msc-abilities-block {
  border-top: 1px dashed rgba(212,168,83,0.15);
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msc-abilities-hdr { font-size: 0.82rem; color: var(--cream, #e8d5a7); }
.msc-abilities-hdr strong { color: var(--gold-light, #f0d97a); }
.msc-ability-row {
  display: flex;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.10);
  align-items: flex-start;
  cursor: pointer;
  font-size: 0.82rem;
  border: 1px solid transparent;
}
.msc-ability-row:hover { background: rgba(212,168,83,0.06); }
.msc-ability-row.msc-ability-picked {
  background: rgba(108,168,108,0.10);
  border-color: rgba(108,168,108,0.35);
}
.msc-ability-row.msc-ability-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.msc-ability-cb { margin-top: 2px; cursor: pointer; }
.msc-ability-text { flex: 1; }
.msc-ability-text strong { color: var(--cream, #e8d5a7); }
.msc-ability-picked .msc-ability-text strong { color: var(--green-bright, #6fcf6f); }
.msc-ability-tag {
  font-size: 0.72rem;
  background: rgba(212,168,83,0.15);
  border: 1px solid rgba(212,168,83,0.35);
  color: var(--gold-light, #f0d97a);
  padding: 0 5px;
  border-radius: 3px;
  margin-left: 4px;
  font-weight: 500;
}
.msc-ability-desc {
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--cream-dim, #c9b78f);
  line-height: 1.35;
}

/* Combat-tab spell-armor overlay row */
.combat-spell-armor-overlay-wrap {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.combat-spell-armor-overlay {
  background: rgba(108,168,108,0.08);
  border: 1px solid rgba(108,168,108,0.35);
  border-left: 3px solid var(--green-bright, #6fcf6f);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
}
.csao-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.csao-badge {
  background: rgba(108,168,108,0.25);
  color: var(--green-bright, #6fcf6f);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.csao-head strong { color: var(--green-bright, #6fcf6f); }
.csao-stats { margin-top: 3px; font-size: 0.8rem; color: var(--cream, #e8d5a7); }
.csao-stats em { font-style: normal; color: var(--cream-dim, #c9b78f); margin-right: 2px; }
.csao-shift {
  font-size: 0.7rem;
  color: var(--gold-light, #f0d97a);
  margin-left: 2px;
}
.csao-note {
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--cream-dim, #c9b78f);
  line-height: 1.35;
}

/* Phase Spells-126 (Rome 2026-05-14): Armor of Life follow-ups */
.csao-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.csao-bypass {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--cream-dim, #c9b78f);
  cursor: pointer;
  user-select: none;
}
.csao-bypass input { margin: 0; cursor: pointer; }
.combat-spell-armor-overlay.bypassed {
  opacity: 0.45;
  border-left-color: var(--cream-dim, #c9b78f);
}
.combat-spell-armor-overlay.bypassed .csao-badge {
  background: rgba(150,150,150,0.18);
  color: var(--cream-dim, #c9b78f);
}

/* Phase Spells-131 (Rome 2026-05-14): Evergreen feature */
.msc-bod-toggle {
  display: flex; flex-wrap: wrap;
  gap: 6px; align-items: center;
  padding-top: 4px; border-top: 1px dashed rgba(212,168,83,0.15);
  font-size: 0.78rem;
}
.msc-bod-label { color: var(--gold-light, #f0d97a); font-weight: 500; margin-right: 4px; }
.msc-bod-opt {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 2px 8px; border-radius: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(212,168,83,0.25);
  cursor: pointer; user-select: none;
  font-size: 0.78rem;
  color: var(--cream, #e8d5a7);
}
.msc-bod-opt:hover { background: rgba(212,168,83,0.08); }
.msc-bod-opt.msc-bod-active {
  background: rgba(108,168,108,0.18);
  border-color: rgba(108,168,108,0.5);
  color: var(--green-bright, #6fcf6f);
}
.msc-bod-opt.msc-bod-disabled {
  opacity: 0.45; cursor: not-allowed;
}
.msc-bod-opt input { margin: 0; cursor: pointer; }
.msc-bod-note { margin-left: auto; }

/* Wound-log Evergreen button */
.evergreen-heal {
  background: rgba(108,168,108,0.18);
  border: 1px solid rgba(108,168,108,0.45);
  color: var(--green-bright, #6fcf6f);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
}
.evergreen-heal:hover { background: rgba(108,168,108,0.28); }
.evergreen-heal.disabled,
.evergreen-heal[disabled] {
  opacity: 0.45; cursor: not-allowed;
}

/* Phase Spells-133 (Rome 2026-05-14): wound second row */
.wound-entry .we-ctl-sustain {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 4px;
  margin-top: 2px;
  border-top: 1px dashed rgba(212,168,83,0.12);
  flex-wrap: wrap;
}

/* Phase Spells-135 (Rome 2026-05-14): target-defense stepper */
.msc-defense-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px dashed rgba(212,168,83,0.15);
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.msc-defense-label {
  color: var(--gold-light, #f0d97a);
  font-weight: 500;
}
.msc-defense-btn {
  background: rgba(212,168,83,0.10);
  border: 1px solid rgba(212,168,83,0.35);
  color: var(--gold-light, #f0d97a);
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
}
.msc-defense-btn:hover { background: rgba(212,168,83,0.22); }
.msc-defense-val {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
  color: var(--cream, #e8d5a7);
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
  padding: 1px 6px;
}
.msc-defense-verdict {
  margin-left: 4px;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Phase Spells-144 (Rome 2026-05-14): spell-weapon card */
.spell-weapon-card {
  border-left: 3px solid var(--green-bright, #6fcf6f) !important;
  background: rgba(108,168,108,0.06);
}
.spell-weapon-card .wc-name .csao-badge {
  background: rgba(108,168,108,0.25);
  color: var(--green-bright, #6fcf6f);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  margin-right: 6px;
}
.spell-weapon-cards { margin-bottom: 8px; }

/* Phase Spells-147 (Rome 2026-05-14): cast toggle + stack picker */
.msc-cast-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(212,168,83,0.08);
  border: 1px solid rgba(212,168,83,0.25);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--cream, #e8d5a7);
  cursor: pointer;
  user-select: none;
}
.msc-cast-toggle input { margin: 0; cursor: pointer; }
.msc-cast-toggle:has(input:checked) {
  background: rgba(108,168,108,0.15);
  border-color: rgba(108,168,108,0.4);
  color: var(--green-bright, #6fcf6f);
}

.msc-stack-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px dashed rgba(212,168,83,0.15);
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.msc-stack-label { color: var(--gold-light, #f0d97a); font-weight: 500; }
.msc-stack-display {
  flex: 1;
  background: rgba(0,0,0,0.18);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.78rem;
}
.msc-stack-display strong { color: var(--cream-dim, #c9b78f); }

/* Phase Spells-150 (Rome 2026-05-14): weapon selector */
.msc-weapon-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed rgba(212,168,83,0.15);
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.msc-weapon-selector-label {
  color: var(--gold-light, #f0d97a);
  font-weight: 500;
}
.msc-weapon-select {
  flex: 1;
  min-width: 160px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(212,168,83,0.3);
  color: var(--cream, #e8d5a7);
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 0.85rem;
}
.msc-weapon-overrides {
  background: rgba(108,168,108,0.08);
  border: 1px solid rgba(108,168,108,0.3);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.78rem;
  color: var(--cream, #e8d5a7);
}
.msc-weapon-overrides strong { color: var(--green-bright, #6fcf6f); }
.msc-weapon-attacks {
  background: rgba(0,0,0,0.18);
  border-radius: 4px;
  padding: 4px;
}

/* Phase Spells-152 (Rome 2026-05-14): wide sub-card */
.magic-sustained-subcard.has-weapon-selector {
  grid-column: 1 / -1;
}

/* per Rome 2026-07-07 wide-sustains pass — content-heavy sub-cards
   (Armor of Life's ability picker, long descriptions, many controls)
   span the full row (_mscAutoWide adds the class) and reflow their
   bulk sideways so they stop growing into tall narrow columns. Inner
   reflow rules only kick in when the grid is actually multi-column. */
.magic-sustained-subcard.msc-wide {
  grid-column: 1 / -1;
}
@media (min-width: 700px) {
  .magic-sustained-subcard.msc-wide .msc-abilities-block {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2px 16px;
  }
  .magic-sustained-subcard.msc-wide .msc-abilities-block .msc-abilities-hdr {
    grid-column: 1 / -1;
  }
  .magic-sustained-subcard.msc-wide .msc-description {
    columns: 2;
    column-gap: 20px;
  }
}

/* Phase Spells-154 (Rome 2026-05-14): tendril list */
.msc-tendril-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(212,168,83,0.15);
}
.msc-tendril-header { font-size: 0.82rem; color: var(--cream, #e8d5a7); }
.msc-tendril-header strong { color: var(--gold-light, #f0d97a); }
.msc-tendril-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(108,108,168,0.10);
  border: 1px solid rgba(108,108,168,0.3);
  font-size: 0.78rem;
  flex-wrap: wrap;
}
.msc-tendril-name {
  color: var(--cream, #e8d5a7);
  font-weight: 500;
}
.msc-tendril-stat {
  color: var(--cream-dim, #c9b78f);
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
}
.msc-tendril-stat strong {
  color: var(--cream, #e8d5a7);
}
.msc-tendril-del {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(224,112,112,0.4);
  color: #e07070;
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msc-tendril-del:hover { background: rgba(224,112,112,0.15); }
.msc-tendril-note {
  font-style: italic;
  padding: 2px 0;
}
.msc-tendril-empty { font-style: italic; }

/* Phase Spells-Hydromancy (Rome 2026-05-14): weapon enchantment lines
   (Ice Weapon and future Flare-class riders). Sits below the attacks
   table on each weapon card. */
.wc-enchant-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px;
  margin-top: 4px;
  border-top: 1px dashed rgba(108, 178, 255, 0.25);
  background: rgba(108, 178, 255, 0.06);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--cream, #e8d5a7);
}
.wc-enchant-line .wc-enchant-label {
  color: #80c8ff;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.wc-enchant-line .wc-enchant-subtype {
  color: #80c8ff;
  font-style: italic;
}
.wc-enchant-line .wc-enchant-source {
  margin-left: auto;
  color: var(--cream-dim, #c9b78f);
  font-size: 0.74rem;
  font-style: italic;
  opacity: 0.85;
}


/* Phase Spells-Charge v2 (Rome 2026-05-14): Charge Counters card —
   gold-themed, clickable use pills. */
.cc-readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px;
}
.cc-step {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--gold-dim);
  background: linear-gradient(180deg, rgba(212,168,83,0.16), rgba(160,120,48,0.08));
  color: var(--gold-light);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-step:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(212,168,83,0.28), rgba(160,120,48,0.14));
  color: #fff;
}
.cc-step:active {
  transform: scale(0.96);
}
.cc-numwrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-title);
  min-width: 140px;
  justify-content: center;
}
.cc-cur {
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.cc-slash {
  font-size: 1.6rem;
  color: var(--gold-dim);
  margin: 0 4px;
}
.cc-max {
  font-size: 1.6rem;
  color: var(--gold);
  font-weight: 600;
}

.cc-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 14px 12px;
  flex-wrap: wrap;
}
.cc-action-btn {
  padding: 6px 14px;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  background: rgba(212,168,83,0.08);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: var(--transition);
}
.cc-action-btn:hover {
  border-color: var(--gold);
  background: rgba(212,168,83,0.18);
  color: var(--gold-light);
}

.cc-uses {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px 14px;
  border-top: 1px dashed rgba(212,168,83,0.20);
}
.cc-uses-lbl {
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 6px;
}
.cc-use-pill {
  padding: 5px 11px;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  background: rgba(212,168,83,0.10);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.80rem;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.cc-use-pill:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(212,168,83,0.22);
  color: var(--gold-light);
}
.cc-use-pill:active:not(:disabled) {
  transform: scale(0.97);
}
.cc-pill-name {
  font-weight: 600;
}
.cc-pill-cost {
  color: var(--gold);
  font-weight: 700;
}
.cc-use-pill-cant {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sahari / Selifren Song toggle pills (Rome 2026-06-17) — these had no CSS and
   rendered as unstyled text-like buttons. Match the sheet's pill style
   (mirrors .cc-use-pill), with a gold "on" state. */
.sahari-toggle-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.sahari-toggle {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 5px 11px;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  background: rgba(212,168,83,0.10);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.80rem;
  cursor: pointer;
}
.sahari-toggle-row .sahari-toggle { margin: 0; }
.sahari-toggle:hover {
  border-color: var(--gold);
  background: rgba(212,168,83,0.22);
  color: var(--gold-light);
}
.sahari-toggle.sahari-toggle-on {
  background: rgba(212,168,83,0.32);
  border-color: var(--gold-light);
  color: var(--gold-light);
}


/* Phase Spells-MountainRoots (Rome 2026-05-14): armed-state styling for
   sticky Charge Counter Surges. */
.cc-use-pill-armed {
  background: rgba(212,168,83,0.32);
  border-color: var(--gold-light);
  color: var(--gold-light);
  box-shadow: 0 0 6px rgba(232,200,120,0.35), inset 0 0 8px rgba(212,168,83,0.18);
}
.cc-use-pill-armed:hover:not(:disabled) {
  background: rgba(232,200,120,0.40);
  border-color: #f0d97a;
  color: #fff;
}
.cc-pill-armed {
  font-size: 0.66rem;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--gold);
  color: var(--bg-darkest);
  font-weight: 700;
  margin-left: 4px;
}


/* Phase Spells-DischargeCalc (Rome 2026-05-14): Discharge inline panel. */
.cc-discharge-panel {
  padding: 12px 14px 14px;
  border-top: 1px dashed rgba(212,168,83,0.20);
}
.cc-discharge-head {
  margin-bottom: 8px;
}
.cc-discharge-head strong {
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}
.cc-discharge-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cc-discharge-step-lbl {
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
}
.cc-discharge-step-btn {
  /* Phase Conditions (Rome 2026-05-24) — close-out: this rule was
     unfinished ("padding:" with no value, no closing brace), which made
     every subsequent CSS rule sit inside an orphaned selector and never
     apply. Filling in a sensible padding + closing the brace so the
     downstream rules (Conditions card, Momentum/Guard) start fresh. */
  padding: 2px 6px;
}

/* Conditions card on the Modifiers tab (Phase Conditions, Rome 2026-05-24).
   Lives above the Active Modifiers section. Each row carries name +
   category badge + description + canonical effects list, with a remove
   button on manual entries and a "sheet-derived" lock pill on auto
   entries (Burdened / Impeded / Overloaded / Pain). */
.conditions-card-body { display: flex; flex-direction: column; gap: 10px; }
.conditions-banner {
  font-size: 0.9rem;
  color: var(--cream, #e8d5a7);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 6px;
}
.conditions-banner .muted { color: var(--cream-dim, #c9b78f); }
.conditions-banner-acc { color: var(--red-bright, #e07070); margin-left: 8px; }
.conditions-list { display: flex; flex-direction: column; gap: 8px; }
.condition-row {
  background: rgba(0, 0, 0, 0.14);
  border-left: 3px solid rgba(232, 213, 167, 0.35);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
}
.condition-row.condition-locked { border-left-color: #b07a17; }
.condition-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.condition-name { color: var(--gold-light, #f5d791); font-size: 1.0rem; }
.condition-cat {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(232, 213, 167, 0.12);
  color: var(--cream-dim, #c9b78f);
}
.condition-cat-morale       { background: rgba(224, 112, 112, 0.15); color: #e0a070; }
.condition-cat-tactical     { background: rgba(176, 122, 23, 0.15); color: #d4a850; }
.condition-cat-trauma       { background: rgba(176, 23, 23, 0.18); color: #e07070; }
.condition-cat-movement     { background: rgba(112, 176, 200, 0.15); color: #a8c8e0; }
.condition-cat-sensory      { background: rgba(176, 144, 200, 0.15); color: #c8a8e0; }
.condition-cat-item         { background: rgba(112, 200, 144, 0.12); color: #a0d0a8; }
.condition-cat-constitution { background: rgba(232, 232, 232, 0.10); color: #d8d0c0; }
.condition-cat-logic        { background: rgba(200, 200, 88, 0.12); color: #d8d090; }
.condition-cat-general      { background: rgba(232, 213, 167, 0.10); color: var(--cream-dim, #c9b78f); }
.condition-lock-badge {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #d4a850;
  padding: 1px 6px;
  border: 1px solid rgba(212, 168, 80, 0.35);
  border-radius: 3px;
}
/* Beneficial variant for sheet-derived Conditions that EARN a bonus
   (Phase Cond-WoundFlags, Rome 2026-05-24). Used by Disinfected when
   ALL wounds are disinfected — canon +1 HP/day. Green-tinted so the
   player sees at a glance that the threshold is met. */
.condition-lock-badge.condition-lock-badge-bonus {
  color: #b3d9a3;
  background: rgba(150, 200, 120, 0.10);
  border-color: rgba(150, 200, 120, 0.5);
  font-weight: 600;
}
.condition-remove-btn {
  margin-left: auto;
  background: transparent;
  color: var(--red-bright, #e07070);
  border: 1px solid rgba(224, 112, 112, 0.35);
  border-radius: 3px;
  font-size: 0.95rem;
  width: 22px; height: 22px;
  line-height: 1;
  cursor: pointer;
}
.condition-remove-btn:hover { background: rgba(224, 112, 112, 0.15); }
.condition-desc {
  margin: 4px 0 2px 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--cream, #e8d5a7);
}
.condition-fx-list {
  margin: 4px 0 0 20px;
  padding: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--cream-dim, #c9b78f);
}
.condition-fx-list li { margin: 2px 0; }
.conditions-empty { padding: 8px 4px; font-style: italic; }
.conditions-add-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed rgba(232, 213, 167, 0.15);
}
.conditions-add-label { color: var(--cream-dim, #c9b78f); font-size: 0.9rem; font-weight: 500; }
.conditions-add-select {
  background: rgba(0, 0, 0, 0.4);
  color: var(--cream, #e8d5a7);
  border: 1px solid rgba(232, 213, 167, 0.3);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.88rem;
  cursor: pointer;
  min-width: 260px;
}

/* Stack Momentum / Guard vertically at the right end of the pools bar
   (Phase Pools-Stack, Rome 2026-05-24). When wrapped in .qs-binary-stack
   the two .qs-binary-cell children become a tight 2-row column with a
   shared visual unit. */
.quick-stats .qs-binary-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.quick-stats .qs-binary-stack .qs-binary-cell {
  min-width: 76px;
  padding: 4px 8px;
}
.quick-stats .qs-binary-stack .qs-binary-code { font-size: 0.72rem; }
.quick-stats .qs-binary-stack .qs-binary-state { font-size: 0.66rem; letter-spacing: 1px; }

/* Movement card Speed header (Phase Movement-Header, Rome 2026-05-24).
   Shows base Speed → modified Speed with chips for each active
   modifier (Impeded/Overloaded/Slowed and any future Speed-affecting
   Conditions). Lives at the top of the Movement card above the
   Advance/Hustle/Dash/Sprint tier grid. */
.movement-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--bg-mid, #2a2a48);
  border-radius: 6px;
}
.movement-spd-base, .movement-spd-mod {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 5px;
}
.movement-spd-base { background: rgba(232, 213, 167, 0.08); }
.movement-spd-mod { background: rgba(232, 213, 167, 0.14); border: 1px solid var(--gold-dim, #c9a978); }
.movement-spd-down { border-color: rgba(224, 112, 112, 0.55); background: rgba(224, 112, 112, 0.10); }
.movement-spd-up   { border-color: rgba(160, 220, 168, 0.55); background: rgba(112, 200, 144, 0.10); }
.movement-spd-label {
  font-size: 0.66rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-dim, #c9a978);
}
.movement-spd-val {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--cream, #e8d5a7);
  line-height: 1;
}
.movement-spd-mod .movement-spd-val { color: var(--gold-light, #f5d791); }
.movement-spd-down .movement-spd-val { color: #e07070; }
.movement-spd-up   .movement-spd-val { color: #a8e0b8; }
.movement-spd-arrow {
  font-size: 1.2rem;
  color: var(--cream-dim, #c9b78f);
}
.movement-spd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.2;
  background: rgba(232, 213, 167, 0.08);
  border: 1px solid rgba(232, 213, 167, 0.18);
}
.movement-spd-chip strong { color: var(--gold-light, #f5d791); }
.movement-spd-chip-down {
  background: rgba(224, 112, 112, 0.10);
  border-color: rgba(224, 112, 112, 0.35);
  color: var(--cream, #e8d5a7);
}
.movement-spd-chip-down strong { color: #e0a070; }
.movement-spd-chip-ok {
  background: rgba(160, 220, 168, 0.08);
  border-color: rgba(160, 220, 168, 0.25);
  color: var(--cream-dim, #c9b78f);
  font-style: italic;
}

/* Cascade Condition "via" badge — shown on implied Conditions (e.g.,
   Slowed shown because Agony is active). Phase Cond-Cascade
   (Rome 2026-05-24). */
.condition-via-badge {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: #b97abc;
  padding: 1px 6px;
  border: 1px solid rgba(185, 122, 188, 0.4);
  border-radius: 3px;
  font-style: italic;
}

/* Berserk + future per-Condition action buttons (Phase Cond-Berserk,
   Rome 2026-05-24). Sits inside a Condition row beneath the effects
   list. */
.condition-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.condition-surge-btn {
  background: rgba(224, 112, 112, 0.12);
  color: var(--cream, #e8d5a7);
  border: 1px solid rgba(224, 112, 112, 0.5);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 0.86rem;
  cursor: pointer;
  font-family: var(--font-title);
  letter-spacing: 0.3px;
  transition: background 0.12s ease;
}
.condition-surge-btn:hover {
  background: rgba(224, 112, 112, 0.22);
}
/* Disabled binary cell (e.g., Guard while Berserk). Phase Cond-Berserk. */
.quick-stats .qs-binary-cell.qs-binary-blocked {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: rgba(224, 112, 112, 0.4);
}
.quick-stats .qs-binary-cell.qs-binary-blocked:hover {
  background: var(--bg-dark, #1d1d34);
  border-color: rgba(224, 112, 112, 0.4);
}

/* Berserk +hB melee damage pill (Phase Cond-Berserk Phase 4, Rome
   2026-05-24). Red-tinted to match the Berserk Condition styling. */
.wc-mod-pill.wc-mod-berserk {
  background: rgba(224, 112, 112, 0.18);
  color: #f0a890;
  border: 1px solid rgba(224, 112, 112, 0.5);
}

/* Frenzied +B melee damage pill (Phase Cond-Frenzied, Rome 2026-05-24).
   Deeper, more saturated red than Berserk — Frenzied is the escalation
   so the visual weight should be a step up. */
.wc-mod-pill.wc-mod-frenzied {
  background: rgba(200, 60, 60, 0.28);
  color: #ffb0a0;
  border: 1px solid rgba(220, 70, 70, 0.7);
  font-weight: 600;
}

/* Kneeling +2d Long Arm Accurate pill (Phase Cond-Kneeling, Rome
   2026-05-24). Blue-ish tint — Kneeling is a steadying stance, distinct
   from the red-tinted Morale Conditions. */
.wc-mod-pill.wc-mod-kneeling {
  background: rgba(140, 180, 220, 0.18);
  color: #b8d4ec;
  border: 1px solid rgba(140, 180, 220, 0.5);
}

/* Restrained Condition — Gestures suppression badges + warning banner
   (Phase Cond-Restrained, Rome 2026-05-24). When Restrained is active,
   every Gesture-type modality row in the Magic tab Modalities tracker
   gets dimmed + a "Restrained" badge next to its name; a warning chip
   above the modality grid summarizes the Flare-penalty bump. */
.magic-modality-row.modality-suppressed {
  opacity: 0.55;
  background: rgba(220, 180, 120, 0.06);
  border-left: 3px solid rgba(220, 180, 120, 0.5);
  padding-left: 6px;
}
.magic-modality-row.modality-suppressed .magic-modality-checkbox {
  cursor: not-allowed;
}
.magic-modality-suppressed-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(220, 180, 120, 0.18);
  color: #e8c87a;
  border: 1px solid rgba(220, 180, 120, 0.5);
  border-radius: 3px;
}
.magic-modality-restrained-warn {
  margin: 10px 0;
  padding: 8px 12px;
  background: rgba(220, 180, 120, 0.08);
  border-left: 4px solid rgba(220, 180, 120, 0.7);
  color: var(--cream, #e8e0d0);
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: 0 4px 4px 0;
}
.magic-modality-restrained-warn strong {
  color: #e8c87a;
}

/* Dehydrated pool warning (Phase Cond-Dehydrated, Rome 2026-05-24).
   When the player has Dehydrated active, both Recovery Pool and
   Healing Pool widgets gain this class — red-tinted left border +
   subtle background so it reads as a punitive cap, not just empty
   schedule. */
.rh-pool.rh-pool-dehydrated {
  border-left: 4px solid rgba(220, 70, 70, 0.7);
  background: rgba(220, 70, 70, 0.06);
  padding-left: 8px;
}
.rh-pool.rh-pool-dehydrated .rh-pool-value {
  color: #e0707a;
}
.rh-pool.rh-pool-dehydrated .rh-pool-sub strong {
  color: #e0707a;
}

/* Item-bound Condition picker (Phase Cond-Damaged, Rome 2026-05-24).
   Damaged + Broken Conditions bind to a specific item via this picker.
   Styled to read as a row-body inline form, matching the .condition-
   tick-note spacing/voice. */
.condition-item-picker {
  margin: 6px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.condition-item-picker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cream-dim, #b0a898);
  width: 100%;
}
.condition-item-picker-select {
  flex: 1;
  padding: 4px 6px;
  font-size: 0.85rem;
  background: var(--bg-dark, #1d1d34);
  color: var(--text-primary, #e8d5a7);
  border: 1px solid rgba(232, 213, 167, 0.35);
  border-radius: 3px;
}
.condition-item-picker-select:focus {
  outline: none;
  border-color: rgba(232, 213, 167, 0.7);
}

/* Prone Condition attack pills (Phase Cond-Prone, Rome 2026-05-24).
   Two flavors: penalty tint (melee -2d) and bonus tint (Long Arm +2d)
   — match the same blue family as Kneeling since both are stance
   Conditions, but the penalty variant takes a warning-yellow hue
   so the player notices the negative impact at a glance. */
.wc-mod-pill.wc-mod-prone-pen {
  background: rgba(220, 180, 120, 0.18);
  color: #e8d09a;
  border: 1px solid rgba(220, 180, 120, 0.5);
}
.wc-mod-pill.wc-mod-prone-bon {
  background: rgba(120, 180, 220, 0.22);
  color: #b8d4ec;
  border: 1px solid rgba(120, 180, 220, 0.55);
}

/* Panicked Cycle Maintenance roller modal (Phase Cond-Panicked,
   Rome 2026-05-24). Reuses .magic-modal-overlay / .magic-modal base
   classes; .panicked-roller-modal narrows + tints. */
.panicked-roller-modal {
  max-width: 460px;
}
.panicked-roller-pool {
  margin: 10px 0;
  font-size: 14px;
  color: var(--text-secondary, #c8c8d8);
}
.panicked-roller-input-row {
  margin: 12px 0 8px;
}
.panicked-roller-input-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.panicked-roller-input {
  width: 72px;
  padding: 6px 8px;
  font-size: 16px;
  border: 1px solid rgba(232, 213, 167, 0.4);
  background: var(--bg-dark, #1d1d34);
  color: var(--text-primary, #e8d5a7);
  border-radius: 4px;
  text-align: center;
}
.panicked-roller-autoroll {
  margin-left: 10px;
  padding: 6px 12px;
  background: rgba(232, 213, 167, 0.16);
  color: var(--text-primary, #e8d5a7);
  border: 1px solid rgba(232, 213, 167, 0.5);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.panicked-roller-autoroll:hover:not(:disabled) {
  background: rgba(232, 213, 167, 0.28);
}
.panicked-roller-autoroll:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.panicked-roller-rolls {
  margin: 6px 0 0;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.5px;
  min-height: 16px;
}
.panicked-roller-result {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(232, 213, 167, 0.06);
  border-left: 3px solid rgba(232, 213, 167, 0.5);
  border-radius: 4px;
  min-height: 60px;
}
.panicked-roller-tier {
  font-size: 15px;
  margin-bottom: 6px;
}
.panicked-roller-tier.panicked-tier-pass-effect,
.panicked-roller-tier.panicked-tier-pass {
  color: #b3d9a3;
  border-left-color: rgba(150, 200, 120, 0.7);
}
.panicked-roller-tier.panicked-tier-botch-1 {
  color: #e8c87a;
}
.panicked-roller-tier.panicked-tier-botch-2 {
  color: #e89a6a;
}
.panicked-roller-tier.panicked-tier-botch-3 {
  color: #e0707a;
}
.panicked-roller-narrative {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary, #c8c8d8);
}

/* Parametric Condition level stepper + Cowed tick note (Phase Cond-Cowed,
   Rome 2026-05-24). */
.condition-level-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.condition-level-btn {
  background: rgba(232, 213, 167, 0.10);
  color: var(--cream, #e8d5a7);
  border: 1px solid rgba(232, 213, 167, 0.30);
  border-radius: 3px;
  width: 22px; height: 22px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  font-weight: 600;
}
.condition-level-btn:hover {
  background: rgba(232, 213, 167, 0.22);
  border-color: var(--cream, #e8d5a7);
}
.condition-level-val {
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  color: var(--gold-light, #f5d791);
  min-width: 56px;
  text-align: center;
}
.condition-tick-note {
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(212, 168, 80, 0.10);
  border-left: 2px solid var(--gold-dim, #c9a978);
  border-radius: 0 4px 4px 0;
  font-size: 0.84rem;
  color: var(--cream, #e8d5a7);
}
.condition-tick-note strong { color: var(--gold-light, #f5d791); }

/* Demoralized blocks Morale Pool (Phase Cond-Demoralized, Rome 2026-05-24).
   Visual signal that the cell can't be interacted with — red-tinted border
   + dimmed value. Buttons handle their own disabled state. */
.quick-stats .qs-pool-cell.qs-pool-blocked {
  border: 1px solid rgba(224, 112, 112, 0.45);
  background: rgba(224, 112, 112, 0.06);
  opacity: 0.7;
}
.quick-stats .qs-pool-cell.qs-pool-blocked .qs-pool-cur {
  color: rgba(224, 112, 112, 0.7);
  text-decoration: line-through;
}
.quick-stats .qs-pool-cell.qs-pool-blocked .qs-pool-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}


/* ─── Phase Spell-Summons (Rome 2026-05-27): Summon button + active mini ── */

.spell-summon-section {
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent, #6e85b7);
  background: rgba(110, 133, 183, 0.06);
  border-radius: 3px;
}
.spell-summon-section.spell-summon-missing {
  border-left-color: var(--cream-dark, #8a8a8a);
  opacity: 0.7;
  font-style: italic;
}
.spell-summon-head {
  margin: 0 0 4px 0;
  font-size: 0.95em;
}
.spell-summon-head .kw-tag {
  margin: 0 4px;
}
.spell-summon-meta {
  margin: 2px 0;
  font-size: 0.85em;
  color: var(--cream-dark, #aaa);
}
.spell-summon-restr {
  margin: 4px 0;
  font-size: 0.85em;
  color: var(--combat-accent, #c0504d);
}
.spell-summon-controls {
  margin-top: 6px;
}
.spell-summon-btn {
  display: inline-block;
  padding: 6px 16px;
  background: var(--accent, #6e85b7);
  color: #fff;
  border: 1px solid var(--accent, #6e85b7);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.05s;
}
.spell-summon-btn:hover {
  background: var(--accent-light, #8aa3d8);
  border-color: var(--accent-light, #8aa3d8);
}
.spell-summon-btn:active { transform: translateY(1px); }

.spell-summon-active {
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(110, 133, 183, 0.12);
  border: 1px solid var(--accent, #6e85b7);
  border-radius: 3px;
}
.spell-summon-active-head {
  margin-bottom: 4px;
  font-size: 1em;
}
.spell-summon-active-head .kw-tag {
  margin-left: 4px;
}
.spell-summon-active-head .hint {
  font-size: 0.8em;
  margin-left: 6px;
  font-family: monospace;
}
.spell-summon-pools {
  margin: 4px 0;
  font-size: 0.95em;
}
.spell-summon-pools span {
  margin-right: 12px;
}
.spell-summon-pools strong {
  color: var(--accent, #6e85b7);
  font-weight: 600;
  margin-right: 4px;
}
.spell-summon-ss {
  margin: 4px 0;
  font-size: 0.9em;
}
.spell-summon-stub-note {
  margin: 6px 0;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.75;
}
.spell-summon-active-actions {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.spell-summon-open {
  padding: 4px 12px;
  background: var(--accent, #6e85b7);
  color: #fff;
  border: 1px solid var(--accent, #6e85b7);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 600;
}
.spell-summon-open:hover {
  background: var(--accent-light, #8aa3d8);
  border-color: var(--accent-light, #8aa3d8);
}
.spell-summon-cm {
  padding: 4px 10px;
  background: transparent;
  color: var(--accent, #6e85b7);
  border: 1px solid var(--accent, #6e85b7);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.spell-summon-cm:hover {
  background: var(--accent, #6e85b7);
  color: #fff;
}
.spell-summon-cycles,
.spell-summon-commands {
  margin: 2px 0;
  font-size: 0.9em;
}
.spell-summon-dismiss {
  padding: 4px 12px;
  background: transparent;
  color: var(--combat-accent, #c0504d);
  border: 1px solid var(--combat-accent, #c0504d);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
}
.spell-summon-dismiss:hover {
  background: var(--combat-accent, #c0504d);
  color: #fff;
}

/* Inline embedded summon monster-card (spell tab → Summon). The full rich card
   (sage_monster_card.html?embed=1) rendered inline; reuses the card + state bus. */
.spell-summon-frame {
  width: 100%;
  min-height: 560px;
  border: 1px solid #b09760;
  border-radius: 4px;
  background: #f5ead2;
  margin-top: 8px;
  display: block;
}


/* ===== Integration P3 — full-screen shell + responsive card flow (2026-06-17) =====
   P8 (2026-06-17): cardflow switched from CSS multi-column to a fill-width
   responsive grid. The old multi-column (column-width:360px) balanced cards
   into fewer columns than fit, leaving an empty trailing column on the right
   (content bunched left). A grid with repeat(auto-fill, minmax(360px,1fr))
   is row-major and stretches each track, so every full row spans the entire
   width — no empty right band. align-items:start keeps each card its natural
   height (a short card leaves a gap beneath it, as expected for a grid). */
#page { max-width: none; }
.tab-panel.active.cardflow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 18px;
  align-items: start;
}
/* P9 (2026-06-17): the grid above is the FALLBACK. When the JS masonry runs
   it adds .cardflow-masonry and absolutely-positions the cards into balanced,
   order-preserving columns (tight stacking, no row-gaps, no trailing band).
   Block container so the absolute children + JS-set inline height behave. */
.tab-panel.active.cardflow.cardflow-masonry { display: block; }
/* cards are direct grid items; min-width:0 prevents wide content from blowing out a track */
.tab-panel.active.cardflow > .sheet-section,
.tab-panel.active.cardflow > .magic-top-row > *,
.tab-panel.active.cardflow > #magic-flare-tracker > *,
.tab-panel.active.cardflow > #magic-gates-tracker > *,
.tab-panel.active.cardflow > #magic-modalities-tracker > *,
.tab-panel.active.cardflow > #magic-content > * {
  min-width: 0;
}
/* Magic tab: dissolve the JS host wrappers so their cards become direct grid items */
#tab-magic.cardflow > .magic-top-row,
#tab-magic.cardflow > #magic-flare-tracker,
#tab-magic.cardflow > #magic-gates-tracker,
#tab-magic.cardflow > #magic-modalities-tracker,
#tab-magic.cardflow > #magic-content { display: contents; }
/* Double-wide cards in the CSS-grid cardflow (e.g. Social → Contacts).
   Only meaningful when the panel uses the grid (.cardflow-grid opts out of
   the JS masonry). On a narrow viewport the grid collapses to 1 track and
   span 2 is clamped, so it degrades gracefully. (Rome 2026-06-17) */
.tab-panel.active.cardflow.cardflow-grid > .social-wide-card { grid-column: span 2; }
/* Full-bleed card across all grid tracks (e.g. Gods → Invocations table). */
.tab-panel.active.cardflow.cardflow-grid > .cardflow-full { grid-column: 1 / -1; }
/* Advancement tab: single full-width column — every card spans the page. (Rome 2026-06-17) */
#tab-advancement.cardflow-grid { grid-template-columns: 1fr; }

/* ── Authored fixed-column layout (Rome 2026-06-17) ──────────────────────
   Cards are placed into .cardcol stacks directly in the HTML (NO auto-flow /
   masonry), so the order is exact and stable at every screen size — "X before
   Y" is guaranteed when they share a column. 3 columns on desktop/laptop; on a
   phone or narrow window the columns stack into one (col1, then col2, col3). */
.tab-panel.active.tab-authored-cols {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.tab-authored-cols > .cardcol {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* each card sizes to its own content (don't stretch to fill column height) */
.tab-authored-cols > .cardcol > * { flex: 0 0 auto; min-width: 0; }
@media (max-width: 820px) {
  .tab-panel.active.tab-authored-cols { flex-direction: column; }
}

/* ── Row-grid layout (Rome 2026-06-17) ───────────────────────────────────
   Cards flow in explicit DOM (author-given) order, left-to-right across rows.
   Order is exact + stable at every size; nothing auto-reshuffles. 3 columns on
   desktop → 2 on laptop/tablet → 1 on phone. A short card may leave a gap below
   it in its row (the accepted trade for across-the-rows ordering). */
.tab-panel.active.tab-rowgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.tab-rowgrid > * { min-width: 0; }
/* a .cardflow-full card spans the whole row-grid width (its own row) */
.tab-panel.active.tab-rowgrid > .cardflow-full { grid-column: 1 / -1; }
/* a .cardflow-two card spans two of the three columns (2/3 width) */
.tab-panel.active.tab-rowgrid > .cardflow-two { grid-column: span 2; }
@media (max-width: 1024px) {
  .tab-panel.active.tab-rowgrid { grid-template-columns: repeat(2, 1fr); }
  /* only two columns now — the 2/3 card takes the full row */
  .tab-panel.active.tab-rowgrid > .cardflow-two { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .tab-panel.active.tab-rowgrid { grid-template-columns: 1fr; }
}
/* Sticky full-width Favor bar (Gods tab) — opaque fill so the invocation list
   scrolls *under* it (the base .sheet-section is transparent); soft shadow reads
   as a floating bar. Clicking Available Favor casts the armed invocation, so it
   must stay pinned. (Rome 2026-06-17) */
.gods-favor-sticky { background: var(--bg-card); box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
/* Gods tab is a BLOCK panel (so the Favor bar above can be sticky across the whole
   scroll); the rest of the cards live in this inner grid. Rome 2026-06-17. */
.gods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 wide by default */
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}
/* 4 wide when the Sacraments card is granted (Servant of the Faith) —
   toggled by _renderGodsSacrament. Rome 2026-06-18. */
.gods-grid.gods-grid--wide { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .gods-grid, .gods-grid.gods-grid--wide { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .gods-grid, .gods-grid.gods-grid--wide { grid-template-columns: 1fr; }
}
.gods-grid > * { min-width: 0; }
.gods-grid > .cardflow-full { grid-column: 1 / -1; }
/* Thin scope hint under the Invocations card header (replaced the redundant
   inner "Invocations" collapsible). Rome 2026-06-18. */
.gods-inv-grouphint { margin: 2px 0 8px 2px; }
/* end P3/P8 ===== */

/* ── Sacraments card (Rome 2026-06-18) — reuses the Gods ability-card chrome
   (--bg-card / --bg-mid, .gods-ability-select, .gods-ability-btn) so it
   matches Faith Abilities / Strictures. */
.gods-sacr { display: flex; flex-direction: column; gap: 8px; }
.gods-sacr-form { display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--bg-mid); border-radius: 3px; }
.gods-sacr-row { display: flex; align-items: center; gap: 8px; }
.gods-sacr-lbl { flex: 0 0 88px; font-size: 0.78rem; color: var(--gold-dim);
  text-transform: uppercase; letter-spacing: 0.06em; }
.gods-sacr-inv { flex: 1 1 auto; min-width: 0; }
.gods-sacr-shape { flex: 1 1 auto; min-width: 0;
  background: var(--bg-darkest); color: var(--cream);
  border: 1px solid var(--bg-mid); border-radius: 3px; padding: 4px 8px; font-size: 0.84rem; }
.gods-sacr-meta { font-size: 0.84rem; color: var(--cream); }
.gods-sacr-cost { color: var(--cream-dim); font-style: italic; }
.gods-sacr-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.gods-sacr-avail { font-size: 0.80rem; color: var(--gold-dim); }
.gods-sacr-list { display: flex; flex-direction: column; gap: 8px; }
.gods-sacr-empty { font-size: 0.84rem; color: var(--cream-dim); font-style: italic; }
.gods-sacr-token { display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--bg-mid); border-radius: 3px; }
.gods-sacr-token-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.86rem; color: var(--cream); }
.gods-sacr-tier { font-size: 0.78rem; color: var(--gold-dim);
  text-transform: uppercase; letter-spacing: 0.06em; }
.gods-sacr-charge { margin-left: auto; font-size: 0.78rem; color: var(--gold-dim); }
.gods-sacr-shape-desc { font-size: 0.80rem; color: var(--cream-dim); font-style: italic; }
.gods-sacr-used { font-size: 0.78rem; color: var(--gold-dim); }
.gods-sacr-token-actions { display: flex; gap: 8px; margin-top: 4px; }
/* Destroy reads as a subtle/secondary action vs. the gold Create/Use. */
.gods-sacr-destroy.gods-ability-btn { background: transparent; color: var(--cream-dim);
  border: 1px solid var(--bg-mid); }
.gods-sacr-destroy.gods-ability-btn:hover:not(:disabled) { background: rgba(200,80,73,0.15); color: #e09080; }
.gods-sacr-note { font-size: 0.78rem; color: var(--cream-dim); font-style: italic;
  border-top: 1px solid var(--bg-mid); padding-top: 8px; }

/* ═══════════════════════════════════════════════════════════════
   Integration P4 (Rome 2026-06-16) — Beacon radar + Flare list.
   Ported from beacon_wheel_and_gates_prototype.html; prototype chrome
   hex mapped to sheet CSS vars. Beacon identity rgb kept literal (they
   already match the sheet's color conventions). Lives on the Magic tab:
   radar fills #magic-beacons, Flare list fills #magic-flare-tracker.
   ═══════════════════════════════════════════════════════════════ */

/* ── Beacon radar (replaces .beacon-grid) ── */
.beacon-radar-wrap { text-align: center; }
.beacon-radar-svg {
  width: 100%; height: auto; max-width: 360px;
  touch-action: none; display: inline-block;
}
.br-ring     { stroke: var(--bg-mid); stroke-width: 1; }
.br-spoke    { stroke: var(--bg-mid); stroke-width: 1; }
.br-baseline { stroke: var(--gold); stroke-width: 1; opacity: 0.55; }
.br-poly     { fill: rgba(212, 168, 83, 0.13); stroke: var(--gold); stroke-width: 1.6; }
.br-node     { stroke: var(--bg-dark); stroke-width: 1.5; cursor: grab; }
.br-node:active { cursor: grabbing; }
.br-label    { font-family: var(--font-body); font-size: 10.5px; }
.br-sub      { font-family: var(--font-body); font-size: 8.5px; fill: var(--cream-dark); }
.br-stress-num  { font-family: var(--font-title); font-size: 26px; }
.br-stress-lbl  { font-family: var(--font-body); font-size: 8px; fill: var(--cream-dim); letter-spacing: 1px; }
.br-stress-band { font-family: var(--font-title); font-size: 12px; }
.beacon-radar-note {
  font-family: var(--font-body); font-size: 11px;
  color: var(--cream-dark); line-height: 1.5; margin-top: 6px;
}

/* ── Flare list (replaces .magic-flare-grid-detailed) ── */
.magic-flare-list { display: block; font-family: var(--font-body); }
.mfl-colhead {
  display: grid; grid-template-columns: 1fr 90px 110px; gap: 10px;
  font-size: 9.5px; color: var(--cream-dark); letter-spacing: 0.4px;
  text-transform: uppercase; padding: 0 10px 6px;
}
.mfl-colhead span:nth-child(2),
.mfl-colhead span:nth-child(3) { text-align: left; }
.mfl-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--bg-mid); }
.mfl-wash { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
.mfl-content {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 90px 110px; gap: 10px;
  align-items: center; padding: 9px 10px;
}
.mfl-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mfl-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px var(--bg-dark);
}
.mfl-name-txt { font-size: 12px; color: var(--cream); line-height: 1.15; }
.mfl-emotion  { font-size: 9.5px; color: var(--cream-dim); }
.mfl-surging  { color: var(--error); }
.mfl-ctrl { display: flex; align-items: center; justify-content: flex-start; gap: 4px; }
.mfl-btn {
  width: 22px; height: 22px; background: var(--bg-mid); color: var(--cream-dim);
  border: 1px solid var(--bg-card-hover); border-radius: 5px; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0;
}
.mfl-btn:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--cream); }
.mfl-btn:disabled { opacity: 0.35; cursor: default; }
.mfl-val { min-width: 16px; text-align: center; font-size: 13px; color: var(--cream); }
.mfl-flareval { min-width: 42px; font-size: 12px; }
.mfl-flareval.surging { color: var(--error); }
.mfl-limit { color: var(--cream-dark); }
.mfl-wash-note { font-size: 9.5px; color: var(--cream-dark); margin-top: 7px; padding: 0 10px; }

/* ═══════════════════════════════════════════════════════════════
   Integration P5 (Rome 2026-06-17) — Stone gate + "what the open
   Gates whisper" scroll. Replaces the 9-cell gate grid. Stone palette
   hexes live in the SVG (illustration colors); chrome → CSS vars.
   ═══════════════════════════════════════════════════════════════ */

.magic-gate-stone-wrap { text-align: center; margin-bottom: 4px; }
.mg-stone-svgwrap { text-align: center; }
.mg-stone-svg { width: 100%; max-width: 320px; height: auto; display: inline-block; }
.mg-stone-caption {
  font-family: var(--font-title); font-size: 13px; color: var(--cream);
  min-height: 18px; margin-top: 4px;
}
.mg-stone-curname { color: var(--cream); }
.mg-stone-sealed { color: var(--cream-dark); }
.mg-stone-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-left: 5px; vertical-align: middle;
}
.mg-stone-strain {
  font-family: var(--font-body); font-size: 11px; color: var(--cream-dim);
  margin-top: 6px;
}
.mg-stone-controls { display: flex; gap: 8px; margin-top: 12px; }
.mg-stone-btn {
  flex: 1; font-family: var(--font-body); font-size: 12px;
  background: var(--bg-card); color: var(--cream); cursor: pointer;
  border: 1px solid var(--gold-dim); border-radius: var(--radius);
  padding: 8px 8px;
}
.mg-stone-btn:hover:not(:disabled) { background: var(--bg-card-hover); border-color: var(--gold); }
.mg-stone-btn:disabled { opacity: 0.4; cursor: default; border-color: var(--bg-mid); color: var(--cream-dark); }
.mg-stone-close { color: var(--cream-dim); border-color: var(--bg-mid); }
.mg-stone-close:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--cream); }

.mg-gate-scroll { margin-top: 16px; border-top: 1px solid var(--bg-mid); padding-top: 12px; }
.mg-gate-scroll-head {
  font-family: var(--font-title); font-size: 14px; color: var(--gold-light);
  margin-bottom: 8px;
}
.mg-scroll-empty {
  font-family: var(--font-body); font-size: 11.5px; color: var(--cream-dark);
  font-style: italic; padding: 4px 2px;
}
.mg-scroll-note {
  font-family: var(--font-body); font-size: 10px; color: var(--cream-dim);
  font-style: italic; padding: 2px 2px 8px;
}
.mg-scroll-row {
  display: flex; gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid var(--bg-mid);
}
.mg-scroll-cur { background: rgba(240, 217, 122, 0.06); }
.mg-scroll-bar {
  flex: none; width: 4px; border-radius: 2px; overflow: hidden;
  display: flex; flex-direction: column;
}
.mg-scroll-bar-seg { flex: 1; }
.mg-scroll-text { flex: 1; min-width: 0; }
.mg-scroll-title {
  font-family: var(--font-title); font-size: 12px; color: var(--cream-dim);
  margin-bottom: 2px;
}
.mg-scroll-cur .mg-scroll-title { color: var(--gold-light); }
.mg-scroll-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle;
}
.mg-scroll-narr {
  font-family: var(--font-body); font-size: 11.5px; color: var(--cream-dim);
  line-height: 1.5; font-style: italic;
}
.mg-scroll-cur .mg-scroll-narr { color: var(--cream); }

/* ═══════════════════════════════════════════════════════════════
   Integration P7 (Rome 2026-06-17) — center the tab bar + the card
   grid contents (full-width retained; contents centered). The tab bar
   is flex, so justify-content:center centers each wrapped row. The
   attribute card grid was a CSS grid (wrapped row left-packed because
   grid can't center wrapped items) — switched to centered flex-wrap so
   every row, including a short last row (INT/SEN), centers.
   ═══════════════════════════════════════════════════════════════ */
.tab-bar { justify-content: center; }

.attr-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.attr-grid > .attr-card {
  flex: 1 1 150px;
  max-width: 200px;
}

/* ═══════════════════════════════════════════════════════════════
   Local dice roller modal (Rome 2026-06-17) — animated d10 faces
   matching the monster card; opened when the pools-bar Roller toggle
   is LOCAL. Chrome → CSS vars; hit/miss + result colors are semantic.
   ═══════════════════════════════════════════════════════════════ */
.roller-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8, 8, 16, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.roller-modal {
  background: var(--bg-dark);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  width: min(460px, 94vw); max-height: 90vh; overflow-y: auto;
  padding: 18px 20px; font-family: var(--font-body);
}
.roller-head {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--bg-mid); padding-bottom: 10px; margin-bottom: 14px;
}
.roller-title { font-family: var(--font-title); font-size: 1.05rem; color: var(--gold-light); flex: 1; min-width: 0; }
.roller-formula { font-size: 0.8rem; color: var(--cream-dim); white-space: nowrap; }
.roller-close {
  background: none; border: none; color: var(--cream-dim); font-size: 1.4rem;
  line-height: 1; cursor: pointer; padding: 0 2px;
}
.roller-close:hover { color: var(--gold-light); }
.roller-dice {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  min-height: 40px; margin-bottom: 12px;
}
.roller-die {
  width: 34px; height: 34px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-size: 1.05rem; font-weight: 600;
  border: 1px solid var(--bg-mid);
}
.roller-die.is-hit  { background: rgba(212, 168, 83, 0.22); color: var(--gold-light); border-color: var(--gold-dim); }
.roller-die.is-miss { background: var(--bg-mid); color: var(--cream-dark); }
.roller-die-empty { color: var(--cream-dark); font-style: italic; align-self: center; }
.roller-die-anim { animation: rollerTumble 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes rollerTumble {
  0%   { transform: rotate(-90deg) scale(0.4); opacity: 0; }
  60%  { transform: rotate(12deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .roller-die-anim { animation: none; }
}
.roller-hits { text-align: center; font-size: 1.05rem; color: var(--cream); margin-bottom: 14px; }
.roller-tn {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 10px 0; border-top: 1px solid var(--bg-mid);
}
.roller-tn-label { font-size: 0.85rem; color: var(--cream-dim); display: flex; align-items: center; gap: 8px; }
.roller-tn-input {
  width: 70px; background: var(--bg-card); color: var(--cream);
  border: 1px solid var(--bg-mid); border-radius: var(--radius);
  padding: 5px 8px; font-size: 0.95rem; text-align: center;
}
.roller-tn-input:focus { outline: none; border-color: var(--gold-dim); }
.roller-resolve, .roller-reroll {
  background: var(--bg-card); color: var(--cream); cursor: pointer;
  border: 1px solid var(--gold-dim); border-radius: var(--radius);
  padding: 6px 14px; font-family: var(--font-body); font-size: 0.85rem;
}
.roller-resolve:hover, .roller-reroll:hover { background: var(--bg-card-hover); border-color: var(--gold); }
.roller-result { text-align: center; font-size: 0.95rem; min-height: 22px; margin: 12px 0; color: var(--cream); }
.roller-success { color: var(--success); font-weight: 600; }
.roller-botch { color: var(--error); font-weight: 600; }
.roller-dim { color: var(--cream-dark); font-size: 0.85em; }
.roller-actions { text-align: center; border-top: 1px solid var(--bg-mid); padding-top: 12px; }
/* weapon roller multi-step layout */
.roller-step { padding: 10px 0; border-top: 1px solid var(--bg-mid); }
.roller-step:first-of-type { border-top: none; }
.roller-step-label {
  font-family: var(--font-title); font-size: 0.8rem; color: var(--gold-dim);
  letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px; text-align: center;
}
.roller-actions-inline { text-align: center; margin-top: 8px; }
.roller-rem { text-align: center; }
/* spell roller: target-defense note + collapsible description */
.roller-defnote { text-align: center; font-size: 0.9rem; color: var(--cream); margin-top: 6px; }
.roller-defnote strong { color: var(--gold-light); }
.roller-desc {
  border-top: 1px solid var(--bg-mid); border-bottom: 1px solid var(--bg-mid);
  padding: 8px 2px; margin: 0;
}
.roller-desc > summary {
  cursor: pointer; font-size: 0.82rem; color: var(--gold-dim);
  font-family: var(--font-title); letter-spacing: 0.4px; list-style: none;
}
.roller-desc > summary::-webkit-details-marker { display: none; }
.roller-desc > summary::before { content: '▸ '; }
.roller-desc[open] > summary::before { content: '▾ '; }
.roller-desc-body { font-size: 0.85rem; color: var(--cream-dim); line-height: 1.55; margin-top: 8px; }
/* roller mode cell on the pools bar reuses .qs-binary-cell styling */