@charset "utf-8";
/* ============================================================================
   HIVEMIND TIDES — LIVE INSTRUMENT
   ----------------------------------------------------------------------------
   The front-door hero: the plate made explorable. Everything here composes on
   top of site/style.css — the tokens, the grid, the type roles and the focus
   ring are all inherited. Nothing is fetched; there are no remote resources.

   The plate keeps its own ground (#07090C, the sheet's ink) inside the stage;
   the room around it stays --ground. Accent comes from
   [data-plate="hivemind-tides"] on the section.
   ========================================================================== */

/* -- 0. The imprint rail above the plate ------------------------------------ */

.site-bar { padding-top: var(--sp-4); }
.site-bar__row {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule-faint);
}
.site-bar__mark { color: var(--ink); }
/* The imprint rail keeps to one line on a phone: the artwork wants the room. */
@media (max-width: 39.99em) {
  .site-bar__more,
  .tides__head-meta--wide { display: none; }
  .site-bar { padding-top: var(--sp-3); }
}
.site-bar__jump {
  margin-left: auto;
  color: var(--ink-faint);
  text-decoration: none;
}
.site-bar__jump:hover { color: var(--ink); }

.tides {
  --sheet:      #07090C;
  --cream:      #ECE4D4;
  --rust:       #CF4A2A;
  --amber:      #F0B23C;
  --panel-w:    clamp(17rem, 24vw, 21.5rem);
  --stage-h:    clamp(24rem, 64svh, 34rem);

  padding-top: var(--sp-5);
  padding-bottom: var(--sp-6);
  row-gap: 0;
}

/* -- 1. Head ---------------------------------------------------------------- */

.tides__head { padding-top: var(--sp-4); }
.tides__eyebrow { margin-bottom: var(--sp-3); }
.tides__eyebrow b { color: var(--accent); font-weight: 500; }

.tides__title {
  font-family: var(--sans);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 0.88;
  color: var(--ink);
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}

.tides__standfirst {
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: 1.58;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.tides__standfirst strong { color: var(--ink); font-weight: 400; }

.tides__head-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
}

/* On a laptop the title sits beside its own standfirst, so the field starts
   near the top of the window instead of a screen and a half down. */
@media (min-width: 64em) {
  .tides__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-6);
    align-items: end;
    padding-top: var(--sp-3);
  }
  .tides__eyebrow { grid-column: 1 / -1; margin-bottom: var(--sp-5); }
  .tides__title { margin-bottom: 0; font-size: clamp(2.9rem, 4vw, 4.2rem); }
  .tides__standfirst { max-width: 46ch; }
  .tides__head-meta { grid-column: 1 / -1; margin-top: var(--sp-4); }
}
.tides__head-meta a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.tides__head-meta a:hover { border-bottom-color: var(--accent); }

/* -- 2. The instrument shell ------------------------------------------------ */

/* One instrument, five parts. The 1px gap over a rule-coloured ground draws
   every hairline between them, so the panel never needs its own borders.

   Phone order is the order a person uses it in: the field, then the transport,
   then the tools, then the identity card, then the ledger. On a laptop the card
   and ledger fold back into a column beside the field. */
.tides__instrument {
  margin-top: var(--sp-5);
  display: grid;
  gap: 1px;
  background: var(--rule-faint);
  border-block: 1px solid var(--rule-faint);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "transport" "tools" "card" "ledger";
}
.tides-stage      { grid-area: stage; }
.tides__transport { grid-area: transport; }
.tides__tools     { grid-area: tools; }
.tides-card       { grid-area: card; }
.tides-ledger     { grid-area: ledger; }
.tides-panel      { display: contents; }

@media (min-width: 64em) {
  .tides__instrument {
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    /* The stage row is pinned so a long ledger scrolls inside the panel
       instead of stretching the whole instrument down the page. */
    /* The panel occupies the stage row only. If it spanned the control rows,
       its own content height would push them open. */
    grid-template-rows: var(--stage-h) auto auto;
    grid-template-areas:
      "stage     panel"
      "transport transport"
      "tools     tools";
    border: 1px solid var(--rule-faint);
    margin-inline: var(--gutter);
  }
  .tides-panel {
    display: grid;
    grid-area: panel;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .tides-card, .tides-ledger { grid-area: auto; }
}

/* -- 2a. The stage ---------------------------------------------------------- */

.tides-stage {
  position: relative;
  background: var(--sheet);
  height: var(--stage-h);
  overflow: hidden;
}
@media (min-width: 48em) { .tides { --stage-h: clamp(26rem, 60svh, 40rem); } }
/* On a laptop the stage yields to the transport: it takes what is left of the
   window after the head and the controls, so the whole instrument is one view
   on a tall screen and only just breaks the fold on a short one. */
@media (min-width: 64em) {
  .tides { --stage-h: clamp(24rem, min(60svh, 100svh - 27rem), 42rem); }
}

.tides-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: pan-y;            /* a tap identifies; a drag still scrolls */
  cursor: crosshair;
}
.tides-canvas:focus-visible { outline-offset: -3px; }

