/* =====================================================================
   Suppress retired command-deck.js rails. They were the random-data
   STATUS / NODE ACTIVITY / Π NODES / FEED sidebars. The new real-data
   rails defined below replace them. Belt-and-braces in case a browser
   serves a cached copy of the old command-deck.js.
   ===================================================================== */
.cd-side, .cd-side-l, .cd-side-r { display:none !important; }

/* =====================================================================
   deck-panels.css
   Side-rail HUD panels flanking the hero. Real-time data display.
   Loads after command-deck.css. Additive only — does not touch the hero
   layout, the portrait orb, or the title.
   ===================================================================== */

:root{
  --hud-bg:        rgba(2,6,23,.72);
  --hud-line:      rgba(56,189,248,.22);
  --hud-line-soft: rgba(148,163,184,.14);
  --hud-accent:    #22d3ee;
  --hud-accent-2:  rgba(34,211,238,.55);
  --hud-text:      #cfe;
  --hud-text-dim:  #7d92ad;
  --hud-good:      #22d3ee;
  --hud-warn:      #ffd87a;
  --hud-bad:       #f97316;
  --hud-ok-green:  #4ade80;
}

/* ----- rails ------------------------------------------------------------ */

.cs-deck-rail{
  visibility:visible;
  position:absolute; top:120px; bottom:130px; width:280px; z-index:6;
  display:flex; flex-direction:column; gap:12px;
  font-family:'Space Grotesk','Inter',sans-serif;
  color:var(--hud-text);
  pointer-events:none; /* let panels opt in */
}
.cs-deck-rail.left  { left:  18px; align-items:flex-start; }
.cs-deck-rail.right { right: 18px; align-items:flex-end;  }
.cs-deck-rail > .hud-panel,
.cs-deck-rail > .cs-deck-banner { pointer-events:auto; width:100%; }
.cs-deck-rail .hud-panel{ flex:0 0 auto; }

/* ----- rail banner ------------------------------------------------------ */

.cs-deck-banner{
  position:relative;
  display:flex; align-items:center; gap:9px;
  padding:8px 10px 8px 11px;
  font:600 9.5px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.18em; text-transform:uppercase;
  color:#dbe6f5;
  background:linear-gradient(180deg, rgba(2,6,23,.85), rgba(2,6,23,.55));
  border:1px solid rgba(56,189,248,.35);
  border-radius:6px;
  -webkit-backdrop-filter:blur(8px) saturate(140%);
          backdrop-filter:blur(8px) saturate(140%);
  border:1.5px solid rgba(56,189,248,.65);
  box-shadow:
    inset 0 0 0 1px rgba(2,6,23,.55),
    inset 0 1px 0 rgba(148,163,184,.06),
    0 0 14px rgba(34,211,238,.14),
    0 4px 12px rgba(0,0,0,.38);
  opacity:0;
  /* Slide direction is inherited from rail rules above. */
}
.cs-deck-banner::before,
.cs-deck-banner::after{
  content:""; position:absolute; width:7px; height:7px;
  border:1px solid rgba(56,189,248,.55); pointer-events:none;
}
.cs-deck-banner::before{ top:-1px; left:-1px;  border-right:0; border-bottom:0; }
.cs-deck-banner::after { bottom:-1px; right:-1px; border-left:0; border-top:0; }

