/* ===========================================================
   COOPEN · Base Styles
   Page chrome, layout regions, and global elements.
=========================================================== */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--c-bg);
  color: var(--c-white);
  font-family: var(--ff-mono);
  -webkit-font-smoothing: antialiased;
}
body { overflow: hidden; }
body[data-page="admin"], body[data-page="docs"] { overflow: auto; }

a { color: var(--c-cyan-soft); text-decoration: none; }
a:hover { color: var(--c-cyan); text-shadow: var(--glow-cyan-soft); }

/* ----- HUD frame ----- */
.hud {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.hud .bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(11, 31, 74, .6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 31, 74, .6) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .32;
  pointer-events: none;
}
.hud .bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(3, 7, 18, .65) 72%, var(--c-bg) 92%);
  pointer-events: none;
}

/* ----- HUD region anchors -----
   Each region is bounded vertically (top + bottom) so it never bleeds into
   the next one. Horizontal widths use min() with a hard cap. The HUD assumes
   ≥1100px width — narrower viewports switch to a stacked layout below. */
.region-top    { position: absolute; top: 2.4vh; left: 2.4vw; right: 2.4vw; z-index: 30; display: flex; justify-content: space-between; align-items: flex-start; gap: 2vw; pointer-events: none; }
.region-top > * { pointer-events: auto; }
.region-top .top-left  { max-width: 46vw; min-width: 0; }
.region-top .top-right { max-width: 32vw; min-width: 0; text-align: right; }

.region-left   { position: absolute; left: 2.4vw; top: 22vh; bottom: 14vh; width: min(22vw, 420px); z-index: 20; overflow: hidden; }
.region-right  { position: absolute; right: 2.4vw; top: 24vh; bottom: 14vh; width: min(20vw, 370px); z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 1.5vh; overflow: hidden; }
.region-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(44vw, 70vh); aspect-ratio: 1; z-index: 5; pointer-events: none; }
.region-center > * { pointer-events: auto; }

.region-bottom-left   { position: absolute; left: 2.4vw; bottom: 3.1vh; display: flex; gap: 1vw; align-items: center; z-index: 25; max-width: 22vw; }
.region-bottom-center { position: absolute; left: 50%; bottom: 4.2vh; transform: translateX(-50%); width: min(34vw, 520px); z-index: 25; }
.region-bottom-right  { position: absolute; right: 2.4vw; bottom: 3.1vh; z-index: 25; display: flex; gap: .6vw; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 20vw; }

/* ----- Bracket framing reused everywhere ----- */
.bracket { position: relative; }
.bracket > .corner { position: absolute; width: 14px; height: 14px; pointer-events: none; filter: drop-shadow(0 0 5px rgba(0, 229, 255, .6)); }
.bracket > .corner.tl { top: -5px; left: -5px;  border-top: 1.5px solid var(--c-cyan); border-left: 1.5px solid var(--c-cyan); }
.bracket > .corner.tr { top: -5px; right: -5px; border-top: 1.5px solid var(--c-cyan); border-right: 1.5px solid var(--c-cyan); }
.bracket > .corner.bl { bottom: -5px; left: -5px; border-bottom: 1.5px solid var(--c-cyan); border-left: 1.5px solid var(--c-cyan); }
.bracket > .corner.br { bottom: -5px; right: -5px; border-bottom: 1.5px solid var(--c-cyan); border-right: 1.5px solid var(--c-cyan); }

