/* Create flow (v2). Layout for its screens; shared pieces live in ../components.css. */

/* --- Start --------------------------------------------------------------------------- */
.screen-start { padding-bottom: calc(var(--s4) + var(--safe-bottom)); }
.hero { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s2) 0 var(--s5); }
.hero-fan {
  position: relative; height: 210px; margin: 0 auto var(--s12); width: 100%;
}
.hero-fan img {
  position: absolute; left: 50%; bottom: 0;
  width: 124px; aspect-ratio: var(--card-ratio);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  transform-origin: 50% 150%;
  transform: translateX(-50%) rotate(var(--r)) translateY(var(--y));
  animation: fan-in 900ms var(--ease-spring) both, bob 6s ease-in-out infinite;
  animation-delay: var(--d), calc(var(--d) * 5 + 900ms);
}
.hero-fan img:nth-child(1) { --r: -24deg; --y: 14px; --d: 0ms; }
.hero-fan img:nth-child(2) { --r: -12deg; --y: 4px; --d: 70ms; }
.hero-fan img:nth-child(3) { --r: 0deg; --y: 0px; --d: 140ms; z-index: 1; }
.hero-fan img:nth-child(4) { --r: 12deg; --y: 4px; --d: 210ms; }
.hero-fan img:nth-child(5) { --r: 24deg; --y: 14px; --d: 280ms; }
@keyframes fan-in {
  from { transform: translateX(-50%) rotate(0deg) translateY(40px); opacity: 0; }
}
@keyframes bob {
  50% { translate: 0 -5px; }
}
.hero-title { margin: 0; font-size: var(--text-3xl); }
/* Once the customer starts (types, picks a chip, adds photos) the fan tucks away so the
   composer and its button stay on screen. The layout changes in one step and create.js glides
   the title and composer from where they were (FLIP); only the fan's scale animates here. */
.hero-fan { transition: scale var(--dur-3) var(--ease-out); transform-origin: 50% 100%; }
body.is-composing .hero-fan { height: 130px; margin-bottom: var(--s8); scale: 0.62; }
body.is-composing .hero-title { font-size: var(--text-2xl); }

.composer {
  padding: var(--s4) var(--s5) var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}
.composer .field { min-height: 48px; }
.composer-tools { display: flex; gap: var(--s2); }
.composer-tools .btn { flex: 1; min-height: 46px; padding: 0 var(--s3); font-size: var(--text-s); white-space: nowrap; }
.photo-btn { cursor: pointer; }
.composer-note { text-align: center; margin: calc(-1 * var(--s1)) 0 0; }

.photos { display: flex; flex-direction: column; gap: var(--s1); }
.photo-strip {
  display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--s5)); padding: var(--s1) var(--s5);
}
.photo-strip::-webkit-scrollbar { display: none; }
.thumb {
  position: relative; flex: none; width: 60px; height: 60px;
  border-radius: 12px; overflow: hidden; background: var(--paper-2);
  animation: pop-in var(--dur-2) var(--ease-spring) both;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
  font-size: 13px; line-height: 22px; cursor: pointer;
}
.thumb-count { display: grid; place-items: center; font-weight: 600; color: var(--ink-2); font-size: var(--text-s); }
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } }
.photo-deck-row { min-height: 52px; border: 0; }
.photo-plan { margin: 0; color: var(--ink-2); line-height: 1.4; }
.photo-plan:empty { display: none; }

/* --- Table (drawing + preview) --------------------------------------------------------- */
.screen-table { padding-bottom: calc(var(--s4) + var(--safe-bottom)); }
.round-pill {
  padding: 6px 12px; border-radius: var(--radius-pill); background: var(--paper-2);
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-2);
}
.deck-head { padding: var(--s2) 0 var(--s4); min-height: 118px; }
.status { margin: 0 0 var(--s1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.status::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: var(--accent); vertical-align: 1px;
  animation: pulse 1.1s ease-in-out infinite;
}
body.is-ready .status::before { background: var(--good); animation: none; }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }
.deck-title { margin: 0; font-size: var(--text-2xl); transition: opacity var(--dur-2); }
.deck-title.is-swapping { opacity: 0; }
.deck-tagline { margin: var(--s2) 0 0; font-size: var(--text-m); min-height: 1.45em; }
.swatches { display: flex; gap: 6px; margin-top: var(--s3); height: 14px; }
.swatches span {
  width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  animation: pop-in var(--dur-2) var(--ease-spring) both;
}

