/*
   THE ONWARD JOURNEY : the block every room ends with.
   KC sitting, 2026-10-04. The structure and class names are fixed by the
   spec (docs/kc-onward-journey-spec-2026-10-04.md, v1.0): three doors in
   nav.pager.onward, each with its one-line reason in span.onward-why; the
   standing room-head-link; and nav.wing-road, the page's place on its road.

   Additive chrome only : no verse, article, row, prayer, or testimony is
   touched by these rules. The block works without script, honors reduced
   motion, and prints plain.

   The .pager pill treatment and the .room-head-link treatment come from
   modern.css and are not re-declared here; this sheet adds ONLY what the
   block adds, so a page that carrieth the house's own .pager keeps its
   grammar, and a page with its own sheet keeps its own.

   This sheet supersedes the provisional rules in roll-family.css (KB) and
   long-form.css (KD); link it AFTER those sheets so the cascade resolves
   here, and the two provisional blocks may be removed at leisure.
   TEMPLE MARK unassigned: the keeper's to set.
*/

/* ---- Where next : the three doors ---------------------------------------
   The house's `.pager` is a centered flex row; the onward block keepeth
   that centering, but each door is a COLUMN (label, then its reason), and
   the doors stay compact. Nothing here touches `.pager` itself, so the
   scripture pages' book-road and the register pagers keep their own look.

   SPECIFICITY NOTE: modern.css treats the pill family with
   `body.site-page :is(.book-selector, .register-roads, .pager, .anchor-row,
   .quiet-nav, .shr-jump) a` — specificity (0,2,2) — which setteth
   flex-direction-independent properties like align-items on every pager
   link. These rules therefore carry `body.site-page` as well (0,3,2), so
   the block's own geometry wins by specificity wherever a page links this
   sheet after modern.css (as the spec requireth).

   GEOMETRY: three doors, three equal columns on wider screens (a balanced
   row, as the spec's plate shows: the doors side by side, each a label and
   a reason); one column on phones, where each door taketh the measure. */
body.site-page .pager.onward {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  justify-content: stretch;
  gap: 0.75rem 1rem;
  max-width: 58rem;
  margin-bottom: 1rem;
}
body.site-page .pager.onward a {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  max-width: none;
  width: 100%;
  line-height: 1.35;
}

/* The one-line reason : quieter than its label, legible in the dimmed lamp
   and on paper, and never a second sentence — the spec allows one line. */
.onward-why {
  display: block;
  margin-top: 0.2rem;
  color: var(--bureau);
  font: 400 0.78rem/1.5 var(--font-ui);
}

/* ---- the wing road : this page's place on its road -----------------------
   One quiet line: the steps, the current step marked (a span, not a link),
   the neighbours reachable. Centered like the pagers it follows. */
.wing-road {
  max-width: var(--body-max);
  margin: 0.75rem auto 0;
  color: var(--bureau);
  font: 400 0.85rem/1.5 var(--font-ui);
  text-align: center;
}
.wing-road a { color: var(--brass); }
.wing-road-step { color: var(--brass); }
.wing-road a:hover,
.wing-road a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.wing-road a:focus-visible,
.onward-why:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* ---- the newcomer's road (KC4) ------------------------------------------
   One quiet invitation, above the doors, on rooms where a first-time
   visitor most needs it. A plain paragraph, not a banner: the house
   inviteth, it doth not shout. */
.newcomer-road {
  max-width: var(--body-max);
  margin: 2.5rem auto 0;
  text-align: center;
  font-family: "EB Garamond", Georgia, serif;
  color: var(--bureau);
}
.newcomer-road a { color: var(--brass); }
.newcomer-road a:hover,
.newcomer-road a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ---- the record's pair (KC): the appendix mirrorth the colophon's
   deeper-rooms nav at its foot (the brief's charge). The colophon's own
   dress liveth in colophon.css scoped to body.colophon; this rule giveth
   the mirrored nav the same hand on the appendix, whose own sheet knoweth
   it not. Identical values, scoped locally — no shared sheet touched. */
body.appendix .deep-rooms {
  display: flex;
  justify-content: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
body.appendix .deep-rooms a {
  color: var(--candle);
  font-family: "Cormorant SC", Georgia, serif;
  font-variant: small-caps;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  background: rgba(220, 238, 255, 0.06);
  transition: transform var(--dur-1) var(--ease-settle), background-color var(--dur-1) var(--ease-settle);
}
body.appendix .deep-rooms a:hover,
body.appendix .deep-rooms a:focus-visible {
  transform: translateY(-1px);
  background: rgba(220, 238, 255, 0.1);
}

/* ---- the wing map (KC2) : the You-Are-Here diagram on rooms.html --------
   An SVG of the wings, existing room names only, the current room marked.
   Colors are token-driven; the diagram is aria-labelled as a whole and its
   caption carrieth the prose. */
.wing-map {
  max-width: 54rem;
  margin: 1.5rem auto 0.5rem;
}
.wing-map svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Two geometries: the wide chart for wide screens; the stacked chart for
   narrow ones, where the wide chart's lettering would fall below legibility
   (measured: the wide map at 390px set its text at ~4px). Only one standeth
   at a time; both carrieth the same links and the same names. */
.wing-map .map-narrow { display: none; }
@media (max-width: 48rem) {
  .wing-map .map-wide { display: none; }
  .wing-map .map-narrow { display: block; }
}
.wing-map text {
  font: 500 12px var(--font-ui);
  fill: var(--ink);
}
.wing-map .map-wing-label {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.wing-map .map-room {
  font: 400 11px var(--font-ui);
  fill: var(--bureau);
}
.wing-map .map-wing-box {
  fill: rgba(220, 238, 255, 0.03);
  stroke: var(--line-dark);
  stroke-width: 1;
  rx: 10;
}
.wing-map .map-center-box {
  fill: rgba(212, 175, 55, 0.08);
  stroke: rgba(212, 175, 55, 0.55);
  stroke-width: 1.5;
  rx: 10;
}
.wing-map .map-here {
  fill: var(--brass);
  font-weight: 600;
}
.wing-map .map-hint {
  font: italic 400 12px "EB Garamond", Georgia, serif;
  fill: var(--bureau);
}
.wing-map .map-wire {
  stroke: var(--line-dark);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.wing-map a:focus-visible .map-wing-box,
.wing-map a:focus-visible .map-center-box {
  stroke: var(--brass);
  stroke-width: 2;
}
.map-caption {
  max-width: 46rem;
  margin: 0.5rem auto 0;
  text-align: center;
  color: var(--bureau);
  font: 400 0.85rem/1.6 var(--font-ui);
}

/* ---- phones : the doors stack whole, nothing overflows ------------------- */
@media (max-width: 48rem) {
  body.site-page .pager.onward {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  body.site-page .pager.onward a {
    max-width: none;
    width: 100%;
  }
  .wing-map text { font-size: 13px; }
}

/* ---- paper : the block is of the screen ----------------------------------
   A printed page carrieth its own way onward (the roads, the folios, the
   pagers); the doors and the map are aids of the wire and stand aside. */
@media print {
  .pager.onward,
  .wing-road,
  .newcomer-road,
  .wing-map,
  .map-caption { display: none !important; }
}

/* ---- stillness : no motion is added; nothing here animates -------------- */
@media (prefers-reduced-motion: reduce) {
  .pager.onward a,
  .wing-road a { transition: none; }
}