/* ============================================================
   style-wizard-steps.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 13-20: review dossier, identity step, equipment/inventory, homebrew, class step, feature/class-feature accordions, eldritch invocations
   Load order matters - see templates/base.html <link> order.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   13. REVIEW DOSSIER
   ══════════════════════════════════════════════════════════ */
.review-step {
  --review-card: color-mix(in srgb, var(--surface2) 82%, var(--bg));
  --review-card-soft: color-mix(in srgb, var(--input-bg) 88%, var(--accent) 3%);
  --review-line: color-mix(in srgb, var(--border-strong) 76%, var(--accent) 24%);
  --review-wash: color-mix(in srgb, var(--accent) 11%, transparent);
}
.review-step .step-lede { margin: -8px 0 18px; color: var(--text-muted); line-height: 1.5; }
.review-hero-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 24px 26px;
  border: 1px solid var(--review-line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 38%),
    linear-gradient(180deg, var(--review-card), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}
.review-hero-card::after {
  content: "";
  position: absolute;
  right: -54px;
  top: -64px;
  width: 210px;
  height: 210px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 22px color-mix(in srgb, var(--accent) 7%, transparent);
  opacity: .72;
  pointer-events: none;
}
.review-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.review-hero-card h3,
#rv-hero-name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 700;
  line-height: .95;
  color: var(--text);
}
#rv-hero-line { position: relative; z-index: 1; margin-top: 10px; color: var(--text-muted); font-size: 15px; }
.review-hero-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.review-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: 999px;
  background: var(--review-wash);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}
/* ── "Overridden" badges ────────────────────────────────────────────────────
   These sit beside a number a homebrew override replaced. They are a footnote on
   that number, never a competitor for it: one step smaller than the smallest label
   near them, uppercase and letter-spaced so they read as a marker, in --text-faint
   on a hairline so they carry no alarm colour of their own. */
.review-chip-override-tag,
.rv-hp-override-tag {
  display: inline-block;
  margin-left: 6px;
  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: 8.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}
/* The overridden value itself: the number stays the loud thing, it just stops being
   the engine's answer, so it is only marked — dotted underline — not recoloured. */
.rv-hp-override-value {
  text-decoration: underline dotted color-mix(in srgb, var(--text-faint) 80%, transparent);
  text-underline-offset: 3px;
}

.review-layout { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 18px; align-items: start; }
/* Item #9 (round 2): the rail used to be `position: sticky`, which visually "stops" scrolling
   once it hits its offset, then abruptly "catches up" with the (much taller) right column
   near the very bottom of the page -- the two columns look out of sync for most of the
   scroll and then jolt back together at the end. The floating `.review-sticky-save` bar
   already covers persistent access to Save/status, so the rail doesn't need to pin itself;
   let both columns scroll together in normal document flow. */
