/* Component primitives — adapted from .fr-tools-ui-example/tracker/www/assets/css/components.css.
   Only the primitives FR uses in v0.1 are ported here; everything tracker-domain
   specific (kanban, milestone-bar, time-ledger, chip-picker, contact-list,
   audit-panel, social/grassroots rails, etc.) is dropped. FR additions for the
   home tile grid, character-builder tabs, and ability table are at the bottom. */

/* ───── FontAwesome SVG mask utility ────────────────────────────────
   Source SVGs in /assets/icon/*.svg are FA stock paths or our own
   single-color shapes. Rendered via CSS mask so the icon takes on the
   parent's color value (theme-cohesive). Use:
     <span class="icon" style="--icon: url(/assets/icon/bars.svg);"></span>
   Sizes default to 14px square; --icon-sm / --icon-lg override. */

.icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  flex: none;
}
.icon--sm { width: 12px; height: 12px; }
.icon--lg { width: 16px; height: 16px; }
.icon--xl { width: 22px; height: 22px; }

/* ───── Buttons ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover    { background: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn--primary {
  background: var(--accent);
  color: var(--ink-on-strong);
  border-color: var(--accent);
}
.btn--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--ink-on-strong);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.btn--ghost:hover { background: var(--hover); border-color: transparent; color: var(--ink); }

.btn--danger {
  border-color: var(--danger);
  color: var(--danger);
}
.btn--danger:hover { background: var(--danger-soft); }

.btn--sm { padding: 5px 10px; font-size: var(--fs-xs); }

/* Plain text-link affordance — no button chrome. */
.link {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}
.link:hover { color: var(--ink); }
.link--xs { font-size: var(--fs-xs); }
.link--danger { color: var(--danger); opacity: 0.75; }
.link--danger:hover { color: var(--danger); opacity: 1; }

/* ───── Form inputs — old-school underline style ─────────────────────
   Default: subtle slate-grey background (--input-bg), bottom border only,
   no rounding. Hover/focus: background pops to --input-bg-active (pure
   white on light theme, lighter charcoal on dark), bottom border thickens
   to the accent. No glow ring — the bg shift carries the focus signal. */

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--input-bg);
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  transition: background var(--t-fast), border-color var(--t-fast);
  color-scheme: var(--color-scheme);
  font-family: inherit;
}

.input::placeholder,
.textarea::placeholder { color: var(--ink-3); }

.input:hover,
.select:hover,
.textarea:hover {
  background: var(--input-bg-active);
  border-bottom-color: var(--ink-3);
}

.input:focus,
.select:focus,
.textarea:focus {
  background: var(--input-bg-active);
  border-bottom-color: var(--accent);
  outline: none;
  box-shadow: none;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237c8f99' stroke-width='1.5'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: var(--input-bg);
  padding-right: 30px;
}
.select:hover, .select:focus { background-color: var(--input-bg-active); }

.textarea {
  resize: vertical;
  min-height: 80px;
  line-height: var(--lh);
}

.label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field { display: flex; flex-direction: column; }
.field + .field { margin-top: var(--sp-3); }
.form-grid > .field + .field { margin-top: 0; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.form-grid .field--span-2 { grid-column: span 2; }
.form-grid .field--span-3 { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field--span-2,
  .form-grid .field--span-3 { grid-column: auto; }
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.form-actions__spacer { flex: 1; }
.form-actions__hint { font-size: var(--fs-xs); color: var(--ink-3); }

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding: 8px 0;
}
.checkbox-row input { accent-color: var(--accent); }

/* ───── Lists (tracker pattern, used for sidebar items / inline lists) ── */

.list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-none);
}
.list__row {
  display: grid;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px var(--sp-3);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
  min-height: 36px;
}
.list__row:last-child { border-bottom: none; }
.list__row:hover { background: var(--hover); }

