/* =====================================================================
   POP BENTO — Wave 1: HEALTH view reskin (Nick-approved Jul 9 2026)
   Contract: POP-BENTO-SPEC.md + redesign-mockups/direction-b2-pop-bento.html
   Loads LAST. Visual layer only — zero behavior, zero selector renames.
   Scope: #view-health (all 5 member panels, all 4 Nick tabs) + the marker
   popup (.mk-overlay, appended to <body> by app.js).
   NOTE on specificity: the cw2 inline <style> block in index.html sits in
   <body> (after this sheet in source order) and uses `#hp-nick .x` selectors,
   so every override here uses `#view-health #hp-nick .x` (two ids) to win.
   ===================================================================== */

/* ---- 1. Tokens: remap the app's own vars inside the health scope so every
   inline style / template that references them re-tints automatically. ---- */
#view-health, #mkOverlay{
  --pb-paper:#faf6ee; --pb-ink:#191621; --pb-butter:#ffd66b; --pb-lilac:#cfc0f5;
  --pb-mint:#c2e7c6; --pb-coral:#ff9d7a; --pb-sky:#bcd9f2; --pb-blush:#f6c6cf;
  --pb-dim:#6f6a78; --pb-line:rgba(25,22,33,.16);

  --cream:#faf6ee; --cream-2:#ffffff; --card:#ffffff;
  --ink:#191621; --ink-2:#191621; --text:#332e3d;
  --plum:#191621; --plum-soft:#3c3548;
  --clay:#c65b34; --gold:#e0862c; --sage:#6f9b72;
  --gold-ink:#8a5a10; --sage-ink:#496b4c;
  --muted:#6f6a78; --line:rgba(25,22,33,.16);
  --tile-lilac:#cfc0f5; --tile-lilac-ink:#191621; --tile-lilac-mut:#4a4453;
  --tile-butter:#ffd66b; --tile-butter-ink:#191621; --tile-butter-mut:#4a4453;
  --tile-sage:#c2e7c6;  --tile-sage-ink:#191621;  --tile-sage-mut:#4a4453;
  --tile-blush:#f6c6cf; --tile-blush-ink:#191621; --tile-blush-mut:#4a4453;
  --chip-bg:#ffffff; --chip-ink:#575061;
  --radius:24px; --radius-sm:22px;
  --shadow-card:none; --shadow:none;
  --serif:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --pp-display:"Space Grotesk","Hanken Grotesk",system-ui,sans-serif;
  --pb-head:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --pb-num:"Space Grotesk","Hanken Grotesk",system-ui,sans-serif;
}
/* paper page behind the health view (modern browsers; fail-soft to cream) */
body:has(#view-health:not([hidden])){background:var(--pb-paper, #faf6ee);}

/* ---- sprite icon base ---- */
#view-health svg.i, #mkOverlay svg.i{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-3px;flex:none;
}

/* ---- 2. Page header + member pills ---- */
#view-health .topbar h1{
  font-family:var(--pb-head);font-weight:800;font-size:34px;letter-spacing:-.03em;color:var(--pb-ink);
}
#view-health .hp-switcher{gap:6px;}
#view-health .hp-btn{
  font-family:var(--pb-num);font-weight:500;font-size:12px;
  background:#fff;border:1.5px solid var(--pb-line);color:#575061;padding:7px 14px;
}
#view-health .hp-btn.is-active{background:var(--pb-ink);color:#fff;border-color:var(--pb-ink);}

/* ---- 3. cw2 tab bar → ink pill bar, butter active ---- */
#view-health #cw2-nav{
  background:var(--pb-ink);border-radius:999px;padding:7px 8px;gap:4px;
  box-shadow:0 14px 30px rgba(25,22,33,.28);top:8px;margin:0 0 18px;
}
#view-health #cw2-nav button{
  background:transparent;border:none;border-radius:999px;color:rgba(255,255,255,.55);
  font-family:var(--pb-num);font-size:10.5px;font-weight:500;padding:8px 4px 7px;box-shadow:none;
}
#view-health #cw2-nav button svg.i{width:17px;height:17px;display:block;}
#view-health #cw2-nav button.on{background:var(--pb-butter);color:var(--pb-ink);font-weight:700;box-shadow:none;}
#view-health #cw2-nav button:not(.on):hover{color:#fff;border-color:transparent;}

/* Family 4-tab port (2026-07-09): the class-based cw2 nav on Chantelle/Noah/
   Willow/Ollie panels — same ink pill bar / butter-active skin as Nick's. */
#view-health .cw2-nav{
  background:var(--pb-ink);border-radius:999px;padding:7px 8px;gap:4px;
  box-shadow:0 14px 30px rgba(25,22,33,.28);top:8px;margin:0 0 18px;
}
#view-health .cw2-nav button{
  background:transparent;border:none;border-radius:999px;color:rgba(255,255,255,.55);
  font-family:var(--pb-num);font-size:10.5px;font-weight:500;padding:8px 4px 7px;box-shadow:none;
}
#view-health .cw2-nav button svg.i{width:17px;height:17px;display:block;}
#view-health .cw2-nav button.on{background:var(--pb-butter);color:var(--pb-ink);font-weight:700;box-shadow:none;}
#view-health .cw2-nav button:not(.on):hover{color:#fff;border-color:transparent;}

/* ---- 4. Section titles + kicker labels ---- */
#view-health .section-title,
#view-health #hp-nick .cw2-lbl{
  font-family:var(--pb-head);font-weight:700;font-size:19px;letter-spacing:-.01em;
  color:var(--pb-ink);text-transform:none;padding-left:0;
}
#view-health #hp-nick .section-title::before,
#view-health #hp-nick .cw2-lbl::before{display:none;}
#view-health .section-title .hc-lbl{
  font-family:var(--pb-num);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pb-dim);
}

/* ---- 5. Today: reps hero → butter feature card (xcard) ---- */
#view-health .hc-hero{
  background:var(--pb-butter);border:1.5px solid var(--pb-ink);border-radius:28px;
  box-shadow:5px 5px 0 var(--pb-ink);color:var(--pb-ink);
}
#view-health .hc-hero *{color:var(--pb-ink)!important;}
#view-health .hc-hero-label,
#view-health #nickRepsHero .reps-anchor .k{
  font-family:var(--pb-num);letter-spacing:.14em;opacity:.62;
}
#view-health .hc-hero-rows .k{opacity:.55;font-family:var(--pb-num);letter-spacing:.1em;}
#view-health .hc-hero-rows .v{font-weight:700;}

/* dark rings hero (cw2-hero) → ink card w/ butter + coral circle bleeds */
#view-health #hp-nick .cw2-hero{
  background:var(--pb-ink);border-radius:30px;box-shadow:none;position:relative;overflow:hidden;
}
#view-health #hp-nick .cw2-hero::after{
  content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;
  background:var(--pb-butter);opacity:.9;z-index:0;
}
#view-health #hp-nick .cw2-hero::before{
  content:"";position:absolute;right:30px;bottom:-90px;width:160px;height:160px;border-radius:50%;
  background:var(--pb-coral);opacity:.85;z-index:0;
}
#view-health #hp-nick .cw2-hh{
  position:relative;z-index:1;font-family:var(--pb-num);letter-spacing:.16em;color:rgba(255,255,255,.6);
}
#view-health #hp-nick .cw2-rings{position:relative;z-index:1;}
#view-health #hp-nick .cw2-ring .rlab{font-family:var(--pb-num);color:rgba(255,255,255,.75);}

/* moving/alert bar → butter, ink outline, sticker shadow */
#view-health #hp-nick .cw2-mv{
  background:var(--pb-butter);border:1.5px solid var(--pb-ink);border-radius:16px;
  color:var(--pb-ink);box-shadow:3px 3px 0 var(--pb-ink);font-family:var(--pb-num);font-weight:700;font-size:12px;
}
#view-health #hp-nick .cw2-mv .d{display:none;} /* bolt icon replaces the dot */
#view-health #hp-nick .cw2-mv svg.mvb{width:16px;height:16px;flex:none;}
#view-health #hp-nick .cw2-mv{animation:none;}
/* book / trend-jump links: size an inline sprite icon correctly */
#view-health #hp-nick .cw2-link svg.i{width:12px;height:12px;vertical-align:-2px;}
/* out-of-range filter chip: sprite icon sizing */
#view-health .oor-toggle svg.i{width:13px;height:13px;vertical-align:-2px;margin-right:2px;}

