/* card-sort.css — Values Discovery Card Sort
   Sharp corners throughout. No red. No border-radius. Parchment surfaces.
*/

/* ── content wrapper ─────────────────────────────────────── */
.cs-content {
  padding: var(--space-4) var(--space-6) var(--space-6);
  max-width: 860px;
}

/* ── step visibility ─────────────────────────────────────── */
.cs-step { display: none; }
.cs-step.active { display: block; }

/* ── privacy notice ──────────────────────────────────────── */
.cs-privacy {
  color: var(--fg-tertiary);
  font-family: var(--font-sans-tight);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
}

/* ── heading / sub ───────────────────────────────────────── */
.cs-heading {
  font-family: var(--font-serif-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: 0 0 var(--space-2);
}
.cs-sub {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 15px;
  line-height: 22px;
  color: var(--fg-tertiary);
  margin: 0 0 var(--space-5);
}

/* ── progress bar ────────────────────────────────────────── */
.cs-progress-bar {
  height: 2px;
  background: var(--stone-2);
  margin-bottom: var(--space-6);
}
.cs-progress-fill {
  height: 100%;
  background: var(--gold-1);
  transition: width 0.35s var(--ease-quiet);
}

/* ── actions row ─────────────────────────────────────────── */
.cs-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* ── nudge ───────────────────────────────────────────────── */
.cs-nudge {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-tertiary);
  margin-top: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════
   DRAW PHASE — one card at a time
   ═══════════════════════════════════════════════════════════ */

.cs-draw-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.cs-round-label {
  font-family: var(--font-sans-tight);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-metadata);
  white-space: nowrap;
}

.cs-draw-counter {
  font-family: var(--font-sans-tight);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-tertiary);
  white-space: nowrap;
  margin-left: auto;
}

.cs-draw-header .cs-progress-bar { flex: 1; margin-bottom: 0; }

/* ── the card ────────────────────────────────────────────── */
.cs-draw-arena {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.cs-draw-card {
  width: 100%;
  max-width: 480px;
  min-height: 190px;
  border: 1px solid var(--stone-2);
  border-left: 4px solid var(--gold-1);
  background: var(--parchment-1);
  padding: var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  cursor: default;
  outline: none;
  /* transitions for exit/enter animations */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cs-draw-card:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 3px;
}

/* domain badge */
.cs-dc-domain {
  font-family: var(--font-sans-tight);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin: 0;
}

/* card name */
.cs-dc-name {
  font-family: var(--font-serif-display);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--fg-primary);
  margin: 0;
}

/* revealed meaning */
.cs-dc-gloss {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-secondary);
  margin: 0;
  border-top: 1px solid var(--stone-2);
  padding-top: var(--space-3);
}

/* reveal button */
.cs-dc-reveal {
  background: none;
  border: none;
  font-family: var(--font-sans-tight);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-metadata);
  cursor: pointer;
  padding: 0;
  text-align: left;
  align-self: flex-start;
  transition: color 0.12s;
}
.cs-dc-reveal:hover { color: var(--gold-2); }
.cs-dc-reveal:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }

/* ── card exit / enter animations ───────────────────────── */
.cs-dc-exit-right {
  transform: translateX(80px) rotate(4deg);
  opacity: 0;
}
.cs-dc-exit-left {
  transform: translateX(-80px) rotate(-4deg);
  opacity: 0;
}
.cs-dc-exit-up {
  transform: translateY(-50px);
  opacity: 0;
}
.cs-dc-enter {
  transform: translateY(24px);
  opacity: 0;
  transition: none;
}

/* ── assign buttons (1 / 2 / 3) ─────────────────────────── */
.cs-draw-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  max-width: 480px;
}

.cs-assign-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2);
  border: 1px solid var(--stone-2);
  background: var(--bg-surface);
  cursor: pointer;
  min-height: 80px;
  font-family: var(--font-sans-tight);
  transition: border-color 0.12s, background 0.12s;
}
.cs-assign-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cs-assign-btn:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }

.cs-ab-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.cs-ab-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.cs-assign-matters .cs-ab-num { color: var(--gold-1); }
.cs-assign-maybe   .cs-ab-num { color: var(--attention-amber); }
.cs-assign-not_now .cs-ab-num { color: var(--stone-3); }

