/* C2 mockup. No CDN, no external fonts: system stacks only, so the strict CSP
   that the clinic dashboard uses can apply here too. Every motion below is
   switched off by prefers-reduced-motion at the bottom of the file. */

@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  --bg: #04080a;
  --panel: rgba(8, 18, 22, .84);   /* a touch more solid: the blur it replaces cost a redraw per frame */
  --line: rgba(120, 255, 200, .22);
  --text: #bfeee0;
  --dim: #5f8a7f;
  --acc: #38ff9c;          /* phosphor green by default */
  --acc-rgb: 56, 255, 156;
  --warn: #ffb13b;
  --bad: #ff3b4e;
  --font-ui: "Rajdhani", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
:root[data-accent="amber"] { --acc: #ffb13b; --acc-rgb: 255, 177, 59; --line: rgba(255, 190, 90, .25); --text: #f3dfbf; --dim: #8d7a58; }
:root[data-accent="cyan"]  { --acc: #5ee7ff; --acc-rgb: 94, 231, 255; --line: rgba(120, 220, 255, .25); --text: #cdeffa; --dim: #5f8591; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.35 var(--font-mono);
  padding: 16px; overflow-x: hidden;
}
.tiny { font: 600 10px/1 var(--font-ui); letter-spacing: .22em; color: var(--dim); text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- backgrounds (one at a time, set by body class) ---------- */
#bg-flicker, #bg-retro, #bg-hex, #overlay-scan, #overlay-noise {
  position: fixed; inset: 0; pointer-events: none; display: none;
}
#bg-flicker { width: 100%; height: 100%; z-index: 0; opacity: .55; }
#bg-hex { z-index: 0; color: rgba(var(--acc-rgb), .09); }
#bg-retro {
  z-index: 0; overflow: hidden;
  background: linear-gradient(#04080a 0 45%, rgba(var(--acc-rgb), .08) 100%);
}
#bg-retro::before {
  content: ""; position: absolute; left: -50%; right: -50%; top: 45%; bottom: -60%;
  background-image:
    linear-gradient(rgba(var(--acc-rgb), .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--acc-rgb), .35) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(300px) rotateX(60deg);
  transform-origin: top; animation: retro 3s linear infinite;
}
@keyframes retro { to { background-position: 0 60px; } }
body.bg-flicker #bg-flicker, body.bg-retro #bg-retro, body.bg-hex #bg-hex { display: block; }

#overlay-scan {
  z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
#overlay-scan::after {  /* slow rolling bar */
  content: ""; position: absolute; left: 0; right: 0; height: 120px; top: -120px;
  background: linear-gradient(transparent, rgba(var(--acc-rgb), .05), transparent);
  animation: roll 7s linear infinite;
}
@keyframes roll { to { transform: translateY(calc(100vh + 240px)); } }
#overlay-noise {
  z-index: 51; opacity: .07; mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, #fff 0 .5px, transparent .5px 3px),
    repeating-radial-gradient(circle at 83% 68%, #fff 0 .5px, transparent .5px 4px);
  animation: grain .6s steps(4) infinite;
}
@keyframes grain { 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(2%, 2%); } }
body.scan #overlay-scan, body.noise #overlay-noise { display: block; }

