/* Components. One block per entry in DESIGN.md § Components. Tokens only. */

/* ---- language switch + nav (masthead) ------------------------------------------ */
.nav { display: flex; gap: var(--s-4); font-size: var(--t-small); }
.nav a { min-height: var(--target); display: inline-flex; align-items: center; text-decoration: none; color: var(--c-ink-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-ink); text-decoration: underline; }
.lang { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-body); }
.lang__opt { position: relative; min-height: var(--target); min-width: var(--target); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-ink-2); }
.lang__opt:has(.sr-input:checked) { color: var(--c-ink); font-weight: var(--w-sans-strong); text-decoration: underline; text-decoration-thickness: var(--rule-strong); text-underline-offset: var(--underline-offset); }
.lang__opt:has(.sr-input:focus-visible) { outline: var(--focus-ring) solid var(--c-focus); outline-offset: calc(-1 * var(--focus-ring)); border-radius: var(--r-ctl); }
.lang__sep { color: var(--c-ink-2); }
.lang__short { display: none; }
@media (max-width: 47.99rem) {
  .nav { gap: var(--s-3); }
  .masthead__end { gap: var(--s-3); }
  .lang__long { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lang__short { display: inline; }
}

/* ---- zone switch with the split map ---------------------------------------------- */
.zone { display: flex; align-items: center; justify-content: center; gap: 0; }
.zone__opt { position: relative; display: inline-flex; align-items: center; gap: var(--s-4); min-height: var(--target); cursor: pointer; border-radius: var(--r-ctl); }
.zone__opt--DK1 { padding-left: var(--s-2); }
.zone__opt--DK2 { padding-right: var(--s-2); }
.zone__name { font-family: var(--font-serif); font-style: italic; font-weight: var(--w-serif); font-size: var(--t-zone); line-height: var(--lh-tight); white-space: nowrap; padding-bottom: var(--s-1); border-bottom: var(--rule-strong) solid transparent; }
.zone__opt:has(.sr-input:checked) .zone__name { border-bottom-color: var(--c-ink); }
.zone__opt:not(:has(.sr-input:checked)) .zone__name { color: var(--c-ink-2); }
.zone__opt:hover .zone__name { color: var(--c-ink); }
.zone__opt:has(.sr-input:focus-visible) { outline: var(--focus-ring) solid var(--c-focus); outline-offset: var(--focus-offset); }
.zone__map { height: var(--map-h); width: auto; overflow: visible; }
.zone__map path { fill: var(--c-paper); stroke: var(--c-ink); stroke-width: var(--hair); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.zone__opt:has(.sr-input:checked) .zone__map path { fill: var(--c-ink); }
.zone__opt:not(:has(.sr-input:checked)):hover .zone__map path { fill: var(--c-depth-1); }
@media (max-width: 47.99rem) {
  .zone__opt { gap: var(--s-2); }
}

/* ---- verdict ------------------------------------------------------------------------ */
.verdict { font-size: var(--t-verdict); font-weight: var(--w-serif); line-height: var(--lh-tight); letter-spacing: var(--track-verdict);
  font-variation-settings: "opsz" var(--opsz-display); max-width: 62ch; text-wrap: balance; padding-top: var(--s-3); }
.verdict__wait { color: var(--c-ink-2); font-weight: var(--w-serif-light); font-style: italic; }

/* ---- tide chart ------------------------------------------------------------------------- */
.tide { display: grid; gap: var(--s-2); }
.tide__plot { position: relative; height: var(--chart-h); width: 100%; touch-action: pan-y; cursor: crosshair; }
.tide__plot:focus-visible { outline-offset: var(--s-1); }
.tide--blank .tide__plot { opacity: 0.5; }
.tide__svg { display: block; overflow: visible; font-family: var(--font-serif); }
.tide__readout { min-height: var(--target); font-family: var(--font-serif); font-size: var(--t-body); padding-inline: var(--s-1); display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--s-2); }
.tide__hint { color: var(--c-ink-2); font-family: var(--font-sans); font-size: var(--t-small); }
.readout__value { font-weight: var(--w-serif); font-size: var(--t-row); }
.readout__lvl { color: var(--c-ink-2); font-style: italic; }

.depth-1 { fill: var(--c-depth-1); }
.depth-2 { fill: var(--c-depth-2); }
.depth-3 { fill: var(--c-depth-3); }
.depth-neg { fill: var(--c-low-fill); }
.past { fill: var(--c-past); }
.low__ground { fill: var(--c-low-fill); }
.low__stroke { stroke: var(--c-low); stroke-width: var(--rule-strong); }
.grid { stroke: var(--c-rule-soft); stroke-width: var(--hair); }
.grid--datum { stroke: var(--c-ink); stroke-width: var(--rule); }
.tick { stroke: var(--c-ink); stroke-width: var(--hair); }
.axis { fill: var(--c-ink); font-size: var(--t-axis); }
.axis--x { font-weight: var(--w-serif); }
.axis--y { font-style: italic; font-weight: var(--w-serif); }
.curve { fill: none; stroke: var(--c-ink); stroke-width: var(--rule-strong); stroke-linejoin: round; }
.midnight { stroke: var(--c-ink); stroke-width: var(--hair); stroke-dasharray: var(--s-1) var(--s-1); }
.dayname, .mark { font-style: italic; font-weight: var(--w-serif); font-size: var(--t-axis); fill: var(--c-ink); paint-order: stroke; stroke: var(--c-paper); stroke-width: var(--s-1); stroke-linejoin: round; }
.high { fill: var(--c-ink); }
.now { stroke: var(--c-now); stroke-width: var(--rule-strong); }
.now__dot { fill: var(--c-now); stroke: var(--c-paper); stroke-width: var(--rule-strong); }
.sounding__num { fill: var(--c-now); font-size: var(--t-sounding); font-weight: var(--w-serif); font-variation-settings: "opsz" var(--opsz-display); }
.sounding__unit { fill: var(--c-ink); font-size: var(--t-axis); }
.cursor { stroke: var(--c-ink); stroke-width: var(--rule); stroke-dasharray: var(--s-1) var(--s-1); }
.is-loading .axis--y { visibility: hidden; }
.is-loading .grid { stroke: var(--c-skeleton); }

/* The one orchestrated moment: water rises into the curve; marks ink in after it. */
@media (prefers-reduced-motion: no-preference) {
  .is-intro .water { transform-box: fill-box; transform-origin: 50% 100%; animation: tide-rise var(--dur-rise) var(--ease-tide) both; }
  .is-intro .low, .is-intro .now, .is-intro .now__dot, .is-intro .sounding, .is-intro .mark, .is-intro .high { animation: tide-ink var(--dur-fast) var(--ease-out) var(--dur-rise) both; }
}
@keyframes tide-rise { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tide-ink { from { opacity: 0; } to { opacity: 1; } }

/* ---- controls column ------------------------------------------------------------------ */
.ctl { display: grid; gap: var(--s-2); }
.ctl__label { font-size: var(--t-small); font-weight: var(--w-sans-strong); color: var(--c-ink); padding: 0; }
.ctl__help { font-size: var(--t-small); color: var(--c-ink-2); max-width: var(--w-prose); }

/* segmented: native radios, square, ink outline, selected = ink fill */
.seg__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: var(--rule) solid var(--c-ink); border-radius: var(--r-ctl); }
.seg__opt { position: relative; cursor: pointer; }
.seg__opt + .seg__opt { border-left: var(--rule) solid var(--c-ink); }
.seg__label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: calc(var(--target) + var(--s-1)); padding: var(--s-1) var(--s-2);
  font-family: var(--font-serif); font-weight: var(--w-serif); font-size: var(--t-row); line-height: var(--lh-tight); }
