/* Fiaba — one screen, one circle.
   Tokens first: every colour, font, radius and shadow is an --app-* custom taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build
   property, declared for both modes. Mode lives on <html data-app-mode>. */

:root {
  color-scheme: light;

  --app-paper: #fbf7f0;
  --app-card: #fffdf8;
  --app-ink: #1a1814;
  --app-ink-2: #57504a;
  --app-ink-3: #8d8478;
  --app-line: #e9e0d2;
  --app-line-soft: #f1eade;
  --app-accent: #b0492b;
  --app-accent-soft: #f0ddd3;
  --app-accent-ink: #8a3320;
  --app-ok: #5d7354;
  --app-warn: #b9862c;
  --app-dev: #241f1a;
  --app-dev-ink: #f4efe6;

  --app-orb-1: #f6c6ac;
  --app-orb-2: #d1744b;
  --app-orb-3: #a8432a;
  --app-orb-4: #8a3320;
  --app-orb-halo: rgba(176, 73, 43, 0.07);
  --app-orb-halo-2: rgba(176, 73, 43, 0.04);
  --app-orb-shadow: 0 22px 44px -22px rgba(150, 60, 30, 0.5);
  --app-wave: #c9855f;
  --app-me-bubble: #f0e7d8;
  --app-me-border: #e5d9c6;
  --app-me-ink: #5f574b;
  --app-shadow-sheet: 0 30px 60px -34px rgba(40, 25, 10, 0.55);
  --app-overlay: rgba(26, 24, 20, 0.28);

  --app-font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --app-font-sans: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --app-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */

  --app-radius: 16px;
  --app-radius-sm: 10px;
  --app-pill: 999px;
}

[data-app-mode='dark'] {
  color-scheme: dark;

  --app-paper: #14130f;
  --app-card: #1d1b16;
  --app-ink: #f2ece1;
  --app-ink-2: #b0a696;
  --app-ink-3: #837a6c;
  --app-line: #312d25;
  --app-line-soft: #262219;
  --app-accent: #e07c50;
  --app-accent-soft: #33231b;
  --app-accent-ink: #f0a780;
  --app-ok: #9ab288;
  --app-warn: #dfb268;
  --app-dev: #0d0c0a;
  --app-dev-ink: #f4efe6;

  --app-orb-1: #f0b696;
  --app-orb-2: #c9653c;
  --app-orb-3: #9c3d26;
  --app-orb-4: #7a2c1a;
  --app-orb-halo: rgba(224, 124, 80, 0.09);
  --app-orb-halo-2: rgba(224, 124, 80, 0.05);
  --app-orb-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.7);
  --app-wave: #c98a68;
  --app-me-bubble: #241f18;
  --app-me-border: #332c22;
  --app-me-ink: #cfc4b2;
  --app-shadow-sheet: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
  --app-overlay: rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--app-paper);
  color: var(--app-ink);
  font: 16px/1.5 var(--app-font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- frame --- */

.app {
  /* A height, not a min-height: the body clips its overflow, so an app taller
     than the screen would put its own bottom out of reach. With a definite
     height the stage's children shrink instead — which is what lets the
     transcript scroll inside itself once the conversation is long, and what
     keeps it clear of the fixed measurement card when that is open. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}

.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 20px 0;
  flex: 0 0 auto;
}

.wordmark {
  font: 400 21px/1 var(--app-font-serif);
  letter-spacing: -0.02em;
  color: var(--app-ink);
  user-select: none;
}
.wordmark .dot { color: var(--app-accent); }

.iconbtn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  width: 40px;
  height: 40px;
  border-radius: var(--app-pill);
  display: grid;
  place-items: center;
  color: var(--app-ink-3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.iconbtn:hover { color: var(--app-ink); background: var(--app-card); border-color: var(--app-line); }
.iconbtn:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.iconbtn svg { width: 18px; height: 18px; display: block; }

/* ----------------------------------------------------------------- orb --- */

.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 20px 28px;
}

.orbwrap {
  position: relative;
  width: min(74vw, 58vh, 360px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  --level: 0;
}

.rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.rings i {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--app-accent-soft);
  inset: 0;
  opacity: 0.75;
  transform: scale(0.82);
}
.rings i:nth-child(2) { inset: 9%; }
.rings i:nth-child(3) { inset: 18%; }

.orb {
  position: relative;
  appearance: none;
  border: none;
  padding: 0;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 32% 26%, var(--app-orb-1) 0%, var(--app-orb-2) 42%, var(--app-orb-3) 78%, var(--app-orb-4) 100%); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  box-shadow: /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
    0 0 0 12px var(--app-orb-halo),
    0 0 0 26px var(--app-orb-halo-2),
    var(--app-orb-shadow);
  transition: transform 0.25s ease, box-shadow 0.35s ease, filter 0.25s ease;
  will-change: transform;
}
.orb::after {
  /* a soft inner highlight so the sphere reads as a light source, not a disc */
  content: '';
  position: absolute;
  inset: 8% 12% 52% 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 70%); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  pointer-events: none;
}
.orb:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 14px; }