/* stat tiles — color fills come from the --tile-* remap; add outlines + type */
#view-health #hp-nick .cw2-vt[class*="cw2-vt-"]{
  border:1.5px solid rgba(25,22,33,.35);border-radius:24px;box-shadow:none!important;
}
#view-health #hp-nick .cw2-vt .v{font-family:var(--pb-num);font-weight:700;letter-spacing:-.03em;}
#view-health #hp-nick .cw2-vt-ic{border-radius:50%;background:var(--pb-ink);color:#fff;width:32px;height:32px;}
#view-health #hp-nick .cw2-vt-ic svg.i{width:15px;height:15px;vertical-align:0;}
#view-health #hp-nick .cw2-delta{font-family:var(--pb-num);}
#view-health #hp-nick .cw2-vt-bars .blbl{font-family:var(--pb-num);}
#view-health #hp-nick .cw2-note{font-family:var(--pb-num);font-size:10.5px;letter-spacing:.04em;color:var(--pb-dim);}

/* ---- 6. Priorities (lanes) ---- */
#view-health #hp-nick .cw2-lh{
  font-family:var(--pb-head);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--pb-ink);
}
#view-health #hp-nick .cw2-lh .rk{
  font-family:var(--pb-num);font-weight:700;font-size:9.5px;letter-spacing:.08em;
  background:var(--pb-butter);color:var(--pb-ink);border:1.5px solid var(--pb-ink);border-radius:9px;padding:3px 8px;
}
#view-health #hp-nick .cw2-pc{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:22px;box-shadow:none!important;
}
#view-health #hp-nick .cw2-gt{color:var(--pb-ink);font-weight:700;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
/* uniform priority boxes: a fixed header height so shortened titles all size the
   same, and a title clamp so any wrap can never make one card taller than its row */
#view-health #hp-nick .cw2-pg{min-height:78px;align-items:center;}
#view-health #hp-nick .cw2-ga{color:#524c5c;}
#view-health #hp-nick .cw2-pk{font-family:var(--pb-num);color:var(--pb-dim);}
#view-health #hp-nick .cw2-pk b{font-family:var(--pb-num);color:var(--pb-ink);}
#view-health #hp-nick .cw2-car{color:var(--pb-ink);opacity:.45;}
/* status dots: mint = on-track/good · butter = watch · coral = moving/attention */
#view-health #hp-nick .cw2-sd{border:1.5px solid var(--pb-ink);box-shadow:none;}
#view-health #hp-nick .cw2-sd.ontrack{background:var(--pb-mint);}
#view-health #hp-nick .cw2-sd.watch{background:var(--pb-butter);}
#view-health #hp-nick .cw2-sd.moving{background:var(--pb-coral);animation:none;}
/* CURRENT / STALE badges. NB CURRENT badges render with an EMPTY style=""
   attribute, so match on style*="background" (STALE's inline bg), never bare
   [style] — bare [style] would coral-flag every badge. */
#view-health #hp-nick .cw2-cur{
  font-family:var(--pb-num);font-size:9px;font-weight:700;letter-spacing:.08em;
  border:1.5px solid var(--pb-ink);border-radius:7px;padding:2px 7px;
  background:var(--pb-mint);color:var(--pb-ink);
}
#view-health #hp-nick .cw2-cur[style*="background"]{background:var(--pb-coral)!important;color:var(--pb-ink)!important;}
/* expanded problem card → butter xcard w/ sticker shadow */
#view-health #hp-nick .cw2-pc.op{
  background:var(--pb-butter);border:1.5px solid var(--pb-ink);box-shadow:5px 5px 0 var(--pb-ink)!important;
}
#view-health #hp-nick .cw2-pc.op .cw2-cur{background:#fff;}
#view-health #hp-nick .cw2-pc.op .cw2-cur[style*="background"]{background:var(--pb-coral)!important;}
#view-health #hp-nick .cw2-blk{color:#332e3d;}
#view-health #hp-nick .cw2-blk b{
  font-family:var(--pb-num);font-size:10px;letter-spacing:.14em;color:var(--pb-ink);
  display:flex;align-items:center;gap:7px;
}
#view-health #hp-nick .cw2-blk b::before{
  content:"";width:8px;height:8px;border-radius:3px;background:var(--pb-ink);display:inline-block;flex:none;
}
#view-health #hp-nick .cw2-sol{
  background:#fff;border:1.5px solid rgba(25,22,33,.18);border-radius:14px;padding:10px 12px;margin-bottom:7px;
}
#view-health #hp-nick .cw2-ck{border:2px solid var(--pb-ink);border-radius:7px;background:#fff;}
#view-health #hp-nick .cw2-sol.on .cw2-ck{background:var(--pb-ink);border-color:var(--pb-ink);}
#view-health #hp-nick .cw2-link{
  font-family:var(--pb-num);background:#fff;border:1.5px solid var(--pb-ink);color:var(--pb-ink);
  border-radius:999px;padding:6px 12px;
}
#view-health #hp-nick .cw2-co{border-top:1.5px dashed rgba(25,22,33,.25);}
#view-health #hp-nick .cw2-cn{border-left-width:3px;border-radius:2px;color:#3c3646;}
#view-health #hp-nick .cw2-cn.sk{border-color:var(--pb-butter);}
#view-health #hp-nick .cw2-cn.sk b{color:var(--pb-ink);}
#view-health #hp-nick .cw2-cn.an{border-color:var(--pb-mint);}
#view-health #hp-nick .cw2-cn.an b{color:var(--pb-ink);}
#view-health #hp-nick .cw2-cn.al{border-color:var(--pb-lilac);}
#view-health #hp-nick .cw2-cn.al b{color:var(--pb-ink);}
#view-health #hp-nick .cw2-flag{
  background:var(--pb-butter);border:1.5px solid var(--pb-ink);color:var(--pb-ink);border-radius:14px;
}

/* ---- 7. Protocol tab ---- */
/* time chips rail (protocol.js .pt-chips) */
#view-health .pt-chips .pt-chip{
  font-family:var(--pb-num);font-size:12px;font-weight:500;
  background:#fff;border:1.5px solid rgba(25,22,33,.2);color:#4a4453;border-radius:999px;
}
#view-health .pt-chips .pt-chip-now{background:var(--pb-ink);color:var(--pb-butter);border-color:var(--pb-ink);}
#view-health .pt-chips .pt-chip-done{background:var(--pb-mint);color:var(--pb-ink);border-color:rgba(25,22,33,.2);}
/* dark "right now" card (pt-now inherits --ink/--cream remap; sharpen the rest) */
#view-health .pt-now{border-radius:30px;box-shadow:none;color:#fff;}
#view-health .pt-now .pt-title{font-family:var(--pb-head);font-weight:800;font-size:30px;letter-spacing:-.03em;color:#fff;}
#view-health .pt-eyebrow{font-family:var(--pb-num);color:var(--pb-butter);letter-spacing:.18em;}
#view-health .pt-count{font-family:var(--pb-num);color:rgba(255,255,255,.7);background:rgba(255,255,255,.1);}
#view-health .pt-deco .pt-c1{background:var(--pb-lilac);opacity:.32;width:190px;height:190px;right:-60px;top:auto;bottom:-80px;}
#view-health .pt-deco .pt-c2{background:var(--pb-butter);opacity:.25;}
#view-health .pt-dot-full{background:var(--pb-butter);}
#view-health .pt-dot-partial{background:var(--pb-coral);}
#view-health .pt-i-name{color:#fff;}
#view-health .pt-i-dose{color:rgba(255,255,255,.6);font-family:var(--pb-num);}
#view-health .pt-done-btn{
  background:var(--pb-butter);color:var(--pb-ink);border-radius:16px;
  font-family:var(--pb-num);font-weight:700;font-size:15px;border:none;
}
#view-health .pt-ex-chk{border-color:rgba(255,255,255,.5);}
#view-health .pt-ex-chk.pt-ex-on{background:var(--pb-butter);border-color:var(--pb-butter);}
#view-health .pt-ex-name{color:#fff;}
/* EQ / Emotional protocol sub-cards → coral / lilac full fills, ink text */
#view-health #hp-nick .cw2-pcard{
  color:var(--pb-ink);border:1.5px solid var(--pb-ink);border-radius:28px;box-shadow:none;
}
#view-health #hp-nick .cw2-pcard.clay{background:var(--pb-coral);}
#view-health #hp-nick .cw2-pcard.plum{background:var(--pb-lilac);}
#view-health #hp-nick .cw2-pc-ic{background:var(--pb-ink);color:#fff;border-radius:14px;}
#view-health #hp-nick .cw2-pc-title{font-family:var(--pb-head);font-weight:700;font-size:17px;letter-spacing:-.01em;}
#view-health #hp-nick .cw2-pc-sub{color:rgba(25,22,33,.6);font-family:var(--pb-num);font-weight:600;}
#view-health #hp-nick .cw2-pc-row{
  background:rgba(255,255,255,.55);border:1.5px solid rgba(25,22,33,.15);border-radius:13px;color:var(--pb-ink);
}
#view-health #hp-nick .cw2-pc-row .d{font-family:var(--pb-num);font-weight:700;font-size:10.5px;color:rgba(25,22,33,.55);opacity:1;text-transform:uppercase;letter-spacing:.04em;}
#view-health #hp-nick .cw2-eqopen-btn:hover{background:rgba(255,255,255,.75);}

