/* ══════════════════════════════════════════════════════════════════════════
   Character Creator — page styles.

   Loads after app-shell.css, so it may override the shell. Everything here
   is either the guided flow's own furniture — the step rail, the card grid
   every selection step shares, the preview panel — or layout the shell has
   no primitive for. Colors, spacing and type come from the shell's custom
   properties; nothing below hard-codes a palette value.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   Page frame: three regions, one screen

   The step rail is navigation, the work area holds one step at a time, and
   the preview is the character being built. The rail and preview are fixed;
   the work area takes whatever is left, because it is the one holding the
   card grids and tables that actually need the room.

   Below the compact breakpoint the three become one, chosen by the tabs at
   the top. Nothing about the flow changes — only how many regions fit.
   ══════════════════════════════════════════════════════════════════════ */

/* Keep declared widths inclusive of padding and borders throughout the
   creator so the regions retain equal gutters as the viewport changes. */
.cc-main,
.cc-main *,
.cc-main *::before,
.cc-main *::after {
  box-sizing: border-box;
}

body.app-body > .app.cc-guided {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 21rem);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}

.cc-col, .cc-main {
  min-width: 0; min-height: 0;
  max-height: 100%;
}

.cc-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.cc-page-title, .cc-pane-title {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* The column rail exists only in the compact layout. */
.cc-col-rail { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   Region one — the step rail
   ══════════════════════════════════════════════════════════════════════ */

.cc-rail {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: var(--panel-pad);
  background: linear-gradient(180deg, rgba(78, 24, 38, 0.85) 0%, rgba(56, 16, 26, 0.85) 100%);
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The rail names itself. It used to open with the count alone, set in
   gold-deep small-caps at 0.72rem — the dimmest, smallest thing on the
   screen, sitting flush against the panel's top edge, which read as an
   empty header rather than as the column's title. */
.cc-rail-head {
  flex: 0 0 auto;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--maroon-edge);
}
.cc-rail-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  line-height: 1.3;
  color: var(--gold);
}
.cc-rail-count {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--silver-dim);
  margin: 0.1rem 0 0.35rem;
}
.cc-rail-progress {
  height: 4px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  overflow: hidden;
}
.cc-rail-bar {
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

/* The rail scrolls if the flow outgrows the screen; the file actions below
   it never do, because a Save button you have to hunt for is not one. */
.cc-flow {
  flex: 1 1 auto;
  min-height: 4rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  margin: 0; padding: 0.1rem 0.2rem 0.1rem 0;
}
.cc-flow-step {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--silver-dim);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--maroon-edge);
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cc-flow-step:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.cc-flow-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-flow-step.current {
  color: var(--gold);
  border-color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(230, 192, 74, 0.12);
}
.cc-flow-label { flex: 1 1 auto; min-width: 0; }
.cc-flow-tag {
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--silver-dim); opacity: 0.8;
}
.cc-flow-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  font-size: 0.62rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}
/* An answered step is filled on the step itself rather than ticked in a
   column of its own. */
.cc-flow-step.done { color: var(--gold-deep); border-color: var(--gold-deep); }
.cc-flow-step.done .cc-flow-num {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--on-accent);
  font-size: 0;
}
.cc-flow-step.done .cc-flow-num::after { content: "✓"; font-size: 0.62rem; }
/* Out of reach, and saying so — dimmed, dashed, and still focusable so the
   reason is available rather than merely implied. */
.cc-flow-step.locked { opacity: 0.55; border-style: dashed; }
.cc-flow-skipped {
  font-size: 0.68rem;
  color: var(--silver-dim);
  opacity: 0.75;
  padding: 0.2rem 0.1rem;
}

.cc-file { flex: 0 0 auto; border-top: 1px solid var(--maroon-edge); padding-top: 0.5rem; }
.cc-file .btn-row { margin-top: 0; flex-wrap: nowrap; gap: 0.35rem; }
.cc-file .btn-row .act {
  flex: 1 1 0; min-width: 0;
  min-height: 2rem;
  font-size: 0.7rem;
  padding: 0.3rem 0.2rem;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════════════
   Region two — the work area

   One question, the controls that answer it, and the two step buttons
   pinned below them. Only the body scrolls: a guided flow whose Next button
   scrolled out of view would not be one.
   ══════════════════════════════════════════════════════════════════════ */

.cc-work {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
}

.cc-step-head { flex: 0 0 auto; }

/* The step line is now the work area's whole heading, so it is sized like
   one: it was a 0.74rem caption under a 1.3rem question that no longer
   exists. */
.cc-step-count {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: var(--gold);
  margin: 0;
}

/* The work area takes the whole gap between the rail and the preview. Both
   of those are fixed columns, so the space that would otherwise sit empty to
   the right of a capped measure is space the card grids can use. */
.cc-work-body {
  flex: 1 1 auto;
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.3rem;
}
.cc-work-body > * { flex: 0 0 auto; }

/* Direction-aware: forward arrives from the trailing edge, back from the
   leading one. Suppressed entirely under reduced motion, below. */
.cc-work-body.enter-forward { animation: cc-in-forward 0.22s cubic-bezier(0.32, 0.72, 0, 1); }
.cc-work-body.enter-back { animation: cc-in-back 0.22s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes cc-in-forward {
  from { opacity: 0; transform: translateX(1.25rem); }
  to { opacity: 1; transform: none; }
}
@keyframes cc-in-back {
  from { opacity: 0; transform: translateX(-1.25rem); }
  to { opacity: 1; transform: none; }
}

.cc-step-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cc-step-nav .act { min-height: 2.4rem; font-size: 0.82rem; }
.cc-step-nav #cc-back { flex: 0 0 6rem; }
.cc-step-nav #cc-next { flex: 0 0 auto; margin-left: auto; }
.cc-step-hint {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem;
  font-size: 0.78rem;
  color: var(--silver-dim);
  text-align: right;
}
/* The identity line belongs to the phone's sticky footer; on a wide screen
   the preview panel is already saying it, three inches to the right. */
.cc-nav-identity { display: none; }
.cc-nav-note { overflow-wrap: anywhere; }

/* Draft recovery: a strip, dismissible, never a modal on load — and now only
   for a draft that could not be READ, since a clean restore says nothing.
   The [hidden] rule is not redundant: `display: flex` below outranks the user
   agent's `[hidden] { display: none }`, so without it the empty strip drew its
   own gold border above every step. */
.cc-recovery[hidden] { display: none; }
.cc-recovery {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  color: var(--silver);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius-sm);
}
.cc-recovery.warn { border-color: var(--danger); }
.cc-recovery-text { flex: 1 1 12rem; }
.cc-recovery .act { min-height: 1.9rem; font-size: 0.72rem; padding: 0.2rem 0.6rem; }

/* Short screens trim the heading rather than the body — the body is the
   part with the answers in it. */
@media (max-height: 50em) {
  .cc-step-count { font-size: 1.15rem; }
  .cc-flow-step { padding: 0.25rem 0.4rem; font-size: 0.72rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   Column three — the character so far
   ══════════════════════════════════════════════════════════════════════ */

.cc-preview {
  padding: var(--panel-pad);
  background: linear-gradient(180deg, rgba(78, 24, 38, 0.85) 0%, rgba(56, 16, 26, 0.85) 100%);
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cc-pv-head { margin-bottom: 0.7rem; }
.cc-pv-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.cc-pv-sub { font-size: 0.78rem; color: var(--silver-dim); line-height: 1.4; }

.cc-pv-block { margin-top: 0.9rem; }
.cc-pv-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--gold);
  padding-bottom: 0.25rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--maroon-edge);
}
.cc-pv-title .cc-sub {
  color: var(--silver-dim);
  letter-spacing: 0.04em;
  font-variant: normal;
  font-size: 0.72rem;
}

.cc-pv-abilities {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.25rem;
}
.cc-pv-ability {
  text-align: center;
  padding: 0.3rem 0.1rem;
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
}
.cc-pv-ability-name { font-size: 0.6rem; letter-spacing: 0.06em; color: var(--silver-dim); }
.cc-pv-ability-score { font-size: 0.95rem; font-weight: 700; color: var(--silver); }
.cc-pv-ability-mod { font-size: 0.72rem; color: var(--gold); }

.cc-preview .cc-table { font-size: 0.78rem; }
.cc-preview .cc-table th,
.cc-preview .cc-table td { padding: 0.22rem 0.3rem; }
.cc-preview .cc-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-preview .cc-stat { padding: 0.3rem 0.15rem; }
.cc-preview .cc-stat-value { font-size: 0.92rem; }
.cc-preview .cc-column-heading {
  margin: 0.5rem 0 0.25rem;
  padding-top: 0.35rem;
  font-size: 0.74rem;
}

/* An issue is shown on the step that can fix it: a statement, never a
   blocker, and never in place of the controls. */
.cc-work-body .cc-issue { width: 100%; text-align: left; }

/* A panel is as tall as its content now. It used to be height:100% because
   every panel was a column of a grid that had to fill the screen; in a
   single scrolling column that would stretch a two-line note to full height
   and push everything after it off the bottom. */
.cc-section {
  min-width: 0;
  max-width: 100%;
  background: linear-gradient(180deg, rgba(78, 24, 38, 0.75) 0%, rgba(56, 16, 26, 0.75) 100%);
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius);
  padding: var(--panel-pad);
}
.cc-section > h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.cc-section > h3 .cc-sub { color: var(--silver-dim); letter-spacing: 0.04em; font-variant: normal; }
/* A heading that carries its own control. Opt-in rather than blanket, so the
   dozens of plain section headings keep their block layout. */