.list__row-title  { font-size: var(--fs-md); color: var(--ink); }
.list__row-sub    { font-size: var(--fs-xs); color: var(--ink-3); }
.list__row-meta   { font-size: var(--fs-xs); color: var(--ink-3); }
.list__row-actions { display: inline-flex; gap: var(--sp-2); }

/* ───── Tags (small chip) ───────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.tag--ok {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.tag--bad {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--border);
  text-transform: none;
  letter-spacing: 0;
}
.tag--xp {
  background: var(--accent);
  color: var(--ink-on-strong);
  border-color: var(--accent);
}

/* ───── Tooltip (body-level fixed div, JS-driven via [data-tooltip]) ──
   Ported from www/assets/css/cd.css .obi-tooltip — body-level positioning
   escapes ancestor overflow / stacking-context clipping. Hover + focus only;
   touch devices rely on visible text labels surfaced via media query.
   Anchored ABOVE the element with a downward-pointing arrow. */

.tooltip {
  position: fixed;
  background: var(--surface-hero);
  color: var(--ink-hero);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
  line-height: 1.4;
  max-width: 280px;
  white-space: normal;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 9999;
  transform: translateX(-50%);
  border-top: 2px solid var(--accent);
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: var(--surface-hero) transparent transparent transparent;
}
/* Opt-in: data-tooltip-pos="below" anchors the bubble under the element
   with an upward-pointing arrow. Default behavior is above. */
.tooltip--below { border-top: 0; border-bottom: 2px solid var(--accent); }
.tooltip--below::after {
  top: auto;
  bottom: 100%;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent var(--surface-hero) transparent;
}
.tooltip--visible {
  opacity: 1;
}

/* ───── Inline code typography ──────────────────────────────────────── */

code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--ink-3);
}

/* ───── Hero / inset surfaces ───────────────────────────────────────── */

.surface--hero {
  background: var(--surface-hero);
  color: var(--ink-hero);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}
.surface--hero h1,
.surface--hero h2,
.surface--hero h3 { color: var(--ink-hero); }
.surface--hero a  { color: var(--ink-hero); }

.surface--inset {
  background: var(--surface-inset);
  color: var(--ink-inset);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.surface--inset h1,
.surface--inset h2,
.surface--inset h3 { color: var(--ink-inset); }

/* ─────────────────────────────────────────────────────────────────── */
/*  FR additions  —  surfaces tracker doesn't have                     */
/* ─────────────────────────────────────────────────────────────────── */

/* Home masthead */
.home-masthead {
  text-align: center;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-7);
}
.home-masthead__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.home-masthead__subtitle {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--ink-2);
}

/* Group sections on home — small-caps label + tile grid */
.home-group {
  margin-bottom: var(--sp-7);
}
.home-group__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-3);
  text-align: center;
}
.home-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}

/* Card tile */
.card {
  display: block;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.card:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--ink);
}
.card__label {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--ink);
}
.card__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* Featured card — flagship tool with portrait beside the label. The portrait
   is fed by the --character-image var set by randomizer.js. Spans 2 columns
   and 2 rows of the auto-fill grid so it visibly dominates. */
