/* Design tokens — design-direction.md §1. Non-negotiable. */
:root {
  --field: #E3E5E2;
  --crowd: #C6CBC7;
  --rule: #A8AEA9;
  --ink: #2C3339;
  --deep: #1B2430;
  --you: #8E3B2F;
  --you-on-deep: #C9634A;
}

/* Spectral only. Weights 200/300/400. Falls back to a serif if fonts
   have not been fetched yet (scripts/fetch-fonts.mjs). */
@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-200.woff2") format("woff2");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 19px; }

body {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--field);
  min-height: 100vh;
}

body.deep { background: var(--deep); color: var(--field); }

/* Type scale — perfect fourth from 19px (design-direction §2). */
.t-question { font-size: 45px; font-weight: 300; line-height: 1.25; letter-spacing: -0.01em; max-width: 62ch; }
.t-display  { font-size: 34px; font-weight: 200; line-height: 1.3; }
.t-body     { font-size: 19px; font-weight: 400; line-height: 1.7; max-width: 72ch; }
.t-option   { font-size: 19px; font-weight: 300; line-height: 1.5; }
.t-data     { font-size: 24px; font-weight: 300; line-height: 1.2; font-variant-numeric: tabular-nums; }
.t-quiet    { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--rule); }

/* Layout: off-centre, upper-left, emptiness is the design (§4). */
.page {
  position: relative;
  min-height: 100vh;
  padding: 8vh 6vw;
}
.content {
  position: relative;
  z-index: 2;
  max-width: 45%;
}
@media (max-width: 900px) {
  .content { max-width: 100%; }
}

/* The field canvas sits behind everything. */
#field-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Left rule — the plate edge from the layout sketch. */
.plate {
  border-left: 2px solid var(--ink);
  padding-left: 2rem;
}
body.deep .plate { border-left-color: var(--rule); }

/* Options: squares, not pills. Selected fills with --ink, never --you (§4). */
.options { list-style: none; margin-top: 2rem; }
.options li { margin-bottom: 2px; }
.opt {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  background: none;
  border: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid rgba(168,174,169,0.16);
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  /* the whole row is the target, which matters most on a phone */
  width: 100%;
  padding: 0.85rem 0.5rem 0.85rem 0;
  min-height: 48px;
}
.options li:first-child .opt { border-top: 1px solid rgba(168,174,169,0.16); }
.opt-key {
  flex: none;
  width: 1.1em;
  font-size: 13px;
  color: rgba(168,174,169,0.65);
  font-variant-numeric: tabular-nums;
}
.opt-text { flex: 1; }
@media (max-width: 620px) {
  .opt { padding: 1rem 0.5rem 1rem 0; min-height: 54px; }
  .opt-key { display: none; }   /* no keyboard on a phone; reclaim the width */
}
.opt .sq {
  flex: none;
  width: 11px;
  height: 11px;
  border: 1px solid var(--rule);
  border-radius: 0;
  transform: translateY(-1px);
}
.opt[aria-pressed="true"] .sq { background: var(--ink); border-color: var(--ink); }
.opt[aria-pressed="true"] .opt-key { color: var(--ink); }
.opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
body.deep .opt:focus-visible { outline-color: var(--field); }

/* No hover transitions anywhere (§8). Focus outline only. */
button, a { transition: none; }

a { color: inherit; }

/* Certainty marks (§5): six bars, one per axis, each driven by that axis's real
   posterior state. They lengthen as an axis resolves and occasionally shrink
   when an answer contradicts an earlier one. The unevenness is the point.
   Driven by transform, never height — animating layout is what feels cheap. */
.instrument {
  margin-bottom: 3rem;
  transition: opacity 220ms ease-out;
}
.instrument-hidden { opacity: 0; pointer-events: none; }

.marks {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  height: 34px;
}
.marks .mk {
  position: relative;
  display: block;
  width: 6px;
  height: 34px;
  background: rgba(168,174,169,0.20);   /* the empty travel of each bar */
}
.marks .mk-fill {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--rule);
  transform: scaleY(0.04);
  transform-origin: bottom;
  transition: transform 260ms cubic-bezier(0.22, 0.8, 0.3, 1), background-color 520ms ease-out;
}
/* the axis this answer just informed, briefly brought forward */
.marks .mk-fill.mk-moved { background: var(--ink); transition: transform 260ms cubic-bezier(0.22, 0.8, 0.3, 1), background-color 0ms; }

