/* Dark-first, and deliberately instrument-like rather than editorial: this is
   a page about a measuring tool, so the palette is the one the tool prints
   with. Green is a passing check, red a failing one, amber a warning — the
   same three colours the report uses, not a brand chosen afterwards. */
:root{
  --ground:#101310; --surface:#171B17; --raise:#1E241E; --line:#2A322A;
  --ink:#EDF2EC; --muted:#8A968A;
  --signal:#9AE66E;             /* a check that passed */
  --fail:#FF7A6B;               /* a check that failed */
  --warn:#F2C14E;               /* a check that warned */
  --published:#7FC7FF;          /* information */
  --measure:64ch;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#F4F6F2; --surface:#EAEEE7; --raise:#E0E5DC; --line:#CFD7CB;
    --ink:#101310; --muted:#5C665C;
    --signal:#2F6B1B; --fail:#B3261E; --warn:#8A5A00; --published:#0A5E8A;
  }
}
:root[data-theme="light"]{
  --ground:#F4F6F2; --surface:#EAEEE7; --raise:#E0E5DC; --line:#CFD7CB;
  --ink:#101310; --muted:#5C665C;
  --signal:#2F6B1B; --fail:#B3261E; --warn:#8A5A00; --published:#0A5E8A;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 17px/1.62 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
h1,h2,h3,.ui{font-family:"Space Grotesk",Inter,system-ui,sans-serif;letter-spacing:-.02em}
.mono,code,pre{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
a{color:var(--signal);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
p{margin:0 0 1.05em;max-width:var(--measure)}
.lede{font-size:20px}
.eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;
}
img,svg{max-width:100%}

/* ---------------------------------------------------------------- masthead */
header{padding:74px 0 0;border-bottom:1px solid var(--line)}
.badge{
  display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:5px 10px;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--signal)}
h1{
  font-weight:600;font-size:clamp(46px,8vw,92px);line-height:.98;
  margin:26px 0 0;text-wrap:balance;
}
.subhead{margin:24px 0 0;font-size:21px;line-height:1.52;max-width:58ch;color:var(--ink)}
.headmeta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin:34px 0 0;padding:18px 0 40px;
  border-top:1px solid var(--line);
}
.headmeta span{font-size:13px;color:var(--muted)}
.headmeta b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------ section jump */
.jump{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(10px)){
  .jump{background:color-mix(in srgb, var(--ground) 84%, transparent);backdrop-filter:blur(10px)}
}
.jump .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:46px}
.jump ul{display:flex;gap:24px;margin:0;padding:0;list-style:none}
.jump a{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--muted);white-space:nowrap;
}
.jump .mark{color:var(--ink);letter-spacing:.02em;font-family:"Space Grotesk",sans-serif;font-weight:600}
.jump a:hover{color:var(--signal)}
section[id],header[id]{scroll-margin-top:58px}
@media (max-width:600px){
  .jump .mark{display:none}
  .jump .wrap{justify-content:center}
  .jump ul{gap:15px;overflow-x:auto}
}

section{padding:62px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{font-size:clamp(27px,3.6vw,38px);font-weight:600;margin:0 0 10px;text-wrap:balance}
h3{font-size:18px;font-weight:600;margin:0 0 8px}

/* ------------------------------------------------------------- the report */
.report{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:22px 24px;overflow-x:auto;
  font:400 13.5px/1.75 "JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  white-space:pre;
}
.report .r-fail{color:var(--fail)}
.report .r-pass{color:var(--signal)}
.report .r-warn{color:var(--warn)}
.report .r-dim{color:var(--muted)}
.report .r-head{color:var(--ink);font-weight:500}

.caption{margin:14px 0 0;font-size:14px;color:var(--muted);max-width:var(--measure)}

/* ----------------------------------------------------------------- layout */
.two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
       border:1px solid var(--line);margin-top:28px}
.card{background:var(--surface);padding:22px 22px 24px}
.card h3{color:var(--ink)}
.card p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);max-width:none}
.card .num{font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;
           text-transform:uppercase;color:var(--signal);display:block;margin-bottom:12px}

table{width:100%;border-collapse:collapse;margin:24px 0 0;font-size:15px}
th,td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.13em;
   text-transform:uppercase;color:var(--muted)}
td code{font-size:13.5px;color:var(--ink)}
.tag{display:inline-block;font:500 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.1em;
     text-transform:uppercase;padding:4px 7px;border-radius:2px;border:1px solid var(--line);
     color:var(--muted);white-space:nowrap}
