/* [ai] The Listen layer: the player row in the top bar, scrubber, the transcript drop, transcript, notes, browser, video window, toasts. */
@import url("tokens.css");
#ds-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; font-family: var(--ds-font); color: var(--ds-fg); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
#ds-layer > * { pointer-events: auto; }
#ds-layer *, #ds-layer *::before, #ds-layer *::after { box-sizing: border-box; }
#ds-layer button { font-family: inherit; }
#ds-layer button:focus-visible, #ds-layer a:focus-visible, #ds-layer [tabindex]:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ds-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { #ds-layer *, #ds-layer *::before { transition: none !important; animation: none !important; } }
@media print { #ds-layer { display: none !important; } }
/* ---- Library pill */
/* ---- Buttons & chips */
.ds-btn { width: 38px; height: 38px; border-radius: 11px; border: 0; background: transparent; color: var(--ds-fg); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, color .15s, transform .1s, opacity .15s; }
.ds-btn:hover { background: var(--ds-line); } .ds-btn:active { transform: scale(.9); } .ds-btn.on { color: var(--ds-accent); background: var(--ds-cur); } .ds-btn:disabled { opacity: .3; cursor: default; transform: none; background: none; }
.ds-btn.ds-sm { width: 32px; height: 32px; border-radius: 9px; } .ds-btn.ds-sm svg { width: 17px; height: 17px; }
.ds-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--ds-line2); background: transparent; color: var(--ds-fg); font: 600 12px/1 var(--ds-font); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.ds-chip:hover { background: var(--ds-line); } .ds-chip.on { border-color: var(--ds-accent); color: var(--ds-accent); background: var(--ds-cur); } .ds-chip svg { width: 15px; height: 15px; } .ds-chip[aria-disabled="true"] { opacity: .5; pointer-events: none; }
/* ---- The player in the bar (shell.css places it: centred when wide, its own rows when tight). Two rows: row 1 is a grid so the
   transport sits exactly on the centre line whatever the clusters weigh; row 2 is the scrubber alone. */