.readout {
  margin-top: 0.95rem;
  font-size: 15px;
  color: var(--rule);
  font-variant-numeric: tabular-nums;
}
.readout b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.ro-sep { margin: 0 0.6rem; opacity: 0.6; }
@media (max-width: 520px) {
  .ro-sep { display: none; }
  .readout .ro { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .marks .mk-fill { transition: none; }
}

/* Image grid */
/* Plates get real presence: at 480px across three columns they were thumbnails.
   Image questions widen past the text column, since there is no line length to
   protect and the plate is the question. */
.img-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 2rem;
  width: min(72vw, 760px);
}
@media (max-width: 900px) {
  .img-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.img-grid button {
  border: 1px solid var(--rule);
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
}
.img-grid button[aria-pressed="true"] { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: -3px; }
.img-grid button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.img-grid img { display: block; width: 100%; height: auto; }

/* Open text */
textarea {
  width: 100%;
  max-width: 62ch;
  min-height: 9rem;
  font: inherit;
  font-weight: 300;
  color: inherit;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.8rem;
  margin-top: 2rem;
  resize: vertical;
}
textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.continue {
  display: inline-block;
  background: none;
  border: none;
  font: inherit;
  font-weight: 300;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
  margin-top: 1.4rem;
  padding: 2px;
}
.continue:disabled { color: var(--rule); text-decoration: none; cursor: default; }
.continue:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.answered-count { margin-top: 4rem; }

/* Section transition line: one line on an empty field, held for a beat (§6). */
.transition-line { padding-top: 30vh; }

/* Result page */
.reveal {
  position: relative;
  height: 100vh;
}
.rarity {
  text-align: center; /* the only centred element on the site */
  position: relative;
  z-index: 2;
  padding-top: 62vh;
}
.rarity .t-body, .rarity .t-quiet { margin-left: auto; margin-right: auto; }
.rarity .figure { font-size: 60px; font-weight: 200; line-height: 1.1; font-variant-numeric: tabular-nums; }

.result-body { position: relative; z-index: 2; max-width: 45%; padding: 4rem 6vw 8rem; }
@media (max-width: 900px) { .result-body { max-width: 100%; } }
body.deep .t-quiet { color: var(--rule); }

/* Distribution / axis strips */
.axis-strip { margin: 2.2rem 0; }
.axis-strip svg { display: block; overflow: visible; }

/* Paywall: first sentences full size, remainder physically too small to read (§7).
   The tiny text is server-scrambled — real shape, no real words. */
.preview-section { margin-top: 2.4rem; }
.preview-rest {
  font-size: 4px;
  line-height: 1.6;
  max-width: 60ch;
  color: var(--rule);
  word-break: break-word;
  user-select: none;
}
.buy-line {
  display: inline-block;
  margin-top: 3rem;
  font-size: 24px;
  font-weight: 300;
  color: inherit;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}
.buy-line:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; }
.buy-line:disabled { color: var(--rule); text-decoration: none; cursor: default; }

.waiver { margin-top: 1.2rem; max-width: 62ch; display: flex; gap: 0.7rem; align-items: baseline; }
.waiver input {
  appearance: none;
  width: 11px; height: 11px;
  border: 1px solid var(--rule);
  border-radius: 0;
  flex: none;
  cursor: pointer;
  transform: translateY(1px);
}
.waiver input:checked { background: var(--field); border-color: var(--field); }
.waiver input:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.footer-links { margin-top: 6rem; }
.footer-links a { margin-right: 1.6rem; }

/* Motion: none, except the mark's arrival, handled in result.js.
   Hard cuts everywhere else. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================================
   RESULT DASHBOARD
   --you still means one thing only: "this is you". It appears as a position
   marker on the field and on each axis instrument, and nowhere else — never on
   a button, link, border or hover state (design-direction §11).
   ========================================================================== */

