/* =====================================================================
   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;}

/* ---- 5b. Chantelle's reps hero — take-it-or-leave-it interaction on the butter card
   (mirrors Nick's #nickRepsHero visually; adds check + thumbs + how-it-works) ---- */
#view-health .creps-info-btn{
  margin-left:8px;font-family:var(--pb-num);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;background:transparent;border:1.5px solid var(--pb-ink);
  border-radius:999px;padding:2px 9px;cursor:pointer;opacity:.7;vertical-align:middle;
}
#view-health .creps-info-btn:hover{opacity:1;}
#view-health .creps-howto{
  margin-top:12px;padding-top:12px;border-top:1.5px dashed rgba(58,43,51,.28);
}
#view-health .creps-howto p{font-size:12.5px;line-height:1.55;margin:0 0 8px;}
#view-health .creps-howto p:last-child{margin-bottom:0;}
#view-health .creps-row{
  display:flex;align-items:flex-start;gap:11px;padding:10px 0;
  border-top:1.5px solid rgba(58,43,51,.16);
}
#view-health .creps-row:first-child{border-top:0;}
#view-health .creps-body{flex:1;min-width:0;}
#view-health .creps-note{font-size:11.5px;line-height:1.45;opacity:.8;margin-top:3px;}
#view-health .creps-title-link{text-decoration:none;}
#view-health .creps-anchor{
  padding:11px 0 2px;margin-top:2px;border-top:1.5px solid rgba(58,43,51,.16);
}
#view-health .creps-anchor .v{font-weight:700;font-style:italic;}
/* check pill (left) */
#view-health .creps-check{
  flex-shrink:0;width:26px;height:26px;margin-top:1px;border-radius:8px;
  border:1.5px solid var(--pb-ink);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:background .12s;
}
#view-health .creps-check .i{width:15px;height:15px;opacity:0;transition:opacity .12s;
  fill:none;stroke:var(--pb-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
#view-health .creps-row.is-checked .creps-check{background:var(--pb-ink);}
#view-health .creps-row.is-checked .creps-check .i{opacity:1;stroke:var(--pb-butter)!important;}
#view-health .creps-row.is-checked .creps-body{opacity:.55;text-decoration:line-through;}
/* thumbs (right) */
#view-health .creps-thumbs{flex-shrink:0;display:flex;gap:5px;margin-top:1px;}
#view-health .creps-thumb{
  width:26px;height:26px;border-radius:999px;border:1.5px solid rgba(58,43,51,.35);
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;opacity:.55;transition:opacity .12s,background .12s,border-color .12s;
}
#view-health .creps-thumb svg{width:14px;height:14px;}
#view-health .creps-thumb:hover{opacity:.9;}
#view-health .creps-thumb.up.on{opacity:1;background:var(--pb-mint,#cfe8cf);border-color:var(--pb-ink);}
#view-health .creps-thumb.down.on{opacity:1;background:var(--pb-coral,#f3c6bb);border-color:var(--pb-ink);}

/* 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;}
/* 🔴 Jul 15 2026 QA pass — .cw2-pk (the right-hand marker/value column) is flex:0 0 auto
   (index.html base style), so it always claims its full intrinsic content width. .cw2-gx
   (the title wrapper, flex:1;min-width:0) had NO floor, so on any card whose marker text
   was wide (e.g. a range + a CURRENT/STALE badge) the title got squeezed to single-digit
   pixel widths and -webkit-line-clamp wrapped it one CHARACTER per line ("Sleep depth"
   rendered as "S / d / M") instead of by word. A min-width floor keeps the title readable;
   the marker column (which can wrap internally — its bold value is its own block) absorbs
   the squeeze instead. */
#view-health #hp-nick .cw2-gx{min-width:84px;}
#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;}
/* TESTING / on-deck tier pill — sky fill (state tier for staged levers e.g. SS-31); class-based so it isn't caught by the [style*=background] coral rule */
#view-health #hp-nick .cw2-cur.test{background:var(--pb-sky)!important;color:#1e3a52!important;}
#view-health #hp-nick .cw2-pc.op .cw2-cur.test{background:var(--pb-sky)!important;color:#1e3a52!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 layout (Nick, Jul 9 reorder): daily metrics + trends move UP
   beside the upper-left tracker fields; the slow-changing individual-markers wall
   drops DOWN. Desktop (≥1000px): a 2-col flex row (.cw2-data-top → two
   .cw2-data-col). JS (packDataGrid) pins the tracker fields to the top of the left
   column and Daily metrics+Trends to the top of the right, then backfills the
   markers wall down both columns shortest-first — so markers sit below the top
   content, keep their familiar half-width uniform-tile grid, and leave no trailing
   void. This sheet only sizes the wrappers. Mobile (<1000px): single flat column
   (see the index.html base rule) — no wrappers, units stacked in group order. ---- */
