/*
 * app.css — per-section sheet for the signed-in / token-scoped app surfaces
 * (Host dashboard, Event Gallery, upload, Studio roster). Later slices fill
 * this in (events, gallery, moderation, …).
 *
 * Cascade (ADR-0005): tokens.css → ui.css load globally in the layout <head>;
 * this sheet loads AFTER them, so it may use any token and override ui.css
 * components for app-only treatments. A page opts in with:
 *
 *   <% content_for :head, stylesheet_link_tag("app", "data-turbo-track": "reload") %>
 *
 * Keep rules scoped to app layouts; never restyle shared ui.css primitives
 * here in a way that would leak into marketing.
 */

/* ===== Auth (sign-in request + check-your-email) =======================
   A single narrow column, centered, so the keepsake card is the whole focus
   on a phone. Composes ui.css primitives (.card, .field, .btn, .callout);
   only the page rhythm lives here. */
.auth {
  max-width: 30rem;
  padding-block: var(--space-10) var(--space-16);
}

.auth__card {
  padding: var(--space-2);
}

.auth .site-header__who {
  /* The signed-in email is shown in the header on the dashboard, not here. */
  display: none;
}

/* ===== Dashboard (signed-in Host home) ================================= */
.dashboard {
  padding-block: var(--space-8) var(--space-16);
}

.dashboard__head {
  margin-bottom: var(--space-8);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.dashboard__head .display {
  margin-bottom: 0;
}

/* The header email can wrap small; keep it from crowding the sign-out button. */
.site-header__who {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

@media (max-width: 460px) {
  .site-header__who {
    display: none;
  }
}

/* The server-rendered QR carries a neutral fallback fill; the real ink is the
   ink token, so a re-theme reaches it (a CSS fill overrides the inline SVG
   presentation attribute). The white quiet zone lives on .qr-card__code. */
.qr-card__code svg path {
  fill: var(--color-text);
}

/* ===== Event management (one Event: QR, share link, table-tent) ========
   Composes ui.css (.qr-card, .copy-field, .notice, .btn); only the page
   rhythm and the two-up share layout live here. */
.event-manage {
  padding-block: var(--space-8) var(--space-16);
}

.event-manage__head {
  margin-bottom: var(--space-6);
}

.event-manage__head .display {
  margin-bottom: var(--space-2);
}

.event-manage__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-text-muted);
}

.event-manage__expiry {
  margin-bottom: var(--space-8);
}

/* QR card beside the share/print actions on wide screens; stacked on phones. */
.event-manage__share {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: start;
}

.event-manage__actions {
  align-self: center;
}

@media (max-width: 720px) {
  .event-manage__share {
    grid-template-columns: 1fr;
  }
}

/* ===== Rename (owner-only, issue 06) ===================================
   A compact form under the share card. Composes ui.css (.field, .input, .btn);
   only the column rhythm lives here. */
.event-manage__rename {
  margin-top: var(--space-12);
  max-width: 32rem;
}

.event-manage__rename .lede {
  margin-bottom: var(--space-5);
}

.event-rename {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.event-rename .field {
  width: 100%;
}

/* ===== Album + host moderation (issue 06) =============================
   The owner's safety valve over the public Gallery: the album grid with a
   delete on every Media, plus the "Descargar todo" ZIP. Composes ui.css
   (.media-grid/.polaroid, .btn, .empty-state); only the head row lives here. */
.event-manage__album {
  margin-top: var(--space-12);
}

.event-manage__album-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.event-manage__album-head .title {
  margin: 0;
}

.event-manage__album-lede {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}

/* ===== Studio delivery + curation (issue 13) ==========================
   Only on a Studio-owned Event's console: the pro-shot upload card (reusing the
   .gallery-upload component) and the Featured toggle that promotes a Media into
   the Gallery hero set. Composes ui.css; only the section rhythm lives here. */
.event-manage__deliver {
  margin-top: var(--space-12);
  max-width: var(--container-narrow);
}

.event-manage__deliver .title {
  margin-bottom: var(--space-2);
}

.event-manage__deliver .lede {
  margin-bottom: var(--space-5);
}

/* Client Delivery Link issue card (issue 14): the email-the-Client form and, once
   issued, the current private link to copy. Same console rhythm as delivery. */
.event-manage__delivery {
  margin-top: var(--space-12);
  max-width: var(--container-narrow);
}

.event-manage__delivery .title {
  margin-bottom: var(--space-2);
}

.event-manage__delivery .lede {
  margin-bottom: var(--space-5);
}

/* ===== Studio proofing (studio-proofing issue 02) =====================
   Only on a Studio Event's console: the proof upload card (reusing .gallery-upload),
   the selection-limit form, and the watermarked-preview grid (.media-grid/.polaroid).
   Composes ui.css; only the section rhythm lives here. */
.event-manage__proofs {
  margin-top: var(--space-12);
}

.event-manage__proofs .title {
  margin-bottom: var(--space-2);
}

.event-manage__proofs .lede {
  margin-bottom: var(--space-5);
}

/* The selection-limit form and the upload card share the narrow console column;
   the preview grid spans the full width like the album. */
.proofs-config,
.event-manage__proofs .gallery-upload {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-6);
}