.wave {
  position: absolute;
  bottom: -2px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.wave i {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--app-wave);
  transform-origin: bottom;
}
.wave i:nth-child(1) { height: 8px; }
.wave i:nth-child(2) { height: 16px; }
.wave i:nth-child(3) { height: 24px; }
.wave i:nth-child(4) { height: 13px; }
.wave i:nth-child(5) { height: 20px; }
.wave i:nth-child(6) { height: 10px; }
.wave i:nth-child(7) { height: 15px; }

/* --- phases --- */

/* idle: a slow breath and a faint invitation to tap */
.app[data-phase='idle'] .orb { animation: breathe 4.2s ease-in-out infinite; }
.app[data-phase='idle'] .rings i { animation: invite 4.2s ease-in-out infinite; }
.app[data-phase='idle'] .rings i:nth-child(2) { animation-delay: 0.5s; }
.app[data-phase='idle'] .rings i:nth-child(3) { animation-delay: 1s; }

/* connecting: rings turn while the token and the socket come up */
.app[data-phase='connecting'] .orb { filter: saturate(0.75) brightness(0.94); animation: breathe 1.6s ease-in-out infinite; }
.app[data-phase='connecting'] .rings i { border-color: var(--app-accent); border-style: dashed; animation: spin 3.2s linear infinite; }
.app[data-phase='connecting'] .rings i:nth-child(2) { animation-duration: 4.6s; animation-direction: reverse; }
.app[data-phase='connecting'] .rings i:nth-child(3) { animation-duration: 6s; }

/* listening: the outer ring rides the learner's own volume */
.app[data-phase='listening'] .orb { transform: scale(calc(1 + var(--level) * 0.035)); }
.app[data-phase='listening'] .rings i:nth-child(1) { transform: scale(calc(0.9 + var(--level) * 0.16)); opacity: calc(0.35 + var(--level) * 0.6); }

/* speaking: she is talking */
.app[data-phase='speaking'] .orb { transform: scale(1.04); box-shadow: 0 0 0 16px var(--app-orb-halo), 0 0 0 34px var(--app-orb-halo-2), var(--app-orb-shadow); } /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
.app[data-phase='speaking'] .wave { opacity: 1; }
.app[data-phase='speaking'] .wave i { animation: eq 0.95s ease-in-out infinite; }
.app[data-phase='speaking'] .wave i:nth-child(1) { animation-delay: 0s; }
.app[data-phase='speaking'] .wave i:nth-child(2) { animation-delay: 0.11s; }
.app[data-phase='speaking'] .wave i:nth-child(3) { animation-delay: 0.22s; }
.app[data-phase='speaking'] .wave i:nth-child(4) { animation-delay: 0.33s; }
.app[data-phase='speaking'] .wave i:nth-child(5) { animation-delay: 0.44s; }
.app[data-phase='speaking'] .wave i:nth-child(6) { animation-delay: 0.55s; }
.app[data-phase='speaking'] .wave i:nth-child(7) { animation-delay: 0.66s; }