.seg__opt:hover .seg__label { background: var(--c-hover); }
.seg__opt:has(.sr-input:checked) .seg__label { background: var(--c-ink); color: var(--c-on-ink); }
.seg__opt:has(.sr-input:focus-visible) { outline: var(--focus-ring) solid var(--c-focus); outline-offset: var(--focus-offset); z-index: 1; }
.seg__opt.is-disabled .seg__label { color: var(--c-ink-2); font-style: italic; }

/* stepper: − 3 timer + */
.stepper { display: inline-grid; grid-template-columns: var(--target) auto var(--target); align-items: stretch; border: var(--rule) solid var(--c-ink); border-radius: var(--r-ctl); justify-self: start; }
.stepper__btn { border: 0; border-radius: 0; min-height: calc(var(--target) + var(--s-1)); font-size: var(--t-zone); padding: 0; }
.stepper__value { display: flex; align-items: center; justify-content: center; padding-inline: var(--s-4); min-width: var(--stepper-value-w); font-family: var(--font-serif); font-weight: var(--w-serif); font-size: var(--t-row);
  border-inline: var(--rule) solid var(--c-ink); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--target); min-width: var(--target); padding: var(--s-2) var(--s-4);
  border: var(--rule) solid var(--c-ink); border-radius: var(--r-ctl); background: transparent; color: var(--c-ink); cursor: pointer;
  font-family: var(--font-serif); font-weight: var(--w-serif); font-size: var(--t-body); line-height: var(--lh-tight); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--c-hover); }
