/* tidepool — field guide styles
 *
 * AUDIENCE: a four-year-old who cannot read, a six-year-old who can, and one
 * adult who needs exact numbers. The design resolves that by giving the first
 * two the pictures and the third a disclosure, rather than splitting the
 * difference and serving nobody.
 *
 * RESTRAINT IS THE RULE. ONE accent (anemone green). Everything else is a
 * neutral drawn from wet granite. Bark appears only on the forest hunt,
 * sea-star purple only on long shots, coral only on safety -- nothing else on
 * the page is allowed to be red. One elevation. One radius scale. If a surface
 * needs a third colour to work, the surface is wrong.
 *
 * PALETTE (BRIEF.md 2.5: from the subject, never cream-and-terracotta):
 *   granite   wet rock. The entire neutral ramp.
 *   anemone   #0F7A5A, giant green anemone. The accent. Go / found / good.
 *   bark      #6B3A1F, redwood bark. Forest hunt only.
 *   seastar   #5C3A93, purple sea star. Long shots only.
 *   coral     #B3311B. Safety only.
 *   sea       #2A6B8A, the water in every illustration.
 *
 * TYPE: system stack. Deliberate -- this had to service-worker cache onto two
 * phones the night before the trip, and a webfont is tens of KB of precache
 * buying nothing SF Pro and Roboto do not already do at small sizes in bright
 * sun. Any display face added later must be SIL OFL and self-hosted.
 */

:root {
  /* neutral ramp — wet granite */
  --g-0:  #ffffff;
  --g-05: #f7f9f9;
  --g-10: #eef2f2;
  --g-20: #dfe6e6;
  --g-30: #c4d0d1;
  --g-50: #7e9295;
  --g-60: #5c7276;
  --g-70: #3d5357;
  --g-80: #24383c;
  --g-90: #142428;
  --g-95: #0c1719;

  --accent:      #0f7a5a;
  --accent-ink:  #0a5b43;
  --accent-soft: #e3f2ec;
  --bark:        #6b3a1f;
  --bark-soft:   #f5ebe4;
  --seastar:     #5c3a93;
  --seastar-soft:#eee9f7;
  --coral:       #b3311b;
  --coral-soft:  #fdeae6;
  --sea:         #2a6b8a;
  --sea-deep:    #17475f;
  --sand:        #d9c9a8;
  --sun:         #e6a93c;

  --bg:      var(--g-10);
  --surface: var(--g-0);
  --raised:  var(--g-05);
  --ink:     var(--g-95);
  --ink-2:   var(--g-70);
  --ink-3:   var(--g-60);
  --line:    var(--g-20);
  --line-2:  var(--g-30);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow: 0 1px 2px rgba(12, 23, 25, .05), 0 6px 20px -8px rgba(12, 23, 25, .14);

  --tap: 48px;
  --gutter: 20px;
  --gap: 14px;

  /* Vertical rhythm. One scale, used everywhere, so spacing is a decision
     taken once rather than a value guessed per component. Spacing was flagged
     twice in review -- "just one under another", and the app bar crowding the
     first block -- which is what a missing scale looks like from outside. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 44px;

  /* The two bars declare their own heights, so anything that has to clear
     them refers to the token instead of guessing a number that then drifts. */
  --bar-h: 52px;
  --tabbar-h: 62px;
  /* The gap between the bar and the first thing under it. Deliberately a real
     gap, not zero and not a hairline. */
  --content-top: var(--sp-6);
  --section-gap: var(--sp-6);
  --card-gap: var(--sp-4);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* type scale — big jumps, not a gentle ramp */
  --t-display: clamp(2.1rem, 8.5vw, 3rem);
  --t-title:   clamp(1.5rem, 5.5vw, 1.9rem);
  --t-lead:    1.15rem;
  --t-h:       1.0625rem;
  --t-body:    1rem;
  --t-cap:     .8125rem;
  --t-micro:   .6875rem;
  /* The one sentence a six-year-old reads out loud to a four-year-old who is
     standing on a rock. It is the reason the detail panel exists in the field,
     so it is set well above body size and below the title. */
  --t-read:    clamp(1.2rem, 4.6vw, 1.45rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-contrast="high"]) {
    --bg:      var(--g-95);
    --surface: #16282c;
    --raised:  #1d3236;
    --ink:     #eaf2f2;
    --ink-2:   #b8c8ca;
    --ink-3:   #8ea3a6;
    --line:    #2b4247;
    --line-2:  #38535a;
    --accent:      #35c396;
    --accent-ink:  #56d6ad;
    --accent-soft: #103328;
    --bark:        #c98a5f;
    --bark-soft:   #33200f;
    --seastar:     #a98ce0;
    --seastar-soft:#241a3a;
    --coral:       #ff7f61;
    --coral-soft:  #3a1611;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -10px rgba(0,0,0,.6);
  }
}

/* Bright outdoor sun. Everything heavier, every tint gone. */
:root[data-contrast="high"] {
  --bg: #ffffff; --surface: #ffffff; --raised: #ffffff;
  --ink: #000000; --ink-2: #000000; --ink-3: #1a1a1a;
  --line: #000000; --line-2: #000000;
  --accent: #00543c; --accent-ink: #00543c; --accent-soft: #ffffff;
  --bark: #4d2712; --bark-soft: #ffffff;
  --seastar: #3f2270; --seastar-soft: #ffffff;
  --coral: #931c06; --coral-soft: #ffffff;
  --shadow: none;
}
:root[data-contrast="high"] body { font-weight: 500; }
:root[data-contrast="high"] .card, :root[data-contrast="high"] .find,
:root[data-contrast="high"] .nowcard, :root[data-contrast="high"] .jump__btn,
:root[data-contrast="high"] .disc, :root[data-contrast="high"] .rulecard,
:root[data-contrast="high"] .shape__step { border-width: 2px; }

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Content scrolls UNDER the sticky bar, so anything scrolled to must stop
     clear of it -- by the bar's height plus a real margin, never flush. */
  scroll-padding-top: calc(var(--bar-h) + var(--sp-3) + env(safe-area-inset-top));
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  padding-bottom: calc(var(--tabbar-h) + var(--sp-4) + env(safe-area-inset-bottom));
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
p { margin: 0 0 .65em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-ink); }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--seastar); outline-offset: 3px; border-radius: 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-3); font-size: var(--t-cap); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plain { margin: 0; padding-left: 1.15em; }
.plain li { margin-bottom: .4em; }
.plain.small { font-size: var(--t-cap); }
.sub-h { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); font-weight: 800; margin: 1em 0 .4em; }
.section-h { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); font-weight: 800; margin: 0 0 .7rem; }

