/* ATMOS — hidden system layer inside shii·haa.
 *
 * Monochrome BIOS aesthetic, fully scoped under .atmos-sys so it cannot leak
 * into the host app's styles. The overlay is a fixed full-screen layer that
 * sits above everything; it is hidden until summoned (Cmd/Ctrl+K on desktop,
 * long-press on the brand logo on mobile) and never appears for normal users.
 *
 * Black. White. Monospace. Grid. Line. State. No color. No decoration. */

.atmos-sys {
  --atmos-fg: #ffffff;
  --atmos-bg: #000000;
  --atmos-dim: #808080;
  --atmos-line: #ffffff;
  --atmos-mono: "Courier New", "DejaVu Sans Mono", monospace;

  position: fixed;
  inset: 0;
  /* Lock the overlay to the real viewport height so every ATMOS screen is a
   * single BIOS/terminal screen — no page scroll. dvh tracks the mobile dynamic
   * viewport (URL bar collapse); height:100% is the fallback for older engines. */
  height: 100%;
  height: 100dvh;
  z-index: 2147483000; /* above all app chrome, below nothing it owns */
  background: var(--atmos-bg);
  color: var(--atmos-fg);
  font-family: var(--atmos-mono);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;            /* the overlay itself never scrolls */
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}

.atmos-sys[hidden] { display: none; }
.atmos-sys * { box-sizing: border-box; }

/* INNER frame — centered column that FILLS the viewport without scrolling. The
 * column never overflows the screen; individual panels (stream/menu/doctrine)
 * scroll INTERNALLY within their fixed box, but the page as a whole does not.
 * min-height:0 lets the flex children shrink instead of pushing the column past
 * the viewport (the classic flexbox overflow trap). */
.atmos-sys-inner {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 14px);
  overflow: hidden;            /* contain children; no internal page scroll */
}

/* HEADER bar: identity + stage. */
.atmos-sys-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--atmos-line);
  text-transform: uppercase;
  font-size: 13px;
}
.atmos-sys-bar .atmos-sys-stage { font-weight: bold; }

/* THRESHOLD ready moment — radical title language, prompt-style output. */
.atmos-sys-ready {
  margin: 0;
  font-size: clamp(22px, 7vw, 34px);
  font-weight: bold;
  text-transform: uppercase;
  white-space: pre;
}
.atmos-sys-dot { display: inline-block; width: 0.6em; }
.atmos-sys-dot[data-on="false"] { color: transparent; }
.atmos-sys-sub {
  margin: 0;
  font-size: clamp(13px, 4vw, 16px);
  text-transform: uppercase;
}

/* SCREEN bodies — exactly one visible at a time. Each fills the remaining column
 * height and contains its own content (min-height:0 + overflow:hidden) so a screen
 * is always one viewport, never a scrolling page. */
.atmos-sys-screen {
  display: none;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 12px);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.atmos-sys-screen.is-active { display: flex; }

.atmos-sys-title {
  font-size: 16px;
  margin: 0;
  text-transform: uppercase;
  border-bottom: 1px solid var(--atmos-line);
  padding-bottom: 6px;
}
.atmos-sys-line { margin: 0; }
.atmos-sys-dim { color: var(--atmos-dim); }

/* DIAGNOSTIC stream — the visible machine trace. */
.atmos-sys-stream {
  margin: 0;
  border: 1px solid var(--atmos-line);
  padding: 8px 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}
.atmos-sys-stream .atmos-sys-out { display: block; }

/* DOCTRINE reader — paged, legible. */
.atmos-sys-doctrine {
  margin: 0;
  border: 1px solid var(--atmos-line);
  padding: 16px 18px;
  white-space: pre-wrap;
  line-height: 2;
  text-transform: uppercase;
  flex: 1;
}

/* HELP / COMMANDS — dedicated reference screens. A bordered definition list,
 * NOT the diagnostic stream: no timestamps, no mixed log lines. Term on the
 * left, description on the right; monochrome BIOS, scrolls on small screens. */
