/* Layout idea: a site-survey spec sheet. Drafting-grid paper, condensed signage headings,
   hi-vis amber used only for live results and the coverage diagram. Three stacked calculators. */
:root{
  --paper:#eef1f4; --sheet:#f9fafb; --ink:#14202b; --muted:#566676; --line:#cbd4dc;
  --grid:rgba(20,32,43,.045);
  --accent:#f2a900; --accent-ink:#7d5300; --accent-soft:rgba(242,169,0,.16);
  --ok:#2c7a4b; --warn:#a86400; --bad:#b3261e;
  --d-identify:#b3261e; --d-recognize:#e0701a; --d-observe:#f2a900; --d-detect:#8aa9c2;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0f151b; --sheet:#151d25; --ink:#e3e9ef; --muted:#93a3b3; --line:#2b3845;
    --grid:rgba(227,233,239,.035);
    --accent:#f2a900; --accent-ink:#f5bd3a; --accent-soft:rgba(242,169,0,.14);
    --ok:#5cc189; --warn:#f0a43a; --bad:#ff7a6e;
    --d-identify:#e0473c; --d-recognize:#ec8a3a; --d-observe:#f2b733; --d-detect:#5f7f99;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0f151b; --sheet:#151d25; --ink:#e3e9ef; --muted:#93a3b3; --line:#2b3845;
  --grid:rgba(227,233,239,.035);
  --accent:#f2a900; --accent-ink:#f5bd3a; --accent-soft:rgba(242,169,0,.14);
  --ok:#5cc189; --warn:#f0a43a; --bad:#ff7a6e;
  --d-identify:#e0473c; --d-recognize:#ec8a3a; --d-observe:#f2b733; --d-detect:#5f7f99;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink); font:15px/1.55 var(--body);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px}
header.top{padding-block:36px 18px; display:grid; gap:10px}
.mark{font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap}
.mark b{color:var(--accent-ink); font-weight:500}
h1{font:700 clamp(40px,7vw,72px)/.92 var(--display); letter-spacing:-.01em; margin:0; text-transform:uppercase; text-wrap:balance}
h1 span{color:var(--accent-ink)}
.lede{max-width:62ch; color:var(--muted); margin:0}
nav.jump{position:sticky; top:0; z-index:5; background:var(--paper); border-bottom:1px solid var(--line); margin-top:8px}
nav.jump .wrap{display:flex; gap:4px; overflow-x:auto}
nav.jump a{font:600 15px/1 var(--display); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-decoration:none; padding:14px 12px; border-bottom:3px solid transparent; white-space:nowrap}
nav.jump a:hover,nav.jump a:focus-visible{color:var(--ink); border-bottom-color:var(--accent); outline:none}
main{display:grid; gap:28px; padding-block:28px 48px}
section.calc{background:var(--sheet); border:1px solid var(--line); border-radius:4px; scroll-margin-top:60px}
.calc-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:18px 20px 14px; border-bottom:1px solid var(--line)}
.calc-head .num{font:500 12px/1 var(--mono); color:var(--muted); letter-spacing:.12em}
h2{font:700 30px/1 var(--display); text-transform:uppercase; margin:6px 0 0; letter-spacing:.01em}
.calc-head p{margin:6px 0 0; color:var(--muted); max-width:60ch; font-size:14px}
.body{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:0}
.inputs{padding:18px 20px; display:grid; gap:16px; align-content:start; min-width:0}
.results{padding:18px 20px; border-left:1px solid var(--line); display:grid; gap:14px; align-content:start; background:linear-gradient(180deg,var(--accent-soft),transparent 140px)}
@media (max-width:820px){ .body{grid-template-columns:1fr} .results{border-left:0; border-top:1px solid var(--line)} }
label.f{display:grid; gap:4px; font-size:12px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
input,select{font:500 15px/1.2 var(--mono); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:8px 9px; width:100%; min-width:0}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.row-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:3px}
table{border-collapse:collapse; width:100%; font-size:13px}
th{font:600 13px/1.1 var(--display); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--paper)}
td{padding:5px 4px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
td input,td select{padding:6px 6px; font-size:13px}
td.calcd{font:500 13px var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; padding:5px 8px; color:var(--accent-ink)}
td select{min-width:104px} td input.qty{width:58px} td input.sm{width:68px} td input.name{min-width:130px}
button{font:600 14px/1 var(--display); text-transform:uppercase; letter-spacing:.06em; cursor:pointer; border-radius:3px; padding:9px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink)}
button:hover{border-color:var(--ink)}
button.x{padding:6px 8px; font-family:var(--mono); text-transform:none; color:var(--muted)}
button.primary{background:var(--ink); color:var(--sheet); border-color:var(--ink)}
.btns{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.big{font:700 48px/1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.big small{font:500 18px var(--display); color:var(--muted); margin-left:4px; text-transform:uppercase}
.kv{display:grid; grid-template-columns:1fr auto; gap:6px 12px; font-size:14px; margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0; font:500 14px var(--mono); font-variant-numeric:tabular-nums; text-align:right}
.lbl{font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.pill{display:inline-flex; align-items:center; gap:6px; font:600 13px/1 var(--display); text-transform:uppercase; letter-spacing:.06em; padding:5px 9px; border-radius:99px; border:1px solid currentColor; width:max-content}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.pill.ok{color:var(--ok)} .pill.warn{color:var(--warn)} .pill.bad{color:var(--bad)}
.meter{height:12px; border:1px solid var(--line); border-radius:2px; background:var(--paper); overflow:hidden; position:relative}
.meter i{display:block; height:100%; background:var(--accent); transition:width .25s}
.meter.bad i{background:var(--bad)} .meter.warn i{background:var(--warn)}
@media (prefers-reduced-motion: reduce){.meter i{transition:none}}
.note{font-size:12.5px; color:var(--muted); margin:0}
.toast{font:500 12px var(--mono); color:var(--ok); min-height:1em}
canvas#cone{width:100%; height:230px; display:block; border:1px solid var(--line); border-radius:3px; background:var(--paper)}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:5px}
.legend i{width:10px; height:10px; border-radius:2px; display:inline-block}
.dori{display:grid; gap:6px}
.dori div{display:grid; grid-template-columns:12px 1fr auto auto; gap:10px; align-items:center; font-size:14px}
.dori i{width:12px; height:12px; border-radius:2px}
.dori .ppm{font:400 12px var(--mono); color:var(--muted)}
.dori .dist{font:500 14px var(--mono); font-variant-numeric:tabular-nums; min-width:70px; text-align:right}
.dori div.hit{font-weight:600}
footer{border-top:1px solid var(--line); padding-block:20px 40px; color:var(--muted); font-size:13px}
footer p{max-width:75ch; margin:0 0 8px}

.prose{max-width:68ch; display:grid; gap:14px}
.prose h2{font:700 26px/1.05 var(--display); text-transform:uppercase; margin:18px 0 0}
.prose h3{font:600 19px/1.2 var(--display); text-transform:uppercase; letter-spacing:.03em; margin:8px 0 -6px}
.prose p,.prose li{margin:0}
.prose ul{margin:0; padding-left:20px; display:grid; gap:6px}
.prose code{font:500 13px var(--mono); background:var(--sheet); border:1px solid var(--line); padding:1px 5px; border-radius:3px}
.prose table{max-width:520px}
.prose td,.prose th{padding:7px 10px}
.prose td{font-family:var(--mono); font-size:13px}
a{color:var(--accent-ink)}
nav.jump a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
.brand{font:700 15px/1 var(--display) !important; color:var(--ink) !important; letter-spacing:.08em}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.card{display:grid; gap:8px; align-content:start; background:var(--sheet); border:1px solid var(--line); border-radius:4px; padding:20px; text-decoration:none; color:var(--ink)}
.card:hover,.card:focus-visible{border-color:var(--ink); outline:none}
.card .num{font:500 12px/1 var(--mono); color:var(--muted); letter-spacing:.12em}
.card h2{font:700 28px/1 var(--display); text-transform:uppercase; margin:0}
.card p{margin:0; color:var(--muted); font-size:14px}
.card span.go{font:600 14px var(--display); text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink)}
footer nav{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px}