/* Tide clock (features/tide-ui.js): the Tide page (now line, day tabs, dial, torii scene + ruler, the day's list,
   ferry, source), the Today / Itinerary chip, the quiet coast line, the place-sheet block. Tokens only: the
   illustration inks (sun gold, sand, its stipple, the moon's face) are mixed from tokens, so they follow the
   light, dark and high-contrast themes. The region tone (--tone) colours the float; shu (--accent) only marks now. */
.tide-page, .td-place, .tide-chip {
  --td-sea: color-mix(in srgb, var(--r-coast-ink) 11%, transparent);
  --td-sun: color-mix(in srgb, var(--leaf-yellow) 70%, var(--leaf-yellow-ink));
  --td-sand: color-mix(in srgb, var(--r-ochre-wash) 60%, var(--line-strong));
  --td-sand-dot: color-mix(in srgb, var(--text-3) 70%, var(--r-ochre));
  --td-moon-face: var(--surface); --td-moon-edge: var(--text-3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.tide-page, .td-place, .tide-chip) { --td-moon-face: var(--text); --td-moon-edge: var(--text); }
}
:root[data-theme="dark"] :is(.tide-page, .td-place, .tide-chip) { --td-moon-face: var(--text); --td-moon-edge: var(--text); }

.tide-page .nw, .td-place .nw, .tide-coast .nw { white-space: nowrap; }
.td-nw { white-space: nowrap; }
.td-tl { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--text-3); margin-right: 1px; }

/* ── Now line ────────────────────────────────────────────────────────────────── */
.td-now { margin: var(--s-5) 0 0; }
.td-now-eyebrow {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.td-now.is-live .td-now-eyebrow { color: var(--accent-text); }
.td-now-title {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0;
  font: 500 24px/30px var(--font-serif); font-variation-settings: 'opsz' 30; letter-spacing: -.005em; color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
}
.td-now-glyph { display: grid; place-items: center; height: 30px; color: var(--text-2); }
.td-now-glyph.is-float { color: var(--tone-ink); }
.td-now-words { text-wrap: balance; }
.td-now-tail { color: var(--text-2); }
.td-now-tail .td-dot { color: var(--text-3); }
.td-now-tail .td-tl { font-style: normal; margin-right: 1px; }
.td-now-sub {
  margin: 4px 0 0 34px; font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-2);
  font-variant-numeric: tabular-nums; text-wrap: pretty;
}

