/* The article read aloud (ADR-70): a quiet box at the foot of the article's header. Loaded only
 * by `partials/article_audio.html`, so it sits outside every theme's CSS budget; it reads the
 * shared tokens of `base.css`, each with a fallback, and a theme restyles `.article-audio` like
 * any other hook. */
.article-audio {
    margin: var(--space-4, 1rem) 0 0;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border: 1px solid var(--line, #d7dae0);
    border-radius: var(--radius, 0.375rem);
    background: var(--bg-raised, transparent);
}

/* One line for what it is: the title, its length, who reads it and the shortcut (owner,
 * 2026-10-12: the first box took a third of a phone's screen). It wraps on a narrow screen. */
.article-audio__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3, 0.75rem);
    margin: 0 0 var(--space-1, 0.25rem);
}

.article-audio__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2, 0.5rem);
    margin: 0;
    font-size: 0.95rem;
}

.article-audio__length,
.article-audio__synthetic {
    font-weight: 400;
    color: var(--fg-muted, inherit);
}

.article-audio__synthetic,
.article-audio__keys {
    font-size: 0.8rem;
}

/* The shortcut's hint (shown only with a mouse) keeps to the right of the same line. */
.article-audio__keys {
    margin-inline-start: auto;
    color: var(--fg-muted, inherit);
}

/* Chrome draws the control 54 px high by default and scales it to the height it is given. */
.article-audio__player {
    display: block;
    width: 100%;
    height: 2.5rem;
}

.article-audio kbd {
    padding: 0 0.3em;
    border: 1px solid var(--line, #d7dae0);
    border-radius: 0.25em;
    font-family: var(--font-mono, monospace);
    font-size: 0.9em;
}