/* Yellowstone 2026 — field guide
 * Built for a phone held at arm's length in bright sun, and for a 3:30 AM
 * wake-up in a dark cabin. High contrast, big targets, no decoration that
 * costs legibility.
 */

:root {
  --paper:    #faf7f1;
  --surface:  #ffffff;
  --surface2: #f2ece1;
  --line:     #ddd3c4;
  --line2:    #ebe3d6;
  --ink:      #17211d;
  --ink2:     #45514b;
  /* --ink3 is the label layer: it must clear 4.5:1 on paper in direct sun.
     #6f7b74 measured 4.12:1 and was the first thing to vanish outdoors. */
  --ink3:     #5c6761;
  --accent:   #b8391a;
  --accent-s: #fbeeea;
  --btn-ink:  #ffffff;
  --forest:   #1f4034;
  --sulfur:   #a9761a;
  /* sulfur is a good rule/dot colour and a poor text colour: 3.5:1 on its
     own tint. Anything that reads as words uses --sulfur-ink instead. */
  --sulfur-ink: #8a5d0c;
  --sulfur-s: #fbf1dc;
  --sky:      #1d5470;
  --sky-s:    #e9f1f6;
  --shadow:   0 1px 2px rgba(23,33,29,.06), 0 6px 20px rgba(23,33,29,.07);
  --shadow-l: 0 2px 6px rgba(23,33,29,.09), 0 20px 50px rgba(23,33,29,.13);
  --r:  14px;
  --r-s: 9px;
  --tap: 46px;
  --topbar: 56px;
  /* space the floating tab bar needs reserved beneath the content:
     the 68px pill, its 12px gap from the bottom edge, and air below the last row */
  --tabbar: 84px;
  --wrap: 720px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html[data-theme="night"] {
  --paper:    #0d1411;
  --surface:  #151f1a;
  --surface2: #1d2a24;
  --line:     #2a3a32;
  --line2:    #223028;
  --ink:      #e9e5dc;
  --ink2:     #b3bdb6;
  --ink3:     #929e97;
  --accent:   #e2714a;
  --accent-s: #2a1c17;
  /* white on the night accent is 3.1:1 — the ink goes dark instead */
  --btn-ink:  #0d1411;
  --forest:   #7fb99f;
  --sulfur:   #d9a648;
  --sulfur-ink: #d9a648;
  --sulfur-s: #2a2213;
  --sky:      #7db4d4;
  --sky-s:    #16262f;
  --shadow:   0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --shadow-l: 0 2px 6px rgba(0,0,0,.5), 0 20px 50px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
/* class selectors outrank the UA [hidden] rule — restate it with weight */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 4px; }

/* ── Chrome ──────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line2);
}
.topbar-in {
  max-width: var(--wrap); margin: 0 auto; height: var(--topbar);
  padding: 0 14px; display: flex; align-items: center; gap: 10px;
}
.brand {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  background: none; border: 0; padding: 4px 0; text-align: left; cursor: pointer;
}
.brand-mark {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  background:
    radial-gradient(circle at 50% 62%, var(--sulfur) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 62%, var(--accent) 0 34%, transparent 35%),
    linear-gradient(160deg, var(--forest), #0f2a20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.brand-txt { display: flex; flex-direction: column; min-width: 0; }
.brand-txt strong { font-size: 15px; letter-spacing: -.02em; line-height: 1.15; }
.brand-txt small { font-size: 12.5px; font-weight: 600; color: var(--ink2); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; gap: 4px; }
.icobtn {
  /* 44 rather than 40: the 56px bar has room for it, and there are three of
     these now — one of them the emergency button. */
  width: 44px; height: 44px; border: 0; background: none; border-radius: 12px;
  display: grid; place-items: center; cursor: pointer; color: var(--ink2);
  text-decoration: none;
}
.icobtn:active { background: var(--surface2); }
.icobtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#sosBtn { color: var(--accent); }
/* the moon fills when night is actually on — the icon carries its own state */
html[data-theme="night"] #themeBtn { color: var(--sulfur); }
html[data-theme="night"] #themeBtn svg { fill: currentColor; fill-opacity: .22; }

