/* Day-chapters: the trip told back day by day, in the couple's own traces. (Shared by
   the post-trip Keep and the live co-pilot "story so far".)
   Task 3.3 (polish pass): every font-size below is now the NEAREST --fs-* token, not
   a one-off px value (this file had accumulated 9/9.5/10/10.5/11/13/14/16/18/20px,
   none of them systematic). Where a size did not land exactly on a token, the nearest
   one wins and the pixel value shifts by a px or two in service of one shared type
   scale; uppercase labels are floored at --fs-micro.
   Task 7.2 (polish pass, Batch 7): the hairline island. This file's card/panel borders
   had drifted to 0.5px (near-invisible on many displays; every other stylesheet in the
   app uses 1px) -- now 1px solid, same color as before. Its raw radii (8/10/12px, plus
   two literal 999px pills) now read the nearest --r-* token: 8 and 10 both floor to
   --r-sm (12px, the smallest defined step -- mirrors this file's own font-size
   precedent above, "uppercase labels floored at --fs-micro"), 999 is exactly --r-pill.
   Its three raw rem margins now read --sp-*: 1rem is exactly --sp-4 (16px) in both
   places it appeared; 1.5rem is exactly --sp-6 (24px); 1.75rem (28px) sits equidistant
   between --sp-6 (24px) and --sp-8 (32px) -- rounds UP to --sp-8, since collapsing it
   to the SAME --sp-6 the block's own top margin uses would erase the (deliberate)
   distinction between "space before the whole chapters block" and the larger "space
   between one chapter and the next". */
