/* The Luwy practice card: made in setup (name, who you're becoming, colour), saved with the account, shown on Home.
 * Card faces use the brand's fixed deep colours with stone text, so they read the same in light and dark mode.
 * The honey dot is the one reward accent. */
.pcard { --pc-bg: #604531; --pc-ink: #F7F3EA; --pc-soft: rgba(243,240,235,.74); --pc-line: rgba(243,240,235,.22);
  position: relative; aspect-ratio: 1.586; width: 100%; max-width: 100%; min-width: 0; border-radius: 20px; padding: 18px 20px; box-sizing: border-box;
  color: var(--pc-ink); background: var(--pc-bg); text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto; overflow: hidden;
  box-shadow: 0 2px 4px rgba(31,21,25,.12), 0 18px 40px rgba(79,22,48,.22); transition: background .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1); }
.pcard::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.14), transparent 55%); pointer-events: none; }
/* Card faces are the exact brand palette. Light faces take espresso ink and a cocoa dot. */
.pcard[data-style="honey"], .pcard[data-style="teal"], .pcard[data-style="brick"], .pcard[data-style="glow"] {
  --pc-ink: #2F2219; --pc-soft: rgba(47,34,25,.72); --pc-line: rgba(47,34,25,.18);
  box-shadow: 0 2px 4px rgba(31,21,25,.1), 0 18px 40px rgba(96,69,49,.16); }
