/* Character creation — roster, sheet, and the build wizard.
   Skinned to match the "Candlelit Grimoire" theme + the Combat HUD: warm
   ink-black, ember + brass-gold accents, radial-glow panels with corner
   brackets, wide-tracked gold eyebrows, and the shared hud-rise entrance.
   Numbers are mono/tabular (app convention); hero numerals + names use the
   Cormorant display face (sourcebook flavor). */

/* ---- page atmosphere: a faint ember vignette behind the content ---- */
.char-roster, .char-sheet, .char-wizard { position: relative; }
.char-roster::before, .char-sheet::before, .char-wizard::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(var(--accent-rgb), 0.05), transparent 60%),
    radial-gradient(80% 60% at 100% 110%, rgba(var(--gold-rgb), 0.035), transparent 70%);
}

/* ---- the panel skin (mirrors combat.css .hud) ---- */
.gpanel {
  position: relative;
  border: 0.0625rem solid var(--border);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(135% 130% at 0% 0%, rgba(var(--accent-rgb), 0.06), transparent 58%),
    rgba(var(--glass-rgb), 0.86);
  box-shadow: var(--shadow-card);
  animation: hud-rise 0.5s var(--ease-soft) both;
}
.gpanel::before, .gpanel::after {
  content: "";
  position: absolute;
  width: 0.8125rem;
  height: 0.8125rem;
  border: 0 solid rgba(var(--gold-rgb), 0.6);
  pointer-events: none;
}
.gpanel::before { top: 0.4375rem; left: 0.4375rem; border-top-width: 0.0625rem; border-left-width: 0.0625rem; }
.gpanel::after { bottom: 0.4375rem; right: 0.4375rem; border-bottom-width: 0.0625rem; border-right-width: 0.0625rem; }

@keyframes hud-rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

/* ---- shared header type ---- */
.char-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: var(--sp-2);
}
.char-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.4vw + 1.375rem, 2.5rem);
  letter-spacing: 0.005em;
  line-height: 1.04;
  margin: 0 0 var(--sp-3);
  color: var(--text);
}
.char-sub { color: var(--muted); margin: 0; }

/* ---------------- roster ---------------- */
.char-roster { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) 0 3.75rem; }
.roster-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-9); margin-bottom: 1.625rem; flex-wrap: wrap;
}
.roster-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--sp-9);
}
.roster-card { padding: 0; overflow: hidden; display: flex; flex-direction: column;
  transition: border-color 200ms var(--ease-soft), transform 200ms var(--ease-soft), box-shadow 200ms var(--ease-soft); }
.roster-card:hover {
  border-color: var(--accent); transform: translateY(-0.125rem);
  box-shadow: 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.18),
              0 1rem 2.125rem -1.125rem rgba(var(--accent-rgb), 0.45),
              inset 0 0.0625rem 0 rgba(255, 255, 255, 0.04);
}
.roster-card-main { display: block; padding: 0.8125rem var(--sp-8) 0.6875rem; color: inherit; text-decoration: none; }
.roster-name { font-family: var(--font-display); font-size: var(--fs-sub); margin: 0 0 0.0625rem; color: var(--gold);
  letter-spacing: 0.005em; line-height: 1.12; }
.roster-meta { color: var(--muted); margin: 0 0 var(--sp-6); font-size: var(--fs-base); }
.roster-stats { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.stat-pill {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  background: var(--bg); border: 0.0625rem solid var(--border-soft);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-6);
}
.stat-pill b { color: var(--accent); font-weight: 600; }
.roster-card-foot {
  display: flex; flex-wrap: wrap; gap: 0.3125rem; padding: 0.5625rem 0.6875rem; border-top: 0.0625rem solid var(--border-soft);
  background: rgba(0, 0, 0, 0.18); margin-top: auto;
}
.roster-card-foot .btn-mini { padding: var(--sp-3) 0.5625rem; font-size: var(--fs-xs); }
.roster-card-foot .btn-mini.btn-bad { padding: var(--sp-3) var(--sp-5); }        /* the ✕ delete stays tight */

/* ---------------- sheet ---------------- */
.char-sheet { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) 0 3.75rem; }
.sheet-head, .wiz-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-9);
  margin-bottom: 1.375rem; flex-wrap: wrap;
}
.sheet-head-actions { display: flex; gap: var(--sp-5); }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-9); align-items: start; }
.sheet-col { display: flex; flex-direction: column; gap: var(--sp-9); }
.sheet-col:nth-child(2) .gpanel { animation-delay: .06s; }
.sheet-col:nth-child(3) .gpanel { animation-delay: .12s; }
.sheet-block { padding: var(--sp-9) 1.125rem; }
.sheet-block-h {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); opacity: .9; margin: 0 0 var(--sp-8);
}
.core-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.core-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--bg); border: 0.0625rem solid var(--border-soft); border-radius: var(--r-lg);
  padding: 0.6875rem var(--sp-3);
}
.core-num { font-family: var(--font-display); font-size: var(--fs-hero); color: var(--text); line-height: 1;
  font-variant-numeric: tabular-nums; }
