/* ============================================================
   style-wizard-shell.css
   Split from static/css/style.css on 2026-08-01 for token-cost
   reasons (7057-line file forced multi-chunk reads on every touch).
   Sections 7-12: wizard shell (desktop+mobile), step forms, ability grid, spells step, mode cards/setup
   Load order matters - see templates/base.html <link> order.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   7. WIZARD SHELL (desktop)
   ══════════════════════════════════════════════════════════ */
.wizard-shell {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-height: calc(100vh - 96px);
  min-height: calc(100dvh - 96px);
}

.wizard-steps-nav {
  display: flex; gap: 2px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.step-tab {
  background: none; border: none; color: var(--text-faint);
  padding: 9px 14px; cursor: pointer; font-size: 12px; font-weight: 600;
  font-family: var(--font);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s; white-space: nowrap;
}
.step-tab:hover { color: var(--text); }
.step-tab.active {
  color: var(--accent); border-bottom-color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}

.wizard-body { flex: 1; padding: 24px; }

.step-pane { display: none; }
.step-pane.active { display: block; }

.wizard-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
}

.derived-mini {
  display: flex; gap: 16px; font-size: 12px; color: var(--text-muted);
}

.char-vault-mobile-filter-btn,
.char-vault-mobile-drawer {
  display: none;
}
.derived-mini strong { color: var(--text); }

/* ══════════════════════════════════════════════════════════
   8. MOBILE WIZARD SHELL
   ══════════════════════════════════════════════════════════ */
/* Mobile Wizard Shell components — hidden by default, shown on mobile */
.wiz-mobile-nav,
.wiz-mobile-float-actions,
.wiz-mobile-review { display: none; }

.wiz-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,.52);
}
.wiz-mobile-backdrop[hidden] { display: none; }

