/* Light mode: Bauhaus. Loaded only when the system is light, over journey.css.

   A composition on paper rather than relief in clay. The header's black bar
   is the surface; below it a strip names where you are, once, and the column
   holds the work. Nothing is lit, boxed or rounded. Lists are ruled like a
   timetable, and a chosen row gains a black bar against the strip. Colour is
   a plane with a job: blue is you and what you chose, red is the way on,
   yellow is someone else's perspective. Headings are lowercase, after Bayer. */
:root {
  --clay: #f4f1ea;
  --ink: #141414;
  --muted: #625e57;
  --red: #d02c1a;
  --blue: #1d4ea6;
  --yellow: #f3b71b;
  --raise: none; --raise-sm: none; --press: none; --press-sm: none;
  --light: transparent; --shade: transparent; --edge: transparent; --line: var(--ink);
  --pad: 1.25rem;
}
h1, h2, h3, legend, summary { text-transform: lowercase; }
h1 { font-size: clamp(2.6rem, 10vw, 4.4rem); line-height: .92; letter-spacing: -.055em; font-weight: 830; margin: 0 0 1.25rem; }
h2 { font-size: 1.7rem; line-height: 1; letter-spacing: -.04em; font-weight: 800; }
h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.intro { font-size: 1.06rem; }
.eyebrow { margin-bottom: .7rem; color: var(--ink); font-size: .82rem; font-weight: 750; letter-spacing: 0; text-transform: lowercase; }
.page-heading { margin-bottom: 1.5rem; }

/* Above the surface */
.site-header { max-width: none; height: 4.4rem; min-height: 0; padding: 0 var(--pad); border-bottom: 6px solid var(--ink); }
.brand-mark { width: auto; height: auto; border: 0; border-radius: 0; }
.brand-mark svg { width: 26px; height: 26px; }
/* One line where it fits; on the narrowest phones, two, so the header never
   pushes the page wider than the screen. */
.wordmark { max-width: none; font-size: 1rem; font-weight: 820; line-height: 1.05; letter-spacing: -.03em; text-transform: lowercase; text-wrap: balance; }
.header-link { gap: 0; min-height: 44px; padding: 0; border: 0; background: none; font-size: .95rem; font-weight: 750; text-transform: lowercase; white-space: nowrap; }
.header-link::before { content: ''; margin-right: .5rem; width: 1.1rem; height: .55rem; border-radius: 999px 999px 0 0; background: var(--ink); }
.header-link:active { box-shadow: none; }
.route, .rail, .situation-card, .map-spokes, .map-ring, .map-short, .branch-heading button { display: none; }

/* Below it: the strip and the column */
.page { max-width: 64rem; padding: 0; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0; }
.content { max-width: 44rem; padding: 2rem var(--pad) 3rem; }
.strip { position: sticky; top: 4.4rem; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 1rem; height: calc(100dvh - 4.4rem); padding: 1.1rem 0; background: var(--ink); color: var(--clay); }
.strip-0 { background: var(--blue); color: #fff; }
.strip .shape { --s: 1.15rem; background: currentColor; }
.strip .shape.triangle { background: var(--yellow); }
.strip-label { writing-mode: vertical-rl; rotate: 180deg; font-size: 2rem; font-weight: 830; letter-spacing: -.04em; line-height: 1; white-space: nowrap; text-transform: lowercase; }
.locator { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; font-size: .84rem; font-weight: 750; text-transform: lowercase; }
.locator .text-button { padding: 0; }

/* Options: a ruled list */
.choices { gap: 0; margin-top: .5rem; border-top: 3px solid var(--ink); }
.choice { position: relative; gap: .9rem; min-height: 58px; padding: .8rem .25rem; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: none; }
@media (hover: hover) { .choice:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } }
.choice.selected, .choice.selected:hover { border-color: var(--ink); background: none; }
.choice.selected::before { content: ''; position: absolute; left: calc(-1 * var(--pad)); top: -1.5px; bottom: -1.5px; width: 7px; background: var(--ink); }
.choice.selected .choice-title { font-weight: 760; }
.choice input { width: 22px; height: 22px; margin: .05rem 0 0; border: 2px solid var(--ink); background: none; }
.choice input:checked { background: var(--blue); border-color: var(--blue); }
.choice input[type="radio"]::before { display: none; }
.choice input[type="checkbox"] { border-radius: 0; }
.choice input[type="checkbox"]:checked { box-shadow: none; }
.choice:has(input:focus-visible) { outline-offset: -3px; }