.card--featured {
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  min-height: 220px;
}
.card--featured .card__image {
  background: var(--surface-2) var(--character-image, none) center/cover no-repeat;
  border-right: 1px solid var(--border);
}
.card--featured:hover .card__image {
  border-right-color: var(--accent);
}
.card--featured .card__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1, 4px);
}
@media (max-width: 480px) {
  .card--featured {
    grid-template-columns: 1fr;
    grid-template-rows: 180px auto;
  }
  .card--featured .card__image {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .card--featured:hover .card__image {
    border-bottom-color: var(--accent);
  }
}

/* Tabs strip — used by Character Sheet Builder */
.tabs {
  display: flex;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}
.tabs__item {
  padding: var(--sp-3) 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font: inherit;
}
.tabs__item:hover { color: var(--ink); }
.tabs__item.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: var(--fw-semi);
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Ability table */
.ability-table {
  width: 100%;
  border-collapse: collapse;
}
.ability-table th {
  text-align: left;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.ability-table td {
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  vertical-align: middle;
}
.ability-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.ability-table .ability-name {
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
}
.ability-table .input { width: 64px; text-align: center; }
.ability-table .placeholder {
  color: var(--ink-3);
  font-style: italic;
}
.ability-table .ability-name__full {
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-left: var(--sp-1);
}

/* Race-adjustment chip (small pip in the Race column of the Abilities table) */
.cs-adj-chip {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--ink-3);
  text-align: center;
}
.cs-adj-chip.is-applied {
  background: var(--accent-soft);
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

.cs-final {
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
  color: var(--ink);
}

.cs-bonus {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  cursor: help;
}

/* Help-icon pip next to a label (icon-only — tooltip carries meaning). */
.cs-help {
  margin-left: var(--sp-1);
  color: var(--ink-3);
  cursor: help;
  vertical-align: middle;
}
.cs-help:hover { color: var(--accent); }

/* Roll-method strip */
.roll-strip {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

/* Dice roller history list */
.dice-history {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.dice-history__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.dice-history__total {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  color: var(--accent);
  min-width: 2em;
  text-align: center;
}
.dice-history__detail {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* Utility: small muted text */
.muted { color: var(--ink-3); }
.legal-prose {
  max-width: 38em;
  line-height: var(--lh);
}
.legal-prose p { margin-top: var(--sp-4); }
.legal-prose p:first-child { margin-top: 0; }

/* ───── Character Sheet Builder — surface primitives ─────────────────
   Guided step banner above each tab panel; selectable option rows for
   the Race / Class pickers; level field beneath the class list. */

.cs-guide {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-3);
  line-height: var(--lh);
}

.cs-options {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cs-option {
  background: var(--surface);
  border: 1px solid var(--border);
}
.cs-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.cs-option.is-disabled {
  opacity: 0.55;
}
.cs-option.is-disabled .cs-option__btn { cursor: not-allowed; }

.cs-option__btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.cs-option__btn:hover { background: var(--hover); }
.cs-option.is-selected .cs-option__btn:hover { background: transparent; }
.cs-option__name {
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
  flex: 0 0 8em;
}
.cs-option__meta {
  flex: 1;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.cs-option .tag { flex: none; margin-left: auto; }

.cs-level-field {
  max-width: 8em;
  margin-top: var(--sp-4);
}

/* Header status line beside the action buttons */
.cs-status {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin-left: var(--sp-2);
}

/* ───── Tabs with leading icons (Character Sheet Builder) ───────────── */

.tabs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.tabs__item .icon { color: currentColor; }
.tabs__item:not(.is-active):not(.is-completed) {
  opacity: 0.7;
}
.tabs__item.is-completed:not(.is-active) {
  color: var(--ink);
}
.tabs__item.is-completed:not(.is-active) .icon { color: var(--accent); }

/* ───── Mobile pass ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Page-header buttons stack vertically and fill width on narrow screens. */
  .page__header-actions { width: 100%; }
  .page__header-actions .btn { flex: 1; min-width: 0; }

  /* Tabs collapse to icon-first; the text label still wraps if there's room. */
  .tabs.cs-tabs { gap: var(--sp-3); overflow-x: auto; }
  .tabs.cs-tabs .tabs__item-label { font-size: var(--fs-xs); }

  /* Race/Class option rows reflow: name on top, meta + badge below. */
  .cs-option__btn { flex-wrap: wrap; }
  .cs-option__name { flex: 1 0 100%; }
  .cs-option__meta { flex: 1 0 auto; }
}

/* ───── Round 6 Character Builder — scene-per-decision primitives ───── */

.cb-page__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.cb-page__title { font-size: var(--fs-2xl); font-weight: var(--fw-semi); flex: 1; }
.cb-generate {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.cb-generate:hover { background: var(--accent-soft); }

.cb-scene { padding: 0; }
.cb-scene[hidden] { display: none; }
.cb-scene__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.cb-scene__step-no {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cb-scene__title { font-size: var(--fs-xl); font-weight: var(--fw-semi); flex: 1; }
.cb-scene__lede {
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--ink-2);
  line-height: var(--lh);
  margin: 0 0 var(--sp-5);
  max-width: 56em;
}
.cb-scene__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* Step nav strip — numbered chips along the top of the build shell */
.cb-step-nav {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.cb-step-nav__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}
.cb-step-nav__chip:hover:not(:disabled) { color: var(--ink-2); }
.cb-step-nav__chip.is-current { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--fw-semi); }
.cb-step-nav__chip.is-done    { color: var(--ink-2); }
.cb-step-nav__chip:disabled { cursor: not-allowed; opacity: 0.5; }
.cb-step-nav__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: var(--fw-semi);
}
.cb-step-nav__chip.is-current .cb-step-nav__no { background: var(--accent); color: var(--ink-on-strong); }
.cb-step-nav__chip.is-done .cb-step-nav__no    { background: var(--accent-soft); color: var(--accent); }

/* Card grid (race / class / alignment / deity pickers) */
.cb-card-grid {
  display: grid;
  gap: var(--sp-3);
}
.cb-card-grid--wide  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-card-grid--tight { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cb-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--sp-4);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cb-card:hover:not(.is-disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.cb-card.is-selected { background: var(--accent-soft); border-color: var(--accent); }
.cb-card.is-disabled { opacity: 0.55; cursor: not-allowed; }
.cb-card__head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cb-card__name { font-size: var(--fs-lg); font-weight: var(--fw-semi); flex: 1; }
.cb-card__lede {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh);
  margin: 0 0 var(--sp-3);
}
.cb-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: auto;
}
.cb-card__chip {
  display: inline-flex;
  padding: 1px 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
}
.cb-card__more {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--accent);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.cb-card__more:hover { text-decoration: underline; }

/* Calculator equation */
.cb-equation {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-family: inherit;
}
.cb-equation__num   { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.cb-equation__op    { color: var(--ink-3); }
.cb-equation__note  { font-style: italic; color: var(--ink-3); font-size: var(--fs-xs); }
.cb-equation__total { font-weight: var(--fw-semi); color: var(--accent); }

/* ── Builder rail — decorated character portrait ───────────────────
   In "build" variant the rail hides its standard chrome (banner, section
   label, +New button) and gives the running character the dominant
   surface: name as the title, race/class/level/alignment as subtitle,
   then stats and gear stack below. Sections only render when populated. */

.nav-rail--build .nav-rail__section-label,
.nav-rail--build .nav-rail__new-btn,
.nav-rail--build .nav-rail__empty { display: none; }
.nav-rail--build { gap: 0; padding: 0; }

.cb-rail { padding: 0; }

.cb-rail__head {
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.cb-rail__title {
  font-family: 'Andada Pro', serif;
  font-weight: var(--fw-semi);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--ink);
  cursor: text;
  word-break: break-word;
}
.cb-rail__title:hover { color: var(--accent); }
.cb-rail__title.is-empty { color: var(--ink-3); font-style: italic; font-weight: var(--fw-regular); }

.cb-rail__sub {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-2);
  margin-top: 4px;
  line-height: 1.35;
}

.cb-rail__edit-input {
  font-family: 'Andada Pro', serif;
  font-weight: var(--fw-semi);
  font-size: var(--fs-2xl);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent);
  width: 100%;
  text-align: center;
  padding: 0;
  box-sizing: border-box;
}
.cb-rail__edit-input:focus { outline: none; }

/* Stats grid — abilities left, combat right. */
.cb-rail__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-4);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
}
.cb-rail__stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
}
.cb-rail__stat-k {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cb-rail__stat-v {
  font-family: 'Andada Pro', serif;
  font-weight: var(--fw-semi);
  color: var(--ink);
}

.cb-rail__saves {
  padding: 0 var(--sp-3) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  border-bottom: 1px solid var(--border);
}

.cb-rail__section {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.cb-rail__section:last-child { border-bottom: none; }
.cb-rail__list-item { padding: 1px 0; color: var(--ink); }
.cb-rail__list-item--muted {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 4px;
}

/* Dice cell (visible HP roll / ability roll) */
.cb-dice {
  display: inline-block;
  width: 48px; height: 48px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semi);
  line-height: 48px;
  color: var(--ink);
}
.cb-dice.is-rolling { animation: cb-dice-tumble 600ms steps(8, end); color: var(--accent); }
@keyframes cb-dice-tumble {
  0%   { transform: rotate(0deg)   scale(1.00); }
  25%  { transform: rotate(15deg)  scale(1.06); }
  50%  { transform: rotate(-12deg) scale(0.96); }
  75%  { transform: rotate(8deg)   scale(1.04); }
  100% { transform: rotate(0deg)   scale(1.00); }
}

/* Accent-pulse flash on changed numbers */
.cb-flash { animation: cb-flash 300ms ease-out; }
@keyframes cb-flash {
  0%   { color: var(--accent);       transform: scale(1.06); }
  100% { color: inherit;             transform: scale(1.00); }
}

/* Lore drawer (right slide-in) */
.cb-lore-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 380px; max-width: 100vw;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform 200ms ease;
  z-index: 9000;
  display: flex;
  flex-direction: column;
}
.cb-lore-drawer.is-open { transform: translateX(0); }
.cb-lore-drawer__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.cb-lore-drawer__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); flex: 1; }
.cb-lore-drawer__close {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 0;
}
.cb-lore-drawer__close:hover { color: var(--accent); }
.cb-lore-drawer__body {
  padding: var(--sp-4);
  overflow-y: auto;
  flex: 1;
  font-size: var(--fs-sm);
  line-height: var(--lh);
  color: var(--ink-2);
}
.cb-lore-drawer__body p { margin: 0 0 var(--sp-3); }
.cb-lore-drawer__backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  z-index: 8999;
}
.cb-lore-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Welcome scene */
.cb-welcome { text-align: center; padding: var(--sp-6) var(--sp-4); }
.cb-welcome__title { font-size: var(--fs-4xl); font-weight: var(--fw-semi); margin-bottom: var(--sp-3); }
.cb-welcome__sub   { font-size: var(--fs-lg); color: var(--ink-2); margin-bottom: var(--sp-6); }
.cb-welcome__actions {
  display: flex; flex-direction: column; gap: var(--sp-3);
  max-width: 24em; margin: 0 auto;
}

