/* Tide gauge, leftover tank, harbour board. Labels sit beside the object, never on it. */

:root {
  --hero-copy-block: 20rem;
  --waterline-origin: calc(var(--nav-h) + var(--hero-copy-block) + var(--space-24) + var(--space-16));
  --stage-min-desktop: 360px;
  --stage-min-phone: 240px;
  --gauge-col: 8.5rem;
  --gauge-gap: var(--space-24);
}

html { overflow-anchor: none; }

body > .site-nav.nav-rail {
  position: fixed;
  top: 16px;
  padding: 0 16px;
}
.site-nav.nav-rail.is-away { transform: none; }

button.nav-menu.ui-press { display: none; }

.harbour-stage {
  --object-fill: 100%;
  background: transparent;
  border: 0;
}
.tide-well {
  background: transparent;
}
.tide-well canvas,
.tide-well .object-still {
  position: relative;
  z-index: 1;
  background: transparent;
}
.tide-contact { display: none; }

@media (min-width: 768px) {
  .nav-menu,
  button.nav-menu.ui-press { display: none; }
}
@media (max-width: 767px) {
  body > .site-nav.nav-rail { top: 0; padding: 0; }
  button.nav-menu.ui-press { display: inline-flex; }
  .tide-contact { display: none; }
  .waterline::before,
  .waterline::after { display: none; }
}

.waterline {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--waterline-origin);
  height: 2px;
  background: transparent;
  transform: none;
  z-index: 3;
  pointer-events: none;
}
.waterline::before,
.waterline::after {
  content: "";
  position: absolute;
  top: 0;
  height: 2px;
  width: calc(var(--gutter) - var(--space-16));
  background: var(--accent-deep);
}
.waterline::before { left: 0; }
.waterline::after { right: 0; }

.tide-wash {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--waterline-origin);
  background: var(--tint);
  transform: none;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

body > *:not(.waterline):not(.tide-wash):not(.skip):not(.site-nav):not(.nav-scrim):not(.nav-sheet) { position: relative; z-index: 1; }
.site-nav { z-index: 40; }

.harbour-head,
.guide-step,
.section-head,
.faq-list,
.harbour-note,
.docs-article,
.lab-inputs,
.missing-tide,
.site-disclaimer,
.harbour-reads,
.lab-out,
.text-block {
  position: relative;
  z-index: 8;
  background: var(--ground);
}
.harbour-head { background: transparent; }

.waterline-gutter {
  height: var(--space-48);
  width: 100%;
  position: relative;
}
.waterline-gutter::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--accent-deep);
}

.harbour > .harbour-head {
  min-height: var(--hero-copy-block);
}

.tide-board {
  display: grid;
  gap: var(--space-24);
  width: min(100% - (var(--gutter) * 2), 88rem);
  margin-inline: auto;
  align-items: start;
}

.harbour-stage {
  height: auto;
  min-height: var(--stage-min-desktop);
  background: transparent;
  border: 0;
  grid-template-columns: minmax(0, 1fr);
}
.tide-well {
  min-height: var(--stage-min-desktop);
  background: transparent;
}

.harbour-gauge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16) var(--space-20);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.harbour-gauge > .instrument-title,
.harbour-gauge > .instrument-caption {
  grid-column: 1 / -1;
}

.guide-step {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-content: start;
  padding: var(--space-16) 0;
  border-top: 1px solid var(--hairline);
  min-width: 0;
}
.guide-step__n { grid-row: 1; }
.guide-step h3 { grid-row: 2; }
.guide-step .instrument-caption { grid-row: 3; }
.guide-step__control { grid-row: 4; display: grid; gap: var(--space-24); min-width: 0; }
.guide-step__control input[type="range"] { width: 100%; }
.guide-step__group { display: grid; gap: var(--space-8); min-width: 0; }
.guide-step__readout { grid-row: 5; display: grid; gap: var(--space-4); min-width: 0; }
.guide-step__value { margin: 0; }