.atmos-sys-ref-list {
  margin: 0;
  border: 1px solid var(--atmos-line);
  flex: 1;
  overflow-y: auto;
  text-transform: uppercase;
}
.atmos-sys-ref-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.atmos-sys-ref-row:last-child { border-bottom: none; }
.atmos-sys-ref-term {
  margin: 0;
  flex: 0 0 38%;
  font-weight: bold;
  letter-spacing: 0.06em;
  word-break: break-word;
}
.atmos-sys-ref-desc {
  margin: 0;
  flex: 1;
  color: var(--atmos-dim);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* BREATH — SHII·HAA SIGNATURE rhythm generator (guided visual).
 * The screen is dominated by the generator: a centered module, large phase
 * label, and a wide block progress bar. Timers + signature cycle are secondary.
 * Monochrome BIOS, responsive from mobile to desktop. */
.atmos-sys-rg {
  align-items: stretch;
  justify-content: center;
}
.atmos-sys-rg-box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vh, 16px);
  border: 1px solid var(--atmos-line);
  padding: clamp(8px, 2vh, 22px) 14px;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
}
/* Large/central RHYTHM GENERATOR module label. */
.atmos-sys-rg-label {
  margin: 0;
  font-size: clamp(13px, 3.4vw, 17px);
  letter-spacing: 0.22em;
  color: var(--atmos-dim);
}
/* Primary visual text — the current phase, larger than everything else. */
.atmos-sys-rg-phase {
  margin: 0;
  font-size: clamp(28px, 7vw, 46px);
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 1.05;
}
/* Wide/dominant block progress bar — never wraps, scales to fit. */
.atmos-sys-rg-bar {
  margin: 0;
  width: 100%;
  white-space: pre;
  overflow: hidden;
  font-size: clamp(13px, 3.6vw, 22px);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
/* Secondary timers — smaller than the phase, dimmed. */
.atmos-sys-rg-timer {
  margin: 0;
  font-size: clamp(12px, 3.2vw, 16px);
  letter-spacing: 0.08em;
}
/* Signature cycle — smallest, secondary metadata line. */
.atmos-sys-rg-sig {
  margin: 0;
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: 0.06em;
  color: var(--atmos-dim);
}
.atmos-sys-rg-hint { text-align: center; }

/* MENU — BIOS-style session menu. Keyboard-navigable list; the selected row is
 * inverted (BIOS highlight). Monochrome, no color. */
.atmos-sys-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--atmos-line);
  flex: 1;
  overflow-y: auto;
}
.atmos-sys-menu-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
}
.atmos-sys-menu-item:last-child { border-bottom: none; }
.atmos-sys-menu-item.is-selected {
  background: var(--atmos-fg);
  color: var(--atmos-bg);
}
.atmos-sys-menu-cursor { width: 1ch; font-weight: bold; white-space: pre; }
.atmos-sys-menu-name { flex: 1; font-weight: bold; letter-spacing: 0.04em; }
.atmos-sys-menu-tag { font-size: 11px; letter-spacing: 0.08em; opacity: 0.8; }
.atmos-sys-menu-pipeline { font-size: 11px; }

/* DETAIL — session preview screen. Read-only pipeline text. */
.atmos-sys-detail-body {
  margin: 0;
  border: 1px solid var(--atmos-line);
  padding: 16px 18px;
  white-space: pre-wrap;
  line-height: 1.9;
  text-transform: uppercase;
  flex: 1;
}

/* RUNTIME — ATMOS-style live session shell (foreground while the real engine
 * runs underneath). Mode header, engine/calibration status body, and — for
 * guided techniques — the reused RHYTHM GENERATOR block. Monochrome, no color. */
/* Runtime is a tight one-viewport stack: header + mode + stage + CTA + ONE live
 * visualization + a compact status body, then the prompt/controls. The gap is
 * deliberately small so nothing is pushed below the fold on a desktop screenshot
 * or a short mobile viewport. */
.atmos-sys-runtime { gap: clamp(6px, 1.4vh, 10px); }
/* Compact runtime header — title + mode + stage on a single, low-cost row so the
 * primary visualization keeps the vertical space it needs (no clipped labels on a
 * ~768px-tall or mobile viewport). */
.atmos-sys-runtime-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--atmos-line);
  padding-bottom: clamp(4px, 1vh, 6px);
}
.atmos-sys-runtime-title {
  border-bottom: none;
  padding-bottom: 0;
  font-size: clamp(12px, 3vw, 15px);
}
.atmos-sys-runtime-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.atmos-sys-runtime-mode {
  margin: 0;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: clamp(10px, 2.4vw, 12px);
  color: var(--atmos-dim);
}
/* ALWAYS-VISIBLE CTA — the single call-to-action for the current REAL stage.
 * Pinned above the body so ENTER's effect is never clipped. Inverted when ENTER
 * triggers a real advance/connect action so it reads as the primary control. */
