/* ===== Deck Family — warm design language ===== */
:root{
  /* ===== "Warm Bento" tokens (DESIGN-SPEC.md, approved 2026-07-02) ===== */
  --cream:#f6efe3;        /* page bg */
  --cream-2:#fdf9f1;
  --card:#fffdf8;
  --ink:#241b26;          /* near-black plum-ink: nav, primary text anchors */
  --ink-2:#3d2e40;        /* active pill inside nav */
  --text:#3a2b33;         /* body text */
  --plum:#5a2660;         /* identity color, unchanged */
  --plum-soft:#7a4a82;    /* legacy — still referenced by focus rings, inputs */
  --clay:#b9603c;
  --gold:#d99a3a;
  --sage:#8f9d6f;
  /* Deeper, WCAG-legible shades of the same gold/sage — for TEXT only (never dots/
     fills, which keep the bright accent). Added Jul 3 2026 ship-gate audit: gold/cream
     was 2.13:1 and sage/cream 2.55:1 — below the bar for readable figures. These hit
     ~4:1 / ~4.7:1 while staying unmistakably gold/sage, so the approved look is intact. */
  --gold-ink:#9a6a12;
  --sage-ink:#5f6e42;
  --muted:#8d7f6b;        /* warm muted */
  --line:#ece2d2;
  /* Bento tile fills + their same-family text colors (never black on a fill) */
  --tile-lilac:#e9ddf1;   --tile-lilac-ink:#46255c;  --tile-lilac-mut:#8a6d9c;
  --tile-butter:#f6e3bd;  --tile-butter-ink:#5f4407; --tile-butter-mut:#a0812f;
  --tile-sage:#e2e8d2;    --tile-sage-ink:#3f4d28;   --tile-sage-mut:#7c8b5c;
  --tile-blush:#f3d9cc;   --tile-blush-ink:#6e3018;  --tile-blush-mut:#a05f42;
  --chip-bg:#efe4d2;      --chip-ink:#7a6a54;
  --radius:24px;          /* cards/tiles */
  --radius-sm:20px;       /* small tiles, list cards */
  --shadow-card:0 2px 10px rgba(58,43,51,0.06);
  --shadow-float:0 8px 24px rgba(36,27,38,0.35);  /* pill nav only */
  --shadow:var(--shadow-card); /* legacy alias — older rules reference var(--shadow) */
  --serif:"Fraunces", Georgia, serif;
  --sans:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --tabbar-h:88px;        /* clearance for the floating pill nav (40px pill + padding + 16px gap) */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* Global horizontal-overflow safety net (Nick, 2026-07-11 — "This week/DUE TODAY
   running over" on his phone). Fixed-position descendants (.tabbar) still anchor to
   the viewport, not html/body, so this is a pure safety clamp with no layout cost. */
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%;}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--cream);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-0.01em;margin:0;}
a{color:inherit;text-decoration:none;}
.muted{color:var(--muted);}

.app{max-width:520px;margin:0 auto;min-height:100vh;position:relative;}

/* Views */
.view{display:block;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);}
.view[hidden]{display:none;}

.page{padding:0 18px;}

/* ===== Greeting header (Home) — Warm Bento: light header on the cream page,
   eyebrow date + top-right gold-ringed avatar + Fraunces-italic display line.
   Pure restyle around the frozen #hero-date / #skippy-text JS hooks. ===== */
.hero{
  background:transparent;
  color:var(--text);
  padding:calc(env(safe-area-inset-top) + 12px) 22px 8px;
  border-radius:0;
  box-shadow:none;
  position:relative;
}
.hero-top{display:flex;justify-content:space-between;align-items:center;}
.hero-date{
  font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--muted);opacity:1;
}
.skippy-greeting{display:flex;gap:14px;align-items:center;margin-top:14px;padding-right:52px;}
/* Avatar docks top-right (aligned with the eyebrow), 2px gold ring — CSS-only move,
   markup untouched. Applies to the Skippy School picker hero too (same class). */
.skippy-avatar{
  position:absolute;top:calc(env(safe-area-inset-top) + 16px);right:22px;
  width:40px;height:40px;border-radius:50%;
  background:var(--card);display:grid;place-items:center;font-size:20px;
  border:2px solid var(--gold);overflow:hidden;
}
.skippy-avatar img{width:70%;height:70%;object-fit:contain;border-radius:0;}
/* Family photo in the header instead of the Skippy icon (Nick, 2026-07-02) —
   photo fills the circle edge-to-edge (object-fit:cover) rather than the icon's
   shrunk-and-centered look. Falls back to the original icon automatically
   (see index.html onerror) if no photo is uploaded yet. */
.skippy-avatar-photo{background:var(--card);}
.skippy-avatar-photo img{width:100%;height:100%;object-fit:cover;}
.skippy-bubble{padding-top:2px;}
/* Still used by the Skippy School hub's own hero ("Week 1" label) — just no longer referenced
   on the home dashboard's greeting, which dropped the "SKIPPY" eyebrow label (Nick, 2026-07-02). */
.skippy-name{margin:0;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;opacity:0.8;}
.skippy-text{
  margin:3px 0 0;font-family:var(--serif);font-style:italic;
  font-size:24px;line-height:1.3;font-weight:500;color:var(--plum);
}
#view-home .skippy-text{margin-top:0;}

/* ===== Topbar (other views) ===== */
.topbar{
  padding:calc(env(safe-area-inset-top) + 22px) 22px 14px;
}
/* Per-view title word = the ONE Fraunces-italic display accent per screen (spec) */
.topbar h1{font-size:30px;color:var(--plum);font-style:italic;font-weight:500;}

/* ===== Cards ===== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  margin-top:16px;
  box-shadow:var(--shadow);
}
.page > .card:first-child{margin-top:20px;}
.card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.card-head h2{font-size:19px;color:var(--plum);}
.card-link{font-size:13px;font-weight:600;color:var(--clay);}
/* Section titles = bento eyebrow labels (spec: 11px, 700, ls 1-1.2px, uppercase, muted) */
.section-title{
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);
  margin:26px 4px 6px;
}

/* Glance list */
.glance-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.glance-item{display:flex;align-items:center;gap:12px;font-size:15px;}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.dot-plum{background:var(--plum);}
.dot-clay{background:var(--clay);}
.dot-gold{background:var(--gold);}
.dot-sage{background:var(--sage);}
.dot-red{background:#c04040;}

/* ===== Finances: grouped snapshot list + Target Planner (Layer 2) ===== */
.fin-group-h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:16px 4px 6px;}
.fin-group-h:first-child{margin-top:0;}
.fin-num-input{
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);
  background:var(--cream-2,#fff);border:1px solid var(--line);border-radius:9px;
  padding:6px 9px;-moz-appearance:textfield;
}
.fin-num-input:focus{outline:none;border-color:var(--plum-soft);box-shadow:0 0 0 3px rgba(90,38,96,0.10);}
.fin-plan-list li.fin-plan-row{padding:12px 4px;border-top:1px solid var(--line);}
.fin-plan-list li.fin-plan-row:first-child{border-top:none;}

/* ===== Business: Sidekicks / Clients list rows ===== */
.biz-list-row{display:flex;align-items:flex-start;gap:11px;padding:12px 19px;border-top:1px solid var(--line);}
.biz-list-row:first-child{border-top:none;}
.biz-list-row .dot{margin-top:5px;}
.biz-list-row .bl-name{font-size:13.5px;font-weight:700;color:var(--ink);}
.biz-list-row .bl-meta{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4;}
.biz-list-row.hidden-flagged{display:none;}
.g-time{font-weight:700;font-size:13px;color:var(--clay);min-width:42px;}
.g-label{color:var(--ink);}

/* Todo peek + lists */
.todo-peek,.todo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.todo-peek li,.todo-list li{display:flex;align-items:center;gap:12px;font-size:15px;}
.chk{
  width:20px;height:20px;border-radius:7px;border:2px solid var(--sage);
  flex:0 0 auto;background:rgba(143,157,111,0.10);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;color:transparent;transition:background .15s,border-color .15s,color .15s;
}
.chk:hover{border-color:var(--plum-soft);}
.chk[aria-busy="true"]{opacity:.5;cursor:wait;}

/* Tap-target hit-area (Jul 3 2026 ship-gate audit): the todo/shopping check circles (26px)
   and inline ↗ links render below the 44px touch minimum — thumb/kid taps miss. Extend the
   CLICKABLE area to 44px via a transparent centered ::after overlay WITHOUT changing the
   visual size. Deliberately scoped to hooks that do NOT use ::after for a checkmark tick
   (the protocol/health checks .pt-ex-chk/.pt-wk-chk/.hl-pt-chk own their ::after — left alone). */
.chk, a.lnk{ position:relative; }
.chk::before, a.lnk::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:44px; min-height:44px; width:100%; height:100%; z-index:0;
}