.guide-step__n {
  color: var(--accent-deep);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.guide-step h3 {
  font-size: var(--step-1);
  font-weight: 600;
  max-width: 18ch;
}

.instrument-caption,
.unit-label {
  font-size: var(--step-0);
  line-height: 1.45;
  max-width: 36ch;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

.example-holding,
.guide-step label,
.guide-step__readout,
.guide-step__value {
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--ink);
}

.example-holding {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink-soft);
  margin: 0;
}

.guide-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0;
}

.guide-result__item {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.guide-result p {
  margin: 0;
}

.guide-result__label {
  font-size: 14px;
  color: var(--ink-soft);
}

.guide-result__figure {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.25em;
  max-width: none;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 2.2vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--ink);
  line-height: 1.2;
}

.guide-result__figure .factor-read {
  display: inline;
  min-width: 0;
  font-size: inherit;
  font-family: inherit;
  color: var(--accent-deep);
}

.guide-result__to {
  font-size: inherit;
}

.guide-result__note {
  font-size: var(--fs-body);
  max-width: 36ch;
}

.share-note {
  font-size: var(--step-0);
  color: var(--ink);
}

.tide-gauge {
  display: grid;
  gap: var(--space-8);
  align-content: start;
  min-width: 0;
  z-index: 8;
  pointer-events: none;
  background: var(--ground);
  padding: var(--space-8) 0 0;
}
.tide-gauge__body {
  display: grid;
  grid-template-columns: var(--gauge-col);
  width: var(--gauge-col);
  column-gap: var(--gauge-gap);
  min-height: 0;
}
.tide-gauge__marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-16);
  pointer-events: auto;
}

.tide-gauge__title,
.left-tank-wrap h3,
.instrument-title {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin: 0;
}

.tide-gauge__rail {
  position: relative;
  min-height: 12rem;
  height: 12rem;
  width: 100%;
  margin: 0;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ink);
}

.tide-gauge__marker {
  position: absolute;
  right: 0;
  left: auto;
  width: 11px;
  height: 2px;
  background: var(--accent-deep);
  bottom: 50%;
  transform: translate(50%, 50%);
  pointer-events: none;
}

.cycle-tick {
  position: absolute;
  right: 10px;
  left: 0;
  bottom: calc(var(--tick) / 32 * 100%);
  transform: translateY(50%);
  font: var(--step-0)/1 var(--font-mono);
  color: var(--ink);
  background: transparent;
  padding: 0;
  white-space: nowrap;
  text-align: right;
  overflow: hidden;
  max-width: 100%;
}

.cycle-tick::before {
  content: "";
  position: absolute;
  left: 100%;
  right: auto;
  top: 50%;
  width: 7px;
  height: 1px;
  margin-left: 3px;
  background: var(--ink);
}



.depth-mark {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-8);
  color: var(--ink);
}

.gauge-share {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--step-0);
}

.left-tank-wrap {
  display: grid;
  gap: var(--space-12);
  min-width: 0;
}

.left-tank {
  position: relative;
  width: min(100%, 5.5rem);
  height: 14rem;
  border: 1px solid var(--ink);
  background: var(--ground);
  overflow: hidden;
}

.left-tank__water,
.left-tank__water-live,
.left-tank__held,
.left-tank__rock {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  transform-origin: center bottom;
}

.left-tank__water { bottom: 0; background: var(--ink); opacity: 0.18; transform: scaleY(1); }
.left-tank__water-live { bottom: 0; background: var(--ink); opacity: 0.45; transform: scaleY(0.5); }
.left-tank__held { bottom: 0; background: var(--band); transform: scaleY(0.5); }
.left-tank__rock { bottom: 0; background: var(--accent); transform: scaleY(0.5); }
.left-tank__cap {
  position: absolute;
  left: 50%;
  top: var(--space-8);
  transform: translateX(-50%);
  white-space: nowrap;
}