/* Abilities scene */
.cb-method-strip {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.cb-method-btn {
  flex: 1; min-width: 12em;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cb-method-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.cb-method-btn.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.cb-method-btn__name { font-weight: var(--fw-semi); display: block; margin-bottom: 2px; }
.cb-method-btn__gloss { font-size: var(--fs-xs); color: var(--ink-3); }

.cb-ability-grid {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
  max-width: 36em;
}
.cb-ability-grid__row { display: contents; }
.cb-ability-grid__key {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--ink);
}
.cb-ability-grid__score { text-align: center; }
.cb-ability-grid__bonus { font-size: var(--fs-xs); color: var(--ink-3); }
.cb-pool {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
}
.cb-pool__label { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.cb-pool__values { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cb-pool__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-weight: var(--fw-semi);
  cursor: grab;
}
.cb-pool__value.is-placed { opacity: 0.4; cursor: default; }

/* Player/DM toggle (used by build flow's S13 Review scene) */
.cb-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
}
.cb-toggle__btn {
  padding: 4px 12px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
}
.cb-toggle__btn.is-active { background: var(--accent); color: var(--ink-on-strong); }

/* Sheet view (S13 Review + /character/{slug}) */
.cb-sheet { padding: var(--sp-4); }
.cb-sheet-empty {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 540px;
}
.cb-sheet-empty p { margin: 0 0 var(--sp-3); color: var(--ink-2); }
.cb-sheet-empty code {
  background: var(--surface-2);
  padding: 1px 6px;
  font-size: 0.9em;
  border-radius: 2px;
}
.cb-sheet__banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  background: var(--surface-hero);
  color: var(--ink-hero);
  border-bottom: 3px solid var(--accent);
}
.cb-sheet__banner h2,
.cb-sheet__banner h1 { color: var(--ink-hero); }
.cb-sheet__name { font-size: var(--fs-4xl); font-weight: var(--fw-semi); }
.cb-sheet__sub  { font-size: var(--fs-md); color: var(--ink-hero); opacity: 0.85; }
.cb-sheet__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.cb-sheet__block {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--sp-4);
}
.cb-sheet__block-head {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: var(--sp-3);
}
.cb-sheet__stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-3);
}
.cb-sheet__stat { display: flex; justify-content: space-between; align-items: baseline; }
.cb-sheet__stat-key   { color: var(--ink-3); font-size: var(--fs-sm); }
.cb-sheet__stat-val   { font-weight: var(--fw-semi); font-size: var(--fs-md); }
.cb-sheet__cite {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 1px;
}
.cb-sheet.is-player-view .cb-sheet__cite { display: none; }

