/* ============================================================
   client-page.css -- session 356 (briefs/session-356-brief.md): the redrawn client page. Built on the property page's own pieces
   (shell.css "Session 318": .pa, .pa-hero, .pa-facts, .pa-tabs, .pa-card, .pa-ch, .pa-kv); these are the mockups' extra style values
   (Client, ClientComms, Billing, Invoices), named in tokens.css "Session 356". Every class is .cp-*, used by client-page.js only.
   No layout has more than two columns.
   ============================================================ */
.s-detail-client .wrapnarrow{ max-width:var(--pa-wrap) }
.cp{ gap:22px }
.cp .cp-body{ display:flex; flex-direction:column; gap:22px; min-width:0 }
.cp .cp-ink{ color:var(--pa-ink) }
.cp .cp-b6{ font-weight:600 } .cp .cp-b7{ font-weight:700 }
.cp .cp-r{ text-align:right; font-variant-numeric:tabular-nums }

/* the hero: the name, its facts and buttons on the left, Revenue by month on the right, the fact strip under both */
.cp .cp-hero{ display:grid; grid-template-columns:minmax(0,1fr) 420px; grid-template-areas:none; grid-template-rows:auto auto; gap:26px 36px; padding:28px 32px 26px; color:#fff }   /* the property hero's map areas do not apply */
.cp .cp-heroc{ grid-template-areas:none }
.cp .cp-hero > .cp-facts{ grid-area:auto; grid-column:1 / -1; margin-top:0 }   /* not the property hero's named 'facts' area, which adds empty rows */
.cp-facts > div{ min-width:0 } .cp-facts .pa-fv, .cp-facts .pa-fl, .cp .pa-vals .pa-hv{ overflow-wrap:anywhere }   /* a long word never widens the page */
.cp-hl{ display:flex; flex-direction:column; gap:18px; min-width:0 }
.cp .cp-name{ margin:0; font-size:46px; font-weight:800; letter-spacing:-0.035em; line-height:1.02; color:#fff; overflow-wrap:anywhere }
.cp-hero .pa-hv a{ color:var(--pa-teal-300) }
.cp-where{ display:inline-flex; align-items:center; gap:6px; padding:3px 11px 3px 9px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap }
.cp-where.cp-intown{ background:rgba(255,255,255,.14); color:#fff }
.cp-where.cp-oot{ background:var(--cp-oot-bg); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.28) }
.cp-rev{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:16px 18px; align-self:start; min-width:0 }
.cp-revh{ display:flex; align-items:baseline; gap:10px }
.cp-revytd{ margin-left:auto; font-size:26px; font-weight:800; letter-spacing:-0.03em }
.cp-spark{ display:block; width:100%; height:64px; margin:10px 0 4px }
.cp-sparknone{ height:64px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:13px }
.cp-months{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); font-size:11.5px; color:rgba(255,255,255,.66); font-weight:600; text-align:center }
.cp-revf{ display:flex; gap:18px; border-top:1px solid rgba(255,255,255,.14); margin-top:12px; padding-top:12px }
.cp-revv{ font-size:18px; font-weight:800 }
/* the compact hero of the other tabs */
.cp-heroc{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding:22px 28px; color:#fff }
.cp-hcn{ display:flex; flex-direction:column; gap:10px; min-width:0 }
.cp .cp-namec{ margin:0; font-size:36px; font-weight:800; letter-spacing:-0.035em; line-height:1; color:#fff }
.cp-hstats{ display:flex; gap:32px; flex-wrap:wrap }
.cp-hbtns{ margin-left:auto }
.cp .pa-fv.cp-warnfv{ color:#FFB27A }
.cp .pa-btn[disabled]{ opacity:.55; cursor:not-allowed }
.cp-tabs .pa-tab b{ font-weight:600; color:var(--pa-muted); font-size:12.5px }
.cp-tabs .pa-tab.on b{ color:var(--pa-teal-300) }
.cp .pa-tab:focus-visible, .cp .pa-btn:focus-visible, .cp .pa-ed:focus-visible, .cp-gap:focus-visible, .cp-link:focus-visible{ outline:2px solid var(--pa-teal-300); outline-offset:2px }

/* Things to fill in */
.cp-band{ background:var(--pa-amber-bg); border-radius:14px; padding:12px 18px; color:var(--pa-amber-text); display:flex; flex-direction:column; gap:10px }
.cp-bandrow{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap }
.cp-bandt{ font-weight:700; font-size:15px; margin-right:4px }
.cp-gap{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--pa-amber-line); color:var(--pa-amber-text); font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; min-height:32px }
.cp-gap:hover{ background:var(--pa-amber-soft) }
.cp .pa-btn.cp-bandgo{ margin-left:auto; height:38px }
.cp-bandsug .cd-sug{ margin:0 }

/* two columns, never three */
.cp-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start }
.cp-col{ display:flex; flex-direction:column; gap:22px; min-width:0 }

/* People cards (Overview) */
.cp-pgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:20px }
.cp-person{ border:1px solid var(--pa-line); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:14px; min-width:0 }
.cp-phead{ display:flex; gap:14px; align-items:center }
.cp-phead .pa-ed{ margin-left:0 }
.cp .cp-phead .pa-pill{ margin-left:auto }
.cp-pav{ width:48px; height:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex:0 0 48px; background:var(--pa-teal-100); color:var(--pa-teal-900) }
.cp-pav.cp-pavmain{ background:var(--pa-yellow); color:var(--pa-teal-900) }
.cp-pn{ font-size:18px; font-weight:800; color:var(--pa-ink); letter-spacing:-0.02em; line-height:1.15 }
.cp-pr{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px 14px; font-size:14px; align-items:center }
.cp-pr > *{ min-width:0; overflow-wrap:anywhere }
.cp-pk{ font-size:12.5px; font-weight:600; color:var(--pa-muted) }
.cp .cp-pv{ color:var(--pa-ink); font-weight:600 }
.cp a.cp-pv{ color:var(--pa-teal-600) }
.cp-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center }
.cp-gets{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:8px; background:var(--pa-teal-100); color:var(--pa-teal-900); font-size:12.5px; font-weight:600 }
.cp .pa-btn.cp-sbtn{ height:34px; padding:0 12px; font-size:13px; background:#fff; border:1px solid var(--pa-input-line); color:var(--pa-ink) }
.cp .pa-btn.cp-sbtn:hover{ background:var(--pa-grey) }
.cp .pa-btn.cp-btnsm{ height:36px; padding:0 12px; font-size:13px }
.cp .pa-btn:not(.pa-go):not(.pa-dk):not(.cp-sbtn):not(.pa-band-go){ background:#fff; border:1px solid var(--pa-input-line); color:var(--pa-ink) }
.cp .pa-kv.cp-kvtop{ border-top:1px solid var(--pa-line) }
.cp-orange{ background:var(--cp-orange-bg); color:var(--cp-orange-ink) }
.cp-pillsm{ padding:1px 8px }

/* Properties card */
.cp-sub{ padding:14px 20px 8px; font-size:12.5px; font-weight:700; color:var(--pa-teal-600); border-top:1px solid var(--pa-line); display:flex; align-items:center; gap:8px }
.cp-sub.first{ border-top:0 }
.cp-prow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:13px 20px; border-top:1px solid var(--pa-line-soft); align-items:center }
.cp-prow.first{ border-top:0 }
.cp .cp-pa{ font-size:15px; font-weight:700; color:var(--pa-ink); letter-spacing:-0.012em }
.cp .cp-pa:hover{ color:var(--pa-teal-600) }
.cp-foot{ padding:12px 20px 16px; border-top:1px solid var(--pa-line-soft); display:flex; gap:12px 16px; align-items:center; flex-wrap:wrap }
.cp-link{ font-family:inherit; font-weight:600; font-size:13px; color:var(--pa-teal-600); background:none; border:0; padding:4px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px }
.cp-alias{ padding:12px 20px 18px; border-top:1px solid var(--pa-line-soft) }
.cp-aliasc{ display:inline-flex; padding:4px 10px; border-radius:8px; background:var(--pa-page); color:var(--pa-text); font-size:13px; font-weight:500 }
.cp-bigs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:18px 20px }

