/* =====================================================================
   POP BENTO ROLLOUT — WP-7 (2026-07-25)
   Ruling (FAMILY-APP-DIALED-IN-EXECUTION-BRIEF-2026-07-24): the data-dense
   attention screens run POP BENTO (the Health look — neobrutalist, hard
   1.5px ink outlines, 4px offset "sticker" shadows, Bricolage Grotesque +
   Space Grotesk; spec POP-BENTO-SPEC.md). Scope here:
     #view-business · #view-actions · #view-skippy
   (Health + Updates are already POP + off-limits.)

   Loads LAST (after bento.css + reskin-updates.css). Visual layer only —
   zero selector renames, zero behaviour changes. Every rule is scoped to one
   of the three views. Matches the reskin-updates.css convention (scoped
   --pb-* tokens, sticker shadows, Bricolage/Space Grotesk).

   - BUSINESS: bento.css already color-fills its KPI tiles / flags. This sheet
     ELEVATES it to the Health/Updates bar (sticker shadows, real states) and
     fixes the 375px overflow bugs (wide tables, forced 4-col KPI grids).
   - ACTIONS: its inline <style> block (index.html) is REMOVED; its full skin
     lives here now, re-authored in Pop Bento.
   - SKIPPY: was excluded from bento's remap (still on legacy warm tokens);
     re-tinted from scratch to Pop Bento here.
   ===================================================================== */

/* ---- Scoped Pop tokens (self-contained; mirror bento :root + updates) ---- */
#view-business, #view-actions, #view-skippy{
  --pb-paper:#faf6ee; --pb-ink:#191621; --pb-butter:#ffd66b; --pb-lilac:#cfc0f5;
  --pb-mint:#c2e7c6; --pb-coral:#ff9d7a; --pb-sky:#bcd9f2; --pb-blush:#f6c6cf;
  --pb-dim:#6f6a78; --pb-line:rgba(25,22,33,.18); --pb-hard:rgba(25,22,33,.35);
  --pb-head:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --pb-num:"Space Grotesk","Hanken Grotesk",system-ui,sans-serif;
  --pb-body:"Hanken Grotesk",system-ui,sans-serif;
  --pb-shadow:4px 4px 0 var(--pb-ink);
  --pb-shadow-sm:3px 3px 0 var(--pb-ink);
}
body:has(#view-business:not([hidden])),
body:has(#view-actions:not([hidden])),
body:has(#view-skippy:not([hidden])){ background:var(--pb-paper,#faf6ee); }

/* =====================================================================
   BUSINESS — elevate bento's pop tiles to the Health/Updates sticker bar
   ===================================================================== */
#view-business .topbar h1{
  font-family:var(--pb-head); font-weight:800; font-size:34px; letter-spacing:-.03em; color:var(--pb-ink); font-style:normal;
}
/* content cards → hard ink outline + sticker shadow (Health "card" bar) */
#view-business .card{
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:24px; box-shadow:var(--pb-shadow);
}
/* KPI tiles → keep bento's color rotation, add the neobrutalist pop:
   firm ink outline + small sticker shadow */
#view-business .biz-kpi{
  border:1.5px solid var(--pb-ink); border-radius:22px; box-shadow:var(--pb-shadow-sm);
}
#view-business .biz-kpi .lab{ font-family:var(--pb-num); }
#view-business .biz-kpi .val{ font-family:var(--pb-num)!important; }
/* flags = attention feature cards → sticker shadow */
#view-business .biz-flag{
  border:1.5px solid var(--pb-ink); border-radius:16px; box-shadow:var(--pb-shadow-sm);
  overflow-wrap:anywhere;
}
#view-business .biz-flag .ttl{ font-family:var(--pb-head); font-weight:800; overflow-wrap:anywhere; }
#view-business .biz-flag .meta{ font-family:var(--pb-body); overflow-wrap:anywhere; }
/* multicolumn flag list: sticker cards need breathing room between columns */
#view-business #ov-flags.ov-flags-cols > .biz-flag{ margin:0 0 16px; }
/* section-title count pill already butter+ink in bento; reinforce font */
#view-business .section-title{ font-family:var(--pb-head); }
#view-business .section-title .hc-lbl{ font-family:var(--pb-num); }
/* watch-item status pills */
#view-business .biz-watch-item .st{ font-family:var(--pb-num); border:1.5px solid var(--pb-ink); }
#view-business .biz-watch-item .nm{ overflow-wrap:anywhere; }
/* drill-down modal already handled by bento (#bizListOverlay) — leave it */

