/* voice.css - the Speak page, Lola's talk mode, and choosing your Spanish and Lola's voice (Settings, and
   the first-run card on Today); colors only through the tokens in app.css. On a phone the Speak page puts
   the microphone on the first screen: the three ways in are one short row, the numbers sit with Words to
   work on, and the Talk live card comes after Say it. */

/* The three ways in */
.speak-stats { justify-content: flex-end; }
.side-stats { display: none; }
.speak-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.speak-modes .mode { display: flex; gap: 12px; align-items: center; justify-content: flex-start; min-height: 68px; padding: 12px 16px; border-radius: var(--r); border: 1.5px solid var(--line);
  background: var(--panel); color: var(--fg); text-decoration: none; text-align: left; white-space: normal; font: inherit; box-shadow: var(--shadow); cursor: pointer; }
.speak-modes .mode:hover { border-color: var(--line2); }
.speak-modes .mode[aria-current=page] { border-color: var(--accent); background: var(--accent-soft); }
.speak-modes .mode b { display: block; font-size: 16px; }
.speak-modes .mode small { display: block; color: var(--mute); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.speak-modes .mode-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sunk); color: var(--accent); flex: none; }
.speak-modes .mode[aria-current=page] .mode-ic { background: var(--panel); }
.speak-modes .mode-ic svg { width: 22px; height: 22px; }
.speak-off { margin: 0 0 16px; }

/* Say it */
.speak-grid { align-items: start; }
.speak-top { margin-bottom: 8px; }
.speak-setnote { margin: 12px 0 0; text-align: center; }
.speak .seg button { min-height: 40px; }
.speak-deck { max-width: 360px; margin: 10px 0 0; }
.speak-card { text-align: center; padding: 26px 8px 8px; display: grid; justify-items: center; gap: 4px; }
.speak-card .chip { margin-bottom: 6px; }
.say-es { font-size: clamp(28px, 5.4vw, 40px); line-height: 1.25; margin: 0; overflow-wrap: anywhere; max-width: 100%; }
.say-mean { margin: 4px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.speak-hear { justify-content: center; margin-top: 14px; }
.speak-skip { color: var(--mute); }

.mic-zone { display: grid; justify-items: center; gap: 10px; padding: 18px 0 6px; }
.mic-big { --lvl: 0; position: relative; width: 92px; height: 92px; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.mic-big:hover { border: 0; filter: brightness(1.06); }
.mic-big:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 50%; }
.mic-big svg { width: 38px; height: 38px; }
.mic-big .ring { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--bad); opacity: 0; transform: scale(calc(1 + var(--lvl) * .35)); transition: transform .08s linear, opacity .2s; pointer-events: none; }
.mic-big .spinner { display: none; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); border-top-color: var(--accent-ink); }
.mic-big[data-state=rec] { background: var(--bad); color: var(--panel); }
.mic-big[data-state=rec] .ring { opacity: .7; }
.mic-big[data-state=busy] .ic-on { opacity: 0; }
.mic-big[data-state=busy] .spinner { display: block; }
.mic-big:disabled { opacity: .55; }
.mic-big[data-state=busy]:disabled { opacity: 1; }
.mic-hint { min-height: 1.5em; margin: 0; text-align: center; max-width: 420px; }
/* Mute to the microphone's left, the microphone the row's centre (a phone call's): Mute's word under its circle.
   Muted, the big microphone dims to the slashed one (never colour alone) and the hint says the muted sentence. */
.mic-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 18px; width: 100%; }
.mic-row:has(> .mic-mute) { padding-bottom: 20px; }
.mic-row > .mic-mute { grid-column: 1; justify-self: end; }
.mic-row > .mic-big { grid-column: 2; }
.mic-mute { position: relative; width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%; flex: none; background: var(--panel); color: var(--fg); border: 1px solid var(--line2); }
.mic-mute svg { width: 22px; height: 22px; }
.mic-mute .lbl { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); min-width: 100%; text-align: center; font: 600 13px/1.2 var(--font); color: var(--mute); white-space: nowrap; }
.mic-mute[aria-pressed=true] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.mic-mute[aria-pressed=true] .lbl { color: var(--fg); }
@media (hover: hover) {
  .mic-mute:hover { background: var(--sunk); border-color: var(--field); }
  .mic-mute[aria-pressed=true]:hover { background: var(--fg); border-color: var(--fg); filter: brightness(1.15); }
}
.mic-mute:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 50%; }
.mic-big :is(.ic-on, .ic-off) { display: grid; place-items: center; position: relative; z-index: 1; }
.mic-big .ic-off { display: none; }
.mic-big[data-state=muted] { background: var(--sunk); color: var(--mute); box-shadow: none; outline: 2px solid var(--line2); outline-offset: -2px; }
.mic-big[data-state=muted] .ic-on { display: none; }
.mic-big[data-state=muted] .ic-off { display: grid; }
@media (hover: hover) { .mic-big[data-state=muted]:hover { filter: none; } }
.speak-err { margin: 6px 0 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--fg); font-weight: 600; max-width: 520px; }
.speak-err a { color: var(--bad); }

