/* Kaulav components — every component designed for this app. Specs: design/DESIGN.md §6. */
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--t-body)/1.5 var(--font);letter-spacing:var(--track);-webkit-font-smoothing:antialiased}
.it{font-style:italic;font-weight:300}
.muted{color:var(--ink-2)} .dim{color:var(--ink-3)}
.cap{font-size:var(--t-cap)} .micro{font-size:var(--t-micro);letter-spacing:.02em}

/* ---------- Mood surfaces (gradient + grain) ---------- */
.mood{position:relative;overflow:hidden;color:var(--on-mood);isolation:isolate}
.mood::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.16;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.mood>*{position:relative;z-index:1}
.mood--ready{background:var(--mood-ready)}
.mood--attention{background:var(--mood-attention)}
.mood--alert{background:var(--mood-alert)}
.mood--tide{background:var(--mood-tide);color:var(--ink)}
.mood--night{background:var(--mood-night)}
.mood--tide .frost-tile{--frost:rgba(255,255,255,.45)}

/* ---------- Hero card ---------- */
.hero{border-radius:var(--r-hero);padding:var(--s-6) var(--s-5) var(--s-5);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2)}
.hero__label{font-size:var(--t-cap);color:var(--on-mood-2);font-weight:400}
.mood--tide .hero__label{color:var(--ink-2)}
.hero__caption{font-size:14px;font-style:italic;font-weight:300}

/* ---------- Dot-matrix numerals (rendered by dotmatrix.js) ---------- */
.dm{display:inline-flex;gap:.22em;align-items:flex-end;line-height:0}
.dm svg{display:block;height:1em;width:auto;overflow:visible}
.dm circle{fill:currentColor}
.dm--xl{font-size:64px} .dm--l{font-size:40px} .dm--m{font-size:26px} .dm--s{font-size:18px}
.unit{font-size:14px;font-style:italic;font-weight:300;margin-left:.35em;align-self:flex-end;line-height:1.1}

/* ---------- Dot-bar chart ---------- */
.dotbars{display:flex;gap:6px;align-items:flex-end;height:44px;margin-top:var(--s-2)}
.dotbars span{width:5px;display:flex;flex-direction:column-reverse;gap:3px}
.dotbars i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.9}
.dotbars span.off i{opacity:.32}

/* ---------- Tick ruler (days of supply) ---------- */
.ruler{width:100%;display:flex;justify-content:space-between;align-items:flex-end;height:30px;margin-top:var(--s-3);padding:0 2px}
.ruler i{width:1.5px;height:12px;background:currentColor;opacity:.45;border-radius:2px}
.ruler i.maj{height:18px;opacity:.6}
.ruler i.now{height:28px;width:2.5px;opacity:1}
.ruler-legend{width:100%;display:flex;justify-content:space-between;font-size:var(--t-micro);color:var(--on-mood-2);margin-top:4px}

/* ---------- Frost tile (content on a mood) ---------- */
.frost-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);width:100%;margin-top:var(--s-4)}
.frost-tile{background:var(--frost);border:1px solid var(--frost-line);border-radius:var(--r-tile);padding:var(--s-3) var(--s-3) var(--s-4);text-align:left;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.frost-tile__head{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-cap);color:var(--on-mood-2)}
.mood--tide .frost-tile__head{color:var(--ink-2)}
.frost-tile__value{display:flex;align-items:flex-end;margin-top:var(--s-5)}
.frost-tile__cap{font-size:12px;font-style:italic;font-weight:300;color:var(--on-mood-2);margin-top:4px}

/* ---------- Icon chip ---------- */
.chip-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--card-2);color:var(--ink);font-size:20px}
.chip-icon--frost{background:var(--frost-strong);color:var(--on-mood)}
.chip-icon--sm{width:32px;height:32px;font-size:16px}
.chip-icon--lg{width:52px;height:52px;font-size:24px}

/* ---------- Buttons ---------- */
.btn{border:0;font:500 15px/1 var(--font);letter-spacing:var(--track);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:var(--canvas);height:54px;padding:0 var(--s-6);border-radius:var(--r-chip)}
.btn-on-mood{background:#fff;color:#14161B;height:50px;padding:0 var(--s-5);border-radius:var(--r-chip)}
.btn-hivis{background:var(--hivis);color:var(--hivis-ink);height:54px;padding:0 var(--s-6);border-radius:var(--r-chip);font-weight:600}
/* Glass round control (Liquid Glass layer) */
.btn-round{width:44px;height:44px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);color:var(--ink);font-size:20px}
.btn-plus{width:40px;height:40px;border-radius:50%;background:var(--card-2);color:var(--ink);font-size:20px}
.mood .btn-plus{background:rgba(255,255,255,.92)}

