/* SENTINEL — shell, header, tabs, views
   Part of a split stylesheet. Load order is load-bearing:
   tokens.css -> layout.css -> components.css
   Concatenating them in that order reproduces the v10.14 single-file CSS
   byte for byte. Do not reorder the <link> tags. */

/* ══ Command bar — instrument front panel ══ */
  .cmdbar {
    position:sticky; top:0; z-index:40;
    background:linear-gradient(var(--case-hi), #0d131d);
    border-bottom:1px solid var(--rule);
    box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 18px -14px #000;
  }
  .cmdbar-inner { max-width:1240px; margin:0 auto; padding:10px clamp(14px,3vw,28px) 0; }
  .cmd-top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit;
    transition:opacity 0.18s var(--ease); }
  .brand:hover { opacity:0.82; }
  .brand:hover .brand-mark { box-shadow:0 0 16px -2px var(--amber), inset 0 0 8px -4px var(--amber); }
  .brand-mark {
    width:34px; height:26px; border:1px solid var(--amber); border-radius:2px;
    display:grid; place-items:center; color:var(--amber); font-weight:600;
    font-family:var(--disp); font-size:13px; letter-spacing:0.1em;
    background:linear-gradient(#152030,#0d1420);
    box-shadow:0 0 10px -3px var(--amber), inset 0 0 8px -4px var(--amber);
  }
  .brand-text { line-height:1.06; }
  .brand-text .kicker {
    font-family:var(--disp); font-weight:600; letter-spacing:0.3em; font-size:16px; color:var(--ink);
  }
  .brand-text .sub {
    color:var(--ink-faint); font-size:9px; letter-spacing:0.26em; text-transform:uppercase;
    font-family:var(--disp);
  }
  .cmd-right { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .homelink {
    display:inline-flex; align-items:center; gap:7px; text-decoration:none;
    color:var(--ink-faint); font-family:var(--disp); font-size:11px;
    letter-spacing:0.18em; text-transform:uppercase;
    border:1px solid var(--rule); border-radius:2px; padding:6px 11px;
    transition:color 0.18s var(--ease), border-color 0.18s var(--ease);
  }
  .homelink:hover { color:var(--amber); border-color:var(--amber-lo); }
  @media (max-width:620px){ .homelink span { display:none; } .homelink { padding:6px 8px; } }
  .posture { text-align:right; cursor:help; position:relative; }
  .posture .lbl {
    font-size:8.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-faint);
    font-family:var(--disp);
  }
  .posture .val { font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:0.14em; }
  .posture .val.low{color:var(--clear);} .posture .val.guarded{color:var(--band-blue);}
  .posture .val.elevated{color:var(--caution);} .posture .val.high{color:var(--warn);}
  .posture .val.severe{color:var(--alarm);}
  .posture .tip {
    position:absolute; right:0; top:100%; margin-top:6px; width:264px;
    background:#080c14; border:1px solid var(--rule); border-radius:2px; padding:10px 12px;
    font-size:10.5px; color:var(--ink-dim); line-height:1.65; text-align:left;
    opacity:0; pointer-events:none; transition:opacity 0.18s; z-index:60;
    box-shadow:0 12px 30px -12px #000;
  }
  .posture:hover .tip { opacity:1; }
  .clock { text-align:right; font-size:10px; letter-spacing:0.1em; color:var(--ink-faint); }
  .clock .live { display:inline-flex; align-items:center; gap:6px; color:var(--ink-dim);
    font-family:var(--disp); letter-spacing:0.2em; text-transform:uppercase; font-size:9.5px; }
  .dot { width:6px; height:6px; border-radius:50%; background:var(--clear);
    box-shadow:0 0 6px var(--clear); animation:lamp 2.2s infinite; }


  /* ══ Two-state header ═══════════════════════════════════════════
     At rest: full command panel (orientation).
     Scrolled: 52px rail with brand, posture and tabs (navigation).
     Stats and spectrum are read on arrival, not continuously — so they
     collapse away and return when you scroll back up.                */
  .cmdbar { transition:box-shadow 0.25s var(--ease); }
  .cmdbar.compact { box-shadow:0 6px 20px -12px #000, 0 1px 0 var(--rule); }

  /* the collapsing region */
  .cmd-collapse {
    overflow:hidden;
    max-height:400px; opacity:1;
    transition:max-height 0.32s var(--ease), opacity 0.22s var(--ease),
               margin 0.32s var(--ease);
  }
  .cmdbar.compact .cmd-collapse {
    max-height:0; opacity:0; margin-top:0; margin-bottom:0;
    pointer-events:none;
  }

  /* brand shrinks rather than vanishing */
  .brand-text { transition:max-width 0.3s var(--ease), opacity 0.2s var(--ease); overflow:hidden; }
  .cmdbar.compact .brand-text .sub { display:none; }
  .cmdbar.compact .brand-mark { width:28px; height:22px; font-size:12px; }
  .cmdbar.compact .cmd-top { padding-bottom:0; }
  .cmd-top { transition:padding 0.28s var(--ease); }

  /* posture migrates into the rail instead of disappearing —
     it is the one figure worth never losing */
  .cmdbar.compact .posture .lbl { display:none; }
  .cmdbar.compact .posture .val { font-size:14px; }
  .cmdbar.compact .clock #clock { display:none; }
  .posture .val { transition:font-size 0.28s var(--ease); }

  /* compact readout of the stats, only visible when collapsed */
  .mini-stats { display:none; gap:14px; align-items:center; }
  .cmdbar.compact .mini-stats { display:inline-flex; }
  .mini-stats .ms { font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
  .mini-stats .ms b { font-family:var(--disp); font-size:14px; font-weight:600; }
  .mini-stats .ms.k b{color:var(--warn);} .mini-stats .ms.r b{color:var(--alarm);}
  .mini-stats .ms.c b{color:var(--amber);}
  @media (max-width:880px){ .mini-stats { display:none !important; } }

  /* hairline scroll progress keeps the collapsed rail connected to the page */
  .scroll-prog { position:absolute; left:0; bottom:-1px; height:1px; width:0%;
    background:linear-gradient(90deg, var(--amber), transparent);
    transition:width 0.1s linear; opacity:0; }
  .cmdbar.compact .scroll-prog { opacity:0.85; }

  @media (prefers-reduced-motion:reduce){
    .cmd-collapse, .brand-text, .posture .val, .cmd-top { transition:none !important; }
  }

  /* ══ Stat strip — clickable channel readouts ══ */
  .stats { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin:10px 0 0;
           background:var(--rule); border:1px solid var(--rule); }
  .stat {
    background:linear-gradient(var(--screen),#0a0e16); padding:9px 12px; position:relative;
    text-align:left; font-family:var(--mono); cursor:pointer; border:none;
    border-top:2px solid transparent; transition:border-color 0.2s var(--ease), background 0.2s;
  }
  .stat:hover { background:linear-gradient(#121b27,#0b111b); }
  .stat:hover .n { text-shadow:0 0 14px currentColor; }
  .stat .n { font-family:var(--disp); font-weight:600; font-size:26px; line-height:1; letter-spacing:0.02em; }
  .stat .k { font-size:8.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint);
    margin-top:4px; font-family:var(--disp); }
  .stat .go { position:absolute; top:9px; right:10px; font-size:10px; color:var(--ink-faint);
    opacity:0; transition:opacity 0.2s, transform 0.2s var(--ease); }
  .stat:hover .go { opacity:1; transform:translateX(2px); }
  .stat.c-kev .n{color:var(--warn);}    .stat.c-kev:hover{border-top-color:var(--warn);}
  .stat.c-ransom .n{color:var(--alarm);} .stat.c-ransom:hover{border-top-color:var(--alarm);}
  .stat.c-c2 .n{color:var(--amber);}     .stat.c-c2:hover{border-top-color:var(--amber);}
  .stat.c-mal .n{color:var(--caution);}  .stat.c-mal:hover{border-top-color:var(--caution);}
  .stat.c-phish .n{color:var(--violet);} .stat.c-phish:hover{border-top-color:var(--violet);}
  @media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:420px){ .stat .n{font-size:20px;} }

  /* ══ SIGNATURE: Intercept spectrum strip ══
     Every recent threat event is a trace on the band. Height = severity,
     colour = band, position = arrival order. Each trace is clickable. */
  .spectrum {
    margin-top:10px; border:1px solid var(--rule); border-radius:3px;
    background:
      linear-gradient(var(--screen), #060911);
    position:relative; overflow:hidden;
    box-shadow:inset 0 0 24px -6px rgba(0,0,0,0.9);
  }
  .spec-head {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:5px 10px; border-bottom:1px solid var(--rule-soft);
    font-family:var(--disp); font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--ink-dim);
  }
  .spec-head .lit { color:var(--amber); display:inline-flex; align-items:center; gap:6px; }
  .spec-head .lit::before {
    content:""; width:5px; height:5px; border-radius:50%; background:var(--amber);
    box-shadow:0 0 6px var(--amber); animation:lamp 1.9s infinite;
  }
  @keyframes lamp { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
  .spec-wrap { position:relative; height:88px; }
  .spec-svg { display:block; width:100%; height:88px; }
  /* graticule */
  .spec-grid line { stroke:var(--rule-soft); stroke-width:0.5; }
  .spec-floor { stroke:var(--amber-lo); stroke-width:0.7; stroke-dasharray:3 3; opacity:0.7; }
  .trace { cursor:pointer; }
  .trace rect { transition:opacity 0.18s var(--ease); }
  .trace:hover rect { opacity:1 !important; }
  .trace .cap { opacity:0; transition:opacity 0.18s; }
  .trace:hover .cap { opacity:1; }
  .spec-tip {
    position:absolute; pointer-events:none; z-index:6; opacity:0; transition:opacity 0.14s;
    background:#080c14; border:1px solid var(--rule); border-left-width:2px;
    padding:6px 9px; font-size:10.5px; line-height:1.5; white-space:nowrap;
    box-shadow:0 8px 22px -8px #000;
  }
  .spec-tip b { color:var(--ink); font-weight:500; }
  .spec-tip .bandname { font-family:var(--disp); letter-spacing:0.14em; text-transform:uppercase; font-size:9.5px; }
  .spec-legend {
    display:flex; gap:14px; flex-wrap:wrap; padding:5px 10px;
    border-top:1px solid var(--rule-soft); font-size:9.5px;
    font-family:var(--disp); letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint);
  }
  .spec-legend span { display:inline-flex; align-items:center; gap:5px; }
  .spec-legend i { width:7px; height:7px; display:inline-block; background:currentColor; }
  .spec-empty { padding:22px 10px; text-align:center; color:var(--ink-faint); font-size:11px;
    font-family:var(--disp); letter-spacing:0.2em; text-transform:uppercase; }

  /* ══ Tabs — function-key row ══ */
  .tabs { display:flex; gap:0; margin-top:10px; overflow-x:auto; scrollbar-width:none;
    border-top:1px solid var(--rule-soft); }
  .tabs::-webkit-scrollbar { display:none; }
  .tab {
    flex:none; background:none; border:none; border-bottom:2px solid transparent;
    color:var(--ink-faint); font-family:var(--disp); font-size:12px; letter-spacing:0.19em;
    text-transform:uppercase; padding:11px 16px; cursor:pointer;
    transition:color 0.18s var(--ease), border-color 0.18s var(--ease);
    display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  }
  .tab:hover { color:var(--ink-dim); }
  .tab.active { color:var(--amber); border-bottom-color:var(--amber); text-shadow:0 0 12px rgba(255,176,32,0.4); }
  .tab .cnt { font-family:var(--mono); font-size:9.5px; color:var(--ink-faint);
    border:1px solid var(--rule); padding:0 5px; }
  .tab.active .cnt { color:var(--amber); border-color:var(--amber-lo); }

  /* ══ Toolbar (search / filter) ══ */
  .toolbar { display:flex; gap:10px; align-items:center; margin:20px 0 14px; flex-wrap:wrap; }
  .search {
    flex:1 1 260px; display:flex; align-items:center; gap:9px;
    background:var(--screen); border:1px solid var(--rule); border-radius:2px; padding:8px 12px;
    transition:border-color 0.2s;
  }
  .search:focus-within { border-color:var(--amber); box-shadow:0 0 0 1px var(--amber-lo); }
  .search svg { flex:none; opacity:0.55; }
  .search input {
    flex:1; background:none; border:none; outline:none; color:var(--ink);
    font-family:var(--mono); font-size:12.5px;
  }
  .search input::placeholder { color:var(--ink-faint); }
  .search kbd { font-size:9px; color:var(--ink-faint); border:1px solid var(--line);
                border-radius:3px; padding:1px 5px; letter-spacing:0.06em; }
  .btn {
    background:linear-gradient(#16202e,#0f1620); border:1px solid var(--rule); color:var(--ink-dim);
    font-family:var(--disp); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
    padding:8px 14px; border-radius:2px; cursor:pointer; transition:all 0.18s var(--ease);
  }
  .btn:hover { color:var(--amber); border-color:var(--amber-lo); }
  .btn.on { color:#0a0e16; background:var(--amber); border-color:var(--amber); font-weight:600; }

  /* ══ Views ══ */
  .view { display:none; animation:fadeUp 0.35s var(--ease) both; }
  .view.active { display:block; }
  @keyframes fadeUp { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

  .section-head { margin:0 0 12px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .section-head h2 { font-family:var(--disp); font-size:clamp(20px,2.8vw,27px); font-weight:600;
    letter-spacing:0.16em; text-transform:uppercase; margin:0; color:var(--ink); }
  .section-head h2 .accent { color:var(--amber); }
  .section-head .meta { font-size:10px; color:var(--ink-faint); letter-spacing:0.14em;
    font-family:var(--disp); text-transform:uppercase; }
  .section-head .meta b { color:var(--ink-dim); font-weight:500; }

  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .grid-map { display:grid; grid-template-columns:1fr 290px; gap:14px; }
  @media (max-width:960px){ .grid2, .grid-map { grid-template-columns:1fr; } }

  .card { border:1px solid var(--rule); border-radius:2px; background:var(--case-hi); overflow:hidden;
    box-shadow:0 1px 0 rgba(255,255,255,0.02) inset; }
  .card-head { padding:8px 12px; border-bottom:1px solid var(--rule-soft); display:flex;
               align-items:center; justify-content:space-between; gap:10px;
               background:linear-gradient(#141d2b,#0f1620); }
  .card-head h3 { font-family:var(--disp); font-size:12px; font-weight:600; margin:0;
    letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-dim); }
  .card-head .sub { font-size:9px; color:var(--ink-faint); letter-spacing:0.16em;
    text-transform:uppercase; font-family:var(--disp); }

  /* scroll boxes */
  .scrollbox { position:relative; }
  .scrollbox .scroller {
    max-height:var(--sb-h,460px); overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  }
  .scrollbox .scroller::-webkit-scrollbar { width:10px; }
  .scrollbox .scroller::-webkit-scrollbar-track { background:transparent; }
  .scrollbox .scroller::-webkit-scrollbar-thumb { background:var(--line); border-radius:6px; border:3px solid var(--bg-panel); }
  .scrollbox .scroller::-webkit-scrollbar-thumb:hover { background:var(--cyan); }
  .scrollbox::after {
    content:""; position:absolute; left:1px; right:11px; bottom:1px; height:30px;
    background:linear-gradient(transparent, var(--bg-panel));
    pointer-events:none; border-radius:0 0 8px 8px; opacity:0.9; transition:opacity 0.2s;
  }
  .scrollbox.at-end::after { opacity:0; }

  /* rows shared */
  .row { display:grid; gap:12px; align-items:center; padding:11px 14px;
         border-bottom:1px solid var(--line-soft); border-left:3px solid transparent;
         background:var(--bg-row); transition:background 0.15s, border-color 0.15s;
         animation:slideIn 0.35s var(--ease) both; }
  .row:last-child { border-bottom:none; }
  .row:hover { background:#121b27; }
  @keyframes slideIn { from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;} }
  .row.hit { animation:flashNew 1.6s var(--ease); }
  @keyframes flashNew { 0%{background:rgba(52,227,212,0.16);} 100%{background:var(--bg-row);} }

  .tag { font-size:9.5px; letter-spacing:0.07em; text-transform:uppercase; padding:2px 6px;
         border-radius:3px; border:1px solid currentColor; white-space:nowrap; }
  .muted { color:var(--ink-faint); font-size:11px; }
  .nowrap { white-space:nowrap; }

  .state { padding:34px 16px; text-align:center; color:var(--ink-faint); font-size:11px;
    font-family:var(--disp); letter-spacing:0.2em; text-transform:uppercase; }
  /* Faults read like an instrument reporting a condition, not an apology. */
  .fault { padding:26px 18px; text-align:center; }
  .fault .code { font-family:var(--disp); font-size:11px; letter-spacing:0.26em;
    text-transform:uppercase; color:var(--alarm); margin-bottom:7px; }
  .fault .msg { color:var(--ink-dim); font-size:12px; font-family:var(--mono); line-height:1.6;
    max-width:420px; margin:0 auto; }
  .fault .act { margin-top:12px; }
  .state.err { color:var(--warn); }

  footer { margin-top:26px; padding-top:14px; border-top:1px solid var(--line);
           font-size:10.5px; color:var(--ink-faint); letter-spacing:0.05em; line-height:1.9; }
  footer a { color:var(--ink-dim); text-decoration:none; }
  footer a:hover { color:var(--cyan); }

  @media (prefers-reduced-motion:reduce){ *,*::before{animation:none!important; transition:none!important;} }
  :focus-visible { outline:2px solid var(--amber); outline-offset:2px; }