/* ============================================================
   Master Coach (0.296.0, dashboard/coach.js)
   Desktop: document | lesson feed | chat side by side. Narrow screens: one main area with tabs
   Lesson / Document / Chat (the class cc-tab-<name> on .cc-lesson picks the pane), so switching
   keeps every pane's DOM, draft and scroll position.
   ============================================================ */
/* .cc-btn sets display, which would beat the hidden attribute (Resume and Ask showed while hidden). */
.cc-page [hidden] { display: none !important; }
.cc-page { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 12px 16px; gap: 10px; }
.cc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; }
.cc-top h2 { margin: 0; font-size: 18px; }
.cc-top small { color: var(--text2); }
.cc-msg { color: var(--text2); font-size: 14px; }
#ccBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit;
  font-size: 14px; cursor: pointer; text-decoration: none; }
.cc-btn:hover { border-color: var(--accent-line); }
.cc-btn:focus-visible, .cc-src:focus-visible, .cc-tabs button:focus-visible, .cc-viewer:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-btn:disabled { opacity: .55; cursor: default; }
.cc-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cc-danger { color: var(--danger-ink); }
.cc-link { background: none; border: 0; padding: 0; color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.cc-empty { color: var(--text3); }
.cc-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; overflow: auto; min-height: 0; }
.cc-panel { border: 1px solid var(--glass-brd); background: var(--surface-1); border-radius: 12px; padding: 14px; min-width: 0; }
.cc-panel h3 { margin: 0 0 10px; font-size: 16px; }
.cc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.cc-row small { color: var(--text2); }
.cc-row-act { margin-left: auto; display: flex; gap: 6px; }
.cc-inline { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; color: var(--text2); }
.cc-form { display: flex; flex-direction: column; gap: 10px; }
.cc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text2); }
.cc-form input:not([type=checkbox]), .cc-form select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); font: inherit; }
.cc-flabel { font-size: 14px; color: var(--text2); }
.cc-files { max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
.cc-form .cc-file { flex-direction: row; align-items: center; gap: 6px; color: var(--text); word-break: break-all; padding: 3px 2px; }
.cc-file small { color: var(--text3); }
.cc-hold { display: none; }

.cc-lesson { flex: 1 1 auto; min-height: 0; display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr) minmax(300px, .85fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "tabs tabs tabs" "warns warns warns" "doc feed chat"; }
/* Wide screens: the side wrapper dissolves so feed and chat are grid cells of their own. */
.cc-side { display: contents; }
.cc-tabs { grid-area: tabs; display: none; gap: 6px; }
.cc-tabs button { flex: 1; position: relative; padding: 8px; font-size: 14px; line-height: 1.25; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.cc-tabs button.on { background: var(--accent-wash); border-color: var(--accent-line); font-weight: 600; }
.cc-dot { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cc-warns { grid-area: warns; display: flex; flex-direction: column; gap: 4px; }
.cc-warnline { background: var(--warn-wash); border: 1px solid var(--warn-line); color: var(--warn-ink); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.cc-pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--glass-brd);
  background: var(--surface-1); border-radius: 12px; padding: 10px; }
.cc-doc { grid-area: doc; position: relative; }
.cc-feed { grid-area: feed; overflow: auto; }
.cc-chat { grid-area: chat; padding: 8px; }
.cc-chathost, .cc-slot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.cc-slot .transcript { flex: 1 1 auto; min-height: 0; max-height: none; }
.cc-slot .bg-strip, .cc-slot .attach-bar, .cc-slot .model-bar, .cc-slot .hud-voice { flex: none; }
.cc-pending { flex: none; font-size: 14px; color: var(--accent-ink); background: var(--accent-wash); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }
.cc-srcs { display: flex; gap: 6px; overflow-x: auto; flex: none; padding-bottom: 6px; }
.cc-src { flex: none; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-src.on { border-color: var(--accent-line); background: var(--accent-wash); }
.cc-st { color: var(--text3); }
.cc-st-needs_ocr, .cc-st-partial_needs_ocr, .cc-st-needs_transcription, .cc-st-error, .cc-st-unsupported { color: var(--warn-ink); }
.cc-warn { color: var(--warn-ink); font-weight: 700; }
.cc-docbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; padding-bottom: 6px; }
.cc-docbar .cc-btn, .cc-pdf-bar .cc-btn { padding: 4px 9px; font-size: 13px; }
.cc-docmore { display: contents; }
.cc-morebtn { display: none; }
.cc-pdf-bar .ico { display: none; }
.cc-follow { font-size: 13px; color: var(--text3); }
.cc-viewer { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 6px; line-height: 1.6; font-size: 16px; }
.cc-unit { padding: 6px 8px; border-radius: 8px; border-left: 3px solid transparent; }
.cc-unit p { margin: 0; }
.cc-unit.cc-hit { border-left-color: var(--accent); background: var(--accent-wash-2); }
.cc-page-no { font-size: 12px; color: var(--text3); margin: 10px 0 4px; border-top: 1px dashed var(--hairline); padding-top: 6px; }
.cc-h { font-weight: 700; } .cc-h1 { font-size: 22px; } .cc-h2 { font-size: 19px; } .cc-h3 { font-size: 17px; }
.cc-ocr { color: var(--warn-ink); font-style: italic; }
.cc-tag { font-size: 12px; font-weight: 500; color: var(--text2); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.cc-tag-warn { color: var(--warn-ink); border-color: var(--warn-line); background: var(--warn-wash); }
.cc-tag-ok { color: var(--accent); border-color: var(--accent); }
/* Recognised text the machine is unsure of: dotted underline, never relies on colour alone. */
.cc-unsure { text-decoration: underline dotted var(--warn-ink); text-underline-offset: 3px; background: var(--warn-wash); }
.cc-unit-tools { display: flex; gap: 12px; margin-top: 4px; font-size: 13px; }
.cc-pageimg { display: block; max-width: 100%; height: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; }
.cc-srcinfo { font-size: 13px; color: var(--text2); padding: 2px 4px 6px; overflow-wrap: anywhere; }
.cc-media { padding: 0 0 8px; }
.cc-media audio, .cc-media video { width: 100%; max-height: 40vh; border-radius: 8px; background: #000; }
.cc-media audio { background: transparent; }
.cc-seg { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.cc-seg > p, .cc-seg > .cc-unit-tools { grid-column: 2; }
.cc-time { font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); background: none; border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; cursor: pointer; min-height: 28px; }
.cc-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-more { margin: 8px auto; display: flex; }
.cc-askbtn { position: absolute; right: 16px; bottom: 16px; z-index: 6; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.cc-evwrap { margin-bottom: 10px; }
.cc-feed-empty { color: var(--text3); font-size: 14px; }
#ccFeed:not(:empty) + .cc-feed-empty { display: none; }
.cc-ev { font-size: 15px; }
.cc-card { border: 1px solid var(--border); background: var(--bg2); border-radius: 10px; padding: 10px 12px; }
.cc-card h4 { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.cc-card p { margin: 4px 0; }
.cc-focus { color: var(--text2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-approx { border-style: dashed; color: var(--text2); }
.cc-focus.cc-approx { border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; }
.cc-added { display: inline-block; font-size: 12px; color: var(--warn-ink); background: var(--warn-wash); border-radius: 6px; padding: 1px 6px; margin-bottom: 4px; }
.cc-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cc-ref { font: inherit; font-size: 13px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--accent-line);
  background: none; color: var(--accent-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cc-ref.cc-approx { border-style: dashed; }
.cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.cc-mini { border: 1px solid var(--hairline); border-radius: 8px; padding: 8px; }
.cc-tablewrap { overflow-x: auto; }
.cc-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.cc-table th, .cc-table td { border: 1px solid var(--hairline); padding: 4px 8px; text-align: left; vertical-align: top; }
.cc-diagram { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-diagram li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-choices { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.cc-choice { justify-content: flex-start; text-align: left; }
.cc-answer { width: 100%; box-sizing: border-box; margin: 6px 0; padding: 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit; resize: vertical; }
.cc-answered { color: var(--green); font-size: 14px; }
.cc-badge { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 8px; background: var(--surface-2); }
.cc-correct .cc-badge { color: var(--green); } .cc-incorrect .cc-badge { color: var(--red); } .cc-partial .cc-badge { color: var(--warn-ink); }
.cc-progress { font-size: 14px; color: var(--text2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Tablet: the document keeps its column; the lesson (events above, chat below) shares the other one, so
   nothing covers the document. */
@media (max-width: 1100px) {
  .cc-lesson { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    grid-template-areas: "tabs tabs" "warns warns" "doc side"; }
  .cc-side { display: flex; flex-direction: column; gap: 12px; grid-area: side; min-height: 0; min-width: 0; }
  .cc-side .cc-feed { flex: 0 1 38%; min-height: 120px; }
  .cc-side .cc-chat { flex: 1 1 62%; min-height: 0; }
}
/* Phone: two screens, Document and Lesson (events above, chat below). Both stay in the page (display
   toggles only), so the chat draft, the reading place and the lesson state survive a switch. */
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) and (orientation: landscape) {
  .cc-page { padding: 8px; }
  .cc-home { grid-template-columns: minmax(0, 1fr); }
  .cc-tabs { display: flex; }
  .cc-lesson { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "warns" "main"; }
  .cc-lesson .cc-doc, .cc-lesson .cc-side { grid-area: main; }
  .cc-lesson.cc-tab-lesson .cc-doc, .cc-lesson.cc-tab-doc .cc-side { display: none; }
  .cc-side .cc-feed { flex: 0 1 34%; min-height: 96px; }
  /* The document gets the room: secondary actions sit behind one button, the PDF bar fits one row. */
  .cc-morebtn { display: inline-flex; }
  .cc-docmore { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 6px; align-items: center; }
  .cc-docmore.open { display: flex; }
  .cc-pdf-bar { gap: 4px; }
  .cc-pdf-bar .lbl { display: none; }
  .cc-pdf-bar .ico { display: inline-flex; }
  .cc-pdf-sep { flex: 0 0 0; }
  .cc-pdf-zoom { min-width: 2.8em; }
  .cc-pdf-bar .cc-btn { min-width: 40px; justify-content: center; }
}
/* ---- Upload from the device and adding sources inside a lesson (private release) ---- */
.cc-phone-only { display: none; }
.cc-upbtn { position: relative; cursor: pointer; }
.cc-form .cc-upbtn { flex-direction: row; color: var(--on-accent); font-size: 14px; }
.cc-upinput { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.cc-upbtn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-uprow, .cc-addrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cc-uphint { color: var(--text3); font-size: 13px; }
.cc-addpanel { flex: none; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; margin-bottom: 6px; background: var(--surface-2); }
.cc-brainpick { display: flex; flex-direction: column; gap: 6px; }
.cc-brainpick .cc-files { max-height: 220px; }
.cc-brainpick input[type=search] { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font: inherit; }
.cc-brainpick .cc-file { display: flex; align-items: center; gap: 6px; word-break: break-all; padding: 3px 2px; }
.cc-uplist { flex: none; display: flex; flex-direction: column; gap: 4px; max-height: 32%; overflow: auto; }
.cc-uplist:empty { display: none; }
.cc-up { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; padding: 6px 8px; border: 1px solid var(--hairline); border-radius: 8px; }
.cc-up-name { font-weight: 600; overflow-wrap: anywhere; }
.cc-up-name small, .cc-up-note { font-weight: 400; color: var(--text3); }
.cc-up-st { color: var(--text2); }
.cc-up-error .cc-up-st, .cc-up-attention .cc-up-st, .cc-up-saved_only .cc-up-st { color: var(--warn-ink); }
.cc-up-ready .cc-up-st { color: var(--green); font-weight: 600; }
.cc-up progress { flex: 1 1 120px; height: 8px; }
.cc-up-act { margin-left: auto; display: flex; gap: 6px; }
.cc-tolesson { position: relative; }
.cc-srcsel { min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 15px; }

/* Phone, Document screen ("reading"): coach.js sets body.cc-reading while the phone layout shows the document.
   The Javis bar and the lesson title fold away, the source tabs become one picker in a single bar, and the
   PDF tools keep to one row, so the original page gets most of the screen. The heights all come from the
   visible screen (dvh, or the keyboard-aware --vv-h); no fixed share is set here. */
body.cc-reading .hud-top, body.cc-reading .pet { display: none; }
body.cc-reading .cview { top: 0; }
body.cc-reading.kb-open .cview { top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); }
.cc-reading .cc-page { padding: max(4px, env(safe-area-inset-top, 0px)) 6px max(4px, env(safe-area-inset-bottom, 0px)); gap: 4px; }
.cc-reading .cc-top, .cc-reading .cc-tabs, .cc-reading .cc-srcs, .cc-reading #ccFollowSt { display: none !important; }
.cc-reading .cc-lesson { gap: 4px; }
.cc-reading .cc-lesson .cc-doc { padding: 0; border: 0; border-radius: 0; background: transparent; }
.cc-reading .cc-phone-only { display: inline-flex; }
.cc-reading .cc-docbar { flex-wrap: wrap; gap: 4px; padding-bottom: 4px; position: relative; }
.cc-reading .cc-docbar .cc-btn, .cc-reading .cc-pdf-bar .cc-btn { min-height: 44px; min-width: 44px; justify-content: center; padding: 4px 8px; }
.cc-reading .cc-srcsel { flex: 1 1 0; min-height: 44px; }
.cc-reading #ccResume .lbl { display: none; }
.cc-reading .cc-secsel { order: 10; flex: 1 1 100%; max-width: none; min-height: 44px; }
.cc-reading .cc-docmore.open { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow-veil, rgba(0,0,0,.3)); }
.cc-reading .cc-pdf-bar { flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; }
.cc-reading .cc-pdf-bar::-webkit-scrollbar { display: none; }
.cc-reading .cc-pdf-bar > * { flex: none; }
.cc-reading .cc-pdf-bar [data-a="ask"] { order: 1; }
.cc-reading .cc-pdf-sep { display: none; }
.cc-reading .cc-pdf-bar [data-a="zout"] { order: 3; }
.cc-reading .cc-pdf-zoom { order: 4; min-width: 2.6em; }
.cc-reading .cc-pdf-bar [data-a="zin"] { order: 5; }
.cc-reading .cc-pdf-bar [data-a="fit"] { order: 6; }
.cc-reading .cc-pdf-pg input { width: 3.4em; }
.cc-reading .cc-pdf-scroll { padding: 4px; }
/* Notes about the source (snapshot time, what is missing): one line until tapped. */
.cc-reading .cc-srcinfo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 1.7em; padding: 0 4px 4px; cursor: pointer; }
.cc-reading .cc-srcinfo > div { display: inline; margin-right: 8px; }
.cc-reading .cc-srcinfo.open { white-space: normal; max-height: 40vh; overflow: auto; }
.cc-reading .cc-srcinfo.open > div { display: block; }
.cc-reading .cc-media video { max-height: 30vh; }
/* Phone on its side: the screen is short, so the reading bar and the PDF tools share ONE row (grid; the viewer's
   wrappers dissolve so its tool row and page area become cells of this grid). The document takes the rest. */
@media (max-height: 520px) and (pointer: coarse) and (orientation: landscape) {
  .cc-reading .cc-lesson .cc-doc { display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr); column-gap: 6px; row-gap: 0; }
  .cc-reading .cc-doc > *, .cc-reading .cc-origview > *, .cc-reading .cc-pdf > * { grid-column: 1 / -1; min-width: 0; min-height: 0; }
  .cc-reading .cc-origview, .cc-reading .cc-pdf { display: contents; }
  .cc-reading .cc-docbar { grid-row: 1; flex-wrap: nowrap; }
  .cc-reading .cc-doc:has(.cc-pdf-bar) .cc-docbar { grid-column: 1; }
  .cc-reading .cc-pdf-bar { grid-row: 1; grid-column: 2; }
  .cc-reading .cc-tolesson .lbl { display: none; }
  .cc-reading .cc-srcsel { flex: 0 1 150px; }
  .cc-reading .cc-secsel { order: 0; flex: 1 1 160px; }
  .cc-reading #ccAddPanel { grid-row: 2; }
  .cc-reading #ccUpList { grid-row: 3; }
  .cc-reading .cc-srcinfo { grid-row: 4; }
  .cc-reading #ccProc, .cc-reading .cc-pdf-status, .cc-reading .cc-frame-status { grid-row: 5; }
  .cc-reading .cc-media { grid-row: 6; }
  .cc-reading .cc-pdf-scroll, .cc-reading .cc-frame, .cc-reading #ccViewer, .cc-reading .cc-origview > .cc-empty,
  .cc-reading .cc-origview > .cc-warnline { grid-row: 7; }
  .cc-reading .cc-media video { max-height: 45vh; }
  .cc-reading .cc-frame { align-self: stretch; height: auto; }
  /* No PDF tools (HTML, web, media): the notes line takes the second cell of the bar row. */
  .cc-reading .cc-doc:not(:has(.cc-pdf-bar)) .cc-docbar { grid-column: 1; }
  .cc-reading .cc-doc:not(:has(.cc-pdf-bar)) .cc-srcinfo { grid-row: 1; grid-column: 2; align-self: center; padding: 0 4px; }
}

/* ---- Original views (coach-view.js): PDF pages, the inert page frame ---- */
.cc-seg-toggle { display: inline-flex; gap: 0; }
.cc-seg-toggle .cc-btn { border-radius: 0; }
.cc-seg-toggle .cc-btn:first-child { border-radius: 8px 0 0 8px; }
.cc-seg-toggle .cc-btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.cc-seg-toggle .cc-btn.on { background: var(--accent-wash); border-color: var(--accent-line); font-weight: 600; }
.cc-secsel { max-width: min(46vw, 320px); padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; }
.cc-textnote { color: var(--text2); font-size: 13px; border: 1px dashed var(--border); border-radius: 8px; padding: 4px 10px; margin: 0 0 8px; }
.cc-origview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cc-pdf { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cc-pdf-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; padding-bottom: 6px; }
.cc-pdf-pg { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text2); }
.cc-pdf-pg input { width: 4.2em; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font: inherit; }
.cc-pdf-sep { flex: 1 1 8px; }
.cc-pdf-zoom { min-width: 3.4em; text-align: center; font-size: 14px; color: var(--text2); }
.cc-pdf-askpage.cc-attn { border-color: var(--warn-line); background: var(--warn-wash); color: var(--warn-ink); }
.cc-pdf-status { flex: none; font-size: 14px; color: var(--text2); padding: 2px 4px 6px; }
.cc-pdf-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; background: var(--bg2); border-radius: 8px;
  padding: 8px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.cc-pdf-page { position: relative; margin: 0 auto 10px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.28); overflow: hidden; isolation: isolate; }
.cc-pdf-page canvas { display: block; }
.cc-pdf-bad { outline: 2px dashed var(--warn-line); }
.cc-pdf-badge { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 2; background: var(--warn-wash); border: 1px solid var(--warn-line);
  color: var(--warn-ink); font-size: 13px; line-height: 1.4; border-radius: 8px; padding: 6px 10px; }
.cc-pdf-badge-act { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
/* The invisible text layer: words the learner can select, laid over the picture of the page. */
.cc-tl { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; line-height: 1; text-size-adjust: none; z-index: 1; }
.cc-tl > span, .cc-tl > br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.cc-tl ::selection { background: rgba(0, 105, 255, .32); }
.cc-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; border-radius: 8px; background: #fff; }
.cc-frame-status { flex: none; font-size: 14px; color: var(--text2); padding: 4px; }
.cc-vbar summary { cursor: pointer; color: var(--warn-ink); font-weight: 600; }
.cc-vnotes { margin: 4px 0 6px 18px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-vn-warn { color: var(--warn-ink); }
.cc-vmiss ul { margin: 4px 0 0 18px; padding: 0; }
.cc-vmiss code { font-size: 12px; overflow-wrap: anywhere; }
@media (pointer: coarse) {
  .cc-pdf-bar .cc-btn, .cc-seg-toggle .cc-btn, .cc-secsel, .cc-pdf-badge-act .cc-btn { min-height: 44px; min-width: 44px; }
  .cc-pdf-pg input { min-height: 40px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-page * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}