.tag.published{color:var(--published);border-color:color-mix(in srgb,var(--published) 40%,transparent)}
.tag.informal{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}

.note{
  border-left:2px solid var(--warn);background:color-mix(in srgb,var(--warn) 7%,transparent);
  padding:16px 18px;margin:28px 0 0;
}
.note p{margin:0;font-size:15px;max-width:none}
.note strong{color:var(--ink)}

pre.code{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:18px 20px;overflow-x:auto;font-size:13.5px;line-height:1.7;margin:22px 0 0;
}
pre.code .c{color:var(--muted)}

ul.plain{margin:16px 0 0;padding:0;list-style:none;max-width:var(--measure)}
ul.plain li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line);font-size:15.5px}
ul.plain li::before{content:"✓";position:absolute;left:0;color:var(--signal);font-weight:600}
ul.plain li.no::before{content:"✕";color:var(--fail)}

/* ---------------------------------------------------------- signal diagram */
.diagram{margin:28px 0 0;padding:26px 20px;background:var(--surface);
         border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.diagram svg{display:block;min-width:660px;margin:0 auto}
.d-node{fill:var(--raise);stroke:var(--line)}
.d-label{fill:var(--ink);font:500 12px/1 "JetBrains Mono",monospace}
.d-sub{fill:var(--muted);font:400 10.5px/1 "JetBrains Mono",monospace}
.d-line{stroke:var(--line);stroke-width:1.5;fill:none}
.d-accent{stroke:var(--signal);stroke-width:1.5;fill:none}
.d-out{fill:var(--muted);font:400 11px/1 "JetBrains Mono",monospace}

/* A faithful reproduction of the application window rather than a bitmap of
   it: sharp at any size, legible to a screen reader, and it follows the
   reader's own light or dark setting the way the real window does. */
.figure{margin:28px 0 0;padding:0}
.figure svg{display:block;width:100%;border:1px solid var(--line);border-radius:8px}
.figure figcaption{margin-top:9px;font-size:13.5px;color:var(--muted);max-width:var(--measure)}

.window{margin:28px 0 0;padding:0}
.window-panel{background:var(--surface);border:1px solid var(--line);
              border-radius:10px;padding:20px}
.window figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);
                   max-width:var(--measure)}
.w-verdict{margin:0 0 3px;font-size:15px;font-weight:600;color:var(--fail);
           font-family:"Space Grotesk",Inter,sans-serif}
.w-counts{margin:0 0 6px;font-size:13px;color:var(--muted)}
.w-file{margin:0 0 14px;font-family:"JetBrains Mono",monospace;font-size:12.5px;
        color:var(--ink);word-break:break-word}
.w-chart svg{display:block;width:100%;border:1px solid var(--line);
             border-radius:8px}
.w-cap{margin:7px 0 4px;font-size:12.5px;color:var(--muted);max-width:none}
.w-row{display:grid;grid-template-columns:18px 1fr auto;gap:8px;padding:9px 0;
       border-top:1px solid var(--line);align-items:baseline}
.w-mark{font-weight:700}
.w-mark.fail{color:var(--fail)} .w-mark.warn{color:var(--warn)}
.w-mark.skip{color:var(--muted)}
.w-what{font-size:15px}
.w-need{color:var(--muted);font-size:13px;white-space:nowrap}
.w-where{grid-column:2/-1;color:var(--muted);font-size:12.5px}
.w-where b{color:var(--ink);font-weight:600}
.w-note{grid-column:2/-1;color:var(--muted);font-size:12.5px;font-style:italic}
.w-stamps{margin:14px 0 0;font-size:13px}
.w-stamps b{font-weight:600}
.w-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.w-buttons span{border:1px solid var(--line);border-radius:7px;padding:7px 12px;
                font-size:14px;color:var(--ink)}
.w-source{margin:14px 0 0;font-size:12.5px;color:var(--muted);max-width:none}
@media (max-width:700px){
  .w-row{grid-template-columns:18px 1fr}
  .w-need{grid-column:2/-1;white-space:normal}
}

.report{white-space:pre}

.contact{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.contact a{
  display:inline-block;padding:11px 18px;border:1px solid var(--line);border-radius:4px;
  text-decoration:none;font-size:14px;font-weight:500;
}
.contact a:hover{border-color:var(--signal)}

footer{padding:38px 0 60px;color:var(--muted);font-size:14px}

@media (max-width:900px){
  .two{grid-template-columns:1fr;gap:32px}
  .cards{grid-template-columns:1fr}
}