/* Preview pages under /v2/preview/ (api/previews.py): the Christmas page and the home page's new
   first screen. Built from tokens.css; shared pieces come from components.css and landing.css. */

/* a placeholder still waiting for qualia's words or dates */
.pv-todo { background: #fff1a8; color: #5a4600; border-radius: 4px; padding: 0 3px; font-weight: 600; }

.pv-date {
  align-self: center; margin: 0; padding: 3px 10px; border-radius: 6px;
  background: #fbe3d9; color: #a3300f; font-size: var(--text-s); font-weight: 700; text-align: center;
}

/* --- Christmas: hero -------------------------------------------------------------------------- */
.pv-hero { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) 0 var(--s6); text-align: center; }
.pv-hero-pic {
  width: calc(100% + 2 * var(--s5)); max-width: none; height: auto; margin: 0 calc(-1 * var(--s5));
  background: #b9a88f;
}
.pv-title { margin: var(--s2) 0 0; font-size: var(--text-2xl); }
.pv-line { margin: 0; color: var(--ink-2); }

/* --- Christmas: who it's for -------------------------------------------------------------------- */
.pv-who { padding: 0 0 var(--s2); }
.pv-chips {
  display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--s5)); padding: var(--s2) var(--s5) var(--s2);
}
.pv-chips::-webkit-scrollbar { display: none; }
.pv-chip {
  flex: 0 0 76px; text-align: center; text-decoration: none; color: var(--ink);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.2;
}
.pv-chip img {
  display: block; width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%;
  object-fit: cover; object-position: 50% 20%; background: var(--card);
  border: 3px solid var(--paper-3);
}
.pv-chip[aria-selected="true"] img { border-color: var(--accent); }
.pv-chip[aria-selected="true"] span { color: var(--accent); }

/* --- Christmas: one row of decks per person --------------------------------------------------------- */
.pv-group { padding: var(--s4) 0 var(--s6); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2); }
.pv-tabs .pv-group { border-top: 0; }
.pv-group .l-kicker { margin: 0; }
.pv-h3 { margin: 0; font-size: var(--text-xl); }
.pv-group .pv-date { align-self: flex-start; text-align: left; }
.pv-rail {
  display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: var(--s2) calc(-1 * var(--s5)) 0; padding: 2px var(--s5) var(--s3); scroll-padding-inline: var(--s5);
}
.pv-rail::-webkit-scrollbar { display: none; }
.pv-slide {
  flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-1);
}
.pv-rail > .pv-slide:only-child { flex-basis: 100%; max-width: none; }
.pv-stage { position: relative; height: 210px; overflow: hidden; }
.pv-pic { width: 100%; height: 100%; object-fit: cover; }
.pv-fan { position: absolute; inset: 0; }
.pv-c {
  position: absolute; top: 24px; width: 38%; height: auto; border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); transform-origin: 50% 110%;
}
.pv-c0 { left: 31%; top: 14px; width: 40%; z-index: 3; }
.pv-c1 { left: 8%; transform: rotate(-13deg); }
.pv-c2 { left: 54%; transform: rotate(13deg); }
.pv-cap { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.pv-cap h4 { margin: 0; font-family: var(--font-display); font-size: var(--text-l); font-weight: 600; line-height: 1.15; }
.pv-cap p { margin: 0; font-size: var(--text-s); color: var(--ink-2); }
.pv-cap .pv-price { color: var(--ink); font-weight: 600; margin-top: auto; padding-top: var(--s2); }
.pv-go { min-height: 44px; margin-top: var(--s2); font-size: var(--text-s); white-space: normal; text-align: center; line-height: 1.2; }
.pv-soon {
  margin-top: var(--s2); min-height: 44px; display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--paper-2); color: var(--ink-2); font-size: var(--text-s); font-weight: 600;
}