/* Play-surface variant of the sheet view (used at /character/{slug}).
   No outer padding so the banner runs edge-to-edge of the main column;
   subdued banner treatment signals "this is a heading, not interactive." */
.cb-sheet.is-play-surface { padding: 0; }

.cb-sheet__banner.is-play {
  background: var(--surface-2);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  gap: var(--sp-3);
}
.cb-sheet__banner.is-play .cb-sheet__name,
.cb-sheet__banner.is-play .cb-sheet__sub { color: var(--ink); }
.cb-sheet__banner.is-play .cb-sheet__sub { opacity: 1; color: var(--ink-2); }
.cb-sheet__banner.is-play .cb-sheet__name { font-size: var(--fs-3xl); line-height: 1.1; }

.cb-sheet__banner-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
}
.cb-sheet__banner-id {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.cb-sheet__banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.cb-sheet__ability-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-2);
}
.cb-sheet__banner.is-play .cb-sheet__ability-strip {
  margin-top: var(--sp-1);
}
.cb-sheet__ability-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.cb-sheet__ability-key {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cb-sheet__ability-val {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
}

.cb-sheet__play {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
  gap: var(--sp-5);
}
.cb-sheet__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cb-sheet__col--vitals,
.cb-sheet__col--kit {
  border-left: 2px solid var(--accent-soft);
  padding-left: var(--sp-3);
}

.cb-sheet__hp-line {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  justify-content: center;
}
.cb-sheet__big {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semi);
  line-height: 1;
}
.cb-sheet__big-sep {
  color: var(--ink-3);
  font-size: var(--fs-2xl);
}