.wrap { max-width: 33rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- app chrome ---------- */

.appbar {
  position: sticky; top: 0; z-index: 30;
  min-height: var(--bar-h);
  display: flex; align-items: center; gap: .5rem;
  padding: var(--sp-2) var(--gutter);
  padding-top: calc(var(--sp-2) + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}
.appbar.is-stuck { border-bottom-color: var(--line); }
.appbar__title { flex: 1; font-size: var(--t-cap); font-weight: 700; color: var(--ink-2);
  letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar__btn {
  min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .06em; cursor: pointer;
  color: var(--ink-2); padding: 0 .7rem;
}
.appbar__btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.banner {
  margin: 0; padding: .6rem var(--gutter); font-size: var(--t-cap);
  background: var(--accent-soft); color: var(--ink); border-bottom: 1px solid var(--line);
}
.banner--warn { background: var(--coral-soft); }

/* ---------- screens ---------- */

.tabpanel { padding: var(--content-top) 0 var(--sp-7); }
.tabpanel[hidden] { display: none; }
.screen > * + * { margin-top: var(--section-gap); }

.screen__title { font-size: var(--t-title); }
.screen__sub { margin: .3rem 0 0; color: var(--ink-3); font-size: var(--t-cap); }
.screen__head--hunt { display: flex; align-items: flex-start; gap: var(--gap); }
.screen__head--hunt > div { flex: 1; min-width: 0; }

/* ---------- hero ---------- */

.hero__eyebrow { margin: 0 0 .3rem; font-size: var(--t-micro); font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.hero__title { font-size: var(--t-display); letter-spacing: -.035em; }
.hero__sub { margin: .3rem 0 0; color: var(--ink-3); font-size: var(--t-lead); letter-spacing: -.01em; }

/* ---------- the "right now" card: the one answer that matters ---------- */

.nowcard {
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.nowcard__scene { display: block; line-height: 0; }
.nowcard__scene svg { display: block; width: 100%; height: auto; max-height: 210px; }
.nowcard__text { padding: 1rem 1.15rem 1.15rem; }
.nowcard__state { margin: 0 0 .2rem; font-size: var(--t-micro); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.nowcard__headline { font-size: var(--t-title); letter-spacing: -.025em; }
.nowcard__tiers { margin: .45rem 0 0; color: var(--ink-3); font-size: var(--t-cap); }
.nowcard--in-window { border-color: var(--accent); border-width: 2px; }
.nowcard--in-window .nowcard__state { color: var(--accent); }

/* ---------- the shape of the day ---------- */

.shape__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.shape__step {
  display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: var(--gap);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: .55rem; box-shadow: var(--shadow); position: relative;
}
.shape__num {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  width: 22px; height: 22px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: var(--t-micro); font-weight: 800; display: grid; place-items: center;
}
.shape__art { line-height: 0; border-radius: var(--r); overflow: hidden; display: block; }
.shape__art svg { display: block; width: 84px; height: 84px; }
.shape__body { display: flex; flex-direction: column; gap: .1rem; padding-right: .5rem; min-width: 0; }
.shape__when { font-size: var(--t-micro); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); }
.shape__title { font-size: var(--t-lead); font-weight: 700; letter-spacing: -.02em; }
.shape__kid { font-size: var(--t-cap); color: var(--ink-2); line-height: 1.35; }

/* ---------- two big buttons into the hunts ---------- */

.jump__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.jump__btn {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 0; overflow: hidden; cursor: pointer; text-align: left; box-shadow: var(--shadow);
  min-height: 168px;
}
.jump__art { line-height: 0; display: block; }
.jump__art svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.jump__label { padding: .6rem .75rem 0; font-size: var(--t-lead); font-weight: 700; letter-spacing: -.02em; }
.jump__count { padding: 0 .75rem .7rem; font-size: var(--t-cap); color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.jump__btn--bark { border-color: color-mix(in srgb, var(--bark) 32%, var(--line)); }
.jump__btn--bark .jump__label { color: var(--bark); }
.jump__btn--anemone { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.jump__btn--anemone .jump__label { color: var(--accent-ink); }
.jump__btn:active { transform: scale(.985); }

/* One small note at the foot of Info. It was a whole landing-page section with
 * its own disclosure; the only part worth keeping is the week. */
.footnote { font-size: var(--t-micro); color: var(--ink-3); margin: 0; }
.footnote strong { color: var(--ink-2); }

/* ---------- tide screen ---------- */

.bigscene {
  border-radius: var(--r-xl); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.bigscene svg { display: block; width: 100%; height: auto; max-height: 260px; }
.bigscene__cap { padding: 1rem 1.15rem 1.2rem; }
.bigscene__state { margin: 0 0 .2rem; font-size: var(--t-micro); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.bigscene__headline { margin: 0; font-size: var(--t-title); font-weight: 700; letter-spacing: -.025em; }

.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tiers__item { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem;
  background: var(--surface); font-size: var(--t-cap); }
.tiers__dot { width: 12px; height: 12px; border-radius: 3px; flex: none;
  background: var(--sea); border: 1px solid var(--sea-deep); }
.tiers__item.is-dry .tiers__dot { background: var(--accent); border-color: var(--accent-ink); }
.tiers__name { font-weight: 700; flex: 1; }
.tiers__state { color: var(--ink-3); }
.tiers__item.is-dry .tiers__state { color: var(--accent-ink); font-weight: 600; }

.strip { margin: 0; }
.strip svg { display: block; width: 100%; height: auto; }
.strip__legend { margin-top: .35rem; font-size: var(--t-micro); color: var(--ink-3);
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.strip__key { width: 14px; height: 9px; border-radius: 3px; display: inline-block; }
.strip__key--window { background: var(--accent); }
.strip__key--day { background: var(--g-30); }
.ds-night { fill: var(--g-80); opacity: .16; }
.ds-day { fill: var(--g-30); }
.ds-window { fill: var(--accent); }
.ds-tick { font: 700 9px var(--font); fill: var(--ink-3); }
.ds-now { stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; }

.figs { display: grid; gap: .5rem; }
.fig { display: flex; flex-direction: column; gap: .05rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .65rem; background: var(--surface); }
.fig__k { font-size: var(--t-micro); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }
.fig__v { font-size: var(--t-lead); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.fig__n { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.35; }
.warn { background: var(--coral-soft); border: 1px solid var(--coral); border-radius: var(--r-sm);
  padding: .6rem .7rem; font-size: var(--t-cap); color: var(--ink); }

.tp { width: 100%; border-collapse: collapse; font-size: var(--t-cap); }
.tp caption { text-align: left; font-size: var(--t-micro); color: var(--ink-3); padding-bottom: .35rem; }
.tp th, .tp td { text-align: left; padding: .35rem .3rem; border-bottom: 1px solid var(--line); }
.tp thead th { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.tp tr.is-usable { background: var(--accent-soft); }

/* ---------- the real chart (inside the disclosure) ---------- */

.chart { margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; padding: .4rem .25rem .1rem; }
.chart svg { display: block; width: 100%; height: auto; }
.chart figcaption { font-size: var(--t-micro); color: var(--ink-3); padding: .3rem .5rem .35rem; }
.c-night { fill: var(--g-80); opacity: .13; }
.c-shut { fill: var(--coral); opacity: .07; }
.c-window { fill: var(--accent); opacity: .13; }
.c-water { fill: var(--sea); opacity: .2; }
.c-curve { stroke: var(--sea-deep); stroke-width: 3.2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-thresh { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .7; }
.c-thresh-1 { stroke: var(--accent); opacity: .9; }
.c-thresh-0 { stroke: var(--seastar); opacity: .9; }
.c-thresh-label { font: 600 10px var(--font); fill: var(--ink-3); }
.c-axis { font: 600 11px var(--font); fill: var(--ink-3); }
.c-sun { stroke: var(--sun); stroke-width: 1.6; stroke-dasharray: 2 3; }
.c-sun-label { font: 700 9.5px var(--font); fill: var(--sun); letter-spacing: .04em; }
.c-point { fill: var(--surface); stroke: var(--sea-deep); stroke-width: 2.5; }
.c-point.is-usable { fill: var(--accent); stroke: var(--accent); }
.c-point-label { font: 700 11.5px var(--font); fill: var(--ink); }
.c-point-sub { font: 600 10px var(--mono); fill: var(--ink-3); }
.c-now { stroke: var(--coral); stroke-width: 2.5; }
.c-now-label { font: 700 10px var(--font); fill: var(--coral); }

/* ---------- illustrated scenes ---------- */

.scene { display: block; width: 100%; height: auto; }
.sc-sky-a { stop-color: #bcd9e6; } .sc-sky-b { stop-color: #e6eff1; }
.sc-sea-a { stop-color: #4d92b0; } .sc-sea-b { stop-color: var(--sea-deep); }
.sc-headland { fill: var(--g-60); opacity: .5; }
.sc-shelf-face, .sc-tier path { fill: var(--g-50); stroke: var(--g-60); stroke-width: 1; }
.sc-tier.is-dry path { fill: #9aa8a0; }
.sc-lowmark { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .75; }
.sc-water { opacity: .88; }
.sc-waterline { fill: none; stroke: #eaf6fa; stroke-width: 2.5; stroke-linecap: round; opacity: .85; }
.sc-arrow-bg { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.sc-arrow-mark { stroke: var(--accent); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.sf-bg { fill: #2f4436; } .sf-shaft { fill: #cfe0b8; opacity: .16; }
.sf-trunk { fill: #7a4526; } .sf-trunk-far { fill: #5d3a24; }
.sf-bark { stroke: #5d3a24; stroke-width: 1.6; fill: none; opacity: .7; }
.sf-canopy { fill: #2f6b45; } .sf-floor { fill: #46341f; } .sf-sorrel { fill: #4f8f4a; }
.sb-sky { fill: #cfe4ec; } .sb-sun { fill: #f0c463; }
.sb-sea { fill: #4d92b0; } .sb-foam { fill: #cfe7ee; }
.sb-sand { fill: var(--sand); } .sb-arch { fill: #a89272; } .sb-pebble { fill: #b9a684; }
.sp-sky { fill: #d9e6e2; } .sp-sun { fill: #f0c463; } .sp-sea { fill: #4d92b0; }
.sp-rock { fill: #8b9490; } .sp-rock-hi { fill: #9ba59f; }
.sp-pool { fill: #63a8c4; } .sp-anemone { fill: #1f9c6f; }
.sp-tent { stroke: #1f9c6f; stroke-width: 2; stroke-linecap: round; fill: none; }
.sp-star { fill: #7d4fb8; } .sp-star-c { fill: #7d4fb8; }

@media (prefers-color-scheme: dark) {
  :root:not([data-contrast="high"]) .sc-sky-a { stop-color: #22383f; }
  :root:not([data-contrast="high"]) .sc-sky-b { stop-color: #35505a; }
  :root:not([data-contrast="high"]) .sc-waterline { stroke: #9fd7ea; }
  :root:not([data-contrast="high"]) .sb-sky, :root:not([data-contrast="high"]) .sp-sky { fill: #2c464e; }
}
:root[data-contrast="high"] .sc-tier.is-dry path { fill: #d8d8d8; stroke: #000; stroke-width: 2; }
:root[data-contrast="high"] .sc-tier.is-wet path { fill: #6d6d6d; stroke: #000; stroke-width: 2; }
:root[data-contrast="high"] .sc-water { opacity: 1; }

/* ---------- the hunts ---------- */

.ring { width: 64px; height: 64px; flex: none; }
.ring__track { fill: none; stroke: var(--line); stroke-width: 7; }
.ring__fill { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset .35s cubic-bezier(.22,.8,.3,1); }
.ring__text { font: 800 17px var(--font); fill: var(--ink); font-variant-numeric: tabular-nums; }
[data-screen="forest"] .ring__fill { stroke: var(--bark); }

.grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
@media (min-width: 30rem) { .grid { grid-template-columns: repeat(3, 1fr); } }

.find { display: flex; flex-direction: column; }
.find__btn {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: 100%; padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); min-height: 154px;
  transition: transform .16s cubic-bezier(.22,.8,.3,1), border-color .16s ease, background-color .16s ease;
}
.find__btn:active { transform: scale(.97); }
.find__art { display: block; line-height: 0; background: var(--raised); }
.find__art svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.find__name { padding: .5rem .6rem .55rem; font-size: var(--t-cap); font-weight: 700;
  letter-spacing: -.01em; line-height: 1.25; }
/* Every status label lives in one strip across the top of the card: one
   position, one shape, colour as the only difference. Nothing overlaps the
   photograph and nothing ever covers the name. */
.find__strip {
  display: flex; align-items: center; gap: .25rem;
  min-height: 36px; padding: .25rem .3rem .25rem 42px;
  background: var(--raised); border-bottom: 1px solid var(--line);
}
.find__labels { display: flex; align-items: center; gap: .25rem; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.find__label {
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .2em .5em; border-radius: 999px; white-space: nowrap; color: #fff;
  overflow: hidden; text-overflow: ellipsis;
}
.find__label--rare  { background: var(--seastar); }
.find__label--under { background: var(--ink-3); }
.find__label--warn  { background: var(--coral); }
.find__check {
  margin-left: auto; flex: none;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--surface); border: 2px solid var(--line-2);
  position: relative;
  transition: background-color .16s ease, border-color .16s ease, transform .2s cubic-bezier(.22,1.4,.4,1);
}
.find__check::after {
  content: ""; position: absolute; left: 8px; top: 4px; width: 7px; height: 12px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(43deg) scale(0);
  transition: transform .2s cubic-bezier(.22,1.4,.4,1);
}
/* NO DIMMING. A long shot is communicated by its label, never by making the
   card look broken or by hurting contrast in bright outdoor sun. */

.find.is-found .find__btn { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); opacity: 1; }
.find.is-found .find__art { filter: none; }
.find.is-found .find__check { background: var(--accent); border-color: var(--accent); transform: scale(1.1); }
.find.is-found .find__check::after { transform: rotate(43deg) scale(1); }
.find.is-found .find__name { color: var(--accent-ink); }
[data-screen="forest"] .find.is-found .find__btn { border-color: var(--bark); background: var(--bark-soft); }
[data-screen="forest"] .find.is-found .find__check { background: var(--bark); border-color: var(--bark); }
[data-screen="forest"] .find.is-found .find__name { color: var(--bark); }

.find__clue { color: var(--ink); }
.find__framing { color: var(--accent-ink); font-weight: 600; }
[data-screen="forest"] .find__framing { color: var(--bark); }
.find__warning { color: var(--coral); font-weight: 700; }
.find__why { color: var(--ink-3); font-size: var(--t-micro); line-height: 1.45; }
.find__whyk { font-weight: 800; color: var(--ink-2); }
.find__notel { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); font-weight: 800; }
.find__note { width: 100%; min-height: 42px; font: inherit; font-size: var(--t-cap);
  margin-top: .2rem; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .3rem .5rem; background: var(--surface); color: var(--ink); }
.find__stamp { margin: .3rem 0 0; font-size: var(--t-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.hunt-actions { display: flex; gap: .5rem; }
.btn { min-height: var(--tap); border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); font-size: var(--t-cap); font-weight: 700;
  padding: 0 .9rem; cursor: pointer; }
.btn:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---------- info screen ---------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.tl { display: grid; grid-template-columns: 4.8rem 1fr; gap: .6rem; padding: .6rem 0;
  border-bottom: 1px solid var(--line); }
.tl:last-child { border-bottom: 0; }
.tl__time { font-weight: 800; font-size: var(--t-cap); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.tl--tide { background: var(--accent-soft); border-radius: var(--r-sm); padding: .6rem .5rem; }
.tl--tide .tl__time { color: var(--accent-ink); }
.tl--alternative { opacity: .75; }
.tl__title { font-size: var(--t-h); margin-bottom: .2rem; }
.tl__anchor { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em;
  background: var(--accent); color: #fff; padding: .12em .45em; border-radius: 999px; font-weight: 800; }
.tl__flex { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em;
  border: 1px solid var(--line-2); color: var(--ink-3); padding: .1em .4em; border-radius: 999px; font-weight: 800; }
.tl__notes { font-size: var(--t-cap); color: var(--ink-2); margin: 0; }
.tl__note { font-size: var(--t-cap); background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: .4rem .55rem; margin: .4rem 0 0; color: var(--ink); }
.tl__places { list-style: none; margin: .35rem 0 0; padding: 0; font-size: var(--t-micro); color: var(--ink-3); }

.rank { width: 100%; border-collapse: collapse; font-size: var(--t-cap); }
.rank caption { text-align: left; font-size: var(--t-micro); color: var(--ink-3); padding-bottom: .4rem; }
.rank th, .rank td { text-align: left; padding: .4rem .3rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.rank thead th { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.rank tbody th { font-weight: 700; white-space: nowrap; }
.rank__at { font-size: var(--t-micro); color: var(--ink-3); }
.rank__wknd { display: block; font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: .06em; color: var(--seastar); font-weight: 800; }
.rank__row--excellent { background: var(--accent-soft); }
.rank__go { min-height: 32px; padding: 0 .5rem; font-size: var(--t-micro); margin-left: .3rem; }
.chip { display: inline-block; font-size: var(--t-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: .15em .5em; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.chip--excellent, .chip--good { color: var(--accent-ink); background: var(--accent-soft); }
.chip--fair { color: var(--ink-2); background: var(--raised); }
.chip--poor, .chip--unusable { color: var(--coral); background: var(--coral-soft); }
.rejected { background: var(--coral-soft); border: 1px solid var(--coral); border-radius: var(--r); padding: .8rem .9rem; }
.rejected h3 { color: var(--coral); font-size: var(--t-h); margin-bottom: .3rem; }
.rejected p { font-size: var(--t-cap); }

.packing__list { list-style: none; margin: 0; padding: 0; }
.packing__list li { border-bottom: 1px solid var(--line); }
.packing__list li:last-child { border-bottom: 0; }
.packing__list label { display: flex; align-items: center; gap: .7rem; min-height: var(--tap); cursor: pointer; }
.packing__list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pack__tick { width: 26px; height: 26px; min-width: 26px; border: 2px solid var(--line-2);
  border-radius: 8px; position: relative; background: var(--surface); }
.packing__list input:checked + .pack__tick { background: var(--accent); border-color: var(--accent); }
.packing__list input:checked + .pack__tick::after { content: ""; position: absolute; left: 8px; top: 3px;
  width: 6px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(43deg); }
.packing__list input:focus-visible + .pack__tick { outline: 3px solid var(--seastar); outline-offset: 2px; }
.packing__list .is-critical .pack__item { font-weight: 700; }
.pack__why { margin: 0 0 .4rem 2.2rem; font-size: var(--t-micro); color: var(--ink-3); }

/* A card, like everything else the site puts inside a disclosure. It used to
 * be a row in a long ruled column, which is what "a wall of content" looks
 * like when there are nine of them. */
.place { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: .75rem .8rem; }
.place + .place, .provenance .place + .place { margin-top: .55rem; }
.place__name { font-size: var(--t-h); margin-bottom: .1rem; }
.place__sub { font-size: var(--t-micro); color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 800; margin: 0 0 .3rem; }
.place__meta { font-size: var(--t-cap); color: var(--ink-2); margin: 0 0 .3rem; }
.place dl { margin: .4rem 0 0; font-size: var(--t-cap); }
.place dt { font-weight: 800; font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); margin-top: .45rem; }
.place dd { margin: .1rem 0 0; }
.place ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.conflict { background: var(--coral-soft); border: 1px solid var(--coral); border-radius: var(--r-sm);
  padding: .5rem .6rem; margin: .5rem 0 0; font-size: var(--t-cap); }
.conflict strong { color: var(--coral); }
.critical-note { background: var(--coral-soft); border: 1px solid var(--coral); border-radius: var(--r-sm);
  padding: .5rem .6rem; margin: .5rem 0 0; font-size: var(--t-cap); }
.critical-note strong { color: var(--coral); }
.unverified { display: inline-block; font-size: var(--t-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--coral); border: 1px solid var(--coral); border-radius: 999px;
  padding: .1em .45em; vertical-align: middle; }
.unverified-note { font-size: var(--t-cap); color: var(--ink-3); font-style: italic; }
.provenance { font-size: var(--t-cap); color: var(--ink-2); display: grid; gap: .55rem; }
.prov { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: .7rem .8rem; }
.prov > * + * { margin-top: .5rem; }
.provenance h3 { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); margin: 0 0 .35em; }
.provenance code { font-family: var(--mono); font-size: .92em; }

.datebar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.datebar label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 800; }
.datebar input[type="date"], .datebar select {
  min-height: var(--tap); font: inherit; font-size: var(--t-cap); background: var(--surface);
  color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .3rem .5rem;
}

.foot { padding: 1.5rem var(--gutter) 1rem; text-align: center; font-size: var(--t-micro); color: var(--ink-3); }

/* ---------- bottom tab bar ---------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__btn {
  min-height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: none; border: 0; cursor: pointer; padding: .35rem .1rem;
  color: var(--ink-3); font-size: var(--t-micro); font-weight: 600; letter-spacing: .01em;
}
.tabicon { width: 23px; height: 23px; }
.tabbar__btn[aria-selected="true"] { color: var(--accent); font-weight: 800; }
[data-active-tab="forest"] .tabbar__btn[data-tab="forest"][aria-selected="true"] { color: var(--bark); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .find__btn:active, .jump__btn:active { transform: none; }
  .find.is-found .find__check { transform: none; }
}

/* ---------- print: the paper checklist for the rocks ---------- */

@media print {
  :root { --bg:#fff; --surface:#fff; --raised:#fff; --ink:#000; --ink-2:#222; --ink-3:#444;
          --line:#999; --line-2:#666; --shadow:none; }
  body { padding: 0; font-size: 10pt; background: #fff; color: #000; }
  .appbar, .tabbar, .banner, .hunt-actions, .datebar, .find__note, .find__notel,
  .find__stamp, .jump { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .tabpanel[hidden] { display: block !important; }
  .tabpanel { break-before: page; padding: 0; }
  .tabpanel:first-of-type { break-before: auto; }
  /* Every disclosure prints OPEN. On paper there is nothing to tap, and the
   * safety rules are the reason the paper copy exists at all. */
  .disc { border: 0; background: none; break-inside: avoid; }
  .disc__row { display: none; }
  .disc__body { display: block !important; padding: 0; background: none; }
  .disc__body > * + * { margin-top: .4rem; }
  .disc__body::before { content: attr(data-print-label); display: block;
    font-weight: 800; font-size: 11pt; margin-bottom: .25rem; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: .25rem; }
  .find__btn { min-height: 0; box-shadow: none; border: 1pt solid #666; opacity: 1 !important; }
  .find__art svg { max-height: 2.4cm; }
  .find__art { filter: none !important; }
  .find__check { border: 1.5pt solid #000; background: #fff; width: 24px; height: 24px; }
  .find__why, .find__framing { display: none; }
  .nowcard__scene svg, .bigscene svg { max-height: 5cm; }
  .chart svg { max-height: 6cm; }
  .disc--safety .disc__body, .disc--mpa .disc__body { border: 2pt solid #000; padding: .3cm; }
  .shape__step, .nowcard, .bigscene, .find, .disc { break-inside: avoid; }
  a[href^="http"]::after { content: ""; }
}

/* ---------- the time scrubber: the signature element ----------------------
 * Dragging this drains and refills the ocean above it. The track behind the
 * thumb IS the day -- night, daylight, and the window when the rocks are out --
 * so the control doubles as the day-at-a-glance strip it replaced.
 */

.scrub { margin-top: -.2rem; }
.scrub__track { position: relative; padding: 0; }
.scrub__track svg { display: block; width: 100%; height: 54px; }

.scrub__input {
  position: absolute; left: 0; top: 0; width: 100%; height: 54px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: grab;
}
.scrub__input:active { cursor: grabbing; }
.scrub__input::-webkit-slider-runnable-track { height: 54px; background: transparent; border: 0; }
.scrub__input::-moz-range-track { height: 54px; background: transparent; border: 0; }
/* A big, obvious grab handle. Small hands, moving car, one thumb. */
.scrub__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 34px; border-radius: 999px; margin-top: 10px;
  background: var(--surface); border: 4px solid var(--accent);
  box-shadow: 0 2px 8px rgba(12,23,25,.3);
}
.scrub__input::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--surface); border: 4px solid var(--accent);
  box-shadow: 0 2px 8px rgba(12,23,25,.3);
}
.scrub__input:focus-visible { outline: none; }
.scrub__input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--seastar); outline-offset: 3px; }
.scrub__input:focus-visible::-moz-range-thumb { outline: 3px solid var(--seastar); outline-offset: 3px; }

.ds-suntick { stroke: var(--sun); stroke-width: 2; stroke-linecap: round; }

.scrub__btns { display: flex; gap: .5rem; margin-top: .5rem; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn--accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.scrub__legend { margin: .45rem 0 0; font-size: var(--t-micro); color: var(--ink-3);
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

/* the big readout over the scene */
.waterread {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .8rem 1.15rem 1rem;
}
.waterread__time { margin: 0; font-size: var(--t-display); font-weight: 700;
  letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.waterread__ft { margin: 0; font-size: var(--t-lead); color: var(--ink-3); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.waterread__ft #scrub-ft { color: var(--accent-ink); font-weight: 800; }

.reachable { margin: 0; font-size: var(--t-cap); color: var(--ink-2);
  background: var(--accent-soft); border-radius: var(--r-sm); padding: .6rem .75rem; }
.reachable strong { color: var(--accent-ink); font-size: var(--t-h); }

/* The water eases while a value changes, but never fights a dragging finger:
   the transition is short enough to read as fluid, not as lag. */
.sc-water, .sc-waterline { transition: none; }
.sc-tier path { transition: fill .25s ease; }
@media (prefers-reduced-motion: reduce) { .sc-tier path { transition: none; } }

@media print { .scrub__btns, .scrub__input { display: none !important; } }

/* ---------- the rules, as pictures ---------------------------------------
 * One icon, one short rule, one short reason, and the researched wording in a
 * table underneath. Both blocks live inside a collapsible section on Water and
 * nowhere else; see .disc--safety / .disc--mpa below for the row itself.
 */

.rulegrid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .5rem; }
.rulecard {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--coral) 35%, transparent);
  border-radius: var(--r-sm); padding: .55rem .35rem .5rem;
}
.rulecard__ico { color: var(--coral); line-height: 0; }
.rulecard__ico svg { width: 34px; height: 34px; }
.rulecard--mpa .rulecard__ico { color: var(--seastar); }
.rulecard--mpa { border-color: color-mix(in srgb, var(--seastar) 35%, transparent); }
.rulecard__t { font-size: var(--t-cap); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.rulecard__w { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.25; }

/* The researched wording, held to the same table discipline as the tide
 * numbers: the rule, then the reason it exists. Nothing is dropped -- the
 * short forms above are restatements, and this is the sourced text. */
.rulefull { width: 100%; border-collapse: collapse; font-size: var(--t-micro); }
.rulefull caption { text-align: left; font-size: var(--t-micro); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding-bottom: .35rem; }
.rulefull th { text-align: left; font-weight: 700; color: var(--ink); padding: .4rem .6rem .4rem 0;
  vertical-align: top; width: 45%; border-top: 1px solid var(--line); }
.rulefull td { color: var(--ink-2); padding: .4rem 0; vertical-align: top;
  border-top: 1px solid var(--line); line-height: 1.4; }

@media print { .rulegrid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- packing list ---------------------------------------------------
 * Deliberately the SAME card language as the two hunts: a big picture, a short
 * name, an unmistakable check, one tap anywhere. The previous version put the
 * short label AND the full researched wording AND the reason on every card
 * face, which made a grid of small cramped paragraphs. The full wording is not
 * gone -- it moved into one disclosure at the foot of the list, which is where
 * every other long-form thing on this site lives.
 */

.packing__head { display: flex; align-items: center; gap: var(--gap); margin-bottom: 1rem; }
.packing__note { margin: 0; font-size: var(--t-cap); color: var(--ink-2); flex: 1; }
.packing__group { margin-top: 1.1rem; }
.grid--pack { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 26rem) { .grid--pack { grid-template-columns: repeat(3, 1fr); } }

.pack { display: flex; }
.pack__btn {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .4rem; width: 100%; min-height: 138px;
  padding: 1rem .5rem .8rem; cursor: pointer; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: transform .16s cubic-bezier(.22,.8,.3,1), border-color .16s ease, background-color .16s ease;
}
.pack__btn:active { transform: scale(.97); }
.pack__art { color: var(--ink-2); line-height: 0; }
.pack__art svg { width: 52px; height: 52px; }
.pack__short { font-size: var(--t-cap); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.pack__must, .pack__opt {
  position: absolute; top: 8px; left: 8px;
  font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: .12em .45em; border-radius: 999px;
}
.pack__must { background: var(--accent); color: #fff; }
.pack__opt { border: 1px solid var(--line-2); color: var(--ink-3); }
.pack__check {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border: 2px solid var(--line-2);
  transition: background-color .16s ease, border-color .16s ease, transform .2s cubic-bezier(.22,1.4,.4,1);
}
.pack__check::after {
  content: ""; position: absolute; left: 9px; top: 4.5px; width: 7px; height: 13px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(43deg) scale(0);
  transition: transform .2s cubic-bezier(.22,1.4,.4,1);
}
.pack.is-packed .pack__btn { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.pack.is-packed .pack__check { background: var(--accent); border-color: var(--accent); transform: scale(1.1); }
.pack.is-packed .pack__check::after { transform: rotate(43deg) scale(1); }
.pack.is-packed .pack__art, .pack.is-packed .pack__short { color: var(--accent-ink); }

.packfull { list-style: none; margin: 0; padding: 0; }
.packfull__i { display: flex; flex-direction: column; gap: .05rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line); }
.packfull__i:last-child { border-bottom: 0; }
.packfull__t { font-size: var(--t-cap); }
.packfull__i.is-critical .packfull__t { font-weight: 700; }
.packfull__w { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .pack__btn:active { transform: none; }
  .pack.is-packed .pack__check { transform: none; }
}
@media print {
  .grid--pack { grid-template-columns: repeat(4, 1fr); }
  .pack__btn { min-height: 0; box-shadow: none; border: 1pt solid #666; }
  .pack__art svg { width: 32px; height: 32px; }
}

/* ---------- videos: links out, never embedded ---------- */

.videos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.video__link { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: .6rem .75rem; min-height: var(--tap); }
.video__play { flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--seastar);
  position: relative; }
.video__play::after { content: ""; position: absolute; left: 13px; top: 10px;
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.video__body { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.video__title { font-size: var(--t-cap); font-weight: 700; }
.video__meta { font-size: var(--t-micro); color: var(--ink-3); }
.video__why { font-size: var(--t-micro); color: var(--ink-2); }
.watch { margin: .4rem 0 0; }
.watch__link { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-micro);
  font-weight: 700; color: var(--seastar); text-decoration: none; border: 1px solid var(--seastar);
  border-radius: 999px; padding: .25em .6em; min-height: 34px; }
.watch__net { font-weight: 600; opacity: .75; text-transform: uppercase; letter-spacing: .05em; }
[data-offline="true"] .watch__link, [data-offline="true"] .video__link { opacity: .5; }
[data-offline="true"] .watch__link::after { content: " (no signal)"; }

/* ---------- photos ---------- */

.art--photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--raised); }
.art--glyph { display: block; line-height: 0; }
.art--glyph svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.credits { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; }
.credit { display: flex; flex-direction: column; gap: .05rem; font-size: var(--t-micro);
  border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.credit__t { font-weight: 700; }
.credit__m { color: var(--ink-3); }
.shape__art .art--photo { width: 84px; height: 84px; border-radius: var(--r); }

/* ---------- disclosures, as designed rows ---------------------------------
 * Native <details> underneath so they work with no JS, but presented as a
 * proper component: a labelled row that tells you what is inside, a chevron
 * that rotates, a full-width hit area, and contents held to the same card and
 * table discipline as the rest of the site.
 */

.disc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.disc + .disc { margin-top: .5rem; }
.disc__row {
  display: flex; align-items: center; gap: .75rem; min-height: 58px;
  padding: .55rem .9rem; cursor: pointer; list-style: none;
  background: var(--surface);
}
.disc__row::-webkit-details-marker { display: none; }
.disc__row:hover { background: var(--raised); }
.disc__text { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.disc__label { font-size: var(--t-cap); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.disc__hint { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.3; }
.disc__chev {
  flex: none; width: 10px; height: 10px; margin-bottom: 3px;
  border-right: 2.2px solid var(--ink-3); border-bottom: 2.2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .2s ease;
}
.disc[open] .disc__chev { transform: rotate(-135deg); margin-bottom: -3px; }
.disc[open] .disc__row { border-bottom: 1px solid var(--line); }
.disc__body { padding: .9rem; font-size: var(--t-cap); color: var(--ink-2); background: var(--bg); }
.disc__body > * + * { margin-top: .9rem; }
.disc__body > .figs + .figs { margin-top: .5rem; }
/* .disc__body::before carries the label on PAPER only -- see @media print.
 * On screen it generates nothing, because it declares no `content`. Do not add
 * one here: this rule sits after the print block and would override it. */

/* The two rule sections. A closed disclosure is only as good as its label, so
 * these carry their colour and their mark on the ROW, not only inside: coral
 * for "How we stay safe on the rocks", sea-star purple for "Look, do not take".
 * .is-active is set by the scrubber the moment the rocks are actually out,
 * which is when the label stops being general advice. */
.disc--safety { border-color: var(--coral); }
.disc--safety .disc__row { background: var(--coral-soft); }
.disc--safety .disc__row:hover { background: color-mix(in srgb, var(--coral) 14%, var(--surface)); }
.disc--safety .disc__label { color: var(--coral); font-size: var(--t-lead); letter-spacing: -.015em; }
.disc--safety .disc__mark {
  flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--coral); color: #fff;
  display: grid; place-items: center; font-weight: 900; font-size: .95rem;
}
.disc--safety.is-active { box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 18%, transparent); }
.disc--mpa { border-color: color-mix(in srgb, var(--seastar) 55%, var(--line)); }
.disc--mpa .disc__row { background: var(--seastar-soft); }
.disc--mpa .disc__row:hover { background: color-mix(in srgb, var(--seastar) 12%, var(--surface)); }
.disc--mpa .disc__label { color: var(--seastar); }

/* ---------- itinerary screen ---------- */

.warn--rule { border-radius: var(--r); }
.note-box { background: var(--raised); border-left: 3px solid var(--line-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .6rem .7rem; font-size: var(--t-cap); color: var(--ink-2); margin: .6rem 0 0; }
.foodlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.food { display: flex; flex-direction: column; gap: .1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: .65rem .8rem; }
.food__name { font-size: var(--t-h); font-weight: 700; letter-spacing: -.015em; }
.food__addr { font-size: var(--t-micro); color: var(--ink-3); }
.food__note { font-size: var(--t-cap); color: var(--ink-2); }

/* six tabs still have to fit a 320px phone without wrapping or scrolling */
.tabbar { grid-template-columns: repeat(6, 1fr); }
.tabbar__btn { padding: .35rem 2px; gap: 2px; }
.tabbar__label { font-size: 10px; line-height: 1.1; white-space: nowrap; letter-spacing: -.01em; }
.tabicon { width: 21px; height: 21px; }
@media (min-width: 24rem) { .tabbar__label { font-size: var(--t-micro); } .tabicon { width: 23px; height: 23px; } }

/* ---------- the "i" and its detail panel ---------------------------------
 * The card is the four-year-old's control: one big forgiving tap that marks a
 * find. The "i" is a separate, deliberately smaller target for the reader in
 * the family -- but its hit area is still 44px, and it is a sibling of the
 * find button rather than a child, so a tap can never do both.
 */

.find { position: relative; }
/* Top LEFT, in the gutter the strip reserves for it, so it can never collide
   with a label or sit on top of the photograph. The visible pill is 28px; the
   hit area is the full 44px and spills harmlessly below the strip. */
.find__i {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: 44px; height: 44px; display: grid; place-items: start center;
  padding-top: 5px; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.find__i > span {
  width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line-2); color: var(--ink-2);
  font: 800 14px/1 var(--font); font-style: italic;
}
.find__i:hover > span, .find__i:focus-visible > span { border-color: var(--accent); color: var(--accent-ink); }
.find__i:focus-visible { outline: none; }
.find__i:focus-visible > span { outline: 3px solid var(--seastar); outline-offset: 2px; }

.sheets { display: contents; }

/* ---------- the detail panel -----------------------------------------------
 * Derek: "this area could use some cleaning up, match a more kid friendly
 * presentation here." It read as a data sheet -- six paragraphs at nearly one
 * weight, the picture no bigger than the small print. The rebuild is a
 * hierarchy, top to bottom:
 *
 *   the photograph, big and tappable  ->  the name  ->  THE CLUE, set large,
 *   because that is the sentence read out loud on a rock  ->  today's honest
 *   odds with the reason attached  ->  the quiet facts  ->  sources and
 *   photograph credits, small, at the bottom.
 *
 * THE HONESTY CONTENT WAS RESTYLED, NEVER SOFTENED. The band and its reason
 * now sit in one block precisely so a label cannot travel without its
 * evidence: "Long shot" is still the words, and the tide height it would need
 * is still the sentence under it.
 */

.sheet {
  padding: 0; border: 0; background: transparent; max-width: 34rem; width: calc(100% - 1.5rem);
  max-height: 90dvh; border-radius: var(--r-xl); overflow: hidden; color: var(--ink);
}
.sheet::backdrop { background: rgba(8, 16, 18, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet__inner {
  background: var(--surface); border-radius: var(--r-xl); overflow-y: auto; max-height: 90dvh;
  position: relative; -webkit-overflow-scrolling: touch;
}

/* A 56px close control that never scrolls away. Small hands miss small
   targets, and a child who cannot get out of a panel stops opening them. */
.sheet__close {
  position: sticky; top: 0; float: right; z-index: 6; margin: var(--sp-2) var(--sp-2) 0 0;
  min-height: 56px; padding: 0 var(--sp-4) 0 var(--sp-3);
  display: inline-flex; align-items: center; gap: .3rem;
  border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: var(--t-cap); font-weight: 800; text-decoration: none;
  box-shadow: var(--shadow); -webkit-tap-highlight-color: transparent;
}
.sheet__closex { font-size: 1.45rem; line-height: 1; font-weight: 400; }

/* The photograph, dominant, and a control in its own right: a tap anywhere on
   it brings up the next one. */
.sheet__art { line-height: 0; background: var(--raised); }
.sheet__art .art--photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sheet__art .art--glyph svg { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.sheet__art[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sheet__art[role="button"]:focus-visible { outline: 4px solid var(--seastar); outline-offset: -6px; }

/* The affordance. Shipped hidden and revealed by the client, because with no
   JavaScript there is one photograph and dots would be a dead control. */
.sheet__gal { padding: var(--sp-3) var(--sp-4) 0; }
.sheet__galhint {
  margin: 0; text-align: center; font-size: var(--t-micro); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
}
.sheet__dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.sheet__dot {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sheet__dot > span {
  width: 12px; height: 12px; border-radius: 999px; background: var(--line-2);
  transition: background-color .2s ease, transform .2s cubic-bezier(.22,1.4,.4,1);
}
.sheet__dot.is-on > span { background: var(--accent); transform: scale(1.4); }
[data-screen="forest"] .sheet__dot.is-on > span { background: var(--bark); }
.sheet__galn {
  margin-left: .4rem; font-size: var(--t-cap); font-weight: 800; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.sheet__body { padding: var(--sp-4) var(--sp-5) var(--sp-6); }
.sheet__body > * + * { margin-top: var(--sp-4); }
.sheet__name { font-size: var(--t-title); letter-spacing: -.025em; }
.sheet__clue { font-size: var(--t-read); line-height: 1.35; font-weight: 600; margin: 0; }
.sheet__name + .sheet__clue { margin-top: var(--sp-2); }
.sheet__framing { color: var(--accent-ink); font-weight: 700; font-size: var(--t-h); margin: 0; }
[data-screen="forest"] .sheet__framing { color: var(--bark); }

.sheet__warning {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  color: var(--coral); font-weight: 700; font-size: var(--t-h); line-height: 1.3;
  background: var(--coral-soft); border-radius: var(--r); padding: var(--sp-3) var(--sp-4);
}
.sheet__warnk {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--coral); color: #fff; display: grid; place-items: center;
  font-size: var(--t-cap); font-weight: 900;
}

/* Today's odds and the reason for them, in ONE block. A band that can be
   restyled away from its evidence is how a sea star quietly becomes likely. */
.sheet__today {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
}
.sheet__chips { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .3rem; }
.sheet__todayk {
  font-size: var(--t-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3);
}
.sheet__why { font-size: var(--t-cap); color: var(--ink-2); line-height: 1.45; margin: 0; }

.sheet__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.sheet__zone { font-size: var(--t-micro); color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 800; }
.sheet__where { font-size: var(--t-cap); color: var(--ink-2); line-height: 1.45; margin: 0; }
.sheet__vid { margin-top: var(--sp-4); }

/* Everything a grown-up might check, and nothing a child needs, held to the
   bottom in small type behind a rule. */
.sheet__foot { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.sheet__foot > * + * { margin-top: var(--sp-2); }
.sheet__note, .sheet__cred, .sheet__src, .sheet__srcnote {
  font-size: var(--t-micro); color: var(--ink-3); line-height: 1.45; margin: 0;
}
/* The word "Photo" is presentation, not content -- it is the same on all
   ninety credit lines, so it lives here rather than ninety times in the HTML. */
.sheet__cred::before {
  content: "Photo "; text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
}

/* No JavaScript: the anchor still works. :target shows the panel, and the
   close link clears the target. No dead controls in either mode. */
.sheet:target {
  display: block; position: fixed; z-index: 60;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.sheet:target::before {
  content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(8, 16, 18, .6);
}

@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in .22s cubic-bezier(.22,.8,.3,1); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
}

/* ---------- cycling photographs ------------------------------------------
 * A REAL CROSS-FADE, not a dip through the background. The old version faded
 * the picture to opacity 0, swapped the src, and faded back -- which meant
 * every card went briefly blank, and with every card doing it on the same tick
 * the page appeared to flinch. Derek: "too sudden ... quite jarring."
 *
 * Now the next photograph is laid over the current one and brought up over
 * 700 ms. Something is on screen the whole time. The overlay is absolutely
 * positioned and sized in script from the live image's own measured box, so no
 * container changes shape and nothing on the page moves.
 *
 * The five wrappers that can hold a rotating picture declare themselves as the
 * containing block. They gain nothing else from it: position:relative with no
 * offsets does not move anything.
 */
.find__art, .sheet__art, .shape__art, .jump__art, .tl2__art { position: relative; }

.art-fade {
  position: absolute; opacity: 0; pointer-events: none; z-index: 1;
  transition: opacity 700ms cubic-bezier(.33, 0, .67, 1);
}
.art-fade.is-in { opacity: 1; }

/* Nothing cycles at all under reduced motion -- the client never starts a
   timer -- so this only has to cover a manual tap in the detail panel, which
   lands instantly instead of fading. */
@media (prefers-reduced-motion: reduce) {
  .art-fade { display: none; }
}

@media print {
  .find__i, .sheet { display: none !important; }
}

/* ---------- the landing rotation ------------------------------------------
 * One rotating element on the landing page, not four. The photographs are the
 * best in the set and they are all of places this trip actually goes; the
 * weaker ones stay on the hunt cards, where identification is the job.
 * The aspect ratio is fixed so a swap cannot shift the layout, and every file
 * is precached so a swap is a cache hit, never a request.
 */

.hero-rot { margin: 0; border-radius: var(--r-xl); overflow: hidden; position: relative;
  box-shadow: var(--shadow); background: var(--raised); }
.hero-rot__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hero-rot__cap {
  /* Above the cross-fade overlay, which is z-index 1 in the same stacking
     context. Without this the incoming photograph paints over the caption. */
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .65rem;
  font-size: var(--t-cap); font-weight: 700; color: #fff; letter-spacing: -.01em;
  background: linear-gradient(to top, rgba(8,16,18,.72), rgba(8,16,18,0));
  transition: opacity .5s ease;
}
.hero-rot__cap.is-swapping { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-rot__cap { transition: none; }
}
:root[data-contrast="high"] .hero-rot__cap { background: #000; padding-top: .65rem; }
@media print { .hero-rot { break-inside: avoid; } .hero-rot__img { max-height: 6cm; } }

/* ---------- merged forest items ------------------------------------------ */

/* A subject with no photograph and no drawing of its own. Its name, set large,
   says more than a generic placeholder icon would. */
.art--type {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  background: linear-gradient(150deg, var(--raised), var(--bg));
  padding: .5rem;
}
.art--type > span {
  font-size: var(--t-cap); font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  text-align: center; color: var(--ink-2);
}
/* Bark is the forest hunt's colour, so it only applies inside the forest. */
[data-screen="forest"] .art--type { background: linear-gradient(150deg, var(--bark-soft), var(--raised)); }
[data-screen="forest"] .art--type > span { color: var(--bark); }
.sheet__art .art--type { aspect-ratio: 4 / 3; }
.sheet__art .art--type > span { font-size: var(--t-title); }

/* "Lucky to see" — documented as living here, not promised.
   Sea-star purple already means "not a promise" everywhere else on this site
   (it is the long-shot colour), so lucky uses it too: one colour, one meaning.
   The distinction between "long shot" and "lucky to see" is carried by the
   words, which is where a distinction that subtle belongs. */
.find--lucky .find__btn { border-color: color-mix(in srgb, var(--seastar) 30%, var(--line)); }

/* The likelihood chip in the detail panel, in the colours the card faces
   already use, so "long shot" means the same thing in both places. These
   bands had no rules at all and fell back to plain text on a plain
   background, which made the panel's most load-bearing word its quietest. */
.chip--long-shot, .chip--lucky { color: var(--seastar); background: var(--seastar-soft); }
.chip--likely { color: var(--accent-ink); background: var(--accent-soft); }
.chip--possible, .chip--underwater { color: var(--ink-2); background: var(--raised); }
.chip--forest { color: var(--bark); background: var(--bark-soft); }


/* The trail-post number. Bark is the forest's colour, so it is scoped to the
   forest screen rather than allowlisted -- the reservation stays structural. */
.sheet__stop {
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--ink-2); color: var(--bg); border-radius: 999px; padding: .15em .55em;
}
[data-screen="forest"] .sheet__stop { background: var(--bark); color: #fff; }
.sheet__srcnote { margin-bottom: .4rem; }
.sheet__srclink {
  display: inline-flex; align-items: center; min-height: 36px; margin: 0 .35rem .35rem 0;
  font-size: var(--t-micro); font-weight: 700; color: var(--seastar);
  border: 1px solid var(--seastar); border-radius: 999px; padding: .2em .7em; text-decoration: none;
}

/* ---------- the plan, as a day rather than a document ---------------------
 * A spine down the left, a dot per stop, the time beside it, and a card. The
 * three stops that are a real place carry a photograph of it. The stops fixed
 * by the tide are visually distinct, because they are the only ones on this
 * screen that cannot move.
 */

.glance {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
@media (min-width: 30rem) { .glance { grid-template-columns: repeat(4, 1fr); } }
.glance__i { background: var(--surface); padding: .7rem .75rem; display: flex; flex-direction: column; gap: .1rem; }
.glance__v { font-size: var(--t-lead); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.glance__k { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.25; }

.tl2 { list-style: none; margin: 0; padding: 0; position: relative; }
.tl2__stop {
  display: grid; grid-template-columns: 4.3rem 22px 1fr; align-items: start;
  gap: 0 var(--sp-2); padding-bottom: var(--card-gap); position: relative;
}
/* the spine */
.tl2__stop::before {
  content: ""; position: absolute; left: calc(4.3rem + 11px); top: 12px; bottom: -4px;
  width: 2px; background: var(--line); transform: translateX(-1px);
}
.tl2__stop:last-child::before { display: none; }
.tl2__time {
  font-size: var(--t-cap); font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--ink-3); text-align: right; padding-top: .35rem; line-height: 1.2;
}
.tl2__mark {
  width: 14px; height: 14px; border-radius: 999px; margin: .45rem 0 0 4px;
  background: var(--surface); border: 3px solid var(--line-2); position: relative; z-index: 1;
}
.tl2__stop--tide .tl2__mark { border-color: var(--accent); background: var(--accent); }
.tl2__stop--tide .tl2__time { color: var(--accent-ink); }
.tl2__stop--alternative { opacity: .82; }
.tl2__stop--alternative .tl2__mark { border-style: dashed; }

.tl2__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow); min-width: 0;
}
.tl2__stop--tide .tl2__card { border-color: var(--accent); border-width: 2px; }
.tl2__art { line-height: 0; }
.tl2__art .art--photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.tl2__body { padding: .7rem .8rem .75rem; }
.tl2__title { font-size: var(--t-h); letter-spacing: -.015em; margin-bottom: .25rem; }
.tl2__badge {
  display: inline-block; margin: 0 0 .35rem; font-size: var(--t-micro); font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; padding: .15em .5em; border-radius: 999px;
  background: var(--accent); color: #fff;
}
.tl2__badge--alt { background: var(--surface); color: var(--ink-3); border: 1px solid var(--line-2); }
.tl2__badge--flex { background: var(--surface); color: var(--ink-3); border: 1px solid var(--line-2); }
.tl2__notes { font-size: var(--t-cap); color: var(--ink-2); margin: 0; }
.tl2__note { font-size: var(--t-cap); background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: .4rem .55rem; margin: .45rem 0 0; color: var(--ink); }
.tl2__places { list-style: none; margin: .4rem 0 0; padding: 0; font-size: var(--t-micro); color: var(--ink-3); }
.tl2__places a { font-weight: 700; }

/* The running-late rule is logistics, not safety. Coral is reserved for the
   things that stop somebody getting hurt, and spending it here would dilute
   the one signal that must never be ambiguous on a wet rock. A heavy neutral
   card carries the emphasis instead. */
.laterule {
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r);
  padding: .85rem .9rem;
}
.laterule__h { font-size: var(--t-h); color: var(--ink); margin-bottom: .3rem; }
.laterule__trigger { font-size: var(--t-cap); color: var(--ink-2); }
.laterule__rule { font-size: var(--t-cap); font-weight: 700; color: var(--ink); margin: 0; }

@media print {
  .tl2__stop { break-inside: avoid; }
  .tl2__art { display: none; }
  .glance { break-inside: avoid; }
}