/* ----- Top-level nav (admin / docs pages) ----- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2vh 2.4vw;
  background: rgba(3, 7, 18, .82);
  border-bottom: var(--b-cyan-soft);
  backdrop-filter: blur(4px);
}
.nav .brand { color: var(--c-cyan-soft); letter-spacing: var(--ls-wide); font-size: var(--fs-md); text-shadow: var(--glow-cyan-soft); }
.nav .links { display: flex; gap: 1.2vw; }
.nav .links a { font-size: var(--fs-sm); letter-spacing: var(--ls-norm); padding: .4vh .8vw; border: 1px solid transparent; border-radius: var(--radius-md); }
.nav .links a[aria-current="page"] { border-color: var(--c-cyan); color: var(--c-cyan); box-shadow: inset 0 0 12px rgba(0,229,255,.18); }

/* ----- Document layout (admin/docs) ----- */
.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3vh 3vw 8vh;
}
.page h1 { color: var(--c-cyan-soft); font-size: clamp(20px, 2vw, 30px); letter-spacing: var(--ls-wide); text-shadow: var(--glow-cyan-soft); margin: 0 0 .6em; }
.page h2 { color: var(--c-cyan); font-size: clamp(15px, 1.3vw, 19px); letter-spacing: var(--ls-wide); margin-top: 2.4em; }
.page h3 { color: var(--c-cyan-soft); font-size: var(--fs-lg); letter-spacing: var(--ls-norm); margin-top: 1.6em; }
.page p, .page li { font-size: var(--fs-md); line-height: 1.6; color: var(--c-gray-2); }
.page code, .page pre {
  font-family: var(--ff-mono);
  background: rgba(11, 31, 74, .35);
  border: var(--b-cyan-soft);
  padding: 2px 6px;
  border-radius: var(--radius-md);
  color: var(--c-cyan-soft);
  font-size: .92em;
}
.page pre { padding: 12px 14px; overflow: auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4vw;
}
.card {
  position: relative;
  border: var(--b-cyan);
  background: var(--c-surface);
  padding: 14px 16px 12px;
  box-shadow: inset 0 0 26px rgba(0, 229, 255, .07), 0 0 26px rgba(0, 0, 0, .55);
}
.card .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8em; }
.card .head .tag { color: var(--c-cyan-soft); letter-spacing: var(--ls-wide); font-size: var(--fs-sm); }
.card .head .meta { color: var(--c-gray); font-size: var(--fs-xs); }
.card pre { margin: 0; }

/* ----- HUD inline helpers (reusable, no inline styles in HTML) ----- */
.session-row    { display: flex; justify-content: space-between; align-items: flex-start; gap: 1vw; flex-wrap: wrap; }
.session-meta   { text-align: right; line-height: 1.1; min-width: 0; }
.session-meta .v1 { color: var(--c-amber); font-size: clamp(15px, 1.3vw, 21px); text-shadow: var(--glow-amber); white-space: nowrap; }
.session-meta .v2 { color: var(--c-amber); font-size: clamp(11px, 1vw, 14.5px); opacity: .92; margin-top: 2px; white-space: nowrap; }
.session-tags   { display: flex; justify-content: space-between; gap: 1vw; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-cyan-soft); letter-spacing: .085em; opacity: .86; }

.nav-btn {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  padding: .55vh .9vw;
  border: 1px solid var(--c-cyan-soft);
  border-radius: var(--radius-md);
  color: var(--c-cyan-soft);
  white-space: nowrap;
  background: rgba(3, 7, 18, .6);
}
.nav-btn:hover { border-color: var(--c-cyan); color: var(--c-cyan); box-shadow: 0 0 12px rgba(0,229,255,.35); }

.region-block-margin { margin-top: 3vh; }
@media (max-height: 880px) {
  .region-block-margin { margin-top: 1.6vh; }
}

.full-w { width: 100%; }

/* Stage that hosts radar + orb in the center region */
.radar-stage { position: relative; width: 100%; height: 100%; }

/* Hide non-essential blocks on short laptops to free vertical space */
.hide-on-short { display: block; }
@media (max-height: 760px) and (min-width: 900px) {
  .hide-on-short { display: none; }
}

