/* ============================================================
   CRAZY — ui.css
   The input line, the HUD (gear + instability), and the settings
   panel. Phosphor-styled, theme-variable driven, in-fiction where
   it can be, honestly out of it where it must (settings).
   ============================================================ */

/* ---- The input line, pinned under the transcript ---- */
.inputline {
  margin-top: 10px;
  padding-top: 4px; /* owner 2026-06-22: tuck the field up close under the divider (mobile reclaims the space the native iOS keyboard bar eats) */
  border-top: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  display: flex;
  align-items: center; /* owner 2026-06-22: the ">" + field + Send key sit on one centered line */
  gap: 8px;
  flex: 0 0 auto;
}
.inputline__prompt {
  color: var(--voice-you);
  opacity: 0.85;
  user-select: none;
  line-height: 1.5;
  align-self: center; /* owner 2026-06-22: center the ">" against the field box (was c3 flex-start "line one") */
}
/* c3: the field is now an auto-growing <textarea> (wraps instead of scrolling
   sideways). Height is set by terminal.autosize(); resize off; overflow handled. */
.inputline__field {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--voice-you);
  caret-color: var(--fg);
  font: inherit;
  letter-spacing: inherit;
  text-shadow: 0 0 calc(4px * var(--glow)) var(--glow-color);
  resize: none;
  box-sizing: border-box;          /* c3 (Blow's gate): without it scrollHeight ratchets up every keystroke */
  white-space: pre-wrap;           /* c3: wrap mechanism */
  overflow-wrap: break-word;       /* c3: break a long unbroken token instead of overflowing */
  overflow-y: hidden;
  overflow-x: hidden;
  line-height: 1.5;
  max-height: 40dvh; /* c3: dvh (not vh) shrinks with the mobile keyboard; JS caps at ~30% of the transcript */
  padding: 0;
  display: block;
}
.inputline__field::placeholder {
  color: color-mix(in srgb, var(--fg) 40%, transparent);
}
.inputline__field:disabled {
  opacity: 0.5;
}
/* S2 (stress council) — the live-field ghost: a "letter you didn't type" blinks once
   over the field, then clears. It lives OUTSIDE the textarea (the real value is never
   touched). pointer-events:none so it never blocks input/focus/Esc; an opacity flash,
   NEVER a luminance flip (no screen flash); killed under reduced-motion / safe-mode
   (and fieldGhost() already no-ops there — this is belt-and-suspenders). */
.inputline { position: relative; }
.inputline__ghost {
  position: absolute;
  left: 1.7em;
  bottom: 0.45em;
  pointer-events: none;
  color: var(--fg);
  opacity: 0;
  text-shadow: 0 0 calc(5px * var(--glow)) var(--glow-color);
  transition: opacity 90ms steps(2, end);
}
.inputline__ghost.show { opacity: 0.85; transition: none; }
@media (prefers-reduced-motion: reduce) { .inputline__ghost { display: none; } }
body.safe-mode .inputline__ghost { display: none; }
/* P1-E (enact-on-narrate): the field SURFACE effects fire WITH the inputfield line that
   narrates them, so "the box took a breath" is TRUE, not just reported. Transform ONLY
   (no luminance flip, no screen flash — the <3Hz budget is untouched); they transform the
   .inputline CONTAINER, so they NEVER read or write the textarea value (the player's real
   text + the deterministic input to step() stay byte-intact). Killed under reduced-motion /
   safe-mode (and effects.fieldSurface() already no-ops there — belt-and-suspenders). */
.inputline.field-breath { animation: field-breath 200ms ease-out 1; }
.inputline.field-lag { animation: field-lag 240ms ease-in-out 1; }
@keyframes field-breath { 0% { transform: scale(1); } 45% { transform: scale(1.012); } 100% { transform: scale(1); } }
@keyframes field-lag { 0% { transform: translateX(0); } 40% { transform: translateX(2px); } 72% { transform: translateX(-1px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .inputline.field-breath, .inputline.field-lag { animation: none; } }
body.safe-mode .inputline.field-breath, body.safe-mode .inputline.field-lag { animation: none; }
/* c2: the diegetic Send key — a steady phosphor return-glyph. Console hardware,
   never a chat bubble: flat, never animates (the governor stays moot). */
.inputline__send {
  flex: 0 0 auto;
  /* owner 2026-06-22: a smaller Send cube (was 44x44). ~36px keeps it comfortably
     tappable while reclaiming width; the field gets the room. */
  min-width: 36px;
  min-height: 36px;
  padding: 0 2px;
  display: grid;
  place-items: center;
  color: var(--voice-you);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--voice-you) 32%, transparent);
  border-radius: 5px;
  font-size: 0.95em;
  line-height: 1;
  text-shadow: 0 0 calc(4px * var(--glow)) var(--glow-color);
}
.inputline__send:hover { border-color: var(--voice-you); }
.inputline__send:disabled { opacity: 0.4; }
.inputline--waiting .inputline__prompt::after {
  content: "…";
  animation: crazy-blink 0.9s steps(1) infinite;
}