.wiz-mobile-drawer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 84vh;
  overflow: auto;
  padding: 16px 14px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, var(--surface2), var(--bg));
  box-shadow: 0 -20px 50px rgba(0,0,0,.45);
}
.wiz-mobile-drawer h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--gold);
}
.wiz-mobile-step-list { display: grid; gap: 8px; }
.wiz-mobile-step-list button {
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  font-weight: 900;
}
.wiz-mobile-step-list button.active {
  border-color: var(--gold);
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.wiz-mobile-derived-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
/* "Overridden" badge on a mobile stat tile — the derived drawer's tiles and the mobile
   review snapshot's tiles both use it. A footnote on the number, never a rival to it:
   the faintest text colour on a hairline pill, below the label, no alarm colour.
   Defined outside the 720px query, same as .wiz-mobile-derived-grid it belongs to. */
.wiz-mob-derived-override-tag,
.wiz-mob-rev-stat-override-tag {
  display: block;
  width: fit-content;
  margin: 5px auto 0;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-faint) 8%, transparent);
  color: var(--text-faint);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.7;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .wiz-mobile-nav {
    display: grid;
    grid-template-columns: 1fr auto 44px;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 25;
    padding: 8px 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, transparent), color-mix(in srgb, var(--bg) 86%, transparent) 78%, transparent);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.35);
  }
  .wiz-mobile-step-chip {
    min-height: 40px;
    border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    color: var(--gold);
    font-weight: 900;
  }
  .wiz-mobile-derived-btn {
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface2);
    color: var(--gold);
    font-weight: 900;
  }
  .save-state-pill--mobile {
    justify-self: center;
    font-size: 10px;
    padding: 2px 8px;
    flex-shrink: 0;
  }
  .wiz-mobile-float-actions {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    gap: 8px;
  }
  .wiz-mobile-float-actions button {
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface2) 96%, transparent);
    color: var(--text);
    font-weight: 900;
    padding: 0 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.38);
  }
  .wiz-mobile-next {
    background: color-mix(in srgb, var(--gold) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--gold) 55%, transparent) !important;
    color: var(--gold) !important;
  }

  .wizard-shell {
    min-height: calc(100vh - 118px);
    min-height: calc(100dvh - 118px);
    border-radius: 18px;
    overflow: visible;
  }

  .wizard-steps-nav {
    display: none;
  }

  .wizard-footer {
    display: none;
  }

  .step-tab {
    flex: 0 0 auto;
    min-width: 82px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 999px 999px 0 0;
    background: var(--input-bg);
  }

  .step-tab.active {
    background: color-mix(in srgb, var(--accent) 12%, var(--input-bg));
  }

  .wizard-body {
    padding: 16px 12px 110px;
  }



  .derived-mini {
    grid-column: 1 / -1;
    order: -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    font-size: 11px;
  }

  .derived-mini > * {
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--input-bg);
    text-align: center;
  }

  .step-content h2 {
    font-size: 30px;
    margin-bottom: 10px;
  }

  .setup-intro,
  .step-lede,
  .homebrew-step .step-lede,
  .class-step .step-lede {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .setup-section {
    margin-bottom: 16px;
  }

  .section-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface2);
  }

  .section-title {
    min-width: 0;
  }

  .section-hint {
    grid-column: 1 / -1;
    margin-left: 0;
    text-align: left;
  }

  .section-chevron {
    margin-left: 0;
  }

  .mode-cards,
  .form-grid-2,
  .ability-grid,
  .class-gallery-grid,
  .class-field-grid,
  .mc-block-body > .form-grid-2,
  .hb-grant-grid,
  .hb-panel-grid,
  .hb-panel-grid-profs,
  .hb-number-grid,
  .hb-number-grid-abilities,
  .spell-summary-grid,
  .spell-filter-row,
  .spell-ledger-columns,
  .spell-columns,
  .review-layout,
  .review-rail,
  #rv-combat,
  #rv-abilities,
  #rv-action-economy {
    grid-template-columns: 1fr;
  }

  .mode-card {
    min-height: 0;
    padding: 16px;
  }

  .id-select-row,
  .id-bonus-row,
  .hb-add-row,
  .class-ledger-toolbar,
  .class-gallery-head,
  .cat-row,
  .filter-bar,
  .inv-row,
  .inv-res,
  .spell-summary-head,
  .spell-capacity-head {
    align-items: stretch;
    flex-direction: column;
  }

  .mc-controls { margin: 0; }
  .mc-add-class-btn { width: 100%; }

  .class-total-seal {
    width: 100%;
    min-width: 0;
  }

  .class-gallery-card {
    min-height: 0;
  }

  .class-gallery-copy {
    width: 100%;
    padding: 18px;
  }

  /* NOTE: .class-gallery-art::after / .class-art-svg mobile overrides live in
     style-mobile.css — it loads after style-wizard-steps.css, so equal-specificity
     overrides only win the cascade from there. */

  .class-gallery-action {
    margin: 0 18px 18px;
  }

  .cat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cat-btn {
    min-width: 0;
  }

  .inv-results {
    max-height: none;
  }

  .inv-row,
  .inv-res {
    flex-wrap: wrap;
  }

  .iv-spacer,
  .ir-spacer {
    display: none;
  }

  .iv-atk {
    order: 5;
    width: 100%;
    margin: 6px 0;
  }

  .inv-btn,
  .ir-add {
    min-height: 40px;
  }

  .spell-filter-row {
    display: grid;
  }

  .spell-toggle-pill {
    white-space: normal;
  }

  .spell-list {
    max-height: none;
  }

  .spell-item,
  .spell-selected-row {
    grid-template-columns: 1fr;
  }

  .spell-add-btn,
  .spell-cadence-chip {
    justify-content: center;
    width: calc(100% - 20px);
    margin: 0 10px 10px;
  }

  .spell-detail-header,
  .spell-detail-row {
    grid-template-columns: 1fr;
  }

  .review-rail {
    display: flex;
    position: static;
  }

  .review-hero-card,
  .hb-banner {
    padding: 18px;
  }

  .hb-banner p {
    margin-right: 0;
  }

  .theme-modal,
  .missing-choices-modal {
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  .rich-select-dropdown,
  .picker-dropdown,
  .hb-library-menu {
    max-width: calc(100vw - 24px);
  }

  .class-skill-card,
  .cf-card,
  .ability-box,
  .hb-library-option,
  .inv-res,
  .inv-row,
  .spell-detail-panel,
  .review-rail-card,
  .review-bands,
  .review-band {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .cf-card-header,
  .cf-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .cf-card-status {
    width: 100%;
    justify-content: flex-start;
  }

  .cf-status-pill,
  .cf-choices-badge {
    white-space: normal;
  }

  .class-skill-card .cf-card-body {
    overflow: visible;
  }

  .ability-box {
    grid-template-columns: minmax(52px, auto) minmax(0, 1fr) auto;
  }

  .hb-library-option {
    grid-template-columns: minmax(0, 1fr);
  }

  .hb-library-badges {
    justify-content: flex-start;
  }

  .inv-res,
  .inv-row {
    gap: 8px;
  }

  .spell-detail-panel {
    max-width: 100%;
  }

  .review-rail-card .btn,
  .review-rail-card button {
    width: 100%;
    justify-content: center;
  }

  /* ── Mobile Review Step ── */
  .wiz-desktop-review { display: none; }
  .wiz-mobile-review { display: block; padding-bottom: 80px; }

  .wiz-mobile-card {
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: var(--surface2);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .wiz-mobile-card-head {
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
  }
  .wiz-mobile-card-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 0.5px;
  }
  .wiz-mobile-card-body {
    padding: 12px 14px;
  }

  .wiz-mobile-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }
  .wiz-mobile-action-grid .action-primary {
    grid-column: 1 / -1;
    min-height: 54px;
    border-radius: 16px;
    background: var(--gold);
    color: var(--on-accent);
    font-weight: 900;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  .wiz-mobile-action-grid .wiz-mob-action-btn,
  .wiz-mobile-action-grid button:not(.action-primary) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 10px;
    text-decoration: none;
    text-align: center;
  }
  .wiz-mobile-action-grid .wiz-mob-action-btn.disabled,
  .wiz-mobile-action-grid button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .wiz-mobile-rev-name {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .wiz-mobile-rev-meta { color: var(--text-muted); font-size: 13px; line-height: 1.5; }

  .wiz-mobile-rev-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 10px;
    margin: 0;
  }
  .wiz-mobile-rev-stats-grid dt {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 6px 4px 2px;
    border: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    background: var(--surface);
    margin: 3px;
  }
  .wiz-mobile-rev-stats-grid dd {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    padding: 2px 4px 8px;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: var(--surface);
    margin: 0 3px 3px;
  }

  .wiz-mobile-rev-list {
    padding: 8px 12px;
    margin: 0;
    display: grid;
    gap: 2px;
  }
  .wiz-mobile-rev-list dt {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 3px 0 0;
  }
  .wiz-mobile-rev-list dd {
    font-size: 13px;
    color: var(--text);
    font-weight: 700;
    margin: 0;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border);
  }
  .wiz-mobile-rev-list dd:last-child { border-bottom: none; }

  /* Mobile review skill/save rows */
  .wiz-mob-rev-skill-row {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    gap: 6px;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  }
  .wiz-mob-rev-save-row {
    display: grid;
    /* Fourth column added with the save tier chip -- same shape as the skill
       row above, whose third column is its own chip cell. */
    grid-template-columns: 22px 1fr auto auto;
    gap: 6px;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  }
  .wiz-mob-rev-skill-row:last-child,
  .wiz-mob-rev-save-row:last-child { border-bottom: none; }
  /* Third column of both row shapes: 0-2 chips, laid out by _rvMobChipCell.
     Always present even when empty, so the modifier in the fourth column stays
     in the same place down the whole list. */
  .wiz-mob-rev-chips {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
  }
  .wiz-mob-rev-src-chip {
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    color: var(--gold);
    white-space: nowrap;
    line-height: 1.4;
  }
  .wiz-mobile-rev-list {
    padding: 0;
  }

  /* Review snapshot stat tiles */
  .wiz-mobile-rev-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
    padding: 10px;
  }
  .wiz-mob-rev-stat {
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    padding: 9px 6px;
    text-align: center;
  }
  .wiz-mob-rev-stat b {
    display: block;
    color: var(--gold);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.05;
  }
  .wiz-mob-rev-stat span {
    display: block;
    margin-top: 4px;
    color: var(--text-faint);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  /* Overridden stat tile (max HP under a homebrew override): dashed rather than solid,
     which marks it without competing with the gold value inside. The badge itself is
     styled with .wiz-mob-derived-override-tag above, outside this query. */
  .wiz-mob-rev-stat--overridden {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--border-strong) 80%, transparent);
  }
  /* Identity, attacks, spell rows */
  .wiz-mob-rev-id-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  }
  .wiz-mob-rev-id-row:last-child { border-bottom: none; }
  .wiz-mob-rev-id-row > span { color: var(--text-muted); font-size: 13px; }
  .wiz-mob-rev-id-row > strong { color: var(--text); font-size: 14px; font-weight: 700; text-align: right; }
  /* Inventory card: mirrors the desktop band's markup verbatim (carried weight, coins,
     item list), which brings its own internal spacing but no card padding, so it would
     otherwise sit flush against the card edges. */
  #wizMobRevInventory { padding: 12px 14px; }
  /* Readiness card content */
  #wizMobRevReadiness strong { color: var(--gold); display: block; margin-bottom: 4px; }
  #wizMobRevReadiness ul { margin: 4px 0 0 16px; padding: 0; color: var(--text-muted); font-size: 13px; }
  /* Combat mirrors desktop action economy */
  #wizMobRevCombat details summary { padding: 10px 14px; cursor: pointer; font-weight: 700; color: var(--text-muted); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
  #wizMobRevCombat details[open] summary { color: var(--gold); }
}