.btn:disabled { color: var(--c-ink-2); cursor: not-allowed; background: transparent; }
.btn--ink { background: var(--c-ink); color: var(--c-on-ink); font-size: var(--t-row); padding-inline: var(--s-5); }
.btn--ink:hover { background: var(--c-ink); text-decoration: underline; text-underline-offset: var(--underline-offset); }
.btn--quiet { border-color: transparent; padding-inline: var(--s-2); text-decoration: underline; text-underline-offset: var(--underline-offset); font-family: var(--font-sans); font-weight: var(--w-sans); font-size: var(--t-small); }
.btn--quiet:hover { background: transparent; text-decoration-thickness: var(--rule-strong); }

/* postcode */
.place__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); }
.field { min-height: calc(var(--target) + var(--s-1)); width: 100%; padding: var(--s-2) var(--s-3); border: var(--rule) solid var(--c-line-ctl); border-radius: var(--r-ctl); background: var(--c-field);
  font-family: var(--font-serif); font-size: var(--t-row); }
.field::placeholder { color: var(--c-ink-2); font-style: italic; opacity: 1; }
.field:focus-visible { border-color: var(--c-ink); }
.field__error { color: var(--c-danger); font-size: var(--t-small); font-weight: var(--w-sans-strong); }
.place__note { font-size: var(--t-small); color: var(--c-ink); border-left: var(--rule-strong) solid var(--c-ink); padding-left: var(--s-3); }
.place__resolved { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); font-family: var(--font-serif); font-size: var(--t-row); }
.place__resolved .muted { font-family: var(--font-sans); font-size: var(--t-small); }
.choices { display: grid; gap: var(--s-1); }
.choice { display: flex; align-items: center; gap: var(--s-3); min-height: var(--target); cursor: pointer; font-family: var(--font-serif); font-size: var(--t-row); }
.choice input { width: var(--s-5); height: var(--s-5); accent-color: var(--c-ink); margin: 0; }