.cc-section > h3.has-action {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cc-section > h3 .cc-section-action {
  margin-left: auto;
  flex: 0 0 auto;
  min-height: 1.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  font-variant: normal;
  padding: 0.2rem 0.7rem;
}
.cc-column-heading {
  margin: 1rem 0 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--maroon-edge);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--gold);
}
/* The Background tab's "What it grants" heading sits directly under the Add
   button, not under unrelated content, so it does not need the full-height
   divider — and every rem trimmed here is a rem the three-column layout can
   spend on staying within one screen. */
.cc-column-heading.tight { margin-top: 0.5rem; padding-top: 0.4rem; }

/* ══════════════════════════════════════════════════════════════════════
   Fields
   ══════════════════════════════════════════════════════════════════════ */

.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 0.85rem;
}
.cc-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
/* Exactly three fixed columns, not auto-fit — the background ability-bonus
   row always has exactly three abilities and abbreviated (CON/INT/WIS)
   labels, so it fits one row at any width the tab reasonably gets, instead
   of auto-fit wrapping it the moment the column narrows. */
.cc-grid.three { grid-template-columns: repeat(3, 1fr); }
/* The class drawer's five facts — hit die, primary ability, saving throws,
   skills, spellcasting — belong on one line, so Spellcasting is read beside the
   rest rather than stranded on a row of its own. auto-fit would break that at
   the first fact long enough to want 13rem, so the count is stated instead and
   stepped down by hand: 5 across the wide drawer, 3, then 2, then stacked. The
   values wrap inside their column; min-width 0 is what lets them. */
.cc-grid.cc-class-facts {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem 0.9rem;
}
.cc-grid.cc-class-facts > * { min-width: 0; }
@media (max-width: 1500px) {
  .cc-grid.cc-class-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cc-grid.cc-class-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .cc-grid.cc-class-facts { grid-template-columns: minmax(0, 1fr); }
}
.cc-personality-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  width: 100%;
}

.cc-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cc-field > label {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver-dim);
}
.cc-field input[type="text"],
.cc-field input[type="number"],
.cc-field select,
.cc-field textarea,
.cc-search, .cc-num, .cc-textarea {
  background: var(--maroon-deep);
  color: var(--silver);
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  width: 100%;
}
.cc-field input:focus, .cc-field textarea:focus, .cc-field select:focus,
.cc-search:focus, .cc-num:focus, .cc-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(230, 192, 74, 0.18);
}
.cc-field textarea, .cc-textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
.cc-personality-grid textarea { min-height: 3rem; width: 100%; max-width: 100%; }
.cc-note { color: var(--silver-dim); font-size: 0.86rem; line-height: 1.5; margin-bottom: 0.6rem; }
/* A note with nothing after it in its section — its own bottom margin is
   just unused space at the bottom of a column that has none to spare. */
.cc-note-tight { margin-bottom: 0; margin-top: 0.4rem; }
/* Same idea for a button row directly under a control it belongs to,
   rather than app-shell's default spacing meant for a row standing on
   its own. */
.btn-row.tight { margin-top: 0.35rem; }

/* ══════════════════════════════════════════════════════════════════════
   Ability scores
   ══════════════════════════════════════════════════════════════════════ */

/* Three across, two down — the arrangement every printed sheet uses, and the
   one that never leaves a widow on the second row the way an auto-fit track
   count does as the column resizes. */
.cc-abilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(0.25rem, 1vw, 0.75rem);
  row-gap: 0.75rem;
}