/* ══════════════════════════════════════════════════════════
   9. STEP CONTENT & FORMS
   ══════════════════════════════════════════════════════════ */
.step-content h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 16px; color: var(--text); }
.hint { font-size: 13.5px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }

/* --- Forms --- */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.field-hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

input[type=text], input[type=number], select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font);
  width: 100%;
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
::placeholder { color: var(--text-faint); }
select option { background: var(--surface); }

fieldset.fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
fieldset.fieldset legend {
  padding: 0 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   10. ABILITY GRID
   ══════════════════════════════════════════════════════════ */
.ability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
  max-width: 760px;
}
.ability-box {
  background: linear-gradient(180deg, var(--surface2), var(--input-bg));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "name   name    name"
    "input  detail  result";
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
}
.ability-box .ab-name {
  grid-area: name;
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--text); line-height: 1;
}
.ability-input {
  grid-area: input;
  width: 60px; display: block;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 7px;
  color: var(--text); font-size: 22px; font-weight: 700; text-align: center;
  font-family: var(--font); padding: 4px 0;
  -moz-appearance: textfield;
}
.ability-input::-webkit-outer-spin-button, .ability-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ability-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* middle bridge column: bonus chips + total, centered in the gap between input and mod */
.ability-box .ab-detail {
  grid-area: detail;
  display: flex; flex-direction: column; gap: 3px;
  align-items: center; justify-content: center; min-width: 0;
}
.ability-bonuses { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.ability-bonus-line {
  display: inline-flex; align-items: baseline; gap: 3px;
  background: var(--badge-grant-bg); color: var(--badge-grant-fg);
  border: 1px solid var(--badge-border); border-radius: 4px;
  padding: 1px 6px; font-size: 10px; font-weight: 700;
  text-transform: capitalize; white-space: nowrap;
}
.ability-total { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.ability-total:empty { display: none; }
/* Item #6 (round 4): a dotted-underline "explain this number" affordance shared by the wizard
   total, the live-play desktop ability box, and the mobile ability stat cards -- reused from
   the existing .iv-prop tooltip convention (equipment-inventory.js/style-play-sheet.css)
   rather than inventing a new pattern. Hover/focus reveals the `title` set in play.js's
   _abilityReasonTitle()/calculator.js's override-source branch. */
.ability-has-reason {
  text-decoration: underline dotted var(--text-faint, #8b96b5);
  text-underline-offset: 2px; cursor: help;
}

/* anchored result block (right) — modifier, ALWAYS present so every card looks complete */
.ability-box .ab-result {
  grid-area: result;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 0; width: 56px;
}
.ability-mod { font-family: var(--font-display); font-size: 27px; font-weight: 700; color: var(--num); line-height: 1; }
.ability-box .ab-mod-label { font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-top: 1px; }





/* ── Derived preview strip ── */
.derived-preview {
  display: flex; gap: 16px; flex-wrap: wrap;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
}
.dp-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 60px; }
.dp-label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.dp-val { font-size: 20px; font-weight: 700; color: var(--num); }

/* ── Skills grid ── */
.skills-grid { display: flex; flex-direction: column; gap: 4px; }
.skill-row {
  display: grid;
  grid-template-columns: 110px 1fr 40px 40px;
  align-items: center; gap: 8px;
}
.skill-row select { padding: 3px 6px; font-size: 12px; }
.skill-label { font-size: 13px; }
.skill-ab { font-size: 11px; color: var(--text-muted); }
.skill-bonus { font-size: 13px; font-weight: 700; text-align: right; color: var(--accent); }

/* ── Weapons ── */
/* Raw .weapon-row: lives hidden in #weapons-list (the calc reads it; the inventory
   displays weapons as .inv-row summary rows instead). Minimal tidy styling kept for
   any custom-weapon fallback that surfaces editable inputs. */
.weapon-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.weapon-row:last-child { border-bottom: none; }
.weapon-row input[type="hidden"] { display: none; }
.weapon-row .w-name-display { font-weight: 600; font-size: 13px; color: var(--text); margin-right: auto; }
.weapon-row .w-ability { width: 62px; padding: 4px 6px; font-size: 12px; }
.weapon-row .w-damage  { width: 52px; padding: 4px 6px; font-size: 12px; text-align: center; }
.weapon-row .w-dmgtype { width: 82px; padding: 4px 6px; font-size: 12px; }
.weapon-row .w-prof-label { font-size: 11px; display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.weapon-row .w-atk-display { flex-basis: 100%; font-size: 11.5px; color: var(--num); font-weight: 700; }
.weapon-row .w-props-display { flex-basis: 100%; font-size: 10.5px !important; color: var(--text-faint) !important; margin-left: 0 !important; }
.weapon-row .w-prof-warn { flex-basis: 100%; font-size: 10.5px !important; margin-left: 0 !important; }

/* ══════════════════════════════════════════════════════════
   11. SPELLS (wizard step)
   ══════════════════════════════════════════════════════════ */
.spells-step .step-lede { max-width: 760px; }
.spells-empty-state {
  display: flex; align-items: center; gap: 18px;
  margin-top: 18px; padding: 24px;
  border: 1px dashed var(--border-strong); border-radius: 16px;
  background: linear-gradient(135deg, var(--surface2), var(--input-bg));
}
.spells-empty-state.hidden { display: none !important; }
.spells-empty-orb {
  width: 78px; height: 78px; flex: 0 0 auto; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--accent-strong), var(--accent-glow) 46%, transparent 68%),
    radial-gradient(circle at 55% 62%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 58%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--accent) 18%, transparent);
}
.spells-empty-state h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 28px; line-height: 1.05; color: var(--accent); }
.spells-empty-state p { margin: 0; color: var(--text-muted); line-height: 1.5; }

