/* ==========================================================================
   Value Sort Exercise stylesheet
   One identity in two grounds. Dark (default): warm charcoal, bone ink.
   Light (on request or by system preference): paper, near-black ink.
   Signal orange is the only accent in both, and it goes only on the mark,
   the second word of the name, mono numerals, the arrow, and the progress
   fill. Type: Bricolage Grotesque (display), Instrument Sans (body),
   IBM Plex Mono (labels and figures).
   ========================================================================== */

:root {
  --bg: #1b1b19;
  --panel: #232320;
  --line: #3a3935;
  --line-mid: #5a584f;
  --text: #ece8df;
  --text-dim: #a19c90;
  --accent: #e2541b;
  --accent-wash: rgba(226, 84, 27, 0.16);
  /* The "ink" fill: bone on dark, near-black on light. Used for the primary
     button, the strong top rules on lists, and the done stepper segments. */
  --ink: #ece8df;
  --ink-text: #1b1b19;
  --fg-strong: #ffffff;
  --texture-dot: rgba(236, 232, 223, 0.045);
  --texture-glow: rgba(236, 232, 223, 0.035);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  --radius: 4px;
  --radius-pill: 999px;
  --maxw: 720px;
  --font: "Instrument Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", var(--font);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --step: 200ms;

  /* Type scale. One ladder, used everywhere:
     title > focal word > section > body > small > xs (mono micro-labels). */
  --fs-brand: clamp(1.0625rem, 4.6vw, 1.375rem);
  --fs-title: clamp(1.75rem, 4.5vw, 2.75rem);
  --fs-focal: clamp(2rem, 7vw, 3.5rem);
  --fs-tier: 1.375rem;
  --fs-stat: 1.5rem;
  --fs-section: 1.375rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.6875rem;
}

:root[data-theme="light"] {
  --bg: #f6f5f1;
  --panel: #ffffff;
  --line: #d9d6ce;
  --line-mid: #b9b5ab;
  --text: #17181a;
  --text-dim: #5c6470;
  --accent-wash: rgba(226, 84, 27, 0.12);
  --ink: #17181a;
  --ink-text: #f6f5f1;
  --fg-strong: var(--text);
  --texture-dot: rgba(23, 24, 26, 0.05);
  --texture-glow: rgba(255, 255, 255, 0.6);
  --shadow: 0 16px 38px rgba(23, 24, 26, 0.14);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #f6f5f1;
    --panel: #ffffff;
    --line: #d9d6ce;
    --line-mid: #b9b5ab;
    --text: #17181a;
    --text-dim: #5c6470;
    --accent-wash: rgba(226, 84, 27, 0.12);
    --ink: #17181a;
    --ink-text: #f6f5f1;
    --fg-strong: var(--text);
    --texture-dot: rgba(23, 24, 26, 0.05);
    --texture-glow: rgba(255, 255, 255, 0.6);
    --shadow: 0 16px 38px rgba(23, 24, 26, 0.14);
  }
}

* { box-sizing: border-box; }
/* The stylesheet sets display on buttons and screens, so the hidden attribute
   needs to win over those. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* Touch tuning: the app draws its own :active feedback, so suppress the
   default grey/blue tap flash on every control. */
button, .pick, .rank-handle { -webkit-tap-highlight-color: transparent; }
/* `manipulation` drops the 300ms double-tap-zoom delay on the fast-tapped
   choice buttons. Excludes .rank-handle, which needs touch-action: none. */
