/* Wish share page, in Next's look (a placeholder until Jesús designs it). Every color, size, font, radius, shadow and
   timing comes from tokens.css: --nx-* is Next's look ("next" in design/tokens.json), --web-* the page's layout
   ("web"), --confetti-* the giver's confetti. No design values typed here (web/tests/next-look.test.mjs checks). */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: var(--nx-color-scheme);
  background: var(--nx-color-background);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--nx-color-background);
  color: var(--nx-color-ink);
  font: var(--nx-font-body);
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.icon { width: var(--web-inline-icon-size); height: var(--web-inline-icon-size); flex: none; }

/* Keyboard focus: one ring everywhere, in Next's purple. */
:focus-visible { outline: var(--nx-size-focus-ring) solid var(--nx-color-purple); outline-offset: var(--nx-size-focus-offset); }

/* Headlines are Bricolage Grotesque at Next's settings. */
.hero h1, .problem h1 {
  font: var(--nx-font-headline);
  letter-spacing: var(--nx-font-headline-tracking);
  font-variation-settings: var(--nx-font-headline-variation);
  text-wrap: balance;
}

/* ------------------------------------------------------------ header */

.hero {
  max-width: var(--web-page-max-width);
  margin: 0 auto;
  padding: var(--nx-space-xxxl) var(--nx-space-xl) var(--nx-space-xxl);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--nx-space-sm);
}
.hero h1 { max-width: var(--web-hero-title-max-width); }

/* The occasion, on a small white card like Next Home's. */
.hero-icon {
  width: var(--nx-size-tile);
  height: var(--nx-size-tile);
  display: grid;
  place-items: center;
  border-radius: var(--nx-radius-tile);
  background: var(--nx-color-card);
  color: var(--nx-color-ink);
  box-shadow: var(--nx-shadow-card);
  margin-bottom: var(--nx-space-sm);
}
.hero-icon .icon { width: var(--nx-size-tile-icon); height: var(--nx-size-tile-icon); }

.eyebrow { font: var(--nx-font-label); color: var(--nx-color-ink-secondary); }

.hint, .owner-banner {
  font: var(--nx-font-detail);
  color: var(--nx-color-ink-secondary);
  max-width: var(--web-hint-max-width);
  text-wrap: balance;
}
.owner-banner {
  color: var(--nx-color-ink);
  background: var(--nx-color-track);
  border-radius: var(--nx-radius-pill);
  padding: var(--nx-space-sm) var(--nx-space-lg);
}

/* Next Home's garland: triangle, diamond, circle, in the accents' order. */
.garland {
  display: flex;
  justify-content: center;
  gap: var(--nx-size-garland-gap);
  margin-top: var(--nx-space-md);
}
.garland i {
  width: var(--nx-size-garland-piece);
  height: var(--nx-size-garland-piece);
  background: var(--nx-color-red);
  -webkit-mask: url("/confetti/triangle.svg") center / contain no-repeat;
  mask: url("/confetti/triangle.svg") center / contain no-repeat;
}
.garland i:nth-child(3n + 2) { -webkit-mask-image: url("/confetti/diamond.svg"); mask-image: url("/confetti/diamond.svg"); }
.garland i:nth-child(3n) { -webkit-mask-image: url("/confetti/circle.svg"); mask-image: url("/confetti/circle.svg"); }
.garland i:nth-child(4n + 2) { background: var(--nx-color-yellow); }
.garland i:nth-child(4n + 3) { background: var(--nx-color-green); }
.garland i:nth-child(4n) { background: var(--nx-color-purple); }

/* ------------------------------------------------------------ the wishes */

main { max-width: var(--web-page-max-width); margin: 0 auto; padding: 0 var(--nx-space-xl) var(--nx-space-xxl); }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--web-columns), minmax(0, 1fr));
  gap: var(--nx-space-lg);
}

.card { display: grid; align-content: start; }

/* A press sinks on Next's press curve and springs back. */
.card-tap {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--nx-radius-card);
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--nx-motion-press-up-duration) var(--nx-motion-press-up-easing);
}
.card-tap:active {
  transform: scale(var(--nx-motion-card-press-scale));
  transition: transform var(--nx-motion-press-down-duration) var(--nx-motion-press-down-easing);
}

