/* ============================================================
   FARCOM · HAWKEYE — "Sky Glass" design system (Phase D)
   Extracted from draft1-sky-glass.html. Light-first, frosted glass,
   sapphire primary, orange CTA-only, ink body, Inter stack, mono plates.
   Shared token + primitive source for all restyled Hawkeye boards.
   No external requests / CDNs — self-contained.
   ============================================================ */

:root{
  /* --- surfaces --- */
  --white:#FFFFFF; --surface:#F8FAFC; --surface2:#eef3f9;
  --slate-50:#F8FAFC; --slate-500:#64748b;
  --sky-50:#f0f6fb; --sky-100:#D6E5F2; --sky:#D6E5F2;

  /* --- brand --- */
  --sapphire:#1A3D7C; --sapphire-700:#1A3D7C; --sapphire-600:#2454a0; --sapphire2:#24528f;
  --blue:#4878A8; --blue-500:#4878A8; --blue-400:#7fb3d5;
  --ink:#1A2744; --ink-900:#1A2744;
  --orange:#F05A28; --orange-500:#F05A28; --orange-100:#ffe4d6;

  /* --- support --- */
  --muted:#5b6b86; --line:#e2e8f2;
  --good:#1f9d63; --success-500:#10b981; --success-100:#d1fadf;
  --warn:#c9761d; --warning-500:#f59e0b; --danger:#C0392B;

  /* --- elevation --- */
  --shadow-sm:0 1px 2px 0 rgba(26,39,68,.08);
  --shadow-card:0 4px 12px 0 rgba(26,39,68,.10);
  --shadow-card-hover:0 12px 24px 0 rgba(26,39,68,.14);
  --shadow-float:0 8px 30px 0 rgba(26,39,68,.16);
  --shadow:0 1px 2px rgba(26,39,68,.06),0 4px 16px rgba(26,39,68,.06);

  /* --- radii --- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* --- type --- */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter','Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --disp:'Outfit','Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink-900); background:var(--slate-50);
  -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
}
.num{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
a{color:inherit; text-decoration:none;}

/* ============ FROSTED TOOLBAR / HEADER SHELL ============ */
.hk-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 380px at 78% -40%, rgba(72,120,168,.28), transparent 60%),
    radial-gradient(760px 300px at 8% -10%, rgba(26,61,124,.22), transparent 62%),
    linear-gradient(180deg, #eaf2fb 0%, #f4f9fd 62%, var(--slate-50) 100%);
  border-bottom:1px solid var(--sky-100);
}
.hk-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 42px, rgba(255,255,255,.35) 42px 43px);
  -webkit-mask:linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%);
          mask:linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%);
  opacity:.5;
}
.hk-hero-inner{position:relative; z-index:1; max-width:1500px; margin:0 auto; padding:0 22px;}

.hk-toolbar{
  display:flex; align-items:center; gap:16px;
  margin-top:16px; padding:11px 16px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-lg); box-shadow:var(--shadow-float);
}
.hk-brand{display:flex; align-items:center; gap:12px; padding-right:16px; border-right:1px solid var(--sky-100);}
.hk-mark{width:34px; height:34px; background:#fff; border-radius:9px; display:flex; align-items:center;
  justify-content:center; flex:0 0 auto; box-shadow:0 1px 3px rgba(26,61,124,.22);}
.hk-mark img{width:24px; height:24px; display:block;}
.hk-brand-txt{display:flex; flex-direction:column; line-height:1;}
.hk-brand-txt b{font-family:var(--disp); font-weight:800; letter-spacing:.16em; font-size:13px; color:var(--sapphire-700);}
.hk-brand-txt span{font-size:10px; letter-spacing:.28em; color:var(--blue-500); font-weight:600; margin-top:3px;}
.hk-tb-title{font-family:var(--disp); font-weight:700; font-size:15px; color:var(--sapphire-700); letter-spacing:-.01em;}
.hk-tb-title small{display:block; font-family:var(--sans); font-weight:600; font-size:11.5px; color:var(--slate-500); letter-spacing:0; margin-top:2px;}
.hk-spacer{flex:1;}
.hk-navlink{padding:7px 13px; border-radius:var(--r-pill); font-weight:600; font-size:13px; color:var(--slate-500); transition:.15s; display:inline-flex; align-items:center; gap:6px;}
.hk-navlink:hover{background:rgba(26,61,124,.08); color:var(--sapphire-700);}
.hk-navlink:focus-visible{outline:2px solid var(--sapphire-600); outline-offset:2px;}