/* --- 375px FIXES (the real bugs) --- */
/* wide 6/7-col tables: let the CARD scroll its table sideways instead of
   crushing/overflowing the page (JS-generated markup → can't wrap in a div) */
#view-business .card:has(table){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
#view-business .card table{ min-width:max-content; }
#view-business .card table td, #view-business .card table th{ white-space:nowrap; }
/* charts never spill past the viewport */
#view-business .chartbox{ max-width:100%; overflow-x:auto; }
#view-business .chartbox canvas{ max-width:100%; }
/* forced inline 4-col KPI grids (Sidekicks/Profitability/RO) → 2-col on phones */
@media (max-width:520px){
  #view-business .biz-kpis[style*="repeat(4"]{ grid-template-columns:repeat(2,1fr)!important; }
}
#view-business *{ min-width:0; }
@media (max-width:400px){ #view-business .topbar h1{ font-size:30px; } }

/* =====================================================================
   ACTIONS — full Pop Bento skin (was an inline <style>, now here)
   Renderer js/actions.js emits the frozen .na-* class contract.
   ===================================================================== */
/* 🔴 RESKIN-REDO 2026-07-25 (agent a76b8e37): the previous
   `max-width:720px; margin:0 auto` PAGE CAP was the mid-width defect Nick
   rejected. REMOVED — full-width now (the `.page` ancestor already carries
   desktop.css §2's `max-width:var(--dw)` + padding, matching Home/Health/
   Business). NO page-level cap. */
#view-actions .na-wrap{ max-width:none; margin:0; padding:8px 2px 96px; }
/* Full-width action-card grid: 2-col masonry ≥700px (mirrors Business's
   approved multi-column flags), single column on phones. The na-ask command
   bar + na-sub stay full-width (direct children of .na-wrap, outside the
   #na-live/#na-done card lists). */
#view-actions #na-live, #view-actions #na-done{ column-count:2; column-gap:18px; }
#view-actions #na-live > .na-card, #view-actions #na-done > .na-card{
  break-inside:avoid; -webkit-column-break-inside:avoid; display:inline-block; width:100%;
}
@media (max-width:700px){
  #view-actions #na-live, #view-actions #na-done{ column-count:1; }
}
#view-actions .topbar h1{
  font-family:var(--pb-head); font-weight:800; font-size:34px; letter-spacing:-.03em; color:var(--pb-ink); font-style:normal;
}
/* Ask-Skippy row */
#view-actions .na-ask{ display:flex; gap:8px; margin:4px 0 8px; }
#view-actions .na-ask input{
  flex:1; min-width:0; padding:12px 14px; font-family:var(--pb-body); font-size:15px;
  border:1.5px solid var(--pb-ink); border-radius:14px; background:#fff; color:var(--pb-ink);
}
#view-actions .na-ask input:focus{ outline:none; box-shadow:var(--pb-shadow-sm); }
#view-actions .na-ask button{
  padding:0 20px; border:1.5px solid var(--pb-ink); border-radius:14px;
  background:var(--pb-butter); color:var(--pb-ink); font-family:var(--pb-num); font-size:15px; font-weight:700;
  cursor:pointer; flex:none;
}
#view-actions .na-ask button:active{ transform:translate(2px,2px); }
#view-actions .na-ask button:disabled{ opacity:.5; }
#view-actions .na-ask-result{
  font-family:var(--pb-body); font-size:13.5px; line-height:1.45; padding:11px 13px; margin:0 0 12px;
  border-radius:13px; background:var(--pb-sky); border:1.5px solid var(--pb-ink); box-shadow:var(--pb-shadow-sm);
}
#view-actions .na-ask-result.err{ background:#fff2ef; border-color:var(--pb-coral); box-shadow:3px 3px 0 var(--pb-coral); color:#8a2f2f; }
#view-actions .na-sub{
  font-family:var(--pb-num); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.11em;
  color:var(--pb-dim); margin:2px 2px 16px;
}
/* the card */
#view-actions .na-card{
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:22px; padding:16px 17px 15px; margin:0 0 14px;
  box-shadow:var(--pb-shadow); position:relative; transition:box-shadow .15s ease, opacity .2s ease;
}
#view-actions .na-card.na-decided{ opacity:.66; box-shadow:2px 2px 0 rgba(25,22,33,.35); background:#fbfaf7; }
/* header: kind chip + meta */
#view-actions .na-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:9px; }
#view-actions .na-kind{
  font-family:var(--pb-num); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  border-radius:999px; padding:3px 10px; border:1.5px solid var(--pb-ink); background:var(--pb-mint); color:var(--pb-ink);
}
#view-actions .na-kind-payment{ background:var(--pb-butter); }
#view-actions .na-kind-order{ background:var(--pb-sky); }
#view-actions .na-meta{ font-family:var(--pb-num); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--pb-dim); }
/* plain-language headline (JS also sets weight/size inline — set family here) */
#view-actions .na-explain{ font-family:var(--pb-head); color:var(--pb-ink); letter-spacing:-.01em; overflow-wrap:anywhere; }
#view-actions .na-explain strong{ font-weight:800; } #view-actions .na-explain em{ font-style:italic; }
/* quoted inbound context → paper inset w/ ink spine */
#view-actions .na-ctx{ border-left:3px solid var(--pb-ink); padding:2px 0 2px 11px; margin:0 0 11px; }
#view-actions .na-ctx-from{ font-family:var(--pb-num); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pb-dim); margin-bottom:3px; }
#view-actions .na-ctx-text{ font-family:var(--pb-body); font-size:13.5px; line-height:1.45; color:var(--pb-ink); white-space:pre-wrap; overflow-wrap:anywhere; }
/* proposal → mint "on approve" inset, hard outline + sticker */
#view-actions .na-prop{
  background:var(--pb-mint); border:1.5px solid var(--pb-ink); border-radius:13px; padding:11px 13px; margin:0 0 4px; box-shadow:var(--pb-shadow-sm);
}
#view-actions .na-prop-to{ font-family:var(--pb-num); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pb-ink); margin-bottom:5px; }
#view-actions .na-prop-text{ font-family:var(--pb-body); font-size:14px; line-height:1.45; color:var(--pb-ink); white-space:pre-wrap; overflow-wrap:anywhere; }
#view-actions .na-prop-text strong{ font-weight:800; } #view-actions .na-prop-text em{ font-style:italic; }
/* collapsible detail (was unstyled) → paper inset */
#view-actions .na-detail{ margin:11px 0 0; font-family:var(--pb-body); font-size:13px; line-height:1.5; color:var(--pb-ink); }
#view-actions .na-detail > summary{ font-family:var(--pb-num); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pb-dim); cursor:pointer; }
#view-actions .na-detail-body{ margin-top:8px; background:var(--pb-paper); border:1.5px solid var(--pb-line); border-radius:12px; padding:11px 12px; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
/* open-link row */
#view-actions .na-openrow{ margin:11px 0 0; }
#view-actions a.na-openlink{ display:inline-block; text-decoration:none; }
/* buttons */
#view-actions .na-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 0; }
#view-actions .na-btn{
  font-family:var(--pb-num); font-size:12.5px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--pb-ink); background:#fff; color:var(--pb-ink); border-radius:999px; padding:8px 15px; line-height:1;
  -webkit-tap-highlight-color:transparent; transition:transform .12s ease, box-shadow .12s ease;
}
#view-actions .na-btn:hover{ box-shadow:var(--pb-shadow-sm); }
#view-actions .na-btn:active{ transform:translate(2px,2px); box-shadow:none; }
#view-actions .na-btn.na-primary{ background:var(--pb-butter); color:var(--pb-ink); }
#view-actions .na-btn[disabled]{ opacity:.45; cursor:default; box-shadow:none; transform:none; }
#view-actions a.na-openlink:not(.na-primary){ color:var(--pb-ink); }
/* inline edit box */
#view-actions .na-editbox{ margin:11px 0 0; }
#view-actions .na-edit-ta{
  width:100%; box-sizing:border-box; font-family:var(--pb-body); font-size:14px; line-height:1.45;
  border:1.5px solid var(--pb-ink); border-radius:13px; padding:11px 12px; resize:vertical; background:#fff; color:var(--pb-ink);
}
#view-actions .na-edit-ta:focus{ outline:none; box-shadow:var(--pb-shadow-sm); }
/* outcome states */
#view-actions .na-outcome{ margin:11px 0 0; font-family:var(--pb-body); font-size:13.5px; line-height:1.45; border-radius:13px; padding:10px 12px; font-weight:600; border:1.5px solid var(--pb-ink); overflow-wrap:anywhere; }
#view-actions .na-outcome.na-sent{ background:var(--pb-mint); color:var(--pb-ink); box-shadow:var(--pb-shadow-sm); }
#view-actions .na-outcome.na-failed{ background:#fff2ef; color:#8a2f2f; border-color:var(--pb-coral); box-shadow:3px 3px 0 var(--pb-coral); }
#view-actions .na-outcome.na-skipped{ background:var(--pb-paper); color:var(--pb-dim); font-weight:500; box-shadow:none; }
/* decided header + clear */
#view-actions .na-donehdr{ font-family:var(--pb-num); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:var(--pb-dim); margin:26px 2px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
#view-actions .na-donehdr::before{ content:""; }
#view-actions .na-clear{ font-family:var(--pb-num); text-transform:none; letter-spacing:normal; }
/* empty / loading / error — real styled states */
#view-actions .na-empty{
  text-align:center; margin:8px 0 0; padding:44px 22px; font-family:var(--pb-head); font-weight:700; font-size:16px; color:var(--pb-ink);
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:22px; box-shadow:var(--pb-shadow);
}
#view-actions .na-err{
  margin:8px 0 0; padding:22px; text-align:center; font-family:var(--pb-body); font-size:14px; font-weight:600;
  color:#8a2f2f; background:#fff2ef; border:1.5px solid var(--pb-coral); border-radius:22px; box-shadow:3px 3px 0 var(--pb-coral);
}
#view-actions *{ min-width:0; }
@media (max-width:400px){ #view-actions .topbar h1{ font-size:30px; } #view-actions .na-wrap{ padding-left:11px; padding-right:11px; } }

/* =====================================================================
   SKIPPY SCHOOL HUB — re-tinted to Pop Bento (was legacy warm)
   ===================================================================== */
#view-skippy .hero{ background:transparent; }
/* 🔴 RESKIN-REDO 2026-07-25 (agent a76b8e37): kill the legacy
   `.sk-hub-cards{ max-width:480px; margin:0 auto }` (styles.css) mid-width
   column cap so the Skippy School hub fills the page like the rest of the app.
   Two-id scope beats the unscoped legacy rule; auto-fit grid = 1 card on
   phones, up to 3 across on desktop. NO fixed page-level cap. */
#view-skippy .sk-hub-cards{
  max-width:none; margin:0; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px;
}
#view-skippy .hero-date{ font-family:var(--pb-num); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--pb-dim); }
#view-skippy .skippy-bubble{ background:var(--pb-ink); border-radius:22px; border:1.5px solid var(--pb-ink); box-shadow:var(--pb-shadow); }
/* two-ID specificity to beat reskin-dash.css's #view-skippy #sk-select .skippy-* plum rules */
#view-skippy #sk-select .skippy-name{ font-family:var(--pb-num); font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--pb-butter); opacity:1; }
#view-skippy #sk-select .skippy-text{ font-family:var(--pb-head); font-weight:800; font-style:normal; letter-spacing:-.02em; color:#fff; }
/* avatar picker cards → white ink-outline sticker cards */
#view-skippy .sk-kidpick{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
#view-skippy .sk-kidcard{
  width:145px; background:#fff; border:1.5px solid var(--pb-ink); border-radius:24px;
  padding:20px 12px; box-shadow:var(--pb-shadow); transition:transform .12s ease, box-shadow .12s ease;
}
#view-skippy .sk-kidcard:nth-child(1){ background:var(--pb-butter); }
#view-skippy .sk-kidcard:nth-child(2){ background:var(--pb-lilac); }
#view-skippy .sk-kidcard:nth-child(3){ background:var(--pb-mint); }
#view-skippy .sk-kidcard:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--pb-ink); }
#view-skippy .sk-face{ font-size:44px; }
#view-skippy .sk-face img{ width:76px; height:76px; object-fit:cover; border-radius:50%; display:block; margin:0 auto; border:1.5px solid var(--pb-ink); }
#view-skippy .sk-face svg{ width:52px; height:52px; display:block; margin:0 auto; stroke:var(--pb-ink); stroke-width:1.8; fill:none; }
#view-skippy .sk-who{ font-family:var(--pb-head); font-weight:800; font-size:18px; color:var(--pb-ink); margin-top:8px; }
#view-skippy .sk-age{ font-family:var(--pb-num); font-size:12px; font-weight:600; color:rgba(25,22,33,.6); margin-top:2px; }
/* hub hero → ink card w/ lilac + butter circle bleed */
#view-skippy .sk-hub-hero{
  background:var(--pb-ink); color:#fff; position:relative; overflow:hidden;
  padding:calc(env(safe-area-inset-top) + 24px) 22px 34px; border-radius:0 0 30px 30px; box-shadow:none;
}
#view-skippy .sk-hub-hero::after{ content:""; position:absolute; right:-50px; top:-60px; width:160px; height:160px; border-radius:50%; background:var(--pb-lilac); opacity:.4; }
#view-skippy .sk-hub-hero::before{ content:""; position:absolute; right:40px; bottom:-70px; width:130px; height:130px; border-radius:50%; background:var(--pb-butter); opacity:.35; }
#view-skippy .sk-hub-hero > *{ position:relative; z-index:1; }
#view-skippy .sk-hub-back{ background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.4); color:#fff; font-family:var(--pb-num); font-weight:700; border-radius:999px; }
#view-skippy .sk-hub-avatar{ border:1.5px solid rgba(255,255,255,.5); }
#view-skippy .sk-hub-greet{ font-family:var(--pb-head); font-weight:800; letter-spacing:-.02em; color:#fff; }
/* hub cards → color fills, hard ink outline, sticker shadow */
#view-skippy .sk-hub-card{
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:24px; box-shadow:var(--pb-shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
#view-skippy .sk-hub-card.day{ background:var(--pb-mint); }
#view-skippy .sk-hub-card.les{ background:var(--pb-lilac); }
#view-skippy .sk-hub-card.meet{ background:var(--pb-butter); }
#view-skippy .sk-hub-card:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--pb-ink); }
#view-skippy .sk-hub-tt{ font-family:var(--pb-head); font-weight:800; font-size:17px; color:var(--pb-ink); }
#view-skippy .sk-hub-sub{ font-family:var(--pb-num); font-size:12.5px; font-weight:500; color:rgba(25,22,33,.62); margin-top:2px; }
#view-skippy .sk-hub-arr{ margin-left:auto; color:var(--pb-ink); font-size:20px; }
/* icon chips: replace the emoji glyph (app.js-embedded, can't edit) with a
   line icon via CSS mask — hide the emoji, draw an ink icon in its place */
#view-skippy .sk-hub-icon{
  width:52px; height:52px; border-radius:16px; flex:none; position:relative;
  background:rgba(25,22,33,.1); font-size:0; color:transparent;
}
#view-skippy .sk-hub-card.day .sk-hub-icon, #view-skippy .sk-hub-card.les .sk-hub-icon, #view-skippy .sk-hub-card.meet .sk-hub-icon{ background:rgba(25,22,33,.12); }
#view-skippy .sk-hub-icon::before{
  content:""; position:absolute; inset:0; margin:auto; width:26px; height:26px;
  background:var(--pb-ink); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;
}
/* My Day = sun/check ; Lessons = bolt ; Assessments = target (line icons, data URIs) */
#view-skippy .sk-hub-card.day .sk-hub-icon::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
#view-skippy .sk-hub-card.les .sk-hub-icon::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}
#view-skippy .sk-hub-card.meet .sk-hub-icon::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
}
#view-skippy *{ min-width:0; }
@media (max-width:400px){
  #view-skippy .sk-kidcard{ width:calc(50% - 8px); }
}

/* =====================================================================
   EVENING MODE — dim, red-shifted after-dark wash (js/evening.js sets
   :root[data-evening] after ~19:00). Uniform filter (see reskin-warm.css
   note): robust over bento's hardcoded #fff surfaces, contrast-preserving.
   ===================================================================== */
:root[data-evening] #view-business,
:root[data-evening] #view-actions,
:root[data-evening] #view-skippy{
  filter:brightness(.82) contrast(.97) sepia(.34) hue-rotate(-14deg) saturate(1.16);
}
:root[data-evening] body:has(#view-business:not([hidden])),
:root[data-evening] body:has(#view-actions:not([hidden])),
:root[data-evening] body:has(#view-skippy:not([hidden])){ background:#241813; }