.cb-sheet__gold-line {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.cb-sheet__notes-static {
  white-space: pre-wrap;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  min-height: 1em;
}

/* Mobile */
@media (max-width: 720px) {
  .cb-card-grid--wide,
  .cb-card-grid--tight { grid-template-columns: 1fr; }
  .cb-sheet__cols { grid-template-columns: 1fr; }
  .cb-sheet__play { grid-template-columns: 1fr; }
  .cb-sheet__ability-strip { grid-template-columns: repeat(3, 1fr); }
  .cb-sheet__banner-top { flex-direction: column; align-items: stretch; }
  .cb-method-btn { min-width: 100%; }
  .cb-ability-grid { grid-template-columns: 1fr 80px 1fr; }
  .cb-page__head { flex-wrap: wrap; }
  .cb-generate { width: 100%; justify-content: center; }
  .cb-lore-drawer { width: 100vw; }
}

/* Cascade warning chip: appears inline next to fields whose value violates
   a downstream constraint (ability minimum, alignment, armor allow, etc.). */
.cb-cascade-warning {
  display: inline-block;
  font-size: 10px;
  background: #c44;
  color: #fff;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 2px;
  vertical-align: middle;
}
[data-theme="dark"] .cb-cascade-warning { background: #d66; color: #1a1d23; }

/* ── Round 7: level-up overlay ─────────────────────────────────────── */

.cb-levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.cb-levelup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.cb-levelup-panel {
  position: relative;
  width: min(960px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  overflow: hidden;
}
.cb-levelup-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-hero);
  color: var(--ink-hero);
  border-bottom: 2px solid var(--accent);
}
.cb-levelup-eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-hero);
  opacity: 0.8;
}
.cb-levelup-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semi);
  color: var(--ink-hero);
  margin: 0;
}
.cb-levelup-nav {
  display: flex;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.cb-levelup-step {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: none;
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  text-align: center;
  font-size: var(--fs-sm);
}
.cb-levelup-step:hover { color: var(--ink); }
.cb-levelup-step.is-current {
  background: var(--surface);
  color: var(--accent);
  font-weight: var(--fw-semi);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.cb-levelup-body {
  padding: var(--sp-5);
  overflow-y: auto;
  flex: 1;
}
.cb-levelup-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: space-between;
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.cb-levelup-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-3);
}
.cb-levelup-table th,
.cb-levelup-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.cb-levelup-table th {
  font-weight: var(--fw-semi);
  color: var(--ink-2);
}
.cb-levelup-table code {
  font-size: 10px;
  color: var(--ink-3);
}
.cb-dice.is-max {
  background: var(--accent);
  color: var(--ink-on-strong);
}

