/* ===========================================================================
   Picture urls carry ?v=N. Bump it in BOTH public/index.html and this file
   whenever anything under public/img/ is rewritten: a long cache on a stable
   filename means a replaced picture is simply never fetched again, and the fix
   looks like it did not happen. That is what hid the de-rocked lighthouse.

   HIGHWATER. The page is the screen of a 1984 tide station.
   Composition, scale, type and palette are read off art/ref/terminal-reference.jpg
   (see NOTE.md > Reference teardown). Five bands edge to edge on black, no
   header, no window chrome, no footer. Hard edges only: no radius, no shadow,
   no gradient inside a shape.

   Every divider is its own .hr element, never a border on a text box: a border
   turns that box into the text's "visible box" and presses the text to its edge
   (RULES/05_TYPE_AND_SURFACES.md > Inner padding, measured by tools/shots.mjs).
   =========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo-VF.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Departure";
  src: url("/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* inks, sampled off the reference */
  --black: #010101;
  --blue: #0159bd;
  --aqua: #0dbbba;
  --pale: #ddfadb;
  --phos: #3afeb2;
  --phos-bar: #04d960;
  --phos-dim: #1d7f5f;
  --red: #c02415;
  --white: #e5f6f0;
  /* from his avatar and banner: the lantern is the colour of a new high */
  --gold: #fdcd65;
  --gold-hot: #fee27d;

  --gut: clamp(18px, 3.4vw, 66px);   /* the reference's 3.4% side margins */
  --rule: 6px;
  --pad: clamp(22px, 2vw, 36px);     /* inner padding, never under 1 em */

  /* Departure Mono is an 11 px grid face: only multiples of 11 */
  --mono: 22px;
  --mono-sm: 22px;
  --mono-lg: 33px;
  --mono-xl: 44px;

  font-synthesis: none;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--black); }

body {
  background: var(--black);
  color: var(--phos);
  font: var(--mono)/1.5 "Departure", ui-monospace, monospace;
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}

img { display: block; image-rendering: pixelated; }
::selection { background: var(--phos); color: var(--black); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* a divider, drawn as its own element so no text box carries a border */
.hr { height: 3px; background: var(--phos-dim); margin: 18px 0 22px; }

/* ---------------------------------------------------------------- the glass */
.glass { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glass__sea {
  position: absolute; inset: -4%;
  background: var(--black) url("/img/bg-sea.jpg?v=4") center / cover no-repeat;
  filter: blur(7px) saturate(0.7) brightness(0.55);
  opacity: 0.85;
}
.glass__beam {
  position: absolute; left: 50%; top: 18%;
  width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax;
  background: conic-gradient(from 0deg,
    rgba(253, 205, 101, 0.16) 0deg, rgba(253, 205, 101, 0) 22deg,
    rgba(253, 205, 101, 0) 340deg, rgba(253, 205, 101, 0.10) 360deg);
  animation: sweep 24s linear infinite;
  opacity: 0.5;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.glass__scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.42) 2px 4px);
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) { .glass__beam { animation: none; } }

/* --------------------------------------------------------------- the screen */
.screen {
  position: relative; z-index: 1;
  padding: clamp(14px, 1.8vh, 24px) var(--gut) clamp(28px, 4vh, 56px);
  max-width: 2200px; margin-inline: auto;
}

/* BAND 1: the state line. White heavy caps, cap height 3% of the frame. */
.band--state { padding-bottom: clamp(8px, 1.2vh, 16px); }
.state {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(24px, 3.6vh, 44px);
  line-height: 1.04; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--white);
}
.state[data-tone="high"] { color: var(--gold-hot); }

.rule-red { height: var(--rule); background: var(--red); }

/* BAND 2: the channel selector, the reference's bracketed grammar */
.band--select {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 22px;
  padding: clamp(12px, 1.5vh, 20px) 0 clamp(12px, 1.6vh, 22px);
}
.select__label { color: var(--phos-dim); text-transform: uppercase; }
.select__list { display: flex; flex-wrap: wrap; gap: 0 22px; list-style: none; }
.select__list a {
  color: var(--phos-dim); text-decoration: none; text-transform: uppercase;
  display: inline-block; padding: 6px 0; min-height: 34px;
}
.select__list a::before,
.select__list a::after { content: "\00a0"; }
.select__list a:hover { color: var(--phos); }
.select__list a[aria-current="page"] { color: var(--pale); }
.select__list a[aria-current="page"]::before { content: "["; }
.select__list a[aria-current="page"]::after { content: "]"; }

/* ------------------------------------------------------- BAND 3: the water
   The plate carries the brand and the mechanic and nothing else, exactly as
   the reference's plate carries only its logotype.                          */