.at-player { display: flex; flex-direction: column; gap: 0; padding: 3px 4px 1px; opacity: 0; transition: opacity .2s; }   /* placement (centred absolute / own row) is shell.css's: no position here */
.at-player.in { opacity: 1; } .at-player.note-only { display: none; }
.ds-r1 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-width: 0; }
.ds-cl { display: flex; align-items: center; gap: 6px; min-width: 0; } .ds-cl-r { justify-content: flex-end; }
.ds-art { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 0; background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent2)); color: var(--ds-bg); display: grid; place-items: center; cursor: pointer; transition: transform .15s; } .ds-art svg { width: 16px; height: 16px; } .ds-art:active { transform: scale(.94); }
.at-player.playing .ds-art svg { animation: ds-pulse 1.6s ease-in-out infinite; } @keyframes ds-pulse { 50% { transform: scaleY(.82); } }
.ds-meta { flex: 0 1 220px; min-width: 60px; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; border-radius: 8px; }
.ds-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-sub { font-size: 11px; color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-times { display: none; font-size: 11px; color: var(--ds-muted); font-variant-numeric: tabular-nums; flex: none; }
.ds-ctrls { flex: none; display: flex; align-items: center; gap: 2px; } .ds-ctrls .ds-btn { width: 28px; height: 28px; border-radius: 8px; } .ds-ctrls .ds-btn svg { width: 15px; height: 15px; }
.ds-play { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: var(--ds-fg); color: var(--ds-bg); margin: 0 4px; } .ds-play svg { width: 14px !important; height: 14px !important; } .ds-play:hover { background: var(--ds-fg); opacity: .88; } .ds-play-ph { display: none; }
/* the transcript toggle: an icon (its hover title reads "AI transcript"), leading the right cluster; the one toggle in the row */
.ds-btn.ds-tpill { color: var(--ds-muted); } .ds-btn.ds-tpill:hover { color: var(--ds-fg); }
.at-player .ds-sc { flex: none; width: 100%; min-width: 0; padding: 0 2px; gap: 8px; } .at-player .ds-sc-track { height: 16px; } .at-player .ds-sc-track::before, .at-player .ds-sc-buf, .at-player .ds-sc-played { top: 7px; } .at-player .ds-sc-thumb { top: 8.5px; } .at-player .ds-sc-ticks i { top: 5.5px; } .at-player .ds-sc-sil i { top: 7.5px; }
.ds-tools { flex: none; display: flex; align-items: center; gap: 2px; } .ds-tools .ds-btn { width: 28px; height: 28px; border-radius: 8px; } .ds-tools .ds-btn svg { width: 15px; height: 15px; }
.ds-speed { min-width: 40px; height: 26px; padding: 0 8px; justify-content: center; font-variant-numeric: tabular-nums; margin-right: 2px; }
.ds-video-only { display: none; } html.ds-has-video .ds-video-only { display: grid; }
.ds-status { position: fixed; left: 50%; top: calc(var(--at-bar-h) + 6px); transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: var(--ds-fg); color: var(--ds-bg); font-size: 12px; white-space: nowrap; z-index: 2; } .ds-status.err { background: var(--ds-danger); color: var(--ds-media-fg); }
.at-player .ds-sc.edge { display: none; } .ds-pn-tr { display: none; }
.ds-scrim { position: fixed; inset: 0; top: var(--at-bar-h); background: transparent; }   /* under the drop, below the bar (the player stays live): a tap outside dismisses the transcript; never dims */
/* ---- Scrubber */
.ds-sc { display: flex; align-items: center; gap: 10px; padding: 0 16px 8px; }
.ds-sc-time { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--ds-muted); width: 36px; flex: none; } .ds-sc-rem { text-align: right; }
.ds-sc-track { position: relative; flex: 1; height: 22px; cursor: pointer; touch-action: none; }
.ds-sc-track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; border-radius: 2px; background: var(--ds-line2); }
.ds-sc-buf, .ds-sc-played { position: absolute; left: 0; top: 10px; height: 3px; border-radius: 2px; } .ds-sc-buf { background: var(--ds-line2); } .ds-sc-played { background: var(--ds-accent); }
.ds-sc-thumb { position: absolute; top: 11.5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ds-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transform: translate(-50%, -50%) scale(0); transition: transform .15s; }
.ds-sc-track:hover .ds-sc-thumb, .ds-sc.drag .ds-sc-thumb, .ds-sc-track:focus-visible .ds-sc-thumb { transform: translate(-50%, -50%) scale(1); }
.ds-sc-ticks i { position: absolute; top: 8.5px; width: 2px; height: 6px; margin-left: -1px; background: var(--ds-fg); opacity: .4; border-radius: 1px; }
.ds-sc-sil i { position: absolute; top: 10.5px; height: 2px; background: var(--ds-fg); opacity: .18; }
.ds-sc-label { position: fixed; z-index: 7; transform: translateX(-50%); background: var(--ds-card); color: var(--ds-fg); box-shadow: var(--ds-shadow-sm); border-radius: 12px; padding: 7px 11px; font-size: 12px; width: max-content; max-width: 300px; }
#ds-layer > .ds-sc-label { pointer-events: none; }   /* beats the layer's `> * { pointer-events: auto }` */
.ds-sc-label b { display: block; font-variant-numeric: tabular-nums; font-weight: 700; } .ds-sc-label span { display: block; color: var(--ds-muted); font-family: var(--ds-font); font-size: 13px; line-height: 1.35; margin-top: 2px; }
/* [ai] the chapter card: shown when the pointer is within 8 px of a tick; several close ticks stack as rows */
.ds-sc-label.ch { max-width: 340px; padding: 8px 12px 9px; } .ds-sc-ch-k { display: block; font: 700 10px var(--ds-font); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-accent); font-style: normal; margin-bottom: 4px; }
.ds-sc-ch { display: flex; gap: 9px; align-items: baseline; padding: 3px 0; } .ds-sc-ch + .ds-sc-ch { border-top: 1px solid var(--ds-line); } .ds-sc-label .ds-sc-ch b { display: inline; flex: none; color: var(--ds-accent); font-size: 12px; } .ds-sc-label .ds-sc-ch span { display: inline; margin: 0; color: var(--ds-fg); font-size: 13px; line-height: 1.4; }
.ds-sc-ticks i { cursor: pointer; }
/* the phone edge scrubber: a 3 px line on the bar's bottom edge with a 24 px touch zone */
.ds-sc.edge { position: absolute; left: 0; right: 0; bottom: -12px; padding: 0; gap: 0; } .ds-sc.edge .ds-sc-time { display: none; }
.ds-sc.edge .ds-sc-track { height: 24px; } .ds-sc.edge .ds-sc-track::before, .ds-sc.edge .ds-sc-buf, .ds-sc.edge .ds-sc-played { top: 11px; height: 3px; border-radius: 0; }
.ds-sc.edge .ds-sc-thumb { top: 12px; } .ds-sc.edge .ds-sc-ticks i { top: 9px; } .ds-sc.edge .ds-sc-sil i { top: 12px; }
/* ---- The drop: the transcript card hung from the bar; its height runs to the --at-dock-b reserve (the floating Astra pill) */
.ds-drop { position: fixed; top: var(--at-bar-h); left: 50%; transform: translateX(-50%); width: min(720px, 100vw - 24px); height: 0; overflow: hidden; z-index: 6; background: var(--ds-glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-radius: 0 0 var(--ds-radius) var(--ds-radius); box-shadow: var(--ds-shadow); transition: height .34s var(--ds-ease); }
.ds-drop.open { height: calc(100dvh - var(--at-bar-h) - var(--at-dock-b, 0px) - 16px); }
.ds-drop.note-only .ds-pn-actions > :not(.ds-pn-close), .ds-drop.note-only .ds-pn-tr { display: none; }   /* a note with nothing playing: only ✕ in the head, no recording controls */
.ds-panel { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.ds-panel.dragging { transition: none; }
.ds-grab { display: none; width: 40px; height: 5px; border-radius: 3px; background: var(--ds-line2); margin: 0 auto 8px; }
.ds-pn-head { padding: 14px 16px 0; border-bottom: 1px solid var(--ds-line); flex: none; }
.ds-pn-row { display: flex; align-items: flex-start; gap: 8px; } .ds-pn-text { flex: 1; min-width: 0; } .ds-pn-actions { display: flex; gap: 2px; margin: -4px -6px 0 0; }
.ds-pn-title { font-weight: 600; font-size: 15px; line-height: 1.3; } .ds-pn-sub { font-size: 12px; color: var(--ds-muted); margin-top: 2px; }
.ds-pn-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; } .ds-pn-chips:empty { display: none; } .ds-sum-spk { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.ds-crumb-seg { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 4px; } .ds-crumb-seg:hover { color: var(--ds-fg); text-decoration: underline; text-underline-offset: 3px; } .ds-crumb-seg:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; } .ds-crumb-sep { margin: 0 5px; color: var(--ds-line2); } .ds-chip-spk { font-size: 11px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); padding: 4px 9px; border-radius: 999px; letter-spacing: .02em; }
.ds-tabs { display: flex; gap: 2px; margin-top: 8px; } .ds-tab { border: 0; background: none; padding: 9px 10px; font: 500 13px var(--ds-font); color: var(--ds-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s; } .ds-tab:hover { color: var(--ds-fg); } .ds-tab.on { color: var(--ds-fg); border-color: var(--ds-accent); }
.ds-search { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--ds-line); color: var(--ds-muted); flex: none; } .ds-search svg { width: 16px; height: 16px; flex: none; }
.ds-search-in { flex: 1; min-width: 0; border: 0; background: transparent; font: 14px var(--ds-font); color: var(--ds-fg); outline: none; padding: 6px 0; } .ds-search-in::placeholder { color: var(--ds-muted); } .ds-search-n { font-size: 12px; font-variant-numeric: tabular-nums; }
.ds-pn-body { flex: 1; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 18px 48px; position: relative; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .ds-pn-body { scroll-behavior: auto; } }
.ds-empty { color: var(--ds-muted); font-size: 14px; padding: 30px 0; text-align: center; }
/* ---- Transcript */
.ds-tr { position: relative; font: var(--ds-read); }
.ds-p { padding: 10px 8px; margin: 0 -8px; border-radius: 12px; color: var(--ds-muted); transition: color .35s, background .3s; }
.ds-p.cur { color: var(--ds-fg); } .ds-p.q { background: color-mix(in srgb, var(--ds-quote) 45%, transparent); }
.ds-p-head { display: flex; gap: 10px; align-items: baseline; font-family: var(--ds-font); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px; }
.ds-p-who { font-weight: 700; } .ds-p-time { border: 0; background: none; color: var(--ds-muted); font: 500 12px var(--ds-font); font-variant-numeric: tabular-nums; cursor: pointer; padding: 0; letter-spacing: 0; text-transform: none; } .ds-p-time:hover { color: var(--ds-accent); }
.ds-p-text { cursor: text; } .ds-w { border-radius: 4px; padding: 0 1px; margin: 0 -1px; cursor: pointer; transition: background .12s, color .12s; }
.ds-w:hover { background: var(--ds-line); } .ds-w.q { background: var(--ds-quote); } .ds-w.cur { background: var(--ds-cur); color: var(--ds-fg); box-shadow: 0 0 0 2px var(--ds-cur); }
mark.ds-m { background: var(--ds-mark); color: inherit; border-radius: 3px; } mark.ds-m.on { background: var(--ds-mark-on); }
.ds-follow, .ds-copysel { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; gap: 6px; align-items: center; padding: 9px 15px; border-radius: 999px; background: var(--ds-fg); color: var(--ds-bg); border: 0; font: 600 13px var(--ds-font); box-shadow: var(--ds-shadow-sm); cursor: pointer; margin-top: 10px; }
.ds-copysel { bottom: auto; z-index: 3; } .ds-follow { margin: 0; } .ds-follow.off { display: none; } .ds-follow svg, .ds-copysel svg { width: 16px; height: 16px; }
.ds-coarse { font-family: var(--ds-font); font-size: 12px; color: var(--ds-muted); padding: 8px 12px; background: var(--ds-line); border-radius: 10px; margin: 8px 0; }
/* ---- Lists (topics, quotes) & summary */
.ds-list { padding-top: 6px; } .ds-row { display: flex; gap: 12px; width: 100%; text-align: left; border: 0; background: none; padding: 10px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 12px; font: inherit; color: inherit; cursor: pointer; transition: background .15s; }
.ds-row:hover { background: var(--ds-line); } .ds-row-t { font-variant-numeric: tabular-nums; color: var(--ds-accent); font: 700 12px var(--ds-font); width: 46px; flex: none; padding-top: 4px; } .ds-row-x { font-family: var(--ds-font); font-size: 15px; line-height: 1.45; } .ds-row-x small { color: var(--ds-muted); font-family: var(--ds-font); font-size: 12px; } .ds-row-x q { quotes: "“" "”"; }