@media (min-width:1000px){
  #view-health #hp-nick .cw2-data-grid{display:block;}
  #view-health #hp-nick .cw2-data-top{display:flex;gap:16px;align-items:flex-start;}
  #view-health #hp-nick .cw2-data-top > .cw2-data-col{flex:1 1 0;min-width:0;}
  #view-health #hp-nick .cw2-dunit{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);}

/* ===== Business view cleanup (Jul 9 2026, Nick) =====
   "Needs your judgment" is now the lead full-width section (siblings removed),
   so its flag list splits into two balanced columns on wide screens and
   collapses to one column on phones (<700px). CSS multi-column balances the
   items automatically; break-inside:avoid keeps each flag card whole. */
#view-business #ov-flags.ov-flags-cols{
  column-count:2;column-gap:16px;
}
#view-business #ov-flags.ov-flags-cols > .biz-flag{
  break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 14px;
  display:inline-block;width:100%;/* inline-block + width = reliable no-split column item */
}
@media(max-width:700px){
  #view-business #ov-flags.ov-flags-cols{column-count:1;}
}

/* ===== Family Priorities lane-cards (Chantelle/Noah/Willow) — 2026-07-09 =====
   Self-contained Pop Bento lane-cards for the family members' Priorities tab,
   mirroring Nick's problem/doing-now/test-next/coach-notes pattern. Namespaced
   fp-* + scoped so it CANNOT touch Nick's #hp-nick cw2 renderer or collide with
   the global .chk/.badge/.prow used elsewhere. Always-open (no toggle → no new
   JS, no dependency on the global cw2-pc handler). Content sourced from the
   Nick-approved wireframe redesign-mockups/family-wireframes-popbento.html. */