.core-lab { font-size: var(--fs-micro); color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-top: 0.3125rem; }
.ability-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.ability-box {
  display: flex; flex-direction: column; align-items: center; position: relative;
  background: var(--bg); border: 0.0625rem solid var(--border-soft); border-radius: var(--r-lg); padding: 0.5625rem var(--sp-3);
}
.ability-name { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--gold); letter-spacing: .14em; }
.ability-score { font-family: var(--font-display); font-size: var(--fs-page); color: var(--text); line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.ability-mod { font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-md); font-weight: 600; }
.ability-save { font-size: var(--fs-micro); color: var(--muted); margin-top: var(--sp-2); font-family: var(--font-mono); }
.sheet-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.sheet-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .08em; padding: var(--sp-3) var(--sp-4); border-bottom: 0.0625rem solid var(--border-soft); }
.sheet-table td { padding: 0.4375rem var(--sp-4); border-bottom: 0.0625rem solid var(--border-soft); color: var(--text); }
.sheet-table td:nth-child(2) { font-family: var(--font-mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.sheet-empty { color: var(--muted); font-style: italic; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.chip {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text);
  background: rgba(var(--accent-rgb), .1); border: 0.0625rem solid rgba(var(--accent-rgb), .3);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-6); letter-spacing: .02em;
}
.chip-soft { background: var(--bg); border-color: var(--border-soft); color: var(--muted); }
.feature { margin-bottom: 0.8125rem; color: var(--text); font-size: var(--fs-md); line-height: 1.55; }
.feature b { color: var(--gold); }
.sheet-note { color: var(--muted); font-size: var(--fs-base); font-style: italic; margin: var(--sp-7) 0 0;
  border-left: 0.125rem solid var(--border); padding-left: var(--sp-6); }
.sheet-sub-h { color: var(--muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; margin: var(--sp-8) 0 var(--sp-4); }
.sheet-missing { text-align: center; padding: 3.375rem; }
.spell-line { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: baseline; margin: var(--sp-4) 0; }
.spell-lvl { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--gold); opacity: .8;
  letter-spacing: .06em; min-width: 2.125rem; }
.chip-prep { background: rgba(var(--gold-rgb), .14); border-color: rgba(var(--gold-rgb), .5); color: var(--text); }
.feat-lvl { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--gold); opacity: .75;
  border: 0.0625rem solid var(--border-soft); border-radius: var(--r-sm); padding: 0 var(--sp-3); margin-right: var(--sp-3); }

/* ---------------- wizard ---------------- */
.char-wizard { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) 0 3.75rem; }
.wiz-head { margin-bottom: var(--sp-10); }
.wiz-steps { display: flex; gap: var(--sp-4); margin-bottom: 1.125rem; flex-wrap: wrap; }
.wiz-step {
  flex: 1 1 0; min-width: 7.25rem; text-align: center; cursor: pointer; position: relative;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em;
  padding: var(--sp-6) var(--sp-4); border-radius: var(--r-lg); border: 0.0625rem solid var(--border-soft);
  background: rgba(18, 13, 9, 0.7); color: var(--muted);
  transition: color .16s var(--ease-soft), border-color .16s var(--ease-soft), background .16s var(--ease-soft);
}
.wiz-step:hover { color: var(--text); border-color: var(--border); }
.wiz-step .wiz-step-n {
  font-variant-numeric: tabular-nums; color: var(--muted); margin-right: 0.4375rem;
  border-right: 0.0625rem solid var(--border-soft); padding-right: 0.4375rem;
}
.wiz-step.active {
  border-color: rgba(var(--gold-rgb), .55); color: var(--text);
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(var(--gold-rgb), 0.12), transparent 70%),
    rgba(var(--glass-rgb), 0.92);
  box-shadow: var(--glow-gold);
}
.wiz-step.active .wiz-step-n { color: var(--gold); border-color: rgba(var(--gold-rgb), .4); }
.wiz-step.wiz-locked { opacity: .4; cursor: not-allowed; }
/* content-selection step */
.wiz-bookgroup { margin: 0 0 1.125rem; }
.wiz-bookgroup h3 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--sp-5); }
.wiz-ed { margin: var(--sp-4) 0 var(--sp-3) !important; font-size: var(--fs-base) !important; }
.wiz-books { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.wiz-book { font-family: var(--font-mono); font-size: var(--fs-sm); padding: var(--sp-5) var(--sp-7); border-radius: var(--r-lg);
  border: 0.0625rem solid var(--border-soft); background: rgba(18, 13, 9, 0.7); color: var(--muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); text-align: left; max-width: 20rem;
  transition: color .16s var(--ease-soft), border-color .16s var(--ease-soft), background .16s var(--ease-soft); }
.wiz-book-name { font-weight: 600; }
.wiz-book-sum { font: 400 var(--fs-2xs) var(--font-sans); color: var(--muted); letter-spacing: .01em; }
.wiz-book.on .wiz-book-sum { color: var(--accent); opacity: .85; }
.wiz-book:hover { color: var(--text); border-color: var(--border); }
.wiz-book.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .12); font-weight: 600; }
.wiz-book[disabled] { opacity: .42; cursor: not-allowed; }
.wiz-soon { font: 600 var(--fs-micro) var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  border: 0.0625rem solid var(--border); border-radius: var(--r-sm); padding: 0.0625rem var(--sp-3); margin-left: var(--sp-4); }
.wiz-gate-warn { color: var(--accent); font-weight: 600; margin: 0 0 var(--sp-9); font-size: var(--fs-md); }
/* class-level variant chooser (e.g. 2014 vs 2024 Fighter) */
.wiz-variant { border: 0.0625rem solid rgba(var(--gold-rgb), .4); border-radius: var(--r-lg); padding: 0.6875rem 0.8125rem; margin: 0 0 var(--sp-9);
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--gold-rgb), .07), transparent 70%); }
.wiz-variant-head { font: 600 var(--fs-sm) var(--font-mono); letter-spacing: .03em; color: var(--gold); margin-bottom: var(--sp-5); }
.wiz-variant-opts { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-3); }
.wiz-variant .wiz-help { margin: var(--sp-3) 0 0; }
.wiz-removed { border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .05); }
.wiz-removed .wiz-variant-head { color: var(--accent); }
.wiz-removed-row { display: flex; align-items: center; gap: var(--sp-6); justify-content: space-between; font-size: var(--fs-md); margin: var(--sp-4) 0; }
.wiz-removed-row span { color: var(--muted); }
.wiz-removed-row .wiz-book { flex: none; }
/* content-selection pre-screen (shown before the wizard steps) */
/* [hidden] must beat the class display rules (display:grid/flex) so the screens toggle cleanly */
#wiz-content-pick[hidden], #wiz-steps[hidden], #wiz-layout[hidden] { display: none !important; }
/* "Choose your content" — ONE layout shared by all three wizards (views/_content-step.js): a flex
   column whose body scrolls and whose footer is a bottom bar bleeding to the panel's side padding,
   so the Continue button can never overlap the panel border. */