.review-rail { display: flex; flex-direction: column; gap: 12px; }
.review-rail-card,
.review-band {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--review-card), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 7%, transparent);
}
.review-rail-card { padding: 14px; }
details.review-rail-card { padding: 0; overflow: hidden; }
.review-rail-card h3 { margin: 0 0 11px; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: .11em; }
.review-rail-card summary,
.review-band summary {
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.review-rail-card summary::-webkit-details-marker,
.review-band summary::-webkit-details-marker { display: none; }
.review-rail-card summary { padding: 13px 14px; font-size: 12px; }
.review-band summary { padding: 15px 18px; border-bottom: 1px solid transparent; font-size: 12px; }
.review-rail-card summary:focus-visible,
.review-band summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--accent-glow);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.review-rail-card summary::after,
.review-band summary::after { content: "+"; float: right; color: var(--accent); font-weight: 900; }
.review-rail-card[open] summary::after,
.review-band[open] summary::after { content: "-"; }
.review-rail-card[open] summary { border-bottom: 1px solid var(--border); }
.review-band[open] summary { border-bottom-color: var(--border); }
details.review-rail-card > div { padding: 13px 14px 14px; }
.review-readiness {
  margin-bottom: 12px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 10px;
  background: var(--review-wash);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.review-readiness strong { display: block; margin-bottom: 3px; color: var(--text); }
.review-readiness ul { margin: 6px 0 0 18px; }
.review-readiness li { margin: 2px 0; }
.review-rail-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
.review-rail-card .btn.disabled,
.review-rail-card .btn:disabled {
  opacity: 0.45;
  border: 1px solid var(--border-strong);
  cursor: not-allowed;
  filter: none;
}
.review-unsaved-note { margin: 11px 0 0; color: var(--text-faint); font-size: 11.5px; line-height: 1.4; }
.rv-rail-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.rv-rail-row:last-child { border-bottom: 0; }
.rv-rail-row span { color: var(--text-muted); font-size: 12px; }
.rv-rail-row strong { color: var(--text); text-align: right; font-size: 12.5px; }
.review-bands { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.review-band { overflow: hidden; }
.review-band > dl,
.review-band > div,
.review-band > textarea { margin: 0; }
.review-band[open] > dl,
.review-band[open] > div,
.review-band[open] > textarea { padding: 15px 18px 18px; }
.review-band dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 8px 16px; }
.review-band dt { color: var(--text-muted); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.review-band dd { min-width: 0; color: var(--text); font-size: 13.5px; line-height: 1.42; }
#rv-combat { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
#rv-combat dt { color: var(--accent); }
#rv-combat dd { margin: -2px 0 5px; font-size: 15px; font-weight: 900; color: var(--num); }
#rv-abilities { grid-template-columns: repeat(6, minmax(74px, 1fr)); }
#rv-abilities dt,
#rv-abilities dd { text-align: center; }
#rv-abilities dd { font-weight: 900; color: var(--num); }
#rv-saves,
#rv-prof-summary { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.review-compat-targets { display: none; }
#rv-skills { display: block; }
.rv-ref-group { margin-top: 12px; }
.rv-ref-group:first-child { margin-top: 0; }
.rv-ref-group h4 { margin: 0 0 6px; color: var(--text-muted); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.rv-ref-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.rv-ref-tags span { border: 1px solid var(--border); border-radius: 999px; padding: 4px 7px; background: var(--review-card-soft); color: var(--text); font-size: 11px; font-weight: 800; }
.rv-muted { color: var(--text-muted); font-size: 12px; }
.rv-skill-list { display: grid; gap: 4px; }
.rv-skill-row {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) 38px;
  gap: 6px;
  align-items: center;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--review-card-soft);
}
.rv-skill-name { color: var(--text); font-size: 12px; font-weight: 800; }
.rv-skill-name small { margin-left: 5px; color: var(--text-faint); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.rv-skill-mod { color: var(--num); font-size: 13px; text-align: right; }
.rv-skill-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
.rv-skill-tags em,
.rv-spell-pill em {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  background: var(--badge-prof-bg);
  color: var(--badge-prof-fg);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#rv-attacks { display: block; }
#rv-attacks dt {
  margin-top: 10px;
  padding: 11px 13px 0;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
  background: var(--review-card-soft);
  color: var(--accent);
}
#rv-attacks dt:first-child { margin-top: 0; }
#rv-attacks dd {
  padding: 0 13px 12px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 11px 11px;
  background: var(--review-card-soft);
  font-weight: 800;
}
#rv-action-economy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rv-action-bucket {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--review-card-soft);
  padding: 12px;
}
.rv-action-bucket h4,
.rv-spell-group h4 { margin: 0 0 8px; color: var(--accent); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.rv-action-bucket ul { margin: 0; padding-left: 18px; color: var(--text); font-size: 12.5px; line-height: 1.55; }
.rv-action-bucket li { margin: 3px 0; }
.rv-empty { color: var(--text-faint); font-size: 12.5px; font-style: italic; }

/* Review > Inventory & Currency band: carried weight, above the items it counts.
   Markup owned by _renderReviewCarry() in static/js/wizard-homebrew-review.js. Built on
   the review's own sub-card recipe (--review-card-soft on a --border hairline, an
   uppercase --accent h4) like .rv-action-bucket and .rv-spell-group, so it belongs to
   this screen rather than being the step-6 panel pasted in. The bar and the advisory note
   inside it reuse .carry-bar/.carry-fill/.carry-warning from the equipment step further
   down this file, band ramp included -- one set of band visuals for both steps. */
.rv-carry {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--review-card-soft);
}
.rv-carry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}
.rv-carry-head h4 {
  margin: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.rv-carry-figure { color: var(--text-muted); font-size: 12px; }
.rv-carry-figure b {
  margin-right: 2px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--num);
}
.rv-carry-pdl {
  margin: 6px 0 0;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rv-carry .carry-bar { margin-top: 8px; }

/* Item #8 (round 2): Review > Inventory & Currency band. */
.rv-inv-currency { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rv-inv-coin {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
  background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
}
.rv-inv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rv-inv-list li { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.rv-inv-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 8px; border-radius: 99px; color: var(--badge-grant-fg); background: var(--badge-grant-bg);
}
#rv-spell-list { display: flex; flex-direction: column; gap: 10px; }
.rv-spell-group {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--review-card-soft);
  padding: 12px;
}
.rv-spell-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-spell-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 800;
}
.features-auto { font-size: 12.5px; line-height: 1.55; }
/* Features & Traits band must not clip tall lists — override the blanket overflow:hidden */
#rv-features-band { overflow: visible; }
.features-auto .fa-hdr { font-weight: 900; color: var(--accent-gold, #c8a85a); margin: 10px 0 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.features-auto .fa-hdr:first-child { margin-top: 0; }
.features-auto .fa-entry { margin: 0 0 6px; color: var(--text-muted); }
.features-auto .fa-entry strong { color: var(--text, #e6e6e6); }
/* formatDescriptionHTML() output right after the bold name -- drop the browser
   default top/bottom <p>/<ul> margin so it doesn't stack on top of .fa-entry's
   own compact 6px bottom margin. */
.features-auto .fa-entry > p:first-child, .features-auto .fa-entry > ul:first-child { margin-top: 2px; }
.features-auto .fa-entry > p:last-child, .features-auto .fa-entry > ul:last-child { margin-bottom: 0; }
.features-auto .fa-empty { color: var(--text-muted, #888); font-style: italic; }
.review-band textarea[name="notes"] { min-height: 132px; resize: vertical; border-radius: 0; border-width: 0; background: var(--review-card-soft); }
.review-band[open] textarea[name="notes"] { display: block; margin: 15px 18px 18px; padding: 12px; width: calc(100% - 36px); border: 1px solid var(--border); border-radius: 11px; }
.save-status { margin-top: 14px; font-size: 13px; color: var(--badge-grant-fg); min-height: 18px; }
.save-status.error { color: var(--danger); }
@media (max-width: 980px) {
  .review-layout { grid-template-columns: 1fr; }
  .review-rail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rv-readiness-card { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .review-hero-card { padding: 20px; border-radius: 14px; }
  .review-rail { display: flex; }
  .review-band dl,
  #rv-combat,
  #rv-abilities,
  #rv-action-economy { grid-template-columns: 1fr; }
  #rv-abilities dt,
  #rv-abilities dd { text-align: left; }
  .rv-skill-row { grid-template-columns: 1fr auto; }
  .rv-skill-tags { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════
   14. IDENTITY STEP
   ══════════════════════════════════════════════════════════ */

/* selector row above each origin's nested detail panel */
.id-select-row { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.id-select-row .id-select { flex: 1; }
.id-select-row #species-badge:empty, .id-select-row #background-badge:empty { display: none; }

/* nested detail panel (the "configure what you picked" container) */
.identity-detail.id-panel {
  margin-top: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
/* keep a lightweight fallback for any .identity-detail not using a panel */
.identity-detail:not(.id-panel) {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.identity-detail-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.id-stat {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 12px;
}
.id-stat strong { color: var(--accent); }

/* sub-sections inside the detail panel */
.id-subfield { margin-top: 12px; }
.id-subfield:first-child { margin-top: 0; }
.id-choice-list { margin-top: 6px; }
.id-choice-selects { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* grouped pickers (ability bonuses, origin feat) */
.id-pickgroup {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.id-pickgroup:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.id-bonus-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.id-bonus-field label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 3px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.id-bonus-field select { width: 92px; padding: 5px 7px; font-size: 13px; }
.id-bonus-hint { font-size: 11px; color: var(--text-muted); align-self: flex-end; padding-bottom: 5px; }
.id-feat-select { width: 100%; padding: 6px 9px; font-size: 13px; }
.id-feat-desc { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.55; }


.trait-item {
  margin-bottom: 4px;
}
.trait-item summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 4px;
  border-radius: 4px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trait-item summary::-webkit-details-marker { display: none; }
.trait-item summary::before {
  content: "▶";
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.trait-item[open] summary::before { transform: rotate(90deg); }
.trait-item summary:hover { background: var(--surface2); }
.trait-item p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 6px 4px 4px 18px;
  margin: 0;
}
/* formatDescriptionHTML() output can emit several <p>/<ul> elements for a
   multi-paragraph trait (each keeps its own top/left padding above, giving
   readable paragraph spacing) -- give a bullet list the same left/vertical
   rhythm as a <p> here, since .desc-list's own default (padding-left:18px,
   small margin) isn't tuned for this specific indent. */
.trait-item .desc-list {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 6px 4px 4px 34px;
  margin: 0;
}

.bg-skill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent2);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  margin: 0 4px 4px 0;
}
#bg-feat-desc {
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 6px;
}
/* formatDescriptionHTML() output inside this box already has box padding --
   drop the browser default top/bottom <p>/<ul> margin on the first/last child. */
#bg-feat-desc > p:first-child, #bg-feat-desc > ul:first-child { margin-top: 0; }
#bg-feat-desc > p:last-child, #bg-feat-desc > ul:last-child { margin-bottom: 0; }

.bg-feature-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.bg-equip-list {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.bg-equip-list span {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  margin: 2px 2px 0 0;
}

/* ── Language Picker ── */
.lang-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.lang-option:has(input:checked) {
  border-color: var(--accent-gold, #c9a84c);
  color: var(--accent-gold, #c9a84c);
}
.lang-option input { cursor: pointer; }
.lang-option input:disabled + span,
.lang-option:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }

/* ── Spell Detail Panel ── */
.spell-detail-panel {
  margin-top: 16px; padding: 0; overflow: hidden;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: var(--surface2);
}
.spell-detail-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.spell-detail-header strong { font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: var(--text); flex: 1; }
.spell-detail-body { padding: 14px; }
.spell-detail-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.spd-label {
  color: var(--text-muted); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em;
}
.spd-desc {
  color: var(--text); line-height: 1.55; margin-top: 12px;
  border-top: 1px solid var(--border); padding-top: 12px;
}
/* formatDescriptionHTML() output now supplies real <p>/<br>/<ul> structure here
   (2026-08-15) -- white-space:pre-wrap was only needed for raw .textContent
   and would double-space against the formatter's own breaks if kept. */
.spd-desc > p:first-child, .spd-desc > ul:first-child { margin-top: 0; }
.spd-desc > p:last-child, .spd-desc > ul:last-child { margin-bottom: 0; }
.spd-higher {
  font-size: 12px; color: var(--text-muted); margin-top: 8px;
  font-style: italic; white-space: pre-wrap;
}

/* ── Search Picker ── */
.search-picker {
  position: relative;
}
.picker-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 220px;
  overflow-y: auto;
}
.picker-dropdown.open { display: block; }
.picker-item {
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.picker-item:last-child { border-bottom: none; }
.picker-item:hover { background: var(--surface2); color: var(--accent); }
.picker-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Item rows ── */
.w-name-display {
  font-size: 13px;
  font-weight: 600;
}
.item-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.item-row:last-child { border-bottom: none; }
.item-name-display { font-size: 13px; font-weight: 600; color: var(--text); flex: 1 1 130px; min-width: 110px; }
.item-desc-display { flex-basis: 100%; order: 10; font-size: 11px; color: var(--text-muted, #888); line-height: 1.4; }
.item-desc-display:empty { display: none; }
.item-desc-display > p:first-child, .item-desc-display > ul:first-child { margin-top: 0; }
.item-desc-display > p:last-child, .item-desc-display > ul:last-child { margin-bottom: 0; }
.item-row input.item-qty { width: 56px; flex: 0 0 auto; padding: 4px 6px; text-align: center; }

/* in-row remove (✕) buttons styled to match the inventory's Remove buttons */
.inv-panel .weapon-row .btn-danger,
.inv-panel .item-row .btn-danger {
  background: var(--input-bg); color: var(--text-muted); border: 1px solid var(--border-strong);
  padding: 4px 9px; font-weight: 700; line-height: 1;
}
.inv-panel .weapon-row .btn-danger:hover,
.inv-panel .item-row .btn-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--input-bg); opacity: 1; }

/* ══════════════════════════════════════════════════════════
   15. EQUIPMENT & INVENTORY
   ══════════════════════════════════════════════════════════ */
.equipped-machinery .is-hidden-picker { display: none; }   /* old armor/shield search pickers retired */
/* #weapons-list is now display plumbing only — weapons render as .inv-row summary rows.
   Hide the raw editable rows wherever the list is parked. */
.equipped-machinery #weapons-list { display: none; }
/* legacy armor/shield warning lines are superseded by the per-card "Not proficient" chip
   + the meta line (stealth disadv. / STR req). Keep them in the DOM (JS toggles them) but hidden. */
.equipped-machinery #armor-prof-warning,
.equipped-machinery #armor-str-warning,
.equipped-machinery #armor-stealth-warning,
.equipped-machinery #shield-prof-warning { display: none !important; }
/* keep weapons-list / items-list out of the machinery box once relocated; while in machinery, hide the box chrome */
.equipped-machinery { }
.equipped-machinery > #weapons-list:empty, .equipped-machinery > #items-list:empty { display: none; }

/* ── Carried weight summary ─────────────────────────────────────────────────
   Markup owned by renderCarrySummary() in static/js/wizard-equipment-spells.js.
   Built from the .inv-panel recipe (surface2 on a --border hairline, --radius-lg) so
   it sits above the inventory sections as one of them, not as a banner.
   Band colours come from the shared --carry-* ramp in style-base.css; the four
   modifier classes land on BOTH the bar fill and the warning paragraph, so every rule
   below is scoped to one or the other. */
.carry-summary {
  margin: 0 0 18px;
  padding: 13px 16px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface2);
}
.carry-summary:empty { display: none; }
.carry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 14px;
}
.carry-figure { color: var(--text-muted); font-size: 12.5px; }
.carry-figure b {
  margin-right: 2px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--num);
}
.carry-pdl {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.carry-bar {
  height: 8px;
  margin-top: 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--input-bg);
  overflow: hidden;
}
/* Width is set inline by the renderer from carried/capacity — everything else is here. */
.carry-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--carry-clear);
  transition: width .25s ease, background-color .25s ease;
}
.carry-fill.carry-clear { background: var(--carry-clear); }
.carry-fill.carry-encumbered { background: var(--carry-encumbered); }
/* The top two bands are hatched, sparse then dense, and the ramp also steps down in
   lightness. Between them, the copy naming the band, and the rule weights below, the
   panel still reads correctly with every colour taken out of it. */
.carry-fill.carry-heavily_encumbered {
  background-color: var(--carry-heavily_encumbered);
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--surface2) 55%, transparent) 0 2px,
    transparent 2px 11px);
}
.carry-fill.carry-over_capacity {
  background-color: var(--carry-over_capacity);
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--surface2) 60%, transparent) 0 3px,
    transparent 3px 7px);
}

/* Nothing here blocks anything, so the warning is a note with a coloured rule, not an
   error box. The band name is spelled out in the copy; the rule thickens step by step
   as a second, colour-free signal of how far over the character is. */
.carry-warning {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--carry-clear);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--carry-clear) 10%, var(--input-bg));
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}
.carry-warning.carry-encumbered {
  border-left-color: var(--carry-encumbered);
  background: color-mix(in srgb, var(--carry-encumbered) 11%, var(--input-bg));
}
.carry-warning.carry-heavily_encumbered {
  border-left-width: 4px;
  border-left-color: var(--carry-heavily_encumbered);
  background: color-mix(in srgb, var(--carry-heavily_encumbered) 13%, var(--input-bg));
}
.carry-warning.carry-over_capacity {
  border-left-width: 5px;
  border-left-color: var(--carry-over_capacity);
  background: color-mix(in srgb, var(--carry-over_capacity) 15%, var(--input-bg));
  font-weight: 600;
}

