/* ════════════════════════════════════════════════════════════
   LCARS shared chrome
   Loaded by index.html, breathing.html, contact.html.
   The structural skeleton (frame, sidebar caps, header / footer)
   lives here once. Each page declares its own palette by setting
   per-page CSS tokens in its inline :root:

     --sb-1..8-bg     (sidebar block colors)
     --sb-1..8-flex   (sidebar block flex ratios — the "rhythm")
     --htag-bg        (back-link / header tag color)

   Defaults below match index.html. A page that wants a different
   color signature only redeclares the tokens it overrides.
════════════════════════════════════════════════════════════ */

:root {
  --orange:  #FF9900;
  --lavender:#CC99FF;
  --blue:    #9999FF;
  --yellow:  #FFCC00;
  --peach:   #FFCC99;
  --teal:    #66CCFF;
  --black:   #000000;

  --hdr-h:  clamp(56px, 7vh,   80px);
  --ftr-h:  clamp(44px, 5.5vh, 60px);
  --side-w: clamp(42px, 7vw,   88px);
  --gap:    clamp(10px, 1.6vh, 20px);
}

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

button { -webkit-appearance: none; appearance: none; font-variant-emoji: text }

html, body {
  width: 100%;
  height: 100vh; height: 100dvh;
  background: var(--black);
  font-family: 'Antonio', 'Helvetica Neue', Helvetica, sans-serif;
  overflow: hidden; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  /* Force text-presentation glyphs everywhere — stops iOS/Android from
     coercing characters like ◀ ▲ ▶ ◆ into the colored-emoji font.
     Belt-and-suspenders alongside the U+FE0E variation selectors used
     after each back-arrow in the HTML. */
  font-variant-emoji: text;
}

/* Scanline overlay + radial vignette */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center,
    transparent 50%, rgba(0,0,0,0.82) 100%);
}

.lcars-frame {
  display: flex; width: 100%; height: 100%;
  position: relative; z-index: 2;
  max-width: min(100%, 960px); margin: 0 auto;
}

/* ── LEFT CHROME ─────────────────────────────────────────── */
.lcars-left {
  width: var(--side-w); flex-shrink: 0;
  display: flex; flex-direction: column;
}
.top-cap {
  width: var(--side-w); height: var(--hdr-h);
  background: var(--orange);
  border-radius: calc(var(--hdr-h)/2) 0 0 0;
  flex-shrink: 0; position: relative;
}
.top-cap::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: calc(var(--side-w) * 0.28); height: calc(var(--side-w) * 0.28);
  background: var(--black);
  border-top-left-radius: calc(var(--side-w) * 0.14);
}
.bottom-cap {
  width: var(--side-w); height: var(--ftr-h);
  background: var(--orange);
  border-radius: 0 0 0 calc(var(--ftr-h)/2);
  flex-shrink: 0; position: relative;
}
.bottom-cap::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: calc(var(--side-w) * 0.28); height: calc(var(--side-w) * 0.28);
  background: var(--black);
  border-bottom-left-radius: calc(var(--side-w) * 0.14);
}
.sidebar-blocks {
  flex: 1; display: flex; flex-direction: column;
  gap: clamp(3px, 0.5vh, 6px);
  padding: clamp(3px, 0.5vh, 6px) 0;
}
.sb {
  width: calc(var(--side-w) * 0.75);
  border-radius: 0 clamp(6px, 1vw, 13px) clamp(6px, 1vw, 13px) 0;
}

/* Per-page rhythm + palette via tokens (defaults = index.html) */
.sb:nth-child(1) { flex: var(--sb-1-flex, 3); background: var(--sb-1-bg, var(--orange))   }
.sb:nth-child(2) { flex: var(--sb-2-flex, 1); background: var(--sb-2-bg, var(--lavender)) }
.sb:nth-child(3) { flex: var(--sb-3-flex, 2); background: var(--sb-3-bg, var(--blue))     }
.sb:nth-child(4) { flex: var(--sb-4-flex, 1); background: var(--sb-4-bg, var(--yellow))   }
.sb:nth-child(5) { flex: var(--sb-5-flex, 5); background: var(--sb-5-bg, var(--orange))   }
.sb:nth-child(6) { flex: var(--sb-6-flex, 1); background: var(--sb-6-bg, var(--peach))    }
.sb:nth-child(7) { flex: var(--sb-7-flex, 2); background: var(--sb-7-bg, var(--teal))     }
.sb:nth-child(8) { flex: var(--sb-8-flex, 1); background: var(--sb-8-bg, var(--lavender)) }

