/* ═══════════════════════════════════════════════════════════════
   ORION Dashboard — page-specific CSS · Phase 2
   Extracted verbatim from the page's former inline <style> block.
   Rule order preserved exactly — do not resort or regroup.
   Load order contract: /assets/orion.css loads FIRST, then this
   file, so these page styles override the shared foundation.
   ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   ORION — COMMAND CENTER · Galaxy Tab A9+ Tablet Edition
   Command + lifestyle companion screen. Same OS as the
   ORION Homelab Control Center — different body.
   Single-file • vanilla • landscape kiosk (1280 × 800, fit-scaled)
══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ORION design tokens (incl. severity palette) moved to
   /assets/orion.css — shared foundation, Phase 1. */

html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:'Rajdhani',sans-serif;color:var(--text);
  -webkit-font-smoothing:antialiased;user-select:none;-webkit-tap-highlight-color:transparent}

/* ── Fit-to-viewport stage ─────────────────────────────── */
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 120% 100% at 50% 50%,#06101e 0%,#03060c 70%,#000 100%);overflow:hidden}
#stage{width:1280px;height:800px;position:relative;transform-origin:center center;flex:0 0 auto}

/* ── Atmosphere layers (.fx / .fx-glow / .fx-grid / .fx-scan / .fx-vig +
     breathe/scan keyframes) moved to /assets/orion.css — Phase 1 ── */

/* ── Root grid · three primary zones ───────────────────── */
#root{position:absolute;inset:0;z-index:2;display:grid;
  grid-template-rows:64px 1fr 54px;
  gap:8px;padding:10px;
  animation:drift 120s ease-in-out infinite}      /* AMOLED micro-drift */
@keyframes drift{
  0%{transform:translate(0,0)}   20%{transform:translate(.6px,.4px)}
  40%{transform:translate(0,.8px)} 60%{transform:translate(-.6px,.3px)}
  80%{transform:translate(.3px,-.5px)} 100%{transform:translate(0,0)}}

/* ── Glass panel base (.panel + pseudos) moved to /assets/orion.css — Phase 1 ── */

/* Corner ticks (.frame-corner / .c-*) moved to /assets/orion.css — Phase 1 */

/* .eyebrow label primitive moved to /assets/orion.css — Phase 1 */

/* ══════════ HEADER (ORION identity spine — preserved) ══════════ */
#hdr{grid-row:1;display:flex;align-items:center;gap:15px;padding:0 20px;border-color:var(--line-2)}
.logo{width:48px;height:48px;flex-shrink:0;position:relative}
.logo svg{width:100%;height:100%;display:block}
.logo .lr{transform-origin:50% 50%}
.logo .lr-a{animation:spin 26s linear infinite}
.logo .lr-b{animation:spin 14s linear infinite reverse}

