/* Overwatch — SWISS theme layer (2026-08-25 redesign).
   Load AFTER site.css (+ features.css where used). Flips the token system from
   dark to paper/ink and restyles page chrome. Product windows (.ui, .term) stay
   dark on purpose — they are artifacts of the app, framed like figures.
   Derived from mockups/swiss-home.html (approved). */

:root{
  --paper:#f1f1f3;
  --ink:#111214;
  --bg:#f1f1f3;
  --bg-2:#e8e8ea;
  --panel:#e8e8ea;
  --panel-2:#dedee0;
  --line:rgba(17,18,20,.16);
  --line-2:rgba(17,18,20,.10);
  --dash:rgba(17,18,20,.28);
  --text:#111214;
  --muted:#3a3b3e;
  --faint:#8a8b8f;
  --accent:#ff6b44;
  --accent-2:#ff8a66;
  --accent-soft:rgba(255,107,68,.12);
  color-scheme:light;
}

body{background:var(--paper);color:var(--ink)}
::selection{background:var(--accent);color:#fff}

/* ---------- background: dashed rails instead of the dark grid ---------- */
.field{
  background:
    linear-gradient(90deg,var(--dash) 1px,transparent 1px) 20% 0/1px 100% no-repeat,
    linear-gradient(90deg,var(--dash) 1px,transparent 1px) 44.5% 0/1px 100% no-repeat,
    linear-gradient(90deg,var(--dash) 1px,transparent 1px) 68% 0/1px 100% no-repeat,
    linear-gradient(90deg,var(--dash) 1px,transparent 1px) 88% 0/1px 100% no-repeat;
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 5px,transparent 5px 10px);
  mask-image:repeating-linear-gradient(180deg,#000 0 5px,transparent 5px 10px);
  opacity:.45;
}
.glow{display:none}
.hud i::before,.hud i::after{background:var(--ink)}

/* ---------- type helpers ---------- */
.label,.micro{color:var(--muted)}
.owname{color:var(--accent);-webkit-text-stroke:0;filter:none}

/* section tag chip: [01] LABEL */
.tag{display:inline-flex;align-items:stretch;font-family:var(--mono);font-size:11px;letter-spacing:.1em;line-height:1}
.tag .no{background:var(--accent);color:#fff;padding:5px 7px;font-weight:600}
.tag .tx{background:var(--panel-2);color:var(--ink);padding:5px 9px;text-transform:uppercase}

/* corner-tick micro label */
.tick{position:relative;padding:10px 0 0 12px}
.tick::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;
  border-left:1px solid var(--ink);border-top:1px solid var(--ink)}

/* ---------- NAV ---------- */
.nav{background:var(--paper);backdrop-filter:none;border-bottom:1px solid var(--line)}
.nav nav a{color:var(--muted)}
.nav nav a:hover{color:var(--ink)}
.nav nav a.navcta{
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:0;
  font-weight:600;box-shadow:none;
}
.nav nav a.navcta:hover{background:var(--accent);color:#fff;box-shadow:none;transform:none}
.brand b{color:var(--ink)}
.brand b::before{color:var(--accent)}

/* meganav panel → paper */
.mega-p{background:rgba(241,241,243,.98);border-bottom:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(17,18,20,.25)}
.mega-col a:hover{background:rgba(17,18,20,.05)}
.mega-col a .mn{color:var(--ink)}
.mega-col a:hover .mn{color:var(--accent)}
.mega-col a .mn-ic{color:var(--faint);border-color:var(--line)}
.mega-col a:hover .mn-ic,.mega-col a[aria-current="page"] .mn-ic{color:var(--accent);border-color:rgba(255,107,68,.4)}

/* ---------- buttons ---------- */
.btn{border-radius:0;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600}
.btn:hover{transform:none;border-color:var(--ink);background:var(--ink);color:#fff}
.btn.primary,.btn.store{background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:0;box-shadow:none}
.btn.primary:hover,.btn.store:hover{background:var(--accent);border-color:var(--accent);box-shadow:none;transform:none}
.btn.store .lbl,.btn.store .cs{color:#fff}
.btn.store.detected{background:var(--accent);border-color:var(--accent);box-shadow:none}
.btn.store.detected:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- footer ---------- */
footer{background:var(--bg-2);border-top:1px solid var(--line);position:relative;margin-top:260px}
/* dithered pixel terrain dissolving into the footer, site-wide */
footer::before{content:"";position:absolute;left:0;right:0;top:-180px;height:180px;
  pointer-events:none;z-index:-1;
  background:url(/assets/dither-terrain.svg?v=1) bottom center/cover no-repeat}
footer .lk a{color:var(--muted)}
footer .lk a:hover{color:var(--ink)}

/* ============================================================
   FEATURE PAGES (features.css component overrides)
   ============================================================ */
body.fp{background:var(--paper)}

.fp .fkick{color:var(--faint)}
.fp .fkick .n{color:var(--accent)}
.fp .fkick .bar{background:var(--line)}
.fp .fkick .bar i{background:var(--accent)}
.fp h1{font-weight:750;letter-spacing:-.04em}
.fp .fsub{color:var(--muted)}

/* pain block → paper card with ink frame */
.pain{background:var(--bg-2);border:1px solid var(--line);border-radius:0}
.pain::before{background:var(--accent)}
.pain::after{display:none}
.pain blockquote{color:var(--ink)}
.pain .ptag{color:var(--accent)}
.pain .pattr{color:var(--faint)}
.pain .pattr a{color:var(--muted);border-bottom-color:var(--line)}
.pmeta{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:0}
.pmeta b{color:var(--ink)}
.pmeta.solved{border-color:var(--accent);background:var(--accent);color:#fff}
.pmeta.solved b{color:#fff}
.answer{background:rgba(255,107,68,.07);border-top:1px solid var(--line)}
.answer p{color:var(--ink)}
.answer p b{color:var(--accent)}

/* section heads */
.fsec .fh{border-bottom:1px solid var(--line)}
.fsec .fh h2{font-weight:750}
.fsec .fh .idx{color:var(--faint)}

/* value cards */
.vhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.val .pxi{flex:0 0 auto;opacity:.9;color:var(--ink);transition:opacity .15s}
.val:hover .pxi{opacity:1}

.val{background:var(--bg-2);border:1px solid var(--line);border-radius:0}
.val::after{display:none}
.val .vn{color:var(--faint)}
.val h3{color:var(--ink)}
.val p{color:var(--muted)}

/* deep rows */
.deep p{color:var(--muted)}
.deep p b{color:var(--ink)}
.deep ul li{color:var(--muted)}
.deep ul li::before{background:var(--accent)}

/* prev/next */
.pn{border-top:1px solid var(--line)}
.pn a{background:#fff;border:1px solid var(--line);border-radius:0}
.pn a:hover{border-color:var(--accent);transform:none}
.pn .pt{color:var(--ink)}

/* cta card */
.fcta{background:var(--bg-2);border:1px solid var(--line);border-radius:0}
.fcta h2{color:var(--ink)}
.fcta p{color:var(--muted)}

/* ---------- router (multi-model) ---------- */
.rt-wire path{stroke:var(--dash)}
.rt-core{background:var(--accent);border:0;border-radius:0;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 2px,transparent 2px 6px)}
.rt-core::after{display:none}
.rt-core-mark{color:#fff;filter:none}
.rt-core-sub{color:rgba(255,255,255,.85)}
.rt-lane{background:var(--bg-2);border:1px solid var(--line);border-radius:0}
.rt-lane::after{opacity:.2}
.rt-lane-d{color:var(--muted)}
.rt-lane-k,.rt-lane-req{color:var(--faint)}
.rt-tag.c{background:rgba(255,107,68,.14);color:var(--accent)}
.rt-fleet{border-top:1px solid var(--line)}
.rt-grid{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.rt-cell{background:transparent;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0}
.rt-cell:hover{background:#fff;transform:none;border-color:var(--line)}
.rt-nm{color:var(--muted)}
.rt-ic{border-radius:0}
.rt-ic.logo{background:#fff;border:1px solid var(--line)}
.cap{color:var(--faint)}
.cap b{color:var(--muted)}

/* Product windows (.ui/.term) stay DARK — they are app artifacts. The global var
   flip would paint their ink-dark text onto dark glass, so re-scope the dark
   palette inside them. */
.ui,.term{
  --text:#f4f4f5;--muted:#9a9a9f;--faint:#66666b;
  --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.06);
  --panel:#131315;--panel-2:#17171a;
  --accent:#ff6500;--accent-2:#ff6a44;--accent-soft:rgba(255,101,0,.14);
  border-radius:0;border-color:#111214;
  box-shadow:12px 12px 0 0 rgba(17,18,20,.9);
}

/* Download page styles itself (download.html inline) — no swiss overrides here. */

/* ============================================================
   LEGAL / TEXT PAGES
   ============================================================ */
.doc h1,.doc h2{color:var(--ink)}
.doc p,.doc li{color:var(--muted)}

/* site.css hardcodes near-white text on .legal — repaint in ink */
.legal h2{color:var(--ink)}
.legal p,.legal li{color:var(--muted)}
.legal strong{color:var(--ink)}
.legal .back:hover{color:var(--ink)}