.dash {
  position: relative;
  z-index: 2;
  /* Opaque: the fixed field canvas belongs to the reveal only. Without this its
     --you mark shows through the panels and "you" appears twice on one screen. */
  background: var(--deep);
  max-width: 100%;
  padding: 0 max(5vw, calc((100% - 1180px) / 2)) 10rem;
}
.dash > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 2.5rem;
}
.panel {
  grid-column: span 12;
  border: 1px solid rgba(168,174,169,0.28);
  padding: 1.9rem 2rem 2.1rem;
  background: rgba(227,229,226,0.022);
  position: relative;
}
.panel-4 { grid-column: span 4; }
.panel-5 { grid-column: span 5; }
.panel-6 { grid-column: span 6; }
.panel-7 { grid-column: span 7; }
.panel-8 { grid-column: span 8; }
@media (max-width: 940px) {
  .panel, .panel-4, .panel-5, .panel-6, .panel-7, .panel-8 { grid-column: span 12; }
  .dash { padding: 0 6vw 8rem; }
}

.panel h2 {
  font-size: 15px;
  font-weight: 400;
  color: var(--rule);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.panel p + p { margin-top: 1rem; }

/* Big honest figures */
.stat { font-size: 52px; font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-sm { font-size: 34px; font-weight: 200; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-note { margin-top: 0.7rem; }

/* Specimen signature — reads like a plate number */
.sig {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--rule);
  word-spacing: 0.35em;
}

/* Six-axis instrument */
.meter { margin-bottom: 1.9rem; }
.meter:last-child { margin-bottom: 0; }
.meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--rule);
  margin-bottom: 9px;
  gap: 1rem;
}
.meter-top .pole-a, .meter-top .pole-b { white-space: nowrap; }
.meter-track { position: relative; height: 20px; }
.meter-track .line {
  position: absolute;
  top: 9px; left: 0; right: 0;
  height: 1px;
  background: rgba(168,174,169,0.5);
}
.meter-track .centre {
  position: absolute;
  top: 4px; left: 50%;
  width: 1px; height: 11px;
  background: rgba(168,174,169,0.75);
}
.meter-track .tick {
  position: absolute;
  top: 6px;
  width: 1px; height: 7px;
  background: rgba(168,174,169,0.3);
}
.meter-track .you {
  position: absolute;
  top: 4px;
  width: 6px; height: 12px;
  background: var(--you-on-deep);   /* this is you */
  transform: translateX(-3px);
}
.meter-read { margin-top: 8px; font-size: 14px; color: var(--rule); }
.meter-read strong { font-weight: 400; color: var(--field); }

/* Veil over the paid panels: a soft grey cloud. The text underneath is
   server-scrambled, so nothing real is being hidden by CSS. */
.veiled { position: relative; }
.veiled .veil-body {
  filter: blur(4.5px);
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}
.veil-cloud {
  position: absolute;
  inset: -1px;
  background: linear-gradient(180deg,
    rgba(27,36,48,0.10) 0%,
    rgba(120,128,138,0.16) 45%,
    rgba(27,36,48,0.34) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}
.veil-scrim {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 220px;
  background: linear-gradient(180deg, rgba(27,36,48,0) 0%, rgba(27,36,48,0.92) 78%, var(--deep) 100%);
  pointer-events: none;
}

/* Purchase modal */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20,27,36,0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  overflow-y: auto;
}
.modal {
  background: var(--deep);
  border: 1px solid rgba(168,174,169,0.4);
  max-width: 560px;
  width: 100%;
  padding: 2.8rem 2.8rem 2.2rem;
  position: relative;
}
@media (max-width: 620px) { .modal { padding: 2rem 1.5rem 1.6rem; } }
.modal h2 { font-size: 30px; font-weight: 200; line-height: 1.25; }
.modal .lede { margin-top: 0.9rem; }
.modal-list { list-style: none; margin: 1.6rem 0 0; }
.modal-list li {
  font-size: 16px;
  font-weight: 300;
  padding: 7px 0;
  border-bottom: 1px solid rgba(168,174,169,0.16);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.modal-list li span:last-child { color: var(--rule); font-size: 14px; white-space: nowrap; }

.price-row { display: flex; align-items: baseline; gap: 0.9rem; margin-top: 1.9rem; }
.price-row .amount { font-size: 40px; font-weight: 200; font-variant-numeric: tabular-nums; }
.price-row .once { color: var(--rule); font-size: 15px; }

.pay-btn {
  display: block;
  width: 100%;
  margin-top: 1.3rem;
  padding: 0.95rem 1rem;
  font: inherit;
  font-size: 20px;
  font-weight: 300;
  color: var(--deep);
  background: var(--field);
  border: 1px solid var(--field);
  border-radius: 0;
  cursor: pointer;
  text-align: center;
}
.pay-btn:disabled { opacity: 0.42; cursor: default; }
.pay-btn:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; }

