/* 06-components/_img-slot.css — .c-img-slot: a photo on an activity, or the place to add one. */
.c-img-slot { 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; }