#view-health .fp-prios{margin-top:4px}
#view-health .fp-lh{display:flex;align-items:center;gap:10px;margin:20px 2px 10px}
#view-health .fp-lh .fp-num{font-family:var(--pb-num);font-weight:700;font-size:12px;width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--pb-ink);flex:none;color:var(--pb-ink)}
#view-health .fp-lh h3{font-family:var(--pb-head);font-weight:700;font-size:16px;letter-spacing:-.01em;line-height:1.15;color:var(--pb-ink);margin:0}
#view-health .fp-pc{border-radius:22px;border:1.5px solid var(--pb-line);background:#fff;padding:14px;margin-bottom:9px}
#view-health .fp-pc.feat{background:var(--pb-butter);border:1.5px solid var(--pb-ink);box-shadow:4px 4px 0 var(--pb-ink)}
#view-health .fp-pg{display:flex;align-items:flex-start;gap:11px}
#view-health .fp-sd{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--pb-ink);flex:none;margin-top:4px}
#view-health .fp-sd.cur{background:var(--pb-mint)}
#view-health .fp-sd.watch{background:var(--pb-butter)}
#view-health .fp-sd.test{background:var(--pb-sky)}
#view-health .fp-sd.adjust{background:var(--pb-coral)}
#view-health .fp-gx{flex:1;min-width:0}
#view-health .fp-gt{font-size:14px;font-weight:700;color:var(--pb-ink);line-height:1.25}
#view-health .fp-ga{font-size:11.5px;color:#524c5c;margin-top:2px;line-height:1.35}
#view-health .fp-pk{flex:none;text-align:right;font-family:var(--pb-num);display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#view-health .fp-pk b{font-size:11px;color:var(--pb-ink);font-weight:700}
#view-health .fp-tag{font-family:var(--pb-num);font-size:9px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:7px;border:1.5px solid var(--pb-ink);color:var(--pb-ink);white-space:nowrap}
#view-health .fp-tag.cur{background:var(--pb-mint)}
#view-health .fp-tag.test{background:var(--pb-sky)}
#view-health .fp-tag.adjust{background:var(--pb-coral)}
#view-health .fp-tag.prac{background:#fff}
#view-health .fp-card{margin-top:12px;border-top:1px solid var(--pb-line);padding-top:12px}
#view-health .fp-pc.feat .fp-card{border-top-color:rgba(25,22,33,.22)}
#view-health .fp-blk{margin-bottom:10px}
#view-health .fp-blk:last-child{margin-bottom:0}
#view-health .fp-blk>b{font-family:var(--pb-num);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--pb-ink);display:flex;align-items:center;gap:7px;margin-bottom:5px}
#view-health .fp-blk>b::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--pb-ink);display:inline-block;flex:none}
#view-health .fp-blk p{font-size:12.5px;line-height:1.5;color:#332e3d;margin:0}
#view-health .fp-sol{display:flex;gap:9px;align-items:flex-start;background:var(--pb-paper);border:1.5px solid var(--pb-line);border-radius:12px;padding:9px 11px;margin-bottom:6px;font-size:12px;line-height:1.4;color:#332e3d}
#view-health .fp-pc.feat .fp-sol{background:#fff}
#view-health .fp-sol .fp-ck{width:18px;height:18px;flex:none;border-radius:6px;border:2px solid var(--pb-ink);background:#fff;margin-top:1px}
#view-health .fp-co{margin-top:2px}
#view-health .fp-cn{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
#view-health .fp-cn:last-child{margin-bottom:0}
#view-health .fp-cn .av{width:22px;height:22px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--pb-num);font-weight:700;font-size:10px;border:1.5px solid var(--pb-ink);color:var(--pb-ink)}
#view-health .fp-cn .av.sk{background:#fff}
#view-health .fp-cn .av.an{background:var(--pb-mint)}
#view-health .fp-cn .av.al{background:var(--pb-lilac)}
#view-health .fp-cn p{font-size:11.5px;line-height:1.45;color:#3c3646;margin:0}
#view-health .fp-cn p b{font-size:11px}
#view-health .fp-confirm{font-family:var(--pb-num);font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8b6a2c;background:rgba(217,154,58,.18);border-radius:6px;padding:2px 6px;margin-left:5px;white-space:nowrap}

/* =====================================================================
   HEALTH FEATURES (2026-07-09) — additive Pop-Bento components for
   js/health-features.js. Visual-only, scoped to #view-health, uses the
   --pb-* tokens. Nothing here overrides frozen app/cw2 behavior.
   Features: (1) as-of date micro-label + freshness dot · (2) Chantelle
   daily-state tiles · (3) Skippy kid-observation card · (4) retest chip ·
   (5) adherence 7-day strip.
   ===================================================================== */

/* --- (1) AS-OF DATE — one reusable, tasteful timestamp per card ------- */
#view-health .bento-asof{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--pb-num);font-size:10px;font-weight:600;
  letter-spacing:.04em;color:var(--pb-dim);white-space:nowrap;line-height:1;
}
#view-health .bento-asof.right{margin-left:auto;}
#view-health .bento-fresh-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--pb-dim);box-shadow:0 0 0 1.5px rgba(25,22,33,.12);
}
#view-health .bento-fresh-dot.fresh{background:var(--pb-mint);}
#view-health .bento-fresh-dot.aging{background:var(--pb-butter);}
#view-health .bento-fresh-dot.stale{background:var(--pb-coral);}
#view-health .bento-fresh-dot.none{background:#cfc9d2;}
/* freshness-dot enhancement applied to existing dated stamps (ids) */
#view-health .bento-asof-inline{
  display:inline-flex;align-items:center;gap:5px;
}

/* --- (2) CHANTELLE daily-state tiles (parity w/ Nick, minus Oura) ----- */
#view-health .hf-cs-lbl{
  font-family:var(--pb-num);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pb-dim);margin:14px 2px 9px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
#view-health .hf-cs-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
}
/* Jul 9 tile-fix (desktop only, mobile 3-up untouched): the 4 check-in tiles
   (Mood / Energy / Felt-sleep / Cycle) go a DETERMINISTIC 4-up in one row so the
   Cycle tile is never orphaned onto its own row (Nick's balance note). auto-fit
   was landing on 3 tracks at some panel widths → 3 + 1 orphan; a fixed 4 across
   guarantees one clean row, and the optional "Latest note" tile (grid-column
   1/-1) spans full width beneath. Mobile keeps the shipped 3-up flow. */
