/* ═══════════════════════════════════════════════════════════════════════════
   WHAT KIND OF PhD ARE YOU — css/quiz.css
   Loads after css/site.css and adds no tokens. Pinned to
   html[data-theme="disco"], so colours resolve through the Lamplight palette
   site.css §12 measured on #141B19 — do not add an unmeasured colour.
     Intellect --voice-hlf steel · Psyche --voice-inl violet
     Physique  --voice-rhe blood · Motorics --voice-int brass
   --hue (set per result card from JS) is the only dynamic value; rules read it
   instead of naming an attribute, so a fifth attribute needs no CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{--hue:var(--voice-enc)}

/* ── THE MASTHEAD · a name and its expansion, no controls ───────────────
   Gloss on its own line, not a tooltip: hover-only is unreadable on a phone,
   and these four words are the scoring axes. */
.wordmark{display:flex;flex-direction:column;gap:2px}
.wordmark__gloss{
  font:500 var(--t-cap-xs)/var(--lh-cap-xs) var(--mono);
  letter-spacing:var(--tr-cap-xs);word-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);
}

/* Standing title, not a speaker — same 176px column and metric as the rail. */
.rail__title{
  font:500 var(--t-cap)/1.5 var(--mono);
  letter-spacing:var(--tr-cap);word-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);
}

/* ── THE LANGUAGE BAR ──────────────────────────────────────────────────── */
.langbar{
  display:flex;align-items:baseline;gap:var(--s3);
  margin-left:auto;
  margin-right:max(0px,calc(100% - var(--band)));  /* land on the band edge */
}
.lang{
  font:500 var(--t-cap-xs)/var(--lh-cap-xs) var(--mono);
  letter-spacing:var(--tr-cap-xs);word-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);
  padding:6px 0;cursor:pointer;white-space:nowrap;
}
.lang:hover,.lang:focus-visible{color:var(--ink);text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:4px}
/* Selected = ink + solid rule, never hue: the four hues are spent on the
   attributes, and a fifth meaning would make the result hue ambiguous. */
.lang[aria-pressed="true"]{
  color:var(--ink);
  text-decoration:underline;text-decoration-style:solid;text-underline-offset:4px;
}

/* ── CJK ────────────────────────────────────────────────────────────────
   Newsreader and IBM Plex Mono have no Han glyphs; without a stack the browser
   default lands beside Latin at a different weight and size. Latin stays FIRST
   so mixed strings ("跑 baseline") keep the page's type and the system face
   supplies only the Han. */
html[lang^="zh"]{
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,
         'PingFang SC','PingFang TC','Hiragino Sans GB','Microsoft YaHei',
         'Noto Sans CJK SC','Source Han Sans SC',sans-serif;
  --serif:'Newsreader','Iowan Old Style',Georgia,
          'Songti SC','Songti TC','SimSun','Noto Serif CJK SC',
          'Source Han Serif SC',serif;
}
/* Traditional first under zh-Hant so 骨/角/戶 take Taiwan shapes. */
html[lang="zh-Hant"]{
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,
         'PingFang TC','Heiti TC','Microsoft JhengHei',
         'Noto Sans CJK TC','Source Han Sans TC',sans-serif;
  --serif:'Newsreader','Iowan Old Style',Georgia,
          'Songti TC','PMingLiU','Noto Serif CJK TC',
          'Source Han Serif TC',serif;
}
/* Han has no spaces or descender rhythm; the Latin leading reads cramped. */
html[lang^="zh"] .quiz__lede,
html[lang^="zh"] .result__prose,
html[lang^="zh"] .answer{line-height:1.75}
html[lang^="zh"] .quiz__q{line-height:1.5}

/* NO ITALIC ON HAN: none exists, so the browser shears the glyphs, and only
   the Han shears — "离 camera-ready 还有九十分钟" ends up English upright, Chinese
   leaning. Hue and serif still mark the tagline; letterspacing takes over as
   emphasis. */
html[lang^="zh"] .result__tag{
  font-style:normal;
  letter-spacing:.04em;
}

.quiz__title{
  font:400 var(--t-word)/1.12 var(--serif);
  font-variation-settings:'opsz' 32;
  letter-spacing:-.01em;text-wrap:balance;
  color:var(--ink);
  margin-bottom:var(--s5);
}

/* ── THE CARD · one at a time, and it never resizes the page ────────────
   min-height:404px is load-bearing: without it a longer question shifts the
   answers under the pointer, so the next click hits the wrong one. */
.quiz__card{
  border:var(--card-border);
  box-shadow:var(--card-shadow);
  background:var(--paper-inset);
  padding:var(--s6) var(--s5);
  min-height:404px;
  display:flex;flex-direction:column;
}
#stage:focus{outline:none}