/* ---------- Pills & badges ---------- */
.pill-filter{display:flex;align-items:center;gap:var(--s-3);height:52px;padding:0 var(--s-5);border-radius:var(--r-chip);background:var(--card-2);font-size:15px;flex:1}
.pill-outline{display:inline-flex;align-items:center;height:30px;padding:0 var(--s-3);border-radius:var(--r-chip);border:1px solid var(--hair);font-size:13px;font-style:italic;font-weight:300;color:var(--ink-2)}
.mood .pill-outline{border-color:var(--frost-line);color:var(--on-mood)}
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:var(--r-chip);font-size:12.5px;font-weight:500;white-space:nowrap}
.badge--ready{background:var(--hivis);color:var(--hivis-ink)}
.badge--attention{background:rgba(233,130,47,.14);color:#B45A12}
.badge--alert{background:rgba(238,75,90,.12);color:#C22A3A}
.badge--missing{background:transparent;border:1px dashed var(--ink-3);color:var(--ink-2)}
.badge--frost{background:var(--frost-strong);color:var(--on-mood)}
[data-mode="blackout"] .badge--attention{color:#F2A35C} [data-mode="blackout"] .badge--alert{color:#FF7D89}

/* ---------- Segmented large title ---------- */
.title-seg{display:flex;gap:var(--s-4);font-size:var(--t-h1);letter-spacing:var(--track-tight);font-weight:400;line-height:1.1}
.title-seg span{color:var(--ink-3)} .title-seg span.on{color:var(--ink)}

/* ---------- Cards ---------- */
.card{background:var(--card);color:var(--ink);border-radius:var(--r-card);padding:var(--s-5)}
.card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3)}
.card__title{font-size:20px;line-height:1.15;font-style:italic;font-weight:300;margin-top:var(--s-6)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}

/* Kit item card: glow glyph instead of product renders */
.item-card{background:var(--card);color:var(--ink);border-radius:var(--r-card);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);min-height:196px}
.glow{position:relative;width:76px;height:76px;margin:var(--s-2) auto 0;display:grid;place-items:center;font-size:40px;color:var(--g,#2F9E52)}
.glow::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--g,#2F9E52);filter:blur(22px);opacity:.35}
.glow i{position:relative}
.item-card__name{font-size:13.5px;color:var(--ink-2);text-align:center;margin-top:auto}
.item-card__qty{font-size:24px;font-style:italic;font-weight:300;text-align:center;letter-spacing:var(--track-tight)}

/* ---------- Progress line with knobs (rotation timeline) ---------- */
.track{position:relative;height:22px;display:flex;align-items:center}
.track::before{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;opacity:.35;border-radius:2px}
.track__fill{position:absolute;left:0;height:2px;background:currentColor;border-radius:2px}
.track__knob{position:absolute;width:14px;height:14px;border-radius:50%;background:currentColor;transform:translateX(-50%)}
.track__ring{position:absolute;width:22px;height:22px;border-radius:50%;border:2px solid currentColor;transform:translateX(-50%)}
.track__ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:currentColor}

/* ---------- Sheet ---------- */
.sheet{border-radius:var(--r-sheet);padding:var(--s-5);box-shadow:0 -10px 40px rgba(20,22,27,.12)}
.sheet__grab{width:38px;height:5px;border-radius:5px;background:currentColor;opacity:.35;margin:-6px auto var(--s-3)}

/* ---------- Floating glass tab bar + separate Ask button ---------- */
.tabbar-wrap{position:absolute;left:14px;right:14px;bottom:18px;display:flex;gap:10px;align-items:center;z-index:5}
.tabbar{flex:1;height:62px;border-radius:var(--r-chip);background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);display:flex;justify-content:space-around;align-items:center;padding:0 6px}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--ink-2);padding:6px 10px;border-radius:var(--r-chip)}
.tab i{font-size:22px}
.tab.on{color:var(--ink);background:rgba(255,255,255,.7)}
[data-mode="blackout"] .tab.on{background:rgba(255,255,255,.12)}
.ask-btn{width:62px;height:62px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);display:grid;place-items:center;font-size:24px;color:var(--ink)}