/* No script: the finished plate stands in for the instrument, whole. */
html:not(.js) .tides-canvas,
html:not(.js) .tides__transport,
html:not(.js) .tides__tools,
html:not(.js) .tides-panel { display: none; }
html:not(.js) .tides-stage { height: auto; }
.js .tides-fallback { display: none; }

.tides-fallback { padding: var(--sp-4); }
.tides-fallback img { margin-inline: auto; max-height: none; }
.tides-fallback figcaption { margin-top: var(--sp-3); }

/* A one-line hint that fades out of the way once the viewer has touched it. */
.tides-hint {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30px;
  padding: 0 var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.tides-hint span { color: var(--ink-faint); }
.tides-stage.is-touched .tides-hint { opacity: 0; }
.tides-hint--fine { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tides-hint--fine  { display: inline; }
  .tides-hint--touch { display: none; }
}

/* Once a current is named, the strip stops advertising the interaction and
   reports the reading instead. On a phone the identity card sits far below the
   fold, so this line is the only feedback a tap gets — it has to carry the
   answer, not a hint. It is aria-hidden: the card, the ledger and #tides-alt
   are the accessible readouts. */
.tides-hint .tides-hint__live {
  display: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tides-hint.is-live .tides-hint--fine,
.tides-hint.is-live .tides-hint--touch { display: none; }
.tides-hint.is-live .tides-hint__live { display: block; }
.tides-stage.is-touched .tides-hint.is-live { opacity: 1; }
.tides-hint__live b { color: var(--ink); font-weight: 500; }
.tides-hint__live i { font-style: normal; color: var(--ink-muted); }

/* -- 2b. The panel: inspector over ledger ----------------------------------- */

.tides-card {
  background: var(--ground);
  padding: var(--sp-3) var(--gutter) var(--sp-4);
  position: relative;
}
@media (min-width: 64em) {
  .tides-panel { min-height: 0; overflow: hidden; }
  .tides-card { padding: var(--sp-3); }
}

.tides-card__top {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  justify-content: space-between;
}
.tides-card__name {
  font-family: var(--sans);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--track-title);
  line-height: 1.05;
  color: var(--ink);
}
.tides-card__who { margin-top: 0.3rem; }
.tides-card__who b { color: var(--accent); font-weight: 500; }

.tides-card__close {
  flex: none;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  font: inherit; font-size: 0.95rem; line-height: 1;
  cursor: pointer;
}
.tides-card__close:hover { color: var(--ink); border-color: var(--accent); }
.tides-card[data-pinned="0"] .tides-card__close { visibility: hidden; }

.tides-card__figs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
}
.tides-fig__n {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}
.tides-fig--add .tides-fig__n  { color: var(--cream); }
.tides-fig--drop .tides-fig__n { color: var(--accent); }
.tides-fig__l { display: block; margin-top: 0.35rem; }

.tides-card__when {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule-faint);
}
.tides-card__when b { color: var(--ink-muted); font-weight: 500; }