@media (max-width: 980px) {
  .carry-head { display: block; }
  .carry-pdl { display: block; margin-top: 2px; }
}

/* add-browser */
.add-browser { }
.cat-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.cat-btn {
  flex: 1; min-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 6px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2);
  cursor: pointer; font-family: var(--font); transition: border-color .15s, background .15s; position: relative;
}
.cat-btn:hover { border-color: var(--border-strong); }
.cat-btn.on { border-color: var(--accent); background: linear-gradient(180deg, var(--surface2), var(--input-bg)); box-shadow: 0 0 0 1px var(--accent-glow); }
.cat-btn .cat-ic {
  width: 34px; height: 34px; border-radius: 99px; background: var(--input-bg);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  font-family: var(--font-emoji); line-height: 1;
}
.cat-btn.on .cat-ic { background: var(--accent-glow); }
.cat-btn .cat-label { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.cat-btn.on .cat-label { color: var(--accent); }
.cat-btn.cat-soon { opacity: .55; cursor: default; }
.cat-btn .cat-soon-tag { font-size: 7.5px; color: var(--text-faint); }

.filter-bar { margin-bottom: 14px; }
.inv-search { width: 100%; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 7px; color: var(--text); padding: 8px 11px; font-size: 13px; font-family: var(--font); }
.inv-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.filter-context { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.filter-context:empty { display: none; }
.filter-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin: 0 2px 0 6px; }
.filter-label:first-child { margin-left: 0; }
.filter-pill { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-muted); cursor: pointer; font-family: var(--font); }
.filter-pill.on { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

/* results */
.inv-results { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.inv-res { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.ir-name { font-weight: 600; font-size: 13px; color: var(--text); }
.ir-meta { font-size: 11px; color: var(--text-muted); }
.ir-spacer { margin-left: auto; }
.ir-add { font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--accent); background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: var(--on-accent); cursor: pointer; font-family: var(--font); }
.ir-add:hover { filter: brightness(1.06); }
.inv-empty, .inv-more { font-size: 12px; color: var(--text-faint); padding: 12px 4px; text-align: center; }

/* category/type tags (fixes the old cramped Simple/Martial/Heavy text) */
.ir-tag, .iv-tag {
  flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 5px; line-height: 1.5; white-space: nowrap;
  background: var(--badge-info-bg); color: var(--badge-info-fg); border: 1px solid var(--badge-border);
}
.tag-gear { background: var(--badge-arcane-bg); color: var(--badge-arcane-fg); }

/* your inventory list */
.inv-panel { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }

/* Item #16: gold entry row under Your Inventory. */
.eq-gold-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.eq-gold-row label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.eq-gold-row input[type="number"] { width: 110px; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 7px; color: var(--text); padding: 7px 10px; font-size: 13px; font-family: var(--font); }
.eq-gold-row .field-hint { flex-basis: 100%; margin: 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.4; }

/* Item #4 (round 2): full cp/sp/ep/gp/pp coin purse, replaces the single gold field. */
.eq-currency-row { flex-direction: column; align-items: stretch; }
.eq-currency-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.eq-currency-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.eq-currency-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.eq-currency-grid label span { text-align: center; }
.eq-currency-grid input[type="number"] { width: 64px; text-align: center; }


.inv-group-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 28px 0 12px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.inv-group-head:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.inv-cnt { font-size: 9px; color: var(--text-faint); font-weight: 700; }
.inv-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.inv-row:last-child { border-bottom: none; }
.iv-name { font-weight: 600; font-size: 13px; color: var(--text); }
.iv-meta { font-size: 11px; color: var(--text-muted); }
/* weapon meta: damage + individually-hoverable property chips */
.iv-meta .iv-dmg { color: var(--text-muted); }
.iv-meta .iv-meta-sep { color: var(--text-faint); margin: 0 5px; }
.iv-meta .iv-prop {
  color: var(--text-muted); cursor: help;
  text-decoration: underline dotted var(--text-faint); text-underline-offset: 2px;
}
.iv-meta .iv-prop:hover { color: var(--text); text-decoration-color: var(--accent); }
.iv-meta .iv-prop-plain { text-decoration: none; cursor: default; }
.iv-spacer { margin-left: auto; }

/* ── Weapons list columns ─────────────────────────────────────────────────────
   The header row and every weapon row underneath it share one set of widths, declared
   here and used by both. That shared width is the only thing that keeps a header above
   the data it names once rows start differing from each other -- a weapon with no
   properties, a long name, a magic weapon carrying a rarity badge and an Attune button,
   a row wearing the "Not proficient" chip. Cells are fixed rather than flexible for the
   same reason: a flexible cell is sized by its own row's content, so no two rows would
   agree on where a column starts. Empty cells still render (a dash), so a row can never
   shift left past a column it has nothing to say about.
   Everything after the weight cell -- the proficiency chip, the attack figures, the
   buttons -- lives in the free space beyond the columns and needs no width of its own. */
.inv-weapon-col-header,
.inv-row-cols {
  --iv-col-name: 146px;
  --iv-col-type: 68px;
  --iv-col-dmg: 94px;
  --iv-col-props: 140px;
  --iv-col-weight: 52px;
}
.inv-weapon-col-header {
  display: flex; align-items: center; gap: 10px;   /* the gap .inv-row uses */
  padding: 4px 0; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}
.inv-weapon-col-header > span,
.inv-row-cols > .iv-col { flex: 0 0 auto; min-width: 0; }
.inv-row-cols > .iv-col { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.iw-col-name,   .iv-col-name   { width: var(--iv-col-name); }
.iw-col-type,   .iv-col-type   { width: var(--iv-col-type); }
.iw-col-dmg,    .iv-col-dmg    { width: var(--iv-col-dmg); }
.iw-col-props,  .iv-col-props  { width: var(--iv-col-props); }
.iw-col-weight, .iv-col-weight { width: var(--iv-col-weight); }
/* A name too long for its column is trimmed rather than allowed to push the row out of
   alignment; the row carries the full name as its tooltip. */
.iv-col-name .iv-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-col-dmg, .iv-col-props, .iv-col-weight { font-size: 11px; color: var(--text-muted); }
/* A weapon with more properties than fit wraps them inside its own column rather than
   losing the overflowing ones or widening the column: a clipped property is a rule the
   player cannot see, and a widened one moves every column after it out of line. */
.inv-row-cols > .iv-col-props { flex-wrap: wrap; row-gap: 2px; overflow: visible; }
.iv-col-empty { color: var(--text-faint); }
/* A zero-height full-width flex item: everything ordered after it lands on the next line.
   Used to give the proficiency warning a line of its own on a column-laid-out row. */
.inv-row-cols > .iv-row-break { flex-basis: 100%; height: 0; margin: 0; order: 8; }
.inv-row-cols > .iv-prof-warn { order: 9; margin-top: 3px; }
/* The attack block sits just past the last column, so its own spacing competes with the
   columns for the row's width. Tighter here than on the rows that have no columns. */
.inv-row-cols .iv-atk { margin: 0 6px 0 4px; }
.inv-row-cols .iv-atk-stat { padding: 2px 9px; }

/* What a thing weighs -- a column on the weapons list, a chip on the meta line everywhere
   else on the step. A dash is a real answer: the books print no weight for a sling or a
   spell scroll, and "0 lb" reads like a hole in the data instead of a fact about the item. */
.iv-weight { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.iv-weight-none { color: var(--text-faint); }
/* The gear rows are the live editable item-rows, not summary rows, so their weight sits
   between the description and the count input. */
.item-row .item-weight-display { margin-left: auto; padding-right: 4px; }

/* Narrow viewports stack .inv-row into a column (style-wizard-shell.css, <=720px), so
   there are no columns left for a header to sit above and no width for a cell to hold. */
@media (max-width: 720px) {
  .inv-weapon-col-header { display: none; }
  .inv-row-cols > .iv-col { width: auto; overflow: visible; }
  .iv-col-name .iv-name { white-space: normal; overflow: visible; }
  .iv-col-props { white-space: normal; }
}
/* Item #3 (round 4): always-visible flavor description for potion/scroll consumables --
   flex-basis:100% wraps it onto its own line within the .inv-row flex container, same
   trick as the plain-gear .item-desc-display convention above. */
.iv-desc-inline { flex-basis: 100%; order: 10; font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
/* "Not proficient" amber chip (weapons + armor) */
.iv-prof-warn {
  flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap; cursor: help;
  background: var(--badge-warn-bg); color: var(--badge-warn-fg); border: 1px solid var(--badge-border);
}
/* equipped-weapon attack: two separate labeled stats (TO HIT | DAMAGE) so the
   attack bonus and damage roll read as distinct values rather than one cramped blob. */
.iv-atk { display: inline-flex; align-items: stretch; gap: 0; margin: 0 14px 0 10px; flex-shrink: 0; }
.iv-atk-stat { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 12px; text-align: center; }
.iv-atk-stat + .iv-atk-stat { border-left: 1px solid var(--border); }
.iv-atk-num { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--num); line-height: 1; white-space: nowrap; }
.iv-atk-dmg .iv-atk-num { font-size: 13px; font-weight: 700; }
.iv-atk-lbl { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-top: 3px; }
/* An unequipped weapon shows the same two figures it would have if you equipped it. It has
   to read as the quieter of the two states or the list stops saying which weapon is in
   hand, so the numbers drop to the muted text colour and lose the display face's weight --
   both of them tokens, so the distinction survives a theme change. */
.iv-atk-preview { opacity: .72; }
.iv-atk-preview .iv-atk-num { color: var(--text-muted); font-weight: 500; }
.iv-atk-preview .iv-atk-stat + .iv-atk-stat { border-left-color: var(--border); }
.inv-btn { font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-muted); cursor: pointer; font-family: var(--font); }
.inv-equip { border-color: var(--accent); color: var(--on-accent); background: linear-gradient(180deg, var(--accent-strong), var(--accent)); }
.inv-equip:hover { filter: brightness(1.06); }
.inv-equipped { border-color: var(--badge-grant-fg); color: var(--badge-grant-fg); background: var(--badge-grant-bg); }
/* hover-swap: "✓ Equipped" → "Unequip" (with a danger tint to signal the action) */
.inv-equipped .lbl-hover { display: none; }
.inv-equipped:hover .lbl-on { display: none; }
.inv-equipped:hover .lbl-hover { display: inline; }
.inv-equipped:hover { border-color: var(--danger); color: var(--danger); background: var(--input-bg); }
.inv-remove:hover { border-color: var(--danger); color: var(--danger); }
/* Item #10 (round 3): +/- quantity stepper for stackable magic items (potions, scrolls). */
.iv-qty { font-size: 11px; font-weight: 900; color: var(--gold, #d4a843); margin-right: 2px; align-self: center; }
.iv-qty-btn { min-width: 26px; padding: 4px 8px; }
.inv-ac { display: inline-flex; align-items: baseline; gap: 6px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 7px; padding: 5px 12px; margin-top: 8px; }
.inv-ac-v { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--num); }
.inv-ac-l { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

/* ── Magic-item rows (Magic tab): rarity-tinted category pills, chips, attune toggle ── */
/* Vibe/tag chips (Attunement, Buff, Defense…) read as soft pills; mechanical props keep the
   dotted-underline tooltip look from .iv-prop above. */
.iv-meta .iv-vibe {
  cursor: help; text-decoration: none;
  padding: 1px 7px; border-radius: 99px;
  background: var(--input-bg); border: 1px solid var(--border);
}
.iv-meta .iv-vibe:hover { border-color: var(--accent); color: var(--text); }
/* Attune toggle (build-time) — accent-outline to Attune, grant-tinted when attuned. */
.inv-btn.inv-attune { border-color: var(--accent); color: var(--accent); background: transparent; }
.inv-btn.inv-attune:hover { background: var(--accent-glow); filter: none; }
.inv-btn.inv-attuned { border-color: var(--badge-grant-fg); color: var(--badge-grant-fg); background: var(--badge-grant-bg); }
/* Magic-item click-to-expand detail panel: rarity label + attunement line. */
/* Item #6 (round 2): the foldout previously had no background of its own, so it blended
   into the page behind it. Give it a distinct "box" look (own bg/border/inset shadow). */
.inv-detail {
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px); padding: 10px 12px; margin-top: 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.18);
}
.inv-detail-rarity {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 99px; margin: 2px 6px 2px 0;
}
.inv-detail-attune { font-size: 11px; font-style: italic; color: var(--text-muted); margin-bottom: 4px; }

/* ══════════════════════════════════════════════════════════
   16. HOMEBREW STEP
   ══════════════════════════════════════════════════════════ */
.homebrew-step .step-lede {
  max-width: 760px; margin: -4px 0 22px; color: var(--text-muted); font-size: 16px; line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════
   17. CLASS STEP & GALLERY
   ══════════════════════════════════════════════════════════ */
.class-step .step-lede { max-width: 760px; margin: -4px 0 22px; color: var(--text-muted); font-size: 16px; line-height: 1.45; }
.class-gallery-section { margin: 20px 0 26px; }
.class-gallery-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.class-gallery-head h3 { margin: 0; font-family: var(--font-display); font-size: 30px; color: var(--accent); }
.class-gallery-head p { margin: 4px 0 0; color: var(--text-muted); max-width: 760px; }
.class-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.class-gallery-card {
  position: relative; min-height: 420px; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-strong); border-radius: 15px; background: linear-gradient(135deg, var(--surface2), var(--input-bg));
  color: var(--text); text-align: left; cursor: pointer; font: inherit; padding: 0; box-shadow: 0 14px 36px rgba(0,0,0,.18);
}
.class-gallery-card.disabled { opacity: .45; cursor: not-allowed; }
/* Ambient class tint only — the spotlight is baked into each artwork's SVG
   (class-art.js) so it always sits exactly behind the drawing. */
.class-gallery-art { position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--class-art) 32%, var(--surface2)), var(--input-bg)); }
/* Text-backing veil: solid only over the left text gutter, fully clear by 56%
   so it never dims the artwork or its spotlight. */