.netbar {
  position: sticky; top: 0; z-index: 50; padding: 7px 14px;
  font-size: 13px; font-weight: 600; text-align: center;
  background: var(--sulfur); color: #1a1206;
}
.netbar.ok { background: var(--forest); color: #eaf6f0; }
html[data-theme="night"] .netbar.ok { color: #0d1411; }

/* A centred floating pill at every width, not a full-bleed strip welded to the
   bottom edge — it keeps the content reading to the corners.
   Solid, never glass: `position: fixed` + `backdrop-filter` is an iOS Safari bug
   where the bar scrolls away with the page instead of staying pinned. An opaque
   surface also holds up better in direct sun than a blur does. */
.tabbar {
  position: fixed; left: 50%; right: auto; bottom: 0; z-index: 45;
  width: min(440px, calc(100% - 24px));
  margin-bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-l);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: var(--tap); padding: 5px 2px; border-radius: 16px;
  text-decoration: none;
  color: var(--ink2); font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}
.tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Detached from the edge the bar loses the infinite bottom target, so the
   current tab states itself twice: colour and a filled chip. */
.tabbar a[aria-current="page"] {
  color: var(--accent); font-weight: 750; background: var(--accent-s);
}
.tabbar a[aria-current="page"] svg { stroke-width: 2.2; }
.tabbar a:active { background: var(--surface2); }

/* A floating bar leaves live content visible either side of it, and an opaque
   pill slices whatever line happens to be behind its top edge. The scrim lets
   the text fade out instead of being cut mid-word. Sits under the pill and over
   the page; never over the lightbox or the emergency sheet. */
body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
  height: calc(var(--tabbar) + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--paper) 62%);
  pointer-events: none;
}

.view { max-width: var(--wrap); margin: 0 auto; padding: 16px 14px 32px; outline: none; }

/* ── Primitives ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line2);
  border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden;
  margin-bottom: 14px;
}
.card-p { padding: 15px 16px; }
.stack > * + * { margin-top: 14px; }

.eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink2); margin-bottom: 7px;
}
.section-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 28px 4px 11px;
}
.section-h h2 { font-size: 14px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); }
.section-h .hint { font-size: 12.5px; color: var(--ink3); text-align: right; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap); padding: 0 16px; border-radius: 11px;
  border: 1px solid transparent; background: var(--accent); color: var(--btn-ink);
  font-size: 15.5px; font-weight: 700; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-ghost { background: var(--surface2); color: var(--ink); border-color: var(--line); }
.btn-quiet { background: transparent; color: var(--accent); border-color: var(--line); }
/* cold hands, gloves: the small button still has to be a real target */
.btn-sm { min-height: 40px; padding: 0 13px; font-size: 14px; border-radius: 9px; }
.wide { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row > .btn { flex: 1 1 auto; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  background: var(--surface2); color: var(--ink2); white-space: nowrap;
}
.pill-hot  { background: var(--accent-s); color: var(--accent); }
.pill-warn { background: var(--sulfur-s); color: var(--sulfur-ink); }
.pill-cool { background: var(--sky-s); color: var(--sky); }

/* Callouts read as a tinted block with a coloured label, not as a stripe:
   a heavy left border is decoration that steals 3px of text width. */
.note {
  background: var(--sulfur-s); border: 1px solid color-mix(in srgb, var(--sulfur) 32%, transparent);
  padding: 12px 14px; border-radius: var(--r-s); font-size: 15px;
}
.note.hot  { background: var(--accent-s); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.note.cool { background: var(--sky-s); border-color: color-mix(in srgb, var(--sky) 30%, transparent); }
.note strong { display: block; font-size: 12px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 4px; }
.note.hot strong  { color: var(--accent); }
.note.cool strong { color: var(--sky); }
.note:not(.hot):not(.cool) strong { color: var(--sulfur-ink); }

/* ── Now ─────────────────────────────────────────────────────────────── */
/* The Now screen answers one question. The date is orientation, not the
   answer — it stays a clear title but stops being the loudest thing here. */
.now-head { padding: 2px 4px 12px; }
.now-date { font-family: var(--serif); font-size: clamp(25px, 6.6vw, 30px);
  line-height: 1.08; letter-spacing: -.015em; font-weight: 600; text-wrap: balance; }
.now-day { font-size: 12.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.now-sub { color: var(--ink2); font-size: 15px; margin-top: 5px; }
.now-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 2px 4px; }

.nowcard { border: 0; box-shadow: var(--shadow-l); }
.nowcard .bar { height: 5px; background: var(--accent); }
.nowcard.next .bar { background: var(--sky); }
.nowcard .inner { padding: 16px; }
.nowcard .label { display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px; }
.nowcard.next .label { color: var(--sky); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.dot.live { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); }
                   50% { opacity: .35; transform: scale(.72); } }
.nowcard h2 { font-size: 24px; line-height: 1.18; letter-spacing: -.02em;
  margin-bottom: 7px; text-wrap: balance; }
.nowcard.next h2 { font-size: 21px; }
.nowcard .when { font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--ink2); margin-bottom: 9px; }
.nowcard p { font-size: 15px; color: var(--ink2); }
.nowcard .acts { margin-top: 14px; }