/* ============ SHARED TOP NAV (reusable across all boards) ============ */
.hk-toolbar{flex-wrap:wrap;}
.hk-nav{
  display:flex; align-items:center; gap:3px; flex-wrap:wrap;
  flex:1 1 auto; justify-content:flex-end; min-width:0;
}
.hk-nav a{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:7px 13px; border-radius:var(--r-pill);
  font-weight:600; font-size:13px; color:var(--slate-500);
  text-decoration:none; transition:background .15s, color .15s, box-shadow .15s;
}
.hk-nav a:hover{background:rgba(26,61,124,.08); color:var(--sapphire-700);}
.hk-nav a:focus-visible{outline:2px solid var(--sapphire-600); outline-offset:2px;}
.hk-nav a.active,
.hk-nav a[aria-current="page"]{
  color:var(--sapphire-700); background:rgba(26,61,124,.10); font-weight:700;
  box-shadow:inset 0 -2px 0 0 var(--sapphire-700);
}
.hk-nav a.ext{color:var(--blue-500);}
.hk-nav a.ext:hover{color:var(--sapphire-700);}
.hk-nav a.sec{font-size:12px; color:var(--muted);}
.hk-nav a.sec:hover{color:var(--sapphire-700);}
@media (max-width:760px){
  .hk-nav{justify-content:flex-start; flex-basis:100%; margin-top:2px;}
}

.hk-live{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:12px;
  letter-spacing:.04em; color:var(--sapphire-700); padding:7px 12px 7px 11px;
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
}
.hk-live .dot{width:9px; height:9px; border-radius:50%; background:var(--good); position:relative; animation:hk-pulse 1.9s infinite;}
.hk-live .dot.stale{background:var(--warn); animation:none;}
@keyframes hk-pulse{0%{box-shadow:0 0 0 0 rgba(31,157,99,.5)}70%{box-shadow:0 0 0 7px rgba(31,157,99,0)}100%{box-shadow:0 0 0 0 rgba(31,157,99,0)}}
@media (prefers-reduced-motion:reduce){.hk-live .dot{animation:none;}}

.hk-cta{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px;
  color:#fff; background:var(--orange-500); padding:9px 18px; border:0; cursor:pointer;
  border-radius:var(--r-pill); box-shadow:0 6px 16px rgba(240,90,40,.35); transition:.15s;
}
.hk-cta:hover{background:#d94a1e; transform:translateY(-1px); box-shadow:0 10px 22px rgba(240,90,40,.42);}
.hk-cta:focus-visible{outline:2px solid var(--orange-500); outline-offset:2px;}

.hk-tagline{max-width:1500px; margin:0 auto; padding:14px 22px 4px; color:var(--slate-500); font-size:13px;}

/* ============ GLASS KPI STRIP ============ */
.hk-kpis{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
  max-width:1500px; margin:0 auto; padding:16px 22px 20px;
}
.hk-kpi{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.75); border-radius:var(--r-lg);
  padding:13px 15px; box-shadow:var(--shadow-card); transition:.18s;
}
.hk-kpi:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover);}
.hk-kpi .k{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500);}
.hk-kpi .v{font-family:var(--disp); font-weight:800; font-size:24px; color:var(--sapphire-700); margin-top:5px; line-height:1;}
.hk-kpi .v.accent{color:var(--orange-500);}
.hk-kpi .v small{font-size:13px; color:var(--slate-500); font-weight:600;}
@media (max-width:820px){.hk-kpis{grid-template-columns:repeat(3,1fr);}}
@media (max-width:480px){.hk-kpis{grid-template-columns:repeat(2,1fr);}}

/* ============ SECTION SHELL ============ */
.hk-sec-head{display:flex; align-items:center; gap:12px; margin:0 0 14px;}
.hk-sec-head .bar{width:4px; height:20px; border-radius:2px; background:var(--orange-500);}
.hk-sec-head h2{font-family:var(--disp); font-weight:700; font-size:18px; color:var(--sapphire-700); margin:0; letter-spacing:-.01em;}
.hk-sec-head .count{font-size:12px; color:var(--slate-500); font-weight:600; margin-left:auto;}
.hk-eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-500); font-weight:700;}

/* ============ CARD / CHIP / BADGE / TABLE PRIMITIVES ============ */
.hk-card{
  background:var(--white); border:1px solid var(--sky-100); border-radius:var(--r-xl);
  box-shadow:var(--shadow-card); overflow:hidden; transition:.18s;
}
.hk-card:hover{box-shadow:var(--shadow-card-hover);}

