/* =====================================================================
   WARM BENTO ROLLOUT — WP-7 (2026-07-25)
   Ruling (FAMILY-APP-DIALED-IN-EXECUTION-BRIEF-2026-07-24): the life/family
   screens run WARM BENTO (the Home look — cream #f6efe3, soft shadows,
   Fraunces italic accents; spec DESIGN-SPEC.md). Scope here:
     #view-calendar · #view-todo · #view-shopping · #view-finances · #view-extras
   (Home is already done + off-limits; Health/Updates are POP and off-limits.)

   WHY THIS SHEET EXISTS: css/bento.css (Pop Bento, loads before this) REMAPS
   the warm tokens to the pop palette inside these very views (its W2.1 block)
   and pop-styles their structure (its Wave-3 rules). This sheet loads LAST
   (after bento.css + reskin-updates.css) and:
     (1) restores the DESIGN-SPEC warm token VALUES scoped to these views, and
     (2) re-states the warm treatment for the selectors bento pop'd,
   so reskin-family.css / extras.css (both authored in warm tokens) render warm
   again and these screens match the Home standard.

   Visual layer only. Zero selector renames, zero JS/behaviour changes. Every
   rule is scoped to one of the five views so nothing leaks to Home/Health/
   Updates/Business/Actions/Skippy. Matches the reskin-updates.css convention.
   ===================================================================== */

/* =====================================================================
   1. WARM TOKEN RESTORATION  (counters bento.css W2.1 pop-remap)
   Same specificity as bento's remap (each view id = 1,0,0); this loads
   later, so it wins. Values are DESIGN-SPEC.md :root, verbatim.
   ===================================================================== */
#view-calendar, #view-todo, #view-shopping, #view-finances, #view-extras{
  --cream:#f6efe3; --cream-2:#fdf9f1; --card:#fffdf8;
  --ink:#241b26; --ink-2:#3d2e40; --text:#3a2b33;
  --plum:#5a2660; --plum-soft:#7a4a80;
  --clay:#b9603c; --gold:#d99a3a; --sage:#8f9d6f;
  --gold-ink:#8a5a10; --sage-ink:#496b4c;
  --muted:#8d7f6b; --line:#ece2d2;
  --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; --radius-sm:20px;
  --shadow-card:0 2px 10px rgba(58,43,51,.06);
  --shadow:0 2px 10px rgba(58,43,51,.06);
  --shadow-sm:0 1px 4px rgba(58,43,51,.05);
  --shadow-md:0 6px 18px rgba(36,27,38,.12);
  --shadow-float:0 8px 24px rgba(36,27,38,.35);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}