/* Legal: present, actionable, deliberately quiet */
.fineprint {
  margin-top: 0.95rem;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(168,174,169,0.78);
}
.fineprint input {
  appearance: none;
  width: 10px; height: 10px;
  margin-top: 4px;
  border: 1px solid rgba(168,174,169,0.6);
  border-radius: 0;
  flex: none;
  cursor: pointer;
}
.fineprint input:checked { background: var(--rule); border-color: var(--rule); }
.fineprint input:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.fineprint a { color: inherit; }

.modal-dismiss {
  display: block;
  margin: 1.1rem auto 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 14px;
  color: var(--rule);
  text-decoration: underline;
  cursor: pointer;
  padding: 3px;
}
.modal-dismiss:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; }

/* Sticky unlock bar once the modal is dismissed */
.unlock-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: rgba(27,36,48,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(168,174,169,0.3);
  padding: 0.85rem 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.unlock-bar .u-text { font-size: 15px; font-weight: 300; }
.unlock-bar .u-text span { color: var(--rule); }
.unlock-bar button {
  font: inherit;
  font-size: 16px;
  font-weight: 300;
  padding: 0.55rem 1.4rem;
  color: var(--deep);
  background: var(--field);
  border: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
}
.unlock-bar button:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; }
@media (max-width: 620px) {
  .unlock-bar { padding: 0.7rem 5vw; }
  .unlock-bar .u-text { font-size: 13px; }
}

/* Field inset used inside a panel */
.field-inset { width: 100%; height: 260px; display: block; }

/* Distribution curves — design-direction §7 */
.curve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.6rem 2.4rem; }
.curve-top {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 13px; color: var(--rule); margin-bottom: 5px;
}
.curve-svg { width: 100%; height: 46px; display: block; overflow: visible; }
.curve-note { font-size: 13px; color: var(--rule); margin-top: 5px; }

/* Modelled-reference-sample disclosure: present, quiet, never hidden */
.corpus-note {
  margin-top: 2.6rem;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(168,174,169,0.72);
  max-width: 68ch;
}

/* ============================================================================
   LANDING
   Cold plate, off-centre, the crowd doing the work. No --you anywhere: the
   person has no mark yet, and that absence is the pitch (design-direction §3).
   ========================================================================== */

.lp { position: relative; z-index: 2; }

.lp-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 5vw 6vh;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
.lp-mark { letter-spacing: 0.18em; margin-bottom: 3.5rem; }

.lp-head {
  font-size: clamp(34px, 5.4vw, 68px);
  font-weight: 200;
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 17ch;
}
.lp-count {
  font-variant-numeric: tabular-nums;
  font-weight: 200;
}
.lp-lede { margin-top: 2.2rem; max-width: 54ch; }

.lp-begin { margin-top: 2.8rem; }
.lp-cta {
  display: inline-block;
  font-size: 26px;
  font-weight: 300;
  text-decoration: none;
  color: var(--field);
  border-bottom: 1px solid var(--rule);
  padding: 0 0 6px;
}
.lp-cta:focus-visible { outline: 2px solid var(--field); outline-offset: 5px; }
.lp-terms { margin-top: 1.6rem; }

/* Live aggregate band — every figure is queried, none is written */
.lp-band {
  background: var(--deep);
  border-top: 1px solid rgba(168,174,169,0.22);
  border-bottom: 1px solid rgba(168,174,169,0.22);
  padding: 3.4rem 5vw;
}
.lp-stats {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 860px) { .lp-stats { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.5rem; } }
.lp-stat-big {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 200;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}