.keep-chapters { margin: var(--sp-6) 0 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.chapter { display: flex; flex-direction: column; }
.chapter-marker { font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 4px; }
.chapter-title { font-family: var(--disp); font-weight: 500; font-size: var(--fs-stop); line-height: 1.2; color: var(--ink); margin: 0 0 10px; font-style: italic; }
.chapter-title-plain { font-style: normal; font-weight: 500; font-size: var(--fs-body); color: var(--ink-soft); letter-spacing: .01em; }
.chapter-hero { display: block; width: 100%; max-width: 100%; border-radius: var(--r-sm); border: 1px solid var(--hairline); margin: 0 0 10px; }
/* Task 3.1 (polish pass): an archived Shelf recap's hero/photo carries only a photoId ref
   (never the thumb bytes -- see keep/keep.mjs's leanChapters), so it renders as this
   quiet, no-image-yet placeholder until app.mjs's hydrateArchivedPhotos resolves it from
   the device's own photo store. A calm neutral box (the same is-bare language the
   day-card thumb already uses), never a broken-image icon. */
.chapter-hero-pending { min-height: 120px; background: var(--map-paper); }
.chapter-quote { font-family: var(--disp); font-style: italic; font-size: var(--fs-fact); line-height: 1.35; color: var(--ink); border-left: 2px solid var(--gold-line); padding-left: 12px; margin: 0 0 12px; }
.chapter-photos { display: flex; gap: 8px; margin: 0 0 12px; }
.chapter-photo { flex: 1 1 0; min-width: 0; max-width: 50%; border-radius: var(--r-sm); border: 1px solid var(--hairline); }
.chapter-photo-pending { min-height: 88px; background: var(--map-paper); }
.chapter-trail-label { font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 0 8px; }
.chapter-trail { list-style: none; margin: 0; padding: 0; }
.trail-stop { position: relative; padding: 0 0 8px 16px; }
.trail-stop::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.trail-name { display: block; font-family: var(--sans); font-weight: 500; font-size: var(--fs-label); color: var(--ink); line-height: 1.25; }
.trail-stop.user-named .trail-name { font-family: var(--disp); font-style: italic; font-weight: 500; }
.trail-note { display: block; font-family: var(--sans); font-size: var(--fs-micro); color: var(--ink-faint); line-height: 1.3; margin-top: 1px; }

/* Live "story so far" (co-pilot). Quiet by default; the rail + detail live behind a tap. No coral. */
.story-panel { margin: var(--sp-4) 0 0; }
.story-panel.is-collapsed { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.story-teaser { font-family: var(--disp); font-style: italic; font-size: var(--fs-fact); color: var(--ink-soft); margin: 0; line-height: 1.3; }
.story-read { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500; color: var(--gold-deep); background: none; border: none; padding: 4px 2px; cursor: pointer; white-space: nowrap; }
.story-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
/* Task 7.2 (polish pass, Batch 7): the Glovebox open-header unification. All four
   panels (Story, Bingo, Talk, Trivia) claim to read as one family when open, but Talk
   (copilot.css .talk-title) and Trivia (copilot.css .trivia-label) actually used an
   uppercase-gold micro LABEL while Story and Bingo used a serif ink TITLE -- two
   idioms for the same slot. Story and Bingo now match the more distinctive of the two
   (the uppercase-gold label), so all four open headers read identically. */
.story-title { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep); margin: 0; }
.story-close, .story-back { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500; color: var(--gold-deep); background: none; border: none; padding: 4px 2px; cursor: pointer; }
.day-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 2px 8px; margin: 0 -2px; }
.day-card { scroll-snap-align: start; flex: 0 0 78%; max-width: 260px; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 9px; cursor: pointer; }
.day-card.is-bare { border-style: dashed; }
.day-card-thumb, .day-card-thumb img { width: 46px; height: 46px; border-radius: var(--r-sm); display: block; object-fit: cover; }
.day-card-thumb.is-bare { background: var(--map-paper); border: 1px solid var(--hairline); }
.day-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.day-card-kicker { font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); }
.day-card-title { font-family: var(--disp); font-style: italic; font-size: var(--fs-sub); color: var(--ink); line-height: 1.15; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-card-title.is-plain { font-style: normal; font-weight: 500; font-size: var(--fs-label); color: var(--ink-soft); }
.day-card-meta { font-family: var(--sans); font-size: var(--fs-micro); color: var(--ink-faint); }
.day-card-chev { color: var(--gold); font-size: var(--fs-fact); flex: none; }
.share-trip { display: inline-flex; margin: 12px 0 0; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500; color: var(--gold-deep); background: none; border: 1px solid var(--gold-line); border-radius: var(--r-pill); padding: 5px 13px; cursor: pointer; }
.story-empty { font-family: var(--disp); font-style: italic; color: var(--ink-faint); margin: 4px 0; }
.story-detail-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.story-flip { font-family: var(--sans); font-size: var(--fs-fact); color: var(--gold-deep); background: none; border: none; padding: 2px 8px; cursor: pointer; }
.story-flip.is-off { color: var(--hairline); cursor: default; }
.story-panel.is-detail.can-animate .chapter-trail { animation: trail-draw .5s ease both; }
@keyframes trail-draw { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .story-panel.is-detail .chapter-trail { animation: none; } }
.day-title-form { display: flex; gap: 8px; margin: 12px 0 0; }
.day-title-input { flex: 1; min-width: 0; font-family: var(--disp); font-style: italic; font-size: var(--fs-label); color: var(--ink); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 7px 10px; }
.day-title-save { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500; color: var(--gold-deep); background: none; border: 1px solid var(--gold-line); border-radius: var(--r-sm); padding: 0 12px; cursor: pointer; }
.story-panel.is-gate { background: var(--mat); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 12px 14px; }
.story-gate-line { font-family: var(--disp); font-style: italic; font-size: var(--fs-fact); color: var(--ink-soft); margin: 0 0 10px; line-height: 1.3; }
.story-gate-acts { display: flex; gap: 10px; }
.story-anyway { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500; color: var(--gold-deep); background: none; border: 1px solid var(--gold-line); border-radius: var(--r-pill); padding: 5px 13px; cursor: pointer; }

/* Road bingo — the outward game. Quiet by default; gold cross-offs, never coral.
   Task 3.1 (polish pass): the card body (hint + grid) is wrapped in .bingo-card, a
   raised var(--card) surface with --shadow-card, mirroring .trivia-card exactly so
   the two Glovebox siblings read as one family. Cells sit at the --fs-micro floor
   (was 9px, unreadably small); the grid drops from 4 to 3 columns so that floor has
   room to wrap the longest cells ("power lines over a hill") without crowding on a
   375px phone. The .proven border rule is dropped: an extra gold ring on pool-tier
   cells with no legend was unexplained texture, not signal. */
.bingo-panel { margin: var(--sp-4) 0 0; }
.bingo-panel.is-collapsed { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bingo-teaser { font-family: var(--disp); font-style: italic; font-size: var(--fs-fact); color: var(--ink-soft); margin: 0; }
.bingo-read, .bingo-close { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500; color: var(--gold-deep); background: none; border: none; padding: 4px 2px; cursor: pointer; }
.bingo-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; }
/* Task 7.2: matches .story-title's own uplift above -- see its comment for why. */
.bingo-title { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep); margin: 0; }
.bingo-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.bingo-hint { font-size: var(--fs-micro); color: var(--ink-faint); margin: 0; }
.bingo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.bingo-cell { min-height: 68px; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-2); font-family: var(--sans); font-size: var(--fs-micro); line-height: 1.25; color: var(--ink-soft); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-sm); cursor: pointer; }
.bingo-cell.crossed { background: var(--mat); border-color: var(--gold-line); color: var(--ink); font-weight: 500; position: relative; }
.bingo-cell.crossed::after { content: "✓"; position: absolute; top: 4px; right: 6px; font-size: var(--fs-micro); font-weight: 700; line-height: 1; color: var(--gold-deep); }
.bingo-cell.wild { border-style: dashed; }
.bingo-wild-input { width: 100%; height: 100%; border: none; background: none; text-align: center; font-family: var(--disp); font-style: italic; font-size: var(--fs-micro); color: var(--ink-soft); }
.chapter-spotted { font-family: var(--sans); font-size: var(--fs-micro); color: var(--ink-soft); line-height: 1.35; margin: 8px 0 0; }
.chapter-spotted-label { font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); }

/* The Light (Task 6): the day's own earned, past-tense line ("You reached it just
   before sunset."). Gold-tinged like the chapter's other gold accents (marker, trail
   dot), italic like the quote it sits near in spirit -- but micro and quiet, never
   shouting. No coral. */
.chapter-light { font-family: var(--disp); font-style: italic; font-size: var(--fs-micro); color: var(--gold-deep); line-height: 1.35; margin: 8px 0 0; }