/* Fotos: the album grid, selection, viewer, uploads and the iCloud import. Also the file buttons of Essen. */
@layer features {
  .photos-usage { margin-top: calc(-1 * var(--space-3)); margin-bottom: var(--space-3); }
  .photos-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
  .photos-uploads, .photos .card { margin-bottom: var(--space-4); }
  .photos-uploads .list-row.failed .row-meta { color: var(--color-danger); font-weight: var(--weight-bold); }

  .photo-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(45%, 160px), 1fr)); }
  .photo-tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface-2);
    cursor: pointer;
  }
  .photo-tile img { width: 100%; height: 100%; object-fit: cover; }
  .photo-tile:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 2px; }
  .photo-check {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-surface);
    z-index: 1;
  }
  .photo-tile[aria-pressed] .photo-check { display: grid; }
  /* The selection frame lies above the photo (an inset shadow would be painted under the <img>). */
  .photo-tile.selected::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 4px solid var(--color-accent);
    border-radius: inherit;
    pointer-events: none;
  }
  .photo-tile.selected .photo-check { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-on-accent); }

  .photos-actionbar { position: sticky; top: calc(var(--header-height) + var(--space-2)); z-index: 5; display: flex; align-items: center; gap: var(--space-3); }
  .photos-actionbar[hidden] { display: none; }

  /* The viewer is a wide sheet: a photo frame app shows photos large (also on a 1280 x 800 wall). */
  .sheet.photo-sheet { width: min(96vw, 1400px); max-width: 96vw; }
  .photo-viewer figure { display: grid; place-items: center; }
  /* The photo leaves room for the sheet's header, the date and the action row (prev/next, Papierkorb):
     everything fits the viewport, nothing has to be scrolled to on a wall (F5). */
  .photo-view {
    --viewer-chrome: calc(24px + 2 * var(--space-5) + var(--tap-min) + var(--space-4) + 1.5em + var(--tap-min) + 2 * var(--space-3));
    max-height: max(160px, calc(100dvh - var(--viewer-chrome)));
    max-width: 100%;
    width: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
  }
  @media (max-width: 599px) {
    .sheet.photo-sheet { width: 100vw; max-width: 100vw; }
  }

  .icloud summary { display: flex; align-items: center; min-height: var(--tap-min); font-weight: var(--weight-bold); cursor: pointer; }
  .icloud-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .icloud-pick { position: relative; display: block; cursor: pointer; }
  .icloud-pick input { position: absolute; top: var(--space-1); left: var(--space-1); width: 24px; height: 24px; margin: 0; accent-color: var(--color-accent); }
  .icloud-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }

  /* A <label class="button"> opens a visually hidden file input: the label shows the input's focus. */
  .file-button { cursor: pointer; }
  .photos-upload:has(> input[type='file']:focus-visible) > .file-button,
  .field:has(> input[type='file']:focus-visible) > .file-button { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 2px; }

  @media (hover: hover) and (pointer: fine) {
    .photo-tile:not(.selected):hover::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--color-field-border); border-radius: inherit; pointer-events: none; }
  }
}