.spells-ledger-panel { margin-top: 18px; }
.spell-ledger {
  border: 1px solid var(--border-strong); border-radius: 16px;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  overflow: visible; margin-bottom: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 8%, transparent);
}
.spell-ledger-single { padding: 16px 18px 18px; }
.spell-ledger-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text); text-align: left; font: inherit;
}
button.spell-ledger-head { cursor: pointer; }
.spell-ledger-head:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.spell-ledger-single > .spell-ledger-head { padding: 0 0 16px; margin-bottom: 16px; }
.spell-ledger-single.spell-filter-only { border: 0; background: transparent; padding: 0; margin-bottom: 14px; box-shadow: none; }
.spell-ledger-single.spell-filter-only > .spell-ledger-head,
.spell-ledger-single.spell-filter-only > .spell-summary-card,
.spell-ledger-single.spell-filter-only > .spell-capacity-card,
.spell-ledger-single.spell-filter-only > .spell-columns { display: none; }
.spell-ledger-kicker {
  display: block; color: var(--accent); font-size: 11px; font-weight: 900;
  letter-spacing: .13em; text-transform: uppercase;
}
.spell-ledger-title,
#spell-ledger-title {
  display: block; margin: 2px 0 0;
  font-family: var(--font-display); font-size: 31px; line-height: 1.06;
  color: var(--text); font-weight: 800;
}
.spell-ledger-sub,
#spell-ledger-subtitle {
  display: block; margin: 3px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.4;
}
.spell-ledger-chevron { color: var(--accent); font-size: 13px; font-weight: 900; }
.spell-ledger-body { padding: 16px 18px 18px; }
.spell-ledger.collapsed .spell-ledger-body { display: none; }
.spell-ledger.collapsed .spell-ledger-head { border-bottom: 0; }