.app[data-phase='ended'] .orb,
.app[data-phase='error'] .orb { filter: saturate(0.5) brightness(0.9); animation: breathe 5s ease-in-out infinite; }
.app[data-phase='ended'] .orb { cursor: pointer; }

@keyframes breathe { 50% { transform: scale(1.045); } }
@keyframes invite { 0%, 100% { opacity: 0.15; transform: scale(0.86); } 50% { opacity: 0.85; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes eq { 50% { transform: scaleY(0.34); } }

@media (prefers-reduced-motion: reduce) {
  .orb, .rings i, .wave i { animation: none !important; }
  .app[data-phase='connecting'] .rings i { opacity: 0.9; }
}

/* ------------------------------------------------------- words on screen --- */

.statusline {
  margin: 0;
  max-width: 30ch;
  text-align: center;
  font: 400 14px/1.5 var(--app-font-sans);
  color: var(--app-ink-2);
}

.transcript {
  width: min(100%, 620px);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.transcript[hidden] { display: none; }

.thread {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-end;
  min-height: 0;
}

.sc-top {
  display: flex;
  justify-content: space-between;
  font: 500 10.5px/1 var(--app-font-mono); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  color: var(--app-ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 2px 4px;
}
.sc-top .rec { display: inline-flex; align-items: center; gap: 6px; color: var(--app-accent); }
.sc-top .rec i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.say {
  border-radius: 15px 15px 15px 4px;
  background: var(--app-card);
  border: 1px solid var(--app-line);
  padding: 10px 13px;
  font: 400 14.5px/1.45 var(--app-font-sans);
  color: var(--app-ink);
  max-width: 88%;
  white-space: pre-wrap;
}
.say.me {
  align-self: flex-end;
  border-radius: 15px 15px 4px 15px;
  background: var(--app-me-bubble);
  border-color: var(--app-me-border);
  color: var(--app-me-ink);
  font-size: 13.5px;
  margin-left: 30px;
}

/* ---------------------------------------------------------------- sheet --- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: var(--app-overlay);
  backdrop-filter: blur(2px);
  z-index: 40;
}
.sheet-backdrop[hidden] { display: none; }

.sheet {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--app-card);
  border-top: 1px solid var(--app-line); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  border-radius: 20px 20px 0 0;
  padding: 20px 20px max(22px, env(safe-area-inset-bottom));
  box-shadow: var(--app-shadow-sheet); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* The sheet is anchored to the bottom and holds four settings rows plus the
     actions. On a short screen — a 568px phone, or any phone in landscape — that
     is taller than the viewport, and without a ceiling the sheet's top, with its
     close button, goes off the top of the screen. It scrolls inside instead. */
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet[hidden] { display: none; }

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--app-line-soft); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
}
.sheet-head h2 {
  margin: 0;
  font: 400 20px/1.3 var(--app-font-serif);
  letter-spacing: -0.01em;
}

.sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--app-line-soft); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
}
.sheet-row b { display: block; font: 600 14.5px/1.4 var(--app-font-sans); }
.sheet-row .hint { display: block; font: 400 12.5px/1.45 var(--app-font-sans); color: var(--app-ink-3); margin-top: 3px; max-width: 34ch; }

.switch {
  appearance: none;
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  border-radius: var(--app-pill);
  border: 1px solid var(--app-line);
  background: var(--app-paper);
  cursor: pointer;
  position: relative;
  transition: background 0.18s, border-color 0.18s;
}
.switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--app-ink-3);
  transition: transform 0.18s ease, background 0.18s;
}
.switch[aria-checked='true'] { background: var(--app-accent-soft); border-color: var(--app-accent); }
.switch[aria-checked='true'] i { transform: translateX(20px); background: var(--app-accent); }
.switch:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }

.ghostbtn {
  appearance: none;
  border: 1px solid var(--app-line);
  background: var(--app-paper);
  border-radius: var(--app-radius-sm);
  padding: 8px 12px;
  font: 500 13px/1.2 var(--app-font-sans);
  color: var(--app-ink-2);
  cursor: pointer;
}
.ghostbtn:hover { color: var(--app-ink); border-color: var(--app-ink-3); }
.ghostbtn:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.ghostbtn.danger { color: var(--app-accent); border-color: var(--app-accent-soft); }