.cs-deck-banner .bnr-led{
  flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:#22d3ee; box-shadow:0 0 5px #22d3ee;
  animation: hudLed 3.1s ease-in-out infinite;
}
.cs-deck-banner .bnr-text{
  flex:1 1 auto; min-width:0;
  letter-spacing:.12em; font-weight:500; font-size:9px; line-height:1.45;
  color:#cfe;
}
.cs-deck-banner .bnr-text em{
  font-style:normal; color:#fff; font-weight:600; letter-spacing:.16em;
  display:block;
}
.cs-deck-banner .bnr-pill{
  flex:0 0 auto;
  font:700 9px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.22em;
  color:#020617;
  background:linear-gradient(180deg,#22d3ee,#38bdf8);
  padding:3px 7px; border-radius:3px;
  box-shadow:0 0 6px rgba(34,211,238,.45);
}

@media (max-width: 1340px){
  .cs-deck-banner .bnr-text{ font-size:8.5px; letter-spacing:.08em; }
}

/* Progressive sizing — never let the rails crowd the centered hero column.
   The center column is max-width 1100px; we scale the rail width and tuck
   them tight to the edges as the viewport shrinks toward 1200px. */
@media (max-width: 1480px){
  .cs-deck-rail{ width:248px; gap:10px; }
}
@media (max-width: 1340px){
  .cs-deck-rail{ width:218px; gap:9px; }
  .cs-deck-rail.left  { left:  12px; }
  .cs-deck-rail.right { right: 12px; }
}
/* Below 1200px we hide the rails — center column needs the full viewport. */
@media (max-width: 1199px){
  .cs-deck-rail{ display:none; }
}

/* ----- panel chrome ----------------------------------------------------- */

.hud-panel{
  position:relative;
  background:var(--hud-bg);
  border:1.5px solid rgba(56,189,248,.55);
  border-radius:8px;
  padding:9px 11px 11px;
  -webkit-backdrop-filter:blur(8px) saturate(135%);
          backdrop-filter:blur(8px) saturate(135%);
  box-shadow:
    inset 0 0 0 1px rgba(2,6,23,.55),
    inset 0 1px 0 rgba(148,163,184,.06),
    0 5px 14px rgba(0,0,0,.36),
    0 0 14px rgba(34,211,238,.10);
  opacity:0;
}
/* Mechanical slide-in. Left rail rams in from offscreen left, right rail
   from offscreen right. Sharp, snappy easing (no soft bounce) so it reads
   as machined parts locking into place rather than UI fading in. */
.cs-deck-rail.left  > .hud-panel,
.cs-deck-rail.left  > .cs-deck-banner{
  transform:translateX(-140%);
  animation: hudSlideInLeft .55s cubic-bezier(.85,.05,.15,1) forwards;
}
.cs-deck-rail.right > .hud-panel,
.cs-deck-rail.right > .cs-deck-banner{
  transform:translateX(140%);
  animation: hudSlideInRight .55s cubic-bezier(.85,.05,.15,1) forwards;
}

/* Stagger — each panel locks in ~120ms after the one above it. */
.cs-deck-rail.left  > *:nth-child(1){ animation-delay:.20s; }
.cs-deck-rail.left  > *:nth-child(2){ animation-delay:.32s; }
.cs-deck-rail.left  > *:nth-child(3){ animation-delay:.44s; }
.cs-deck-rail.left  > *:nth-child(4){ animation-delay:.56s; }
.cs-deck-rail.left  > *:nth-child(5){ animation-delay:.68s; }
.cs-deck-rail.right > *:nth-child(1){ animation-delay:.26s; }
.cs-deck-rail.right > *:nth-child(2){ animation-delay:.38s; }
.cs-deck-rail.right > *:nth-child(3){ animation-delay:.50s; }
.cs-deck-rail.right > *:nth-child(4){ animation-delay:.62s; }
.cs-deck-rail.right > *:nth-child(5){ animation-delay:.74s; }
.cs-deck-rail.right > *:nth-child(6){ animation-delay:.86s; }

@keyframes hudSlideInLeft{
  0%   { opacity:0; transform:translateX(-140%); }
  60%  { opacity:1; transform:translateX(6px);   }
  100% { opacity:1; transform:translateX(0);     }
}
@keyframes hudSlideInRight{
  0%   { opacity:0; transform:translateX(140%);  }
  60%  { opacity:1; transform:translateX(-6px);  }
  100% { opacity:1; transform:translateX(0);     }
}

/* corner ticks — heavier so the panels read as machined frames */
.hud-panel::before,
.hud-panel::after{
  content:""; position:absolute; width:9px; height:9px;
  border:2px solid rgba(56,189,248,.85); pointer-events:none;
}
.hud-panel::before{ top:-2px; left:-2px;  border-right:0; border-bottom:0; }
.hud-panel::after { bottom:-2px; right:-2px; border-left:0; border-top:0; }

/* Server activity LED — switch-port-style traffic indicator.
   Smaller and brighter than v1. Color tracks network status:
     green  = good traffic
     amber  = warning (slow / loss)
     red    = bad
   Animation is driven by JS (rapid 12Hz bursts + random pauses) — see
   injectActivityLeds() in deck-panels.js. CSS only handles look + the
   "off" dim state. */
.hud-activity{
  position:absolute; top:7px; right:10px;
  width:4px; height:4px; border-radius:50%;
  background:#4ade80;
  box-shadow:
    0 0 4px  #b6ffd0,
    0 0 8px  #4ade80,
    0 0 16px rgba(74,222,128,.85),
    0 0 26px rgba(74,222,128,.45);
  opacity:1;
  pointer-events:none; z-index:2;
  transition: background .25s linear, box-shadow .25s linear;
}
/* Soft camera-style flare disc that sits behind the LED, much larger and
   very faint. Gives the bulb a visible bloom without making the dot itself
   bigger. */
.hud-activity::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:18px; height:18px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(74,222,128,.45) 0%, rgba(74,222,128,.18) 35%, rgba(74,222,128,0) 70%);
  pointer-events:none;
}
.hud-activity.off{
  opacity:0.12;
  box-shadow:none;
}
.hud-activity.off::after{ opacity:0; }
.hud-activity.warn{
  background:#facc15;
  box-shadow:
    0 0 4px  #fff7c2,
    0 0 8px  #facc15,
    0 0 16px rgba(250,204,21,.85),
    0 0 26px rgba(250,204,21,.45);
}
.hud-activity.warn::after{
  background:radial-gradient(circle, rgba(250,204,21,.45) 0%, rgba(250,204,21,.18) 35%, rgba(250,204,21,0) 70%);
}
.hud-activity.bad{
  background:#f97316;
  box-shadow:
    0 0 4px  #ffd1ad,
    0 0 8px  #f97316,
    0 0 16px rgba(249,115,22,.85),
    0 0 28px rgba(249,115,22,.55);
}
.hud-activity.bad::after{
  background:radial-gradient(circle, rgba(249,115,22,.45) 0%, rgba(249,115,22,.18) 35%, rgba(249,115,22,0) 70%);
}