.felt { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding-bottom: var(--s4); }
.screen-table { overflow-x: clip; }   /* carousel cards peek past the page edge */
.cards {
  --cw: min(43vw, 210px);                        /* a card at rest; the carousel scales it up */
  --ch: calc(var(--cw) * 1110 / 816);
  --dw: min(36vw, 172px);                        /* the shuffling deck while cards draw */
  --row: 0.44;                                   /* dealt cards, as a share of --cw */
  --row-gap: 10px;
  --deal-top: calc(var(--dw) * 1110 / 816 + 92px);
  position: relative;
  width: 100%;
}
.cards .pcard {
  position: absolute; top: 0; left: 50%;
  width: var(--cw);
  transform: translate(var(--x, -50%), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: transform var(--dur-3) var(--ease-spring);
  cursor: pointer;
}
/* While drawing: the deck shuffles large in the middle, a line of verbs turns under it, and
   each card is dealt to a row below as it lands, turning face up. No outlines, no bar. */
.cards[data-layout="deal"] { height: calc(var(--deal-top) + var(--ch) * var(--row) + 16px); }
.cards[data-layout="deal"] .shuffler { top: 22px; translate: -50% 0; width: var(--dw); }
.cards[data-layout="deal"] .pcard { z-index: 1; --s: var(--row); --y: calc(var(--deal-top) - var(--ch) * (1 - var(--row)) / 2); }
.cards[data-layout="deal"] .pcard:nth-child(1) { --x: calc(-1.5 * (var(--cw) * var(--row) + var(--row-gap)) - var(--cw) / 2); --r: -3deg; }
.cards[data-layout="deal"] .pcard:nth-child(2) { --x: calc(-0.5 * (var(--cw) * var(--row) + var(--row-gap)) - var(--cw) / 2); --r: -1deg; }
.cards[data-layout="deal"] .pcard:nth-child(3) { --x: calc(0.5 * (var(--cw) * var(--row) + var(--row-gap)) - var(--cw) / 2); --r: 1deg; }
.cards[data-layout="deal"] .pcard:nth-child(4) { --x: calc(1.5 * (var(--cw) * var(--row) + var(--row-gap)) - var(--cw) / 2); --r: 3deg; }
.spin-words {
  position: absolute; left: 0; right: 0; top: calc(var(--dw) * 1110 / 816 + 42px); margin: 0;
  text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--text-l); color: var(--ink-2); white-space: nowrap;
  opacity: 0; transition: opacity 170ms var(--ease-out), translate 170ms var(--ease-out);
  pointer-events: none;
}
.spin-words.is-on { opacity: 1; }
.spin-words.is-out { opacity: 0; translate: 0 6px; }
.cards[data-layout="carousel"] .spin-words { opacity: 0; }
/* Ready: the four cards become a carousel (lib/carousel.js writes each card's transform) */
.cards[data-layout="carousel"] { height: calc(var(--ch) * 1.34 + 24px); }
.cards[data-layout="carousel"] .pcard { top: calc(var(--ch) * 0.22); transition: none; }
.cards[data-layout="carousel"].cz-settling .pcard { transition: transform 640ms var(--ease-spring); }
.cards[data-layout="carousel"] .shuffler { opacity: 0; }
.cz-label { text-align: center; margin: var(--s1) 0 0; min-height: 1.45em; font-weight: 600; font-size: var(--text-s); color: var(--ink-2); }
.card-caption { display: none; }