.wiz-content-pick { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: var(--sp-11) 1.625rem 0; }
.wiz-content-pick h2 { font-family: var(--font-display); font-size: var(--fs-page); margin: 0 0 var(--sp-3); color: var(--gold); }
.wiz-content-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wiz-content-foot {
  flex: 0 0 auto; margin: 0 -1.625rem; padding: var(--sp-8) 1.625rem;
  border-top: 0.0625rem solid var(--border); background: rgba(0, 0, 0, 0.18);
  display: flex; align-items: center; justify-content: flex-end;
}
.wiz-layout { display: grid; grid-template-columns: 1fr 20.75rem; gap: var(--sp-9); align-items: start; }
.wiz-main { display: flex; flex-direction: column; gap: var(--sp-7); }
.wiz-body { padding: var(--sp-11) 1.625rem; min-height: 23.75rem; }
.wiz-body h2 { font-family: var(--font-display); font-size: var(--fs-hero); margin: 0 0 var(--sp-3); color: var(--gold);
  letter-spacing: .005em; line-height: 1.1; }
.wiz-body .wiz-help { color: var(--muted); margin: 0 0 var(--sp-10); font-size: var(--fs-md); max-width: 60ch; }
.wiz-foot { display: flex; align-items: center; gap: var(--sp-6); }
.wiz-foot-spacer { flex: 1; }
.wiz-violations {
  border: 0.0625rem solid rgba(248, 81, 73, .45); background: rgba(248, 81, 73, .07);
  border-radius: var(--r-xl); padding: var(--sp-7) 0.9375rem; color: var(--text);
}
.wiz-violations h4 { margin: 0 0 var(--sp-4); color: var(--bad); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em; }
.wiz-violations ul { margin: 0; padding-left: 1.125rem; }
.wiz-violations li { font-size: var(--fs-md); margin: var(--sp-2) 0; color: var(--muted); }

/* form controls */
.field { margin-bottom: 1.125rem; }
.field > label {
  display: block; color: var(--gold); opacity: .9; font-family: var(--font-mono);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 0.4375rem;
}
/* All text-like inputs (text / email / password / search / tel / url / number AND inputs with no
   explicit type attribute) — NOT just [type=text]. The narrow list silently skipped the auth forms'
   username (no type) / email / password fields, leaving them as tiny grey UA controls. */
.field select,
.field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
.field textarea {
  width: 100%; background: var(--bg); border: 0.0625rem solid var(--border); color: var(--text);
  border-radius: var(--r-md); padding: 0.5625rem 0.6875rem; font-family: var(--font-sans); font-size: var(--fs-md);
 transition: border-color .16s var(--ease-soft), box-shadow .16s var(--ease-soft);
}
.field select:focus, .field input:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 0.1875rem rgba(var(--accent-rgb), .12);
}
.field textarea { min-height: 4.75rem; resize: vertical; line-height: 1.5; }
.field-hint { color: var(--muted); font-size: var(--fs-base); margin-top: var(--sp-4); line-height: 1.45; }
/* ---- content provenance (Show sources) ---- */
.wiz-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-7); margin: var(--sp-1) 0 var(--sp-6); }
.src-toggle { display: inline-flex; align-items: center; gap: var(--sp-4); cursor: pointer; flex: none;
  font: 500 var(--fs-sm) var(--font-sans); color: var(--muted); user-select: none; white-space: nowrap; }
.src-toggle:hover { color: var(--text); }
.src-toggle input { accent-color: var(--accent); }
.src-tag { font-style: normal; font: 600 var(--fs-micro) var(--font-mono); letter-spacing: .03em; vertical-align: middle;
  color: var(--accent); background: rgba(var(--accent-rgb), .12); border-radius: var(--r-sm); padding: 0.0625rem 0.3125rem; margin-left: var(--sp-4); }
.src-from { margin: 0.3125rem 0 0; font: 400 var(--fs-sm) var(--font-sans); color: var(--muted); }
.src-from::before { content: "↳ "; opacity: .6; }
.pv-sources { margin: var(--sp-7) 0 var(--sp-3); }
.pv-sources-h { display: block; font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3125rem; }
.src-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.src-chip { font: 600 var(--fs-2xs) var(--font-mono); color: var(--text); background: var(--bg-2);
  border: 0.0625rem solid var(--border-soft); border-radius: var(--r-sm); padding: 0.0625rem var(--sp-4); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.4375rem; }
.check-item { display: flex; align-items: center; gap: 0.5625rem; color: var(--text); font-size: var(--fs-md);
  padding: var(--sp-5) var(--sp-6); border: 0.0625rem solid var(--border-soft); border-radius: var(--r-lg); background: var(--bg);
  cursor: pointer; transition: border-color .14s var(--ease-soft), background .14s var(--ease-soft); }
.check-item:hover { border-color: var(--border); }
.check-item input { accent-color: var(--accent); }
.check-item.sel { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .09); }
/* "What you get" summary — fixed grants the character receives (known
   languages, ability increases, granted proficiencies, …). */
.grants {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.4375rem var(--sp-9);
  margin: var(--sp-3) 0 var(--sp-10); padding: var(--sp-8) var(--sp-9);
  border: 0.0625rem solid var(--border-soft); border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--gold-rgb), 0.05), transparent 60%),
    var(--bg);
}
.grants dt {
  color: var(--gold); opacity: .85; font-family: var(--font-mono);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em;
  align-self: baseline; padding-top: var(--sp-1);
}
.grants dd { margin: 0; color: var(--text); font-size: var(--fs-md); line-height: 1.4; }
.known-line { color: var(--muted); font-size: var(--fs-md); margin: 0 0 var(--sp-5); }
.known-line b { color: var(--text); font-weight: 600; }

