/* Luwy onboarding. A welcome that shows the loop, pain-led picks that answer back, a plan that builds as you choose,
 * and a calm "ready" moment at the end. Tokens only. Motion plays once and stands down for reduced motion. */

.ob { max-width: 1040px; margin: 0 auto; padding: 18px 20px calc(120px + env(safe-area-inset-bottom, 0px)); }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 14px; }
.ob-top .step { font: 600 13px/1.3 var(--sans); color: var(--ink-2); }
.ob-bar { height: 6px; border-radius: 999px; background: var(--oat); overflow: hidden; margin-bottom: 26px; }
.ob-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--claret); transition: width .6s var(--ease-out); }
html[data-theme="dark"] .ob-bar i { background: var(--gold, #FBE39D); }
.ob[data-step="0"] .ob-bar, .ob[data-step="0"] .ob-top .step, .ob[data-step="5"] .ob-bar, .ob[data-step="5"] .ob-top .step { visibility: hidden; }

.ob-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 900px) { .ob-grid.has-plan { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 40px; } }

.ob .panel { display: none; }
.ob .panel.active { display: block; animation: ob-in .45s var(--ease-out) both; }
.ob[data-dir="back"] .panel.active { animation-name: ob-in-back; }
@keyframes ob-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes ob-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

.ob .eyebrow { display: block; font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--claret); margin-bottom: 10px; }
html[data-theme="dark"] .ob .eyebrow { color: var(--gold, #FBE39D); }
.ob h1 { font: 800 clamp(28px, 5.2vw, 44px)/1.08 var(--sans); letter-spacing: -.02em; margin: 0 0 12px; color: var(--ink-1); text-wrap: balance; }
.ob h1 em { font-style: normal; color: var(--claret); }
html[data-theme="dark"] .ob h1 em { color: var(--gold, #FBE39D); }
.ob h1:focus { outline: none; }
.ob .lead { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 48ch; }
.ob h2.ob-sub { font: 700 18px/1.3 var(--sans); margin: 30px 0 0; color: var(--ink-1); }

/* ---------- welcome: the loop, played once ---------- */
.ob-welcome { display: grid; gap: 30px; }
@media (min-width: 900px) { .ob-welcome { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; } }
.loop { position: relative; padding: 20px; border-radius: 26px; background: var(--claret-deep, #241A12); color: #F7F3EA; box-shadow: 0 24px 50px -28px rgba(43, 13, 27, .7); overflow: hidden; }
html[data-theme="dark"] .loop { background: var(--oat); border: 1px solid var(--hairline); }
.loop-head { display: flex; justify-content: space-between; font: 700 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #D6C8B4; margin-bottom: 14px; }
.loop-who { font: 700 17px/1.2 var(--sans); margin-bottom: 12px; }
.lb { max-width: 88%; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.4; margin-bottom: 10px; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.lb.ai { background: rgba(246, 236, 230, .1); border-bottom-left-radius: 6px; }
.lb.me { margin-left: auto; background: #F8E4A8; color: #2F2219; border-bottom-right-radius: 6px; }
.lb.on { opacity: 1; transform: none; }
.lb.struck { opacity: .45; text-decoration: line-through; text-decoration-color: rgba(42, 18, 32, .5); }
.loop-meter { display: grid; grid-template-columns: 64px 1fr 34px; align-items: center; gap: 10px; font: 600 13px/1 var(--sans); color: #E7D6DF; margin: 8px 0 12px; }
.loop-meter .trk { height: 8px; border-radius: 999px; background: rgba(246, 236, 230, .14); overflow: hidden; }
.loop-meter .trk i { display: block; height: 100%; width: 20%; border-radius: 999px; background: #F2A18D; transition: width .9s var(--ease-out), background-color .6s; }
.loop-meter .trk i.calm { background: #8FD1C7; }
.loop-meter b { text-align: right; font-variant-numeric: tabular-nums; }
.loop-flag { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(242, 193, 78, .14); color: #F8E4A8; font-size: 14px; line-height: 1.4; margin-bottom: 10px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease-out); }
.loop-flag.on { opacity: 1; transform: none; }
.loop-flag.good { background: rgba(143, 209, 199, .16); color: #CFEDE8; }
.loop-rewind { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 8px 14px; border-radius: 999px; background: #FBE39D; color: #2F2219; font: 700 14px/1 var(--sans); opacity: 0; transform: scale(.9); transition: opacity .35s, transform .45s var(--ease-spring); }
.loop-rewind svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.loop-rewind.on { opacity: 1; transform: none; }
.loop-rewind.spin svg { animation: ob-spin .7s var(--ease-out) 1; }
@keyframes ob-spin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
.loop-replay { background: none; border: 0; padding: 8px 0 0; color: #D6C8B4; font: 600 13px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 8px; }
html[data-theme="dark"] .lb.ai { background: rgba(246, 236, 230, .08); }

.ob-diff { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.ob-diff li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.ob-diff .ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--oat); color: var(--claret); }
html[data-theme="dark"] .ob-diff .ic { background: var(--card); color: var(--gold, #FBE39D); }
.ob-diff .ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ob-diff b { display: block; font: 700 16px/1.3 var(--sans); color: var(--ink-1); }
.ob-diff span { display: block; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); margin-top: 2px; }

/* ---------- picks ---------- */
.ob .choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; border: 0; }
@media (min-width: 560px) { .ob .choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob .choice { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 14px 16px; text-align: left; border: 1.5px solid var(--hairline); border-radius: 18px; background: var(--card); color: var(--ink-1); cursor: pointer; transition: border-color .18s, background-color .18s, transform .14s var(--ease-out), box-shadow .2s; }
.ob .choice:hover { border-color: var(--ink-3); }
.ob .choice:active { transform: scale(.985); }
.ob .choice strong { display: block; font: 700 16px/1.3 var(--sans); }
.ob .choice span { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-2); margin-top: 2px; }
.ob .choice::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--hairline); background: transparent; transition: background-color .2s, border-color .2s, transform .3s var(--ease-spring); }
.ob .choice[aria-pressed="true"] { border-color: var(--claret); background: color-mix(in srgb, var(--claret) 5%, var(--card)); box-shadow: 0 8px 20px -14px rgba(79, 22, 48, .55); }
.ob .choice[aria-pressed="true"]::after { border-color: var(--claret); background: var(--claret); box-shadow: inset 0 0 0 5px var(--card); transform: scale(1.06); }
html[data-theme="dark"] .ob .choice[aria-pressed="true"] { border-color: var(--gold, #FBE39D); background: rgba(232, 194, 122, .08); }
html[data-theme="dark"] .ob .choice[aria-pressed="true"]::after { border-color: var(--gold, #FBE39D); background: var(--gold, #FBE39D); }

/* the reply under the picks: Luwy answers the choice you just made */
.ob-reply { display: flex; gap: 10px; align-items: flex-start; min-height: 48px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: var(--oat); color: var(--ink-1); font-size: 15px; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .35s var(--ease-out); }
.ob-reply.on { opacity: 1; transform: none; }
.ob-reply .dot { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--claret); color: #F7F3EA; font: 800 13px/1 var(--sans); }
html[data-theme="dark"] .ob-reply { background: var(--card); }
html[data-theme="dark"] .ob-reply .dot { background: var(--gold, #FBE39D); color: #2F2219; }

/* the plan that builds as you pick */
.plan-card { position: sticky; top: 18px; padding: 20px; border-radius: 22px; border: 1px solid var(--hairline); background: var(--card); }
.plan-card h3 { margin: 0 0 4px; font: 800 18px/1.25 var(--sans); }
.plan-card .pc-sub { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.plan-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan-card li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--stone); font-size: 14.5px; line-height: 1.35; animation: ob-pop .45s var(--ease-spring) both; }
html[data-theme="dark"] .plan-card li { background: var(--stone); }
.plan-card li i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 0 4px rgba(242, 193, 78, .22); }
.plan-card li.scene i { background: var(--claret); box-shadow: 0 0 0 4px rgba(79, 22, 48, .14); }
html[data-theme="dark"] .plan-card li.scene i { background: var(--gold, #FBE39D); }
.plan-card .pc-empty { font-size: 14px; color: var(--ink-3); padding: 10px 0; }
@keyframes ob-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* intensity preview */
.ob-meter { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--oat); }
html[data-theme="dark"] .ob-meter { background: var(--card); }
.ob-meter .row { display: flex; justify-content: space-between; font: 600 13px/1 var(--sans); color: var(--ink-2); margin-bottom: 10px; }
.ob-meter .trk { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--claret) 10%, transparent); overflow: hidden; }
.ob-meter .trk i { display: block; height: 100%; width: 45%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--honey) 60%, var(--brick)); background-size: 300px 100%; transition: width .8s var(--ease-spring); }

/* final step + ready moment */
.ob .lbl { display: grid; gap: 8px; margin-top: 22px; font: 600 15px/1.3 var(--sans); }
.ob .field { height: 50px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--hairline); background: var(--card); color: var(--ink-1); font-size: 17px; }
.ob .consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 15px; line-height: 1.45; cursor: pointer; }
.ob .consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--claret); flex: none; }
.ready { text-align: center; padding: 20px 0; }
.ready-ring { width: 120px; height: 120px; margin: 4px auto 18px; position: relative; }
.ready-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ready-ring .trk { fill: none; stroke: var(--oat); stroke-width: 8; }
.ready-ring .val { fill: none; stroke: var(--honey); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.2s var(--ease-out); }
.ready-ring.full .val { stroke-dashoffset: 0; }
.ready-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 30px/1 var(--sans); color: var(--claret); }
html[data-theme="dark"] .ready-ring b { color: var(--gold, #FBE39D); }
.ready h1 { margin-top: 0; }
.ready .lead { margin: 0 auto; }
.ready-list { list-style: none; padding: 0; margin: 22px auto 0; max-width: 440px; display: grid; gap: 8px; text-align: left; }
.ready-list li { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--hairline); font-size: 15px; animation: ob-pop .45s var(--ease-spring) both; }
.ready-list li b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }

/* nav: pinned to the bottom on phones so the next step is always in reach */
.ob .error { min-height: 22px; margin-top: 14px; color: var(--brick); font-size: 14.5px; }
.ob-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; }
.ob-nav .btn { min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 16px; }
.ob-nav .btn.primary { min-width: 180px; }
.ob-nav .hint { font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 899px) {
  .ob-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--stone) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--hairline); }
  .ob-nav .btn.primary { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ob .panel.active, .plan-card li, .ready-list li { animation: none; }
  .lb, .loop-flag, .loop-rewind, .ob-reply { transition: none; }
}
body.reduce-motion .ob .panel.active, body.reduce-motion .plan-card li { animation: none; }

/* welcome layout: intro, then the demo, then the list on phones; intro and list left, demo right on wide screens */
.ob-welcome { grid-template-areas: "intro" "loop" "list"; }
.ob-w-intro { grid-area: intro; } .loop { grid-area: loop; } .ob-w-list { grid-area: list; }
.ob-w-list .ob-diff { margin-top: 0; }
@media (min-width: 900px) {
  .ob-welcome { grid-template-areas: "intro loop" "list loop"; grid-template-rows: auto 1fr; row-gap: 26px; }
}
.loop-flag.good { background: rgba(143, 209, 199, .22); color: #DDF3EF; }

/* our own Back button is in the bottom bar, so the site's floating back pill would only overlap the logo */
body:has(.ob) .lwy-back.floating { display: none !important; }

/* phones: Luwy's reply floats just above the bottom bar so it's seen right after a tap */
@media (max-width: 640px) {
}


/* ---------- phones and tablets: the plan is a chip above the bottom bar that counts up, and opens as a sheet ---------- */
.plan-chip, .plan-back, .pc-close { display: none; }
@media (max-width: 899px) {
  .plan-chip { position: fixed; left: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 22; display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 8px 0 14px; border-radius: 999px; border: 1.5px solid var(--hairline); background: var(--card); color: var(--ink-1); font: 700 14.5px/1 var(--sans); box-shadow: 0 12px 26px -14px rgba(43, 13, 27, .5); cursor: pointer; transition: opacity .2s, transform .2s var(--ease-spring); }
  .plan-chip[hidden] { display: none; }
  .plan-chip svg { width: 18px; height: 18px; fill: none; stroke: var(--claret); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html[data-theme="dark"] .plan-chip svg { stroke: var(--gold, #FBE39D); }
  .plan-chip b { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--claret); color: #fff; font: 800 13.5px/1 var(--sans); font-variant-numeric: tabular-nums; }
  html[data-theme="dark"] .plan-chip b { background: var(--gold, #FBE39D); color: #241A12; }
  .plan-chip.empty { color: var(--ink-2); font-weight: 600; }
  .plan-chip.empty b { background: var(--oat); color: var(--ink-3); }
  .plan-chip.bump { animation: chip-bump .55s var(--ease-spring); }
  @keyframes chip-bump { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
  body.plan-open .plan-chip { opacity: 0; pointer-events: none; transform: translateY(8px); }

  .plan-card { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 31; max-height: min(58vh, 460px); overflow: auto; overscroll-behavior: contain; padding: 20px 18px 18px; box-shadow: 0 -10px 40px -12px rgba(43, 13, 27, .55); opacity: 0; visibility: hidden; transform: translateY(18px) scale(.98); transition: opacity .22s ease, transform .3s var(--ease-spring), visibility 0s linear .3s; }
  body.plan-open .plan-card { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .plan-back { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(43, 13, 27, .4); opacity: 1; }
  .plan-back[hidden] { display: none; }
  .pc-close { display: block; position: absolute; top: 12px; right: 12px; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--hairline); background: transparent; color: var(--ink-2); font: 600 14px/1 var(--sans); cursor: pointer; }
  .plan-card h3 { padding-right: 84px; }
}
@media (prefers-reduced-motion: reduce) { .plan-chip.bump, .plan-card { animation: none; transition: none; } }
body.reduce-motion .plan-chip.bump { animation: none; }

/* ---------- progress stamps: the first one is already done when you arrive ---------- */
.ob-stamps { list-style: none; display: flex; gap: 6px; margin: -16px 0 24px; padding: 0; font: 600 11px/1.2 var(--sans); color: var(--ink-3); overflow-x: auto; scrollbar-width: none; }
.ob-stamps::-webkit-scrollbar { display: none; }
.ob-stamps li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 4px 9px 4px 6px; border-radius: 999px; background: var(--oat); }
.ob-stamps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; flex: none; }
.ob-stamps li.done { color: var(--claret); background: color-mix(in srgb, var(--claret) 10%, transparent); }
.ob-stamps li.done::before { border: 0; background: var(--claret) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23F3F0EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.ob-stamps li.now { color: var(--ink-1); box-shadow: inset 0 0 0 1.5px var(--ink-1); }
html[data-theme="dark"] .ob-stamps li.done { color: var(--gold, #FBE39D); }
html[data-theme="dark"] .ob-stamps li.done::before { background-color: var(--gold, #FBE39D); }
.ob[data-step="0"] .ob-stamps, .ob[data-step="5"] .ob-stamps { display: none; }
.ob-default { margin: 10px 0 0; font: 500 14px/1.45 var(--sans); color: var(--teal); }
html[data-theme="dark"] .ob-default { color: var(--teal); }

/* ---------- your card ---------- */
.card-build { display: grid; gap: 22px; margin-top: 22px; }
@media (min-width: 720px) { .card-build { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; gap: 32px; } .card-build .pcard { position: sticky; top: 16px; } }
.card-opts { display: grid; gap: 16px; min-width: 0; }
.card-opts .lbl { display: grid; gap: 6px; font: 600 14px/1.3 var(--sans); color: var(--ink-1); }
.card-opts .lbl .small { font-weight: 400; color: var(--ink-2); }
.opt-group { display: grid; gap: 8px; }
.opt-group .chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- the ready moment: your card, saved ---------- */
.ready .pcard.big { width: min(360px, 100%); margin: 0 auto 22px; animation: card-saved .9s var(--ease-spring) both; }
@media (prefers-reduced-motion: reduce) { .ready .pcard.big { animation: none; } .pcard { transition: none; } }
.card-build > *, .ready .pcard { min-width: 0; }
.ob h1:focus-visible, .ob h1[tabindex="-1"]:focus { outline: none !important; }
@media (max-width: 480px) {
  .ob-stamps li:not(.now) { font-size: 0; gap: 0; padding: 4px; }
  .ob-stamps { gap: 4px; }
}
.opt-group .chip { font: 600 14px/1.2 var(--sans); padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--hairline); background: var(--card, #fff); color: var(--ink-1); cursor: pointer; min-height: 40px; transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); }
.opt-group .chip:hover { border-color: var(--ink-2); }
.opt-group .chip.on { border-color: var(--claret); background: color-mix(in srgb, var(--claret) 9%, var(--card, #fff)); color: var(--claret); }
.opt-group .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html[data-theme="dark"] .opt-group .chip.on { border-color: var(--gold, #FBE39D); color: var(--ink-1); background: color-mix(in srgb, var(--gold, #FBE39D) 14%, var(--card)); }
.ob-signin { font: 500 14px/1.3 var(--sans); color: var(--ink-2); text-decoration: none; }
.ob-signin b { color: var(--claret); font-weight: 700; }
.ob-signin[hidden] { display: none; }
html[data-theme="dark"] .ob-signin b { color: var(--gold, #FBE39D); }
@media (max-width: 420px) { .ob-signin { font-size: 13px; } }
/* Phones: the card stays pinned (a little smaller) while you pick a title and colour, so every tap shows on it. */
@media (max-width: 719px) { .card-build .pcard { position: sticky; top: 8px; z-index: 3; aspect-ratio: auto; min-height: 150px; box-shadow: 0 10px 24px -12px rgba(43,13,27,.45); } }

/* Card choices scroll sideways, like the rest of the app, so every title is reachable without a wall of chips */
#titleChips, #styleChips { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px 6px; scroll-snap-type: x proximity; }
#titleChips::-webkit-scrollbar, #styleChips::-webkit-scrollbar { display: none; }
#titleChips > *, #styleChips > * { flex: none; white-space: nowrap; scroll-snap-align: start; }

/* Onboarding polish: remove oversized enclosing panel outlines; keep structure open and editorial. */
body:has(.ob) .ob .panel,
body:has(.ob) .ob .panel.active,
body:has(.ob) .ob .ob-grid,
body:has(.ob) .ob .ob-welcome,
body:has(.ob) .ob .card-build {
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
}
body:has(.ob) .ob .panel,
body:has(.ob) .ob .panel.active {
  border-radius: 0 !important; background: transparent !important;
}
body:has(.ob) .ob .loop,
body:has(.ob) .ob .pcard,
body:has(.ob) .ob .plan-card { border-radius: 22px !important; }
body:has(.ob) .ob .pcard-mark {
  display: inline-flex !important; align-items: center !important; justify-content: flex-start !important;
  width: 62px !important; height: 26px !important; overflow: visible !important;
  font-size: 0 !important; line-height: 1 !important;
}
body:has(.ob) .ob .pcard-mark img {
  display: block !important; width: 62px !important; height: 26px !important;
  object-fit: contain !important; object-position: left center !important;
}


/* The left-side answer choices and right-side plan rows share one geometry. */
.ob .choice, .ob .plan-card li { box-sizing:border-box; padding:10px 12px !important; border-radius:14px !important; }
.ob .choice:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.ob .pcard[data-style="glow"] .pcard-mark img,
.ob .pcard[data-style="honey"] .pcard-mark img,
.ob .pcard[data-style="teal"] .pcard-mark img,
.ob .pcard[data-style="brick"] .pcard-mark img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(21%) saturate(1240%) hue-rotate(337deg) brightness(91%) contrast(91%);
}
.ob .pcard[data-style="claret"] .pcard-mark img,
.ob .pcard[data-style="ink"] .pcard-mark img { filter:none; }


/* Onboarding uses the same canonical palette as the practice card and signed-in app. */
body:has(.ob) {
  --paper:#F7F3EA;
  --paper-2:#F7F3EA;
  --paper-3:#D7DEEB;
  --ink:#2F2219;
  --cocoa:#604531;
  --cocoa-hover:#604531;
  --cocoa-deep:#2F2219;
  --mug:#FBE39D;
  --sprinkle:#D7DEEB;
  --good:#C0DDD9;
  --alert:#604531;
  --alert-bg:#FBE39D;
  --claret:#604531;
  --claret-deep:#2F2219;
  --oat:#F7F3EA;
  --honey:#FBE39D;
  --gold:#FBE39D;
  --teal:#C0DDD9;
  --seafoam:#C0DDD9;
  --seafoam-deep:#C0DDD9;
  --snow:#D7DEEB;
  --butter:#FBE39D;
  --progress:#C0DDD9;
  --brick:#D7DEEB;
  --stone:#F7F3EA;
  --hairline:color-mix(in srgb,#604531 22%,#F7F3EA);
  --focus:#604531;
}
body:has(.ob) .ob .choice[aria-pressed="true"] {
  border-color:#604531!important;
  background:#F7F3EA!important;
  color:#2F2219!important;
}
body:has(.ob) .ob .choice[aria-pressed="true"]::after {
  border-color:#604531!important;
  background:#604531!important;
  box-shadow:inset 0 0 0 5px #F7F3EA!important;
}
body:has(.ob) .ob .ob-bar i { background:#604531!important; }
body:has(.ob) .ob .ob-meter .trk i { background:#C0DDD9!important; }
body:has(.ob) .ob .ob-stamps li.done { color:#604531!important; background:#D7DEEB!important; }
body:has(.ob) .ob .ob-stamps li.done::before { background-color:#604531!important; }


/* Use a restrained card radius on onboarding choices; keep pill styling only for compact chips. */
body.lwy-art-directed .ob button.choice,
body.lwy-art-directed .ob .choice {
  border-radius: 12px !important;
}
body.lwy-art-directed .ob .plan-card,
body.lwy-art-directed .ob .loop {
  border-radius: 16px !important;
}
body.lwy-art-directed .ob .plan-card li,
body.lwy-art-directed .ob .ready-list li,
body.lwy-art-directed .ob .ob-reply {
  border-radius: 12px !important;
}
body.lwy-art-directed .ob .ob-nav .btn {
  border-radius: 12px !important;
}
body.lwy-art-directed .ob .plan-chip {
  border-radius: 14px !important;
}