.countdown { font-family: var(--mono); font-weight: 800; color: var(--sky); }

/* ── Timeline ────────────────────────────────────────────────────────── */
/* Gutter geometry: time column 0–56px, rail at 64px, node centred on it.
   The meridiem is the one character that must never be misread — Day 2 holds
   both a 3:30 AM wake-up and a 3:15 PM block — so it is set at reading size,
   not as a 9px whisper. */
/* The rail sat 2px from the end of the time column, so '5:00' read as if the
   node were part of the number. Six pixels of air is the difference. */
.tl { position: relative; padding-left: 86px; }
.tl::before { content: ""; position: absolute; left: 70px; top: 10px; bottom: 10px;
  width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 16px; }
.tl-time {
  position: absolute; left: -86px; top: 0; width: 56px; text-align: right;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--ink); line-height: 1.2; letter-spacing: -.045em;
}
.tl-time .ap {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0;
  color: var(--ink2); text-transform: uppercase; white-space: nowrap;
}
.tl-time .end {
  font-size: 10.5px; font-weight: 600; color: var(--ink3); margin-top: 3px;
}
.tl-node { left: -22px; }   /* item box starts at 86px, so the node sits at 64 */
.tl-node { position: absolute; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface);
  border: 2.5px solid var(--line); z-index: 1; }
.tl-item.is-fixed  .tl-node { border-color: var(--accent); background: var(--accent); }
.tl-item.is-opt    .tl-node { border-style: dashed; }
.tl-item.is-now    .tl-node { border-color: var(--accent); background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-s); }
/* Done blocks recede by sitting flat in the page, never by fading the words:
   opacity .48 measured 3.1:1 and was unreadable in sun. */
.tl-item.is-past .tl-body { background: transparent; box-shadow: none; border-color: var(--line); }
.tl-item.is-past .tl-time { color: var(--ink3); }
.tl-item.is-past .tl-time .ap { color: var(--ink3); }
.tl-item.is-past .tl-node { background: var(--line); border-color: var(--line); }
.tl-body { background: var(--surface); border: 1px solid var(--line2);
  border-radius: var(--r-s); padding: 12px 13px; box-shadow: var(--shadow); }
.tl-item.is-now .tl-body { border-color: var(--accent); border-width: 2px; padding: 11px 12px; }
/* The drive time used to share a row with the title and squeezed it into
   two ragged lines on a phone. It gets its own line and the title gets the
   full column. */
.tl-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.tl-drive { font-size: 13px; font-weight: 700; color: var(--ink2); margin-top: 4px; }
.tl-drive b { color: var(--ink3); font-weight: 800; }
.tl-plan { font-size: 14.5px; color: var(--ink2); margin-top: 5px; }
.tl-tips { margin: 9px 0 0; padding: 0; list-style: none; }
.tl-tips li { position: relative; padding-left: 17px; font-size: 14px;
  color: var(--ink2); margin-top: 6px; }
.tl-tips li::before { content: ""; position: absolute; left: 3px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sulfur); }
.tl-acts { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }

/* ── Day cards ───────────────────────────────────────────────────────── */
.daycard { display: block; text-decoration: none; color: inherit; position: relative; }
.daycard .ph { position: relative; aspect-ratio: 16/7; background: var(--surface2); }
.daycard .ph img { width: 100%; height: 100%; object-fit: cover; }
.daycard .ph::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,13,.05) 0%, rgba(10,16,13,.72) 100%); }
.daycard .ph .cap { position: absolute; left: 14px; right: 14px; bottom: 11px;
  z-index: 1; color: #fff; }
.daycard .ph .n { font-size: 12px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.daycard .ph .t { font-family: var(--serif); font-size: 22px; font-weight: 600;
  line-height: 1.18; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.daycard .meta { padding: 11px 14px 13px; display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center; }
/* driving and walking are sentences in the source, not chips — they get lines */
.daycard .walk { padding: 0 14px 13px; margin-top: -4px; font-size: 13.5px;
  color: var(--ink2); line-height: 1.4; }
.daycard .walk > div + div { margin-top: 3px; }
.daycard .walk b { font-weight: 800; color: var(--ink3); }
.daycard.is-today { outline: 2.5px solid var(--accent); outline-offset: -1px; }

.hero { position: relative; border-radius: var(--r); overflow: hidden;
  margin-bottom: 16px; box-shadow: var(--shadow); }
.hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hero .grad { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,13,.08) 30%, rgba(10,16,13,.82) 100%); }
.hero .cap { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.hero .cap .n { font-size: 12px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 3px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hero .cap h1 { font-family: var(--serif); font-size: clamp(22px, 6vw, 28px);
  font-weight: 600; line-height: 1.16; text-shadow: 0 2px 16px rgba(0,0,0,.55);
  text-wrap: balance; }
.credit { font-size: 11.5px; color: var(--ink3); padding: 6px 2px 0; }
.credit a { color: var(--ink3); }

/* Two columns at every width. auto-fit produced three or four tracks on a wide
   screen, and an odd number of facts then left a bare tinted cell at the end
   of the grid — visible on seven of the eight days. */
.factgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line2); border: 1px solid var(--line2); border-radius: var(--r);
  overflow: hidden; }
.fact { background: var(--surface); padding: 11px 13px; min-width: 0; }
.fact-wide { grid-column: 1 / -1; }
.fact dt { font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink3); }
.fact dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; }

.headline { font-family: var(--serif); font-size: 19.5px; line-height: 1.36;
  font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }

/* ── Stops / places ──────────────────────────────────────────────────── */
.stop { display: flex; gap: 12px; padding: 12px 13px; align-items: flex-start; }
.stop + .stop { border-top: 1px solid var(--line2); }
.stop .th { width: 62px; height: 62px; flex: none; border-radius: 10px;
  object-fit: cover; background: var(--surface2); }
/* Not every place has a freely licensed photograph. A labelled tile keeps the
   list on its grid and reads as "no picture", not "broken image". */
.stop .th-empty { display: grid; place-items: center; background: var(--surface2);
  border: 1px dashed var(--line); }
.stop .th-empty span { font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: var(--ink3); }
.stop .b { flex: 1; min-width: 0; }

/* A row that navigates has to look like it navigates. These were plain <a>
   elements styled exactly like the static rows beside them. */
.stop-main { display: flex; gap: 12px; flex: 1; min-width: 0; align-items: flex-start;
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.stop-link, .stop-main { position: relative; }
.stop-link { text-decoration: none; color: inherit; }
.stop-link::after, .stop-main::after {
  content: ""; flex: none; align-self: center; width: 8px; height: 8px; margin-left: 2px;
  border-right: 2px solid var(--ink3); border-top: 2px solid var(--ink3);
  transform: rotate(45deg);
}
/* one affordance per row: where an explicit Navigate button already sits at
   the end, the chevron is noise */
.stop:has(.go) .stop-main::after { display: none; }
.stop-link:active, .stop-main:active { opacity: .7; }
.stop .b h3 { font-size: 15.5px; line-height: 1.28; }
.stop .b p { font-size: 14px; color: var(--ink2); margin: 4px 0 0; }
.stop .go { flex: none; align-self: center; min-width: var(--tap); min-height: var(--tap); }
.stop .affects { font-size: 13.5px; color: var(--ink2); margin: 6px 0 0; }
.stop .affects b { color: var(--sulfur-ink); font-weight: 800; }

.acc { border: 1px solid var(--line2); border-radius: var(--r-s); overflow: hidden;
  background: var(--surface); }
.acc + .acc { margin-top: 8px; }
.acc > summary {
  list-style: none; cursor: pointer; padding: 13px 14px; font-weight: 650;
  font-size: 15px; display: flex; align-items: center; gap: 9px;
  -webkit-tap-highlight-color: transparent;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--ink3); border-bottom: 2px solid var(--ink3);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .18s; }