@media(min-width:1000px){
  #view-health .hf-cs-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
#view-health .hf-cs-t{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:18px;
  padding:12px 12px 13px;min-width:0;
}
#view-health .hf-cs-t.lilac{background:var(--pb-lilac);border-color:var(--pb-ink);}
#view-health .hf-cs-t.mint{background:var(--pb-mint);border-color:var(--pb-ink);}
#view-health .hf-cs-t.blush{background:var(--pb-blush);border-color:var(--pb-ink);}
#view-health .hf-cs-t.sky{background:var(--pb-sky);border-color:var(--pb-ink);}
#view-health .hf-cs-t.butter{background:var(--pb-butter);border-color:var(--pb-ink);}
#view-health .hf-cs-t .k{
  font-family:var(--pb-num);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pb-ink);opacity:.7;
}
#view-health .hf-cs-t .v{
  font-family:var(--pb-num);font-weight:700;font-size:24px;line-height:1;
  color:var(--pb-ink);margin-top:6px;
}
#view-health .hf-cs-t .v small{font-size:11px;font-weight:600;opacity:.6;}
#view-health .hf-cs-t .v.await{font-size:12px;font-weight:600;opacity:.55;}
#view-health .hf-cs-wide{
  grid-column:1/-1;background:#fff;border:1.5px solid var(--pb-line);
  border-radius:16px;padding:11px 13px;
}
#view-health .hf-cs-wide .k{
  font-family:var(--pb-num);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pb-dim);
}
#view-health .hf-cs-wide .txt{font-size:12px;line-height:1.5;color:#332e3d;margin-top:4px;}
#view-health .hf-cs-note{font-size:10.5px;color:var(--pb-dim);line-height:1.5;margin:9px 2px 2px;}

/* --- (3) SKIPPY kid-observation card ---------------------------------- */
#view-health .hf-skippy-card{
  background:var(--pb-sky);border:1.5px solid var(--pb-ink);border-radius:18px;
  box-shadow:3px 3px 0 var(--pb-ink);padding:14px 15px;margin-bottom:16px;
}
#view-health .hf-skippy-card .hd{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
#view-health .hf-skippy-card .hd .av{
  width:26px;height:26px;flex:none;border-radius:50%;background:#fff;
  border:1.5px solid var(--pb-ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--pb-num);font-weight:700;font-size:12px;color:var(--pb-ink);
}
#view-health .hf-skippy-card .hd .ttl{
  font-family:var(--pb-head);font-weight:800;font-size:15px;color:var(--pb-ink);line-height:1.1;
}
#view-health .hf-skippy-card .body{font-size:12.5px;line-height:1.55;color:var(--pb-ink);}
#view-health .hf-skippy-card .body p{margin:0 0 8px;}
#view-health .hf-skippy-card .body p:last-child{margin-bottom:0;}
#view-health .hf-skippy-card .src{
  font-size:10px;color:var(--pb-ink);opacity:.62;line-height:1.5;margin-top:9px;
  padding-top:8px;border-top:1px solid rgba(25,22,33,.18);
}
#view-health .hf-tag-sample{
  font-family:var(--pb-num);font-size:8px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:var(--pb-butter);border:1px solid var(--pb-ink);
  border-radius:999px;padding:2px 7px;color:var(--pb-ink);margin-left:6px;white-space:nowrap;
}

/* --- (4) RETEST chip — restyle a test-next row flagged by the sentinel - */
#view-health .cw2-sol.hf-retest{
  background:rgba(255,157,122,.18);border:1.5px solid var(--pb-coral);
  align-items:center;
}
#view-health .cw2-sol.hf-retest .cw2-ck{display:none;}
#view-health .cw2-sol.hf-retest::before{
  content:"↻ DUE FOR RETEST";flex:none;
  font-family:var(--pb-num);font-size:8.5px;font-weight:700;letter-spacing:.05em;
  background:var(--pb-coral);color:var(--pb-ink);border-radius:6px;padding:2px 7px;
  margin-right:2px;
}
#view-health .cw2-sol.hf-retest span{font-weight:600;}

