/* Kafedrum 2.7 — legibility and study reader.
   Loaded last. Keeps the Quiet Cinema look but raises the type floor, fixes contrast left
   over from the original light theme, and styles the reader's study tools. */

:root {
  --text: #e4e9dd;
  --muted: #a7afa3;          /* secondary copy: ≥ 7:1 on every panel */
  --subtle: #8f978c;         /* tertiary metadata only: ≥ 5.5:1 */
  --reader-ink: #d8ded1;
  --focus: #eef5d8;
  --good-ink: #b9d29f;
  --warn-ink: #e3c68d;
  --bad-ink: #f2a497;
  --fs-meta: 13px;
  --fs-ui: 15px;
  --fs-body: 16px;
  --fs-reader: 18px;
}

body { font-size: var(--fs-body); line-height: 1.5; }
#app-view { background: var(--bg); }

/* ---------- focus and hit areas ---------- */
/* Focus rings are defined once in system.css. */
.icon-btn { min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; color: var(--muted); }
.icon-btn:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- modal scroll lock ---------- */
html.modal-open, html.modal-open body, html.modal-open .study-workbench { overflow: hidden; }
.study-workbench { scrollbar-gutter: stable; }

/* ---------- type floor: decorative stamps stay mono, functional text does not ---------- */
.stamp, .release-stamp, .panel-index, .hero-orbit span, .hero-orbit small, .subject-card-index, .material-kind, .timer-kicker { font-size: 12px !important; color: var(--subtle); }
.tile-label { font-size: 12px; color: var(--muted); }
.btn, .button { font: 600 14px/1.2 var(--display); letter-spacing: .01em; text-transform: none; }
.btn.small, .topbar .btn.small { padding: 7px 12px; font-size: 14px; }
.knowledge-head h2 { font: 600 15px var(--display); letter-spacing: 0; text-transform: none; color: var(--text); }
.nav-btn { font: 500 15px var(--display); letter-spacing: 0; text-transform: none; color: var(--muted); }
.nav-btn:disabled { opacity: .6; }
.service-state { font: 500 13px var(--display); letter-spacing: 0; text-transform: none; color: var(--muted); }
.user { font: 500 14px var(--display); letter-spacing: 0; }
.sidebar-caption { font-size: 14px; color: var(--muted); }
.knowledge-base-item { font: 500 15px/1.3 var(--display); letter-spacing: 0; text-transform: none; color: var(--muted); }
.knowledge-base-item i { font-size: 12px; color: var(--subtle); }
.knowledge-base-item b { min-width: 26px; height: 26px; font-size: 13px; color: var(--muted); }
.sidebar-queue > .tile-label { font: 500 13px var(--display); letter-spacing: 0; text-transform: none; }
.queue-summary span { font: 14px var(--display); letter-spacing: 0; text-transform: none; color: var(--muted); }
.knowledge-info-button { font: 500 14px var(--display); letter-spacing: 0; text-transform: none; color: var(--muted); }
.workspace-header p:not(.stamp) { font-size: 17px; color: var(--muted); }
.section-heading > p, .workspace-note p, .subject-hero p { font-size: 16px; color: var(--muted); }
.system-grid p { font-size: 15px; color: var(--muted); }
.subject-card-copy small { font: 500 13px var(--display); letter-spacing: 0; text-transform: none; color: var(--muted); }
.subject-card-copy em { font-size: 14px; color: var(--muted); }
.subject-card-arrow, .material-menu summary { color: var(--muted); }
.material-menu summary { width: 40px; height: 40px; font-size: 16px; }
.avatar { font-size: 12px; }
.breadcrumb-button { font: 500 14px var(--display); letter-spacing: 0; text-transform: none; color: var(--muted); }
.subject-stats span { font: 500 13px/1.3 var(--display) !important; letter-spacing: 0; text-transform: none; color: var(--muted); }
.materials-tools .count { font-size: 13px; color: var(--muted); }
.material-card .lecture-main small { font: 13px var(--display); color: var(--muted); }
.material-card .job-detail { font: 14px/1.45 var(--display); color: var(--muted); }
.material-open { font: 600 14px var(--display); letter-spacing: 0; text-transform: none; }
.material-wait { font-size: 13px; color: var(--muted); }
.lecture-base-picker { font: 13px var(--display); letter-spacing: 0; text-transform: none; }
.lecture-base-picker select { font-size: 14px; color: var(--text); }
.job-action { font: 14px var(--display); letter-spacing: 0; text-transform: none; }
.job-status { padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 999px !important; background: rgba(255, 255, 255, .05); color: var(--muted); font: 500 13px var(--display); letter-spacing: 0; text-transform: none; }
.job-status.completed { border-color: rgba(145, 173, 121, .38); background: rgba(145, 173, 121, .13); color: var(--good-ink); }
.job-status.failed { border-color: rgba(217, 119, 106, .4); background: rgba(217, 119, 106, .13); color: var(--bad-ink); }
.job-status.leased { border-color: rgba(192, 165, 110, .4); background: rgba(192, 165, 110, .13); color: var(--warn-ink); }
.job-error { color: var(--bad-ink); }
.empty-state p { font-size: 15px; }
.toast { font: 15px/1.45 var(--display); }
.text-button { font-size: 14px; color: var(--muted); }

