/*
 * The organizer's screens: signing in, the album list, the album form.
 *
 * Mobile-first like everything else. The Stitch exports for these three are
 * desktop-only, so the phone arrangement is derived here rather than copied:
 * every stacked element becomes a row once there is width for it.
 */

/* ---- Signing in and signing up ----------------------------------------- *
 * A single centred column that simply gets more air on a desktop. The export
 * pairs the form with a scattered stack of photographs; that needs real
 * licensed imagery, so until there is some the ampersand carries the page.   */

.auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  inline-size: 100%;
  max-inline-size: 24rem;
  margin-inline: auto;
  padding-block: var(--space-12) var(--space-16);
  text-align: center;
}

.auth__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.auth__tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  inline-size: 100%;
  text-align: start;
}

.auth__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 48rem) {
  .auth {
    padding-block: var(--space-16) var(--space-20);
    gap: var(--space-10);
  }
}

/* ---- Page head --------------------------------------------------------- *
 * Eyebrow and title on the left, the one primary action on the right. They
 * stack on a phone, where the action spans the column.                       */

/* The header is sticky, so the first thing under it needs room to clear the
   rule rather than arriving pressed against it — the same reason .flashes and
   .form-page carry their own top margin. */
.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-10) var(--space-6);
  border-bottom: 1px solid var(--rule);
  margin-block-end: var(--space-10);
}

.page-head__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

@media (min-width: 40rem) {
  .page-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

/* ---- The album list ---------------------------------------------------- */

.albums {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* An album reads as a print resting on a card, with its details written
   beside it — stacked on a phone, side by side from tablet up. */
.album-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5);
  background: var(--print);
  border: 1px solid var(--ink-edge);
  border-radius: var(--radius-print);
  box-shadow: var(--shadow-surface);
  transition: box-shadow var(--duration) var(--ease);
}

.album-card:hover {
  box-shadow: var(--shadow-print);
}

.album-card__print {
  flex: none;
  inline-size: 100%;
  max-inline-size: 20rem;
  margin-inline: auto;
}

.album-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  min-inline-size: 0;
}

.album-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.album-card__title {
  text-decoration: none;
}

.album-card__title:hover {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.15em;
}

.album-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--rule);
  margin-block-start: auto;
}

.album-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .album-card {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-8);
    padding: var(--space-6);
  }

  .album-card__print {
    inline-size: 20rem;
    margin-inline: 0;
  }
}

/* ---- The blank dashboard ----------------------------------------------- *
 * "Seu primeiro álbum começa aqui" — an album page waiting, not an error.    */

.album-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-10) var(--space-16);
  text-align: center;
}

.album-blank__mount {
  inline-size: 100%;
  max-inline-size: 32rem;
}

.album-blank__mount .print__well {
  min-block-size: 14rem;
}

@media (min-width: 48rem) {
  .album-blank__mount .print__well {
    min-block-size: 20rem;
  }
}

/* ---- The album form ---------------------------------------------------- */

.form-page {
  inline-size: 100%;
  max-inline-size: 40rem;
  margin-inline: auto;
  padding-block: var(--space-10) var(--space-16);
}

.form-page__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  margin-block-end: var(--space-10);
}

.form-page__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* A question and its two answers. */
.question {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.question__title {
  text-align: center;
}

.question__note {
  text-align: center;
  color: var(--soft-ink);
}

/* The form's closing actions: the stamp, then the way out. */
.form-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block-start: var(--space-6);
  border-top: 1px solid var(--rule);
}

.form-actions .button--primary {
  inline-size: 100%;
}

@media (min-width: 40rem) {
  .form-actions .button--primary {
    inline-size: auto;
    min-inline-size: 16rem;
  }
}

/* ---- Choosing the cover ------------------------------------------------ *
 * The whole mount is the label, so tapping anywhere on the print opens the
 * picker. No drop-zone chrome — the print is the affordance.                 */

.cover-field {
  display: block;
  cursor: pointer;
}

.cover-field:hover .print {
  box-shadow: var(--shadow-print-lift);
}

/* The file input is visually hidden but still focusable, so the mount has to
   show that focus on its behalf. */
.cover-field:focus-within .print {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.cover-field__remove {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  cursor: pointer;
}

/* ---- Validation ------------------------------------------------------- */

/* ---- "Aguardando você" -------------------------------------------------- *
 * The band of photos a curated album is holding back. Each print keeps its
 * decision on the paper beneath it, the way a contact sheet is marked up.
 * Phase 8 gives this a home inside the panel's Fotos tab.                     */

.moderation {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-block-end: var(--space-16);
}

.waiting {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Contact-sheet density: several decisions visible at once, so the organizer
   works through them rather than scrolling between them. */
/* A queue at a wedding can be thirty photographs long, so the phone gets two
   at a time rather than one enormous one — the decision stacks under the
   print instead of the print shrinking to fit it. */
.waiting__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: var(--gutter);
}

@media (min-width: 48rem) {
  .waiting__grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  }
}

.waiting__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.waiting__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-headline);
  font-weight: var(--weight-regular);
  color: var(--gold);
}

/* The signature, a hairline, then the decision — all on the print's own paper,
   the way a contact sheet is marked up. The shared foot lays caption and
   actions side by side; here they stack. */
.waiting__print .print__foot {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-inline: var(--space-2);
}

.waiting__print .print__caption {
  text-align: center;
}

/* Publicar and Descartar have to fit side by side on the paper, so the column
   is sized for them rather than for the photograph. Wrapping is the safety
   net, not the plan. */
.waiting__print .print__actions {
  flex: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding-block-start: var(--space-3);
  border-top: 1px solid var(--rule);
}

/* Once the card is wide enough to hold both, they take an end each — the way
   the export draws them. */
@media (min-width: 48rem) {
  .waiting__print .print__actions {
    justify-content: space-between;
  }
}

/* Discarding is deliberately the quieter of the two: publishing is the choice
   the organizer came here to make. */
.waiting__discard {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  color: var(--soft-ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}

.waiting__discard:hover {
  color: var(--alert);
}

.form-errors {
  padding: var(--space-4);
  background: var(--print);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--alert);
  border-radius: var(--radius-control);
}

.form-errors__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
  color: var(--alert);
  font-size: var(--text-body);
}

.field--invalid .field__input {
  border-color: var(--alert);
}

/* ---- Finalizar coleção -------------------------------------------------- *
 * Closing the album is its own act, so it sits apart from the settings form
 * rather than inside it — and it is quiet, because nothing here is lost.      */

.finish {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-inline-size: 40rem;
  margin: var(--space-12) auto 0;
  padding-block-start: var(--space-8);
  border-top: 1px solid var(--rule);
}