/* Recent activity */
.cp-tl{ display:flex; gap:12px; padding:12px 20px; border-top:1px solid var(--pa-line-soft); align-items:flex-start }
.cp .pa-ch + .cp-tl{ border-top:0 }
.cp-tli{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 32px }
.cp-clip{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.cp-sl{ background:var(--cp-slack-bg); color:var(--cp-slack-ink) } .cp-wa{ background:var(--cp-wa-bg); color:var(--cp-wa-ink) }
.cp-em{ background:var(--cp-email-bg); color:var(--cp-email-ink) } .cp-tx{ background:var(--cp-text-bg); color:var(--cp-text-ink) }
.cp-no{ background:var(--cp-none-bg); color:var(--cp-none-ink) }

/* tables (People, Who gets what, How each payer wants their invoices, Every invoice, Properties) */
.cp-scroll{ overflow-x:auto }
.cp-table{ width:100%; border-collapse:collapse; table-layout:auto }
.cp-table th{ background:var(--cp-th-bg); text-align:left; font-size:12.5px; font-weight:600; color:var(--pa-text); padding:10px 16px; white-space:nowrap;
  text-transform:none; letter-spacing:normal; position:static; box-shadow:none; cursor:default }
.cp-table td{ padding:13px 16px; border-top:1px solid var(--pa-line-soft); vertical-align:middle; font-size:14px; color:var(--pa-text);
  white-space:normal; overflow:visible; text-overflow:clip; max-width:none; border-bottom:0 }
.cp-table th:first-child, .cp-table td:first-child{ padding-left:20px }
.cp-table th:last-child, .cp-table td:last-child{ padding-right:20px }
.cp-table th.cp-r, .cp-table td.cp-r{ text-align:right }
.cp-nm{ font-size:14.5px; font-weight:700; color:var(--pa-ink) }
.cp-grp td{ background:var(--cp-grp-bg); font-size:12.5px; font-weight:700; color:var(--pa-teal-600); padding:9px 16px }
.cp-how{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--pa-ink); white-space:nowrap }
.cp-hi{ width:24px; height:24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 24px }
.cp-nope{ color:var(--cp-nope); font-weight:500 }
.cp-pth{ display:flex; align-items:center; gap:8px }
.cp-pavs{ width:26px; height:26px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; background:var(--pa-teal-100); color:var(--pa-teal-900) }
.cp-cc{ display:inline-flex; align-items:center; gap:7px; padding:3px 10px 3px 3px; border-radius:999px; border:1px solid var(--pa-line); background:#fff; font-size:13px; font-weight:600; color:var(--pa-ink); white-space:nowrap }
.cp-cc.pref{ border-color:var(--pa-teal-600); box-shadow:0 0 0 1px var(--pa-teal-600) inset }
.cp-cc .cp-hi{ width:22px; height:22px; flex:0 0 22px; border-radius:999px }
.cp-dashcell{ padding:12px 16px }
.cp-dash{ border:1.5px dashed var(--cp-dash-line); border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:12px; color:var(--pa-muted); flex-wrap:wrap }
.cp-dash .pa-btn:first-of-type{ margin-left:auto }
.cp-dasho{ border-color:var(--cp-orange-line); color:var(--cp-orange-ink); background:var(--cp-orange-soft); border-radius:12px; padding:14px 16px }
.cp-dasho .cp-sel{ margin-left:auto }
.cp-dashes{ padding:0 20px 20px; display:flex; flex-direction:column; gap:10px }
.cp-testpill{ margin-left:auto; white-space:normal; text-align:left }
.cp-testpill + .pa-ed{ margin-left:8px }
.cp-fill{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px; background:var(--pa-amber-bg); color:var(--pa-amber-text); font-weight:600 }
.cp .cp-sel{ width:auto; height:36px; border:1px solid var(--pa-input-line); border-radius:8px; padding:0 8px; font-family:inherit; font-size:13.5px; background:#fff; color:var(--pa-ink); max-width:100% }
.cp .cp-inp{ height:36px; border:1px solid var(--pa-input-line); border-radius:8px; padding:0 10px; font-family:inherit; font-size:14px; min-width:220px; max-width:100% }
.cp-frm{ display:flex; gap:10px 14px; flex-wrap:wrap; align-items:flex-end; padding:14px 20px; border-top:1px solid var(--pa-line-soft); background:var(--pa-page) }
.cp-frm label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--pa-text) }
.cp-quote{ padding:14px 20px; border-top:1px solid var(--pa-line-soft) }
.cp-quote.first{ border-top:0 }
.cp-qt{ font-size:15px; color:var(--pa-ink); font-weight:500; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere }
.cp-pinrow{ padding:0 0 10px 14px }
.cp-rowlink{ cursor:pointer }
.cp-rowlink:hover td{ background:var(--cp-row-hover) }
.cp-table tbody tr:hover td{ background:var(--cp-row-hover); box-shadow:none }
.cp-table tbody tr td:first-child{ box-shadow:none }
.cp-invt tr.sel td:first-child{ box-shadow:inset 3px 0 0 var(--pa-teal-600) }