.cs-assign-matters:hover:not(:disabled) {
  border-color: var(--gold-1);
  background: var(--parchment-1);
}
.cs-assign-maybe:hover:not(:disabled) {
  border-color: var(--attention-amber);
  background: rgba(250,204,21,0.05);
}
.cs-assign-not_now:hover:not(:disabled) {
  border-color: var(--stone-2);
  background: var(--parchment-2);
}

/* ── pile counters (live tally during draw) ──────────────── */
.cs-draw-counts {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
}

.cs-draw-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.cs-dcnt-label {
  font-family: var(--font-sans-tight);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-metadata);
}

.cs-dcnt-num {
  font-family: var(--font-sans-tight);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.1s;
}

.cs-dcount-matters .cs-dcnt-num { color: var(--gold-1); }
.cs-dcount-maybe   .cs-dcnt-num { color: var(--attention-amber); }
.cs-dcount-not_now .cs-dcnt-num { color: var(--stone-3); }

/* ── keyboard hint ───────────────────────────────────────── */
.cs-kbd-hint {
  font-family: var(--font-sans-tight);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-metadata);
  margin-bottom: var(--space-3);
}
.cs-kbd-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--stone-3);
  background: var(--parchment-2);
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ═══════════════════════════════════════════════════════════
   BOARD PHASE — Kanban review after all cards drawn
   ═══════════════════════════════════════════════════════════ */

.cs-board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  align-items: start;
}

.cs-board-col {
  border: 1px solid var(--stone-2);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  transition: border-color 0.12s, background 0.12s;
}

.cs-board-col.drag-over {
  border-color: var(--gold-1);
  background: var(--parchment-2);
}

/* column header — void dark bar like action dashboard */
.cs-board-col-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--void-0);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cs-bcol-label {
  font-family: var(--font-sans-tight);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.cs-bcol-count {
  font-family: var(--font-sans-tight);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

/* color accent on header per pile */
.cs-bcol-matters { border-top: 2px solid var(--gold-1); }
.cs-bcol-maybe   { border-top: 2px solid var(--attention-amber); }
.cs-bcol-not_now { border-top: 2px solid var(--stone-3); }

/* scrollable card area */
.cs-board-col-cards {
  flex: 1;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 480px;
  overflow-y: auto;
}

/* individual draggable card tile */
.cs-board-card {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--stone-2);
  background: var(--parchment-1);
  font-family: var(--font-sans-tight);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-1);
  cursor: grab;
  user-select: none;
  min-height: 36px;
  display: flex;
  align-items: center;
  transition: opacity 0.12s, border-color 0.12s, background 0.12s;
}
.cs-board-card:active { cursor: grabbing; }
.cs-board-card.dragging { opacity: 0.35; }
.cs-board-card:hover { border-color: var(--stone-3); }
.cs-board-card:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 1px; }

.cs-bc-matters  { border-left: 3px solid var(--gold-1); }
.cs-bc-maybe    { border-left: 3px solid var(--attention-amber); }
.cs-bc-not_now  { border-left: 3px solid var(--stone-3); opacity: 0.65; }

/* ═══════════════════════════════════════════════════════════
   RANKING STEP
   ═══════════════════════════════════════════════════════════ */

.cs-rank-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.cs-rank-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--stone-2);
  border-left: 3px solid var(--gold-1);
  background: var(--bg-surface);
  margin-bottom: var(--space-2);
  cursor: grab;
  min-height: 44px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cs-rank-item:hover {
  border-top-color: var(--gold-1);
  border-right-color: var(--gold-1);
  border-bottom-color: var(--gold-1);
}
.cs-rank-item:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }

.cs-rank-num {
  font-family: var(--font-sans-tight);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold-2);
  width: 1.4rem;
  flex-shrink: 0;
}
.cs-rank-name {
  flex: 1;
  font-family: var(--font-sans-tight);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--ink-1);
}
.cs-rank-move { display: flex; flex-direction: column; gap: 2px; }
.cs-rank-move button {
  background: transparent;
  border: 1px solid var(--stone-2);
  cursor: pointer;
  font-size: 8px;
  padding: 3px 6px;
  min-height: 20px;
  min-width: 28px;
  color: var(--ink-3);
  transition: border-color 0.12s;
}
.cs-rank-move button:hover { border-color: var(--gold-1); color: var(--ink-1); }
.cs-rank-move button:disabled { opacity: 0.3; cursor: not-allowed; }