/* ---------- auth ---------- */
.tagline { font-size: 15px; color: var(--muted); }
.seg button { font: 500 14px var(--display); letter-spacing: 0; text-transform: none; }
.hint { font-size: 14px; color: var(--muted); }
.form-error { font: 14px/1.45 var(--display); }

/* ---------- processing notice ---------- */
.processing-notice { align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid rgba(192, 165, 110, .45); border-radius: 8px; background: #16130d; color: var(--text); }
.processing-notice > i { width: 36px; height: 36px; border-radius: 6px; background: rgba(192, 165, 110, .16); color: var(--warn-ink); font-size: 15px; font-style: normal; }
.processing-notice > div { gap: 6px; }
.processing-notice strong { color: #f0dcae; font-size: 17px; }
.processing-notice span { color: var(--text); font-size: 15px; line-height: 1.5; }
.notice-safe b { color: #f0dcae; }
.notice-more summary { width: fit-content; min-height: 32px; display: flex; align-items: center; color: var(--accent-2); cursor: pointer; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.notice-more p { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- capture and small dialogs ---------- */
.lecture-form label, .knowledge-dialog label { font: 500 14px/1.4 var(--display); letter-spacing: 0; text-transform: none; color: var(--text); }
.lecture-form input, .lecture-form select, .lecture-form textarea, .knowledge-dialog input, .knowledge-dialog textarea { font-size: 16px; }
.state-pill { font-size: 13px; }
.record-status-line { font-size: 13px; }
#record-hint { font-size: 15px; }
.capture-quality, .energy-note, .marker-explainer p, .dropzone > span:nth-of-type(2), .audio-dropzone span { font-size: 14px; }
.consent-row b, .selected-file strong, .context-details summary b { font-size: 15px; }
.consent-row small, .selected-file div span, .context-details summary small, .photo-picker small, .dropzone > small, .audio-dropzone small, .marker-chip, .progress-wrap p, .submit-button small { font-size: 13px; }
.marker-buttons button { font-size: 13px; }
.photo-head { font-size: 14px; }
.confirm-dialog p, .knowledge-info-dialog ol { font-size: 16px; line-height: 1.55; }

/* ---------- lecture reader ---------- */
.result-dialog p, .result-dialog li, .result-dialog small { color: var(--reader-ink); }
.result-dialog .dialog-head, .result-dialog .result-tabs, .result-dialog .dialog-actions { flex: none; }
.result-dialog .dialog-head { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px 14px; }
.reader-heading { min-width: 0; flex: 1; }
.reader-kicker { color: var(--muted); font-size: 13px; }
#result-title { margin: 4px 0 6px; font: 650 clamp(24px, 2.6vw, 34px)/1.15 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.result-meta { gap: 4px 0; color: var(--muted); font-size: 14px; }
.result-meta span + span::before { content: "·"; margin: 0 8px; color: var(--subtle); }
.reader-head-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.reader-controls { margin: 0; }
.reader-controls .icon-btn { min-width: 40px; min-height: 40px; font: 600 14px var(--display); }
.reader-controls span { min-width: 46px; color: var(--muted); font: 13px var(--mono); }
.result-dialog .dialog-close { min-width: 40px; min-height: 40px; font-size: 24px; }
.result-tabs { gap: 4px; padding: 0 22px; }
.result-tab { min-height: 46px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; color: var(--muted); font: 500 15px var(--display); }
.result-tab:hover { color: var(--text); }
.result-tab.is-active { color: var(--text); }
.tab-count { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; background: rgba(192, 165, 110, .18); color: var(--warn-ink); font-size: 12px; font-weight: 600; }
.reading-progress { height: 3px; flex: none; background: var(--line); transition: opacity .2s; }
.reading-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .15s linear; }
.reading-progress.is-idle { opacity: .35; }
.result-scroll { overscroll-behavior: contain; scrollbar-gutter: stable; }
.result-pane { max-width: 70ch; padding: 28px 22px 56px; font-size: var(--fs-reader); line-height: 1.65; }
.result-pane:focus-visible { outline-offset: -4px !important; }
.result-pane h3 { margin: 36px 0 12px; font: 650 22px/1.25 var(--display); letter-spacing: -.02em; }
.result-pane h3:first-child { margin-top: 0; }
.reader-label { margin-bottom: 8px; color: var(--accent-2); font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.summary-overview { color: var(--reader-ink); font-size: var(--fs-reader); line-height: 1.7; }
.pane-intro { margin: 0 0 16px; color: var(--muted) !important; font-size: 15px; line-height: 1.55; }
.pane-intro svg { width: 14px; height: 14px; vertical-align: -2px; }
.summary-list { line-height: 1.65; }
.learning-map { margin: 28px 0 8px; padding: 18px 20px; border: 1px solid var(--line) !important; background: #0f1311 !important; }
.learning-map h3 { margin: 0 0 10px; font-size: 18px; }
.learning-map ul { color: var(--reader-ink); line-height: 1.6; }

/* chapters */
.study-chapter { padding: 36px 0 32px; }
.chapter-head { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; margin-bottom: 18px; }
.chapter-number { width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); color: var(--text); font: 600 13px var(--mono); }
.chapter-head h4 { margin: 2px 0 6px; font: 650 clamp(21px, 2.2vw, 26px)/1.25 var(--display); letter-spacing: -.02em; }
.chapter-head p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.chapter-prose { color: var(--reader-ink); font-size: var(--fs-reader); line-height: 1.7; }
.chapter-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chapter-flags > span { display: none; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(196, 206, 181, .1); color: var(--accent-2); font-size: 13px; }
.chapter-flags svg { width: 13px; height: 13px; fill: none; }
.is-bookmarked .flag-bookmark, .is-understood .flag-understood { display: inline-flex; }
.is-bookmarked .flag-bookmark svg { fill: currentColor; }

/* semantic callouts: dark tinted surfaces, never pale */
.chapter-part.callout { margin-top: 20px; padding: 16px 18px; border: 1px solid; border-left-width: 3px; border-radius: 6px; }
.callout h5 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 650 15px/1.3 var(--display); letter-spacing: .01em; }
.callout-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 5px; background: rgba(255, 255, 255, .07); font: 700 14px/1 var(--display); }
.callout ol, .callout ul { color: var(--reader-ink); font-size: 17px; line-height: 1.65; }
.callout-reasoning { border-color: rgba(196, 206, 181, .18); border-left-color: #b7c1a8; background: #121611; }
.callout-reasoning h5, .callout-reasoning .callout-icon { color: #dfe6d3; }
.callout-formula { border-color: rgba(127, 178, 163, .26); border-left-color: #7fb2a3; background: #0f1715; }
.callout-formula h5, .callout-formula .callout-icon { color: #a9d4c7; }
.callout-example { border-color: rgba(201, 163, 94, .26); border-left-color: #c9a35e; background: #19160f; }
.callout-example h5, .callout-example .callout-icon { color: var(--warn-ink); }
.callout-mistake { border-color: rgba(217, 119, 106, .3); border-left-color: #d9776a; background: #1d1311; }
.callout-mistake h5, .callout-mistake .callout-icon { color: var(--bad-ink); }
.result-dialog .chapter-takeaway { margin-top: 20px; padding: 14px 16px; border: 0; border-left: 3px solid var(--accent); border-radius: 6px; color: var(--text) !important; font-size: 17px; }
.chapter-takeaway strong { color: var(--accent-2); }

/* study actions */
.chapter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--line); }
.study-action { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font: 500 14px var(--display); }
.study-action svg { width: 16px; height: 16px; fill: none; }
.study-action:hover { border-color: rgba(207, 218, 195, .35); color: var(--text); }
.study-action[aria-pressed="true"] { border-color: rgba(196, 206, 181, .55); background: rgba(196, 206, 181, .12); color: var(--text); }
.study-action[data-bookmark][aria-pressed="true"] svg { fill: currentColor; }
.study-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 28px 0 0; padding: 12px 0; border-block: 1px solid var(--line); }
.study-bar p { margin: 0; color: var(--muted) !important; font-size: 14px; }
.study-bar .study-bar-note { color: var(--subtle) !important; font-size: 13px; }
.study-bookmarks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.study-bookmarks-label { color: var(--muted); font-size: 13px; }
.bookmark-chip { max-width: 100%; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; font: 14px var(--display); }
.bookmark-chip svg { width: 13px; height: 13px; flex: none; fill: currentColor; }
.bookmark-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study-continue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 24px; padding: 12px 14px 12px 16px; border: 1px solid rgba(196, 206, 181, .3); border-radius: 8px; background: rgba(196, 206, 181, .06); }
.study-continue p { margin: 0; color: var(--text) !important; font-size: 16px; }
.study-continue > div { display: flex; align-items: center; gap: 6px; }
.self-check-list { padding-left: 22px; }
.self-check + .self-check { margin-top: 18px; }
.self-check-question { margin: 0 0 4px; color: var(--text) !important; }
.text-action { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: transparent; color: var(--accent-2); cursor: pointer; font: 600 14px var(--display); text-decoration: underline; text-underline-offset: 3px; }
.text-action[aria-expanded]::after { content: "▾"; text-decoration: none; transition: transform .2s; }
.text-action[aria-expanded="true"]::after { transform: rotate(180deg); }
.self-check-answer { margin-top: 8px; padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--panel-2); }
.self-check-answer p { margin: 0 0 6px; font-size: 16px; }
.self-check-answer .answer-label { color: var(--accent-2) !important; font-size: 13px; font-weight: 600; }
.self-check-answer .answer-note { color: var(--subtle) !important; font-size: 13px; }

/* timestamps */
.ts-group { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; vertical-align: middle; }
.ts { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: rgba(255, 255, 255, .03); color: var(--accent-2); font: 500 14px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ts svg { width: 14px; height: 14px; flex: none; }
button.ts { cursor: pointer; }
button.ts:hover { border-color: rgba(207, 218, 195, .4); background: rgba(255, 255, 255, .06); }
.ts-play { border-color: rgba(145, 173, 121, .5); background: rgba(145, 173, 121, .1); color: #d3e6be; }
.ts-static { border-style: dashed; color: var(--muted); }
.ts-link { width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.ts-link svg { width: 15px; height: 15px; }
.ts-link:hover { border-color: var(--line-2); color: var(--text); }

/* source status */
.source-status { margin: 0 0 28px; border: 1px solid var(--line-2); border-radius: 8px; background: #0e1210; }
.source-status > summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.source-status > summary::-webkit-details-marker { display: none; }
.source-status-mark { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent-2); font: italic 600 14px Georgia, serif; }
.source-status-line { display: grid; gap: 2px; }
.source-status-line strong { color: var(--text); font-size: 15px; }
.source-status-line span { color: var(--reader-ink); font-size: 15px; line-height: 1.5; }
.source-status-toggle::after { content: "Подробнее"; color: var(--accent-2); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.source-status[open] .source-status-toggle::after { content: "Скрыть"; }
.source-status-list { margin: 0; padding: 0 16px; list-style: none; }
.source-status-list li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.source-state { width: fit-content; height: fit-content; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.tone-gone .source-state { background: rgba(217, 119, 106, .15); color: var(--bad-ink); }
.tone-kept .source-state { background: rgba(145, 173, 121, .15); color: var(--good-ink); }
.tone-none .source-state { background: rgba(255, 255, 255, .07); color: var(--muted); }
.tone-info .source-state { background: rgba(196, 206, 181, .1); color: var(--accent-2); }
.source-status-list strong { color: var(--text); font-size: 15px; }
.source-status-list p { margin: 2px 0 0; color: var(--muted) !important; font-size: 15px; line-height: 1.55; }
.source-status-exports { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.source-status-exports > strong { color: var(--text); font-size: 15px; }
.source-status-exports ul { margin: 6px 0 0; padding-left: 18px; }
.source-status-exports li { color: var(--muted) !important; font-size: 14px; line-height: 1.55; }
.source-status-exports li strong { color: var(--text); font-weight: 600; }
.source-status-exports li.is-unavailable, .source-status-exports li.is-unavailable strong { color: var(--subtle) !important; }

/* evidence, transcript, reference */
.ambiguity-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; font-size: 16px; }
.ambiguity-list li > span:last-child { padding-top: 6px; }
.clip-list { margin: 0; padding: 0; list-style: none; }
.clip-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 14px 0; border-color: var(--line); }
.clip-row strong { font-size: 16px; }
.clip-row small { color: var(--muted) !important; font-size: 14px; }
.clip-row .button { display: inline-flex; gap: 6px; }
.clip-row .button svg { width: 13px; height: 13px; }
.segment { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 4px; }
.segment-text { padding-top: 5px; color: var(--reader-ink); font-size: 17px; line-height: 1.6; }
.segment.is-target { background: rgba(196, 206, 181, .1); box-shadow: inset 3px 0 var(--accent); }
.segment:focus { outline: none; }
.segment:focus-visible { outline: 2px solid var(--focus) !important; }
.reference-block { margin-bottom: 30px; }
.reference-block pre { margin-top: 10px; color: var(--text); font-size: 14px; line-height: 1.55; }
.source-note { color: var(--muted) !important; font-size: 15px; }
.usage-card summary { color: var(--text); font-size: 15px; }
.usage-grid span { background: var(--panel-2); color: var(--muted); font-size: 13px; }
.usage-grid b { color: var(--text); font-size: 15px; }
.result-dialog .usage-note { color: var(--muted); font-size: 13px; }
.lecture-photos-head > span, .photo-loader { font-size: 13px; }
.photo-loader small { font-size: 12px; }

/* shared clip player */
.reader-player { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 22px; border-top: 1px solid var(--line); background: #0d110f; }
.reader-player-copy { min-width: 0; flex: 0 1 280px; display: grid; gap: 2px; }
.reader-player-copy strong { overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.reader-player-copy span { color: var(--muted); font-size: 13px; }
.reader-player audio { min-width: 0; flex: 1; height: 40px; color-scheme: dark; }

/* export footer */
.result-dialog .dialog-actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px 12px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); }
.dialog-actions .button { min-height: 44px; }
#copy-summary svg { width: 16px; height: 16px; flex: none; }
.result-dialog .export-picker { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.export-picker > label { color: var(--muted); font: 500 14px var(--display); letter-spacing: 0; text-transform: none; }
.export-picker select { min-height: 44px; font: 15px var(--display); }
.export-picker select option:disabled { color: #6d746a; }
.export-hint { grid-column: 1 / -1; min-height: 1.45em; margin: 0; color: var(--muted) !important; font-size: 13px; line-height: 1.45; }

@media (max-height: 760px) and (min-width: 581px) {
  .result-dialog .dialog-head { padding-block: 12px 10px; }
  #result-title { font-size: 26px; }
}

@media (max-width: 850px) {
  .result-dialog .dialog-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker tools" "title title" "meta meta"; align-items: center; gap: 2px 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 12px; }
  .reader-heading { display: contents; }
  .reader-kicker { grid-area: kicker; }
  #result-title { grid-area: title; margin: 2px 0 4px; font-size: 22px; }
  .result-meta { grid-area: meta; font-size: 13px; }
  .reader-head-tools { grid-area: tools; }
  .reader-controls { order: 0; width: auto; justify-content: flex-end; }
}

@media (max-width: 580px) {
  .result-tabs { gap: 0; padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
  .result-tab { min-width: max-content; flex: 1 0 auto; justify-content: center; gap: 4px; padding: 0 5px; font-size: 14px; }
  .tab-count { min-width: 20px; height: 20px; padding: 0 5px; }
  .result-pane { padding: 22px 16px 48px; font-size: 17px; }
  .chapter-prose, .summary-overview { font-size: 17px; }
  .chapter-head { grid-template-columns: 36px minmax(0, 1fr); }
  .chapter-head .ts-group { grid-column: 2; justify-self: start; }
  .chapter-part.callout { padding: 14px; }
  .chapter-actions { gap: 6px; }
  .study-action { padding: 7px 9px; }
  .source-status > summary { grid-template-columns: 26px minmax(0, 1fr); row-gap: 4px; }
  .source-status-toggle { grid-column: 2; }
  .source-status-list li { grid-template-columns: 1fr; gap: 6px; }
  .ambiguity-list li { flex-direction: column; gap: 6px; }
  .ambiguity-list li > span:last-child { padding-top: 0; }
  .segment { grid-template-columns: 1fr; gap: 4px; }
  .segment-text { padding-top: 0; }
  .reader-player { flex-wrap: wrap; padding: 8px 12px; }
  .reader-player-copy { flex: 1 1 calc(100% - 48px); }
  .reader-player audio { flex: 1 1 100%; order: 3; }
  /* One row of controls in DOM order (copy → format → download), the explanation below. */
  .result-dialog .dialog-actions { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .result-dialog .export-picker { display: contents; }
  #copy-summary { grid-column: 1; grid-row: 1; width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  #copy-summary .button-label, .export-picker > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .export-picker select { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; min-height: 44px; }
  #download-export { grid-column: 3; grid-row: 1; width: auto; min-height: 44px; padding-inline: 14px; }
  .export-hint { grid-column: 1 / -1; grid-row: 2; min-height: 2.9em; }
  .subject-stats span { font-size: 13px !important; }
  .processing-notice { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .subject-card:hover, .material-card:hover, .button:hover, .btn:hover, .rail-record:hover, .knowledge-base-item:hover, .breadcrumb-button:hover { transform: none !important; }
  .reading-progress span, .text-action::after { transition: none !important; }
}