/* ============================================================
   Apple-style theme layer.
   Restyles the existing markup — one accent, hairlines instead of
   heavy borders, SF typography, filled fields, inset-group cards.
   Colour is kept only where it carries meaning (up / down).
   ============================================================ */
:root{
  --ink:#1C1C1E;            /* label            */
  --ink-2:#6C6C70;          /* secondary label  */
  --ink-3:#8E8E93;          /* tertiary label   */
  --hair:rgba(60,60,67,.13);/* separator        */
  --fill:rgba(118,118,128,.10);
  --surface:#FFFFFF;
  --grouped:#F4F1EC;        /* warm take on systemGroupedBackground */
  --tint:#0F9E92;           /* brand teal, darkened for contrast    */
  --pos:#1E8E3E;
  --neg:#C62F2F;
  --radius:14px;
}

body, #app{
  font-family:"Hafferxh Trial","Haffer Trial",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{background:var(--grouped)}
#app{background:var(--grouped)}

/* ---------- typography ---------- */
#app h1{letter-spacing:-.022em;font-weight:700;color:var(--ink)}
#app h2,#app h3{letter-spacing:-.016em;color:var(--ink)}
#app .tnum{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- surfaces: flat, hairline, no drop shadows ---------- */
#app .shadow-sm,#app .shadow,#app .shadow-md,#app .shadow-lg{box-shadow:none!important}
#app .rounded-xl,#app .rounded-2xl{border-radius:var(--radius)!important}
#app .bg-white{background:var(--surface)!important}
#app .border,#app .border-t,#app .border-b{border-color:var(--hair)!important}

/* ---------- metric cards -> one calm family ---------- */
#app div:has(> button[data-metric]){
  border:.5px solid var(--hair)!important;
  background:var(--surface)!important;
  border-radius:var(--radius)!important;
  box-shadow:none!important;
}
/* icon tile: neutral chip, tinted glyph */
#app [data-metric] > div > div > div.rounded-lg{
  background:var(--fill)!important;
  box-shadow:none!important;
  --tw-ring-color:transparent!important;
  border-radius:9px!important;
}
#app [data-metric] svg{color:var(--ink-2)!important}
/* label + value */
#app [data-metric] p.text-gray-600{color:var(--ink-2)!important;font-weight:400!important;letter-spacing:-.006em}
#app [data-metric] p.font-bold{color:var(--ink)!important;letter-spacing:-.022em}
/* meaning keeps its colour */
#app [data-metric] p.font-bold.text-green-700{color:var(--pos)!important}
#app [data-metric] p.font-bold.text-red-700{color:var(--neg)!important}
#app [data-metric] p.text-green-700 ~ *,#app [data-metric] p.text-red-700 ~ *{}

/* ---------- fields: iOS filled, not outlined ---------- */
#app input[type="text"],#app input[type="tel"],#app input[type="number"],
#app input[type="email"],#app input[type="date"],#app select,#app textarea{
  background:var(--fill)!important;
  border:0!important;
  border-radius:10px!important;
  box-shadow:none!important;
  color:var(--ink)!important;
  min-height:44px;
  transition:box-shadow .15s ease, background .15s ease;
}
#app input:focus,#app select:focus,#app textarea:focus{
  outline:none!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(15,158,146,.22)!important;
}
#app input::placeholder,#app textarea::placeholder{color:var(--ink-3)!important}
#app label,#app .text-sm.font-semibold{color:var(--ink)!important;letter-spacing:-.006em}

/* ---------- buttons: iOS filled / tinted / plain ---------- */
#app button{letter-spacing:-.01em;transition:transform .12s ease,opacity .12s ease,background .15s ease}
#app button:active{transform:scale(.975)}
#app button.bg-\[\#69D2C8\]:not(.h-7):not(.h-8):not(.h-9):not(.cbi-seg),
#app button.bg-\[\#121F30\]:not(.h-7):not(.h-8):not(.h-9):not(.cbi-seg){
  background:var(--tint)!important;color:#fff!important;border:0!important;border-radius:12px!important;
  min-height:46px;font-weight:600!important;
}
#app button.bg-\[\#121F30\]{background:var(--ink)!important}
#app button.border:not(.h-7):not(.h-8):not(.h-9):not(.cbi-seg){
  background:var(--fill)!important;border:0!important;border-radius:12px!important;
  color:var(--ink)!important;min-height:46px;font-weight:600!important;
}

/* ---------- progress + stepper ---------- */
#app .bg-\[\#69D2C8\]{background-color:var(--tint)}
#app [class*="rounded-full"].bg-\[\#69D2C8\]{box-shadow:none!important}

/* ---------- chrome ---------- */
#app .bg-\[\#FFF8F3\]{background:var(--grouped)!important}
/* one flat page colour: kill the page gradient and the brand tint */
#app .bg-gradient-to-br{background-image:none!important;background-color:var(--grouped)!important}

/* section headings: Apple keeps these quieter than the screen title */
#app h2{font-size:21px!important;line-height:1.24!important;font-weight:700!important}
#app h2 + p{font-size:14px!important;color:var(--ink-2)!important}

