/**
 * Photos in the body of an entry.
 *
 * 📐 Canonical doc: docs/features/media-capture.md W4, D7
 *
 * ⭐ **THE COMPOSER AND THE READING VIEW USE THE SAME RULES**, which is W4's
 * "what you compose is what you get" stated in CSS. Every selector below is
 * written twice on purpose — once inside `trix-editor` and once inside
 * `.trix-content` — because a width that only applied while writing would make
 * the reading view a surprise, and a photo she placed as wide would quietly
 * become a column photo the moment she saved.
 *
 * ⚠️ **Two widths, not three.** D7 kept column and wide for v1 and left full
 * bleed out. The class comes from `core/attachments/markup.py`, which forces it
 * into an allowlist — an unvalidated value here would be an injection into the
 * class attribute of every entry that renders.
 */

/* ── Column: the default. Sits inside the measure of the text. ───────────── */
trix-editor .attachment--column,
.trix-content .attachment--column {
    max-width: 100%;
    margin-inline: 0;
}

/* ── Wide: breaks out of the measure a little, still contained. ──────────── */
/* The reading column is deliberately narrow, so "wide" is a modest step out
   rather than a full-width image — a photograph that dwarfs the writing next to
   it contradicts "your words first, extraction quiet". */
trix-editor .attachment--wide,
.trix-content .attachment--wide {
    max-width: min(100vw - var(--space-2xl) * 2, 46rem);
    margin-inline: calc(var(--space-2xl) * -1);
    width: auto;
}

@media (max-width: 48rem) {
    /* On a phone there is no room to break out, so wide collapses to column.
       Keeping the negative margin would push the photo under the screen edge. */
    trix-editor .attachment--wide,
    .trix-content .attachment--wide {
        max-width: 100%;
        margin-inline: 0;
    }
}

/* ── The photo itself ────────────────────────────────────────────────────── */
trix-editor .attachment img,
.trix-content .attachment img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* ── Caption ─────────────────────────────────────────────────────────────── */
/* ⚠️ Pinned to column width even when the photo is wide, per W4: a caption that
   ran the full width of a wide photo would set a second, longer measure on the
   page and break the reading rhythm the entry page exists to protect. */
trix-editor .attachment__caption,
.trix-content .attachment__caption {
    display: block;
    max-width: 100%;
    margin: var(--space-sm) auto 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    /* A literal, like the rest of the component CSS. ⚠️ The design-system
       manifest lists --leading-* tokens; static/css/themes/default.css does
       not define them, and tests/test_css_tokens_exist.py catches the
       difference -- a ghost token is dropped silently and reads as a choice. */
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

/* ── The composer's photo button ─────────────────────────────────────────── */
/* Inherits `.composer__tool` for shape and spacing; only the disabled state
   during an upload is specific to it. */
.composer__tool[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
}

/* ⛔ Trix draws its own upload progress bar. Give it a colour from the palette
   rather than leaving it on Trix's default blue, which is in no Pensio token. */
trix-editor .attachment__progress {
    background: var(--primary-light);
}

trix-editor .attachment__progress[value]::-webkit-progress-value {
    background: var(--primary);
}

trix-editor .attachment__progress[value]::-moz-progress-bar {
    background: var(--primary);
}

/* ══ A voice note in the body ════════════════════════════════════════════════
 *
 * ⭐ **BUILT AT RENDER TIME, SO THESE RULES ONLY EVER APPLY TO THE READING
 * VIEW.** There is no `trix-editor` twin below, unlike every rule above, and
 * the asymmetry is the design rather than an omission: F3 established that a
 * player cannot survive storage, so the composer holds an inert marker and the
 * player exists only on the page. 📐 docs/features/media-capture.md F3
 */
.trix-content .voice-note,
.voice-note {
    margin-block: var(--space-xl);
    padding: var(--space-base);
    background: var(--surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.voice-note__player {
    display: block;
    width: 100%;
}

/* ⭐ The transcript is her writing, so it is set like her writing — not like
   machine output in a monospace box under a disclosure. */
.voice-note__transcript {
    margin-top: var(--space-md);
}

.voice-note__transcript p:last-child {
    margin-bottom: 0;
}

/* The waiting, failed and nothing-was-said lines. Quiet: none of them is
   something she has to act on, and two of the three resolve by themselves. */
.voice-note__state,
.voice-note__discarded {
    margin: var(--space-md) 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.voice-note__discarded {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
}

.voice-note__state--failed {
    color: var(--error-text);
}