/* ---- Note view */
.ds-note { padding-top: 10px; } .ds-note-p { font: var(--ds-read); white-space: pre-wrap; margin: 0 0 14px; }
.ds-note-p.q { background: color-mix(in srgb, var(--ds-quote) 40%, transparent); border-left: 3px solid var(--ds-accent); padding: 8px 12px; border-radius: 0 12px 12px 0; } mark.ds-q { background: var(--ds-quote); color: inherit; border-radius: 3px; }
/* ---- Browser (folders) */
.ds-br-scrim { position: fixed; inset: 0; z-index: var(--ds-z-browser); background: rgba(20, 14, 8, .36); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .2s; }
.ds-br-scrim.in { opacity: 1; }
.ds-browser { position: fixed; z-index: var(--ds-z-browser); top: 24px; bottom: 24px; left: 50%; width: min(1040px, 100vw - 48px); height: auto; display: flex; flex-direction: column; background: var(--ds-card); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); transform: translateX(-50%) translateY(12px) scale(.985); opacity: 0; transition: transform .28s var(--ds-ease), opacity .2s; overflow: hidden; }   /* almost the whole page: the same 24 px above and below */
.ds-browser.in { transform: translateX(-50%); opacity: 1; }
.ds-browser.page { width: min(820px, 100vw - 24px); }
.ds-br-head { flex: none; padding: 16px 12px 0 20px; border-bottom: 1px solid var(--ds-line); } .ds-br-row { display: flex; align-items: center; justify-content: space-between; } .ds-br-row h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 15px var(--ds-font); } .ds-br-row h2 svg { width: 17px; height: 17px; color: var(--ds-accent); } .ds-br-head .ds-search { padding: 6px 4px 8px 0; border: 0; }
.ds-now { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0 6px 0 18px; height: 30px; }   /* one line in the header row */
.ds-now-ic { flex: none; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent2)); color: var(--ds-bg); display: grid; place-items: center; } .ds-now-ic svg { width: 13px; height: 13px; }
.ds-now-x { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; border: 0; background: none; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.ds-now-t { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-now-s { flex: 1 1 0; min-width: 0; font-size: 11.5px; color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* the folder gives way first, then the title truncates */
.ds-now-reveal { flex: none; height: 26px; padding: 0 9px; font-size: 11.5px; } .ds-now-reveal svg { width: 13px; height: 13px; }
@media (max-width: 560px) { .ds-now-s, .ds-now-reveal span { display: none; } .ds-now-reveal { padding: 0 7px; } }
.ds-br-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 6px 10px 40px 8px; }
/* [ai] The tree: 18px per level, a hairline guide under each open folder's chevron; a recording sits one level inside its
   folder (empty chevron slot, glyph on the child icon column), so files read as inside it. */
.ds-fold-wrap { --ind: calc(var(--d) * 18px); }
.ds-fold, .ds-rec { display: flex; align-items: flex-start; gap: 6px; width: 100%; min-height: 32px; border: 0; background: none; text-align: left; padding: 5px 6px 5px calc(4px + var(--ind)); border-radius: 9px; color: inherit; cursor: pointer; font: inherit; transition: background .15s; position: relative; }
.ds-fold-kids > .ds-rec { --ind: calc((var(--d) + 1) * 18px); }
.ds-fold:hover, .ds-rec:hover { background: var(--ds-line); } .ds-fold:focus-visible, .ds-rec:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }
.ds-fold-ch { flex: none; width: 18px; height: 22px; display: grid; place-items: center; color: var(--ds-muted); } .ds-fold-ch svg { width: 13px; height: 13px; transition: transform .18s; } .ds-fold.open .ds-fold-ch svg { transform: rotate(90deg); }
.ds-fold-ic, .ds-rec-ic { flex: none; width: 20px; height: 22px; display: grid; place-items: center; color: var(--ds-accent); } .ds-fold-ic svg { width: 16px; height: 16px; } .ds-rec-ic { color: var(--ds-muted); } .ds-rec-ic svg { width: 15px; height: 15px; } .ds-rec.on .ds-rec-ic { color: var(--ds-accent); } .ds-br-body.search .ds-rec { --ind: 0px; } .ds-br-body.search .ds-rec-ch { display: none; }
.ds-fold-x, .ds-rec-x { flex: 1; min-width: 0; }
.ds-row-1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .ds-fold-t, .ds-rec-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-fold-t { font-weight: 600; } .ds-rec.on .ds-rec-t { font-weight: 600; }
.ds-fold-n, .ds-rec-m { flex: none; font-size: 11.5px; color: var(--ds-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-row-2 { display: flex; align-items: baseline; gap: 8px; min-width: 0; width: 100%; margin-top: -1px; padding: 0 0 1px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: default; border-radius: 6px; }
button.ds-row-2 { cursor: pointer; } @media (hover: hover) { button.ds-row-2:hover .ds-gist { color: var(--ds-fg); } } button.ds-row-2:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
/* [ai] The one-liner: a single line that scrolls sideways (swipe / drag, no scrollbar) instead of wrapping; a bit darker than
   muted so it reads at 12px. The .ds-peek card is the desktop hover preview (hover-capable pointers only). */
.ds-gist { flex: 1; min-width: 0; font-size: 12px; line-height: 17px; color: color-mix(in srgb, var(--ds-fg) 80%, var(--ds-muted)); white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; user-select: none; -webkit-user-select: none; } .ds-gist::-webkit-scrollbar { display: none; } .ds-gist.drag { cursor: grabbing; }
.ds-peek { position: fixed; z-index: 2147483001; width: min(560px, 100vw - 24px); padding: 12px 16px 10px; border-radius: 14px; background: var(--ds-card); color: var(--ds-fg); box-shadow: var(--ds-shadow); border: 1px solid var(--ds-line); font: 13.5px/1.5 var(--ds-font); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s; }
.ds-peek.in { opacity: 1; transform: none; } .ds-peek-x { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .ds-peek-m { margin-top: 8px; font: 600 11px var(--ds-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ds-accent); }
@media not (hover: hover) { .ds-peek { display: none !important; } }
.ds-fold-kids { position: relative; } .ds-fold-kids::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: calc(12px + var(--ind)); width: 1px; background: var(--ds-line2); pointer-events: none; }
.ds-rec.on { background: var(--ds-cur); } .ds-rec.flash, .ds-fold.flash { animation: ds-flash 1.2s var(--ds-ease); } @keyframes ds-flash { 0%, 40% { box-shadow: inset 0 0 0 2px var(--ds-accent); } 100% { box-shadow: none; } }
.ds-rec-q { display: block; font-size: 13px; line-height: 1.45; color: var(--ds-fg); margin-top: 3px; white-space: normal; } .ds-rec-q b { color: var(--ds-accent); font-family: var(--ds-font); font-size: 12px; }
.ds-md a.ds-cite { display: inline-flex; align-items: center; gap: 4px; margin: 0 1px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--ds-line); background: color-mix(in srgb, var(--ds-line) 45%, transparent); font: 500 11.5px/18px var(--ds-font); font-variant-numeric: tabular-nums; color: var(--ds-fg); text-decoration: none; vertical-align: 1px; transition: background .15s, border-color .15s; } .ds-md a.ds-cite::before { content: "▶"; font-size: 8px; color: var(--ds-accent); } .ds-md a.ds-cite[href^="note:"]::before { content: "▤"; font-size: 10px; } .ds-md a.ds-cite:hover { background: var(--ds-line); border-color: var(--ds-line2); }
.ds-br-sec { font: 600 11px var(--ds-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); padding: 14px 10px 6px; }
.ds-eq rect { transform-origin: center bottom; } .ds-rec.on .ds-eq rect, .ds-now-ic .ds-eq rect { animation: ds-eq 1s ease-in-out infinite; } .ds-eq rect:nth-child(2) { animation-delay: -.35s; } .ds-eq rect:nth-child(3) { animation-delay: -.7s; } @keyframes ds-eq { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
html:not(.ds-playing) .ds-eq rect { animation: none !important; }
/* ---- Video window */
.ds-video { position: fixed; top: calc(var(--at-bar-h) + 12px); left: 12px; width: 400px; max-width: calc(100vw - 24px); background: var(--ds-media-bg); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); overflow: hidden; opacity: 0; transform: scale(.96); transition: opacity .22s, transform .3s var(--ds-ease); }
.ds-video.in { opacity: 1; transform: none; } .ds-video.free { transition: none; }
.ds-video-el { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ds-media-bg); }
.ds-vw-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 12px; color: var(--ds-media-fg); background: linear-gradient(rgba(0, 0, 0, .6), transparent); opacity: 0; transition: opacity .2s; cursor: grab; z-index: 2; }
.ds-video:hover .ds-vw-bar, .ds-video:focus-within .ds-vw-bar { opacity: 1; } .ds-vw-t { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-sp { flex: 1; } .ds-vw-bar .ds-btn { color: var(--ds-media-fg); } .ds-vw-bar .ds-btn:hover { background: rgba(255, 255, 255, .2); }
.ds-vw-resize { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 60%, transparent 60%, transparent 75%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, .5) 85%, transparent 85%); }
@media (max-width: 899px) { .ds-video { left: 8px; right: 8px; width: auto; top: calc(var(--at-bar-h) + 8px); } .ds-vw-bar { opacity: 1; } .ds-vw-resize { display: none; } }
/* ---- Toasts, resume, menu, help */
.ds-toasts { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--at-dock-b, 0px) + 76px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: var(--ds-z-toast); pointer-events: none; }
.ds-toast { display: flex; align-items: center; gap: 10px; background: var(--ds-fg); color: var(--ds-bg); padding: 10px 16px; border-radius: 999px; font: 500 13px var(--ds-font); box-shadow: var(--ds-shadow-sm); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .25s var(--ds-ease); pointer-events: auto; max-width: min(520px, 100vw - 32px); }
.ds-toast.in { opacity: 1; transform: none; } .ds-toast.out { opacity: 0; } .ds-toast.err { background: var(--ds-danger); color: var(--ds-media-fg); } .ds-toast-act { border: 0; background: rgba(255, 255, 255, .18); color: inherit; font: 600 12px var(--ds-font); padding: 5px 10px; border-radius: 999px; cursor: pointer; }
/* Continue: a quiet pill in the top bar (layer.js mounts it after the crumb) — ▶ · Continue · title · m:ss · ✕; on a phone only ▶ · m:ss. */
.ds-resume { display: flex; align-items: center; gap: 2px; flex: none; min-width: 0; max-width: min(380px, 38vw); padding: 3px 4px 3px 3px; border-radius: 999px; border: 1px solid var(--ds-line); background: var(--ds-card); opacity: 0; transition: opacity .2s; }
@media (max-width: 1099px) { .ds-resume { max-width: min(300px, 26vw); } }   /* an iPad bar: the pill yields to the crumb */
.ds-resume.in { opacity: 1; } .ds-resume-main { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; cursor: pointer; padding: 0 4px 0 0; min-width: 0; font: 12.5px/1 var(--ds-font); } .ds-resume-main:hover .ds-resume-t { color: var(--ds-fg); }
.ds-resume-main > svg { flex: none; width: 24px; height: 24px; padding: 6px; border-radius: 50%; background: var(--ds-fg); color: var(--ds-bg); }
.ds-resume-x { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .ds-resume-x b { font-weight: 600; } .ds-resume-t { color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ds-resume-m { color: var(--ds-muted); font-variant-numeric: tabular-nums; flex: none; }
.ds-resume-close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--ds-muted); cursor: pointer; padding: 0; } .ds-resume-close:hover { background: var(--ds-soft); color: var(--ds-fg); } .ds-resume-close svg { width: 12px; height: 12px; }
@media (max-width: 640px) { .ds-resume { max-width: none; } .ds-resume-x b, .ds-resume-t { display: none; } }
.ds-menu { position: fixed; min-width: 250px; background: var(--ds-card); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); padding: 6px; opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .15s, transform .18s var(--ds-ease); z-index: var(--ds-z-menu); }
.ds-menu.in { opacity: 1; transform: none; } .ds-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 9px; font: 500 13px var(--ds-font); color: var(--ds-fg); cursor: pointer; text-align: left; } .ds-menu-item:hover { background: var(--ds-line); } .ds-menu-item svg { width: 17px; height: 17px; color: var(--ds-muted); }
.ds-menu.radio { min-width: 150px; } .ds-menu-item.on { color: var(--ds-accent); font-weight: 600; } .ds-menu-item.on svg { color: var(--ds-accent); } .ds-menu.radio .ds-menu-item { justify-content: space-between; } .ds-menu-gap { width: 17px; }
.ds-menu-group { padding: 6px 10px 8px; } .ds-menu-label { display: flex; align-items: center; gap: 10px; font: 500 13px var(--ds-font); margin-bottom: 8px; } .ds-menu-label svg { width: 17px; height: 17px; color: var(--ds-muted); } .ds-menu-lt { flex: 1; } .ds-menu-hint { font: 500 11px var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums; } .ds-menu-sub { display: flex; flex-wrap: wrap; gap: 5px; } .ds-menu-sub .ds-chip { height: 26px; padding: 0 9px; }
.ds-help { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); display: grid; place-items: center; z-index: var(--ds-z-help); } .ds-help-card { background: var(--ds-card); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); padding: 20px 22px; width: min(420px, 100vw - 32px); max-height: 85vh; overflow: auto; } .ds-help-card h3 { margin: 0 0 12px; font: 600 15px var(--ds-font); }
.ds-help dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 13px; } .ds-help dt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ds-accent); white-space: nowrap; } .ds-help dd { margin: 0; color: var(--ds-muted); }
/* ---- Summary sheet + Markdown */
.ds-sheet { position: fixed; inset: 0; background: rgba(20, 14, 8, .38); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); z-index: var(--ds-z-sheet); opacity: 0; transition: opacity .18s; }
.ds-sheet.in { opacity: 1; } .ds-sheet.in .ds-sheet-card { transform: none; }
.ds-sheet-card { display: flex; flex-direction: column; width: min(720px, 100%); max-height: min(86vh, 100% - 0px); background: var(--ds-card); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); overflow: hidden; transform: translateY(14px) scale(.985); transition: transform .26s var(--ds-ease); }
.ds-sheet-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 12px 12px 22px; border-bottom: 1px solid var(--ds-line); flex: none; } .ds-sheet-x { flex: 1; min-width: 0; }
.ds-sheet-t { margin: 0; font: 600 17px/1.3 var(--ds-font); letter-spacing: -.01em; } .ds-sheet-s { font-size: 12px; color: var(--ds-muted); margin-top: 3px; }
.ds-sheet-card[data-kind="folder"] .ds-sheet-t::before { content: "Folder summary"; display: block; font: 700 10px var(--ds-font); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-accent); margin-bottom: 4px; }
.ds-sheet-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 6px 24px 30px; }
.ds-md { font-family: var(--ds-font); font-size: 15px; line-height: 1.6; } .ds-md p { margin: 0 0 12px; } .ds-md ul, .ds-md ol { padding-left: 22px; margin: 0 0 14px; } .ds-md li { margin: 5px 0; } .ds-md li::marker { color: var(--ds-accent); }
.ds-md h1, .ds-md h2, .ds-md h3, .ds-md h4 { font-family: var(--ds-font); letter-spacing: -.005em; margin: 20px 0 8px; line-height: 1.3; } .ds-md h1 { font-size: 18px; } .ds-md h2 { font-size: 15px; } .ds-md h3, .ds-md h4 { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ds-muted); }
.ds-md strong { font-weight: 700; } .ds-md code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ds-line); padding: 1px 5px; border-radius: 5px; }
.ds-md a { color: var(--ds-accent); } .ds-md a.ds-time { display: inline-block; font: 700 11.5px var(--ds-font); font-variant-numeric: tabular-nums; text-decoration: none; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ds-accent) 11%, transparent); cursor: pointer; vertical-align: 1px; margin-right: 2px; transition: background .15s, color .15s; } .ds-md a.ds-time:hover { background: var(--ds-accent); color: var(--ds-bg); }
.ds-summary { padding-top: 2px; font: var(--ds-read); }
/* ---- Narrow screens: the drop gets a grabber (drag up to dismiss); the folders card is anchored top + bottom */
@media (max-width: 899px) {
  .ds-grab { display: block; } .ds-pn-head { padding-top: 10px; touch-action: none; }
  .ds-browser { top: calc(env(safe-area-inset-top) + 10px); left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; height: auto; transform: translateY(40px); } .ds-browser.in { transform: none; }   /* anchored top + bottom: never under the status bar */
  .ds-sheet { padding: 10px 10px max(10px, env(safe-area-inset-bottom)); align-items: end; } .ds-sheet-card { max-height: 88vh; }
}
/* ---- Phones: one compact player row (play · title · times) with the scrubber on the bar's edge; the transport line lives in the
   drop head; the drop is flush with the screen edges; every text field is 16 px so iOS never zooms the page on focus. */
