/* ─────────────────────────────────────────────────────────────────────────
   lux.css — "soft depth" surface treatment (design option A, 2026-08-21)

   On by default at level 2 since 2026-08-21. Every rule is scoped to html.lux,
   which each page's loader sets before the body paints; ?ui=off withholds the
   class, so the file matches nothing and the older flat look returns intact.
   To revert for everyone, drop the class from the loader — nothing else in the
   pages depends on this file.

   The palette is deliberately unchanged. What changes is the light: surfaces
   get a two-layer shadow (a tight contact shadow plus a wide soft one), a
   barely-there top-to-bottom gradient, and a 1px white inner highlight along
   the top edge — the way a real card catches light. Shadows are tinted with
   the page's own pink (rgba(176,96,130,…)) rather than grey, so nothing turns
   muddy against the pink background.

   Only background / border / border-radius / box-shadow are touched. No
   geometry, so layout can't shift.
   ───────────────────────────────────────────────────────────────────────── */

/* Three strengths, chosen with ?ui=lux / lux2 / lux3. A shadow can only be
   seen against a ground darker than the surface casting it, so the levels
   mostly differ in how far the page ground is pushed away from card-white:
   at level 1 the ground is nearly white and the depth barely registers on a
   phone; by level 3 the cards read as paper laid on blush. */
