/* Reading surfaces use the phone's paired paper/ink roles. Keep these scoped:
   room ink must not leak onto a light popover, nor daylight ink onto dark paper.
   No changes to the shared palette, saved content, or transcript acquisition. */

/* The player canvas is the phone's transcript surface in either room. */
/* Library rows own an inner scroller; a photo/TikTok reader instead needs
   the pane itself to scroll. Keep the sticky Back bar inside that scroller. */
:root body .pane-left.lib-v2 .pane-body:has(> :is(.reader-surface-photo, .reader-surface-tiktok, .reader-surface-uploaded-video, .reader-listening)) {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
}
:root body .reader-photo-polaroid {
  max-width: 100%;
}
:root body .reader-photo-polaroid .reader-photo-img {
  height: auto;
}
:root body .reader-header-transcript[hidden] {
  display: none;
}

/* Personal video has a generous viewing size. Reserve room for words only
   after Transcript opens; neither state replaces or restarts the player. */
:root body .reader-content-uploaded-video {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 14px 24px 36px;
}
:root body .reader-content-uploaded-video .reader-uploaded-video-frame {
  width: min(760px, 100%);
  max-width: 100%;
  margin: 0 auto 22px;
}
:root body .reader-content-uploaded-video .reader-uploaded-video-frame.is-portrait {
  width: min(540px, 100%);
}
:root body .reader-content-uploaded-video .reader-uploaded-video-stage,
:root body .reader-content-uploaded-video .reader-video-player {
  max-height: none;
  height: auto;
}
:root body .reader-content-uploaded-video.is-transcript-open .reader-uploaded-video-frame.is-portrait {
  width: min(360px, calc(42dvh * var(--uploaded-video-aspect, .5625)), 100%);
}
:root body .reader-content-uploaded-video.is-transcript-open .reader-uploaded-video-stage,
:root body .reader-content-uploaded-video.is-transcript-open .reader-video-player {
  max-height: min(42dvh, 420px);
}
:root body .reader-content-uploaded-video .reader-uploaded-video-transcript {
  width: min(680px, 100%);
  min-height: 0;
  overflow: visible;
  padding-bottom: 18px;
}
:root body .reader-content-uploaded-video .reader-transcript-scroll {
  max-height: 48dvh;
  overflow-y: auto;
}
:root body .reader-content-uploaded-video :is(.reader-uploaded-video-frame:fullscreen, .reader-media-app-expanded) {
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  margin: 0 !important;
}
:root body .reader-content-uploaded-video :is(.reader-uploaded-video-frame:fullscreen, .reader-media-app-expanded) :is(.reader-uploaded-video-stage, .reader-video-player),
:root body .reader-content-uploaded-video .reader-video-player:fullscreen {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

:root body .reader-youtube-transcript-pane {
  color-scheme: light dark;
  --reader-surface-ink: var(--yd-player-ink);
  --reader-surface-muted: var(--yd-player-muted);
  --reader-surface-accent: var(--yd-action);
  --paper-ink: var(--yd-player-ink);
  --ink: var(--yd-player-ink);
  --ink-light: var(--yd-player-muted);
  --ink-faint: var(--yd-player-muted);
  --border: var(--yd-player-button-border);
  background: var(--yd-player-canvas);
  color: var(--yd-player-ink);
  border-color: var(--yd-player-button-border);
}
:root body .reader-youtube-transcript-pane-header {
  border-color: var(--yd-player-button-border);
}
:root body .reader-youtube-transcript-pane-header h2 {
  color: var(--yd-player-ink);
  font-weight: 600;
}
:root body .reader-youtube-transcript-pane-header span,
:root body .reader-youtube-transcript-close,
:root body .reader-youtube-transcript-message {
  color: var(--yd-player-muted);
}
:root body .reader-youtube-transcript-close:hover {
  color: var(--yd-player-ink);
}
:root body .reader-youtube-transcript-close {
  margin-left: auto;
}
:root body .reader-youtube-transcript-note {
  color: var(--yd-player-ink);
  background: var(--yd-paper-tint);
  font: 500 15px/1.5 var(--sans);
}
:root body .reader-youtube-transcript-body .reader-transcript-tools-pane {
  background: var(--yd-player-canvas);
  border-color: var(--yd-player-button-border);
}

/* An understated outlined action, like the phone player—not a green badge. */
:root body .reader-close {
  flex-shrink: 0;
  white-space: nowrap;
}
[data-theme="dark"] body .reader-close {
  color: var(--yd-tool-ink);
  border-color: var(--yd-tool-border);
}
:root body .reader-media-header-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root body .reader-youtube-transcript-toggle {
  background: var(--yd-player-button-fill);
  border: 1px solid var(--yd-player-button-border);
  color: var(--yd-player-ink);
  box-shadow: none;
  font: 500 16px/1.2 var(--serif);
  text-transform: none;
  letter-spacing: 0;
}
:root body .reader-youtube-transcript-toggle:is(:hover, [aria-expanded="true"]) {
  background: var(--yd-tool);
  color: var(--yd-tool-ink);
  box-shadow: none;
}
:root body :is(.reader-youtube-transcript-retry, .reader-youtube-transcript-open, .reader-transcript-follow) {
  color: var(--yd-player-ink);
  background: var(--yd-player-button-fill);
  border-color: var(--yd-player-button-border);
}
:root body :is(.reader-youtube-transcript-retry, .reader-youtube-transcript-open, .reader-transcript-follow):hover {
  background: var(--yd-tool);
  color: var(--yd-tool-ink);
}

/* Keep the familiar transcript face, with a little more size, weight and air. */
:root body .reader-youtube-transcript-scroll,
:root body .reader-youtube-transcript-scroll .reader-chunk p.reader-passage {
  font: 500 18px/1.7 var(--sans);
}
:root body .reader-youtube-transcript-scroll .reader-cue-timestamp {
  color: var(--yd-action);
  font-size: 14px;
  font-weight: 500;
}
:root body .reader-transcript-scroll .reader-passage {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
}
:root body .reader-transcript-search {
  min-height: 42px;
}
:root body .reader-transcript-search input {
  font: 500 16px/1.5 var(--sans);
}
:root body .reader-transcript-search input::placeholder {
  opacity: 1;
}
:root body .reader-transcript-search svg {
  width: 18px;
  height: 18px;
}
:root body .reader-transcript-search-status {
  font: 500 13px/1.5 var(--sans);
}
:root body :is(.reader-youtube-transcript-scroll, .reader-transcript-scroll) {
  --transcript-playing: color-mix(in srgb, var(--yd-media-amber) 25%, transparent);
}
:root body :is(.reader-youtube-transcript-scroll, .reader-transcript-scroll) .reader-transcript-cue.transcript-active {
  color: inherit;
  background: var(--transcript-playing);
  box-shadow: 0 0 0 3px var(--transcript-playing);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
:root body :is(.reader-youtube-transcript-scroll, .reader-transcript-scroll) .reader-chunk.transcript-active {
  border-left-color: var(--yd-player-progress);
  background: var(--transcript-playing);
}
/* A selected passage takes the familiar sticky-paper colour, not navy ink. */
:root body :is(.reader-youtube-transcript-pane, .reader-transcript-scroll, .reader-reading-pane) ::selection {
  color: var(--yd-note-ink);
  background: var(--yd-yellow-note);
}

/* Saved articles: typography and images stay intact; only surface ink changes. */
/* Size-contained reading copy needs an explicit width in the expanded flex
   pane; otherwise its parent shrinks to the width of the Back button. */
:root body .panes.expand-left .reader-surface-live {
  width: 100%;
  padding: 0;
}
:root body .panes.expand-left .reader-surface-live .reader-content-article {
  padding: 0;
}
:root body .panes.expand-left .reader-surface-live .reader-close-bar {
  width: 100%;
  margin: 0;
}
:root body .reader-reading-pane {
  --paper-ink: var(--yd-ink);
  --paper-ink-light: var(--yd-light-ink);
  --paper-muted: var(--yd-room-muted);
  --paper-border: var(--yd-tool-border);
  --paper-action: var(--yd-action);
}
:root body .reader-reading-pane :is(.reader-reading-bar strong, .reader-copy-header h1, .reader-article-body, .reader-website-overview-card h2),
:root body.two-pane .reader-reading-pane :is(.reader-reading-bar strong, .reader-copy-header h1, .reader-article-body, .reader-website-overview-card h2),
:root body.two-pane .reader-reading-pane .reader-chunk,
:root body.two-pane .reader-reading-pane .reader-chunk :is(p, li, blockquote, h1, h2, h3),
:root body .reader-reading-pane .reader-chunk,
:root body .reader-reading-pane .reader-chunk :is(p, li, blockquote, h1, h2, h3) {
  color: var(--yd-ink);
}
:root body .reader-reading-pane :is(.reader-copy-dek, .reader-website-overview-card p),
:root body.two-pane .reader-reading-pane :is(.reader-copy-dek, .reader-website-overview-card p) {
  color: var(--yd-light-ink);
}
:root body .reader-reading-pane :is(.reader-reading-bar span, .reader-reading-origin, .reader-copy-meta),
:root body.two-pane .reader-reading-pane :is(.reader-reading-bar span, .reader-reading-origin, .reader-copy-meta) {
  color: var(--yd-room-muted);
}
:root body .reader-reading-pane :is(.reader-copy-publication, .reader-website-overview-card > span) {
  color: var(--yd-coral);
}
:root body .reader-reading-pane .reader-website-overview-card {
  background: var(--yd-paper-tint);
  border-color: var(--yd-tool-border);
}
:root body .reader-reading-pane .reader-copy-header {
  border-color: var(--yd-tool-border);
}
:root body.two-pane .reader-reading-pane .reader-reading-actions :is(button, a),
:root body .reader-reading-pane .reader-chunk a {
  color: var(--yd-action);
}

/* Add-source sheets and text prompts follow the phone's add-sheet material.
   Sticky-note editors keep their own coloured paper and dark note ink. */
:root body .lib-add-sheet,
:root body .confirm-card:not(.sticky-note-editor) {
  --ink: var(--yd-tool-ink);
  --ink-primary: var(--yd-tool-ink);
  --ink-light: var(--yd-tool-muted);
  --ink-faint: var(--yd-tool-muted);
  --ink-secondary: var(--yd-tool-muted);
  --border: var(--yd-tool-border);
  background: var(--yd-add-sheet-canvas);
  color: var(--yd-tool-ink);
  border-color: var(--yd-tool-border);
}
:root body .lib-add-sheet .lib-add-sheet-item {
  color: var(--yd-tool-ink);
}
:root body .lib-add-sheet :is(.lib-add-sheet-sub, svg) {
  color: var(--yd-tool-muted);
}
:root body .confirm-card:not(.sticky-note-editor) .confirm-title {
  color: var(--yd-tool-ink);
}
:root body .confirm-card:not(.sticky-note-editor) .confirm-input {
  color: var(--yd-tool-ink);
  background: var(--yd-tool);
  border-color: var(--yd-tool-border);
}
:root body .confirm-card:not(.sticky-note-editor) .confirm-input::placeholder {
  color: var(--yd-tool-muted);
}
:root body .confirm-card:not(.sticky-note-editor) .confirm-cancel {
  color: var(--yd-tool-muted);
  border-color: var(--yd-tool-border);
}
/* Desk navigation uses the same materials and type as Add to Desk. */
body.desk-scope .dv-desk-tools {
  position: fixed;
  top: calc(var(--header-h, 64px) + 16px);
  right: 32px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
}
body.desk-scope .dv-desk-tools .dv-playlist-inbox {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  font: 500 16px/1.25 var(--serif);
  min-height: 46px;
  border-radius: 7px;
}
.dv-inbox-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 12px;
  background: var(--yd-desk-add-ink);
  color: var(--yd-card-paper);
  font: 600 13px/1.5 var(--sans);
}
.dv-inbox-count[hidden] { display: none; }
body.desk-scope .dv-playlist-arrival-card {
  position: fixed;
  right: 32px;
  top: calc(var(--header-h, 64px) + 80px);
  z-index: 89;
  width: min(410px, calc(100vw - 48px));
  max-height: calc(100dvh - var(--header-h, 64px) - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border: 1px solid var(--yd-tool-border);
  border-radius: 6px;
  background: var(--yd-card-paper);
  color: var(--yd-card-ink);
  box-shadow: 0 12px 30px #0003;
}
.playlist-arrival-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; font: 15px/1.4 var(--sans); }
.playlist-arrival-card-head button { color: inherit; font: 23px/1 var(--sans); padding: 5px; }
.dv-playlist-arrival-card h2 { font: 500 27px/1.25 var(--serif); margin: 18px 0 10px; overflow-wrap: anywhere; }
.dv-playlist-arrival-card .playlist-share-meta { color: inherit; font-size: 14px; }
.dv-playlist-arrival-card .playlist-share-faces { height: auto; gap: 10px; padding: 0; }
.dv-playlist-arrival-card .playlist-share-faces .lib-thumb { width: 0; flex: 1 1 0; height: 92px; margin: 0; transform: none; border-width: 2px; }
.playlist-arrival-note { padding: 15px; background: var(--yd-yellow-note); color: #342b20; font: italic 18px/1.5 var(--serif); overflow-wrap: anywhere; }
.playlist-arrival-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.dv-playlist-arrival-card .lib-collection-action { color: inherit; font-size: 16px; }
.playlist-arrival-actions > button:first-child { border: 1px solid var(--yd-tool-border); border-radius: 5px; padding: 10px 15px; }
.dv-playlist-arrival-card button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
body.desk-scope .dv-navigation,
body.desk-scope .dv-view-switch,
body .ws-visual-toolbar .dv-view-switch {
  z-index: 90;
  display: flex;
  border: 1px solid var(--yd-desk-control-border);
  border-radius: 7px;
  background: var(--yd-desk-add-fill);
  color: var(--yd-desk-add-ink);
  box-shadow: 0 3px 10px rgba(30, 26, 18, .10);
}
body.desk-scope .dv-navigation { position: fixed; left: 242px; bottom: 42px; }
body.desk-scope .dv-view-switch,
body .ws-visual-toolbar .dv-view-switch { position: static; }
body .dv-navigation button,
body .dv-view-switch button {
  min-width: 46px;
  min-height: 46px;
  padding: 9px 14px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: 500 16px/1.25 var(--serif);
  cursor: pointer;
}
body .dv-navigation button + button { border-left: 1px solid var(--yd-desk-control-border); border-radius: 0 6px 6px 0; }
body :is(.dv-navigation, .dv-view-switch) button:hover:not(:disabled),
body .dv-view-switch button[aria-pressed="true"] { background: color-mix(in srgb, currentColor 14%, transparent); }
body :is(.dv-navigation, .dv-view-switch) button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
body .dv-navigation button:disabled { opacity: .4; cursor: default; }
.dv-navigation-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Grid has its own order; spatial positions and pile membership stay intact. */
body .dv-grid-view .dv-spot.dv-pile-inactive,
body .dv-grid-view .dv-handle { display: none !important; }
body .dv-grid-view .dv-spot > .dv-item,
body .dv-grid-view .dv-spot > .dv-chapter,
body .dv-grid-view .dv-pocket-deck-stage,
body .dv-grid-view .dv-pocket-deck-stage > .dv-item { transform: none !important; zoom: 1 !important; }
body .dv-grid-view .dv-spot {
  cursor: pointer;
  /* Spatial pile coordinates should not animate through the Grid. */
  transition: none !important;
}
body .dv-grid-view .dv-pile-active { filter: drop-shadow(5px 5px 0 var(--yd-desk-control-border)); }
body .dv-grid-view .dv-spot { cursor: grab; }
body .dv-grid-reordering, body .dv-grid-reordering * { cursor: grabbing !important; user-select: none !important; }
body .dv-grid-view .dv-grid-placeholder {
  opacity: .22;
  outline: 3px dashed var(--yd-desk-control-border);
  outline-offset: 6px;
}
.dv-grid-drag-float { position: fixed; z-index: 10; pointer-events: none; }
.dv-grid-drag-ghost { position: relative; opacity: .94; filter: drop-shadow(0 12px 18px #0005); }
.dv-grid-drag-ghost > :is(.dv-item, .dv-chapter, .dv-pocket-deck-stage),
.dv-grid-drag-ghost .dv-pocket-deck-stage > .dv-item { transform: none !important; zoom: 1 !important; }
.dv-grid-drag-ghost :is(.dv-handle, .dv-remove, .dv-object-actions, .dv-pile-tools) { display: none !important; }

@media (max-width: 900px) {
  body.desk-scope .dv-add-source-wrap { left: 24px; bottom: 24px; }
  body.desk-scope .dv-navigation { left: 190px; bottom: 24px; }
  body.desk-scope .dv-desk-tools { right: 16px; gap: 8px; }
}
/* Listening keeps the existing player mounted, including embedded videos. */
.reader-listen-focus {
  font: 16px var(--serif, Georgia, serif); color: var(--ink); background: transparent;
  border: 1px solid var(--ink-faint); border-radius: 24px; padding: 7px 14px;
  cursor: pointer;
}
.reader-listening-bar {
  position: fixed; z-index: 90; bottom: 20px; left: 24px;
  width: min(480px, calc(100vw - 48px)); box-sizing: border-box;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 6px 12px;
  padding: 12px 16px; border: 1px solid var(--ink-faint); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 6px 24px #0002;
  font-family: var(--font-body, Georgia, serif); font-size: 16px;
}
.reader-listening-bar[hidden] { display: none; }
.reader-listening-bar-overlay {
  z-index: 901;
  left: 50%; transform: translateX(-50%);
}
/* The Library/Desk overlay normally sizes its paper to its contents. Focus
   needs a definite height so the transcript's flex scroller has room. */
.dv-reader-body:has(> .reader-transcript-focused) {
  height: calc(100dvh - 48px);
  display: flex; flex-direction: column;
}
:root body .dv-reader-body > .reader-transcript-focused {
  flex: 1 1 0; width: 100%; box-sizing: border-box;
}
.reader-listening-title { grid-column: 2; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-listening-bar button { font: inherit; color: inherit; border: 0; background: none; padding: 3px 0; cursor: pointer; }
.reader-listening-bar button:first-of-type { grid-column: 1; grid-row: 1 / 3; }
.reader-listening-bar button:last-child { grid-column: 3; grid-row: 1; text-align: right; font-size: 14px; }
.reader-listening-time { grid-column: 3; grid-row: 2; text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.reader-listening-bar input { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; accent-color: var(--ink); }
:root body .reader-transcript-focused {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding-bottom: 110px !important;
}
.reader-transcript-focused .reader-close-bar { flex: 0 0 auto; }
.reader-transcript-focused > .reader-header { display: none; }
.reader-transcript-focused .reader-content > .reader-media-frame {
  height: 0 !important; min-height: 0 !important; overflow: hidden !important;
  visibility: hidden !important; pointer-events: none; box-shadow: none !important;
  margin: 0 !important; padding: 0 !important;
}
/* Keep the transcript itself as the scroll owner. Letting its full height
   overflow a fixed-height media/web reader clips long recordings and also
   disconnects Follow playback from the scroller it already controls. */
:root body .reader-transcript-focused .reader-content {
  width: 100%; max-width: 880px; margin: 0 auto; padding: 16px 24px 0;
  display: flex; flex-direction: column; flex: 1 1 0; min-height: 0;
  overflow: hidden;
}
:root body .reader-transcript-focused :is(
  .reader-header-transcript, .reader-podcast-transcript, .reader-audio-transcript,
  .reader-uploaded-video-transcript, .reader-youtube-workspace,
  .reader-youtube-transcript-pane, .reader-youtube-transcript-body
) {
  display: flex; flex-direction: column; flex: 1 1 0;
  min-height: 0; max-height: none; width: 100%; overflow: hidden;
  margin-top: 0;
}
:root body .reader-transcript-focused .reader-transcript-scroll {
  flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto;
}
/* Older meeting recordings render passages directly in the drawer. */
:root body .reader-transcript-focused .reader-header-transcript:not(:has(.reader-transcript-scroll)) {
  display: block; overflow-y: auto;
}
.reader-transcript-focused :is(.reader-transcript-tools, .reader-youtube-transcript-note, .reader-youtube-transcript-pane-header) {
  flex-shrink: 0;
}
.editor-reference-formatted { color: inherit; font: inherit; line-height: 1.6; margin-top: 6px; }
.citation-add-btn { margin-right: 12px; font: inherit; }
.reader-transcript-focused .reader-youtube-workspace { display: block; }
.reader-transcript-focused .reader-youtube-video-side {
  position: fixed; left: 24px; bottom: 116px; width: 240px; z-index: 89;
}
.reader-transcript-focused .reader-youtube-transcript-pane { width: 100%; max-height: none; }
/* Leave the live YouTube iframe visible during writing Focus. Reparenting
   an iframe reloads it; changing only its layout preserves playback. */
@media (min-width: 701px) {
  .panes.expand-center .pane-left:has(.reader-youtube-player) {
    position: fixed; left: 24px; bottom: 116px; top: auto;
    width: 280px !important; min-width: 280px !important; height: 158px;
    overflow: hidden; z-index: 89;
  }
  .panes.expand-center .pane-left:has(.reader-youtube-player) .pane-body { padding: 0; height: 158px; overflow: hidden; }
  .reader-writing-listening { padding: 0 !important; margin: 0 !important; }
  .reader-writing-listening > :not(.reader-content),
  .reader-writing-listening .reader-youtube-transcript-pane { display: none !important; }
  .reader-writing-listening .reader-content,
  .reader-writing-listening .reader-youtube-workspace { padding: 0 !important; margin: 0 !important; display: block; }
  .reader-writing-listening .reader-youtube-video-side { position: static; width: 100%; }
  .reader-writing-listening .reader-youtube-frame { width: 280px !important; height: 158px !important; padding: 0 !important; margin: 0 !important; }
  .reader-writing-listening .reader-youtube-player { width: 100% !important; height: 100% !important; }
}

/* The desktop is a viewport with scrolling panes, never a scrollable page.
   Keep macOS edge gestures inside the Desk instead of moving the header. */
@media (min-width: 701px) {
  html, body { overscroll-behavior: none; }
  body .app-shell.active {
    /* Do not create a stacking context around the header: the Desk canvas
       is a body sibling and must never cover an open account dropdown. */
    height: 100%;
    overflow: hidden;
    padding-top: var(--header-h, 64px);
  }
  body .app-shell.active > .header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  body.desk-scope #desk-view-root {
    overscroll-behavior: none;
  }
}

/* A chapter's source is a viewport, not a paper card inside that viewport.
   Constrain the grid row first so its independently scrolling children cannot
   size the row to their contents and disappear under the shell's clipping. */
@media (min-width: 701px) {
  body.two-pane .panes {
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }
  body.two-pane .panes > .pane {
    min-width: 0;
    min-height: 0;
  }
  body.two-pane .note-gutter {
    min-height: 0;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--tool-muted) transparent;
  }
  body.two-pane .note-gutter::-webkit-scrollbar { display: block; width: 6px; }
  body.two-pane .note-gutter::-webkit-scrollbar-thumb {
    background: var(--tool-muted);
    border-radius: 3px;
  }
  .note-gutter > :is(.note-gutter-label, .note-gutter-more, .note-chip-add) { flex-shrink: 0; }

  :root body .pane-left .pane-body:has(> .reader-surface) {
    padding: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  :root body .pane-left .reader-surface {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  :root body .pane-left .reader-close-bar {
    width: 100%;
    margin: 0;
    padding: 6px 16px;
    height: auto;
    flex-wrap: wrap;
    gap: 6px 12px;
    flex: 0 0 auto;
  }
  :root body .pane-left .reader-media-header-group {
    flex: 1 1 240px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  :root body .pane-left .reader-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px;
  }

  /* Websites own all the room below Back, including saved product details. */
  :root body .pane-left .pane-body:has(> .reader-surface-live) { overflow: hidden; }
  :root body .pane-left .reader-surface-live {
    height: 100%;
    min-height: 0;
  }
  :root body .pane-left .reader-surface-live .reader-content-article { padding: 0; }
  :root body .pane-left .reader-reading-scroll {
    padding: 20px 20px 24px;
  }
  :root body .pane-left .reader-reading-pane :is(
    .reader-article-hero, .reader-article-body, .reader-copy-header,
    .reader-copy-header h1, .reader-copy-dek, .reader-chunk
  ) {
    max-width: none;
  }
  :root body .pane-left .reader-website-overview-card {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  /* Keep the player mounted; allocate the rest of the pane to its words
     instead of a fixed 42vh transcript box with unused room beneath it. */
  :root body :is(.pane-left .pane-body, .dv-reader-body-media):has(.reader-youtube-workspace) { overflow: hidden; }
  :root body :is(.pane-left, .dv-reader-body-media) .reader-surface:has(.reader-youtube-workspace) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  :root body :is(.pane-left, .dv-reader-body-media) .reader-content:has(.reader-youtube-workspace) {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  :root body :is(.pane-left, .dv-reader-body-media) .reader-youtube-workspace {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    border: 0;
    box-shadow: none;
    transition: none;
  }
  :root body :is(.pane-left, .dv-reader-body-media) .reader-youtube-workspace.has-transcript {
    grid-template-rows: auto minmax(0, 1fr);
  }
  :root body :is(.pane-left, .dv-reader-body-media) .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace.has-transcript .reader-youtube-frame {
    /* Size the frame itself, not just its height: a wide, shallow iframe
       makes YouTube crop its poster. The surrounding stage still fills the pane. */
    width: 100%;
    margin: 0 auto;
  }
  :root body :is(.pane-left, .dv-reader-body-media) .reader-youtube-workspace:not(.has-transcript) .reader-youtube-video-side {
    align-self: stretch;
    min-height: 0;
  }
  :root body :is(.pane-left, .dv-reader-body-media) .reader-youtube-workspace:not(.has-transcript) :is(.reader-youtube-frame, .reader-youtube-player) {
    height: 100%;
  }
  :root body :is(.pane-left, .dv-reader-body-media) .reader-youtube-transcript-pane { max-height: none; }
  :root body :is(.pane-left, .dv-reader-body-media) .reader-youtube-transcript-body .reader-transcript-tools-pane {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    margin: 0;
    padding: 6px 0 8px;
    flex-shrink: 0;
  }
  :root body :is(.pane-left, .dv-reader-body-media) .reader-youtube-transcript-scroll {
    padding-top: 8px;
    padding-bottom: 16px;
  }

  /* Focus keeps its existing listening controls, but no narrow text box. */
  :root body .pane-left .reader-transcript-focused .reader-content {
    max-width: none;
  }
  :root body .pane-left .reader-transcript-scroll .reader-chunk {
    max-width: none;
  }
  :root body .pane-left :is(.reader-audio-transcript, .reader-podcast-transcript, .reader-uploaded-video-transcript) {
    width: 100%;
    max-width: none;
  }
}
/* With no chapter available, use the same media reader and control rail in
   the existing foreground host, rather than the padded article sheet. */
:root body .dv-reader-body.dv-reader-body-media {
  height: calc(100dvh - 40px);
  min-height: 0;
  padding: 0;
  background: var(--yd-tool);
  overflow-y: auto;
}
:root body .dv-reader-body-media > .reader-surface-media {
  padding: 0;
}
:root body .dv-reader-body-media .reader-close-bar {
  width: 100%;
  margin: 0;
  padding: 6px 16px;
  height: auto;
  flex-wrap: wrap;
  gap: 6px 12px;
}
:root body .dv-reader-body-media .reader-close {
  flex: 0 0 auto;
}
:root body .dv-reader-body-media .reader-media-header-group {
  flex: 1 1 240px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 700px) {
  :root body .dv-reader-body.dv-reader-body-media { height: 100dvh; }
  :root body .dv-reader-body-media .reader-close-bar {
    padding: calc(env(safe-area-inset-top, 0px) + 4px) 10px 4px;
  }
  /* Use the chapter reader's full-width player and words on the phone,
     with the existing control rail wrapping rather than squeezing Back. */
  :root body .dv-reader-body-media:has(.reader-youtube-workspace) { overflow: hidden; }
  :root body .dv-reader-body-media .reader-surface:has(.reader-youtube-workspace) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  :root body .dv-reader-body-media .reader-content:has(.reader-youtube-workspace) {
    width: 100%;
    max-width: none;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    padding: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
    overflow: hidden;
  }
  :root body .dv-reader-body-media .reader-youtube-workspace {
    flex: 1 1 0;
    min-height: 0;
    border: 0;
    box-shadow: none;
  }
  :root body .dv-reader-body-media .reader-youtube-transcript-pane {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
  }
}
/* Keep every Library destination visible in a narrow writing workspace. */
:root body .lib-chips {
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 0;
  overflow-x: visible;
}

:root body .reader-browser-unavailable {
  box-sizing: border-box;
  overflow-y: auto;
  justify-content: flex-start;
  color: var(--tool-ink);
  background: var(--tool-bg);
}
:root body :is(.reader-browser-unavailable, .reader-product-website .reader-reading-pane) .reader-article-hero {
  flex: none;
  width: 100%;
  max-height: none;
  margin: 0 0 20px;
  background: transparent;
}
:root body :is(.reader-browser-unavailable, .reader-product-website .reader-reading-pane) .reader-article-hero img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

/* Saved objects: the photograph leads, with one legible caption below it.
   These rules do not reach the live website pane or article reading copies. */
:root body .reader-saved-header {
  display: flex;
  flex: 0 0 auto;
  height: auto;
  min-height: 52px;
  padding-block: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
}
:root body .reader-saved-header .reader-close {
  color: var(--tool-muted);
  background: var(--tool-bg);
  border-color: var(--tool-border);
  font: 400 17px/1.4 var(--serif);
}
:root body .reader-saved-label {
  margin-left: auto;
  color: var(--tool-muted);
  font: 400 16px/1.4 var(--serif);
}
:root body .reader-saved-label[hidden],
:root body .reader-saved-object [hidden],
:root body .reader-saved-object > .reader-reading-bar {
  display: none;
}
:root body .reader-saved-object .reader-reading-scroll {
  min-width: 0;
  padding: 20px clamp(16px, 2vw, 30px) 28px;
  overflow-x: hidden;
  overflow-y: auto;
}
:root body .reader-reading-pane.reader-saved-object .reader-article-hero {
  flex: none;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0 auto 20px;
  background: transparent;
}
:root body .reader-reading-pane.reader-saved-object .reader-article-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  max-height: 78dvh;
  margin: 0 auto;
  object-fit: contain;
}
:root body .reader-saved-object .reader-saved-summary {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--yd-ink);
}
:root body .reader-saved-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  min-width: 0;
  padding: 14px 0 8px;
  border-top: 1px solid var(--yd-tool-border);
}
:root body .reader-saved-caption .reader-saved-title {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--yd-ink);
  font: 600 18px/1.4 var(--serif);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
:root body .reader-saved-meta {
  min-width: 0;
  max-width: 100%;
  color: var(--yd-room-muted);
  font: 400 16px/1.5 var(--serif);
  overflow-wrap: anywhere;
}
:root body .reader-saved-price {
  flex: none;
  color: var(--yd-ink);
  font: 400 18px/1.4 var(--serif);
  white-space: nowrap;
}
:root body .reader-saved-visit,
:root body .reader-saved-actions button {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--yd-ink);
  background: transparent;
  box-shadow: none;
  font: 400 17px/1.4 var(--serif);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
:root body .reader-saved-details {
  margin: 0;
  color: var(--yd-ink);
  font: 400 17px/1.6 var(--serif);
}
:root body .reader-saved-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
}
:root body .reader-saved-details > summary::-webkit-details-marker { display: none; }
:root body .reader-saved-details > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
:root body .reader-saved-details[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}
:root body .reader-saved-details > p {
  max-width: 72ch;
  margin: 8px 0 16px;
  color: var(--yd-light-ink);
  font: inherit;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
:root body :is(.reader-saved-visit, .reader-saved-actions button, .reader-saved-details > summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
/* Sharing names a person without changing the item's own title or artwork. */
.shared-from { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; font: 16px/1.4 var(--serif); color: var(--yd-tool-ink); vertical-align: middle; }
.shared-from-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; overflow: hidden; border-radius: 50%; background: var(--yd-tool); border: 1px solid var(--yd-tool-border); font: 12px/1 var(--serif); }
.shared-from-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shared-from-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-kept-from { position: absolute; top: 100%; left: 0; max-width: 100%; margin-top: 7px; padding: 3px 8px; box-sizing: border-box; border-radius: 6px; background: var(--yd-desk-add-fill); color: var(--yd-desk-add-ink); pointer-events: none; }
.dv-kept-from .shared-from { color: inherit; }
.dv-pile-inactive > .dv-kept-from { display: none; }
.dv-pile-focused > .dv-kept-from { display: none; }
.lib-kept-from { margin-top: 5px; }
.lib-kept-from .shared-from { font-size: 15px; }
.playlist-arrival > .playlist-share-faces { grid-row: span 3; }
.playlist-arrival > span { grid-column: 2; }
.playlist-arrival > .shared-from { font: 16px/1.4 var(--serif); color: var(--yd-tool-ink); }
.playlist-share-sheet > .shared-from, .dv-playlist-arrival-card > .shared-from { margin: 8px 0; }

/* PDF controls share Back's row; the document begins directly beneath it.
   Only the original has zoom controls. Never tint canvases. */
:root body .reader-surface.reader-surface-pdf { width:100%; max-width:none; padding:0; }
:root body .reader-surface-pdf .reader-close-bar {
  width:100%; height:auto; margin:0; padding:6px 12px;
  flex-wrap:wrap; gap:6px 12px;
}
:root body .reader-surface-pdf .reader-close { flex-shrink:0; }
:root body .reader-surface-pdf .reader-content {
  width:100%; max-width:none; margin:0; padding:0;
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
:root body .reader-pdf-reader { width:100%; max-width:none; color:var(--yd-ink); }
:root body .reader-pdf-toolbar {
  position:static; top:auto; z-index:auto; margin-left:auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
  gap:6px 10px; min-height:0; padding:0;
  color:var(--yd-tool-ink); background:transparent; border:0;
  backdrop-filter:none;
}
/* Keep the compact controls; their ink must follow the toolbar at night. */
[data-theme="dark"] body .reader-pdf-actions button {
  color: var(--yd-tool-ink);
}
[data-theme="dark"] body :is(.reader-pdf-actions button.active, .reader-pdf-retry) {
  color: var(--yd-tool-ink);
  border-color: var(--yd-action);
  background: var(--yd-selected-fill);
}
:root body .reader-pdf-identity { color:var(--yd-tool-muted); font:15px/1.3 var(--serif); letter-spacing:0; white-space:nowrap; }
:root body .reader-pdf-cite { min-height:44px; padding:7px 10px; border:1px solid var(--yd-tool-border); border-radius:3px; background:transparent; color:var(--yd-tool-ink); font:650 12px/1.25 var(--sans); cursor:pointer; }
:root body .reader-pdf-zoom { margin-left:auto; }
:root body .reader-pdf-zoom .document-tools { padding:0; gap:2px; border:0; background:transparent; color:var(--yd-tool-ink); }
:root body .reader-pdf-zoom button { min-width:44px; min-height:44px; padding:8px; border:0; border-radius:4px; font:16px/1.25 var(--serif); }
:root body .reader-pdf-toolbar button:hover:not(:disabled) { background:var(--yd-chrome-raised); }
:root body .reader-pdf-toolbar button:focus-visible { outline:2px solid var(--yd-action); outline-offset:2px; }
:root body .reader-pdf-toolbar button:disabled { opacity:.5; cursor:default; }
:root body :is(.reader-pdf-reader, .reader-pdf-toolbar) [hidden] { display:none !important; }
:root body .reader-pdf-reading { background:var(--yd-paper); color:var(--yd-ink); border-color:var(--yd-tool-border); padding:24px clamp(20px, 8%, 80px) 64px; }
:root body .reader-pdf-reading .reader-chunk { font:19px/1.72 var(--serif); }
:root body .reader-pdf-reading .reader-chunk p { font:inherit; }
:root body .reader-pdf-reading .reader-chunk,
:root body .reader-pdf-reading .reader-chunk :is(p, li, blockquote, h1, h2, h3) { color:var(--yd-ink); }
:root body .reader-pdf-reading :is(.reader-section-divider, .reader-page-ref, .reader-pdf-copy-note) { color:var(--yd-room-muted); border-color:var(--yd-tool-border); }
:root body .reader-pdf-empty { margin:0 auto; color:var(--yd-ink); background:var(--yd-tool); }
:root body .reader-pdf-empty p { margin:0 0 10px; }
:root body .reader-pdf-empty p + p { margin-bottom:14px; color:var(--yd-room-muted); font-size:15px; }
:root body .reader-pdf-empty-pending { border-left-color:var(--yd-tool-border); color:var(--yd-room-muted); }
/* Try again matches the view controls: compact, flat, sans-serif, the same
   subtle blue as the selected view. */
:root body .reader-pdf-retry {
  padding:7px 10px; border:1px solid rgba(49,94,136,.25); border-radius:3px;
  color:#315e88; background:rgba(49,94,136,.10); font:650 12px/1.25 var(--sans); cursor:pointer;
}
:root body .reader-pdf-retry:hover { background:rgba(49,94,136,.16); }
:root body .reader-pdf-original { border-color:var(--yd-tool-border); }
/* The document reader is its own surface (toolbar, reading paper, original
   pages). Wide screens already strip the shared reading-page card (paper,
   side padding, shadow) that wraps article prose; narrow screens did not,
   so the whole PDF reader sat inside that card with 40px gutters on each
   side — a 236px page on a 390px phone. Keep the card for prose; let the
   document reader span the reader as it does on wide screens and in the
   reviewed reader fixture. */
@media (max-width:1023px) {
  :root body .reader-content:has(> .reader-pdf-reader) {
    max-width:none; margin:0; padding:0;
    background:transparent; border:0; border-radius:0; box-shadow:none;
  }
}
@media (max-width:600px) {
  :root body .reader-pdf-toolbar { gap:6px 10px; }
  /* Phone touch targets stay 44px tall without changing the controls' look. */
  :root body .reader-pdf-actions button, :root body .reader-pdf-retry, :root body .reader-pdf-cite { min-height:44px; padding:8px 12px; font-size:13px; }
  :root body .reader-pdf-reading { padding:28px 20px 48px; }
  :root body .reader-pdf-reading .reader-chunk { font-size:18px; }
}

/* Approved media hierarchy. Existing room tokens support both wood settings. */
:root body .reader-transcript-control { position:relative; display:inline-flex; align-items:stretch; border:1px solid var(--yd-player-button-border); border-radius:6px; background:var(--yd-player-button-fill); }
:root body .reader-transcript-control > .reader-youtube-transcript-toggle { border:0; border-radius:5px 0 0 5px; box-shadow:none; background:transparent; color:var(--yd-player-ink); font:500 16px var(--serif); text-transform:none; letter-spacing:normal; min-height:44px; }
:root body .reader-transcript-menu-toggle { width:44px; border:0; border-left:1px solid var(--yd-player-button-border); border-radius:0 5px 5px 0; background:transparent; color:var(--yd-player-ink); cursor:pointer; }
:root body .reader-transcript-menu { position:absolute; z-index:30; right:0; top:calc(100% + 6px); min-width:210px; padding:6px; border:1px solid var(--yd-tool-border); border-radius:7px; background:var(--yd-reference-panel); box-shadow:0 8px 22px #0003; }
:root body .reader-transcript-menu[hidden] { display:none; }
:root body .reader-transcript-menu .reader-listen-focus { display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--yd-tool-ink); box-shadow:none; border-radius:3px; padding:12px; font:500 14px var(--sans); }
:root body .reader-transcript-menu .reader-listen-focus:disabled { opacity:.45; cursor:default; }
:root body .reader-media-header-group a.reader-media-header-meta { display:inline-flex; font:500 14px var(--serif); text-transform:none; letter-spacing:normal; color:var(--yd-action-warm); text-decoration:none; }
:root body .reader-audio-transport { display:flex; align-items:center; justify-content:center; gap:32px; padding:6px 0; color:var(--yd-player-ink); }
:root body .reader-audio-skip { display:grid; place-items:center; width:44px; height:44px; padding:7px; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; }
:root body :is(.reader-audio-skip, .dv-mv-transport [data-skip]) svg { width:28px; height:28px; }
:root body .reader-audio-skip:hover { background:var(--yd-player-button-fill); }
:root body .reader-timing-status { color:var(--yd-player-muted); font:14px/1.5 var(--sans); }
:root body :is(.pane-left .pane-body,.dv-reader-body-media):has(.reader-youtube-workspace):not(:has(.reader-transcript-focused)) { overflow-y:auto; }
:root body .reader-surface:not(.reader-transcript-focused):has(.reader-youtube-workspace) { height:auto; min-height:100%; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-content:has(.reader-youtube-workspace) { display:block; flex:none; overflow:visible; width:100%; max-width:none; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace { display:block!important; width:100%!important; min-height:0; flex:none; background:var(--yd-player-canvas); border:0; box-shadow:none; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace .reader-youtube-video-side { width:100%; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace .reader-youtube-frame { width:100%!important; height:auto!important; aspect-ratio:16 / 9; max-width:none; margin:0; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace .reader-youtube-player { display:block; width:100%; height:100%!important; aspect-ratio:16 / 9; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace.has-transcript .reader-youtube-transcript-pane { display:block; width:100%; max-height:none; margin-top:18px; border-left:0; border-top:1px solid var(--yd-tool-border); }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-transcript-scroll { max-height:none; height:auto; overflow:visible; }

/* The player stays above a bounded transcript. Follow playback and manual
   browsing operate on the same scrolling element in every reader host. */
:root body :is(.pane-left .pane-body,.dv-reader-body-media):has(.reader-youtube-workspace.has-transcript):not(:has(.reader-transcript-focused)) { overflow:hidden; }
:root body .reader-surface:not(.reader-transcript-focused):has(.reader-youtube-workspace.has-transcript) { height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-content:has(.reader-youtube-workspace.has-transcript) { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; width:100%; max-width:none; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace.has-transcript { display:flex!important; flex-direction:column; width:100%!important; min-height:0; flex:1 1 0; overflow:hidden; background:var(--yd-player-canvas); border:0; box-shadow:none; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace.has-transcript .reader-youtube-video-side { width:100%; flex:0 0 auto; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace.has-transcript .reader-youtube-frame { width:100%!important; height:auto!important; aspect-ratio:16 / 9; max-height:38vh; max-width:none; margin:0; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace.has-transcript .reader-youtube-player { display:block; width:100%; height:100%!important; aspect-ratio:16 / 9; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace.has-transcript .reader-youtube-transcript-pane { display:flex; flex-direction:column; flex:1 1 0; min-height:0; width:100%; max-height:none; margin-top:12px; border-left:0; border-top:1px solid var(--yd-tool-border); overflow:hidden; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace.has-transcript .reader-youtube-transcript-body { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; }
:root body .reader-surface:not(.reader-transcript-focused) .reader-youtube-workspace.has-transcript .reader-youtube-transcript-scroll { flex:1 1 0; min-height:0; max-height:none; height:auto; overflow-y:auto; overscroll-behavior:contain; }
.reader-transcript-follow[aria-pressed="true"] { opacity:.7; }


:root body :is(.reader-surface-podcast, .reader-surface-audio):not(.reader-transcript-focused) .reader-content { padding:12px 16px 28px; }
:root body :is(.reader-surface-podcast, .reader-surface-audio):not(.reader-transcript-focused) .reader-audio-frame { margin:0 auto 20px; }

/* Shared context uses the same paper, ink and type as the source reader. */
.reader-shared-context { margin: 10px 0 18px; padding: 14px 18px; border: 1px solid var(--yd-tool-border); border-radius: 12px; background: var(--yd-tool); color: var(--yd-tool-ink); font: 17px/1.45 var(--serif); }
.reader-shared-context > p { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-shared-context .desk-shared-moment blockquote, .playlist-inbox-context { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reader-shared-context button { margin: 4px 10px 0 0; }
.exchange-history { border-top: 1px solid var(--yd-tool-border); margin-top: 22px; padding-top: 14px; }
.exchange-reply { border-bottom: 1px solid var(--yd-tool-border); padding: 12px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.exchange-reply .desk-shared-moment p, .exchange-reply .desk-shared-moment blockquote { margin: 6px 0; }
.exchange-reply-composer { margin-top: 18px; display: grid; gap: 10px; }
.exchange-reply-composer label { display: grid; gap: 8px; }
.exchange-reply-composer textarea, .exchange-reply-source { box-sizing: border-box; width: 100%; color: var(--yd-tool-ink); background: var(--yd-tool); border: 1px solid var(--yd-tool-border); border-radius: 8px; padding: 10px; font: inherit; }
.playlist-arrival > .desk-shared-moment { grid-column: 2; max-height: 5em; overflow: hidden; font-size: 15px; }
.playlist-arrival > .desk-shared-moment blockquote { margin: 0; }