/* Y2KDASH — mission-control cockpit aesthetic
   Phosphor-green CRT with amber secondary, black substrate, scanlines,
   flicker, ASCII-adjacent borders.  Monospace everywhere.  No rounded
   corners, no drop-shadow softness — sharp geometry, old-CRT glow. */

:root {
  --phos:        #00ff41;         /* primary phosphor green */
  --phos-dim:    #009929;
  --phos-deep:   #003d10;
  --amber:       #ffb000;         /* uplink / warn / secondary */
  --amber-dim:   #995e00;
  --red:         #ff2a2a;         /* alarm / packet loss */
  --red-dim:     #7a1010;
  --bg:          #000000;
  --bg-alt:      #050a05;         /* very slight green bias */
  --bg-panel:    #0a0f0a;
  --bg-inset:    #050805;
  --grid:        rgba(0, 255, 65, 0.08);
  --text:        #b8ffb8;
  --text-dim:    #5a8a5a;
  --text-bright: #dcffdc;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Share Tech Mono', 'VT323', 'Courier New', monospace;
  font-size: 15px;
  line-height: 1.35;
  min-height: 100vh;
  overflow-x: hidden;
  letter-spacing: 0.02em;
  /* Subtle CRT texture via layered gradients */
  background-image:
    radial-gradient(ellipse at center, rgba(0, 255, 65, 0.03) 0%, transparent 70%),
    linear-gradient(180deg, #000 0%, #050a05 100%);
}

/* ═══════════════════════════════════════════════════════════════
   CRT overlays — scanlines, vignette, flicker
   ═══════════════════════════════════════════════════════════════ */

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 255, 65, 0.04) 2px,
    rgba(0, 255, 65, 0.04) 3px
  );
  mix-blend-mode: screen;
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
}

.flicker {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: rgba(0, 255, 65, 0);
  animation: crt-flicker 6s infinite;
}
@keyframes crt-flicker {
  0%, 93%, 100% { background: rgba(0, 255, 65, 0); }
  94% { background: rgba(0, 255, 65, 0.02); }
  95% { background: rgba(0, 255, 65, 0); }
  96% { background: rgba(0, 255, 65, 0.03); }
  97% { background: rgba(0, 255, 65, 0); }
}

/* ═══════════════════════════════════════════════════════════════
   Header / mission bar
   ═══════════════════════════════════════════════════════════════ */

.cockpit-bar {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0;
  padding: 10px 20px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--phos-dim);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1.5px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0 24px rgba(0, 255, 65, 0.1), inset 0 -1px 0 var(--phos-deep);
}
.bar-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-right: 1px solid var(--phos-deep);
  white-space: nowrap;
}
.bar-cell:last-child { border-right: none; padding-right: 0; }
.bar-cell:first-child { padding-left: 0; }

.brand-cell { gap: 12px; }
.brand-glyph {
  color: var(--phos);
  text-shadow: 0 0 8px var(--phos), 0 0 16px var(--phos-dim);
  font-size: 14px;
  animation: pulse-dot 1.8s infinite;
}
.brand-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--phos);
  text-shadow: 0 0 6px var(--phos), 0 0 12px var(--phos-dim);
  letter-spacing: 2px;
}
.brand-sub {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 1.5px;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.clock-cell { gap: 10px; }
.clock-key {
  color: var(--text-dim);
  font-size: 11px;
}
.clock-value {
  color: var(--amber);
  font-family: 'VT323', monospace;
  font-size: 20px;
  text-shadow: 0 0 6px var(--amber-dim);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.status-cell { gap: 10px; }
.status-led {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--phos);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--phos), 0 0 20px var(--phos-dim);
  animation: pulse-dot 1.6s infinite;
}
.led-amber  { background: var(--amber); box-shadow: 0 0 10px var(--amber), 0 0 20px var(--amber-dim); }
.led-red    { background: var(--red);   box-shadow: 0 0 10px var(--red),   0 0 20px var(--red-dim);   }
.status-text {
  color: var(--phos);
  font-size: 13px;
  text-shadow: 0 0 4px var(--phos-dim);
}

/* ═══════════════════════════════════════════════════════════════
   Cockpit grid layout
   ═══════════════════════════════════════════════════════════════ */

