/* quietwatch. Direction: DESIGN.md, "Mono lab" (2026-09-26). Visual spec: docs/mockups/mono-lab.html.
   One file, no build step. Zero border-radius, no shadows, no gradients: structure is the hairline frame. */

/* ---- fonts: Inter Tight + Geist Mono, OFL, self-hosted latin subsets ------------------ */
@font-face {
  font-family: "Inter Tight";
  src: url("/static/fonts/intertight-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geistmono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens (DESIGN.md; every text pair verified 2026-09-26) ---------------------------- */
:root {
  --bg: #ffffff;
  --bg-2: #fafafa;
  --ink: #161616;       /* 18.1:1 on --bg, 17.3:1 on --bg-2 */
  --ink-2: #505050;     /* body: 8.1:1 / 7.7:1 */
  --ink-3: #727272;     /* muted text: 4.8:1 / 4.6:1 (the mockup's #8a8a8a is 3.5:1, darkened for text) */
  --line: #ebebeb;      /* hairlines, decorative only */
  --pix: var(--ink);    /* the pixel fill; cells override it per state */
  --ring: transparent;  /* the pixel outline; unknown cells use it instead of a fill */

  /* state fills: pixels and squares */
  --ok: #1f9d55;
  --warn: #e08a00;
  --fail: #e5383b;
  --unknown: #9a9a9a;
  /* state text: the same hues darkened until they clear 4.5:1 on both surfaces */
  --ok-text: #197b43;    /* 5.3:1 / 5.1:1 */
  --warn-text: #9a5f00;  /* 5.2:1 / 5.0:1 */
  --fail-text: #cc2b2e;  /* 5.3:1 / 5.1:1 */

  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Inter Tight", system-ui, sans-serif;
  --mono: "Geist Mono", Consolas, Menlo, monospace;
  --frame: 1200px;
  --pad: 40px;
}

/* ---- base ------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.02em;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.mono, code, pre { font-family: var(--mono); letter-spacing: 0; }
a { color: inherit; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- structural hairline frame ---- */
.frame { max-width: var(--frame); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.band { border-bottom: 1px solid var(--line); }
.pad { padding: 0 var(--pad); }
.eyebrow { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink-3); }
.notice { padding: 16px var(--pad); color: var(--ink-2); border-bottom: 1px solid var(--line); background: var(--bg-2); }

/* ---- buttons: square, uppercase, chevron that shifts 3px on hover ---- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px;
  border: 0; cursor: pointer; background: transparent;
  font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: -0.03em; text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn svg { transition: transform 0.25s var(--ease); flex: none; }
.btn:hover svg { transform: translateX(3px); }
.btn.pri { background: var(--ink); color: #fff; }
.btn.pri:hover { background: #000; }
.btn.sec { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.sec:hover { background: var(--ink); color: #fff; }

/* ---- nav ---- */
.nav { display: flex; align-items: stretch; justify-content: space-between; height: 64px; padding-right: 0; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; letter-spacing: -0.04em; text-decoration: none; }
.nav form { display: flex; align-items: stretch; border-left: 1px solid var(--line); }
.nav input { width: 320px; max-width: 40vw; border: 0; padding: 0 20px; background: transparent; outline-offset: -2px; }
.nav input::placeholder { color: var(--ink-3); opacity: 1; }
.nav .btn { height: auto; }

/* ---- hero ---- */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; }
.hero-l { padding: 72px var(--pad) 56px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 28px; }
.num-row { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.big-number { font-size: 168px; font-weight: 500; line-height: 0.78; letter-spacing: -0.07em; }
.h1 { font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -0.045em; max-width: 15ch; padding-bottom: 6px; }
.h1--solo { max-width: 18ch; }
.lede { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
.lede b { color: var(--ink); font-weight: 500; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-r { position: relative; padding: 48px var(--pad); background: var(--bg-2); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.hero-form { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-form input { flex: 1 1 260px; height: 48px; padding: 0 16px; border: 0; box-shadow: inset 0 0 0 1px var(--ink); background: var(--bg); }
.hero-form input::placeholder { color: var(--ink-3); opacity: 1; }
.hero-form input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--fail-text); }
.field-error { flex-basis: 100%; color: var(--fail-text); }
.note { font-size: 13px; color: var(--ink-3); }

/* the health meter: Overall + one row per category, 10 blocks each, 1 block = 10% of that row's checks.
   The share of checks passed, never a weighted score. Colour by state; pending blocks are outlined. */
.meter { display: flex; flex-direction: column; gap: 26px; }
.mrow { display: flex; flex-direction: column; gap: 12px; }
.mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mhead .pct { font-size: 12px; color: var(--ink-2); text-transform: none; }
.pct--live::after { content: var(--count, attr(data-count)); }  /* streamed: each result's <style> sets --count; inline text would outrank it */
.mrow--total .mhead span:first-child { color: var(--ink); font-weight: 600; }
.mrow--total { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.mrow--total .blocks { gap: 8px; }
.blocks { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.blk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; aspect-ratio: 1; --blk: transparent; --ring: var(--line); }
.blk i { display: block; background: var(--blk); box-shadow: inset 0 0 0 1px var(--ring); }
.blk--ok { --blk: var(--ok); --ring: transparent; }
.blk--warn { --blk: var(--warn); --ring: transparent; }
.blk--fail { --blk: var(--fail); --ring: transparent; }
.blk--unknown { --blk: transparent; --ring: var(--unknown); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 9px; height: 9px; display: inline-block; }
.legend__ok { background: var(--ok); }
.legend__warn { background: var(--warn); }
.legend__fail { background: var(--fail); }

/* ---- stats strip ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 28px var(--pad); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .v { font-size: 44px; font-weight: 500; letter-spacing: -0.06em; line-height: 1; }
.stat .v--warn { color: var(--warn-text); }
.stat .v--fail { color: var(--fail-text); }
.stat .k { margin-top: 10px; }

/* ---- section heads ---- */
.sec-head { padding: 88px var(--pad) 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.sec-head h2, .sec-head h1 { font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -0.05em; margin-top: 14px; }
.sec-head p { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 42ch; justify-self: end; }
.sec-head--tight { padding-top: 56px; }

/* ---- the four states: a coloured square plus a word, never colour alone ---- */
.state { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.state i { width: 9px; height: 9px; display: inline-block; background: var(--ink-3); flex: none; }
.state--ok i { background: var(--ok); }
.state--warn i { background: var(--warn); }
.state--warn { color: var(--warn-text); }
.state--fail i { background: var(--fail); }
.state--fail { color: var(--fail-text); }
.state--unknown i { background: transparent; box-shadow: inset 0 0 0 1px var(--unknown); }
.state--pending i { background: var(--line); }
a.state:hover { text-decoration: underline; }

/* ---- needs attention ---- */
.issue { display: grid; grid-template-columns: 120px 1fr 1fr; border-top: 1px solid var(--line); }
.issue > div { padding: 30px var(--pad); min-width: 0; }
.issue .idx { border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.issue h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.04em; }
.issue .d { color: var(--ink-2); margin-top: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.issue .fix { border-left: 1px solid var(--line); background: var(--bg-2); }
.issue .fix p { margin-top: 10px; line-height: 1.55; font-size: 15px; overflow-wrap: anywhere; }
.issue .fix code { font-size: 13px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); padding: 1px 6px; }
.why { display: inline-flex; gap: 8px; align-items: center; margin-top: 16px; font-size: 13px; font-weight: 600; text-transform: uppercase; text-decoration: none; letter-spacing: -0.02em; }
.why:hover { text-decoration: underline; }

/* ---- all checks: three columns ---- */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.col { border-right: 1px solid var(--line); padding: 40px 0 16px; min-width: 0; }
.col:last-child { border-right: 0; }
.col-head { padding: 0 32px 26px; display: flex; flex-direction: column; gap: 18px; }
.icon { display: grid; grid-template-columns: repeat(5, 7px); gap: 3px; }
.icon i { width: 7px; height: 7px; background: var(--ink); }
.icon i.o { background: transparent; }
.col-head h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.04em; }
.col-head .sum { font-size: 14px; color: var(--ink-3); }
.row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 32px; border-top: 1px solid var(--line); transition: background 0.2s var(--ease); }
.row:hover { background: var(--bg-2); }
.row .n { font-size: 15px; font-weight: 500; }
.row .v { font-size: 15px; font-weight: 500; text-align: right; }
.row .dt { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); line-height: 1.45; display: flex; justify-content: space-between; gap: 12px; }
.row .dt > span { overflow-wrap: anywhere; }
.row--warn .v { color: var(--warn-text); }
.row--fail .v { color: var(--fail-text); }

/* ---- live stream (the run's first view) ---- */
.live { border-top: 1px solid var(--line); }
.live-row { display: grid; grid-template-columns: 64px 140px 1fr; gap: 12px; align-items: baseline; padding: 16px var(--pad); border-bottom: 1px solid var(--line); }
.live-row .n { font-weight: 500; }
.live-row .dt { grid-column: 3; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.live-row--pending { color: var(--ink-3); }

/* ---- conversion band ---- */
.cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 56px var(--pad); background: var(--ink); color: #fff; }
.cta h2 { font-size: 36px; font-weight: 500; letter-spacing: -0.05em; line-height: 1.1; max-width: 22ch; }
.cta .btn.pri { background: #fff; color: var(--ink); }
.cta .btn.pri:hover { background: #e9e9e9; }
.cta .btn:focus-visible { outline-color: #fff; }

/* ---- footer ---- */
footer .cols { border-top: 0; }
footer .col { padding: 36px 32px 40px; }
footer b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
footer p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
footer code { font-size: 12px; color: var(--ink); word-break: break-word; }
.cov { padding: 16px var(--pad); font-size: 12px; color: var(--ink-3); }

/* ---- prose pages (/bot, errors) ---- */
.prose { padding: 0 var(--pad) 72px; max-width: 72ch; }
.prose h2 { font-size: 22px; letter-spacing: -0.04em; margin: 36px 0 10px; }
.prose p { color: var(--ink-2); line-height: 1.6; }
.prose p + p { margin-top: 10px; }
.prose code { font-size: 13px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); padding: 1px 6px; }
.prose pre { margin-top: 10px; padding: 14px 16px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.prose pre code { background: none; box-shadow: none; padding: 0; }
.ua { display: block; margin: 0 0 8px; font-size: 13px; overflow-wrap: anywhere; padding: 12px 14px; }

/* ---- the check table on the index ---- */
.checks { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.checks th, .checks td { text-align: left; vertical-align: top; padding: 16px 32px; border-top: 1px solid var(--line); font-weight: 400; }
.checks thead th { font-size: 13px; font-weight: 500; color: var(--ink-3); border-top: 0; }
.checks th[scope="row"] { font-weight: 500; width: 18rem; }
.checks td { color: var(--ink-2); }
.checks .grp th { padding-top: 40px; padding-bottom: 20px; font-weight: 500; font-size: 22px; letter-spacing: -0.04em; }

/* ---- motion: progressive. Without the js class nothing is ever hidden. ---- */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: 0.08s; } .rv.d2 { transition-delay: 0.16s; } .rv.d3 { transition-delay: 0.24s; }
.js .h1 .w { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .h1.in .w { opacity: 1; transform: none; }
/* the meter fills left to right like a meter: each block waits 60ms longer than the one before */
.js .blk i { transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.js .blocks.pop .blk { opacity: 0; transform: scale(0.6); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.js .blocks.pop.in .blk { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, .h1 .w, .blk, .blk i, .btn svg, .btn, .row { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}

/* ---- responsive ---- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-l { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head p { justify-self: start; }
  .issue { grid-template-columns: 1fr; }
  .issue .idx { border-right: 0; flex-direction: row; justify-content: space-between; padding-bottom: 0; }
  .issue .fix { border-left: 0; border-top: 1px solid var(--line); }
  .cols { grid-template-columns: 1fr; }
  .col { border-right: 0; border-bottom: 1px solid var(--line); }
  .col:last-child { border-bottom: 0; }
  .cta { grid-template-columns: 1fr; }
  .live-row { grid-template-columns: 64px 1fr; }
  .live-row .dt { grid-column: 1 / -1; }
  .checks th[scope="row"] { width: auto; }
}
@media (max-width: 640px) {
  :root { --pad: 16px; }
  .col-head, .row, .checks th, .checks td { padding-left: 16px; padding-right: 16px; }
  .nav form { display: none; }
  .nav { padding-right: 16px; }
  .big-number { font-size: 120px; }
  .h1 { font-size: 30px; }
  .sec-head h2, .sec-head h1 { font-size: 32px; }
  .sec-head { padding-top: 56px; }
  .blocks, .mrow--total .blocks { gap: 5px; }
  .hero-l { padding-top: 48px; padding-bottom: 40px; }
  .cta h2 { font-size: 28px; }
  .checks thead { display: none; }
  .checks tr, .checks th, .checks td { display: block; width: auto; }
  .checks td { border-top: 0; padding-top: 0; }
  .live-row { grid-template-columns: 1fr; gap: 4px; }
}