.tides-spark {
  width: 100%; height: 3.25rem;
  display: block;
  margin-top: var(--sp-2);
}
@media (min-width: 64em) { .tides-spark { height: 2.6rem; } }
.tides-card__rows { margin-top: var(--sp-2); display: grid; gap: 0.15rem; }
.tides-card__rows div {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: var(--track-meta);
  color: var(--ink-faint);
}
.tides-card__rows b { color: var(--ink-muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* -- 2c. The ledger --------------------------------------------------------- */

.tides-ledger {
  background: var(--ground);
  padding: var(--sp-4) var(--gutter);
  min-height: 0;
}
@media (min-width: 64em) {
  /* The ledger is the field written out as text. It scrolls inside the panel,
     and fades at the foot so the second half is visibly there to be reached. */
  .tides-ledger {
    padding: var(--sp-3) var(--sp-3) var(--sp-5);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent 100%);
  }
}
.tides-ledger__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.tides-ledger__group + .tides-ledger__group { margin-top: var(--sp-4); }
.tides-ledger__key { color: var(--ink-faint); }
.tides-ledger__key::before {
  content: ""; display: inline-block;
  width: 0.85rem; height: 2px; margin-right: 0.45rem;
  vertical-align: 0.22em;
  background: var(--k, var(--ink-faint));
}
.tides-ledger__group--add  { --k: var(--cream); }
.tides-ledger__group--drop { --k: var(--rust); }

.tides-row {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.35rem;
  margin-left: -0.35rem;
  background: transparent;
  border: 0; border-radius: 1px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.tides-row::before {                    /* the volume bar, behind the type */
  content: "";
  position: absolute; left: 0; bottom: 0.1rem;
  height: 2px; width: var(--w, 0%);
  background: var(--k, var(--ink-faint));
  opacity: 0.5;
  transition: width var(--dur) var(--ease);
}
.tides-row:hover { background: var(--ground-raised); }
.tides-row.is-on { background: var(--ground-raised); }
.tides-row.is-on::after {
  content: ""; position: absolute; left: -0.35rem; top: 0; bottom: 0;
  width: 2px; background: var(--accent);
}
.tides-row__i {
  font-family: var(--mono); font-size: var(--text-xs);
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.tides-row__n {
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tides-row.is-on .tides-row__n,
.tides-row:hover .tides-row__n { color: var(--ink); }
.tides-row__v {
  font-family: var(--mono); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* -- 3. Transport ----------------------------------------------------------- */

.tides__transport {
  background: var(--ground);
  padding: var(--sp-3) var(--gutter);
  display: grid;
  gap: var(--sp-3);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}
@media (min-width: 64em) { .tides__transport { padding-inline: var(--sp-4); } }
.tides__transport > .tides-scrub { justify-self: stretch; }
@media (min-width: 23em) {
  .tides__transport { grid-template-columns: auto minmax(0, 1fr); }
  .tides-btn--break { grid-column: 1 / -1; }
}
@media (min-width: 48em) {
  .tides__transport { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tides-btn--break { grid-column: auto; }
}

.tides-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.tides-btn:hover { color: var(--ink); border-color: var(--accent); }
.tides-btn__glyph { color: var(--accent); font-size: 0.8em; line-height: 1; }
.tides-btn--break { border-color: rgba(240, 178, 60, 0.42); }
.tides-btn--break .tides-btn__glyph { color: var(--amber); }
.tides-btn--break:hover { border-color: var(--amber); }
.tides-btn[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); }

.tides-scrub { display: grid; gap: 0.3rem; min-width: 0; }
.tides-scrub__read {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 0 var(--sp-3);
}
.tides-scrub__read b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.tides-scrub__read .is-break { color: var(--amber); }

/* The range control, restyled but still a real input[type=range]. */
.tides-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.4rem;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.tides-range::-webkit-slider-runnable-track {
  height: 3px; background: var(--rule);
  background-image: linear-gradient(var(--amber), var(--amber));
  background-size: var(--played, 0%) 100%;
  background-repeat: no-repeat;
}
.tides-range::-moz-range-track {
  height: 3px; background: var(--rule);
}
.tides-range::-moz-range-progress { height: 3px; background: var(--amber); }
.tides-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5.5px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--sheet);
  box-shadow: 0 0 0 1px var(--amber);
}
.tides-range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--amber);
}

/* -- 4. Tools: side toggle, search, entry points ---------------------------- */

.tides__tools {
  background: var(--ground);
  padding: var(--sp-3) var(--gutter) var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 56em) {
  .tides__tools {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-4);
  }
}
@media (min-width: 64em) { .tides__tools { padding-inline: var(--sp-4); } }

.tides-sides { border: 0; padding: 0; margin: 0; }
.tides-sides legend { padding: 0; margin-bottom: 0.45rem; }
.tides-sides__row { display: flex; }
.tides-sides label {
  display: inline-flex; align-items: center;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--rule);
  margin-left: -1px;
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  white-space: nowrap;
}
.tides-sides label:first-of-type { margin-left: 0; }
.tides-sides input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tides-sides input:checked + span { color: var(--ink); }
.tides-sides label:has(input:checked) {
  border-color: var(--accent); background: var(--ground-raised); z-index: 1;
}
.tides-sides label:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 2px; z-index: 2;
}

.tides-find { position: relative; }
.tides-find__label { display: block; margin-bottom: 0.45rem; }
.tides-find__input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: var(--ground-sunk);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans); font-size: var(--text-sm);
  letter-spacing: 0;
}
.tides-find__input::placeholder { color: var(--ink-faint); }
.tides-find__input:focus-visible { border-color: var(--accent); }

.tides-find__out {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin-top: 2px;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  max-height: 15rem; overflow-y: auto;
}
.tides-find__out:empty { display: none; }
.tides-find__out button {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: 0.45rem 0.7rem;
  background: transparent; border: 0; color: var(--ink-muted);
  font-family: var(--sans); font-size: var(--text-sm);
  text-align: left; cursor: pointer;
}
.tides-find__out button:hover,
.tides-find__out button:focus-visible { background: var(--ground); color: var(--ink); }
.tides-find__out span { color: var(--ink-faint); font-family: var(--mono); font-size: var(--text-xs); }

