/* quick.css — "Script to screen" (v2.11; the front page since v2.12): one
   window, any device. The reading view reuses app.css's .prompter, so the
   words look like the console's. What changes is where they sit: the line
   being read is near the TOP of the screen, right under the camera, and the
   text is set in short lines (lines.js) with numbered sections standing clear. */

/* ---------- 1. the script ---------- */
.q-setup { max-width: 720px; margin: 0 auto; padding: 18px 16px 28px; display: flex; flex-direction: column; gap: 12px; }
.q-head h1 { font-size: 22px; margin: 0; }
.q-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.q-setup .pwa-row { margin: 0; }
.q-script { width: 100%; min-height: 42vh; resize: vertical; font-size: 16px; line-height: 1.5; padding: 12px; }
.q-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.q-tools button { min-height: 40px; }
.q-tools button.armed { border-color: var(--danger); color: #ffd5dd; }
.q-info { margin-left: auto; color: var(--muted); font-size: 13px; }
.q-start { width: 100%; min-height: 56px; font-size: 19px; font-weight: 700; border-radius: 12px; }
.q-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.q-note.warn { color: #ffe3b0; }
.q-voice > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.q-voice[open] > summary, .q-voice > summary:hover { color: var(--ink); }
.q-voice-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 460px; }
.q-studio { color: var(--muted); font-size: 13px; margin-top: 6px; }
.q-mode button { min-height: 52px; font-size: 15px; font-weight: 700; }
.q-mode small { font-size: 11px; }
.q-tidy { color: #b8f5d6; }
.q-tidy .linklike { font-size: 12.5px; padding: 0 2px; }

/* ---------- 2. reading ---------- */
/* Near-full width on a phone; a narrower column on a big screen keeps the
   eyes close to a laptop's webcam. */
.q-read .prompter { --lens-w: 94%; }
@media (min-width: 900px) { .q-read .prompter { --lens-w: 64%; } }
/* Plain black behind the words: the console's blur and text shadow only help
   over a slide, and cost a phone frames. */
.q-read .promptcol { min-width: 0; max-width: 1100px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.q-read .reading { text-shadow: none; overflow-wrap: break-word; will-change: transform; }
/* dragging the text moves it; it never selects it (and a long press brings up no menu) */
.q-read .prompter { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Short lines (lines.js sets each .ln); paragraphs apart; a numbered section
   stands clear of what came before, with its title in bold. */
.q-read .ln { display: block; }
.q-read .blk { margin: .8em 0; }
.q-read .blk.sect { margin-top: 1.7em; }
.q-read .ln.title { font-weight: 700; }
.q-read .ln.title-end { margin-bottom: .45em; }
.q-read .w.num { color: #8db2ff; }
/* --read-line and --line-h are set by quick.js. A line being read rises from
   the reading line to one line above it as you go along it, so the fade for
   already-read lines stops a line above the reading line and never dims the
   line you are on. */
.q-read .scroller {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35), #000 calc(var(--read-line, 12vh) - var(--line-h, 60px)));
  mask-image: linear-gradient(180deg, rgba(0,0,0,.35), #000 calc(var(--read-line, 12vh) - var(--line-h, 60px)));
}
.q-read .centerline { top: var(--read-line, 12vh); }

/* Same colors as the script window's state bar: green = following you,
   amber = listening, grey = paused, red = a problem. No glow this close to
   the camera. */
.q-statebar { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 7; background: rgba(153,160,180,.9); transition: background .25s; pointer-events: none; }
.q-statebar[data-state="listening"] { background: rgba(255,191,77,.95); }
.q-statebar[data-state="following"] { background: rgba(31,209,123,.95); }
.q-statebar[data-state="trouble"] { background: rgba(255,59,92,.95); }

/* Controls at the BOTTOM, away from the camera and the reading line. They
   fade while you read and come back on a touch. */
.q-bar {
  position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 8;
  display: flex; gap: 4px; padding: 5px; border-radius: 14px;
  background: rgba(20,22,30,.86); border: 1px solid rgba(255,255,255,.12); transition: opacity .3s;
}
.q-bar.idle { opacity: .3; }
.q-bar button.on { border-color: rgba(91,140,255,.8); background: rgba(91,140,255,.22); }
.q-bar button {
  min-width: 44px; min-height: 48px; padding: 0 6px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: var(--ink);
  font: 700 18px/1 var(--font); touch-action: manipulation;
}
.q-hint {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 6; width: max-content; max-width: 92vw;
  padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.8); text-align: center; color: var(--muted); font-size: 14px; pointer-events: none;
}
.q-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 9; max-width: 92vw;
  padding: 8px 14px; border-radius: 999px; background: rgba(20,22,30,.94); border: 1px solid var(--line);
  color: var(--ink); font-size: 13px; text-align: center;
}
.q-card {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 9; width: min(92vw, 460px);
  padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  font-size: 14px; line-height: 1.45;
}
.q-problem { border-color: rgba(255,59,92,.55); color: #ffd5dd; }
.q-end { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.q-end-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.q-end-actions button { min-height: 44px; }

/* Signposts (v2.13 "From beats"): the signpost you are on, with its nudges, in full white; the next one dimmer
   so you can see where you are going, the rest step back. A beat is spoken,
   not read, so a numbered beat's first sentence is not set in bold. */
.q-read.beats .blk { opacity: .26; transition: opacity .25s; }
.q-read.beats .blk.next { opacity: .5; }
.q-read.beats .blk.now { opacity: 1; }
.q-read.beats .blk.sect { margin-top: 1.2em; }
.q-read.beats .ln.title { font-weight: inherit; }
.q-read.beats .ln.title-end { margin-bottom: 0; }
/* the question being answered: readable, not a small-caps label */
.q-read.beats .blk.section { font-size: .5em; text-transform: none; letter-spacing: 0; line-height: 1.3; }

/* Changing a sentence on the fly: in ✎ mode every paragraph shows it can be
   tapped; the one you tap opens in a box at the TOP, above the phone's
   keyboard, never inside the moving text. */
.q-read.editing .blk { outline: 1px dashed rgba(255,255,255,.22); outline-offset: 6px; border-radius: 4px; cursor: text; }
.q-edit-hint { color: #b7cbff; }
.q-edit {
  top: 12px; bottom: auto; z-index: 12; display: flex; flex-direction: column; gap: 10px;
  width: min(94vw, 640px); border-color: rgba(91,140,255,.6); box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.q-edit textarea {
  width: 100%; min-height: 22vh; max-height: 38vh; resize: vertical;
  font-size: 18px; line-height: 1.45; padding: 10px;
}
.q-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.q-edit-actions button { min-height: 44px; min-width: 88px; }