/* domain observation */
.cs-domain-obs {
  border: 1px solid var(--stone-2);
  border-left: 3px solid var(--attention-amber);
  padding: var(--space-3) var(--space-4);
  background: var(--parchment-1);
  margin-bottom: var(--space-4);
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-secondary);
  display: none;
}
.cs-domain-obs.visible { display: block; }

/* clarifier panel */
.cs-clarifier {
  border: 1px solid var(--stone-2);
  border-left: 3px solid var(--drift-teal);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
  background: var(--parchment-2);
}
.cs-clarifier-loading {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-tertiary);
}

/* ═══════════════════════════════════════════════════════════
   GATE STEP
   ═══════════════════════════════════════════════════════════ */

.cs-gate {
  border: 1px solid var(--stone-2);
  border-left: 4px solid var(--gold-1);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  background: var(--parchment-1);
}
.cs-gate-value {
  font-family: var(--font-serif-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  color: var(--fg-primary);
  margin-bottom: var(--space-3);
}
.cs-gate-q {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 16px;
  line-height: 26px;
  color: var(--fg-secondary);
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   NAMING STEP
   ═══════════════════════════════════════════════════════════ */

.cs-naming-card {
  border: 1px solid var(--stone-2);
  border-left: 4px solid var(--gold-1);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  background: var(--parchment-1);
}
.cs-naming-card h3 {
  font-family: var(--font-serif-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: var(--fg-primary);
  margin: 0 0 var(--space-4);
}

.cs-field { margin-bottom: var(--space-4); }
.cs-label {
  display: block;
  font-family: var(--font-sans-tight);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: var(--space-2);
}
.cs-required { color: var(--friction-pink); }

.cs-input, .cs-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--stone-2);
  font-family: var(--font-serif-display);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-1);
  background: var(--bg-surface);
  box-sizing: border-box;
  min-height: 44px;
  outline: none;
  transition: border-color 0.12s;
}
.cs-input:focus, .cs-textarea:focus { border-color: var(--gold-1); }
.cs-input::placeholder, .cs-textarea::placeholder { color: var(--ink-4); font-style: italic; }
.cs-textarea { min-height: 84px; resize: vertical; }

/* domain picker */
.cs-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.cs-domain-btn {
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--stone-2);
  background: transparent;
  font-family: var(--font-sans-tight);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.12s, background 0.12s;
}
.cs-domain-btn:hover { border-color: var(--gold-1); color: var(--ink-1); }
.cs-domain-btn.selected {
  border-color: var(--gold-1);
  background: var(--gold-soft);
  color: var(--ink-1);
}
.cs-domain-btn:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════
   COMPLETE STEP
   ═══════════════════════════════════════════════════════════ */

.cs-complete-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.cs-complete-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--stone-2);
  font-family: var(--font-serif-display);
  font-size: 15px;
  color: var(--fg-secondary);
}
.cs-complete-list li:last-child { border-bottom: none; }
.cs-complete-list li strong { color: var(--fg-primary); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   ARCHIVE WARNING (entry step)
   ═══════════════════════════════════════════════════════════ */

.cs-archive-warning {
  border: 1px solid var(--stone-2);
  border-left: 4px solid var(--attention-amber);
  padding: var(--space-4) var(--space-5);
  background: rgba(250,204,21,0.05);
  margin-bottom: var(--space-5);
  font-family: var(--font-sans-tight);
  font-size: 13px;
  color: var(--fg-secondary);
}
.cs-archive-warning strong { color: var(--fg-primary); }
.cs-archive-warning ul { margin: var(--space-3) 0 0 var(--space-5); padding: 0; }
.cs-archive-warning p { margin: var(--space-3) 0 0; }

/* ═══════════════════════════════════════════════════════════
   PAUSE BUTTON + MENU
   ═══════════════════════════════════════════════════════════ */

.cs-pause-btn {
  position: fixed;
  top: var(--space-4);
  right: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--stone-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans-tight);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100;
  min-height: 36px;
  color: var(--ink-2);
  transition: border-color 0.12s;
}
.cs-pause-btn:hover { border-color: var(--gold-1); }

