/* Keep metadata quiet and playback together below the title. */
.reading-time { white-space:nowrap; text-transform:none; letter-spacing:normal; }
.article-tools { margin:0 0 26px; color:var(--ink-2); font:400 13px/1.5 Inter,system-ui,sans-serif; }
.listen-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.article-tools button { color:var(--ink); background:transparent; border:1px solid transparent; border-radius:999px; min-height:44px; padding:8px 12px; font:inherit; cursor:pointer; }
.article-tools .listen-toggle { min-width:44px; background:var(--bg-2); border-color:var(--line); }
.article-tools button:hover:not(:disabled) { background:var(--bg-2); border-color:var(--line); }
.article-tools button:disabled { opacity:.4; cursor:default; }
.article-tools :focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
.narration-label { margin-left:4px; color:var(--ink-3); font-size:12px; }
.listen-speeds { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; width:fit-content; padding:3px; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); }
.listen-speeds button { min-width:44px; padding-inline:10px; }
.article-tools .listen-speeds button { border-color:transparent; transition:background-color .15s ease; }
.article-tools .listen-speeds button:hover:not(:disabled) { background:color-mix(in srgb, var(--ink) 6%, transparent); border-color:transparent; }
.article-tools .listen-speeds button[aria-pressed="true"],
.article-tools .listen-speeds button[aria-pressed="true"]:hover { background:color-mix(in srgb, var(--amber) 12%, transparent); color:var(--amber); border-color:transparent; }
@media(prefers-reduced-motion:reduce) { .article-tools .listen-speeds button { transition:none; } }
.listen-status:empty { display:none; }
.listen-status { display:block; margin-top:8px; }
.article-tools[hidden], .article-tools [hidden], .reading-progress[hidden] { display:none; }
.reading-progress { position:fixed; bottom:0; left:0; right:0; height:3px; background:var(--line); z-index:100; pointer-events:none; }
.reading-progress > span { display:block; width:100%; height:100%; background:var(--amber); transform:scaleX(0); transform-origin:left; }
@media(max-width:620px) { .reading-mode { margin-bottom:18px; gap:8px; } .reading-mode > span { font-size:12px; } .article-tools { margin-bottom:26px; } }
@media print { .article-tools, .reading-progress { display:none; } }

/* Icon buttons keep playback compact without losing accessible names. */
.article-tools .listen-toggle, .article-tools .listen-restart { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; flex:none; }
.article-tools svg { width:20px; height:20px; flex:none; }
.listen-toggle .pause-icon { display:none; }
.listen-toggle[data-playing="true"] .play-icon { display:none; }
.listen-toggle[data-playing="true"] .pause-icon { display:block; }