.spell-summary-card,
.spell-capacity-card,
.spell-filter-card {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--input-bg); margin-bottom: 14px; overflow: hidden;
}
.spell-filter-card { padding: 12px; }
.spell-summary-head,
.spell-capacity-head {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-bottom: 1px solid var(--border);
}
.spell-summary-head span,
.spell-capacity-head span {
  color: var(--accent); font-size: 12px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
}
.spell-summary-head small,
.spell-capacity-head small { color: var(--text-muted); line-height: 1.35; }
.spell-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.spell-summary-cell { background: var(--surface); padding: 13px 14px; min-width: 0; }
.spell-summary-cell strong { display: block; font-family: var(--font-display); color: var(--num); font-size: 26px; line-height: 1; }
.spell-summary-cell span { display: block; color: var(--text-muted); font-size: 12px; margin-top: 5px; line-height: 1.25; }

.spell-slots-display { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 12px; }
.spell-slot-pill,
.slot-badge {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface2); padding: 7px 10px;
  color: var(--text); font-size: 12px; font-weight: 800; line-height: 1.2;
}
.spell-slot-pill strong,
.slot-badge span { color: var(--accent); font-weight: 900; }
.spell-slot-pill.pact { border-color: color-mix(in srgb, var(--badge-arcane-fg) 70%, var(--border)); color: color-mix(in srgb, var(--badge-arcane-fg) 82%, var(--text)); }
.spell-slot-pill.muted { border-style: dashed; color: var(--text-muted); }