.cs-pause-menu {
  display: none;
  position: fixed;
  top: calc(var(--space-4) + 44px);
  right: var(--space-5);
  background: var(--void-0);
  border: 1px solid rgba(255,255,255,0.12);
  z-index: 200;
  box-shadow: var(--shadow-float);
  min-width: 160px;
  padding: var(--space-1) 0;
}
.cs-pause-menu.open { display: block; }
.cs-pause-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans-tight);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  min-height: 44px;
}
.cs-pause-menu button:hover { background: rgba(187,152,99,0.12); color: #fff; }

/* ── danger variant ──────────────────────────────────────── */
.cs-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  height: 36px;
  background: var(--friction-pink-bg);
  border: 1px solid var(--friction-pink-soft);
  color: var(--friction-pink);
  font-family: var(--font-sans-tight);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cs-btn-danger:hover { background: var(--friction-pink-soft); border-color: var(--friction-pink); }

/* ── accessibility: aria-live ────────────────────────────── */
.cs-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .cs-board { grid-template-columns: 1fr; }
  .cs-draw-buttons { grid-template-columns: 1fr; max-width: 100%; }
  .cs-draw-card { max-width: 100%; }
  .cs-content { padding: var(--space-5) var(--space-4); }
  .cs-domain-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   REDESIGNED ILLUSTRATED VALUE CARD  (square, name-tab, flip)
   Design: Cardsort_Design_Brief.md §2 — light astro-carto
   ═══════════════════════════════════════════════════════════ */

/* Domain color tokens — decorative only, never sole signal */
:root {
  --domain-inner:         #8262BA;
  --domain-physical:      #5D9C76;
  --domain-creative:      #95A338;
  --domain-interpersonal: #D47283;
  --domain-adventure:     #4795AD;
  --domain-admin:         #8F8A88;
  --domain-default:       #8F8A88;
}

/* ── card flip scene ─────────────────────────────────────── */
.vc-scene {
  width: 100%;
  max-width: 230px;
  aspect-ratio: 4 / 5;
  perspective: 1000px;
  transform-style: preserve-3d;
  margin: 0 auto;
  position: relative;
}

/* 3D flip applied to the two faces directly (no wrapper element). */
.vc-front,
.vc-back {
  transition: transform 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.vc-scene[data-flipped="true"] .vc-front {
  transform: rotateY(180deg);
}

.vc-scene[data-flipped="true"] .vc-back {
  transform: rotateY(360deg);
}

/* Reduced motion: crossfade instead of 3D flip */
@media (prefers-reduced-motion: reduce) {
  .vc-front,
  .vc-back,
  .vc-scene[data-flipped="true"] .vc-front,
  .vc-scene[data-flipped="true"] .vc-back {
    transform: none !important;
    transition: opacity 0.15s ease !important;
  }
  .vc-back {
    opacity: 0;
  }
  .vc-scene[data-flipped="true"] .vc-back {
    opacity: 1;
  }
  .vc-scene[data-flipped="true"] .vc-front {
    opacity: 0;
  }
}

/* ── card face (shared) ──────────────────────────────────── */
.vc-front,
.vc-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 2px solid var(--vc-domain-color, var(--stone-3));
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vc-back {
  transform: rotateY(180deg);
}

/* ── name tab (top band — stays visible when cards stack) ── */
.vc-tab {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: #FFFFFF;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.vc-tab-dot { margin-top: 7px; }

/* domain-color dot in tab */
.vc-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--vc-domain-color, var(--domain-default));
  flex-shrink: 0;
}

/* value name */
.vc-tab-name {
  flex: 1;
  font-family: var(--font-serif-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg-primary);
  margin: 0;
  white-space: normal;
}

/* info (ⓘ) toggle button */
.vc-info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--vc-domain-color, var(--fg-secondary));
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
  transition: color 0.12s, transform 0.12s;
  position: relative;
}
.vc-info-btn::after {
  content: '';
  position: absolute;
  inset: -12px; /* ~44px touch target */
}
.vc-info-btn:hover {
  color: var(--fg-primary);
  transform: scale(1.12);
}
.vc-info-btn:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 2px;
}

/* close (×) on back face */
.vc-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--stone-2);
  background: transparent;
  cursor: pointer;
  color: var(--fg-metadata);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
  position: relative;
}
.vc-close-btn::after {
  content: '';
  position: absolute;
  inset: -10px;
}
.vc-close-btn:hover {
  border-color: var(--stone-3);
  color: var(--fg-secondary);
}
.vc-close-btn:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 2px;
}