.quiz__kicker{
  font:500 var(--t-cap-xs)/var(--lh-cap-xs) var(--mono);
  letter-spacing:var(--tr-cap-xs);word-spacing:.08em;text-transform:uppercase;
  color:var(--hue);
  margin-bottom:var(--s4);
}
.quiz__lede{
  font:400 var(--t-body)/var(--lh-body) var(--mono);
  color:var(--ink);max-width:56ch;
}
/* The four axes, each in its own --hue: first sight of the result colour. */
.attrs{list-style:none;margin-top:var(--s6);display:grid;gap:var(--s3);
       grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.attrs__item{border-left:2px solid var(--hue);padding-left:var(--s3)}
.attrs__name{
  display:block;
  font:500 var(--t-cap)/var(--lh-cap) var(--mono);
  letter-spacing:var(--tr-cap);word-spacing:.08em;text-transform:uppercase;
  color:var(--hue);
}
.attrs__line{
  display:block;margin-top:2px;
  font:400 var(--t-meta)/var(--lh-meta) var(--mono);
  color:var(--ink-muted);text-wrap:pretty;
}

.quiz__count{
  font:500 var(--t-cap-xs)/var(--lh-cap-xs) var(--mono);
  letter-spacing:var(--tr-cap-xs);text-transform:uppercase;
  font-variant-numeric:tabular-nums slashed-zero;
  color:var(--ink-muted);margin-bottom:var(--s2);
}
.quiz__q{
  font:500 var(--t-title)/var(--lh-title) var(--serif);
  font-variation-settings:'opsz' 24;
  letter-spacing:-.005em;text-wrap:pretty;color:var(--ink);
  margin-bottom:var(--s5);max-width:52ch;
}
.quiz__q:focus{outline:none}

/* ── PROGRESS · ten of the same 6px ink square the ledger bullets use ──── */
.quiz__progress{display:flex;gap:var(--s2);margin-bottom:var(--s4)}
.pip{
  width:var(--bullet);height:var(--bullet);
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--rule-strong);
}
.pip.is-done{background:var(--shadow);box-shadow:none}
.pip.is-here{background:var(--ink);box-shadow:none}

/* ── THE ANSWERS · 2px border + 2px hover offset, so hover never reflows ─ */
.quiz__answers{list-style:none;display:flex;flex-direction:column;gap:var(--s3);margin-top:auto}
.answer{
  display:flex;align-items:flex-start;gap:var(--s3);
  width:100%;text-align:left;
  padding:var(--s3) var(--s4);
  border:2px solid var(--rule-hair);
  background:transparent;
  color:var(--ink);
  font:400 var(--t-body)/var(--lh-body) var(--mono);
  cursor:pointer;
}
.answer:hover,.answer:focus-visible{
  border-color:var(--ink);
  background:var(--bone-card);
  box-shadow:var(--card-shadow);
  transform:translate(-2px,-2px);
  transition:transform var(--d-snap) linear,box-shadow var(--d-snap) linear,
             background-color var(--d-snap) linear,border-color var(--d-snap) linear;
}
/* The digit is the keyboard shortcut printed — keys 1–4 are bound in JS. */
.answer__key{
  flex:none;
  font:500 var(--t-cap)/var(--lh-cap) var(--mono);
  letter-spacing:0;
  color:var(--ink-muted);
  border:1px solid var(--rule-hair);
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
}
.answer:hover .answer__key,.answer:focus-visible .answer__key{color:var(--ink);border-color:var(--ink)}
.answer__text{text-wrap:pretty}

.quiz__go,.quiz__back{
  align-self:flex-start;
  font:400 var(--t-link)/var(--lh-link) var(--mono);
  padding:4px 0;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  cursor:pointer;
}
.quiz__go{margin-top:var(--s5);font-size:var(--t-body)}
.quiz__back{margin-top:var(--s4);color:var(--ink-muted)}
.quiz__go:hover,.quiz__back:hover,
.quiz__go:focus-visible,.quiz__back:focus-visible{text-decoration-thickness:2px;color:var(--ink)}

/* ── THE RESULT ────────────────────────────────────────────────────────── */
.quiz__card--result{display:block}

.portraitcard{
  float:left;
  width:180px;
  margin:0 var(--s5) var(--s4) 0;
  border:var(--card-border);
  border-color:var(--hue);
  background:var(--mat);
  box-shadow:var(--plate-shadow);
}
.portraitcard__img{
  display:block;width:100%;height:auto;
  aspect-ratio:3/4;object-fit:cover;
}
/* The name band needs its own ground: --mat is solved for rasters, not type.
   Hue on --mat is 2.64:1 (Physique) to 3.97:1 (Psyche) at 11px tracked caps,
   under the 4.5:1 floor; on --paper-inset the four are 5.86/7.69/8.36/8.79.
   --ink clears it too (6.13:1 on the mat) but hue is what names the attribute. */
.portraitcard__name{
  font:500 var(--t-cap)/var(--lh-cap) var(--mono);
  letter-spacing:var(--tr-cap);word-spacing:.08em;text-transform:uppercase;
  text-align:center;color:var(--hue);
  background:var(--paper-inset);
  padding:var(--s2) var(--s1);
  border-top:1px solid var(--hue);
  text-wrap:balance;
}

