/* Listen (F19): read-aloud controls in the studio design. Version 2 (5 October 2026): one quiet pill, a speaker with
   the word Listen and the speed beside it, in the same place on lessons, notes and flashcards. Colours and type come
   from the design.css tokens (cobalt --blue, lime --lime, Space Grotesk / DM Sans). Hover colours apply only to a mouse
   or trackpad: on an iPad a tapped button would otherwise keep its hover colour. Every button is at least 44 px.
   Hidden entirely when the browser cannot speak (listen.js adds nothing). */
.listen-ui{font-family:var(--font,'DM Sans',Arial,sans-serif);color:var(--ink,#191a20);text-align:left}
.listen-ui[hidden],.listen-panel[hidden],[data-listen-page][hidden]{display:none!important}
.listen-icon{width:18px;height:18px;flex:none}

/* a single speaker button (flashcards, feedback, answered questions) */
.listen-ui .listen-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 10px;border:1px solid transparent;border-radius:12px;background:transparent;color:#5d5b74;font:600 13px/1.1 var(--font,'DM Sans',Arial,sans-serif);letter-spacing:0;cursor:pointer;white-space:nowrap}
.listen-ui .listen-btn--icon{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:999px}
.listen-btn--icon .listen-icon{width:18px;height:18px}
.listen-btn.is-playing{background:#ece8fa;color:#4f43a0}
.listen-btn.is-paused{background:#f3f2f7;color:#4f43a0}
.listen-btn:focus-visible,.listen-choice:focus-visible,.listen-link:focus-visible,.listen-icon-btn:focus-visible,.listen-dock-btn:focus-visible,.listen-voice:focus-visible,.listen-speed-select:focus-visible,.listen-speed-button:focus-visible,.listen-help summary:focus-visible{outline:3px solid var(--blue,#4540eb);outline-offset:2px}

/* the pill: [speaker Listen | 1x]. The visible outline is 34 px tall; each half is a full 44 px touch target. */
.listen-pill{position:relative;display:inline-flex;align-items:center;flex:none;height:44px}
.listen-pill::before{content:"";position:absolute;left:0;right:0;top:5px;bottom:5px;border:1px solid #dddde8;border-radius:999px;background:#fff;pointer-events:none}
.listen-ui .listen-pill>button{position:relative;z-index:1;display:inline-flex;align-items:center;height:44px;min-height:44px;margin:0;border:0;background:transparent;color:#4f4d67;font:600 13px/1 var(--font,'DM Sans',Arial,sans-serif);letter-spacing:0;cursor:pointer;white-space:nowrap}
.listen-ui .listen-pill>.listen-btn{gap:6px;padding:0 9px 0 12px;border-radius:999px 0 0 999px}
.listen-pill>.listen-btn .listen-icon{width:17px;height:17px;color:var(--blue,#4540eb)}
.listen-ui .listen-pill>.listen-speed-button{min-width:52px;padding:0 11px 0 10px;border-radius:0 999px 999px 0}
.listen-pill>.listen-speed-button::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:#e2e2ec}
.listen-pill.is-playing::before{background:#efedff;border-color:#cbc5f4}
.listen-pill.is-paused::before{background:#f5f4fa;border-color:#d9d6ea}
.listen-pill>.listen-btn.is-playing,.listen-pill>.listen-btn.is-paused{background:transparent;color:#3f3591}
.listen-pill>button:focus-visible{outline-offset:-2px;border-radius:999px}

/* the speed chip on its own (Listen mode) and inside the pill */
.listen-ui .listen-speed-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:52px;min-height:44px;padding:0 12px;border:1px solid #dddde8;border-radius:999px;background:#fff;color:#4f4d67;font:600 13px/1 var(--font,'DM Sans',Arial,sans-serif);cursor:pointer;white-space:nowrap}
.listen-ui .listen-pill>.listen-speed-button{border:0;background:transparent}
.listen-speed-button .listen-icon{width:13px;height:13px;margin-right:-3px;opacity:.65}
.listen-speed-button[aria-expanded="true"] .listen-icon{transform:rotate(180deg)}

/* notes and public notes: one bar under the topic title */
.listen-bar{position:relative;margin:0 0 16px;padding:0 2px;border:0;background:transparent}
.listen-bar-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.listen-bar-note{flex:1 1 220px;margin:0;font-size:13px;line-height:1.5;color:var(--mut,#676971)}
.listen-ui .listen-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 4px;border:0;background:none;color:var(--blue,#4540eb);font:600 13px var(--font,'DM Sans',Arial,sans-serif);cursor:pointer}
.listen-ui .listen-icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line,#e3e5ea);border-radius:14px;background:var(--paper,#fff);color:var(--ink,#191a20);cursor:pointer}

/* voice and speed: a small panel that floats beside its button and stays on screen (listen.js places it). It starts at
   the top-left corner so that, for the moment before it is placed, it never sticks out sideways: on a phone that makes
   the browser rescale and scroll the page, and the scroll would close the panel again. */
.listen-panel{position:fixed;left:0;top:0;z-index:1002;width:min(360px,calc(100vw - 32px));box-sizing:border-box;margin:0;padding:14px 16px 12px;border:1px solid var(--line,#e3e5ea);border-radius:16px;background:#fff;color:var(--ink,#191a20);box-shadow:0 12px 36px #1d1e2a24;display:grid;gap:12px;max-height:min(520px,calc(100dvh - 100px));overflow-y:auto;overscroll-behavior:contain;text-align:left}
.listen-panel-row{display:grid;gap:6px}
.listen-panel-row label,.listen-panel-label{font-size:12px;font-weight:650;color:var(--mut,#676971)}
.listen-ui .listen-voice{width:100%;min-height:44px;max-width:100%;box-sizing:border-box;padding:8px 12px;border:1px solid #cfd2db;border-radius:12px;background:#fff;font:14px var(--font,'DM Sans',Arial,sans-serif);color:var(--ink,#191a20)}
.listen-choices{display:inline-flex;flex-wrap:wrap;gap:6px}
.listen-ui .listen-choice{min-width:52px;min-height:44px;padding:7px 12px;border:1px solid var(--line,#e3e5ea);border-radius:999px;background:#fff;color:var(--ink,#191a20);font:600 13px var(--font,'DM Sans',Arial,sans-serif);cursor:pointer}
.listen-choice[aria-pressed="true"]{background:var(--ink,#191a20);border-color:var(--ink,#191a20);color:#fff}
/* the six speeds read as one scale from slower to faster */
.listen-speeds{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));gap:4px}
.listen-ui .listen-speeds .listen-choice{min-width:0;padding:0 2px;border-radius:12px;font-size:13px}
.listen-panel-note{margin:0;font-size:12px;line-height:1.5;color:var(--mut,#676971)}
.listen-ui .listen-preview{justify-self:start;min-height:44px;padding:6px 0}
.listen-help{font-size:13px;line-height:1.5;border-top:1px solid #ececf2;padding-top:4px}
.listen-help[hidden]{display:none}
.listen-help .listen-panel-note+.listen-panel-note{margin-top:8px}
.listen-help .listen-panel-note:last-child,.listen-steps{margin-bottom:6px}
.listen-ui .listen-help summary{cursor:pointer;color:#4f43a0;font-weight:600;min-height:44px;display:flex;align-items:center}
.listen-steps{margin:2px 0 6px;padding-left:20px;color:#3f4050}
.listen-steps li+li{margin-top:6px}
.listen-help-link{display:inline-flex;align-items:center;min-height:44px;margin:0;color:#4f43a0;text-decoration:underline}

/* lessons: the pill sits beside the slide title, or in the corner of a question card */
.listen-inline{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:0;margin:0 0 4px}
.listen-inline--end{justify-content:flex-start;margin:10px 0 0}
.cj-explanation>.listen-inline,.teaching-copy>.listen-inline{float:right;margin:-10px -8px 4px 12px}
.cj-card:has(>.listen-inline--question){position:relative}
.listen-inline--question{position:absolute;top:10px;right:12px;z-index:2;margin:0}
/* A question without a picture starts at the top of its card: its heading wraps around the corner pill instead of running
   under it (seen at 1366 px, 6 October). Phones put the pill on its own row, so this applies from 601 px. */
@media(min-width:601px){.cj-card:has(>.listen-inline--question):not(:has(>.cj-question-art))>h2::before{content:"";float:right;width:150px;height:46px}}
.cj-feedback>.listen-inline,.guided-feedback>.listen-inline,.cj-selfcheck-model>.listen-inline{float:right;margin:-8px -8px 4px 12px}

/* flashcards: a speaker in the card's top-right corner, Listen mode below the card */
.study-flashcard.has-listen{position:relative}
.study-flashcard.has-listen .qtags{padding-right:150px}
.listen-card-ctl{position:absolute;top:8px;right:12px;z-index:2}
.deck-study-card .listen-card-ctl{top:6px;right:10px}
.listen-handsfree{max-width:730px;margin:22px auto 0;padding:14px 16px;border:1px solid var(--line,#e3e5ea);border-radius:18px;background:var(--paper,#fff)}
.listen-handsfree .listen-bar-note{margin-top:10px}
.listen-gap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 auto}
.listen-gap .listen-panel-label{min-width:0}
.listen-hf-btn.is-playing{background:var(--ink,#191a20);border-color:var(--ink,#191a20);color:#fff}

/* what is being read: a neutral lilac wash (never the green that marks a correct answer); answer options only get a ring */
.listen-reading{background-color:#efedff!important;box-shadow:0 0 0 5px #efedff;border-radius:4px}
button.listen-reading{background-color:inherit!important;box-shadow:none;outline:3px solid #a9a3f5;outline-offset:3px}

/* the player: fixed at the bottom while something is being read */
.listen-dock{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:10px;width:min(560px,calc(100% - 32px));box-sizing:border-box;padding:10px 10px 10px 12px;border-radius:20px;background:var(--ink,#191a20);color:#fff;box-shadow:0 18px 48px #1d1e2a47}
.listen-ui .listen-dock-btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #ffffff2e;border-radius:14px;background:transparent;color:#fff;cursor:pointer}
.listen-ui .listen-dock-toggle{background:var(--lime,#c7f56b);border-color:var(--lime,#c7f56b);color:var(--ink,#191a20)}
.listen-dock .listen-dock-btn:focus-visible,.listen-dock .listen-icon-btn:focus-visible,.listen-dock .listen-speed-select:focus-visible{outline-color:var(--lime,#c7f56b)}
.listen-now{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.25}
.listen-now-kind{font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:#c9cad3}
.listen-now-kind:empty{display:none}
.listen-now-label{font:500 14px var(--display,'Space Grotesk',Arial,sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listen-dock .listen-icon-btn{background:transparent;border-color:#ffffff2e;color:#fff}
.listen-ui .listen-speed-select{flex:none;width:76px;min-height:44px;padding:7px 4px 7px 10px;border:1px solid #ffffff2e;border-radius:12px;background:var(--ink,#191a20);color:#fff;font:600 13px var(--font,'DM Sans',Arial,sans-serif);cursor:pointer}
.listen-dock .listen-panel{position:absolute;left:0;right:0;top:auto;bottom:calc(100% + 10px);width:auto;max-height:60vh}
.listen-status{position:fixed;left:50%;bottom:max(84px,calc(env(safe-area-inset-bottom) + 76px));transform:translateX(-50%);z-index:1001;max-width:min(520px,calc(100% - 32px));padding:11px 16px;border-radius:14px;background:var(--ink,#191a20);color:#fff;font-size:13px;line-height:1.45;box-shadow:0 12px 32px #1d1e2a40;opacity:0;pointer-events:none}
.listen-status.is-on{opacity:1}
@media(min-width:701px){#root.workspace-root~.listen-dock,#root.workspace-root~.listen-status{left:calc(50% + 105px)}}   /* centred on the page beside the sidebar */
@media(min-width:1201px){#root.workspace-root~.listen-dock,#root.workspace-root~.listen-status{left:calc(50% + 114px)}}
@media(min-width:1800px){#root.workspace-root~.listen-dock,#root.workspace-root~.listen-status{left:calc(50% + 132px)}}
.listen-docked body{padding-bottom:92px}
.listen-docked .cj-feed-inner{padding-bottom:110px}
.listen-docked .toast{bottom:96px!important}

/* a mouse or trackpad gets hover colours and short fades; touch screens do not */
@media(hover:hover) and (pointer:fine){
  .listen-btn{transition:background .15s,color .15s}
  .listen-btn:hover{background:#f0eef8;color:#4f43a0}
  .listen-pill>button:hover{background:transparent;color:var(--blue,#4540eb)}
  .listen-speed-button:hover,.listen-icon-btn:hover{border-color:#c9c6f6;color:var(--blue,#4540eb)}
  .listen-pill>.listen-speed-button:hover{border-color:transparent}
  .listen-choice:hover:not([aria-pressed="true"]){border-color:#c9c6f6}
  .listen-link:hover,.listen-help summary:hover{text-decoration:underline}
  .listen-dock-btn:hover{background:#ffffff14}
  .listen-dock-toggle:hover{background:#d6fb8a}
  .listen-reading{transition:background-color .2s}
  .listen-status{transition:opacity .2s}
}

@media(max-width:600px){
  .listen-bar{padding:0}
  .listen-bar-note{flex-basis:100%;order:3}
  .listen-handsfree{padding:12px}
  .listen-handsfree .listen-hf-btn{flex:1 1 auto;justify-content:center}
  .listen-gap{flex-basis:100%;order:3}
  .study-flashcard.has-listen .qtags{padding-right:142px}
  .listen-card-ctl{top:6px;right:6px}
  /* phones: the question card's pill takes a slim row above the picture instead of its corner */
  .listen-inline--question{position:static;margin:-12px -10px -10px 0}
  .cj-explanation>.listen-inline,.teaching-copy>.listen-inline{margin:-12px -10px 2px 10px}
  .cj-feedback>.listen-inline,.guided-feedback>.listen-inline,.cj-selfcheck-model>.listen-inline{margin:-10px -10px 2px 10px}
  .listen-dock{gap:8px;padding:8px}
  .listen-dock-btn,.listen-dock .listen-icon-btn{width:44px;height:44px}
}
@media(max-width:359px){
  .listen-speeds{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .listen-btn,.listen-reading,.listen-status{transition:none}
  .listen-speed-button .listen-icon{transition:none}
}