/* Two-state control: the voice is female or male, never a list. */
.voice-row { flex-wrap: wrap; row-gap: 10px; }
.segmented {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--app-line);
  border-radius: var(--app-pill);
  background: var(--app-paper);
  padding: 2px;
  gap: 2px;
}
.segbtn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--app-pill);
  padding: 6px 12px;
  font: 500 12.5px/1.2 var(--app-font-sans);
  color: var(--app-ink-3);
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.segbtn:hover { color: var(--app-ink); }
.segbtn[aria-checked='true'] {
  background: var(--app-accent-soft);
  border-color: var(--app-accent);
  color: var(--app-accent-ink);
}
.segbtn:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 1px; }

.sheet-actions { display: flex; gap: 8px; padding-top: 16px; }
.sheet-actions .ghostbtn { flex: 1; padding: 11px 12px; }

.fine {
  margin: 14px 0 0;
  font: 400 11.5px/1.5 var(--app-font-sans);
  color: var(--app-ink-3);
}

/* --------------------------------------------------------------- paywall --- */
/* The trial is over: one card, centred, over the same backdrop the sheet uses.
   It is the only place in the app with money on it, so it is deliberately
   plain — the price, the terms, one button — and it takes its colours, radii
   and shadow from the same tokens as everything else. */

.paywall {
  position: fixed;
  z-index: 60;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(430px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 20px;
  background: var(--app-card);
  border: 1px solid var(--app-line); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sheet); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
}
.paywall[hidden] { display: none; }