button, .pick { touch-action: manipulation; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* Texture layer: a faint dot grid for a "desk mat" surface plus a whisper of
   depth toward the top. Fixed and behind all content (which sits at z-index 1),
   never over the opaque panels, so it adds surface without touching legibility. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(140% 100% at 50% -25%, var(--texture-glow), transparent 55%),
    radial-gradient(var(--texture-dot) 1px, transparent 1.6px);
  background-size: 100% 100%, 22px 22px;
  background-position: center top, center;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
p { margin: 0; }

/* Mono micro-label: the one style for every caption, count, and numeral. */
.mono {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--ink-text);
  padding: 0.6rem 1rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

.muted { color: var(--text-dim); font-weight: 400; }

/* ------------------------------- top bar -------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.3rem 1.25rem 0.85rem;
  display: flex; align-items: center; gap: 0.75rem;
}

/* The mark: a plain orange square. */
.wordmark { display: block; width: 12px; height: 12px; background: var(--accent); flex: none; }
.wordmark-text { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; font-size: var(--fs-brand); white-space: nowrap; }
.wordmark-text em { font-style: normal; color: var(--accent); }
.topbar-actions { margin-left: auto; display: flex; gap: 0.5rem; }

.icon-btn {
  background: transparent; border: 1px solid var(--line);
  color: var(--text); border-radius: var(--radius-pill);
  height: 36px; padding: 0 0.85rem; font: inherit; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; white-space: nowrap;
  transition: color var(--step), border-color var(--step), background var(--step);
}
@media (hover: hover) {
  .icon-btn:hover { border-color: var(--text); }
}

/* Theme toggle: a stroked circle, filled by half (auto), fully (dark), or
   not at all (light). */
/* One SVG carries a sun (light), a moon (dark), and a half-filled contrast
   circle (auto); the stylesheet shows the one matching the current mode. */
#themeBtn { width: 36px; padding: 0; }
#themeBtn svg { width: 17px; height: 17px; display: block; }
#themeBtn svg > g { display: none; }
#themeBtn[data-mode="auto"] .i-auto,
#themeBtn[data-mode="light"] .i-sun,
#themeBtn[data-mode="dark"] .i-moon { display: block; }

/* ------------------------------- stepper -------------------------------- */

.stepper { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem 1rem; }

.stepper-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px;
}
.stepper-list li { flex: 1; display: flex; flex-direction: column; }

/* The section caption sits above the row, left-aligned, in mono. Only the
   current segment carries text, so the row keeps one label. */
.stepper-list .lbl {
  min-height: 1.15em; margin-bottom: 0.5rem; line-height: 1.15;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-strong); white-space: nowrap;
}

.stepper-list .bar {
  display: block; height: 2px;
  background: var(--line); overflow: hidden;
}
.stepper-list .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 320ms ease; }

/* ------------------------------- layout --------------------------------- */

.wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 3rem 1.25rem 3rem;
  flex: 1;
}

/* --------------------------------- phones -------------------------------- */
/* Tighten the vertical rhythm (the desktop 3rem top gap is too deep under a
   sticky header on a short screen) and trim the oversized card/panel padding
   so more of each value card fits above the fold. */
@media (max-width: 600px) {
  .wrap { padding-top: 1.9rem; padding-bottom: 2.25rem; }
  .value-card { padding: 2.5rem 1.75rem; }
  .value-desc { font-size: 1.125rem; }
  .instructions, .breakdown { padding: 1.4rem 1.35rem; }
}
/* Narrowest phones: pull the side gutter in to 16px and slim the pill buttons
   so the brand and "Start Over" share the top bar without wrapping. */
@media (max-width: 400px) {
  .topbar-inner, .stepper, .wrap { padding-left: 1rem; padding-right: 1rem; }
  .icon-btn { padding: 0 0.7rem; }
}

/* Fade only, no transform: a transform here would become the containing block
   for the fixed dragged card on the ranking screen and throw its position off. */
.screen { animation: rise 300ms ease both; }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }

.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem;
}

/* ---------------------------- instructions ------------------------------ */

.instructions {
  display: grid; gap: 1rem; color: var(--text);
  font-size: var(--fs-body); line-height: 1.55;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.85rem;
}
.instructions p { color: var(--text); }

