/* #/: the notice and its box, the place for the photo, then the two ways to take it, within thumb reach */
.start { display: flex; flex-direction: column; gap: var(--space-md); max-width: var(--form-max); min-height: calc(100svh - var(--bar-height)); padding-block: var(--space-lg); }
.start__notice { color: var(--color-ink-2); }
.start__check { margin-top: calc(-1 * var(--space-xs)); }

/* Empty: a quiet well saying what belongs in it. Full: the photo from the device, whole, at once. */
.start__photo { position: relative; flex: 1 1 0; display: grid; place-items: center; min-height: 12rem; margin: 0; background: var(--color-paper-2); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; overflow: hidden; }
.start__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.start__hint { padding: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.start__photo:not([data-empty]) .start__hint { display: none; }

/* The optional label: a name and its hint on one line, then a .field (base.css) */
.start__label { display: grid; gap: var(--space-2xs); }
.start__label label { font-weight: 500; }
.start__label-hint { margin-left: var(--space-2xs); color: var(--color-muted); font-weight: 400; font-size: var(--text-sm); }

.start__progress { display: grid; gap: var(--space-xs); justify-items: start; }
.start__capture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.start__capture .btn { padding-inline: var(--space-sm); }

/* A laptop has no rear camera: the file picker is the one action */
@media (hover: hover) and (pointer: fine) {
  .start { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .start__photo { flex: none; aspect-ratio: 3 / 2; }
  .start__capture { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .capture--camera { display: none; }
  .capture--file { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
  .start__capture .capture--file { padding-inline: var(--space-lg); }
}
@media (hover: hover) and (pointer: fine) { .capture--file:hover { background: var(--color-ink-2); } }