.speak-result { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
/* A result (or an answer in the session) takes the focus when it comes in, so Space says it again. */
.speak-result:focus-visible, .speak-answer:focus-visible { outline-offset: 6px; border-radius: 12px; }
/* Its ring is for the keyboard: after a mouse or touch press (data-by=pointer, speak.js take()) none. */
.speak-result[data-by=pointer]:focus-visible, .speak-answer[data-by=pointer]:focus-visible { outline: none; }
.result-top { display: flex; gap: 16px; align-items: flex-start; }
/* The score tile belongs to the Speak result only: voice.css is on every page, and a bare .score is also
   the big number on a Study, Quiz or Drill summary (app.css). */
.result-top .score { flex: none; display: grid; justify-items: center; min-width: 84px; padding: 10px 12px; border-radius: 14px; background: var(--sunk); }
.result-top .score b { font-size: 34px; line-height: 1; letter-spacing: -.02em; }
.result-top .score span { font-size: 12.5px; color: var(--mute); font-weight: 600; }
.result-top .score.good { background: var(--good-soft); color: var(--good); }
.result-top .score.warn { background: var(--warn-soft); color: var(--warn); }
.result-top .score.bad { background: var(--bad-soft); color: var(--bad); }
.words { margin: 0 0 6px; font-family: var(--serif); font-size: 21px; line-height: 1.7; overflow-wrap: anywhere; }
.words .w { padding: 1px 6px; border-radius: 8px; }
.words .w.ok { background: var(--good-soft); color: var(--good); }
.words .w.no { background: var(--bad-soft); color: var(--bad); text-decoration: underline wavy; text-underline-offset: 4px; }
.words .w.stress { background: var(--warn-soft); color: var(--warn); text-decoration: underline dotted; text-underline-offset: 4px; }
.speak-result .heard { margin: 0; overflow-wrap: anywhere; }
.speak-result .tip { font-weight: 600; margin: 12px 0; }
.speak-done { text-align: center; padding: 24px 8px 10px; }
.speak-done .row { justify-content: center; }
.speak-side .needs .es { font-weight: 600; }
.speak-keys { margin: 14px 0 0; }
.badge.good { background: var(--good-soft); color: var(--good); }

/* The speaking session */
.speak-session h2 { margin: 0; }
.session-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 34px; align-items: center; }
.session-intro h2 { margin-bottom: 8px; }
.session-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 10px; }
.session-steps li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--r-sm); background: var(--sunk); }
.session-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.session-steps span { color: var(--mute); font-size: 14px; }
.speak-session > p { max-width: 70ch; }
.speak-session .progressline { margin: 12px 0 4px; }
.speak-q { padding: 16px 0 0; }
.speak-q .q-lead { margin: 0 0 4px; font-weight: 600; }
.speak-q .q { font-size: clamp(22px, 4.2vw, 30px); line-height: 1.3; margin: 0 0 12px; overflow-wrap: anywhere; }
.speak-answer { display: grid; gap: 10px; margin-top: 10px; }
.speak-answer .you { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); overflow-wrap: anywhere; }
.lola-says { padding: 12px 14px; border-radius: 14px; background: var(--sunk); overflow-wrap: anywhere; }
.lola-says p { margin: 0; }
.lola-says .fix, .fixline { color: var(--accent-2); font-weight: 600; }
.lola-says .fix { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); }
.speak-summary { scroll-margin-top: 0; }   /* the page's scroll-padding (app.css) already clears the bar */
.speak-summary .grid { margin: 8px 0 16px; }
.speak-summary h3 { margin-top: 8px; }
.speak-summary .answers { margin-bottom: 16px; }
.speak-summary .answers small + small { margin-top: 2px; }