/* ---------- header ---------- */
.top, .grid { position: relative; z-index: 2; }
.top {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: 14px;
  border: 1px solid var(--line); background: var(--panel);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.brand { display: flex; align-items: center; gap: 12px; margin-inline-end: auto; }
.brand h1 { font-size: 24px; color: var(--acc); text-shadow: 0 0 12px rgba(var(--acc-rgb), .6); }
.sigil {
  width: 34px; height: 34px; border: 2px solid var(--acc); border-radius: 50%;
  position: relative; box-shadow: 0 0 14px rgba(var(--acc-rgb), .5);
}
.sigil::before, .sigil::after { content: ""; position: absolute; background: var(--acc); }
.sigil::before { left: 50%; top: -6px; bottom: -6px; width: 2px; transform: translateX(-50%); }
.sigil::after  { top: 50%; left: -6px; right: -6px; height: 2px; transform: translateY(-50%); }
.clock { display: grid; gap: 4px; text-align: end; }
.clock b { font: 700 22px/1 var(--font-ui); letter-spacing: .1em; }
@keyframes blink { 50% { opacity: .35; } }
.gear {
  border: 1px solid var(--line); background: transparent; color: var(--acc);
  font: 700 13px var(--font-ui); letter-spacing: .15em; padding: 8px 12px; cursor: pointer;
}
.gear:hover { background: rgba(var(--acc-rgb), .12); }

/* ---------- layout ---------- */
.grid { display: grid; gap: 14px; }
.comms { grid-area: comms; } .logs { grid-area: logs; } .ho { grid-area: ho; }
@media (max-width: 640px) { body { padding: 12px 16px; } }

/* ---------- panel chrome ---------- */
.panel {
  position: relative; padding: 14px 16px 16px;
  border: 1px solid var(--line); background: var(--panel);
  min-width: 0;
}
.panel h2 {
  font-size: 15px; color: var(--text);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.panel .sec { font-size: 10px; color: var(--dim); letter-spacing: .2em; }
.panel .tools { margin-inline-start: auto; display: flex; gap: 6px; }
.br { position: absolute; width: 14px; height: 14px; border: 2px solid var(--acc); pointer-events: none; }
.br.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.br.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.br.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.br.rb { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* cursor spotlight */
body.spot .panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(var(--acc-rgb), .10), transparent 70%);
}

/* border beam: a light running round the log panel; red when fresh errors */
body.beam .beamed::before {
  content: ""; position: absolute; inset: -1px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 70%, var(--acc) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 5s linear infinite;
}
body.beam .beamed.hot::before { background: conic-gradient(from var(--ang), transparent 0 60%, var(--bad) 85%, transparent 100%); animation-duration: 2s; }
@keyframes spin { to { --ang: 360deg; } }

.ghost {
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  font: 600 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 9px; cursor: pointer;
}
.ghost:hover { color: var(--acc); border-color: var(--acc); }

/* ---------- radar / live chat ---------- */
.radar { position: relative; width: min(220px, 70%); aspect-ratio: 1; margin: 6px auto 10px; }
.radar > * { position: absolute; inset: 0; border-radius: 50%; }
.rings i { position: absolute; border: 1px solid var(--line); border-radius: 50%; inset: 0; }
.rings i:nth-child(2) { inset: 22%; } .rings i:nth-child(3) { inset: 44%; }
.rings::before, .rings::after { content: ""; position: absolute; background: var(--line); }
.rings::before { left: 50%; top: 0; bottom: 0; width: 1px; } .rings::after { top: 50%; left: 0; right: 0; height: 1px; }
.sweep {
  background: conic-gradient(from 0deg, rgba(var(--acc-rgb), .55), rgba(var(--acc-rgb), 0) 25%, transparent 25%);
  opacity: 0; transition: opacity .6s;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.core { inset: 44%; background: var(--dim); box-shadow: 0 0 0 4px rgba(255,255,255,.04); transition: background .4s, box-shadow .4s; }
.blip { inset: auto; width: 8px; height: 8px; background: var(--acc); box-shadow: 0 0 10px var(--acc); opacity: 0; }
.blip.b1 { top: 24%; left: 62%; } .blip.b2 { top: 66%; left: 30%; }
.ping { border: 2px solid var(--acc); opacity: 0; transform: scale(.2); }
.radar[data-state="active"] .sweep { opacity: 1; animation: sweep 3s linear infinite; }   /* only turns while there is something to show */
.radar[data-state="active"] .core { background: var(--acc); box-shadow: 0 0 22px var(--acc), 0 0 0 4px rgba(var(--acc-rgb), .15); }
.radar[data-state="active"] .blip { animation: blip 3s linear infinite; }
.radar[data-state="active"] .blip.b2 { animation-delay: 1.4s; }
.radar[data-state="active"] .ping { animation: ping 3s ease-out infinite; }
.radar[data-state="active"] .ping.p2 { animation-delay: 1s; } .radar[data-state="active"] .ping.p3 { animation-delay: 2s; }
@keyframes ping { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1); } }
@keyframes blip { 0%, 100% { opacity: 0; } 8% { opacity: 1; } 55% { opacity: 0; } }
.state { text-align: center; font: 700 28px/1 var(--font-ui); letter-spacing: .25em; color: var(--dim); }
.state.on { color: var(--acc); text-shadow: 0 0 16px rgba(var(--acc-rgb), .7); }
.sub { text-align: center; color: var(--dim); font-size: 12px; margin: 6px 0 10px; }
.clinics { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 26px; margin-bottom: 10px; }
.chip { border: 1px solid var(--acc); color: var(--acc); font: 600 12px var(--font-ui); letter-spacing: .1em; padding: 3px 8px; }
.comms .ghost { display: block; margin: 0 auto; }