/* One white card, the product whole inside it (never cropped). */
.card-image {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--nx-radius-card);
  background: var(--nx-color-card);
  box-shadow: var(--nx-shadow-card);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.card-image img { width: var(--nx-size-card-image); height: var(--nx-size-card-image); object-fit: contain; }
.image-fallback { color: var(--nx-color-ink-quiet); }
.image-fallback .icon { width: var(--nx-size-fallback-icon); height: var(--nx-size-fallback-icon); }

/* A gift someone is getting: the picture under a light veil, a straight label on the card (no tilt off Home's wall). */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nx-color-taken-veil);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nx-motion-veil-duration) var(--nx-motion-veil-easing);
}
.card.is-taken .card-image::after,
.card.is-mine .card-image::after { opacity: 1; }

.stamp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--nx-size-stamp-inset);
  z-index: 1;
  width: fit-content;
  max-width: calc(100% - 2 * var(--nx-size-stamp-inset));
  min-height: var(--nx-size-stamp);
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: var(--nx-space-xs) var(--nx-space-md);
  border-radius: var(--nx-radius-pill);
  background: var(--nx-color-ink);
  color: var(--nx-color-card);
  font: var(--nx-font-stamp);
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  animation: nx-stamp-in var(--nx-motion-stamp-duration) var(--nx-motion-stamp-easing) both;
}
.card.is-mine .stamp { background: var(--nx-color-purple); color: var(--nx-color-card); }
.card.is-bought .stamp { background: var(--nx-color-green); color: var(--nx-color-ink); }

@keyframes nx-stamp-in { from { transform: scale(var(--nx-motion-stamp-from)); opacity: 0; } }

.empty {
  display: grid;
  justify-items: center;
  gap: var(--nx-space-md);
  padding: var(--nx-space-xxl) 0;
  font: var(--nx-font-detail);
  color: var(--nx-color-ink-secondary);
}
.empty .icon {
  width: var(--nx-size-tile);
  height: var(--nx-size-tile);
  padding: var(--nx-space-lg);
  border-radius: var(--nx-radius-tile);
  background: var(--nx-color-card);
  color: var(--nx-color-ink-quiet);
  box-shadow: var(--nx-shadow-card);
}

/* Owner view: no reserving, no reservation state */
body.is-owner [data-guest-only] { display: none; }
body.is-owner .card-tap { cursor: default; }
body.is-owner .card-tap:active { transform: none; }

/* ------------------------------------------------------------ the gift sheet: one container, the picture on white,
   the words on the open card's lavender (NX.ProductCard). A floating sheet on phones, a centered card on wide screens. */

.sheet {
  border: 0;
  padding: 0;
  margin: auto var(--web-sheet-side-inset) var(--web-sheet-bottom-margin);
  width: var(--web-sheet-width);
  max-width: var(--web-sheet-max-width);
  max-height: var(--web-sheet-max-height);
  background: var(--nx-color-info);
  color: var(--nx-color-ink);
  border-radius: var(--nx-radius-sheet);
  box-shadow: var(--nx-shadow-sheet);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Behind it, one even shade: a prepared blur under Next's background, crossfaded in (the blur itself never animates). */
.sheet::backdrop {
  background: var(--nx-color-veil);
  -webkit-backdrop-filter: blur(var(--nx-blur-veil));
  backdrop-filter: blur(var(--nx-blur-veil));
}

/* The sheet rises from below the screen on Next's card spring (no fade); Reduce Motion: the same path, no bounce. */
.sheet[open] { animation: nx-rise var(--nx-motion-sheet-duration) var(--nx-motion-sheet-easing); }
.sheet[open]::backdrop { animation: nx-veil-in var(--nx-motion-veil-duration) var(--nx-motion-veil-easing); }

@keyframes nx-rise { from { transform: translateY(var(--web-sheet-enter-offset)); } }
@keyframes nx-veil-in { from { opacity: 0; } }

.sheet-body { display: grid; }

/* The picture fits whole inside its area (never cropped), a little room kept on every side. */
.sheet-thumb {
  height: var(--web-sheet-image-height);
  max-height: var(--web-sheet-image-max-height);
  background: var(--nx-color-card);
  overflow: hidden;
}
.sheet-thumb:empty { display: none; }
.sheet-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--nx-size-sheet-image-inset);
}