/* ----- Status dot helper ----- */
.dot { display:inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 8px currentColor; }
.dot.ok    { color: var(--c-status-ok); background: currentColor; }
.dot.warn  { color: var(--c-status-warn); background: currentColor; }
.dot.err   { color: var(--c-status-err); background: currentColor; }
.dot.idle  { color: var(--c-status-idle); background: currentColor; }
.dot.live  { color: var(--c-status-listen); background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ===========================================================
   Responsive ladder — keep widgets from overlapping at every size.
   1) ≥1400px : the canonical HUD experience.
   2) 1100–1399 : tighten panel widths and bottom card.
   3) 900–1099  : shrink further; bottom card narrower.
   4)  600–899  : SWITCH to stacked column layout (scrollable).
   5)   <600    : same column, denser typography, full-width regions.
=========================================================== */

/* (2) tighten everything so panels don't crowd the radar */
@media (max-width: 1399px) {
  .region-top    { left: 2vw; right: 2vw; }
  .region-left   { width: min(24vw, 360px); top: 22vh; }
  .region-right  { width: min(22vw, 320px); top: 24vh; }
  .region-bottom-center { width: min(36vw, 440px); }
  .region-bottom-left   { max-width: 20vw; }
  .region-bottom-right  { max-width: 22vw; }
  .region-center { width: min(40vw, 64vh); }
}

/* (3) constrain hard so the HUD still fits */
@media (max-width: 1099px) {
  .region-left   { width: min(26vw, 300px); top: 24vh; }
  .region-right  { width: min(26vw, 300px); top: 26vh; }
  .region-bottom-center { width: min(38vw, 380px); }
  .region-bottom-left   { max-width: 22vw; gap: .7vw; }
  .region-bottom-right  { max-width: 22vw; }
  .region-center { width: min(36vw, 60vh); }
}

/* (4) ≤899px → leave HUD layout, become a vertical scrollable column */
@media (max-width: 899px) {
  body[data-page="hud"] { overflow-y: auto; overflow-x: hidden; }
  .hud { height: auto; min-height: 100vh; padding: 0 0 4vh; }
  .hud .bg-vignette { display: none; }   /* vignette ruins readability when stacked */

  .region-top {
    position: relative; inset: auto;
    flex-direction: column; align-items: flex-start; gap: 1.5vh;
    padding: 2.4vh 4vw 0;
  }
  .region-top .top-left, .region-top .top-right { max-width: 100%; width: 100%; text-align: left; }

  .region-left, .region-right, .region-center,
  .region-bottom-left, .region-bottom-center, .region-bottom-right {
    position: relative; inset: auto; transform: none;
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto; max-width: 100%;
    margin: 2.2vh 4vw;
    align-items: stretch; justify-content: flex-start;
    overflow: visible;
  }
  .region-center {
    width: min(86vw, 460px); aspect-ratio: 1;
    margin: 2.4vh auto;
  }
  .region-right { display: flex; flex-direction: column; gap: 2vh; }
  .region-bottom-right { flex-direction: row; flex-wrap: wrap; gap: 2vw; }
}

/* (5) phones */
@media (max-width: 599px) {
  :root { --fs-3xl: clamp(24px, 8vw, 40px); }
  .region-top { padding: 2vh 4vw 0; }
  .region-center { width: min(92vw, 380px); }
  .region-bottom-center, .region-bottom-left, .region-bottom-right {
    margin-left: 4vw; margin-right: 4vw;
  }
}

/* When height is short (laptops, landscape phones) */
@media (max-height: 880px) and (min-width: 900px) {
  .region-left  { top: 24vh; bottom: 12vh; }
  .region-right { top: 26vh; bottom: 12vh; gap: 1.1vh; }
  .region-bottom-center { bottom: 3vh; }
  .region-bottom-left   { bottom: 2.5vh; }
  .region-bottom-right  { bottom: 2.5vh; }
}
@media (max-height: 720px) and (min-width: 900px) {
  .region-left  { top: 22vh; bottom: 11vh; }
  .region-right { top: 24vh; bottom: 11vh; gap: .8vh; }
}