/* What: the album surfaces - the Stage 8 editing grid and the public gallery (spec 12.3, 12.6).
   Use: linked by the Album views and by the homepage's past-workshop cards; tokens come from tokens.css.
   Needs: tokens.css, app.css. Logical properties only. */

/* Stage 8, the top of the page: where photos come in, and who may see them. On a laptop the two sit
   side by side - the zone takes the width, the decision takes a column - and they stack below that. */
.album-top { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-block-end: var(--space-4); }

@media (min-width: 1100px) { .album-top { grid-template-columns: minmax(0, 1fr) 22rem; align-items: stretch; } }

.album-drop { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }

/* Without the script this is a label above a file field and a button, and it works. */
.album-drop-zone {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-block-size: 15rem;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.album-top.is-empty .album-drop-zone { min-block-size: 22rem; }

/* The frame is an album page waiting for a print: four photo corners and nothing between them.
   One box, masked down to its corners; the mask is symmetrical, so it needs no mirroring. */
.album-drop-zone::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid var(--ink-300);
  border-radius: var(--radius-md);
  pointer-events: none;
  --corner: 28px;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / var(--corner) var(--corner) no-repeat,
    linear-gradient(#000 0 0) 100% 0 / var(--corner) var(--corner) no-repeat,
    linear-gradient(#000 0 0) 0 100% / var(--corner) var(--corner) no-repeat,
    linear-gradient(#000 0 0) 100% 100% / var(--corner) var(--corner) no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / var(--corner) var(--corner) no-repeat,
    linear-gradient(#000 0 0) 100% 0 / var(--corner) var(--corner) no-repeat,
    linear-gradient(#000 0 0) 0 100% / var(--corner) var(--corner) no-repeat,
    linear-gradient(#000 0 0) 100% 100% / var(--corner) var(--corner) no-repeat;
  transition: inset var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.album-drop-zone:hover { border-color: var(--border-strong); }
.album-drop-zone:hover::before { border-color: var(--primary); }

/* A photo held over the page: the corners close in on it. */
.album-drop.is-over .album-drop-zone { background: var(--teal-50); border-color: var(--primary); }
.album-drop.is-over .album-drop-zone::before { inset: 28px; border-color: var(--primary); }

.album-drop:focus-within .album-drop-zone { outline: 2px solid var(--primary); outline-offset: 2px; }

.album-drop-icon {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: var(--space-2);
  border-radius: 50%;
  background: var(--teal-50);
  color: var(--teal-700);
}

.album-drop-icon .icon { inline-size: 24px; block-size: 24px; }

.album-drop-title {
  font-family: var(--font-display), var(--font-arabic), sans-serif;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text);
}

.album-drop-choose { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.album-drop-zone .hint { margin: var(--space-2) 0 0; }

.album-drop-manual { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.album-drop-manual .input { flex: 1 1 16rem; }

/* With the script the zone is the control: the field stays focusable for the keyboard, out of sight. */
.album-drop.is-enhanced .album-drop-manual {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* While photos travel, the words step aside for the photos themselves and one honest count. */
.album-drop.is-busy .album-drop-zone { cursor: progress; pointer-events: none; }
.album-drop.is-busy .album-drop-zone > * { visibility: hidden; }

.album-drop-status {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  pointer-events: none;
}

.album-drop-status[hidden] { display: none; }
.album-drop-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); max-inline-size: 44rem; }

.album-drop-tile {
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  opacity: .4;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.album-drop-tile.is-done, .album-drop-more { opacity: 1; }
.album-drop-tile img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.album-drop-bar {
  inline-size: min(22rem, 100%);
  block-size: 6px;
  border: 0;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--ink-100);
  accent-color: var(--primary);
}

.album-drop-bar::-webkit-progress-bar { background: var(--ink-100); }
.album-drop-bar::-webkit-progress-value { background: var(--primary); border-radius: var(--radius-pill); }
.album-drop-bar::-moz-progress-bar { background: var(--primary); border-radius: var(--radius-pill); }
.album-drop-text { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }
/* One refused file to a line, each with its own reason: the script joins them with line breaks. */
.album-drop-refused { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }

/* Who may see it. The state is the heading; the switch under it is the only thing to decide. */
.album-vis { display: grid; gap: var(--space-4); align-content: start; margin: 0; }
.album-vis-state { display: flex; gap: var(--space-3); align-items: flex-start; }
.album-vis-state h2 { margin: 0; font-size: var(--fs-lg); }
.album-vis-state .hint { margin: 2px 0 0; }

.album-vis-dot {
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  margin-block-start: 9px;
  border-radius: 50%;
  background: var(--ink-300);
  box-shadow: 0 0 0 4px var(--ink-100);
}

.album-vis-dot.is-on { background: var(--success); box-shadow: 0 0 0 4px var(--teal-50); }

.album-vis-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block: 1px solid var(--border);
}

.album-vis-form .switch:has(input:disabled) { opacity: .5; }
.album-vis-form .switch input:disabled { cursor: not-allowed; }
.album-vis-note { margin: 0; }
.album-link { display: grid; gap: var(--space-2); }
.album-link .input { font-size: var(--fs-xs); }
.album-link-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.album-home-hint {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-5) 0 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.album-home-hint .icon { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .album-drop-zone, .album-drop-zone::before, .album-drop-tile { transition: none; }
}

.album-grid, .album-public { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }

/* Stage 8: one photo is one tile - the shot, its two captions and its row of actions. Four or five
   tiles abreast on a laptop, so a twenty-photo album is two screens of work and not twenty. */
.album-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

.album-item {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.album-item .input { font-size: var(--fs-xs); min-block-size: 32px; }

/* The shot keeps one shape whatever the photograph's own proportions are, so the grid stays a grid. */
.album-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.album-shot img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* The photograph is the handle: a tile is picked up by its picture and set down where it belongs. */
.album-grid.is-sortable .album-shot { cursor: grab; }
.album-item.sortable-ghost { opacity: .35; }
.album-item.sortable-chosen .album-shot { cursor: grabbing; box-shadow: var(--shadow-2); }

.album-seq {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  min-inline-size: 22px;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  background: var(--navy-900);
  color: var(--text-on-brand);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.album-processing { color: var(--text-muted); margin: 0; font-size: var(--fs-xs); }

.album-actions { display: flex; gap: var(--space-1); justify-content: flex-end; }

/* The public gallery. */
.album-public { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 600px) { .album-public { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 1024px) { .album-public { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.album-public img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-md);
  display: block;
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.album-public a:hover img { box-shadow: var(--shadow-2); }

.album-caption { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--space-1) 0 0; }

/* The cover of a past workshop on the homepage. */
.album-cover {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-md);
  display: block;
  margin-block-end: var(--space-2);
}