html.lux {
  --lux-line:   rgba(232,155,180,.22);   /* hairline, pink-tinted            */
  --lux-line-2: rgba(232,155,180,.30);   /* hairline on tinted surfaces      */
  --lux-ground: linear-gradient(165deg,#fff8fb 0%,#FBEAF0 55%,#fdeef4 100%);
  --lux-radius: 16px;
  --lux-face:   linear-gradient(180deg,#fff 0%,#fffafc 100%);
  --lux-face-2: linear-gradient(180deg,#fff 0%,#fdf5f8 100%);
  --lux-lift:   0 1px 2px rgba(176,96,130,.05), 0 10px 26px -8px rgba(176,96,130,.18), inset 0 1px 0 #fff;
  --lux-lift-s: 0 1px 1px rgba(176,96,130,.04), 0 4px 10px -3px rgba(176,96,130,.12), inset 0 1px 0 #fff;
  --lux-chip:   0 2px 5px -2px rgba(176,96,130,.14), inset 0 1px 0 #fff;
  --lux-pink:   linear-gradient(180deg,#FDF0F5 0%,#F8DCE7 100%);
  --lux-cta:    linear-gradient(180deg,#E0709C 0%,#C03D6B 100%);
  --lux-cta-sh: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 18px -6px rgba(192,61,107,.50), 0 1px 2px rgba(192,61,107,.20);
}

/* Level 2 — the ground pulls back to a real blush, surfaces stay white. */
html.lux.lvl2 {
  --lux-line:   rgba(226,140,170,.28);
  --lux-line-2: rgba(226,140,170,.34);
  --lux-ground: linear-gradient(165deg,#FDEFF4 0%,#F6D6E3 60%,#FBE4EC 100%);
  --lux-radius: 18px;
  --lux-lift:   0 1px 2px rgba(160,80,115,.08), 0 14px 32px -10px rgba(160,80,115,.28), inset 0 1px 0 #fff;
  --lux-lift-s: 0 1px 2px rgba(160,80,115,.07), 0 6px 14px -4px rgba(160,80,115,.20), inset 0 1px 0 #fff;
  --lux-chip:   0 3px 7px -2px rgba(160,80,115,.22), inset 0 1px 0 #fff;
  --lux-cta-sh: inset 0 1px 0 rgba(255,255,255,.38), 0 10px 22px -6px rgba(192,61,107,.55), 0 2px 4px rgba(192,61,107,.25);
}

/* Level 3 — deepest ground, widest shadows, roundest corners. */
html.lux.lvl3 {
  --lux-line:   rgba(214,120,155,.34);
  --lux-line-2: rgba(214,120,155,.40);
  --lux-ground: linear-gradient(165deg,#FAE2EC 0%,#EFC2D6 60%,#F7DCE8 100%);
  --lux-radius: 22px;
  --lux-lift:   0 2px 4px rgba(140,60,100,.10), 0 20px 44px -12px rgba(140,60,100,.38), inset 0 1px 0 #fff;
  --lux-lift-s: 0 1px 3px rgba(140,60,100,.10), 0 9px 20px -5px rgba(140,60,100,.28), inset 0 1px 0 #fff;
  --lux-chip:   0 4px 10px -2px rgba(140,60,100,.28), inset 0 1px 0 #fff;
  --lux-cta-sh: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 28px -6px rgba(192,61,107,.60), 0 2px 5px rgba(192,61,107,.30);
}

/* ── Page ground ──────────────────────────────────────────────────────────
   A long, shallow gradient. Flat fills read as "screen"; a gradient this
   gentle reads as "lit from above" without anyone noticing a gradient.      */
html.lux body { background: var(--lux-ground) fixed; }

/* The section labels sit directly on the ground. They used to be grey and were
   warmed here so they wouldn't go muddy on blush; they are brand pink now, which
   holds up at lvl2 unaided. lvl3's deeper ground still wants a deeper ink. */
html.lux.lvl3 .sec-lbl { color: #A82D59; }
html.lux.lvl3 .sec-lbl::before { background: #A82D59; }

/* ── Raised surfaces ───────────────────────────────────────────────────── */
html.lux .card,
html.lux .tier,
html.lux .group,
html.lux .modal-box {
  background: var(--lux-face);
  border: 1px solid var(--lux-line);
  border-radius: var(--lux-radius);
  box-shadow: var(--lux-lift);
}
html.lux .tier.lead-tier,
html.lux .group.lead-tier {
  border-color: #E89BB4;
  box-shadow: 0 1px 2px rgba(176,96,130,.06), 0 12px 28px -8px rgba(192,61,107,.22), inset 0 1px 0 #fff;
}
html.lux .step {
  background: linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 100%);
  border: 1px solid var(--lux-line);
  border-radius: 14px;
  box-shadow: var(--lux-lift-s);
}
html.lux .gift-result {
  background: var(--lux-face-2);
  border: 1px solid var(--lux-line);
  border-radius: 12px;
  box-shadow: var(--lux-lift-s);
}

/* ── Tiles inside a card ──────────────────────────────────────────────────
   Upload / record are the two things to press on the first screen, so they
   are lifted rather than sunk — a card within a card, one step shallower.   */
html.lux .upzone {
  background: var(--lux-face-2);
  border: 1px solid var(--lux-line-2);
  border-radius: 13px;
  box-shadow: var(--lux-lift-s);
}
html.lux .rec-item {
  background: var(--lux-face);
  border-color: var(--lux-line-2);
  border-radius: 10px;
  box-shadow: var(--lux-lift-s);
}

/* ── Small controls ───────────────────────────────────────────────────────
   Category buttons, tabs, language chips, pills. One tight shadow and a top
   highlight is enough — anything more and a row of them looks like buttons
   from 2008.                                                                */
html.lux .mbtn,
html.lux .sbtn,
html.lux .tab,
html.lux .lang-btn,
html.lux .langbar button,
html.lux .meta .pill,
html.lux .back,
html.lux .langsel,
html.lux .pd-open,
html.lux .gift-share-btn,
html.lux .order-cta {
  background: linear-gradient(180deg,#fff 0%,#fdf7f9 100%);
  border-color: var(--lux-line);
  box-shadow: var(--lux-chip);
}
html.lux .mbtn { border-radius: 10px; }
/* The app's language chips were the one control still using neutral grey. */
html.lux .lang-btn { color: #9C7E8B; }
html.lux .sbtn,
html.lux .tab,
html.lux .gift-share-btn { border-radius: 10px; }

/* Track rows: a long list, so the lift here is half-strength — a stack of
   strongly shadowed rows reads as clutter, not craft. */
html.lux .track-item {
  background: linear-gradient(180deg,#fff 0%,#fdf8fa 100%);
  border-color: var(--lux-line);
  border-radius: 10px;
  box-shadow: 0 1px 3px -1px rgba(176,96,130,.12), inset 0 1px 0 #fff;
}
html.lux .track-item.active {
  background: var(--lux-pink);
  border-color: #E89BB4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px -2px rgba(192,61,107,.22);
}

/* The wizard bar overlays scrolling content, so it earns an upward shadow to
   separate it from the page rather than a background change. */
html.lux .wiz-nav-inner {
  box-shadow: 0 -1px 0 rgba(232,155,180,.25), 0 -10px 24px -12px rgba(176,96,130,.35);
}

/* Selected state: the same pink, given a top-lit gradient. */
html.lux .mbtn.active,
html.lux .sbtn.active,
html.lux .tab.active,
html.lux .wiz-btn.back,
html.lux .tier-tag {
  background: var(--lux-pink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px -2px rgba(192,61,107,.22);
}
html.lux .lang-btn.active,
html.lux .langbar button.on {
  background: var(--lux-cta);
  border-color: #C03D6B;
  color: #fff;
  box-shadow: var(--lux-cta-sh);
}

/* ── Primary actions ──────────────────────────────────────────────────────
   Gradient top-to-bottom, a white hairline across the top edge, and a shadow
   tinted with the button's own colour so it reads as glow rather than dirt.  */
html.lux .wiz-btn.next,
html.lux .cta,
html.lux .submit,
html.lux .play-btn,
html.lux .rec-item-use {
  background: var(--lux-cta);
  box-shadow: var(--lux-cta-sh);
}
html.lux .play-btn.on {
  background: linear-gradient(180deg,#79D9BA 0%,#5DCAA5 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -6px rgba(93,202,165,.5);
}
html.lux .wiz-btn.next.disabled { box-shadow: none; }
html.lux .cta:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -8px rgba(192,61,107,.55); }
html.lux .submit:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 26px -8px rgba(192,61,107,.5); }

/* ── Progress tracks ──────────────────────────────────────────────────────
   A groove reads as depth: inner shadow on the track, lift on the fill.     */
html.lux .prog { box-shadow: inset 0 1px 2px rgba(176,96,130,.16); }
html.lux .bar  { box-shadow: 0 0 6px rgba(212,83,126,.35); }

/* ── Gift page ───────────────────────────────────────────────────────────
   The card floats over video here, so it keeps its glass; it only gains the
   depth cue. Careful: no backdrop-filter is added anywhere — the gift page
   decodes video and audio at the same time.                                 */
html.lux.p-gift .card {
  background: linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.50) 100%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 1px 2px rgba(120,70,95,.08), 0 18px 40px -14px rgba(120,70,95,.35), inset 0 1px 0 rgba(255,255,255,.8);
}
html.lux.p-gift .divider {
  background: linear-gradient(90deg,rgba(244,192,209,0),#F4C0D1,rgba(244,192,209,0));
}