.proofs-status {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-6);
}

.event-manage__proofs-grid {
  margin-top: var(--space-2);
}

/* Final handoff (studio-proofing issue 05): the filename-list export and the
   destructive "Marcar como entregado" affordance live in the narrow console column,
   above the reopen control and the locked Selection grid. Composes ui.css primitives
   (.btn, .notice--danger); only the rhythm lives here. */
.proofs-handoff {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-6);
}

.event-manage__selection-label {
  margin-bottom: var(--space-3);
}

/* ===== Client submit / lock (studio-proofing issue 04) ================
   The confirm card under the culling grid, and the locked-confirmation notice on
   the submitted view. Both compose ui.css primitives; only rhythm lives here. */
.proofing-submit {
  max-width: var(--container-narrow);
  margin: var(--space-10) auto var(--space-6);
  padding: var(--space-6);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.proofing-submit .lede {
  margin: 0;
}

.proofing-locked {
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-8);
}

/* The Featured toggle in its ON state on a console tile: a marigold accent so a
   highlighted shot reads at a glance among the overlay controls. */
.icon-btn--featured {
  color: var(--color-on-primary);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.icon-btn--featured:hover { color: var(--color-on-primary); background: var(--color-accent); }

/* ===== Printable table-tent (cartel de mesa) ===========================
   On screen: the keepsake QR card centered with print/back actions. On paper:
   only the card, no chrome. */
.cartel {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-6);
  padding: var(--space-8);
}

.cartel__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

@media print {
  .cartel {
    min-height: auto;
    padding: 0;
  }

  .cartel__actions,
  .picado,
  .site-header {
    display: none;
  }

  .qr-card {
    border: none;
    box-shadow: none;
  }
}

/* ===== Public Gallery (scanned-QR Event page: guest upload + stream) =====
   The viral core loop. Composes ui.css primitives (.media-grid/.polaroid,
   .btn, .notice, .empty-state, .progress, .lightbox); only the page rhythm and
   the upload card live here. */
.gallery {
  padding-block: var(--space-6) var(--space-16);
}

.gallery__head {
  text-align: center;
  padding-block: var(--space-6) var(--space-2);
}

.gallery__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-text-muted);
}

/* The upload card sits above the stream, centered and thumb-reachable. */
.gallery__upload {
  max-width: var(--container-narrow);
  margin: var(--space-6) auto var(--space-10);
}

