html { -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The atlas strokes its route var(--accent, ...). The builder, co-pilot and Keep each
   define it; home never did, so the sample trip's route drew in the pre-Trova purple
   fallback on the first screen a visitor sees. Its pins need no override: the ported
   sample stops carry no category (see tools/port-app2-data.mjs), so pinColor already
   resolves every one of them to plain gold. */
body { font: 15px/1.6 var(--sans); margin: 0 auto; max-width: 720px;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--paper); color: var(--ink); --accent: var(--gold); }
h1 { font-family: var(--disp); font-size: var(--fs-title, 24px); }
.day > h2 { margin: 18px 0 6px; font-size: 18px; font-family: var(--disp); }
.card { border: 1px solid var(--hairline); border-radius: var(--r-md, 16px); padding: 14px; margin: 10px 0; background: var(--card); }
a, button, .card { transition: transform .06s ease, background .1s ease; }
a:active, button:active, .card:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.stop-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.stop-name { margin: 0; font-family: var(--disp); font-size: var(--fs-stop, 19px); font-weight: 540;
  line-height: 1.2; letter-spacing: -.005em; font-optical-sizing: auto;
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.stop-sect-h { margin: 12px 0 4px; font-size: var(--fs-label, 13px); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.vbadge { flex: 0 0 auto; max-width: 100%; }
.why { font-style: italic; }
.muted { color: var(--ink-soft); }
.vbadge { font-size: 12px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.vbadge.ok { background: var(--paper-2); color: var(--sage); }
.vbadge.unk { background: var(--mat); color: var(--ink-soft); }
.vbadge.bad { background: var(--paper-2); color: var(--coral-deep); }
.atlas { width: 100%; height: auto; }
/* The landing map earns the same framed mat every other surface already gives it
   (builder .map-frame, keep .keep-map-frame): a --map-paper ground inside a hairline,
   so the first map a visitor sees reads as a composed keepsake and not a bare gold
   thread on raw paper. The route is drawn (drawable) here too, so it carries the ink
   casing below at the same weight the builder uses. */
.atlas-wrap {
  background: var(--map-paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm, 12px);
  padding: 8px;
  margin: 12px 0 24px;
  overflow: hidden;
}
.atlas-wrap .atlas { border-radius: var(--r-sm, 12px); }
.atlas .route-casing { stroke: var(--ink); stroke-width: 7; }
/* Home was the only page that never styled .pinnum, so its numerals fell back to the
   SVG default of pure black, which the token file forbids outright. Invisible while the
   pins were a rainbow; obvious once they became one gold material. Ink on gold reads
   5.62:1, the same pairing builder.css uses for its plain pins. The numerals hide at
   mobile width for the same reason they do there: the whole viewBox scales down far
   enough that the digits become 3-4px noise, and they are aria-hidden decoration. */
.atlas .pinnum {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
}
@media (max-width: 480px) {
  .atlas .pinnum { display: none; }
}

/* Round 7 P3.9: the quiet entry into the builder — the shell's card grammar,
   link-colored text, no shouting. */
.build-entry { display: block; text-align: center; font-weight: 600;
  color: var(--coral-deep); text-decoration: none; }
/* Round 9 F3: the prominent top-of-page entry, visible without scrolling. */
.build-entry-hero {
  display: block; margin: 16px 0 24px; padding: 16px 20px;
  border: 1px solid var(--hairline); border-radius: var(--r-lg, 20px);
  background: var(--paper-2);
  color: var(--coral-deep); text-decoration: none;
  font-weight: 700; font-size: 19px; text-align: center;
}
.build-entry-hero span { display: block; margin-top: 4px; font-weight: 400;
  font-size: 13px; color: var(--ink-soft); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { position: static; display: inline-block; padding: 8px; }

/* The resume hub (Phase 2b): a saved-trip card in the same paper/coral grammar as the
   three acts, so this shell finally reads as the same product, not a fourth one. */
.hub-card { background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--r-lg, 20px); padding: 20px; margin: 16px 0; }
.hub-eyebrow { margin: 0 0 4px; font-size: var(--fs-label, 13px); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.hub-title { font-family: var(--disp); margin: 0; }
.hub-dedication { font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); margin: 4px 0 0; }
.hub-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.hub-cta { display: block; text-align: center; padding: 14px 20px; border-radius: var(--r-md, 16px);
  background: var(--coral-deep); color: #fff; text-decoration: none; font-weight: 700; min-height: 44px; }
.hub-cta:active { background: var(--coral-press); }
.hub-cta-secondary { display: block; text-align: center; padding: 12px 20px; border-radius: var(--r-md, 16px);
  border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-weight: 600; min-height: 44px; }
.hub-start-new { display: inline-block; margin-top: 12px; color: var(--ink-soft); text-decoration: underline;
  font-size: var(--fs-sub, 14px); min-height: 44px; }