.acc[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.acc .acc-b { padding: 0 14px 14px; font-size: 14.5px; color: var(--ink2); }
.acc .acc-b > *:first-child { margin-top: 0; }

/* ── Lists ───────────────────────────────────────────────────────────── */
.bullets { margin: 0; padding: 0; list-style: none; }
.bullets li { position: relative; padding-left: 19px; margin-bottom: 9px; font-size: 15px;
  text-wrap: pretty; }
.bullets li::before { content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bullets li:last-child { margin-bottom: 0; }

/* Navigation rows used to be <label> elements: they looked tappable and were
   invisible to the keyboard and to VoiceOver. They are links and buttons now. */
.rowlink {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: var(--tap); padding: 12px 14px; font: inherit; font-size: 15px;
  text-align: left; text-decoration: none; color: inherit;
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rowlink > span { flex: 1; min-width: 0; }
.rowlink::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 3px;
  border-right: 2px solid var(--ink3); border-top: 2px solid var(--ink3);
  transform: rotate(45deg);
}
.rowlink:active { background: var(--surface2); }
.rowlink strong { font-weight: 800; }
.rowlink .tiny { display: block; margin-top: 2px; }

.checks { margin: 0; padding: 0; list-style: none; }
.checks li { border-bottom: 1px solid var(--line2); }
.checks li:last-child { border-bottom: 0; }
.checks label { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px;
  cursor: pointer; min-height: var(--tap); -webkit-tap-highlight-color: transparent; }
.checks input { appearance: none; -webkit-appearance: none; width: 23px; height: 23px;
  flex: none; margin-top: 0; border: 2px solid var(--ink3); border-radius: 6px;
  background: var(--surface); cursor: pointer; position: relative; }
.checks input:checked { background: var(--forest); border-color: var(--forest); }
.checks input:checked::after { content: ""; position: absolute; left: 6.5px; top: 2px;
  width: 5px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg); }
html[data-theme="night"] .checks input:checked::after { border-color: #0d1411; }
.checks span { font-size: 15px; line-height: 1.4; }
.checks input:checked + span { text-decoration: line-through; color: var(--ink3); }

.kv { margin: 0; }
.kv > div { display: grid; grid-template-columns: 116px 1fr; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line2); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink3); padding-top: 2px; }
.kv dd { margin: 0; font-size: 15px; }

.telrow { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  min-height: var(--tap); border-bottom: 1px solid var(--line2);
  text-decoration: none; color: inherit; }
.telrow:last-child { border-bottom: 0; }
.telrow .l { flex: 1; font-size: 15px; }
.telrow .v { font-family: var(--mono); font-size: 15px; font-weight: 700;
  color: var(--accent); white-space: nowrap; }

.field { padding: 11px 14px; border-bottom: 1px solid var(--line2); }
.field:last-child { border-bottom: 0; }
.field label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 5px; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 11px;
  border: 1px solid var(--ink3); border-radius: 9px;
  background: var(--surface); color: var(--ink); min-height: var(--tap);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink3); }
.field textarea { min-height: 74px; resize: vertical; }

/* ── Maps ────────────────────────────────────────────────────────────── */
.mapfig { margin: 0; }
.mapfig img { width: 100%; border-radius: var(--r-s); border: 1px solid var(--line2);
  background: var(--surface2); cursor: zoom-in; }
.mapfig figcaption { font-size: 12.5px; color: var(--ink3); padding: 6px 2px 0; }

.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(8,12,10,.94);
  display: grid; place-items: center; padding: 10px; }
.lightbox img { max-width: 100%; max-height: 92vh; object-fit: contain; border-radius: 6px; }
.lightbox .x { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 22px; line-height: 1; }


/* ── Zoomable maps ───────────────────────────────────────────────────── */
.zoombtn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--r-s); -webkit-tap-highlight-color: transparent;
}
.zoombtn img { width: 100%; border-radius: var(--r-s); border: 1px solid var(--line2);
  background: var(--surface2); }
.zoombtn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* "Running late?" — mark what can be cut, in the stylesheet not inline.
   Blocks that must stay recede by sitting flat in the page, the same way done
   blocks do. Fading them to .55 opacity was the exact anti-pattern removed
   from .is-past: the words you still have to read must stay readable. */
