/* Optic Bench — shared stylesheet for generated pages.
   Same design system as the interactive tool: cool industrial neutrals,
   blueprint accent, Saira Condensed / IBM Plex pairing. */
:root{
  --ground:#EBEEF0; --surface:#FBFCFD; --surface-2:#DFE4E8; --inset:#E4E8EB;
  --line:#C4CCD3; --line-soft:#D8DEE3;
  --ink:#14181C; --ink-2:#4B5661; --ink-3:#7A858F;
  --accent:#1A5478; --accent-soft:#D3E2EC; --on-accent:#FBFCFD;
  --ok:#2A6B4C; --ok-soft:#D1E5D9; --ok-edge:#5D9E7C;
  --warn:#845513; --warn-soft:#F0E3C6; --warn-edge:#C08F3C;
  --bad:#8E312A; --bad-soft:#EED7D4; --bad-edge:#C0645C;
  --flag:#5B4A86; --flag-soft:#E0DBEE;
  --shadow:0 1px 1px rgba(16,24,32,.05), 0 10px 26px -18px rgba(16,24,32,.45);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --disp:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101417; --surface:#191E23; --surface-2:#232A31; --inset:#14191D;
    --line:#333C45; --line-soft:#262E35;
    --ink:#E4EAEF; --ink-2:#9AA6B1; --ink-3:#6C7883;
    --accent:#7CB4D9; --accent-soft:#1B2E3C; --on-accent:#0E1215;
    --ok:#74C098; --ok-soft:#17291F; --ok-edge:#33613F;
    --warn:#D9A65E; --warn-soft:#2B2317; --warn-edge:#6B5226;
    --bad:#E19189; --bad-soft:#2C1D1B; --bad-edge:#6E3B36;
    --flag:#A99BD6; --flag-soft:#211E30;
    --shadow:0 1px 1px rgba(0,0,0,.4), 0 10px 26px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#101417; --surface:#191E23; --surface-2:#232A31; --inset:#14191D;
  --line:#333C45; --line-soft:#262E35;
  --ink:#E4EAEF; --ink-2:#9AA6B1; --ink-3:#6C7883;
  --accent:#7CB4D9; --accent-soft:#1B2E3C; --on-accent:#0E1215;
  --ok:#74C098; --ok-soft:#17291F; --ok-edge:#33613F;
  --warn:#D9A65E; --warn-soft:#2B2317; --warn-edge:#6B5226;
  --bad:#E19189; --bad-soft:#2C1D1B; --bad-edge:#6E3B36;
  --flag:#A99BD6; --flag-soft:#211E30;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1000px; margin:0 auto; padding-inline:16px; padding-block:0 56px}
img{max-width:100%}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* masthead */
.mast{background:var(--surface); border-bottom:1px solid var(--line); position:relative}
.mast::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent) 0 38%,var(--warn-edge) 38% 62%,var(--ok-edge) 62% 100%);
}
.mast-in{
  max-width:1000px; margin:0 auto; padding-inline:16px; padding-block:18px 14px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
}
.brand{text-decoration:none; color:inherit; display:block}
.brand b{
  font-family:var(--disp); font-weight:700; font-size:clamp(24px,5vw,32px);
  letter-spacing:.06em; text-transform:uppercase; display:block; line-height:1;
}
.brand span{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.22em; font-weight:600;
  color:var(--accent); text-transform:uppercase; display:block; margin-bottom:4px;
}
.mast-nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.mast-nav a{
  font-family:var(--disp); font-size:12.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-2);
  border:1px solid var(--line); border-radius:3px; padding:6px 11px; background:var(--inset);
}
.mast-nav a:hover{color:var(--ink); border-color:var(--accent)}
.mast-nav a.cta{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.mast-nav a.cta:hover{background:var(--ink); border-color:var(--ink); color:var(--surface)}

/* breadcrumb + headings */
.crumb{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-block:18px 0}
.crumb a{color:var(--ink-3)}
h1{
  font-family:var(--disp); font-weight:700; font-size:clamp(26px,5.2vw,38px);
  letter-spacing:.03em; line-height:1.05; margin:10px 0 0; text-wrap:balance;
}
h2{
  font-family:var(--disp); font-size:20px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin:40px 0 0; padding-bottom:8px;
  border-bottom:2px solid var(--ink);
}
h3{font-family:var(--disp); font-size:16px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin:26px 0 8px}
.lede{font-size:16px; color:var(--ink-2); max-width:70ch; margin:14px 0 0; line-height:1.6}
p{max-width:72ch}

/* fact strip */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0; margin-top:22px; border:1px solid var(--line); border-radius:5px;
  background:var(--surface); overflow:hidden;
}
.facts > div{padding:11px 14px 12px; border-right:1px solid var(--line-soft)}
.facts > div:last-child{border-right:0}
.facts b{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:block; font-weight:600; margin-bottom:2px;
}
.facts span{font-family:var(--mono); font-size:13px; overflow-wrap:anywhere}

