@import url("/fonts/fonts.css");

/* Pool deck palette: plaster ground, deep-end ink, depth-marker navy on white tile.
   Test-kit colors (DPD pink, phenol red) only ever encode a reading. */
:root {
  --plaster: #f1f5f4;
  --surface: #ffffff;
  --ink: #0d2b36;
  --muted: #4e6770;
  --line: #d2dfe0;
  --accent: #0f5e8c;
  --tile: #fbfdfd;
  --grout: #c4d3d6;
  --marker: #152b5c;
  --dpd: #e0457b;
  --ph-1: #e8b923;
  --ph-2: #ee8a35;
  --ph-3: #e0524e;
  --ph-4: #b8336a;

  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale: major third (1.25) from an 18px base. */
  --s-1: 0.8rem;
  --s0: 1rem;
  --s1: 1.25rem;
  --s2: 1.563rem;
  --s3: 1.953rem;
  --s4: 2.441rem;
  --s5: 3.052rem;
  --s6: 3.815rem;
  --s7: 4.768rem;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plaster: #0a161b;
    --surface: #10232a;
    --ink: #e2eef0;
    --muted: #93aeb6;
    --line: #1f3943;
    --accent: #6cc3e8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --plaster: #0a161b;
  --surface: #10232a;
  --ink: #e2eef0;
  --muted: #93aeb6;
  --line: #1f3943;
  --accent: #6cc3e8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font: var(--s0)/1.55 var(--body);
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

.wrap { max-width: 1040px; margin: 0 auto; padding-inline: 20px; }

/* header */
.nav { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 22px; }
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.brand b { font: 800 var(--s2)/1 var(--display); }
.brand span { color: var(--muted); font-size: var(--s-1); }
.nav-links { display: flex; gap: 22px; font-size: var(--s-1); }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--ink); text-decoration: underline; }

/* calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 56px; padding-block: 24px 80px; align-items: start; }
.calc h1 { font: 800 clamp(var(--s4), 7vw, var(--s6))/0.98 var(--display); }
.calc .intro { color: var(--muted); margin-top: 16px; max-width: 30em; }

.tabs { display: flex; gap: 4px; margin-top: 32px; border-bottom: 2px solid var(--line); }
.tabs button {
  appearance: none; border: 0; background: none; color: var(--muted); cursor: pointer;
  font: 700 var(--s0) var(--body); padding: 10px 14px; margin-bottom: -2px; border-bottom: 3px solid transparent;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.field { display: grid; gap: 6px; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--s-1); font-weight: 700; color: var(--muted); }
.field .row { display: flex; }
.field input, .field select {
  width: 100%; min-width: 0; font: var(--s1) var(--body); color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; font-variant-numeric: tabular-nums;
}
.field select { font-size: var(--s0); padding-block: 12px; }
.field .row input { flex: 1; border-radius: 10px 0 0 10px; }
.field .row select { flex: none; width: auto; border-left: 0; border-radius: 0 10px 10px 0; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }

/* test-kit color strip: where the reading is, and where it should be */
.strip { grid-column: 1 / -1; position: relative; height: 14px; border-radius: 7px; margin: 26px 0 30px; }
.strip.ph { background: linear-gradient(90deg, var(--ph-1), var(--ph-2) 45%, var(--ph-3) 75%, var(--ph-4)); }
.strip.fc { background: linear-gradient(90deg, #fbe6ee, var(--dpd)); }
.strip.ta { background: linear-gradient(90deg, #dcecc8, #3f8f6b); }
.strip i {
  position: absolute; top: -5px; width: 4px; height: 24px; border-radius: 2px; background: var(--ink);
  transform: translateX(-2px);
}
.strip i.goal { background: none; border-left: 3px dotted var(--ink); width: 0; border-radius: 0; }
.strip i span {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: var(--s-1); color: var(--muted); font-variant-numeric: tabular-nums;
}
.strip .ends { position: absolute; top: -24px; width: 100%; display: flex; justify-content: space-between; font-size: var(--s-1); color: var(--muted); }

/* the answer, painted like a depth marker on pool tile — the page's one bold element */
.answer { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); }
.tile {
  background-color: var(--tile);
  background-image:
    linear-gradient(var(--grout) 2px, transparent 2px),
    linear-gradient(90deg, var(--grout) 2px, transparent 2px);
  background-size: 25% 50%;
  background-position: -1px -1px;
  border: 2px solid var(--grout);
  border-radius: 4px;
  padding: 22px 26px 24px;
  color: var(--marker);
}
.tile .verb { font: 700 var(--s1) var(--body); }
.tile .amount {
  font: 900 clamp(var(--s6), 14vw, calc(var(--s7) * 1.5))/0.9 var(--display);
  text-transform: uppercase; font-variant-numeric: tabular-nums; margin-top: 4px;
}
.tile .amount small { font-size: 0.42em; margin-left: 0.1em; text-transform: none; }
.tile .what { font: 700 var(--s1)/1.25 var(--body); margin-top: 12px; }
.tile.none .amount { font-size: clamp(var(--s5), 9vw, var(--s6)); text-transform: none; }
.answer .why { margin-top: 16px; }
.answer .fine { color: var(--muted); font-size: var(--s-1); margin-top: 10px; max-width: 34em; }

/* sections */
section.band { padding-block: 80px; border-top: 1px solid var(--line); }
.band h2 { font: 800 var(--s4)/1 var(--display); }
.band .lede { color: var(--muted); margin-top: 14px; max-width: 34em; }

.app { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.app .shot { border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: var(--surface); max-width: 320px; }
.facts { margin: 32px 0 0; display: grid; gap: 18px; max-width: 34em; }
.facts dt { font-weight: 700; }
.facts dd { margin: 2px 0 0; color: var(--muted); }
.price { margin-top: 36px; max-width: 34em; }
.price strong { font: 800 var(--s3)/1 var(--display); display: block; }
.price span { color: var(--muted); display: block; margin-top: 6px; }
.soon { display: inline-block; margin-top: 24px; font-weight: 700; border: 2px solid var(--ink); border-radius: 10px; padding: 10px 16px; }

.ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 32px; align-items: start; }
.ref p { max-width: 34em; }
.ref p + p { margin-top: 14px; }
.table-scroll { overflow-x: auto; }
table.cya { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line); }
table.cya th, table.cya td { padding: 9px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.cya th:first-child, table.cya td:first-child { text-align: left; }
table.cya thead th { font-size: var(--s-1); color: var(--muted); font-weight: 700; }
table.cya td.t { font-weight: 700; }
table.cya caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: var(--s-1); padding-top: 10px; }

.qa { margin-top: 32px; display: grid; gap: 28px; max-width: 38em; }
.qa h3 { font-size: var(--s1); }
.qa p { color: var(--muted); margin-top: 6px; }

/* home */
.home { padding-block: 64px 96px; max-width: 38em; }
.home h1 { font: 800 clamp(var(--s5), 10vw, var(--s7))/0.95 var(--display); }
.home p { margin-top: 20px; font-size: var(--s1); color: var(--muted); }
.home .app-link { display: flex; gap: 18px; align-items: center; margin-top: 44px; color: var(--ink); text-decoration: none; }
.home .app-link img { width: 64px; height: 64px; border-radius: 14px; }
.home .app-link b { font: 800 var(--s2)/1.1 var(--display); display: block; }
.home .app-link span { color: var(--muted); }
.home .app-link:hover b { text-decoration: underline; }

/* privacy */
.prose { max-width: 720px; padding-block: 16px 64px; }
.prose h1 { font: 800 clamp(var(--s4), 6vw, var(--s5))/1 var(--display); margin-bottom: 10px; }
.prose h2 { font-size: var(--s1); margin: 32px 0 6px; }
.prose p { margin: 0 0 12px; max-width: 36em; }
.muted { color: var(--muted); }

footer { border-top: 1px solid var(--line); padding-block: 28px 44px; color: var(--muted); font-size: var(--s-1); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; }
footer a { color: var(--muted); }

@media (max-width: 860px) {
  .calc, .app, .ref { grid-template-columns: 1fr; gap: 40px; }
  .answer { position: static; }
  .app .shot { max-width: 260px; }
}
@media (max-width: 440px) {
  .fields { grid-template-columns: 1fr; }
  .nav-links { gap: 14px; }
  .brand span { display: none; }
}