.show-cuts .cuttable .tl-body {
  outline: 2px dashed var(--sulfur); outline-offset: 3px;
  background: var(--sulfur-s);
}
.show-cuts .cuttable .tl-body::after {
  content: "Can be cut"; display: inline-block; margin-top: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--sulfur-ink); background: var(--surface);
  padding: 3px 9px; border-radius: 999px;
}
.show-cuts .tl-item:not(.cuttable) .tl-body {
  background: transparent; box-shadow: none; border-color: var(--line);
}
.cuts-count { display: none; }
.show-cuts .cuts-count {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  font-size: 13.5px; font-weight: 700; color: var(--accent);
}
/* on the days with no written rule the count stands alone, so it carries no
   divider and the note itself only exists while late mode is on */
.cuts-bare { display: none; }
.show-cuts .cuts-bare { display: block; }
.show-cuts .cuts-bare .cuts-count { margin: 0; padding: 0; border: 0; color: var(--sulfur-ink); }
#rule, .cuts-bare { margin-bottom: 14px; }


/* ── Audio tours ─────────────────────────────────────────────────────── */
.tourcard { padding: 0; }
.tourseg { padding: 13px 14px; }
.tourseg + .tourseg { border-top: 1px solid var(--line2); }
.tourseg-h { display: flex; align-items: flex-start; gap: 10px; }
.tourseg-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tourseg-t strong { font-size: 15.5px; line-height: 1.25; }
.tourseg-hint { font-size: 12.5px; color: var(--ink3); }
.heardpill {
  flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: var(--sulfur-s); color: var(--sulfur-ink);
}
.tourseg-acts { display: flex; gap: 8px; margin-top: 10px; }
.tourseg-acts .btn { flex: 0 0 auto; }
.tourplay { min-width: 108px; }
.tourplay.is-on { background: var(--forest); border-color: var(--forest); }
.tourtext {
  margin-top: 11px; padding: 12px 13px; border-radius: var(--r-s);
  background: var(--surface2); font-size: 15px; line-height: 1.6;
  max-height: 42vh; overflow-y: auto;
}
.tourtext .ts { transition: background-color .18s, color .18s; border-radius: 3px; }
.tourtext .ts.on { background: var(--accent); color: var(--btn-ink, #fff); }

.tourprefs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-top: -4px;
  border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface);
}
.tourprefs label { font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink3); }
.tourprefs input[type=range] { flex: 1 1 120px; min-width: 110px; accent-color: var(--accent); height: 30px; }
.tourprefs output { font-family: var(--mono); font-size: 13px; font-weight: 700; min-width: 46px; }
.tourprefs select {
  flex: 1 1 100%; font: inherit; font-size: 14px; min-height: 40px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); color: var(--ink);
}

.tourseg-acts .btn-quiet svg { margin: 0; }
.tourcard + .section-h { margin-top: 22px; }

.tl-listen { margin-top: 9px; }
.tl-listen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.listenplay svg { width: 15px; height: 15px; }
.listenlink {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 13.5px; font-weight: 650; color: var(--ink2); text-decoration: none;
}
.listenlink:active { color: var(--accent); }

@media print { .tourcard, .tourprefs, .tl-listen, #tour { display: none !important; } }

/* ── Sheet ───────────────────────────────────────────────────────────── */
.sheet-wrap { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(8,12,10,.55);
  animation: fade .2s ease; }
.sheet {
  position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto;
  background: var(--paper); border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-l);
  animation: rise .26s cubic-bezier(.22,1,.36,1);
}
.sheet-grab { width: 38px; height: 4px; border-radius: 99px; background: var(--line);
  margin: 4px auto 12px; }
.sheet h2 { font-size: 19px; margin-bottom: 12px; }
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { transform: translateY(16px); opacity: .4 } }

/* ── Geyser calculator ───────────────────────────────────────────────── */
.geyser-out { display: grid; gap: 8px; margin-top: 12px; }
.geyser-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface2); border-radius: var(--r-s); }
.geyser-row .t { font-family: var(--mono); font-size: 18px; font-weight: 700; }
.geyser-row .w { font-size: 13.5px; color: var(--ink3); margin-left: auto; }
.geyser-row.soon { background: var(--accent-s); }
.geyser-row.soon .t { color: var(--accent); }