/* action rows wrap into an even grid instead of ragged halves */
#app .flex.flex-wrap.gap-2 > button,#app .flex.flex-wrap.gap-3 > button{flex:1 1 calc(50% - 8px);justify-content:center}
#app header,#app .lg\:hidden.bg-white{backdrop-filter:saturate(1.8) blur(16px);background:rgba(255,255,255,.82)!important}

/* the sticky wizard bar + tab bar inherit the same language */
#cbiBar{background:rgba(255,255,255,.88)!important;border-top:.5px solid var(--hair)!important}
.cbi-bar__next{background:var(--ink)!important;border-radius:12px!important}
.cbi-bar__next.is-go{background:var(--tint)!important;color:#fff!important}
.cbi-bar__fill{background:var(--tint)!important}
.cbi-bar__back{border:.5px solid var(--hair)!important;background:var(--fill)!important;border-radius:12px!important}
#cbiSplash{background:var(--grouped)}
.cbi-splash__mark{background:var(--tint);box-shadow:none}
.cbi-splash__bar i{background:var(--tint)}

/* ---------- bottom tab bar ---------- */
#cbiTabs{
  position:fixed;left:0;right:0;bottom:0;z-index:69;display:none;
  padding:6px 6px calc(4px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.8) blur(20px);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-top:.5px solid var(--hair);
}
#cbiTabs.is-on{display:flex}
.cbi-tab{
  flex:1 1 0;min-width:0;border:0;background:none;padding:6px 2px 4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink-3);
}
.cbi-tab svg{width:24px;height:24px;display:block}
.cbi-tab span{
  font-size:10px;line-height:1.1;font-weight:500;letter-spacing:.01em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cbi-tab.is-active{color:var(--tint)}
body.cbi-has-tabs{padding-bottom:76px}

@media (prefers-reduced-motion:reduce){ #app button:active{transform:none} }

/* ============================================================
   Dark panels (the "Quick answer" card) keep light-on-dark.
   These must come last so they beat the neutral rules above.
   ============================================================ */
#app div.bg-\[\#121F30\]{background:#16222F!important;color:#fff}
#app div.bg-\[\#121F30\] h1,
#app div.bg-\[\#121F30\] h2,
#app div.bg-\[\#121F30\] h3{color:#fff!important}
#app div.bg-\[\#121F30\] label,
#app div.bg-\[\#121F30\] p{color:rgba(255,255,255,.68)!important}
#app div.bg-\[\#121F30\] p.text-white,
#app div.bg-\[\#121F30\] .text-white{color:#fff!important}
#app div.bg-\[\#121F30\] input,
#app div.bg-\[\#121F30\] select,
#app div.bg-\[\#121F30\] input.bg-white,
#app div.bg-\[\#121F30\] select.bg-white{
  background:rgba(255,255,255,.13)!important;
  color:#fff!important;
  border:0!important;
}
#app div.bg-\[\#121F30\] input::placeholder{color:rgba(255,255,255,.42)!important}
#app div.bg-\[\#121F30\] input:focus,
#app div.bg-\[\#121F30\] select:focus{
  background:rgba(255,255,255,.20)!important;
  box-shadow:0 0 0 3px rgba(105,210,200,.45)!important;
}
#app div.bg-\[\#121F30\] span{color:rgba(255,255,255,.62)!important}
#app div.bg-\[\#121F30\] svg{color:currentColor!important}
#app div.bg-\[\#121F30\] button.bg-\[\#69D2C8\]{background:#69D2C8!important;color:#0E1A26!important}
#app div.bg-\[\#121F30\] button.border{
  background:rgba(255,255,255,.12)!important;color:#fff!important;
}
/* the stat tiles inside it */
#app div.bg-\[\#121F30\] div.bg-white\/10{background:rgba(255,255,255,.09)!important}
/* readable primary / secondary inside dark panels */
#app div.bg-\[\#121F30\] button.bg-\[\#69D2C8\]:not(.cbi-seg):not(.h-7):not(.h-8):not(.h-9),
#app div.bg-\[\#121F30\] button.bg-\[\#69D2C8\]:not(.cbi-seg):not(.h-7):not(.h-8):not(.h-9):hover{
  background:#6FE0D5!important;color:#0B1620!important;opacity:1!important;font-weight:700!important;
}
#app div.bg-\[\#121F30\] button.bg-\[\#69D2C8\]:not(.cbi-seg):not(.h-7):not(.h-8):not(.h-9) *{color:#0B1620!important}
#app div.bg-\[\#121F30\] button.border:not(.h-7):not(.h-8):not(.h-9):not(.cbi-seg),
#app div.bg-\[\#121F30\] button.border:not(.h-7):not(.h-8):not(.h-9):not(.cbi-seg) *{
  color:#fff!important
}
#app div.bg-\[\#121F30\] button.border:not(.h-7):not(.h-8):not(.h-9):not(.cbi-seg){
  background:rgba(255,255,255,.16)!important;border:0!important;border-radius:12px!important;
  min-height:46px;font-weight:600!important;
}
#app div.bg-\[\#121F30\] button.border:not(.h-7):not(.h-8):not(.h-9):not(.cbi-seg):hover{
  background:rgba(255,255,255,.24)!important
}


