/* css/opening.css — the opening (diagnostic) screen, made serious.
   One dark navy ground, a quiet glass panel, a serif wordmark, one thin
   progress hairline, a plain ledger of checks and one line of result.
   Uses only the app's own tokens (--bg, --text, --accent, --glow-rgb,
   --font-display) so every edition carries through. Removed on the owner's
   word (26 Sep 2026): the perspective grid floor and its drift, the horizon
   line, the scanlines, the sweep, the four HUD corner brackets and their
   telemetry captions, the panel's corner brackets, the pulsing mark, the
   typewriter caret, the segmented chip bar and its percentage, the LEDs,
   the shimmer on Enter and the glow on the result line. The markup for
   those still exists (opening.js writes into it); it is simply not drawn.
   Phone-first: correct at 375×812, no horizontal scroll, 44px targets,
   safe-area insets; desktop is the same layout, wider. */

#view-opening.opening-screen {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 12%, rgba(var(--glow-rgb), 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-sunken, var(--bg)) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  padding: calc(18px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  text-align: center;
  isolation: isolate;
}

/* ---------- background and HUD furniture: retired, never drawn ---------- */

.opening-bg,
.opening-bg-grid,
.opening-bg-horizon,
.opening-bg-scanlines,
.opening-bg-sweep,
.opening-hud,
.opening-hud-corner,
.opening-hud-label {
  display: none !important;
  animation: none !important;
}

/* ---------- mute / speaker toggle ---------- */

.opening-mute-btn {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 5;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(var(--glow-rgb), 0.06);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.opening-mute-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.opening-mute-btn .opening-mute-icon { width: 20px; height: 20px; display: block; }
.opening-mute-btn .opening-mute-icon .bars { transition: opacity 0.15s ease; }
.opening-mute-btn.is-muted { color: var(--text-faint); border-color: var(--border); }
.opening-mute-btn.is-muted .opening-mute-icon .bars { opacity: 0.25; }
.opening-mute-btn.is-muted .opening-mute-icon .slash { opacity: 1; }
.opening-mute-btn .opening-mute-icon .slash { opacity: 0; }

/* ---------- the panel: quiet glass, one hairline, no brackets ---------- */

.opening-play {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(420px, 100%);
  max-width: 92vw;
  padding: 32px 24px 26px;
  border-radius: 12px;
  border: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.16);
  background: rgba(var(--kit-bg-elevated-rgb, 13, 31, 71), 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px rgba(2, 8, 30, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.opening-play::before,
.opening-play::after { content: none; }

.opening-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.92;
}

.opening-wordmark {
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 34px);
  font-weight: 500;
  letter-spacing: 0.02em;
  min-height: 1.3em;
  display: inline-flex;
  align-items: baseline;
}
.opening-wordmark .brand-word-ink { color: var(--text); }
.opening-wordmark .brand-word-accent { color: var(--accent); }
/* the typing caret is not drawn: the name arrives as a whole */
.opening-caret { display: none !important; animation: none !important; }

.opening-chip {
  display: inline-flex;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.22);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-items: center;
}

/* ---------- progress: one thin hairline, no segments, no number ----------
   opening.js still builds the segments into #opening-seg-track and lights
   them in order; they are drawn flush, one pixel tall, so the row reads as
   a single filling hairline. The percentage is not shown. */

.opening-progress {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px 0;
}
.opening-seg-track {
  flex: 1;
  display: flex;
  gap: 0;
  height: 1px;
  background: rgba(var(--kit-rim-rgb, 214, 203, 176), 0.14);
}
.opening-seg {
  flex: 1;
  min-width: 1px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background 0.4s ease;
}
.opening-seg.lit {
  background: rgba(var(--kit-rim-rgb, 214, 203, 176), 0.85);
  box-shadow: none;
  border-color: transparent;
}
.opening-pct { display: none !important; }
.opening-loader-track { display: none; }

/* ---------- the checks: a plain ledger, thin rules, no lights ---------- */

.opening-status-lines {
  list-style: none;
  margin: 0;
  padding: 2px 0 0;
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-faint);
  min-height: 172px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.opening-status-lines li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: 30px;
  padding: 6px 2px;
  border-bottom: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.09);
  opacity: 0;
  transform: none;
  transition: opacity 0.4s ease;
}
.opening-status-lines li:last-child { border-bottom: 0; }
.opening-status-lines li.shown { opacity: 1; transform: none; }
.opening-status-lines li .mark { width: 0.9em; flex: none; display: flex; align-items: center; }
/* the led is the visible mark: app.css's text tick (✓ / … / ✗ in ::before)
   is kept for screen readers only, so the state is never colour alone; drawn,
   it squeezed the led to a 0.3 px sliver beside it */