.sheet-info {
  display: grid;
  gap: var(--nx-space-md);
  padding: var(--nx-space-xl) var(--nx-space-xl) calc(var(--nx-space-xl) + env(safe-area-inset-bottom));
}

.sheet h2 {
  font: var(--nx-font-title);
  letter-spacing: var(--nx-font-title-tracking);
  font-variation-settings: var(--nx-font-title-variation);
  text-wrap: balance;
  margin-top: var(--nx-space-sm);
}
.sheet-text { font: var(--nx-font-detail); color: var(--nx-color-ink-secondary); margin-bottom: var(--nx-space-xs); }

/* The wish's details (the card's template, copied in by list.js). */
.sheet-details { display: grid; gap: var(--nx-space-md); }
.card-text { display: grid; gap: var(--nx-space-xs); }
.card-title {
  font: var(--nx-font-product-title);
  letter-spacing: var(--nx-font-product-title-tracking);
}
.card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nx-space-sm);
  padding-bottom: var(--nx-space-xs);
}
.price { font: var(--nx-font-price); font-variant-numeric: var(--nx-font-price-numeric); }
.merchant { font: var(--nx-font-detail); color: var(--nx-color-ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.detail {
  display: flex;
  gap: var(--nx-space-sm);
  align-items: flex-start;
  font: var(--nx-font-detail);
  color: var(--nx-color-ink-secondary);
}
.detail .icon { width: var(--web-detail-icon-size); height: var(--web-detail-icon-size); margin-top: var(--web-detail-icon-nudge); color: var(--nx-color-ink-quiet); }
.detail.wants, .detail.wants .icon { color: var(--nx-color-purple); }
.detail.note span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.option-swatch {
  display: inline-block;
  width: var(--nx-size-swatch);
  height: var(--nx-size-swatch);
  margin-top: var(--nx-space-xxs);
  border-radius: var(--nx-radius-pill);
  box-shadow: 0 0 0 var(--nx-size-border) var(--nx-color-hairline);
  flex-shrink: 0;
}

/* "Find it": a white pill, like Next's "More from the web". */
.buy {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-sm);
  min-height: var(--nx-size-field);
  padding: 0 var(--nx-space-xl);
  border-radius: var(--nx-radius-pill);
  background: var(--nx-color-card);
  box-shadow: var(--nx-shadow-pill);
  font: var(--nx-font-label);
  text-decoration: none;
  transition: transform var(--nx-motion-press-up-duration) var(--nx-motion-press-up-easing);
}
.buy:active { transform: scale(var(--nx-motion-press-scale)); transition: transform var(--nx-motion-press-down-duration) var(--nx-motion-press-down-easing); }
.buy .icon { width: var(--web-detail-icon-size); height: var(--web-detail-icon-size); }

/* Buttons: ink pills (Next's "+ Wish"), the quiet ones white. */
.button {
  display: block;
  width: 100%;
  min-height: var(--nx-size-button);
  border: 0;
  border-radius: var(--nx-radius-pill);
  padding: var(--nx-space-md) var(--nx-space-xl);
  font: var(--nx-font-button);
  cursor: pointer;
  transition: transform var(--nx-motion-press-up-duration) var(--nx-motion-press-up-easing),
              opacity var(--nx-motion-hover-duration) var(--nx-motion-hover-easing);
}
.button:active { transform: scale(var(--nx-motion-press-scale)); transition: transform var(--nx-motion-press-down-duration) var(--nx-motion-press-down-easing); }
.button:disabled { opacity: var(--nx-opacity-disabled); cursor: default; transform: none; }
.button.primary { background: var(--nx-color-ink); color: var(--nx-color-card); }
.button.secondary { background: var(--nx-color-card); color: var(--nx-color-ink); }

/* The name step and the giver's note. */
.sheet label { display: block; font: var(--nx-font-label); }
#visitor-name, #visitor-note {
  width: 100%;
  min-height: var(--nx-size-field);
  margin-top: var(--nx-space-sm);
  padding: var(--nx-space-md) var(--nx-space-lg);
  font: var(--nx-font-body);
  color: var(--nx-color-ink);
  background: var(--nx-color-card);
  border: var(--nx-size-border) solid var(--nx-color-ink-quiet);
  border-radius: var(--nx-radius-field);
}
#visitor-name:focus-visible, #visitor-note:focus-visible { outline-offset: 0; border-color: var(--nx-color-purple); }
#visitor-note { resize: vertical; }
.sheet .hint { max-width: none; margin-top: var(--nx-space-sm); font: var(--nx-font-caption); text-wrap: pretty; }
.giver-note { margin-top: var(--nx-space-xl); }
.giver-note .sign {
  display: flex;
  align-items: center;
  gap: var(--nx-space-sm);
  margin-top: var(--nx-space-md);
  font: var(--nx-font-detail);
}
.giver-note .sign input { width: var(--nx-size-swatch); height: var(--nx-size-swatch); margin: 0; accent-color: var(--nx-color-ink); }
.giver-note .sign:has(input:disabled) { color: var(--nx-color-ink-secondary); }