/* ── Reference contents ──────────────────────────────────────────────── */
/* Thirteen sections over 8,000px. Without this you search a reference book by
   scrolling it, which is what a reference book exists to stop you doing. */
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink2);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.jump a:active { background: var(--surface2); }

/* ── Now playing ─────────────────────────────────────────────────────
   Docked directly above the tab pill and aligned to it, so the two read as one
   stack of controls rather than two floating things. Solid for the same reason
   the tab bar is: position:fixed + backdrop-filter detaches on iOS Safari. */
.np {
  position: fixed; left: 50%; bottom: 0; z-index: 46;
  width: min(440px, calc(100% - 24px));
  margin-bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-l);
  overflow: hidden;
}
.np-prog {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--line2);
}
.np-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s linear; }
.np-main {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;
}
.np-art {
  width: 42px; height: 42px; flex: none; border-radius: 9px;
  object-fit: cover; background: var(--surface2);
}
.np-txt { display: flex; flex-direction: column; min-width: 0; }
.np-txt strong {
  font-size: 14.5px; font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-sub {
  font-size: 12px; font-weight: 600; color: var(--ink3); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-btn {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: var(--accent); color: var(--btn-ink);
  display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.np-btn svg { width: 20px; height: 20px; }
.np-quiet { background: none; color: var(--ink2); width: 38px; }
.np-quiet:active { background: var(--surface2); }
/* the page has to reserve room for the bar as well as the tabs — one token */
html.np-on { --tabbar: 152px; }

/* ── Listen ──────────────────────────────────────────────────────────── */
.tourlist { display: flex; align-items: center; gap: 11px; padding: 10px 12px; }
.tourlist + .tourlist { border-top: 1px solid var(--line2); }
.tourlist-main {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;
}
.tourlist-art {
  width: 54px; height: 54px; flex: none; border-radius: 10px;
  object-fit: cover; background: var(--surface2); display: block;
}
.tourlist-b { display: flex; flex-direction: column; min-width: 0; }
.tourlist-b strong { font-size: 15.5px; line-height: 1.28; }
.tourlist-s { font-size: 12.5px; font-weight: 600; color: var(--ink3); margin-top: 2px; }
.tourlist-play { flex: none; }
.tourall svg { width: 17px; height: 17px; }

/* ── Recorded narration ──────────────────────────────────────────────── */
.narrcard { border-color: var(--line); }
.narrprog {
  position: relative; height: 30px; margin-top: 12px; border-radius: 999px;
  background: var(--surface2); overflow: hidden;
}
.narrprog i {
  position: absolute; inset: 0 auto 0 0; width: 0; background: var(--forest);
  transition: width .25s linear;
}
.narrprog span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.tourlist-dl { flex: none; }
.tourlist-dl svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.narrbadge { color: var(--forest); font-weight: 800; }

/* ── Search ──────────────────────────────────────────────────────────── */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.searchfield { border: 0; padding: 0; margin-bottom: 16px; }
.searchfield input { background: var(--surface); font-size: 17px; }
#searchBtn.on { color: var(--accent); }

.hit {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px;
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;
}
.hit + .hit { border-top: 1px solid var(--line2); }
.hit:active { background: var(--surface2); }
/* the kind chip is how you tell a place from a story from a block at a glance,
   so it carries colour as well as a word */
.hit-k {
  flex: none; width: 72px; padding: 3px 0; text-align: center; white-space: nowrap;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; background: var(--surface2); color: var(--ink3);
}
.hit-place { background: var(--sky-s); color: var(--sky); }
.hit-block { background: var(--accent-s); color: var(--accent); }
.hit-day   { background: var(--accent-s); color: var(--accent); }
.hit-ref   { background: var(--sulfur-s); color: var(--sulfur-ink); }
.hit-tour  { background: var(--surface2); color: var(--forest); }
.hit-b { flex: 1; min-width: 0; }
.hit-b strong { display: block; font-size: 15.5px; line-height: 1.3; }
.hit-s { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--ink3); }
.hit-x { display: block; margin-top: 5px; font-size: 14px; color: var(--ink2); line-height: 1.45; }
mark {
  background: var(--sulfur-s); color: inherit;
  border-radius: 3px; padding: 0 1px; font-weight: 700;
}

/* Landing on a result: hold the eye on the thing that was asked for, without
   dimming or moving anything else on the page. */
.flash { animation: flash 2.2s ease-out; border-radius: var(--r-s); }
@keyframes flash {
  0%, 55% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px var(--accent-s); }
  100%    { box-shadow: 0 0 0 3px transparent, 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px var(--accent-s); }
}

/* ── Place filter ────────────────────────────────────────────────────── */
.placefilter { border: 0; padding: 0; margin-bottom: 10px; }
.placefilter input { background: var(--surface); }

/* ── Misc ────────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 40px 20px; color: var(--ink3); }
.tiny { font-size: 13px; color: var(--ink3); line-height: 1.5; }
.rule { height: 1px; background: var(--line2); margin: 20px 0; border: 0; }

.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface2);
  border-radius: 11px; margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.seg button { flex: 1 0 auto; min-height: 38px; padding: 0 13px; border: 0; border-radius: 8px;
  background: none; font-size: 13.5px; font-weight: 650; color: var(--ink2);
  cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow); }

/* ── Print preview, seen on screen ───────────────────────────────────── */
.printdoc { font-family: var(--serif); }
.printdoc .pp {
  background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r);
  padding: 20px 18px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.printdoc h1 { font-size: 23px; padding-bottom: 8px; border-bottom: 2px solid var(--ink);
  margin-bottom: 8px; }
.printdoc h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--ink2); }
.printdoc h3 { font-size: 15px; margin: 14px 0 6px; }
.printdoc .pp-sub { font-style: italic; color: var(--ink2); margin-bottom: 12px; }
.printdoc .pp-head { font-weight: 700; padding: 10px 12px; background: var(--surface2);
  border: 1px solid var(--line); border-radius: var(--r-s); margin: 10px 0; }