@media (max-width: 640px) {
  .at-player { flex-direction: row; align-items: center; gap: 8px; height: 48px; padding: 0; } .ds-r1, .ds-cl { display: contents; } .at-player .ds-close { order: 1; } .at-player .ds-ctrls, .at-player .ds-sc:not(.edge), .at-player .ds-tools > :not(.ds-close), .at-player .ds-art, .at-player .ds-tpill { display: none; }
  .at-player .ds-skip { display: none; }   /* the phone row: skip lives in ⋯ */
  .at-player .ds-play-ph { display: grid; order: -1; } .at-player .ds-sc.edge { display: flex; } .ds-meta { flex: 1; } .ds-times { display: block; }
  .ds-pn-tr { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 0 6px; } .ds-pn-tr .ds-btn { width: 44px; height: 44px; } .ds-pn-tr .ds-speed { min-width: 44px; height: 44px; } .ds-pn-tr .ds-play { width: 46px !important; height: 46px !important; }
  .ds-drop { left: 0; transform: none; width: 100vw; }
}
@media (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; }   /* the one centralized iOS focus-zoom guard (covers the static instrument pages too) */
}

/* ---- /review page ---- */
.ds-review { max-width: 860px; margin: 0 auto; padding: 28px 0 160px; }
.ds-rv-head h1 { display: flex; align-items: center; gap: 10px; font: 600 26px/1.2 var(--ds-font); letter-spacing: -.01em; margin: 0 0 6px; } .ds-rv-head h1 svg { width: 24px; height: 24px; color: var(--ds-accent); }
.ds-rv-sub { color: var(--ds-muted); margin: 0 0 18px; font-size: 14px; }
.ds-rv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: sticky; top: 0; padding: 10px 0; background: var(--ds-bg); z-index: 2; } .ds-rv-stat { margin-left: auto; color: var(--ds-muted); font: 500 12px var(--ds-font); }
.ds-rv-card { margin: 14px 0; padding: 16px 18px; border-radius: 16px; background: var(--ds-card, var(--ds-glass)); border: 1px solid var(--ds-line); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: opacity .25s, transform .25s; }
.ds-rv-card.done { opacity: 0; transform: translateX(24px); } .ds-rv-card.busy { opacity: .6; pointer-events: none; }
.ds-rv-cite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 12px var(--ds-font); color: var(--ds-muted); } .ds-rv-cite code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ds-fg); background: var(--ds-line); padding: 2px 7px; border-radius: 6px; white-space: pre-wrap; }
.ds-rv-doc { font-weight: 700; color: var(--ds-accent); } .ds-rv-conf { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--ds-line); } .ds-rv-conf.guess { color: var(--ds-warn); } .ds-rv-conf.unresolved { color: var(--ds-danger); } .ds-rv-why { flex-basis: 100%; }
.ds-rv-quote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--ds-accent); background: var(--ds-cur); border-radius: 0 10px 10px 0; font: italic 15px/1.5 var(--ds-font); }
.ds-review h4 { margin: 14px 0 6px; font: 600 11px var(--ds-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); }
.ds-rv-cand { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--ds-line); } .ds-rv-cand:first-child { border-top: 0; } .ds-rv-cand-x { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ds-rv-snip { font-size: 13px; color: var(--ds-muted); }
.ds-rv-search { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .ds-rv-search svg { width: 16px; height: 16px; color: var(--ds-muted); flex: none; } .ds-rv-search .ds-search-in { flex: 1; }
.ds-rv-results { margin-top: 4px; } .ds-rv-none { color: var(--ds-muted); font-size: 13px; margin: 8px 6px; }
.ds-rv-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.ds-btn-primary { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--ds-accent); color: var(--ds-bg); font: 600 13px var(--ds-font); cursor: pointer; } .ds-btn-primary:hover { filter: brightness(1.08); }
.ds-btn-text { height: 30px; padding: 0 10px; border: 0; background: transparent; color: var(--ds-muted); font: 500 13px var(--ds-font); cursor: pointer; border-radius: 8px; } .ds-btn-text:hover { background: var(--ds-line); color: var(--ds-fg); }
.ds-rv-empty { text-align: center; padding: 60px 0; color: var(--ds-muted); } .ds-rv-empty svg { width: 36px; height: 36px; color: var(--ds-accent); } .ds-rv-more { color: var(--ds-muted); text-align: center; }

/* ---- citation pills + clickable quotes inside documents ---- */
a.rec, a.note { display: inline-block; font-family: var(--ds-font); font-size: .78em; font-weight: 600; line-height: 1.5; padding: 0 8px; border-radius: 999px; color: var(--ds-accent); background: color-mix(in srgb, var(--ds-accent) 11%, transparent); text-decoration: none; vertical-align: 1px; white-space: nowrap; transition: background .15s, color .15s; }
a.rec::before { content: "▶"; font-size: .7em; margin-right: 4px; vertical-align: 1px; } a.note::before { content: "✎"; margin-right: 4px; }
a.rec:hover, a.note:hover { background: var(--ds-accent); color: var(--ds-bg); }
.q[data-rec], .q[data-note] { cursor: pointer; text-decoration: underline dotted color-mix(in srgb, var(--ds-accent) 55%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: 4px; transition: background .15s; }
.q[data-rec]:hover, .q[data-note]:hover { background: color-mix(in srgb, var(--ds-accent) 10%, transparent); }

.ds-br-err { color: var(--ds-danger); display: flex; gap: 8px; align-items: center; }