.harbour-reads {
  display: grid;
  gap: var(--space-16);
  margin: 0;
}

.harbour-reads div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--space-8);
}

.harbour-reads dd { margin: 0; }

.split-wide {
  display: grid;
  gap: var(--space-32);
}

.tide-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  padding-block: var(--space-32);
  list-style: none;
}

.tide-mark {
  display: grid;
  gap: var(--space-12);
  border-top: 1px solid var(--accent-deep);
  padding-top: var(--space-16);
}

.tide-mark p { margin: 0; max-width: 22ch; }

.harbour-read {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  font: var(--fs-label)/1.5 var(--font-mono);
  border-top: 1px solid var(--ink);
  padding-top: var(--space-12);
  position: relative;
  z-index: 8;
  background: var(--ground);
}

.harbour-note { max-width: 52ch; display: grid; gap: var(--space-16); }

.rule-draws {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-32);
  margin-top: var(--space-40);
}

.rule-draw {
  width: 100%;
  height: auto;
  color: var(--ink);
  background: var(--ground);
}
.rule-draw .draw-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.rule-draw .draw-fill {
  opacity: 1;
}
body.js-ready .rule-draw .draw-stroke { stroke-dashoffset: 1; }
body.js-ready .rule-draw .draw-fill { opacity: 0; }
body.js-ready .is-in .rule-draw .draw-fill { opacity: 1; }
.rule-draw text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: currentColor;
}

.tide-pics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  list-style: none;
  margin: var(--space-40) 0 0;
  padding: 0;
}

.tide-pic {
  width: 72px;
  height: 72px;
  color: var(--ink);
  overflow: visible;
}
.pic-basin { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pic-water { fill: var(--ink); opacity: 0.4; }
.pic-rock { fill: var(--accent); }
.pic-line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.receipt-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-12);
}

.receipt-slip {
  border: 1px solid var(--ink);
  padding: var(--space-16);
  background: var(--card);
  font: var(--fs-label)/1.5 var(--font-mono);
  transform-origin: top center;
}

.band-wide { background: transparent; }

.rule-draw-caption {
  margin-top: var(--space-8);
}

@media (min-width: 1024px) {
  .tide-board {
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    align-items: start;
  }
  .harbour-gauge { grid-template-columns: minmax(0, 1fr); }
  .harbour-stage {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-8));
    height: auto;
    min-height: var(--stage-min-desktop);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  .tide-well {
    grid-column: 1;
    grid-row: 1;
    height: min(52vh, 28rem);
    min-height: var(--stage-min-desktop);
    background: transparent;
  }
  .tide-gauge { grid-column: 1; grid-row: 2; }
  .split-wide {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    align-items: start;
  }
  .split-wide .section-head { grid-column: 1 / -1; }
  .guide-result { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-result__figure {
    white-space: nowrap;
    font-size: clamp(1.75rem, 2.2vw, 2.25rem);
  }
}

