/* FARCOM Vision shared shell — Sky-Industrial theme tokens (LIGHT-FIRST) + canonical header.
   Include on any page; pair with farcom-shell.js (injects the header + wires the theme toggle). */
:root{
  color-scheme:light;
  --bg:#F8FAFC; --bg2:#EEF2F7; --surf:#FFFFFF; --surface:#FFFFFF; --surf2:#F1F5F9; --elev:#F1F5F9;
  --ink:#1A2744; --sky-100:#1A2744; --sky-50:#1A2744; --mut:#5A6B85; --muted:#94A3B8; --slate:#5A6B85;
  --line:#E2E8F0; --border:#E2E8F0;
  --blue:#1A3D7C; --blue-400:#1A3D7C; --sapphire:#1A3D7C; --org:#F05A28; --orange:#F05A28;
  --grn:#047857; --success:#047857; --green:#047857; --good:#047857; --ok:#047857;
  --amber:#B45309; --warn:#B45309; --gold:#A16207; --red:#DC2626; --danger:#DC2626; --bad:#DC2626;
  --panel:#FFFFFF; --panel2:#F1F5F9; --card:#FFFFFF; --sky:#1A3D7C; --sky2:#2E5AAC;
  --saph:#1A3D7C; --sapphire-700:#1A3D7C; --blue2:#2563EB; --cyan:#0E7490;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Inter,-apple-system,'Segoe UI',Roboto,system-ui,sans-serif; --radius:14px; --radius-sm:9px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1B2E; --bg2:#0b1524; --surf:#15243B; --surface:#111B30; --surf2:#172a45; --elev:#1A2744;
  --ink:#E6EEFB; --sky-100:#D6E5F2; --sky-50:#F0F6FB; --mut:#93A4BE; --muted:#2A3F5F; --slate:#93A4BE;
  --line:#25324a; --border:#243352;
  --blue:#6EA8FF; --blue-400:#7FB3D5; --sapphire:#7FB3D5; --org:#F05A28; --orange:#F05A28;
  --grn:#3DE06B; --success:#34D399; --green:#34D399; --good:#34D399; --ok:#34D399;
  --amber:#FBBF24; --warn:#FBBF24; --gold:#F5C451; --red:#F87171; --danger:#F87171; --bad:#F87171;
  --panel:#15243B; --panel2:#172a45; --card:#15243B; --sky:#6EA8FF; --sky2:#7FB3D5;
  --saph:#7FB3D5; --sapphire-700:#6EA8FF; --blue2:#6EA8FF; --cyan:#22D3EE;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#EAF2FB 0%,var(--bg) 55%);
  color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
:root[data-theme="dark"] body{background:radial-gradient(1200px 600px at 70% -10%,#14243c 0%,var(--bg) 60%)}
/* ── canonical FARCOM header ── */
.site-header{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 20px;
  background:#0B1830;border-bottom:1px solid rgba(122,179,213,.18);box-shadow:0 2px 20px rgba(0,0,0,.28)}
.site-header::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 220px at 50% -70%,rgba(26,61,124,.6),transparent 70%)}
.site-header>*{position:relative;z-index:1}
.hlogo{display:flex;align-items:center;gap:9px;flex-shrink:0;height:34px;text-decoration:none}
.hlogo .swirl{height:34px;width:34px;animation:fvspin 20s linear infinite;filter:drop-shadow(0 0 6px rgba(122,179,213,.45))}
.hlogo:hover .swirl{animation-play-state:paused;filter:drop-shadow(0 0 10px rgba(240,90,40,.55)) brightness(1.12)}
.hlogo .word{height:16px;opacity:.97}
@keyframes fvspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.htitle{flex:1 1 auto;min-width:0;text-align:center;pointer-events:none;overflow:hidden}
.htitle h1{font-family:Outfit,var(--sans);font-size:clamp(11px,1.9vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800;color:#fff;letter-spacing:.02em;line-height:1.15;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.htitle .sub{font-size:clamp(8px,1.3vw,10.5px);color:rgba(203,213,225,.72);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cobrand{display:flex;align-items:center;gap:9px;margin-left:auto;padding-left:14px;border-left:1px solid rgba(122,179,213,.2)}
.cb-lead{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(203,213,225,.5);max-width:70px;line-height:1.15}
.cb-nv{font-family:Outfit,var(--sans);font-weight:800;font-size:15px;color:#76B900;text-decoration:none}
.cb-div{width:1px;height:18px;background:rgba(255,255,255,.16)}
.cb-cf{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(203,213,225,.72);text-decoration:none}
.hbtns{display:flex;gap:6px;align-items:center;flex:0 0 100%;order:9;margin:8px 0 0;padding-top:9px;border-top:1px solid rgba(122,179,213,.14);flex-wrap:wrap}
.hbtn{height:30px;border-radius:8px;border:1px solid rgba(122,179,213,.3);background:rgba(255,255,255,.06);
  color:#E2E8F0;font:700 12px/1 var(--sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 11px;text-decoration:none;white-space:nowrap}
.hbtn:hover{background:rgba(255,255,255,.14)}
.hbtn.icon{width:30px;padding:0;font-size:14px}
.hbtn.on{background:var(--org);border-color:var(--org);color:#fff}
/* page-specific sub-toolbar (functional controls kept below the canonical header) */
.pagebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 20px;
  background:var(--surf);border-bottom:1px solid var(--line);box-shadow:0 1px 8px rgba(15,27,46,.05)}
.pagebar .grow{flex:1 1 auto}
.pagebar .lbl{font:600 12px/1.3 var(--sans);color:var(--mut)}
/* overlay-layer toggle buttons (traffic cam control bar, full page + homepage embed) */
.ovb{height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surf);color:var(--mut);font:700 11.5px/1 var(--sans);cursor:pointer;padding:0 10px;transition:.12s}
.ovb.on{background:var(--blue);border-color:var(--blue);color:#fff}
.ovb:hover{filter:brightness(1.06)}
.ajpanel{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:9px 14px;background:var(--surf2);border:1px solid var(--line);border-radius:10px;font:600 12px/1.2 var(--sans);color:var(--ink)}
.ajpanel[hidden]{display:none}
.ajpanel input[type=range]{vertical-align:middle;width:150px}
/* form controls: force readable on the light-first surface (pages authored dark-first hardcoded dark inputs) */
input:where([type=text],[type=search],[type=date],[type=number],[type=email],[type=url],[type=time],[type=tel],[type=password],[type=month],[type=datetime-local],:not([type])),
select,textarea{background:var(--surf2)!important;color:var(--ink)!important;border-color:var(--line)!important}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:.8}
@media(max-width:1100px){.cb-lead{display:none}}
@media(max-width:900px){.hbtns{gap:4px}.hbtn{padding:0 8px;font-size:11px}}
@media(max-width:820px){.htitle{position:static;order:3;flex-basis:100%;width:100%}.site-header{flex-wrap:wrap}
  /* fv-mobile-nav: swipeable horizontal nav strip instead of wrapping/clipping */
  .hbtns{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%;min-width:0;margin-left:0;padding-bottom:2px}
  .hbtns::-webkit-scrollbar{display:none}.hbtn{flex:0 0 auto}}