/* ---- tide table: rules between rows only ------------------------------------------------- */
.tide-table { width: 100%; border-collapse: collapse; font-family: var(--font-serif); font-size: var(--t-row); line-height: var(--lh-snug); }
.tide-table th, .tide-table td { padding: var(--s-3) var(--s-2); border-bottom: var(--hair) solid var(--c-rule); text-align: left; vertical-align: baseline; font-weight: var(--w-serif); }
.tide-table th { padding-left: 0; }
.tide-table td.num { text-align: right; white-space: nowrap; padding-right: 0; }
.tide-table .when { white-space: nowrap; }
.tide-table small { display: block; font-family: var(--font-sans); font-size: var(--t-small); font-weight: var(--w-sans); color: var(--c-ink-2); }
.tide-table .unit { font-weight: var(--w-serif); }
.tide-table .when--note { font-style: italic; font-weight: var(--w-serif-light); color: var(--c-ink-2); white-space: normal; text-align: right; }
.tide-table .is-pending th { font-style: italic; }
.key { display: inline-block; width: var(--key-w); height: var(--key-h); margin-right: var(--s-2); vertical-align: baseline; }
.key--low { background: repeating-linear-gradient(135deg, var(--c-low) 0 var(--rule-strong), var(--c-low-fill) 0 var(--s-1)); outline: var(--hair) solid var(--c-low); }
.key--high { background: var(--c-ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tide-table--loading { display: grid; gap: var(--s-4); padding-top: var(--s-3); }
@media (max-width: 47.99rem) {
  .tide-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: var(--hair) solid var(--c-rule); padding-block: var(--s-3); }
  .tide-table th, .tide-table td { border: 0; padding: 0; }
  .tide-table th { grid-column: 1 / -1; padding-bottom: var(--s-1); }
  .tide-table td.when { padding-left: calc(var(--key-w) + var(--s-2)); }
  .tide-table td.when:empty { display: block; }
  .tide-table .is-simple th { grid-column: 1; padding-bottom: 0; }
  .tide-table .is-simple td.when { display: none; }
  .tide-table .when--note { grid-column: 1 / -1; text-align: left; padding-left: calc(var(--key-w) + var(--s-2)); }
}

.all-prices { margin-top: var(--s-3); }
.all-prices summary { min-height: var(--target); display: inline-flex; align-items: center; cursor: pointer; font-size: var(--t-small); text-decoration: underline; text-underline-offset: var(--underline-offset); }
.all-prices .table { margin-top: var(--s-2); }

/* ---- generic data table (all prices, docs) ------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table th, .table td { text-align: left; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: var(--hair) solid var(--c-rule-soft); vertical-align: top; }
.table thead th { border-bottom: var(--hair) solid var(--c-rule); font-weight: var(--w-sans-strong); }
.table .num { text-align: right; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: var(--t-body); }
.table tbody th { font-weight: var(--w-sans); }
.table .is-now th, .table .is-now td { box-shadow: inset var(--rule-strong) 0 0 var(--c-now); }
.table .is-now th { padding-left: var(--s-2); font-weight: var(--w-sans-strong); }
.table--api td:first-child { font-family: var(--font-mono); font-size: var(--t-small); white-space: nowrap; }

/* scroll wrapper for wide data tables on small screens */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline-offset: var(--focus-offset); }

/* ---- breakdown (variable price) ------------------------------------------------------------ */
.breakdown { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.breakdown caption { text-align: left; font-family: var(--font-serif); font-size: var(--t-body); padding-bottom: var(--s-2); }
.breakdown th, .breakdown td { padding: var(--s-2) 0; border-bottom: var(--hair) solid var(--c-rule-soft); text-align: left; font-weight: var(--w-sans); }
.breakdown .num { text-align: right; font-family: var(--font-serif); font-weight: var(--w-serif); }

/* ---- notice ------------------------------------------------------------------------------------ */
.notice { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: var(--rule-strong) solid var(--c-ink); justify-items: start; max-width: var(--w-prose); }
.notice + .notice { margin-top: var(--s-4); }
.notice__title { font-weight: var(--w-sans-strong); display: flex; align-items: baseline; gap: var(--s-2); }
.notice__mark { flex: none; display: inline-block; width: var(--mark); height: var(--mark); background: var(--c-ink); }
.notice__text > .notice__mark { margin-right: var(--s-2); }
.notice__text { color: var(--c-ink); font-size: var(--t-small); }
.notice--warn { border-top-color: var(--c-warn); }
.notice--warn .notice__mark { background: var(--c-warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.notice--warn .notice__title { color: var(--c-warn); }
.notice--error { border-top-color: var(--c-danger); }
.notice--error .notice__mark { background: var(--c-danger); }
.notice--error .notice__title { color: var(--c-danger); }
.notice--info .notice__mark { border-radius: 50%; }
.ctl .notice { margin-top: var(--s-2); }

/* ---- meta / badge / misc ---------------------------------------------------------------------- */
.footer__status { display: grid; gap: var(--s-1); padding-bottom: var(--s-3); border-bottom: var(--hair) solid var(--c-rule); color: var(--c-ink); }
.meta__line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); color: var(--c-ink-2); }
.footer__status .badge--live { display: inline-flex; align-items: center; gap: var(--s-1); border: 0; padding: 0; color: var(--c-ink); }
.footer__status .badge--live::before { content: ""; width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--c-now); }
.meta__stale { color: var(--c-warn); }
.badge { display: inline-block; padding: 0 var(--s-1); border: var(--hair) solid currentColor; border-radius: var(--r-ctl); font-weight: var(--w-sans-strong); color: var(--c-ink); }
.code-inline { font-family: var(--font-mono); font-size: var(--t-small); }
.skel { display: block; background: var(--c-skeleton); border-radius: var(--r-ctl); }
.skel--row { height: var(--s-6); }
.code, .formula { background: var(--c-field); border: var(--hair) solid var(--c-rule-soft); border-left: var(--rule-strong) solid var(--c-ink); padding: var(--s-4); overflow-x: auto; line-height: var(--lh-snug); margin: 0; }
.formula { font-family: var(--font-mono); white-space: pre; }
.method { font-family: var(--font-mono); font-size: var(--t-small); font-weight: var(--w-sans-strong); margin-right: var(--s-2); }