.spell-filter-row { display: grid; grid-template-columns: minmax(220px, 1fr) 140px auto auto; gap: 10px; margin: 0 0 10px; align-items: center; }
.mc-spell-filter-row { grid-template-columns: minmax(220px, 1fr); margin-bottom: 14px; }
.spell-filter-row input[type="text"],
.spell-filter-row select { width: 100%; }
.spell-toggle-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; border: 1px solid var(--border); border-radius: 10px;
  padding: 0 12px; color: var(--text-muted); background: var(--surface);
  font-weight: 800; white-space: nowrap; cursor: pointer; user-select: none;
}
.spell-toggle-pill input { cursor: pointer; }
.spell-toggle-pill:has(input:checked) { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.spell-filter-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.spell-filter-chip {
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-muted); padding: 6px 10px; font-size: 12px; font-weight: 800;
  cursor: pointer;
}
.spell-filter-chip:hover,
.spell-filter-chip.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.spell-filter-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

.spell-ledger-columns,
.spell-columns { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 14px; }
.spell-ledger-column { border: 1px solid var(--border); border-radius: 13px; background: var(--input-bg); overflow: hidden; min-width: 0; }
.spell-ledger-column h4 { margin: 0; padding: 12px 14px 3px; color: var(--accent); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.spell-column-hint { margin: 0; padding: 0 14px 10px; color: var(--text-faint); font-size: 11.5px; border-bottom: 1px solid var(--border); line-height: 1.35; }
.spell-list { display: flex; flex-direction: column; gap: 8px; max-height: 430px; overflow-y: auto; border: 0; border-radius: 0; padding: 10px; }
.spell-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 11px; padding: 0;
  background: var(--surface); overflow: hidden; font-size: 12px; flex: 0 0 auto;
}
.spell-selected-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.spell-item:hover { background: var(--surface2); }
.spell-row-main {
  min-width: 0; display: grid; gap: 3px; padding: 10px 11px;
  border: 0; background: transparent; color: inherit; text-align: left;
  font: inherit; cursor: pointer;
}
.spell-row-main:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.spell-name { min-width: 0; font-weight: 800; color: var(--text); line-height: 1.25; }
.spell-summary-line { color: var(--text-muted); font-size: 12.5px; line-height: 1.35; }
.spell-meta { color: var(--text-faint); font-size: 11px; white-space: normal; line-height: 1.35; }
.spell-add-btn {
  margin-right: 10px; border: 1px solid color-mix(in srgb, var(--badge-grant-fg) 65%, var(--border));
  border-radius: 999px; background: color-mix(in srgb, var(--badge-grant-fg) 10%, var(--surface));
  color: var(--badge-grant-fg); padding: 6px 10px; font-size: 12px; font-weight: 900;
  cursor: pointer; white-space: nowrap;
}
.spell-add-btn:hover:not(:disabled),
.spell-add-btn:focus-visible { border-color: var(--badge-grant-fg); background: color-mix(in srgb, var(--badge-grant-fg) 16%, var(--surface)); }
.spell-add-btn:disabled { opacity: .35; cursor: not-allowed; }
.spell-prepared-toggle {
  display: inline-flex; align-items: center; gap: 5px; align-self: stretch;
  padding: 0 0 0 10px; color: var(--text-muted); font-size: 11px; font-weight: 800;
  cursor: pointer; white-space: nowrap;
}
.spell-prepared-toggle input { accent-color: var(--accent); cursor: pointer; }
.spell-prepared-toggle:has(input:checked) { color: var(--accent); }
.spell-cadence-chip {
  margin-right: 10px; min-width: 86px; display: inline-flex; justify-content: center; align-items: center;
  border-radius: 999px; padding: 6px 9px; font-size: 11px; font-weight: 900;
  background: color-mix(in srgb, var(--badge-arcane-fg) 16%, var(--surface));
  color: color-mix(in srgb, var(--badge-arcane-fg) 85%, var(--text));
  border: 1px solid color-mix(in srgb, var(--badge-arcane-fg) 55%, var(--border));
  white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis;
}
.spell-cadence-chip.removable { cursor: pointer; }
.spell-cadence-chip.removable:hover,
.spell-cadence-chip.removable:focus-visible {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 70%, var(--border));
  color: color-mix(in srgb, var(--danger) 78%, var(--text));
  outline: none;
}
.spell-cadence-chip.removable .spell-chip-remove {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.6;
  line-height: 1;
}
.spell-cadence-chip.removable:hover .spell-chip-remove,
.spell-cadence-chip.removable:focus-visible .spell-chip-remove {
  opacity: 1;
  color: var(--accent, #c0392b);
}
.spell-cadence-chip.locked { color: var(--text-muted); border-color: var(--border); background: var(--surface2); }
.spell-empty-result { padding: 18px; color: var(--text-muted); text-align: center; border: 1px dashed var(--border); border-radius: 10px; }

@media (max-width: 900px) {
  .spell-summary-grid,
  .spell-filter-row,
  .spell-ledger-columns,
  .spell-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  .mode-card {
    padding: 10px;
  }
  .mode-card .mode-title {
    font-size: 20px;
  }
}

/* ══════════════════════════════════════════════════════════
   12. MODE CARDS & SETUP SECTIONS
   ══════════════════════════════════════════════════════════ */
/* --- Setup step: section spine pattern (reusable across steps) --- */
.setup-intro { font-size: 13.5px; margin-bottom: 24px; max-width: 640px; }
.setup-section { margin-bottom: 24px; }
.section-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
  width: 100%; background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
}
.section-head:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); border-radius: 6px; }
.section-num {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--accent); border: 1px solid var(--border-strong); border-radius: 99px;
  width: 23px; height: 23px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
}
.section-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.section-hint { font-size: 11.5px; color: var(--text-faint); margin-left: auto; text-align: right; }
/* fold chevron — sits at the far right of the header */
.section-chevron {
  flex-shrink: 0; align-self: center; margin-left: 10px;
  color: var(--text-faint); font-size: 10px; line-height: 1;
  transition: transform 0.18s ease;
}
.section-head .section-hint + .section-chevron { margin-left: 10px; }
.section-head:not(:has(.section-hint)) .section-chevron { margin-left: auto; }
.setup-section.collapsed .section-chevron { transform: rotate(-90deg); }
.section-head:hover .section-chevron { color: var(--text-muted); }
/* collapsible body */
.section-body { overflow: hidden; }
.setup-section:has(.rich-select-dropdown.open) .section-body { overflow: visible; }
.setup-section.collapsed .section-body { display: none; }
.setup-section.collapsed { margin-bottom: 12px; }