/* Single-action page buttons (Next between pages): centered, one shared size. */
.page-actions { margin-top: 1.75rem; display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.page-actions .btn { min-width: 10rem; }

/* Numbered with mono figures in orange, the way the wireframe lists them. */
.rating-list {
  margin: 0.25rem 0 0; padding: 0; list-style: none;
  display: grid; gap: 0.65rem;
  color: var(--text); font-weight: 600;
  counter-reset: rating;
}
.rating-list li { display: flex; align-items: baseline; gap: 0.9rem; counter-increment: rating; }
.rating-list li::before {
  content: "0" counter(rating);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.06em; color: var(--accent);
}

/* ----------------------------- ranking list ------------------------------ */
.rank-list { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: 0.5rem; }
.rank-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  transition: opacity var(--step), border-color var(--step), box-shadow var(--step), transform var(--step);
}
.rank-num {
  flex: none; width: 1.8rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rank-body { flex: 1; min-width: 0; }
.rank-name { display: block; font-weight: 600; }
.rank-desc { display: block; font-size: var(--fs-sm); color: var(--text-dim); }
.rank-handle { flex: none; cursor: grab; color: var(--text-dim); font-size: 1.15rem; line-height: 1; padding: 0.2rem 0.4rem; touch-action: none; user-select: none; }
.rank-handle:active { cursor: grabbing; }
/* Touchscreens: give the grip a full finger-sized target so a drag is easy to
   start without catching the row's scroll. */
@media (pointer: coarse) {
  .rank-handle { padding: 0.55rem 0.7rem; font-size: 1.35rem; }
}
/* The dragged card lifts like it's being held: bigger, tilted, shadowed. */
.rank-row.dragging { border-color: var(--text); box-shadow: var(--shadow); transform: scale(1.03) rotate(-1.5deg); }
.rank-row.below-cut { opacity: 0.5; }
.rank-row.below-cut .rank-num { color: var(--text-dim); }
/* Standalone tier dividers between rows. Not attached to any card, so a
   dragged card never carries its header away. */
.rank-tier {
  list-style: none; line-height: 1.1;
  font-family: var(--font-display); font-size: var(--fs-tier); letter-spacing: -0.02em; font-weight: 700;
  margin: 1.1rem 0 0.2rem;
}
.rank-tier:first-child { margin-top: 0; }
/* The single drop target: a clear tinted slot, not a card, so the held card
   and its landing spot never read as two blanks. */
.rank-placeholder { border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--accent-wash); list-style: none; }

/* --------------------------- sort handoff summary ------------------------ */
/* A read-only tally: hairline rows, no fill, so it never reads like buttons. */
.summary-list { list-style: none; margin: 1.6rem 0; padding: 0; border-top: 1px solid var(--ink); }
.summary-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.85rem 0.1rem;
  border-bottom: 1px solid var(--line);
}
.summary-label { font-weight: 600; font-size: var(--fs-body); }
.summary-count { font-family: var(--font-mono); font-size: var(--fs-stat); font-variant-numeric: tabular-nums; color: var(--text); }

.start-form { margin-top: 2rem; }
/* Input grows, Begin stays on the same line at the far right. */
.start-row { display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: nowrap; }
.start-row .btn { flex: none; }

/* A contained box on the panel, so the name field reads clearly as an input. */
.text-input {
  flex: 1 1 auto; min-width: 0;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line-mid); border-radius: var(--radius);
  height: 48px; padding: 0 0.95rem; font: inherit; font-size: 1.0625rem;
  transition: border-color var(--step), box-shadow var(--step);
}
.text-input::placeholder { color: var(--text-dim); }
.text-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.text-input.input-error, .text-input.input-error:focus {
  border-color: #e5484d !important; box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.28) !important;
}

.fineprint { margin-top: 0.9rem; font-size: var(--fs-sm); font-style: italic; color: var(--text-dim); line-height: 1.5; }

/* -------------------------------- buttons -------------------------------- */

.btn {
  font: inherit; font-weight: 600;
  border-radius: var(--radius); border: 1px solid transparent;
  height: 48px; padding: 0 1.5rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  transition: transform 120ms ease, background var(--step), border-color var(--step), color var(--step), opacity var(--step);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }

/* The primary is the ink fill; its arrow is the one orange element. */
.btn-primary { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.btn-primary .arrow { color: var(--accent); }
.btn-ghost { background: transparent; color: var(--fg-strong); border-color: var(--line-mid); border-radius: var(--radius-pill); height: 36px; padding: 0 0.9rem; font-weight: 500; }

@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { opacity: 0.88; }
  .btn-ghost:hover:not(:disabled) { color: var(--fg-strong); border-color: var(--text); }
}

:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ------------------------------ round shell ------------------------------ */

