/* Pick-up map: the page's own styles, on top of the shared theme. */
.intro .hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.4rem; align-items: start; }
@media (max-width: 760px) { .intro .hero-grid { grid-template-columns: 1fr; } }
.intro .facts { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.intro .facts li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-s); padding: .6rem .9rem; font-size: .95rem; }
.intro .facts strong { font-weight: 600; }
.intro .intro-fig { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-s); padding: .6rem; }
.intro .intro-fig figcaption { margin-top: .5rem; }

#ui { padding: 2rem var(--gutter) 4rem; }
.step { max-width: 640px; margin: 0 auto; background: var(--card); padding: 2rem 2.25rem; border: 1px solid var(--rule); border-radius: var(--radius); }
.step.wide { max-width: 880px; }
.step h1 { font-size: 1.6rem; margin: 0 0 .6rem; line-height: 1.2; }
.step h2 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; } .step h2:first-of-type { margin-top: 0; }
.step ul { padding-left: 1.2rem; } .step li { margin: .4rem 0; }
.card-stage { display: flex; align-items: center; justify-content: center; min-height: 200px; background: var(--sky); border-radius: var(--radius-s); padding: 1rem; margin: 1rem 0; }
.cal-card { background: #2b3a45; border-radius: 3.2mm; }
.readout { font-family: var(--mono); font-size: .85rem; color: var(--ink-2); }
.warn { color: var(--bad); font-size: .9rem; min-height: 1.2em; }
.warn-inline { color: var(--bad); }
.blocker, .caution, .ok-box { border-radius: var(--radius-s); padding: .9rem 1.2rem; margin: 1rem 0; }
.blocker { background: #fdeceb; border: 1px solid #e5a6a0; }
.caution { background: #fff8e1; border: 1px solid #e3cf8a; }
.ok-box { background: #eaf6ec; border: 1px solid #a8d3b0; color: var(--ok); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.check input { width: auto; margin: .25rem 0 0; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: .4rem 0 .8rem; }
.grid.two label { margin: .3rem 0; }
button.danger { background: #fff; color: #a02020; border-color: #a02020; font-weight: 600; }

/* The blind-spot step, ported with the study it came from: the stage needs every pixel of width. */
.step.blindspot { max-width: none; }
.step.blindspot > :not(.blindspot-stage) { max-width: 640px; margin-left: auto; margin-right: auto; }
.blindspot-stage { position: relative; height: 220px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-s); margin: 1rem 0; overflow: hidden; }
.bs-fix { position: absolute; top: 50%; width: 14px; height: 14px; background: #000; transform: translateY(-50%); }
.bs-ball { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #d02020; transform: translateY(-50%); visibility: hidden; }

/* Schematics. */
.dg { width: 100%; height: auto; display: block; }
.dg-cap { font-family: var(--sans); font-size: 11.5px; fill: var(--ink-2); }
.dg-small { font-family: var(--sans); font-size: 11px; fill: var(--muted); }
.dg-key { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: var(--ink); }
.dg-keys { max-width: 340px; }
.steps { list-style: none; padding: 0; margin: 1rem 0 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 220px 1fr; gap: 1.2rem; align-items: start; padding: 1rem 0; border-top: 1px solid var(--rule); counter-increment: step; }
.steps li h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.steps li h3::before { content: counter(step) ". "; color: var(--accent-ink); }
.steps li p { margin: .3rem 0; }
.step-dg { background: var(--surface, #fcfcfb); border: 1px solid var(--rule); border-radius: var(--radius-s); padding: .4rem; }
@media (max-width: 640px) { .steps li { grid-template-columns: 1fr; } .step-dg { max-width: 300px; } }

/* The stage. */
#stage { position: fixed; inset: 0; background: #dfe7ee; color: var(--ink); }
#stage .field { position: absolute; inset: 0; display: block; }
#stage .prompt { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); width: min(720px, 94vw); background: rgba(252,252,251,.94); border: 1px solid var(--rule); border-radius: var(--radius); padding: .7rem 1.1rem; font-size: 1rem; }
#stage .prompt p { margin: .25rem 0; }
#stage .keys { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
#stage .keys button { font-size: .95rem; }

/* The map. */
.fig { background: var(--surface, #fcfcfb); border: 1px solid var(--rule); border-radius: var(--radius-s); padding: .6rem; margin: 1rem 0; }
.map-fig { width: 100%; height: auto; display: block; }
.map-fig .tick { font-size: 11.5px; fill: var(--muted); }
.map-fig .axlabel { font-size: 12px; fill: var(--ink-2); }
.map-fig .cell { stroke: #fcfcfb; stroke-width: 2; }
.map-fig .cell-label { font-size: 12px; font-weight: 600; fill: var(--ink); }
.map-fig .cell-sub { font-size: 10px; fill: var(--ink-2); }
.map-fig .look { fill: none; stroke: var(--ink); stroke-width: 2; }
.map-fig .legend { font-size: 11.5px; fill: var(--ink-2); }
.profile-line { font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; border-left: 4px solid var(--accent); padding-left: 1rem; margin: 1rem 0; }
.advice { background: var(--sky); border-radius: var(--radius-s); padding: .9rem 1.2rem; margin: 1rem 0; }