.gallery-upload {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.gallery-upload__pick {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  text-align: center;
}

/* The styled <label> is the file control; show its focus ring when the
   visually-hidden native input behind it takes keyboard focus. */
.gallery-upload__pick:has(.sr-only:focus-visible) .btn {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.gallery-upload__hint {
  margin: 0;
  font-size: var(--text-sm);
}

.gallery__stream {
  margin-top: var(--space-4);
}

.gallery__empty {
  margin-top: var(--space-2);
}

/* The Featured hero set (issue 13): the Studio's highlights lead the album in a
   soft, set-apart band above the consolidated stream. Composes .media-grid and the
   .polaroid--featured ring; only the section framing lives here. */
.gallery__featured {
  margin: var(--space-6) 0 var(--space-10);
  padding: var(--space-6);
  background: var(--color-marigold-soft, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.gallery__featured-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  text-align: center;
}

.gallery__featured-title .icon {
  width: 1.1em;
  height: 1.1em;
  color: var(--color-accent);
}

/* ===== Client Delivery Link page (issue 14) ===========================
   The keepsake handoff: a read-only Gallery (reusing .gallery / .media-grid /
   .polaroid) with a prominent keepsake-download card and the guest QR to reshare,
   under the Studio's branding. Composes the existing primitives; only the page
   rhythm and the two cards live here. */
.gallery__keepsake {
  max-width: var(--container-narrow);
  margin: var(--space-8) auto var(--space-10);
  padding: var(--space-6);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.gallery__keepsake .lede {
  margin: 0;
}

.gallery__reshare {
  max-width: var(--container-narrow);
  margin: var(--space-12) auto 0;
  text-align: center;
}

.gallery__reshare .qr-card {
  margin-inline: auto;
}

/* A stronger inline link for the in-context upgrade nudge on the management
   notice. Composes the ui.css .link; only weight/underline emphasis here. */
.link--strong {
  font-weight: var(--weight-bold);
  text-decoration: underline;
}

.notice__action {
  margin: var(--space-2) 0 0;
}

/* ===== Upgrade ("what Paid unlocks" + Checkout CTA, issue 07) ===========
   A single readable column: the pitch, the list of unlocks, then the one-tap
   pay CTA. Composes ui.css (.callout, .btn, .chip); only page rhythm and the
   unlock list live here. */
.upgrade {
  max-width: var(--container-narrow);
  padding-block: var(--space-8) var(--space-16);
}

.upgrade__head {
  margin-bottom: var(--space-8);
}

.upgrade__head .display {
  margin-bottom: var(--space-2);
}

.upgrade__unlocks {
  margin-bottom: var(--space-8);
}

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

.unlock-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.unlock-list__icon {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full, 999px);
  background: var(--color-jade-soft, var(--color-surface));
  color: var(--color-jade, var(--color-text));
}

.unlock-list__title {
  margin: 0;
  font-weight: var(--weight-bold);
}

.unlock-list__body {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.upgrade__cta {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.upgrade__fine-print {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ===== Studio (pro account: setup, roster, co-branding — issue 12) =====
   Composes ui.css primitives (.card, .field, .btn, .brand-lockup, .avatar,
   .roster, .powered-by, .empty-state); only the page rhythm lives here. */

/* The "set up your studio" form: a single narrow column, like the auth card. */
.studio-setup {
  max-width: 32rem;
  padding-block: var(--space-10) var(--space-16);
}

.studio-setup__head {
  margin-bottom: var(--space-6);
}

.studio-setup__head .display {
  margin-bottom: var(--space-2);
}

.studio-setup__card {
  padding: var(--space-2);
}

.studio-setup__note {
  margin-top: var(--space-6);
  text-align: center;
}

/* The roster dashboard: the Studio's brand lockup, then the new-event form and the
   roster list. */
.studio {
  padding-block: var(--space-8) var(--space-16);
}

.studio__head {
  margin-bottom: var(--space-6);
}

.studio__title {
  margin-bottom: var(--space-8);
}

.studio__new {
  margin-bottom: var(--space-10);
  max-width: 40rem;
}

.studio__new .title {
  margin-bottom: var(--space-4);
}

/* The inline create-event form: name, date, submit — flowing on wide screens,
   stacked on phones. */
.studio-new-event {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
  align-items: end;
}

.studio-new-event .btn {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 560px) {
  .studio-new-event {
    grid-template-columns: 1fr;
  }
}

.studio__roster .title {
  margin-bottom: var(--space-4);
}

/* The Studio co-brand header on its Events' Gallery: logo + name centered above
   the non-removable mark, sitting over the consolidated stream. */
.studio-branding {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding-top: var(--space-6);
}

/* The pro-account entry link under the consumer dashboard. */
.dashboard__studio {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

/* ===== Post-checkout confirmation (Stripe return, issue 07) ============= */
.confirm {
  min-height: 70dvh;
  display: grid;
  place-content: center;
  padding-block: var(--space-10) var(--space-16);
}

.confirm__panel {
  max-width: 32rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}

.confirm__icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.5rem;
  border-radius: var(--radius-full, 999px);
  background: var(--color-marigold-soft, var(--color-surface));
  color: var(--color-accent, var(--color-text));
}