/* ---- states gallery ------------------------------------------------------------------------------ */
.gallery { display: grid; gap: var(--s-7); }
.gallery h2 { font-family: var(--font-serif); font-size: var(--t-heading); font-weight: var(--w-serif); }
.gallery__row { display: flex; gap: var(--s-5); overflow-x: auto; padding-bottom: var(--s-3); }
.gallery figure { flex: none; display: grid; gap: var(--s-2); }
.gallery figcaption { font-size: var(--t-small); }
.gallery iframe { width: var(--frame-w); height: var(--frame-h); border: var(--hair) solid var(--c-rule); background: var(--c-paper); }
.gallery iframe.is-wide { --frame-w: var(--frame-w-wide); --frame-h: var(--frame-h-wide); }

/* ---- pull cord (theme switch): a hand lead-line, the one physical object ---- */
/* Only the lead takes the pointer, so the tall box never blocks header controls. */
.cord { position: fixed; top: 0; right: 0; z-index: 20; overflow: visible; pointer-events: none; touch-action: none; filter: drop-shadow(var(--cord-shadow)); outline: none; }
.cord__hit { fill: transparent; pointer-events: all; cursor: grab; touch-action: none; }
.cord:active .cord__hit { cursor: grabbing; }
.cord__rope { fill: none; stroke: var(--c-cord-line); stroke-linecap: round; stroke-linejoin: round; }
.cord__lay { fill: none; stroke: var(--c-cord-strand); stroke-linecap: round; }
.cord__serve { fill: none; stroke: var(--c-cord-line); stroke-linecap: butt; }
.cord__wraps { fill: none; stroke: var(--c-cord-strand); stroke-linecap: round; opacity: 0.55; }
.cord__mark path { fill: var(--c-cord-leather); }
.cord__seizing { fill: var(--c-cord-line); }
.cord__metal { fill: var(--c-cord-metal); stroke: var(--c-cord-rim); }
.cord__metal-lit { fill: none; stroke: var(--c-cord-metal-lit); stroke-linecap: round; }
.cord__metal-edge { fill: none; stroke: var(--c-cord-lead-dark); stroke-linecap: round; }
.cord__grommet { fill: var(--c-cord-lead-dark); stroke: var(--c-cord-rim); }
.cord__screw { fill: var(--c-cord-metal-lit); stroke: var(--c-cord-lead-dark); }
.cord__slot { fill: none; stroke: var(--c-cord-lead-dark); stroke-linecap: round; }
.cord__ring { fill: none; stroke: var(--c-cord-lead-dark); }
.cord__face-l { fill: var(--c-cord-lead-lit); }
.cord__face-m { fill: var(--c-cord-lead); }
.cord__face-r { fill: var(--c-cord-lead-dark); }
.cord__shine { fill: none; stroke: var(--c-cord-shine); stroke-linecap: round; }
.cord__rim { fill: none; stroke: var(--c-cord-rim); stroke-linejoin: round; }
.cord__focus { fill: none; stroke: var(--c-focus); stroke-width: var(--focus-ring); opacity: 0; }
.cord:focus-visible .cord__focus { opacity: 1; }