/* =====================================================================
   POP BENTO — H&S UNIFIED APP (deck-business) view sheet
   RE-SCOPED for the business app by the FRONTEND agent (2026-07-25).

   Origin: mirrored verbatim from deck-family/css/reskin-pop.css. Per
   BUILD-CONTRACT.md §e the ONE required change is re-scoping the family
   app's view ids (#view-business / #view-actions / #view-skippy) to the
   business app's own view ids. The --pb-* palette/tokens are reused
   VERBATIM — only the scoping selectors changed.

   deck-business views (BUILD-CONTRACT.md §f):
     #view-login · #view-home · #view-dashboard · #view-roster · #view-clients
     · #view-tools · #view-leave · #view-notifications
   (#view-notifications reuses the .nu-* card vocabulary styled by
   reskin-updates.css, re-scoped there to #view-notifications — same as
   the family Updates screen. #view-home added 2026-07-26, ROLE-HOMES-SPEC.md
   §9/F3e — the config-driven function-home cockpit, js/home.js.)

   The family-specific Actions (.na-*) and Skippy-School (.sk-hub-*)
   blocks from the source sheet are dropped: those DOM subtrees do not
   exist in this app, so their rules would never match. Nothing is lost —
   the business content classes below carry the identical Pop Bento
   treatment (hard 1.5px ink outlines, 4px offset "sticker" shadows,
   Bricolage Grotesque + Space Grotesk). Loads LAST. Visual layer only.
   ===================================================================== */

/* ---- Scoped Pop tokens (verbatim palette; cascade only inside our views) ---- */
#view-login, #view-home, #view-dashboard, #view-roster, #view-clients,
#view-tools, #view-leave, #view-notifications{
  --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-login:not([hidden])),
body:has(#view-home:not([hidden])),
body:has(#view-dashboard:not([hidden])),
body:has(#view-roster:not([hidden])),
body:has(#view-clients:not([hidden])),
body:has(#view-tools:not([hidden])),
body:has(#view-leave:not([hidden])),
body:has(#view-notifications:not([hidden])){ background:var(--pb-paper,#faf6ee); }

/* =====================================================================
   SHARED — headers, cards, section titles across all business views
   (bento.css scopes .card/.section-title to the family view ids, which
   don't exist here, so the Pop Bento treatment is authored in full.)
   ===================================================================== */
#view-login .topbar h1, #view-home .topbar h1, #view-dashboard .topbar h1, #view-roster .topbar h1,
#view-clients .topbar h1, #view-tools .topbar h1, #view-leave .topbar h1, #view-notifications .topbar h1{
  font-family:var(--pb-head); font-weight:800; font-size:34px;
  letter-spacing:-.03em; color:var(--pb-ink); font-style:normal; line-height:1.04;
}
#view-login .topbar, #view-home .topbar, #view-dashboard .topbar, #view-roster .topbar,
#view-clients .topbar, #view-tools .topbar, #view-leave .topbar, #view-notifications .topbar{
  background:transparent; border:0;
}
#view-login .topbar .sub, #view-home .topbar .sub, #view-dashboard .topbar .sub, #view-roster .topbar .sub,
#view-clients .topbar .sub, #view-tools .topbar .sub, #view-leave .topbar .sub, #view-notifications .topbar .sub{
  font-family:var(--pb-num); font-weight:500; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.13em; color:var(--pb-dim); margin-top:3px;
}

/* content cards → hard ink outline + sticker shadow */
#view-home .card, #view-dashboard .card, #view-roster .card, #view-clients .card,
#view-tools .card, #view-leave .card, #view-login .card{
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:24px;
  box-shadow:var(--pb-shadow); padding:16px 17px; margin:0 0 16px;
}
#view-home .card:first-child, #view-dashboard .card:first-child, #view-roster .card:first-child,
#view-clients .card:first-child, #view-tools .card:first-child, #view-leave .card:first-child{ margin-top:6px; }

/* section titles */
#view-home .section-title, #view-dashboard .section-title, #view-roster .section-title,
#view-clients .section-title, #view-tools .section-title, #view-leave .section-title{
  font-family:var(--pb-head); font-weight:800; font-size:18px; color:var(--pb-ink);
  letter-spacing:-.01em; display:flex; align-items:center; gap:8px; margin:0 0 12px;
  text-transform:none;
}
#view-home .section-title::after, #view-dashboard .section-title::after, #view-roster .section-title::after,
#view-clients .section-title::after, #view-tools .section-title::after, #view-leave .section-title::after{ content:none; }
#view-home .section-title .hc-lbl, #view-dashboard .section-title .hc-lbl, #view-roster .section-title .hc-lbl,
#view-clients .section-title .hc-lbl, #view-tools .section-title .hc-lbl, #view-leave .section-title .hc-lbl{
  font-family:var(--pb-num); font-size:11.5px; font-weight:700; color:var(--pb-ink);
  background:var(--pb-butter); border:1.5px solid var(--pb-ink); border-radius:999px;
  padding:2px 10px; margin-left:auto;
}

/* freshness stamp under a section */
#view-home .bz-fresh, #view-dashboard .bz-fresh, #view-roster .bz-fresh, #view-clients .bz-fresh,
#view-tools .bz-fresh, #view-leave .bz-fresh, #view-notifications .bz-fresh{
  font-family:var(--pb-num); font-size:10.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:.1em; color:var(--pb-dim); margin:2px 2px 14px;
}

/* generic empty / error state */
#view-home .bz-empty, #view-dashboard .bz-empty, #view-roster .bz-empty, #view-clients .bz-empty,
#view-tools .bz-empty, #view-leave .bz-empty, #view-login .bz-empty{
  text-align:center; padding:34px 20px; font-family:var(--pb-head); font-weight:700;
  font-size:15px; color:var(--pb-ink); background:#fff; border:1.5px solid var(--pb-ink);
  border-radius:22px; box-shadow:var(--pb-shadow);
}
#view-home .bz-err, #view-dashboard .bz-err, #view-roster .bz-err, #view-clients .bz-err,
#view-tools .bz-err, #view-leave .bz-err{
  text-align:center; padding:22px; 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-home .bz-loading, #view-dashboard .bz-loading, #view-roster .bz-loading, #view-clients .bz-loading,
#view-tools .bz-loading, #view-leave .bz-loading{
  padding:26px 4px; text-align:center; font-family:var(--pb-num); font-size:13px;
  font-weight:600; color:var(--pb-dim);
}

/* status pills (reused across roster/clients/tools) */
.bz-pill{
  font-family:var(--pb-num); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; border:1.5px solid var(--pb-ink); border-radius:999px;
  padding:3px 10px; background:#fff; color:var(--pb-ink); white-space:nowrap; flex:none;
}
.bz-pill.good, .bz-pill.active{ background:var(--pb-mint); }
.bz-pill.warn, .bz-pill.review{ background:var(--pb-butter); }
.bz-pill.risk, .bz-pill.kill{ background:var(--pb-coral); }
.bz-pill.keep{ background:var(--pb-sky); }
.bz-pill.muted, .bz-pill.archived{ background:var(--pb-paper); color:var(--pb-dim); border-color:var(--pb-line); }

/* generic pill button */
.bz-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;
}
.bz-btn:hover{ box-shadow:var(--pb-shadow-sm); }
.bz-btn:active{ transform:translate(2px,2px); box-shadow:none; }
.bz-btn.primary{ background:var(--pb-butter); }
.bz-btn[disabled]{ opacity:.45; cursor:default; box-shadow:none; transform:none; }

/* text inputs / selects / textareas */
.bz-input, .bz-select, .bz-ta{
  font-family:var(--pb-body); font-size:14px; color:var(--pb-ink); background:#fff;
  border:1.5px solid var(--pb-ink); border-radius:12px; padding:10px 12px; box-sizing:border-box; width:100%;
}
.bz-ta{ resize:vertical; line-height:1.45; }
.bz-input:focus, .bz-select:focus, .bz-ta:focus{ outline:none; box-shadow:var(--pb-shadow-sm); }

/* segmented control (roster/clients filters) */
.bz-seg{ display:inline-flex; gap:4px; background:var(--pb-ink); border-radius:999px; padding:4px; margin:0 0 14px; }
.bz-seg button{
  font-family:var(--pb-num); font-size:12.5px; font-weight:600; color:rgba(255,255,255,.62);
  background:transparent; border:0; border-radius:999px; padding:7px 14px; cursor:pointer;
}
.bz-seg button.is-active{ background:var(--pb-butter); color:var(--pb-ink); font-weight:700; }

/* search box */
.bz-search{ margin:0 0 14px; }

/* =====================================================================
   LOGIN / identity view — "signed-in as" banner + scope + layer toggle
   ===================================================================== */
#view-login .bz-banner{
  background:var(--pb-ink); color:#fff; border:1.5px solid var(--pb-ink); border-radius:24px;
  box-shadow:var(--pb-shadow); padding:22px 20px; margin:6px 0 16px; position:relative; overflow:hidden;
}
#view-login .bz-banner::after{
  content:""; position:absolute; right:-46px; top:-52px; width:150px; height:150px;
  border-radius:50%; background:var(--pb-lilac); opacity:.34;
}
#view-login .bz-banner > *{ position:relative; z-index:1; }
#view-login .bz-banner .who{ font-family:var(--pb-head); font-weight:800; font-size:24px; letter-spacing:-.02em; }
#view-login .bz-banner .layer{ font-family:var(--pb-num); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--pb-butter); margin-bottom:6px; }
#view-login .bz-banner .scopes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
#view-login .bz-banner .scopes .bz-pill{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4); }
#view-login .bz-layerlink{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:var(--pb-num); font-weight:700; font-size:13.5px; color:var(--pb-ink);
  background:var(--pb-butter); border:1.5px solid var(--pb-ink); border-radius:999px;
  padding:10px 16px; box-shadow:var(--pb-shadow-sm);
}
#view-login .bz-layerlink:active{ transform:translate(2px,2px); box-shadow:none; }

/* =====================================================================
   DASHBOARD — finance KPI tiles (finance-scope only) + flags + open-loops
   (also used by #view-home — F3e's Leadership home reuses these idioms
   verbatim for finance-snapshot-condensed / pending-rollup / needs-judgment)
   ===================================================================== */
#view-home .bz-kpis, #view-dashboard .bz-kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 6px;
}
@media (max-width:640px){ #view-home .bz-kpis, #view-dashboard .bz-kpis{ grid-template-columns:repeat(2,1fr); } }
#view-home .bz-kpi, #view-dashboard .bz-kpi{
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:22px; box-shadow:var(--pb-shadow-sm);
  padding:14px 15px 13px; min-width:0;
}
#view-home .bz-kpis .bz-kpi:nth-child(4n+1), #view-dashboard .bz-kpis .bz-kpi:nth-child(4n+1){ background:var(--pb-lilac); }
#view-home .bz-kpis .bz-kpi:nth-child(4n+2), #view-dashboard .bz-kpis .bz-kpi:nth-child(4n+2){ background:var(--pb-sky); }
#view-home .bz-kpis .bz-kpi:nth-child(4n+3), #view-dashboard .bz-kpis .bz-kpi:nth-child(4n+3){ background:var(--pb-blush); }
#view-home .bz-kpi.good, #view-dashboard .bz-kpi.good{ background:var(--pb-mint)!important; }
#view-home .bz-kpi.warn, #view-dashboard .bz-kpi.warn{ background:var(--pb-coral)!important; }
#view-home .bz-kpi.amb, #view-dashboard .bz-kpi.amb{ background:var(--pb-butter)!important; }
#view-home .bz-kpi .lab, #view-dashboard .bz-kpi .lab{
  font-family:var(--pb-num); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:rgba(25,22,33,.62);
}
#view-home .bz-kpi .val, #view-dashboard .bz-kpi .val{
  font-family:var(--pb-num); font-weight:700; font-size:26px; color:var(--pb-ink);
  letter-spacing:-.02em; margin-top:3px; line-height:1.05;
}
#view-home .bz-kpi .note, #view-dashboard .bz-kpi .note{ font-family:var(--pb-body); font-size:11.5px; color:rgba(25,22,33,.6); margin-top:3px; }
/* live cash tile — the ONLY tile allowed to state a "now" $ (money rule) */
#view-home .bz-kpi.live, #view-dashboard .bz-kpi.live{ background:var(--pb-ink)!important; }
#view-home .bz-kpi.live .lab, #view-dashboard .bz-kpi.live .lab{ color:var(--pb-butter); }
#view-home .bz-kpi.live .val, #view-dashboard .bz-kpi.live .val{ color:#fff; }
#view-home .bz-kpi.live .note, #view-dashboard .bz-kpi.live .note{ color:rgba(255,255,255,.66); }
/* snapshot caveat under the weekly P&L tiles */
#view-dashboard .bz-snapnote{
  font-family:var(--pb-body); font-size:12px; color:var(--pb-dim); font-style:italic;
  margin:2px 2px 4px;
}
/* the "you can't see finance" scope note */
#view-home .bz-scope-note, #view-dashboard .bz-scope-note{
  font-family:var(--pb-body); font-size:13.5px; color:var(--pb-ink); background:var(--pb-paper);
  border:1.5px dashed var(--pb-line); border-radius:16px; padding:14px 15px; margin:0 0 14px;
}

/* flags list */
#view-home .bz-flag, #view-dashboard .bz-flag{
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:16px; box-shadow:var(--pb-shadow-sm);
  padding:12px 14px; margin:0 0 12px; overflow-wrap:anywhere;
}
#view-home .bz-flag.urgent, #view-dashboard .bz-flag.urgent{ background:var(--pb-coral); }
#view-home .bz-flag.warn, #view-dashboard .bz-flag.warn{ background:var(--pb-butter); }
#view-home .bz-flag.watch, #view-dashboard .bz-flag.watch{ background:var(--pb-mint); }
#view-home .bz-flag .ttl, #view-dashboard .bz-flag .ttl{ font-family:var(--pb-head); font-weight:800; font-size:15px; color:var(--pb-ink); overflow-wrap:anywhere; }
#view-home .bz-flag .meta, #view-dashboard .bz-flag .meta{ font-family:var(--pb-num); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:rgba(25,22,33,.6); margin-top:5px; }
#view-home .bz-flag .detail, #view-dashboard .bz-flag .detail{ font-family:var(--pb-body); font-size:13.5px; line-height:1.45; color:var(--pb-ink); margin-top:6px; overflow-wrap:anywhere; }

/* open loops (also reused by #view-home's mentions/pending-rollup rows) */
#view-home .bz-loop, #view-dashboard .bz-loop{
  display:flex; align-items:flex-start; gap:11px; padding:11px 4px; border-bottom:1.5px solid var(--pb-line);
}
#view-home .bz-loop:last-child, #view-dashboard .bz-loop:last-child{ border-bottom:0; }
#view-home .bz-loop .body, #view-dashboard .bz-loop .body{ flex:1; min-width:0; }
#view-home .bz-loop .act, #view-dashboard .bz-loop .act{ font-family:var(--pb-body); font-size:14px; font-weight:600; color:var(--pb-ink); overflow-wrap:anywhere; }
#view-home .bz-loop .sub, #view-dashboard .bz-loop .sub{ font-family:var(--pb-num); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--pb-dim); margin-top:3px; }

/* =====================================================================
   ROSTER — sidekick 360 cards + per-client grouping
   ===================================================================== */
#view-roster .bz-sk{
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:18px; box-shadow:var(--pb-shadow-sm);
  padding:13px 15px; margin:0 0 12px;
}
#view-roster .bz-sk .top{ display:flex; align-items:center; gap:10px; }
#view-roster .bz-sk .nm{ font-family:var(--pb-head); font-weight:800; font-size:16px; color:var(--pb-ink); overflow-wrap:anywhere; }
#view-roster .bz-sk .role{ font-family:var(--pb-num); font-size:11.5px; font-weight:600; color:var(--pb-dim); margin-top:2px; }
#view-roster .bz-sk .facts{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px; }
#view-roster .bz-sk .fact{ font-family:var(--pb-num); font-size:11.5px; font-weight:600; color:var(--pb-ink); }
#view-roster .bz-sk .fact b{ color:var(--pb-dim); font-weight:600; }
#view-roster .bz-grouphdr, #view-leave .bz-grouphdr{
  font-family:var(--pb-head); font-weight:800; font-size:15px; color:var(--pb-ink); margin:18px 2px 10px;
  display:flex; align-items:center; gap:8px;
}
#view-roster .bz-grouphdr .n, #view-leave .bz-grouphdr .n{ font-family:var(--pb-num); font-size:11px; font-weight:700; color:var(--pb-dim); }
/* first group header sits right under the filters, no extra top gap */
#view-leave #leave-list > .bz-grouphdr:first-child{ margin-top:2px; }

/* =====================================================================
   CLIENTS — client-360 list + detail
   ===================================================================== */
#view-clients .bz-client{
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:18px; box-shadow:var(--pb-shadow-sm);
  padding:13px 15px; margin:0 0 12px; cursor:pointer; transition:box-shadow .12s ease, transform .12s ease;
}
#view-clients .bz-client:hover{ box-shadow:var(--pb-shadow); }
#view-clients .bz-client .top{ display:flex; align-items:center; gap:10px; }
#view-clients .bz-client .nm{ font-family:var(--pb-head); font-weight:800; font-size:16px; color:var(--pb-ink); overflow-wrap:anywhere; }
#view-clients .bz-client .sub{ font-family:var(--pb-num); font-size:11.5px; font-weight:600; color:var(--pb-dim); margin-top:2px; }
#view-clients .bz-client .risk{ font-family:var(--pb-body); font-size:13px; color:var(--pb-ink); margin-top:7px; overflow-wrap:anywhere; }
/* health dot */
.bz-hdot{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--pb-ink); flex:none; }
.bz-hdot.h-good{ background:var(--pb-mint); }
.bz-hdot.h-watch{ background:var(--pb-butter); }
.bz-hdot.h-risk{ background:var(--pb-coral); }
.bz-hdot.h-unknown{ background:#fff; }
/* detail overlay */
#view-clients .bz-detail-back{ margin:0 0 12px; }
#view-clients .bz-detail .row{ display:flex; gap:10px; padding:10px 2px; border-bottom:1.5px solid var(--pb-line); }
#view-clients .bz-detail .row:last-child{ border-bottom:0; }
#view-clients .bz-detail .k{ font-family:var(--pb-num); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pb-dim); width:110px; flex:none; }
#view-clients .bz-detail .v{ font-family:var(--pb-body); font-size:14px; color:var(--pb-ink); overflow-wrap:anywhere; }

/* =====================================================================
   TOOLS & SUBSCRIPTIONS — WP-1 board (list/create/edit/status/comment)
   ===================================================================== */
#view-tools .bz-toolbar{ display:flex; align-items:center; gap:10px; margin:2px 0 16px; flex-wrap:wrap; }
#view-tools .bz-tool{
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:20px; box-shadow:var(--pb-shadow);
  padding:15px 16px; margin:0 0 14px;
}
#view-tools .bz-tool .top{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
#view-tools .bz-tool .nm{ font-family:var(--pb-head); font-weight:800; font-size:17px; color:var(--pb-ink); overflow-wrap:anywhere; }
#view-tools .bz-tool .vendor{ font-family:var(--pb-num); font-size:11.5px; font-weight:600; color:var(--pb-dim); margin-top:2px; }
#view-tools .bz-tool .cost{ font-family:var(--pb-num); font-weight:700; font-size:18px; color:var(--pb-ink); margin-left:auto; white-space:nowrap; }
#view-tools .bz-tool .decision{ font-family:var(--pb-body); font-size:13.5px; line-height:1.45; color:var(--pb-ink); margin-top:9px; overflow-wrap:anywhere; }
#view-tools .bz-tool .owner{ font-family:var(--pb-num); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--pb-dim); margin-top:6px; }
#view-tools .bz-tool .bz-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
/* comment thread */
#view-tools .bz-updates{ margin-top:13px; border-top:1.5px solid var(--pb-line); padding-top:11px; }
#view-tools .bz-upd{ font-family:var(--pb-body); font-size:13px; line-height:1.45; color:var(--pb-ink); padding:7px 0; border-bottom:1px solid var(--pb-line); overflow-wrap:anywhere; }
#view-tools .bz-upd:last-child{ border-bottom:0; }
#view-tools .bz-upd .who{ font-family:var(--pb-num); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pb-dim); }
/* pending / staged chip */
#view-tools .bz-staged{
  font-family:var(--pb-num); font-size:11px; font-weight:600; color:var(--pb-ink);
  background:var(--pb-butter); border:1.5px solid var(--pb-ink); border-radius:999px;
  padding:4px 11px; display:inline-flex; align-items:center; gap:6px; margin-top:10px;
}
/* propose-then-confirm diff (prev → new) */
#view-tools .bz-diff{
  background:var(--pb-sky); border:1.5px solid var(--pb-ink); border-radius:13px; box-shadow:var(--pb-shadow-sm);
  padding:12px 13px; margin:11px 0 0;
}
#view-tools .bz-diff .dh{ font-family:var(--pb-num); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pb-ink); margin-bottom:7px; }
#view-tools .bz-diff .drow{ font-family:var(--pb-body); font-size:13.5px; color:var(--pb-ink); margin:3px 0; overflow-wrap:anywhere; }
#view-tools .bz-diff .drow .prev{ text-decoration:line-through; color:var(--pb-dim); }
#view-tools .bz-diff .drow .arr{ color:var(--pb-dim); padding:0 5px; }
#view-tools .bz-diff .drow .new{ font-weight:700; }
/* create/edit form */
#view-tools .bz-form{ display:grid; gap:10px; }
#view-tools .bz-form label{ font-family:var(--pb-num); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pb-dim); }
#view-tools .bz-form .fld{ display:grid; gap:5px; }
#view-tools .bz-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px){ #view-tools .bz-form .row2{ grid-template-columns:1fr; } }

/* =====================================================================
   375px safety — nothing overflows horizontally
   ===================================================================== */
#view-login *, #view-home *, #view-dashboard *, #view-roster *,
#view-clients *, #view-tools *, #view-leave *{ min-width:0; }
.bz-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:400px){
  #view-login .topbar h1, #view-home .topbar h1, #view-dashboard .topbar h1, #view-roster .topbar h1,
  #view-clients .topbar h1, #view-tools .topbar h1, #view-leave .topbar h1, #view-notifications .topbar h1{ font-size:30px; }
}

/* =====================================================================
   APP CHROME — correct the mirrored desktop-sidebar wordmark.
   The mirrored desktop.css hardcodes content:"Deck Family" on .tabbar::before
   (the desktop sidebar wordmark). This app is the H&S Hub, not the family app.
   We override ONLY the text (loads last → wins at equal specificity); the
   dot/typography/layout treatment from desktop.css is untouched, so the
   Pop Bento look is preserved verbatim — only the name is corrected.
   ===================================================================== */
.tabbar::before{ content:"H&S Hub"; }

/* =====================================================================
   EVENING MODE — dim, red-shifted wash (mirrors the family sheet; harmless
   if js/evening.js isn't ported — the attribute simply never gets set).
   ===================================================================== */
:root[data-evening] #view-login,
:root[data-evening] #view-home,
:root[data-evening] #view-dashboard,
:root[data-evening] #view-roster,
:root[data-evening] #view-clients,
:root[data-evening] #view-tools,
:root[data-evening] #view-leave,
:root[data-evening] #view-notifications{
  filter:brightness(.82) contrast(.97) sepia(.34) hue-rotate(-14deg) saturate(1.16);
}

/* =====================================================================
   B3/B4 — ROSTER Sidekick-360 + CLIENT-360 additions (2026-07-26).
   Reuses the --pb-* tokens exactly; no new palette (contract §e).
   ===================================================================== */
/* tappable person/engagement cards */
#view-roster .bz-sk.is-tappable, #view-roster .bz-eng.is-tappable{ cursor:pointer; }
#view-roster .bz-sk.is-tappable:hover{ box-shadow:var(--pb-shadow); }

/* engagement sub-row (Sidekick-360 per-client rows + Client-360 sidekick rows) */
#view-roster .bz-eng, #view-clients .bz-eng{
  background:var(--pb-paper); border:1.5px solid var(--pb-ink); border-radius:15px;
  box-shadow:var(--pb-shadow-sm); padding:12px 14px; margin:0 0 11px;
}
#view-roster .bz-eng .top, #view-clients .bz-eng .top{ display:flex; align-items:center; gap:10px; }
#view-roster .bz-eng .nm, #view-clients .bz-eng .nm{
  font-family:var(--pb-head); font-weight:800; font-size:15px; color:var(--pb-ink); overflow-wrap:anywhere;
}
#view-roster .bz-eng .role, #view-clients .bz-eng .role{
  font-family:var(--pb-num); font-size:11px; font-weight:600; color:var(--pb-dim); margin-top:2px;
}
#view-roster .bz-eng .facts, #view-clients .bz-eng .facts{ display:flex; flex-wrap:wrap; gap:5px 13px; margin-top:8px; }
#view-roster .bz-eng .fact, #view-clients .bz-eng .fact{
  font-family:var(--pb-num); font-size:11px; font-weight:600; color:var(--pb-ink);
}
#view-roster .bz-eng .fact b, #view-clients .bz-eng .fact b{ color:var(--pb-dim); font-weight:600; }

/* rate_on_file badge — boolean only, never a $ (finance-scoped) */
#view-roster .bz-rate, #view-clients .bz-rate{
  display:inline-flex; align-items:center; margin-top:9px;
  font-family:var(--pb-num); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--pb-ink);
  border:1.5px solid var(--pb-ink); border-radius:999px; padding:3px 10px;
}
#view-roster .bz-rate.on, #view-clients .bz-rate.on{ background:var(--pb-mint); }
#view-roster .bz-rate.off, #view-clients .bz-rate.off{ background:var(--pb-butter); }

/* 360 detail header */
#view-roster .bz-360-head, #view-clients .bz-360-head{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
#view-roster .bz-360-pills, #view-clients .bz-360-pills{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px;
}
#view-roster .bz-360-roles{
  font-family:var(--pb-num); font-size:11.5px; font-weight:600; color:var(--pb-dim);
}
#view-roster .bz-detail-back{ margin:0 0 12px; }

/* muted honesty note (Client-360 when the feed carries no enrichment yet;
   ARCHSPLIT 2026-07-26 extends this to #view-roster for engagement-level
   data_note passthrough — BOARD-PARITY-AUDIT.md) */
#view-clients .bz-note, #view-roster .bz-note{
  font-family:var(--pb-body); font-size:12.5px; line-height:1.5; color:var(--pb-dim);
  border-top:1.5px solid var(--pb-line); margin-top:10px; padding-top:10px;
}
/* compact variant when a data_note sits inside a small engagement row
   rather than a full 360 card (ARCHSPLIT, roster.js engRow()) */
#view-roster .bz-eng .bz-note, #view-clients .bz-eng .bz-note{
  font-size:11.5px; margin-top:8px; padding-top:8px;
}

/* ARCHSPLIT (2026-07-26) — the small "Needs review" callout on the Clients
   Active tab: is_terminal===null/undefined rows (ambiguous or unmatched
   against the board). Distinct from a live client card (no health dot, no
   status pill) and distinct from the muted .bz-note honesty text (this is
   actionable, not informational) — BOARD-PARITY-AUDIT.md P0 #3. */
#view-clients .bz-review{
  border:1.5px solid var(--pb-ink); border-radius:16px; background:var(--pb-butter);
  box-shadow:var(--pb-shadow-sm); padding:12px 14px; margin:0 0 14px;
}
#view-clients .bz-review .hd{
  font-family:var(--pb-head); font-weight:800; font-size:12.5px; color:var(--pb-ink);
  text-transform:uppercase; letter-spacing:.04em;
}
#view-clients .bz-review .item{ cursor:pointer; }
#view-clients .bz-review .item + .item{
  margin-top:9px; padding-top:9px; border-top:1.5px dashed var(--pb-hard);
}
#view-clients .bz-review .nm{
  font-family:var(--pb-head); font-weight:700; font-size:14.5px; color:var(--pb-ink);
}
#view-clients .bz-review .note{
  font-family:var(--pb-body); font-size:12px; line-height:1.45; color:var(--pb-ink); margin-top:3px;
}

/* =====================================================================
   F3(a) — COMMENT THREADS on items (2026-07-26). The Monday "Updates"
   replacement. Reuses the --pb-* tokens exactly; no new palette
   (contract §e). Scoped to the three mounting views.
   ===================================================================== */
#view-roster .bz-cmts, #view-clients .bz-cmts, #view-tools .bz-cmts, #view-leave .bz-cmts{ margin-top:4px; }

/* one comment */
#view-roster .bz-cmt, #view-clients .bz-cmt, #view-tools .bz-cmt, #view-leave .bz-cmt{
  border:1.5px solid var(--pb-line); border-radius:13px;
  background:var(--pb-paper); padding:10px 12px; margin:0 0 9px;
}
#view-roster .bz-cmt .head, #view-clients .bz-cmt .head, #view-tools .bz-cmt .head, #view-leave .bz-cmt .head{
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
}
/* author pill */
#view-roster .bz-cmt-author, #view-clients .bz-cmt-author, #view-tools .bz-cmt-author, #view-leave .bz-cmt-author{
  display:inline-flex; align-items:center;
  font-family:var(--pb-num); font-size:10.5px; font-weight:700; text-transform:capitalize;
  letter-spacing:.04em; color:var(--pb-ink);
  border:1.5px solid var(--pb-ink); border-radius:999px; padding:2px 9px;
  background:var(--pb-butter);
}
#view-roster .bz-cmt-time, #view-clients .bz-cmt-time, #view-tools .bz-cmt-time, #view-leave .bz-cmt-time{
  font-family:var(--pb-num); font-size:10.5px; font-weight:600; color:var(--pb-dim);
}
#view-roster .bz-cmt .txt, #view-clients .bz-cmt .txt, #view-tools .bz-cmt .txt, #view-leave .bz-cmt .txt{
  font-family:var(--pb-body); font-size:13.5px; line-height:1.5; color:var(--pb-ink);
  white-space:pre-wrap; overflow-wrap:anywhere;
}

/* compose box — stacks clean at 375px */
#view-roster .bz-cmt-compose, #view-clients .bz-cmt-compose, #view-tools .bz-cmt-compose, #view-leave .bz-cmt-compose{
  display:flex; flex-direction:column; gap:8px; margin-top:10px;
}
#view-roster .bz-cmt-compose .bz-btn, #view-clients .bz-cmt-compose .bz-btn,
#view-tools .bz-cmt-compose .bz-btn, #view-leave .bz-cmt-compose .bz-btn{ align-self:flex-end; }

/* =====================================================================
   B6 — LEAVE (2026-07-26, read path). Reuses the --pb-* tokens exactly;
   no new palette (contract §e). Reuses #view-clients' .bz-detail .row/.k/.v
   pattern (extended to #view-leave below) for the expanded fact list.
   ===================================================================== */
#view-clients .bz-detail .row, #view-leave .bz-detail .row{
  display:flex; gap:10px; padding:10px 2px; border-bottom:1.5px solid var(--pb-line);
}
#view-clients .bz-detail .row:last-child, #view-leave .bz-detail .row:last-child{ border-bottom:0; }
#view-clients .bz-detail .k, #view-leave .bz-detail .k{
  font-family:var(--pb-num); font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--pb-dim); width:110px; flex:none;
}
#view-clients .bz-detail .v, #view-leave .bz-detail .v{
  font-family:var(--pb-body); font-size:14px; color:var(--pb-ink); overflow-wrap:anywhere;
}

#view-leave .bz-leave-filters{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 4px; }
#view-leave .bz-leave-filters .bz-select{ width:auto; flex:none; min-width:150px; }
#view-leave .bz-leave-filters .bz-search{ flex:1; min-width:160px; margin:0; }

#view-leave .bz-leave{
  background:#fff; border:1.5px solid var(--pb-ink); border-radius:18px; box-shadow:var(--pb-shadow-sm);
  padding:13px 15px; margin:0 0 12px; cursor:pointer;
}
#view-leave .bz-leave .top{ display:flex; align-items:flex-start; gap:10px; }
#view-leave .bz-leave .nm{ font-family:var(--pb-head); font-weight:800; font-size:16px; color:var(--pb-ink); overflow-wrap:anywhere; }
#view-leave .bz-leave .role{ font-family:var(--pb-num); font-size:11.5px; font-weight:600; color:var(--pb-dim); margin-top:2px; }
#view-leave .bz-leave .facts{ display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; margin-top:9px; }
#view-leave .bz-leave .fact{ font-family:var(--pb-num); font-size:11.5px; font-weight:600; color:var(--pb-ink); }
#view-leave .bz-pill.sm{ font-size:9.5px; padding:2px 8px; }

/* days-until badge */
#view-leave .bz-daybadge{
  display:inline-flex; align-items:center; margin-top:9px;
  font-family:var(--pb-num); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--pb-ink);
  border:1.5px solid var(--pb-ink); border-radius:999px; padding:3px 10px;
  background:var(--pb-sky);
}
#view-leave .bz-daybadge.soon{ background:var(--pb-butter); }
#view-leave .bz-daybadge.past{ background:var(--pb-paper); color:var(--pb-dim); }

#view-leave .bz-leave-detail{ margin-top:12px; border-top:1.5px solid var(--pb-line); padding-top:11px; cursor:auto; }
#view-leave .bz-leave-detail .bz-detail{ margin-bottom:4px; }

/* =====================================================================
   F3e — HOME (ROLE-HOMES-SPEC.md, 2026-07-26). The config-driven, function-
   shaped cockpit (js/home.js). Reuses the --pb-* tokens and the dashboard's
   .bz-kpi(s)/.bz-flag/.bz-loop/.bz-scope-note idioms exactly (extended into
   #view-home above) — no new palette (contract §e). Net-new here is only
   what those idioms don't already cover: the group header for an identity
   holding >1 function, the tap-through link row, and the muted honesty note
   (mirrors #view-clients' .bz-note treatment for the pending-rollup card's
   "leave not wired in yet" line).
   ===================================================================== */
#view-home .bz-grouphdr{
  font-family:var(--pb-head); font-weight:800; font-size:15px; color:var(--pb-ink); margin:18px 2px 10px;
  display:flex; align-items:center; gap:8px;
}
#view-home .bz-home-card + .bz-home-card{ margin-top:0; } /* .card already carries the bottom margin */
#view-home .bz-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
#view-home .bz-note{
  font-family:var(--pb-body); font-size:12.5px; line-height:1.5; color:var(--pb-dim);
  border-top:1.5px solid var(--pb-line); margin-top:10px; padding-top:10px;
}

/* =====================================================================
   FAMILY-PARITY DASHBOARD REBUILD (2026-07-26, dashfloor-builder). Marked
   additions only — everything above this block is untouched. Reuses the
   existing --pb-* tokens + .bz-kpi/.bz-flag/.bz-loop idioms verbatim, per
   BUILD-CONTRACT §e ("do NOT invent a new palette").
   ===================================================================== */

/* a KPI tile that's also a tap-through link (Roster/Leave/At-risk-clients/Alerts
   teasers on the widened Dashboard KPI wall) — same visual as a plain .bz-kpi div,
   just without link chrome. */
#view-dashboard a.bz-kpi{ display:block; text-decoration:none; color:inherit; cursor:pointer; }
#view-dashboard a.bz-kpi:hover{ box-shadow:5px 5px 0 var(--pb-ink); }
#view-dashboard a.bz-kpi:active{ transform:translate(2px,2px); box-shadow:var(--pb-shadow-sm); }

/* a 4th flag-severity color ("blue" from the maintained biz-flags feed) — red/amber
   already map to .urgent/.warn above; blue reads as "informational", so it gets the
   sky tint rather than being folded into mint (which reads as "resolved/good"). */
#view-home .bz-flag.info, #view-dashboard .bz-flag.info{ background:var(--pb-sky); }

/* recently-closed open-loops fold (archive discipline, VISION.md ruling 10c) — a
   native <details>/<summary>, collapsed by default, so terminal-status rows never
   clutter the live working set but stay one tap away. */
#view-dashboard .bz-fold{ margin-top:10px; border-top:1.5px solid var(--pb-line); padding-top:8px; }
#view-dashboard .bz-fold > summary{
  cursor:pointer; list-style:none; font-family:var(--pb-num); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--pb-dim); padding:4px 2px;
}
#view-dashboard .bz-fold > summary::-webkit-details-marker{ display:none; }
#view-dashboard .bz-fold > summary::before{ content:"▸ "; }
#view-dashboard .bz-fold[open] > summary::before{ content:"▾ "; }
#view-dashboard .bz-fold .bz-loop{ opacity:.7; }

/* =====================================================================
   OPEN-LOOP TRIAGE — Approve / Disregard / Delegate (VISION.md ruling 17,
   loop-triage-builder 2026-07-26). Reuses .bz-btn/.bz-select/.bz-pill
   verbatim with a compact "sm" size modifier (new, global — small enough
   to sit inline in a dense .bz-loop row without widening it); no new
   palette. Shared by #view-dashboard (the Open loops card) and #view-home
   ("My action items" card, home.js).
   ===================================================================== */
.bz-btn.sm{ font-size:11px; padding:5px 11px; }
.bz-select.sm{ width:auto; font-size:11px; padding:5px 9px; border-radius:999px; }
#view-dashboard .bz-loop-actions, #view-home .bz-loop-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:8px;
}
#view-dashboard .bz-loop-decided, #view-home .bz-loop-decided{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px;
}
#view-dashboard .bz-loop-actions .bz-fresh, #view-home .bz-loop-actions .bz-fresh{
  margin:0; font-size:10.5px;
}
/* the "Disregarded" fold — same idiom as "Recently closed" above, distinct id so both
   can be open/closed independently within the same card. */
#view-dashboard .bz-fold + .bz-fold{ margin-top:14px; }