/* Buttons, and the way on: a band across the bottom */
.primary, .secondary { border-radius: 0; box-shadow: none; }
.primary { border: 0; background: var(--red); text-transform: lowercase; font-weight: 780; }
.primary:active { box-shadow: none; background: color-mix(in srgb, var(--red) 82%, #000); }
.secondary { border: 3px solid var(--ink); background: none; text-transform: lowercase; font-weight: 750; }
.secondary:active { box-shadow: none; background: var(--ink); color: var(--clay); }
.text-button { text-decoration-color: var(--ink); text-transform: lowercase; font-weight: 700; }
.step-footer { margin: 2.25rem calc(-1 * var(--pad)) 0; padding: 0; border-top: 6px solid var(--ink); box-shadow: none; }
.step-footer .actions { gap: 0; flex-wrap: nowrap; align-items: stretch; }
.step-footer .text-button { flex: 0 0 auto; min-width: 5.5rem; min-height: 62px; padding: 0 1rem; border-right: 3px solid var(--ink); text-decoration: none; }
.step-footer .primary, .step-footer .actions > .primary:first-child { flex: 1; justify-content: space-between; min-height: 62px; margin: 0; padding: 0 var(--pad); font-size: 1.05rem; text-align: left; }
.step-footer .primary::after { width: .7rem; height: .85rem; }

/* Rules and details */
.sources, .other-perspective, .results-section, .finish, .your-selections, .your-selections section { border-top: 3px solid var(--ink); box-shadow: none; }
.focus-reason, .question-results, .your-selections { border-bottom: 1.5px solid var(--ink); }
.finish { border-top-width: 6px; }
.finish::before { display: none; }
summary::before { border: 2px solid var(--ink); background: none; box-shadow: none; }
details[open] > summary::before { background: var(--ink); box-shadow: none; }
details[open] > summary::after { background: var(--clay); }
select { border: 2px solid var(--ink); border-radius: 0; background: none; box-shadow: none; }

/* What you said, and someone else's perspective on yellow */
.context { padding: .15rem 0 .15rem 1rem; border-left: 7px solid var(--ink); border-radius: 0; box-shadow: none; }
.context::before, .results-section .context::before { display: none; }
.notice, .reflection { border-radius: 0; box-shadow: none; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.position-context { padding: .9rem 0; border: 0; border-block: 3px solid var(--ink); border-radius: 0; box-shadow: none; }
.perspective-card { margin: 1.25rem calc(-1 * var(--pad)) 0; padding: 1.6rem var(--pad) 1.75rem; border: 0; border-radius: 0; box-shadow: none; background: var(--yellow); }
.perspective-card::before { display: none; }
.perspective-card .small-label, .perspective-card .muted { color: #3d3a33; }
.perspective-card .small-label { font-weight: 700; }
.perspective-card legend { font-size: 1.1rem; font-weight: 760; }
.perspective-card .choices { grid-template-columns: minmax(0, 1fr); gap: 0; }
.perspective-card .choice { min-height: 52px; padding: .7rem .25rem; border-radius: 0; }
.perspective-card .choice-title { font-size: .95rem; }

/* What we know: an ink plane, the one thing on the page that is nobody's
   view. A finding is a sentence, so it keeps its capitals. */
.fact-card { margin: .5rem calc(-1 * var(--pad)) 0; padding: 1.6rem var(--pad) 1rem; border: 0; box-shadow: none; background: var(--ink); color: var(--clay); }
.fact-card h2 { text-transform: none; font-size: 1.15rem; font-weight: 680; letter-spacing: -.015em; line-height: 1.35; }
.fact-figure { font-size: clamp(2.6rem, 12vw, 4.4rem); letter-spacing: -.07em; }
.fact-card .muted, .fact-source, .fact-card details { color: color-mix(in srgb, var(--clay) 78%, transparent); }
.fact-card .small-label { color: var(--clay); font-weight: 700; }
.fact-card a, .fact-card details strong { color: var(--clay); text-decoration-color: var(--clay); }
.fact-card summary::before { border-color: var(--clay); }
.fact-card summary::after { background: var(--clay); }
.fact-card details[open] > summary::before { background: var(--clay); }
.fact-card details[open] > summary::after { background: var(--ink); }
.fact-guess::before { border-radius: 0; background: var(--blue); outline: 2px solid var(--clay); }
.fact-change legend { font-size: 1.1rem; font-weight: 760; }

/* Other people */
.result-switch { gap: 0; padding: 0; border: 3px solid var(--ink); border-radius: 0; box-shadow: none; }
.result-switch button { border: 0; border-radius: 0; color: var(--ink); font-weight: 760; }
.result-switch button + button { border-left: 3px solid var(--ink); }
.result-switch button[aria-pressed="true"] { background: var(--ink); color: var(--clay); box-shadow: none; }
.result-switch button[aria-pressed="true"]::before { display: none; }
.results-section > h2 { font-size: 1.7rem; }
.bars { border-top: 3px solid var(--ink); }
.bars li { margin: 0; padding: .6rem 0 .7rem; border-bottom: 1.5px solid var(--ink); }
progress { height: 16px; border-left: 3px solid var(--ink); border-radius: 0; background: none; box-shadow: none; }
progress::-webkit-progress-bar { background: none; border-radius: 0; }
progress::-webkit-progress-value { background: var(--ink); border-radius: 0; }
progress::-moz-progress-bar { background: var(--ink); border-radius: 0; }
.your-pick progress::-webkit-progress-value { background: var(--blue); }
.your-pick progress::-moz-progress-bar { background: var(--blue); }
.you { border-radius: 0; background: var(--blue); color: #fff; letter-spacing: 0; text-transform: lowercase; }
.share-panel { margin: 2.5rem calc(-1 * var(--pad)); padding: 1.75rem var(--pad) 2rem; border: 0; border-radius: 0; box-shadow: none; background: var(--ink); color: var(--clay); }
.share-panel::before, .share-panel::after { display: none; }
.share-panel h2 { padding: 0; }
.share-panel p { color: color-mix(in srgb, var(--clay) 82%, transparent); }
.share-panel .primary { flex: 1; justify-content: space-between; }
.share-panel .primary::after { content: ''; width: .7rem; height: .85rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.share-panel .text-button { color: var(--clay); text-decoration-color: var(--clay); }

/* The map: every situation hangs from your view on one black line. The line
   to each is blue where you said it backs up your view, and broken off from
   the spine where it pulls the other way. */
.map-key { margin: 0 0 1.75rem; padding: .8rem 0; border-block: 3px solid var(--ink); color: var(--ink); }
.key-form *, .map-link * { fill: var(--ink); }
.key-form .blue, .map-link .blue { fill: var(--blue); }
.key-form .thin, .map-link .thin { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.map-field { position: static; max-width: none; aspect-ratio: auto; margin: 0; }
.map-centre { position: relative; left: auto; top: auto; translate: none; width: 7.5rem; border: 0; box-shadow: none; background: var(--blue); color: #fff; }
.map-centre::before { display: none; }
.map-centre .small-label { color: #fff; letter-spacing: 0; text-transform: lowercase; font-size: .66rem; }
.map-centre strong { font-size: .88rem; text-transform: lowercase; }
/* The line leaves your view from its lower left. */
.map-nodes { position: static; margin: -1.4rem 0 0 1.25rem; padding: 1.4rem 0 .5rem; border-left: 6px solid var(--ink); }
.map-spot { position: static; width: auto; }
.map-spot + .map-spot .map-node { border-top: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.map-node, .map-spot.up .map-node { display: grid; grid-template-columns: 2.4rem 1.15rem minmax(0, 1fr); column-gap: .7rem; align-items: start; width: 100%; min-height: 66px; padding: .7rem 0; text-align: left; translate: none; }
.map-spot.up .map-text { order: 0; }
.map-link { display: block; width: 2.4rem; height: 1rem; margin-top: .22rem; }
.map-tile, .map-node[aria-pressed="true"] .map-tile { width: 1.15rem; height: 1.15rem; margin-top: .14rem; border: 2px solid var(--ink); border-radius: 0; background: none; box-shadow: none; }
.map-tile::before, .map-node[aria-pressed="true"] .map-tile::before { display: none; }
.map-node.done .map-tile { background: var(--ink); }
.map-node.part .map-tile { background: linear-gradient(135deg, var(--ink) 50%, transparent 50%); }
.map-node[aria-pressed="true"] .map-tile { background: var(--blue); border-color: var(--blue); }
.map-text { display: block; text-align: left; }
.map-title { display: block; font-weight: 720; line-height: 1.22; }
.map-node[aria-pressed="true"] .map-title { font-weight: 830; }
.map-ticks, .locator .map-ticks { display: inline-flex; gap: 3px; margin: .35rem .5rem 0 0; vertical-align: -1px; }
.map-ticks i, .map-ticks i.done, .map-ticks i.now { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 0; box-shadow: none; background: none; }
.map-ticks i.done { background: var(--ink); }
.map-ticks i.now { background: var(--blue); border-color: var(--blue); }
.locator .map-ticks { margin: 0; }
.map-state { display: inline; color: var(--muted); font-size: .8rem; text-transform: lowercase; }
.map-teaser { display: block; margin-top: .45rem; font-size: .92rem; }

@media (max-width: 640px) {
  /* At this size a long word, like "companionship", is wider than the
     column, so headings break it with a hyphen rather than widen the page. */
  h1 { hyphens: auto; overflow-wrap: break-word; }
  .header-extra { display: none; }
  .wordmark { font-size: .95rem; }
}
@media (min-width: 720px) {
  :root { --pad: 3rem; }
  .page { grid-template-columns: 7rem minmax(0, 1fr); }
  .strip { gap: 1.5rem; padding-top: 2rem; }
  .strip-label { font-size: 4rem; }
  .strip .shape { --s: 1.6rem; }
  .content { padding-top: 3rem; }
  .content:has(.map) { max-width: 56rem; }
  .map { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; column-gap: 3rem; align-items: start; }
  .map-key { grid-column: 2; grid-row: 1; position: sticky; top: 6rem; margin: 0; }
  .map-field { grid-column: 1; grid-row: 1; }
  .map-centre { width: 10rem; }
  .map-centre strong { font-size: 1.05rem; }
  .map-nodes { margin-left: 1.6rem; }
}