/* ---- 8. Data tab ---- */
/* generic cards → white, ink outline */
#view-health .card{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:24px;box-shadow:none;
}
/* "Your week" narrative → sky feature card */
#view-health #hp-nick section.card[data-cwtop]{
  background:var(--pb-sky);border:1.5px solid var(--pb-ink);box-shadow:5px 5px 0 var(--pb-ink);border-radius:28px;
}
/* Bio age → mint feature card */
#view-health .bioage-card{
  background:var(--pb-mint)!important;border:1.5px solid var(--pb-ink)!important;
  border-left:1.5px solid var(--pb-ink)!important;box-shadow:none!important;border-radius:28px!important;
}
/* system kickers */
#view-health .dc-sgrp{
  font-family:var(--pb-num);font-weight:700;font-size:10px;letter-spacing:.16em;color:rgba(25,22,33,.55);
}
/* marker tiles — B2 Pop Bento: uniform-height white tiles, name+dot, big value,
   ONE compact horizontal chain (last 2-3 readings) + dates row + status spark.
   min-height + flex column keep every tile the same height so the wall reads calm. */
#view-health .dc-m,
#view-health #hp-nick .dc-m{
  background:#fff;border:1.5px solid var(--pb-line)!important;border-radius:20px!important;box-shadow:none!important;
  display:flex;flex-direction:column;min-height:138px;padding:13px 14px 12px;box-sizing:border-box;
}
#view-health .dc-m .top{margin-bottom:2px;}
#view-health .dc-m .nm{font-size:11.5px;font-weight:700;color:var(--pb-ink);}
#view-health .dc-m .dot{border:1.5px solid var(--pb-ink);width:9px;height:9px;}
#view-health .dc-m .dot-sage{background:var(--pb-mint);}
#view-health .dc-m .dot-gold{background:var(--pb-butter);}
#view-health .dc-m .dot-red{background:var(--pb-coral);}
#view-health .dc-m .val{font-family:var(--pb-num)!important;font-weight:700;font-size:23px;letter-spacing:-.02em;color:var(--pb-ink);line-height:1;margin-top:2px;}
#view-health .dc-m .val .u{font-family:var(--pb-num);font-size:11px;color:rgba(25,22,33,.45);}
/* ONE-LINE chain: old -> old -> new (no wrap, no stacked reading columns) */
#view-health .dc-m .trend{
  font-family:var(--pb-num);display:flex;flex-wrap:nowrap;gap:7px;align-items:baseline;
  overflow:hidden;margin-top:8px;line-height:1.2;
}
#view-health .dc-m .trend .old{font-size:11px;color:rgba(25,22,33,.45);}
#view-health .dc-m .trend .arr{font-size:10px;color:rgba(25,22,33,.4);}
#view-health .dc-m .trend .new{font-size:11.5px;font-weight:700;color:var(--pb-ink);}
#view-health .dc-m .trend b{color:var(--pb-ink);font-weight:700;}
/* dates spread beneath the chain */
#view-health .dc-m .mdates{
  display:flex;justify-content:space-between;font-family:var(--pb-num);font-size:8.5px;
  color:rgba(25,22,33,.4);letter-spacing:.04em;margin-top:2px;
}
#view-health .dc-m .mdates span{white-space:nowrap;}
#view-health .dc-m .spark{display:block;width:100%;height:26px;margin-top:6px;}
#view-health .dc-m .foot{font-family:var(--pb-num);font-size:8.5px;letter-spacing:.04em;color:rgba(25,22,33,.45);margin-top:auto;padding-top:6px;}
#view-health .dc-m.oor .val{color:#c65b34;}
#view-health .dc-m.oor{border-color:rgba(198,91,52,.55)!important;}
#view-health .dc-m.watchb{border-color:rgba(224,134,44,.5)!important;}
/* markers grid: equal columns + comfortable, consistent gaps at every width */
#view-health .dc-grid3{gap:12px;align-items:stretch;}
/* filter chips: Out-of-range toggle + Ask-Skippy nudge → mockup .mf pills */
#view-health .oor-toggle{
  font-family:var(--pb-num);font-size:11px;font-weight:600;color:#4a4453;
  background:#fff;border:1.5px solid rgba(25,22,33,.2);border-radius:999px;padding:7px 13px;
}
#view-health .oor-toggle.on{background:var(--pb-mint);color:var(--pb-ink);border-color:var(--pb-ink);}
#view-health .sk-nudge{
  font-family:var(--pb-num);font-size:11px;font-weight:600;color:#4a4453;
  background:#fff;border:1.5px solid rgba(25,22,33,.2);border-radius:999px;
}
/* Trends range pills */
#view-health .dc-rangebar button{
  font-family:var(--pb-num);background:#fff;border:1.5px solid rgba(25,22,33,.2);border-radius:999px;color:#4a4453;
}
#view-health .dc-rangebar button.is-active,#view-health .dc-rangebar button.on{
  background:var(--pb-ink);color:var(--pb-butter);border-color:var(--pb-ink);
}
/* priorities rows (all member panels) */
#view-health .dc-prio{
  background:#fff;border:1.5px solid var(--pb-line);border-left:1.5px solid var(--pb-line);border-radius:22px;
}
#view-health .dc-prio .rk{
  font-family:var(--pb-num);font-weight:700;font-size:12px;color:var(--pb-ink);
  min-width:26px;height:26px;border:1.5px solid var(--pb-ink);border-radius:9px;
  display:flex;align-items:center;justify-content:center;background:var(--pb-butter);
}
#view-health .dc-prio .pt{color:var(--pb-ink);}
#view-health .dc-prio .lv{font-family:var(--pb-num);border:1.5px solid var(--pb-ink);border-radius:7px;}
#view-health .dc-prio .lv[style*="251,113,133"]{background:var(--pb-coral)!important;color:var(--pb-ink)!important;}
#view-health .dc-prio .lv[style*="217,154,58"]{background:var(--pb-butter)!important;color:var(--pb-ink)!important;}
#view-health .dc-prio .lv[style*="138,155,120"]{background:var(--pb-mint)!important;color:var(--pb-ink)!important;}
/* pending-tests expander + experiments */
#view-health .hl-pt-chip{font-family:var(--pb-num);border:1.5px solid var(--pb-ink);background:var(--pb-butter);color:var(--pb-ink);border-radius:999px;}
#view-health .hl-pt-chk{border:2px solid var(--pb-ink);}
#view-health .dc-exp{background:#fff;border:1.5px solid var(--pb-line);border-radius:16px;}
#view-health .ex-since{font-family:var(--pb-num);color:var(--pb-dim);}
/* mini stat chips */
#view-health .hc-mini{background:var(--pb-paper);border:1.5px solid var(--pb-line);border-radius:14px;}
#view-health .hc-pill{font-family:var(--pb-num);}
#view-health .hc-lbl{color:var(--pb-dim);}

/* ---- 9. Data-tab packing: KILL the negative space.
   Desktop: replace the JS 2-col flex packer's layout with true CSS columns —
   the two .cw2-data-col wrappers become display:contents so every .cw2-dunit
   flows into one balanced multicol stream (break-inside:avoid keeps units
   whole). No trailing voids by construction. Mobile (<1000px): single column
   flow, unchanged. ---- */
@media (min-width:1000px){
  #view-health #hp-nick .cw2-data-grid{display:block;columns:2;column-gap:14px;}
  #view-health #hp-nick .cw2-data-col{display:contents;}
  #view-health #hp-nick .cw2-dunit{
    break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
    margin:0 0 14px;width:100%;
  }
}