.tides-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: var(--sp-3);
  align-items: center;
}
.tides-chips__lead { margin-right: 0.2rem; }
.tides-chip {
  padding: 0.35rem 0.65rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tides-chip:hover { color: var(--ink); border-color: var(--accent); }
.tides-chip[aria-pressed="true"] {
  color: var(--ink); border-color: var(--accent); background: var(--ground-raised);
}

/* -- 5. Legend + honesty ----------------------------------------------------- */

.tides__legend {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-faint);
  display: grid; gap: var(--sp-4);
}
@media (min-width: 56em) {
  .tides__legend { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); }
}

.tides-scale__bar {
  height: 3px;
  width: var(--bar, 6rem);
  max-width: 100%;
  background: var(--ink-muted);
  margin: 0.55rem 0 0.4rem;
  position: relative;
}
.tides-scale__bar::before,
.tides-scale__bar::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; width: 1px;
  background: var(--ink-faint);
}
.tides-scale__bar::before { left: 0; }
.tides-scale__bar::after  { right: 0; }
.tides-scale__keys { display: grid; gap: 0.3rem; margin-top: var(--sp-3); }
.tides-scale__keys div { display: flex; align-items: center; gap: 0.5rem; }
.tides-scale__keys i {
  width: 1.4rem; height: 2px; flex: none;
  background: var(--k);
  font-style: normal;
}

.tides-note { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; }
.tides-note + .tides-note { margin-top: var(--sp-2); }
.tides-note strong { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

/* -- 5b. The imprint statement, now second on the page ----------------------- */

/* The publication's own masthead has been demoted to an h2 below the plate, so
   it is set a step down: the artwork is the front door and holds the display
   size. Only index.html loads this sheet, so no plate page is affected. */
.masthead { padding-top: var(--sp-7); }
.masthead__title { font-size: var(--text-2xl); }

/* -- 6. The break annotation ------------------------------------------------- */

.tides-break {
  margin-top: var(--sp-4);
  border-left: 2px solid var(--amber);
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-3);
  background: linear-gradient(to right, rgba(240, 178, 60, 0.07), rgba(240, 178, 60, 0));
}
.tides-break.is-live {
  background: linear-gradient(to right, rgba(240, 178, 60, 0.18), rgba(240, 178, 60, 0));
  transition: background var(--dur-slow) var(--ease);
}
.tides-break__key { color: var(--amber); margin-bottom: var(--sp-2); }
.tides-break__body { color: var(--ink-muted); font-size: var(--text-base); line-height: 1.6; }
.tides-break__body strong { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }
.tides-break__wire { margin-top: var(--sp-3); display: grid; gap: 0.35rem; }
.tides-break__wire li {
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: var(--track-meta); color: var(--ink-faint);
  line-height: 1.5;
}
.tides-break__wire b { color: var(--ink-muted); font-weight: 500; }

/* -- 7. Phone: the panel sits under the stage, not beside it ----------------- */

/* Below the split, the two ledger groups go side by side as soon as there is
   room for two columns of names. */
@media (min-width: 40em) and (max-width: 63.99em) {
  .tides-ledger__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .tides-ledger__group + .tides-ledger__group { margin-top: 0; }
}

/* -- 7b. Touch: every control gets a 44px target ----------------------------- */

/* Sized for a finger rather than a cursor. The type does not change; only the
   box around it grows, so the instrument reads the same and hits differently. */
@media (pointer: coarse) {
  .tides-btn        { min-height: 44px; }
  .tides-chip       { min-height: 44px; padding-block: 0.55rem; }
  .tides-row        { min-height: 44px; }
  .tides-find__input{ min-height: 44px; }
  .tides-sides label{ min-height: 44px; }
  .tides-find__out button { min-height: 44px; }

  /* The range keeps its 3px track; the input box around it becomes a thumb-
     sized strip, and the thumb grows to match. */
  .tides-range { height: 44px; }
  .tides-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8.5px; }
  .tides-range::-moz-range-thumb     { width: 18px; height: 18px; }

  .tides-card__close { width: 44px; height: 44px; }

  /* In-flow links on this page only. tides-live.css is loaded by the front door
     and by nothing else, so padding these does not reach the plate pages. The
     padding is vertical only: an inline box grows its hit area without moving
     the line, so nothing reflows. */
  .tides__head-meta a,
  .site-bar__jump,
  .lead-entry__link,
  .plate-entry__link { padding-block: 0.75rem; }
  .skip-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* -- 8. Motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tides-row::before { transition: none; }
  .tides-hint { transition: none; }
}