.cc-ability {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.7rem clamp(0.25rem, 0.8vw, 0.5rem);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
}
.cc-ability-name {
  font-family: var(--font-display);
  font-size: 0.78rem; font-variant: small-caps; letter-spacing: 0.12em;
  color: var(--gold-deep);
}
.cc-ability-score {
  display: flex; align-items: center; gap: 0.4rem;
}
.cc-ability-score input {
  width: 3.4rem; text-align: center;
  font-size: 1.35rem; font-weight: 700; color: var(--gold);
  background: var(--maroon-deep);
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
  padding: 0.2rem;
  appearance: textfield;
  -moz-appearance: textfield;
}
.cc-ability-score input::-webkit-inner-spin-button,
.cc-ability-score input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.cc-step {
  width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-deep); background: transparent;
  border: 1px solid var(--maroon-edge); border-radius: 50%;
  cursor: pointer; line-height: 1;
}
.cc-step:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); }
.cc-step:disabled { opacity: 0.3; cursor: default; }
.cc-ability-mod { font-size: 1rem; color: var(--silver); }

.cc-budget {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.88rem; color: var(--silver-dim);
}
.cc-budget strong { color: var(--gold); font-size: 1.1rem; }
.cc-budget.over strong { color: var(--danger); }

/* ══════════════════════════════════════════════════════════════════════
   Tables — skills, saves, inventory, spells
   ══════════════════════════════════════════════════════════════════════ */

.cc-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cc-table th {
  text-align: left;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--silver-dim); font-weight: 400;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--maroon-edge);
}
.cc-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid rgba(107, 35, 51, 0.4); }
.cc-table tr:last-child td { border-bottom: none; }
.cc-table tbody tr:hover { background: rgba(230, 192, 74, 0.05); }
.cc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cc-table .mod { color: var(--gold); font-weight: 700; }
.cc-table-left th, .cc-table-left td { text-align: left; }
.cc-table-left .num { text-align: left; }

/* ══════════════════════════════════════════════════════════════════════
   Small shared controls
   ══════════════════════════════════════════════════════════════════════ */

.cc-remove {
  background: transparent; border: 1px solid var(--maroon-edge);
  color: var(--silver-dim); border-radius: var(--radius-sm);
  padding: 0.25rem 0.55rem; cursor: pointer;
}
.cc-remove:hover { color: var(--danger); border-color: var(--danger); }

/* ══════════════════════════════════════════════════════════════════════
   Feature groups
   ══════════════════════════════════════════════════════════════════════ */

.cc-feature-name { color: var(--gold-bright); font-weight: 700; font-size: 0.9rem; }

.cc-feature-text { font-size: 0.87rem; line-height: 1.5; white-space: pre-wrap; }

/* Label and value on one line — the Background grants list's compact form.
   Half the height of stacking them, and the column is wide enough that the
   values here (a short list of abilities, a feat name) do not need the
   line to themselves the way a longer description would. */
.cc-kv-inline { margin-bottom: 0.3rem; line-height: 1.4; }
.cc-kv-inline .cc-feature-name { font-size: 0.87rem; }
.cc-kv-inline .cc-feature-text { font-size: 0.87rem; }

/* Where the repo genuinely has no data. Said out loud rather than shown as
   an empty box, so a gap never reads as "this subclass has no features". */
.cc-missing {
  border: 1px dashed var(--gold-deep);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  color: var(--gold-deep);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════
   Pickers (spells, items, feats)
   ══════════════════════════════════════════════════════════════════════ */

.cc-picker-controls { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.75rem; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cc-chip {
  padding: 0.22rem 0.6rem;
  font-size: 0.78rem;
  color: var(--silver-dim);
  background: transparent;
  border: 1px solid var(--maroon-edge);
  border-radius: 999px;
  cursor: pointer;
}
.cc-chip:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.cc-chip.on { color: var(--gold); border-color: var(--gold); background: rgba(230, 192, 74, 0.12); }

.cc-toggle { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem;
             color: var(--silver-dim); cursor: pointer; }

.cc-picker-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--gap);
  height: min(52vh, 30rem);
}

/* ── The Spells step, on one screen ──────────────────────────────────────
   Two columns that scroll inside themselves rather than a page that scrolls
   the counters out of sight. The catalogue works on the left — its filters
   sit still and the list under them takes whatever height is left — and the
   ledger of what has been spent reads on the right. */
.cc-work-body > .cc-spell-screen { flex: 1 1 auto; }
.cc-spell-screen {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--gap);
  min-height: 0;
}
.cc-spell-column { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cc-spell-ledger {
  gap: var(--gap);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.3rem;
}
.cc-spell-ledger > * { flex: 0 0 auto; }
.cc-spell-browse > .cc-section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cc-spell-browse .cc-picker-controls { flex: 0 0 auto; }
.cc-spell-list {
  flex: 1 1 auto;
  min-height: 8rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The per-level record: "2/5" prepared of written down, or a plain count
   where preparing is not a separate act. */
.cc-level-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.cc-level-count {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}
#cc-spell-sheet .cc-detail-meta { color: var(--silver-dim); font-size: 0.85rem; margin-bottom: 0.6rem; }
#cc-spell-sheet .btn-row { margin-top: 0.9rem; }
.cc-picker-list { border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm); }
.cc-picker-detail {
  border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm);
  padding: 0.75rem; font-size: 0.88rem; line-height: 1.55;
}
.cc-picker-detail h4 { color: var(--gold); font-size: 1rem; margin-bottom: 0.35rem; }
.cc-picker-detail .cc-detail-meta { color: var(--silver-dim); font-size: 0.8rem; margin-bottom: 0.6rem; }

.cc-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.42rem 0.6rem;
  border-bottom: 1px solid rgba(107, 35, 51, 0.4);
  cursor: pointer;
}
.cc-row:hover { background: rgba(230, 192, 74, 0.06); }
.cc-row.selected { background: rgba(230, 192, 74, 0.1); }
.cc-row-name { flex: 1 1 auto; min-width: 0; }
.cc-row-meta { color: var(--silver-dim); font-size: 0.78rem; white-space: nowrap; }
.cc-row-add {
  background: transparent; border: 1px solid var(--maroon-edge); color: var(--gold-deep);
  border-radius: var(--radius-sm); padding: 0.1rem 0.45rem; cursor: pointer; line-height: 1.3;
}
.cc-row-add:hover { color: var(--gold); border-color: var(--gold); }
.cc-row-add.on { color: var(--gold); border-color: var(--gold); background: rgba(230, 192, 74, 0.14); }

/* ══════════════════════════════════════════════════════════════════════
   Sidebar
   ══════════════════════════════════════════════════════════════════════ */

/* Label on the left, answer on the right — the interview column's way of
   restating what has been decided so far. */

.cc-stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem;
}
.cc-stat {
  text-align: center;
  padding: 0.4rem 0.2rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
}
.cc-stat-label {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--silver-dim);
}
.cc-stat-value { font-size: 1.05rem; font-weight: 700; color: var(--gold); }