.result__tag{
  font:500 var(--t-voice)/var(--lh-voice) var(--serif);
  font-style:italic;color:var(--hue);
  text-wrap:pretty;margin-bottom:var(--s3);
}
.result__prose{
  font:400 var(--t-body)/var(--lh-body) var(--mono);
  color:var(--ink);text-wrap:pretty;
}
/* Same weight and ink for both poles — "at your worst" is not set quieter. */
.result__poles{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--s4);row-gap:var(--s2);
  margin-top:var(--s4);
  font:400 var(--t-meta)/var(--lh-meta) var(--mono);
}
.result__poles dt{
  font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tr-cap-xs);font-size:var(--t-cap-xs);
  color:var(--ink-muted);white-space:nowrap;padding-top:3px;
}
.result__poles dd{color:var(--ink);text-wrap:pretty}

.dimbars{clear:both;margin-top:var(--s6);padding-top:var(--s4);border-top:var(--hair)}
.dimbars__label{
  font:500 var(--t-cap-xs)/var(--lh-cap-xs) var(--mono);
  letter-spacing:var(--tr-cap-xs);text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:var(--s3);
}
.dimbar{
  display:grid;grid-template-columns:110px minmax(0,1fr) 34px;
  align-items:center;gap:var(--s3);
  font:400 var(--t-meta)/var(--lh-meta) var(--mono);
  font-variant-numeric:tabular-nums slashed-zero;
  color:var(--ink-muted);
  padding:3px 0;
}
.dimbar.is-winner{color:var(--ink)}
.dimbar__name{text-transform:uppercase;letter-spacing:var(--tr-cap-xs);font-size:var(--t-cap-xs)}
.dimbar__track{display:block;height:7px;background:var(--paper-inset);border:1px solid var(--rule-hair)}
.dimbar__fill{display:block;height:100%;width:var(--w,0%);background:var(--hue);transform-origin:left center}
.dimbar__num{text-align:right}

/* Bars draw once on reveal. In CSS, not JS, so it needs no listener; reduced
   motion skips it. */
@media (prefers-reduced-motion:no-preference){
  @keyframes bar-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .dimbar__fill{animation:bar-draw 520ms var(--ease-out) both}
}

.quiz__note{
  font:400 var(--t-cap)/var(--lh-cap) var(--mono);
  letter-spacing:0;word-spacing:normal;text-transform:none;
  color:var(--ink-muted);
  margin-top:var(--s7);padding-top:var(--s3);
  border-top:var(--hair);
  max-width:58ch;text-wrap:pretty;
}

/* ── NARROW ────────────────────────────────────────────────────────────── */
@media (max-width:759px){
  .rail__title{display:none}
  .quiz__card{padding:var(--s5) var(--s4);min-height:0}
}
@media (max-width:559px){
  /* Stack instead of float: at 320px a 180px card leaves a 6-word measure. */
  .portraitcard{float:none;width:160px;margin:0 0 var(--s4) 0}
  .result__poles{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .result__poles dd{margin-bottom:var(--s2)}
  .dimbar{grid-template-columns:88px minmax(0,1fr) 28px;gap:var(--s2)}
  .answer{padding:var(--s3)}
}

/* ── PLAIN VIEW · quiz stays, ornament goes ────────────────────────────── */
html[data-voice="off"] .quiz__note,
html[data-voice="off"] .rail__title{display:none}

/* ── PREFERENCES ───────────────────────────────────────────────────────── */
@media (prefers-contrast:more){
  .answer{border-color:var(--ink)}
  .pip{box-shadow:inset 0 0 0 1px var(--ink)}
  .dimbar__track{border-color:var(--ink)}
}
@media (forced-colors:active){
  :root{--hue:CanvasText}
  .quiz__card,.answer,.portraitcard{border-color:CanvasText;box-shadow:none}
  .answer:hover,.answer:focus-visible{border-color:Highlight;transform:none}
  .pip{box-shadow:inset 0 0 0 1px CanvasText}
  .pip.is-done,.pip.is-here{background:CanvasText}
  .dimbar__track{border-color:CanvasText}
  .dimbar__fill{background:CanvasText}
  .portraitcard__name{color:CanvasText;border-top-color:CanvasText}
}

/* ── PRINT · result only, not the questionnaire ────────────────────────── */
@media print{
  .quiz__answers,.quiz__progress,.quiz__go,.quiz__back,.quiz__note,
  .masthead__nav,.skip{display:none!important}
  .quiz__card{border:1px solid #000;box-shadow:none;min-height:0;background:#fff}
  .portraitcard{border:1px solid #000;box-shadow:none;background:#fff}
  .portraitcard__name,.result__tag,.quiz__kicker{color:#000}
  .dimbar__fill{background:#000;animation:none}
}