.round-head { margin-bottom: 1.6rem; }
.round-head h1 { font-size: var(--fs-title); margin-bottom: 0.5rem; }
/* A short orange rule under each screen title. */
.round-head h1::after, .results-head h1::after {
  content: ""; display: block; width: 5rem; height: 3px;
  margin-top: 0.7rem; background: var(--accent); border-radius: 2px;
}
.round-sub { color: var(--text-dim); font-size: var(--fs-body); }
.round-sub.tagline { font-style: italic; font-size: 1rem; }

/* --------------- kept-values list (start of Rate Others) -----------------
 * Deliberately flat: plain text with a small orange square, so it reads as a
 * display list and never as a row of clickable buttons.
 * ------------------------------------------------------------------------ */
.value-grid {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.55rem 1.1rem;
}
/* When the grid stands alone (no instructions note under it), frame it with
   the same hairlines that separate sections elsewhere. */
#screen-rankintro .value-grid {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  padding: 1.3rem 0; margin-bottom: 0;
}
.value-grid li {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-size: var(--fs-body); color: var(--text);
}
.value-grid li::before {
  content: ""; flex: none; width: 5px; height: 5px;
  background: var(--accent); transform: translateY(-0.15em);
}

.progress { margin-bottom: 0.85rem; }
.progress-foot { margin-top: 1.5rem; margin-bottom: 0; }
.progress-meta {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); margin-top: 0.6rem;
}
.progress-meta strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.progress-track { height: 2px; background: var(--line); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 260ms ease; }

/* ------------------------------- the card -------------------------------- */

.card-stage { perspective: 1000px; margin-bottom: 1.5rem; }

/* The card is a panel: one hairline, no shadow, the name in display type. */
.value-card {
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: none; cursor: default;
  padding: 3.25rem 2.5rem; min-height: 7rem;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.75rem;
  text-align: center;
}
.value-name { font-size: var(--fs-focal); line-height: 1; }
.value-desc { color: var(--text-dim); font-size: 1.1875rem; max-width: 30rem; margin: 0 auto; }

.value-card[data-leaving="me"] { animation: flyRight 200ms ease forwards; }
.value-card[data-leaving="notMe"] { animation: flyLeft 200ms ease forwards; }
.value-card[data-leaving="meh"] { animation: flyDown 200ms ease forwards; }
.value-card[data-entering] { animation: rise 220ms ease both; }

@keyframes flyRight { to { opacity: 0; transform: translateX(28%) rotate(7deg); } }
@keyframes flyLeft  { to { opacity: 0; transform: translateX(-28%) rotate(-7deg); } }
@keyframes flyDown  { to { opacity: 0; transform: translateY(16%) scale(0.94); } }

/* ------------------------------- choices --------------------------------- */

.choices { display: grid; gap: 0.75rem; }
.choices-3 { grid-template-columns: 1fr; }
.choices-2 { grid-template-columns: 1fr 1fr; }

/* Undo rides on the left of the choices row as a small box, same height as
   the choice buttons but narrow. The choices take the remaining width. */
.choice-row { display: flex; gap: 0.75rem; align-items: flex-start; }
.choice-row .choices { flex: 1; min-width: 0; }
.choice-undo {
  flex: none; width: 58px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-mid); border-radius: var(--radius);
  color: var(--fg-strong); cursor: pointer;
  transition: border-color var(--step), opacity var(--step);
}
.choice-undo svg { width: 18px; height: 18px; display: block; }
.choice-undo:disabled { opacity: 0.42; cursor: not-allowed; }
@media (hover: hover) {
  .choice-undo:hover:not(:disabled) { border-color: var(--text); }
}

/* On the narrowest phones the two filter labels ("Yes, That Bothers Me" /
   "No, It Doesn't") wrap unevenly side by side, so stack them full width. */
@media (max-width: 479px) {
  .choices-2 { grid-template-columns: 1fr; }
}

@media (min-width: 620px) {
  .choices-3 { grid-template-columns: repeat(3, 1fr); }
}

/* All three choices read the same (outlined), so none looks pre-selected;
   the picked colour below is the only fill, shown on press. */
.btn-choice {
  background: transparent; border-color: var(--line-mid); color: var(--text);
  height: 56px; padding: 0 1rem;
}
/* Gated to devices with a real hovering pointer: on a touchscreen the tapped
   button keeps its :hover state after the tap, and since the same button
   element is reused for the next card it would look pre-selected. */