.brand{line-height:1}
.brand h1{font-family:'Orbitron',sans-serif;font-size:33px;font-weight:900;letter-spacing:.16em;
  background:linear-gradient(92deg,#7ff6ff,var(--cyan) 45%,var(--aqua) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(34,233,255,.35))}
.brand p{font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.34em;color:var(--dim);margin-top:3px}

.divider{width:1px;height:40px;flex-shrink:0;margin:0 4px;
  background:linear-gradient(transparent,var(--line-2),transparent)}

.sysbadge{display:flex;flex-direction:column;gap:4px;padding:7px 14px;border-radius:10px;
  border:1px solid rgba(39,255,212,.28);background:rgba(8,28,30,.5)}
.sysbadge .row{display:flex;align-items:center;gap:8px;
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--aqua)}
.sysbadge small{font-family:'Rajdhani',sans-serif;font-size:10px;letter-spacing:.18em;color:rgba(39,255,212,.5)}

.dot{width:9px;height:9px;border-radius:50%;background:var(--aqua);flex-shrink:0;
  box-shadow:0 0 8px var(--aqua),0 0 16px rgba(39,255,212,.5);animation:pip 2.6s ease-in-out infinite}
@keyframes pip{0%,100%{box-shadow:0 0 5px var(--aqua),0 0 10px rgba(39,255,212,.35);opacity:.85}
  50%{box-shadow:0 0 11px var(--aqua),0 0 22px rgba(39,255,212,.6);opacity:1}}

/* ecosystem status pips */
.eco{display:flex;align-items:center;gap:16px;margin-left:8px}
.eco .pip{display:flex;align-items:center;gap:6px}
.eco .pip i{width:8px;height:8px;border-radius:50%;display:block;background:var(--cyan);
  box-shadow:0 0 7px var(--cyan);animation:pip 3s ease-in-out infinite}
.eco .pip.m i{background:var(--magenta);box-shadow:0 0 7px var(--magenta)}
.eco .pip.p i{background:var(--purple);box-shadow:0 0 7px var(--purple)}
.eco .pip span{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:600;letter-spacing:.1em;color:var(--dim)}
/* live capability pip treatment */
.eco .pip.ok i{background:var(--cyan);box-shadow:0 0 7px var(--cyan);animation:pip 3s ease-in-out infinite}
.eco .pip.warn i{background:var(--magenta);box-shadow:0 0 8px var(--magenta);animation:pip 1.8s ease-in-out infinite}
.eco .pip.off i{background:rgba(150,196,224,.28);box-shadow:none;animation:none}
.eco .pip.nc i{background:rgba(150,196,224,.18);box-shadow:none;animation:none}
.eco .pip.off span,.eco .pip.nc span{color:var(--dim-2)}

.spacer{flex:1}

/* compact header weather (the big clock now lives in the body) */
.wx{display:flex;flex-direction:column;align-items:flex-end;padding-left:16px;
  margin-left:6px;border-left:1px solid var(--line);flex-shrink:0;line-height:1.1}
.wx .temp{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:700;color:var(--aqua)}
.wx .sub{font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:.12em;color:var(--dim)}

/* ══════════ MAIN BODY · permanent 60 / 40 split ══════════ */
#main{grid-row:2;display:grid;grid-template-columns:60% 40%;gap:8px;min-height:0}

/* ── LEFT COLUMN : clock + command grid ── */
#left{display:grid;grid-template-rows:132px 1fr;gap:8px;min-height:0}

/* ── ORION CLOCK PANEL ── */
#clock{display:flex;align-items:center;gap:22px;padding:0 26px;overflow:hidden}
#clock::after{content:'';position:absolute;top:0;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.5),transparent)}
.clock-amb{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 120% at 16% 50%,rgba(34,233,255,.14),transparent 60%),
            radial-gradient(ellipse 44% 120% at 90% 50%,rgba(168,85,247,.13),transparent 62%);
  animation:clockGlow 9s ease-in-out infinite alternate}
@keyframes clockGlow{0%{opacity:.6}100%{opacity:1}}
.clock-main{display:flex;align-items:baseline;gap:10px;line-height:.9}
.clock-time{font-family:'Orbitron',sans-serif;font-weight:700;font-size:74px;letter-spacing:.02em;
  color:#eaffff;text-shadow:0 0 26px rgba(34,233,255,.5),0 0 54px rgba(34,233,255,.18)}
.clock-time .sec{font-size:30px;color:var(--cyan);text-shadow:0 0 14px rgba(34,233,255,.5);font-weight:600}
.clock-mer{font-family:'Orbitron',sans-serif;font-weight:700;font-size:22px;letter-spacing:.12em;
  color:var(--purple);text-shadow:0 0 16px rgba(168,85,247,.5);align-self:flex-start;margin-top:8px}
.clock-side{display:flex;flex-direction:column;gap:7px;border-left:1px solid var(--line);padding-left:22px;margin-left:auto}
.clock-day{font-family:'Orbitron',sans-serif;font-weight:700;font-size:21px;letter-spacing:.22em;color:var(--cyan);
  text-shadow:0 0 14px rgba(34,233,255,.35)}
.clock-date{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:14px;letter-spacing:.2em;color:var(--text);opacity:.82}
.clock-status{display:flex;align-items:center;gap:8px;font-family:'Orbitron',sans-serif;
  font-size:9px;font-weight:600;letter-spacing:.18em;color:var(--aqua);margin-top:2px}
.clock-status i{width:7px;height:7px;border-radius:50%;background:var(--aqua);
  box-shadow:0 0 7px var(--aqua);animation:pip 2.8s ease-in-out infinite;flex-shrink:0}
/* clock HUD tick rail */
.clock-rail{position:absolute;left:26px;bottom:14px;display:flex;gap:5px;z-index:1}
.clock-rail i{width:3px;height:9px;border-radius:1px;background:rgba(34,233,255,.22)}
.clock-rail i:nth-child(3n){height:13px;background:rgba(34,233,255,.42)}

/* ── COMMAND GRID ── */
#cmds{padding:11px;display:flex;flex-direction:column;min-height:0}
.cmd-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 9px;flex-shrink:0}
.cmd-head .t{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--cyan)}
.cmd-head .c{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--dim)}
.cmd-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;gap:8px}
.cmd-btn{position:relative;overflow:hidden;cursor:pointer;border-radius:11px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:10px;
  padding:18px 18px;
  background:linear-gradient(150deg,rgba(8,26,46,.66),rgba(6,18,34,.5));
  border:1px solid var(--line);
  transition:border-color .2s,box-shadow .2s,transform .12s,background .2s}
