/* Plank 5 identity: "the lake survey". A data lake charted like a body of
   water: bathymetric-chart blues, survey-paper light mode, the deep after
   dark, one buoy-orange accent for actions and emphasis. Decade partitions
   read as depth strata. Chart mark colors are validated (lightness band,
   chroma floor, CVD separation, contrast) on both surfaces with the dataviz
   six-checks script. All assets self-hosted; the CSP allows nothing else. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* the chart room: survey paper, lake blue, buoy orange */
  --bg: #ecf1f4;
  --surface: #fafcfd;
  --border: #d2dde4;
  --ink: #13232f;
  --ink-2: #3e5261;
  --ink-3: #677d8c;
  --deep: #0a1926;
  --lake: #0b74ad;
  --lake-soft: #dcebf4;
  --buoy: #c74e1e;
  --buoy-soft: #f7e2d8;
  --chip-bg: #e4ebef;
  --chart-main: #0b74ad;   /* validated: light surface #fafcfd */
  --chart-accent: #c74e1e;
  --grid: #dbe4ea;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* the deep: blue-black water, brighter marks */
    --bg: #0a141d;
    --surface: #101c27;
    --border: #223140;
    --ink: #e8eef3;
    --ink-2: #bac8d2;
    --ink-3: #8296a4;
    --lake: #2e9bc4;
    --lake-soft: rgba(46, 155, 196, 0.14);
    --buoy: #e8632e;
    --buoy-soft: rgba(232, 99, 46, 0.15);
    --chip-bg: #182734;
    --chart-main: #2e9bc4;   /* validated: dark surface #101c27 */
    --chart-accent: #e8632e;
    --grid: #1d2c39;
  }
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; } /* beats the display:flex/grid on stat rows */
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

h1, h2, .stage-what, button, .foot-brand, figcaption {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
}

/* ---- hero: the surface, sounded ---- */
header.hero {
  position: relative; color: #eef4f7; padding: 62px 0 46px;
  background:
    /* depth contours over the water */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420' viewBox='0 0 900 420'%3E%3Cg fill='none' stroke='%23bfe0ee' stroke-opacity='.14'%3E%3Cpath d='M-20 90 C160 60 300 130 470 100 S780 60 920 95'/%3E%3Cpath d='M-20 170 C180 135 330 210 500 175 S790 140 920 180'/%3E%3Cpath d='M-20 260 C170 220 340 300 520 258 S800 225 920 265'/%3E%3Cpath d='M-20 350 C190 310 350 390 530 350 S800 320 920 355'/%3E%3C/g%3E%3C/svg%3E") center / 900px 420px repeat,
    linear-gradient(180deg, rgba(7, 17, 27, 0.85) 0%, rgba(7, 17, 27, 0.68) 50%, rgba(7, 17, 27, 0.88) 100%),
    url("/images/hero-water-800.webp") center 60% / cover no-repeat #07111b;
  /* depth-tint scale closes the hero: shallow to deep */
  border-bottom: 9px solid transparent;
  border-image: linear-gradient(180deg, #7fcbe3 0 3px, #2e9bc4 3px 6px, #0b5c8c 6px 9px) 1;
}
@media (min-width: 800px) {
  header.hero { background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420' viewBox='0 0 900 420'%3E%3Cg fill='none' stroke='%23bfe0ee' stroke-opacity='.14'%3E%3Cpath d='M-20 90 C160 60 300 130 470 100 S780 60 920 95'/%3E%3Cpath d='M-20 170 C180 135 330 210 500 175 S790 140 920 180'/%3E%3Cpath d='M-20 260 C170 220 340 300 520 258 S800 225 920 265'/%3E%3Cpath d='M-20 350 C190 310 350 390 530 350 S800 320 920 355'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(7, 17, 27, 0.85) 0%, rgba(7, 17, 27, 0.68) 50%, rgba(7, 17, 27, 0.88) 100%),
    url("/images/hero-water-1200.webp"); }
}
@media (min-width: 1400px) {
  header.hero { background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420' viewBox='0 0 900 420'%3E%3Cg fill='none' stroke='%23bfe0ee' stroke-opacity='.14'%3E%3Cpath d='M-20 90 C160 60 300 130 470 100 S780 60 920 95'/%3E%3Cpath d='M-20 170 C180 135 330 210 500 175 S790 140 920 180'/%3E%3Cpath d='M-20 260 C170 220 340 300 520 258 S800 225 920 265'/%3E%3Cpath d='M-20 350 C190 310 350 390 530 350 S800 320 920 355'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(7, 17, 27, 0.85) 0%, rgba(7, 17, 27, 0.68) 50%, rgba(7, 17, 27, 0.88) 100%),
    url("/images/hero-water-2000.webp"); }
}
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #7fcbe3; }
h1 { font-size: clamp(31px, 5.5vw, 47px); line-height: 1.05; margin-top: 12px; font-weight: 700; letter-spacing: -0.01em; }
.hero .lede { margin-top: 15px; max-width: 720px; font-size: 17px; color: #e8eff3; }

.hero-meta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; }
.hero-meta > div {
  min-width: 130px; padding: 9px 14px 8px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #8fb0c2; background: rgba(6, 15, 24, 0.55); border: 1px solid rgba(127, 203, 227, 0.28);
  border-left: 3px solid #2e9bc4; border-radius: 6px;
}
.hero-meta strong {
  display: block; color: #7fcbe3; font-size: 17px; letter-spacing: 0;
  font-family: "Bricolage Grotesque", sans-serif; font-variant-numeric: tabular-nums; margin-bottom: 2px;
}

/* minmax(0,1fr): grid items must be allowed to shrink below the SQL pre's
   unwrappable min-content width, or every panel overflows narrow viewports */
main { padding: 38px 0 30px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.chart-grid > figure.chart { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 26px 24px 24px; }

.sect-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lake); margin-bottom: 10px;
}
.sect-label::before {
  content: ""; width: 9px; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, #7fcbe3 0 4px, #2e9bc4 4px 8px, #0b5c8c 8px 12px);
}
h2 { font-size: 21px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.muted { color: var(--ink-3); font-size: 14px; }
.error { color: var(--buoy); font-size: 14px; font-weight: 600; margin-top: 10px; }
a { color: var(--lake); font-weight: 600; }
code { font-size: 0.9em; background: var(--chip-bg); padding: 1px 5px; border-radius: 5px; }

/* ---- pipeline strip: source to shore ---- */
.pipeline { margin-top: 18px; display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.stage {
  flex: 1 1 150px; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border); border-top: 3px solid var(--lake);
  border-radius: 10px; padding: 12px 14px; background: var(--bg);
}
.stage-what { font-weight: 700; font-size: 14px; }
.stage-how { font-size: 12px; color: var(--ink-3); }
.stage-fact { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--lake); font-variant-numeric: tabular-nums; }
.arrow { align-self: center; color: var(--ink-3); font-weight: 700; }