.actions {
  display: flex; flex-direction: column; gap: var(--s2);
  animation: rise var(--dur-3) var(--ease-spring) both;
}
.actions-row { display: flex; gap: var(--s2); }
.actions-row .btn { flex: 1; }
.actions-note { text-align: center; margin: 0; }
/* the preview in its clear case, twice (lib/productshot.js), under the buttons */
.c-product { margin: var(--s3) 0 0; }
.c-product[hidden] { display: none; }
.c-product .d-shots-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.c-product .d-shot { margin: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #dcd3c6; }
.c-product .d-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-product .d-shots-cap { margin: var(--s2) 0 0; text-align: center; color: var(--ink-2); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }

/* --- Photos screen --------------------------------------------------------------------- */
.screen-photos { padding-bottom: calc(var(--s8) + var(--safe-bottom)); }
.photos-help { margin: var(--s1) 0 var(--s4); font-size: var(--text-s); }
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.slot {
  position: relative; aspect-ratio: var(--card-ratio);
  border: 0; padding: 0; border-radius: 8px; overflow: hidden;
  background: var(--paper-2) center / cover no-repeat;
  box-shadow: var(--shadow-1); cursor: pointer;
}
.slot span {
  position: absolute; left: 4px; top: 4px; padding: 2px 6px; border-radius: 6px;
  background: rgba(255,255,255,0.92); font-size: 12px; font-weight: 700;
}
.slot span.red { color: #c8102e; }
.slot.is-preview { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); max-height: 50dvh; overflow-y: auto; }
.pick-grid button {
  aspect-ratio: 1; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--paper-2) center / cover no-repeat;
}
.pick-grid button[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }

/* --- Sheets content ------------------------------------------------------------------- */
.sheet-sub { margin: 0 0 var(--s4); font-size: var(--text-s); }
.sheet-done { margin-top: var(--s4); }
.tweak-box { padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
#tweak-chips { margin-bottom: var(--s4); }
.sheet-foot { text-align: center; margin: var(--s3) 0 0; }
.buy-summary { display: flex; gap: var(--s4); align-items: center; margin: var(--s3) 0 var(--s5); }
.buy-summary p { margin: var(--s1) 0 0; font-size: var(--text-s); }
.buy-thumb { width: 84px; flex: none; }
.buy-thumb img { border-radius: 6px; box-shadow: var(--shadow-card); }
/* the deck in its clear case (lib/productshot.js): a product shot, not a card, so no card shadow */
.buy-thumb.has-case { width: 112px; }
.buy-thumb.has-case img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: none; }
.buy-price { font-size: var(--text-m) !important; }

@media (min-width: 700px) and (max-width: 1023px) {
  .hero-title { font-size: 3.5rem; }
}
.actions-row .btn { white-space: nowrap; padding: 0 var(--s3); }
body.is-composing .hero { justify-content: center; }

/* --- Desktop: the composer beside the fan, the hand beside its story ------------------------ */
@media (min-width: 1024px) {
  /* Start: the fan and the promise on the left, the composer on the right */
  .screen-start {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
    grid-template-rows: auto 1fr; column-gap: 64px; align-items: center;
    padding-bottom: var(--s12);
  }
  .screen-start > .topbar { grid-column: 1 / -1; }
  .hero { justify-content: center; padding: var(--s8) 0; }
  .hero-fan { height: 320px; margin-bottom: 72px; }
  .hero-fan img { width: 190px; border-radius: 12px; }
  .hero-title { font-size: var(--text-3xl); }
  /* the page is wide enough: composing changes nothing but the text box */
  body.is-composing .hero-fan { height: 320px; margin-bottom: 72px; scale: 1; }
  body.is-composing .hero-title { font-size: var(--text-3xl); }
  body.is-composing .hero { justify-content: center; }
  .composer { padding: var(--s6) var(--s8) var(--s6); gap: var(--s4); }
  .composer .field { min-height: 120px; font-size: var(--text-l); }
  .composer .chips { margin: 0; }
  .photo-strip { margin: 0; padding: var(--s1) 0; flex-wrap: wrap; overflow: visible; }

  /* Table: the story and the buttons on the left, the hand on the right */
  .screen-table {
    display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr; column-gap: 64px; align-content: start;
    padding-bottom: var(--s10);
  }
  .screen-table > .topbar { grid-column: 1 / -1; }
  .deck-head { grid-column: 1; grid-row: 2; padding-top: var(--s10); min-height: 0; }
  .deck-title { font-size: var(--text-2xl); }
  .actions { grid-column: 1; grid-row: 3; padding-top: var(--s6); }
  .felt { grid-column: 2; grid-row: 2 / span 3; padding: var(--s6) 0; }
  .cards { --cw: min(230px, calc((100dvh - 260px) / 1.34 * 816 / 1110)); --dw: 210px; --row: 0.5; --row-gap: 16px; }
  body.is-ready .felt { justify-content: center; }
  /* the arrows sit under the hand, either side of its label, clear of the cards */
  .cards[data-layout="carousel"] .cz-arrow { top: auto; bottom: -44px; translate: none; }
  .cards[data-layout="carousel"] .cz-prev { left: calc(50% - 190px); }
  .cards[data-layout="carousel"] .cz-next { right: calc(50% - 190px); }
  .cz-label { line-height: 44px; margin-top: 2px; }

  /* Photos: a wider grid */
  .screen-photos { max-width: 1000px; }
  .slot-grid { grid-template-columns: repeat(8, 1fr); gap: var(--s3); }
  .pick-grid { grid-template-columns: repeat(5, 1fr); }
}

