/* core-header.css -- session 416 (briefs/session-416-brief.md; mh-header-mockups-v1, header-spec.html): one header for Clients, Properties,
   Staff, Appointments and Data to Fix, drawn by core-header.js (CHD). The mockups' own stylesheet, value for value, as tokens (tokens.css --ch-*)
   and ch- classes: the title row (56 tall, the title area always 360 wide so the page tabs start at one x), the band (at least 136: an 86 number
   row and a 50 chip row), the filter card (two rows of 40, 12 apart) with the table inside it. The page sits in #page.core-page, whose top
   padding puts the title row 32 below the colour stripe.
   Not in the mockups (named here): the live pages carry the 228 wide left menu, so at 1440 a page is 1148 wide, not the mockups' 1344. Below
   1300 the stats sit 20 apart with their labels on up to two lines, and the chart slot is 260 wide, inside the same 86 row; the long words on
   a title row button give way to short ones where a title row would not fit on one line. Nothing below moves. */

.ch{display:block;min-width:0;font-family:'Inter',system-ui,'Segoe UI',sans-serif;font-feature-settings:'cv02','cv03','cv04','cv11';color:var(--ch-text);-webkit-font-smoothing:antialiased;
  --ch-a:var(--ch-acc);--ch-b:var(--ch-band);--ch-ah:var(--ch-acc-hover);--ch-thl:var(--ch-th-line);container-type:inline-size;container-name:chpage}
.ch.ch-navy{--ch-a:var(--ch-acc-navy);--ch-b:var(--ch-band-navy);--ch-ah:var(--ch-acc-hover-navy);--ch-thl:var(--ch-th-line-navy)}
.ch *{box-sizing:border-box}
.ch :where(button){font:inherit}
.ch [hidden]{display:none !important}
.ch-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