/* ---- HUD: gear + instability meter, top-right of the screen ---- */
.hud {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.7;
  transition: opacity 0.25s;
}
.hud:hover { opacity: 1; }
.hud__meter {
  font-size: 0.66em;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  user-select: none;
  white-space: nowrap;
}
.hud__meter b { color: var(--fg); font-weight: 400; }
.hud__btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  border-radius: 4px;
  color: var(--fg);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  font-size: 1em;
  line-height: 1;
}
.hud__btn:hover { border-color: var(--fg); box-shadow: 0 0 8px var(--glow-color); }

/* ---- The settings panel overlay ---- */
.panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
}
.panel--open { display: flex; }
.panel__card {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #060c10, #03070b);
  border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  border-radius: 10px;
  box-shadow: 0 0 40px color-mix(in srgb, var(--glow-color) 30%, transparent), inset 0 0 30px rgba(0, 0, 0, 0.6);
  padding: 22px 22px 18px;
  color: var(--fg);
}
.panel__close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.5em;
  line-height: 1;
  color: var(--fg-dim);
}
.panel__close:hover { color: var(--accent-magenta); }
.panel__title {
  font-size: 1.15em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--fg-bright);
}
.panel__section {
  margin: 16px 0;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--fg) 18%, transparent);
}
.panel__h3 {
  font-size: 0.82em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 10px;
}
.panel__foot {
  margin-top: 14px;
  font-size: 0.74em;
  color: var(--fg-dim);
  line-height: 1.5;
}

/* settings rows */
.set-field { margin-bottom: 10px; }
.set-field__label {
  display: block;
  font-size: 0.72em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 4px;
}
.set-input, .set-select {
  width: 100%;
  background: #02060a;
  border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
  border-radius: 5px;
  color: var(--fg);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.9em;
}
.set-input:focus, .set-select:focus { border-color: var(--accent-cyan); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-cyan) 40%, transparent); }
/* Native file input has a wide intrinsic size that won't shrink — clamp it so
   the Crazy-import control never overflows the card on a narrow phone. */
.set-field input[type="file"] { max-width: 100%; box-sizing: border-box; font-size: 0.8em; color: var(--fg-dim); }
.set-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
  cursor: pointer;
}
.set-row input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent-magenta); flex: 0 0 auto; }
.set-row__label { display: flex; flex-direction: column; gap: 2px; }
.set-row__title { font-size: 0.92em; color: var(--fg); }
.set-row__note { font-size: 0.74em; color: var(--fg-dim); line-height: 1.45; }
.set-row__note a { color: var(--accent-cyan); text-decoration: underline; }
.set-test { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; min-width: 0; }
.set-btn {
  background: color-mix(in srgb, var(--accent-cyan) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 50%, transparent);
  border-radius: 5px;
  color: var(--accent-cyan);
  padding: 7px 14px;
  font-size: 0.82em;
  letter-spacing: 0.06em;
}
.set-btn:hover { background: color-mix(in srgb, var(--accent-cyan) 24%, transparent); }
.set-btn--danger { color: var(--accent-red); border-color: color-mix(in srgb, var(--accent-red) 50%, transparent); background: color-mix(in srgb, var(--accent-red) 12%, transparent); }
.set-test-result { font-size: 0.78em; color: var(--fg-dim); overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.set-test-result.ok { color: #6bf0a0; }
.set-test-result.err { color: var(--accent-red); }

/* ---- "Your history": the out-of-fiction afterword. Elegiac register — quiet,
   spaced, italic portrait — so it reads as an epitaph, not a settings row. ---- */
.set-history { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; }
.set-history__portrait { font-size: 1.04em; font-style: italic; line-height: 1.55; color: var(--fg); opacity: 0.94; }
.set-history__line { font-size: 0.86em; color: var(--fg-dim); line-height: 1.5; }
.set-history__count { font-size: 0.82em; color: var(--fg-dim); opacity: 0.82; }
.set-history__drift { font-size: 0.82em; color: var(--fg-dim); opacity: 0.82; font-style: italic; }
.set-history__h { font-size: 0.7em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); opacity: 0.7; margin-top: 6px; }
.set-history__axes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.set-history__life { font-size: 0.84em; color: var(--fg-dim); font-style: italic; line-height: 1.5; }
.set-history__end { font-size: 0.84em; color: var(--fg-dim); line-height: 1.5; }
.set-history__more { align-self: flex-start; background: none; border: none; padding: 4px 0; margin-top: 2px; font: inherit; font-size: 0.8em; color: var(--accent-cyan); text-decoration: underline; cursor: pointer; }
.set-history__more:hover { color: var(--fg-bright); }

/* ---- The content note / title gate (shown before first contact) ---- */
.gate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: var(--pad);
  background: radial-gradient(120% 120% at 50% 40%, #06121a 0%, #01050a 70%, #000 100%);
}
.gate--hidden { display: none; }
.gate__logo {
  font-size: clamp(2.4rem, 12vw, 5rem);
  letter-spacing: 0.28em;
  color: var(--fg-bright);
  text-shadow: 0 0 18px var(--glow-color), 0 0 40px color-mix(in srgb, var(--accent-magenta) 40%, transparent);
}
.gate__tag { color: var(--fg-dim); max-width: 36ch; line-height: 1.6; font-size: 0.95em; }
.gate__note { color: color-mix(in srgb, var(--accent-amber) 80%, var(--fg)); max-width: 42ch; font-size: 0.8em; line-height: 1.6; }
.gate__btn {
  margin-top: 4px;
  padding: 12px 30px;
  border: 1px solid var(--fg);
  border-radius: 6px;
  color: var(--bg-deep);
  background: var(--fg);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.9em;
  box-shadow: 0 0 24px var(--glow-color);
}
.gate__btn:hover { box-shadow: 0 0 38px var(--glow-color); }
.gate__links { display: flex; gap: 18px; font-size: 0.76em; color: var(--fg-dim); }
.gate__links button { color: var(--accent-cyan); text-decoration: underline; }

/* ---- The safe-mode toast / stop offer ---- */
.toast {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  background: #03070b;
  border: 1px solid color-mix(in srgb, var(--accent-amber) 55%, transparent);
  border-radius: 8px;
  padding: 12px 16px;
  max-width: min(420px, 92%);
  text-align: center;
  font-size: 0.84em;
  color: var(--fg);
  box-shadow: 0 0 26px rgba(0, 0, 0, 0.7);
  display: none;
}
.toast--show { display: block; }
.toast__row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }

/* ---- The non-diegetic GROUNDING break (developer's plain voice) ---- */
.ground {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #05080b;
}
.ground__card {
  width: min(540px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  /* deliberately NOT phosphor — plain, calm, real. */
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: #dfe7ea;
  background: #0d1316;
  border: 1px solid #29363c;
  border-radius: 10px;
  padding: 26px 24px;
  line-height: 1.62;
  text-shadow: none;
}
.ground__line { margin: 0 0 12px; font-size: 1rem; }
.ground__line a { color: #7fd4ff; text-decoration: underline; }
.ground__row { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.ground__row .set-btn { font-family: inherit; }
body.grounding .crt { filter: brightness(0.25); }

/* ---- The quiet end card ---- */
.endcard {
  margin: 26px auto 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.endcard__label {
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg);
  font-size: 0.92em;
  opacity: 0.9;
}

/* ---- FRACTURE: the single sanctioned cut-to-black (one-shot, sub-3Hz) ---- */
.to-black-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease-in;
}
.crt__screen.to-black .to-black-layer { opacity: 1; }

@media (max-width: 480px) {
  .panel__card { padding: 18px 16px; }
  .hud__meter { display: none; }
}

/* ---- Touch devices: meet the ~44px tap-target minimum and reveal the
   hover-only affordances that never trigger on touch. ---- */
@media (pointer: coarse) {
  .hud { opacity: 1; }
  .hud__btn { width: 44px; height: 44px; }
  .gate__links button { padding: 8px 4px; min-height: 44px; }
  .set-row input[type="checkbox"] { width: 22px; height: 22px; }
  /* PASS2-F1 (Phase-5 compatibility) — the .set-btn (settings, the endgame keep/export/let-go,
     the GROUNDING-break + Esc safe-mode toast buttons) was ~35px on touch; lift to the 44px floor. */
  .set-btn { min-height: 44px; }
}
@media (hover: none) {
  .hud { opacity: 1; }
}

/* ============================================================
   ACCESSIBILITY (QA gauntlet fixes)
   ============================================================ */

/* Visible keyboard focus everywhere (WCAG 2.4.7) — reset.css clears
   the default outline, so restore it for keyboard users only. */
:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}
.gate__btn:focus-visible,
.hud__btn:focus-visible { outline-offset: 3px; }
.ground :focus-visible { outline: 2px solid #7fd4ff; outline-offset: 2px; }

/* safe-mode / reduced-motion must still EVERY motion — incl. the caret
   blink and the waiting "…" indicator (reduced-motion already stops the
   caret via crt.css; cover safe-mode + the waiting dots here). */
body.safe-mode .cursor,
body.safe-mode .fray-cursor,
body.safe-mode .inputline--waiting .inputline__prompt::after {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .inputline--waiting .inputline__prompt::after { animation: none !important; }
}