/* ---------- segmented % / $ toggles ---------- */
#app .cbi-seg{
  height:28px!important;min-height:28px!important;width:30px!important;
  border-radius:8px!important;border:0!important;
  font-size:12px!important;font-weight:700!important;line-height:1!important;
  padding:0!important;display:inline-flex;align-items:center;justify-content:center;
}
#app .cbi-seg[aria-pressed="false"]{background:rgba(255,255,255,.16)!important;color:rgba(255,255,255,.75)!important}
#app .cbi-seg[aria-pressed="true"]{background:#6FE0D5!important;color:#0B1620!important}

/* ===== ux layer (folded in; see ux.css) ===== */
/* ============================================================
   Mobile-first polish: launch animation, view transitions and a
   sticky action bar so the wizard can be driven with one thumb.
   ============================================================ */

/* ---------- launch ---------- */
#cbiSplash{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:#FFF8F3;
  transition:opacity .45s ease, visibility .45s ease;
}
#cbiSplash.is-done{opacity:0;visibility:hidden;pointer-events:none}
.cbi-splash__mark{
  width:72px;height:72px;border-radius:20px;
  background:#69D2C8;color:#fff;
  display:flex;align-items:center;justify-content:center;
  animation:cbiPop .55s cubic-bezier(.2,.9,.3,1.2) both;
  box-shadow:0 10px 30px rgba(105,210,200,.35);
}
.cbi-splash__mark svg{width:36px;height:36px;display:block}
.cbi-splash__name{
  font:700 17px/1.2 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#121F30;letter-spacing:-.01em;
  animation:cbiRise .5s .12s ease both;
}
.cbi-splash__sub{
  font:400 13px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;
  color:rgba(18,31,48,.5);margin-top:-10px;
  animation:cbiRise .5s .2s ease both;
}
.cbi-splash__bar{
  width:140px;height:3px;border-radius:99px;background:rgba(18,31,48,.08);overflow:hidden;margin-top:6px;
}
.cbi-splash__bar i{display:block;height:100%;width:40%;border-radius:99px;background:#69D2C8;animation:cbiSlide 1.1s ease-in-out infinite}
@keyframes cbiPop{from{opacity:0;transform:scale(.7) translateY(8px)}to{opacity:1;transform:none}}
@keyframes cbiRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cbiSlide{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}

/* ---------- view transitions ---------- */
.cbi-in{animation:cbiIn .26s cubic-bezier(.22,.8,.3,1) both}
@keyframes cbiIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- sticky action bar (phones/tablets) ---------- */
#cbiBar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:none;align-items:center;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid rgba(18,31,48,.10);
  box-shadow:0 -6px 24px rgba(18,31,48,.07);
  animation:cbiBarIn .3s ease both;
}
#cbiBar.is-on{display:flex}
@keyframes cbiBarIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cbi-bar__back{
  flex:0 0 auto;width:46px;height:46px;border-radius:14px;
  border:1px solid rgba(18,31,48,.14);background:#fff;color:#121F30;
  display:flex;align-items:center;justify-content:center;
}
.cbi-bar__back[disabled]{opacity:.35}
.cbi-bar__meta{flex:1 1 auto;min-width:0}
.cbi-bar__step{
  font:600 11px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(18,31,48,.5);
}
.cbi-bar__name{
  font:700 14px/1.25 ui-sans-serif,system-ui,sans-serif;color:#121F30;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cbi-bar__track{height:3px;border-radius:99px;background:rgba(18,31,48,.10);margin-top:7px;overflow:hidden}
.cbi-bar__fill{display:block;height:100%;border-radius:99px;background:#69D2C8;transition:width .35s cubic-bezier(.22,.8,.3,1)}
.cbi-bar__next{
  flex:0 0 auto;height:46px;padding:0 20px;border-radius:14px;border:0;
  background:#121F30;color:#fff;
  font:700 14px/1 ui-sans-serif,system-ui,sans-serif;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s ease, background .15s ease;
}
.cbi-bar__next:active{transform:scale(.97)}
.cbi-bar__next.is-go{background:#69D2C8;color:#121F30}
body.cbi-has-bar{padding-bottom:84px}

/* ---------- mobile comfort ---------- */
@media screen and (max-width:1023px){
  #app input, #app select, #app textarea{font-size:16px}   /* stops iOS zooming on focus */
  #app button, #app [role="button"]{touch-action:manipulation}
}
@media (prefers-reduced-motion:reduce){
  .cbi-in,.cbi-splash__mark,.cbi-splash__name,.cbi-splash__sub,#cbiBar{animation:none!important}
  #cbiSplash{transition:none}
  .cbi-bar__fill{transition:none}
}