/* ---- 10. Marker popup (#mkOverlay lives on <body>) → paper modal,
   hard outline + sticker shadow, butter chartbox. Scoped to #mkOverlay so the
   business click-through modal (#bizListOverlay, same .mk-* classes) keeps its
   own view's skin untouched. ---- */
#mkOverlay{background:rgba(25,22,33,.45);backdrop-filter:blur(3px);align-items:center;padding:18px;}
#mkOverlay .mk-sheet{
  background:var(--pb-paper);border:1.5px solid var(--pb-ink);border-radius:28px;
  box-shadow:6px 6px 0 var(--pb-ink);height:auto;max-height:88vh;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
}
#mkOverlay .mk-grp{font-family:var(--pb-num);font-size:10px;font-weight:700;letter-spacing:.16em;color:#b0562e;}
#mkOverlay .mk-name{font-family:var(--pb-head);font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--pb-ink);}
#mkOverlay .mk-close{
  background:#fff;border:1.5px solid var(--pb-ink);border-radius:50%;width:30px;height:30px;
  font-size:13px;font-weight:700;color:var(--pb-ink);cursor:pointer;
}
#mkOverlay .mk-val{font-family:var(--pb-num);font-weight:700;font-size:42px;letter-spacing:-.03em;color:var(--pb-ink);margin-top:14px;}
#mkOverlay .mk-val .u{font-family:var(--pb-num);font-size:16px;color:rgba(25,22,33,.5);}
#mkOverlay .mk-opt{font-family:var(--pb-num);font-size:11px;color:rgba(25,22,33,.55);}
#mkOverlay .mk-chart{
  background:var(--pb-butter);border:1.5px solid var(--pb-ink);border-radius:18px;
  padding:10px;margin-top:16px;height:150px;box-sizing:border-box;
}
#mkOverlay .mk-hist-h{font-family:var(--pb-num);font-size:10px;font-weight:700;letter-spacing:.14em;color:rgba(25,22,33,.55);}
#mkOverlay .mk-hist-row{border-top:1.5px solid rgba(25,22,33,.12);font-size:13.5px;}
#mkOverlay .mk-hist-row span{font-family:var(--pb-num);font-size:11.5px;color:rgba(25,22,33,.6);}
#mkOverlay .mk-hist-row b{font-family:var(--pb-num);font-weight:700;color:var(--pb-ink);}

/* ---- 11. Non-Nick panels: old warm-palette inline chips read as pop chips ---- */
#view-health .hp-panel .eqp summary span[style*="border-radius:11px"]{
  background:var(--pb-butter)!important;border:1.5px solid var(--pb-ink);color:var(--pb-ink);
}
#view-health details.hc-details{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:24px;box-shadow:none;
}
#view-health .dc-protocol-summary{color:var(--pb-ink);}
#view-health .dc-protocol-list .time{font-family:var(--pb-num);color:var(--pb-dim);}
#view-health .pchk{border:2px solid var(--pb-ink);}

/* desktop hover polish stays subtle (kill old warm shadows) */
@media (min-width:1100px){
  #view-health .card:hover,#view-health .dc-m:hover{box-shadow:3px 3px 0 rgba(25,22,33,.9)!important;transform:none;}
}

/* =====================================================================
   =====================================================================
   POP BENTO — WAVES 2 + 3 (Jul 9 2026, wave-2/3 builder)
   Wave 2: global shell (paper page, ink/butter nav pill + desktop rail)
           + Home view.
   Wave 3: Calendar · To-Do · Finances · Shopping · Business · Extras.
   APPEND-ONLY below Wave 1 (health rules above are untouched).
   HARD EXCLUSIONS: #view-skippy + learning-app get NO rules here — the
   warm-token remap is scoped per-view so the kids' area keeps its old
   skin untouched.
   ===================================================================== */

/* ---- W2.0 Root tokens (pb- namespace, additive; Wave 1's copies stay
   scoped to #view-health/#mkOverlay and are unchanged) ---- */
:root{
  --pb-paper:#faf6ee; --pb-ink:#191621; --pb-butter:#ffd66b; --pb-lilac:#cfc0f5;
  --pb-mint:#c2e7c6; --pb-coral:#ff9d7a; --pb-sky:#bcd9f2; --pb-blush:#f6c6cf;
  --pb-dim:#6f6a78; --pb-line:rgba(25,22,33,.16); --pb-hard:rgba(25,22,33,.35);
  --pb-head:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --pb-num:"Space Grotesk","Hanken Grotesk",system-ui,sans-serif;
}

/* ---- W2.1 Warm-token remap inside every WAVE-2/3 view (the Wave-1 trick:
   inline styles + JS templates referencing the old vars re-tint for free).
   #view-skippy deliberately absent. ---- */
#view-home, #view-business, #view-calendar, #view-todo,
#view-finances, #view-shopping, #view-extras, #bizListOverlay{
  --cream:#faf6ee; --cream-2:#ffffff; --card:#ffffff;
  --ink:#191621; --ink-2:#191621; --text:#332e3d;
  --plum:#191621; --plum-soft:#3c3548;
  --clay:#c65b34; --gold:#e0862c; --sage:#6f9b72;
  --gold-ink:#8a5a10; --sage-ink:#496b4c;
  --muted:#6f6a78; --line:rgba(25,22,33,.16);
  --tile-lilac:#cfc0f5; --tile-lilac-ink:#191621; --tile-lilac-mut:#4a4453;
  --tile-butter:#ffd66b; --tile-butter-ink:#191621; --tile-butter-mut:#4a4453;
  --tile-sage:#c2e7c6;  --tile-sage-ink:#191621;  --tile-sage-mut:#4a4453;
  --tile-blush:#f6c6cf; --tile-blush-ink:#191621; --tile-blush-mut:#4a4453;
  --chip-bg:#ffffff; --chip-ink:#575061;
  --radius:24px; --radius-sm:22px;
  --shadow-card:none; --shadow:none; --shadow-sm:none; --shadow-md:none;
  --hairline:inset 0 0 0 0 transparent;
  --serif:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --pp-ink:#191621; --pp-display:"Space Grotesk","Hanken Grotesk",system-ui,sans-serif;
  --pp-hero-mut:rgba(255,255,255,.6); --pp-hero-suffix:rgba(255,255,255,.55);
  --pp-hero-line:rgba(255,255,255,.75);
}

/* ---- W2.2 Shell: paper page at every width ---- */
body{background:var(--pb-paper);}
@media (min-width:900px){
  body{background:var(--pb-paper);}
  .app{background:var(--pb-paper);}
}
@media (min-width:1100px){
  body{background:var(--pb-paper);}
  .app{background:transparent;}
  /* ambient gutter shapes re-tinted to the pop palette */
  body::before{
    background:
      radial-gradient(circle 500px at -120px 16%, rgba(207,192,245,0.5), transparent 62%),
      radial-gradient(circle 400px at 6% 96%, rgba(194,231,198,0.45), transparent 65%),
      radial-gradient(circle 330px at -60px 76%, rgba(255,214,107,0.18), transparent 65%);
  }
  body::after{
    background:
      radial-gradient(circle 580px at calc(100% + 150px) 8%, rgba(255,214,107,0.22), transparent 62%),
      radial-gradient(circle 360px at 98% 74%, rgba(207,192,245,0.4), transparent 65%);
  }
}
@media (min-width:1280px){
  .app::after{-webkit-text-stroke:1.5px rgba(25,22,33,0.08);}
}

/* ---- W2.3 Sprite icon base, global (Wave 1 scoped it to health; the
   business/finances/home templates now use it too). ---- */
svg.i{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;display:inline-block;
  vertical-align:-3px;flex:none;
}
.section-title svg.i{width:17px;height:17px;vertical-align:-3.5px;margin-right:2px;}
.card-head h2 svg.i{width:16px;height:16px;margin-right:3px;}