.class-gallery-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 92%, transparent) 0 28%, transparent 56%); }
/* Engraved class artwork (class-art.js). Anchored bottom-right, painted under
   the ::after fade above, so the left text column always stays legible. */
.class-gallery-art .class-art-svg {
  position: absolute; right: 2px; bottom: 0; width: 68%; height: 100%;
  color: color-mix(in srgb, var(--class-art) 22%, var(--text));
}
.class-gallery-copy { position: relative; z-index: 1; width: 72%; padding: 22px 22px 12px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.class-gallery-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; background: color-mix(in srgb, var(--class-art) 45%, var(--surface)); border: 1px solid color-mix(in srgb, var(--class-art) 55%, var(--border)); font-family: var(--font-emoji); font-size: 26px; }
.class-gallery-name { font-family: var(--font-display); font-size: 32px; line-height: 1.05; margin-top: 10px; color: var(--text); font-weight: 700; }
.class-gallery-source { min-height: 18px; margin-top: 2px; }
.class-gallery-tagline { margin-top: 12px; color: var(--text); font-size: 16px; font-style: italic; }
.class-gallery-desc { margin-top: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.class-gallery-stats { margin-top: 12px; color: var(--text); font-size: 12.5px; line-height: 1.5; }
.class-gallery-req { margin-top: 9px; border: 1px solid color-mix(in srgb, var(--badge-warn-fg) 55%, var(--border)); background: color-mix(in srgb, var(--badge-warn-fg) 13%, var(--input-bg)); color: var(--badge-warn-fg); border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 900; }
.class-gallery-action { position: relative; z-index: 1; margin: 0 22px 20px; display: block; text-align: center; border: 1px solid var(--accent); background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: var(--on-accent); font-weight: 900; border-radius: 9px; padding: 11px; }
.class-ledger-view { margin-top: 18px; }
.class-ledger-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 0 0 16px; }
.class-ledger-kicker { display: block; color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.class-ledger-toolbar p { margin: 4px 0 0; color: var(--text-muted); }
.class-total-seal { min-width: 158px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 46%), var(--surface2); border-radius: 15px; padding: 13px 17px; text-align: center; }
.class-total-seal span { font-family: var(--font-display); font-size: 40px; color: var(--accent); line-height: .9; font-weight: 700; }
.class-total-seal small { color: var(--text-muted); font-family: var(--font-display); font-size: 22px; }
.class-total-seal em { display: block; margin-top: 5px; color: var(--text-muted); font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.class-ledger-card, .mc-class-block { border: 1px solid var(--border-strong) !important; border-radius: 15px !important; background: linear-gradient(180deg, var(--surface2), var(--surface)) !important; padding: 0 !important; overflow: visible; }
.class-ledger-card + .mc-class-block, .mc-class-block + .mc-class-block { margin-top: 14px !important; }
.class-ledger-head { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer; font: inherit; }
.class-ledger-headline { border-bottom: 1px solid var(--border); padding: 16px 18px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; }
.class-ledger-title { display: block; font-family: var(--font-display); font-size: 29px; color: var(--text); font-weight: 700; }
.class-ledger-sub { display: block; color: var(--text-muted); font-size: 13px; }
.class-ledger-body { padding: 16px 18px; }
.class-ledger-card.collapsed .class-ledger-body { display: none; }
.class-ledger-card.collapsed .class-ledger-head { border-bottom: 0; }
/* Only Level and Subclass ever render here -- the Class field lives outside this grid
   entirely (see step3_class.html) precisely so it can't claim a column and shrink these
   two. Two real children, two columns; no explicit grid-column placement needed. */
.class-field-grid { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 12px; }
.class-subclass-display { min-height: 38px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg); padding: 9px 10px; color: var(--text); }
.class-subclass-display.muted { color: var(--text-faint); border-style: dashed; }
.class-subclass-display.has-picker { padding: 0; border: 0; background: transparent; }
.class-subclass-display select { width: 100%; min-height: 38px; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); padding: 9px 10px; font: inherit; }
.class-subclass-lock { display: inline-flex; margin-right: 8px; border: 1px solid color-mix(in srgb, var(--badge-warn-fg) 50%, var(--border)); background: var(--badge-warn-bg); color: var(--badge-warn-fg); border-radius: 999px; padding: 2px 7px; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.subclass-display-block { color: var(--text-muted); }
.mc-block-head { padding: 16px 18px 0 !important; width: 100%; background: transparent; color: var(--text); border: 0; text-align: left; cursor: pointer; font: inherit; }
.mc-class-block.collapsed .mc-block-body { display: none; }
.mc-class-block.collapsed .mc-block-head { padding-bottom: 16px !important; border-bottom: 0; }
.mc-block-body > .form-grid-2 { padding: 0 18px; grid-template-columns: minmax(0,1fr) 130px minmax(0,1fr); }
.mc-cf-summary { padding: 0 18px 16px; }
.mc-prereq-warn-wrap { padding: 0 18px; }
.mc-prereq-warn {
  display: inline-block;
  font-size: 12px;
  color: var(--badge-info-fg);
  background: var(--badge-info-bg);
  border: 1px solid var(--badge-border);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: help;
}
.mc-block-body > div:last-child { padding: 0 18px 16px; }
.mc-controls { margin: 0 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc-add-class-btn { font-weight: 700; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.mc-total-level { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.cf-card { border-radius: 11px; }
.cf-card summary, .cf-card-header { border-radius: 11px; }
@media (max-width: 980px) {
  .class-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-field-grid, .mc-block-body > .form-grid-2 { grid-template-columns: 1fr; }
  .class-ledger-toolbar { align-items: stretch; }
}
@media (max-width: 680px) {
  .class-gallery-grid { grid-template-columns: 1fr; }
  .class-gallery-copy { width: 78%; }
  .class-ledger-toolbar { display: block; }
  .class-total-seal { margin-top: 12px; }
}
.hb-banner {
  position: relative; overflow: hidden; margin: 0 0 24px; padding: 26px 28px 25px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 16px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 13%, var(--surface2)),
      color-mix(in srgb, var(--badge-arcane-fg) 9%, var(--surface2)) 62%,
      var(--surface2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
.hb-banner::before {
  content: ""; position: absolute; right: 22px; top: 18px; width: 146px; height: 146px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); opacity: .65;
  box-shadow:
    0 0 0 18px color-mix(in srgb, var(--badge-arcane-fg) 10%, transparent),
    0 0 0 43px color-mix(in srgb, var(--accent) 7%, transparent);
}
.hb-banner::after {
  content: "✦"; position: absolute; right: 83px; top: 76px;
  color: color-mix(in srgb, var(--accent) 76%, var(--badge-arcane-fg)); font-size: 30px;
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent);
}
.hb-badge {
  display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent);
  font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase;
}
.hb-banner h3 {
  position: relative; z-index: 1; margin: 0; font-family: var(--font-display); font-size: 33px;
  font-weight: 700; color: var(--accent); line-height: 1.05;
}
.hb-banner p {
  position: relative; z-index: 1; max-width: 750px; margin: 7px 180px 0 0;
  color: var(--text); font-size: 16px; line-height: 1.5;
}
.homebrew-step .section-num {
  background: color-mix(in srgb, var(--badge-arcane-fg) 8%, var(--input-bg));
  box-shadow: 0 0 18px color-mix(in srgb, var(--badge-arcane-fg) 12%, transparent);
}
.hb-grant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hb-grant-card,
.hb-panel,
.hb-number-card {
  border: 1px solid var(--border); border-radius: 13px;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
}
.hb-grant-card { padding: 16px; }
.hb-card-head h3,
.hb-panel h3 {
  margin: 0 0 7px; color: var(--text); font-size: 12px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
}
.hb-card-head p { margin: 0 0 12px; color: var(--text-faint); font-size: 13px; line-height: 1.45; }
.hb-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 0; margin: 8px 0 11px; }
.hb-list:empty { display: none; }
.hb-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border);
  background: var(--input-bg); color: var(--text-muted); border-radius: 999px; padding: 5px 9px;
  font-size: 12px; line-height: 1.2;
}
.hb-list button {
  border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font-weight: 900;
  padding: 0 1px; line-height: 1;
}
.hb-list button:hover { color: var(--danger); }
.hb-feat-sub {
  margin: 10px 0 12px; padding: 10px 11px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--input-bg);
}
.hb-feat-sub-title {
  margin: 0 0 7px; color: var(--accent); font-size: 11px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
}
.hb-feat-sub .feat-sub-pickers { margin-top: 0 !important; }
.hb-feat-sub .feat-sub-label { color: var(--text-muted); font-size: 12px; }
.hb-library-menu {
  display: none; margin-top: 8px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--input-bg); overflow: hidden; max-height: 330px; overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.hb-library-menu.open { display: block; }