.plate {
  position: relative;
  height: clamp(260px, 29vh, 330px);
  background: var(--blue);
  /* the reference frames its plate in a thin pale rule, inside the black. Three
     sides only: the water has to run off the bottom edge of the banner. */
  box-shadow:
    inset 0 3px 0 var(--pale),
    inset 3px 0 0 var(--pale),
    inset -3px 0 0 var(--pale);
  overflow: hidden;
  isolation: isolate;
}

/* the frozen wipe IS the water surface: --level is 0 (dry) to 1 (at the mark) */
.plate__water {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: calc(34% + var(--level, 0) * 20%);
  transition: height 1.2s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
}
.plate__tide {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: url("/img/water-column.png?v=4") center top / 100% 240px no-repeat;
  image-rendering: pixelated;
  animation: lap 9s ease-in-out infinite alternate;
}
@keyframes lap { from { transform: translateY(5px); } to { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .plate__tide { animation: none; } }

/* the gold hairline: the one line the water has to cross */
.plate__markline {
  position: absolute; left: 0; right: 0; bottom: 46%; z-index: 3;
  border-top: 4px solid var(--gold);
}
.markline__tag {
  position: absolute; left: var(--pad); top: calc(100% + 10px);
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 20px 34px;
  background: var(--black);
  font-size: var(--mono-sm); line-height: 1.2;
  text-transform: uppercase; color: var(--gold);
}
.markline__fig { color: var(--gold-hot); font-size: var(--mono-lg); }

.wordmark {
  position: relative; z-index: 4;
  padding: clamp(18px, 2.4vh, 32px) var(--pad) 0;
  max-width: 66%;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(40px, 7.2vw, 146px);
  line-height: 0.88; letter-spacing: -0.012em;
  color: #fff;
}

/* LAYER 3: the lighthouse. Its shape is the pixel map in public/lighthouse.js;
   its size and place are these three numbers and nothing else.
     --house-block   one pixel block. The water's bands measure 5 px at 1920,
                     so the tower is built on the same grid.
     --house-right   how far in from the plate's right edge
     --house-bottom  water kept under the base, so it never meets the edge */
.plate__house {
  --house-block: clamp(3px, 0.26vw, 5px);
  --house-right: clamp(14px, 2.6vw, 64px);
  --house-bottom: clamp(12px, 1.6vh, 18px);

  position: absolute; z-index: 2;
  right: var(--house-right);
  bottom: var(--house-bottom);
  width: calc(17 * var(--house-block));
  height: calc(42 * var(--house-block));
}
/* no plate, no frame, no fill: the canvas is transparent and carries only the
   silhouette, so the water behind it shows through everywhere the map is '.' */
.house {
  display: block; width: 100%; height: 100%;
  background: none; border: 0;
  image-rendering: pixelated;
}
/* the glow is not baked into the sprite: a drop-shadow follows the real alpha,
   so the lantern lights without a black halo around the tower */
/* the glow belongs to the lamp, not to the sprite: a drop-shadow follows the
   canvas's real alpha, so lighting it can never put a halo round the tower */
.plate[data-state="high"] .house {
  filter:
    drop-shadow(0 0 14px rgba(254, 226, 125, .95))
    drop-shadow(0 0 46px rgba(253, 205, 101, .65))
    drop-shadow(0 0 110px rgba(253, 205, 101, .4));
}

/* the green readout line the reference prints directly under its plate */
.premise {
  padding: clamp(10px, 1.2vh, 16px) var(--pad);
  font-size: var(--mono-sm); line-height: 1.4; color: var(--phos);
  max-width: 108ch;
}

/* -------------------------------------------- BAND 4: the dial plate (links) */
.dial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(18px, 1.8vw, 36px);
  align-items: start;
  padding: var(--pad);
  border: 3px solid var(--phos-dim);
  background: rgba(1, 1, 1, 0.82);
}
.dial__tile { width: clamp(76px, 6.4vw, 120px); aspect-ratio: 1; flex: none; }
.dial__tile img { width: 100%; height: 100%; object-fit: cover; }

.dial__body { min-width: 0; }
.dial__eyebrow {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: var(--mono-sm); text-transform: uppercase; color: var(--phos-dim);
}
.dial__ticker { color: var(--gold); }
.dial__ca {
  margin: 8px 0 14px;
  font-size: clamp(var(--mono), 1.3vw, var(--mono-lg));
  line-height: 1.3; color: var(--pale);
  min-width: 0; overflow-wrap: anywhere; user-select: all;
}
.dial__ca[data-empty="1"] { color: var(--phos-dim); user-select: none; }

