/**
 * Attachment marks — what an entry carries, said the same way everywhere.
 *
 * 📐 templates/core/includes/_attachment_marks.html
 *
 * ⭐ **A FACT ABOUT THE ITEM, SO IT SITS IN THE META, NOT ON A SURFACE OF ITS
 * OWN.** Design 2.0's rule is that the card goes on the item and the name goes
 * on the ground; a mark is neither — it is one more property beside the date
 * and the feeling, and it is drawn at the same rung as they are.
 *
 * ⛔ **NO BADGE, NO PILL, NO CHIP.** Those all say "this is a thing you can
 * press". A mark is not a control and must not borrow the shape of one — the
 * `.badge` and `.reference-chip` recipes are for surfaces she can act on.
 * `badges.css` is the sheet that would be reached for by reflex here; the
 * difference is worth stating once rather than being re-litigated per screen.
 */

.marks {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.marks__mark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1;
    white-space: nowrap;
}

/* ⚠️ **THE GLYPHS ARE LINE ICONS AT TWO-THIRDS SIZE, SO THE STROKE NEEDS
   HELP.** `image` and `microphone` are both 24x24 `stroke="currentColor"` at
   2px (core/icons.py, LINE). Drawn into a 16px box the stroke scales with the
   art and lands at ~1.33px, which reads thinner than the text beside it and
   makes the mark look like it is fading out. `.btn__mark` compensates the same
   downscale inside a control; this is that rule for a mark that is not one.

   ⛔ `vertical-align` cannot do this job — these are flex items, so the
   property is ignored. The alignment comes from `align-items` on the parent. */
.marks__glyph {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    stroke-width: 2.25;
    flex-shrink: 0;
}

/* On the gallery tile the marks share the foot with the feeling, and the foot
   is already a row — so they only need to not stretch it. */
.gallery-tile__foot .marks {
    margin-left: auto;
}