/* ---------- Concentric rings + ripple (offline / connection status) ---------- */
.rings{position:relative;width:120px;height:120px;margin:var(--s-3) auto}
.rings i{position:absolute;inset:0;border-radius:50%;border:1.5px solid currentColor;opacity:.45}
.rings i:nth-child(2){inset:22px;opacity:.6;background:rgba(255,255,255,.18);border:0}
.rings i:nth-child(3){inset:42px;background:var(--hivis);border:0;opacity:1;box-shadow:0 0 0 8px rgba(255,255,255,.35)}
.ripple{display:flex;justify-content:center;gap:5px;align-items:center;height:22px}
.ripple b{width:6px;border-radius:6px;border:1.5px solid currentColor;opacity:.5;height:var(--h,10px)}
.ripple b.c{width:20px;height:20px;border-radius:50%;opacity:1}

/* ---------- Scenario card ---------- */
.scenario{border-radius:var(--r-card);padding:var(--s-4);min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.scenario__name{font-size:19px;font-style:italic;font-weight:300;line-height:1.15}
.scenario__meta{font-size:12px;color:var(--on-mood-2)}
.mood--tide .scenario__meta{color:var(--ink-2)}

/* ---------- Steps (curated, verbatim — never AI-written) ---------- */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.steps li{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--card);border-radius:22px;padding:var(--s-4)}
.steps li b{flex:0 0 28px;height:28px;border-radius:50%;background:var(--ink);color:var(--canvas);display:grid;place-items:center;font-size:13px;font-weight:600}
.steps li span{font-size:15px;line-height:1.4}

/* ---------- Ask (on-device AI) ---------- */
.bubble-q{align-self:flex-end;background:var(--ink);color:var(--canvas);border-radius:24px 24px 6px 24px;padding:12px 16px;font-size:15px;max-width:80%}
.bubble-a{background:var(--card);border-radius:24px 24px 24px 6px;padding:16px;font-size:15px;line-height:1.5;max-width:92%}
.cite{display:inline-flex;align-items:center;gap:6px;margin:10px 6px 0 0;height:28px;padding:0 12px;border-radius:var(--r-chip);background:var(--card-2);border:1px solid var(--hair);font-size:12px;color:var(--ink-2)}
.ai-note{font-size:11.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center}

/* ---------- Onboarding ---------- */
.q-title{font-size:30px;line-height:1.12;letter-spacing:var(--track-tight);font-weight:400}
.q-title em{font-style:italic;font-weight:300;color:var(--ink-2)}
.choice{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 var(--s-5);border-radius:22px;background:var(--card);font-size:16px}
.choice.on{background:var(--ink);color:var(--canvas)}
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:22px;padding:10px 10px 10px var(--s-5)}
.stepper__ctrl{display:flex;align-items:center;gap:var(--s-4)}
.stepper__ctrl .btn-plus{width:40px;height:40px}
.dots-progress{display:flex;gap:6px}
.dots-progress i{width:6px;height:6px;border-radius:50%;background:var(--ink-3)} .dots-progress i.on{width:22px;border-radius:6px;background:var(--ink)}

/* ---------- Paywall ---------- */
.price{display:flex;align-items:baseline;gap:8px}
.price b{font-size:54px;font-style:italic;font-weight:300;letter-spacing:-.04em}
.price s{color:var(--ink-3);font-size:18px}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.check-list li{display:flex;gap:10px;align-items:center}
.check-list i{color:var(--ready);font-size:18px}