/* ── art area (fills remaining space below tab) ──────────── */
.vc-art {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* image = square supplement, full illustration shown (not cropped) */
.vc-art-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 2px;
}

/* Fallback placeholder when no image is available */
.vc-art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(255, 253, 249, 1) 0%,
    color-mix(in srgb, var(--vc-domain-color, #8F8A88) 8%, #FFFDF9 92%) 100%
  );
}

.vc-art-placeholder-mark {
  width: 64px;
  height: 64px;
  opacity: 0.15;
  color: var(--vc-domain-color, var(--domain-default));
}

/* ── back face: gloss panel over art ────────────────────────
   The same art shows through a translucent panel per design brief §2.1 */
.vc-back .vc-art {
  position: relative;
}

.vc-gloss-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  background: linear-gradient(
    to bottom,
    rgba(255, 253, 249, 0.0) 0%,
    rgba(255, 253, 249, 0.72) 35%,
    rgba(255, 253, 249, 0.92) 100%
  );
}

.vc-gloss-text {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-primary);
  margin: 0;
  text-shadow: 0 1px 0 rgba(255, 253, 249, 0.8);
}

/* ── draw-phase arena: new illustrated card ──────────────── */
.cs-draw-arena--illustrated {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}

/* round label + remaining-count on one line above the card */
.cs-draw-titlebar {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.cs-draw-remaining {
  font-family: var(--font-sans-tight);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg-tertiary);
  white-space: nowrap;
}

/* ── board card: name-tab chip style (stacked piles) ─────── */
.cs-board-card--tabbed {
  padding: 0;
  flex-direction: row;
  align-items: stretch;
  min-height: 40px;
  overflow: hidden;
}

.cs-board-card--tabbed .vc-tab-dot {
  flex-shrink: 0;
  align-self: center;
  margin: 0 var(--space-2) 0 var(--space-3);
}

.cs-board-card--tabbed .vc-tab-name {
  flex: 1;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
}

/* ── kbd hint hidden per design (accessible via sr-only) ─── */
.cs-kbd-hint--hidden {
  display: none;
}

/* ── responsive: illustrated card scales on mobile ───────── */
@media (max-width: 700px) {
  .vc-scene {
    max-width: 100%;
  }
}

/* ── Exit/enter animations for the new illustrated scene ─── */
/* The scene (#cs-draw-card) is now .vc-scene; animate the whole card */
.vc-scene {
  /* transitions for exit/enter animations */
  transition: transform 0.2s ease, opacity 0.2s ease;
  outline: none;
}
.vc-scene:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 3px;
}
/* These reuse the same CSS class names from _drawAssign */
.vc-scene.cs-dc-exit-right {
  transform: translateX(80px) rotate(4deg) !important;
  opacity: 0;
}
.vc-scene.cs-dc-exit-left {
  transform: translateX(-80px) rotate(-4deg) !important;
  opacity: 0;
}
.vc-scene.cs-dc-exit-up {
  transform: translateY(-50px) !important;
  opacity: 0;
}
.vc-scene.cs-dc-enter {
  transform: translateY(24px) !important;
  opacity: 0;
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════
   REACT REBUILD — Additional elements
   Brief §3: deck stack, finalist grid, board stack
   ═══════════════════════════════════════════════════════════ */

/* ── Draw header row (round label + deck stack) ──────────── */
.cs-draw-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

/* ── Shrinking deck stack (progress) ─────────────────────── */
.cs-deck-stack {
  position: relative;
  width: 48px;
  height: 56px;
  flex-shrink: 0;
}

.cs-deck-stack__card {
  position: absolute;
  width: 40px;
  border: 1px solid var(--stone-2);
  background: var(--parchment-1);
  transition: height 0.3s ease;
}

.cs-deck-stack__count {
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-sans-tight);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg-metadata);
}

/* ── Board: overlapping illustrated card stacks ──────────── */
.cs-board-col-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-3) var(--space-3) var(--space-6);
  overflow: visible;
  max-height: none;
}