.cockpit {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "telem  throughput latency"
    "telem  throughput capability"
    "log    packets    history";
  gap: 14px;
  padding: 18px;
  max-width: 1480px;
  margin: 0 auto;
}
.panel-telemetry   { grid-area: telem; }
.panel-throughput  { grid-area: throughput; }
.panel-latency     { grid-area: latency; }
.panel-capability  { grid-area: capability; }
.panel-log         { grid-area: log; }
.panel-packets     { grid-area: packets; }
.panel-history     { grid-area: history; }

/* ═══════════════════════════════════════════════════════════════
   Panel base styling — ASCII-frame feel via borders + corners
   ═══════════════════════════════════════════════════════════════ */

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--phos-dim);
  position: relative;
  min-height: 120px;
  /* Corner brackets via pseudo-elements */
}
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--phos);
  pointer-events: none;
}
.panel::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.panel::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--phos-deep);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.panel-label {
  color: var(--amber);
  font-family: 'VT323', monospace;
  font-size: 18px;
  text-shadow: 0 0 4px var(--amber-dim);
}
.panel-title {
  color: var(--phos);
  text-shadow: 0 0 4px var(--phos-dim);
  flex: 1;
}
.panel-dot {
  width: 8px;
  height: 8px;
  background: var(--phos-deep);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--phos-deep);
  transition: background 0.3s, box-shadow 0.3s;
}
.panel-dot.active { background: var(--phos); box-shadow: 0 0 10px var(--phos), 0 0 20px var(--phos-dim); animation: pulse-dot 1s infinite; }
.panel-dot.warn   { background: var(--amber); box-shadow: 0 0 10px var(--amber), 0 0 20px var(--amber-dim); }
.panel-dot.alarm  { background: var(--red); box-shadow: 0 0 10px var(--red), 0 0 20px var(--red-dim); }

.panel-body {
  padding: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   Telemetry panel — connection info
   ═══════════════════════════════════════════════════════════════ */

.telem-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--phos-deep);
  font-size: 14px;
}
.telem-row:last-child { border-bottom: none; }
.telem-row .k {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.telem-row .v {
  color: var(--phos);
  font-family: 'VT323', monospace;
  font-size: 18px;
  text-shadow: 0 0 4px var(--phos-dim);
  letter-spacing: 0.5px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   Throughput panel — dual circular gauges
   ═══════════════════════════════════════════════════════════════ */

.gauges-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
  padding: 22px 14px 10px;
}

.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gauge {
  width: 100%;
  max-width: 240px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.25));
}

.gauge-ring {
  fill: none;
  stroke: var(--phos-deep);
  stroke-width: 2;
}
.gauge-arc {
  fill: none;
  stroke: var(--phos);
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s ease-out;
  filter: drop-shadow(0 0 6px var(--phos));
}
.gauge-arc-up { stroke: var(--amber); filter: drop-shadow(0 0 6px var(--amber)); }

.gauge-ticks line {
  stroke: var(--phos-dim);
  stroke-width: 1;
}
.gauge-ticks line.major { stroke: var(--phos); stroke-width: 2; }

.gauge-needle {
  stroke: var(--phos);
  stroke-width: 2;
  transform-origin: 110px 110px;
  transform: rotate(-135deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
  filter: drop-shadow(0 0 6px var(--phos));
}
.gauge-needle-amber { stroke: var(--amber); filter: drop-shadow(0 0 6px var(--amber)); }

.gauge-hub {
  fill: var(--bg);
  stroke: var(--phos);
  stroke-width: 2;
}

.gauge-center-label {
  fill: var(--phos-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  text-anchor: middle;
  letter-spacing: 2px;
}
.gauge-center-label-amber { fill: var(--amber-dim); }

.gauge-readout {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--phos);
  text-shadow: 0 0 8px var(--phos-dim);
}
.gauge-readout-amber { color: var(--amber); text-shadow: 0 0 8px var(--amber-dim); }
.gauge-value {
  font-family: 'VT323', monospace;
  font-size: 42px;
  line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.gauge-unit {
  font-size: 12px;
  color: var(--text-dim);
  text-shadow: none;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Initiate button */
.initiate-wrap {
  padding: 14px;
  border-top: 1px solid var(--phos-deep);
  display: flex;
  justify-content: center;
}
.initiate-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--bg-inset);
  border: 1px solid var(--phos);
  color: var(--phos);
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 0 6px var(--phos-dim);
  box-shadow:
    inset 0 0 12px rgba(0, 255, 65, 0.15),
    0 0 16px rgba(0, 255, 65, 0.2);
  transition: all 0.15s;
  position: relative;
}
.initiate-btn:hover {
  background: var(--phos-deep);
  box-shadow:
    inset 0 0 20px rgba(0, 255, 65, 0.35),
    0 0 30px rgba(0, 255, 65, 0.4);
  text-shadow: 0 0 10px var(--phos);
}
.initiate-btn:active {
  transform: translateY(1px);
}
.initiate-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  animation: scan-bar 2s linear infinite;
}
@keyframes scan-bar {
  0%, 100% { background-position: 0 0; }
  50%      { background-position: 100% 0; }
}
.btn-bracket {
  color: var(--amber);
  text-shadow: 0 0 4px var(--amber-dim);
}