/* paper page behind these views (fail-soft to the app bg) */
body:has(#view-calendar:not([hidden])),
body:has(#view-todo:not([hidden])),
body:has(#view-shopping:not([hidden])),
body:has(#view-finances:not([hidden])),
body:has(#view-extras:not([hidden])){ background:var(--cream,#f6efe3); }

/* =====================================================================
   2. SHARED WARM FURNITURE  (override bento W2.5 pop treatment)
   ===================================================================== */
/* View title → Fraunces italic plum (the warm "Home look" identity) */
#view-calendar .topbar h1, #view-todo .topbar h1, #view-shopping .topbar h1,
#view-finances .topbar h1, #view-extras .topbar h1{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:32px; letter-spacing:-.01em; color:var(--plum);
}
/* Section titles → warm eyebrow (sans, muted, uppercase) */
#view-calendar .section-title, #view-todo .section-title,
#view-shopping .section-title, #view-finances .section-title,
#view-extras .section-title{
  font-family:var(--sans); font-weight:700; font-size:12px;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--muted);
  margin:22px 4px 10px;
}
/* Cards → warm: cream-white fill, soft shadow, no hard outline, 24px radius */
#view-calendar .card, #view-todo .card, #view-shopping .card,
#view-finances .card, #view-extras .card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
#view-calendar .card-head h2, #view-finances .card-head h2,
#view-extras .card-head h2{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); font-style:normal;
}
/* Segmented sub-nav → warm chip: cream inactive, plum active (DESIGN-SPEC) */
#view-todo .seg-btn, #view-shopping .seg-btn,
#view-finances .seg-btn, #view-extras .seg-btn{
  font-family:var(--sans); font-weight:600; font-size:12px;
  background:var(--chip-bg); border:none; color:var(--chip-ink);
  padding:7px 14px; border-radius:999px;
}
#view-todo .seg-btn.is-active, #view-shopping .seg-btn.is-active,
#view-finances .seg-btn.is-active, #view-extras .seg-btn.is-active{
  background:var(--plum); color:#f6efe3; font-weight:700;
}
/* Primary buttons → warm gold pill */
#view-todo .btn-primary, #view-shopping .btn-primary, #view-extras .btn-primary,
#view-finances .btn-primary{
  background:var(--gold); color:#4a3208; border:none; border-radius:999px;
  font-family:var(--sans); font-weight:700; box-shadow:none;
}
#view-todo .btn-primary:active, #view-shopping .btn-primary:active,
#view-extras .btn-primary:active, #view-finances .btn-primary:active{ transform:scale(.97); }
/* Text inputs → warm pill */
#view-todo .fin-num-input, #view-shopping .fin-num-input,
#view-finances .fin-num-input, #view-extras .xtr-textarea{
  background:var(--card); border:1px solid var(--line); border-radius:14px; color:var(--text);
}
#view-todo .fin-num-input:focus, #view-shopping .fin-num-input:focus,
#view-finances .fin-num-input:focus, #view-extras .xtr-textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,154,58,.15); outline:none;
}
/* pop.js dark statement heroes → keep the one dark anchor, warm its bleeds */
#view-todo .pp-hero, #view-shopping .pp-hero, #view-finances .pp-hero,
#view-calendar .pp-upnext{
  background:var(--ink); border-radius:28px; box-shadow:var(--shadow-float);
}
#view-todo .pp-hero::before, #view-shopping .pp-hero::before,
#view-finances .pp-hero::before, #view-calendar .pp-upnext::before{ background:var(--gold); opacity:.85; }
#view-todo .pp-hero::after, #view-shopping .pp-hero::after,
#view-finances .pp-hero::after, #view-calendar .pp-upnext::after{ background:var(--clay); opacity:.8; }
#view-todo .pp-eyebrow, #view-shopping .pp-eyebrow, #view-finances .pp-eyebrow,
#view-calendar .pp-up-eyebrow{ font-family:var(--sans); color:var(--gold); letter-spacing:.14em; }
#view-todo .pp-line .pp-star, #view-shopping .pp-line .pp-star,
#view-finances .pp-line .pp-star{ color:var(--gold); }
#view-todo .pp-pill.done, #view-shopping .pp-pill.done, #view-finances .pp-pill.done{ background:var(--sage); }

/* =====================================================================
   3. CALENDAR
   ===================================================================== */