/* --- Christmas: start from, questions ------------------------------------------------------------- */
.pv-start { padding: var(--s4) 0 var(--s6); border-top: 1px solid var(--line); }
.pv-start-line { margin: 0 0 var(--s2); color: var(--ink-2); }
.pv-start-links { margin: 0; font-size: var(--text-l); font-family: var(--font-display); line-height: 1.5; }
.pv-start-links a { color: var(--accent); text-underline-offset: 3px; }
.pv-faq { padding: var(--s4) 0 var(--s8); border-top: 1px solid var(--line); }
.pv-faq details { border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
.pv-faq summary { font-weight: 700; cursor: pointer; }
.pv-faq details p { margin: var(--s2) 0 0; color: var(--ink-2); }
.pv-note { margin-top: var(--s4); }
.pv-xmas { padding-bottom: var(--s8); }

/* --- Home: the new first screen ------------------------------------------------------------------- */
.pv-home { gap: var(--s2); padding-bottom: var(--s5); }
.pv-home .l-fan-wrap { margin-bottom: 0; }
.pv-home .l-fan { --fcw: 112px; height: calc(var(--fcw) * 1110 / 816 + 56px); }
.pv-home .l-fan .fc-card { top: 18px; }
.pv-home .l-title { font-size: var(--text-2xl); }
.pv-home-line { margin: 0; color: var(--ink-2); }
.pv-ready-kicker { margin: var(--s3) 0 0; }
.pv-readies { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.pv-ready {
  display: flex; align-items: center; gap: var(--s2); min-width: 0; padding: var(--s2);
  background: var(--card); border-radius: var(--radius-s); box-shadow: var(--shadow-1);
  color: var(--ink); text-decoration: none;
}
.pv-ready img { flex: none; width: 44px; height: 60px; object-fit: cover; border-radius: 4px; }
.pv-ready > span { display: flex; flex-direction: column; min-width: 0; font-size: var(--text-xs); line-height: 1.25; }
.pv-ready strong { font-size: var(--text-s); }

@media (min-width: 1024px) {
  .pv-hero-pic { width: 100%; margin: 0; border-radius: var(--radius-m); }
  .pv-home .l-fan { --fcw: 150px; }
}

/* --- Deck pages ------------------------------------------------------------------------------------- */
.pv-deck-top { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) 0 var(--s6); }
.pv-deck .pv-title { margin-top: var(--s2); }
.pv-buy { display: flex; flex-direction: column; gap: var(--s2); }
.pv-buy .pv-price, .pv-pairs .pv-price { margin: 0; font-weight: 700; font-size: var(--text-l); }
.pv-sold { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--accent); }
.pv-notify .nl-label { display: block; font-weight: 600; margin-bottom: var(--s2); }
.pv-notify .nl-row { display: flex; gap: var(--s2); }
.pv-notify .field { flex: 1; min-width: 0; }
.pv-notify .tiny { margin: var(--s1) 0 0; }
.pv-run { margin: 0; color: var(--ink-2); font-size: var(--text-s); }
.pv-laid { padding: var(--s4) 0 var(--s6); border-top: 1px solid var(--line); }
.pv-laid img { display: block; width: 100%; height: auto; border-radius: var(--radius-s); box-shadow: var(--shadow-1); margin: var(--s2) 0; }
.pv-facts { padding: var(--s2) 0 var(--s4); }
.pv-facts ul { margin: 0; padding-left: 1.2em; color: var(--ink-2); display: flex; flex-direction: column; gap: var(--s1); }
.pv-pairs { padding: var(--s4) 0 var(--s8); border-top: 1px solid var(--line); }
.pv-pair { margin: 0 0 var(--s2); font-size: var(--text-l); font-family: var(--font-display); }
.pv-pair a { color: var(--accent); }
/* the Forty-Eight leads with its list to finish */
.pv-climbed { background: var(--card); border-radius: var(--radius-m); box-shadow: var(--shadow-1); padding: var(--s3) var(--s4); }
.pv-climbed-head { margin: 0 0 var(--s2); font-weight: 700; }
.pv-climbed-list li { font-size: var(--text-s); }
.pv-climbed-list { margin: 0; padding: 0 var(--s1) 0 0; list-style: none; max-height: 210px; overflow-y: auto; overscroll-behavior: contain; columns: 1; column-gap: var(--s4); font-size: var(--text-xs); line-height: 1.3; }
.pv-climbed-list li { break-inside: avoid; display: flex; align-items: baseline; gap: 5px; padding: 2px 0; }
.pv-climbed-list li > span:last-child { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.pv-box { flex: none; width: 10px; height: 10px; border: 1.5px solid var(--ink-2); border-radius: 2px; align-self: center; }