/* ---- W2.4 Nav — mobile floating pill: ink bar, butter active pill ---- */
.tabbar{background:var(--pb-ink);box-shadow:0 14px 30px rgba(25,22,33,.32);}
.tab{color:rgba(255,255,255,.55);}
.tab.is-active{background:var(--pb-butter);color:var(--pb-ink);}
.tab.is-active::after{content:none;}   /* kill the old gold dot */
.tab-badge{
  background:var(--pb-coral);color:var(--pb-ink);
  font-family:var(--pb-num);box-shadow:0 0 0 1.5px var(--pb-ink);
}
@media (min-width:900px){
  .tabbar{background:var(--pb-ink);}
  .tab.is-active{background:var(--pb-butter);}
  .tab:hover:not(.is-active){background:rgba(255,255,255,0.08);}
}
@media (min-width:1100px){
  .tabbar::before{ /* wordmark: paper text, butter dot */
    color:#faf6ee;
    background:radial-gradient(circle 2.5px at calc(100% - 5px) calc(100% - 9px),
      var(--pb-butter) 99%, transparent) no-repeat;
  }
  .tab{color:rgba(255,255,255,.55);}
  .tab-lbl{font-family:var(--pb-num);font-weight:500;font-size:12.5px;}
  .tab.is-active{background:var(--pb-butter);color:var(--pb-ink);}
  .tab.is-active .tab-lbl{font-weight:700;}
  .tab.is-active::after{content:none;}
}
@media (min-width:1100px) and (hover:hover){
  .tab:hover:not(.is-active){background:rgba(255,255,255,.08);color:#fff;}
}

/* ---- W2.5 Shared page furniture in every wave-2/3 view: Bricolage
   titles, white ink-outline cards, Space Grotesk kickers ---- */
#view-home .topbar h1, #view-business .topbar h1, #view-calendar .topbar h1,
#view-todo .topbar h1, #view-finances .topbar h1, #view-shopping .topbar h1,
#view-extras .topbar h1{
  font-family:var(--pb-head);font-weight:800;font-size:34px;
  letter-spacing:-.03em;color:var(--pb-ink);font-style:normal;
}
#view-business .section-title, #view-calendar .section-title,
#view-todo .section-title, #view-finances .section-title,
#view-shopping .section-title, #view-extras .section-title{
  font-family:var(--pb-head);font-weight:700;font-size:19px;
  letter-spacing:-.01em;text-transform:none;color:var(--pb-ink);
  margin:24px 4px 10px;display:flex;align-items:center;gap:8px;
}
#view-business .section-title::after, #view-calendar .section-title::after,
#view-todo .section-title::after, #view-finances .section-title::after,
#view-shopping .section-title::after, #view-extras .section-title::after{content:none;}
#view-business .section-title .hc-lbl{
  margin-left:auto;font-family:var(--pb-num);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--pb-ink);
  background:var(--pb-butter);border:1.5px solid var(--pb-ink);
  border-radius:999px;padding:3px 10px;
}
#view-business .card, #view-calendar .card, #view-todo .card,
#view-finances .card, #view-shopping .card, #view-extras .card{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:24px;
  box-shadow:none;
}
#view-calendar .card-head h2, #view-finances .card-head h2,
#view-business .card-head h2, #view-extras .card-head h2{
  font-family:var(--pb-head);font-size:17px;font-weight:700;
  letter-spacing:-.01em;text-transform:none;color:var(--pb-ink);font-style:normal;
}
#view-calendar .card-head .hc-lbl, #view-finances .card-head .hc-lbl{
  font-family:var(--pb-num);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pb-dim);
}
/* chips/segmented (To-Do · Shopping · Finances · Business sub-tabs):
   white pill w/ ink outline → active solid ink (mockup member pills) */
.seg-btn, #view-business .hp-btn{
  font-family:var(--pb-num);font-weight:500;font-size:12px;
  background:#fff;border:1.5px solid var(--pb-line);color:#575061;
  padding:7px 14px;border-radius:999px;
}
.seg-btn.is-active, #view-business .hp-btn.is-active{
  background:var(--pb-ink);color:#fff;border-color:var(--pb-ink);font-weight:700;
}
/* buttons in touched views: butter CTA w/ ink outline */
#view-todo .btn-primary, #view-shopping .btn-primary, #view-extras .btn-primary{
  background:var(--pb-butter);color:var(--pb-ink);border:1.5px solid var(--pb-ink);
  border-radius:14px;font-family:var(--pb-num);font-weight:700;box-shadow:none;
}
#view-todo .fin-num-input, #view-shopping .fin-num-input{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:12px;color:var(--pb-ink);
}
#view-todo .fin-num-input:focus, #view-shopping .fin-num-input:focus{
  border-color:var(--pb-ink);box-shadow:none;
}
/* pop.js dark statement heroes (To-Do · Shopping · Finances) → ink card,
   butter + coral circle bleeds, mint progress */
.pp-hero{background:var(--pb-ink);border-radius:30px;}
.pp-hero::before{background:var(--pb-butter);opacity:.9;}
.pp-hero::after{background:var(--pb-coral);opacity:.85;}
.pp-eyebrow{font-family:var(--pb-num);color:rgba(255,255,255,.6);letter-spacing:.16em;}
.pp-stat{color:#fff;}
.pp-pill{background:rgba(255,255,255,.18);}
.pp-pill.done{background:var(--pb-mint);}
.pp-line{color:rgba(255,255,255,.75);}
.pp-line .pp-star{color:var(--pb-butter);}
.pp-hero.pp-clear{background:var(--pb-ink);}
.pp-hero.pp-clear::before{background:var(--pb-mint);}
.pp-hero.pp-clear::after{background:var(--pb-butter);}
.pp-hero.pp-clear .pp-line{color:rgba(255,255,255,.75);}

/* ---- W2.6 HOME ---- */
/* greeting header */
#view-home .hero-date{
  font-family:var(--pb-num);font-weight:500;font-size:11.5px;
  letter-spacing:.06em;color:var(--pb-dim);
}
#view-home .hm-greet1{font-family:var(--sans);font-size:24px;font-weight:500;color:#3f3949;}
#view-home .hm-greet2{
  font-family:var(--pb-head);font-style:normal;font-weight:800;font-size:36px;
  letter-spacing:-.03em;color:var(--pb-ink);line-height:1.05;
}
#view-home .skippy-text.hm-affirm{
  font-family:var(--sans);font-style:normal;font-size:13px;font-weight:500;
  color:var(--pb-dim);
}
#view-home .hm-avatar{border:1.5px solid var(--pb-ink);box-shadow:3px 3px 0 var(--pb-ink);}
/* UP NEXT = the Home "today" summary → dark ink hero w/ circle bleeds */
#view-home .hm-upnext{
  background:var(--pb-ink);border-radius:30px;box-shadow:none;color:#fff;
  padding:18px;position:relative;overflow:hidden;
}
#view-home .hm-upnext::after{
  content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;
  border-radius:50%;background:var(--pb-butter);opacity:.9;z-index:0;
}
#view-home .hm-upnext::before{
  content:"";position:absolute;right:30px;bottom:-90px;width:160px;height:160px;
  border-radius:50%;background:var(--pb-coral);opacity:.85;z-index:0;
}
#view-home .hm-upnext > *{position:relative;z-index:1;}
#view-home .hm-upnext-eyebrow{
  font-family:var(--pb-num);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:rgba(255,255,255,.65);
}
#view-home .hm-upnext-meta{font-family:var(--pb-num);color:rgba(255,255,255,.55);}
/* the two blocks become glass inner tiles */
#view-home .hm-un-block{
  background:rgba(20,17,26,.55);border:1px solid rgba(255,255,255,.16);
  border-radius:20px;padding:11px 13px;backdrop-filter:blur(6px);
}
#view-home .hm-un-now:not([hidden]) + .hm-un-block{border-top:1px solid rgba(255,255,255,.16);padding-top:11px;margin-top:10px;}
#view-home .hm-un-lbl{
  font-family:var(--pb-num);font-size:10px;font-weight:700;letter-spacing:.14em;
  color:rgba(255,255,255,.55);
}
#view-home .hm-un-now .hm-un-lbl{color:var(--pb-butter);}
#view-home .hm-upnext-ic{background:rgba(255,255,255,.14);color:#fff;border-radius:12px;width:36px;height:36px;}
#view-home .hm-now-ic{background:var(--pb-butter);color:var(--pb-ink);}
#view-home .hm-upnext-title{color:#fff;font-weight:700;}
#view-home .hm-upnext-sub{color:rgba(255,255,255,.6);}
#view-home .hm-chev{color:var(--pb-butter);}
/* stat tiles → pop color fills, ink outline, ink circle icon badges */
#view-home .hm-stat, #view-home .hm-small, #view-home .hm-biz{
  border:1.5px solid var(--pb-hard);border-radius:24px;box-shadow:none;
}
#view-home .hm-stat-head{color:var(--pb-ink);font-weight:600;font-size:12.5px;}
#view-home .hm-stat-head svg{
  width:28px;height:28px;background:var(--pb-ink);color:#fff;border-radius:50%;
  padding:6px;box-sizing:border-box;
}
#view-home .hm-stat-num{
  font-family:var(--pb-num);font-weight:700;color:var(--pb-ink);letter-spacing:-.03em;
}
#view-home .hm-stat-foot{color:#4a4453;}
#view-home .hm-stat-todo{background:var(--pb-lilac);}
#view-home .hm-stat-todo .hm-stat-head,#view-home .hm-stat-todo .hm-stat-num{color:var(--pb-ink);}
#view-home .hm-stat-todo .hm-stat-foot{color:#4a4453;}
#view-home .hm-stat-today{background:var(--pb-mint);}
#view-home .hm-stat-today .hm-stat-head,#view-home .hm-stat-today .hm-stat-num{color:var(--pb-ink);}
#view-home .hm-today-t{font-family:var(--pb-num);color:var(--pb-ink);}
#view-home .hm-today-n{color:#33402f;}
#view-home .hm-today-empty{color:#4a5b48;}
#view-home .hm-seg{background:rgba(25,22,33,.18);}
#view-home .hm-seg.done{background:var(--pb-ink);}
/* H&S wide tile → butter feature bar (ink outline + sticker shadow) */
#view-home .hm-biz{
  background:var(--pb-butter);border:1.5px solid var(--pb-ink);
  box-shadow:3px 3px 0 var(--pb-ink);
}
#view-home .hm-biz-label{font-family:var(--pb-num);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(25,22,33,.6);}
#view-home .hm-biz-num{font-family:var(--pb-num);font-weight:700;color:var(--pb-ink);letter-spacing:-.02em;}
#view-home .hm-biz-suffix{color:rgba(25,22,33,.55);}
#view-home .hm-pill{
  background:var(--pb-ink);color:#fff;font-family:var(--pb-num);font-weight:700;
}
/* small tiles: shopping = blush · finances = white · extras = sky */
#view-home .hm-small-ic{
  width:32px;height:32px;background:var(--pb-ink);color:#fff;border-radius:50%;
  align-items:center;justify-content:center;
}
#view-home .hm-small-ic svg{width:16px;height:16px;}
#view-home .hm-small-name{color:var(--pb-ink);font-weight:700;}
#view-home .hm-small-sub{color:#4a4453;}
#view-home .hm-small-shop{background:var(--pb-blush);}
#view-home .hm-small-shop .hm-small-ic,#view-home .hm-small-fin .hm-small-ic,
#view-home .hm-small-extras .hm-small-ic{color:#fff;background:var(--pb-ink);}
#view-home .hm-small-shop .hm-small-name,#view-home .hm-small-shop .hm-small-sub{color:var(--pb-ink);}
#view-home .hm-small-shop .hm-small-sub{color:#4a4453;}
#view-home .hm-small-fin{background:#fff;box-shadow:none;}
#view-home .hm-small-fin .hm-small-name{color:var(--pb-ink);}
#view-home .hm-small-fin .hm-small-sub{color:var(--pb-dim);}
#view-home .hm-small-extras{background:var(--pb-sky);}
#view-home .hm-small-extras .hm-small-name{color:var(--pb-ink);}
#view-home .hm-small-extras .hm-small-sub{color:#37505f;}
#view-home .hm-small-badge{
  background:var(--pb-coral);color:var(--pb-ink);font-family:var(--pb-num);
  box-shadow:0 0 0 1.5px var(--pb-ink);
}
/* kids tile (Home tile only — links out; the in-app kids view is untouched):
   ink card, butter Open pill, pop avatar chips, lilac circle bleed */