/* ===== To-Do — same priority-card treatment as the Health tracker (Jul 1 2026) ===== */
.td-card{padding:6px 19px;}
.td-list{display:flex;flex-direction:column;}
.td-prio{border-left-color:var(--line);}
.td-prio .pt{font-size:13.5px;}
.td-prio .pw{font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:600;}
.td-prio .chk{margin-top:1px;}
.td-lv{background:rgba(90,38,96,0.09);color:var(--plum);}
.td-prio.td-overdue{border-left-color:#c04040;}
.td-prio.td-overdue .td-lv{background:rgba(251,113,133,.16);color:#c04040;}
.td-prio.td-today{border-left-color:var(--gold);}
.td-prio.td-today .td-lv{background:rgba(217,154,58,.18);color:#95651c;}
.td-prio.td-week{border-left-color:var(--sage);}
.td-prio.td-week .td-lv{background:rgba(138,155,120,.16);color:#5a7a52;}
.td-prio.chk-pending{opacity:.6;}
.td-prio.chk-done{opacity:.45;}
.td-prio.chk-done .pt{text-decoration:line-through;}
.td-prio.chk-done .chk{background:var(--sage);border-color:var(--sage);color:#fff;}
.td-prio.chk-done .chk::after{content:"✓";}

/* ===== Tiles — Warm Bento (Home) =====
   Domain color ownership (spec): health=sage · business=butter · to-dos=lilac ·
   shopping=blush · kids/Skippy=solid plum · finances=white card · calendar=white card/clay.
   Filled tiles: flat pastel, NO border, NO hairline, text in the tile family's -ink/-mut. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.tiles-kids{margin-top:10px;}
.tile{
  background:var(--card);border:none;border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:4px;min-height:96px;
  box-shadow:var(--shadow-card);transition:transform .12s ease, box-shadow .12s ease;
  position:relative;overflow:hidden;
}
.tile:active{transform:scale(0.975);}
/* Small tiles: label row up top, bare 18px line icon docked top-right (spec small-tile recipe) */
.tile-icon{
  position:absolute;top:15px;right:15px;width:auto;height:auto;
  background:none;color:var(--muted);margin:0;display:flex;
}
.tile-icon svg{width:18px;height:18px;}
.tile-name{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--text);margin-top:0;padding-right:26px;}
.tile-sub{font-size:11px;font-weight:600;color:var(--muted);margin-top:0;}
/* Wide tiles keep the row layout: 42px icon square (radius 14) + label stack */
.tile-wide{grid-column:1 / -1;min-height:88px;flex-direction:row;align-items:center;gap:14px;}
.tile-wide .tile-icon{
  position:static;flex:0 0 auto;width:42px;height:42px;border-radius:14px;
  align-items:center;justify-content:center;background:rgba(90,38,96,0.08);color:var(--plum);
}
.tile-wide .tile-name{margin-top:0;padding-right:0;}
.tile-wide .tile-sub{display:block;margin-top:0;}
/* Domain fills — text always from the same tile family, never black/generic gray */
.tile-health{background:var(--tile-sage);}
.tile-health .tile-name,.tile-health .tile-icon{color:var(--tile-sage-ink);}
.tile-health .tile-sub{color:var(--tile-sage-mut);}
.tile-business{background:var(--tile-butter);}
.tile-business .tile-name,.tile-business .tile-icon{color:var(--tile-butter-ink);}
.tile-business .tile-sub{color:var(--tile-butter-mut);}
.tile-todo{background:var(--tile-lilac);}
.tile-todo .tile-name,.tile-todo .tile-icon{color:var(--tile-lilac-ink);}
.tile-todo .tile-sub{color:var(--tile-lilac-mut);}
.tile-shop{background:var(--tile-blush);}
.tile-shop .tile-name{color:var(--tile-blush-ink);}
.tile-shop .tile-sub{color:var(--tile-blush-mut);}
.tile-shop .tile-icon{background:var(--card);color:var(--tile-blush-ink);}
/* Calendar + Finances = white cards (clay / plum accents) — these keep the card shadow */
.tile-calendar .tile-icon{color:var(--clay);}
.tile-calendar .tile-name{color:var(--text);}
.tile-finances .tile-icon{background:rgba(90,38,96,0.08);color:var(--plum);}
.tile-finances .tile-name{color:var(--text);}
/* Kids Area = solid plum tile, cream text (spec) */
.tile-skippy{background:var(--plum);}
.tile-skippy .tile-name{color:#f6efe3;}
.tile-skippy .tile-sub{color:#c9a9d4;}
.tile-skippy .tile-icon{background:rgba(246,239,227,0.16);color:#f6efe3;}
/* Flat pastel fills carry no shadow (spec: filled tiles are flat) */
.tile-health,.tile-business,.tile-todo,.tile-shop,.tile-skippy{box-shadow:none;}

/* ===== Embed cards ===== */
.embed-card{display:flex;flex-direction:column;gap:10px;}
.embed-kicker{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);margin:0;}
.embed-card h2{font-size:24px;color:var(--plum);}
.btn{
  display:inline-block;text-align:center;padding:13px 20px;border-radius:16px;
  font-weight:600;font-size:15px;margin-top:6px;align-self:flex-start;
}
.btn-primary{background:var(--plum);color:var(--cream-2);}
.btn-skippy{background:var(--clay);color:#fff;}
.placeholder-note{font-size:12px;color:var(--muted);font-style:italic;margin:4px 0 0;}

/* ===== Shopping: add-item row (functions/api/shopping-add.js) ===== */
.shop-add-form{display:flex;gap:8px;align-items:center;}
.shop-add-input{flex:1;min-width:0;}
.shop-add-qty{width:64px;text-align:center;flex:0 0 auto;}
.shop-add-btn{margin-top:0;padding:10px 18px;flex:0 0 auto;}
.shop-add-error{font-size:12px;color:#c04040;margin:8px 0 0;}

/* ===== Segmented → chip row (spec: chips/segmented recipe, shared To-Do/Finances/Shopping) ===== */
/* Fixed 2026-07-11 (Nick: "This week/DUE TODAY running over" — the To-Do filter
   row's 4 labels, "Noah's Needs" especially, ran past the right edge on his phone
   instead of wrapping cleanly; flex-wrap alone wasn't a reliable enough fix on
   narrow phones). Switched to the SAME horizontal-scroll + fade-mask pattern
   already proven on .hp-switcher (Health's person switcher) instead of wrapping —
   a scrolling single row reads better than an uneven second line. */
.segmented{
  display:flex;gap:8px;margin:10px 18px 0;background:none;
  padding:0 2px;border-radius:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(to right,#000,#000 calc(100% - 28px),transparent);
}
.segmented::-webkit-scrollbar{display:none;}
.seg-btn{
  flex:0 0 auto;border:none;background:var(--chip-bg);font-family:var(--sans);font-weight:600;
  font-size:12px;color:var(--chip-ink);padding:7px 14px;border-radius:999px;cursor:pointer;
  white-space:nowrap;
}
.seg-btn.is-active{background:var(--ink);color:#f6efe3;box-shadow:none;}
.todo-panel[hidden]{display:none;}
.todo-noah-intro{font-size:13px;line-height:1.5;color:var(--muted);margin:6px 2px 12px;}
.todo-noah-intro strong{color:var(--ink);font-weight:700;}

/* ===== Calendar week strip ===== */
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.day-cell{position:relative;text-align:center;padding:10px 0 13px;border-radius:14px;border:1px solid var(--line);background:var(--cream-2);}
.day-cell.has-ev::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--gold);}
.day-cell.today.has-ev::after{background:var(--cream-2);}
.day-cell .dow{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;}
.day-cell .dnum{font-family:var(--serif);font-size:17px;color:var(--ink);margin-top:2px;}
.day-cell.today{background:var(--plum);border-color:var(--plum);}
.day-cell.today .dow,.day-cell.today .dnum{color:var(--cream-2);}

/* ===== Calendar — today timeline (Jul 1 2026: flows through the day, past events drop off) ===== */
.cal-allday{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.cal-allday-chip{background:rgba(217,154,58,0.14);color:var(--clay);font-weight:600;font-size:12.5px;padding:6px 12px;border-radius:30px;}
.cal-timeline{position:relative;height:1200px;overflow-y:auto;border-radius:16px;background:var(--cream-2);border:1px solid var(--line);}
.cal-hour{position:absolute;left:0;right:0;border-top:1px solid var(--line);}
.cal-hour-label{position:absolute;left:8px;top:-9px;font-size:11px;font-weight:600;color:var(--muted);background:var(--cream-2);padding:0 4px;}
.cal-now-line{position:absolute;left:54px;right:8px;height:2px;background:var(--clay);z-index:3;}
.cal-now-line::before{content:"";position:absolute;left:-5px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--clay);}
.cal-block{
  position:absolute;left:56px;right:8px;min-height:16px;box-sizing:border-box;
  border-radius:8px;padding:5px 10px 5px 12px;overflow:hidden;
  background:var(--card);box-shadow:0 1px 2px rgba(90,38,96,0.10),inset 3px 0 0 0 var(--plum);
  outline:1px solid rgba(255,255,255,0.6);
  font-size:12.5px;line-height:1.3;z-index:2;
}
.cal-block{cursor:pointer;} /* tap any block to see its full, untruncated title + time */
.cal-block .cal-block-title{
  font-weight:600;color:var(--ink);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.cal-block .cal-block-time{color:var(--muted);font-size:11px;}
/* Short back-to-back events (House Help, Evening Routine, etc.) don't have room for three
   stacked lines — collapse to a max-2-line compact row so they never spill into the next block. */
.cal-block.cal-compact{padding:2px 10px 2px 12px;}
.cal-block.cal-compact .cal-block-time{font-size:9.5px;}
.cal-block.cal-compact .cal-block-title{font-size:11px;-webkit-line-clamp:2;overflow-wrap:anywhere;}
/* 3+ events overlapping at once (rare, but happens on a packed morning) — lanes get too
   narrow for the normal font size, so shrink further and drop to a single clamped line.
   Full title is always available via the title="" tooltip + the tap-to-alert handler. */
.cal-block.cal-block-tight{padding:3px 6px 3px 8px;}
.cal-block.cal-block-tight .cal-block-time{font-size:9px;}
.cal-block.cal-block-tight .cal-block-title{font-size:10px;line-height:1.15;-webkit-line-clamp:2;overflow-wrap:anywhere;}
.cal-block.cal-c1{background:rgba(90,38,96,0.09);border-left:4px solid var(--plum);box-shadow:0 2px 6px rgba(90,38,96,0.10);}
.cal-block.cal-c2{background:rgba(185,96,60,0.10);border-left:4px solid var(--clay);box-shadow:0 2px 6px rgba(90,38,96,0.10);}
.cal-block.cal-c3{background:rgba(217,154,58,0.12);border-left:4px solid var(--gold);box-shadow:0 2px 6px rgba(90,38,96,0.10);}
.cal-block.cal-c4{background:rgba(138,155,120,0.12);border-left:4px solid var(--sage);box-shadow:0 2px 6px rgba(90,38,96,0.10);}
.cal-block-past{opacity:.42;background:var(--cream-2);box-shadow:inset 3px 0 0 0 var(--line);}
.cal-block-past .cal-block-title,.cal-block-past .cal-block-time{color:var(--muted);}
.cal-empty-today{padding:20px;text-align:center;color:var(--muted);font-size:13.5px;}
.cal-upcoming-day{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px;}
.cal-upcoming-day:first-child{margin-top:4px;}

/* ===== Skippy view ===== */
.skippy-view{background:linear-gradient(180deg,#fff6e6 0%,var(--cream) 60%);}
.skippy-topbar h1{color:var(--clay);}
.skippy-card{
  background:#fff;border:2px solid rgba(217,154,58,0.30);border-radius:26px;
  padding:30px 22px;text-align:center;margin-top:20px;box-shadow:0 12px 30px rgba(217,154,58,0.15);
}
.skippy-hero-emoji{font-size:54px;}
.skippy-card h2{font-size:26px;color:var(--clay);margin-top:8px;}
.skippy-card p{color:var(--muted);margin:8px 0 0;}
.skippy-card .btn{align-self:center;margin-top:18px;}

/* ===== Health / Business command-center cards ===== */
.hc-hero{
  background:var(--clay);color:var(--cream-2);border-radius:26px;padding:22px;margin-top:20px;
}
.hc-hero-label{font-size:12px;color:#f1cdbb;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;}
.hc-hero-rows{margin-top:15px;display:flex;flex-direction:column;gap:14px;}
.hc-hero-rows .k{font-size:11px;color:#f0cbb9;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hc-hero-rows .v{font-size:15px;font-weight:600;margin-top:2px;}

.hc-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f4ecdf;gap:12px;}
.hc-row:last-child{border-bottom:none;}
.hc-pill{font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px;white-space:nowrap;background:rgba(90,38,96,0.09);color:var(--plum);}
.hc-pill.amber{background:rgba(217,154,58,0.14);color:#95651c;}
.hc-pill.watch{background:rgba(184,96,60,0.12);color:var(--clay);}
.hc-lbl{font-size:11px;color:var(--muted);font-weight:600;}
.hc-mini-grid{display:flex;gap:9px;margin-top:4px;flex-wrap:wrap;}
.hc-mini{flex:1;min-width:100px;background:var(--cream-2);border-radius:14px;padding:11px 13px;}
.hc-mini .v{font-size:13px;font-weight:700;margin-top:2px;}
.hc-empty{font-size:13px;color:var(--muted);font-style:italic;}
.hc-hyp{font-size:11.5px;color:var(--muted);font-style:italic;margin-left:6px;}
.hc-checklist li{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid #f4ecdf;font-size:14px;font-weight:600;}
.hc-checklist li:last-child{border-bottom:none;}
.hc-source-note{font-size:11px;color:var(--muted);margin-top:10px;}

/* Person switcher (Health tab) */
.hp-switcher{display:flex;gap:7px;margin:14px 18px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000,#000 calc(100% - 28px),transparent);}
.hp-switcher::-webkit-scrollbar{display:none;}
/* Person/section switcher pills — same chip recipe as .seg-btn (spec) */
.hp-btn{flex:0 0 auto;border:none;background:var(--chip-bg);font-family:var(--sans);font-weight:600;font-size:12px;color:var(--chip-ink);padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;}
.hp-btn.is-active{background:var(--ink);color:#f6efe3;}
.hp-panel[hidden]{display:none;}

/* Intimacy tracker dots */
.hc-dots-row{display:flex;gap:9px;justify-content:space-between;}
.hc-dots-row .d{text-align:center;}
.hc-dots-row .dcircle{width:26px;height:26px;border-radius:50%;background:var(--line);margin:0 auto;}
.hc-dots-row .dcircle.on{background:var(--plum);}
.hc-dots-row .dcircle.today{border:2px dashed #d8c9b6;background:transparent;}

/* EQ score big number */
.hc-score-row{display:flex;align-items:flex-end;justify-content:space-between;}
.hc-score-big{display:flex;align-items:flex-end;gap:10px;}
.hc-score-big .num{font-family:var(--serif);font-size:40px;font-weight:500;color:var(--plum);line-height:.9;}
.hc-score-big .unit{font-size:13px;color:var(--muted);font-weight:600;padding-bottom:6px;}

/* Food bar */
.hc-food-top{display:flex;justify-content:space-between;}
.hc-food-top .v2{font-family:var(--serif);font-size:22px;font-weight:500;}
.hc-food-bar{height:9px;border-radius:6px;background:#f0e7d8;margin-top:13px;overflow:hidden;display:flex;}

/* Correlation matrix */
.hc-corr-row{display:flex;gap:7px;}
.hc-corr-box{flex:1;text-align:center;border-radius:12px;padding:11px 4px;}
.hc-corr-box .v{font-size:15px;font-weight:700;margin-top:3px;}

/* Cycle bar */
.hc-cycle-bar{display:flex;height:8px;border-radius:6px;overflow:hidden;margin-top:14px;background:#f0e7d8;}
.hc-cycle-labels{display:flex;justify-content:space-between;font-size:10px;color:#b9ada0;font-weight:600;margin-top:5px;}

/* Gracie feedback card */
.hc-feedback{background:#f3ecf3;border-color:#e6d6e7;}
.hc-feedback .quote{font-family:var(--serif);font-size:15px;font-weight:400;font-style:italic;color:var(--plum);line-height:1.5;}

/* ===== Dashboard-classic (dc-) — ported 1:1 from artifacts-src/nick-health-command-center.html
   so the Health tab's card structure matches the live Command Center, not an approximation.
   Reuses the app's existing color tokens (identical hex to the dashboard's --pur/--mag/--grn/etc). ===== */
.dc-bento2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px;}
.dc-bento2>div{min-width:0;}
.dc-bento2 .section-title{margin:0 0 8px;font-size:15px;}
.dc-sgrp{grid-column:1/-1;font-size:10.5px;letter-spacing:.1em;color:var(--clay);font-weight:700;margin:14px 2px 6px;text-transform:uppercase;}
.dc-grid3{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.cyc-phaserow .cyc-ph{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 11px;cursor:pointer;transition:.15s;}
.cyc-ph.on{box-shadow:inset 0 0 0 1.5px var(--pc,var(--plum));border-color:transparent;}
.cyc-ph .cpname{font-family:var(--serif);font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;}
.cyc-ph .cpdot{width:8px;height:8px;border-radius:50%;background:var(--pc,var(--plum));display:inline-block;}
.cyc-ph .cpdays{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:2px;}
.cyc-protogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;}
@media(max-width:420px){.cyc-protogrid{grid-template-columns:1fr;}}
.cyc-pbox{background:#f5ede1;border:1px solid var(--line);border-radius:12px;padding:12px 13px;}
.cyc-pbox h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--clay);margin:0 0 7px;font-family:var(--sans);}
.cyc-pbox ul{margin:0;padding-left:15px;}
.cyc-pbox li{font-size:12px;margin-bottom:4px;color:#5a4553;line-height:1.4;}

.dc-m{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.dc-m.oor{border-color:rgba(192,64,64,.4);box-shadow:inset 0 0 0 1px rgba(192,64,64,.2);}
.dc-m.watchb{border-color:rgba(217,154,58,.45);}
.dc-m .top{display:flex;justify-content:space-between;align-items:center;gap:6px;}
.dc-m .nm{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dc-m .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.dc-m .val{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:3px;color:var(--ink);}
.dc-m .val .u{font-size:11px;color:var(--muted);font-weight:500;margin-left:2px;font-family:var(--sans);}
.dc-m .trend{font-size:11px;color:#b0a89a;font-weight:500;margin-top:7px;display:flex;align-items:flex-start;gap:5px;flex-wrap:wrap;line-height:1.3;}
.dc-m .trend b{color:var(--ink);font-weight:700;}
.dc-m .tp{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;}
.dc-m .tp .tv{color:#b0a89a;}
.dc-m .tp em{font-style:normal;font-size:8px;color:#c8bfb5;margin-top:1px;font-weight:600;letter-spacing:.02em;white-space:nowrap;}
.dc-m .ar{font-weight:700;margin:0 1px;color:#c8bfb5;}
.dc-m .ar.up{color:var(--sage);}
.dc-m .ar.dn{color:#c04040;}
.dc-m .foot{font-size:9px;color:var(--muted);font-weight:500;margin-top:8px;letter-spacing:.01em;}
.dc-m .spark{margin-top:7px;height:26px;display:block;}
.dc-m.oor .val{color:#c04040;}
.dc-gauges{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px;}
.dc-gz{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 8px;text-align:center;box-shadow:var(--shadow);}
.dc-gz .ring{width:56px;height:56px;border-radius:50%;margin:0 auto;position:relative;}
.dc-gz .ring::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--card);}
.dc-gz .gznum{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);margin-top:9px;}
.dc-gz .lbl{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:4px;}
.dc-gz .dl{font-size:10px;font-weight:700;margin-top:3px;}
.dc-gz .dl.up{color:var(--sage);}
.dc-gz .dl.dn{color:#c04040;}
.dc-gz .dl.fl{color:var(--muted);}

/* Reps as link cards */
.hc-hero-rows a.rep-link{display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(255,255,255,.15);}
.hc-hero-rows a.rep-link:active{opacity:.82;}
.hc-hero-rows .openarr{font-size:10px;font-weight:700;opacity:.85;margin-left:5px;}

/* Protocol — highlighted summary + ordered daily list */
.dc-protocol-summary{background:rgba(90,38,96,.07);border-radius:14px;margin:8px;padding:14px 15px !important;color:var(--plum) !important;font-weight:700 !important;}
.dc-protocol-summary .chev{color:var(--gold);font-weight:800;margin-left:4px;}
.dc-protocol-details[open] .dc-protocol-summary{background:var(--plum);color:var(--cream-2) !important;}
.dc-protocol-details[open] .dc-protocol-summary .chev{color:var(--gold);}
.dc-protocol-list{margin:0;padding:4px 19px 6px;list-style:none;counter-reset:proto;}
.dc-protocol-list li{counter-increment:proto;display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);align-items:flex-start;}
.dc-protocol-list li:first-child{border-top:0;}
.dc-protocol-list li::before{content:counter(proto);flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--plum);color:var(--cream-2);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--sans);}
.dc-protocol-list .time{flex:0 0 84px;font-size:10.5px;font-weight:700;color:var(--clay);text-transform:uppercase;letter-spacing:.03em;padding-top:2px;}
.dc-protocol-list .item{flex:1;font-size:13px;color:var(--ink);line-height:1.5;}
/* Protocol checklist toggle (Jul 1 2026) — the summary label says "tap to check it off"
   but the list had no actual checkbox; this makes that promise real. Local-only,
   resets at midnight (day-scoped localStorage key), no backend needed. */
.dc-protocol-list .pchk{
  width:20px;height:20px;border-radius:7px;border:2px solid var(--sage);
  flex:0 0 auto;background:rgba(143,157,111,0.10);align-self:center;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;color:transparent;transition:background .15s,border-color .15s,color .15s;
}
.dc-protocol-list .pchk:hover{border-color:var(--plum-soft);}
.dc-protocol-list li.done{opacity:.6;}
.dc-protocol-list li.done .item{text-decoration:line-through;text-decoration-color:var(--muted);}
.dc-protocol-list li.done .pchk{background:var(--sage);color:var(--cream-2);}
.dc-protocol-list li.done .pchk::after{content:"✓";}
.dc-protocol-next{padding:2px 19px 16px;}
.dc-protocol-next ul{margin:0;padding:0;list-style:none;}
.dc-protocol-next li{font-size:12.5px;color:#5a4553;padding:5px 0;border-top:1px solid var(--line);}
.dc-protocol-next li:first-child{border-top:0;}

/* Out-of-range toggle */
.oor-toggle{font-size:11px;font-weight:600;color:var(--clay);background:rgba(185,96,60,.08);border:1px solid rgba(185,96,60,.32);border-radius:20px;padding:5px 12px;cursor:pointer;}
.oor-toggle.on{background:var(--clay);color:var(--cream-2);}
.hp-panel.oor-only .dc-m:not(.oor){display:none;}
.hp-panel.oor-only .dc-sgrp{display:none;}

/* Marker cards tappable */
.dc-m{cursor:pointer;transition:transform .1s ease;}
.dc-m:active{transform:scale(0.97);}

/* Trends — range chips + inline line charts */
.dc-rangebar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.dc-rangebar button{font-size:12px;font-weight:700;color:var(--plum-soft);background:var(--cream-2);border:1px solid var(--line);border-radius:14px;padding:6px 13px;cursor:pointer;font-family:var(--sans);}
.dc-rangebar button.on{background:var(--plum);color:var(--cream-2);border-color:var(--plum);}
.dc-rangebar button.dc-range-limited{opacity:.45;}
.dc-rangebar button.dc-range-limited.on{opacity:1;}
.dc-trends .dc-trend-note{margin:0 0 14px;}
.dc-trend-group{margin-bottom:18px;}
.dc-trend-group:last-of-type{margin-bottom:0;}
.dc-trend-h{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.dc-linechart{width:100%;height:70px;display:block;}
.dc-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;}
.dc-legend span{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600;}
.dc-legend i{width:12px;height:3px;border-radius:2px;display:inline-block;}

/* Marker detail modal */
.mk-overlay{position:fixed;inset:0;background:rgba(36,27,38,.55);z-index:900;display:none;align-items:flex-end;justify-content:center;}
.mk-overlay.on{display:flex;}
.mk-sheet{background:var(--cream);width:100%;max-width:520px;height:92vh;border-radius:26px 26px 0 0;overflow-y:auto;padding:16px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(50,42,49,.3);}
.mk-sheet-head{display:flex;justify-content:space-between;align-items:flex-start;}
.mk-close{background:var(--card);border:1px solid var(--line);border-radius:12px;width:34px;height:34px;font-size:16px;color:var(--ink);flex:none;}
.mk-grp{font-size:11px;font-weight:700;color:var(--clay);text-transform:uppercase;letter-spacing:.08em;}
.mk-name{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);margin-top:4px;}
.mk-val{font-family:var(--serif);font-size:42px;font-weight:600;color:var(--plum);margin-top:18px;}
.mk-val .u{font-size:15px;color:var(--muted);font-weight:500;font-family:var(--sans);margin-left:4px;}
.mk-opt{font-size:13px;color:var(--muted);margin-top:4px;}
.mk-chart{width:100%;height:130px;margin-top:22px;}
.mk-hist-h{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:22px 0 6px;}
.mk-hist-row{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;}
.mk-hist-row:first-child{border-top:0;}
.mk-hist-row b{font-weight:700;color:var(--ink);}
.dc-gz .up{color:var(--sage);} .dc-gz .dn{color:#c04040;} .dc-gz .fl{color:var(--muted);}
.dc-prio{background:var(--card);border:1px solid var(--line);border-left:4px solid #c04040;border-radius:13px;padding:12px 15px;margin-bottom:8px;display:flex;gap:11px;align-items:flex-start;}
.dc-prio .rk{font-family:var(--serif);font-weight:500;font-size:15px;color:#c8bfb5;min-width:16px;}
.dc-prio .pt{font-size:13.5px;font-weight:700;color:var(--ink);}
.dc-prio .pw{font-size:12px;color:var(--muted);margin-top:2px;}
.dc-prio .lv{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:6px;margin-left:auto;white-space:nowrap;}
/* auto-fit + minmax instead of a fixed column count: the grid self-balances no
   matter how many experiment cards there are — a lone leftover card in the last
   row stretches to fill the row instead of sitting stuck on the left with a gap
   next to it (was happening at the 3-col desktop breakpoint with 4 cards). */
.dc-exgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;}
.dc-exp{background:rgba(217,154,58,.07);border:1px solid rgba(217,154,58,.25);border-radius:14px;padding:12px 14px;}
.dc-exp .ex-nm{font-size:13px;font-weight:700;color:var(--ink);}
.dc-exp .ex-since{font-size:10.5px;color:#a08e68;white-space:nowrap;}
.dc-exp .ex-w{font-size:12px;color:#8a7c6a;margin:4px 0 0;line-height:1.4;}
.dc-dgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.dc-dcard{background:rgba(90,38,96,.05);border:1px solid rgba(90,38,96,.2);border-radius:14px;padding:12px 13px;}
.dc-dcard .dtop{display:flex;justify-content:space-between;align-items:center;gap:6px;}
.dc-dcard .dnm{font-size:11.5px;font-weight:600;color:#5a3862;line-height:1.2;}
.dc-dcard .ddot{width:8px;height:8px;border-radius:50%;flex:none;}
.dc-dcard .dval{font-family:var(--serif);font-size:22px;font-weight:500;margin-top:6px;color:var(--ink);}
.dc-dcard .dtt{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:1px;}
.dc-dcard .dnote{font-size:10.5px;color:var(--muted);line-height:1.45;margin-top:7px;}
.dc-rx{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.dc-rxh{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--clay);margin-bottom:7px;}
.dc-rxcol.next .dc-rxh{color:var(--gold);}
.dc-rx ul{margin:0;padding:0;list-style:none;}
.dc-rx li{font-size:12.5px;color:#5a4553;padding:6px 0 6px 18px;position:relative;border-top:1px solid var(--line);line-height:1.45;}
.dc-rx li:first-child{border-top:0;}
.dc-rx li:before{content:'';position:absolute;left:1px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--plum);}
.dc-rxcol.next li:before{background:var(--gold);}
.dc-rx li b{color:var(--ink);font-weight:700;}
.dc-chathead{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.dc-chathead .av{width:36px;height:36px;border-radius:12px;background:var(--plum);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--cream-2);font-family:var(--serif);}
.dc-chip2{font-size:11.5px;padding:7px 12px;border-radius:20px;background:#f5ede1;border:1px solid var(--line);color:var(--ink);white-space:nowrap;}
.dc-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
.dc-inbar{display:flex;gap:8px;align-items:center;margin-top:10px;}
.dc-inbar input{flex:1;background:#f5ede1;border:1px solid var(--line);border-radius:22px;padding:11px 16px;color:var(--ink);font-family:var(--sans);font-size:13px;}
.dc-inbar .send{width:40px;height:40px;border-radius:50%;border:none;background:var(--plum);color:var(--cream-2);font-size:18px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;}

/* ===== Floating pill nav (spec) — pure CSS restyle of the frozen
   .tabbar/.tab/.tab-ic/.tab-lbl/.is-active hooks. Dark ink pill, centered,
   floats above the content; labels stay in the DOM but are visually hidden
   (sr-only pattern) for accessibility. ===== */
.tabbar{
  position:fixed;left:50%;right:auto;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;
  width:max-content;max-width:calc(100vw - 20px);margin:0;
  height:auto;padding:10px 14px;
  display:flex;gap:6px;
  background:var(--ink);border-radius:999px;
  box-shadow:var(--shadow-float);
  border-top:none;backdrop-filter:none;
}
.tab{
  flex:0 0 auto;width:44px;height:40px;
  display:flex;align-items:center;justify-content:center;
  color:#9b8ba0;border-radius:999px;position:relative;
  transition:color .15s ease, background .15s ease;
}
.tab-ic{font-size:18px;filter:none;opacity:1;transition:all .15s;}
/* Keep .tab-lbl in the DOM for screen readers; hide visually (sr-only) */
.tab-lbl{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.tab.is-active{background:var(--ink-2);color:#f6efe3;}
.tab.is-active .tab-ic{filter:none;opacity:1;transform:none;}
/* 4px gold dot below the active icon (spec) */
.tab.is-active::after{
  content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gold);
}
/* This app has 7 tabs (not the spec's assumed 5) — slim them slightly on
   narrow phones so the pill always fits the viewport. */
@media (max-width:430px){
  .tabbar{gap:3px;padding:10px 10px;}
  .tab{width:40px;}
}
@media (max-width:350px){
  .tabbar{gap:2px;padding:8px 8px;}
  .tab{width:36px;}
}

@media (min-width:520px){
  .app{border-radius:0;}
}

/* ===== Desktop / large-screen layout ===== */
@media (min-width:640px) and (max-width:899px){
  .app{max-width:640px;}
  /* .tabbar stays a centered floating pill at this width — no max-width override needed */
  .tiles-parents{grid-template-columns:1fr 1fr 1fr;}
  .dc-grid3{grid-template-columns:repeat(3,1fr);}
  .biz-kpis{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:900px){
  body{background:var(--cream-2);}
  .app{
    max-width:1180px;margin:0 auto;padding-left:104px;
    background:var(--cream);min-height:100vh;
  }
  .view{padding-bottom:32px;}
  .page{padding:0 36px 40px;max-width:920px;}
  .hero,.topbar{padding-left:36px;padding-right:36px;}
  .card,.embed-card{padding:24px 26px;}

  /* Desktop sidebar — same 104px width, buttons grow to fill the full height */
  .tabbar{
    position:fixed;left:0;top:0;bottom:0;right:auto;transform:none;
    max-width:104px;width:104px;
    height:100vh;flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;
    padding:calc(env(safe-area-inset-top) + 20px) 10px 20px;
    border-top:none;border-right:none;border-radius:0;
    background:var(--ink);backdrop-filter:none;box-shadow:var(--shadow-float);
  }
  /* Each tab grows to share the available vertical space equally — no dead zone below */
  .tab{flex:1 1 0;min-height:52px;max-height:96px;width:84px;padding:0;border-radius:16px;gap:0;}
  .tab.is-active{background:var(--ink-2);}
  .tab:hover:not(.is-active){background:rgba(255,255,255,0.07);}
  .tab-ic{font-size:22px;}

  /* Wider multi-column grids so content doesn't look stretched-mobile */
  /* 3 columns — not 4 — so 6 Parents Area tiles fill exactly 2 even rows instead of
     leaving a half-empty 3rd row (Nick, 2026-07-02: "feels unbalanced on desktop"). */
  .tiles-parents{grid-template-columns:repeat(3,1fr);}
  .dc-grid3{grid-template-columns:repeat(4,1fr);}
  .biz-kpis{grid-template-columns:repeat(4,1fr);}
  .week-strip{max-width:520px;}
  .hp-btns{flex-wrap:wrap;}

  /* Wide cards (Shopping, Finances) join the grid instead of stretching full-width as
     sparse bars — desktop-only, mobile untouched. */
  /* Kids Area: auto-fit + justify-content:start so 1 (or a few) tiles sit compactly at a
     sane width instead of stretching an empty 4-column grid with 3 dead cells beside it. */
  .tiles-kids{grid-template-columns:repeat(auto-fit,minmax(240px,280px));justify-content:start;}
  .tiles-parents .tile-wide,
  .tiles-kids .tile-wide{
    grid-column:auto;flex-direction:column;align-items:flex-start;min-height:118px;
  }
  .tiles-parents .tile-wide .tile-icon,
  .tiles-kids .tile-wide .tile-icon{margin-bottom:6px;}
  .tiles-parents .tile-wide .tile-name,
  .tiles-kids .tile-wide .tile-name{margin-top:auto;}

  /* Health/Business two-column reading layout on very wide screens */
  .view[data-view="health"] .page,
  .view[data-view="business"] .page{
    max-width:1040px;
  }

  /* Skippy School avatar-pick: 3 small cards left a big dead zone below on desktop —
     size the cards up and vertically center them in the remaining page height instead
     of pinning them to the top (Nick, 2026-07-02). */
  #sk-select .page{
    min-height:55vh;display:flex;align-items:center;justify-content:center;
  }
  .sk-kidpick{gap:28px;}
  .sk-kidcard{width:220px;padding:34px 22px;}
  .sk-face img{width:112px;height:112px;}
  .sk-who{font-size:24px;margin-top:14px;}
  .sk-age{font-size:14px;}

  /* Same fix for the per-kid hub menu (My Day / Lessons / Assessments) — small purple-badge
     avatar + a wall of empty space below 3 cards on desktop (Nick, 2026-07-02, "same treatment
     for this page ... applies to willow too"). Bigger avatar, wider/taller cards, vertically
     centered in the remaining page height instead of stacked at the top. */
  .sk-hub-avatar{width:84px;height:84px;font-size:38px;}
  .sk-hub-greet{font-size:28px;}
  .sk-hub-cards{
    max-width:640px;gap:18px;padding:28px 18px 40px;
    min-height:50vh;justify-content:center;
  }
  .sk-hub-card{padding:22px;}
  .sk-hub-icon{width:60px;height:60px;font-size:28px;}
  .sk-hub-tt{font-size:19px;}
  .sk-hub-sub{font-size:13.5px;}
}
@media (min-width:1200px){
  .app{padding-left:104px;}
  .page{max-width:1000px;}
  .dc-grid3{grid-template-columns:repeat(5,1fr);}
}

/* ===== Skippy School — avatar pick + hub (Phase 1 merge, Jul 1 2026) ===== */
/* Superhero-emoji badge removed from this header (Nick, 2026-07-02 — "isn't classing up the
   look and feel"); .skippy-greeting normally reserves right-padding for that badge (shared
   with Home, which still shows the real family photo there) — zero it out here only. */
#sk-select .skippy-greeting{padding-right:0;}
.sk-kidpick{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.sk-kidcard{
  width:145px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 12px;box-shadow:var(--shadow);transition:transform .12s ease;
}
.sk-kidcard:active{transform:scale(.97);}
.sk-face{font-size:44px;}
.sk-face img{width:76px;height:76px;object-fit:cover;border-radius:50%;display:block;margin:0 auto;}
.sk-who{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--plum);margin-top:8px;}
.sk-age{font-size:12px;font-weight:600;color:var(--muted);margin-top:2px;}

.sk-hub-hero{
  background:linear-gradient(160deg,#5a2660 0%,#6e3370 55%,#864a76 100%);
  color:var(--cream-2);padding:calc(env(safe-area-inset-top) + 24px) 22px 34px;
  border-radius:0 0 30px 30px;box-shadow:0 14px 34px rgba(90,38,96,0.20);
}
.sk-hub-back{
  background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.25);
  color:var(--cream-2);font-weight:600;font-size:13px;padding:7px 14px;border-radius:30px;
}
.sk-hub-avatar{
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-top:16px;overflow:hidden;
}
.sk-hub-greet{font-family:var(--serif);font-size:23px;font-weight:500;margin-top:12px;}
.sk-hub-cards{display:flex;flex-direction:column;gap:14px;padding:20px 18px 40px;max-width:480px;margin:0 auto;}
.sk-hub-card{
  display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;cursor:pointer;width:100%;
  text-align:left;transition:transform .12s;
}
.sk-hub-card:active{transform:scale(.98);}
.sk-hub-icon{width:52px;height:52px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;font-size:24px;}
.sk-hub-card.day .sk-hub-icon{background:rgba(90,38,96,0.10);}
.sk-hub-card.les .sk-hub-icon{background:rgba(185,96,60,0.12);}
.sk-hub-card.meet .sk-hub-icon{background:rgba(217,154,58,0.16);}
.sk-hub-tt{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--plum);}
.sk-hub-sub{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px;}
.sk-hub-arr{margin-left:auto;color:var(--muted);font-size:20px;}

/* ===== Business view ===== */
.biz-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;}
.biz-kpi{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 14px 12px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.biz-kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold);opacity:.9;}
.biz-kpi.warn::before{background:#c04040;} .biz-kpi.good::before{background:var(--sage);} .biz-kpi.amb::before{background:var(--gold);}
.biz-kpi .lab{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.biz-kpi .val{font-family:var(--serif);font-size:21px;font-weight:600;margin-top:6px;color:var(--ink);}
.biz-kpi.warn .val{color:#c04040;} .biz-kpi.good .val{color:var(--sage);} .biz-kpi.amb .val{color:var(--gold);}
.biz-kpi .note{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.35;}

.biz-flags{display:flex;flex-direction:column;gap:10px;}
.biz-flag{padding:11px 13px;border-radius:14px;border-left:3px solid var(--line);background:var(--cream-2);}
.biz-flag.urgent{border-left-color:#c04040;background:rgba(192,64,64,.06);}
.biz-flag.warn{border-left-color:var(--gold);background:rgba(217,154,58,.08);}
.biz-flag.watch{border-left-color:var(--sage);background:rgba(138,155,120,.07);}
.biz-flag .ttl{font-size:13.5px;font-weight:700;color:var(--ink);}
.biz-flag .meta{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45;}

.biz-team{display:flex;flex-direction:column;gap:12px;}
.biz-person{padding-bottom:12px;border-bottom:1px solid var(--line);}
.biz-person:last-child{border-bottom:none;padding-bottom:0;}
.biz-person .who{display:flex;flex-direction:column;font-size:13.5px;}
.biz-person .who .role{font-size:11.5px;color:var(--clay);font-weight:600;margin-top:1px;}
.biz-person .what{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4;}

.biz-watch-item{padding:10px 0;border-top:1px solid var(--line);font-size:13px;}
.biz-watch-item:first-child{border-top:none;}
.biz-watch-item .nm{font-weight:700;color:var(--ink);}
.biz-watch-item .st{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-left:8px;padding:2px 8px;border-radius:8px;}
.biz-watch-item .st.risk{background:rgba(192,64,64,.14);color:#c04040;}
.biz-watch-item .st.mon{background:rgba(217,154,58,.16);color:#95651c;}

/* Overview KPI grid — 12 tiles, ported from hs-command-center's #ovkpis (repeat(4,1fr) desktop / repeat(2,1fr) mobile) */
#biz-ovkpis{grid-template-columns:repeat(2,1fr);}
@media(min-width:620px){ #biz-ovkpis{grid-template-columns:repeat(4,1fr);} }

/* Waterfall rows — ported from hs-command-center's .wf/.wf.neg/.wf.tot */
.wf{display:flex;justify-content:space-between;gap:8px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13px;}
.wf:last-child{border-bottom:none;}
.wf .v{font-variant-numeric:tabular-nums;font-weight:600;}
.wf.neg .v{color:#c04040;}
.wf.tot{font-weight:700;background:linear-gradient(90deg,rgba(90,122,82,.09),transparent);border-radius:8px;padding-left:8px;margin:0 -8px;}
.wf.tot .v{color:var(--sage);}

/* Chart containers — ported from hs-command-center's .chartbox */
.chartbox{position:relative;height:200px;}
.chartbox.sm{height:170px;}
/* Jul 2–3 2026 (Nick-flagged): "Top clients by sidekick count" — ~40 bars crammed into one
   fixed box, unreadable on mobile. Fix: .scroll-tall is a capped-height SCROLL VIEWPORT; the
   inner .ct-scroll sizer gets an explicit tall pixel height in JS (~26px/bar) so the canvas
   fills it and every label stays legible while the viewport scrolls. */
.chartbox.scroll-tall{height:auto;max-height:340px;overflow-y:auto;}
.chartbox.scroll-tall .ct-scroll{position:relative;width:100%;min-height:220px;}
@media (max-width:700px){
  .chartbox.scroll-tall{max-height:58vh;}
}

/* Simple tables + search input for Business tab live rosters (Clients/Sidekicks/Profitability/RO Tracker) */
.card table{width:100%;border-collapse:collapse;font-size:12.5px;}
.card table th,.card table td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
.card table th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap;}
.card table td.num,.card table th.num{text-align:right;font-variant-numeric:tabular-nums;}
.card table tbody tr:hover{background:var(--cream-2);}
.search{width:100%;padding:9px 14px;border:1px solid var(--line);border-radius:12px;font-size:13px;background:var(--cream-2);font-family:var(--sans);}
.search:focus{outline:none;border-color:var(--plum);}

/* ===== Nav-rail badges (Jul 1 2026) — a small count on a tab so the nav itself
   signals why it matters right now, instead of every tab looking equally quiet.
   Purely additive: new .tab-ic wrapper + .tab-badge, doesn't touch existing
   .tabbar/.tab rules or the desktop sidebar media query. ===== */
.tab .tab-ic{position:relative;display:inline-block;}
.tab-badge{
  position:absolute;top:-6px;right:-9px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--clay);color:var(--cream-2);
  font-family:var(--sans);font-size:9.5px;font-weight:800;line-height:15px;text-align:center;
}

/* =====================================================================
   ===== VISUAL POLISH PASS (Jul 1 2026) — elevation, motion, icon
   consistency, typography rhythm. Additive only; nothing above this
   block was changed. Goal: read like a funded consumer app, not a
   personal project — same warm plum/clay/gold/sage language, executed
   with more precision. ===================================================== */

/* --- 1. Tiered elevation system -----------------------------------------
   One flat shadow was doing every job (resting card, active tile, modal).
   Real apps separate "resting," "raised," and "floating" states. Softer,
   more diffuse blur reads as premium; a hard 10px blur reads as a mockup. */
/* Retuned 2026-07-02 to the Warm Bento shadow spec (base rgba(58,43,51) for cards,
   rgba(36,27,38) for large/floating). Tiers preserved; values re-derived from
   --shadow-card / --shadow-float. */
:root{
  --shadow-sm:0 1px 4px rgba(58,43,51,0.05);
  --shadow-md:0 2px 10px rgba(58,43,51,0.06);
  --shadow-lg:0 6px 18px rgba(36,27,38,0.10), 0 16px 36px rgba(36,27,38,0.08);
  --hairline:inset 0 0 0 1px rgba(255,255,255,0.6);
}
/* .tile removed from this list (2026-07-02): bento tiles manage their own shadows —
   filled pastel tiles are flat (no hairline, no shadow) per the Warm Bento spec. */
.card,.dc-m,.dc-gz{
  box-shadow:var(--shadow-md), var(--hairline);
  transition:box-shadow .2s ease, transform .15s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
  .tile:hover{transform:translateY(-2px);}
  .dc-m:hover{transform:translateY(-1px);}
}
.mk-sheet{box-shadow:0 -12px 40px rgba(36,27,38,.28), 0 -2px 0 rgba(255,255,255,.5) inset;}

/* --- 2. Tab bar icon language ---------------------------------------------
   (Retuned 2026-07-02 for the floating pill nav.) The old soft ::before pill
   is superseded — the active state now lives on the .tab itself
   (background var(--ink-2) + gold dot ::after, see the nav section above).
   Kept: the icon "settle" micro-animation, sized to the spec's 18px icons. */
.tab{position:relative;transition:color .15s ease;}
.tab .tab-ic svg{width:18px;height:18px;transition:transform .22s cubic-bezier(.34,1.56,.64,1);}
.tab.is-active .tab-ic svg{transform:scale(1.06);}
.tab.is-active::before{content:none;}

/* --- 3. View transitions --------------------------------------------------
   showView() just flips [hidden] — CSS animations (unlike transitions) run
   on display-change, so this fires on every tab switch with zero JS. */
.view:not([hidden]){animation:viewIn .32s cubic-bezier(.16,1,.3,1) both;}
@keyframes viewIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .view:not([hidden]){animation:none;}
}

/* --- 4. Card / tile entrance stagger --------------------------------------
   A single beat of life on load reads as "designed," not "assembled."
   Kept short and only on first paint per view via the animation above
   already gating it — these just stagger the children inside. */
.page > .card,.tiles > .tile{animation:cardIn .38s cubic-bezier(.16,1,.3,1) both;}
.page > .card:nth-of-type(1),.tiles > .tile:nth-of-type(1){animation-delay:.02s;}
.page > .card:nth-of-type(2),.tiles > .tile:nth-of-type(2){animation-delay:.06s;}
.page > .card:nth-of-type(3),.tiles > .tile:nth-of-type(3){animation-delay:.10s;}
.page > .card:nth-of-type(4),.tiles > .tile:nth-of-type(4){animation-delay:.14s;}
.page > .card:nth-of-type(n+5),.tiles > .tile:nth-of-type(n+5){animation-delay:.17s;}
@keyframes cardIn{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
@media (prefers-reduced-motion:reduce){
  .page > .card,.tiles > .tile{animation:none;}
}

/* --- 5. Skeleton loading shimmer ------------------------------------------
   Plain "Loading…" text is the single biggest cheap-app tell. Drop a
   .skel block in place of any not-yet-loaded value for a proper shimmer. */
.skel{
  display:inline-block;height:1em;border-radius:6px;
  background:linear-gradient(100deg,#f0e7d8 20%,#f9f2e6 40%,#f0e7d8 60%);
  background-size:200% 100%;animation:skelShine 1.4s ease-in-out infinite;
  color:transparent;vertical-align:middle;
}
.skel-line{display:block;width:100%;margin:6px 0;}
.skel-title{width:60%;height:1.3em;}
@keyframes skelShine{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* --- 6. Buttons — real weight instead of a flat rectangle ----------------- */
.btn{box-shadow:var(--shadow-sm);transition:transform .12s ease, box-shadow .12s ease;}
.btn:active{transform:scale(.97);box-shadow:none;}
.btn-primary{background:linear-gradient(160deg,#6a3072,var(--plum));}
.btn-skippy{background:linear-gradient(160deg,#c96f47,var(--clay));}

/* --- 7. Typography rhythm --------------------------------------------------
   Tighter leading + a touch of negative tracking on display sizes reads
   editorial rather than default-browser. Section titles get a hairline
   rule instead of floating in whitespace with nothing to anchor them. */
.skippy-text{letter-spacing:-0.015em;}
.topbar h1{letter-spacing:-0.02em;}
.section-title{
  display:flex;align-items:baseline;gap:8px;font-weight:600;
}
.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}
.card-head h2{letter-spacing:-0.01em;}

/* --- 8. Hero depth --------------------------------------------------------
   (Retuned 2026-07-02.) The Home hero is no longer a dark gradient — it's a
   light greeting header on the cream page, so the radial highlight + grain
   overlays are switched off. Rule kept documented for the record. */
.hero{position:relative;overflow:visible;}
.hero::before,.hero::after{content:none;}
/* .skippy-greeting must stay position:static — the avatar is absolutely
   positioned against .hero (top-right dock) and would otherwise anchor here. */
.hero-top{position:relative;z-index:1;}
.skippy-avatar{box-shadow:0 2px 8px rgba(36,27,38,0.12);}

/* --- 9. Home tile icon lift on the wide (Shopping/Finances/Skippy) tiles -- */
.tile-wide .tile-icon{transition:transform .2s cubic-bezier(.34,1.56,.64,1);}
.tile-wide:hover .tile-icon{transform:scale(1.08) rotate(-4deg);}

/* --- 10. Focus states for accessibility, styled to match the brand ------- */
a:focus-visible,button:focus-visible,.tab:focus-visible,.tile:focus-visible{
  outline:2px solid var(--plum-soft);outline-offset:2px;border-radius:8px;
}

/* =====================================================================
   ===== PHASE 1.5 — HOME REBUILD (hm-) (Jul 2 2026) ====================
   The Home view rebuilt to the approved Warm Bento mockup, values copied
   verbatim from the mockup spec. Everything below is new + additive and
   namespaced hm- (zero collision with app.js's hooks). The old .tiles/
   .tile-* Home rules above are left in place (harmless, unreferenced on
   Home now) rather than pruned mid-phase.
   ===================================================================== */

/* Header: eyebrow (mockup: 11px/600/ls1.2) + 34px gold-ringed avatar */
#view-home .hero-date{font-weight:600;letter-spacing:1.2px;}
.hm-avatar{
  width:84px;height:84px;border-radius:50%;flex:0 0 auto;
  border:2.5px solid var(--gold);overflow:hidden;background:var(--card);
  box-shadow:0 2px 10px rgba(36,27,38,0.16);display:block;
}
.hm-avatar img{width:100%;height:100%;object-fit:cover;display:block;}

/* Freshness "as of" chip (shared contract) */
.hc-asof{font-size:11px;color:var(--muted);margin-left:8px;font-weight:500;white-space:nowrap;}
.hc-asof.is-stale{color:var(--gold);font-weight:700;}

/* Business Overview KPI note, same stale contract (2026-07-22 audit fix — the Overview
   tiles had no freshness explanation at all, only the buried Finance sub-tab did). */
.biz-kpi .note.is-stale{color:var(--gold);font-weight:700;}

/* To-Do bucket headers (shared contract) */
.td-bucket{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 4px 6px;}
.td-bucket:first-child{margin-top:4px;}

/* Greeting: sans 26px/500 + Fraunces-italic 30px/500 + one-line affirmation */
.hm-greeting{margin-top:8px;}
.hm-greet1{font-family:var(--sans);font-size:26px;font-weight:500;color:var(--text);line-height:1.15;}
.hm-greet2{font-family:var(--serif);font-style:italic;font-size:30px;font-weight:500;color:var(--plum);line-height:1.1;}
/* The daily affirmation (#skippy-text — app.js writes the text, we only restyle):
   13px italic Fraunces, muted, clamped to a single line. Overrides the shared
   .skippy-text display rule (24px plum) for Home only. */
#view-home .skippy-text.hm-affirm{
  margin:8px 0 0;font-family:var(--serif);font-style:italic;
  font-size:13px;line-height:1.4;font-weight:500;color:var(--muted);
  letter-spacing:0;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* One grid holds every Home tile (no wrappers) — mobile 2-col bento */
.hm-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;
  grid-template-areas:
    "upnext upnext"
    "todo   today"
    "biz    biz"
    "shop   fin"
    "kids   kids";
}
.hm-upnext{grid-area:upnext;}
.hm-stat-todo{grid-area:todo;}
.hm-stat-today{grid-area:today;}
.hm-biz{grid-area:biz;}
.hm-small-shop{grid-area:shop;}
.hm-small-fin{grid-area:fin;}
.hm-small-extras{grid-area:extras;}
.hm-kids{grid-area:kids;}

/* Shared press state (all Home tiles are <a> cards) */
.hm-upnext,.hm-stat,.hm-biz,.hm-small,.hm-kids{
  transition:transform .12s ease;position:relative;overflow:hidden;
}
.hm-upnext:active,.hm-stat:active,.hm-biz:active,.hm-small:active,.hm-kids:active{transform:scale(.975);}

/* Entrance stagger — same cardIn beat as the polish pass */
.hm-grid > *{animation:cardIn .38s cubic-bezier(.16,1,.3,1) both;}
.hm-grid > :nth-child(1){animation-delay:.02s;}
.hm-grid > :nth-child(2){animation-delay:.06s;}
.hm-grid > :nth-child(3){animation-delay:.08s;}
.hm-grid > :nth-child(4){animation-delay:.10s;}
.hm-grid > :nth-child(5){animation-delay:.12s;}
.hm-grid > :nth-child(6){animation-delay:.14s;}
.hm-grid > :nth-child(7){animation-delay:.16s;}
@media (prefers-reduced-motion:reduce){.hm-grid > *{animation:none;}}

/* UP NEXT — white card, clay accents (mockup values verbatim) */
.hm-upnext{
  display:block;background:var(--card);border-radius:var(--radius);
  padding:16px 18px;box-shadow:0 2px 10px rgba(58,43,51,0.06);
}
.hm-upnext-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.hm-upnext-eyebrow{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--clay);}
.hm-upnext-meta{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;}
.hm-upnext-row{display:flex;align-items:center;gap:12px;margin-top:12px;}
.hm-upnext-ic{
  width:42px;height:42px;border-radius:14px;background:#f3ddc9;color:var(--clay);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.hm-upnext-ic svg{width:20px;height:20px;}
.hm-upnext-txt{flex:1;min-width:0;}
.hm-upnext-title{font-size:15px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-upnext-sub{font-size:12px;color:var(--muted);margin-top:1px;}
.hm-upnext-sub:empty{display:none;}
.hm-chev{flex:0 0 auto;color:#c9b99f;font-size:18px;line-height:1;}

/* Now & Next — two labeled blocks in ONE Up Next tile (Jul 3 2026).
   "Right now" (#hm-now-block) sits above "Up next"; hidden → no divider/gap. */
.hm-un-block{margin-top:12px;}
.hm-un-now:not([hidden]) + .hm-un-block{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.hm-un-lbl{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);}
.hm-un-now .hm-un-lbl{color:var(--clay);}
.hm-un-block .hm-upnext-row{margin-top:8px;}
.hm-now-ic{background:var(--clay);color:#fff;}
.hm-now-block[hidden]{display:none;}

/* Stat tiles — 2-up, 34px/700 numbers (mockup recipe) */
.hm-stat{display:flex;flex-direction:column;border-radius:var(--radius);padding:16px;min-width:0;}
.hm-stat-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:600;}
.hm-stat-head svg{width:16px;height:16px;flex:0 0 auto;}
.hm-stat-num{font-size:34px;font-weight:700;line-height:1.1;margin-top:8px;font-variant-numeric:tabular-nums;}
.hm-stat-suffix{font-size:16px;font-weight:600;}
.hm-stat-foot{font-size:11px;font-weight:600;margin-top:6px;}
/* Tile A — lilac / to-dos */
.hm-stat-todo{background:var(--tile-lilac);}
.hm-stat-todo .hm-stat-head{color:#6b4a80;}
.hm-stat-todo .hm-stat-num{color:#46255c;}
.hm-stat-todo .hm-stat-foot{color:#8a6d9c;}
/* Tile B — sage / today */
.hm-stat-today{background:var(--tile-sage);}
.hm-stat-today .hm-stat-head{color:var(--tile-sage-ink);}
.hm-stat-today .hm-stat-num{color:#3f4d28;}
.hm-stat-today .hm-stat-suffix{color:#7c8b5c;}
.hm-stat-today .hm-stat-foot{color:var(--tile-sage-mut);}
/* Progress segments: 8 bars, 14x6 radius 3, done=#8f9d6f rest=#cbd4b4 */
.hm-segbar{display:flex;gap:4px;margin-top:10px;}
.hm-segbar[hidden]{display:none;}
.hm-seg{width:14px;height:6px;border-radius:3px;background:#cbd4b4;flex:0 1 14px;}
.hm-seg.done{background:#8f9d6f;}

/* Today tile → mini agenda list (next up-to-3 events) */
.hm-today-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.hm-today-ev{display:flex;flex-direction:column;gap:1px;min-width:0;}
.hm-today-t{font-size:12px;font-weight:700;color:#3f4d28;font-variant-numeric:tabular-nums;line-height:1.15;}
.hm-today-n{font-size:12.5px;font-weight:600;color:#5a6a3d;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-today-empty{font-size:12.5px;font-weight:600;color:var(--tile-sage-mut);margin-top:10px;}

/* Wide butter tile — H&S this week */
.hm-biz{
  display:flex;align-items:center;gap:12px;
  background:var(--tile-butter);border-radius:var(--radius);padding:16px 18px;
}
.hm-biz-left{flex:1;min-width:0;}
.hm-biz-label{font-size:12px;font-weight:600;color:#8a6a2a;}
.hm-biz-num{font-size:24px;font-weight:700;color:#5f4407;margin-top:2px;font-variant-numeric:tabular-nums;}
.hm-biz-suffix{font-size:12px;font-weight:600;color:#a0812f;margin-left:5px;}
.hm-pill{
  flex:0 0 auto;background:var(--card);border-radius:999px;padding:5px 12px;
  font-size:11px;font-weight:700;color:#8a6a2a;white-space:nowrap;
}
/* Slimmed to half-width (shares its row with the Extras tile) — pill wraps under
   when it can't fit inline, so the revenue number never gets crushed. */
.hm-biz{flex-wrap:wrap;}
.hm-biz .hm-pill{margin-top:2px;}

/* Small row — Shopping (blush) + Finances (white card) */
.hm-small{display:flex;flex-direction:column;border-radius:var(--radius);padding:16px;min-width:0;}
.hm-small-ic{display:flex;}
.hm-small-ic svg{width:20px;height:20px;}
.hm-small-name{font-size:14px;font-weight:600;margin-top:8px;}
.hm-small-sub{font-size:11px;margin-top:2px;}
.hm-small-shop{background:var(--tile-blush);}
.hm-small-shop .hm-small-ic{color:#8f4225;}
.hm-small-shop .hm-small-name{color:#6e3018;}
.hm-small-shop .hm-small-sub{color:#a05f42;}

/* Shopping-tile action bubble (Jul 7 2026) — count of open/not-yet-bought items, so the
   tile itself signals "there's stuff to order" instead of looking the same as an empty list.
   Sits in the padded corner (tile has 16px padding) so it isn't clipped by the shared
   .hm-small overflow:hidden rule. Hidden by JS (loadShopping) when the list is clear. */
.hm-small-badge{
  position:absolute;top:10px;right:10px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--clay);color:var(--cream-2);
  font-family:var(--sans);font-size:11px;font-weight:800;line-height:18px;text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.hm-small-fin{background:var(--card);box-shadow:0 2px 10px rgba(58,43,51,0.06);}
.hm-small-fin .hm-small-ic{color:var(--plum);}
.hm-small-fin .hm-small-name{color:var(--text);}
.hm-small-fin .hm-small-sub{color:var(--muted);}

/* Kids tile — solid plum, overlapping avatars, gold Open pill */
.hm-kids{
  display:flex;align-items:center;gap:12px;
  background:var(--plum);border-radius:var(--radius);padding:16px 18px;
}
.hm-kids-avs{display:flex;flex:0 0 auto;}
.hm-kid-av{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--plum);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-family:var(--sans);
}
.hm-kid-av + .hm-kid-av{margin-left:-10px;}
.hm-kid-n{background:var(--gold);color:#4a3208;}
.hm-kid-w{background:var(--tile-lilac);color:#46255c;}
.hm-kids-mid{flex:1;min-width:0;display:flex;flex-direction:column;}
.hm-kids-name{font-size:14px;font-weight:600;color:#f6efe3;}
.hm-kids-sub{font-size:11px;color:#c9a9d4;margin-top:1px;}
.hm-kids-open{
  flex:0 0 auto;background:var(--gold);border-radius:999px;padding:6px 14px;
  font-size:12px;font-weight:700;color:#4a3208;
}

/* Desktop ≥900px — 3-col bento, wide tiles stay horizontal (icon/avatars left,
   text middle, chip right), every row fully occupied so there are no hollow
   vertical gaps; heights hug content like mobile. */
@media (min-width:900px){
  .hm-grid{
    grid-template-columns:repeat(3,1fr);
    grid-template-areas:
      "upnext upnext todo"
      "today  shop   fin"
      "biz    biz    biz"
      "kids   kids   kids";
    align-items:stretch;
  }
  .hm-biz-num{font-size:28px;}
}

/* --- To-Do: the SOMEDAY button (Jul 13 2026, Nick-requested) -----------------
   One tap on any card = knock it down the list WITHOUT hiding it. Deliberately
   quiet: it sits at low opacity until you hover/focus, so it never competes with
   the item text or the done-checkbox. On a card that's already Someday it flips
   to an undo arrow. Cards in the Someday section are dimmed, not hidden — Nick:
   "i still want them visible as everything else."                              */
.td-someday{
  flex:0 0 auto;margin-left:6px;width:26px;height:26px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;cursor:pointer;user-select:none;
  color:var(--muted);background:transparent;border:1px solid transparent;
  opacity:.42;transition:opacity .14s ease,background .14s ease,border-color .14s ease;
}
.td-prio:hover .td-someday,.td-someday:focus-visible{opacity:1;background:var(--card);border-color:var(--line);}
.td-someday:focus-visible{outline:2px solid var(--plum);outline-offset:1px;}
.td-someday[aria-busy="true"]{opacity:.5;cursor:progress;}
.td-prio.td-is-someday{opacity:.62;}
.td-prio.td-is-someday .pt{font-weight:600;}
.td-prio.td-is-someday .td-someday{opacity:.85;}

/* ============================================================================
   JUL 13 2026 — TAPPABLE LIST ROWS (Shopping + To-Do)
   The item NAME was a plain <div> in both lists: no handler, no anchor, no tap
   target. Nick tapped a Shopping item for a buy link and got nothing — and it
   would have done nothing on desktop too. It is now an <a>. These rules keep it
   looking exactly as it did (no UA blue, no underline) while giving it a real,
   thumb-sized hit area on touch.
   ============================================================================ */
.td-prio a.pt{
  display:block;
  color:inherit;
  text-decoration:none;
  /* 44px is the Apple/WCAG minimum touch target. The old row was ~18px of inert text and
     measured 0 — there was nothing to hit. Measured live after this rule: 44-113px. */
  /* box-sizing is border-box app-wide, so min-height INCLUDES the padding — 32px here gave a
     32px box, not 44. Set the real target directly. Verified live: min 44px across all 45 rows. */
  min-height:44px;
  padding:6px 0;
  margin:-6px 0;
  display:flex; align-items:center; flex-wrap:wrap; gap:0 2px;
  -webkit-tap-highlight-color:rgba(0,0,0,.06);
  cursor:pointer;
}
.td-prio a.pt:hover,
.td-prio a.pt:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.td-prio a.pt:focus-visible{ outline:2px solid var(--gold,#c79a3a); outline-offset:2px; border-radius:6px; }
.td-prio a.pt:active{ opacity:.62; }

/* the little ↗ that tells him the row GOES somewhere */
.shop-go, .td-go{ font-size:11px; opacity:.45; margin-left:2px; }

/* honest absence: he can SEE there's no link before he taps, and the tap still
   takes him to the Monday item where he'd add one. A dead tap is a lie. */
.shop-nolink-chip{
  display:inline-block; margin-left:6px; padding:1px 7px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  border-radius:999px; vertical-align:1px;
  background:rgba(180,140,40,.14); color:#8a6a1f;
  border:1px solid rgba(180,140,40,.28);
}
.td-prio a.pt.shop-nolink{ opacity:.86; }

/* Unsorted = a failure signal, not a store. Loud on purpose. */
.shop-segmented .seg-btn[data-shop="unsorted"]{
  color:#a2531c; border-color:rgba(200,110,40,.45); background:rgba(220,140,60,.10);
}
.shop-segmented .seg-btn[data-shop="unsorted"].is-active{
  background:rgba(220,140,60,.20); color:#8a3f10;
}

/* JUL 13 2026 (corrected) — Shopping: a row with a product link is a LINK; a row without one is
   visibly DISABLED and says so when tapped. The two must never look the same. */
.td-prio .pt.shop-nolink{
  display:flex; align-items:center; flex-wrap:wrap; gap:0 2px;
  min-height:44px; padding:6px 0; margin:-6px 0;
  color:var(--muted); cursor:default; opacity:.9;
}
.shop-row-nolink{ opacity:.82; }

/* 🔴 BUNDLE ROW (2026-07-22) — one row that expands into a checklist of every buyable link.
   Distinct from a "no link yet" row: a bundle HAS its links, folded up. Green = actionable. */
.td-prio .pt.shop-bundle-head{
  display:flex; align-items:center; flex-wrap:wrap; gap:0 2px;
  min-height:44px; padding:6px 0; margin:-6px 0;
  cursor:pointer; color:#2f6f4f; font-weight:600;
}
.shop-bundle-chip{
  display:inline-block; margin-left:6px; padding:1px 8px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  border-radius:999px; vertical-align:1px;
  background:rgba(47,111,79,.12); color:#2f6f4f; border:1px solid rgba(47,111,79,.3);
}
.shop-bundle-caret{ display:inline-block; transition:transform .15s ease; }
.shop-bundle-head.is-open .shop-bundle-caret{ transform:rotate(180deg); }
.shop-bundle-body{ margin:8px 0 4px; }
.shop-bundle-note{
  font-size:11.5px; line-height:1.4; color:var(--muted);
  margin-bottom:8px;
}
.shop-bundle-list{ list-style:none; margin:0; padding:0; }
.shop-bundle-list li{ margin:0; border-top:1px solid rgba(0,0,0,.06); }
.shop-bundle-list li:first-child{ border-top:none; }
.shop-bundle-list a.shop-blink{
  display:flex; align-items:center; flex-wrap:wrap; gap:0 4px;
  min-height:40px; padding:7px 0; text-decoration:none; color:inherit; font-size:13.5px;
}
.shop-bundle-list a.shop-blink:active{ opacity:.6; }
.shop-bundle-list .shop-blink-nolink{ display:flex; align-items:center; min-height:40px; padding:7px 0; color:var(--muted); }
.shop-bundle-list .pw{ margin-left:auto; font-weight:600; opacity:.7; }
.shop-bundle-total{
  margin-top:8px; padding-top:8px; border-top:1px solid rgba(0,0,0,.1);
  font-size:12px; font-weight:700; color:#2f6f4f;
}
.shop-nolink-note{
  margin-top:5px; font-size:11.5px; font-weight:600; line-height:1.35;
  color:#8a6a1f; background:rgba(180,140,40,.10);
  border:1px solid rgba(180,140,40,.24); border-radius:10px; padding:5px 8px;
}
.shop-missing-banner{
  margin:0 0 10px; padding:8px 11px; border-radius:12px;
  font-size:12px; font-weight:600; color:#8a6a1f;
  background:rgba(180,140,40,.10); border:1px solid rgba(180,140,40,.26);
}
.shop-missing-hint{ font-weight:500; opacity:.85; }

/* The H&S home tile was wrapping its eyebrow one character per line at 390px — the
   "need judgment" badge was squeezing the label column to nothing. Let the badge wrap
   instead of strangling the text. */
@media (max-width: 899px){
  #view-home .hm-biz{ min-width:0; }
  #view-home .hm-biz .hm-biz-head,
  #view-home .hm-biz > div:first-child{ flex-wrap:wrap; gap:4px 6px; min-width:0; }
  #view-home .hm-biz .hm-eyebrow,
  #view-home .hm-biz .hm-biz-eyebrow{ white-space:normal; word-break:normal; overflow-wrap:anywhere; min-width:0; }
}