/* section divider label inside a step */
.field-section {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); opacity: .85;
  margin: 1.375rem 0 var(--sp-7); padding-top: var(--sp-8); border-top: 0.0625rem solid var(--border-soft);
}
/* suggested-characteristic picker (roll / choose / custom) */
.char-pick-row { display: flex; gap: var(--sp-5); align-items: stretch; }
.char-pick-row select { flex: 1; }
.char-roll { font-size: var(--fs-lg); line-height: 1; padding: 0 var(--sp-6); flex: 0 0 auto; }
.char-custom { margin-top: var(--sp-5); }

/* spell pickers (cantrips / known / prepared / spellbook) */
.pick-count { font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-2xs); margin-left: var(--sp-4); }
.spell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: var(--sp-4);
  max-height: 17.5rem; overflow-y: auto; padding: var(--sp-1); }
.spell-item { display: flex; flex-direction: column; gap: 0.0625rem; padding: var(--sp-4) 0.5625rem; cursor: pointer;
  border: 0.0625rem solid var(--border-soft); border-radius: var(--r-lg); background: var(--bg); position: relative; }
.spell-item input { position: absolute; top: 0.4375rem; right: 0.4375rem; accent-color: var(--accent); }
.spell-item:hover { border-color: var(--border); }
.spell-item.sel { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .09); }
.spell-item .si-name { color: var(--text); font-size: var(--fs-md); font-weight: 500; padding-right: var(--sp-9); }
.spell-item .si-meta { color: var(--muted); font-size: var(--fs-micro); font-family: var(--font-mono); text-transform: lowercase; }

/* buy-your-own equipment shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.625rem, 1fr)); gap: var(--sp-4); }
.shop-item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) 0.6875rem; border: 0.0625rem solid var(--border-soft); border-radius: var(--r-lg); background: var(--bg);
  color: var(--text); cursor: pointer; text-align: left; font-family: var(--font-sans);
  transition: border-color .14s var(--ease-soft); }
.shop-item:hover { border-color: var(--accent); }
.shop-item.disabled { opacity: .4; cursor: not-allowed; }
.shop-item .shop-name { font-size: var(--fs-md); }
.shop-item .shop-cost { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--gold); white-space: nowrap; }
.cart-chip { background: rgba(var(--gold-rgb), .14); border-color: rgba(var(--gold-rgb), .5); color: var(--text); }
.cart-rm { background: none; border: 0; color: var(--bad); cursor: pointer; font-size: var(--fs-md); line-height: 1; padding: 0 0 0 var(--sp-3); }
.gold-pill { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--gold); border: 0.0625rem solid rgba(var(--gold-rgb), .4);
  border-radius: var(--r-pill); padding: 0.0625rem 0.4375rem; margin-left: var(--sp-4); text-transform: none; letter-spacing: 0; }

.trait-list { margin: var(--sp-9) 0 0; padding-top: var(--sp-8); border-top: 0.0625rem solid var(--border-soft); }
.trait-list .feature { font-size: var(--fs-md); }
.equip-group { margin-bottom: var(--sp-8); padding: var(--sp-8); border: 0.0625rem solid var(--border-soft); border-radius: var(--r-xl);
  background: var(--bg); }
.equip-group > .eg-label { color: var(--text); font-size: var(--fs-md); margin-bottom: var(--sp-6); font-weight: 500; }
.equip-opt { display: flex; align-items: center; gap: 0.5625rem; margin: 0.3125rem 0; color: var(--text); font-size: var(--fs-md); }
.equip-opt input[type=radio] { accent-color: var(--accent); }
.equip-opt select { margin-left: var(--sp-5); max-width: 14.375rem; }
.ability-assign { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.aa-row { display: flex; align-items: center; gap: var(--sp-6); background: var(--bg);
  border: 0.0625rem solid var(--border-soft); border-radius: var(--r-lg); padding: 0.5625rem 0.8125rem; }
.aa-row .aa-name { width: 2.625rem; font-family: var(--font-mono); color: var(--gold); letter-spacing: .1em; font-size: var(--fs-md); }
.aa-row .aa-val { width: 3.375rem; text-align: center; font-family: var(--font-display); font-size: var(--fs-card); color: var(--text);
  font-variant-numeric: tabular-nums; }
.aa-row .aa-eff { color: var(--accent); font-size: var(--fs-base); font-family: var(--font-mono); margin-left: auto;
  font-variant-numeric: tabular-nums; }
.aa-row select, .aa-row input[type=number] { background: var(--bg); border: 0.0625rem solid var(--border); color: var(--text);
  border-radius: var(--r-md); padding: 0.3125rem var(--sp-5); font-family: var(--font-mono); }
.method-tabs { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-9); flex-wrap: wrap; }
.budget-line { font-family: var(--font-mono); color: var(--muted); margin: 0 0 var(--sp-8); font-size: var(--fs-md);
  font-variant-numeric: tabular-nums; }
.budget-line b { color: var(--gold); }
.budget-line.over b { color: var(--bad); }

/* preview panel */
.wiz-preview { padding: 1.125rem; position: sticky; top: 4.875rem; animation-delay: .08s; }
.wiz-preview h3 { font-family: var(--font-display); color: var(--gold); margin: 0 0 var(--sp-3); font-size: var(--fs-card);
  letter-spacing: .005em; line-height: 1.1; }
.wiz-preview .pv-sub { color: var(--muted); font-size: var(--fs-base); margin: 0 0 var(--sp-8); }
.pv-core { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-7); }
.pv-core .pv-cell { background: var(--bg); border: 0.0625rem solid var(--border-soft); border-radius: var(--r-lg);
  padding: 0.5625rem; text-align: center; }
.pv-core .pv-num { font-family: var(--font-display); font-size: var(--fs-card); color: var(--text); display: block;
  font-variant-numeric: tabular-nums; line-height: 1; }