/* The six axes, both poles named */
.lp-axes-wrap {
  background: var(--deep);
  padding: 6rem max(5vw, calc((100% - 1180px) / 2)) 5rem;
}
.lp-axes-wrap > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.lp-h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 200; line-height: 1.2; }
.lp-sub { margin-top: 1rem; max-width: 58ch; }

.lp-axes { list-style: none; margin-top: 3rem; }
.lp-axis {
  display: flex;
  gap: 1.6rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(168,174,169,0.18);
}
.lp-axis:last-child { border-bottom: 1px solid rgba(168,174,169,0.18); }
.lp-axis-n {
  font-size: 13px;
  color: var(--rule);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
  flex: none;
}
.lp-axis-body { flex: 1; min-width: 0; }
.lp-axis-poles {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 300;
}
.lp-axis-poles span:first-child,
.lp-axis-poles span:last-child { white-space: nowrap; }
.lp-axis-line {
  flex: 1;
  height: 1px;
  background: rgba(168,174,169,0.4);
  min-width: 20px;
}
.lp-axis-blurb { margin-top: 0.5rem; }
@media (max-width: 620px) {
  .lp-axis-poles { flex-wrap: wrap; gap: 0.5rem; }
  .lp-axis-line { display: none; }
  .lp-axis-poles span:first-child::after { content: " ·"; color: var(--rule); }
}

.lp-close {
  background: var(--deep);
  padding: 5rem max(5vw, calc((100% - 1180px) / 2)) 7rem;
}
.lp-close > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.lp-quote {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 200;
  line-height: 1.25;
  max-width: 20ch;
}
.lp-disclosure { margin-top: 2.4rem; max-width: 62ch; font-size: 12px; line-height: 1.6; }


/* Question screen furniture */
.q-ui-label { margin-top: 1.6rem; }
.q-narstate { margin-top: 0.7rem; }

.q-foot {
  margin-top: 3.2rem;
  display: flex;
  align-items: baseline;
  gap: 2rem;
  flex-wrap: wrap;
}
.q-foot .answered-count { margin-top: 0; }
.q-back {
  background: none;
  border: none;
  font: inherit;
  font-size: 15px;
  color: var(--rule);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 2px;
}
.q-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

textarea::placeholder { color: rgba(168,174,169,0.8); font-weight: 300; }

/* Transition beat: held, but dismissible */
.q-skip {
  margin-top: 2.6rem;
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}

/* The pattern readout does not exist until the instrument can actually rule
   something out. Its arrival is the event, not its presence. */
.ro-pending { opacity: 0; pointer-events: none; }
.ro, .ro-sep { transition: opacity 420ms ease-out; }

/* Image questions get the width the plates need */
.q-shell.q-wide { max-width: min(88vw, 900px); }

/* An observation the instrument makes about you, mid-run. Quiet, factual,
   never congratulatory — it should read as being noticed, not encouraged. */
.q-note {
  margin-top: 2.2rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule);
  font-size: 15px;
  line-height: 1.55;
  color: var(--rule);
  max-width: 46ch;
}

/* What it found: named findings with the payoff withheld */
.hooks { list-style: none; margin-top: 0.4rem; }
.hook {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(168,174,169,0.16);
}
.hook:last-child { border-bottom: none; }
.hook-label { font-size: 17px; font-weight: 300; flex: none; max-width: 60%; }
.hook-rule { flex: 1; height: 1px; background: rgba(168,174,169,0.32); min-width: 16px; }
.hook-value {
  font-size: 19px;
  font-weight: 300;
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--field);
}
.hook-foot { margin-top: 1.3rem; font-size: 14px; color: var(--rule); max-width: 62ch; }
@media (max-width: 620px) {
  .hook { flex-wrap: wrap; gap: 0.3rem; }
  .hook-label { max-width: 100%; }
  .hook-rule { display: none; }
}

.modal-hooks { list-style: none; margin-top: 0.7rem; }
.modal-hooks li {
  font-size: 16px;
  font-weight: 300;
  padding: 6px 0 6px 1rem;
  border-left: 2px solid var(--rule);
  margin-bottom: 6px;
}