/* ---- Debug instrument -----------------------------------------------------
   Dev-only, and deliberately split out of app.css: none of this ships to a
   real device. It is fixed OUTSIDE #stage so it can never change the 600x600
   square's layout, scale, or D-pad focus ring, and the whole file is inert
   unless <body> carries .debug.
   -------------------------------------------------------------------------- */

  /* ── Debug panel ──────────────────────────────────────────────────────────
     A dev-only instrument, deliberately OUTSIDE #stage: the stage is a literal
     600x600 render of the glasses and nothing here may change its layout, its
     scale, or its D-pad focus ring. Fixed to the left edge, collapsible, and
     never present on the real device. */
  #dbg {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
    width: 340px; display: flex; flex-direction: column;
    background: #0b0f14; border-right: 1px solid #1e2733;
    font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
    transition: transform .18s ease;
  }
  #dbg.collapsed { transform: translateX(-340px); }

  #dbg .dbg-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid #1e2733; flex: none;
    color: var(--dim); text-transform: uppercase; letter-spacing: .1em; font-size: 10px;
  }
  #dbg .dbg-head .spacer { margin-left: auto; }
  #dbg .dbg-state { color: var(--accent); font-weight: 700; letter-spacing: .06em; }
  #dbg .dbg-state.idle { color: var(--dim); }
  #dbg .dbg-state.error { color: var(--hot); }

  #dbg button {
    background: transparent; border: 1px solid #2a3542; color: var(--dim);
    border-radius: 5px; padding: 2px 7px; font: inherit; cursor: pointer;
  }
  #dbg button:hover { color: var(--text); border-color: #3d4b5c; }

  /* The mode pill is the one control that spends money, so it reads as a state,
     not a button: green when it's free, red when every sentence bills. */
  #dbgMode { font-weight: 700; letter-spacing: .1em; padding: 2px 9px; }
  #dbgMode.mode-demo { color: var(--accent); border-color: #2f6b52; }
  #dbgMode.mode-live { color: var(--hot); border-color: #6b2f2f; }
  /* Lit only while an engine is forced, so "auto" stays visually quiet — the
     button is a switch you went looking for, not a thing demanding attention. */
  #dbgEngine.forced { color: #ff8fd0; border-color: #6b2f5c; }
  #dbgMode:hover { color: var(--text); }

  /* ── Mic scope ─────────────────────────────────────────────────────────────
     The log tells you what the recognizer decided; this tells you what the
     microphone is actually hearing, which is the thing you can't infer from
     text. Name is the track's own label — not what we asked for — so a browser
     that substitutes a device is visible immediately. */
  #dbgScope { flex: none; border-bottom: 1px solid #1e2733; padding: 7px 10px 8px; }
  #dbgScope .scope-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
    font-size: 10px; letter-spacing: .06em; color: var(--dim);
  }
  #dbgScope .scope-head .spacer { margin-left: auto; }
  #dbgScopeName {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px;
  }
  #dbgScope.live #dbgScopeName { color: #7cf5c0; }
  /* The number is the one thing you read mid-sentence, so it never reflows. */
  #dbgScopeDb { flex: none; font-variant-numeric: tabular-nums; color: #8b95a4; }
  #dbgScope.live #dbgScopeDb { color: #c3ccd8; }
  #dbgScopeCanvas {
    display: block; width: 100%; height: 32px;
    background: #070b0f; border: 1px solid #1e2733; border-radius: 4px;
  }

  #dbgLog { flex: 1; overflow-y: auto; padding: 6px 0; }
  #dbgLog .row {
    display: flex; gap: 8px; padding: 2px 10px;
    border-left: 2px solid transparent; word-break: break-word;
  }
  #dbgLog .row .t { color: #5c6472; flex: none; white-space: pre; }
  #dbgLog .row .m { color: #c3ccd8; }
  /* One colour per channel, so you can scan the log without reading it. */
  #dbgLog .row.mic   { border-left-color: #7cf5c0; }
  #dbgLog .row.mic .m { color: #7cf5c0; }
  #dbgLog .row.stt   { border-left-color: #6fa8ff; }
  #dbgLog .row.stt .m { color: #9cc4ff; }
  #dbgLog .row.api   { border-left-color: #d69bff; }
  #dbgLog .row.api .m { color: #d7b3ff; }
  #dbgLog .row.voice { border-left-color: #ffc46b; }
  #dbgLog .row.voice .m { color: #ffd79a; }
  #dbgLog .row.err   { border-left-color: #ff6b6b; }
  #dbgLog .row.err .m { color: #ff9a9a; }
  #dbgLog .row.rt    { border-left-color: #ff8fd0; }
  #dbgLog .row.rt .m { color: #ffb3e0; }
  #dbgLog .row.ui .m { color: #8b95a4; }

  /* The reopen tab, visible only while the panel is hidden. */
  #dbgTab {
    position: fixed; left: 0; top: 12px; z-index: 51;
    background: #0b0f14; border: 1px solid #1e2733; border-left: none;
    color: var(--dim); border-radius: 0 6px 6px 0; padding: 5px 9px;
    font: 11px ui-monospace, Menlo, monospace; cursor: pointer; display: none;
  }
  #dbg.collapsed + #dbgTab { display: block; }
  body:not(.debug) #dbg, body:not(.debug) #dbgTab { display: none; }

/* ---- Fake world behind the glass (?bg=1) -----------------------------------
   Same reason as the panel above: a test harness, not the product. The glasses
   are ADDITIVE, so every black pixel is really the street showing through --
   which is impossible to judge against a black laptop page. This paints a scene
   behind the square and drops the stage ground to transparent. B cycles it.
   -------------------------------------------------------------------------- */
  /* ?bg=1 — a fake street scene behind the stage. The glasses are ADDITIVE:
     every black pixel is really the world showing through. On a laptop that is
     impossible to judge against a black page, so this paints something behind
     the square and drops the stage ground to transparent. Test-harness only. */
  #scene { display: none; }
  body.has-bg #scene {
    display: block; position: fixed; inset: 0; z-index: 0;
    background: var(--scene) center/cover no-repeat;
    /* Blurred on purpose, and not only for looks: the wearer's eye is focused
       on the text plane, so the world behind it is genuinely out of focus.
       A pin-sharp photo makes the backdrop compete for attention and reads as
       a harder test than the display actually faces. The scale kills the soft
       transparent edge blur() leaves at the viewport rim. */
    filter: blur(3px);
    transform: scale(1.04);
  }
  body.has-bg #stage { background: transparent; z-index: 1; }
  /* Cycle the backdrop with B — a bright sky and a dark interior fail in
     opposite directions, and both need to be survivable. */
  #sceneTag {
    display: none; position: fixed; left: 10px; bottom: 10px; z-index: 3;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: rgba(0,0,0,.55); padding: 5px 9px; border-radius: 6px;
  }
  body.has-bg #sceneTag { display: block; }

/* The debug drawer is a desktop instrument - on a phone it covers the app. It
   is NOT hidden by width alone: the glasses are 600 wide and the desktop
   preview emulates that, and both still want the drawer. A touch screen this
   narrow is a phone. */
@media (max-width: 700px) and (max-aspect-ratio: 4/5) and (pointer: coarse) {
  #dbg, #dbgTab { display: none !important; }
}