/* light date hero */
#view-calendar .pp-cal-eyebrow{ font-family:var(--sans); color:var(--muted); letter-spacing:.12em; }
#view-calendar .pp-cal-day{ font-family:var(--serif); font-style:italic; font-weight:600; color:var(--plum); letter-spacing:0; }
#view-calendar .pp-cal-num{ -webkit-text-stroke:0; color:var(--plum); font-family:var(--serif); }
#view-calendar .pp-cal-sub{ font-family:var(--sans); color:var(--muted); }
/* week strip: white ink-hairline cells, today = plum, event dot = gold */
#view-calendar .day-cell{
  background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-card);
}
#view-calendar .day-cell .dow{ font-family:var(--sans); font-weight:700; color:var(--muted); letter-spacing:.6px; }
#view-calendar .day-cell .dnum{ font-family:var(--sans); font-weight:700; color:var(--text); font-size:16px; }
#view-calendar .day-cell.has-ev::after{ background:var(--gold); box-shadow:none; width:5px; height:5px; }
#view-calendar .day-cell.today{ background:var(--plum); border-color:var(--plum); }
#view-calendar .day-cell.today .dow, #view-calendar .day-cell.today .dnum{ color:#f6efe3; }
#view-calendar .day-cell.today.has-ev::after{ background:var(--gold); }
/* all-day chips */
#view-calendar .cal-allday-chip{
  background:var(--chip-bg); border:none; color:var(--chip-ink);
  font-family:var(--sans); font-weight:600; font-size:12px; border-radius:999px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* timeline: cream canvas, muted hour labels, clay now-line */
#view-calendar .cal-timeline{ background:var(--cream-2); border:1px solid var(--line); border-radius:18px; overflow-x:hidden; }
#view-calendar .cal-hour{ border-top:1px solid rgba(236,226,210,.9); }
#view-calendar .cal-hour-label{ font-family:var(--sans); color:var(--muted); background:var(--cream-2); }
#view-calendar .cal-now-line{ height:3px; background:var(--clay); box-shadow:none; border-radius:2px; }
#view-calendar .cal-now-line::before{ width:9px; height:9px; background:var(--clay); border:none; top:-4px; left:-5px; }
/* timeline blocks → white cards w/ rounded clay INSET bar (no straight edge) */
#view-calendar .cal-block, #view-calendar .cal-block.cal-c1, #view-calendar .cal-block.cal-c2,
#view-calendar .cal-block.cal-c3, #view-calendar .cal-block.cal-c4{
  background:var(--card); border:none; border-radius:16px; box-shadow:var(--shadow-card);
  outline:none; padding-left:18px; max-width:100%;
}
#view-calendar .cal-block::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px; width:3px;
  border-radius:2px; background:var(--clay);
}
#view-calendar .cal-block.cal-c1::before{ background:var(--plum); }
#view-calendar .cal-block.cal-c2::before{ background:var(--clay); }
#view-calendar .cal-block.cal-c3::before{ background:var(--gold); }
#view-calendar .cal-block.cal-c4::before{ background:var(--sage); }
#view-calendar .cal-block .cal-block-title{ color:var(--text); font-weight:600; }
#view-calendar .cal-block .cal-block-time{ font-family:var(--sans); color:var(--muted); }
#view-calendar .cal-block-past{ opacity:.42; background:var(--cream-2); border:none; box-shadow:none; }
#view-calendar .cal-block-past::before{ background:var(--line); }
/* upcoming agenda */
#view-calendar .cal-upcoming-day{ font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:1.1px; color:var(--muted); }
#view-calendar .g-time{ font-family:var(--sans); color:var(--clay); font-weight:700; }
#view-calendar .glance-item .dot{ border:none; width:8px; height:8px; }
#view-calendar .dot-plum, #view-calendar .dot.cal-c1{ background:var(--plum); }
#view-calendar .dot-clay, #view-calendar .dot.cal-c2{ background:var(--clay); }
#view-calendar .dot-gold, #view-calendar .dot.cal-c3{ background:var(--gold); }
#view-calendar .dot-sage, #view-calendar .dot.cal-c4{ background:var(--sage); }

/* =====================================================================
   4. TO-DO (+ prow rows shared with Shopping)
   ===================================================================== */