/* Billing */
.cp-bnote{ display:flex; align-items:center; gap:12px; background:var(--cp-note-bg); color:var(--cp-note-ink); border-radius:14px; padding:12px 18px; font-weight:600 }
.cp-payhead, .cp-payer{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.4fr) 120px; gap:16px; padding:16px 20px }
.cp-payhead{ padding:10px 20px; background:var(--cp-th-bg); font-size:12.5px; font-weight:600; color:var(--pa-text) }
.cp-payer{ border-top:1px solid var(--pa-line-soft); align-items:start }
.cp-payer:hover{ background:var(--cp-row-hover) }
.cp-pcol{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.cp-cardl{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--pa-ink) }
.cp-cardi{ width:30px; height:20px; border-radius:4px; background:var(--cp-email-bg); color:var(--cp-email-ink); display:inline-flex; align-items:center; justify-content:center; flex:0 0 30px }
.cp .cp-home{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:8px; background:var(--pa-page); color:var(--pa-ink); font-size:13px; font-weight:600 }

/* Invoices */
.cp-readat{ padding:12px 20px 0; font-size:12.5px; color:var(--pa-muted) }
.cp-invchips{ padding:12px 20px }
.cp-invt tr.sel td{ background:var(--cp-sel-row) }
.cp-invt tr.sel td:first-child{ box-shadow:inset 3px 0 0 var(--pa-teal-600) }
.cp-invt tbody tr{ cursor:pointer }
.cp-invt tbody tr:hover td{ background:var(--cp-row-hover) }
.cp-invt tbody tr:focus-visible{ outline:2px solid var(--pa-teal-300); outline-offset:-2px }
.cp-style{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--pa-ink) }
.cp-si{ width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; background:var(--pa-teal-100); color:var(--pa-teal-600) }
.cp-invhome{ border-top:1px solid var(--pa-line) }
.cp-ih{ display:flex; align-items:center; gap:10px; padding:12px 22px; background:var(--cp-grp-bg) }
.cp-ln{ display:grid; grid-template-columns:90px minmax(0,1fr) 100px; gap:12px; padding:9px 22px; border-top:1px solid var(--pa-line-soft); font-size:13.5px; align-items:center }
.cp-ln span:last-child{ text-align:right; font-variant-numeric:tabular-nums; color:var(--pa-ink); font-weight:600 }
.cp-tot{ display:flex; justify-content:space-between; padding:8px 22px; font-size:14px }
.cp-invsum{ border-top:1px solid var(--pa-line); padding:8px 0 }
.cp-tot.cp-grand{ font-size:16px; color:var(--pa-ink) }

/* Edit: the page's existing editor, opened at what was clicked */
.cp-editing .cp-editbody{ min-width:0 }
.cp-editing .card.cp-ring, .cp-editing .cdp-person.cp-ring{ box-shadow:0 0 0 2px var(--pa-teal-300), 0 10px 24px rgba(14,54,59,.12); border-radius:12px }