/* ══════════════════════════════════════════════════════════════════════
   The finished sheet — the last step's own panel
   ══════════════════════════════════════════════════════════════════════
   The compact version of these numbers lives in column three on every step.
   This is the full one, in the wide middle column: the name is an input at
   its head, and the tables pair up rather than running down one narrow
   ribbon. */

.cc-sheet-head {
  margin-bottom: 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--maroon-edge);
}
input.cc-sheet-name {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--gold);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--maroon-edge);
  border-radius: 0;
  padding: 0.1rem 0 0.2rem;
  margin-bottom: 0.3rem;
}
input.cc-sheet-name:focus {
  outline: none;
  border-bottom-color: var(--gold);
  background: rgba(0, 0, 0, 0.18);
}
input.cc-sheet-name::placeholder { color: var(--silver-dim); font-size: 1rem; }

/* The sheet has the wide column, so its tiles run four across rather than
   the three a narrow panel gets. */
.cc-sheet-head + .cc-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Column flow rather than a grid: the blocks are wildly different heights —
   eighteen skills against six saves — and a grid row would leave a hole the
   size of the difference. Columns fill instead, and drop to one when the
   panel is too narrow for two. */
.cc-sheet-grid {
  columns: 2 15rem;
  column-gap: 1.2rem;
  margin-top: 0.8rem;
}
.cc-sheet-grid > div {
  break-inside: avoid;
  margin-bottom: 0.9rem;
}
.cc-sheet-grid .cc-table { font-size: 0.8rem; }
.cc-sheet-grid .cc-table th,
.cc-sheet-grid .cc-table td { padding: 0.2rem 0.3rem; }

/* A kit line or hand-typed item, edited in place in the carried table. */
input.cc-item-name {
  width: 100%;
  min-width: 8rem;
  background: transparent;
  color: var(--silver);
  border: none;
  border-bottom: 1px dashed var(--maroon-edge);
  border-radius: 0;
  padding: 0.05rem 0;
  font-size: inherit;
}
input.cc-item-name:focus {
  outline: none;
  border-bottom-color: var(--gold);
  background: rgba(0, 0, 0, 0.2);
}

/* A group heading that heads a group rather than opening one. */

/* A starting-equipment option already taken. */

.cc-slots-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.cc-slot {
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm);
  color: var(--gold); font-size: 0.76rem;
}
.cc-slot .lv { color: var(--silver-dim); }

/* What is outstanding, in the interview column: one line each, the ones this
   step can fix stated plainly and the rest as buttons that go there. */
.cc-issue {
  margin-top: 0.35rem;
  display: flex; gap: 0.45rem; align-items: flex-start;
  font-size: 0.8rem; line-height: 1.4;
  padding: 0.35rem 0.45rem;
  border-left: 2px solid var(--gold-deep);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  color: var(--silver-dim);
  text-align: left; border-top: none; border-right: none; border-bottom: none;
  width: 100%;
}
.cc-issue:hover { color: var(--silver); background: rgba(230, 192, 74, 0.07); }
.cc-issue.error { border-left-color: var(--danger); }

.cc-saved { max-height: 13rem; }
.cc-load-list {
  margin-top: 0.65rem;
  max-height: 11rem;
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.16);
}
.cc-load-list[hidden] { display: none; }
.cc-saved-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.45rem;
  border-bottom: 1px solid rgba(107, 35, 51, 0.4);
  cursor: pointer;
}
.cc-saved-row:hover { background: rgba(230, 192, 74, 0.06); }
.cc-saved-row:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.cc-saved-name { flex: 1 1 auto; min-width: 0; cursor: pointer; overflow-wrap: anywhere; }
.cc-saved-name:hover { color: var(--gold); }
.cc-saved-meta { font-size: 0.74rem; color: var(--silver-dim); white-space: nowrap; }
.cc-saved-del {
  background: transparent; border: none; color: var(--silver-dim);
  cursor: pointer; padding: 0.15rem 0.3rem;
}
.cc-saved-del:hover { color: var(--danger); }

.cc-delete-confirm .sheet-body { text-align: center; }
.cc-delete-confirm .cc-field { margin-top: 1rem; text-align: left; }
.cc-delete-confirm .cc-field input { box-sizing: border-box; }
.cc-delete-actions { justify-content: center; margin-top: 1rem; }

.cc-import-error { color: var(--danger); font-size: 0.85rem; margin-top: 0.5rem; min-height: 1em; }

/* ══════════════════════════════════════════════════════════════════════
   Toast
   ══════════════════════════════════════════════════════════════════════ */

.toast {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(20px); opacity: 0;
  max-width: min(28rem, calc(100vw - 2rem));
  background: var(--maroon-deep);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 2000; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: var(--danger); color: #ff9b9b; }

/* ══════════════════════════════════════════════════════════════════════
   The shared selection surface — cards, drawer, segmented control

   Role, class, background, origin feat, species, lineage and subclass are
   one interaction with different contents, so they are one component with
   one set of styles. The selected card lifts by a gold left border and a
   wash rather than a shadow; shadow is kept for things that float.
   ══════════════════════════════════════════════════════════════════════ */

.cc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: 0.6rem;
}
.cc-cards.wide { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }

/* Portraits: the symbol is the card's head, the name and its lines read down
   from it. Every step that asks "which of these are you" — role, class,
   subclass, background, species, lineage — uses this shape, so the question
   looks the same each time it is asked.

   Flex rather than grid, and deliberately: four to a row, but a last row of
   one or two centres under the ones above instead of hanging off the left.

   `min-height: auto` — the flex item's automatic minimum — is what keeps the
   3:4 ratio a floor rather than a cage: aspect-ratio supplies the height when
   the lines are short, and a card carrying a sentence of prose grows past it
   with the rest of its row stretching to match. It has to be said out loud
   only because .cc-card above declares a 5.5rem minimum for the flat cards. */