/* each pile card = name (primary) + square full-image supplement */
.cs-board-stack-card {
  position: relative;
  border: 2px solid var(--vc-domain-color, var(--stone-3));
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* overlap so each card's name band stays visible (newest on top) */
.cs-board-stack-card + .cs-board-stack-card {
  margin-top: -118px;
}
.cs-board-stack-card:hover,
.cs-board-stack-card:focus-visible {
  transform: translateY(-6px);
  z-index: 10;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
  outline: 2px solid var(--gold-1);
  outline-offset: 1px;
}
.cs-board-stack-card:active { cursor: grabbing; }
.cs-board-stack-card.dragging { opacity: 0.35; }

.cs-bsc-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  background: #FFFFFF;
  position: relative;
  z-index: 2;
}
.cs-bsc-tab .vc-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--vc-domain-color, var(--domain-default));
  flex-shrink: 0;
}
.cs-bsc-tab .vc-tab-name {
  font-family: var(--font-serif-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg-primary);
  margin: 0;
}

.cs-bsc-art {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  padding: var(--space-2);
}
.cs-bsc-art img {
  max-width: 86%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}
.cs-bsc-art-ph {
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--vc-domain-color, #8F8A88) 12%, #FFFDF9);
}

/* ── Draw stage: drag affordance ─────────────────────────── */
.cs-draw-arena--illustrated[draggable="true"] { cursor: grab; }
.cs-draw-arena--illustrated[draggable="true"]:active { cursor: grabbing; }
.cs-draw-arena--dragging { opacity: 0.45; }
.cs-draw-hint {
  text-align: center;
  font-family: var(--font-sans-tight);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-metadata);
  margin: var(--space-3) 0;
}
.cs-assign-btn.drag-over {
  border-color: var(--gold-1);
  background: var(--parchment-2);
  transform: translateY(-2px);
}

/* ── Single-screen sort: card + 3 bucket stacks above the fold ─── */
.cs-card-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.cs-card-area .cs-round-label { margin-bottom: 0; }
.cs-card-count {
  font-family: var(--font-sans-tight);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-metadata);
  margin: 0;
}
/* arena needs an explicit width: the card faces are position:absolute, so
   .vc-scene{width:100%} has nothing to resolve against in a centered column */
.cs-card-area .cs-draw-arena--illustrated {
  width: 100%;
  max-width: 230px;
}
.cs-card-area .cs-draw-hint { margin: var(--space-2) 0 0; }

.cs-buckets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.cs-bucket {
  position: relative;
  border: 1px dashed var(--stone-2);
  border-radius: 8px;
  padding: 0 var(--space-2) var(--space-2);
  min-height: 160px;
  max-height: 300px;
  overflow-y: auto;
  cursor: pointer;
  background: var(--bg-surface);
  transition: border-color 0.12s, background 0.12s;
}
/* Hover (mouse, not dragging) and drag-over share ONE state: dashed gold + big "+".
   Hover cue only when a card is in hand to place (cs-bucket--addable). */
.cs-bucket--addable:hover,
.cs-bucket.drag-over {
  border: 2px dashed var(--gold-1);
  background: var(--parchment-2);
}
.cs-bucket--addable:hover .cs-bucket-label,
.cs-bucket.drag-over .cs-bucket-label { color: var(--gold-2); }
.cs-bucket--addable:hover::after,
.cs-bucket.drag-over::after {
  content: '+';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans-tight);
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-1);
  background: rgba(255, 253, 249, 0.55);
  pointer-events: none;
  z-index: 5;
}
.cs-bucket:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 2px;
}

.cs-bucket-hdr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-2);
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 3;
}
.cs-bucket-label {
  font-family: var(--font-serif-display);
  font-size: 15px;
  font-weight: 500;
}
.cs-bucket--matters  .cs-bucket-label { color: #4F8A66; }
.cs-bucket--maybe    .cs-bucket-label { color: #B07A2E; }
.cs-bucket--not_now  .cs-bucket-label { color: #6E6A67; } /* neutral stone — red is banned */
.cs-bucket-count {
  font-family: var(--font-sans-tight);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-metadata);
}

/* colored name-bands that stack (newest on top) */
.cs-bucket-stack {
  display: flex;
  flex-direction: column;
}
.cs-band {
  /* Dark ink on a light tint of the domain color — the value name is real text and
     must meet AA contrast. Domain color carries as a left accent, never behind text. */
  background: color-mix(in srgb, var(--vc-domain-color, var(--domain-default)) 16%, #FFFDF9);
  color: var(--ink-1);
  border-left: 3px solid var(--vc-domain-color, var(--domain-default));
  padding: 7px 8px 7px 12px;
  border-radius: 5px;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.14);
  cursor: grab;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cs-band:active { cursor: grabbing; }
.cs-band:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 1px; }
.cs-band + .cs-band { margin-top: -4px; }
.cs-band-name {
  flex: 1;
  text-align: left;
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-1);
}
.cs-band-info {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--vc-domain-color, var(--fg-secondary));
  font-size: 15px;
  line-height: 1;
  padding: 2px;
}
.cs-band-info:hover { color: var(--ink-1); }
.cs-band-info:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }

/* ── Card info modal (definition reachable from pile bands + finalist tiles) ── */
.cs-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 28, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}
.cs-info-modal {
  position: relative;
  width: 100%;
  max-width: 300px;
  background: #FFFFFF;
  border: 2px solid var(--vc-domain-color, var(--stone-3));
  border-radius: 8px;
  padding: var(--space-5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.cs-info-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  border: 1px solid var(--stone-2);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--fg-secondary);
}
.cs-info-close:hover { border-color: var(--stone-3); color: var(--ink-1); }
.cs-info-art {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.cs-info-art img { max-width: 100%; max-height: 100%; aspect-ratio: 1/1; object-fit: contain; }
.cs-info-art .vc-art-placeholder { width: 100%; height: 100%; }
.cs-info-name {
  font-family: var(--font-serif-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--fg-primary);
  margin: 0 0 var(--space-2);
}
.cs-info-gloss {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
}

@media (max-width: 760px) {
  .cs-buckets { grid-template-columns: 1fr; }
}

.cs-board-empty {
  padding: var(--space-4);
  text-align: center;
  font-family: var(--font-sans-tight);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-metadata);
  opacity: 0.6;
  border: 1px dashed var(--stone-2);
  user-select: none;
}

/* ── Finalist grid (unordered square cards) ──────────────── */
.cs-finalist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.cs-finalist-card {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--vc-domain-color, var(--stone-3));
  border-radius: 6px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, outline-color 0.12s;
  position: relative;
}
.cs-finalist-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.10); }

.cs-finalist-card:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 2px;
}

/* selected finalist — gold outline + star */
.cs-finalist-card.selected {
  outline: 3px solid var(--gold-1);
  outline-offset: -1px;
  box-shadow: 0 0 0 4px rgba(193, 154, 71, 0.18), 0 6px 18px rgba(0,0,0,0.12);
}
.cs-finalist-star {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold-1);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* resort banner — explains narrowing to 10 or fewer */
.cs-resort-banner {
  border: 1px solid var(--stone-2);
  border-left: 3px solid var(--gold-1);
  border-radius: 6px;
  background: var(--parchment-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.cs-resort-title {
  font-family: var(--font-serif-display);
  font-size: 18px;
  margin: 0 0 var(--space-1);
  color: var(--fg-primary);
}
.cs-resort-text {
  font-family: var(--font-serif-display);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0;
}

/* ── Removed cards section (rank step) ───────────────────── */
.cs-removed-section {
  margin-bottom: var(--space-4);
}

.cs-removed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Draw arena exit animation on the wrapper ────────────── */
.cs-draw-arena--illustrated.cs-dc-exit-right {
  transform: translateX(80px) rotate(4deg);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cs-draw-arena--illustrated.cs-dc-exit-left {
  transform: translateX(-80px) rotate(-4deg);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cs-draw-arena--illustrated.cs-dc-exit-up {
  transform: translateY(-50px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ── Responsive: finalist grid on mobile ─────────────────── */
@media (max-width: 700px) {
  .cs-finalist-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .cs-draw-header-row {
    flex-wrap: wrap;
  }
}

/* ── Add-your-own: end-of-sort custom values + drawer ─────── */
.cs-own-section {
  margin: var(--space-5) 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cs-own-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cs-own-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--stone-2);
  border-left: 3px solid var(--gold-1);
  border-radius: 6px;
  background: #FFFFFF;
}
.cs-own-name {
  font-family: var(--font-serif-display);
  font-size: 15px;
  color: var(--fg-primary);
}
.cs-own-gloss {
  flex: 1;
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-own-actions { margin-left: auto; display: flex; gap: var(--space-2); }
.cs-own-edit, .cs-own-discard {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans-tight);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 6px;
}
.cs-own-edit { color: var(--gold-2); }
.cs-own-discard { color: #A8584F; }
.cs-own-edit:hover, .cs-own-discard:hover { text-decoration: underline; }

.cs-add-own-btn {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--stone-3);
  border-radius: 6px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-family: var(--font-sans-tight);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-secondary);
  transition: border-color 0.12s, color 0.12s;
}
.cs-add-own-btn:hover { border-color: var(--gold-1); color: var(--fg-primary); }

/* drawer / modal */
.cs-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 28, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}
.cs-drawer {
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border-radius: 12px 12px 0 0;
  padding: var(--space-5) var(--space-5) var(--space-6);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.28);
  animation: cs-drawer-up 0.2s ease;
}
@keyframes cs-drawer-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cs-drawer { animation: none; } }
@media (min-width: 640px) {
  .cs-drawer-overlay { align-items: center; }
  .cs-drawer { border-radius: 12px; }
}
.cs-drawer-title {
  font-family: var(--font-serif-display);
  font-size: 20px;
  margin: 0 0 var(--space-4);
  color: var(--fg-primary);
}
.cs-drawer-note {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-tertiary);
  margin: var(--space-2) 0 var(--space-4);
}
.cs-drawer-actions { display: flex; gap: var(--space-3); }