.cmd-btn .ico{width:38px;height:38px;color:var(--cyan)}
.cmd-btn .ico svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 6px currentColor)}
.cmd-btn .txt{width:100%}
.cmd-btn .bt{display:block;font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--text)}
.cmd-btn .bs{display:block;font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--dim);
  line-height:1.15;margin-top:4px}
/* accent edge bar */
.cmd-btn::after{content:'';position:absolute;left:0;top:14%;bottom:14%;width:3px;border-radius:2px;
  background:var(--accent);box-shadow:0 0 9px var(--accent);opacity:.7}
/* sweep shimmer */
.cmd-btn .sweep{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(40,210,255,.13),transparent);transition:left .55s ease}
.cmd-btn:hover{border-color:var(--accent-soft);
  background:linear-gradient(150deg,rgba(12,40,70,.72),rgba(8,24,46,.55));
  box-shadow:0 0 18px rgba(34,233,255,.12),inset 0 0 14px rgba(34,233,255,.05)}
.cmd-btn:hover .sweep{left:150%}
.cmd-btn:active{transform:scale(.96)}
/* transient in-flight state for webhook buttons — always released in finally{} */
.cmd-btn[data-sending="1"]{opacity:.55;pointer-events:none}
/* HUD corner notch (top-right) */
.cmd-btn .notch{position:absolute;top:7px;right:8px;width:9px;height:9px;pointer-events:none;opacity:.5}
.cmd-btn .notch::before,.cmd-btn .notch::after{content:'';position:absolute;background:var(--accent)}
.cmd-btn .notch::before{top:0;right:0;width:9px;height:1.2px}
.cmd-btn .notch::after{top:0;right:0;width:1.2px;height:9px}

/* ── RIGHT COLUMN : MEMORY FEED ── */
#memory{position:relative;min-height:0;padding:0;overflow:hidden}
.mem-head{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;padding:12px 16px 18px;
  background:linear-gradient(180deg,rgba(3,8,18,.82),transparent)}
.mem-head .lt{display:flex;align-items:center;gap:9px}
.mem-head .lt b{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--cyan);
  text-shadow:0 0 12px rgba(34,233,255,.4)}
.mem-head .lt i{width:8px;height:8px;border-radius:50%;background:var(--magenta);
  box-shadow:0 0 8px var(--magenta);animation:pip 2.6s ease-in-out infinite}
.mem-head .rt{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:600;letter-spacing:.16em;color:var(--dim)}

/* the dark photo stage — image layers live at the BOTTOM (z1); all UI sits above (z2+) */
.mem-stage{position:absolute;inset:0;background:#03060c;overflow:hidden;z-index:1}
.mem-img{position:absolute;inset:0;z-index:1;background-position:center;background-repeat:no-repeat;
  background-size:cover;opacity:0;transition:opacity 1.6s ease;will-change:opacity,transform}
.mem-img.show{opacity:1}
.mem-img.kb{animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.12) translate(-1.6%,-1.4%)}}

/* ORION thematic layers — permanently above the photos */
/* color grade: multiply tints + darkens, so even bright photos stay cinematic */
.mem-grade{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(135deg,#3a6f8c 0%,#1d3252 48%,#3a2a64 100%)}
/* baseline scrim guarantees darkness regardless of source brightness */
.mem-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(3,8,18,.34)}
.mem-wash{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,8,18,.6) 0%,rgba(3,8,18,.18) 28%,rgba(3,8,18,.32) 60%,rgba(3,8,18,.92) 100%),
    linear-gradient(118deg,rgba(34,233,255,.16),transparent 46%),
    linear-gradient(300deg,rgba(168,85,247,.2),transparent 50%)}
.mem-vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 110px 34px rgba(0,0,0,.82);
  -webkit-backdrop-filter:none}