/* ---------- the title row (.hd, .tb, .ic, .tt, .st) ---------- */
.ch-head{display:flex;align-items:center;flex-wrap:wrap;row-gap:12px;min-height:var(--ch-head-h);margin:0}
.ch-tb{display:flex;align-items:center;gap:14px;width:var(--ch-title-w);flex:none;min-width:0}
.ch-ic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;color:#ffffff;background:var(--ch-a)}
.ch-ic .ch-ico{width:22px;height:22px}
.ch-tw{min-width:0}
.ch-head h1.ch-tt{margin:0;font-size:28px;line-height:32px;font-weight:750;letter-spacing:-.022em;color:var(--ch-ink)}
.ch-st{font-size:13px;line-height:18px;color:var(--ch-sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the page tabs and every segmented control (.seg) */
.ch-seg{display:inline-flex;gap:2px;padding:4px;background:var(--ch-seg-bg);border-radius:12px;flex:none;flex-wrap:wrap;align-items:center}
.ch-sb{height:32px;padding:0 14px;border:0;border-radius:9px;background:transparent;font-size:14px;font-weight:600;color:var(--ch-seg-ink);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;text-decoration:none;line-height:normal}
a.ch-sb{color:var(--ch-seg-ink)}
.ch-sb:hover,a.ch-sb:hover{background:rgba(255,255,255,.6);text-decoration:none;color:var(--ch-seg-ink)}
.ch-sb.on,a.ch-sb.on,.ch-sb.on:hover{background:var(--ch-a);color:#ffffff}
.ch-sb:focus-visible{outline:2px solid var(--ch-a);outline-offset:2px}
.ch-k{font-size:12px;font-weight:650;color:var(--ch-muted)}
.ch-sb.on .ch-k{color:rgba(255,255,255,.78)}
.ch-k.ch-kw{min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--ch-yellow);color:var(--ch-yellow-ink);font-weight:750;display:inline-flex;align-items:center;justify-content:center}
.ch-sb.on .ch-k.ch-kw{color:var(--ch-yellow-ink)}
.ch-k:empty{display:none}

/* the buttons (.acts, .btn, .btn.p): secondary white with the grey border, the yellow main action last */
.ch-acts{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ch-btn{height:40px;padding:0 16px;border-radius:9px;border:1px solid var(--ch-line);background:#ffffff;font-size:14px;font-weight:600;color:var(--ch-btn-ink);display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:normal}
a.ch-btn,a.ch-btn:hover{color:var(--ch-btn-ink);text-decoration:none}
.ch-btn:hover{border-color:var(--ch-line-hover)}
.ch-btn[aria-current=page]{border-color:var(--ch-a);color:var(--ch-a)}
.ch-btn .ch-ico{width:16px;height:16px}
.ch-btn .ch-bm2{font-weight:500;color:var(--ch-sub)}
.ch-btn.ch-main{background:var(--ch-yellow);border-color:var(--ch-yellow);color:var(--ch-yellow-ink)}
.ch-btn.ch-main:hover{background:var(--ch-yellow-hover);border-color:var(--ch-yellow-hover)}
.ch-btn:focus-visible{outline:2px solid var(--ch-a);outline-offset:2px}
.ch-btn .ch-sm,.ch-sb .ch-sm{display:none}
.ch-btnw{position:relative;display:flex}

/* ---------- the band (.band, .bm, .hero, .vd, .stats, .stat, .rs, .bar, .cap, .bc, .cl, .chip) ---------- */
.ch-band{margin-top:20px;border-radius:16px;background:var(--ch-b);color:#ffffff;padding:0 28px;min-height:var(--ch-band-min);display:flex;flex-direction:column}
.ch-bm{min-height:var(--ch-band-top);display:flex;align-items:center;flex-wrap:wrap;gap:16px 0}
.ch-hero{width:var(--ch-hero-w);flex:none;display:flex;align-items:flex-end;gap:12px;background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer}
div.ch-hero{cursor:default}
.ch-hn{font-size:44px;line-height:44px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.ch-hw{display:block;min-width:0}
.ch-hl{display:block;font-size:15px;line-height:19px;font-weight:700}
.ch-hs{display:block;font-size:12.5px;line-height:17px;color:rgba(255,255,255,.74)}
.ch-vd{width:1px;height:52px;background:rgba(255,255,255,.16);margin-right:28px;flex:none}
.ch-stats{display:flex;gap:30px;flex:1;min-width:0;flex-wrap:wrap;align-items:flex-start}
.ch-stat{background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer;border-radius:6px;display:block}
.ch-stat:hover .ch-sl{color:#ffffff}
.ch-stat.on{background:rgba(255,255,255,.14);box-shadow:0 0 0 6px rgba(255,255,255,.14)}
div.ch-stat{cursor:default}
.ch-stat:focus-visible,.ch-hero:focus-visible,.ch-chip:focus-visible,.ch-bseg:focus-visible{outline:2px solid #ffffff;outline-offset:3px}
.ch-sn{font-size:22px;line-height:26px;font-weight:750;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px}
.ch-sl{display:block;font-size:12px;line-height:16px;font-weight:600;color:rgba(255,255,255,.8);margin-top:3px;white-space:nowrap}
.ch-y{color:var(--ch-yellow)}
.ch-dot{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.ch-rs{width:var(--ch-chart-w);flex:none;margin-left:auto}
.ch-bar{display:flex;gap:2px;height:10px}
.ch-bseg{border:0;padding:0;border-radius:3px;display:block;height:10px;min-width:4px;cursor:pointer}
span.ch-bseg{cursor:default}
.ch-bseg:hover{filter:brightness(1.12)}
.ch-bseg.dim{opacity:.35}
.ch-bnone{flex:1;height:10px;border-radius:3px;background:rgba(255,255,255,.16)}
.ch-cap{display:flex;justify-content:space-between;gap:12px;margin-top:9px;font-size:12px;font-weight:600;color:rgba(255,255,255,.8)}
.ch-cap b{color:#ffffff}
.ch-cap > span:last-child{white-space:nowrap}
/* Appointments: starts by hour (.hrs) */
.ch-hrs{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;height:30px;border-bottom:1px solid rgba(255,255,255,.2)}
.ch-hrs span{width:16px;border-radius:3px 3px 0 0;background:var(--ch-age-new);display:block}
.ch-bc{min-height:var(--ch-band-chips);border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ch-cl{display:flex;align-items:center;gap:8px;width:var(--ch-chip-label-w);flex:none;font-size:13px;font-weight:700}
.ch-bx{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:none}
.ch-navy .ch-bx{color:var(--ch-yellow)}
.ch-cl .ch-ico{width:14px;height:14px}
.ch-chip{height:28px;padding:0 12px;border-radius:14px;background:rgba(255,255,255,.1);border:0;color:#ffffff;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:normal}
a.ch-chip,a.ch-chip:hover{color:#ffffff;text-decoration:none}
.ch-chip:hover{background:rgba(255,255,255,.18)}
.ch-chip b{color:var(--ch-yellow);font-weight:750}
.ch-chip .ch-m{color:rgba(255,255,255,.72);font-weight:500}
.ch-chip .ch-ico{width:14px;height:14px}
.ch-chip.on{background:rgba(255,209,58,.22);box-shadow:inset 0 0 0 1.5px var(--ch-yellow)}
.ch-chip.ch-q{background:transparent;color:rgba(255,255,255,.78);cursor:default;padding:0 4px}
.ch-ml{margin-left:auto}
.ch-bload{font-size:13px;color:rgba(255,255,255,.78)}

/* ---------- the filter card (.card, .fr, .dd, .sr, .kb, .ct) and the table inside it (.tbx) ---------- */
.ch-card{margin-top:16px;background:#ffffff;border-radius:14px;padding:14px 16px 18px}
.ch-fr{display:flex;align-items:center;gap:10px;min-height:40px;flex-wrap:wrap}
.ch-fr + .ch-fr{margin-top:12px}
.ch-dd{height:40px;padding:0 12px 0 14px;border:1px solid var(--ch-line);border-radius:9px;background:#ffffff;font-size:14px;font-weight:500;color:var(--ch-dd-ink);display:flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap;line-height:normal}
.ch-dd:hover{border-color:var(--ch-line-hover)}
.ch-dd.on{border-color:var(--ch-a);color:var(--ch-a);font-weight:600}
.ch-dd .ch-ico{width:16px;height:16px;color:var(--ch-muted)}
.ch-dd:focus-visible{outline:2px solid var(--ch-a);outline-offset:2px}
.ch-bd{font-size:12px;font-weight:700;background:var(--ch-badge-bg);color:var(--ch-badge-ink);border-radius:8px;padding:1px 7px}
select.ch-dd,.ch-dd.ch-sel{appearance:none;-webkit-appearance:none;width:auto;max-width:240px;margin:0;box-shadow:none;font-family:inherit;padding-right:36px;
  background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B737A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center}
.ch-sr{flex:1;min-width:240px;height:40px;border:1px solid var(--ch-line);border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--ch-muted);background:#ffffff;margin:0;cursor:text}
.ch-sr:focus-within{border-color:var(--ch-a)}
input.ch-sri,.ch-sri{border:0;outline:0;flex:1;font:inherit;font-size:14px;color:var(--ch-dd-ink);background:transparent;min-width:0;width:auto;height:auto;padding:0;margin:0;box-shadow:none}
.ch-sri::placeholder{color:var(--ch-muted)}
.ch-sr .ch-ico{width:16px;height:16px}
.ch-kb{font-size:11px;border:1px solid var(--ch-line);border-radius:4px;padding:0 5px;color:var(--ch-muted);font-family:inherit;font-weight:500}
.ch-sx{border:0;background:transparent;color:var(--ch-muted);cursor:pointer;font-size:18px;line-height:1;padding:0 4px;display:flex;align-items:center}
.ch-sx:hover{color:var(--ch-ink)}
.ch-ct{font-size:13px;font-weight:600;color:var(--ch-sub);white-space:nowrap}
.ch-ct b{color:var(--ch-ink)}
.ch-tbx{overflow-x:auto;margin-top:14px}
.ch-tin{margin-top:14px}   /* a table that scrolls by itself (a sticky header) sits in the card without the overflow box */
/* the menus a dropdown opens (More filters, Any age): the platform's popover look */
.ch-ddw{position:relative;display:flex}
.ch-menu{position:absolute;top:46px;right:0;z-index:60;min-width:260px;background:#ffffff;border-radius:12px;box-shadow:0 14px 34px rgba(14,54,59,.22);border:1px solid var(--ch-row-line);padding:8px;display:flex;flex-direction:column;gap:2px}
.ch-menu.ch-left{right:auto;left:0}
.ch-mi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ch-ink);cursor:pointer;border:0;background:transparent;text-align:left;width:100%;white-space:nowrap}
.ch-mi:hover,.ch-mi:focus-visible{background:var(--ch-sec-bg);outline:none}
.ch-mi input{width:16px;height:16px;margin:0;accent-color:var(--ch-a);flex:none}
.ch-mi.on{font-weight:700;color:var(--ch-a)}
.ch-mn{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ch-muted);padding-left:12px}
.ch-mnote{font-size:12px;color:var(--ch-muted);padding:6px 10px 2px}

/* ---------- 1148 to 1300 wide (1440 with the left menu): the same rows, tighter (see the top of this file) ---------- */
@container chpage (max-width: 1300px){
  .ch-stats{gap:20px}
  .ch-stat .ch-sl{white-space:normal;max-width:92px}
  .ch-rs{width:260px}
  .ch-vd{margin-right:24px}
  .ch-card select.ch-ddn{width:128px}   /* Appointments' five menus: one row at 1440 with the left menu */
  .ch-head.ch-tight .ch-btn .ch-lg,.ch-head.ch-tight .ch-sb .ch-lg{display:none}
  .ch-head.ch-tight .ch-btn .ch-sm,.ch-head.ch-tight .ch-sb .ch-sm{display:inline}
  .ch-head.ch-tight .ch-btn{padding:0 12px}
  .ch-head.ch-tight .ch-sb{padding:0 11px}
}

/* ---------- a phone: everything stacks; only a table scrolls sideways, inside its own box ---------- */
@media (max-width: 760px){
  .ch-tb{width:100%}
  .ch-head h1.ch-tt{font-size:24px;line-height:28px}
  .ch-st{white-space:normal}
  .ch-seg{max-width:100%}
  .ch-acts{margin-left:0;width:100%}
  .ch-btn .ch-lg{display:none}
  .ch-btn .ch-sm{display:inline}
  .ch-band{padding:12px 16px}
  .ch-bm{gap:14px 0}
  .ch-hero{width:100%}
  .ch-vd{display:none}
  .ch-stats{flex:1 1 100%;gap:14px 22px}
  .ch-stat .ch-sl{white-space:normal;max-width:none}
  .ch-rs{width:100%;margin-left:0}
  .ch-bc{padding:10px 0 2px}
  .ch-cl{width:100%}
  .ch-ml{margin-left:0}
  .ch-chip{height:auto;min-height:28px;white-space:normal;padding:4px 12px}
  .ch-card{padding:12px 12px 14px}
  .ch-sr{min-width:0;flex:1 1 100%}
  .ch-fr .ch-ml{margin-left:0}
  .ch-dd{max-width:100%}
  .ch-menu{left:0;right:auto;max-width:calc(100vw - 48px)}
}

/* ---------- the older controls the pages keep, in the card's sizes (Clients' and Staff's menus, Properties' and Appointments' selects) ---------- */
.ch-card .clx-dds{display:flex;flex-wrap:wrap;gap:10px}
.ch-card .clx-ddb{height:40px;border-radius:9px;border:1px solid var(--ch-line);font-weight:500;color:var(--ch-dd-ink);font-size:14px;padding:0 12px 0 14px}
.ch-card .clx-ddb:hover{background:#ffffff;border-color:var(--ch-line-hover)}
.ch-card .clx-ddb.on{border:1px solid var(--ch-a);color:var(--ch-a);background:#ffffff;font-weight:600;padding:0 12px 0 14px}
.ch-card .clx-active{padding:0;margin-top:12px}
.ch-needs .clx-menu{top:calc(100% + 8px);left:0;color:var(--ch-ink)}

/* A page's own "button{font:inherit}" (.mhapl button, 0,1,1) would take these buttons' type; restated here one step stronger. */
.ch .ch-sb,.ch .ch-btn{font-size:14px;font-weight:600;line-height:normal;font-family:inherit}
.ch .ch-chip{font-size:12.5px;font-weight:600;line-height:normal;font-family:inherit}
.ch .ch-dd{font-size:14px;font-weight:500;line-height:normal;font-family:inherit}
.ch .ch-dd.on{font-weight:600}
.ch .ch-sx{font-size:18px;line-height:1}