@media (hover: hover) {
  .btn-choice:hover { border-color: var(--text); }
}

/* Tap feedback. :active covers the press itself; .picked (added in JS) holds
   the chosen colour through the card's flyout, so a touchscreen tap (no hover)
   shows which option was picked. .picked snaps on and off with no transition,
   and is cleared as the next card renders, so it never bleeds onto it. */
.btn-choice.picked { transition: none; }
.btn-choice:active, .btn-choice.picked { background: var(--accent); border-color: var(--accent); color: #1b1b19; opacity: 1; }
.btn-choice:active .choice-key, .btn-choice.picked .choice-key { color: #1b1b19; }

@media (min-width: 620px) {
  .choices-3 { grid-template-areas: "no mid yes"; }
  .choices-3 .choice-no  { grid-area: no; }
  .choices-3 .choice-mid { grid-area: mid; }
  .choices-3 .choice-yes { grid-area: yes; }
  .choices-2 { grid-template-areas: "yes no"; }
  .choices-2 .choice-no  { grid-area: no; }
  .choices-2 .choice-yes { grid-area: yes; }
}

.round-foot {
  margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.tally { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tally strong { color: var(--text); font-weight: 500; }

.hint {
  font-size: var(--fs-sm); color: var(--text-dim);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.85rem 1rem; margin-bottom: 1rem;
}

/* -------------------------- selectable value list ------------------------- */

.list-scroll {
  max-height: 52vh; max-height: 52dvh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 0.45rem;
  display: grid; gap: 0.4rem;
  overscroll-behavior: contain;
}

.pick {
  width: 100%; text-align: left; font: inherit; color: var(--text);
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.72rem 0.85rem;
  display: flex; align-items: center; gap: 0.75rem; cursor: pointer;
  transition: border-color var(--step), background var(--step), opacity var(--step);
}
@media (hover: hover) {
  .pick:hover:not(:disabled) { border-color: var(--text); }
}
.pick:disabled { opacity: 0.4; cursor: not-allowed; }

.pick .box {
  flex: none; width: 1.22rem; height: 1.22rem; border-radius: 3px;
  border: 1.5px solid var(--line-mid); display: grid; place-items: center;
  font-size: 0.72rem; color: transparent; transition: all var(--step);
}
.pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); }
.pick[aria-pressed="true"] .box { background: var(--accent); border-color: var(--accent); color: #1b1b19; }

.pick .txt { min-width: 0; }
.pick .nm { font-weight: 600; display: block; }
.pick .ds { font-size: var(--fs-sm); color: var(--text-dim); display: block; }
.pick .tag {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--radius-pill); padding: 0.16rem 0.5rem;
}

.sticky-actions {
  position: sticky; bottom: 0; margin-top: 1.1rem;
  padding: 0.85rem 0 calc(0.85rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; align-items: center;
}

/* ------------------------------- results --------------------------------- */

.results-head { margin-bottom: 1.6rem; }
.results-head h1 { font-size: var(--fs-title); margin-bottom: 0.4rem; }

/* Hairline-divided rows, no fill: mono rank, name, description. */
.results-list { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--ink); }
.results-list li:not(.results-tier) {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline; column-gap: 0.5rem;
  padding: 0.85rem 0.1rem; border-bottom: 1px solid var(--line);
}
.results-list .rk { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.results-list li.secondary .rk { color: var(--text-dim); }
.results-list .rn { font-weight: 600; font-size: 1.125rem; }
.results-list .rd { grid-column: 2; font-size: var(--fs-sm); color: var(--text-dim); }
/* "Secondary Values" is a second heading with its own ruled list under it. */
.results-list .results-tier {
  background: none; border: none; padding: 0; margin: 2rem 0 0.9rem;
  font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; color: var(--text);
  letter-spacing: -0.02em; text-transform: none;
}
.results-list .results-tier + li { border-top: 1px solid var(--ink); }

/* One centered "PDF-Friendly Version"; Start Over lives in the header. */
.export-bar { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.export-bar .btn { min-width: 16rem; }
.export-bar .fineprint { margin-top: 0; text-align: center; }

.breakdown {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.85rem; margin-bottom: 1rem;
}
.breakdown h2 { font-size: var(--fs-section); margin-bottom: 0.35rem; }

/* ------------------------------ radar chart ------------------------------
 * Hand-rolled SVG spider chart: six axes, integer grid rings, one filled
 * shape. Colours come from the theme so it works in light and dark.
 * ----------------------------------------------------------------------- */
.radar { display: block; width: 100%; max-width: 26rem; height: auto; margin: 0.4rem auto 0; }
.radar-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-spoke { stroke: var(--line); stroke-width: 1; }
.radar-area { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--accent); }
.radar-label { fill: var(--text); font-family: var(--font-mono); font-size: 11px; dominant-baseline: middle; }
.radar-count { fill: var(--text-dim); font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; dominant-baseline: middle; }

/* -------------------------------- footer --------------------------------- */

.site-foot {
  position: relative; z-index: 1;
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: 1.25rem 1.25rem 1.75rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-strong);
}

/* ------------------------------ preferences ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* -------------------------- PDF report (print) --------------------------- */
/* "Save PDF" builds #report and opens the print dialog; choosing "Save as
   PDF" produces this styled, light-themed document (the paper ground, ink,
   and the orange mark). Backgrounds are forced on so the header band and the
   radar fill survive the export. */

.report { display: none; }

@media print {
  @page { size: letter; margin: 0; }
  html, body { background: #fff; margin: 0; }
  .topbar, main, .skip-link, .site-foot { display: none !important; }

  /* Fill the page as a column so the footer band sits at the very bottom of
     the sheet; the body flexes to take up the space between the bands. */
  .report {
    display: flex; flex-direction: column; min-height: 100vh;
    color: #17181a; background: #fff; font-family: var(--font);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .report-head, .report-foot { flex: 0 0 auto; }
  .report-body { flex: 1 0 auto; }

  /* Header and footer share one dark-gray band so the report reads as a unit.
     The band is an SVG rect (.report-band) stretched behind the content, so it
     prints even when Chrome's "Background graphics" option is off; the CSS
     background below is a same-colour fallback for when it is on. */
  .report-head, .report-foot { position: relative; }
  .report-band { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  .report-head > :not(.report-band), .report-foot > :not(.report-band) { position: relative; z-index: 1; }
  .report-head { background: #2c2b27; color: #f6f5f1; padding: 30px 46px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
  .report-brand { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; display: flex; align-items: center; gap: 12px; }
  .report-square { flex: 0 0 auto; display: block; }
  .report-brand em { font-style: normal; color: #e2541b; }
  .report-meta { text-align: right; display: flex; flex-direction: column; gap: 6px; }
  .report-for { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1; color: #f6f5f1; margin: 0; }
  .report-for .hl { color: #e2541b; }
  .report-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #b3aea3; margin: 0; }

  .report-body { padding: 30px 46px 8px; }

  /* Every section header (Core / Secondary / Values Cluster) is one type. */
  .report-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 0 0 24px; }
  .report-col { break-inside: avoid; }
  .rv-tier, .report-clusters h2 {
    font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
    color: #17181a; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #17181a;
  }
  .report-list { list-style: none; margin: 0; padding: 0; }
  .report-list li { break-inside: avoid; display: grid; grid-template-columns: 30px 1fr; column-gap: 6px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid #d9d6ce; }
  .rv-rank { font-family: var(--font-mono); font-size: 11px; color: #e2541b; }
  .rv-name { display: block; font-weight: 600; font-size: 14px; }
  .rv-desc { grid-column: 2; display: block; font-size: 10.5px; color: #5c6470; margin-top: 1px; }
  /* Fixed ink colours so the radar prints cleanly on white. */
  .report .radar { max-width: 340px; margin: 0 auto; }
  .report .radar-grid,
  .report .radar-spoke { stroke: #d9d6ce; }
  .report .radar-area { fill: rgba(226, 84, 27, 0.16); stroke: #e2541b; }
  .report .radar-dot { fill: #e2541b; }
  .report .radar-label { fill: #17181a; }
  .report .radar-count { fill: #5c6470; }

  .report-foot { margin-top: 0; padding: 16px 46px;
    background: #2c2b27; color: #ffffff; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    text-align: center; }
}