#view-home .hm-kids{
  background:var(--pb-ink);border:1.5px solid var(--pb-ink);border-radius:24px;
  position:relative;overflow:hidden;
}
#view-home .hm-kids::after{
  content:"";position:absolute;right:-40px;top:-52px;width:120px;height:120px;
  border-radius:50%;background:var(--pb-lilac);opacity:.35;
}
#view-home .hm-kids > *{position:relative;z-index:1;}
#view-home .hm-kid-av{border:1.5px solid var(--pb-ink);font-family:var(--pb-num);}
#view-home .hm-kid-n{background:var(--pb-butter);color:var(--pb-ink);}
#view-home .hm-kid-w{background:var(--pb-lilac);color:var(--pb-ink);}
#view-home .hm-kids-name{color:#fff;font-weight:700;}
#view-home .hm-kids-sub{color:rgba(255,255,255,.6);}
#view-home .hm-kids-open{
  background:var(--pb-butter);color:var(--pb-ink);font-family:var(--pb-num);font-weight:700;
}

/* ---- W3.1 CALENDAR ---- */
/* light date hero */
#view-calendar .pp-cal-eyebrow{font-family:var(--pb-num);color:var(--pb-dim);letter-spacing:.14em;}
#view-calendar .pp-cal-day{font-family:var(--pb-head);font-weight:800;color:var(--pb-ink);letter-spacing:-.03em;}
#view-calendar .pp-cal-num{
  font-family:var(--pb-num);-webkit-text-stroke:2px var(--pb-ink);
}
@supports not (-webkit-text-stroke:2px #191621){#view-calendar .pp-cal-num{color:var(--pb-ink);}}
#view-calendar .pp-cal-sub{font-family:var(--pb-num);color:var(--pb-dim);}
/* UP NEXT banner → the calendar's ink moment w/ butter+coral bleeds */
#view-calendar .pp-upnext{background:var(--pb-ink);border-radius:26px;color:#fff;}
#view-calendar .pp-upnext::before{background:var(--pb-butter);opacity:.9;width:140px;height:140px;}
#view-calendar .pp-upnext::after{background:var(--pb-coral);opacity:.85;}
#view-calendar .pp-up-eyebrow{font-family:var(--pb-num);color:var(--pb-butter);letter-spacing:.16em;}
#view-calendar .pp-up-title{color:#fff;}
#view-calendar .pp-up-sub{color:rgba(255,255,255,.65);}
/* week strip: white ink-outline cells, today = solid ink, event dot = butter */
#view-calendar .day-cell{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:16px;
}
#view-calendar .day-cell .dow{font-family:var(--pb-num);font-weight:500;color:var(--pb-dim);}
#view-calendar .day-cell .dnum{font-family:var(--pb-num);font-weight:700;color:var(--pb-ink);font-size:16px;}
#view-calendar .day-cell.has-ev::after{background:var(--pb-butter);box-shadow:0 0 0 1px var(--pb-ink);width:6px;height:6px;}
#view-calendar .day-cell.today{background:var(--pb-ink);border-color:var(--pb-ink);}
#view-calendar .day-cell.today .dow,#view-calendar .day-cell.today .dnum{color:#fff;}
#view-calendar .day-cell.today.has-ev::after{background:var(--pb-butter);box-shadow:none;}
/* all-day chips */
#view-calendar .cal-allday-chip{
  background:var(--pb-butter);border:1.5px solid var(--pb-ink);color:var(--pb-ink);
  font-family:var(--pb-num);font-weight:700;font-size:11.5px;border-radius:999px;
}
/* timeline: white canvas, Space Grotesk hour labels, BUTTER now-line */
#view-calendar .cal-timeline{background:#fff;border:1.5px solid var(--pb-line);border-radius:18px;overflow-x:hidden;}
/* guard: a timeline block (JS px-lane math) can never spill past the viewport →
   no side-to-side page scroll on mobile, whatever the day's overlap count */