.printdoc .pp-rule { font-size: 14px; padding: 10px 12px; border: 1px solid var(--line);
  margin: 10px 0; border-radius: var(--r-s); }
.printdoc .pp-insight { font-style: italic; color: var(--ink2); font-size: 14px;
  margin-top: 14px; padding-top: 10px; border-top: 1px dotted var(--line); }
.printdoc .pp-doctrine, .printdoc .pp-src { font-size: 12.5px; color: var(--ink3); font-style: italic; }
.printdoc .pp-tl { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0;
  font-family: var(--sans); }
.printdoc .pp-tl th { text-align: left; font-size: 10px; text-transform: uppercase;
  letter-spacing: .09em; border-bottom: 1.5px solid var(--ink); padding: 5px 6px; color: var(--ink3); }
.printdoc .pp-tl td { vertical-align: top; padding: 8px 6px; border-bottom: 1px solid var(--line2); }
.printdoc .pp-tl td:first-child { width: 88px; font-weight: 700; font-family: var(--mono);
  font-size: 12px; }
.printdoc .pp-tl td:nth-child(2) { width: 84px; font-size: 12px; color: var(--ink3); }
.printdoc .pp-tl ul { margin: 6px 0 0; padding-left: 16px; font-size: 13px; color: var(--ink2); }
.printdoc .pp-checks { list-style: none; margin: 8px 0; padding: 0; }
.printdoc .pp-checks li { position: relative; padding-left: 24px; margin-bottom: 7px; font-size: 14px; }
.printdoc .pp-checks li::before { content: ""; position: absolute; left: 0; top: 3px;
  width: 15px; height: 15px; border: 1.5px solid var(--ink3); border-radius: 3px; }
.printdoc .pp-2col { columns: 2; column-gap: 20px; }
.printdoc .pp-blanks dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 800; margin-top: 16px; color: var(--ink3); font-family: var(--sans); }
.printdoc .pp-blanks dd { margin: 0; min-height: 28px; border-bottom: 1.5px solid var(--line); }
.printdoc .mapfig img { border-radius: var(--r-s); }
.printdoc .kv { font-family: var(--sans); }
.printdoc .bullets { font-family: var(--sans); }

@media (min-width: 640px) {
  .view { padding: 22px 20px 40px; }
  .daygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .daygrid .card { margin-bottom: 0; }
  .now-date { font-size: 32px; }
  .nowcard h2 { font-size: 26px; }
  /* on a wide screen a full-bleed pair of buttons looks broken, not generous */
  .btn-row > .btn { flex: 0 1 auto; }
  .btn-row > .btn.wide { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.print-only { display: none; }