/**
 * 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, 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.
 *
 * ⛔ **AND FOR MONTHS THE SECOND HALF REACHED THE READER NEVER** (fixed
 * 2026-09-22). The pair was `trix-editor …` and `.trix-content …`, and
 * `.trix-content` is **a class on the `<trix-editor>` element itself**
 * (`entry_form.html` line 281, `focus_write.html` line 81). So both halves
 * matched the composer — the second one redundantly — and the reading view,
 * which is `.entry-content.prose` (`entry_detail.html`), matched neither. Every
 * width, the image radius and the caption rule were composer-only, and the
 * exact surprise this file's header promised to prevent is what shipped.
 *
 * ⚠️ **IT LOOKED RIGHT IN REVIEW AND IN THE COMPOSER.** A photo set to wide
 * IS wide while she writes it; only the saved entry tells the truth, and
 * nothing asserted on the saved entry. `static/css/components/spoken.css` was
 * written unscoped for this reason and says so in its own header — that note
 * is what led here.
 *
 * ⚠️ **Two widths, not three.** D7 kept column and wide for v1 and left full
 * bleed out. The class comes from `core/attachments/figure_attributes.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,
.entry-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,
.entry-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,
    .entry-content .attachment--wide {
        max-width: 100%;
        margin-inline: 0;
    }
}

/* ── The photo itself ────────────────────────────────────────────────────── */
trix-editor .attachment img,
.entry-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,
.entry-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);
}

/* ⛔ **THE `.voice-note*` RULES WERE DELETED HERE ON 2026-09-22.** They styled
 * `templates/core/includes/_voice_note.html`, which no longer exists — the
 * block became `.spoken` and moved to `static/css/components/spoken.css` with
 * the module that owns it (`core/attachments/spoken.py`). A repo-wide grep for
 * elements carrying any `voice-note` class finds none; the only surviving
 * matches are the placeholder MIME type and a docstring.
 *
 * ⚠️ They were not merely unused: `.entry-content .voice-note` put a filled,
 * bordered container around a transcript, which is the box the design decision
 * of 2026-09-21 removed. Left here, the next person to render a `.voice-note`
 * would silently get the old answer back. Git holds them, with the message
 * saying why.
 */