/* ---------- Documents stack ---------- */
.docs{position:relative;height:96px;margin-top:var(--s-4)}
.docs i{position:absolute;width:86px;height:104px;border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(20,22,27,.10);left:50%}
.docs i:nth-child(1){transform:translateX(-90%) rotate(-9deg)} .docs i:nth-child(2){transform:translateX(-50%) rotate(-2deg)} .docs i:nth-child(3){transform:translateX(-10%) rotate(7deg)}
.docs i::before{content:"";position:absolute;left:12px;right:12px;top:16px;height:2px;background:#D9D9DE;box-shadow:0 10px 0 #E6E6EA,0 20px 0 #E6E6EA,0 30px 0 #E6E6EA}
.docs-pill{position:relative;margin-top:-18px;background:#fff;border-radius:22px;padding:12px 16px;font-size:14px}

/* ---------- Map ---------- */
.map{position:relative;border-radius:var(--r-hero);overflow:hidden;background:#E7E5DF}
.map svg{display:block;width:100%;height:100%}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}
.pin b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.18);font-size:17px}
.pin.meet b{background:var(--hivis);color:var(--hivis-ink)}
.pin::after{content:"";width:2px;height:8px;background:#fff}

/* ---------- Phone frame (previews only) ---------- */
.phone{width:390px;height:844px;border-radius:56px;background:#0A0A0C;padding:11px;box-shadow:0 30px 80px rgba(20,22,27,.25);flex:0 0 auto}
.screen{position:relative;width:100%;height:100%;border-radius:46px;background:var(--canvas);color:var(--ink);overflow:hidden;display:flex;flex-direction:column}
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:16px 30px 6px;font-size:15px;font-weight:600;color:var(--ink)}
.statusbar .sb-r{display:flex;gap:6px;align-items:center;font-size:14px}
.scroll{flex:1;overflow:hidden;padding:6px 16px 110px;display:flex;flex-direction:column;gap:var(--s-3)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:4px 0 6px}
.brand{font-weight:600;letter-spacing:-.02em;font-size:15px}

/* ======================= v1.1 craft layer (2026-11-03) ======================= */
/* Physical depth on content surfaces */
.card,.item-card,.steps li,.choice,.stepper,.bubble-a,details{box-shadow:var(--lift)}
.choice.on{box-shadow:0 14px 30px -16px rgba(20,22,27,.55)}
.btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 16px 30px -14px rgba(20,22,27,.55)}
.btn-hivis{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 30px -12px rgba(190,210,0,.55)}
.btn-on-mood{box-shadow:0 12px 26px -12px rgba(0,0,0,.35)}
.btn-plus{box-shadow:var(--lift)}
.chip-icon{box-shadow:var(--lift)}
.chip-icon--frost{box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
/* Frost tile: lit top edge like real frosted glass */
.frost-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 .5px rgba(255,255,255,.15),0 10px 24px -18px rgba(0,0,0,.35)}
/* Hero halftone: the reference's dot field, fading out from beneath the number */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.1px,transparent 1.5px);background-size:9px 9px;
  -webkit-mask-image:radial-gradient(70% 34% at 50% 62%,#000 0%,transparent 75%);mask-image:radial-gradient(70% 34% at 50% 62%,#000 0%,transparent 75%)}
.mood--tide.hero::before{background-image:radial-gradient(rgba(20,22,27,.35) 1.1px,transparent 1.5px)}
.hero{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 24px 50px -30px rgba(20,22,27,.45)}
/* Glass: specular sheen on round controls */
.btn-round,.ask-btn{position:relative}
.btn-round::after,.ask-btn::after{content:"";position:absolute;inset:1px;border-radius:50%;pointer-events:none;
  background:radial-gradient(80% 60% at 30% 15%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%)}
[data-mode="blackout"] .btn-round::after,[data-mode="blackout"] .ask-btn::after{background:radial-gradient(80% 60% at 30% 15%,rgba(255,255,255,.12),rgba(255,255,255,0) 60%)}
.tab.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px -4px rgba(20,22,27,.18)}

/* App screen documents (web/app/*.html, shown inside .device via iframe) */
body.app-screen{width:390px;height:844px;overflow:hidden}
body.app-screen .screen{border-radius:0;width:390px;height:844px}
body.app-screen .statusbar{padding:18px 32px 8px}
body.app-screen .screen::after{content:"";position:absolute;left:50%;bottom:8px;width:134px;height:5px;border-radius:5px;transform:translateX(-50%);background:var(--ink);opacity:.85;z-index:9}

