/* ============================================================
   AEGIS — Module-specific layouts
   ============================================================ */
.view-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom: 12px; flex-wrap: wrap; }
.view-hd__title{ font-family: var(--sans); font-size: 18px; font-weight:600; letter-spacing:0.14em; color: var(--txt-hi); }
.view-hd__sub{ font-size: 10px; letter-spacing: 0.2em; color: var(--txt-dim); }
.view-hd__right{ display:flex; align-items:center; gap: 10px; }

.grid{ display:grid; gap: 12px; }
.grid-2{ grid-template-columns: 1fr 1fr; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-main{ grid-template-columns: 1.7fr 1fr; }
.grid-side{ grid-template-columns: 1fr 320px; }
@media (max-width: 860px){ .grid-2,.grid-3,.grid-main,.grid-side{ grid-template-columns: 1fr; } }

.readout{ display:flex; flex-direction:column; gap: 7px; }
.readout__row{ display:flex; justify-content:space-between; align-items:center; gap: 10px;
  padding: 5px 0; border-bottom: 1px dashed var(--edge); font-size: 12px; }
.readout__row:last-child{ border-bottom:none; }
.readout__k{ color: var(--txt-dim); font-size: 11px; letter-spacing: 0.08em; }
.readout__v{ color: var(--txt-hi); font-variant-numeric: tabular-nums; }

/* ---------- GLOBAL WATCH ---------- */
.watch-wrap{ position: relative; height: calc(100vh - 230px); min-height: 360px; }
@media (max-width:860px){ .watch-wrap{ height: 58vh; } }
.watch-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.watch-overlay{ position:absolute; inset:0; pointer-events:none; }
.watch-hud{ position:absolute; padding: 8px 10px; font-size: 10px; letter-spacing: 0.12em; color: var(--cyan); background: rgba(5,8,12,0.5); border:1px solid var(--edge); }
.watch-hud.tl{ top: 10px; left: 10px; } .watch-hud.tr{ top:10px; right:10px; text-align:right; }
.watch-hud.bl{ bottom:10px; left:10px; } .watch-hud.br{ bottom:10px; right:10px; text-align:right; }
.watch-legend span{ display:inline-flex; align-items:center; gap:5px; margin-right:12px; }
.dotlg{ width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ---------- INTERCEPT QUEUE ---------- */
.iq-list{ display:flex; flex-direction:column; gap: 8px; }
.iq-empty{ text-align:center; color: var(--txt-faint); padding: 40px; font-size: 12px; letter-spacing: 0.18em; }
.iqcard{ position:relative; border:1px solid var(--edge); background: rgba(10,18,27,0.5); padding: 10px 12px;
  display:grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items:center; transition: border-color .15s; }
.iqcard:hover{ border-color: var(--edge-hi); }
.iqcard--crit{ border-left: 3px solid var(--sev-crit); }
.iqcard--high{ border-left: 3px solid var(--sev-high); }
.iqcard--med{ border-left: 3px solid var(--sev-med); }
.iqcard--low{ border-left: 3px solid var(--sev-low); }
.iqcard__sig{ font-size: 22px; color: var(--cyan); width: 34px; text-align:center; }
.iqcard__main{ min-width:0; }
.iqcard__title{ color: var(--txt-hi); font-size: 13px; }
.iqcard__meta{ font-size: 10px; color: var(--txt-dim); letter-spacing: 0.08em; margin-top: 2px; }
.iqcard__act{ display:flex; gap: 6px; align-items:center; }
.iqcard__timer{ font-size: 10px; color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.iqcard__timer.warn{ color: var(--amber); } .iqcard__timer.crit{ color: var(--red); }

/* ---------- CRYPTANALYSIS ---------- */
.crypto-stage{ display:flex; flex-direction:column; gap: 14px; }
.cipher-box{ font-size: 18px; letter-spacing: 0.3em; word-break: break-all; color: var(--amber);
  background: rgba(0,0,0,0.35); border: 1px solid var(--edge); padding: 14px; line-height: 1.9; }
.cipher-box .solved{ color: var(--green); }
.wave-canvas{ width:100%; height: 120px; display:block; background: rgba(0,0,0,0.3); border:1px solid var(--edge); }
.slider-row{ display:flex; align-items:center; gap: 12px; }
.slider-row label{ font-size: 10px; letter-spacing: 0.16em; color: var(--txt-dim); width: 90px; }
.match-meter{ height: 8px; background: var(--edge); position:relative; flex:1; }
.match-meter__fill{ position:absolute; inset:0 auto 0 0; background: linear-gradient(90deg, var(--red), var(--amber), var(--green)); width:0; }
.keypad{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.keypad button{ aspect-ratio: 1.4; }

/* range input themed */
input[type=range]{ -webkit-appearance:none; appearance:none; height: 4px; background: var(--edge-hi); flex:1; outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; background: var(--cyan); cursor:pointer; box-shadow: 0 0 8px rgba(52,214,232,.6); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; background: var(--cyan); border:none; cursor:pointer; }

/* text input themed */
.field-input{ font-family: var(--mono); background: rgba(0,0,0,0.35); border:1px solid var(--edge-hi);
  color: var(--cyan); padding: 10px 12px; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; width:100%; outline:none; }
.field-input:focus{ border-color: var(--cyan); }

/* ---------- TARGET SURVEILLANCE ---------- */
.surv-feed{ position: relative; aspect-ratio: 16/10; background:
  repeating-linear-gradient(0deg, rgba(52,214,232,.04) 0 2px, transparent 2px 4px), #04070a;
  border:1px solid var(--edge); overflow:hidden; }
.surv-feed__noise{ position:absolute; inset:0; opacity:.5; }
.surv-target{ position:absolute; width: 46px; height:46px; border:1px solid var(--green); transform: translate(-50%,-50%); transition: left .9s ease, top .9s ease; }
.surv-target::before,.surv-target::after{ content:""; position:absolute; background: var(--green); }
.surv-target::before{ left:50%; top:-8px; width:1px; height:8px; } .surv-target::after{ left:50%; bottom:-8px; width:1px; height:8px; }
.surv-recticle{ position:absolute; inset:0; pointer-events:none; }
.surv-osd{ position:absolute; font-size:10px; letter-spacing:0.1em; color: var(--green); }
.surv-osd.tl{ top:8px; left:8px } .surv-osd.tr{ top:8px; right:8px; text-align:right } .surv-osd.bl{ bottom:8px; left:8px } .surv-osd.br{ bottom:8px; right:8px; text-align:right }
.surv-rec{ display:inline-flex; align-items:center; gap:5px; color: var(--red); }
.surv-rec .dot{ width:8px;height:8px;border-radius:50%;background:var(--red); animation: banner-pulse 1s infinite; }

/* ---------- GEOLOCATION ---------- */
.geo-canvas{ width:100%; aspect-ratio: 4/3; display:block; background: radial-gradient(circle at 50% 50%, rgba(52,214,232,.04), transparent 70%), #04070a; border:1px solid var(--edge); }

/* ---------- ASSET COMMS ---------- */
.comms-log{ display:flex; flex-direction:column; gap: 10px; height: 340px; overflow-y:auto; padding-right: 4px; }
.msg{ max-width: 80%; padding: 8px 11px; font-size: 12px; border:1px solid var(--edge); position:relative; }
.msg__hd{ font-size: 9px; letter-spacing: 0.14em; color: var(--txt-dim); margin-bottom: 3px; }
.msg.in{ align-self: flex-start; background: rgba(10,18,27,0.6); border-left: 2px solid var(--cyan-dim); }
.msg.out{ align-self: flex-end; background: rgba(52,214,232,0.06); border-right: 2px solid var(--cyan); }
.msg.sys{ align-self:center; border:none; color: var(--txt-faint); font-size: 10px; letter-spacing:0.16em; }
.comms-compose{ display:flex; gap: 8px; margin-top: 10px; }

/* ---------- DIAGNOSTICS ---------- */
.diag-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 10px 0; border-bottom:1px solid var(--edge); }
.diag-row:last-child{ border-bottom:none; }
.diag-row__info .n{ color: var(--txt-hi); font-size:12px; } .diag-row__info .d{ color: var(--txt-dim); font-size:10px; letter-spacing:0.08em; }
.toggle{ width: 46px; height: 22px; border:1px solid var(--edge-hi); background: rgba(0,0,0,0.4); position:relative; cursor:pointer; flex-shrink:0; transition: border-color .15s; }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; background: var(--txt-dim); transition: left .18s, background .18s; }
.toggle.on{ border-color: var(--cyan); } .toggle.on::after{ left: 26px; background: var(--cyan); box-shadow:0 0 8px rgba(52,214,232,.6); }
.gauge{ display:flex; flex-direction:column; gap:5px; }
.gauge__bar{ height: 10px; background: var(--edge); position:relative; }
.gauge__fill{ position:absolute; inset:0 auto 0 0; background: var(--cyan); }
.gauge__fill.warn{ background: var(--amber); } .gauge__fill.crit{ background: var(--red); }
.danger-zone{ border-color: var(--red-dim) !important; }

/* ---------- SECURE TRANSMISSION overlay ---------- */
.xmit{ position:absolute; inset:0; z-index:45; display:flex; align-items:center; justify-content:center;
  background: rgba(3,5,8,0.72); backdrop-filter: blur(3px); animation: view-in .25s ease; }
.xmit__box{ width: 460px; max-width: 90vw; background: var(--panel-sol); }
.xmit__hd{ display:flex; justify-content:space-between; align-items:center; padding: 9px 12px;
  border-bottom:1px solid var(--edge); font-size:11px; letter-spacing:0.2em; color: var(--cyan); }
.xmit__body{ padding: 14px; min-height: 168px; font-size: 12px; line-height: 1.9; color: var(--green); letter-spacing:0.04em; }
.xmit__line{ animation: view-in .18s ease; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.xmit__line.ok{ color: var(--cyan); font-weight: 600; }
.xmit__bar{ height: 4px; background: var(--edge); position: relative; }
.xmit__bar i{ position:absolute; inset:0 auto 0 0; width:0; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  box-shadow: 0 0 8px rgba(52,214,232,.6); }