/* ---- charts ---- */
.chart-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.chart.wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .chart-grid { grid-template-columns: 1fr; } }
figure.chart { margin: 0; }
figcaption { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.cap-note { font-weight: 600; color: var(--ink-3); }
.plot svg { display: block; width: 100%; height: auto; }
.plot text { font: 11px ui-sans-serif, system-ui, sans-serif; fill: var(--ink-3); }
.plot .val { font-weight: 700; fill: var(--ink-2); }
.plot .gridline { stroke: var(--grid); stroke-width: 1; }
.plot .baseline { stroke: var(--ink-3); stroke-width: 1; }

.tooltip {
  position: fixed; z-index: 10; pointer-events: none;
  background: var(--deep); color: #e8eef3;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  padding: 6px 9px; border-radius: 7px; max-width: 260px;
  border: 1px solid rgba(127, 203, 227, 0.3);
  box-shadow: 0 4px 14px rgba(4, 12, 20, 0.35);
}
.tooltip small { display: block; font-weight: 400; opacity: 0.75; }

/* ---- live SQL ---- */
.qpick { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.qpick button {
  border: 1px solid var(--border); background: var(--chip-bg); color: var(--ink-2);
  font: 600 13px/1 inherit; font-family: inherit; padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.qpick button[aria-selected="true"] { background: var(--lake-soft); border-color: var(--lake); color: var(--ink); }
.qbox { margin-top: 14px; }
.qstory { margin-bottom: 8px; }
pre.sql {
  background: var(--deep); color: #bfe0ee; font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  padding: 14px 16px; border-radius: 10px; overflow-x: auto; white-space: pre;
  border-left: 3px solid var(--lake);
}
pre.sql code { background: none; padding: 0; font-size: inherit; }
.qrun { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
button#run-btn, button#race-btn {
  background: var(--buoy); color: #fff7f2; border: 0; border-radius: 9px;
  font-weight: 700; font-size: 14px; padding: 11px 18px; cursor: pointer;
}
button#run-btn:hover, button#race-btn:hover { filter: brightness(1.08); }
button#run-btn:disabled, button#race-btn:disabled { opacity: 0.55; cursor: wait; }
.qstats { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-block; background: var(--chip-bg); border: 1px solid var(--border);
  color: var(--ink-2); font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.chip.hit { background: var(--lake-soft); border-color: var(--lake); }
.results-scroll { margin-top: 14px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- the depth chart ---- */
.map-fig { margin-top: 16px; }
.map-cap { margin-top: 8px; margin-bottom: 0; font-weight: 500; color: var(--ink-3); font-size: 12.5px; }
.plot .county { fill: none; stroke: var(--grid); stroke-width: 1; }
.plot .sounding { fill: var(--chart-main); fill-opacity: 0.26; stroke: var(--chart-main); stroke-opacity: 0.7; stroke-width: 1; }
.plot text.city {
  font-size: 12px; font-weight: 700; fill: var(--ink-2);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}

/* ---- drop a line ---- */
.search-row { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.search-row input {
  flex: 1 1 260px; min-width: 0; padding: 10px 14px;
  font: 600 16px/1.3 inherit; font-family: inherit; letter-spacing: 0.02em;
  color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  text-transform: uppercase;
}
.search-row input:focus { outline: 2px solid var(--lake); outline-offset: 1px; border-color: var(--lake); }
.search-row input::placeholder { color: var(--ink-3); text-transform: none; font-weight: 500; }
button#search-btn {
  background: var(--buoy); color: #fff7f2; border: 0; border-radius: 9px;
  font-weight: 700; font-size: 14px; padding: 11px 18px; cursor: pointer;
}
button#search-btn:hover { filter: brightness(1.08); }
button#search-btn:disabled { opacity: 0.55; cursor: wait; }
.found { margin: 14px 0 10px; font-size: 15px; font-weight: 700; }
.small { font-size: 12.5px; }

/* ---- under the glass ---- */
.glass { margin-top: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.glass-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lake); margin-bottom: 10px;
}
.glass .small { margin-top: 8px; }
.bands { display: flex; gap: 2px; height: 26px; }
.band { flex: 1 0 4px; border-radius: 4px; background: var(--chip-bg); }
.band.on { background: var(--chart-main); }
.stageflow { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stage-box {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--lake);
  border-radius: 8px; padding: 8px 12px;
}
.stage-name { font-weight: 700; font-size: 12.5px; }
.stage-io { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---- the time machine ---- */
.ice-ledger { margin: 16px 0 14px; display: grid; gap: 8px; }
.ice-snap {
  display: grid; grid-template-columns: 110px 1fr; gap: 2px 14px; align-items: baseline;
  border: 1px solid var(--border); border-left: 3px solid var(--lake);
  border-radius: 8px; padding: 9px 13px; background: var(--bg);
}
.ice-op { grid-row: span 2; font-weight: 700; font-size: 13px; color: var(--lake); text-transform: uppercase; letter-spacing: 0.06em; }
.ice-what { font-size: 13.5px; font-weight: 600; }
.ice-meta { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
button#ice-btn {
  background: var(--buoy); color: #fff7f2; border: 0; border-radius: 9px;
  font-weight: 700; font-size: 14px; padding: 11px 18px; cursor: pointer;
}
button#ice-btn:hover { filter: brightness(1.08); }
button#ice-btn:disabled { opacity: 0.55; cursor: wait; }
#ice-out pre.sql { margin-top: 16px; }
.ice-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 720px) { .ice-grid { grid-template-columns: 1fr; } }
.ice-grid .results-scroll { margin-top: 6px; }

/* ---- race ---- */
.race { margin-top: 16px; display: grid; gap: 10px; }
.race-row { display: grid; grid-template-columns: 130px 1fr 190px; align-items: center; gap: 12px; }
.race-label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.race-track { background: var(--chip-bg); border-radius: 6px; height: 18px; overflow: hidden; }
.race-fill { height: 100%; border-radius: 0 4px 4px 0; width: 0; transition: width 0.6s ease; }
.race-fill.raw { background: var(--chart-accent); }
.race-fill.cur { background: var(--chart-main); }
.race-num { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.race-verdict { margin-top: 4px; font-size: 14px; font-weight: 700; }
@media (max-width: 600px) { .race-row { grid-template-columns: 100px 1fr; } .race-num { grid-column: 2; } }

/* ---- rigging panel ---- */
.arch { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- footer: the lake floor. Night water in both schemes, like the hero;
   the depth-tint scale reads as descending past the survey into the deep. ---- */
footer {
  margin-top: 14px; background: #07111b; color: #b6cbd8; font-size: 13px;
  border-top: 9px solid transparent;
  border-image: linear-gradient(180deg, #7fcbe3 0 3px, #2e9bc4 3px 6px, #0b5c8c 6px 9px) 1;
}
.foot-grid { display: grid; gap: 28px; padding: 34px 20px 28px; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } }
.foot-brand { font-weight: 700; color: #eef4f7; font-size: 15px; }
.foot-desc { margin-top: 8px; font-size: 12px; line-height: 1.6; color: #8fb0c2; }
.foot-head { font-weight: 700; color: #7fcbe3; }
.foot-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.foot-list a { color: #b6cbd8; font-weight: 400; text-decoration: none; }
.foot-list a:hover { color: #7fcbe3; text-decoration: underline; text-underline-offset: 2px; }
.foot-bar {
  border-top: 1px solid rgba(127, 203, 227, 0.2); padding: 14px 20px; text-align: center;
  font-size: 11.5px; color: #8fb0c2;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}