.hb-library-option {
  width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: start; gap: 9px;
  padding: 10px 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent;
  color: var(--text); cursor: pointer; text-align: left; font: inherit;
}
.hb-library-option:last-child { border-bottom: 0; }
.hb-library-option:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); }
.hb-library-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hb-library-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.hb-library-summary { color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.hb-library-meta { color: var(--text-faint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.hb-library-badges { display: inline-flex; gap: 4px; justify-content: flex-end; }
.hb-library-empty { padding: 12px; color: var(--text-muted); font-size: 13px; }
.hb-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hb-add-row input,
.hb-add-row select {
  min-width: 0; flex: 1 1 160px; background: var(--input-bg); border: 1px solid var(--border-strong);
  border-radius: 8px; color: var(--text); padding: 9px 10px; font: inherit;
}
.hb-add-row select { flex-basis: 145px; }
.hb-add-row .btn-sm {
  flex: 0 0 auto; border-color: var(--accent); color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-strong), var(--accent)); font-weight: 900;
}
.hb-panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hb-panel-grid-profs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-panel-wide { grid-column: span 2; }
.hb-panel { padding: 14px; }
.hb-number-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hb-number-grid-abilities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-number-card { padding: 11px 12px; }
.hb-number-card label {
  display: block; margin: 0 0 5px; color: var(--text-faint); font-size: 11px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.hb-number-card input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border);
  color: var(--num); padding: 2px 0 4px; font-family: var(--font-display); font-size: 24px;
  font-weight: 700; line-height: 1;
}
.hb-number-card input:focus { outline: none; border-color: var(--gold, #d4a843); box-shadow: 0 0 0 3px var(--accent-glow, rgba(212,168,67,0.35)); }

@media (max-width: 860px) {
  .hb-banner p { margin-right: 0; }
  .hb-banner::before,
  .hb-banner::after { display: none; }
  .hb-grant-grid,
  .hb-panel-grid,
  .hb-panel-grid-profs,
  .hb-number-grid,
  .hb-number-grid-abilities { grid-template-columns: 1fr; }
  .hb-panel-wide { grid-column: auto; }
}


/* ── Ability input (number) centering ── */
.ability-box input[type=number] {
  text-align: center;
  padding: 4px;
}

/* ── Per-level hit point tables ─────────────────────────────────────────────
   Markup owned by static/js/wizard-hp-rolls.js; it renders one .hp-roll-card per
   class into #hp-roll-tables, directly under the class ledger. The card shell is
   deliberately the same recipe as .class-ledger-card / .mc-class-block above
   (border-strong hairline, 15px radius, surface2→surface wash, headline separated
   by a --border rule) so the tables read as one more ledger card rather than a new
   component that happens to live on the same step. */
/* The margin lives on the list, not the <section>, so a step with no class chosen yet
   (the renderer writes an empty string) leaves no gap behind. */
#hp-roll-tables { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
#hp-roll-tables:empty { display: none; }

.hp-roll-card {
  border: 1px solid var(--border-strong);
  border-radius: 15px;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  overflow: hidden;
}
.hp-roll-card > h4 {
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

/* Five fixed columns — Level | Die | Rolled | CON | Total — so the input column
   takes the slack and every row lines up down the card. */
.hp-roll-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.hp-roll-table th:first-child, .hp-roll-table td:first-child { width: 66px; }
.hp-roll-table th:nth-child(2), .hp-roll-table td:nth-child(2) { width: 58px; }
.hp-roll-table th:nth-child(4), .hp-roll-table td:nth-child(4) { width: 62px; }
.hp-roll-table th:last-child, .hp-roll-table td:last-child { width: 74px; }
.hp-roll-table thead th {
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--input-bg) 55%, transparent);
  color: var(--text-faint);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.hp-roll-table tbody td {
  padding: 5px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.hp-roll-table tbody tr:last-child td { border-bottom: 0; }
.hp-roll-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.hp-roll-table td:first-child { color: var(--text); font-weight: 700; }
.hp-roll-table td:nth-child(2) { color: var(--text-faint); }
/* Total is the answer the row exists to give: same numeric treatment (display face on
   --num) the rest of the wizard gives derived figures. */
.hp-roll-table td:last-child {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--num);
}

/* One or two digits, never more (min 1, max = the hit die), so the field is sized to
   its content instead of borrowing the full-width look of the text inputs on this step.
   Spinners are suppressed: the value is typed from what was rolled at the table.
   Qualified by the table + [type=number] to outrank the shell's blanket
   `input[type="number"] { width: 100% }` — the same escape .eq-gold-row uses. */
.hp-roll-table input[type=number].hp-roll-input {
  width: 54px;
  padding: 3px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.hp-roll-input::-webkit-outer-spin-button,
.hp-roll-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hp-roll-input::placeholder { color: var(--text-faint); font-weight: 400; }
.hp-roll-table input[type=number].hp-roll-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Level 1's maximum die, and every level while the roll switch is off: a value the
   player cannot type into, drawn as a dashed ghost of the input it replaces. */
.hp-roll-fixed {
  display: inline-block;
  min-width: 54px;
  padding: 3px 6px;
  border: 1px dashed color-mix(in srgb, var(--border-strong) 75%, transparent);
  border-radius: var(--radius);
  color: var(--text-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.hp-roll-total {
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12.5px;
}
.hp-roll-total b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--num);
}
.hp-roll-hint {
  margin: 0;
  padding: 0 18px 11px;
  color: var(--text-faint);
  font-size: 11px;
  font-style: italic;
}
/* A homebrew HP override makes every total above decorative — say so in the step's
   existing warn-badge palette rather than inventing a new alert colour. */
/* Shown until the first calculation lands: the table has no numbers of its own to fall
   back on, so it says nothing rather than guess. */
.hp-roll-empty {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
}

.hp-roll-override-note {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--badge-warn-fg) 40%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--badge-warn-bg);
  color: var(--badge-warn-fg);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .hp-roll-card > h4 { font-size: 19px; padding: 11px 13px; }
  .hp-roll-table thead th { padding: 7px 10px; }
  .hp-roll-table tbody td { padding: 5px 10px; }
  .hp-roll-table th:first-child, .hp-roll-table td:first-child { width: 54px; }
  .hp-roll-table th:nth-child(2), .hp-roll-table td:nth-child(2) { width: 48px; }
  .hp-roll-table th:nth-child(4), .hp-roll-table td:nth-child(4) { width: 52px; }
  .hp-roll-table th:last-child, .hp-roll-table td:last-child { width: 58px; }
  .hp-roll-total { padding: 10px 13px; }
  .hp-roll-hint { padding: 0 13px 11px; }
}

/* ══════════════════════════════════════════════════════════
   18. FEATURE ACCORDION
   ══════════════════════════════════════════════════════════ */

/* Fighting style picker */
.fighting-style-sel { width: 100%; padding: 6px 10px; margin-bottom: 6px; }
.fighting-style-desc {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
  min-height: 18px;
}

.asi-ab-sel {
  width: 54px;
  padding: 3px 4px;
  font-size: 13px;
  text-align: center;
}

/* ── Proficiency warnings ── */
.prof-warning {
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: var(--radius);
  background: var(--badge-warn-bg);
  border: 1px solid color-mix(in srgb, var(--badge-warn-fg) 40%, transparent);
  color: var(--badge-warn-fg);
  font-size: 12px;
  line-height: 1.45;
}

.adv-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-gold, #c8a84b);
  background: color-mix(in srgb, var(--accent-gold) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.adv-tag.hidden { display: none; }

/* --- Utilities --- */
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════
   19. CLASS FEATURES ACCORDION
   ══════════════════════════════════════════════════════════ */

/* Edition mismatch warning banner (shown when subclass edition ≠ active ruleset) */
.cf-mismatch-warning {
  background: var(--badge-warn-bg);
  border: 1px solid var(--badge-warn-fg);
  border-left: 4px solid var(--badge-warn-fg);
  color: var(--badge-warn-fg);
  padding: 10px 14px;
  border-radius: 4px;
  margin: 8px 0 12px 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Section header row: "CLASS FEATURES  [12]" */
.cf-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* Round count badges */
.cf-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface2);
  color: var(--text-muted);
}
.cf-count-badge.green {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

/* Individual feature card */
.cf-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  margin-bottom: 9px;
  overflow: hidden;
  transition: border-color 0.15s;
}
/* While a rich-select (e.g. the ASI "Take a Feat" picker) is open inside a card, allow its
   absolutely-positioned dropdown to escape the card's overflow:hidden clip instead of being cut off. */
.cf-card:has(.rich-select-dropdown.open),
.cf-card:has(.rich-select-dropdown.open) .cf-card-body { overflow: visible; }
.cf-card:hover { border-color: var(--surface2); }

/* Clickable header row */
.cf-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  user-select: none;
}
.cf-card-header:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }

/* Info block (name + meta) */
.cf-card-info { flex: 1; min-width: 0; }

/* Feature name */
.cf-card-name {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

/* Meta line: "X Choice · 4th level" */
.cf-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.cf-card-status { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cf-card-head {
  display: flex; align-items: center; gap: 8px; padding: 13px 14px 6px;
  color: var(--text); font-size: 15px; font-weight: 900;
}
.cf-card-title { margin-right: auto; }
.cf-status-pill {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--input-bg);
  color: var(--text-muted); border-radius: 6px; padding: 3px 7px; font-size: 10px; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.cf-choice-pill { color: var(--badge-arcane-fg); background: var(--badge-arcane-bg); border-color: var(--badge-border); }
[data-theme="light"] .cf-choice-pill { color: #5e3f95; background: #eadcf6; border-color: #b79ccf; }
.cf-missing-pill { color: var(--badge-warn-fg); background: var(--badge-warn-bg); border-color: var(--badge-border); }
.cf-done-pill { color: var(--badge-grant-fg); background: var(--badge-grant-bg); border-color: var(--badge-border); }

/* "1 Choice" badge in meta */
.cf-choices-badge {
  background: var(--badge-arcane-bg);
  color: var(--badge-arcane-fg);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

/* Choice completion markers in card header */
.cf-done-mark    { color: var(--success); font-size: 13px; margin-left: 6px; }
.cf-pending-mark { color: var(--accent); font-size: 8px; margin-left: 6px; vertical-align: middle; }

/* Already-chosen (disabled) choice options — muted so duplicates read as unavailable (#3) */
.opt-taken { opacity: 0.5; }
.opt-taken input { cursor: not-allowed; }
option:disabled { color: var(--text-faint); }

/* Chevron › / ∨ */
.cf-chevron {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 4px;
}
.cf-card-body.open ~ .cf-card-header .cf-chevron,
.cf-card-header .cf-chevron.open { transform: rotate(90deg); }

/* formatDescriptionHTML() output (paragraphs/bullet lists) inside a card body
   already has its own padding -- drop the browser default top/bottom <p>/<ul>
   margin on the first/last child so it doesn't stack an extra gap on top. */
.cf-card-desc > p:first-child, .cf-card-desc > ul:first-child { margin-top: 0; }
.cf-card-desc > p:last-child, .cf-card-desc > ul:last-child { margin-bottom: 0; }

/* Collapsible body */
.cf-card-body {
  display: none;
  padding: 13px 14px 15px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.cf-card-body.open { display: block; }

/* "Available at Higher Levels" toggle button */
.cf-upcoming-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  margin-top: 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.03em;
  transition: border-color 0.15s, color 0.15s;
}
.cf-upcoming-toggle:hover {
  border-color: var(--success);
  color: var(--success);
}
.cf-toggle-icon {
  margin-left: auto;
  font-size: 11px;
  transition: transform 0.2s;
}
.cf-upcoming-toggle.open .cf-toggle-icon { transform: rotate(180deg); }

/* Upcoming features container */
.cf-upcoming-list {
  margin-top: 6px;
  padding-left: 0;
}
.cf-upcoming-list .cf-card {
  opacity: 0.65;
}
.cf-upcoming-list .cf-card:hover { opacity: 1; }

/* ── Inline choice pickers ── */
.cf-choice-block {
  margin-top: 12px;
  padding: 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Tab switcher (ASI vs Feat) */
.cf-choice-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  width: fit-content;
}
.cf-tab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--text-muted);
  border: none;
  transition: background 0.15s, color 0.15s;
}
.cf-tab:not(:last-child) { border-right: 1px solid var(--border); }
.cf-tab.active {
  background: var(--accent2);
  color: #fff;
}
.cf-tab:hover:not(.active) { background: var(--surface2); color: var(--text); }

/* Ability score grid for ASI */
.asi-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.asi-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.asi-col-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.asi-ab-sel {
  width: 52px;
  padding: 4px;
  text-align: center;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.asi-ab-sel:focus { border-color: var(--gold, #d4a843); outline: none; box-shadow: 0 0 0 3px var(--accent-glow, rgba(212,168,67,0.35)); }

/* "+N / 2 applied" line */
.asi-total-row {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.asi-total-row.valid { color: var(--success); }
.asi-total-row.over  { color: var(--accent); }

/* Small informational note */
.cf-inline-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 6px;
}
/* formatDescriptionHTML() output inside this note -- drop the browser default
   <p>/<ul> margin on the first/last child so it doesn't stack on the note's
   own margin-top / add unwanted trailing space. */
.cf-inline-note > p:first-child, .cf-inline-note > ul:first-child { margin-top: 0; }
.cf-inline-note > p:last-child, .cf-inline-note > ul:last-child { margin-bottom: 0; }

/* Fighting style select & description */
.fighting-style-sel {
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 8px;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.fighting-style-desc {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.45;
  min-height: 18px;
}

/* ══════════════════════════════════════════════════════════
   20. ELDRITCH INVOCATIONS
   ══════════════════════════════════════════════════════════ */
.inv-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 2px;
}
.inv-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  /* Item #3 (round 4): flex-wrap so .iv-desc-inline (flex-basis:100%) can drop onto its
     own line below the name/meta/buttons row instead of squeezing in beside them. */
  flex-wrap: wrap;
}
.inv-row:hover { border-color: var(--accent2); }
.inv-row.inv-selected { border-color: var(--accent-gold); background: rgba(212,175,55,0.07); }
.inv-row input[type=checkbox] { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent-gold); }

.wiz-step-loading { margin: 32px 0; text-align: center; color: var(--text-muted); }
.wiz-mobile-float-actions [hidden] { display: none; }

/* Story fields (Review step): short fields in a grid, long ones full width. */
.story-fields { margin: 16px 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.story-fields h2 { margin: 0 0 4px; font-size: 16px; }
.story-fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 10px; }
.story-fields .story-wide { grid-column: 1 / -1; }
.story-fields input, .story-fields textarea { width: 100%; box-sizing: border-box; }
.story-fields textarea { resize: vertical; min-height: 72px; }
@media (max-width: 720px) { .story-fields { margin: 12px 0 90px; } }

.mastery-search { width: 100%; box-sizing: border-box; min-height: 36px; margin: 8px 0; padding: 7px 10px; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font: inherit; }

/* Known Forms picker under the druid's Wild Shape card (wizard-wildshape.js). */
.wsk { display: grid; gap: 8px; }
.wsk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wsk-count { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.wsk-open { margin-left: auto; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--accent); }
.wsk-open.done { color: var(--text-muted); }
/* In the Wild Shape card's header: the picker is inside the collapsed card, so the header says how it stands. */
.wsk-status { margin-left: 8px; padding: 1px 8px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 11px; font-weight: 800; white-space: nowrap; }
.wsk-status.done { border-color: var(--border-strong); color: var(--text-muted); }
/* A phone: the card's rules text runs two screens, so the choice itself comes first and the text after it. */
@media (max-width: 720px) {
  .cf-card-body.open:has(> .wsk-mount) { display: flex; flex-direction: column; gap: 8px; }
  .cf-card-body > .wsk-mount { order: -1; }
}
.wsk-help { margin: 0; color: var(--text-muted); font-size: 12px; }
.wsk-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.wsk-chip { padding: 3px 10px; background: color-mix(in srgb, var(--accent) 12%, var(--input-bg)); border: 1px solid var(--accent); border-radius: 999px; color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.wsk-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wsk-search, .wsk-cr { min-height: 34px; padding: 5px 8px; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font: inherit; }
.wsk-search { flex: 1 1 140px; min-width: 0; }
.wsk-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.wsk-shown { color: var(--text-muted); font-size: 11px; }
.wsk-list { display: grid; gap: 4px; margin: 0; padding: 3px 5px 3px 3px; list-style: none; max-height: 320px; overflow-y: auto; }
.wsk-item { display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: stretch; }
.wsk-item > .wsk-stat { grid-column: 1 / -1; }
.wsk-info { padding: 0 10px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; color: var(--accent); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.wsk-info:hover { border-color: var(--accent); }
.wsk-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wsk-stat { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow-x: auto; font-size: 13px; }
.wsk-row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; width: 100%; padding: 6px 10px; text-align: left; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: inherit; cursor: pointer; }
.wsk-row:hover:not(:disabled) { border-color: var(--accent); }
.wsk-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--input-bg)); }
.wsk-row:disabled { opacity: 0.5; cursor: not-allowed; }
.wsk-name { font-size: 14px; font-weight: 800; }
.wsk-meta { grid-column: 1; color: var(--text-muted); font-size: 11px; }
.wsk-state { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 11px; font-weight: 800; color: var(--accent); }
.wsk-empty { padding: 8px; color: var(--text-muted); font-size: 12px; }
.wsk-msg { min-height: 16px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.wsk-cr { flex: 0 0 auto; width: auto; max-width: 100%; }
.wsk-row:focus-visible, .wsk-chip:focus-visible, .wsk-search:focus-visible, .wsk-cr:focus-visible,
.wsk-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Phones and touch screens: the Known Forms picker reaches the 44px touch target. */
@media (max-width: 899px), (pointer: coarse) {
  .wsk-chip, .wsk-row, .wsk-info { min-height: 44px; }
  .wsk .wsk-search, .wsk .wsk-cr { min-height: 44px; font-size: 16px; }
  .wsk-toggle { min-height: 44px; font-size: 13px; }
  .wsk-toggle input { width: 22px; height: 22px; }
}