/* ------------------------------------------------------------ footer, toast */

.footer {
  max-width: var(--web-page-max-width);
  margin: 0 auto;
  padding: var(--nx-space-xl) var(--nx-space-xl) var(--nx-space-xxxl);
  display: grid;
  justify-items: center;
  gap: var(--nx-space-md);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-sm);
  min-height: var(--nx-size-field);
  padding: 0 var(--nx-space-xl);
  border-radius: var(--nx-radius-pill);
  background: var(--nx-color-card);
  box-shadow: var(--nx-shadow-pill);
  font: var(--nx-font-label);
  text-decoration: none;
  color: var(--nx-color-ink);
  transition: transform var(--nx-motion-press-up-duration) var(--nx-motion-press-up-easing);
}
.cta:active { transform: scale(var(--nx-motion-press-scale)); transition: transform var(--nx-motion-press-down-duration) var(--nx-motion-press-down-easing); }

.link {
  border: 0;
  background: none;
  padding: var(--nx-space-sm);
  font: var(--nx-font-caption);
  color: var(--nx-color-ink-secondary);
  text-decoration: underline;
  text-underline-offset: var(--web-link-underline-offset);
  cursor: pointer;
}

/* Toasts: an ink pill rising into place at the bottom (NX.Results.barMotion). */
.toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--web-toast-bottom) + env(safe-area-inset-bottom));
  width: fit-content;
  max-width: calc(100% - 2 * var(--nx-space-xl));
  min-height: var(--nx-size-toast);
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: var(--nx-space-md) var(--nx-space-xl);
  border-radius: var(--nx-radius-pill);
  background: var(--nx-color-ink);
  color: var(--nx-color-card);
  font: var(--nx-font-label);
  text-align: center;
  box-shadow: var(--nx-shadow-sheet);
  animation: nx-toast-in var(--nx-motion-toast-duration) var(--nx-motion-toast-easing);
}
@keyframes nx-toast-in { from { transform: translateY(calc(100% + var(--web-toast-bottom) + env(safe-area-inset-bottom))); } }

/* The giver's confetti (confetti.js draws it; its look and motion are the --confetti-* tokens). Never catches taps. */
.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--confetti-layer);
}

/* ------------------------------------------------------------ problem + landing pages */

.problem, .landing {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--nx-space-md);
  text-align: center;
  padding: var(--nx-space-xxxl) var(--nx-space-xl);
}
.problem p, .landing p { font: var(--nx-font-detail); color: var(--nx-color-ink-secondary); max-width: var(--web-text-max-width); text-wrap: balance; }
.problem .hero-icon { margin-bottom: var(--nx-space-sm); }
.problem .cta { margin-top: var(--nx-space-lg); }