#view-todo .td-card{ background:transparent; border:none; box-shadow:none; padding:0; margin-top:10px; }
#view-todo .td-list{ gap:10px; }
#view-todo .td-prio{
  background:var(--card); border:none; border-radius:20px; box-shadow:var(--shadow-card);
  padding:14px 16px; align-items:center;
}
#view-todo .td-prio .pt{ font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
#view-todo .td-prio .pw{ font-size:11px; font-weight:600; color:var(--muted); overflow-wrap:anywhere; }
/* urgency dot: soft round dot (warm), only when the row has an urgency class */
#view-todo .td-prio::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--line); border:none; display:none;
}
#view-todo .td-prio.td-overdue::before{ background:var(--clay); display:block; }
#view-todo .td-prio.td-today::before{ background:var(--gold); display:block; }
#view-todo .td-prio.td-week::before{ background:var(--sage); display:block; }
/* checkbox → warm 26px round, done = sage */
#view-todo .chk, #view-shopping .chk{
  width:26px; height:26px; border-radius:50%; border:2px solid #c9b99f;
  background:var(--card); color:transparent;
}
#view-todo .chk:hover, #view-shopping .chk:hover{ border-color:var(--sage); }
#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(--sage); border-color:var(--sage); color:#fdf9f1;
}
#view-todo .td-prio.chk-done{ border-color:transparent; }
/* level pills → warm rounded pills */
#view-todo .td-lv{
  font-family:var(--sans); font-weight:700; border:none; border-radius:999px;
  padding:3px 9px; letter-spacing:.03em; background:var(--chip-bg); color:var(--chip-ink);
}
#view-todo .td-prio.td-overdue .td-lv{ background:rgba(185,96,60,.16); color:#8a3f22; }
#view-todo .td-prio.td-today .td-lv{ background:rgba(217,154,58,.18); color:#8a5a10; }
#view-todo .td-prio.td-week .td-lv{ background:rgba(143,157,111,.2); color:#4f612f; }
#view-todo .todo-noah-intro{ color:var(--muted); }
#view-todo .todo-noah-intro strong{ color:var(--text); }
#view-todo .todo-noah-intro{ overflow-wrap:anywhere; }

/* =====================================================================
   5. SHOPPING
   ===================================================================== */
#view-shopping .shop-add-card{
  background:var(--card); border:none; border-radius:20px; padding:12px 14px;
  box-shadow:var(--shadow-card); margin-top:14px;
}
#view-shopping .shop-add-error{ color:var(--clay); font-weight:600; }
/* item list → blush list-group card, rows divided by hairlines */
#view-shopping .td-card{
  background:var(--tile-blush); border:none; box-shadow:none; border-radius:20px; padding:4px; margin-top:12px;
}
#view-shopping .shop-list{ gap:0; }
#view-shopping .td-prio{
  background:transparent; border:none; border-radius:0; box-shadow:none; margin-bottom:0;
  padding:12px 12px; align-items:center;
}
#view-shopping .td-prio + .td-prio{ border-top:1px solid rgba(110,48,24,.15); }
#view-shopping .chk{ border-color:rgba(110,48,24,.35); }
#view-shopping .chk:hover{ border-color:var(--tile-blush-ink); }
#view-shopping .td-prio .pt{ font-size:13.5px; font-weight:600; color:var(--tile-blush-ink); overflow-wrap:anywhere; }
#view-shopping .td-prio .pw{ font-size:11px; font-weight:600; color:var(--tile-blush-mut); }
/* order-via-Skippy bar */
#view-shopping .shop-order-btn{
  background:var(--gold); color:#4a3208; font-family:var(--sans); font-size:12.5px; font-weight:700;
  border:none; border-radius:999px; padding:9px 18px; box-shadow:none;
}
#view-shopping .shop-order-btn:active{ transform:scale(.96); }
#view-shopping .shop-order-status{ font-size:12.5px; color:var(--muted); }

/* =====================================================================
   6. FINANCES
   ===================================================================== */
#view-finances .fin-mo-btn{
  font-family:var(--sans); font-weight:600; font-size:12px;
  background:var(--chip-bg); border:none; color:var(--chip-ink); border-radius:999px;
}
#view-finances .fin-mo-btn.is-active{ background:var(--plum); color:#f6efe3; font-weight:700; }
#view-finances .fin-mo-btn.is-active .fin-mo-tag{ color:var(--gold); }
#view-finances .fin-mo-june{ }
/* narrative / insights cards (app.js tags them w/ an inline cyan border-left)
   → warm white card w/ rounded gold inset bar */