.keys { display: flex; flex-wrap: wrap; gap: 12px; }
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px;
  padding: 10px clamp(26px, 1.6vw, 32px);
  border: 3px solid var(--phos);
  background: var(--black); color: var(--phos);
  font: var(--mono)/1.2 "Departure", ui-monospace, monospace;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: transform .06s steps(1), background .12s;
}
.key__text { display: block; transform: translateY(1px); }
.key__mark { width: 26px; height: 26px; flex: none; image-rendering: auto; }
.key__mark--x { width: 22px; height: 22px; filter: invert(1); }
.key:hover { background: #052e22; }
.key:active { transform: translate(2px, 2px); }
.key:disabled,
.key[aria-disabled="true"] { border-color: #163b30; color: #2d6453; cursor: not-allowed; pointer-events: none; }
.key[aria-disabled="true"] .key__mark { opacity: .4; }
.key--primary { border-color: var(--gold); color: var(--gold-hot); min-height: 64px; }
.key--primary:hover { background: #2a1f05; }

.dial__id { text-align: right; }
.dial__idline { font-size: var(--mono-sm); color: var(--phos-dim); text-transform: uppercase; }
.dial__redmark { width: clamp(34px, 2.6vw, 52px); height: auto; margin: 12px 0 0 auto; }

/* ------------------------------------------------- BAND 5: the gauge (bars) */
.gauge {
  margin-top: clamp(12px, 1.4vh, 18px);
  border: 3px solid var(--phos);
  background: rgba(1, 1, 1, 0.82);
  padding: var(--pad);
}
.gauge__head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.gauge__title { font-size: var(--mono); text-transform: uppercase; color: var(--phos); }
.gauge__watching { font-size: var(--mono-sm); color: var(--phos-dim); text-transform: uppercase; }
.gauge .hr { margin: 12px 0 16px; }

.gauge__rows { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.4vw, 44px); }
.gauge__label { font-size: var(--mono-sm); text-transform: uppercase; color: var(--phos-dim); }
.gauge__fig { margin: 8px 0 12px; font-size: var(--mono-lg); line-height: 1; color: var(--pale); }
.gauge__fig i { font-style: normal; font-size: var(--mono); color: var(--phos-dim); }

.bar { height: 26px; border: 3px solid var(--phos-dim); padding: 3px; }
.bar > span { display: block; height: 100%; transition: width 1s cubic-bezier(.22,.61,.36,1); }
.bar--solid > span { background: var(--phos-bar); }
.bar--dither > span {
  background-color: var(--gold);
  background-image:
    linear-gradient(45deg, rgba(1,1,1,.85) 25%, transparent 25% 75%, rgba(1,1,1,.85) 75%),
    linear-gradient(45deg, rgba(1,1,1,.85) 25%, transparent 25% 75%, rgba(1,1,1,.85) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}

/* ------------------------------------------------------- the inner channels */
.sheet {
  margin-top: clamp(12px, 1.6vh, 22px);
  border: 3px solid var(--phos-dim);
  background: rgba(1, 1, 1, 0.86);
  padding: clamp(34px, 3.4vh, 48px) clamp(34px, 2.6vw, 52px);
}
.sheet__title {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.02; color: var(--white); text-transform: uppercase;
}
.sheet__lede { margin-top: 18px; max-width: 86ch; font-size: var(--mono); line-height: 1.5; color: var(--pale); }

/* the launch form */
.form { margin-top: clamp(24px, 2.8vh, 38px); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.field { display: block; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { display: block; font-size: var(--mono-sm); text-transform: uppercase; color: var(--phos-dim); margin-bottom: 10px; }
.field__input {
  display: block; width: 100%; min-height: 56px; padding: 10px var(--pad);
  border: 3px solid var(--phos-dim);
  background: var(--black); color: var(--pale);
  font: var(--mono)/1.4 "Departure", ui-monospace, monospace;
}
.field__input::placeholder { color: #255d4b; }
.field__input:focus { border-color: var(--phos); }

.terms {
  margin-top: clamp(24px, 2.8vh, 38px);
  border: 3px solid var(--gold);
  padding: var(--pad);
  color: var(--gold);
}
.terms--manual { margin-top: clamp(30px, 3.6vh, 52px); }
.terms--manual p:not(.terms__title) { color: var(--pale); max-width: 76ch; }
.terms__title { font-size: var(--mono); text-transform: uppercase; color: var(--gold-hot); margin-bottom: 16px; }
.terms__list { list-style: none; display: grid; gap: 12px; max-width: 80ch; }
.terms__list li { font-size: var(--mono-sm); line-height: 1.5; padding-left: 30px; position: relative; }
.terms__list li::before { content: ">"; position: absolute; left: 0; color: var(--gold-hot); }
.terms__list b { color: var(--gold-hot); font-weight: 400; }

.form__note { margin-top: 18px; font-size: var(--mono-sm); color: var(--phos-dim); }
.key--primary { margin-top: clamp(22px, 2.6vh, 34px); width: 100%; }

/* the board of marks and the claims list */
.board { margin-top: clamp(22px, 2.6vh, 34px); display: grid; gap: 3px; }
.board__empty {
  border: 3px solid var(--phos-dim);
  padding: clamp(26px, 3vh, 38px) var(--pad);
  font-size: var(--mono-sm); color: var(--phos-dim); text-align: center;
}
.row {
  display: grid; grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(0,1fr)) auto;
  gap: 20px; align-items: center;
  border: 3px solid var(--phos-dim); padding: 20px var(--pad);
}
.row__name { font-size: var(--mono); color: var(--pale); min-width: 0; overflow-wrap: anywhere; }
.row__k { font-size: 16px; text-transform: uppercase; color: var(--phos-dim); display: block; margin-bottom: 6px; }
.row__v { font-size: var(--mono); color: var(--phos); }
.row__v--gold { color: var(--gold-hot); }

.lookup { margin-top: clamp(22px, 2.6vh, 34px); display: grid; gap: 20px; grid-template-columns: minmax(0,1fr) auto; align-items: end; }

/* the manual */
.steps { list-style: none; margin-top: clamp(26px, 3vh, 42px); display: grid; gap: clamp(24px, 2.8vh, 38px); }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 2.4vw, 44px); align-items: start; }
.step__no {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: clamp(44px, 5vw, 84px); line-height: .9; color: var(--blue);
  -webkit-text-stroke: 2px var(--phos-dim);
}
.step__title { font-size: var(--mono-lg); line-height: 1.15; color: var(--white); font-weight: 400; margin-bottom: 12px; text-transform: uppercase; }
.step__body p { font-size: var(--mono); line-height: 1.5; color: var(--pale); max-width: 88ch; }
.hl { color: var(--gold-hot); font-weight: 400; }

.risk {
  margin-top: clamp(30px, 3.6vh, 52px);
  border: 3px solid var(--red);
  padding: var(--pad);
  font-size: var(--mono-sm); line-height: 1.5; color: #c9a7a2; max-width: 92ch;
}

/* the copy toast */
.toast {
  position: fixed; z-index: 9; left: 50%; bottom: 36px; transform: translate(-50%, 180%);
  padding: 16px var(--pad); border: 3px solid var(--phos); background: var(--black);
  color: var(--phos); font-size: var(--mono); text-transform: uppercase;
  transition: transform .2s steps(3);
}
.toast[data-open="1"] { transform: translate(-50%, 0); }
.toast[data-tone="bad"] { border-color: var(--red); color: var(--red); }

/* ------------------------------------------------------------------ 1500 px */
@media (max-width: 1500px) {
  .wordmark { font-size: clamp(40px, 8.8vw, 150px); max-width: 70%; }
}

/* ------------------------------------------------------------- phone, 820 px */
@media (max-width: 820px) {
  :root { --rule: 5px; }
  /* a fixed height, so the water level and the mark line stay percentages of
     the plate instead of fighting a padding that does not scale */
  .plate { height: 340px; }
  .wordmark { max-width: 100%; font-size: clamp(40px, 12vw, 92px); padding-top: 16px; }
  .plate__markline { bottom: 42%; }
  .markline__tag {
    left: var(--pad); top: calc(100% + 8px);
    max-width: calc(100% - var(--pad) * 2 - 108px);
    padding: 14px 20px; gap: 4px 12px;
  }
  .markline__fig { font-size: var(--mono); }
  .plate__house { --house-block: 3px; --house-right: 10px; --house-bottom: 14px; }
  .band--select { gap: 0 16px; }

  .dial { grid-template-columns: auto minmax(0, 1fr); }
  .dial__id { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .dial__redmark { margin: 0; }
  .keys { display: grid; grid-template-columns: 1fr 1fr; }

  .gauge__rows { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  .lookup { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr 1fr; }
  .row__name { grid-column: 1 / -1; }
  .step { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 460px) {
  :root { --mono: 20px; --mono-sm: 18px; --mono-lg: 24px; --mono-xl: 24px; --pad: 32px; }
  .wordmark { font-size: clamp(22px, 7.6vw, 64px); }
  .markline__tag { padding: 16px 24px; }
  .markline__fig { font-size: var(--mono); }
  .keys { grid-template-columns: 1fr; }
  .key { padding-inline: 24px; }
}