@media (max-width: 720px) {
  .cb-levelup-overlay { padding: 0; }
  .cb-levelup-panel {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
  }
  .cb-levelup-nav { flex-wrap: wrap; }
  .cb-levelup-step { min-width: 50%; }
}

/* ── Round 7: pickers (NWP + spells) ───────────────────────────────── */

.cb-picker {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: var(--sp-3);
}
.cb-picker__head {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.cb-picker__counter {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.cb-picker__counter strong { color: var(--ink); font-weight: var(--fw-semi); }
.cb-picker__search { flex: 1 1 200px; }
.cb-picker__filter { flex: 0 0 auto; }
.cb-picker__levels {
  display: flex;
  gap: 4px;
  flex: 1 1 100%;
  flex-wrap: wrap;
}
.cb-picker__level {
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--ink-2);
}
.cb-picker__level.is-current {
  background: var(--accent);
  color: var(--ink-on-strong);
  border-color: var(--accent);
}
.cb-picker__chosen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--sp-3);
  padding: var(--sp-2);
  background: var(--accent-soft);
}
.cb-picker__chosen-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  width: 100%;
}
.cb-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--surface);
  border: 1px solid var(--accent);
  font-size: var(--fs-sm);
}
.cb-picker__chip-remove {
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
}
.cb-picker__chip-remove:hover { color: #c44; }
.cb-picker__list {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
}
.cb-picker__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  cursor: default;
}
.cb-picker__row:hover { background: var(--surface-hover, var(--surface-2)); }
.cb-picker__row.is-disabled { opacity: 0.5; }
.cb-picker__row.is-chosen { background: var(--accent-soft); }
.cb-picker__row-name {
  flex: 0 0 30%;
  font-weight: var(--fw-semi);
}
.cb-picker__row-meta {
  flex: 1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.cb-picker__cost,
.cb-picker__ability,
.cb-picker__target {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 2px;
}
.cb-picker__cost { color: var(--accent); font-weight: var(--fw-semi); }
.cb-picker__groups { font-style: italic; }
.cb-picker__row-flag {
  font-size: var(--fs-xs);
  color: var(--accent);
  font-style: italic;
}

@media (max-width: 720px) {
  .cb-picker__row { flex-direction: column; align-items: flex-start; }
  .cb-picker__row-name { flex: 0 0 auto; }
}