/* Proof of Ping: one printed signal sheet. Duotone, grained, hairline cells.
   Built to his SATURN poster (NOTE.md > Reference teardown); the ink, the grid rhythm,
   the second colour and the tuning scale are this project's own. */

@font-face { font-family: "Panchang"; src: url("../fonts/Panchang-Extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Sporting"; src: url("../fonts/SportingGrotesque-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sporting"; src: url("../fonts/SportingGrotesque-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("../fonts/Tabular-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("../fonts/Tabular-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ground: #070a0c;
  --cell: #0a1115;
  --cell-2: #0d171c;
  --line: #17343d;
  --line-2: #235b6b;
  --ink: #4de1ff;
  --ink-dim: #79a9b8;
  --ink-mute: #5a8b9b;
  --hot: #ff5a3c;
  --hot-dim: #b84a36;
  --paper: #cff4ff;
  --radius: 14px;
  --gutter: 14px;
  --pad: 32px;
  --edge: 32px;
  --mast-top: 16px;
  --mast-gap: 28px;
  --display: "Panchang", "Arial Black", sans-serif;
  --text: "Sporting", "Segoe UI", sans-serif;
  --mono: "Tabular", "Consolas", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--ground); scrollbar-gutter: stable; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* the sheet's own print grain, over everything, moving with nothing */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../img/grain.png");
  background-size: 512px 512px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 60;
}

a { color: inherit; }
::selection { background: var(--ink); color: var(--ground); }

:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* ---------------------------------------------------------------- the sheet */
.sheet { padding: calc(var(--edge) + var(--mast-top)) var(--edge) 56px; }

/* ------------------------------------------------------------- the masthead */
/* a size container, so the fit is measured against the sheet own content box and never against
   100vw, which still counts the scrollbar and used to push the last letter past the edge */
.masthead { position: relative; container-type: inline-size; margin: 0 0 var(--mast-gap); }
.masthead__word {
  font-family: var(--display);
  font-weight: 800;
  /* fitted edge to edge: with this tracking the advance of "Proof of Ping" is 9.957x the font
     size (measured in the browser; the vw line is the fallback for no container units) */
  font-size: calc((100vw - 2 * var(--edge)) / 9.957);
  font-size: calc(100cqw / 9.957);
  line-height: 0.9;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
  color: var(--ink);
  margin: 0;
  padding: 0.06em 0 0.12em;
  white-space: nowrap;
}
.masthead__scratch {
  position: absolute;
  inset: 0;
  background-image: url("../img/scratch.png");
  background-size: cover;
  opacity: 0.5;
  pointer-events: none;
}
.probe__head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 14px; }
.probe__head .sub { margin: 0; }
.lamp {
  width: 96px;
  height: 96px;
  background: url("../img/neon-arc.png") center / contain no-repeat;
  opacity: 0.3;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.lamp[data-live="1"] { opacity: 1; }
.lamp[data-ping="1"] { animation: ping 0.65s ease-out; }
@keyframes ping { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* ----------------------------------------------------------------- the grid */
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); margin-bottom: var(--gutter); }
.row:last-child { margin-bottom: 0; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
.c12 { grid-column: span 12; }

/* every panel is the same printed cell: one hairline, one radius, its own padding */
.cell {
  position: relative;
  background: var(--cell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  min-width: 0;
  overflow: hidden;
}
.cell--flush { padding: 0; }
.cell--hot { border-color: var(--hot-dim); }

.cell__label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.cell__label b { font-weight: 500; color: var(--ink-dim); }

.value { font-family: var(--mono); font-weight: 700; font-size: 36px; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.value--hot { color: var(--hot); }
.value--sm { font-size: 26px; }
.unit { font-family: var(--mono); font-weight: 500; font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.note { font-size: 17px; color: var(--ink-dim); margin: 10px 0 0; }
.note--tight { margin-top: 6px; }

h2.title { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--ink); }
h3.sub { font-family: var(--text); font-weight: 700; font-size: 23px; line-height: 1.25; margin: 0 0 10px; color: var(--paper); }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- the scale */
/* The navigation is a tuning scale: ticks on a rule, each station with its code. */
.scale { display: block; padding: 0; }
.scale__rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.scale__tick {
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--ink-mute);
  font-family: var(--mono);
  font-weight: 500;
  text-align: left;
  padding: 18px 26px 20px;
  min-height: 92px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.scale__tick:last-child { border-right: 0; }
.scale__tick:hover { color: var(--ink); background: #0c161b; }
.scale__tick[aria-current="page"] { color: var(--ink); background: var(--cell-2); }
.scale__ticks { display: flex; align-items: flex-end; gap: 4px; height: 18px; margin-bottom: 10px; }
.scale__ticks i { display: block; width: 2px; background: var(--line-2); height: 6px; }
.scale__ticks i:nth-child(3n + 1) { height: 14px; }
.scale__tick[aria-current="page"] .scale__ticks i { background: var(--ink); }
.scale__code { display: block; font-size: 16px; letter-spacing: 0.16em; color: inherit; opacity: 0.7; }
.scale__name { display: block; font-family: var(--text); font-weight: 700; font-size: 22px; letter-spacing: 0; line-height: 1.2; margin-top: 2px; color: inherit; }
.scale__lamp {
  position: absolute;
  right: 18px;
  top: 16px;
  width: 30px;
  height: 30px;
  background: url("../img/neon-arc.png") center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.scale__tick[aria-current="page"] .scale__lamp { opacity: 1; }

/* ------------------------------------------------------------------ the map */
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 2560 / 996;
  background: #080e12 url("../img/map-plate.png") center / 100% 100% no-repeat;
  border-radius: calc(var(--radius) - 1px);
}
.map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__strip { padding: 22px var(--pad) var(--pad); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.chips li {
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
  background: #0f1d23;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 11px 18px;
}
.chips li.hot { color: var(--hot); border-color: var(--hot-dim); }
.chips li.empty { color: var(--ink-mute); background: none; border-color: var(--line); }
.chips b { font-weight: 700; }
.map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.map__legend span { display: flex; align-items: center; gap: 9px; }
.map__legend i { width: 11px; height: 11px; border-radius: 50%; display: block; }

/* ---------------------------------------------------------------- controls */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 15px 1.3em;
  line-height: 1.2;
  border: 0;
  border-image: url("../img/plate-key.png") 24 fill / 24px / 0 stretch;
  background: transparent;
  color: var(--ink);
  font-family: var(--text);
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, filter 0.18s ease;
}
.key:hover { filter: brightness(1.28); }
.key:active { transform: translateY(1px); }
.key--hot { border-image-source: url("../img/plate-key-hot.png"); color: var(--hot); }
.key[aria-disabled="true"], .key:disabled { color: var(--ink-mute); filter: none; cursor: not-allowed; opacity: 0.75; }
.key img { height: 20px; width: auto; display: block; }
.key img.mark--dex { height: 24px; border-radius: 5px; }

.field {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  background: #060b0e;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 18px;
}
.field::placeholder { color: #3f626e; }

/* ------------------------------------------------------- rows inside a cell */
.rows { display: grid; gap: 0; }
.rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  position: relative;
}
.rows > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #10272e; }
.rows > div:last-child::after { display: none; }
.rows dt, .rows .k { font-family: var(--text); font-size: 17px; color: var(--ink-dim); min-width: 0; overflow-wrap: anywhere; }
.rows dd, .rows .v { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 20px; color: var(--ink); white-space: nowrap; }

/* a measurement log: the sheet's own ruled strip */
.log { font-family: var(--mono); font-size: 17px; line-height: 1.75; margin: 0; padding: 0; list-style: none; }
.log li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; padding: 7px 0; position: relative; }
.log li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #10272e; }
.log li:last-child::after { display: none; }
.log .t { color: var(--ink-mute); }
.log .m { color: var(--ink-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log .r { font-weight: 700; white-space: nowrap; }
.log .r--ok { color: var(--ink); }
.log .r--no { color: var(--hot); }

/* the four steps */
.steps { counter-reset: s; margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 18px; row-gap: 2px; align-items: start; }
/* the counter is the li's ::before, which is itself a grid item: everything else belongs in column 2 */
.steps li > * { grid-column: 2; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--hot);
  line-height: 1.3;
}
.steps p { font-size: 17px; color: var(--ink-dim); margin: 4px 0 0; }
.steps b { font-family: var(--text); font-weight: 700; font-size: 19px; color: var(--paper); }

/* the call sign: $POP, the mint, the marks */
.mint {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  background: #060b0e;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 18px 22px;
  overflow-wrap: anywhere;
  user-select: all;
  min-height: 56px;
}
.mint[data-empty="1"] { color: var(--ink-mute); user-select: none; }
.callsign__keys { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.callsign__ticker { font-family: var(--display); font-weight: 800; font-size: 58px; line-height: 1; margin: 0 0 16px; color: var(--ink); }

/* a table of targets or regions */
.table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 17px; }
.table th {
  text-align: left;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0 18px 12px 0;
  white-space: nowrap;
  position: relative;
}
.table th::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.table td { padding: 14px 18px 14px 0; color: var(--ink-dim); vertical-align: baseline; position: relative; }
.table td::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #10272e; }
.table tr:last-child td::after { display: none; }
.table td:first-child { color: var(--ink); font-weight: 700; }
.table .num { font-weight: 700; color: var(--ink); white-space: nowrap; }
.table .num--hot { color: var(--hot); }
button.link {
  background: none;
  border: 0;
  padding: 10px 2px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
button.link:hover { color: var(--paper); }

/* the globe of the coverage station */
.globe { width: 100%; max-width: 340px; aspect-ratio: 1; margin: 0 auto; background: url("../img/globe-wire.png") center / contain no-repeat; animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty { font-family: var(--text); font-size: 17px; color: var(--ink-mute); }
/* the one risk sentence on the site: small, muted, once, at the end of the last text block */
.risk { font-family: var(--text); font-size: 16px; line-height: 1.5; color: var(--ink-mute); margin: 22px 0 0; }

code.api { font-family: var(--mono); font-size: 17px; color: var(--paper); background: #060b0e; border: 1px solid var(--line); border-radius: 7px; padding: 5px 18px; overflow-wrap: anywhere; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--cell-2); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 14px 24px; font-family: var(--mono); font-size: 17px; color: var(--ink);
  z-index: 70; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.toast[data-on="1"] { opacity: 1; }

.station { display: none; }
.station[data-open="1"] { display: block; }

/* on a wide window the page gutter grows and the masthead grows with it: the name and the
   scale under it stay in one container, so they keep one left edge */
@media (min-width: 1440px) {
  :root { --edge: 48px; --mast-top: 20px; }
}

/* -------------------------------------------------------------- the phone */
@media (max-width: 1100px) {
  :root { --edge: 22px; --pad: 32px; --gutter: 12px; }
  .c3, .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; }
  .scale__rail { grid-template-columns: repeat(3, 1fr); }
  .scale__tick:nth-child(3n) { border-right: 0; }
  .scale__tick:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
  h2.title { font-size: 32px; }
  .value { font-size: 30px; }
}
@media (max-width: 560px) {
  :root { --edge: 16px; --pad: 26px; --mast-top: 10px; --mast-gap: 24px; }
  /* two lines on the phone, so the name stays big: the widest line is "Proof of", 6.346x */
  .masthead__word {
    font-size: calc((100vw - 2 * var(--edge)) / 6.346);
    font-size: calc(100cqw / 6.346);
    white-space: normal;
  }
  .scale__rail { grid-template-columns: repeat(2, 1fr); }
  .scale__tick { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 86px; padding: 16px 22px; }
  .scale__name { font-size: 20px; }
  .scale__tick:nth-child(2n) { border-right: 0; }
  .scale__tick:nth-last-child(-n + 2) { border-bottom: 0; }
  .callsign__ticker { font-size: 44px; }
  .callsign__keys .key { width: 100%; }
  /* a label and its value stop fighting over one line once the sheet is one column wide */
  .cell__label { display: block; }
  .cell__label b { display: block; margin-top: 4px; }
  .map__legend { gap: 8px 20px; font-size: 16px; }
  .probe__head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .probe__head .lamp { width: 72px; height: 72px; }
  .log li { grid-template-columns: 64px minmax(0, 1fr); }
  .log .r { grid-column: 2; }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rows dd, .rows .v { white-space: normal; }
}

/* at 320 the longest station name has to fit its own cell with an em of air on each side */
@media (max-width: 400px) {
  .scale__tick { padding: 14px 20px; min-height: 78px; }
  .scale__name { font-size: 18px; }
  .scale__code { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .globe { animation: none; }
  .lamp[data-ping="1"] { animation: none; }
}