/* ── Day tabs: segmented, each with the day's tide against the base line ────── */
.td-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; margin-top: var(--s-5); min-height: 52px; }
.td-days .segment { flex-direction: column; gap: 4px; min-height: 48px; padding: 6px 4px 5px; }
.td-day-label { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.td-spark { display: block; width: 100%; max-width: 64px; height: 14px; overflow: visible; }
.td-spark .sp-sea { fill: var(--td-sea); }
.td-spark .sp-sand { fill: var(--td-sand-dot); opacity: .5; }
.td-spark .sp-float { fill: var(--tone); }
.td-spark .sp-line { fill: none; stroke: var(--text-3); stroke-width: 1; }
.td-spark .sp-base { stroke: var(--text-3); stroke-width: .75; opacity: .7; }
.td-days .segment.is-selected .sp-line { stroke: var(--text-2); }

/* ── Dial ────────────────────────────────────────────────────────────────────── */
.td-dial-wrap { position: relative; width: 100%; max-width: 344px; margin: var(--s-4) auto 0; }
.td-dial { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.td-dial:focus-visible { outline: none; }
.td-dial:focus-visible .d-knob-ring { stroke: var(--text); stroke-width: 3; }
.td-dial:focus-visible .d-face { stroke: var(--text); stroke-width: 2; }
.d-face { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.d-tick { stroke: var(--line-strong); stroke-width: 1; }
.d-tick.major { stroke: var(--text-3); stroke-width: 1.25; }
.d-num { font: 500 11px/1 var(--font-sans); fill: var(--text-3); font-variant-numeric: tabular-nums; text-anchor: middle; dominant-baseline: central; }
.d-num.major { font-weight: 600; fill: var(--text-2); }
.d-halo { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.d-spoke { stroke: var(--line); stroke-width: 1; }
.d-seam { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 2; }
.d-sea { fill: var(--td-sea); }
.d-float { fill: var(--tone); }
.d-hatch-bg { fill: var(--td-sand); }
.d-hatch-line { stroke: var(--td-sand-dot); stroke-width: 1; opacity: .7; }
.d-ring-base { fill: none; stroke: var(--text); stroke-width: 1.25; }
.d-ring-float { fill: none; stroke: var(--tone-ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .85; }
.d-curve { fill: none; stroke: var(--text-2); stroke-width: 1.25; stroke-linejoin: round; }
.d-ext-tick { stroke: var(--text); stroke-width: 1.25; }
.d-arcpath { fill: none; }
.d-lab { font: 500 11px/1 var(--font-sans); fill: var(--text-2); font-variant-numeric: tabular-nums; }
.d-lab .fl { font-weight: 600; letter-spacing: .08em; fill: var(--tone-ink); }
.d-lab .tl { font: italic 400 11px/1 var(--font-serif); fill: var(--text-3); }
.d-lab.d-under, .d-lab.d-under tspan { fill: var(--bg); stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.d-lab.is-quiet { fill: var(--text-3); }
.d-lab.is-short { font: italic 400 13px/1 var(--font-serif); fill: var(--text-2); }
.d-lab.is-cue { font-weight: 600; fill: var(--text-3); }
.d-lab.is-lit { font: italic 400 12.5px/1 var(--font-serif); fill: var(--text-2); }
/* Gone by: labels quieter by colour (--text-3 still reads at 4.5:1), the sun and moon faces dimmed. */
.td-dial .d-lab.is-past:not(.d-under), .td-dial .d-lab.is-past:not(.d-under) tspan:not(.tl) { fill: var(--text-3); }
.td-dial .d-sun-disc.is-past, .td-dial .d-moon-g.is-past { opacity: .5; }
.d-veil { fill: var(--bg); opacity: .58; }
.d-sun { fill: none; stroke: var(--td-sun); stroke-width: 1.5; stroke-linecap: round; }
.d-sun-disc { fill: var(--td-sun); stroke: var(--bg); stroke-width: 2; }
.d-lit { fill: none; stroke: var(--text-2); stroke-width: 1.25; stroke-linecap: butt; }
.d-moon { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-linecap: round; }
.d-moon-face { fill: var(--td-moon-face); stroke: var(--td-moon-edge); stroke-width: 1; }
.d-moon-shade { fill: var(--text-3); opacity: .55; }
.d-time { font: 600 26px/1 var(--font-sans); fill: var(--text); font-variant-numeric: tabular-nums lining-nums; text-anchor: middle; letter-spacing: -.01em; }
.d-state { font: italic 400 15px/1 var(--font-serif); fill: var(--text-2); text-anchor: middle; }
.d-state.is-float { fill: var(--tone-ink); }
.d-day { font: 600 11px/1 var(--font-sans); letter-spacing: .1em; fill: var(--text-3); text-anchor: middle; }
.d-hand { stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; }
.d-level { fill: var(--text); stroke: var(--bg); stroke-width: 2; }
.d-knob { cursor: grab; touch-action: none; }
.d-knob:active { cursor: grabbing; }
.d-knob-hit, .d-cue-hit { fill: transparent; }
.d-cue-hit { cursor: pointer; }
.d-knob-ring { fill: var(--text); stroke: var(--bg); stroke-width: 2.5; }
.d-knob-dot { fill: var(--bg); }
.d-knob.is-now .d-knob-dot { fill: var(--accent); }
.d-now { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
/* The small dial on the place sheet: drawn at a third of the size, so its lines are drawn heavier. */
.td-dial.is-compact { touch-action: auto; pointer-events: none; }
.td-dial.is-compact .d-spokes, .td-dial.is-compact .d-ext, .td-dial.is-compact .d-ring-float { display: none; }
.td-dial.is-compact .d-face, .td-dial.is-compact .d-tick, .td-dial.is-compact .d-spoke, .td-dial.is-compact .d-seam { stroke-width: 2.5; }
.td-dial.is-compact .d-ring-base, .td-dial.is-compact .d-curve, .td-dial.is-compact .d-ext-tick { stroke-width: 3; }
.td-dial.is-compact .d-ring-float { stroke-width: 2.5; stroke-dasharray: 7 6; }
.td-dial.is-compact .d-sun, .td-dial.is-compact .d-lit, .td-dial.is-compact .d-moon { stroke-width: 3.5; }
.td-dial.is-compact .d-hand { stroke-width: 4; }
.td-dial.is-compact .d-level { stroke-width: 4; }
.td-dial.is-compact .d-knob-ring { stroke-width: 4; }
.td-dial.is-compact .d-moon-face { stroke-width: 2.5; }

/* ── Under the dial: what the hand says, and the way back to now ─────────────── */
.td-hand { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 44px; margin-top: var(--s-1); }
.td-hand-text { margin: 0; min-width: 0; font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.td-hand-text b { font-weight: 600; color: var(--text); }
.td-hint { font: italic 400 var(--fs-aside)/var(--lh-aside) var(--font-serif); color: var(--text-3); }
.td-back-now {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text);
  font: 600 var(--fs-small)/1 var(--font-sans); cursor: pointer;
}
.td-back-now::after { content: ''; position: absolute; inset: -6px 0; }
.td-back-now:active { background: var(--surface-pressed); }
.td-back-now:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.td-back-now[hidden] { display: none; }

/* ── The torii at the hand's hour + the metres ruler (one scale: 264 px tall, 1:1) ─ */
.td-gauge {
  scroll-margin: calc(var(--header-h) + var(--safe-top) + var(--s-3)) 0 calc(var(--tabbar-total) + var(--s-3));
  display: grid; grid-template-columns: minmax(0, 1fr) 84px; height: 264px; margin: var(--s-3) 0 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface);
}
.td-scene { position: relative; height: 264px; min-width: 0; overflow: hidden; background: var(--surface-inset); }
.td-scene-svg { display: block; width: 100%; height: 264px; }
.td-col { position: relative; height: 264px; border-left: 1px solid var(--line); background: var(--surface); }
.td-ruler { position: absolute; inset: 0; width: 84px; height: 264px; overflow: visible; }
.td-read { position: absolute; left: 10px; right: 4px; top: 12px; display: grid; gap: 1px; }
.td-read-eb { font: 600 var(--fs-micro)/var(--lh-micro) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.td-read-num { margin-top: 2px; font: 500 23px/28px var(--font-serif); font-variant-numeric: lining-nums tabular-nums; color: var(--text); white-space: nowrap; }
.td-read-num.is-float { color: var(--tone-ink); }
.td-read-cap { font: 400 var(--fs-micro)/var(--lh-micro) var(--font-sans); color: var(--text-2); }
.td-read-tab { margin-top: 6px; font: 400 var(--fs-micro)/var(--lh-micro) var(--font-sans); color: var(--text-3); }
.td-ruler .s-num { font: 500 11px/1 var(--font-sans); fill: var(--text-3); font-variant-numeric: tabular-nums; dominant-baseline: central; }
.td-ruler .s-num.is-key { font-weight: 600; fill: var(--text-2); }
.td-ruler .s-num.is-float { font-weight: 600; fill: var(--tone-ink); }
.td-ruler .s-tick { stroke: var(--text-3); stroke-width: 1; }
.td-ruler .s-tick.minor { stroke: var(--line-strong); }
.td-ruler .s-col { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.td-ruler .s-sea { fill: var(--td-sea); }
.td-ruler .s-float { fill: var(--tone); }
.td-ruler .s-base { stroke: var(--text-2); stroke-width: 1.5; }
.td-ruler .s-fl { stroke: var(--tone-ink); stroke-width: 1; stroke-dasharray: 3 2; }
.td-ruler .s-ptr { fill: var(--text); }
.td-ruler .s-lvl { stroke: var(--text); stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .td-scene-svg { animation: td-scene-in var(--dur-3) var(--ease-out) both; }
  @keyframes td-scene-in { from { opacity: 0; } }
}

/* ── The day's tide ──────────────────────────────────────────────────────────── */
.td-day { margin-top: var(--s-8); }
.td-list-title { margin: 0 0 6px; }
.td-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.td-row {
  position: relative; display: grid; grid-template-columns: 104px 22px minmax(0, 1fr); gap: 0 10px; align-items: start;
  width: 100%; min-height: 52px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.td-row:active { background: var(--surface-pressed); }
.td-row:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.td-row-time { font: 600 var(--fs-time)/var(--lh-time) var(--font-sans); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.td-row-time .td-tl { font-size: var(--fs-time); }
.td-row-icon { display: grid; place-items: center; height: 20px; color: var(--text-2); }
.td-row-text { display: grid; gap: 1px; min-width: 0; }
.td-row-title { font: 500 var(--fs-time)/var(--lh-time) var(--font-sans); }
.td-row-tag {
  display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px dashed var(--line-strong); border-radius: var(--r-1);
  font: 500 var(--fs-micro)/18px var(--font-sans); color: var(--text-3); vertical-align: 1px; white-space: nowrap;
}
.td-row-note { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.td-row.is-fl .td-row-title, .td-row.is-fl .td-row-icon { color: var(--tone-ink); }
.td-row.is-quiet .td-row-time, .td-row.is-quiet .td-row-title, .td-row.is-quiet .td-row-icon { color: var(--text-3); font-weight: 500; }
/* Gone by: quieter by colour, still 4.5:1 (--text-3), never by opacity. */
.td-row.is-past:not(.is-at) :is(.td-row-time, .td-row-title, .td-row-note, .td-row-icon) { color: var(--text-3); }
.td-row.is-past:not(.is-at) .td-row-time { font-weight: 500; }
.td-row.is-at::before { content: ''; position: absolute; left: -9px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--text); }
.td-row.is-at .td-row-title { font-weight: 600; }
.td-ferry-note { margin-top: var(--s-3); }
.td-ferry-line {
  display: flex; align-items: center; gap: 8px; margin: var(--s-3) 0 0; min-height: 24px;
  font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.td-ferry-line b { font-weight: 600; color: var(--text); }
.td-ferry-icon { flex: none; color: var(--text-3); }
.td-ferry-note .note-text { font-variant-numeric: tabular-nums; }
.td-ferry-note .td-tl { color: inherit; opacity: .8; }

/* ── Source ──────────────────────────────────────────────────────────────────── */
.td-source { margin-top: var(--s-5); font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3); max-width: 62ch; }
.td-source p { margin: 0; text-wrap: pretty; }
.td-source p + p { margin-top: var(--s-2); }
.td-source-link { margin-top: var(--s-1); }

/* ── The chip on Today and the Itinerary ─────────────────────────────────────── */
.tide-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 100%; padding: 0 10px 0 6px; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--text-2);
  font: 500 var(--fs-caption)/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.tide-chip[href]::after { content: ''; position: absolute; inset: -8px 0; }
a.tide-chip[href]:active { background: var(--surface-pressed); }
a.tide-chip[href]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tide-chip-text { overflow: hidden; text-overflow: ellipsis; }
.tide-chip b { font-weight: 600; color: var(--text); }
.tide-chip .td-tl { color: inherit; opacity: .8; }
.tide-chip.is-float { background: var(--tone-wash); border-color: color-mix(in srgb, var(--tone) 35%, var(--tone-wash)); color: var(--tone-ink); }
.tide-chip.is-float b { color: var(--tone-ink); }
/* Inside a day card's header (one big button) the chip is a label, not a link: filled like the other facts there. */
.tide-chip.is-static { border-color: transparent; background: var(--surface-inset); }
.tide-chip.is-static.is-float { background: var(--tone-wash); }
.td-mini { width: 16px; height: 16px; flex: none; overflow: visible; }
.td-mini .md-ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: .45; }
.td-mini .md-float { fill: none; stroke: var(--tone); stroke-width: 2.6; }
.td-mini .md-hand { stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; }
.td-mini .md-hub { fill: var(--text); }

/* ── The quiet line on the other coast days ──────────────────────────────────── */
.tide-coast {
  display: flex; align-items: baseline; gap: 6px; flex-basis: 100%; margin: 0; min-width: 0;
  font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.tide-coast-icon { flex: none; align-self: center; color: var(--text-3); }
.tide-coast .is-past { color: var(--text-3); }
.view-itinerary .tide-coast { margin-top: var(--s-2); }
.view-today .tide-coast { margin-top: 2px; }

/* ── On the place sheet ──────────────────────────────────────────────────────── */
.td-place .td-pl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); align-items: center; margin-top: var(--s-2); }
.td-pl-dial { width: 120px; }
.td-pl-text { min-width: 0; }
.td-pl-eb {
  margin: 0 0 4px; font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.td-pl-head .td-pl-dot { display: inline-block; margin-right: 6px; vertical-align: .2em; }
.td-pl-head { margin: 0; font: 500 var(--fs-title-3)/var(--lh-title-3) var(--font-serif); color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.td-pl-sub { margin: 4px 0 0; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.td-pl-days { list-style: none; display: grid; gap: 2px; margin: var(--s-3) 0 0; padding: 0; }
.td-pl-day { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-2); font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-2); }
.td-pl-date { font-weight: 600; color: var(--text-3); }
.td-pl-day.is-today .td-pl-date { color: var(--text); }
.td-pl-day.is-past { color: var(--text-3); }
.td-pl-fl { color: var(--text-3); }
.td-pl-day.is-today .td-pl-fl { color: var(--text-2); }
.td-pl-open { margin-top: var(--s-3); }