/* App-only layout on top of the design tokens. No colors or fonts of its own. */
.ab-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.ab-bar form { display: flex; align-items: center; gap: 8px; margin: 0; }
.ab-home { font: 500 16px/1 var(--font-sans); color: var(--foreground); text-decoration: none; }
.ab-who { font-size: 14px; color: var(--muted-foreground); }
.ab-main { padding-top: 40px; padding-bottom: 96px; }
.ab-chapters { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--border); }
.ab-chapters li { border-bottom: 1px solid var(--border); }
.ab-chapters a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; color: inherit; text-decoration: none; }
.ab-chapters a:hover { color: var(--brand); }
.ab-meta { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--font-mono); color: var(--muted-foreground); white-space: nowrap; }
.ab-title { font-size: clamp(28px, 6vw, 44px); }
.ab-sticky { position: sticky; top: 0; z-index: 5; display: grid; gap: 8px; padding: 8px 0 12px; background: var(--background); }
.ab-sticky .audio-player { margin: 0; }
.ab-hint { font-size: 14px; color: var(--muted-foreground); }
.transcript-lines p { cursor: pointer; border-radius: 4px; }
.transcript-lines p:hover { background: var(--accent); }
.transcript-lines > li[data-flagged] p { box-shadow: -3px 0 0 var(--brand); padding-left: 10px; margin-left: -13px; }
.transcript-lines > li[data-flagged] .transcript-time::after { content: " ⚑"; color: var(--brand); }
.ab-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; }
#ab-dialog { width: min(560px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--foreground); }
#ab-dialog::backdrop { background: rgb(0 0 0 / .4); }
#ab-dialog blockquote { margin: 8px 0 16px; font: 400 17px/1.55 var(--font-serif); }
#ab-dialog textarea { width: 100%; }
.ab-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#ab-toast { position: fixed; left: 50%; bottom: 20px; z-index: 20; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--foreground); }
#ab-toast[hidden] { display: none; }