.mem-edge{position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 22px rgba(34,233,255,.06)}
.mem-scan{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(40,210,255,.03) 3px,rgba(40,210,255,.03) 4px);
  animation:scan 9s ease-in-out infinite}
/* HUD corner brackets for the memory frame */
.mem-br{position:absolute;width:26px;height:26px;z-index:4;pointer-events:none;opacity:.85}
.mem-br svg{width:100%;height:100%}
.mb-tl{top:9px;left:9px}.mb-tr{top:9px;right:9px;transform:scaleX(-1)}
.mb-bl{bottom:56px;left:9px;transform:scaleY(-1)}.mb-br2{bottom:56px;right:9px;transform:scale(-1,-1)}

/* telemetry caption bar */
.mem-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:11px 16px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  background:linear-gradient(0deg,rgba(3,8,18,.9),rgba(3,8,18,.55) 60%,transparent);
  border-top:1px solid var(--line)}
.mem-cap .left{min-width:0}
.mem-cap .title{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:700;letter-spacing:.04em;color:#eaffff;
  text-shadow:0 0 14px rgba(34,233,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-cap .sub{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--text);
  opacity:.78;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-cap .meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.mem-cap .date{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--aqua)}
.mem-cap .idx{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--dim)}
/* progress sliver to next memory */
.mem-prog{position:absolute;left:0;bottom:0;height:2px;width:0;z-index:5;
  background:linear-gradient(90deg,var(--cyan),var(--purple));box-shadow:0 0 8px rgba(34,233,255,.4)}

/* fallback state */
.mem-fallback{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(124,58,237,.14),rgba(3,8,18,.96) 70%)}
.mem-fallback.on{display:flex}
.mem-fallback .ring{width:64px;height:64px;margin-bottom:6px;opacity:.85;animation:spin 24s linear infinite}
.mem-fallback h3{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:.22em;color:var(--cyan);
  text-shadow:0 0 16px rgba(34,233,255,.45)}
.mem-fallback p{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--purple);
  text-shadow:0 0 12px rgba(168,85,247,.4)}

/* ══════════ ACTIVITY STRIP ══════════ */
#strip{grid-row:3;display:flex;align-items:center;gap:16px;padding:0 16px;overflow:hidden}
#strip .s-eyebrow{display:flex;align-items:center;gap:8px;flex-shrink:0;
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:600;letter-spacing:.2em;color:var(--cyan)}
#strip .s-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 7px var(--cyan);animation:pip 2.6s ease-in-out infinite}
.s-sep{width:1px;height:24px;background:var(--line);flex-shrink:0}
.s-feed{display:flex;align-items:center;gap:22px;flex:1;min-width:0;overflow:hidden}
.s-item{display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:500;color:rgba(190,224,242,.84)}
.s-item i{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:block}
.s-item .st{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.04em;color:var(--dim);margin-left:2px}
.s-item.warn{color:#ffd6f2}
.s-item.crit{color:#ffc9dd}
.s-ind{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto}
.s-chip{display:flex;align-items:center;gap:6px;font-family:'Orbitron',sans-serif;
  font-size:9px;font-weight:600;letter-spacing:.1em;color:var(--dim)}
.s-chip b{color:var(--aqua)}
.s-chip.ok i,.s-chip i{width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 6px var(--aqua)}
.s-chip.warn i{background:var(--magenta);box-shadow:0 0 6px var(--magenta)}
.s-chip.warn b{color:var(--magenta)}

/* ══════════ TOAST ══════════ */
#toast{position:absolute;top:80px;left:50%;transform:translate(-50%,-8px);z-index:200;
  display:flex;align-items:center;gap:9px;padding:9px 20px;border-radius:24px;
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;
  background:rgba(8,22,40,.92);border:1px solid var(--line-2);color:var(--cyan);
  backdrop-filter:blur(10px);box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 18px rgba(34,233,255,.15);
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.warn{border-color:rgba(227,75,255,.5);color:var(--magenta);box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 18px rgba(227,75,255,.18)}
#toast i{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ORION photo cleanup — remove words and brighten slideshow */
.mem-head,
.mem-cap,
.mem-prog {
  display: none !important;
}

.mb-bl {
  bottom: 9px !important;
}

.mb-br2 {
  bottom: 9px !important;
}

.mem-grade,
.mem-scrim,
.mem-wash {
  display: none !important;
}

.mem-vig {
  box-shadow: inset 0 0 70px 14px rgba(0,0,0,.35) !important;
}

.mem-scan {
  opacity: .18 !important;
}