.pv-core .pv-lab { font-size: var(--fs-micro); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: var(--sp-2); }
.pv-abils { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-7); }
.pv-ab { text-align: center; background: var(--bg); border: 0.0625rem solid var(--border-soft); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-1); }
.pv-ab .pv-ab-n { font-size: var(--fs-micro); color: var(--gold); font-family: var(--font-mono); display: block; letter-spacing: .08em; }
.pv-ab .pv-ab-s { font-size: var(--fs-lg); color: var(--text); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.pv-ab .pv-ab-m { font-size: var(--fs-2xs); color: var(--accent); display: block; font-family: var(--font-mono); }
.pv-ok { color: var(--good); font-size: var(--fs-base); font-family: var(--font-mono); }
.pv-bad { color: var(--bad); font-size: var(--fs-base); font-family: var(--font-mono); }
/* the "To finish your character" checklist, now LIVING in the right preview panel under "N issue(s) to fix" */
.pv-todo { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 0.0625rem solid var(--border-soft); }
.pv-todo .pv-bad { margin: 0 0 var(--sp-5); font-weight: 600; }
.pv-todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3125rem; }
.pv-todo-list .chk-item { font-size: var(--fs-sm); padding: var(--sp-4) 0.5625rem; align-items: flex-start; gap: var(--sp-5); }
.pv-todo-list .chk-dot { margin-top: 0.3125rem; }
.pv-todo-list .chk-msg { line-height: 1.35; }

@media (max-width: 900px) {
  .wiz-layout { grid-template-columns: 1fr; }
  .sheet-grid { grid-template-columns: 1fr; }
  .wiz-preview { position: static; }
}

/* Equipment pack contents — an expandable manifest (PHB Ch.5). */
.pack-contents { margin: var(--sp-3) 0 var(--sp-5); border: 0.0625rem solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-2); padding: var(--sp-1) var(--sp-6); }
.pack-contents > summary { cursor: pointer; font: 600 var(--fs-sm) var(--font-mono); color: var(--accent);
  padding: var(--sp-4) 0; list-style: none; }
.pack-contents > summary::-webkit-details-marker { display: none; }
.pack-contents > summary::before { content: '▸ '; color: var(--muted); }
.pack-contents[open] > summary::before { content: '▾ '; }
.pack-contents ul { margin: 0 0 var(--sp-5); padding: 0 0 0 1.125rem; columns: 2; column-gap: 1.125rem; }
.pack-contents li { font-size: var(--fs-smplus); color: var(--text); margin: var(--sp-1) 0; break-inside: avoid; }
@media (max-width: 560px){ .pack-contents ul { columns: 1; } }

/* Preview: "How this is calculated" — derivation transparency (#2). */
.pv-breakdown { margin: var(--sp-7) 0 var(--sp-3); border-top: 0.0625rem solid var(--border); padding-top: var(--sp-6); }
.pv-breakdown > summary { cursor: pointer; font: 600 var(--fs-xs) var(--font-mono); text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); list-style: none; }
.pv-breakdown > summary::-webkit-details-marker { display: none; }
.pv-breakdown > summary::before { content: '▸ '; color: var(--muted); }
.pv-breakdown[open] > summary::before { content: '▾ '; }
.bd-abils { margin: var(--sp-6) 0 var(--sp-4); }
.bd-ab { display: grid; grid-template-columns: 5.75rem 1fr; gap: var(--sp-5); align-items: baseline; padding: var(--sp-3) 0;
  border-bottom: 0.0625rem solid var(--border-soft); }
.bd-ab-n { font: var(--fs-xs) var(--font-mono); color: var(--text); }
.bd-ab-n b { color: var(--gold); }
.bd-srcs { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
.bd-src { font-size: var(--fs-xs); color: var(--muted); }
.bd-src b { color: var(--good); font-weight: 600; }
.bd-line { display: grid; grid-template-columns: auto auto; gap: var(--sp-3) var(--sp-6); padding: var(--sp-4) 0;
  border-bottom: 0.0625rem solid var(--border-soft); align-items: baseline; }
.bd-line .bd-l { font: var(--fs-xs) var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bd-line .bd-v { font-weight: 600; color: var(--gold); justify-self: end; }
.bd-line .bd-d { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }

/* Multiclass callout in the Class step — makes the multiclass path obvious. */




.mc-callout .btn { margin-top: var(--sp-5); }

/* ============ New-player onboarding (audit fixes) ============ */
/* header: intro line + Quick Build button */
.char-wizard .wiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-9); flex-wrap: wrap; }
.wiz-intro { color: var(--muted); font-size: var(--fs-base); margin: var(--sp-4) 0 0; max-width: 38.75rem; line-height: 1.5; }
.qb-btn { flex: 0 0 auto; align-self: center; white-space: nowrap; }

/* "ⓘ" jargon tooltip icon + the shared bubble */
/* Character-wizard info dot — scoped (.cs-info) so it never leaks onto other .info-classed elements.
   NOTE: this duplicates the kit's InfoDot (.ui-info); converge on InfoDot during the kit migration. */


#info-tip { position: fixed; display: none; max-width: min(20rem, 84vw); background: var(--panel-2); color: var(--text);
  border: 0.0625rem solid var(--border); border-radius: var(--r-lg); padding: 0.5625rem var(--sp-7); font: 400 var(--fs-sm)/1.5 var(--font-sans);
  box-shadow: var(--shadow-drop-md); z-index: 9999; pointer-events: none; }

/* recommendation lines (abilities, spells) */
.reco-line { margin: var(--sp-3) 0 var(--sp-8); padding: 0.5625rem var(--sp-7); border: 0.0625rem solid rgba(var(--gold-rgb), .35);
  border-radius: var(--r-lg); background: rgba(var(--gold-rgb), .06); font-size: var(--fs-base); line-height: 1.5; color: var(--text); }