/* very subtle scanline that drifts across panels at long random intervals */
.hud-panel .hud-scan{
  position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.45), transparent);
  opacity:0; pointer-events:none;
}
.hud-panel.scanning .hud-scan{
  animation: hudScan 1.7s ease-in-out;
}
@keyframes hudScan{
  0%   { top:0;    opacity:0; }
  12%  { opacity:.55; }
  88%  { opacity:.55; }
  100% { top:100%; opacity:0; }
}

/* panel header */
.hud-head{
  display:flex; align-items:center; gap:8px;
  font:600 9.5px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--hud-accent); margin-bottom:8px;
}
.hud-head .hud-led{
  width:6px; height:6px; border-radius:50%;
  background:var(--hud-good);
  box-shadow:0 0 5px var(--hud-good);
  animation: hudLed 3.1s ease-in-out infinite;
}
.hud-head .hud-led.bad  { background:var(--hud-bad);  box-shadow:0 0 6px var(--hud-bad);  }
.hud-head .hud-led.warn { background:var(--hud-warn); box-shadow:0 0 6px var(--hud-warn); }
.hud-head .hud-rule{ flex:1; height:1px; background:linear-gradient(90deg, var(--hud-line), transparent); }
.hud-head .hud-stat{ color:var(--hud-text-dim); letter-spacing:.18em; font-weight:500; }