/* --- (5) ADHERENCE 7-day strip ---------------------------------------- */
#view-health .hf-adh{
  background:#fff;border:1.5px solid var(--pb-line);border-radius:18px;
  padding:12px 14px 13px;margin-top:10px;
}
#view-health .hf-adh .hd{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;
}
#view-health .hf-adh .hd .t{
  font-family:var(--pb-num);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pb-ink);display:flex;align-items:center;gap:7px;
}
#view-health .hf-adh .hd .t svg{width:15px;height:15px;}
#view-health .hf-adh .hd .pct{
  font-family:var(--pb-num);font-weight:700;font-size:13px;color:var(--pb-ink);
}
#view-health .hf-adh .row{display:flex;gap:6px;}
#view-health .hf-adh .d{flex:1;text-align:center;min-width:0;}
#view-health .hf-adh .d .cell{
  height:30px;border-radius:9px;border:1.5px solid var(--pb-line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--pb-num);font-size:12px;font-weight:700;color:var(--pb-dim);
}
#view-health .hf-adh .d.done .cell{background:var(--pb-mint);border-color:var(--pb-ink);color:var(--pb-ink);}
#view-health .hf-adh .d.part .cell{background:var(--pb-butter);border-color:var(--pb-ink);color:var(--pb-ink);}
#view-health .hf-adh .d.miss .cell{background:#fff;}
#view-health .hf-adh .d .lbl{
  font-family:var(--pb-num);font-size:9px;font-weight:600;color:var(--pb-dim);margin-top:4px;
}
#view-health .hf-adh .note{font-size:10.5px;color:var(--pb-dim);line-height:1.5;margin-top:9px;}

/* ============================================================================
   §11 — JUL 13 2026 · COMPRESSED HOME HEADER (above-the-fold reclaim)
   Nick: "Move some of these elements so that more of the page is visible without
   scrolling upon first load." The header was three stacked rows (date / avatar /
   a two-line 36px greeting) plus the quote, before a generously padded Now&Next
   card — so the first actionable tile (To-dos due) sat at or below the fold.
   Nothing is deleted. The date + greeting collapse into one row beside the
   avatar, the greeting stops being the biggest text on the page, the quote goes
   secondary, and Now&Next keeps its content with a tighter box.
   Mobile only (<900px) — desktop.css owns ≥900 and is left alone.
   ============================================================================ */
@media (max-width: 899px){
  #view-home .hero.hm-compact{
    padding:calc(env(safe-area-inset-top) + 8px) 20px 4px;
  }
  #view-home .hm-compact .hero-top{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  #view-home .hm-compact .hm-head-txt{ min-width:0; flex:1; }

  /* date: eyebrow above the greeting, no longer a row of its own */
  #view-home .hm-compact .hero-date{
    display:block; font-size:10.5px; letter-spacing:.08em; line-height:1.2; margin-bottom:1px;
  }

  /* greeting: ONE line, both halves inline. Was 24px + 36px stacked = ~70px tall. */
  #view-home .hm-compact .hm-greetline{
    display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; min-width:0;
  }
  #view-home .hm-compact .hm-greet1{
    font-size:14px; font-weight:500; color:var(--pb-dim); line-height:1.2;
  }
  #view-home .hm-compact .hm-greet2{
    font-size:21px; font-weight:800; letter-spacing:-.02em;
    color:var(--pb-ink); line-height:1.15;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  }

  /* family photo stays — 84px was a third of the fold on a 390px screen */
  #view-home .hm-compact .hm-avatar{ width:46px; height:46px; flex:0 0 auto; box-shadow:2px 2px 0 var(--pb-ink); }

  /* the quote stays, small + secondary, directly under the header row */
  #view-home .hm-compact .skippy-text.hm-affirm{
    margin:6px 0 0; font-size:12px; line-height:1.35; color:var(--pb-dim);
    white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* tiles start sooner */
  #view-home .hm-grid{ margin-top:10px; gap:10px; }

  /* Now & Next: same content, tighter box (18px pad + 11/13 inner → 12 + 8/11) */
  #view-home .hm-upnext{ padding:12px 14px; border-radius:24px; }
  #view-home .hm-upnext-head{ margin-bottom:8px; }
  #view-home .hm-un-block{ padding:8px 11px; border-radius:16px; }
  #view-home .hm-un-now:not([hidden]) + .hm-un-block{ padding-top:8px; margin-top:7px; }

  /* the last tile row was being clipped by the floating pill nav */
  #view-home.view{
    padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 30px);
  }
}