.reco-line b { color: var(--gold); } .reco-line em { font-style: italic; color: var(--accent); }
.reco-line.warn { border-color: rgba(var(--danger-rgb, 220, 110, 80), .45); background: rgba(var(--danger-rgb, 220, 110, 80), .08); }
.reco-line.warn b { color: var(--danger, #e08a5a); }

/* ---- content visibility / sharing (worlds · campaigns · characters) ----
   Badge = the established .chip pill vocabulary (neutral / gold / accent), sized to sit beside
   .stat-pill on roster cards. Owner control = a segmented pill skinned like .field select
   (var(--bg) + border, accent focus ring), sized to sit beside .btn-mini in the action bars. */
.vis-badge {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .02em;
  padding: var(--sp-2) var(--sp-6); border-radius: var(--r-pill);
  background: var(--bg); border: 0.0625rem solid var(--border-soft); color: var(--muted);
}
.vis-badge .vis-ico { font-size: var(--fs-2xs); line-height: 1; }
.vis-badge.vis-public   { background: rgba(var(--gold-rgb), .14);  border-color: rgba(var(--gold-rgb), .5);   color: var(--text); }
.vis-badge.vis-unlisted { background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .3); color: var(--text); }

.vis-controlwrap { display: inline-flex; align-items: center; gap: var(--sp-5); }
.vis-control {
  display: inline-flex; align-items: stretch;
  background: var(--bg); border: 0.0625rem solid var(--border); border-radius: var(--r-sm); padding-left: 0.5625rem;
  transition: border-color .16s var(--ease-soft), box-shadow .16s var(--ease-soft);
}
.vis-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 0.1875rem rgba(var(--accent-rgb), .12); }
.vis-control-ico { display: inline-flex; align-items: center; font-size: var(--fs-sm); line-height: 1; }
.vis-control select {
  background: transparent; border: 0; color: var(--text);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .02em;
  padding: 0.3125rem var(--sp-3) 0.3125rem var(--sp-4); cursor: pointer;
}
.vis-control select:disabled { opacity: .5; }
.vis-copy {                                   /* segmented "copy link" — a divided cell, not a 2nd border */
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: transparent; border: 0; border-left: 0.0625rem solid var(--border-soft);
  padding: 0 var(--sp-6); cursor: pointer; transition: color .15s var(--ease-soft), background .15s var(--ease-soft);
}
.vis-copy:hover { color: var(--text); background: rgba(var(--accent-rgb), .1); }
.roster-byline { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); padding: 0.3125rem var(--sp-1); }

/* the "to finish" checklist — calm, clickable; NOT a red error wall */
.wiz-violations { background: var(--panel) !important; border: 0.0625rem solid var(--border) !important;
  border-left: 0.1875rem solid var(--warn) !important; border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-8); margin-top: var(--sp-8); }
.wiz-violations h4 { margin: 0 0 var(--sp-5); font: 600 var(--fs-sm) var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--warn); display: flex; align-items: baseline; gap: var(--sp-5); }
.wiz-violations .chk-count { font-size: var(--fs-xs); color: var(--muted); text-transform: none; letter-spacing: 0; }
.wiz-violations ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.chk-item { display: flex; align-items: center; gap: 0.5625rem; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-2); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5) 0.6875rem;
  font: var(--fs-base) var(--font-sans); color: var(--text); transition: border-color .15s, background .15s; }
.chk-item:hover { border-color: var(--accent); background: var(--panel-2); }
.chk-dot { width: 0.4375rem; height: 0.4375rem; border-radius: var(--r-round); background: var(--warn); flex: 0 0 auto; }
.chk-msg { flex: 1 1 auto; } .chk-go { font: var(--fs-xs) var(--font-mono); color: var(--accent); flex: 0 0 auto; }
.chk-item.chk-warn .chk-dot { background: var(--muted); }   /* non-blocking guidance (warn) */

/* step bar: badge steps that still need a choice */
.wiz-step.has-issue { position: relative; }
.wiz-step.has-issue::after { content: ''; position: absolute; top: 0.3125rem; right: 0.375rem; width: 0.4375rem; height: 0.4375rem;
  border-radius: var(--r-round); background: var(--warn); box-shadow: 0 0 0 0.125rem var(--panel); }
.wiz-step.has-issue.active::after { box-shadow: 0 0 0 0.125rem var(--gold); }

/* review recap */
.review-who { font-family: var(--font-display); font-size: var(--fs-sub); color: var(--text); margin: var(--sp-4) 0; }
.review-stats { color: var(--muted); font-size: var(--fs-base); line-height: 1.6; max-width: 40rem; }
.review-stats b { color: var(--gold); } .review-stats em { font-style: italic; color: var(--accent); }

/* valid-options pre-filtering: disabled choices show why */
.check-item.disabled { opacity: .5; cursor: not-allowed; }
.check-item.disabled input { cursor: not-allowed; }

.aa-cur { font: var(--fs-2xs) var(--font-mono); color: var(--muted); }
.aa-row select option:disabled { color: var(--muted); }

/* ============================================================================
   No-scroll frame for the CHARACTER wizard — the SCREEN never scrolls; the step
   body scrolls internally; the action bar (Continue / Back · Next · Save) is
   ALWAYS visible. Mirrors the campaign wizard (campaign.css) and the Lab
   (theme.css `body:has(.lab2)`). Scoped `:not(.camp-wizard)` so the campaign
   wizard keeps its own equivalent rules untouched.
   ============================================================================ */
body:has(.char-wizard:not(.camp-wizard)) main.app-main {
  flex: 0 0 auto;
  height: calc(100dvh - var(--topbar-h, 3.5rem));
  max-height: calc(100dvh - var(--topbar-h, 3.5rem));
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(.char-wizard:not(.camp-wizard)) main.app-main > #app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.char-wizard:not(.camp-wizard) {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--sp-3) 0;
  overflow: hidden;
}
.char-wizard:not(.camp-wizard) .wiz-head,
.char-wizard:not(.camp-wizard) .wiz-steps,
.char-wizard:not(.camp-wizard) .wiz-toolbar { flex: 0 0 auto; }
.char-wizard:not(.camp-wizard) .wiz-head { margin-bottom: var(--sp-6); }
.char-wizard:not(.camp-wizard) .wiz-steps { margin-bottom: var(--sp-7); }