/* ── RIGHT PANEL ─────────────────────────────────────────── */
.lcars-right { flex: 1; display: flex; flex-direction: column; min-width: 0 }
.lcars-header {
  height: var(--hdr-h); flex-shrink: 0;
  display: flex; gap: 6px; background: var(--black);
}
.h-main {
  flex: 1; background: var(--orange);
  display: flex; align-items: center;
  padding: 0 clamp(14px, 2.5vw, 26px);
  gap: clamp(8px, 1.5vw, 16px);
  overflow: hidden;
}
.h-divider { width: 2px; height: 26px; background: rgba(0,0,0,0.28); flex-shrink: 0 }
.h-subsystem {
  font-size: clamp(0.6rem, 1.1vw, 0.74rem);
  letter-spacing: 0.14em;
  color: rgba(0,0,0,0.6);
  white-space: nowrap; text-transform: uppercase;
}
.h-title {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 700; letter-spacing: 0.06em;
  color: var(--black); white-space: nowrap;
}
.h-spacer { flex: 1 }
.h-ref {
  font-size: clamp(0.6rem, 1vw, 0.72rem);
  letter-spacing: 0.1em; color: rgba(0,0,0,0.52);
  white-space: nowrap; text-transform: uppercase;
}
.h-tag {
  width: clamp(80px, 12vw, 148px); flex-shrink: 0;
  background: var(--htag-bg, var(--orange));
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(0.62rem, 1.1vw, 0.8rem);
  font-weight: 700; letter-spacing: 0.16em;
  color: rgba(0,0,0,0.68); text-transform: uppercase;
}
a.h-tag { cursor: pointer; text-decoration: none; transition: opacity 0.2s }
a.h-tag:hover { opacity: 0.85 }

/* ── FOOTER ──────────────────────────────────────────────── */
.lcars-footer {
  height: var(--ftr-h); flex-shrink: 0;
  display: flex; gap: 6px; background: var(--black);
}
.f-main {
  flex: 1; background: var(--orange);
  display: flex; align-items: center;
  padding: 0 clamp(14px, 2.5vw, 26px);
  gap: clamp(12px, 2vw, 22px);
}
.f-bold {
  font-size: clamp(0.74rem, 1.3vw, 0.9rem);
  font-weight: 700; letter-spacing: 0.14em;
  color: var(--black); text-transform: uppercase;
  white-space: nowrap;
}
.f-text {
  font-size: clamp(0.62rem, 1vw, 0.74rem);
  letter-spacing: 0.14em; color: rgba(0,0,0,0.58);
  text-transform: uppercase; white-space: nowrap;
}
.f-spacer { flex: 1 }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 680px) {
  .h-subsystem, .h-ref, .h-divider { display: none }
  .h-title { font-size: clamp(1.1rem, 5vw, 1.6rem) }
  .h-tag   { font-size: clamp(0.55rem, 2.5vw, 0.72rem); width: clamp(80px, 22vw, 120px) }
  .f-bold  { font-size: clamp(0.58rem, 2.4vw, 0.72rem); letter-spacing: 0.08em }
  .f-text  { display: none }
}
@media (max-width: 480px) {
  :root { --side-w: 30px; --hdr-h: 54px; --ftr-h: 44px; --gap: 10px }
  .sb { width: 24px; border-radius: 0 6px 6px 0 }
  .top-cap    { border-radius: 14px 0 0 0 }
  .bottom-cap { border-radius: 0 0 0 14px }
}