.atmos-sys-runtime-cta {
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid var(--atmos-line);
  padding: clamp(5px, 1.2vh, 8px) 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: clamp(11px, 2.8vw, 14px);
  text-align: center;
}
.atmos-sys-runtime-cta[data-action="advance"],
.atmos-sys-runtime-cta[data-action="connectBLE"] {
  background: var(--atmos-fg);
  color: var(--atmos-bg);
}
/* Secondary status text — shown ONLY for the text-only stages with no primary
 * visualization (adapter / launch / result / select). It is toggled via .is-active
 * and hidden whenever a structured panel renders, so it never stacks beneath the
 * visualization and clip the cursor/labels. When shown it fills the body region. */
.atmos-sys-runtime-body {
  display: none;
  margin: 0;
  border: 1px solid var(--atmos-line);
  padding: clamp(10px, 3vh, 24px) 14px;
  white-space: pre-wrap;
  line-height: 1.6;
  text-transform: uppercase;
  font-size: clamp(11px, 2.8vw, 14px);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  color: var(--atmos-fg);
}
.atmos-sys-runtime-body.is-active { display: block; }
/* Observed workflow stage line (CALIBRATION / READY / SESSION / OUTPUT). It is
 * the REAL engine stage, not an ATMOS invention. Sits inline in the header meta. */
.atmos-sys-runtime-stage {
  margin: 0;
  font-size: clamp(10px, 2.4vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--atmos-dim);
}
.atmos-sys-runtime-stage[data-stage="ready"],
.atmos-sys-runtime-stage[data-stage="session"] { color: var(--atmos-fg); }

/* The guided rhythm-generator sub-box reuses .atmos-sys-rg-box; it is only
 * displayed for guided technique sessions (toggled via .is-active). */
.atmos-sys-runtime-rg { display: none; flex: 1; }
.atmos-sys-runtime-rg.is-active { display: flex; }

/* FREE-session SIGNAL RAIL — a state-machine cursor on a hold/pause-centered
 * rail. NOT a pacing meter: the cursor reflects the OBSERVED breath phase only
 * (inhale -> right, hold/pause -> center, exhale -> left). Shown only for free
 * sessions in the live SESSION stage (toggled via .is-active). Monochrome. */
.atmos-sys-runtime-rail { display: none; flex: 1; }
.atmos-sys-runtime-rail.is-active { display: flex; }
/* NOTE: the shared box selectors below MUST NOT set `display`. These boxes carry
 * two classes (e.g. `atmos-sys-rail-box atmos-sys-runtime-rail`); the runtime
 * class owns visibility via `display:none` + `.is-active { display:flex }`. If the
 * box selector also set `display:flex`, equal specificity + later source order
 * would override the toggle and the panel would ALWAYS show — stacking every stage
 * (calibration + rail + eval + rhythm + resonance) on screen at once. */
.atmos-sys-rail-box {
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vh, 16px);
  border: 1px solid var(--atmos-line);
  padding: clamp(8px, 2vh, 22px) 14px;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
}
.atmos-sys-rail-label {
  margin: 0;
  font-size: clamp(13px, 3.4vw, 17px);
  letter-spacing: 0.22em;
  color: var(--atmos-dim);
}
/* The rail track itself — monospace cursor line; never wraps, scales to fit. */
.atmos-sys-rail-track {
  margin: 0;
  width: 100%;
  white-space: pre;
  overflow: hidden;
  font-size: clamp(16px, 5vw, 30px);
  letter-spacing: 0.18em;
  line-height: 1.2;
  font-weight: bold;
}
.atmos-sys-rail-legend {
  margin: 0;
  font-size: clamp(10px, 2.6vw, 13px);
  letter-spacing: 0.1em;
  color: var(--atmos-dim);
}
/* The observed state label (LISTENING / INHALE / EXHALE / HOLD). */
.atmos-sys-rail-state {
  margin: 0;
  font-size: clamp(20px, 5.5vw, 32px);
  font-weight: bold;
  letter-spacing: 0.08em;
}

/* REACTIVE CALIBRATION box — mirrors the engine's live mic level + detection +
 * status text during CALIBRATING / READY. It REACTS: the meter bar and detection
 * label move with the observed signal, so calibration is never frozen. The same
 * monochrome BIOS language as the rail box. */
.atmos-sys-runtime-cal { display: none; flex: 1; }
.atmos-sys-runtime-cal.is-active { display: flex; }
/* Like .atmos-sys-rail-box, these MUST NOT set `display` — the runtime toggle
 * class (.atmos-sys-runtime-cal/-eval/-res) owns visibility. See the note above. */