.char-wizard:not(.camp-wizard) .wiz-layout {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}
.char-wizard:not(.camp-wizard) .wiz-main { min-height: 0; }
/* The content PANEL is a 3-zone card: a pinned title banner (the step's <h2>, sticky), the scrolling
   body, and the action bar (checklist + Back/Next/Save) — all WITHIN the gpanel. Drop the panel's own
   padding so the banner/bar span its full width; only .wiz-scroll scrolls. */
.char-wizard:not(.camp-wizard) .wiz-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0;
  display: flex; flex-direction: column;
}
.char-wizard:not(.camp-wizard) .wiz-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.125rem 1.625rem 1.375rem; }
/* the pinned TOP banner — step title (+ info) on the left, Show sources / Change content on the right.
   Mirrors the Campaign wizard's `.camp-stephead`; always visible while the form scrolls. */
.char-wizard:not(.camp-wizard) .wiz-stephead {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
  padding: var(--sp-7) 1.375rem var(--sp-7) 1.625rem; background: var(--panel); border-bottom: 0.0625rem solid var(--border);
}
.char-wizard:not(.camp-wizard) .wiz-stephead h2 {
  font: 600 var(--fs-modal) var(--font-display); color: var(--gold); margin: 0; line-height: 1.1;
}
.char-wizard:not(.camp-wizard) .wiz-stephead-actions { display: flex; align-items: center; gap: var(--sp-6); flex: none; }
/* the banner replaces each step's leading <h2> — hide it so the title isn't duplicated in the scroll */
.char-wizard:not(.camp-wizard) .wiz-scroll > h2:first-of-type { display: none; }
.char-wizard:not(.camp-wizard) .wiz-preview {
  position: static; min-height: 0; align-self: stretch; overflow-y: auto;
}
/* the "to finish your character" checklist sits ABOVE the action bar, INSIDE the panel, capped */
/* its own card BELOW the content panel (the .wiz-main flex-column gap separates them); capped + scrolls */
.char-wizard:not(.camp-wizard) .wiz-violations { flex: 0 0 auto; max-height: 24vh; overflow-y: auto; margin: 0; padding: var(--sp-7) var(--sp-9); }
/* the ALWAYS-VISIBLE action bar — pinned at the bottom of the content panel */
.char-wizard:not(.camp-wizard) .wiz-foot {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--sp-7) 1.625rem;
  border-top: 0.0625rem solid var(--border);
  background: var(--panel);
}

/* (CONTENT-step layout now lives in the shared .wiz-content-* rules above — applies to all wizards.) */


/* ── Character view card — stat-block style (mirrors the Library monster card) ── */
.charcard { font-family: var(--font-sans); color: var(--text);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 0.0625rem solid var(--border); border-top: 0.1875rem solid var(--accent); border-radius: var(--r-xl);
  padding: var(--sp-10) 1.625rem 1.375rem; max-width: 97.5rem; margin: 0 auto;
  box-shadow: var(--shadow-drop-md); }
.cc-name { font: 600 var(--fs-page)/1.04 var(--font-display); color: var(--gold); letter-spacing: 0.01875rem; }
.cc-meta { font-style: italic; font-size: var(--fs-base); color: var(--muted); margin: var(--sp-2) 0 var(--sp-1); }
.cc-bar { height: 0.1875rem; margin: 0.5625rem 0; opacity: .9;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  clip-path: polygon(0 50%, 0.4375rem 0, calc(100% - 0.4375rem) 0, 100% 50%, calc(100% - 0.4375rem) 100%, 0.4375rem 100%); }
.cc-stats, .cc-abils { display: flex; justify-content: space-between; gap: var(--sp-4); text-align: center; }
.cc-stat, .cc-abil { flex: 1 1 0; min-width: 0; }
.cc-stat-v { display: block; font: 600 var(--fs-modal)/1 var(--font-display); color: var(--text); }
.cc-stat-k { display: block; font: 600 var(--fs-micro)/1.3 var(--font-mono); letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-top: var(--sp-2); }
.cc-abil-k { display: block; font: 600 var(--fs-sm)/1 var(--font-mono); letter-spacing: .05em; color: var(--accent); }
.cc-abil-v { display: block; font-size: var(--fs-md); color: var(--text); margin: var(--sp-2) 0; }
.cc-abil-m { color: var(--muted); }
.cc-abil-s { display: block; font-size: var(--fs-2xs); color: var(--muted); }
.cc-abil-s.on { color: var(--gold); font-weight: 600; }
.cc-abil-s.on::before { content: "● "; font-size: var(--fs-micro); vertical-align: 0.0625rem; }
.cc-stats { margin: var(--sp-1) 0 var(--sp-5); }
.cc-abils { margin: 0 0 var(--sp-3); padding-top: var(--sp-5); border-top: 0.0625rem solid var(--border-soft); }
.cc-stat, .cc-abil { padding: 0.3125rem var(--sp-1); border-radius: var(--r-md); }
.cc-abil { border: 0.0625rem solid var(--border-soft); background: rgba(0,0,0,.14); }
/* senses row */
.cc-senses { display: flex; gap: var(--sp-5); margin: var(--sp-5) 0 var(--sp-1); flex-wrap: wrap; }
.cc-sense { flex: 1 1 0; min-width: 5.25rem; text-align: center; padding: var(--sp-4) var(--sp-3);
  border: 0.0625rem solid var(--border-soft); border-radius: var(--r-md); background: rgba(0,0,0,.14); }