.pcard[data-style="honey"] .pcard-mark i, .pcard[data-style="teal"] .pcard-mark i,
.pcard[data-style="brick"] .pcard-mark i, .pcard[data-style="glow"] .pcard-mark i { background: #604531; }
.pcard[data-style="honey"] { --pc-bg: #FBE39D; }                               /* Butter Yellow */
.pcard[data-style="teal"]  { --pc-bg: #C0DDD9; }                               /* Seafoam */
.pcard[data-style="brick"] { --pc-bg: #D7DEEB; }                               /* Snow Blue */
.pcard[data-style="glow"]  { --pc-bg: #F7F3EA; border: 1px solid rgba(47,34,25,.16); }  /* Warm Cream */
.pcard[data-style="ink"] { --pc-bg: #2F2219; box-shadow: 0 2px 4px rgba(31,21,25,.16), 0 18px 40px rgba(31,21,25,.28); }  /* Espresso */
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* The card mark is the "luwy." wordmark, inked to suit each face. */
.pcard-mark { --pc-logo: url(/brand/luwy-cream.png?v=20261012g);
  display: block; width: 54px; height: 24px; flex: none;
  background: var(--pc-logo) left center / contain no-repeat;
  font-size: 0; line-height: 0; color: transparent; text-indent: -9999px; overflow: hidden; }
.pcard-mark i { display: none !important; }
.pcard[data-style="honey"] .pcard-mark, .pcard[data-style="teal"] .pcard-mark,
.pcard[data-style="brick"] .pcard-mark, .pcard[data-style="glow"] .pcard-mark { --pc-logo: url(/brand/luwy-cocoa.png?v=20261012g); }
.pcard.mini .pcard-mark { width: 46px; height: 20px; }
.pcard-kind { font: 700 10px/1 var(--sans, system-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--pc-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-name { align-self: end; font: 800 clamp(22px, 5vw, 28px)/1.1 var(--sans, system-ui); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pcard-name.ph { color: var(--pc-soft); }
.pcard-title { font: 500 15px/1.3 var(--sans, system-ui); color: var(--pc-soft); margin-top: 4px; }
.pcard-facts { display: flex; gap: 18px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--pc-line); }
.pcard-facts div { min-width: 0; flex: 1 1 0; }
.pcard-facts dt { font: 700 9px/1.2 var(--sans, system-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--pc-soft); }
.pcard-facts dd { margin: 3px 0 0; font: 600 13px/1.25 var(--sans, system-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-foot { display: flex; justify-content: space-between; margin-top: 8px; font: 600 11px/1 var(--sans, system-ui); color: var(--pc-soft); font-variant-numeric: tabular-nums; }
.chip.swatch { display: inline-flex; align-items: center; gap: 8px; }
.chip.swatch i { width: 16px; height: 16px; border-radius: 50%; background: #604531; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.chip.swatch[data-style="ink"] i { background: #2F2219; }
.chip.swatch[data-style="teal"] i { background: #C0DDD9; box-shadow: inset 0 0 0 1.5px rgba(47,34,25,.18); }
.chip.swatch[data-style="honey"] i { background: #FBE39D; box-shadow: inset 0 0 0 1.5px rgba(47,34,25,.18); }
.chip.swatch[data-style="glow"] i { background: #F7F3EA; box-shadow: inset 0 0 0 1.5px rgba(47,34,25,.22); }
.chip.swatch[data-style="brick"] i { background: #D7DEEB; box-shadow: inset 0 0 0 1.5px rgba(47,34,25,.18); }
@keyframes card-saved { 0% { opacity: 0; transform: translateY(16px) rotate(-3deg) scale(.94); } 60% { opacity: 1; transform: translateY(-4px) rotate(1deg) scale(1.02); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pcard { transition: none; } }

/* Card choices, compact: titles in one swipeable row, colours as a row of round swatches. The card above shows every change. */
#titleChips, #spCT { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; padding: 2px 2px 8px; margin: 0 -2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#titleChips::-webkit-scrollbar, #spCT::-webkit-scrollbar { display: none; }
#titleChips > button, #spCT > button { flex: none; scroll-snap-align: start; white-space: nowrap; }
#styleChips, #spCS { display: flex !important; flex-wrap: wrap; gap: 10px; }
#styleChips .chip.swatch, #spCS .chip.swatch { font-size: 0 !important; width: 44px; height: 44px; min-height: 44px; padding: 0 !important; border-radius: 50%; justify-content: center; gap: 0; border: 2px solid transparent; background: transparent; }
#styleChips .chip.swatch i, #spCS .chip.swatch i { width: 32px; height: 32px; }
#styleChips .chip.swatch[aria-pressed="true"], #spCS .chip.swatch[aria-pressed="true"] { border-color: var(--claret, #604531); background: transparent; color: inherit; }
html[data-theme="dark"] #styleChips .chip.swatch[aria-pressed="true"], html[data-theme="dark"] #spCS .chip.swatch[aria-pressed="true"] { border-color: #FBE39D; }


/* Auth and signup: add the full palette without weakening text contrast. */
.auth-card,.setup,.doc-card,.state-card,.plan-card,.plan-pick {
  border-radius:24px!important; border-color:var(--hairline)!important; box-shadow:var(--shadow-1);
}
.auth-card { border-top:4px solid #D7DEEB!important; }
.auth-mark,.setup .step-mark,.state-card .check-ring {
  border-radius:16px!important; background:#D7DEEB!important; color:#2F2219!important;
}
.auth-card .auth-note,.setup .setup-note,.setup .step-note,.auth-solo .auth-note {
  border-radius:16px!important; background:color-mix(in srgb,#D7DEEB 46%,var(--card))!important;
  color:var(--ink)!important; border:1px solid color-mix(in srgb,#4E9389 25%,var(--hairline));
}
.setup .bar,.setup .progress,.state-steps li::before { border-radius:999px!important; }
.setup .bar { background:#D7DEEB!important; overflow:hidden; }
.setup .bar i,.setup .bar span,.setup .progress-fill { background:#4E9389!important; border-radius:999px!important; }
.auth-card .btn.primary,.doc-card .btn.primary,.setup .btn.primary { border-radius:14px!important; }
.auth-card .btn.soft,.auth-card .btn.outline,.setup .btn.quiet {
  background:#D7DEEB!important; color:#2F2219!important; border:1px solid rgba(47,34,25,.14)!important;
}
.auth-card .btn.soft:hover,.auth-card .btn.outline:hover,.setup .btn.quiet:hover { background:#D7DEEB!important; }
.plan-card:nth-of-type(3n+1) { border-top:3px solid #D7DEEB!important; }
.plan-card:nth-of-type(3n+2) { border-top:3px solid #D7DEEB!important; }
.plan-card:nth-of-type(3n) { border-top:3px solid #FBE39D!important; }
html[data-theme="dark"] .auth-card,html[data-theme="dark"] .setup,html[data-theme="dark"] .doc-card,html[data-theme="dark"] .state-card,html[data-theme="dark"] .plan-card {
  background:var(--card)!important; color:var(--ink)!important; border-color:var(--hairline)!important;
}
html[data-theme="dark"] .auth-card { border-top-color:#D7DEEB!important; }
html[data-theme="dark"] .auth-card .auth-note,html[data-theme="dark"] .setup .setup-note,html[data-theme="dark"] .setup .step-note {
  background:#2F3E39!important; color:#F7F3EA!important; border-color:#4E9389!important;
}
html[data-theme="dark"] .auth-card .btn.soft,html[data-theme="dark"] .auth-card .btn.outline,html[data-theme="dark"] .setup .btn.quiet {
  background:#3B2C21!important; color:#F7F3EA!important; border-color:#6D5A4D!important;
}


/* Final app surface pass: rounded-square scene tiles and friendly social rewards. */
.tp-card,.ms,.mh-card,.dk-card,.tp-back,.scene-card,.goal-card,.practice-card,.rank-row,.lg-row,.fq-card,.fq-neutral,.friend-result,.xp-hero,.skill-row,.weak-card,.weak-spot,.weakspot-card,.panel,.card {
  border-radius:20px!important;
}
.tp-card {
  border:1px solid var(--hairline)!important; color:var(--ink)!important;
  box-shadow:var(--shadow-1); min-width:0; overflow:hidden;
}
.tp-card:nth-child(3n+1) { background:color-mix(in srgb,#D7DEEB 44%,var(--card))!important; }
.tp-card:nth-child(3n+2) { background:color-mix(in srgb,#D7DEEB 40%,var(--card))!important; }
.tp-card:nth-child(3n) { background:color-mix(in srgb,#FBE39D 36%,var(--card))!important; }
.tp-card .tp-ic { border-radius:14px!important; background:rgba(247,243,234,.78)!important; color:#2F2219!important; }
.tp-card .tp-n,.tp-card .tp-t,.tp-card .tp-s { color:#2F2219!important; }
.tp-card:focus-visible { outline:3px solid #4E9389!important; outline-offset:3px; }
.ms,.mh-card,.dk-card { border:1px solid var(--hairline)!important; background:var(--card); }
.ms:nth-child(3n+1) { background:color-mix(in srgb,#D7DEEB 28%,var(--card)); }
.ms:nth-child(3n+2) { background:color-mix(in srgb,#D7DEEB 24%,var(--card)); }
.ms:nth-child(3n) { background:color-mix(in srgb,#FBE39D 24%,var(--card)); }
.lg-hero { padding:22px!important; border:1px solid var(--hairline)!important; border-radius:24px!important; background:linear-gradient(125deg,color-mix(in srgb,#D7DEEB 46%,var(--card)),color-mix(in srgb,#D7DEEB 40%,var(--card)))!important; box-shadow:var(--shadow-1); }
.lg-spot b,.lg-spot .lg-n { color:#604531!important; }
.lg-row.me { background:color-mix(in srgb,#D7DEEB 34%,var(--card))!important; border:1px solid color-mix(in srgb,#4E9389 34%,var(--hairline))!important; padding:14px 12px; }
.lg-row.me .lg-av { background:#FBE39D!important; color:#2F2219!important; }
.podium-card { border-radius:22px!important; border:1px solid var(--hairline)!important; box-shadow:var(--shadow-1); }
.podium-card.rank-1 { background:#FBE39D!important; color:#2F2219!important; border-color:#D9B95E!important; }
.podium-card.rank-2 { background:#D7DEEB!important; color:#2F2219!important; }
.podium-card.rank-3 { background:#D7DEEB!important; color:#2F2219!important; }
.podium-card .podium-rank,.podium-card .podium-name,.podium-card .podium-score,.podium-card .podium-meta { color:inherit!important; }
#ss-friend-quest .fq-card { border-radius:22px!important; border-color:var(--hairline)!important; background:var(--card)!important; color:var(--ink)!important; box-shadow:var(--shadow-1); padding:18px!important; }
#ss-friend-quest .fq-k { display:inline-flex; padding:6px 10px; border-radius:999px; background:#D7DEEB; color:#2F2219!important; font-weight:800; }
#ss-friend-quest .fq-h { color:var(--ink)!important; }
#ss-friend-quest .fq-neutral { border-radius:16px!important; background:color-mix(in srgb,#D7DEEB 24%,var(--card))!important; border-color:var(--hairline)!important; color:var(--ink)!important; }
#ss-friend-quest .fq-timer { display:inline-grid; min-width:120px; min-height:96px; place-items:center; padding:12px 20px; border-radius:22px; background:#FBE39D; color:#2F2219!important; font-variant-numeric:tabular-nums; box-shadow:0 5px 0 #D9B95E; }
#ss-friend-quest .fq-score { color:#3E6B61!important; }
#ss-friend-quest .fq-line { height:10px!important; border-radius:999px!important; background:color-mix(in srgb,#D7DEEB 60%,var(--paper-2))!important; }
#ss-friend-quest .fq-line i { border-radius:999px!important; background:linear-gradient(90deg,#4E9389,#D7DEEB 60%,#FBE39D)!important; }
#ss-friend-quest .fq-done { display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:18px; background:color-mix(in srgb,#D7DEEB 42%,var(--card)); border:1px solid color-mix(in srgb,#4E9389 30%,var(--hairline)); }
#ss-friend-quest .fq-done svg { color:#3E6B61; }
#ss-friend-quest .fq-actions .btn { border-radius:14px!important; }
html[data-theme="dark"] .tp-card,html[data-theme="dark"] .ms,html[data-theme="dark"] .mh-card,html[data-theme="dark"] .dk-card {
  background:#3B2C21!important; color:#F7F3EA!important; border-color:#5A4938!important;
}
html[data-theme="dark"] .tp-card .tp-n,html[data-theme="dark"] .tp-card .tp-t,html[data-theme="dark"] .tp-card .tp-s { color:#F7F3EA!important; }
html[data-theme="dark"] .tp-card .tp-ic { background:#2F3E39!important; color:#D7DEEB!important; }
html[data-theme="dark"] .ms:nth-child(3n+1),html[data-theme="dark"] .ms:nth-child(3n+2),html[data-theme="dark"] .ms:nth-child(3n) { background:#3B2C21!important; border-top:3px solid #D7DEEB!important; }
html[data-theme="dark"] .lg-hero { background:linear-gradient(125deg,#3B2C21,#2F2219)!important; border-color:#5A4938!important; }
html[data-theme="dark"] .lg-spot b,html[data-theme="dark"] .lg-spot .lg-n { color:#FBE39D!important; }
html[data-theme="dark"] .lg-row.me { background:#3B2C21!important; border-color:#4E9389!important; }
html[data-theme="dark"] .lg-row.me .lg-av { background:#FBE39D!important; color:#2F2219!important; }
html[data-theme="dark"] .podium-card.rank-1 { background:#4A3A2C!important; color:#FBE39D!important; border-color:#B78C6E!important; }
html[data-theme="dark"] .podium-card.rank-2 { background:#3B2C21!important; color:#D7DEEB!important; }
html[data-theme="dark"] .podium-card.rank-3 { background:#2F3E39!important; color:#D7DEEB!important; }
html[data-theme="dark"] #ss-friend-quest .fq-card { background:#3B2C21!important; color:#F7F3EA!important; border-color:#5A4938!important; }
html[data-theme="dark"] #ss-friend-quest .fq-k { background:#FBE39D; color:#2F2219!important; }
html[data-theme="dark"] #ss-friend-quest .fq-neutral { background:#2F3E39!important; color:#F7F3EA!important; border-color:#4E9389!important; }
html[data-theme="dark"] #ss-friend-quest .fq-h,html[data-theme="dark"] #ss-friend-quest .fq-muted { color:#F7F3EA!important; }
html[data-theme="dark"] #ss-friend-quest .fq-score { color:#D7DEEB!important; }
html[data-theme="dark"] #ss-friend-quest .fq-line { background:#514235!important; }
@media(max-width:520px) { .lg-hero { padding:16px!important; } #ss-friend-quest .fq-timer { min-width:100px; min-height:84px; font-size:48px; } }


/* Friend quest onboarding: clear steps with small, earned-looking colour accents. */
.qb-top {
  padding:22px!important; border-radius:24px!important; border:1px solid var(--hairline);
  background:linear-gradient(125deg,color-mix(in srgb,#D7DEEB 40%,var(--card)),color-mix(in srgb,#D7DEEB 36%,var(--card)));
}
.qb-top h2 { color:var(--ink)!important; }
.qb-top .lead { color:var(--ink-2)!important; }
.qb-need { margin:14px 0; padding:13px 15px; border-radius:16px; background:#D7DEEB; color:#2F2219!important; border:1px solid rgba(47,34,25,.12); }
.qb-path { display:grid!important; gap:10px; border:0!important; padding:0!important; margin:20px 0 14px!important; }
.qb-step {
  display:grid!important; grid-template-columns:40px minmax(0,1fr); gap:12px;
  align-items:start; padding:15px!important; border:1px solid var(--hairline)!important;
  border-radius:18px!important; background:var(--card); min-width:0;
}
.qb-step:nth-child(4n+1) { background:color-mix(in srgb,#D7DEEB 38%,var(--card)); }
.qb-step:nth-child(4n+2) { background:color-mix(in srgb,#D7DEEB 34%,var(--card)); }
.qb-step:nth-child(4n+3) { background:color-mix(in srgb,#FBE39D 32%,var(--card)); }
.qb-step:nth-child(4n) { background:color-mix(in srgb,#B78C6E 22%,var(--card)); }
.qb-n { display:grid!important; place-items:center; width:36px; height:36px; border-radius:12px!important; background:#FBE39D!important; color:#2F2219!important; font-weight:900!important; box-shadow:0 3px 0 #D9B95E; }
.qb-step b { display:block; color:var(--ink)!important; font-size:16px; line-height:1.3; }
.qb-step small { display:block; margin-top:4px; color:var(--ink-2)!important; font-size:14px; line-height:1.45; }
html[data-theme="dark"] .qb-top { background:linear-gradient(125deg,#3B2C21,#2F2219); border-color:#5A4938; }
html[data-theme="dark"] .qb-top h2,html[data-theme="dark"] .qb-top .lead { color:#F7F3EA!important; }
html[data-theme="dark"] .qb-need { background:#D7DEEB; color:#2F2219!important; }
html[data-theme="dark"] .qb-step { background:#3B2C21!important; border-color:#5A4938!important; border-left:4px solid #D7DEEB!important; }
html[data-theme="dark"] .qb-step:nth-child(4n+1) { border-left-color:#D7DEEB!important; }
html[data-theme="dark"] .qb-step:nth-child(4n+3) { border-left-color:#FBE39D!important; }
html[data-theme="dark"] .qb-step b { color:#F7F3EA!important; }
html[data-theme="dark"] .qb-step small { color:#D6C8B4!important; }
@media(max-width:520px) { .qb-top { padding:17px!important; } .qb-step { padding:13px!important; } }