/* 06-components/_img-slot.css — .c-img-slot: a photo on an activity, or the place to add one. */
/* flex: none keeps the slot from being shrunk to its border by .c-sheet__body, which is a
   flex column with its own scroll: an aspect-ratio box has no content height of its own. */
.c-img-slot { flex: none; position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; max-width: 20rem; background: var(--surface-sunken); border: var(--stroke) dashed var(--rule-strong); border-radius: var(--radius-sm); overflow: hidden; color: var(--ink-faint); font-size: var(--text-sm); }
.c-img-slot img { width: 100%; height: 100%; object-fit: cover; }
.c-img-slot.has-image { border-style: solid; }
.c-img-slot__label { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-muted); }
.c-img-slot__label:hover { background: var(--surface); color: var(--ink); }
.c-img-slot__label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
@media (pointer: coarse) { .c-img-slot__label { min-height: var(--height-control); } }
.c-img-slot__remove { position: absolute; top: var(--space-xs); inset-inline-end: var(--space-xs); }
/* added for pages/sign-off.html and pages/new-activity.html — an empty slot in a form need not be 4:3 */
.c-img-slot--compact { aspect-ratio: auto; min-height: 5rem; }
/* added for image_preview_controller.js — a chosen photo fills the slot, and the label stays on top of it to pick another */
.c-img-slot--compact.has-image { aspect-ratio: 4 / 3; }
.c-img-slot.has-image .c-img-slot__label { position: absolute; inset-block-end: var(--space-xs); inset-inline-start: var(--space-xs); background: var(--surface); }
.c-img-slot.has-image img { position: absolute; inset: 0; }