/* #/c/{id}, the After photo under the head: a quiet ruled band, never louder than the Simulations below it.
 * Empty: one line and the two ways to take the photo. Filled: a small Eye strip, its name and its actions. */
.after {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-xs) var(--space-sm);
  padding-block: var(--space-sm); border-block: var(--rule-hair) solid var(--color-rule);
}
.after > * { grid-column: 1 / -1; }
.after__title { font-weight: 500; }
.after__capture, .after__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.after__status:empty { display: none; }
.after__loading { --skeleton-height: 1lh; min-height: var(--control-height-s); display: grid; align-items: center; }

/* With a photo: the strip at the list's thumbnail size, its name beside it, the actions under both */
.board .after__thumb { grid-column: 1; grid-row: 1; width: 7.5rem; margin-inline: 0; } /* not edge to edge like the big strips */
.after__thumb + .after__title { grid-column: 2; grid-row: 1; }
/* The picked photo before the server cut its Eye strip: the whole photo, so nothing is hidden while it is sent */
.after__thumb--local img { object-fit: contain; }
.after[data-state="sending"] .after__thumb img { opacity: 0.7; }

/* Remove, then the question in its place (.confirm, base.css) */
.after__actions[data-confirm] { display: block; }

/* A laptop has no rear camera: the file picker is the one way */
@media (hover: hover) and (pointer: fine) { .after__camera { display: none; } }

@media (min-width: 40rem) { .board .after__thumb { width: 10rem; } }
@media (min-width: 60rem) {
  .board > .after { grid-column: 1 / -1; grid-template-columns: auto auto minmax(0, 1fr); }
  .after[data-state="empty"] { grid-template-columns: auto minmax(0, 1fr); }
  .after[data-state="empty"] > * { grid-column: auto; grid-row: 1; }
  .after[data-state="empty"] > .after__status { grid-column: 1 / -1; grid-row: 2; }
  .after__actions { grid-column: 3; grid-row: 1; justify-content: flex-end; }
  .after__actions[data-confirm] { display: flex; justify-content: flex-end; }
  .after__actions .confirm__question { margin-right: var(--space-xs); }
}