.opening-status-lines li .mark::before { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.opening-status-lines li .led { flex: none; }
.opening-status-lines li .led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
  display: inline-block;
  opacity: 0.55;
  box-shadow: none;
  animation: none;
}
.opening-status-lines li.pending .led { background: var(--text-faint); opacity: 0.55; animation: none; }
.opening-status-lines li.ok .led { background: var(--accent); opacity: 1; box-shadow: none; }
.opening-status-lines li.fail .led { background: var(--danger); opacity: 1; box-shadow: none; }
.opening-status-lines li .label { color: var(--text-muted); white-space: nowrap; }
.opening-status-lines li .detail {
  margin-left: auto;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  font-variant-numeric: tabular-nums;
}
.opening-status-lines li.fail .label,
.opening-status-lines li.fail .detail { color: var(--danger); }

/* ---------- result + Enter ---------- */

.opening-result {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 4px;
  width: 100%;
  animation: opening-rise 0.4s ease both;
}
@keyframes opening-rise {
  from { opacity: 0; }
  to { opacity: 1; }
}

.opening-result-text {
  margin: 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  text-shadow: none;
}
.opening-result-text.fail { color: var(--danger); text-shadow: none; }

.opening-result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.opening-enter-btn {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  min-width: 176px;
  padding: 0 34px;
  border: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.55);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.opening-enter-btn::after { content: none; animation: none; }
.opening-enter-btn:hover,
.opening-enter-btn:focus-visible {
  background: var(--kit-seal, var(--accent-2));
  border-color: var(--kit-seal, var(--accent-2));
  color: var(--accent-contrast);
}
.opening-enter-btn:focus-visible { outline: 2px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.7); outline-offset: 3px; }
.opening-retry-btn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font: 600 13px/1 var(--font-mono);
  cursor: pointer;
}
.opening-retry-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

/* ---------- "Fix it with the model" ---------- */

.opening-fix-btn {
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--glow-rgb), 0.4);
  background: rgba(var(--glow-rgb), 0.08);
  color: var(--accent-strong);
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.opening-fix-btn:disabled { opacity: 0.55; cursor: default; }
.opening-fix-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

.opening-doctor {
  width: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.opening-doctor-head {
  margin: 0;
  font: 700 10.5px/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.opening-doctor-head.fail { color: var(--danger); }

.opening-doctor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.opening-doctor-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid rgba(var(--glow-rgb), 0.14);
  background: rgba(var(--glow-rgb), 0.03);
}
.opening-doctor-item-ok { border-color: rgba(var(--glow-rgb), 0.4); }
.opening-doctor-item-fail { border-color: rgba(var(--danger-rgb, 180, 35, 24), 0.5); }

.opening-doctor-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.opening-doctor-check {
  font: 700 11px/1.3 var(--font-mono);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.opening-doctor-explain {
  font: 400 12px/1.4 var(--font-sans, var(--font-mono));
  color: var(--text-muted);
}
.opening-doctor-repair {
  font: 500 10.5px/1.3 var(--font-mono);
  color: var(--text-faint);
}

.opening-doctor-apply {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.5);
  background: transparent;
  color: var(--text);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.opening-doctor-apply:disabled {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-faint);
  cursor: default;
}
.opening-doctor-apply:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

/* ---------- reduced motion: everything static ---------- */

@media (prefers-reduced-motion: reduce) {
  .opening-bg-grid,
  .opening-bg-sweep,
  .opening-mark,
  .opening-caret,
  .opening-status-lines li,
  .opening-status-lines li.pending .led,
  .opening-enter-btn::after,
  .opening-result {
    animation: none !important;
    transition: none !important;
  }
  .opening-status-lines li { opacity: 1; transform: none; }
  .opening-enter-btn::after { display: none; }
}

/* ---------- phone-first sizing ---------- */

@media (max-width: 480px) {
  .opening-play {
    width: 100%;
    max-width: 100%;
    padding: 22px 16px 18px;
    gap: 14px;
  }
  .opening-hud-label { font-size: 8.5px; }
  .opening-hud-label.tl, .opening-hud-label.bl { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .opening-status-lines { min-height: 160px; font-size: 11px; padding: 9px 10px; }
  .opening-status-lines li .detail { max-width: 42%; }
  .opening-mute-btn { width: 44px; height: 44px; }
  .opening-doctor-item { flex-direction: column; align-items: stretch; }
  .opening-doctor-apply { width: 100%; }
  .opening-fix-btn { width: 100%; }
}

@media (min-width: 900px) {
  .opening-play { width: 460px; padding: 34px 30px 28px; }
  .opening-bg-grid { height: 70%; }
}