/* The Photo sheet (increment E, DAY-PAGE-PLAN §6) — moved out of capture.css at
 * the wave-1 merge, when the merged keypad and chip rules took that file past
 * HARD RULE 8's 800 lines. Every rule here is scoped to .photo; it loads right
 * after capture.css, whose .sheet and .sheet__card it builds on. */

/* ------------------------------------------------ the Photo sheet (E, §6)
 *
 * #photo-sheet is a .sheet with a .sheet__card, as the keypad is, and takes
 * day.css's rows from C2 and C3 as they are: `.sheet__picks` with its label,
 * the 44 px `.sheet__pick` chips (pressed: filled in the structural green),
 * `.sheet__hint`, and `.sheet__choices` for Save and Cancel. What is new is
 * only the preview, its no-preview line, the pending items' list, the caption
 * and a role waiting for a target. Below 1100 px the card sits on the foot
 * of the phone with Save and Cancel held on screen, as every sheet's does
 * (F6, above); it was centred there until F. */

.photo__preview {
  display: block;
  max-width: 100%;
  /* Room for the chips and the roles under it on a 844 px phone. */
  max-height: 28dvh;
  margin: 0 auto var(--space-3);
  object-fit: contain;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.photo__nopreview {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-md);
}

.photo__targets,
.photo__roles {
  margin-bottom: var(--space-2);
}

/* With the items listed or the caption up, the preview gives way (the owner
 * has seen it), and the items scroll in a box of their own: the eight the
 * sheet can list were 1,000 px of card, and a tap on one only turned it green
 * while the roles, the hint and Cancel sat below the phone's edge (fidelity
 * review of E, M1). photo-sheet.js also brings the answers into view as an
 * item or New note is chosen, for a phone shorter still. */
.photo:has(.photo__items:not([hidden])) .photo__preview,
.photo:has(.photo__caption:not([hidden])) .photo__preview {
  max-height: 14dvh;
}

/* The open pending items, one full-width 44 px button each: their words are
 * sentences, and a chip would wrap them into a pill three lines tall. The
 * padding is room for a focused item's ring, which the box would clip. */
.photo__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 32dvh;
  margin-bottom: var(--space-3);
  padding: var(--space-1);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: var(--space-1);
}

/* Where photo-sheet.js scrolls the answers to: clear of the phone's edge by
 * the card's padding and the sheet's, not flush against it. */
.photo .sheet__choices {
  scroll-margin-block-end: calc(var(--space-4) + var(--space-2));
}

/* `flex: none`: a capped column would otherwise squash a two-line item. */
.photo__item {
  flex: none;
  width: 100%;
  text-align: start;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.photo__item[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.photo__caption {
  margin-bottom: var(--space-3);
}

/* A role waiting for a target: aria-disabled, never `disabled` — it stays a
 * Tab stop, announced as unavailable, described by the hint — and drawn
 * quiet; the tap is refused in photo-sheet.js. */
.photo__roles .sheet__pick[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}