/* ═══════════════════════════════════════════════════════════════
   Latency panel — 4-cell strip
   ═══════════════════════════════════════════════════════════════ */

.latency-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--phos-deep);
  padding: 1px;
}
.lat-cell {
  background: var(--bg-inset);
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
}
.lat-key {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.lat-val {
  color: var(--phos);
  font-family: 'VT323', monospace;
  font-size: 32px;
  text-shadow: 0 0 8px var(--phos-dim);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lat-unit {
  color: var(--text-dim);
  font-size: 10px;
  margin-top: 4px;
  letter-spacing: 2px;
}
.lat-val.warn  { color: var(--amber); text-shadow: 0 0 8px var(--amber-dim); }
.lat-val.alarm { color: var(--red);   text-shadow: 0 0 8px var(--red-dim);   }

/* ═══════════════════════════════════════════════════════════════
   Capability panel — AIM scores + video chips
   ═══════════════════════════════════════════════════════════════ */

.capability-body { padding: 14px; }
.aim-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.aim-cell {
  background: var(--bg-inset);
  padding: 10px;
  border: 1px solid var(--phos-deep);
}
.aim-key {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.aim-val {
  color: var(--phos);
  font-family: 'VT323', monospace;
  font-size: 26px;
  text-shadow: 0 0 6px var(--phos-dim);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.aim-bar {
  margin-top: 8px;
  height: 4px;
  background: var(--phos-deep);
  overflow: hidden;
  position: relative;
}
.aim-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--phos);
  box-shadow: 0 0 6px var(--phos);
  transition: width 0.8s ease-out;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--phos-deep);
  padding: 1px;
}
.video-chip {
  background: var(--bg-inset);
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}
.video-chip .res {
  color: var(--text-dim);
  letter-spacing: 1px;
}
.video-chip .verdict {
  color: var(--text-dim);
  font-family: 'VT323', monospace;
  font-size: 16px;
  font-weight: bold;
}
.video-chip.ok     .verdict { color: var(--phos);  text-shadow: 0 0 4px var(--phos-dim);  }
.video-chip.warn   .verdict { color: var(--amber); text-shadow: 0 0 4px var(--amber-dim); }
.video-chip.fail   .verdict { color: var(--red);   text-shadow: 0 0 4px var(--red-dim);   }

/* ═══════════════════════════════════════════════════════════════
   Packet panel — big count + strip viz
   ═══════════════════════════════════════════════════════════════ */

.packet-body {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 18px;
}
.packet-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 110px;
}
.packet-val {
  color: var(--phos);
  font-family: 'VT323', monospace;
  font-size: 54px;
  text-shadow: 0 0 10px var(--phos-dim);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.packet-val.warn  { color: var(--amber); text-shadow: 0 0 10px var(--amber-dim); }
.packet-val.alarm { color: var(--red);   text-shadow: 0 0 10px var(--red-dim);   }
.packet-unit {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 2px;
  margin-top: 4px;
}
.packet-strip {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 2px;
  height: 42px;
  align-items: stretch;
}
.packet-bar {
  background: var(--phos-deep);
  transition: background 0.2s, box-shadow 0.2s;
}
.packet-bar.ok   { background: var(--phos);  box-shadow: 0 0 4px var(--phos);  }
.packet-bar.lost { background: var(--red);   box-shadow: 0 0 4px var(--red);   }

/* ═══════════════════════════════════════════════════════════════
   Mission log
   ═══════════════════════════════════════════════════════════════ */

.log-body { padding: 0; }
.log {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  color: var(--phos);
  padding: 12px 14px;
  height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 0 3px var(--phos-dim);
  background: var(--bg-inset);
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: var(--phos-dim) var(--bg-inset);
}
.log::-webkit-scrollbar { width: 6px; }
.log::-webkit-scrollbar-thumb { background: var(--phos-dim); }
.log-line-amber { color: var(--amber); text-shadow: 0 0 3px var(--amber-dim); }
.log-line-red   { color: var(--red);   text-shadow: 0 0 3px var(--red-dim);   }

/* ═══════════════════════════════════════════════════════════════
   History panel
   ═══════════════════════════════════════════════════════════════ */

.history-empty {
  color: var(--text-dim);
  font-size: 13px;
  padding: 20px 0;
  text-align: center;
  letter-spacing: 1px;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.history-table th {
  color: var(--amber);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--phos-deep);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-shadow: 0 0 4px var(--amber-dim);
}
.history-table td {
  padding: 6px 8px;
  border-bottom: 1px dashed var(--phos-deep);
  color: var(--phos);
  font-family: 'VT323', monospace;
  font-size: 15px;
  text-shadow: 0 0 3px var(--phos-dim);
  font-variant-numeric: tabular-nums;
}
.history-table tr:last-child td { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════ */

.cockpit-footer {
  padding: 14px 20px 24px;
  border-top: 1px solid var(--phos-dim);
  text-align: center;
  max-width: 1480px;
  margin: 0 auto;
}
.ad-slot-footer {
  min-height: 0;                /* stub — grows when ad loaded */
  margin-bottom: 10px;
}
.footer-meta {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive — cockpit reflows on narrow viewports
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .cockpit {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "throughput throughput"
      "telem      latency"
      "packets    capability"
      "log        history";
  }
}

@media (max-width: 760px) {
  body { font-size: 14px; }
  .cockpit-bar {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 14px;
  }
  .bar-cell { border-right: none; padding: 4px 0; }
  .brand-cell { justify-content: flex-start; }

  .cockpit {
    grid-template-columns: 1fr;
    grid-template-areas:
      "throughput"
      "latency"
      "telem"
      "packets"
      "capability"
      "log"
      "history";
    padding: 12px;
    gap: 10px;
  }
  .gauges-body {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 8px 8px;
  }
  .gauge-value { font-size: 28px; }
  .lat-val { font-size: 26px; }
  .packet-val { font-size: 40px; }
  .packet-body { padding: 12px; gap: 12px; grid-template-columns: auto 1fr; }
  .packet-strip { height: 32px; }
  .aim-row { grid-template-columns: 1fr; }
  .aim-val { font-size: 22px; }
  .video-grid { grid-template-columns: repeat(5, 1fr); }
  .video-chip { font-size: 10px; padding: 6px 2px; }
  .video-chip .verdict { font-size: 14px; }
  .history-table { font-size: 11px; }
  .history-table th { font-size: 8px; padding: 5px 4px; }
  .history-table td { font-size: 13px; padding: 5px 4px; }
  .log { height: 160px; font-size: 12px; }
  .initiate-btn { font-size: 10px; padding: 12px 18px; letter-spacing: 2px; }
  .clock-value { font-size: 17px; }
}

@media (max-width: 400px) {
  .gauge-value { font-size: 22px; }
  .gauge-unit  { font-size: 10px; }
  .lat-val     { font-size: 22px; }
  .packet-val  { font-size: 32px; }
}

/* Data / reference table (stat pages) — 2026-07-06 */
.data-table { width:100%; border-collapse:collapse; margin:8px 0 6px; font-family:'JetBrains Mono',monospace; font-size:14px; }
.data-table caption { caption-side:top; text-align:left; color:var(--ink-mute,#7a8aa0); font-size:12px; letter-spacing:1px; text-transform:uppercase; padding-bottom:10px; }
.data-table th,.data-table td { padding:9px 12px; border-bottom:1px solid var(--hull-4); text-align:left; vertical-align:top; }
.data-table thead th { color:var(--sky,#95deff); border-bottom:1px solid var(--hull-5); font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.data-table tbody th[scope="row"] { color:var(--ink,#dfe8f5); font-weight:600; }
.data-table td { color:#95deff; white-space:nowrap; }
.data-table tr.highlight-row th[scope="row"],.data-table tr.highlight-row td { background:rgba(250,21,147,0.08); color:var(--pink-hot,#fa1593); }
figure { margin:20px 0; } figcaption { color:var(--ink-mute,#7a8aa0); font-family:'JetBrains Mono',monospace; font-size:12px; margin-top:6px; }
@media (max-width:640px){ .data-table{font-size:12px;} }