.cc-cards.portrait {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.cc-cards.portrait .cc-card {
  flex: 0 1 calc((100% - 3 * 0.6rem) / 4);
  flex-direction: column;
  align-items: center;
  text-align: center;
  aspect-ratio: 3 / 4;
  min-height: auto;
  gap: 0.5rem;
  padding: 1rem 0.8rem;
}
/* Square cards, for a picker whose lines are short enough that 3:4 was only
   buying blank space under them. The ratio is still a floor, not a cage — a
   wordier card in the row grows and the rest stretch with it — so the symbol,
   the type and the leading are all tightened as well: with the 3:4 shape's
   furniture the content alone stood 30-odd pixels taller than the square, and
   the floor would never have been what set the height. */
.cc-cards.portrait.square .cc-card {
  aspect-ratio: 1 / 1;
  padding: 0.7rem;
  gap: 0.35rem;
}
.cc-cards.portrait.square .cc-card-icon {
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 0;
}
.cc-cards.portrait.square .cc-card-body { gap: 0.2rem; }
.cc-cards.portrait.square .cc-card-name { font-size: 0.95rem; }
.cc-cards.portrait.square .cc-card-line { font-size: 0.72rem; line-height: 1.28; }
.cc-cards.portrait .cc-card-icon {
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 0.1rem;
}
/* Top-aligned, not centred: every card in a row is the height of the wordiest
   one, and centring each block inside that height left the four names sitting
   at four different heights. Read down a row and the symbol, the name and the
   first line each land on the same line as its neighbours'. */
.cc-cards.portrait .cc-card-body {
  flex: 1 1 auto;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 0.3rem;
}
.cc-cards.portrait .cc-card-head { justify-content: center; }
.cc-cards.portrait .cc-card-name { font-size: 1.05rem; }

.cc-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 5.5rem;
  padding: 0.65rem 0.7rem;
  text-align: left;
  color: var(--silver-dim);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--maroon-edge);
  border-left: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.cc-card:hover { color: var(--silver); border-color: var(--gold-deep); }
.cc-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-card.selected {
  color: var(--silver);
  border-color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(230, 192, 74, 0.12);
}
/* Selected is never color alone: the chosen card is also marked. */
.cc-card.selected .cc-card-name::after { content: " ✓"; color: var(--gold); }
.cc-card.is-off { opacity: 0.55; border-style: dashed; }

.cc-card-icon { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; color: var(--gold); }
.cc-card-icon svg { width: 100%; height: 100%; display: block; }
.cc-card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cc-card-head { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.cc-card-name {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  color: var(--gold);
}
.cc-card-badge {
  font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}
.cc-card-line { font-size: 0.78rem; line-height: 1.35; overflow-wrap: anywhere; }
.cc-card-blocked { color: var(--danger); }

/* The detail for whichever card has focus. It sits under the grid rather
   than beside it so the grid keeps the full measure. */
.cc-drawer {
  margin-top: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.16);
  font-size: 0.86rem;
  line-height: 1.5;
}
.cc-drawer-title {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.cc-drawer .cc-detail-meta { color: var(--silver-dim); font-size: 0.8rem; margin-bottom: 0.5rem; }

.cc-skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(255,255,255,0.05), rgba(0,0,0,0.18));
  background-size: 200% 100%;
  animation: cc-shimmer 1.2s linear infinite;
  border-style: dashed;
  cursor: default;
}
@keyframes cc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.cc-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.cc-seg {
  flex: 1 1 auto;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  color: var(--silver-dim);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--maroon-edge);
  border-radius: 6px;
  cursor: pointer;
}
.cc-seg:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.cc-seg:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-seg.on { color: var(--gold); border-color: var(--gold); background: rgba(230, 192, 74, 0.14); }

/* ── Counters, filters and small furniture ──────────────────────────── */

.cc-counter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.cc-counter {
  display: flex; align-items: baseline; gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.2);
}
.cc-counter-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
                    color: var(--silver-dim); }
.cc-counter-value { font-size: 0.95rem; font-weight: 700; color: var(--gold);
                    font-variant-numeric: tabular-nums; }
.cc-counter.full .cc-counter-value { color: var(--gold-bright); }

.cc-filter-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.cc-filter-note { font-size: 0.8rem; color: var(--silver-dim); }
.cc-filter-row .act { min-height: 1.9rem; font-size: 0.74rem; padding: 0.2rem 0.6rem; }
.cc-toggle-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.cc-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: 0.35rem;
}
.cc-check {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  min-height: 2.4rem;
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.cc-check.on { color: var(--gold); border-color: var(--gold); background: rgba(230, 192, 74, 0.1); }
.cc-check.is-off { opacity: 0.5; cursor: not-allowed; }
/* A pick that something else grants as well: still yours to clear, but it buys
   nothing where it stands, so it is marked rather than greyed. */
.cc-check.is-dup { border-color: var(--danger); border-style: dashed; }
.cc-check.is-dup > span:last-child { text-decoration: line-through; opacity: 0.75; }
.cc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── The skill dialogs ─────────────────────────────────────────────────
   Class skills, and the skills a background repeated. The head carries the
   count — the only place it is said, now that the notes under the grid are
   gone — and the grid itself scrolls rather than growing the sheet past the
   viewport on a class with a long list. */
.cc-skill-sheet .cc-check-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
  max-height: min(46vh, 26rem);
  overflow-y: auto;
  padding-right: 0.2rem;
}
.cc-skill-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--maroon-edge);
}
.cc-skill-head-name { color: var(--gold); font-size: 1rem; }
/* .cc-sub is otherwise only ever styled inside a section heading. */
.cc-skill-head .cc-sub {
  margin: 0;
  color: var(--silver-dim);
  letter-spacing: 0.04em;
  font-size: 0.8rem;
}
.cc-skill-sheet .cc-note { margin: 0 0 0.6rem; }
/* button.act grows to fill its row by default, which turns a lone Done into a
   banner. Here it is one button, sized to its words and set at the end. */
.cc-skill-sheet .btn-row { margin-top: 0.8rem; justify-content: flex-end; }
.cc-skill-sheet .btn-row .act { flex: 0 0 auto; min-width: 8rem; }

.cc-linkish {
  background: none; border: none; padding: 0;
  color: var(--gold); font-size: 0.8rem; text-decoration: underline;
  cursor: pointer;
}
.cc-badge {
  font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gold-deep); border: 1px solid var(--gold-deep);
  border-radius: 999px; padding: 0.05rem 0.4rem; white-space: nowrap;
}
.cc-empty-msg { line-height: 1.5; }
.cc-pv-stats { margin-bottom: 0.2rem; }
.cc-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: 0.9rem;
  color: var(--silver-dim);
  border: 1px dashed var(--maroon-edge);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
}
.cc-issue-block { display: flex; flex-direction: column; gap: 0.3rem; }
.cc-stack { display: flex; flex-direction: column; gap: var(--gap); }

.cc-locked {
  padding: 0.8rem;
  border: 1px dashed var(--gold-deep);
  border-radius: var(--radius-sm);
  color: var(--silver-dim);
}
.cc-locked-title {
  font-family: var(--font-display); font-variant: small-caps; letter-spacing: 0.1em;
  color: var(--gold-deep); margin-bottom: 0.25rem;
}

.cc-decided {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--gold);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-sm);
  background: rgba(230, 192, 74, 0.1);
  margin-bottom: 0.6rem;
}
.cc-decided-name {
  font-family: var(--font-display); font-variant: small-caps; letter-spacing: 0.08em;
  font-size: 1rem; color: var(--gold);
}
.cc-decided-note { flex: 1 1 12rem; font-size: 0.8rem; color: var(--silver-dim); }