/* ── End-of-sort review/continue screen ──────────────────── */
.cs-sortdone { text-align: center; margin-bottom: var(--space-4); }
.cs-sortdone-title {
  font-family: var(--font-serif-display);
  font-size: 26px;
  color: var(--fg-primary);
  margin: 0 0 var(--space-1);
}
.cs-sortdone-sub {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-tertiary);
  margin: 0;
}
.cs-sortdone ~ .cs-actions { justify-content: center; }

/* ── "All done" card: buttons centered where the card was ── */
.cs-card-done {
  width: 100%;
  max-width: 230px;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--stone-3);
  border-radius: 8px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  text-align: center;
}
.cs-card-done-msg {
  font-family: var(--font-serif-display);
  font-size: 16px;
  color: var(--fg-secondary);
  margin: 0;
}
.cs-card-done .btn-primary,
.cs-card-done .btn-ghost { width: 100%; text-align: center; }

/* ── Naming header: title + counter in the corner ────────── */
.cs-name-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.cs-name-title { margin: 0; }
.cs-name-counter {
  font-family: var(--font-sans-tight);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-metadata);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Inline info (ⓘ) + life-domain explainer ─────────────── */
.cs-info-inline {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gold-2);
  font-size: 15px;
  line-height: 1;
  padding: 0 0 0 6px;
  vertical-align: middle;
}
.cs-info-inline:hover { color: var(--fg-primary); }
.cs-dom-info {
  font-family: var(--font-serif-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-secondary);
  background: var(--parchment-2);
  border-left: 3px solid var(--gold-1);
  border-radius: 4px;
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
}
.cs-field-hint {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-tertiary);
  margin: 0 0 var(--space-2);
}

/* ── Domain buttons: primary (★ locked) + secondary ──────── */
.cs-domain-btn { position: relative; }
.cs-domain-btn.is-primary {
  border: 2px solid var(--gold-1);
  background: var(--gold-soft);
  color: var(--ink-1);
  cursor: default;
  padding-left: var(--space-5);
}
.cs-domain-btn.is-secondary {
  border: 2px solid var(--gold-1);
  background: transparent;
  color: var(--ink-1);
}
.cs-dom-star {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-1);
  font-size: 12px;
}

/* ── Field errors ────────────────────────────────────────── */
.cs-input.has-error,
.cs-textarea.has-error { border-color: var(--friction-pink); background: rgba(212,114,131,0.05); }
.cs-error {
  font-family: var(--font-sans-tight);
  font-size: 12px;
  font-weight: 600;
  color: var(--friction-pink);
  margin: var(--space-1) 0 0;
}

/* ── Persistent back link on resort passes ───────────────── */
.cs-back-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans-tight);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-secondary);
  padding: 0;
  margin-bottom: var(--space-3);
}
.cs-back-link:hover { color: var(--gold-2); }
.cs-back-link:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }