/* Warm Bento reskin — Business · Health · Skippy (owned by dashboard-views build agent)
   Loads AFTER styles.css → equal-specificity selectors win. No !important unless a
   pre-existing inline/!important rule forces it. Only touches #view-business,
   #view-health, #view-skippy and the shared modals those views open (mk-*/bizList).
   All chart CANVAS colors are frozen in app.js — we style the containers/cards only. */

/* =====================================================================
   BUSINESS (#view-business) — butter is the domain color
   ===================================================================== */

/* Section headers: 13px/700 ink instead of the tiny muted eyebrow, with the
   right-side meta chip (the .hc-lbl count) reading as a soft pill. */
#view-business .section-title{
  font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:0;text-transform:none;color:#3a2b33;
  margin:24px 4px 8px;
}
#view-business .section-title .hc-lbl{
  margin-left:auto;font-size:11px;font-weight:600;color:var(--chip-ink);
  background:var(--chip-bg);border-radius:999px;padding:3px 10px;letter-spacing:0;
}

/* KPI tiles → white bento cards (mockup: white #fffdf8, radius 20, pad 12,
   shadow-card; eyebrow 10px/700/ls.5 muted; number 24px/700 ink; alert #a3452a;
   foot 10px/600). The colored top-bar accent becomes a soft leading status dot. */
#view-business .biz-kpi{
  background:var(--card);border:none;border-radius:var(--radius-sm);
  padding:14px 13px 13px;box-shadow:var(--shadow-card);overflow:hidden;
}
#view-business .biz-kpi::before{
  content:"";position:absolute;left:13px;top:16px;right:auto;
  width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:1;
}
#view-business .biz-kpi.good::before{background:var(--sage);}
#view-business .biz-kpi.warn::before{background:var(--clay);}
#view-business .biz-kpi.amb::before{background:var(--gold);}
#view-business .biz-kpi .lab{
  font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);padding-left:14px;
}
#view-business .biz-kpi .val{
  font-family:var(--sans);font-size:24px;font-weight:700;color:#3a2b33;
  margin-top:6px;letter-spacing:-.01em;
}
#view-business .biz-kpi.warn .val{color:#a3452a;}
#view-business .biz-kpi.good .val{color:#5a7a52;}
#view-business .biz-kpi.amb .val{color:#95651c;}
#view-business .biz-kpi .note{font-size:10px;font-weight:600;color:var(--muted);margin-top:3px;}

/* "Needs your judgment" flags → white cards with an 8px leading status dot + 26px
   dismiss circle. app.js writes .biz-flag.urgent/.warn/.watch + an inline dismiss
   button; we restyle the card + turn its left-border stripe into a leading dot. */
#view-business .biz-flag{
  background:var(--card);border:none;border-left:none;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);padding:14px 16px 14px 30px;position:relative;
}
#view-business .biz-flag::before{
  content:"";position:absolute;left:15px;top:18px;width:8px;height:8px;border-radius:50%;
  background:var(--gold);
}
#view-business .biz-flag.urgent::before{background:var(--clay);}
#view-business .biz-flag.warn::before{background:var(--gold);}
#view-business .biz-flag.watch::before{background:var(--sage);}
#view-business .biz-flag .ttl{font-size:13px;font-weight:600;color:#3a2b33;}
#view-business .biz-flag .meta{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5;}
/* Dismiss button (inline-styled in app.js) → 26px cream circle w/ plum check.
   The button carries onclick="bizDismissFlag(...)" — target it without a class. */
#view-business .biz-flag > button[onclick^="bizDismissFlag"]{
  width:26px;height:26px;border-radius:50%;border:none;
  background:var(--chip-bg);color:var(--plum);font-size:13px;top:12px;right:12px;
}

/* Watchlist rows (ov-watch) → warm blush-ink dividers + in-domain status pills.
   app.js generates .biz-watch-item with an inline dot + .nm + .st pill. */
#view-business #ov-watch .biz-watch-item{
  border-top:1px solid rgba(143,66,37,0.13);padding:11px 2px;
}
#view-business #ov-watch .biz-watch-item .nm{font-size:13px;font-weight:600;color:#3a2b33;}
#view-business #ov-watch .biz-watch-item .st.risk{background:rgba(185,96,60,.14);color:#a3452a;}
#view-business #ov-watch .biz-watch-item .st.mon{background:rgba(217,154,58,.16);color:#95651c;}

/* Charts sit INSIDE their cards (canvas colors are frozen). The money-family charts
   (revenue + loan paydown) get a butter card per the mockup's revenue-hero language;
   :has() degrades gracefully where unsupported (rule simply doesn't apply). */
#view-business .chartbox{border-radius:14px;overflow:hidden;}
#view-business #bp-finance .card:has(#biz-revChart),
#view-business #bp-finance .card:has(#biz-loanChart){
  background:var(--tile-butter);box-shadow:none;border:none;
}
#view-business #bp-finance .card:has(#biz-revChart) .hc-source-note,
#view-business #bp-finance .card:has(#biz-loanChart) .hc-source-note{color:var(--tile-butter-mut);}

/* P&L waterfall total row → butter accent (in-domain) instead of sage green. */
#view-business .wf.tot{background:linear-gradient(90deg,rgba(217,154,58,.12),transparent);}
#view-business .wf.tot .v{color:#95651c;}

/* Ratio / key-value rows (.hc-row inside business cards) — calmer dividers. */
#view-business .hc-row{border-bottom-color:var(--line);}

/* Search fields → warm, gold focus. */
#view-business .search{background:var(--cream-2);border-color:var(--line);border-radius:14px;}
#view-business .search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,154,58,.12);}

/* =====================================================================
   HEALTH (#view-health) — sage is the domain color
   ===================================================================== */

/* Section headers: same warm 13px/700 ink treatment as Business. */
#view-health .section-title{
  font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:0;text-transform:none;color:#3a2b33;margin:24px 4px 8px;
}
#view-health .section-title .hc-lbl{
  font-size:11px;font-weight:600;color:var(--tile-sage-mut);letter-spacing:0;
}

/* Protocol checklist items → white cards with 26px sage check circles.
   app.js toggles .done on each <li>; the checkbox is .pchk. */
#view-health .dc-protocol-list li{
  background:var(--card);border-top:none;border-radius:14px;
  box-shadow:var(--shadow-card);margin-bottom:8px;padding:11px 13px;
}
#view-health .dc-protocol-list li:first-child{border-top:none;}
#view-health .dc-protocol-list .pchk{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--sage);
  background:rgba(143,157,111,0.12);
}
#view-health .dc-protocol-list li.done .pchk{background:var(--sage);border-color:var(--sage);color:#fff;}
/* Numbered step badge → sage (in-domain) instead of plum. */
#view-health .dc-protocol-list li::before{background:var(--sage);color:#fff;}
#view-health .dc-protocol-list .time{color:#5a7a52;}
/* Protocol summary open-state → sage. */
#view-health .dc-protocol-details[open] .dc-protocol-summary{background:var(--tile-sage-ink);}

/* Marker cards (.dc-m) → radius-20, bigger value, sage-family status dots per spec
   (green→#8f9d6f, amber→#d99a3a, red→#b9603c). */
#view-health .dc-m{border-radius:var(--radius-sm);border-color:var(--line);}
#view-health .dc-m .val{font-family:var(--sans);font-size:22px;font-weight:700;color:#3a2b33;}
#view-health .dc-m .val .u{font-family:var(--sans);}
#view-health .dc-m .dot-sage{background:#8f9d6f;}
#view-health .dc-m .dot-gold{background:#d99a3a;}
#view-health .dc-m .dot-red{background:#b9603c;}
#view-health .dc-m.oor .val{color:#b9603c;}
#view-health .dc-m.oor{border-color:rgba(185,96,60,.35);}
#view-health .dc-m.watchb{border-color:rgba(217,154,58,.42);}

/* Sub-group labels (.dc-sgrp) → sage (in-domain) instead of clay. */
#view-health .dc-sgrp{color:#5a7a52;}

/* Gauges (Oura rings) — keep conic-gradient rings (inline colors, functional),
   soften the card only. */
#view-health .dc-gz{border-radius:var(--radius-sm);border-color:var(--line);}

/* Trends range chips (.dc-rangebar buttons) → chip recipe, sage active state. */
#view-health .dc-rangebar button{
  background:var(--chip-bg);border:none;color:var(--chip-ink);border-radius:999px;
}
#view-health .dc-rangebar button.on{background:var(--sage);color:#fff;border-color:var(--sage);}

/* Out-of-range toggle → sage-tinted chip. */
#view-health .oor-toggle{
  background:rgba(143,157,111,.12);border-color:rgba(143,157,111,.4);color:#5a7a52;
}
#view-health .oor-toggle.on{background:var(--sage);color:#fff;}

/* Chantelle CYCLE section → lilac accents. Phase pills (.cyc-ph) are generated by
   renderCycleDay() as .dc-m.cyc-ph with an inline --pc color; .on marks active. */
#view-health #cyc-day-val{color:#46255c;}
#view-health #cyc-card input[type="range"]{accent-color:#8a4fb0;}
#view-health .cyc-ph{border-radius:16px;}
#view-health .cyc-ph.on{
  box-shadow:inset 0 0 0 1.5px var(--pc, #8a4fb0);
  background:var(--tile-lilac);border-color:transparent;
}
#view-health .cyc-ph .cpname{color:#46255c;}
#view-health .cyc-pbox{background:#f3ecf7;border-color:rgba(70,37,92,.14);border-radius:14px;}
#view-health .cyc-pbox h4{color:#8a4fb0;}
#view-health .cyc-pbox li{color:#5a4553;}

/* Family HC hero (reps card) stays clay — the one warm anchor per screen. No change. */

/* =====================================================================
   SKIPPY (#view-skippy) — solid-plum hero language
   ===================================================================== */

/* Avatar-pick cards → bigger rounded plum-accented bento tiles. Scoped inside
   #view-skippy so the shared .hero/.skippy-* classes on Home are untouched. */
#view-skippy #sk-select .skippy-name{color:var(--plum);opacity:.9;}
#view-skippy #sk-select .skippy-text{color:var(--plum);}
#view-skippy .sk-kidcard{
  background:var(--card);border:none;border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:24px 16px;
}
#view-skippy .sk-kidcard .sk-who{color:var(--plum);}
#view-skippy .sk-kidcard .sk-age{color:var(--muted);}

/* Hub cards → white bento cards with plum/clay/gold icon squares (generated by
   skOpenHub()). Nudge radius + icon-square rounding toward the bento language. */
#view-skippy .sk-hub-card{border:none;border-radius:var(--radius);box-shadow:var(--shadow-card);}
#view-skippy .sk-hub-icon{border-radius:14px;}
#view-skippy .sk-hub-tt{color:var(--plum);}

/* =====================================================================
   SHARED MODALS opened by these views (marker mk-* + bizList reuse mk-*)
   Cream sheet, radius-24 top, ink overlay — matches the mockup's modal spec.
   ===================================================================== */
.mk-overlay{background:rgba(36,27,38,0.5);}
.mk-sheet{background:var(--cream);border-radius:24px 24px 0 0;}
.mk-grp{color:var(--clay);}
.mk-close{background:var(--chip-bg);border:none;color:var(--ink);border-radius:12px;}