/* "needs a choice" marker — amber pill on a picker or section header */
.needs-choice-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 99px;
  background: var(--badge-warn-bg); color: var(--badge-warn-fg);
  border: 1px solid var(--badge-border);
  vertical-align: middle;
}
.needs-choice-pill::before { content: '●'; font-size: 7px; }
/* Completion state: green "✓ Chosen" */
.needs-choice-pill.badge-chosen {
  background: var(--badge-grant-bg);
  color: var(--badge-grant-fg);
}
.needs-choice-pill.badge-chosen::before { content: ''; display: none; }
/* hide the section-header marker when that section has no pending choice */
.section-needs[hidden] { display: none; }

/* ── Agent Access (API tokens) ── */
.agent-token-list {
  list-style: none; margin: 0 0 12px; padding: 0; max-width: 620px;
  display: flex; flex-direction: column; gap: 8px;
}
.agent-token-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 13px; color: var(--text);
}
.agent-token-row button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius);
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid var(--border-strong);
  transition: filter .15s ease, border-color .15s ease, color .15s ease;
  flex-shrink: 0;
}
.agent-token-row button:hover { border-color: var(--danger); color: var(--danger); }
.agent-token-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius);
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid var(--border-strong);
  transition: filter .15s ease, border-color .15s ease, color .15s ease;
}
.agent-token-btn:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.agent-token-generate-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.agent-token-generate-row input {
  flex: 1 1 240px; min-width: 180px; padding: 8px 12px;
  border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--input-bg); color: var(--text); font-family: var(--font); font-size: 13px;
}
#agent-token-reveal {
  max-width: 620px; margin-top: 14px; padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