/* Lola's talk mode, in her chat */
.chat-head .talk-btn { min-height: 40px; padding: 0 12px; gap: 6px; font-size: 14px; }
.chat-head .talk-btn svg { width: 18px; height: 18px; }
.chat-head .talk-btn.on { background: var(--bad-soft); color: var(--bad); }
.talkbar { display: flex; gap: 10px; align-items: center; padding: 10px 10px 10px 14px; border-top: 1px solid var(--line); }
.talkbar[hidden] { display: none; }
.talk-lvl { display: flex; gap: 3px; align-items: center; height: 26px; flex: none; }
.talk-lvl i { width: 4px; height: 22px; border-radius: 2px; background: var(--accent); transform: scaleY(.15); transition: transform .06s linear; }
.tutor[data-talk=speaking] .talk-lvl i, .tutor[data-talk=thinking] .talk-lvl i, .tutor[data-talk=hearing] .talk-lvl i { background: var(--faint); }
.talk-state { font-weight: 600; font-size: 14.5px; min-width: 0; line-height: 1.25; }
/* Mute in the hands-free bar: the slashed microphone and its word; pressed, filled with ink and saying Muted. */
.talk-mute { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 12px; font-size: 14px; }
.talk-mute svg { width: 18px; height: 18px; }
.talk-mute[aria-pressed=true] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (hover: hover) { .talk-mute:hover { background: var(--sunk); border-color: var(--field); } .talk-mute[aria-pressed=true]:hover { background: var(--fg); border-color: var(--fg); filter: brightness(1.15); } }
.talkbar.muted .talk-lvl { opacity: .35; }
@media (max-width: 360px) { .talkbar { gap: 8px; padding-left: 10px; } .talk-mute { padding: 0 10px; } }
.chat .msg.note a { color: var(--accent); font-weight: 600; }

@media (max-width: 900px) { .session-intro { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  /* Her chat sheet sits in its own layer above the dimmed page, so what is drawn on top is what a
     contrast check measures. */
  .tutor.open .chat { position: relative; z-index: 1; }
  .speak-top .seg { width: 100%; }
  .speak-top .seg button { flex: 1; }
  .speak-stats { justify-content: flex-start; }
  .mic-big { width: 80px; height: 80px; }
  .result-top { gap: 12px; }
  .result-top .score { min-width: 70px; }
  .result-top .score b { font-size: 28px; }
  .words { font-size: 19px; }
  .speak-result .row > button { flex: 1 1 0; }
  .chat-head .talk-btn { padding: 0 10px; }
}
/* Her chat's head on a narrow phone: "Tu tutora ·" and "Talk live" each stay whole (at most two lines, never
   a word per line), and from 360 px down Hands-free is its microphone alone, 44 px square (its name stays
   for screen readers and the title). */
.chat-head small .nowrap, .chat-head .chat-live { white-space: nowrap; }
@media (max-width: 360px) {
  .chat-head .talk-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; flex: none; }
  .chat-head .talk-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Speak on a phone, upright or sideways: the microphone on the first screen. The ways in are one short row
   of pills; the numbers sit with Words to work on; the card and the microphone sit closer together; the Talk
   live card comes after Say it (speak.js moves it, and uses this same query). */
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
  .speak .pagehead { margin-bottom: 12px; }
  .speak .pagehead > div:first-child p { margin-top: 2px; }
  .pagehead .speak-stats { display: none; }
  .speak-side .side-stats { display: flex; margin: 0 0 10px; }
  .speak-modes { display: flex; gap: 3px; padding: 3px; margin-bottom: 14px; border-radius: 999px; background: var(--sunk); }
  .speak-modes .mode { flex: 1 1 0; min-width: 0; min-height: 44px; flex-direction: column; justify-content: center; text-align: center; gap: 0; padding: 4px 6px;
    border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--mute); }
  .speak-modes .mode:hover { border-color: transparent; color: var(--fg); }
  .speak-modes .mode[aria-current=page] { background: var(--accent); color: var(--accent-ink); }
  .speak-modes .mode-ic, .speak-modes .mode small { display: none; }
  .speak-modes .mode b { font-size: 13.5px; line-height: 1.15; }
  .speak > #sp-body + .live-card { margin: 16px 0 0; }
  .speak-main { padding-top: 14px; }
  .speak-card { padding: 12px 4px 4px; }
  .speak-hear { margin-top: 10px; }
  .mic-zone { padding: 10px 0 4px; gap: 6px; }
}
/* The smallest phones (320 wide) and short screens: the heading alone, Hear it and Hear it slowly on one
   row, a slightly smaller microphone. */