#view-finances .card[style*="22d3ee"], #view-finances .card[style*="border-left"]{
  background:var(--card)!important; border:1px solid var(--line)!important;
  border-left:1px solid var(--line)!important; box-shadow:var(--shadow-card);
  border-radius:var(--radius); position:relative; overflow:hidden;
}
#view-finances .card[style*="22d3ee"]::before, #view-finances .card[style*="border-left"]::before{
  content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:2px; background:var(--gold);
}
/* summary rows */
#view-finances .glance-item{ font-size:14px; }
#view-finances .glance-item .dot{ border:none; width:8px; height:8px; }
#view-finances .dot-sage{ background:var(--sage); }
#view-finances .dot-clay{ background:var(--clay); }
#view-finances .dot-gold{ background:var(--gold); }
#view-finances .glance-item > span[style*="margin-left:auto"]{
  font-family:var(--sans); font-size:16px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--text);
}
/* category groups → warm pastel tiles (color rotation), 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:none; border-radius:20px; padding:14px 16px; margin-top:12px; box-shadow:var(--shadow-card); }
#view-finances .fin-cat-group:nth-of-type(5n+1){ background:var(--tile-lilac); }
#view-finances .fin-cat-group:nth-of-type(5n+2){ background:var(--tile-butter); }
#view-finances .fin-cat-group:nth-of-type(5n+3){ background:var(--tile-sage); }
#view-finances .fin-cat-group:nth-of-type(5n+4){ background:var(--tile-blush); }
#view-finances .fin-cat-group:nth-of-type(5n+5){ background:var(--card); }
#view-finances .fin-group-h{ font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
#view-finances .fin-cat-group .todo-list li{ color:var(--text); font-weight:600; font-size:13.5px; }
#view-finances .fin-cat-group .dot{ border:none; }
#view-finances .fin-cat-group span[style*="margin-left:auto"]{ font-family:var(--sans); color:var(--text)!important; }
#view-finances .fin-num-input{ font-family:var(--sans); }
#view-finances .card-link{ font-weight:700; font-size:12px; color:var(--plum); }

/* =====================================================================
   7. EXTRAS  (extras.css is warm-token authored → re-warms with §1 above;
   only bento's specific overrides need reverting to warm here)
   ===================================================================== */
#view-extras .xtr-note{ color:var(--muted); overflow-wrap:anywhere; }
#view-extras .xtr-drop{
  border:1.5px dashed var(--line); border-radius:16px; background:var(--cream); color:var(--muted);
}
#view-extras .xtr-drop.is-over{ border-color:var(--gold); background:#fdf8ef; }
#view-extras .xtr-btn{
  background:var(--gold); color:#4a3208; border:none; border-radius:999px; font-family:var(--sans); font-weight:700; box-shadow:none;
}
#view-extras .bc-refresh-btn{ background:var(--gold); color:#4a3208; }
/* long-string guards for the panels the recon flagged */
#view-extras .bc-name, #view-extras .med-name, #view-extras .xtr-item-name{ min-width:0; }
#view-extras .vlb-n, #view-extras .vlb-note, #view-extras .bc-collapse summary{ overflow-wrap:anywhere; }

/* =====================================================================
   8. Skeleton loading rows (replace the dead "Placeholder …" rows)
   The static dummy .td-prio rows now carry class .td-skel + an empty .sk-line
   (see index.html edit); render them as a quiet shimmer, never as text.
   ===================================================================== */