.atmos-sys-cal-box,
.atmos-sys-eval-box,
.atmos-sys-res-box {
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vh, 14px);
  border: 1px solid var(--atmos-line);
  padding: clamp(8px, 2vh, 22px) 14px;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
}
.atmos-sys-cal-label,
.atmos-sys-eval-label,
.atmos-sys-res-label {
  margin: 0;
  font-size: clamp(13px, 3.4vw, 17px);
  letter-spacing: 0.2em;
  color: var(--atmos-dim);
}
/* The live level meter — monospace bar, never wraps. */
.atmos-sys-cal-meter,
.atmos-sys-res-progress {
  margin: 0;
  width: 100%;
  white-space: pre;
  overflow: hidden;
  font-size: clamp(14px, 4vw, 24px);
  letter-spacing: 0.12em;
  line-height: 1.2;
  font-weight: bold;
}
.atmos-sys-cal-detection {
  margin: 0;
  font-size: clamp(18px, 5vw, 30px);
  font-weight: bold;
  letter-spacing: 0.08em;
}
.atmos-sys-cal-sub {
  margin: 0;
  font-size: clamp(11px, 2.8vw, 14px);
  letter-spacing: 0.1em;
  color: var(--atmos-dim);
}
/* When the CALIBRATION COMPLETE gate is open, the label reads as a ready state. */
.atmos-sys-runtime-cal[data-ready="1"] .atmos-sys-cal-label { color: var(--atmos-fg); }

/* EVALUATION box — the intermediate analysis output between the FREE and GUIDED
 * parts. Output only; it names what comes next in the real flow. */
.atmos-sys-runtime-eval { display: none; flex: 1; }
.atmos-sys-runtime-eval.is-active { display: flex; }
.atmos-sys-eval-title {
  margin: 0;
  font-size: clamp(18px, 5vw, 28px);
  font-weight: bold;
  letter-spacing: 0.08em;
}
/* The observed analysis summary (ratio / note) — the USEFUL output of the free
 * part. Monospace, capped, scrolls internally so a long note never clips. */
.atmos-sys-eval-summary {
  margin: 0;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center;
  font-size: clamp(11px, 2.8vw, 14px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--atmos-fg);
  overflow-y: auto;
  min-height: 0;
}
.atmos-sys-eval-next {
  margin: 0;
  font-size: clamp(11px, 2.8vw, 14px);
  letter-spacing: 0.1em;
  color: var(--atmos-dim);
}

/* RESONANCE box — BLE/HRV ONLY. Distinct from rail and rhythm: no paced-breath
 * track, no Signal Rail. Pre-connect it shows the CONNECT BLE gate; once a strap
 * is connected it shows the frequency sweep progress + measured coherence state. */
.atmos-sys-runtime-res { display: none; flex: 1; }
.atmos-sys-runtime-res.is-active { display: flex; }
.atmos-sys-res-freq {
  margin: 0;
  font-size: clamp(12px, 3vw, 16px);
  letter-spacing: 0.12em;
  color: var(--atmos-fg);
}
.atmos-sys-res-state {
  margin: 0;
  font-size: clamp(18px, 5.5vw, 32px);
  font-weight: bold;
  letter-spacing: 0.08em;
}

/* COMMAND prompt. On narrow mobile viewports the caret + input + [ ENTER ]
   button cannot share one line, so the row WRAPS: the button drops to its own
   line (full width) instead of overflowing the viewport edge. flex-wrap +
   min-width:0 on the input is the classic fix for the flexbox overflow trap. */
.atmos-sys-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--atmos-line);
  padding: 10px 0 0;
}
.atmos-sys-caret { color: var(--atmos-fg); flex: 0 0 auto; }
.atmos-sys-input {
  flex: 1 1 120px;
  min-width: 0;
  background: var(--atmos-bg);
  color: var(--atmos-fg);
  border: none;
  font-family: var(--atmos-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.atmos-sys-input::placeholder { color: var(--atmos-dim); }
/* Visible SUBMIT button — keyboard-free command execution on mobile. Styled as
   part of the shell (square, bordered, monochrome), never a rounded app CTA.
   Min 44px touch target for reliable tapping. Same handler as keyboard Enter. */
.atmos-sys-enter {
  flex: 0 1 auto;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  margin-left: auto;
  background: var(--atmos-bg);
  color: var(--atmos-fg);
  border: 1px solid var(--atmos-line);
  border-radius: 0;
  padding: 8px 12px;
  font-family: var(--atmos-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.atmos-sys-enter:hover,
.atmos-sys-enter:active,
.atmos-sys-enter:focus-visible {
  background: var(--atmos-fg);
  color: var(--atmos-bg);
  outline: none;
}

/* CONTROLS hint line — always visible, canonical controls. */
.atmos-sys-controls {
  margin: 0;
  padding: 2px 0 4px;
  color: var(--atmos-dim);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}