.paywall__title {
  margin: 0;
  font: 400 22px/1.25 var(--app-font-serif);
  letter-spacing: -0.01em;
}
.paywall__body {
  margin: 0;
  font: 400 14px/1.45 var(--app-font-sans);
  color: var(--app-ink-2);
}
.paywall__price {
  margin: 4px 0 0;
  font: 800 26px/1.1 var(--app-font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
}
.paywall__alt {
  display: block;
  margin-top: 4px;
  font: 400 13px/1.4 var(--app-font-sans);
  letter-spacing: 0;
  color: var(--app-ink-3);
}
.paywall__terms {
  margin: 0;
  font: 400 13px/1.45 var(--app-font-sans);
  color: var(--app-ink-3);
}
.paywall__buy {
  appearance: none;
  margin-top: 4px;
  border: 1px solid var(--app-accent);
  background: var(--app-accent);
  color: var(--app-paper);
  border-radius: var(--app-radius-sm);
  padding: 12px 14px;
  font: 600 14px/1.2 var(--app-font-sans);
  cursor: pointer;
}
.paywall__buy:hover { background: color-mix(in srgb, var(--app-accent) 88%, var(--app-ink)); }
.paywall__buy:active { transform: scale(0.99); }
.paywall__buy:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.paywall__note {
  margin: 0;
  font: 400 12.5px/1.45 var(--app-font-sans);
  color: var(--app-accent-ink);
}
.paywall__note[hidden] { display: none; }
.paywall__close { align-self: flex-start; }

/* ---------------------------------------------------------------- debug --- */

.debug {
  position: fixed;
  z-index: 30;
  top: 10px;
  right: 10px;
  width: 268px;
  display: flex;
  flex-direction: column;
  /* The card now carries the test controls as well as the measurements, so it
     scrolls rather than running off the bottom of a short viewport. */
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--app-dev);
  color: var(--app-dev-ink);
  border-radius: var(--app-radius-sm);
  padding: 12px 13px;
  font: 400 11px/1.6 var(--app-font-mono); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  box-shadow: var(--app-shadow-sheet); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  /* read-only, never between a thumb and a control, and never see-through:
     only the control panel below re-enables pointer events for itself */
  opacity: 1;
  pointer-events: none;
}
.debug[hidden] { display: none; }
.debug h3 {
  margin: 0 0 8px;
  font: 600 9.5px/1 var(--app-font-mono); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b9ac9a;
}
.debug dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.debug dt { color: #b9ac9a; }
.debug dd { margin: 0; text-align: right; color: var(--app-dev-ink); font-variant-numeric: tabular-nums; }
.debug dd.good { color: #9ec48e; }
.debug dd.hot { color: #e79777; }
.debug .note { margin: 8px 0 0; color: #8d8272; font-size: 10px; line-height: 1.5; }
.debug .note.short { display: none; }
.debug .log { margin: 8px 0 0; color: #cfc3b1; font-size: 10px; white-space: pre-wrap; height: 46px; overflow: hidden; }

/* ---- the test controls (?debug=1 only) ---- */
/* The only interactive part of the card, and it re-enables pointer events for
   itself: the measurements above stay untouchable. Colours are literal because
   this card is its own dark surface in both modes (see .debug). */
.debug .dev-panel[hidden] { display: none; }
.debug .dev-panel {
  pointer-events: auto;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #3a342c; /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
}
.debug .dev-panel h3 { margin-bottom: 8px; }
.debug .dev-ctl { margin: 0 0 9px; }
.debug .dev-ctl > b {
  display: block;
  font: 600 9.5px/1.4 var(--app-font-mono); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b9ac9a;
}
.debug .dev-ctl .hint { display: block; color: #8d8272; font-size: 9.5px; line-height: 1.4; }
.debug .dev-choices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.debug .dev-choice {
  padding: 5px 8px;
  font: 500 10.5px/1.2 var(--app-font-mono); /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  background: #1b1813;
  color: var(--app-dev-ink);
  border-color: #3a342c;
}
.debug .dev-choice:hover { color: #fff; border-color: #6b6055; }
.debug .dev-choice[aria-pressed='true'] { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }
.debug .dev-g { color: #8d8272; font-size: 9px; }
.debug .dev-choice[aria-pressed='true'] .dev-g { color: #f6ded4; }
.debug .dev-choice:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.debug .dev-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.debug .dev-line > b { margin: 0; }
.debug .dev-latency { color: var(--app-dev-ink); font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.debug .switch { background: #1b1813; border-color: #3a342c; }
.debug .switch i { background: #6b6055; }
.debug .switch[aria-checked='true'] { background: var(--app-accent); border-color: var(--app-accent); }
.debug .switch[aria-checked='true'] i { background: #fff; }

/* ------------------------------------------------------------ wide view --- */

@media (min-width: 900px) {
  .brandbar { padding: 26px 34px 0; }
  .stage { padding-bottom: 46px; gap: 22px; }
  .orbwrap { width: min(42vw, 46vh, 400px); }
  .sheet {
    left: 50%;
    right: auto;
    bottom: 50%;
    transform: translate(-50%, 50%);
    width: 460px;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-line);
    padding: 22px 22px 20px;
  }
  .transcript { width: min(100%, 660px); }
}

@media (max-width: 420px) {
  .wordmark { font-size: 19px; }
  .stage { padding-left: 16px; padding-right: 16px; }
  .debug { width: calc(100vw - 20px); font-size: 10.5px; }
}

/* On a telephone the corner belongs to the gear, so the measurements sit at the
   foot of the screen instead, where nothing is pressable. */
@media (max-width: 899px) {
  .debug {
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    right: 10px;
    width: auto;
    /* Never more than half the screen: the orb stays reachable, and the card
       scrolls inside itself for the rest of the controls. */
    max-height: calc(52dvh - 10px);
  }

  /* On a phone the five controls come first: they are what a testing session
     touches, they fit the visible card, and everything below them is read, not
     touched. On a wide screen the order stays measurements-then-controls. */
  .debug .dev-panel {
    order: -1;
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-top: 0;
    border-bottom: 1px solid #3a342c; /* taste-skill-ignore: app screen, not a page (references/app-screens.md); unchanged by the landing build */
  }
  .debug dl { grid-template-columns: 1fr auto; }
  .debug .note.full { display: none; }
  .debug .note.short { display: block; }
  /* keep the transcript clear of the measurements, at whatever height they are */
  .app.debug-on .stage { padding-bottom: calc(var(--debug-h, 220px) + 24px); }
}