#agent-token-reveal p { margin: 0 0 8px; font-size: 12px; color: var(--text-muted); }
#agent-token-reveal-value {
  display: block; font-family: monospace; font-size: 12.5px;
  color: var(--accent); background: var(--input-bg);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 8px 10px; overflow-x: auto; white-space: nowrap;
  user-select: all;
}
#agent-token-copy-btn { margin-top: 10px; }
#agent-token-copy-fallback {
  display: block; width: 100%; margin-top: 10px; box-sizing: border-box;
  font-family: monospace; font-size: 12px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 8px 10px; resize: vertical;
}

/* ── Ruleset (mode) cards ── */
.mode-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px; max-width: 620px;
}
.mode-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface2), var(--input-bg));
  border: 2px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; cursor: pointer; text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.mode-card:hover { border-color: var(--border-strong); }
.mode-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.mode-pick {
  position: absolute; top: 13px; right: 13px;
  width: 18px; height: 18px; border-radius: 99px;
  border: 2px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.mode-card.selected .mode-pick { border-color: var(--accent); background: var(--accent); }
.mode-card.selected .mode-pick::after {
  content: ''; width: 7px; height: 7px; border-radius: 99px; background: var(--on-accent);
}
.mode-card .mode-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--text); line-height: 1.1; }
.mode-card .mode-edition { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 2px 0 10px; font-weight: 600; }
.mode-card .mode-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.mode-card .mode-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.mode-card .mode-tag {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  background: var(--badge-info-bg); color: var(--badge-info-fg); border: 1px solid var(--badge-border);
}

/* Editor save state: saved / unsaved / saving. */
.save-state-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-muted); white-space: nowrap; }
.save-state-pill.saved { color: var(--success); border-color: color-mix(in srgb, var(--success) 50%, transparent); }
.save-state-pill.unsaved { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.save-state-pill.saving { opacity: .7; }
.save-state-pill.conflict { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 60%, transparent); }

/* Shown when the stored character changed elsewhere; same look as Play's banner. */
.save-conflict-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center;
  padding: 10px 16px; background: var(--danger); color: #fff; font-size: 13px; font-weight: 800; text-align: center; }
.save-conflict-banner button { font: inherit; font-size: 12px; padding: 4px 12px; cursor: pointer;
  border-radius: var(--radius); border: 1px solid #fff; background: transparent; color: #fff; }
.save-conflict-banner button:hover { background: rgba(255, 255, 255, .2); }

/* ── Info box ── */
.info-box {
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
  font-size: 13px;
}

/* Light theme, phone wizard bar: the step chip, the derived-stats button and Next set 13px text in --gold (#8a6a3a), which
   measures 3.1:1 on the parchment wash. Darken the text only (token unchanged; dark is untouched). */
@media (max-width: 720px) {
  [data-theme="light"] .wiz-mobile-step-chip, [data-theme="light"] .wiz-mobile-derived-btn,
  [data-theme="light"] .wiz-mobile-next { color: color-mix(in srgb, var(--gold) 55%, var(--text)) !important; }
}