/* route cards */
.routes{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:18px}
.route{
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:5px; padding:12px 14px 13px;
}
.route.is-direct{border-top-color:var(--ok-edge)}
.route.is-enc{border-top-color:var(--warn-edge)}
.route b{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:block; font-weight:600;
}
.route .p{font-family:var(--mono); font-size:19px; font-variant-numeric:tabular-nums; display:block; margin:2px 0 1px}
.route .w{font-size:13.5px; display:block; line-height:1.35}
.route .h{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); display:block; line-height:1.4; margin-top:2px}

/* tables */
.tw{overflow-x:auto; margin-top:14px; border:1px solid var(--line); border-radius:5px; background:var(--surface)}
table.grid{width:100%; border-collapse:collapse; font-size:14px}
table.grid th{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); text-align:left; font-weight:600; padding:10px 12px 8px;
  border-bottom:1px solid var(--line); background:var(--inset); white-space:nowrap;
}
table.grid td{padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.grid tr:last-child td{border-bottom:0}
table.grid td.mono{font-family:var(--mono); font-size:12.5px; color:var(--ink-2)}
table.grid td.num{font-family:var(--mono); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums}
table.grid a{text-decoration:none; font-weight:500}
table.grid a:hover{text-decoration:underline}

.chip{
  font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; padding:3px 8px; border-radius:3px; border:1px solid transparent;
  white-space:nowrap; display:inline-block;
}
.chip-ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-edge)}
.chip-plate{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-edge)}
.chip-none{background:var(--bad-soft); color:var(--bad); border-color:var(--bad-edge)}
.chip-flag{background:var(--flag-soft); color:var(--flag); border-color:var(--flag)}
.chip-enc{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}

/* callouts */
.note{
  margin-top:20px; border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--surface); border-radius:3px; padding:13px 15px;
  font-size:14px; color:var(--ink-2); line-height:1.55;
}
.note b{
  font-family:var(--disp); letter-spacing:.11em; text-transform:uppercase; font-size:11.5px;
  color:var(--ink); display:block; margin-bottom:4px;
}
.note.warn{border-left-color:var(--bad-edge)}
.note.warn b{color:var(--bad)}

/* footprint diagram */
.fpd{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-top:18px}
.fpd svg{flex:0 0 120px; width:120px; height:auto}

/* link lists */
.pills{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; padding:0; list-style:none}
.pills a{
  font-size:13.5px; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:3px; padding:5px 10px; display:block;
}
.pills a:hover{border-color:var(--accent)}
.pills .b{color:var(--ink-3); font-size:12px}

/* ad slot — renders only when a snippet is configured */
.adslot{margin-top:32px; text-align:center}
.adslot .lbl{
  font-family:var(--disp); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:6px;
}

footer.site{
  margin-top:48px; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3); line-height:1.6;
}
footer.site p{margin:0 0 9px; max-width:76ch}
footer.site a{color:var(--ink-2)}
.stamp{font-family:var(--mono); font-size:11.5px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}