/* Self-Map layout. Loads AFTER tokens.css, mark.css and brand.css (see web/styles/README.md). Dark only. Every colour is a token. */
:root{--ts-measure:40rem}
[hidden]{display:none}
body{padding-bottom:env(safe-area-inset-bottom,0px)}
.map-intro{padding:var(--space-8) 0 var(--space-12)}
.map-parts{list-style:none;margin:var(--space-6) 0 var(--space-8);padding:0;border-top:var(--hairline) solid var(--color-line)}
.map-parts li{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:var(--hairline) solid var(--color-line)}
.map-parts span:last-child{color:var(--color-ink-muted);font-size:var(--type-caption-size);text-align:right}
.map-fine{margin-top:var(--space-6)}

/* quiz */
#quiz{padding:var(--space-8) 0 var(--space-12)}
.map-progress{display:flex;gap:6px;margin-bottom:var(--space-3)}
.map-seg{flex:1;height:4px;border-radius:2px;background:var(--color-line);overflow:hidden}
.map-seg i{display:block;height:100%;width:0;background:var(--color-accent);transition:width .3s ease}
.map-secline{display:flex;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8)}
.map-q{font:500 clamp(1.5rem,5vw,2rem)/1.25 var(--font-display);color:var(--color-ink);margin:0 0 var(--space-8);min-height:3.6em}
.map-q:focus{outline:none}
.map-opt{font:600 1.0625rem/1.3 var(--font-body);cursor:pointer;color:var(--color-ink);background:var(--color-ground-raised);border:2px solid var(--ts-field-border);border-radius:var(--radius-md);min-height:52px;padding:var(--space-3) var(--space-1)}
.map-opt:hover{border-color:var(--color-ink)}
.map-opt[aria-pressed="true"]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.map-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2)}
.map-scale .map-opt{min-height:60px;font-size:1.25rem}
.map-ends{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-3)}
.map-choices{display:grid;gap:var(--space-3)}
.map-choice{text-align:left;font-weight:400;padding:var(--space-4) var(--space-4);font-size:1.0625rem}
.map-poles{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.map-pole{font:500 1.1875rem/1.3 var(--font-display);padding:0 var(--space-1) var(--space-2)}
.map-pole:nth-of-type(2){text-align:right}
.map-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.map-row .map-opt{font-size:.875rem;font-weight:600;padding:var(--space-3) var(--space-1);line-height:1.25}
.map-nav{margin-top:var(--space-8)}
.map-link{background:none;border:0;color:var(--color-ink-muted);padding:var(--space-3) 0;min-height:44px;text-decoration:underline;text-underline-offset:3px;font:inherit;cursor:pointer}
.map-link:hover{color:var(--color-ink)}
.map-link:disabled{visibility:hidden}

/* results */
#results{padding:var(--space-8) 0 var(--space-12)}
.map-head{text-align:center;padding:var(--space-4) 0 var(--space-2)}
.map-head .ts-lede{margin:0 auto;max-width:34em}
.map-arch{color:var(--color-accent);margin:0 0 var(--space-4)}
.map-arch:focus{outline:none}
.map-card{margin:var(--space-8) 0 var(--space-6);padding:0;text-align:center}
.map-card img{display:block;width:100%;height:auto;border:var(--hairline) solid var(--color-line);border-radius:var(--radius-md);background:var(--color-ground-raised)}
.map-card canvas{display:block;width:100%;max-width:360px;height:auto;margin:0 auto;border:var(--hairline) solid var(--color-line);border-radius:var(--radius-md);background:var(--color-ground-raised)}
.map-card figcaption{display:grid;gap:var(--space-3);justify-items:center;margin-top:var(--space-4)}
.map-enso{display:block;width:min(260px,70vw);margin:var(--space-8) auto var(--space-2)}
.map-enso .trk{stroke:var(--color-line)}
.map-enso .val{stroke:var(--color-accent)}
.map-enso .num{font-family:var(--font-display);fill:var(--color-ink)}
.map-enso .cap{font-family:var(--font-body);fill:var(--color-ink-muted)}
.map-center{text-align:center;margin-bottom:var(--space-8)}
.map-sub{display:flex;justify-content:center;gap:var(--space-8);margin-bottom:var(--space-6);text-align:center}
.map-sub b{display:block;font:500 1.8rem/1.2 var(--font-display);color:var(--color-ink)}
.map-sub span{font-size:var(--type-caption-size);color:var(--color-ink-muted)}
.map-block{background:var(--color-ground-raised);border:var(--hairline) solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-6);margin-bottom:var(--space-4)}
.map-block h2{font:500 1.375rem/1.3 var(--font-display);margin:0 0 var(--space-1)}
.map-block .ts-small{margin:0 0 var(--space-4)}
.map-block p:last-child{margin-bottom:0}
.map-bars{display:grid;gap:var(--space-3);margin:var(--space-2) 0 var(--space-4)}
.map-bar{display:grid;grid-template-columns:9em 1fr 2.8em;align-items:center;gap:var(--space-3);font-size:.9375rem}
.map-bar span:last-child{text-align:right;color:var(--color-ink-muted)}
.map-track{position:relative;height:8px;background:var(--color-line);border-radius:4px}
.map-bar .map-track{overflow:hidden}
.map-bar .map-track i{display:block;height:100%;border-radius:4px;background:var(--color-ink-muted)}
.map-bar.is-top .map-track i{background:var(--color-accent)}
.map-bar.is-top span:first-child{font-weight:600}
.map-code{font:500 2.4rem/1.2 var(--font-display);letter-spacing:.12em;margin:0 0 var(--space-3);color:var(--color-olive)}
.map-letters{display:grid;gap:var(--space-3);margin:var(--space-3) 0 var(--space-1);padding:0;list-style:none}
.map-letters b{color:var(--color-olive);font-weight:600}
.map-axis{display:grid;grid-template-columns:6.5em 1fr 6.5em;align-items:center;gap:var(--space-3);font-size:.875rem;margin:var(--space-3) 0}
.map-axis span:last-child{text-align:right}
.map-axis .map-track::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--color-ink-muted)}
.map-axis .dot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--color-accent);transform:translate(-50%,-50%)}
.map-axis .on{font-weight:600;color:var(--color-olive)}
.map-practice{border-left:3px solid var(--color-accent);padding:var(--space-1) 0 var(--space-1) var(--space-4)}
.map-question{font:500 1.375rem/1.4 var(--font-display);text-align:center;padding:var(--space-8) var(--space-2) var(--space-4);margin:0}
.map-signup{margin:var(--space-12) 0 var(--space-6)}
.map-signup .ts-h2{font-size:clamp(1.5rem,5vw,1.875rem);margin-bottom:var(--space-4)}
.map-minimal{margin:var(--space-4) 0 0}
.map-restart{text-align:center;margin-top:var(--space-8)}
.map-ghost{background:transparent;color:var(--color-ink);border:2px solid var(--ts-field-border)}
.map-ghost:hover{filter:none;border-color:var(--color-ink)}
.map-note{margin-top:var(--space-8)}
@media (max-width:440px){
  .map-bar{grid-template-columns:7.5em 1fr 2.6em}
  .map-axis{grid-template-columns:5.8em 1fr 5.8em;gap:var(--space-2)}
  .map-block{padding:var(--space-4)}
}
.map-next{margin-top:var(--space-4)}
.map-stats-opt{margin-top:var(--space-6)}