.cc-stepper { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.cc-stepper-value {
  min-width: 2.6rem; text-align: center;
  font-size: 1.6rem; font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ── Ability scores ─────────────────────────────────────────────────── */

.cc-tray {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.7rem; padding: 0.5rem;
  border: 1px dashed var(--maroon-edge);
  border-radius: var(--radius-sm);
  min-height: 3rem;
}
.cc-chip-value {
  width: 3rem; min-height: 2.6rem;
  font-size: 1.25rem; font-weight: 700;
  color: var(--gold);
  background: var(--maroon-deep);
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
  cursor: grab;
}
.cc-chip-value.carrying {
  border-color: var(--gold); background: rgba(230, 192, 74, 0.18);
  box-shadow: 0 0 0 2px var(--gold-deep) inset;
}
.cc-ability-slot {
  width: 100%;
  min-height: 2.8rem;
  font-size: 1.4rem; font-weight: 700; color: var(--gold);
  background: var(--maroon-deep);
  border: 1px dashed var(--maroon-edge);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cc-ability-slot:hover { border-color: var(--gold-deep); }
.cc-ability-slot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-ability.empty .cc-ability-slot { color: var(--silver-dim); }

.cc-layers { display: flex; flex-direction: column; gap: 0.1rem; min-height: 1rem; }
.cc-layer { font-size: 0.68rem; letter-spacing: 0.04em; }
.cc-layer.bg { color: var(--gold-deep); }
.cc-layer.asi { color: var(--silver-dim); }
.cc-ability-total { display: flex; align-items: baseline; gap: 0.4rem; }
.cc-ability-final { font-size: 1.15rem; font-weight: 700; color: var(--silver); }

.cc-payoff {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 0.8rem; padding-top: 0.6rem;
  border-top: 1px solid var(--maroon-edge);
}
.cc-payoff-item {
  font-size: 0.8rem; color: var(--silver-dim);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm);
}
/* The one control in a row of readouts, pushed to the far end so it reads as
   an action rather than another value. `margin-left: auto` only reaches the
   end of a line, which is what should happen: when the row wraps on a narrow
   panel the button takes the next line to itself rather than being squeezed
   between two chips. `button.act` otherwise grows to fill, so it is sized to
   its words here. */
.cc-payoff .cc-payoff-action {
  margin-left: auto;
  flex: 0 0 auto;
  min-height: 0;
  padding: 0.25rem 0.9rem;
  font-size: 0.78rem;
}
/* Still to place: marked, not merely dimmed, so the outstanding +3 is visible
   without reading the tooltip. */
.cc-payoff .cc-payoff-action.is-open { box-shadow: 0 0 0 2px var(--gold-deep); }
.cc-payoff .cc-payoff-action:disabled { opacity: 0.55; cursor: not-allowed; }

.cc-asi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
  gap: 0.4rem;
}
.cc-asi-cell {
  text-align: center; padding: 0.5rem 0.3rem;
  border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
}
.cc-asi-cell.on { border-color: var(--gold); background: rgba(230, 192, 74, 0.1); }
.cc-asi-value { min-width: 2rem; font-size: 1rem; font-weight: 700; color: var(--gold); }

/* ── Equipment ──────────────────────────────────────────────────────── */

/* The class kit and the background kit are the same question asked twice, so
   they stand side by side as one row of two equal boxes. Each box stacks its
   own alternatives — the kit, then the gold offered instead of it — rather
   than setting them as two columns of its own, which cost a full row of the
   screen apiece to ask a question with two short answers. */
.cc-kit-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  align-items: stretch;
  gap: var(--gap);
}
.cc-kit { display: flex; flex-direction: column; gap: 0.5rem; }
.cc-kit > h3 { margin-bottom: 0; }
.cc-kit-option {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--maroon-edge);
  border-left: 2px solid transparent;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.cc-kit-option.selected { border-color: var(--gold); border-left-color: var(--gold);
                          background: rgba(230, 192, 74, 0.1); }
/* The two boxes are the same height, so the shorter one's last option — the
   gold offered instead of the kit — sat with a hole under it. Push it to the
   foot of the box; the section's own padding keeps it off the edge. */
.cc-kit-option:last-child { margin-top: auto; }
/* The title and its button share a line. The button used to sit below the
   list, where the grid stretched it into a slab as tall as whatever stood in
   the next column. */
.cc-kit-option-head {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
/* Two classes deep on purpose: the shell's `button.act` sets `flex: 1 1 8rem`
   and a 2.4rem floor, and a single class would lose to it and stretch the
   button across the box. */
.cc-kit-option-head .cc-kit-take {
  margin-left: auto; flex: 0 0 auto;
  min-height: 1.9rem; font-size: 0.72rem; padding: 0.2rem 0.8rem;
  letter-spacing: 0.04em;
}
.cc-compare-title {
  font-family: var(--font-display); font-variant: small-caps; letter-spacing: 0.08em;
  color: var(--gold);
}
.cc-compare-list { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; line-height: 1.5;
                   color: var(--silver-dim); }

/* A kit line that asks a question is answered where it is written, rather than
   in a list of loose ends further down the page. It carries its own bullet, so
   it drops the list's marker and steps back out to the list's edge. */
.cc-kit-choice {
  list-style: none; margin: 0.3rem 0 0.3rem -1.1rem;
  padding: 0.4rem 0.5rem;
  border: 1px dashed var(--gold-deep); border-radius: var(--radius-sm);
}
.cc-kit-choice.open { border-style: solid; border-color: var(--gold); }
.cc-kit-choice-label {
  display: block; margin-bottom: 0.3rem;
  font-size: 0.78rem; letter-spacing: 0.03em; color: var(--silver);
}
/* The alternatives stand across one row, because they are one question: read
   down a column and "Scale mail" and "leather armor" look like two things you
   get, not the one you pick. They fall to a second row only when the box is
   too narrow to hold them. */
.cc-kit-radios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.15rem 0.4rem;
  align-items: start;
}
.cc-kit-radio {
  display: flex; align-items: flex-start; gap: 0.4rem;
  padding: 0.2rem 0.3rem; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.82rem; color: var(--silver-dim);
}
.cc-kit-radio:hover { background: rgba(230, 192, 74, 0.07); }
.cc-kit-radio input { margin-top: 0.2rem; flex: 0 0 auto; accent-color: var(--gold); }
.cc-kit-radio input:disabled { cursor: default; }
.cc-kit-radio:has(input:disabled) { cursor: default; opacity: 0.75; }
.cc-kit-radio:has(input:disabled):hover { background: none; }
.cc-kit-radio.on { color: var(--silver); }
.cc-kit-radio-text { display: flex; flex-direction: column; gap: 0.05rem; }
.cc-kit-radio.on .cc-kit-radio-name { color: var(--gold); }
/* What the choice actually puts in the pack, in the catalogue's own words —
   the whole reason the radio exists rather than a phrase in the inventory. */
