/* ============================================================
   AEGIS — Console shell (banner / header / nav / ticker)
   ============================================================ */
.console{
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: var(--banner-h) var(--hdr-h) 1fr var(--ticker-h) var(--banner-h);
}

/* classification banners */
.class-banner{
  display:flex; align-items:center; justify-content:center;
  font-size: 9px; letter-spacing: 0.3em; color: #d8e6c0;
  background: repeating-linear-gradient(45deg, rgba(255,176,31,0.06) 0 10px, transparent 10px 20px), #0c1108;
  border-block: 1px solid var(--amber-dim);
  color: var(--amber);
}

/* header */
.hdr{
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  padding: 0 16px; background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-bottom: 1px solid var(--edge);
}
.hdr__id{ display:flex; align-items:center; gap: 12px; min-width: var(--nav-w); }
.hdr__crest{ width: 34px; height: 34px; }
.hdr__crest polygon{ fill:none; stroke: var(--cyan); stroke-width: 2; }
.hdr__crest text{ fill: var(--cyan); font-family: var(--sans); font-weight:600; font-size: 38px; }
.hdr__name{ font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: 0.34em; color: var(--txt-hi); }
.hdr__role{ font-size: 9px; letter-spacing: 0.22em; color: var(--txt-dim); }

.hdr__metrics{ display:flex; align-items:center; gap: 22px; flex: 1; justify-content:center; flex-wrap: wrap; }
.metric{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.metric__v{ font-size: 17px; color: var(--txt-hi); font-variant-numeric: tabular-nums; line-height:1; }
.metric__v.warn{ color: var(--amber); }
.metric__v.crit{ color: var(--red); }
.metric__l{ font-size: 8px; letter-spacing: 0.18em; color: var(--txt-dim); text-transform: uppercase; }

.hdr__status{ text-align:right; min-width: 150px; }
.hdr__clock{ font-size: 18px; color: var(--cyan); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.hdr__session{ font-size: 9px; letter-spacing: 0.16em; color: var(--txt-dim); }
.hdr__defcon{ font-size: 9px; letter-spacing: 0.16em; color: var(--txt-dim); }
.hdr__defcon span{ color: var(--amber); }

/* body */
.body{ display:flex; min-height: 0; }

/* nav */
.nav{
  width: var(--nav-w); flex-shrink:0; border-right: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(10,18,27,0.6), rgba(5,8,12,0.6));
  padding: 10px 8px; display:flex; flex-direction:column; gap: 3px; overflow-y:auto;
}
.nav__sec{ font-size: 8px; letter-spacing: 0.24em; color: var(--txt-faint); padding: 12px 8px 4px; }
.navitem{
  position: relative; display:flex; align-items:center; gap: 10px;
  padding: 9px 10px; cursor: pointer; color: var(--txt-dim);
  border: 1px solid transparent; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: color .12s, background .12s, border-color .12s;
}
.navitem:hover{ color: var(--txt); background: rgba(52,214,232,0.04); }
.navitem.active{ color: var(--cyan); background: rgba(52,214,232,0.08); border-color: var(--cyan-dim); }
.navitem.active::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px; background: var(--cyan); }
.navitem__ico{ width:16px; height:16px; flex-shrink:0; opacity:.8; }
.navitem__ico svg{ width:100%; height:100%; stroke: currentColor; fill:none; stroke-width:1.6; }
.navitem__txt{ flex:1; }
.navitem__badge{
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font-size: 10px; display:flex; align-items:center; justify-content:center;
  background: var(--red); color: #fff; font-family: var(--mono);
}
.navitem__badge.hidden{ display:none !important; }
.navitem__badge.calm{ background: var(--cyan-dim); }

/* screen */
.screen{ flex:1; min-width:0; position: relative; overflow: hidden; }
.screen__view{ position:absolute; inset:0; padding: 14px; overflow-y:auto; }

/* ticker */
.ticker{
  display:flex; align-items:center; gap: 10px; padding: 0 12px;
  border-top: 1px solid var(--edge); background: var(--bg-1); overflow:hidden;
}
.ticker__tag{ font-size: 9px; letter-spacing: 0.2em; color: var(--txt-faint); flex-shrink:0; }
.ticker__rail{ flex:1; overflow:hidden; white-space:nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker__feed{ display:inline-block; white-space:nowrap; will-change: transform; }
.ticker__item{ margin-right: 42px; font-size: 11px; color: var(--txt-dim); }
.ticker__item .ts{ color: var(--cyan-dim); }
.ticker__item.warn{ color: var(--amber); }
.ticker__item.crit{ color: var(--red); }

/* toasts */
.toasts{ position: fixed; top: calc(var(--banner-h) + var(--hdr-h) + 10px); right: 14px; z-index: 40;
  display:flex; flex-direction:column; gap:8px; max-width: 320px; }
.toast{
  background: var(--panel-sol); border: 1px solid var(--red-dim); padding: 10px 12px;
  border-left-width: 3px; animation: toast-in .3s ease;
}
.toast__hd{ font-size: 9px; letter-spacing: 0.2em; color: var(--red); display:flex; justify-content:space-between; }
.toast__bd{ font-size: 11px; color: var(--txt); margin-top: 4px; }
.toast.calm{ border-color: var(--cyan-dim); }
.toast.calm .toast__hd{ color: var(--cyan); }

/* ---- mobile ---- */
@media (max-width: 860px){
  :root{ --hdr-h: auto; }
  .console{ grid-template-rows: var(--banner-h) auto 1fr auto var(--banner-h); }
  .hdr{ flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .hdr__id{ min-width: 0; }
  .hdr__metrics{ order: 3; width:100%; justify-content: space-between; gap: 8px; }
  .hdr__status{ min-width: 0; }
  .hdr__name{ font-size: 15px; letter-spacing: 0.2em; }
  .metric__v{ font-size: 14px; }

  .body{ position: relative; }
  .nav{
    position: fixed; bottom: var(--banner-h); left:0; right:0; width:auto; z-index: 30;
    flex-direction: row; border-right: none; border-top: 1px solid var(--edge);
    padding: 4px; gap: 2px; overflow-x: auto; overflow-y: hidden;
  }
  .nav__sec{ display:none; }
  .navitem{ flex-direction: column; gap: 3px; padding: 6px 8px; font-size: 8px; min-width: 62px; flex-shrink:0; text-align:center; }
  .navitem.active::before{ display:none; }
  .navitem__txt{ flex: none; }
  .navitem__badge{ position:absolute; top: 2px; right: 8px; min-width:15px; height:15px; font-size:9px; }
  .ticker{ display:none; }
  .toasts{ top: auto; bottom: 70px; right: 8px; left: 8px; max-width: none; }
  .screen__view{ padding: 10px; padding-bottom: 80px; }
}