/* ---------- log terminal ---------- */
.term {
  height: 340px; overflow: auto; font-size: 12.5px; line-height: 1.5;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); padding: 8px 10px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.ln { display: grid; grid-template-columns: 62px 58px minmax(0, 1fr); gap: 8px; animation: lnin .35s ease-out; }
.ln .t { color: var(--dim); } .ln .m { overflow-wrap: anywhere; }
.ln .lv { font-weight: 700; letter-spacing: .08em; }
.ln.warning .lv { color: var(--warn); } .ln.error .lv { color: var(--bad); }
.ln.error { background: linear-gradient(90deg, rgba(255, 59, 78, .14), transparent 70%); }
.ln.fresh { animation: lnin .35s ease-out, flash 1.4s ease-out; }
@keyframes lnin { from { opacity: 0; transform: translateX(-14px); } }
@keyframes flash { 0% { background: rgba(255, 59, 78, .55); } 100% { background: rgba(255, 59, 78, .14); } }
.term::after { content: "▌"; color: var(--acc); animation: blink 1s steps(2) infinite; }

/* ---------- handoffs ---------- */
.count { margin-inline-start: auto; color: var(--acc); font: 700 18px var(--font-ui); }
.hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hi {
  position: relative; border: 1px solid var(--line); background: rgba(0, 0, 0, .3);
  padding: 10px 12px; display: grid; gap: 6px;
  transition: opacity .3s, transform .5s cubic-bezier(.6, 0, .2, 1);
}
.hi.bad { border-color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.hi .r1 { display: flex; justify-content: space-between; gap: 8px; }
.hi b { font: 700 15px var(--font-ui); letter-spacing: .08em; color: var(--text); }
.hi .meta { font-size: 12px; color: var(--dim); }
.hi .meta .nodev { color: var(--bad); }
.hi .act { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.hi a { color: var(--acc); font-size: 12px; }
.rep {
  border: 1px solid var(--acc); background: rgba(var(--acc-rgb), .1); color: var(--acc);
  font: 700 12px var(--font-ui); letter-spacing: .2em; padding: 6px 12px; cursor: pointer;
  text-transform: uppercase;
}
.rep:hover { background: var(--acc); color: #04080a; box-shadow: 0 0 16px rgba(var(--acc-rgb), .6); }
.empty { text-align: center; color: var(--acc); font: 600 13px var(--font-ui); letter-spacing: .25em; padding: 22px 0; }

/* dismiss: crt collapse */
.hi.out-crt { animation: crt .55s cubic-bezier(.7, 0, .3, 1) forwards; transform-origin: center; }
@keyframes crt {
  0%   { transform: scale(1, 1); filter: brightness(1); }
  55%  { transform: scale(1, .02); filter: brightness(4); background: #fff; }
  80%  { transform: scale(.02, .02); filter: brightness(6); }
  100% { transform: scale(0, 0); opacity: 0; }
}


/* ---------- decode text ---------- */
[data-hyper] { display: inline-block; }

/* ---------- boot ---------- */
#boot {
  position: fixed; inset: 0; z-index: 100; background: #020506; display: none;
  padding: 7vh 7vw; color: var(--acc); font: 14px/1.7 var(--font-mono);
}
#boot.on { display: block; }
#boot pre { margin: 0; white-space: pre-wrap; text-shadow: 0 0 8px rgba(var(--acc-rgb), .6); }

/* ---------- effects drawer ---------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 100%); z-index: 80;
  background: rgba(4, 10, 12, .96); border-inline-start: 1px solid var(--acc);
  padding: 18px 16px; overflow: auto; display: grid; gap: 14px; align-content: start;
}
.drawer[hidden] { display: none; }
.drawer h3 { color: var(--acc); font-size: 16px; }
.drawer label { display: grid; gap: 6px; font: 600 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.drawer .chk { display: flex; align-items: center; gap: 10px; }
.drawer select {
  background: #000; color: var(--text); border: 1px solid var(--line); padding: 8px;
  font: 14px var(--font-mono);   /* 16px on a phone, or iOS zooms the page */
}
@media (max-width: 640px) { .drawer select { font-size: 16px; } }
.drawer .row { display: flex; gap: 8px; flex-wrap: wrap; }
input[type="checkbox"] { accent-color: var(--acc); width: 16px; height: 16px; }

/* Idle (app.js adds body.idle after 30 s with no input): the decoration holds
   still. Only what the operator reads keeps moving: the radar, new log lines,
   handoff rows. The beam stays red while frozen if errors are fresh. */
body.idle #bg-retro::before,
body.idle #overlay-scan::after,
body.idle #overlay-noise,
body.idle .beamed::before { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #bg-retro::before { animation: none; }
}

/* ---------- real page: login, uplink ---------- */
.foot { margin-top: 8px; line-height: 1.5; letter-spacing: .08em; text-transform: none; }
.link { display: grid; gap: 4px; text-align: end; }
.link b { font: 700 22px/1 var(--font-ui); letter-spacing: .1em; color: var(--acc); }
.link.lost b { color: var(--bad); animation: blink 1s steps(2) infinite; }
.radar[data-state="unknown"] .core { background: var(--warn); box-shadow: 0 0 14px var(--warn); }
.login { position: relative; z-index: 2; min-height: 100vh; display: grid; place-items: center; padding: 16px; margin: -16px; }
.login[hidden], #app-view[hidden] { display: none; }
.login-card { width: min(380px, 100%); display: grid; gap: 16px; padding: 22px 20px; }
.login-card label { display: grid; gap: 6px; font: 600 11px var(--font-ui); letter-spacing: .22em; color: var(--dim); }
.login-card input {
  background: rgba(0, 0, 0, .5); color: var(--text); border: 1px solid var(--line);
  padding: 10px; font: 16px var(--font-mono);   /* 16px: below it, iOS zooms the page on focus */
}
.login-card input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 14px rgba(var(--acc-rgb), .3); }
.login-err { min-height: 18px; color: var(--bad); font-size: 13px; }
.login-card .rep { padding: 10px; }
.login-card .rep:disabled { opacity: .5; cursor: wait; }

/* ---------- handoffs panel on the real page ---------- */
.grid.three {
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 360px);
  grid-template-areas: "comms logs ho";
  align-items: start;
}
@media (max-width: 1100px) { .grid.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "comms ho" "logs logs"; } }
@media (max-width: 640px) { .grid.three { grid-template-columns: minmax(0, 1fr); grid-template-areas: "comms" "ho" "logs"; } }
.sub-note { margin: -4px 0 10px; line-height: 1.5; letter-spacing: .08em; text-transform: none; }
.empty.unknown { color: var(--warn); }
.hi .err-note { color: var(--bad); font-size: 12px; min-height: 0; }
.hi .err-note:empty { display: none; }
.rep:disabled { opacity: .5; cursor: wait; }
.hi a { overflow-wrap: anywhere; }