@media (max-width:1179px){
  .cp .cp-hero{ grid-template-columns:minmax(0,1fr) }
  .cp-pgrid{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:760px){
  .cp .cp-hero{ padding:20px 18px; gap:18px }
  .cp .cp-name{ font-size:34px }
  .cp .cp-namec{ font-size:28px }
  .cp-hero .pa-facts{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cp-heroc{ padding:18px; gap:16px }
  .cp-hbtns{ margin-left:0 }
  .cp-two{ grid-template-columns:minmax(0,1fr) }
  .cp-pgrid{ padding:14px }
  .cp-person{ padding:16px }
  .cp-payhead, .cp-payer{ grid-template-columns:minmax(0,1fr); gap:8px }
  .cp-payhead span:not(:first-child){ display:none }
  .cp-payer .cp-r{ text-align:left }
  .cp-bigs{ gap:8px }
  .cp .pa-btn.cp-bandgo{ margin-left:0 }
  .cp-table{ min-width:640px }
  .cp-ln{ grid-template-columns:70px minmax(0,1fr) 80px; padding:9px 16px }
}
/* the phone rule of the property hero names its map areas too; the client heroes have none */
body.phone .cp .cp-hero, body.phone .cp .cp-heroc{ grid-template-areas:none }

/* ============================================================
   Session 361 (briefs/session-361-brief.md; ClientV3, ClientV3Inactive, ClientV3Edit). The shorter hero (300 px or less at 1920), the
   "Still a client?" line, the cards edited in place, and the shared controls: a segmented
   button, chips, a styled list, a calendar. Values in tokens.css "Session 361".
   ============================================================ */
.cp{ position:relative }
.cp .cp-hero{ grid-template-columns:minmax(0,1fr) 360px; gap:14px 24px; padding:20px 26px 18px }
.cp .cp-hl{ gap:12px }
.cp-hrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0 }
.cp .cp-name{ font-size:36px; letter-spacing:-0.035em; line-height:1.05 }
.cp-hvals{ display:flex; gap:10px 22px; flex-wrap:wrap; align-items:flex-end; min-width:0 }
.cp-hv1{ min-width:0 } .cp-hv1 .pa-hv{ overflow-wrap:anywhere }
.cp-hero .pa-hv a, .cp-hero a.pa-hv{ color:var(--pa-teal-300) }
.cp .pa-dim{ color:rgba(255,255,255,.55) }
.cp-hbtns2{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap }
.cp .pa-btn.cp-hbtnxs{ height:30px; padding:0 10px; font-size:12.5px; margin-left:8px; vertical-align:middle }
.cp .cp-rev{ padding:12px 16px; display:flex; flex-direction:column; gap:6px }
.cp .cp-revytd{ font-size:22px }
.cp .cp-spark{ height:44px; margin:0 }
.cp .cp-sparknone{ height:44px }
.cp .cp-months{ font-size:11px }
.cp .cp-revf{ border-top:0; margin-top:0; padding-top:0 }
.cp .cp-revv{ font-size:15px }
.cp .cp-hero > .cp-facts{ gap:14px; padding-top:12px }
.cp-hero .cp-facts .pa-fv{ font-size:17px; letter-spacing:-0.02em; line-height:1.15 }
.cp-hero .cp-facts .pa-fl{ font-size:12px; margin-top:2px }
.cp .pa-ed{ border:1px solid var(--pa-input-line); background:#fff; padding:6px 12px; border-radius:9px }   /* the mockup's Edit button: it looks like a button */
.cp .pa-ed:hover{ background:var(--pa-grey) }

/* the "Still a client?" line */
.cp-still{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; background:var(--cp-still-bg); border-radius:14px; padding:12px 18px; color:var(--cp-still-ink); margin-top:22px }
.cp .pa-btn.cp-stillgo{ height:34px; margin-left:auto; border:1px solid var(--cp-still-line); color:var(--cp-still-ink); background:#fff }


/* chips and the segmented button */
.cp-chipg{ display:flex; gap:8px; flex-wrap:wrap }
.cpc-chip{ font-family:inherit; font-size:13.5px; font-weight:600; border:1px solid var(--pa-input-line); background:#fff; color:var(--pa-text); border-radius:999px; padding:7px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; min-height:34px }
.cpc-chip:hover{ background:var(--pa-grey) }
.cpc-chip.on, .cpc-chip.on:hover{ background:var(--cp-on); border-color:var(--cp-on); color:#fff }
.cpc-chip em{ font-style:normal; font-weight:500; opacity:.8 }
/* the ClientV3Edit mockup's focus ring (.sb.focus): shown whenever a chip, a segment or a list button has the focus, also when Edit puts it
   there, which Chrome's :focus-visible would not show after a mouse click */
.cpc-chip:focus, .cp-sb:focus, .cp-pkb:focus, .cp-mi:focus-visible, .cp-cd:focus, .cp-calnav:focus-visible, .cp-pastt:focus-visible, .cp-addtile:focus-visible{ outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--cp-ring) }
.cpc-seg{ display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:11px; background:var(--cp-seg-bg); max-width:100% }
.cp-sb{ font-family:inherit; font-size:13.5px; font-weight:600; color:var(--pa-text); background:none; border:0; padding:7px 13px; border-radius:8px; cursor:pointer; min-height:34px }
.cp-sb:hover{ background:rgba(255,255,255,.7) }
.cp-sb.on, .cp-sb.on:hover{ background:var(--cp-on); color:#fff; font-weight:700 }
.cpc-segsm .cp-sb{ padding:5px 10px; font-size:12.5px; min-height:30px }

/* the styled list (six choices or more) and its menu */
.cp-pkb{ font-family:inherit; display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-width:200px; max-width:100%; height:40px; padding:0 12px; border:1px solid var(--pa-input-line); border-radius:10px; background:#fff; color:var(--pa-ink); font-size:14px; font-weight:600; cursor:pointer; box-sizing:border-box }
.cp-pkb:hover{ background:var(--pa-page) }
.cp-pkb[aria-expanded="true"] svg{ transform:rotate(180deg) }
.cp-pkl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cp-pkph{ color:var(--pa-muted); font-weight:500 }
.cp-menu{ position:absolute; z-index:1000; width:300px; max-width:calc(100vw - 16px); max-height:340px; display:flex; flex-direction:column; background:#fff; border:1px solid var(--pa-line); border-radius:14px; box-shadow:var(--cp-pop-shadow); padding:6px; box-sizing:border-box; font-family:inherit }
.cp-msearch{ padding:4px 4px 6px } .cp-msearch .cp-in{ height:36px }
.cp-mlist{ overflow-y:auto; display:flex; flex-direction:column; gap:1px }
.cp-mi{ font-family:inherit; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border:0; background:none; border-radius:9px; font-size:14px; font-weight:600; color:var(--pa-ink); cursor:pointer }
.cp-mi:hover{ background:var(--pa-page) }
.cp-mi.on{ background:var(--pa-teal-100); color:var(--pa-teal-900) }
.cp-mi[hidden]{ display:none }
.cp-mnone{ padding:10px 12px; color:var(--pa-muted); font-size:13.5px }

/* the one calendar box */
.cp-cal{ position:absolute; z-index:1001; width:300px; background:#fff; border:1px solid var(--pa-line); border-radius:14px; box-shadow:var(--cp-pop-shadow); padding:12px; box-sizing:border-box; font-family:inherit; color:var(--pa-text) }
.cp-calh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px } .cp-calh b{ color:var(--pa-ink); font-size:15px }
.cp-calnav{ width:34px; height:34px; border-radius:9px; border:1px solid var(--pa-input-line); background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--pa-ink) }
.cp-calnav:hover{ background:var(--pa-page) }
.cp-calw, .cp-calg{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:2px; text-align:center }
.cp-calw span{ font-size:11.5px; font-weight:700; color:var(--pa-muted); padding:4px 0 }
.cp-cd{ font-family:inherit; height:36px; border:0; background:none; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--pa-ink); cursor:pointer }
.cp-cd:hover{ background:var(--pa-page) }
.cp-cd.today{ box-shadow:inset 0 0 0 1.5px var(--cp-ring) }
.cp-cd.on, .cp-cd.on:hover{ background:var(--cp-on); color:#fff }
.cp-calf{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--pa-line-soft); margin-top:8px; padding-top:10px }

/* a card being edited, in place */
.cp .pa-card.cp-editing{ box-shadow:0 0 0 2px var(--cp-ring), var(--cp-edit-shadow) }
.cp .cp-editing > .pa-ch{ background:var(--cp-edit-head); border-radius:var(--pa-radius-card) var(--pa-radius-card) 0 0 }
.cp-er{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:10px 18px; align-items:center; padding:12px 20px; border-top:1px solid var(--pa-line-soft) }
.cp .pa-ch + .cp-er{ border-top:0 }
.cp-el{ font-weight:600; color:var(--pa-ink); font-size:14px }
.cp-ec{ min-width:0; display:flex; flex-direction:column; gap:6px; align-items:flex-start }
.cp-ehint{ font-size:12.5px }
.cp .cp-in{ height:40px; border:1px solid var(--pa-input-line); border-radius:10px; padding:0 12px; font-family:inherit; font-size:14px; width:100%; color:var(--pa-ink); background:#fff; box-sizing:border-box; min-width:0 }
.cp .cp-in:focus, .cp .cp-ta:focus{ outline:none; border-color:var(--pa-yellow); box-shadow:0 0 0 3px rgba(255,209,58,.28) }
body > .cp-menu .cp-in{ height:36px; border:1px solid var(--pa-input-line); border-radius:9px; padding:0 10px; font-family:inherit; font-size:14px; width:100%; box-sizing:border-box }
.cp .cp-ta{ width:100%; min-height:120px; border:1px solid var(--pa-input-line); border-radius:10px; padding:10px 12px; font-family:inherit; font-size:14px; resize:vertical; box-sizing:border-box }
.cp-efoot{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid var(--pa-line); background:var(--cp-foot-bg); border-radius:0 0 var(--pa-radius-card) var(--pa-radius-card) }
.cp-amt{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.cp-subrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.cp-subrow[hidden]{ display:none }
.cp-addr3{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr) minmax(0,.8fr); gap:8px; width:100% }
.cp-hedit{ background:#fff; color:var(--pa-text); border-radius:14px; overflow:hidden; min-width:0 }
.cp-hedith{ display:flex; align-items:baseline; gap:10px; padding:12px 20px; background:var(--cp-edit-head); color:var(--pa-ink) }
.cp-hedit .cp-er:first-of-type{ border-top:0 }
.cp .cp-heroed{ box-shadow:0 0 0 2px var(--pa-teal-300), var(--pa-shadow-hero) }

/* People, in edit, and past contacts */
.cp-pfields{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px }
.cp-pf{ display:flex; flex-direction:column; gap:5px; min-width:0; font-size:12.5px; font-weight:600; color:var(--pa-muted) }
.cp-pf > span{ font-size:12.5px }
.cp-pfw{ grid-column:1 / -1 }
.cp-ways{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--pa-line-soft); padding-top:12px }
.cp-wayr{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.cp-addway{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; background:var(--pa-page); border-radius:12px; padding:12px }
.cp .pa-btn.cp-btnxs{ height:30px; padding:0 10px; font-size:12.5px }
.cp-guard{ margin-top:8px; background:var(--cp-guard-bg); color:var(--cp-guard-ink); border:1px solid var(--cp-guard-line); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; font-size:13.5px; font-weight:500 }
.cp-guardok{ margin-top:6px }
.cp-addp{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 20px; border-top:1px solid var(--pa-line-soft) }
.cp-addp .cp-in{ width:240px; flex:0 1 240px }
.cp-addpc{ background:var(--pa-page) }
.cp-addtile{ font-family:inherit; border:1.5px dashed var(--pa-input-line); border-radius:14px; background:none; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--pa-muted); font-weight:600; font-size:14px; min-height:120px; cursor:pointer }
.cp-addtile:hover{ background:var(--pa-page); color:var(--pa-ink) }
.cp-nocur{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.cp-past{ border-top:1px solid var(--pa-line-soft); padding:10px 20px 14px }
.cp-pastt{ font-family:inherit; display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:6px 4px; font-size:13.5px; font-weight:700; color:var(--pa-teal-600); cursor:pointer; border-radius:8px; text-decoration:underline; text-underline-offset:3px }
.cp-pastr{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 4px; border-top:1px solid var(--pa-line-soft) }
.cp-pastr:first-child{ border-top:0 }
.cp-frm2{ align-items:flex-start }
.cp-fl{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--pa-text); min-width:0 }
.cp-npick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto }
.cp-banddone{ background:var(--pa-teal-100); color:var(--pa-teal-900) }
.cp-bandrow{ min-height:38px }

@media (max-width:1179px){
  .cp .cp-hero{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:760px){
  .cp .cp-hero{ padding:18px 16px; gap:14px }
  .cp .cp-name{ font-size:30px }
  .cp-hbtns2{ margin-left:0; width:100% }
  .cp-er{ grid-template-columns:minmax(0,1fr); gap:6px }
  .cp-pfields{ grid-template-columns:minmax(0,1fr) }
  .cp-addr3{ grid-template-columns:minmax(0,1fr) }
  .cp-addp .cp-in{ width:100%; flex:1 1 100% }
  .cp .pa-btn.cp-stillgo{ margin-left:0 }
}
@media (min-width:761px){ .cp-hero .cp-facts .pa-fl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis } }   /* one slim row on a computer: a label never takes a second line */

/* ============================================================
   Session 362 (briefs/session-362-brief.md): the hero's status pill and Out of town tag (nothing to click; set in Edit client only), and the
   Client status row of Edit client with its Inactive or No sale rows and the homes line. Values in tokens.css "Session 362".
   ============================================================ */
.cp .pa-pill.cp-stact{ background:var(--cp-act-bg); color:var(--cp-act-ink) }
.cp .pa-pill.cp-stinact{ background:var(--cp-stinact-bg); color:var(--cp-stinact-ink) }
.cp-ootag{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 8px; border-radius:999px; background:var(--clx-oot-bg); color:var(--clx-oot-ink); font-size:12px; font-weight:700; white-space:nowrap }
.cp-stmore{ display:inline-flex; align-items:center; gap:6px }
.cp-sthomes{ display:flex; align-items:flex-start; gap:8px; margin:0 20px 12px; padding:10px 14px; border-radius:10px; background:var(--cp-sthomes-bg); color:var(--pa-ink); font-size:13.5px; font-weight:600; line-height:1.45 }
.cp-sthomes svg{ flex:0 0 auto; margin-top:2px }
.cp-er.cp-erw{ grid-template-columns:minmax(0,1fr); gap:8px }   /* a row whose buttons need the card's whole width (Tier) */

/* ============================================================
   Session 366 (briefs/session-366-brief.md; the ClientV4Overview, PeopleEditV4, PropertiesTabV4 and CleansRevenue mockups): People as one line
   each for three or more, the owners line, a person's plain fields with Make preferred, the owner card on Billing, the short Properties card, the
   Properties tab's filter bar, and Cleans and revenue. Values in tokens.css "Session 366".
   ============================================================ */
.cp-tabs .pa-tab{ white-space:nowrap }   /* a tab's label never wraps inside itself */
.cp-nw, .cp-table td.cp-nw{ white-space:nowrap }   /* a count and its word never wrap apart ("12 payers"); a day in a table cell too */
.cp-fg{ display:inline-flex; align-items:center; gap:8px 10px; flex-wrap:wrap; max-width:100% }   /* a filter's label stays with its control */
.cp-fg .cp-fl{ margin-right:0 }
.cp .cp-n{ text-align:right; font-variant-numeric:tabular-nums; color:var(--pa-ink); font-weight:600 }
.cp-gline{ display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid var(--pa-line); background:var(--cp-fbar-bg); border-radius:0 0 var(--pa-radius-card) var(--pa-radius-card) }
.cp-gline .pa-btn svg{ margin-right:2px }

/* People, three or more: one line each */
.cp-plist td{ padding-top:10px; padding-bottom:10px }
.cp-plw{ display:flex; gap:10px; align-items:center; min-width:0 }
.cp-plw .pa-pill{ margin-left:6px }
.cp-pavl{ width:34px; height:34px; min-width:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex:0 0 34px; background:var(--cp-avatar-bg); color:var(--cp-avatar-ink) }
.cp-pavl.cp-pavmain{ background:var(--pa-teal-900); color:#fff }
.cp .cp-gets.cp-getsm{ padding:2px 8px; border-radius:7px; font-size:12px; background:var(--cp-gets-bg); color:var(--pa-text); margin:2px 4px 2px 0 }
.cp-ownact{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end }

/* a person's card in edit: plain labeled fields, Make preferred beside each way */
.cp-pegrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:18px 20px }
.cp-pbox{ border:1px solid var(--pa-line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:12px; background:#fff; min-width:0 }
.cp-pboxnew{ border-style:dashed }
.cp-pboxwide{ margin:18px 20px; max-width:900px }
.cp .cp-pn.cp-pn15{ font-size:15px; font-weight:700 }
.cp-fld{ display:grid; grid-template-columns:130px minmax(0,1fr) auto; gap:10px 12px; align-items:center }
.cp-fc{ min-width:0; display:flex; flex-direction:column; gap:8px; align-items:stretch }
.cp-fc .cp-pkb{ width:100% }
.cp-fhint{ margin:-6px 0 0 142px }
.cp-fhint0{ margin-top:4px }
.cp-star{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--pa-input-line); background:#fff; font-family:inherit; font-size:13px; font-weight:600; color:var(--pa-text); cursor:pointer; white-space:nowrap }
.cp-star:hover{ background:var(--pa-grey) }
.cp-star.on, .cp-star.on:hover{ background:var(--cp-star-on); border-color:var(--cp-star-line); color:var(--pa-ink) }
.cp-star:focus{ outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--cp-ring) }
.cp-wasub{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.cp .cp-in.cp-wanum{ flex:1 1 180px; width:auto; height:36px }
.cp-also{ font-weight:600; color:var(--pa-ink); overflow-wrap:anywhere }
.cp-also.cp-gone{ text-decoration:line-through; color:var(--pa-muted) }
.cp-link.cp-addmore{ align-self:flex-start }
.cp-pegrid .cp-addtile{ min-height:160px }

/* owners, on Billing */
.cp-ownrow{ grid-column:1 / -1; min-width:0 }
.cp-owner{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:10px; background:var(--cp-fbar-bg); border:1px solid var(--pa-line-soft) }
.cp-owner.cp-ownernone{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap }
.cp-ownerh{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.cp-ownerh .pa-btn{ margin-left:auto }
.cp-ownerv{ display:flex; gap:6px 8px; flex-wrap:wrap; font-size:13.5px; color:var(--pa-text); overflow-wrap:anywhere }
.cp-ownerv a{ color:var(--pa-teal-600); font-weight:600 }
.cp .pa-card.cp-ownered{ margin:0 20px 16px; box-shadow:0 0 0 2px var(--cp-ring), var(--cp-edit-shadow) }
.cpc-chip.cp-chipstatic{ cursor:default }

/* Properties: the full street address first, the short card's foot, the tab's filter bar */
.cp .cp-addr{ font-size:15px; font-weight:700; color:var(--pa-teal-600); letter-spacing:-0.01em; overflow-wrap:anywhere }
.cp .cp-addr.cp-addr14{ font-size:14px }
.cp-ownflex{ display:inline-flex; padding:1px 8px; border-radius:7px; background:var(--pa-teal-100); color:var(--pa-teal-900); font-size:12px; font-weight:700; white-space:nowrap }
.cp-fbar{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--pa-line); background:var(--cp-fbar-bg) }
.cp-fbar.cp-fbar1{ border-bottom:0; border-radius:var(--pa-radius-card) }
.cp-fl{ font-size:12.5px; font-weight:700; color:var(--pa-text); margin-right:-4px }
.cp-fbar .cp-pkb{ min-width:160px; height:36px; font-size:13.5px }
.cp-srch{ display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:1px solid var(--pa-input-line); border-radius:10px; background:#fff; min-width:220px; flex:1 1 240px; color:var(--pa-muted); box-sizing:border-box }
.cp-srch:focus-within{ border-color:var(--pa-yellow); box-shadow:0 0 0 3px rgba(255,209,58,.28) }
.cp .cp-srch input.cp-srchin{ border:0; outline:none; box-shadow:none; padding:0; border-radius:0; width:auto; font-family:inherit; font-size:14px; color:var(--pa-ink); flex:1; min-width:0; background:none; height:100% }
.cp-cnt{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 20px; font-size:13px; color:var(--pa-muted); border-bottom:1px solid var(--pa-line-soft) }
.cp-sortw{ margin-left:auto; display:flex; align-items:center; gap:8px }
.cp-rowdim td{ opacity:var(--cp-row-dim) }
.cp-ptab td{ vertical-align:middle }

/* Cleans and revenue */
.cp-cleans{ display:flex; flex-direction:column; gap:22px; min-width:0 }
.cp-cleansb{ display:flex; flex-direction:column; gap:22px; min-width:0; transition:opacity .15s }
.cp-cleansb.cp-loading{ opacity:.55 }
.cp-datebtn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:1px solid var(--pa-input-line); border-radius:10px; background:#fff; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--pa-ink); cursor:pointer }
.cp-datebtn:hover{ background:var(--pa-page) }
.cp-datebtn.on{ background:var(--cp-on); border-color:var(--cp-on); color:#fff }
.cp-datebtn:focus{ outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--cp-ring) }
.cp-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px }
.cp-tile{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); padding:16px 18px; display:flex; gap:14px; align-items:flex-start; min-width:0 }
.cp-tic{ width:40px; height:40px; border-radius:11px; background:var(--cp-tile-ic-bg); color:var(--cp-tile-ic-ink); display:flex; align-items:center; justify-content:center; flex:0 0 40px }
.cp-tilel{ font-size:12.5px; color:var(--pa-muted); font-weight:600 }
.cp-tilev{ font-size:26px; font-weight:800; color:var(--pa-ink); letter-spacing:-0.03em; line-height:1.15; margin-top:2px; overflow-wrap:anywhere }
.cp-up{ color:var(--cp-up); font-weight:700 } .cp-dn{ color:var(--cp-dn); font-weight:700 }
.cp-chartw{ padding:12px 20px }
.cp-barg{ cursor:pointer; outline:none }
.cp-barhit{ fill:transparent }
.cp-bar{ fill:var(--cp-bar) } .cp-bar.cp-barnow{ fill:var(--cp-bar-now) }
.cp-barg:hover .cp-bar, .cp-barg:focus .cp-bar{ opacity:.82 }
.cp-barg:focus .cp-barhit{ stroke:var(--cp-ring); stroke-width:2; rx:6 }
.cp-barv{ font-size:12px; font-weight:700; fill:var(--cp-bar-value); font-family:inherit }
.cp-barl{ font-size:12px; fill:var(--cp-bar-label); font-family:inherit }
.cp-barbase{ stroke:var(--pa-line) }
.cp-wwd{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) }
.cp-wwdr{ border-left:1px solid var(--pa-line) }

@media (max-width:1179px){
  .cp-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cp-pegrid{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:760px){
  .cp-tiles{ grid-template-columns:minmax(0,1fr); gap:12px }
  .cp-pegrid{ padding:14px }
  .cp-fld{ grid-template-columns:minmax(0,1fr) auto }
  .cp-fld > .cp-el{ grid-column:1 / -1 }
  .cp-fld > .cp-fc{ grid-column:1 }
  .cp-fhint{ margin:-6px 0 0 }
  .cp-pboxwide{ margin:14px }
  .cp .pa-card.cp-ownered{ margin:0 0 14px }
  .cp-wwd{ grid-template-columns:minmax(0,1fr) }
  .cp-wwdr{ border-left:0; border-top:1px solid var(--pa-line) }
  .cp-srch{ min-width:0; flex-basis:100% }
  .cp-sortw{ margin-left:0 }
  .cp-fbar .cp-pkb{ min-width:0 }
  .cp-plist{ min-width:640px }
  .cp-chartw{ overflow-x:auto; padding:12px 8px }
  .cp-chartw svg{ min-width:680px }   /* twelve months stay readable on a phone: the chart scrolls sideways, like the tables */
}

/* ============================================================
   Session 367 (briefs/session-367-brief.md; the ClientV5Overview mockup, its <style> copied as named classes): the Overview in one column,
   People and Properties as rows for every client, Record, Standing rules, Relationship and Quality as the facts grid, Recent activity as rows.
   Values in tokens.css "Session 367". The other tabs keep .cp-two.
   ============================================================ */
.cp-one{ display:flex; flex-direction:column; gap:var(--cp-one-gap); min-width:0 }
.cp-one > *{ min-width:0 }
/* the Overview's tables (the mockup's table.t): th 10px 20px, td 11px 20px */
.cp-table.cp-t5 th{ padding:10px var(--cp-t5-pad) }
.cp-table.cp-t5 td{ padding:11px var(--cp-t5-pad) }
.cp-table.cp-t5 th:first-child, .cp-table.cp-t5 td:first-child{ padding-left:var(--cp-t5-pad) }
.cp-table.cp-t5 th:last-child, .cp-table.cp-t5 td:last-child{ padding-right:var(--cp-t5-pad) }
.cp-w30{ width:30% } .cp-w26{ width:26% } .cp-w22{ width:22% }
.cp-plw .cp-redit{ margin-left:auto }
.cp-plist .cp-nm{ white-space:nowrap }
.cp .cp-addr.cp-addr145{ font-size:14.5px }
.cp-props td .pa-pill, .cp-props td .cp-ownflex{ vertical-align:1px }
/* the People card's foot: Who pays (white), then the owners line with Add a person */
.cp-gline.cp-glinew{ background:#fff; border-radius:0 }
.cp-gline.cp-glinew, .cp-gline.cp-ownline{ flex-wrap:wrap }
.cp .pa-ed.cp-ednear{ margin-left:12px; border:1px solid var(--pa-input-line); background:#fff }
.cp .pa-ed.cp-ednear:hover{ background:var(--pa-grey) }
.cp-ml{ margin-left:auto }
/* the facts grid (the mockup's .facts, .fact, .fl, named cp-fgrid, cp-fact, cp-factl: cp-facts and cp-fl were taken): each answer under its label, the cells side by side */
.cp-fgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--cp-fact-min),1fr)); gap:0; margin-top:-1px; overflow:hidden;
  border-radius:0 0 var(--pa-radius-card) var(--pa-radius-card) }
.cp-fact{ padding:14px 20px; border-top:1px solid var(--pa-line-soft); border-right:1px solid var(--pa-line-soft); display:flex; flex-direction:column; gap:4px; min-width:0 }
.cp-factl{ font-size:12.5px; color:var(--pa-muted); font-weight:600 }
.cp-factv{ min-width:0; overflow-wrap:anywhere }
.cp-fact .pa-v{ text-align:left }
.cp-factv > .pa-pill{ white-space:normal }
.cp-factn{ font-size:var(--cp-fact-num); font-weight:800; color:var(--pa-ink); letter-spacing:-0.03em; line-height:1.2 }
.cp-actrows td .cp-clip{ -webkit-line-clamp:1 }
@media (max-width:760px){
  .cp-props{ min-width:1080px }
  .cp-actrows{ min-width:560px }
  .cp-gline.cp-ownline .cp-ml{ margin-left:0 }
}

/* ============================================================
   Session 368 (briefs/session-368-brief.md; the QualityV5 and NotesV5 mockups, their <style> copied as named classes): Billing's Current and
   Past payers, the Overview's other-service price, the Quality tab (the window in the hero, four tiles, To act on, every current home, Cleaners
   on the misses) and the Notes tab (Add note, the notes). Values in tokens.css "Session 368".
   ============================================================ */
.cp-fvsm{ font-size:13px; font-weight:600; opacity:.75; letter-spacing:0 }
.cp-svcn{ font-size:12px; color:var(--pa-muted); font-weight:500; white-space:normal; line-height:1.3; margin-top:2px }
.cp-payer.cp-payerpast > *:not(.cp-ownrow){ opacity:var(--cp-past-opacity) }
.cp .cp-home.cp-homepast{ opacity:var(--cp-past-opacity); background:var(--pa-grey) }
.cp .cp-link.cp-pasthomes{ padding:4px 2px; font-size:12.5px }
.cp-pastpay{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.cp-pastlist{ border-top:1px solid var(--pa-line-soft) }
/* the window, in the hero (.seg on the dark band) */
.cp-qwin{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.cp-qwinl{ font-size:13px; color:rgba(255,255,255,.7); font-weight:600 }
.cpc-seg.cp-hseg{ background:var(--cp-hseg-bg); border-radius:11px; padding:3px; gap:2px }
.cp-hseg .cp-sb{ color:var(--cp-hseg-ink); font-size:13px; padding:6px 12px; min-height:32px }
.cp-hseg .cp-sb:hover{ background:rgba(255,255,255,.12) }
.cp-hseg .cp-sb.on, .cp-hseg .cp-sb.on:hover{ background:#fff; color:var(--pa-teal-900, #144d54) }
.cp-hseg .cp-sb:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--cp-q-ring) }
/* the four tiles (.tiles, .tile as buttons): each filters the table below */
.cp-qual.cp-loading{ opacity:.55; transition:opacity .15s }
.cp-qtiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px }
.cp-qtile{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); padding:16px 18px; display:flex; gap:14px; align-items:flex-start; border:0;
  font-family:inherit; text-align:left; cursor:pointer; color:inherit; min-width:0; font-size:14px }
.cp-qtile:hover{ box-shadow:0 0 0 2px var(--cp-q-ring), var(--pa-shadow-card) }
.cp-qtile:focus-visible{ outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--cp-ring) }
.cp-qtile.on{ box-shadow:0 0 0 2px var(--pa-teal-600, #1d6e77), var(--pa-shadow-card) }
.cp-tic.cp-ticw{ background:var(--cp-q-ticw-bg); color:var(--cp-q-ticw-ink) }
.cp-qtb{ display:flex; flex-direction:column; min-width:0 }
.cp-qtb .cp-tilev{ display:block }
.cp-tilevof{ font-size:15px; font-weight:600; color:var(--pa-muted); letter-spacing:0 }
.cp-qsub{ display:block; margin-top:2px }
.cp-qworse{ color:var(--cp-q-worse); font-weight:700 }
.cp-qbetter{ color:var(--cp-q-better); font-weight:700 }
/* To act on */
.cp-qwhy{ font-weight:600; color:var(--pa-ink) }
.cp-qbooked{ display:inline-flex; align-items:center; height:34px; padding:0 12px; border-radius:9px; background:var(--cp-score-ok-bg); color:var(--cp-score-ok-ink); font-size:13px; font-weight:700; white-space:nowrap }
.cp-qempty{ color:var(--pa-ink); font-weight:600 }
.cp-qact td .pa-pill{ vertical-align:1px }
/* every current home: sortable headers, the score chip (.score) */
.cp-qsort{ font-family:inherit; font-size:inherit; font-weight:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:4px; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px }
.cp-qsort:hover, .cp-qsort.on{ text-decoration-color:currentColor; color:var(--pa-ink) }
.cp-qsort:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--cp-ring); border-radius:4px }
.cp-qarrow{ display:inline-flex } .cp-qarrow.up{ transform:rotate(180deg) }
.cp-score{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:24px; padding:0 7px; border-radius:7px; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; text-decoration:none }
.cp-score:hover{ text-decoration:underline }
.cp-score.cp-scoreok{ background:var(--cp-score-ok-bg); color:var(--cp-score-ok-ink) }
.cp-score.cp-scorelow{ background:var(--cp-score-low-bg); color:var(--cp-score-low-ink) }
.cp-gline.cp-qfilt{ background:#fff; border-radius:0; border-top:0; border-bottom:1px solid var(--pa-line-soft); justify-content:space-between; flex-wrap:wrap }
/* Notes: Add note in the hero, the card at the top of the list (.card.editing), the notes (.note) */
.cp .pa-btn.cp-addnote{ height:44px; font-size:15px }
.cp-notech{ background:var(--cp-note-head); border-radius:var(--pa-radius-card) var(--pa-radius-card) 0 0 }
.cp-notebox{ padding:16px 20px; display:flex; flex-direction:column; gap:12px }
.cp-notel{ font-size:12.5px; font-weight:600; color:var(--pa-text) }
.cp-nta{ width:100%; min-height:110px; border:1px solid var(--cp-note-line); box-shadow:0 0 0 3px var(--cp-note-glow); border-radius:10px; padding:12px 13px; font-family:inherit;
  font-size:14px; color:var(--pa-ink); resize:vertical; box-sizing:border-box }
.cp-nta:focus{ outline:none }
.cp-notefoot{ display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--pa-line); background:var(--cp-fbar-bg); border-radius:0 0 var(--pa-radius-card) var(--pa-radius-card) }
.cp-noterow{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:4px 14px; padding:16px 20px; border-top:1px solid var(--pa-line-soft); align-items:start }
.cp-noterow.first{ border-top:0 }
.cp-notehd{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.cp-notebody{ color:var(--pa-ink); white-space:pre-wrap; margin-top:4px; overflow-wrap:anywhere }
.cp-notebtns{ display:flex; gap:6px }
.cp-noteed .cp-nta{ margin:8px 0 10px; min-height:90px }
.cp-notefoot0{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px }
.cp-noterm{ display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; margin-left:auto }
.cp-noterm .cp-inp{ width:240px; max-width:100% }
@media (max-width:760px){
  .cp-qtiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .cp-qtile{ padding:12px; gap:10px; flex-direction:column }
  .cp-qtile .cp-tic{ width:34px; height:34px; flex-basis:34px }
  .cp-qtile .cp-tilev{ font-size:22px }
  .cp-qact{ min-width:760px } .cp-qhomes{ min-width:900px } .cp-qcl{ min-width:720px }
  .cp-qact td:first-child, .cp-qhomes td:first-child, .cp-qcl td:first-child{ min-width:210px }
  .cp-noterow{ grid-template-columns:36px minmax(0,1fr) }
  .cp-notebtns{ grid-column:2 }
  .cp-qwin{ width:100% }
  .cp .pa-btn.cp-addnote{ width:100% }
}