@media (min-width: 900px) {
  .harbour-stage {
    height: auto;
    min-height: var(--stage-min-desktop);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  .tide-well {
    grid-column: 1;
    grid-row: 1;
    height: min(52vh, 28rem);
    min-height: var(--stage-min-desktop);
    background: transparent;
  }
  .lab-page .harbour-stage { height: auto; min-height: var(--stage-min-desktop); }
  .lab-page .tide-well { height: min(52vh, 28rem); min-height: var(--stage-min-desktop); }
}

@media (max-width: 1023px) {
  .tide-board { grid-template-columns: 1fr; }
  .harbour-gauge { grid-template-columns: minmax(0, 1fr); }
  .guide-step__control { width: 100%; }
}

@media (max-width: 899px) {
  .harbour-stage {
    height: auto;
    min-height: var(--stage-min-phone);
    grid-template-columns: minmax(0, 1fr);
  }
  .tide-well {
    height: min(48vh, 24rem);
    min-height: var(--stage-min-phone);
    background: transparent;
  }
}

@media (max-width: 767px) {
  .tide-steps, .tide-pics, .rule-draws, .harbour-gauge { grid-template-columns: minmax(0, 1fr); }
  .guide-step__control,
  .ui-range,
  .guide-step__group { width: 100%; }
  .tide-gauge {
    min-height: 0;
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
  }
  .tide-gauge__marks { grid-template-columns: 1fr; }
  .tide-gauge__rail { min-height: 10rem; height: 10rem; }
  .left-tank { height: 12rem; }
  .depth-mark { font-size: var(--step-0); }
  .harbour-stage { min-height: var(--stage-min-phone); height: auto; background: transparent; }
  .tide-well { min-height: var(--stage-min-phone); height: auto; background: transparent; }
  .tide-still { min-height: 260px; display: block; }
  .guide-result { grid-template-columns: minmax(0, 1fr); }
  .guide-result__figure {
    white-space: nowrap;
    font-size: clamp(1.75rem, 2.2vw, 2.25rem);
  }
}

.rule-draw .tick-label {
  font-size: 12px;
}

.nav-wordmark,
.nav-sheet__title,
.foot-brand {
  overflow: visible;
}
.nav-wordmark img,
.nav-mark,
svg.nav-mark,
svg.brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 0;
  overflow: visible;
  object-fit: contain;
  display: block;
  flex: none;
  margin: 0;
}
.nav-sheet__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
button.nav-menu.ui-press,
.nav-menu {
  overflow: visible;
}
.nav-menu svg.nav-menu__mark {
  width: 24px;
  height: 24px;
  background: none;
  overflow: visible;
  display: block;
}
.nav-menu svg.nav-menu__mark::before,
.nav-menu svg.nav-menu__mark::after {
  content: none;
  display: none;
}
.ui-tip,
.ui-tip-wrap,
.ui-tip.ui-press {
  overflow: visible;
}
.ui-tip svg.ui-tip__mark,
svg.ui-tip__mark {
  width: 16px;
  height: 16px;
  overflow: visible;
  display: block;
}
.tide-pic,
.tide-pics,
.cta-rise,
.cta-quiet {
  overflow: visible;
}
svg.cta-arrow {
  width: 16px;
  height: 16px;
  overflow: visible;
  flex: none;
}

@media (max-width: 390px) {
  .nav-mark,
  svg.nav-mark,
  svg.brand-mark { width: 24px; height: 24px; }
}

/* The object cell includes a separate control row below the measured canvas. */
.tide-object-slot { grid-column: 1; grid-row: 1; min-width: 0; }
.tide-object-slot .tide-well { width: 100%; height: min(52vh, 28rem); }
.tide-well canvas, .tide-well .object-still, .tide-well .tide-still {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: 100%;
}
.tide-well .tide-still { overflow: hidden; }
.harbour-stage:not(.is-still):not(.harbour-stage--still) .tide-still { display: none; }
.harbour-stage--still .tide-still { display: block; }
.harbour-stage--still .object-still { display: none; }
.tide-controls { position: relative; display: flex; justify-content: flex-end; padding-top: 8px; min-height: 44px; }
.tide-object-slot .tide-controls .pause-toggle.ui-press { display: inline-flex !important; align-items: center; justify-content: center; position: static; font-size: 12px; min-width: 44px; min-height: 44px; width: auto; border-radius: 999px; }
@media (max-width: 767px) {
  .tide-object-slot .tide-well { height: 300px; min-height: 260px; }
  .harbour-stage:not(.is-still) .tide-well canvas:not([hidden]) { display: block !important; }
}

@media (max-width: 767px) {
  .harbour-stage:not(.is-still) .pause-toggle:not([hidden]) { display: inline-flex !important; }
}

/* Hidden attributes override responsive still rules, including inline SVG. */
.tide-well [hidden] { display: none !important; }
.tide-well .tide-still:not([hidden]) { display: block; }