/* --- Commission intent (/v2/create/?commission=…): the preview still comes first ------------- */
.commission-kicker {
  margin: 0 0 var(--s1); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}

/* --- After the preview: print it, or hand it to an art director ---------------------------- */
.next-steps { display: flex; flex-direction: column; gap: var(--s2); }
/* How many decks, beside "Print this deck" (the buy sheet has the full picker, qty.css) */
.buy-row { display: flex; gap: var(--s2); align-items: stretch; }
.buy-row #buy-btn { flex: 1; min-width: 0; white-space: nowrap; }
.qty-mini {
  flex: none; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card); padding: 0 2px;
}
.qty-mini[hidden] { display: none; }
.qty-mini .btn-icon { width: 36px; min-height: 36px; height: auto; align-self: stretch; background: none; box-shadow: none; }
.qty-mini .btn-icon:disabled { opacity: 0.3; }
.qty-mini output { min-width: 1.6em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.volume-note { margin: calc(-1 * var(--s1)) 0 0; text-align: center; color: var(--good); font-weight: 600; }
.volume-note[hidden] { display: none; }
.buy-qty { margin: 0 0 var(--s4); }
.next-steps.is-commission { flex-direction: column-reverse; }
.next-ad { flex-direction: column; gap: 1px; line-height: 1.2; min-height: 58px; }
.next-ad-sub { font-size: var(--text-xs); font-weight: 500; opacity: 0.66; }

/* The art-director sheet: tier, the cards they like, notes, email */
.ad-sheet { max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; }
.ad-form { display: flex; flex-direction: column; gap: var(--s3); }
.ad-tier { grid-auto-rows: minmax(54px, auto); }
.ad-tier button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.2; }
.ad-tier button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.ad-tier button span { font-weight: 500; font-size: var(--text-xs); color: var(--ink-3); }
.ad-tier-note { margin: calc(-1 * var(--s1)) 0 0; text-align: center; }
.ad-keep { border: 0; margin: 0; padding: 0; min-width: 0; }
.ad-keep legend, .ad-field > span { padding: 0; margin-bottom: 6px; font-size: var(--text-s); font-weight: 600; }
.ad-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.ad-card {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  aspect-ratio: var(--card-ratio); border-radius: 7px; transition: transform var(--dur-1) var(--ease-out);
}
.ad-card img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; box-shadow: var(--shadow-card);
  transition: opacity var(--dur-2) var(--ease-out);
}
.ad-card[aria-pressed="false"] img { opacity: 0.55; }
.ad-card[aria-pressed="true"] { transform: translateY(-4px); }
.ad-card[aria-pressed="true"] img { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.ad-card-mark {
  position: absolute; right: -5px; top: -5px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  background: var(--paper); color: var(--ink-3); box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2), color var(--dur-2);
}
.ad-card[aria-pressed="true"] .ad-card-mark { background: var(--accent); color: #fff; transform: scale(1.12); }
.ad-field { display: flex; flex-direction: column; min-width: 0; }
.ad-field .field {
  font-size: var(--text-m); padding: 11px 14px; border-radius: var(--radius-s);
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
}
.ad-field .field:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.ad-field textarea.field { resize: none; min-height: 84px; }
.ad-field .stepper .field { padding: 10px 4px; }
.ad-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: end; }
.ad-form .sheet-foot { margin-top: calc(-1 * var(--s1)); }
@media (min-width: 1024px) {
  .ad-sheet { width: 560px; max-height: calc(100dvh - 48px); }
}