.cc-sense-v { display: block; font: 600 var(--fs-sub)/1 var(--font-display); color: var(--accent); }
.cc-sense-k { display: block; font: 600 var(--fs-micro)/1.3 var(--font-mono); letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-top: var(--sp-2); }
/* full skill grid — fills the available width (3–4 cols wide, 1 on phones) */
.cc-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0 1.625rem; }
.cc-skill { display: flex; align-items: center; gap: 0.4375rem; padding: var(--sp-1) 0;
  font-size: var(--fs-base); color: var(--muted); border-bottom: 0.0625rem solid var(--border-soft); }
.cc-skill.on { color: var(--text); }
.cc-dot { width: 0.5625rem; height: 0.5625rem; border-radius: var(--r-round); flex: 0 0 auto;
  border: 0.0625rem solid var(--border); }
.cc-dot.prof { background: var(--gold); border-color: var(--gold); }
.cc-dot.exp { background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 0.125rem var(--panel), 0 0 0 0.1875rem var(--accent); }
.cc-sk-ab { font: 600 var(--fs-micro) var(--font-mono); color: var(--muted); width: 1.625rem; flex: 0 0 auto; }
.cc-sk-n { flex: 1 1 auto; }
.cc-sk-b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
/* proficiency + languages groups */
.cc-profgroups { display: flex; flex-direction: column; gap: var(--sp-2); }
.cc-pg { display: flex; gap: var(--sp-5); font-size: var(--fs-base); line-height: 1.35; }
.cc-pg-k { flex: 0 0 6rem; font: 600 var(--fs-xs)/1.4 var(--font-mono); text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent); }
.cc-pg-v { flex: 1 1 auto; color: var(--text); }
.cc-k { font-weight: 600; color: var(--gold); }
/* prose sections — balanced multi-column masonry so tall content fills the sides.
   Explicit column-count (not column-width) so the browser always uses the full width
   instead of balancing down to 3 and leaving the right side empty. */
.cc-detail { column-count: 4; column-gap: var(--sp-11); margin-top: var(--sp-5); }
.cc-box { break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block;
  width: 100%; margin: 0 0 0.4375rem; }
.cc-box .cc-sec { margin-top: 0; }
@media (max-width: 1200px) { .cc-detail { column-count: 3; } }
@media (max-width: 880px)  { .cc-detail { column-count: 2; } }
.cc-sec { color: var(--gold); font: 600 var(--fs-sub)/1.1 var(--font-display); letter-spacing: 0.01875rem;
  border-bottom: 0.0625rem solid var(--border); margin: var(--sp-6) 0 var(--sp-3); padding-bottom: var(--sp-2); }
.cc-subh { font: 600 var(--fs-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); margin: var(--sp-5) 0 var(--sp-1); }
.cc-block { font-size: var(--fs-base); line-height: 1.42; color: var(--text); margin: var(--sp-2) 0; }
.cc-bi { font-weight: 600; font-style: italic; color: var(--text); }
.cc-tag { font: 600 var(--fs-2xs) var(--font-mono); color: var(--accent);
  border: 0.0625rem solid var(--border-soft); border-radius: var(--r-sm); padding: 0.0625rem 0.3125rem; }
.cc-flavor { font-style: italic; color: var(--muted); margin-top: 0.3125rem; font-size: var(--fs-base); line-height: 1.42; }
.cc-foot { margin-top: var(--sp-8); font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); }
.cc-viewtog { align-self: center; }
@media (max-width: 560px) { .cc-stat { flex-basis: 30%; } .cc-abil { flex-basis: 30%; }
  .cc-stats, .cc-abils { flex-wrap: wrap; } .cc-skills { grid-template-columns: 1fr; }
  .cc-pg-k { flex-basis: 4.75rem; } }

/* ── compact feature rows — the rules text tucks behind a hover / focus (tap) POPOVER ─────────────── */
.featrows { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: var(--sp-1) var(--sp-8); margin: var(--sp-3) 0 var(--sp-1); }
.featrow { position: relative; display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-1) 0;
  font-size: var(--fs-smplus); line-height: 1.45; color: var(--text); }
.featrow-n { min-width: 0; font-weight: 600; }
.featrow.has-pop { cursor: help; }
.featrow-i { flex: none; color: var(--muted); font-size: var(--fs-xs); opacity: .7; }
.featrow.has-pop:hover .featrow-i, .featrow.has-pop:focus .featrow-i { color: var(--accent); opacity: 1; }
.featrow-pop { display: none; position: absolute; z-index: 40; bottom: calc(100% + 0.4375rem); left: 0;
  width: min(20rem, 74vw); background: var(--panel-2, #201b12); border: 0.0625rem solid var(--border);
  border-radius: var(--r-lg); padding: 0.5625rem 0.6875rem; font-size: var(--fs-sm); line-height: 1.5; font-weight: 400;
  color: var(--text); box-shadow: var(--shadow-drop-md); }
.featrow.has-pop:hover .featrow-pop, .featrow.has-pop:focus .featrow-pop { display: block; }
.featrow:focus { }
.featrow.has-pop:focus-visible { outline: 0.0625rem solid rgba(var(--accent-rgb, 224, 168, 60), .55); border-radius: var(--r-sm); }

/* ── character access model (docs/architecture/character-access.md) ─────────────────────── */
/* the one-shot creation-grant banner — persists until the slot is used or revoked */
.roster-grant { display: flex; align-items: center; gap: var(--sp-7); padding: var(--sp-6) var(--sp-8);
  margin: 0 0 var(--sp-8); border-left: 0.1875rem solid var(--gold); font-size: var(--fs-base); }
/* owner's sharing popover: party-default seg + per-member override rows */
.cc-share { position: relative; }
.cc-share > summary { list-style: none; cursor: pointer; }
.cc-share > summary::-webkit-details-marker { display: none; }
.cc-share-panel { position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 40;
  width: 20.625rem; padding: var(--sp-7) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); }
.cc-share-row { display: flex; align-items: center; gap: var(--sp-5); }
.cc-share-l { flex: 1 1 auto; font-size: var(--fs-base); min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cc-share-row .seg { flex: none; }

/* sweep 2026-08-06: card hover affordance is the ring — text never underlines */