.cc-kit-radio-sub {
  font-size: 0.72rem; letter-spacing: 0.02em; color: var(--silver-dim); opacity: 0.8;
}

/* "Any simple weapon" is a category, not an item. Once the alternative holding
   one is taken, the catalogue's shortlist for it is offered here — one
   dropdown per copy, so two weapons can be two different weapons. */
.cc-kit-slots {
  display: flex; flex-direction: column; gap: 0.3rem;
  margin-top: 0.4rem; padding-top: 0.4rem;
  border-top: 1px dashed var(--maroon-edge);
}
.cc-kit-slot { display: flex; flex-direction: column; gap: 0.15rem; }
.cc-kit-slot-label {
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--silver-dim);
}
.cc-kit-slot.on .cc-kit-slot-label { color: var(--gold); }
.cc-kit-select {
  width: 100%; max-width: 100%;
  padding: 0.25rem 0.4rem; font: inherit; font-size: 0.8rem;
  color: var(--silver); background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm);
}
.cc-kit-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cc-kit-slot.on .cc-kit-select { border-color: var(--gold-deep); color: var(--gold); }
/* A grant with a slot under it gets the same block shape as a question. */
.cc-kit-line {
  list-style: none; margin: 0.3rem 0 0.3rem -1.1rem;
  padding: 0.4rem 0.5rem;
  border: 1px dashed var(--maroon-edge); border-radius: var(--radius-sm);
}
.cc-kit-line-text { display: block; }

.cc-pinned {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  position: sticky; top: 0; z-index: 1;
  padding: 0.4rem 0; margin-bottom: 0.5rem;
  background: linear-gradient(180deg, rgba(56, 16, 26, 0.98), rgba(56, 16, 26, 0.9));
}
.cc-pinned-item {
  font-size: 0.8rem; color: var(--gold);
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.cc-pinned-item.warn { color: var(--danger); border-color: var(--danger); }

.cc-scroll-list {
  max-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--maroon-edge);
  border-radius: var(--radius-sm);
}
.cc-row-sub { display: block; font-size: 0.72rem; color: var(--silver-dim); }
.cc-qty {
  width: 3.6rem; text-align: center;
  background: var(--maroon-deep); color: var(--silver);
  border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm);
  padding: 0.15rem 0.3rem;
}
.cc-custom-item { display: flex; gap: 0.5rem; margin-top: 0.7rem; align-items: center; flex-wrap: wrap; }
.cc-custom-item .cc-search { flex: 1 1 12rem; }
.cc-play-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.35rem 0; font-size: 0.85rem; color: var(--silver-dim);
}
.cc-portrait {
  max-width: 9rem; margin-top: 0.6rem;
  border-radius: var(--radius-sm); border: 1px solid var(--maroon-edge);
}

/* ── Review tabs ────────────────────────────────────────────────────── */

.cc-tabs {
  display: flex; gap: 0.3rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--maroon-edge);
}
.cc-tab {
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  font-family: var(--font-display); font-variant: small-caps; letter-spacing: 0.1em;
  font-size: 0.82rem;
  color: var(--silver-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}
.cc-tab:hover { color: var(--gold-bright); }
.cc-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-tab.on { color: var(--gold); border-color: var(--maroon-edge); border-bottom-color: transparent;
             background: rgba(230, 192, 74, 0.1); }
.cc-tabpanel { display: flex; flex-direction: column; gap: var(--gap); }

.cc-subgroup { border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm);
               padding: 0.4rem 0.6rem; margin-bottom: 0.5rem; }
.cc-subgroup-head {
  font-family: var(--font-display); font-variant: small-caps; letter-spacing: 0.1em;
  color: var(--gold); cursor: pointer; padding: 0.2rem 0;
}

/* ── The preview panel ──────────────────────────────────────────────── */

input.cc-pv-name-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--maroon-edge);
  border-radius: 0;
  padding: 0.1rem 0 0.2rem;
}
input.cc-pv-name-input:focus {
  outline: none; border-bottom-color: var(--gold); background: rgba(0, 0, 0, 0.18);
}
.cc-sync { font-size: 0.68rem; color: var(--silver-dim); margin-top: 0.3rem; opacity: 0.85; }
.cc-pv-line { font-size: 0.88rem; color: var(--gold); font-variant-numeric: tabular-nums; }
/* Two columns, filled down then across, so the steps still read in order.
   The row count comes from the step list itself — renderPreview sets
   --pv-rows — because a step that is not available to this character is not
   in the list, and the split has to stay even when that happens. */