#view-todo .td-skel, #view-shopping .td-skel{ pointer-events:none; }
#view-todo .td-skel .chk, #view-shopping .td-skel .chk{ border-color:var(--line); opacity:.6; }
#view-todo .sk-line, #view-shopping .sk-line{
  height:12px; width:62%; border-radius:6px;
  background:linear-gradient(90deg, rgba(141,127,107,.14) 25%, rgba(141,127,107,.24) 37%, rgba(141,127,107,.14) 63%);
  background-size:400% 100%; animation:warmSkel 1.4s ease-in-out infinite;
}
#view-todo .td-skel:nth-child(2) .sk-line{ width:48%; }
#view-todo .td-skel:nth-child(3) .sk-line{ width:70%; }
@keyframes warmSkel{ 0%{background-position:100% 0} 100%{background-position:0 0} }
@media (prefers-reduced-motion:reduce){ #view-todo .sk-line, #view-shopping .sk-line{ animation:none; } }

/* =====================================================================
   9. 375px safety — no horizontal overflow, no one-word-per-line
   ===================================================================== */
#view-calendar *, #view-todo *, #view-shopping *, #view-finances *, #view-extras *{ min-width:0; }
@media (max-width:400px){
  #view-calendar .topbar h1, #view-todo .topbar h1, #view-shopping .topbar h1,
  #view-finances .topbar h1, #view-extras .topbar h1{ font-size:28px; }
  #view-finances .fin-months{ flex-wrap:wrap; }
  #view-shopping .segmented, #view-finances .segmented, #view-todo .segmented,
  #view-extras .segmented{ flex-wrap:wrap; }
}

/* =====================================================================
   10. DESKTOP ≥900px — FULL-WIDTH (match Home/Health/Business exactly)
   🔴 RESKIN-REDO 2026-07-25 (agent a76b8e37): the previous `max-width:760px;
   margin:auto` PAGE CAP here was the exact defect Nick rejected — it shrank
   these life screens to mid-width with negative space on the sides while
   Home/Health/Business ran full-width. REMOVED. These `.page`/`.topbar`/
   `.segmented` now inherit desktop.css §2's `max-width:var(--dw)` (the same
   full-width rule Home/Health/Business use), so they fill the canvas and the
   desktop multi-column layouts (calendar aside, to-do grid) work as intended.
   NO page-level max-width cap is set here — that is banned for this run.
   ===================================================================== */
@media (min-width:900px){
  /* warm cards get a soft lift on hover, not the pop sticker shadow */
  #view-calendar .card:hover, #view-todo .td-prio:hover, #view-finances .card:hover,
  #view-shopping .td-prio:hover, #view-extras .card:hover{
    box-shadow:var(--shadow-md); transform:none;
  }
  .seg-btn:hover:not(.is-active){ background:var(--chip-bg); }
}

/* =====================================================================
   11. EVENING MODE — dim, red-shifted "after-dark" wash (js/evening.js
   sets :root[data-evening] after ~19:00 local; the house runs red
   incandescent after sunset, so the app follows).
   Implemented as a uniform warm-dim filter on the view rather than token
   flips ALONE, because bento.css hardcodes background:#fff on many
   elements (day-cell, td-prio, card, cal-block…) that token overrides
   can't reach — a filter re-tints every pixel uniformly, so contrast is
   preserved over whatever the underlying color is.
   ===================================================================== */
:root[data-evening] #view-calendar,
:root[data-evening] #view-todo,
:root[data-evening] #view-shopping,
:root[data-evening] #view-finances,
:root[data-evening] #view-extras{
  filter:brightness(.82) contrast(.97) sepia(.34) hue-rotate(-14deg) saturate(1.16);
}
:root[data-evening] body:has(#view-calendar:not([hidden])),
:root[data-evening] body:has(#view-todo:not([hidden])),
:root[data-evening] body:has(#view-shopping:not([hidden])),
:root[data-evening] body:has(#view-finances:not([hidden])),
:root[data-evening] body:has(#view-extras:not([hidden])){ background:#241813; }