@import url('/ui/browse.css?v=18.4');
/* Document and reading-PPT layouts; shared tokens/controls come from browse.css. */
main { max-width: 880px; }
a, button { min-height: 44px; }
dl { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 4px 16px; font-size: .9375rem; }
dt { color: var(--muted); } dd { margin: 0; }
.views { padding: 12px 0; margin: 24px 0; border-block: 1px solid var(--border); }
.views [aria-current="page"] { font-weight: 700; color: var(--accent); background: var(--soft); border-color: var(--accent); }
.prose { font-size: 1.0625rem; line-height: 1.9; white-space: pre-wrap; }
.prose p { margin: 0 0 16px; }
.tags { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 4px 8px; margin: 16px 0; }
.tags li { max-width: 100%; overflow-wrap: anywhere; padding: 2px 8px; border-radius: 4px; background: var(--soft); color: var(--muted); font-size: .875rem; }
.report-section { padding-block: 24px; border-top: 1px solid var(--border); scroll-margin-top: 24px; }
.timestamp { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; margin-block: 8px 16px; }
figure { margin: 24px 0; }
img { display: block; width: 100%; max-width: 100%; height: auto; }
figcaption { color: var(--muted); margin-top: 8px; font-size: .875rem; }
.image-error { font-size: 1rem; color: var(--warn); }
main.presenting { max-width: 1440px; }
.presenting #content > header { display: none; }
.slide-controls, .match-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; position: sticky; top: 0; z-index: 1; background: var(--page); padding-block: 8px; gap: 8px; }
#slide-count, .match-controls output { text-align: center; font-variant-numeric: tabular-nums; }
#slide-progress { grid-column: 1 / -1; width: 100%; height: 8px; accent-color: var(--accent); }
.presentation-slide { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: clamp(20px, 3vw, 32px); animation: slide-enter .15s ease-out; }
.presentation-slide h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 8px; }
.slide-label { color: var(--accent); font-weight: 650; font-size: .9375rem; }
.slide-layout { display: grid; gap: 24px; }
.slide-layout.has-images { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.slide-copy, .slide-images { min-width: 0; }
.presentation-slide .prose { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.7; }
.slide-headline { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 650; line-height: 1.7; }
.presentation-slide .oneline { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); }
.presentation-slide .points { margin-top: 12px; }
.slide-glossary { grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: 8px 16px; font-size: 1rem; }
.slide-glossary dt { color: var(--text); font-weight: 650; }
.slide-study { padding-left: 1.4em; } .slide-study li { margin-block: 16px; line-height: 1.7; } .slide-study p { margin: 4px 0; }
.slide-images figure { margin: 0 0 24px; }
.slide-images img { max-height: 65vh; object-fit: contain; }
#slides { touch-action: pan-y pinch-zoom; }
@keyframes slide-enter { from { opacity: .6; } to { opacity: 1; } }
@media (max-width: 800px) {
  .slide-layout.has-images { grid-template-columns: minmax(0, 1fr); }
  .presentation-slide { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .presentation-slide { animation: none; } }
/* schema 2.0 "한눈에 보기" (D-041). Same tokens; cards only for topics, no shadows/gradients. */
.knowledge-intro .headline { font-size: 1.1875rem; font-weight: 650; line-height: 1.6; margin: 0 0 16px; }
.keyword-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.learn { padding-left: 1.4em; margin: 0 0 16px; }
.learn li { margin-block: 8px; padding-left: 4px; font-weight: 600; line-height: 1.7; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.kind { display: inline-block; padding: 1px 6px; border-radius: 4px; color: #fff; font-size: .75rem; font-weight: 700; margin-right: 6px; vertical-align: 1px; white-space: nowrap; }
.kind.video { background: #235a7b; } .kind.screen { background: #5a4a8a; } .kind.opinion { background: #7a5000; } .kind.external { background: #2f6b3a; } .kind.check { background: #8a2525; }
.kind.forecast { background: #1f6a6a; }
/* schema 2.4 speakers: letter + name chip after the kind label; unsure speakers are dashed, never coloured alone. */
.speaker { display: inline-block; padding: 0 6px; margin-right: 6px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-size: .75rem; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.speaker.inferred { border-style: dashed; font-weight: 650; }
.speaker.unknown { border-style: dashed; border-color: var(--muted); color: var(--muted); font-weight: 600; }
.speakers h2 { margin-bottom: 8px; }
.speaker-list { list-style: none; padding: 0; margin: 0 0 8px; }
.speaker-list li { margin-block: 8px; line-height: 1.7; }
.speaker-id { display: inline-block; min-width: 1.6em; text-align: center; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-weight: 700; font-size: .875rem; }
.speaker-basis { display: block; color: var(--muted); font-size: .875rem; }
.topic { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: clamp(16px, 3vw, 24px); margin: 24px 0; scroll-margin-top: 24px; }
.topic-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.topic-head h3 { font-size: 1.25rem; margin: 0; }
.topic-head .timestamp { margin: 0; }
.oneline { font-size: 1.0625rem; font-weight: 650; line-height: 1.7; margin: 12px 0; }
.easy { background: var(--soft); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0 16px; }
.easy p { margin: 0; line-height: 1.8; }
.easy-label { display: block; color: var(--accent); font-size: .8125rem; font-weight: 700; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 12px 0 16px; }
.flow .step { border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 10px; background: var(--surface); }
.flow .arrow { color: var(--muted); }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 16px 0; }
.chart { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.chart h4 { margin: 0 0 8px; font-size: .9375rem; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .bar { fill: var(--bar); } .chart .bar.negative { fill: var(--bar-negative); }
.chart .series-0 { fill: var(--c-video); stroke: var(--c-video); } .chart .series-1 { fill: var(--c-external); stroke: var(--c-external); }
.chart .series-2 { fill: var(--c-opinion); stroke: var(--c-opinion); } .chart .series-3 { fill: var(--c-series3); stroke: var(--c-series3); }
.chart .line { fill: none; stroke-width: 3; }
.chart .axis { stroke: var(--border); } .chart .reference { stroke: var(--c-opinion); stroke-dasharray: 5 4; }
.chart text { font-family: system-ui, sans-serif; font-size: 15px; fill: var(--text); }
.chart .chart-value { fill: var(--muted); font-size: 14px; } .chart .strong { font-weight: 700; fill: var(--text); }
.chart .reference-label { fill: var(--c-opinion); font-size: 13px; }
.chart-basis { font-weight: 600; }
.table-wrap { overflow-x: auto; margin: 16px 0; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table-wrap caption { text-align: left; font-weight: 650; margin-bottom: 8px; }
.table-wrap th, .table-wrap td { border-bottom: 1px solid var(--border); padding: 8px 6px; text-align: left; vertical-align: top; }
.table-wrap th { color: var(--muted); font-weight: 600; }
.points-title { margin: 20px 0 8px; font-size: 1rem; }
.points { list-style: none; padding: 0; margin: 0; }
.point { margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--c-video); background: var(--bg-video); border-radius: 0 var(--radius) var(--radius) 0; line-height: 1.75; }
.point.opinion { border-color: var(--c-opinion); background: var(--bg-opinion); } .point.external { border-color: var(--c-external); background: var(--bg-external); }
.point.check { border-color: var(--c-check); background: var(--bg-check); }
.point.screen { border-color: var(--c-screen); background: var(--bg-screen); }
.point.forecast { border-color: var(--c-forecast); background: var(--bg-forecast); }
.point .verification { margin-top: 4px; font-size: .9375rem; }
.verify { display: inline-block; padding: 0 6px; border: 1px solid currentColor; border-radius: 4px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.verify.confirmed { color: var(--c-external); } .verify.contradicted { color: var(--c-check); } .verify.unverifiable { color: var(--muted); }
.legend-note { color: var(--muted); font-size: .875rem; margin-block: 4px 16px; }
.point .timestamp { margin: 0; }
a.source-link { display: inline; min-height: 0; }
.topic-images figure { margin: 16px 0 0; }
.originality, .glossary, .further-study { margin: 40px 0; }
.further-study ol { padding-left: 1.4em; }
.further-study li { margin-block: 16px; line-height: 1.7; }
.further-study li p { margin: 4px 0; }
.further-study .start-with, .slide-study .start-with { color: var(--muted); }
a.related-topic { display: inline-flex; align-items: center; }
.glossary dl { grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: 8px 16px; font-size: 1rem; }
.glossary dt { color: var(--text); font-weight: 650; }
.transcript-line { margin: 0; padding-block: 12px; scroll-margin-block: 80px; }
.transcript-line p { margin-block: 4px; white-space: pre-wrap; line-height: 1.9; overflow-wrap: anywhere; }
.transcript-line .timestamp { font-size: .8125rem; line-height: 1.6; }
.transcript-line.cited-line { background: var(--soft); padding-inline: 8px; border-radius: var(--radius); }
a.time-link { display: inline; min-height: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a.video-link { display: inline; min-height: 0; color: var(--accent); font-size: .875rem; white-space: nowrap; text-underline-offset: 2px; }
#player { width: min(960px, calc(100% - 32px)); max-width: none; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
#player::backdrop { background: rgb(0 0 0 / .6); }
#youtube-choice { width: min(420px, calc(100% - 32px)); padding: 20px; border: 1px solid var(--border); border-radius: 8px; }
#youtube-choice::backdrop { background: rgb(0 0 0 / .45); }
#youtube-choice h2 { margin: 0 0 8px; font-size: 1.125rem; }
#youtube-choice p { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }
.choice-actions { display: grid; gap: 8px; }
#youtube-app { font-weight: 700; color: var(--accent); border-color: var(--accent); }
#transcript-back { grid-column: 1 / -1; justify-self: start; font-weight: 650; color: var(--accent); }
#transcript-back[hidden] { display: none; }
.player-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.player-head h2 { margin: 0; font-size: 1.125rem; }
#player-video { display: block; width: 100%; max-height: 70vh; background: #000; border-radius: 6px; }
#player-message:empty { display: none; }
mark { background: var(--search-mark); color: var(--text); }
mark.current-match { background: var(--accent); color: var(--surface); outline: 2px solid var(--accent); outline-offset: 2px; }
.match-controls { margin-block: 16px; border-bottom: 1px solid var(--border); }
.match-controls button { font-size: .9375rem; padding-inline: 8px; }
#transcript-search { grid-template-columns: minmax(0, 1fr) auto auto; max-width: none; }
#transcript-search label { grid-column: 1 / -1; }
.search-result { border-top: 1px solid var(--border); padding-block: 24px; }
.search-result h2 { font-size: 1.125rem; }
.search-result > p { color: var(--muted); font-size: .9375rem; margin: 4px 0 8px; }
.search-match { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: 8px 16px; margin-block: 8px; }
.match-source { display: block; color: var(--muted); font-size: .8125rem; margin-bottom: 4px; }
a.match-source { display: flex; align-items: center; min-height: 44px; width: fit-content; max-width: 100%; }
.match-text { display: block; line-height: 1.8; white-space: pre-wrap; }
#search-form { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; align-items: end; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#warning { color: var(--warn); }
#warning:empty, #transcript-message:empty { display: none; }
[data-page="report"] #message, [data-page="search"] #message { color: var(--text); }
[data-page] #message.error { color: var(--error); }
@media (max-width: 600px) {
  .search-match { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #search-form { grid-template-columns: minmax(0, 1fr); }
  #transcript-search { grid-template-columns: minmax(0, 1fr) auto; }
  #transcript-query { grid-column: 1 / -1; }
  #transcript-search button { width: 100%; }
}
/* Reading position rail: chapter segments sized by page height. Wide screens: a fixed vertical rail at the
   right edge (segments are buttons, tip on hover/focus). Narrow screens: a bottom bar with the current chapter. */
#reading-rail { display: block; position: fixed; z-index: 2; }
#reading-rail[hidden] { display: none; }
#reading-rail-track { display: flex; gap: 2px; }
button.rail-segment { position: relative; display: block; flex: 1 1 0; min-width: 0; min-height: 3px; padding: 0; border: 0; border-radius: 2px; background: var(--border); cursor: pointer; }
.rail-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: top; transform: scaleY(var(--fill, 0)); }
.rail-tip { display: none; }
@media (min-width: 940px) {
  #reading-rail { top: 15vh; bottom: 15vh; right: 12px; width: 24px; }
  #reading-rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #reading-rail-track { flex-direction: column; height: 100%; }
  button.rail-segment { width: 100%; background: transparent; }
  /* The visible bar is 6px; the button keeps a 24px pointer width. */
  button.rail-segment::before { content: ""; position: absolute; inset: 0 9px; border-radius: 3px; background: var(--border); }
  .rail-fill { inset: 0 9px; border-radius: 3px; }
  button.rail-segment[aria-current]::before { background: var(--rail-active); }
  button.rail-segment:not(:disabled):hover { background: transparent; }
  button.rail-segment:hover::before { background: var(--rail-active); }
  button.rail-segment:hover .rail-tip, button.rail-segment:focus-visible .rail-tip { display: block; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: max-content; max-width: 18rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: .8125rem; text-align: left; white-space: normal; }
}
@media (max-width: 939.98px) {
  #reading-rail { left: 0; right: 0; bottom: 0; padding: 4px 16px 8px; background: var(--page); border-top: 1px solid var(--border); }
  #reading-rail-label { line-height: 44px; margin: 0 0 4px; padding-right: var(--tools-width, 0px); overflow: hidden; color: var(--muted); font-size: .8125rem; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  #reading-rail-track { height: 4px; pointer-events: none; }
  button.rail-segment { height: 4px; }
  .rail-fill { transform-origin: left; transform: scaleX(var(--fill, 0)); }
  main:has(#reading-rail:not([hidden])) { padding-bottom: 88px; }
  #reading-rail { --tools-width: 170px; }
}
/* Glossary terms (2.x): dotted underline only where the reader's mode makes them interactive. */
.terms-first .term.first, .terms-all .term { padding: 0 3px; border: 1px solid var(--accent); border-radius: 4px; background: var(--soft); cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.terms-first .term.first:hover, .terms-all .term:hover { background: var(--term-hover); }
#reader-tools { position: fixed; z-index: 3; right: 12px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#glossary-button, #notes-button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--accent); border-radius: 22px; background: var(--surface); color: var(--accent); font-weight: 700; }
#glossary-button[hidden] { display: none; }
#glossary-sheet, #term-dialog { width: min(560px, calc(100% - 32px)); max-height: min(80vh, 720px); padding: 16px 20px 20px; border: 1px solid var(--border); border-radius: 8px; }
#glossary-sheet::backdrop, #term-dialog::backdrop { background: rgb(0 0 0 / .45); }
.sheet-head { position: sticky; top: -16px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -16px 0 12px; padding: 16px 0 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
#glossary-sheet, #term-dialog, #notes-sheet { overflow-y: auto; overscroll-behavior: contain; }
.sheet-head h2 { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
#glossary-search { width: 100%; }
.sheet-settings { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0; font-size: .875rem; color: var(--muted); }
.sheet-settings label { display: flex; align-items: center; gap: 8px; }
#glossary-list h3 { margin: 16px 0 4px; font-size: .875rem; color: var(--muted); }
#glossary-list ul { list-style: none; padding: 0; margin: 0; }
button.glossary-item { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; text-align: left; line-height: 1.5; }
button.glossary-item span { color: var(--muted); font-size: .9375rem; }
#term-meaning { font-size: 1.0625rem; line-height: 1.7; margin: 0 0 12px; }
#term-known { margin-bottom: 16px; font-size: .9375rem; }
.terms-first .term.first.known, .terms-all .term.known { padding: 0; border: 0; background: none; cursor: auto; }
.terms-first .term.first.known:hover, .terms-all .term.known:hover { background: none; }
button.glossary-item em { color: var(--accent); font-size: .8125rem; font-style: normal; }
.ask-hint { margin: 0 0 8px; color: var(--muted); font-size: .875rem; }
.ask-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 8px; }
.ask-actions button { font-weight: 650; padding-inline: 4px; word-break: keep-all; overflow-wrap: normal; }
.ask-preview { margin: 12px 0 0; }
#ask-question { margin: 4px 0 8px; padding: 8px 12px; border-radius: var(--radius); background: var(--soft); line-height: 1.6; user-select: text; -webkit-user-select: text; }
#ask-message { margin: 12px 0 0; color: var(--muted); font-size: .875rem; }
#ask-message:empty { display: none; }
@media (max-width: 939.98px) {
  #glossary-sheet, #term-dialog { width: calc(100% - 16px); margin: auto 8px 8px; max-height: 85vh; }
  /* Phones: the reader buttons sit in the bottom bar's label row instead of floating over the text. */
  #reader-tools { right: 16px; bottom: 12px; flex-direction: row; }
  #glossary-button, #notes-button { padding: 4px 14px; }
}
/* Reader highlights and notes (D-056). Colours are paired with names in the bar and the list. */
mark.hl { color: var(--text); border-radius: 2px; cursor: pointer; }
/* White: a white mark with black text whatever the theme (recommended on dark); links and terms inside stay readable. */
mark.hl.white { background: #fff; color: #111; box-shadow: inset 0 -3px #8a96a0; }
mark.hl.white a, mark.hl.white .speaker { color: #235a7b; border-color: #235a7b; }
mark.hl.white .term { background: transparent; color: inherit; border-color: #8a96a0; }
mark.hl.white.note-end::after { color: #235a7b; }
mark.hl.yellow { background: var(--hl-yellow); box-shadow: inset 0 -3px var(--hl-yellow-bar); } mark.hl.green { background: var(--hl-green); box-shadow: inset 0 -3px var(--hl-green-bar); } mark.hl.blue { background: var(--hl-blue); box-shadow: inset 0 -3px var(--hl-blue-bar); }
mark.hl.note-end::after { content: "✎"; margin-left: 2px; color: var(--accent); font-size: .8em; font-weight: 700; }
mark.hl.flash { outline: 3px solid var(--accent); outline-offset: 2px; }
#notes-button[hidden], #annotate-bar[hidden], .annotate-actions[hidden] { display: none; }
#annotate-bar { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.annotate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 880px; margin: 0 auto; }
#annotate-highlight { font-weight: 700; color: var(--accent); border-color: var(--accent); }
#annotate-white { background: #fff; color: #111; border-bottom: 4px solid #8a96a0; line-height: 1.2; }
#annotate-white small { display: block; font-size: .6875rem; color: #53616b; }
#annotate-yellow { background: var(--hl-yellow); border-bottom: 4px solid var(--hl-yellow-bar); color: var(--text); } #annotate-green { background: var(--hl-green); border-bottom: 4px solid var(--hl-green-bar); color: var(--text); } #annotate-blue { background: var(--hl-blue); border-bottom: 4px solid var(--hl-blue-bar); color: var(--text); }
#annotate-message { margin: 4px 0 0; text-align: center; color: var(--error); font-size: .875rem; }
#annotate-message:empty { display: none; }
#note-dialog, #notes-sheet { width: min(560px, calc(100% - 32px)); max-height: min(85vh, 720px); padding: 16px 20px 20px; border: 1px solid var(--border); border-radius: 8px; }
#note-dialog::backdrop, #notes-sheet::backdrop { background: rgb(0 0 0 / .45); }
#note-dialog h2 { margin: 0 0 8px; font-size: 1.125rem; }
#note-quote { margin: 0 0 12px; padding: 8px 12px; border-left: 4px solid var(--hl-yellow-bar); background: var(--soft); color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
#note-dialog label { display: block; margin-bottom: 4px; font-weight: 650; }
#note-text { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.6; padding: 8px 12px; color: var(--text); background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); resize: vertical; }
.note-actions { display: flex; gap: 8px; margin-top: 12px; }
#note-save { font-weight: 700; color: var(--accent); border-color: var(--accent); }
#note-message:empty { display: none; }
#notes-list ul { list-style: none; padding: 0; margin: 0; }
button.note-jump { display: grid; gap: 4px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); border-left: 4px solid; border-radius: 0; background: transparent; text-align: left; line-height: 1.6; }
button.note-jump.white { border-left-color: #8a96a0; } button.note-jump.yellow { border-left-color: var(--hl-yellow-bar); } button.note-jump.green { border-left-color: var(--hl-green-bar); } button.note-jump.blue { border-left-color: var(--hl-blue-bar); }
.note-color { color: var(--muted); font-size: .8125rem; }
button.note-jump q { overflow-wrap: anywhere; }
.note-body { white-space: pre-wrap; font-weight: 600; }
button.note-jump em { color: var(--error); font-size: .8125rem; font-style: normal; }
@media (max-width: 939.98px) {
  #note-dialog, #notes-sheet { width: calc(100% - 16px); margin: auto 8px 8px; }
}
/* PDF via the browser print dialog: report body only, colours kept, cards/images not split. */
@media print {
  @page { margin: 14mm 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }
  main { max-width: none; margin: 0; padding: 0; }
  main > nav, #logout, #access, #message, .views, #category-link, #print-report, #presentation-panel,
  #transcript-panel, #replace-report, #report-panel .hint, #player, #youtube-choice, .video-link, #reading-rail, #glossary-button, #glossary-sheet, #term-dialog, #notes-button, #annotate-bar, #note-dialog, #notes-sheet { display: none !important; }
  a, button { min-height: 0; }
  .term { text-decoration: none !important; }
  h2, h3, .topic-head { break-after: avoid; }
  .topic-head, .oneline, .easy, .flow, .point, .chart, figure, .table-wrap tr, .learn li, .glossary dt, .glossary dd { break-inside: avoid; }
  .table-wrap { overflow: visible; }
  figure img { width: auto; max-width: 100%; max-height: 120mm; margin-inline: auto; }
}