#view-calendar .cal-block{max-width:100%;}
#view-calendar .cal-allday{display:flex;flex-wrap:wrap;gap:6px;max-width:100%;}
#view-calendar .cal-allday-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#view-calendar .cal-hour{border-top:1px solid rgba(25,22,33,.08);}
#view-calendar .cal-hour-label{font-family:var(--pb-num);color:rgba(25,22,33,.4);background:#fff;}
#view-calendar .cal-now-line{
  height:3px;background:var(--pb-butter);box-shadow:0 0 0 1px var(--pb-ink);border-radius:2px;
}
#view-calendar .cal-now-line::before{
  width:10px;height:10px;background:var(--pb-butter);border:1.5px solid var(--pb-ink);
  top:-5px;left:-6px;box-sizing:border-box;
}
/* timeline blocks → pop color fills w/ ink outlines (rotation c1-c4) */
#view-calendar .cal-block{border-radius:12px;outline:none;}
#view-calendar .cal-block .cal-block-title{font-weight:700;}
#view-calendar .cal-block .cal-block-time{font-family:var(--pb-num);}
#view-calendar .cal-block.cal-c1,#view-calendar .cal-block.cal-c2,
#view-calendar .cal-block.cal-c3,#view-calendar .cal-block.cal-c4{
  border:1.5px solid var(--pb-ink);box-shadow:none;
}
#view-calendar .cal-block.cal-c1{background:var(--pb-lilac);}
#view-calendar .cal-block.cal-c1 .cal-block-title{color:var(--pb-ink);}
#view-calendar .cal-block.cal-c1 .cal-block-time{color:rgba(25,22,33,.55);}
#view-calendar .cal-block.cal-c2{background:var(--pb-butter);}
#view-calendar .cal-block.cal-c2 .cal-block-title{color:var(--pb-ink);}
#view-calendar .cal-block.cal-c2 .cal-block-time{color:rgba(25,22,33,.55);}
#view-calendar .cal-block.cal-c3{background:var(--pb-sky);}
#view-calendar .cal-block.cal-c3 .cal-block-title{color:var(--pb-ink);}
#view-calendar .cal-block.cal-c3 .cal-block-time{color:rgba(25,22,33,.55);}
#view-calendar .cal-block.cal-c4{background:var(--pb-mint);}
#view-calendar .cal-block.cal-c4 .cal-block-title{color:var(--pb-ink);}
#view-calendar .cal-block.cal-c4 .cal-block-time{color:rgba(25,22,33,.55);}
#view-calendar .cal-block-past{opacity:.38;background:#fff;border:1.5px solid var(--pb-line);}
/* upcoming agenda */
#view-calendar .cal-upcoming-day{
  font-family:var(--pb-num);font-weight:700;font-size:10px;letter-spacing:.16em;
  color:rgba(25,22,33,.55);
}
#view-calendar .g-time{font-family:var(--pb-num);color:var(--pb-ink);font-weight:700;}
#view-calendar .glance-item .dot{border:1.5px solid var(--pb-ink);width:9px;height:9px;}
#view-calendar .dot-plum{background:var(--pb-lilac);}
#view-calendar .dot-clay{background:var(--pb-coral);}
#view-calendar .dot-gold{background:var(--pb-butter);}
#view-calendar .dot-sage{background:var(--pb-mint);}

/* ---- W3.2 TO-DO (+ shared prow rows w/ Shopping) ---- */
#view-todo .td-prio, #view-shopping .td-prio{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:22px;
  box-shadow:none;padding:14px 16px;
}
#view-todo .td-prio .pt, #view-shopping .td-prio .pt{
  font-size:14px;font-weight:700;color:var(--pb-ink);
}
#view-todo .td-prio .pw, #view-shopping .td-prio .pw{color:var(--pb-dim);}
/* urgency dot (reskin-family ::before) → square ink-outline bullet */
#view-todo .td-prio::before{
  width:8px;height:8px;border-radius:3px;background:#fff;border:1.5px solid var(--pb-line);
}
#view-todo .td-prio.td-overdue::before{background:var(--pb-coral);border-color:var(--pb-ink);}
#view-todo .td-prio.td-today::before{background:var(--pb-butter);border-color:var(--pb-ink);}
#view-todo .td-prio.td-week::before{background:var(--pb-mint);border-color:var(--pb-ink);}
/* checkboxes: white square w/ ink outline → done = mint */
#view-todo .chk, #view-shopping .chk{
  width:22px;height:22px;border-radius:8px;border:2px solid var(--pb-ink);
  background:#fff;color:transparent;
}
#view-todo .chk:hover, #view-shopping .chk:hover{border-color:var(--pb-ink);}
#view-todo .td-prio.chk-done .chk, #view-shopping .td-prio.chk-done .chk,
#view-todo .chk-done .chk, #view-shopping .chk-done .chk{
  background:var(--pb-mint);border-color:var(--pb-ink);color:var(--pb-ink);
}
#view-todo .td-prio.chk-done, #view-shopping .td-prio.chk-done{border-color:var(--pb-mint);}
/* due-date level pills (.td-lv + pop.js date chips) */
#view-todo .td-lv{
  font-family:var(--pb-num);font-weight:700;border:1.5px solid var(--pb-ink);
  border-radius:8px;background:#fff;color:var(--pb-ink);
}
#view-todo .td-prio.td-overdue .td-lv{background:var(--pb-coral);color:var(--pb-ink);}
#view-todo .td-prio.td-today .td-lv{background:var(--pb-butter);color:var(--pb-ink);}
#view-todo .td-prio.td-week .td-lv{background:var(--pb-mint);color:var(--pb-ink);}
#view-todo .todo-noah-intro{color:#4a4453;}
#view-todo .todo-noah-intro strong{color:var(--pb-ink);}

/* ---- W3.3 FINANCES ---- */
/* month chips */
#view-finances .fin-mo-btn{
  font-family:var(--pb-num);font-weight:500;font-size:12px;
  background:#fff;border:1.5px solid var(--pb-line);color:#575061;border-radius:999px;
}
#view-finances .fin-mo-btn.is-active{
  background:var(--pb-ink);color:#fff;border-color:var(--pb-ink);font-weight:700;
}
#view-finances .fin-mo-btn.is-active .fin-mo-tag{color:var(--pb-butter);}
/* narrative/insights cards (app.js tags them with the inline cyan
   border-left) → sky feature cards w/ hard outline + sticker shadow */
#view-finances .card[style*="22d3ee"]{
  background:var(--pb-sky)!important;border:1.5px solid var(--pb-ink)!important;
  border-left:1.5px solid var(--pb-ink)!important;box-shadow:5px 5px 0 var(--pb-ink);
  border-radius:28px;
}
/* summary + lists: Space Grotesk numbers, ink-outlined dots */
#view-finances .glance-item .dot{border:1.5px solid var(--pb-ink);width:9px;height:9px;}
#view-finances .dot-sage{background:var(--pb-mint);}
#view-finances .dot-clay{background:var(--pb-coral);}
#view-finances .dot-gold{background:var(--pb-butter);}
#view-finances .glance-item span[style*="margin-left:auto"]{
  font-family:var(--pb-num);
}
/* category groups → color-rotation tiles (outer card dissolves) */
#view-finances .card:has(.fin-cats){
  background:transparent;border:none;box-shadow:none;padding:0;
}
#view-finances .card:has(.fin-cats) .card-head{padding:0 4px;margin-bottom:4px;}
#view-finances .fin-cat-group{
  border:1.5px solid var(--pb-hard);border-radius:22px;padding:14px 16px;
  margin-top:12px;background:#fff;
}
#view-finances .fin-cat-group:nth-of-type(5n+1){background:var(--pb-lilac);}
#view-finances .fin-cat-group:nth-of-type(5n+2){background:var(--pb-butter);}
#view-finances .fin-cat-group:nth-of-type(5n+3){background:var(--pb-mint);}
#view-finances .fin-cat-group:nth-of-type(5n+4){background:var(--pb-blush);}
#view-finances .fin-cat-group:nth-of-type(5n+5){background:var(--pb-sky);}
#view-finances .fin-group-h{
  font-family:var(--pb-num);font-weight:700;font-size:10.5px;letter-spacing:.14em;
  color:rgba(25,22,33,.6);margin:0 0 8px;
}
#view-finances .fin-cat-group .todo-list li{color:var(--pb-ink);font-weight:600;font-size:13.5px;}
#view-finances .fin-cat-group .dot{border:1.5px solid var(--pb-ink);}
#view-finances .fin-cat-group .dot-sage{background:#fff;}
#view-finances .fin-cat-group .dot-gold{background:var(--pb-coral);}
#view-finances .fin-cat-group span[style*="margin-left:auto"]{
  font-family:var(--pb-num);color:var(--pb-ink)!important;
}
/* planner (Plan tab) inherits the remapped tokens; sharpen its inputs */
#view-finances .fin-num-input{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:12px;color:var(--pb-ink);
  font-family:var(--pb-num);
}
#view-finances .fin-num-input:focus{border-color:var(--pb-ink);box-shadow:none;}
#view-finances .btn-primary{
  background:var(--pb-butter);color:var(--pb-ink);border:1.5px solid var(--pb-ink);
  border-radius:14px;font-family:var(--pb-num);font-weight:700;box-shadow:none;
}

