/* Bilby Bunch — onboarding.css (in-app first-run: welcome, checklist,
   empty states, celebration). From the Bilby Bunch Onboarding design handoff.
   Self-contained: defines the brand tokens the design's classes reference so it
   layers cleanly on top of styles.css. */

:root{
  --euc-900:#16332c; --euc-800:#1c3f37; --euc-700:#235247; --euc-600:#2e6e5e;
  --euc-500:#3a8473; --euc-300:#9cc8bc; --euc-100:#dbeee7; --euc-50:#eef7f3;
  --ochre-700:#a86c22; --ochre-500:#e3a24a; --ochre-300:#f0c684;
  --ochre-100:#f9ead0; --ochre-50:#fcf4e4;
  --clay-500:#c96f4c;
  --ink-faint:#7b877f; --card-2:#fdfbf6; --border:#e7e2d5; --border-strong:#d8d2c2;
  --r-md:18px; --r-lg:26px; --r-xl:36px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(33,51,46,.06), 0 2px 6px rgba(33,51,46,.05);
  --sh-md:0 4px 10px rgba(33,51,46,.07), 0 14px 30px rgba(33,51,46,.08);
}

/* ---------- Welcome band ---------- */
.welcome-band{display:flex;align-items:center;gap:26px;background:linear-gradient(120deg,var(--euc-700),var(--euc-600));
  color:#eaf3ef;border-radius:var(--r-xl);padding:30px 34px;margin-bottom:24px;position:relative;overflow:hidden;}
.welcome-band .wb-copy{flex:1;min-width:0;}
.welcome-band .wb-eye{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ochre-300);margin-bottom:8px;}
.welcome-band h1{color:#fff;font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0 0 10px;line-height:1.1;}
.welcome-band p{color:#d3e6df;font-size:1.04rem;max-width:560px;margin:0;}
.welcome-band .wb-time{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:rgba(255,255,255,.12);
  padding:.45em .9em;border-radius:var(--r-pill);font-size:.88rem;font-weight:600;color:#fff;}
.welcome-band .wb-art{flex:none;width:150px;}
@media(max-width:680px){
  .welcome-band{flex-direction:column;text-align:center;padding:26px 22px;gap:14px;}
  .welcome-band .wb-art{width:120px;order:-1;}
  .welcome-band p{margin-inline:auto;}
}

/* ---------- Setup checklist card ---------- */
.setup-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-md);
  overflow:hidden;margin-bottom:24px;}
.setup-card .sc-top{display:flex;align-items:center;gap:16px;padding:22px 26px;
  background:linear-gradient(180deg,var(--ochre-50),#fff);border-bottom:1px solid var(--border);}
.sc-top .sc-ic{width:46px;height:46px;border-radius:13px;background:var(--ochre-500);display:grid;place-items:center;flex:none;}
.sc-top .sc-ic svg{width:30px;height:30px;}
.sc-top .sc-h{flex:1;min-width:0;}
.sc-top .sc-h h2{font-size:1.3rem;font-family:var(--font-display);font-weight:700;margin:0 0 3px;}
.sc-top .sc-h p{color:var(--ink-soft);font-size:.94rem;margin:0;}
.sc-top .sc-collapse{background:none;border:1px solid var(--border-strong);border-radius:9px;width:36px;height:36px;
  cursor:pointer;color:var(--ink-soft);display:grid;place-items:center;flex:none;font-size:1rem;}
.sc-progress{display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid var(--border);}
.sc-progress .pct{font-weight:800;font-size:.92rem;color:var(--euc-700);white-space:nowrap;font-family:var(--font-display);}
.sc-bar{display:flex;gap:6px;flex:1;}
.sc-bar i{height:8px;flex:1;border-radius:4px;background:var(--ochre-100);transition:background .3s;}
.sc-bar i.done{background:var(--euc-600);}

.setup-rows{padding:8px 14px 14px;list-style:none;margin:0;}
.setup-row{display:flex;align-items:center;gap:16px;padding:16px 12px;border-radius:var(--r-md);}
.setup-row+.setup-row{border-top:1px solid var(--border);}
.setup-row .sr-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;
  background:var(--euc-50);border:1px solid var(--euc-100);}
.setup-row .sr-body{flex:1;min-width:0;}
.setup-row .sr-title{font-weight:700;font-size:1.06rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.setup-row .sr-pay{color:var(--ink-soft);font-size:.92rem;margin-top:3px;}
.setup-row .sr-action{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.setup-row .sr-num{width:26px;height:26px;border-radius:50%;background:var(--euc-100);color:var(--euc-700);
  display:grid;place-items:center;font-weight:800;font-size:.82rem;flex:none;}
.sr-escapes{display:flex;gap:12px;}
.sr-escapes button{background:none;border:0;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;padding:0;}
.sr-escapes .defer{color:var(--ochre-700);}
.sr-escapes .skip{color:var(--ink-faint);}
.sr-escapes button:hover{text-decoration:underline;text-underline-offset:2px;}

.setup-row.done .sr-ic{background:var(--euc-600);border-color:var(--euc-600);color:#fff;}
.setup-row.done .sr-title{color:var(--ink-soft);}
.setup-row.done .sr-num{background:var(--euc-600);color:#fff;}
.tick-chip{display:inline-flex;align-items:center;gap:.4em;font-size:.82rem;font-weight:800;color:var(--euc-700);}
.setup-row.deferred .sr-ic{background:var(--card-2);border-style:dashed;border-color:var(--border-strong);filter:grayscale(.3);}
.defer-chip{font-size:.74rem;font-weight:700;color:var(--ochre-700);background:var(--ochre-50);border:1px solid var(--ochre-100);
  padding:.25em .6em;border-radius:var(--r-pill);}

/* collapsed slim bar */
.setup-slim{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:16px 22px;margin-bottom:24px;}
.setup-slim .ss-ic{width:40px;height:40px;border-radius:11px;background:var(--ochre-500);display:grid;place-items:center;flex:none;color:#16332c;}
.setup-slim .ss-ic svg{width:24px;height:24px;}
.setup-slim .ss-b{flex:1;min-width:0;}
.setup-slim .ss-b b{font-size:1.04rem;}
.setup-slim .ss-b .sc-bar{margin-top:8px;max-width:260px;}
.setup-slim .ss-pct{font-weight:800;color:var(--euc-700);font-family:var(--font-display);}

@media(max-width:760px){
  .sc-top{padding:18px 18px;}
  .setup-row{flex-wrap:wrap;padding:14px 8px;gap:12px;}
  .setup-row .sr-body{flex-basis:calc(100% - 120px);}
  .setup-row .sr-action{width:100%;align-items:stretch;}
}

/* ---------- Smart empty states ---------- */
.empty-state{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-sm);
  padding:48px 40px;text-align:center;}
.empty-state .es-art{width:150px;margin:0 auto 22px;}
.empty-state h2{font-size:1.6rem;font-family:var(--font-display);margin:0 0 10px;}
.empty-state p{color:var(--ink-soft);font-size:1.04rem;max-width:460px;margin:0 auto 24px;}
.empty-state .es-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.empty-state .es-hint{margin-top:20px;font-size:.88rem;color:var(--ink-faint);}
@media(max-width:760px){.empty-state{padding:36px 22px;}}

/* ---------- Celebration ---------- */
.celebrate{position:relative;text-align:center;max-width:660px;margin-inline:auto;padding-top:18px;}
.celebrate .cel-art{width:160px;margin:0 auto 18px;position:relative;z-index:2;}
.celebrate .cel-eye{font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ochre-700);margin-bottom:10px;}
.celebrate h1{font-family:var(--font-display);font-size:clamp(2rem,4.4vw,3rem);margin:0 0 14px;line-height:1.1;}
.celebrate .cel-text{color:var(--ink-soft);font-size:1.1rem;max-width:480px;margin:0 auto 28px;}
.cel-next{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:24px;text-align:left;}
.cel-next .cn{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm);}
.cel-next .cn .cn-ic{font-size:1.5rem;margin-bottom:10px;}
.cel-next .cn b{display:block;font-size:1rem;margin-bottom:4px;}
.cel-next .cn span{color:var(--ink-soft);font-size:.9rem;}
.cel-deeper{background:var(--euc-50);border:1px solid var(--euc-100);border-radius:var(--r-lg);padding:20px 24px;
  display:flex;align-items:center;gap:16px;text-align:left;margin-bottom:26px;}
.cel-deeper .cd-art{width:56px;flex:none;}
.cel-deeper b{display:block;}
.cel-deeper span{color:var(--ink-soft);font-size:.94rem;}
@media(max-width:680px){.cel-next{grid-template-columns:1fr;}}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.confetti i{position:absolute;top:-20px;width:9px;height:9px;border-radius:2px;opacity:0;}
@media(prefers-reduced-motion:no-preference){
  .confetti i{animation:cdrop 2.6s ease-in forwards;}
}
@keyframes cdrop{0%{opacity:0;transform:translateY(-30px) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(420px) rotate(320deg)}}

/* ---------- Setup-pill (nav re-entry while onboarding incomplete) ---------- */
.setup-pill{display:inline-flex;align-items:center;gap:7px;background:var(--ochre-50);border:1px solid var(--ochre-100, #f9ead0);
  color:var(--ochre-700);font-weight:700;font-size:.85rem;padding:.4em .85em;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;}
.setup-pill:hover{background:#f9ead0;}
.setup-pill .mini-bar{display:flex;gap:3px;}
.setup-pill .mini-bar i{width:14px;height:5px;border-radius:3px;background:var(--ochre-300);}
.setup-pill .mini-bar i.f{background:var(--euc-600);}

/* ---------- Step screens ---------- */
.step-screen{max-width:680px;margin-inline:auto;}
.ss-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;}
.ss-dots{display:flex;align-items:center;gap:8px;}
.ss-dots i{width:9px;height:9px;border-radius:50%;background:var(--border-strong);}
.ss-dots i.on{background:var(--euc-600);width:26px;border-radius:5px;}
.ss-dots i.done{background:var(--euc-300);}
.ss-step-lbl{font-weight:700;font-size:.86rem;color:var(--ink-faint);white-space:nowrap;}
.ss-close{background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:1.4rem;line-height:1;text-decoration:none;}
.step-hero{display:flex;align-items:center;gap:18px;margin-bottom:8px;}
.step-hero .sh-art{width:84px;flex:none;}
.step-hero h1{font-family:var(--font-display);font-size:clamp(1.7rem,3.4vw,2.3rem);margin:0;}
.step-pay{color:var(--ink-soft);font-size:1.06rem;margin:6px 0 22px;}
.prefill-note{display:flex;align-items:center;gap:10px;background:var(--euc-50);border:1px solid var(--euc-100);
  border-radius:var(--r-md);padding:13px 16px;color:var(--euc-800);font-size:.94rem;font-weight:600;margin-bottom:22px;}
.prefill-note svg{flex:none;}

.slot{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--card-2);margin-bottom:12px;}
.slot .slot-av{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.84rem;color:#fff;background:var(--euc-500);}
.slot .slot-b{flex:1;min-width:0;}
.slot .slot-role{font-weight:700;font-size:1rem;}
.slot .slot-input{margin-top:6px;width:100%;border:1.5px solid var(--border-strong);border-radius:9px;padding:.55em .8em;font-family:inherit;font-size:.94rem;background:#fff;}
.slot .slot-input:focus{outline:none;border-color:var(--euc-500);box-shadow:0 0 0 3px rgba(46,110,94,.1);}
.slot.filled{background:var(--euc-50);border-color:var(--euc-100);}
.slot.filled .slot-av{background:var(--ochre-500);color:var(--euc-900);}

.coowner{display:flex;gap:14px;align-items:flex-start;background:var(--euc-50);border:1px solid var(--euc-100);
  border-radius:var(--r-md);padding:16px 18px;margin:6px 0 14px;}
.coowner .co-ic{width:42px;height:42px;flex:none;border-radius:12px;background:#fff;border:1px solid var(--euc-100);display:grid;place-items:center;font-size:1.25rem;}
.coowner .co-b{flex:1;min-width:0;}
.coowner .co-t{font-weight:700;font-size:1.04rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.rec-chip{font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--euc-700);
  background:var(--euc-100);border-radius:var(--r-pill);padding:.24em .65em;}
.coowner p{color:var(--ink-soft);font-size:.9rem;margin:5px 0 11px;}
.co-sel{max-width:360px;}

.confirm-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-top:1px solid var(--border);}
.confirm-row:first-of-type{border-top:0;}
.confirm-row .cr-b b{font-size:1rem;}
.confirm-row .cr-b span{display:block;color:var(--ink-faint);font-size:.88rem;margin-top:2px;}
.confirm-row .cr-val{font-weight:800;color:var(--euc-700);font-family:var(--font-display);font-size:1.1rem;white-space:nowrap;margin-left:auto;}
.confirm-row .cr-edit{border:1px solid var(--border-strong);border-radius:8px;padding:.4em .75em;font-size:.82rem;font-weight:700;color:var(--ink-soft);background:#fff;text-decoration:none;flex:none;}
.confirm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.agenda-preview{list-style:none;counter-reset:ap;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;}
.agenda-preview li{counter-increment:ap;display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--card-2);border:1px solid var(--border);border-radius:10px;font-size:.94rem;}
.agenda-preview li::before{content:counter(ap);width:22px;height:22px;flex:none;border-radius:50%;background:var(--euc-100);color:var(--euc-700);display:grid;place-items:center;font-weight:800;font-size:.76rem;}

.define{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;}
.def-card{background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;}
.def-card b{display:block;font-size:1.02rem;margin-bottom:6px;}
.def-card span{color:var(--ink-soft);font-size:.9rem;line-height:1.5;}
.def-card.is-member{background:var(--euc-50);border-color:var(--euc-100);}
.field-label{display:block;font-weight:700;font-size:.98rem;margin:0 0 12px;}
@media(max-width:640px){.define{grid-template-columns:1fr;}}

.step-foot{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap;}
.step-foot .grow{flex:1;}
.step-link{background:none;border:0;font-family:inherit;font-weight:700;font-size:.94rem;cursor:pointer;padding:.4em 0;white-space:nowrap;}
.step-link.defer{color:var(--ochre-700);}
.step-link.skip{color:var(--ink-faint);}
.step-link:hover{text-decoration:underline;text-underline-offset:3px;}
@media(max-width:760px){.step-hero .sh-art{width:64px;}}

/* ---------- Editable standing-agenda (onboarding settings step) ---------- */
.agenda-edit{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:9px;}
.agenda-edit li{display:flex;align-items:center;gap:11px;}
.ae-auto{padding:11px 15px;background:var(--card-2);border:1px dashed var(--border-strong);border-radius:12px;
  color:var(--ink-faint);font-size:.94rem;font-weight:600;}
.ae-auto .ae-tag{margin-left:auto;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-faint);background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:.25em .65em;}
.ae-num{width:27px;height:27px;flex:none;border-radius:50%;background:var(--euc-100);color:var(--euc-700);
  display:grid;place-items:center;font-weight:800;font-size:.78rem;font-family:var(--font-display);}
.ae-row .inp{flex:1;}
.ae-del{flex:none;width:36px;height:36px;border:1px solid var(--border-strong);border-radius:10px;background:#fff;
  color:var(--ink-faint);cursor:pointer;font-size:1.2rem;line-height:1;transition:border-color .14s,color .14s;}
.ae-del:hover{border-color:var(--clay-500);color:var(--clay-500);}
.ae-add{margin-top:2px;}