@media (max-width: 340px), (max-height: 600px) and (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
  .speak .pagehead > div:first-child p { display: none; }
  .speak-top { margin-bottom: 4px; }
  .speak-hear { flex-wrap: nowrap; gap: 8px; }
  /* The session's Skip this card goes under them: three buttons are wider than a 320 px card. */
  .speak-hear:has(.speak-skip) { flex-wrap: wrap; }
  .speak-hear button { padding: 0 12px; }
  .mic-big { width: 72px; height: 72px; }
  .mic-big svg { width: 32px; height: 32px; }
}
/* Sideways: the heading and the ways in on one line, the card on the left with the microphone beside it,
   and the session's start beside its steps. (560 px wide or more: not an upright phone with the keyboard up.) */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  .speak { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; }
  .speak > :not(.pagehead):not(.speak-modes) { grid-column: 1 / -1; }
  .speak .pagehead, .speak .speak-modes { margin-bottom: 12px; }
  .session-intro { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 18px; }
  .session-intro h2 { margin-bottom: 4px; }
  .session-intro p { margin: 0 0 6px; }
  .session-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .session-steps li { padding: 8px 10px; }
  #sp-say:has(> .mic-zone) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 220px); column-gap: 16px; align-items: center; }
  #sp-say > .speak-result { grid-column: 1 / -1; }
  .mic-row { column-gap: 12px; }
  .mic-mute { width: 48px; height: 48px; }
  .speak-q + .mic-zone { padding-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .mic-big .ring { transition: none; } }

/* Your Spanish: the kinds of Spanish and the levels as large cards, Lola's voices as rows with a sample each
   (Settings), and the same question on Today until it is answered. */
.vset { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.vset legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 15.5px; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.vgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vcard { position: relative; display: flex; gap: 12px; align-items: flex-start; justify-content: flex-start; min-height: 64px; height: auto; padding: 12px 14px;
  border-radius: 14px; border: 1.5px solid var(--line2); background: var(--panel); color: var(--fg); text-align: left; white-space: normal; font: inherit; cursor: pointer; }
.vcard:hover { border-color: var(--faint); }
.vcard input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.vcard:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.vcard:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vcard input:focus-visible { outline: none; }
.vtext { display: grid; gap: 2px; min-width: 0; }
.vtext b { font-size: 16px; line-height: 1.25; }
.vtext small { color: var(--mute); font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.vcard.small { min-height: 0; }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vrow { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--panel); }
.vrow:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.vrow:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vpick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.vpick input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.vpick input:focus-visible { outline: none; }
.vrow .chip { flex: none; }
.play { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; flex: none; }
.play svg { width: 18px; height: 18px; }
.play.playing { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#sp-about { margin: 12px 0 0; }
#sp-heard:empty { display: none; }
#sp-heard { margin: 8px 0 0; }
.firstrun { margin-top: 18px; }
.firstrun > p { max-width: 70ch; }
.fr-level { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.fr-label { font-weight: 700; }
.firstrun .seg button { min-height: 44px; }
.fr-unsure { margin-top: 10px; }
.fr-unsure button { min-height: 44px; }
/* On a narrow phone the three levels are one row of equal cells under their label, never a wrapped pill; on
   the narrowest (320 px) "Intermediate" does not fit a third, so they are three rows. */
@media (max-width: 420px) {
  .fr-level { display: grid; gap: 6px; }
  .fr-level .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 14px; }
  .fr-level .seg button { padding: 0 6px; border-radius: 11px; }
}
@media (max-width: 340px) { .fr-level .seg { grid-template-columns: minmax(0, 1fr); } }
.hero .talk-live { min-height: 44px; padding: 0 14px; color: var(--accent); }
.chat-head .chat-live { display: inline-block; padding: 13px 2px; margin: -13px -2px; font-weight: 600; color: var(--accent); }

@media (max-width: 720px) {
  .vgrid.three { grid-template-columns: minmax(0, 1fr); }
  .vcard { min-height: 0; padding: 10px 12px; }
  .vtext b { font-size: 15.5px; }
}