.hk-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--sapphire-700);
  background:var(--sky-100); border-radius:var(--r-pill); padding:3px 11px;
}
.hk-chip.util{background:#fff0d9; color:#8a5a12;}

.hk-badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); letter-spacing:.02em;}
.hk-badge.veh{background:var(--sky-100); color:var(--sapphire-700);}
.hk-badge.per{background:var(--orange-100); color:#b8431c;}

.hk-plate{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em; color:#fff;
  background:var(--ink-900); border-radius:var(--r-sm); padding:2px 8px; display:inline-flex; align-items:center;}

.hk-btn{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12.5px;
  color:var(--sapphire-700); background:var(--white); border:1px solid var(--sky-100);
  border-radius:var(--r-md); padding:7px 13px; cursor:pointer; transition:.15s;
}
.hk-btn:hover{border-color:var(--blue-400); box-shadow:var(--shadow-sm);}
.hk-btn:focus-visible{outline:2px solid var(--sapphire-600); outline-offset:2px;}
.hk-btn.accent{background:var(--orange-500); color:#fff; border-color:var(--orange-500);}
.hk-btn.accent:hover{background:#d94a1e;}

.hk-foot{color:var(--slate-500); font-size:11.5px; text-align:center;}
.hk-foot .mono{color:var(--blue-500);}

/* ============ BRAND MARK — static in header (the animated medallion lives in the boot splash) ============ */
.hk-mark img{display:block;}

/* ============ FUNCTIONAL ZONES (grouping) ============ */
.hk-wrap{max-width:1500px; margin:0 auto; padding:18px 22px; display:flex; flex-direction:column; gap:18px;}
.hk-zone{
  background:rgba(255,255,255,.5); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid var(--sky-100); border-radius:var(--r-xl); box-shadow:var(--shadow-card);
  padding:16px; display:flex; flex-direction:column; gap:14px;
}
.hk-zone-hd{display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--sapphire-700);}
.hk-zone-hd .zi{width:9px; height:9px; border-radius:50%; background:var(--orange-500); flex:none;}
.hk-zone-hd .zi.b{background:var(--blue-500);}
.hk-zone-hd .meta{margin-left:auto; font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.02em; color:var(--slate-500); text-transform:none;}
.hk-zone-grid{display:grid; grid-template-columns:1.9fr 1fr; gap:14px;}
@media (max-width:860px){.hk-zone-grid{grid-template-columns:1fr;}}

/* ============ CAMERA WELL (video on black) — tap / pinch to expand ============ */
.hk-cam{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; background:#05080f;
  box-shadow:inset 0 0 0 1px rgba(160,190,220,.15); cursor:zoom-in; touch-action:pan-y;}
.hk-cam .feed{position:absolute; inset:0; background:linear-gradient(160deg,#132038,#070c16);}
.hk-cam .scan{position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(120,160,210,.05) 0 2px,transparent 2px 4px);}
.hk-cam .tag{position:absolute; top:10px; left:12px; z-index:2; font-family:var(--mono); font-size:11px; color:#cfe0f2; letter-spacing:.04em;}
.hk-cam .rec{position:absolute; top:10px; right:12px; z-index:2; font-family:var(--mono); font-size:10px; color:#ffd9cc; display:flex; gap:6px; align-items:center;}
.hk-cam .rec b{width:7px; height:7px; border-radius:50%; background:var(--orange-500); animation:hk-blink 1.4s infinite;}
@keyframes hk-blink{50%{opacity:.25}}
.hk-cam .exp{position:absolute; bottom:10px; right:12px; z-index:3; display:inline-flex; gap:6px; align-items:center;
  background:rgba(12,20,36,.6); border:1px solid rgba(150,180,220,.3); backdrop-filter:blur(6px);
  color:#eaf2fb; border-radius:var(--r-md); padding:6px 10px; font-size:11px; font-weight:700; cursor:zoom-in;}
.hk-det{position:absolute; z-index:2; border:1.5px solid; border-radius:3px;}
.hk-det .lb{position:absolute; top:-16px; left:-1.5px; padding:2px 6px; border-radius:3px; color:#fff; font:700 10px/1 var(--mono); white-space:nowrap;}
.hk-det.person{border-color:#4da3ff} .hk-det.person .lb{background:#2a72c8}
.hk-det.tool{border-color:var(--orange-500)} .hk-det.tool .lb{background:var(--orange-500)}
.hk-det.veh{border-color:#33c98a} .hk-det.veh .lb{background:#0f9e68}
.hk-cam-chips{position:absolute; left:12px; bottom:10px; z-index:3; display:flex; gap:7px; flex-wrap:wrap;}
.hk-cam-chips .c{font:700 10.5px/1 var(--mono); color:#eaf2fb; background:rgba(12,20,36,.62);
  border:1px solid rgba(150,180,220,.25); backdrop-filter:blur(6px); padding:5px 8px; border-radius:var(--r-sm);}

/* ---- fullscreen overlay: video pans/zooms, CONTROLS stay fixed ---- */
.hk-fs{position:fixed; inset:0; z-index:100; background:#04070d; display:none; flex-direction:column;}
.hk-fs.open{display:flex;}
.hk-fs-stage{position:relative; flex:1; overflow:hidden; display:grid; place-items:center; touch-action:none; cursor:grab;}
.hk-fs-stage.grabbing{cursor:grabbing;}
.hk-fs-stage .fsimg{width:100%; height:100%; background:linear-gradient(160deg,#132038,#070c16); transform-origin:center center;}
.hk-fs-topbar{position:absolute; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; gap:12px;
  padding:14px 18px; color:#eaf2fb; background:linear-gradient(180deg,rgba(4,7,13,.82),transparent);}
.hk-fs-topbar .t{font-family:var(--mono); font-size:12px; letter-spacing:.04em;}
.hk-fs-topbar .live{color:#7fe0ad; font-weight:700;}
.hk-fs-close{margin-left:auto; width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; border-radius:var(--r-pill); font-size:19px;}
.hk-fs-close:hover{background:rgba(255,255,255,.2);}
.hk-fs-dock{position:relative; z-index:6; flex:none; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 18px; background:rgba(10,18,34,.9); backdrop-filter:blur(18px); border-top:1px solid rgba(150,180,220,.22);}
.hk-fs-dock .grp{display:flex; align-items:center; gap:8px;}
.hk-fs-dock .lbl{font:700 10px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:#8fa7c6;}
.hk-fs-dock .sp{flex:1;}
.hk-fs-btn{background:rgba(255,255,255,.08); border:1px solid rgba(150,180,220,.25); color:#eaf2fb; border-radius:var(--r-md);
  padding:10px 14px; font:700 12px/1 var(--sans); cursor:pointer; display:inline-flex; gap:7px; align-items:center;}
.hk-fs-btn:hover{background:rgba(255,255,255,.16);}
.hk-fs-btn:focus-visible{outline:2px solid var(--orange-500); outline-offset:2px;}
.hk-fs-btn.accent{background:var(--orange-500); border-color:var(--orange-500); color:#fff;}
.hk-fs-btn.danger{background:var(--danger); border-color:var(--danger); color:#fff;}
.hk-fs-btn[aria-pressed="true"]{background:rgba(72,120,168,.4); border-color:var(--blue-400);}
.hk-slider{-webkit-appearance:none; appearance:none; width:150px; height:6px; border-radius:99px; background:rgba(150,180,220,.3); outline:none;}
.hk-slider::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--orange-500); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.4);}
.hk-slider::-moz-range-thumb{width:18px; height:18px; border:0; border-radius:50%; background:var(--orange-500); cursor:pointer;}
.hk-fs-dock .zval{font-family:var(--mono); font-size:12px; color:#cfe0f2; min-width:46px; text-align:right;}
body.hk-noscroll{overflow:hidden;}

/* ============ BOOT SPLASH (WebGL medallion) ============ */
.hk-splash{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:radial-gradient(900px 520px at 50% 34%,#12305e,transparent 60%),radial-gradient(700px 480px at 82% 118%,#0c2f4a,transparent 55%),#050c1a;
  transition:opacity .6s ease,transform .6s ease;cursor:pointer;}
.hk-splash.done{opacity:0;transform:scale(1.04);pointer-events:none;}
.hk-splash-orb{position:relative;width:min(74vw,340px);height:min(74vw,340px);}
.hk-splash-orb canvas{width:100%;height:100%;display:block;}
.hk-splash-mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;}
.hk-splash-mark img{width:33%;height:33%;opacity:.95;
  filter:drop-shadow(0 0 14px rgba(120,200,255,.6)) drop-shadow(0 0 3px rgba(255,255,255,.5));
  animation:hk-cw 6s linear infinite;}
@keyframes hk-cw{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.hk-splash-mark img{animation-duration:22s;}}
.hk-splash .brand{font-family:var(--disp);font-weight:800;letter-spacing:.24em;color:#eaf2fb;font-size:15px;}
.hk-splash .sub{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#6ff2c8;display:flex;gap:8px;align-items:center;}
.hk-splash .sub .d{width:7px;height:7px;border-radius:50%;background:#6ff2c8;box-shadow:0 0 8px #6ff2c8;animation:hk-pulse 1.4s infinite;}
@media (prefers-reduced-motion:reduce){.hk-splash .sub .d{animation:none;}}

/* ============ OPTIONAL DARK THEME (Sky Glass night) ============ */
:root[data-theme="dark"]{
  --white:#12203a; --surface:#0f1b2e; --surface2:#162641; --slate-50:#0f1b2e;
  --sky-50:#16264a; --sky-100:#1e3557; --sky:#1e3557;
  --ink:#e8eef8; --ink-900:#e8eef8; --muted:#93a6c4; --slate-500:#93a6c4;
  --line:#22375a;
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 6px 22px rgba(0,0,0,.25);
  --shadow-card-hover:0 12px 30px rgba(0,0,0,.4);
}