/* Realistic iPhone render. Wrap sets layout size; --s scales. */
.device-wrap{--s:1;position:relative;width:calc(414px*var(--s));height:calc(868px*var(--s));flex:0 0 auto}
.device{position:absolute;left:0;top:0;width:414px;height:868px;transform:scale(var(--s));transform-origin:0 0;border-radius:66px;padding:12px;
  background:linear-gradient(140deg,#6b6e76 0%,#24262b 18%,#3c3f46 46%,#16181c 74%,#575a62 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28),inset 0 0 0 5px #0c0d10,inset 0 0 0 6px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.45)}
.device::before,.device::after{content:"";position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#2a2c31,#62656c)}
.device::before{left:-3px;top:180px;height:64px;box-shadow:0 84px 0 #3a3c42}
.device::after{right:-3px;top:240px;height:104px}
.device__screen{position:relative;width:390px;height:844px;border-radius:54px;overflow:hidden;background:#000}
.device__screen iframe{display:block;width:390px;height:844px;border:0;pointer-events:none}
.device__screen::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:122px;height:35px;border-radius:20px;background:#000;z-index:3}
.device__screen::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05) 100%)}
.statusbar{position:relative;z-index:4}

/* v1.2 (2026-11-03): Apple marketing guidelines — no simulated/3D iPhone hardware, no tilt, no reflections.
   .device is now a flat "screen card": the app screen itself, rounded, on a hairline + soft lift. */
.device{padding:0;border-radius:54px;background:none;box-shadow:0 0 0 1px rgba(20,22,27,.10),0 40px 80px -40px rgba(20,22,27,.45);width:390px;height:844px}
.device-wrap{width:calc(390px*var(--s));height:calc(844px*var(--s))}
.device::before,.device::after,.device__screen::before,.device__screen::after{content:none}
[data-mode="blackout"] .device,.mood--night .device{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -30px rgba(0,0,0,.7)}

/* ======================= v1.4 Kit system (2026-11-03) ======================= */
/* Brand icons (web/assets/icons.svg). Stroke follows currentColor; the beacon accent uses --acc. */
.ico{width:24px;height:24px;display:block;flex:0 0 auto}
.ico--sm{width:20px;height:20px}.ico--lg{width:28px;height:28px}

/* Category palette: every kit category owns one gradient (tile) + one wash (card) */
.c-water{--c1:#7CCBFF;--c2:#2F7BEA}
.c-food{--c1:#FFC76A;--c2:#E5762E}
.c-power{--c1:#C2AEFF;--c2:#6E55E0}
.c-radio{--c1:#FFA696;--c2:#E2485C}
.c-light{--c1:#FFE58A;--c2:#F2A33A}
.c-health{--c1:#86E6BC;--c2:#1F9D6B}
.c-docs{--c1:#D3DAE8;--c2:#7D8AA8}
.c-cash{--c1:#B8E68A;--c2:#4FA33A}
.c-pet{--c1:#F7C7A3;--c2:#C9784A}

/* Gradient icon tile — glossy squircle, white glyph, Hi-Vis beacon accent */
.icon-tile{--acc:var(--hivis);position:relative;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(155deg,var(--c1),var(--c2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -6px 12px rgba(0,0,0,.12),0 10px 20px -10px var(--c2)}
.icon-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 55% at 30% 12%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%)}
.icon-tile .ico{position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.icon-tile--sm{width:36px;height:36px;border-radius:12px}.icon-tile--sm .ico{width:20px;height:20px}
.icon-tile.is-missing{background:var(--card-2);color:var(--ink-2);--acc:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--hair)}
.icon-tile.is-missing::after{display:none}

/* Kit card — category wash in the corner, quantity + meter */
.kit-card{position:relative;overflow:hidden;border-radius:var(--r-card);padding:14px 14px 16px;color:var(--ink);box-shadow:var(--lift);
  background:radial-gradient(130% 90% at 100% 0%,color-mix(in srgb,var(--c1) 34%,transparent) 0%,transparent 58%),var(--card);
  display:flex;flex-direction:column;gap:10px;min-height:178px}
.kit-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.kit-card__name{font-size:13.5px;color:var(--ink-2);margin-top:auto}
.kit-card__qty{display:flex;align-items:baseline;gap:4px;font-size:26px;font-style:italic;font-weight:300;letter-spacing:-.035em;line-height:1}
.kit-card__qty small{font-size:14px;color:var(--ink-2);font-style:italic}
.kit-card.is-missing{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--hair)}
.kit-card.is-missing .kit-card__qty{color:var(--ink-3)}
/* Meter: have vs target (ready = Hi-Vis, attention = amber with a "today" ring, missing = dashed) */
.meter-line{position:relative;height:6px;border-radius:6px;background:rgba(20,22,27,.08);overflow:visible}
.meter-line i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--ready)}
.meter-line.is-ready i{background:linear-gradient(90deg,#B7D400,var(--hivis))}
.meter-line.is-attention i{background:linear-gradient(90deg,var(--c1),var(--c2))}
.meter-line.is-attention b{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--c2);transform:translate(-50%,-50%)}
.meter-line.is-missing{background:repeating-linear-gradient(90deg,rgba(20,22,27,.16) 0 6px,transparent 6px 10px)}
.meter-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}

/* Status chips row (filters) */
.chip-row{display:flex;gap:8px;overflow:hidden}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--card);box-shadow:var(--lift);font-size:13.5px;white-space:nowrap;color:var(--ink)}
.chip b{font-weight:600}
.chip.on{background:var(--ink);color:var(--canvas)}
.chip .dot{width:7px;height:7px;border-radius:50%}

/* Compact kit summary hero */
.kit-hero{border-radius:var(--r-card);padding:16px 18px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.kit-hero__num{display:flex;align-items:flex-end;gap:4px}
.kit-hero__cats{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end}
.kit-hero__cats span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;color:var(--on-mood-2)}
.kit-hero__cats .bar{width:100%;height:46px;border-radius:8px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.kit-hero__cats .bar i{position:absolute;left:0;right:0;bottom:0;border-radius:8px;background:rgba(255,255,255,.92)}
.kit-hero__cats .bar.low i{background:#FFC76A}
.tab .ico{width:23px;height:23px;--acc:currentColor}
.tab.on .ico{--acc:var(--hivis)}
.ask-btn .ico{width:24px;height:24px;--acc:var(--hivis)}
.scroll>*{flex-shrink:0}

/* v1.5 (2026-11-03): calmer Kit — segmented filter + summary line, sheet in the kit-card language */
.seg{display:flex;padding:4px;border-radius:999px;background:rgba(20,22,27,.06);gap:2px}
.seg span{flex:1;text-align:center;height:34px;line-height:34px;border-radius:999px;font-size:13.5px;color:var(--ink-2)}
.seg span.on{background:var(--card-2);color:var(--ink);box-shadow:0 1px 2px rgba(20,22,27,.08),0 6px 14px -8px rgba(20,22,27,.2)}
.seg span b{font-weight:500;color:var(--ink-3);margin-left:4px}
.summary-line{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink-2)}
.summary-line strong{color:var(--ink);font-weight:500}
.kit-sheet{position:absolute;left:10px;right:10px;bottom:10px;border-radius:var(--r-sheet);padding:18px 20px 20px;color:var(--ink);
  background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--c1) 40%,transparent) 0%,transparent 60%),var(--card);
  box-shadow:0 -12px 40px rgba(20,22,27,.18),inset 0 1px 0 rgba(255,255,255,.9)}
.kit-sheet .sheet__grab{color:var(--ink-3)}
.kit-sheet__big{display:flex;align-items:flex-end;gap:6px;color:var(--c2)}
.kit-sheet__big .unit{color:var(--ink-2)}
.tip{display:flex;gap:12px;align-items:flex-start;border-radius:22px;padding:14px;background:var(--card-2);box-shadow:var(--lift);font-size:14px;line-height:1.45}
.btn-quiet{background:transparent;color:var(--ink-2);height:46px;border-radius:999px}
.tip .icon-tile{flex:0 0 36px;height:36px}

/* v1.6 (2026-11-03): Kit cards in the "Rotate soon" sheet language (owner's favourite):
   category gradient + grain, white light-italic type, dot-matrix value, track with knob + ring, white round icon button. */
.kit-mood{position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:14px 14px 16px;color:#fff;min-height:206px;display:flex;flex-direction:column;
  background:radial-gradient(70% 60% at 65% 38%,var(--c2) 0%,transparent 72%),radial-gradient(90% 80% at 25% 10%,var(--c1) 0%,transparent 75%),linear-gradient(180deg,var(--c1),var(--c3,var(--c2)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 34px -22px var(--c2)}
.kit-mood::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.kit-mood::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.16) 100%);pointer-events:none}
.kit-mood__top{display:flex;justify-content:space-between;align-items:center}
.kit-mood__label{font-size:12.5px;color:rgba(255,255,255,.8)}
.kit-mood__btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#14161B;--acc:var(--c2);box-shadow:0 6px 14px -6px rgba(0,0,0,.3)}
.kit-mood__btn .ico{width:20px;height:20px}
.kit-mood__name{font-size:19px;font-style:italic;font-weight:300;letter-spacing:-.02em;margin-top:10px;line-height:1.15}
.kit-mood__val{display:flex;align-items:flex-end;gap:2px;margin-top:auto}
.kit-mood__val .unit{color:rgba(255,255,255,.85)}
.kit-mood .track{color:#fff;margin-top:10px}
.kit-mood__meta{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.78);margin-top:2px}
/* deeper base stops so white type always holds contrast */
.kit-mood.c-water{--c1:#6FB8FF;--c2:#2E6FE0;--c3:#2A5BC4}
.kit-mood.c-food{--c1:#F2B84A;--c2:#E2702C;--c3:#C9785E}
.kit-mood.c-power{--c1:#A98CFF;--c2:#6A4CE0;--c3:#5A3FC2}
.kit-mood.c-health{--c1:#5FD0A0;--c2:#1C9668;--c3:#17805A}
.kit-mood.c-light{--c1:#F2C94C;--c2:#E39A2E;--c3:#C98436}
.kit-mood.is-missing{color:var(--ink);background:linear-gradient(180deg,#E9E7E3,#DCD9D3);box-shadow:inset 0 0 0 1.5px rgba(20,22,27,.06)}
.kit-mood.is-missing::before{display:none}
.kit-mood.is-missing .kit-mood__label,.kit-mood.is-missing .kit-mood__meta{color:var(--ink-2)}
.kit-mood.is-missing .kit-mood__val .unit{color:var(--ink-2)}
.kit-mood.is-missing .track{color:var(--ink-3)}
.kit-mood.is-missing .track::before{background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 10px);height:2px;opacity:.7}
.kit-mood.is-missing .kit-mood__btn{--acc:var(--ink-3)}

/* v1.7 (2026-11-03): Country picker — replaces the native <select>, which rendered in the browser's own style.
   Glass trigger inside the email pill + glass listbox popover (opens upward inside the hero frame). */
.picker{position:relative;flex:0 0 auto}
.picker__btn{display:flex;align-items:center;gap:8px;height:50px;padding:0 12px 0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font:500 14.5px/1 var(--font);cursor:pointer;transition:background var(--dur) var(--ease)}
.picker__btn:hover,.picker__btn[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.picker__btn:focus-visible{outline:2px solid var(--hivis);outline-offset:2px}
.picker__btn .ico{width:16px;height:16px;opacity:.8;transition:transform var(--dur) var(--ease)}
.picker__btn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.code{display:inline-grid;place-items:center;min-width:28px;height:20px;padding:0 5px;border-radius:6px;font:600 11px/1 var(--font);letter-spacing:.04em;background:rgba(255,255,255,.16);color:#fff}
.picker__list{position:absolute;right:0;bottom:calc(100% + 10px);z-index:20;width:236px;margin:0;padding:6px;list-style:none;border-radius:22px;
  background:linear-gradient(180deg,rgba(34,38,62,.97),rgba(18,20,36,.98));border:1px solid rgba(255,255,255,.14);
  backdrop-filter:saturate(170%) blur(24px);-webkit-backdrop-filter:saturate(170%) blur(24px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -20px rgba(0,0,0,.7);
  opacity:0;transform:translateY(6px) scale(.98);transform-origin:bottom right;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.picker__list.open{opacity:1;transform:none;pointer-events:auto}
.picker__opt{display:flex;align-items:center;gap:10px;height:42px;padding:0 10px;border-radius:14px;color:rgba(255,255,255,.9);font-size:14.5px;cursor:pointer}
.picker__opt .name{flex:1}
.picker__opt .ico{width:18px;height:18px;opacity:0;color:var(--hivis)}
.picker__opt[aria-selected="true"] .ico{opacity:1}
.picker__opt[aria-selected="true"] .code{background:var(--hivis);color:var(--hivis-ink)}
.picker__opt.active{background:rgba(255,255,255,.1)}
.picker__sep{height:1px;margin:4px 8px;background:rgba(255,255,255,.1)}
@media (prefers-reduced-motion:reduce){.picker__list{transition:none}}
form.waitlist,.frow{position:relative;z-index:10}
@media (max-width:560px){
  .frow .picker{flex:1 1 100%}
  .picker__btn{width:100%;justify-content:space-between}
  .picker__list{left:0;right:0;width:auto;transform-origin:bottom left}
}