@keyframes hudLed{ 0%,100%{opacity:1} 50%{opacity:.55} }

/* generic key/value row */
.hud-row{
  display:flex; align-items:center; justify-content:space-between;
  font:500 11px/1.4 'Space Grotesk','Inter',sans-serif;
  color:var(--hud-text); padding:2px 0;
}
.hud-row .k{ color:var(--hud-text-dim); letter-spacing:.10em; text-transform:uppercase; font-size:10px; }
.hud-row .v{ color:#dbe6f5; font-variant-numeric: tabular-nums; }
.hud-row .v.good{ color:var(--hud-good); }
.hud-row .v.warn{ color:var(--hud-warn); }
.hud-row .v.bad { color:var(--hud-bad);  }

/* horizontal bar meter */
.hud-bar{
  position:relative; height:6px; border-radius:2px;
  background:rgba(148,163,184,.10);
  overflow:hidden; margin:3px 0 6px;
}
.hud-bar > i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--hud-accent), #38bdf8);
  box-shadow:0 0 6px rgba(34,211,238,.40);
  transition:width 1.0s cubic-bezier(.2,.85,.25,1);
}
.hud-bar.warn > i{ background:linear-gradient(90deg,#facc15,#ffd87a); box-shadow:0 0 6px rgba(255,216,122,.35); }
.hud-bar.bad  > i{ background:linear-gradient(90deg,#f97316,#ef4444); box-shadow:0 0 6px rgba(249,115,22,.35); }

/* canvas containers */
.hud-canvas{
  display:block; width:100%; height:auto;
  background:transparent;
}

/* ----- specific panels ------------------------------------------------- */

/* 1. Heartbeat panel */
.hud-heartbeat .hud-canvas{ height:54px; margin:2px 0 6px; }
.hud-heartbeat .hb-stats{
  display:flex; gap:10px; font-size:10px; letter-spacing:.12em;
  color:var(--hud-text-dim); text-transform:uppercase;
}
.hud-heartbeat .hb-stats span b{ color:var(--hud-text); font-weight:500; font-variant-numeric:tabular-nums; }
.hud-heartbeat .hb-clock{
  display:flex; justify-content:space-between; font-size:10px;
  letter-spacing:.16em; color:var(--hud-text-dim); margin-bottom:4px;
}
.hud-heartbeat .hb-clock b{ color:var(--hud-text); font-weight:500; font-variant-numeric:tabular-nums; }

/* 2. Server status */
.hud-server .row-stack{ display:flex; flex-direction:column; gap:4px; }

/* 3. Domains */
.hud-domains .big-num{
  font:600 36px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.04em; color:#fff;
  text-shadow:0 0 14px rgba(56,189,248,.22);
  margin:2px 0 4px;
  font-variant-numeric:tabular-nums;
}
.hud-domains .sub{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hud-text-dim); margin-bottom:4px;
}
.hud-domains .hud-canvas{ height:60px; }
.hud-domains .axis{
  display:flex; justify-content:space-between; font-size:9px;
  letter-spacing:.12em; color:var(--hud-text-dim); margin-top:2px;
}

/* 4. Live traffic */
.hud-traffic .row-grid{
  display:grid; grid-template-columns:1fr auto; gap:4px 10px;
  align-items:baseline;
}
.hud-traffic .row-grid .k{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hud-text-dim);
}
.hud-traffic .row-grid .v{
  font:600 18px/1 'Space Grotesk','Inter',sans-serif;
  color:#fff; font-variant-numeric:tabular-nums;
}
.hud-traffic .row-grid .v.delta{ font-size:11px; color:var(--hud-good); }
.hud-traffic .hud-canvas{ height:36px; margin-top:6px; }

/* 5. Geo */
.hud-geo ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:3px; }
.hud-geo li{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; letter-spacing:.10em;
  color:var(--hud-text); font-variant-numeric:tabular-nums;
}
.hud-geo li .code{ color:var(--hud-text-dim); letter-spacing:.18em; font-size:10px; text-transform:uppercase; }
.hud-geo li .dot{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--hud-accent); box-shadow:0 0 4px rgba(34,211,238,.6);
  margin-right:6px;
  animation: hudLed 3.6s ease-in-out infinite;
}