.cc-pv-progress {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--pv-rows, 4), auto);
  gap: 0.2rem 0.3rem;
}
.cc-pv-step {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.3rem;
  font-size: 0.74rem;
  color: var(--silver-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}
.cc-pv-step:hover { color: var(--gold-bright); border-color: var(--maroon-edge); }
.cc-pv-step.done { color: var(--gold-deep); }
.cc-pv-step.current { color: var(--gold); border-color: var(--gold-deep); }
.cc-pv-mark { flex: 0 0 auto; width: 0.8rem; text-align: center; }

/* The one orchestrated moment: a confirmed choice landing in its slot. */
.flash { animation: cc-flash 0.7s ease-out; }
@keyframes cc-flash {
  0% { background: rgba(230, 192, 74, 0.35); }
  100% { background: transparent; }
}

.cc-loss-list { margin: 0.4rem 0 0.8rem 1.1rem; font-size: 0.88rem; line-height: 1.6; color: var(--silver); }
.cc-confirm-actions { justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════════════
   Compact — three regions become one

   The tabs at the top of the frame choose which region is on screen. The
   flow is unchanged: the same steps in the same order, with Steps / Build /
   Character as three views of it rather than three columns of it.

   What does NOT hide with the rail is the question and the Back/Next pair:
   a step's question has to stay above the controls that answer it.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  body.app-body > .app.cc-guided {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .cc-col-rail {
    display: flex;
    gap: 0.3rem;
    grid-column: 1; grid-row: 1;
    padding-bottom: 0.5rem;
  }
  .cc-col-tab {
    flex: 1 1 auto;
    min-height: 2.75rem;
    padding: 0.4rem 0.5rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    color: var(--silver-dim);
    background: var(--maroon-deep);
    border: 1px solid var(--maroon-edge);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .cc-col-tab[aria-selected="true"] {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(230, 192, 74, 0.12);
  }

  .cc-guided > .cc-rail,
  .cc-guided > .cc-work,
  .cc-guided > .cc-preview { display: none; grid-column: 1; grid-row: 2; }
  .cc-guided[data-column="rail"] > .cc-rail { display: flex; }
  .cc-guided[data-column="work"] > .cc-work { display: flex; }
  .cc-guided[data-column="preview"] > .cc-preview { display: block; }

  /* One column that scrolls as a whole, with the step's action pinned to the
     bottom of it: one thumb, bottom of the screen. */
  .cc-work { overflow-y: auto; overscroll-behavior: contain; }
  .cc-work-body {
    overflow: visible;
    min-height: 0;
    padding-right: 0;
  }
  /* Two rows: what has been decided, then the two buttons. One line each, so
     neither is squeezed into a ribbon by the other. */
  .cc-step-nav {
    position: sticky;
    bottom: 0;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    padding: 0.5rem 0 0.4rem;
    background: var(--maroon-deep);
    border-top: 1px solid var(--maroon-edge);
  }
  .cc-step-hint {
    order: -1;
    flex: 1 1 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    text-align: left;
  }
  .cc-step-nav .act { min-height: 2.75rem; white-space: nowrap; }
  .cc-step-nav #cc-back { flex: 0 0 6rem; }
  .cc-step-nav #cc-next { flex: 1 1 auto; }
  .cc-nav-identity { display: block; color: var(--gold); font-size: 0.78rem; }
  .cc-nav-note { font-size: 0.7rem; text-align: right; }
  .cc-cards { grid-template-columns: minmax(0, 1fr); }
  .cc-card { min-height: 5.5rem; }
  /* Four portraits in a phone's width would be four slivers; two is still a
     picture. The aspect ratio goes with them — height comes from content. */
  .cc-cards.portrait .cc-card {
    flex-basis: calc((100% - 0.6rem) / 2);
    aspect-ratio: auto;
    min-height: 11rem;
  }
  /* The square variant carries a stronger selector, so it has to stand down
     here by name or it would hold its ratio through the phone layout. */
  .cc-cards.portrait.square .cc-card { aspect-ratio: auto; }
  .cc-picker-split { grid-template-columns: 1fr; height: auto; }
  .cc-picker-list { max-height: 40vh; }
  .cc-picker-detail { max-height: 30vh; }
  /* Two columns need two columns' worth of width. Narrower than that, the
     catalogue leads and the ledger follows it down the page. */
  .cc-spell-screen { grid-template-columns: 1fr; min-height: 0; }
  .cc-work-body > .cc-spell-screen { flex: 0 0 auto; }
  .cc-spell-column { display: block; }
  .cc-spell-ledger { overflow: visible; padding-right: 0; }
  .cc-spell-ledger > * + * { margin-top: var(--gap); }
  .cc-spell-list { max-height: 45vh; }
  .cc-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .cc-preview .cc-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cc-abilities { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.4rem; }
  .cc-pv-abilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Below the tablet breakpoint a table stops being a table: one card per row,
   label and value paired. The attacks table is the exception — it is read
   mid-combat, where scanning beats completeness, so it stays tabular with
   its two widest columns dropped. */
@media (max-width: 767px) {
  .cc-stacked thead { display: none; }
  .cc-stacked, .cc-stacked tbody, .cc-stacked tr, .cc-stacked td { display: block; width: 100%; }
  .cc-stacked tr {
    border: 1px solid var(--maroon-edge);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.5rem;
  }
  .cc-stacked td {
    display: flex; justify-content: space-between; gap: 0.6rem;
    border-bottom: none; padding: 0.2rem 0;
  }
  .cc-stacked td::before {
    content: attr(data-label);
    font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--silver-dim);
  }
  .cc-attacks .cc-drop-sm { display: none; }
  .cc-sheet-grid { columns: 1; }
  .cc-kit-row { grid-template-columns: minmax(0, 1fr); }
}

/* Between the compact breakpoint and a comfortable laptop the preview gives
   ground first: the work area holds the card grids that need the width. */
@media (min-width: 901px) and (max-width: 1180px) {
  body.app-body > .app.cc-guided {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 16rem);
  }
  .cc-preview .cc-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-pv-abilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-step-count { font-size: 1.15rem; }
  /* Three across rather than four: a quarter of a 12rem-narrower work area
     is not enough card to read one in. */
  .cc-cards.portrait .cc-card { flex-basis: calc((100% - 2 * 0.6rem) / 3); }
}

/* The square cards drop a column earlier than the portraits do, and these
   rules follow the ones above so they win at equal specificity. A square is
   the shortest shape a card can be, so it is the first to lose to its own
   text: four across a laptop's work area leaves ~155px, the three lines wrap
   to six, and the card stands half again as tall as it is wide. Fewer, wider
   cards is what keeps the shape — the ratio can only ever be a floor. */
@media (max-width: 1500px) {
  .cc-cards.portrait.square .cc-card { flex-basis: calc((100% - 2 * 0.6rem) / 3); }
}
/* Two across from here down. The step above 1180 is the tightest the work area
   ever gets — the rail and the preview are still at full width while the
   viewport is not — so this drops a column before that band, not after it. */
@media (max-width: 1400px) {
  .cc-cards.portrait.square .cc-card { flex-basis: calc((100% - 0.6rem) / 2); }
}

/* ══════════════════════════════════════════════════════════════════════
   Reduced motion — everything above becomes a short cross-fade
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .cc-work-body.enter-forward,
  .cc-work-body.enter-back { animation: cc-fade 0.08s linear; }
  @keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
  .flash { animation: cc-fade 0.08s linear; }
  .cc-skeleton { animation: none; }
  .cc-rail-bar { transition: none; }
  .cc-card, .cc-seg, .cc-flow-step { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Print — the sheet, without the chrome
   ══════════════════════════════════════════════════════════════════════ */

@media print {
  .app-nav, .cc-col-rail, .cc-step-nav, .cc-rail, .cc-recovery, .sheet-scrim,
  .toast, #pt-veil, .cc-row-add, .cc-remove, .cc-step, .cc-tabs {
    display: none !important;
  }
  body.app-body { height: auto; overflow: visible; background: #fff; color: #000; }
  body.app-body > .app.cc-guided {
    display: block;
    padding: 0;
    overflow: visible;
  }
  .cc-work, .cc-work-body, .cc-preview {
    display: block;
    max-width: none;
    max-height: none;
    overflow: visible;
    border: none;
    background: #fff;
  }
  .cc-section, .cc-ability, .cc-pv-block, .cc-card {
    background: #fff; border-color: #999; color: #000;
    break-inside: avoid; page-break-inside: avoid;
  }
  .cc-section > h3, .cc-pv-title, .cc-ability-name, .cc-feature-name,
  .cc-stat-value, .cc-table .mod, .cc-card-name { color: #000; }
}