/* ---- W3.4 SHOPPING (rows shared w/ To-Do above) ---- */
#view-shopping .shop-add-card{padding:14px 16px;}
#view-shopping .shop-add-error{color:#b0562e;font-weight:600;}

/* ---- W3.5 BUSINESS ---- */
/* KPI tiles → pop color rotation, ink outlines, Space Grotesk numerals.
   Semantic states override the rotation: warn=coral · good=mint · amb=butter. */
#view-business .biz-kpi{
  background:#fff;border:1.5px solid var(--pb-hard);border-radius:22px;
  box-shadow:none;
}
#view-business .biz-kpis .biz-kpi:nth-child(6n+1){background:var(--pb-lilac);}
#view-business .biz-kpis .biz-kpi:nth-child(6n+3){background:var(--pb-sky);}
#view-business .biz-kpis .biz-kpi:nth-child(6n+4){background:#fff;}
#view-business .biz-kpis .biz-kpi:nth-child(6n+5){background:var(--pb-blush);}
#view-business .biz-kpi.good{background:var(--pb-mint);}
#view-business .biz-kpi.warn{background:var(--pb-coral);}
#view-business .biz-kpi.amb{background:var(--pb-butter);}
/* status dot (reskin-dash ::before) → ink-outlined */
#view-business .biz-kpi::before{
  background:#fff;box-shadow:0 0 0 1.5px var(--pb-ink);width:7px;height:7px;
}
#view-business .biz-kpi.good::before{background:var(--pb-ink);box-shadow:none;}
#view-business .biz-kpi.warn::before{background:var(--pb-ink);box-shadow:none;}
#view-business .biz-kpi.amb::before{background:var(--pb-ink);box-shadow:none;}
#view-business .biz-kpi .lab{
  font-family:var(--pb-num);font-weight:700;font-size:9.5px;letter-spacing:.08em;
  color:rgba(25,22,33,.6);
}
#view-business .biz-kpi .val{
  font-family:var(--pb-num)!important;font-weight:700;font-size:23px;
  letter-spacing:-.02em;color:var(--pb-ink)!important;
}
#view-business .biz-kpi.warn .val,#view-business .biz-kpi.good .val,
#view-business .biz-kpi.amb .val{color:var(--pb-ink)!important;}
#view-business .biz-kpi .note{color:rgba(25,22,33,.55);}
/* the first-KPI radial tint from pop.css fights the rotation — off */
#view-business .biz-kpis .biz-kpi:first-child{background-image:none;}
/* flags: attention = coral (spec) · warn = butter · watch = mint */
#view-business .biz-flag{
  border:1.5px solid var(--pb-ink);border-left:1.5px solid var(--pb-ink);
  border-radius:16px;background:#fff;color:var(--pb-ink);
}
#view-business .biz-flag.urgent{background:var(--pb-coral);}
#view-business .biz-flag.warn{background:var(--pb-butter);}
#view-business .biz-flag.watch{background:var(--pb-mint);}
#view-business .biz-flag .ttl{color:var(--pb-ink);font-weight:700;}
#view-business .biz-flag .meta{color:rgba(25,22,33,.72);}
/* clients-to-watch status pills */
#view-business .biz-watch-item .st{
  font-family:var(--pb-num);border:1.5px solid var(--pb-ink);border-radius:8px;
}
#view-business .biz-watch-item .st.risk{background:var(--pb-coral);color:var(--pb-ink);}
#view-business .biz-watch-item .st.mon{background:var(--pb-butter);color:var(--pb-ink);}
/* tables */
#view-business .card table th{
  font-family:var(--pb-num);font-weight:700;letter-spacing:.08em;color:rgba(25,22,33,.55);
}
#view-business .card table tbody tr:hover{background:var(--pb-paper);}
#view-business .search{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:999px;
}
#view-business .search:focus{border-color:var(--pb-ink);}
/* waterfall total row */
#view-business .wf.tot{background:linear-gradient(90deg,rgba(194,231,198,.55),transparent);}
#view-business .wf.tot .v{color:var(--pb-ink);}
#view-business .wf .v{font-family:var(--pb-num);}
#view-business .wf.neg .v{color:#b0562e;}
/* drill-down modal (same .mk-* classes as health but its own ids) →
   paper sheet, hard outline, sticker shadow */
#bizListOverlay{background:rgba(25,22,33,.45);backdrop-filter:blur(3px);}
#bizListOverlay .mk-sheet{
  background:var(--pb-paper);border:1.5px solid var(--pb-ink);
  border-radius:28px 28px 0 0;box-shadow:0 -6px 0 rgba(25,22,33,.9);
}
#bizListOverlay .mk-grp{font-family:var(--pb-num);letter-spacing:.16em;color:#b0562e;}
#bizListOverlay .mk-name{font-family:var(--pb-head);font-weight:800;color:var(--pb-ink);}
#bizListOverlay .mk-close{
  background:#fff;border:1.5px solid var(--pb-ink);border-radius:50%;color:var(--pb-ink);
}
/* Team roster + key relationships (static panels) */
#view-business .biz-person .who .role{color:#b0562e;}
#view-business .dc-prio{
  background:#fff;border:1.5px solid var(--pb-line);border-left:1.5px solid var(--pb-line);
  border-radius:18px;
}
#view-business .dc-prio .rk{
  font-family:var(--pb-num);font-weight:700;font-size:12px;color:var(--pb-ink);
  min-width:26px;height:26px;border:1.5px solid var(--pb-ink);border-radius:9px;
  display:flex;align-items:center;justify-content:center;background:var(--pb-butter);
}
#view-business .todo-list .dot{border:1.5px solid var(--pb-ink);}

/* ---- W3.6 EXTRAS ---- */
#view-extras .xtr-note{color:#4a4453;}
#view-extras .btn-primary{
  background:var(--pb-butter);color:var(--pb-ink);border:1.5px solid var(--pb-ink);
  border-radius:14px;font-family:var(--pb-num);font-weight:700;box-shadow:none;
}
#view-extras .xtr-drop{
  border:1.5px dashed var(--pb-hard);border-radius:18px;background:#fff;color:var(--pb-dim);
}
#view-extras .xtr-textarea{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:14px;color:var(--pb-ink);
}
#view-extras .xtr-textarea:focus{border-color:var(--pb-ink);outline:none;}

/* ---- W3.7 Desktop hover polish for the new language (kill warm shadows) ---- */
@media (min-width:1100px) and (hover:hover){
  #view-business .card:hover,#view-business .biz-kpi:hover,
  #view-calendar .card:hover,#view-todo .td-prio:hover,
  #view-finances .card:hover,#view-shopping .td-prio:hover,
  #view-extras .card:hover{
    box-shadow:3px 3px 0 rgba(25,22,33,.9);transform:none;
  }
  #view-home .hm-upnext:hover,#view-home .hm-stat:hover,#view-home .hm-biz:hover,
  #view-home .hm-small:hover,#view-home .hm-kids:hover{
    transform:translateY(-2px);box-shadow:3px 3px 0 rgba(25,22,33,.9);
  }
  #view-home .hm-biz:hover{box-shadow:3px 3px 0 var(--pb-ink);}
  .seg-btn:hover:not(.is-active),#view-business .hp-btn:hover:not(.is-active){
    background:var(--pb-paper);color:var(--pb-ink);
  }
}

/* ---- W23.FIX polish pass (post-render inspection, Jul 9 2026) ---- */
/* To-Do urgency square: only show when the row actually has an urgency class
   (the default white square read as a stray artifact on placeholder rows). */
#view-todo .td-prio::before{display:none;}
#view-todo .td-prio.td-overdue::before,
#view-todo .td-prio.td-today::before,
#view-todo .td-prio.td-week::before{display:block;}
/* Business section-title count pill: hide until app.js writes a count
   (an empty butter blob otherwise). */
#view-business .section-title .hc-lbl:empty{display:none;}
/* Home hero meta ("N events today") sits over the butter circle bleed —
   glass chip guarantees contrast. */
#view-home .hm-upnext-meta{
  background:rgba(20,17,26,.6);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:4px 10px;color:rgba(255,255,255,.8);
}
/* Ask Skippy floating launcher joins the pop shell: ink pill, butter icon */
.sk-fab{
  background:var(--pb-ink);color:#fff;
  box-shadow:0 14px 30px rgba(25,22,33,.32);
  font-family:"Space Grotesk","Hanken Grotesk",system-ui,sans-serif;font-weight:700;
}
.sk-fab-ic{color:var(--pb-butter);}