/* RIGHT RAIL ------------------------------------------------------------- */

/* Local overview / clock */
.hud-clock .city{
  font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:#dbe6f5; text-align:right; margin-bottom:2px;
}
.hud-clock .time{
  font:600 30px/1 'Space Grotesk','Inter',sans-serif;
  color:#fff; letter-spacing:.06em; text-align:right;
  font-variant-numeric:tabular-nums; margin:2px 0;
  text-shadow:0 0 14px rgba(56,189,248,.20);
}
.hud-clock .date{
  font-size:10px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--hud-text-dim); text-align:right;
}

/* Weather */
.hud-weather .now{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.hud-weather .icon-now{
  width:36px; height:36px; flex:0 0 36px;
  display:flex; align-items:center; justify-content:center;
  color:var(--hud-warn);
}
.hud-weather .icon-now svg{ width:100%; height:100%; }
.hud-weather .now .temp{
  font:600 22px/1 'Space Grotesk','Inter',sans-serif;
  color:#fff; font-variant-numeric:tabular-nums;
}
.hud-weather .now .cond{
  font-size:9px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--hud-text-dim);
}
.hud-weather .hilo{
  display:flex; gap:8px; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--hud-text-dim); margin-bottom:8px;
}
.hud-weather .hilo b{ color:var(--hud-text); font-weight:500; font-variant-numeric:tabular-nums; }
.hud-weather .hourly{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
}
.hud-weather .hourly .h{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:9px; letter-spacing:.10em; color:var(--hud-text-dim);
}
.hud-weather .hourly .h svg{ width:18px; height:18px; color:var(--hud-text); }
.hud-weather .hourly .h .t{ color:#dbe6f5; font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:0; }

/* Jobs */
.hud-jobs{ display:flex; gap:10px; align-items:stretch; }
.hud-jobs .left{ flex:1; display:flex; flex-direction:column; gap:3px; }
.hud-jobs .left .label{ font-size:9px; letter-spacing:.20em; text-transform:uppercase; color:var(--hud-text-dim); margin-bottom:2px; }
.hud-jobs .right{
  flex:0 0 56px; align-self:center;
  position:relative; width:56px; height:56px;
}
.hud-jobs .right svg{ width:100%; height:100%; transform:rotate(-90deg); }
.hud-jobs .right .pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:600 13px/1 'Space Grotesk','Inter',sans-serif;
  color:#fff; letter-spacing:.04em; font-variant-numeric:tabular-nums;
}

/* Security */
.hud-security .row-stack{ display:flex; flex-direction:column; gap:2px; }
.hud-security .twocol{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-bottom:6px;
}
.hud-security .twocol .k{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--hud-text-dim); }
.hud-security .twocol .v{
  font:600 16px/1 'Space Grotesk','Inter',sans-serif;
  color:#fff; font-variant-numeric:tabular-nums;
}
.hud-security .hud-canvas{ height:42px; }

/* Backup */
.hud-backup{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; align-items:end; }
.hud-backup .col{ display:flex; flex-direction:column; gap:2px; }
.hud-backup .col .k{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--hud-text-dim); }
.hud-backup .col .v{
  font:600 14px/1 'Space Grotesk','Inter',sans-serif;
  color:#fff; font-variant-numeric:tabular-nums;
}
.hud-backup .col .v.ok  { color:var(--hud-ok-green); display:flex; align-items:center; gap:4px; }
.hud-backup .col .v.bad { color:var(--hud-bad); }
.hud-backup .col .v.ok::after{
  content:"✓"; display:inline-flex; width:14px; height:14px; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(74,222,128,.18); font-size:9px;
}