/* ============================================================
   lists.css -- session 263. Clients, Properties and Appointments,
   redesigned to briefs/s263-mockup-{clients,properties,appointments}-
   {2560,1440,390}.html. Every size is the mockups' own; every colour is a
   token (tokens.css, the session 260 and 263 blocks). The shared pieces
   (lists.js) are .lp-*; each page adds only its column set (.lp-cl,
   .lp-pr, .lp-ap). Scoped under #page.lp-page and .lp, so nothing else on
   the platform is touched.
   Widths (brief Part 3): 1920 and up, full width with no cap; 1180 to
   1919, the 1440 layout; 761 to 1179, the same layout with the dark panel
   full width, the two boxes side by side under it, and the table in its
   own sideways-scrolling box; 760 and under (the shell's own body.phone
   line), the 390 layout.
   ============================================================ */
/* Session 336: the full-width #page.lp-page is retired; the four core lists share #page.core-page (the block at the end). */
/* body is a flex row (shell), so .app is only as wide as its content; on these pages it takes the full width */
body.lp-top .app, body.core-top .app{ flex:1 1 0; min-width:0 }
.lp{ font-family:'Inter','Segoe UI',system-ui,sans-serif; color:var(--b-ink); padding:28px 32px 40px 32px; display:flex; flex-direction:column; gap:24px; min-width:0 }
.lp *, .lp *::before, .lp *::after{ box-sizing:border-box }
.lp button, .lp input, .lp select{ font-family:inherit }
.lp a{ color:var(--teal-dark); text-decoration:none }
.lp a:hover{ color:var(--teal-deep) }
.lp :focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
@media (min-width:1920px){ .lp{ padding:28px 36px 40px 36px } }
.lp .lp-sm{ display:none }

/* ---------- title row ---------- */
.lp-top{ display:flex; align-items:center; gap:16px }
.lp-ico{ width:52px; height:52px; border-radius:14px; background:var(--teal-deep); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.lp-tt{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.lp-tt h1{ margin:0; font-size:40px; font-weight:800; letter-spacing:-0.035em; line-height:1.02; color:var(--b-ink) }
.lp-tt span{ font-size:14px; color:var(--b-text) }
.lp-grow{ flex-grow:1 }
.lp-acts{ display:flex; gap:10px; flex-shrink:0 }
.lp-btn{ all:unset; box-sizing:border-box; cursor:pointer; height:44px; padding:0 16px; border-radius:var(--b-radius-ctl); background:#fff; color:var(--teal-deep); font-weight:700; font-size:14px; box-shadow:inset 0 0 0 1.5px var(--teal-dark); display:flex; align-items:center; gap:8px; white-space:nowrap }
.lp-btn:hover{ background:var(--b-select) }
.lp-add{ all:unset; box-sizing:border-box; cursor:pointer; height:44px; padding:0 20px; border-radius:var(--b-radius-ctl); background:linear-gradient(180deg, var(--yellow), var(--yellow-deep)); color:var(--b-ink); font-weight:700; font-size:14px; box-shadow:var(--b-shadow-yellow); display:flex; align-items:center; gap:8px; white-space:nowrap }
.lp-btn:focus-visible, .lp-add:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.lp-note{ margin:0 }

/* ---------- summary band: dark panel 6, two boxes 3 each ---------- */
.lp-band{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:20px }
.lp-band > .lp-c6{ grid-column:span 6; min-width:0 }
.lp-band > .lp-c3{ grid-column:span 3; min-width:0; display:flex; flex-direction:column }
.lp-dark{ background:linear-gradient(135deg, var(--teal-deep), var(--teal-night)); border-radius:var(--b-radius-hero); padding:22px 26px; color:#fff; display:flex; flex-direction:column; gap:12px; box-shadow:var(--b-shadow-hero); height:100% }
.lp-dk{ font-size:12.5px; font-weight:600; opacity:0.85 }
.lp-big{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.lp-big b{ font-size:56px; font-weight:800; letter-spacing:-0.04em; line-height:0.9; font-variant-numeric:tabular-nums }
.lp-big span{ font-size:16px; font-weight:700 }
.lp-stack{ display:flex; height:14px; border-radius:6px; overflow:hidden; gap:2px }
.lp-stack.lp-none{ background:var(--b-chip-bg) }
.lp-stack span{ height:100%; display:block; min-width:2px }
.lp-chips{ display:flex; flex-wrap:wrap; gap:8px }
.lp-chip{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; gap:8px; align-items:center; font-size:13px; height:32px; padding:0 12px 0 10px; border-radius:999px; background:var(--b-chip-bg); color:#fff; white-space:nowrap }
.lp-chip:hover{ background:var(--b-chip-on) }
.lp-chip[aria-pressed="true"]{ background:var(--b-chip-on); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.55) }
.lp-chip:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }
.lp-chip i{ width:10px; height:10px; border-radius:3px; display:block }
.lp-chip .l{ font-weight:600 }
.lp-chip b{ font-weight:800; font-variant-numeric:tabular-nums }
.lp-foot{ font-size:12px; opacity:0.75 }

.lp-box{ background:#fff; border-radius:var(--b-radius-card); padding:20px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--b-shadow-card); height:100% }
.lp-bh{ display:flex; align-items:center; gap:12px }
.lp-bi{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.lp-bi.teal{ background:var(--b-select-row); color:var(--teal-dark) }
.lp-bi.lp-warn{ background:var(--b-warn-bg); color:var(--b-warn-ink) }
.lp-bn{ display:flex; align-items:baseline; gap:6px; min-width:0 }
.lp-bn b{ font-size:34px; font-weight:800; letter-spacing:-0.035em; line-height:1; font-variant-numeric:tabular-nums }
.lp-bn span{ font-size:14px; font-weight:700; color:var(--b-muted) }
.lp-bk{ font-size:13px; font-weight:700; color:var(--b-ink) }
.lp-bc{ font-size:12.5px; color:var(--b-muted); line-height:1.45 }
.lp-blk{ all:unset; cursor:pointer; font-size:13px; font-weight:700; margin-top:auto; color:var(--teal-dark); text-decoration:underline; text-underline-offset:2px; align-self:flex-start; min-height:24px; display:inline-flex; align-items:center }
.lp-blk.lp-warn{ color:var(--b-warn-ink) }
.lp-blk:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.lp-money{ display:flex; gap:18px; font-size:13px; color:var(--b-text); flex-wrap:wrap }
.lp-money b{ font-weight:800; color:var(--b-ink) }
.lp-line{ all:unset; box-sizing:border-box; cursor:pointer; display:none; align-items:center; gap:12px; background:#fff; border-radius:var(--b-radius-card); padding:14px 16px; box-shadow:var(--b-shadow-card); color:var(--b-ink); width:100%; min-height:44px }
.lp-line .lp-bi{ width:36px; height:36px }
.lp-line .t{ flex-grow:1; font-size:14px; font-weight:700 }
.lp-line > svg{ color:var(--b-muted); flex-shrink:0 }
.lp-line[aria-pressed="true"]{ box-shadow:var(--b-shadow-card), inset 0 0 0 1.5px var(--orange) }
.lp-line:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
/* Region bars in the Properties box */
.lp-rgs{ display:flex; flex-direction:column; gap:7px }
.lp-rg{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0, 1fr) 40px 26px; gap:6px; align-items:center; font-size:12px }
.lp-rg > span:first-child{ display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--b-text); min-width:0 }
.lp-rg i{ width:8px; height:8px; border-radius:2px; flex-shrink:0; display:block }
.lp-rg b{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums }
.lp-rg .lp-mbar{ width:40px; height:6px }

/* ---------- filter bar ---------- */
.lp-bar{ background:#fff; border-radius:var(--b-radius-card); box-shadow:var(--b-shadow-card); padding:12px 14px; display:flex; flex-direction:column; gap:10px }
.lp-bl{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.lp-bl.two{ gap:16px }
.lp-more{ display:contents }
.lp-srow{ display:contents }
.lp-seg{ display:flex; background:var(--b-surface-2); border-radius:10px; padding:4px; gap:2px; flex-shrink:0 }
.lp-seg button{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:8px; font-size:13.5px; font-weight:600; white-space:nowrap; color:var(--b-text) }
.lp-seg button:hover{ background:rgba(255,255,255,0.55) }
.lp-seg button .n{ font-size:12px; font-weight:600; color:var(--b-muted) }
.lp-seg button[aria-pressed="true"]{ background:var(--teal-deep); color:#fff; font-weight:700 }
.lp-seg button[aria-pressed="true"] .n{ color:rgba(255,255,255,0.75) }
.lp-seg button:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:1px }
.lp-search{ display:flex; align-items:center; gap:8px; height:44px; padding:0 12px; border-radius:var(--b-radius-ctl); background:#fff; box-shadow:inset 0 0 0 1.5px var(--b-line-strong); color:var(--b-muted); width:300px; flex-shrink:0; position:relative }
.lp-search:focus-within{ box-shadow:inset 0 0 0 1.5px var(--teal-dark) }
/* Session 333 (Daniel, 13 October 2026: "There is a weird secondary box around the cell when I click it. I want it to look more like
   the other cells"): the input inside the search box drew its own ring too (.lp :focus-visible's outline and the base input:focus
   ring), a second box inside the first. The box's own ring is the one outline, as on the "All types" drop-down: 1.5px, teal, radius 10. */
.lp-search input:focus, .lp-search input:focus-visible{ outline:none; box-shadow:none; border:0 }
.lp-search input{ all:unset; font-size:14px; color:var(--b-ink); flex-grow:1; min-width:0; height:100% }
.lp-search input::placeholder{ color:var(--b-muted) }
.lp-skey{ font-size:11px; font-weight:700; color:var(--b-muted); padding:1px 6px; border-radius:5px; box-shadow:inset 0 0 0 1px var(--b-line) }
.lp-sclear{ all:unset; cursor:pointer; font-size:18px; line-height:1; color:var(--b-muted); width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:6px }
.lp-sclear:hover{ color:var(--b-ink); background:var(--b-surface-2) }
.lp .lp-sel{ height:44px; width:auto; padding:0 34px 0 14px; border-radius:var(--b-radius-ctl); border:0; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b747b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; box-shadow:inset 0 0 0 1.5px var(--b-line-strong); font-size:14px; font-weight:500; color:var(--b-ink); cursor:pointer; -webkit-appearance:none; appearance:none; max-width:260px }
.lp .lp-sel:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--teal-dark) }
.lp .lp-sel:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.lp .lp-date{ height:44px; width:auto; padding:0 12px; border-radius:var(--b-radius-ctl); border:0; box-shadow:inset 0 0 0 1.5px var(--b-line-strong); font-size:14px; color:var(--b-ink); background:#fff }
.lp-dates{ display:flex; gap:8px; align-items:center }
/* a select is as wide as its label, as in the mockups, never as wide as its longest option */
.lp .lp-bar .lp-sel{ max-width:180px }
.lp-dates[hidden]{ display:none }
.lp-check{ display:flex; align-items:center; gap:8px; height:44px; font-size:14px; font-weight:500; color:var(--b-ink); white-space:nowrap; cursor:pointer }
.lp-check input{ width:18px; height:18px; margin:0; accent-color:var(--teal-dark); cursor:pointer }
.lp-count{ font-size:13px; font-weight:600; color:var(--b-muted); white-space:nowrap }
.lp-fbtn{ all:unset; box-sizing:border-box; cursor:pointer; width:44px; height:44px; flex-shrink:0; border-radius:var(--b-radius-ctl); background:#fff; box-shadow:inset 0 0 0 1.5px var(--b-line-strong); display:none; align-items:center; justify-content:center; gap:6px; color:var(--b-ink); font-size:14px; font-weight:700 }
.lp-fbtn.txt{ width:auto; padding:0 12px }
.lp-fbtn[aria-expanded="true"]{ box-shadow:inset 0 0 0 1.5px var(--teal-dark); color:var(--teal-deep) }
.lp-fbtn:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.lp-on{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 6px 0 12px; border-radius:999px; background:var(--b-warn-bg); color:var(--b-warn-ink); font-size:13px; font-weight:700; white-space:nowrap }
.lp-on button{ all:unset; cursor:pointer; width:24px; height:24px; border-radius:99px; display:flex; align-items:center; justify-content:center }
.lp-on button:hover{ background:rgba(154,74,14,0.12) }
.lp-on button:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:1px }
.lp-on[hidden]{ display:none }
.lp-sorts{ display:none }

/* ---------- table ---------- */
.lp-tbl{ background:#fff; border-radius:var(--b-radius-card); box-shadow:var(--b-shadow-card); overflow:clip }
.lp-scroll{ min-width:0 }
.lp-thead{ display:grid; gap:14px; padding:0 20px; background:var(--b-surface-2); position:sticky; top:calc(var(--hdrH) + var(--bandH)); z-index:3; border-radius:var(--b-radius-card) var(--b-radius-card) 0 0 }
.lp-th{ all:unset; box-sizing:border-box; padding:11px 0; font-size:12.5px; font-weight:600; color:var(--b-text); white-space:nowrap; text-align:left; display:flex; align-items:center; gap:4px; min-width:0 }
button.lp-th{ cursor:pointer }
button.lp-th:hover{ color:var(--b-ink) }
.lp-th.lp-r{ justify-content:flex-end; text-align:right }
.lp-th.sorted{ color:var(--b-ink) }
.lp-th .ar{ font-size:9px }
.lp-th:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
.lp-tr{ display:grid; gap:14px; align-items:center; padding:0 20px; min-height:58px; border-top:1px solid var(--b-line); font-size:14px; color:var(--b-ink); background:#fff; cursor:pointer }
.lp-tr:first-child{ border-top:0 }
.lp-tr:hover{ background:var(--b-surface-2) }
.lp-tr:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
.lp-tr > span, .lp-tr > div{ min-width:0; display:flex; align-items:center }
.lp-tr .lp-r{ justify-content:flex-end; text-align:right }
.lp-num{ font-variant-numeric:tabular-nums }
.lp-bold{ font-weight:700; font-variant-numeric:tabular-nums }
.lp-soft{ color:var(--b-text) }
.lp-dash{ color:var(--b-line-strong); font-weight:700 }
.lp-empty{ padding:36px 20px; text-align:center; color:var(--b-muted); font-size:14px; border-top:1px solid var(--b-line) }
.lp-empty b{ display:block; color:var(--b-ink); font-size:15px; margin-bottom:4px }
.lp-empty .lp-btn{ display:inline-flex; margin-top:14px }
.lp-loading{ padding:36px 20px; text-align:center; color:var(--b-muted); font-size:14px }
.lp-err:empty{ display:none }
.lp-foot2{ font-size:12.5px; color:var(--b-muted); line-height:1.5 }
.lp-pager{ display:flex; align-items:center; justify-content:center; gap:14px; font-size:13px; font-weight:600; color:var(--b-text) }
.lp-pager[hidden]{ display:none }
.lp-pager .lp-btn[disabled]{ opacity:0.45; cursor:default }

/* names that wrap to two lines, never cut mid-word */
.lp-nm{ display:flex; align-items:center; gap:12px; min-width:0 }
.lp-nm2{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.lp-two{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; overflow-wrap:normal; word-break:normal }
.lp-two b{ font-weight:700 }
.lp-two .rest{ color:var(--b-text) }
.lp-sub{ font-size:12.5px; color:var(--b-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lp-av{ width:34px; height:34px; border-radius:99px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800 }
.lp-av.sm{ width:30px; height:30px; font-size:11px }
.lp-av.lg{ width:40px; height:40px }
.lp-ell{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.lp-link{ color:var(--teal-dark); font-weight:600 }
.lp-link:hover{ color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px }

/* tags */
.lp-tag{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap; flex-shrink:0 }
.lp-tag.sm{ height:24px; font-size:12px }
.lp-tag.stale, .lp-tag.lp-warn{ background:var(--b-warn-bg); color:var(--b-warn-ink) }
.lp-tag.same{ background:var(--b-yes-bg); color:var(--b-yes-ink); height:24px; font-size:12px; font-weight:800 }
.lp-tag.today, .lp-tag.teal{ background:var(--b-select-row); color:var(--teal-deep) }
.lp-tag.grey{ background:var(--b-surface-2); color:var(--b-text) }
.lp-tag.pend{ background:var(--b-yes-bg); color:var(--b-yes-ink) }
.lp-mbar{ width:70px; height:6px; border-radius:99px; background:var(--b-surface-2); overflow:hidden; display:block; flex-shrink:0 }
.lp-mbar > span{ display:block; height:100%; background:var(--teal-dark); border-radius:99px }

/* ---------- Clients ---------- */
.lp-cl .lp-thead, .lp-cl .lp-tr{ grid-template-columns:minmax(260px, 340px) 150px 180px 110px 120px; justify-content:start }   /* session 336 */
.lp-cl.st .lp-thead, .lp-cl.st .lp-tr{ grid-template-columns:minmax(240px, 340px) 96px 150px 180px 110px 120px; justify-content:start }
.lp-flex{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--b-text) }
.lp-dots{ display:flex; gap:3px }
.lp-dots i{ width:8px; height:8px; border-radius:99px; background:var(--b-line-strong); display:block }
.lp-dots i.on{ background:var(--teal-dark) }
.lp-mixed{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--b-warn-ink) }
.lp-mixed i{ width:8px; height:8px; border-radius:99px; background:var(--orange); display:block }
.lp-ytd{ display:flex; align-items:center; gap:10px; width:100%; justify-content:flex-end }
.lp-ytd b{ font-weight:700; font-variant-numeric:tabular-nums; min-width:64px; text-align:right }

/* ---------- Properties ---------- */
.lp-pr .lp-thead, .lp-pr .lp-tr{ grid-template-columns:minmax(200px, 2.2fr) minmax(150px, 200px) minmax(120px, 1.2fr) minmax(130px, 170px) 80px 90px 130px }   /* session 406: How it's booked */
.lp-pr.st .lp-thead, .lp-pr.st .lp-tr{ grid-template-columns:minmax(200px, 2.2fr) minmax(150px, 200px) minmax(120px, 1.2fr) minmax(130px, 170px) 80px 90px 96px 130px }
.lp-pn{ display:flex; align-items:center; min-width:0; gap:8px }
.lp-pn .lp-tag{ height:22px; padding:0 8px; font-size:11.5px }
.lp-rgn{ display:inline-flex; align-items:center; gap:8px; color:var(--b-text); min-width:0 }
.lp-rgn i{ width:9px; height:9px; border-radius:3px; flex-shrink:0; display:block }
.lp-rgn span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ---------- Appointments ---------- */
.lp-ap .lp-thead, .lp-ap .lp-tr{ grid-template-columns:minmax(240px, 330px) minmax(140px, 180px) minmax(250px, 262px) minmax(170px, 240px) 80px 116px; gap:12px; justify-content:start }   /* session 336 */
.lp-ap .lp-tr{ min-height:66px; padding-top:8px; padding-bottom:8px }
.lp-day{ padding:10px 20px; border-top:1px solid var(--b-line); background:var(--b-day-bg); font-size:13px; font-weight:700; color:var(--teal-deep) }
.lp-day:first-child{ border-top:0 }
.lp-day span{ font-weight:600; color:var(--b-muted) }
.lp-svc{ display:inline-flex; align-items:center; gap:8px; min-width:0 }
.lp-svc > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lp-svc .svp-dot{ width:9px; height:9px; border-radius:99px; flex-shrink:0; display:inline-block }
.lp-svc .svp-dot.ring{ box-shadow:inset 0 0 0 1px rgba(22,24,26,0.28) }
.lp-win{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.lp-wl{ font-size:12.5px; color:var(--b-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lp-wl b{ color:var(--b-ink); font-weight:700 }
.lp-wb{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.lp-wb > span:first-child{ display:flex; align-items:center; gap:8px }
.lp-wbar{ width:96px; height:8px; border-radius:99px; background:var(--b-surface-2); overflow:hidden; display:block; flex-shrink:0 }
.lp-wbar > span{ display:block; height:100%; background:var(--teal-dark); border-radius:99px }
.lp-wbar.over > span{ background:var(--orange) }
.lp-wbar.open{ background:repeating-linear-gradient(90deg, var(--b-surface-2) 0 6px, transparent 6px 10px) }
.lp-wt{ font-size:12px; font-weight:700; color:var(--b-text); white-space:nowrap }
.lp-wt.over{ color:var(--b-warn-ink) }
.lp-cln{ display:flex; align-items:center; gap:10px; min-width:0 }
.lp-cln > span:last-child{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3 }   /* session 336: a long name or two cleaners wrap, never cut */
.lp-una{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:999px; background:var(--b-warn-bg); color:var(--b-warn-ink); font-size:12.5px; font-weight:800; white-space:nowrap }
.lp-pc{ display:flex; flex-direction:column; align-items:flex-end; gap:2px }
.lp-pc b{ font-weight:800; font-variant-numeric:tabular-nums }
.lp-pc small{ font-size:12px; color:var(--b-muted); font-variant-numeric:tabular-nums }
.lp-iss{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--teal-dark); white-space:nowrap; min-height:24px }
.lp-iss:hover{ color:var(--teal-deep) }
.lp-iss:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.lp-issc{ justify-content:flex-end; flex-wrap:wrap; gap:3px }
.lp-hist{ display:flex; align-items:flex-end; gap:6px; height:100px; --hist-h:64px }
.lp-hist > div{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; min-width:0 }
.lp-hist .c{ font-size:11px; font-weight:700; opacity:0.85 }
.lp-hist .b{ width:100%; max-width:34px; border-radius:4px 4px 2px 2px; background:var(--teal-light); display:block }
.lp-hist .b.z{ background:var(--b-chip-bg) }
.lp-hist .h{ font-size:11px; opacity:0.75; white-space:nowrap }
.lp-hist > .q .h{ visibility:hidden }
.lp-histk{ font-size:12px; opacity:0.8; margin-top:-4px }

/* ---------- 761 to 1179: the dark panel full width, the boxes side by side, the table scrolls in its own box ---------- */
@media (max-width:1179px){
  .lp-band > .lp-c6{ grid-column:span 12 }
  .lp-band > .lp-c3{ grid-column:span 6 }
  .lp-scroll{ overflow-x:auto }
  .lp-thead{ position:static }
  .lp-cl .lp-scroll > div{ min-width:900px }
  .lp-cl.st .lp-scroll > div{ min-width:1000px }
  .lp-pr .lp-scroll > div{ min-width:1000px }
  .lp-pr.st .lp-scroll > div{ min-width:1110px }
  .lp-ap .lp-scroll > div{ min-width:1060px }
}

/* ---------- the phone (the shell's own body.phone line, 760 and under) ---------- */
@media (max-width:760px){
  .lp{ padding:18px 16px 32px 16px; gap:16px }
  .lp .lp-lg{ display:none }
  .lp .lp-sm{ display:inline }
  .lp-top{ align-items:flex-end; justify-content:space-between; gap:12px }
  .lp-ico{ display:none }
  .lp-tt h1{ font-size:30px }
  .lp-tt span{ font-size:13px }
  .lp-top .lp-grow{ display:none }
  .lp-btn{ width:44px; padding:0; justify-content:center }
  .lp-add{ padding:0 14px; gap:6px; box-shadow:none }
  .lp-band{ display:flex; flex-direction:column; gap:16px }
  .lp-dark{ padding:18px 20px }
  .lp-big b{ font-size:44px }
  .lp-band > .lp-c3{ display:none }
  .lp-line{ display:flex }
  .lp-hist{ height:62px; gap:4px; --hist-h:44px }
  .lp-hist > div{ gap:3px }
  .lp-hist .c{ display:none }
  .lp-hist .b{ max-width:none; border-radius:3px }
  .lp-hist .h{ font-size:10px }
  .lp-bar{ background:none; box-shadow:none; padding:0; gap:16px }
  .lp-bl{ gap:10px; flex-wrap:wrap }
  .lp-bl .lp-grow{ display:none }
  .lp-bl > .lp-more, .lp-bl > .lp-count, .lp-bl > .lp-dates{ flex-basis:100% }
  .lp-srow{ display:flex; gap:10px; flex-basis:100%; min-width:0 }
  /* Appointments: two lines on a desktop, one column on a phone in the mockup's order */
  .lp-ap .lp-bl{ display:contents }
  .lp-ap .lp-seg{ order:1 } .lp-ap .lp-dates{ order:2 } .lp-ap .lp-srow{ order:3 } .lp-ap .lp-on{ order:4; align-self:flex-start }
  .lp-ap .lp-more.lp-msel{ order:5 } .lp-ap .lp-more.lp-mchk{ order:6 } .lp-ap .lp-count{ order:7 }
  .lp-seg{ width:100% }
  .lp-seg button{ flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; gap:0; height:44px; padding:0 4px; font-size:13px }
  .lp-seg button .n{ font-size:11px }
  .lp-dates{ width:100% }
  .lp .lp-dates .lp-date{ flex:1 1 0; min-width:0 }
  .lp-search{ width:auto; flex:1 1 0; min-width:0 }
  .lp-skey{ display:none }
  .lp-fbtn{ display:flex }
  .lp-count{ display:none }
  .lp-bar.lp-open .lp-count{ display:block }
  .lp-more{ display:none }
  .lp-bar.lp-open .lp-more{ display:flex; flex-direction:column; align-items:stretch; gap:10px; background:#fff; border-radius:var(--b-radius-card); box-shadow:var(--b-shadow-card); padding:14px }
  .lp .lp-bar .lp-more .lp-sel{ max-width:none; width:100% }
  .lp-sorts{ display:flex; flex-wrap:wrap; gap:6px; align-items:center }
  .lp-sorts > span{ flex-basis:100%; font-size:12.5px; font-weight:700; color:var(--b-muted) }
  .lp-sorts .lp-th{ height:44px; padding:0 12px; border-radius:10px; background:var(--b-surface-2); font-size:13px }
  .lp-sorts .lp-th.sorted{ background:var(--teal-deep); color:#fff }
  .lp-thead{ display:none }
  .lp-scroll{ overflow:visible }
  .lp-scroll > div{ min-width:0 !important }
  .lp-day{ padding:10px 16px }
  .lp-empty{ padding:28px 16px }

  /* stacked cards: every value the desktop row shows */
  .lp-card{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-top:1px solid var(--b-line); color:var(--b-ink); min-height:44px; cursor:pointer; background:#fff }
  .lp-card:first-child{ border-top:0 }
  .lp-day + .lp-card{ border-top:1px solid var(--b-line) }
  .lp-card:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
  .lp-card:active{ background:var(--b-surface-2) }
  .lp-cr{ display:flex; align-items:center; gap:12px; min-width:0 }
  .lp-cm{ display:flex; flex-direction:column; gap:3px; flex-grow:1; min-width:0 }
  .lp-cm .lp-two{ font-size:15px; line-height:1.3 }
  .lp-cm .lp-two .rest{ font-weight:500 }
  .lp-cm small{ font-size:12.5px; color:var(--b-muted) }
  .lp-cv{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0 }
  .lp-cv b{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums }
  .lp-cv small{ font-size:11.5px; color:var(--b-muted); text-align:right }
  .lp-cb{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--b-text); flex-wrap:wrap }
  .lp-cb b{ font-weight:700; color:var(--b-ink) }
  .lp-cb .end{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; margin-left:auto }
  .lp-strip{ width:10px; height:40px; border-radius:4px; flex-shrink:0; background:var(--b-line-strong) }
  .lp-card.cl .lp-cb{ padding-left:52px }
  .lp-card.pr .lp-cb{ padding-left:22px }
  .lp-card.ap .lp-cb{ padding-left:74px; flex-direction:column; align-items:flex-start }
  .lp-card.ap .lp-cm .lp-two{ font-size:14.5px }
  .lp-st{ width:62px; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-start }
  .lp-st b{ font-size:15px; font-weight:800; letter-spacing:-0.02em }
  .lp-st small{ font-size:11px; color:var(--b-muted); font-weight:600 }
  .lp-card .lp-wl{ white-space:normal }
  .lp-card .lp-iss{ min-height:44px }
  .lp-pager{ flex-wrap:wrap }
  /* 44px touch targets: the chips keep the mockup's 32px look with a taller tap area; the client link grows its own */
  .lp-chip{ position:relative }
  .lp-chip::after{ content:""; position:absolute; left:0; right:0; top:-6px; bottom:-6px }
  .lp-card small.lp-ell{ overflow:visible; white-space:normal }
  .lp-card .pclient{ display:inline-block; padding:14px 0; margin:-14px 0; white-space:normal }
}

/* ---------- the phone top bar on these pages: menu and name (session 408: no search) ---------- */
.top-name{ display:none }   /* session 408: the search button (.top-sbtn) left with the top bar's search */
body.phone.lp-top{ --hdrH:56px }
body.phone.lp-top .top-wrap{ padding:0 8px 0 4px; gap:8px }
body.phone.lp-top .burger{ width:44px; height:44px; border:0; border-radius:10px }
body.phone.lp-top .burger svg{ width:22px; height:22px }
body.phone.lp-top .top-name{ display:block; font-weight:700; font-size:16px; color:#fff; flex-grow:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Inter','Segoe UI',system-ui,sans-serif }
body.phone.lp-top .top-exec{ margin-left:0; min-width:44px; min-height:44px; justify-content:center }

/* Session 296: Clients, Missing email. The toggle sits beside the status buttons; a row with a suggestion says so under the name. */
.lp-seg-miss{ margin-left:8px }
.cl-nmw{ display:flex; flex-direction:column; min-width:0 }
.cl-sugtag{ display:block; font-size:12px; font-weight:600; color:var(--teal-dark); line-height:1.3; margin-top:2px }

/* Session 303: the Dashboard's deep clean icon (shell.js mhDeepCleanIcon) on the Appointments list and the Property page:
   red past due, yellow due soon (a dark edge keeps it 3:1 on white), green on track, grey no deep clean yet. */
.mh-dc{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none; border-radius:50%; color:#fff; vertical-align:-4px; margin-right:6px; box-sizing:border-box; cursor:pointer; outline:none }
.mh-dc svg{ width:12px; height:12px; fill:currentColor; stroke:none }
.mh-dc:focus-visible{ outline:2px solid #1d6e77; outline-offset:1px }
.mh-dc.dc-past_due{ background:#c43d2b }
.mh-dc.dc-due_soon{ background:#f5c518; color:#3d2e00; box-shadow:inset 0 0 0 1.5px #8a6a00 }
.mh-dc.dc-on_track{ background:#2e9c7c }
.mh-dc.dc-none{ background:#79828a }
.lp-dcw{ display:flex; align-items:flex-start; min-width:0 }
.lp-dcw .mh-dc{ margin-top:1px; margin-right:7px }
.lp-dcw > .lp-nm2, .lp-dcw > .lp-two{ min-width:0; flex:1 1 auto }

/* Session 322: the QC badge on a Quality Check's row in Appointments (its grade, Scheduled or Not graded). */
.ap-qcb{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap;
  background:var(--pa-grey-100, #E9ECEE); color:var(--pa-grey-700, #4D545A) }
.ap-qcb-ok{ background:#DCEFF0; color:#144D54 }
.ap-qcb-wait{ background:#FDF0D8; color:#7A5312 }

/* ============================================================
   Session 336: one page for the four core tools, Clients, Properties, Staff and Appointments.
   Daniel, 13 October 2026: "These are my four CORE tools. They're all a different width. I need consistency. I think they
   should all be ~ as wide as Staff. Clients and Appointments are so hard to read the way they're setup."
   - ONE container (shell.js puts core-page on #page for the four lists): Staff's own .wrap values, written once here.
     --wrap-max (min(1680px, 100%)) with 40px each side: 1132px of content at 1440, 1600px from 1920 up, centred, never
     stretched to the screen's edge. The summary cards, the filter bar and the list all sit inside it.
   - ONE skeleton: the title row (LP.titleRow: title, count, buttons), the summary cards where a page has them, one white
     filter-and-search bar, then the list; 24px between them, as .lp already had.
   - ONE table look: the lists' header (grey band, 12.5px, sentence case), 58px rows, the grey hover, the teal focus ring,
     the header staying in view under the top bar while the list scrolls. Staff's table takes it through .core-tbl (the
     platform's teal row hover, tokens.css, skips .core-tbl).
   - Columns sized to what they hold: no column grows to fill empty space; what is left over stays empty at the row's end.
   ============================================================ */
body.core-top{ background:var(--b-canvas) }
/* Session 407 (Part A, Daniel, 27 October 2026: "consistency around the width of the pages"): one frame, the Assign page's numbers (tokens.css
   --mh-frame-max 1760, --mh-frame-side 32px), for the four core lists, the four Appointments tabs and Owner holds. Top and bottom padding unchanged. */
#page.core-page{ max-width:var(--mh-frame-max); margin:0 auto; box-sizing:border-box; padding:calc(var(--hdrH) + var(--bandH) + var(--s6)) var(--mh-frame-side) 72px; min-height:100vh }
/* the calendar tabs inside it drop their own cap and padding (Calendar health keeps its own frame: it is not a core page) */
#page.core-page > .mhcal.cl-full{ max-width:none; padding:0 }
/* the Clients list's own 1480 cap (session 355, --clx-wrap-max) gives way to the frame: the four core lists are one width (Part A) */
#page.core-page > .lp.clx-page{ max-width:none }
body.phone #page.core-page{ padding-left:16px; padding-right:16px }
#page.core-page > .lp{ padding:0 }
/* Staff in the same skeleton: its own blocks stacked with the lists' 24px, the old per-block margins taken out */
.core-stack{ display:flex; flex-direction:column; gap:24px; min-width:0; font-family:'Inter','Segoe UI',system-ui,sans-serif }
.core-stack > .lp-top{ margin:0 }
.core-stack .lp-sm{ display:none }
.core-stack #stErrslot:empty, .core-stack #stRcQueueBadge:empty{ display:none }
.core-stack #stRcQueueBadge .warn{ margin:0 }
.core-stack .avail-fresh{ margin:-12px 0 0; font-size:12.5px; color:var(--b-muted) }
.core-stack .avail-fresh:empty{ display:none }
.core-stack > .card{ margin-top:0 !important }
.core-bar{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 12px }
.core-bar .chips{ margin-top:0 }
.core-bar .lp-search{ width:300px }
/* the list's sections (Full time, Part time...) and their tables */
.core-stack #stSections{ display:flex; flex-direction:column; gap:24px }
.core-stack .staff-section .card-flush{ border-radius:0 0 var(--b-radius-card) var(--b-radius-card); box-shadow:var(--b-shadow-card) }
@media (min-width:1180px){ .core-stack .staff-section .card-flush{ overflow:visible } }   /* a sideways-scroll box would stop the header staying in view */
table.core-tbl{ width:100%; table-layout:auto; margin-top:0; border-collapse:separate; border-spacing:0 }
table.core-tbl thead th{ position:sticky; top:calc(var(--hdrH) + var(--bandH)); z-index:3; background:var(--b-surface-2); box-shadow:none;
  font-size:12.5px; font-weight:600; color:var(--b-text); text-transform:none; letter-spacing:0; padding:11px 14px 11px 0 }
table.core-tbl thead th:first-child{ padding-left:20px }
table.core-tbl thead th.sorted{ color:var(--b-ink) }
table.core-tbl tbody td{ padding:8px 14px 8px 0; height:58px; border-bottom:0; border-top:1px solid var(--b-line); font-size:14px; color:var(--b-ink) }
table.core-tbl tbody td:first-child{ padding-left:20px }
table.core-tbl tbody tr:first-child td{ border-top:0 }
table.core-tbl tbody tr{ background:#fff; transition:none; transform:none }
table.core-tbl tbody tr:hover{ background:var(--b-surface-2) }
table.core-tbl tbody tr:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
table.core-tbl .pname{ font-weight:700; color:var(--b-ink) }
/* Staff's columns, sized to what they hold (were shares of the width: 20%, 10%...); c-fill takes what is left, at the end */
#page.core-page .s-staff col.c-name{ width:260px } #page.core-page .s-staff col.c-lang{ width:100px } #page.core-page .s-staff col.c-score{ width:120px }
#page.core-page .s-staff col.c-cert{ width:110px } #page.core-page .s-staff col.c-target{ width:100px } #page.core-page .s-staff col.c-hours{ width:120px }
#page.core-page .s-staff col.c-avail{ width:200px } #page.core-page .s-staff col.c-start{ width:100px } #page.core-page .s-staff col.c-fill{ width:auto }
table.core-tbl th.c-fill, table.core-tbl td.c-fill{ padding:0 }
@media (max-width:760px){
  .core-stack .lp-lg{ display:none }
  .core-stack .lp-sm{ display:inline }
  .core-bar .lp-search{ width:100%; flex:1 1 100% }
}
/* (last in the file, so it wins over the table rules above) under 1180, as the other lists: the table keeps its columns and scrolls sideways in its own box, the header not sticky */
@media (max-width:1179px){
  .core-stack .staff-section .card-flush{ overflow-x:auto }
  table.core-tbl{ min-width:1110px }
  table.core-tbl thead th{ position:static }
}

/* ============================================================
   Session 355: the Clients list (briefs/session-355-brief.md Part 5; the approved ClientsList mockup's style attributes,
   copied as classes; its values are tokens.css "Session 355"). The page keeps the shared title row and the two white boxes.
   ============================================================ */
.lp.clx-page{ max-width:var(--clx-wrap-max); width:100%; margin:0 auto; box-sizing:border-box }

/* ============================================================
   Session 360 (briefs/session-360-brief.md; Daniel's approved "Clients Filter Redesign", its values named in tokens.css "Session 360"):
   one dark band, then one white card from the toolbar to the last row. One button style, one menu style, one chip style.
   ============================================================ */
.lp.clx-page{ gap:10px; padding-top:20px }   /* the table's header as high on the page as it can be (the brief's 420 px) */
/* the band: the count, the property mix, the two stat buttons, in one row that wraps */
.clx-band{ background:var(--clx-band-bg); border-radius:20px; padding:20px 24px; color:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:24px; container:clxband / inline-size }
.clx-band:empty{ display:none }
.clx-bcount{ display:flex; align-items:center; gap:12px; flex:0 0 auto }
.clx-bcount > b{ font-size:52px; font-weight:800; letter-spacing:-2px; line-height:1; font-variant-numeric:tabular-nums }
.clx-bcount > div{ display:flex; flex-direction:column; gap:2px }
.clx-bcount .t{ font-size:16px; font-weight:700; line-height:1.2 }
.clx-bcount .s{ font-size:13px; color:var(--clx-band-sub); line-height:1.2 }
.clx-bdiv{ width:1px; align-self:stretch; background:var(--clx-band-line); flex:0 0 1px }
.clx-bmix{ flex:1 1 480px; min-width:0; display:flex; flex-direction:column; gap:6px }
.clx-bmh{ display:flex; justify-content:space-between; gap:12px; font-size:12px; line-height:16px }
.clx-bmh > span:first-child{ font-weight:600; color:var(--clx-band-lbl) }
.clx-bmh .clx-bmr{ color:var(--clx-band-sub); text-align:right }
.clx-bar{ display:flex; gap:3px; height:10px }
.clx-seg{ all:unset; box-sizing:border-box; display:block; height:10px; min-width:8px; border-radius:3px; cursor:pointer; transition:opacity .12s }
.clx-seg:hover{ filter:brightness(1.12) }
.clx-seg.str, .clx-leg i.str{ background:var(--clx-str-bar) } .clx-seg.mtr, .clx-leg i.mtr{ background:var(--clx-mtr-bar) }
.clx-seg.coliving, .clx-leg i.coliving{ background:var(--clx-coliving-bar) } .clx-seg.res, .clx-leg i.res{ background:var(--clx-res-bar) }
.clx-seg.com, .clx-leg i.com{ background:var(--clx-com-bar) } .clx-seg.one, .clx-leg i.one{ background:var(--clx-one-bar) }
.clx-seg.none{ flex:1; background:var(--clx-band-line); cursor:default }
.clx-seg.dim, .clx-legb.dim{ opacity:.35 }
.clx-leg{ display:flex; flex-wrap:wrap; gap:2px 6px; margin-left:-8px }
.clx-legb{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; flex-direction:column; align-items:flex-start; padding:2px 8px; border-radius:8px; border:1px solid transparent; color:#fff; transition:opacity .12s }
.clx-legb .l1{ display:flex; align-items:center; gap:6px }   /* the square and the number, the label under them (as the hero had them) */
.clx-legb i{ width:10px; height:10px; border-radius:3px; flex:0 0 10px }
.clx-legb b{ font-size:16px; font-weight:800; line-height:19px; font-variant-numeric:tabular-nums }
.clx-legb .l2{ font-size:12px; color:var(--clx-band-sub); line-height:15px; white-space:nowrap }
.clx-legb:hover{ background:var(--clx-band-hover) }
.clx-legb[aria-pressed="true"]{ background:var(--clx-leg-on-bg); border-color:var(--clx-leg-on-line) }
.clx-legb:focus-visible, .clx-stat:focus-visible{ outline:2px solid var(--clx-cal); outline-offset:2px }
.clx-bstats{ display:flex; gap:12px; flex:0 0 auto }
.clx-stat{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:4px; min-width:190px; padding:12px 16px; border-radius:14px; background:var(--clx-stat-bg); border:1px solid var(--clx-band-line); color:#fff }
.clx-stat:hover{ background:var(--clx-band-hover) }
.clx-stat[aria-pressed="true"]{ background:var(--clx-leg-on-bg); border-color:var(--clx-leg-on-line) }
.clx-sn{ display:flex; align-items:center; gap:8px }
.clx-sn b{ font-size:24px; font-weight:800; line-height:1.1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums }
.clx-sn .ic{ display:flex } .clx-sn .ic.cal{ color:var(--clx-cal) } .clx-sn .ic.clock{ color:var(--clx-clock) }
.clx-sl{ display:flex; align-items:center; gap:4px; font-size:12px; line-height:16px; color:var(--clx-band-sub); white-space:nowrap }
/* the card: the toolbar, the chosen filters, the count line, the table */
.clx-tb{ padding:16px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; position:relative }
.clx-tb .lp-search{ flex:1 1 260px; min-width:200px; width:auto; height:42px }
.clx-tb .lp-seg{ padding:3px }   /* 42 px, the toolbar's one height */
.clx-dds{ display:flex; flex-wrap:wrap; gap:10px }
.clx-dd{ position:relative }
.clx-ddb{ all:unset; box-sizing:border-box; cursor:pointer; height:42px; padding:0 12px 0 14px; border-radius:10px; border:1px solid var(--clx-ctl-line); background:#fff; color:var(--clx-ctl-ink); font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; white-space:nowrap }
.clx-ddb:hover{ background:var(--clx-sel-row) }
.clx-ddb:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.clx-ddb.on{ border:1.5px solid var(--clx-dark); background:var(--clx-on-bg); color:var(--clx-dark); font-weight:700; padding:0 11.5px 0 13.5px }
.clx-ddb[aria-expanded="true"] svg{ transform:rotate(180deg) }
.clx-ddl{ overflow:hidden; text-overflow:ellipsis }
.clx-badge{ background:var(--clx-badge-bg); color:var(--clx-badge-ink); font-size:11px; font-weight:700; line-height:16px; padding:1px 7px; border-radius:999px }
.clx-menu{ position:absolute; top:calc(100% + 8px); left:0; z-index:40; width:310px; background:#fff; border:1px solid var(--clx-ctl-line); border-radius:14px; box-shadow:var(--clx-menu-shadow); padding:8px; box-sizing:border-box }
.clx-menu.clx-mr{ left:auto; right:0 }
.clx-mh{ font-size:12px; font-weight:600; color:var(--clx-muted); padding:6px 8px 6px }
.clx-mo{ all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; font-size:14px; color:var(--clx-ink); line-height:18px }
.clx-mo:hover{ background:var(--clx-row-hover) }
.clx-mo[aria-pressed="true"]{ background:var(--clx-sel-row) }
.clx-mo:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
.clx-box{ width:18px; height:18px; flex:0 0 18px; border-radius:5px; border:1.5px solid var(--clx-box-line); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color:#fff; background:#fff }
.clx-mo[aria-pressed="true"] .clx-box{ background:var(--clx-dark); border-color:var(--clx-dark) }
.clx-ml{ flex:1 1 auto; min-width:0 }
.clx-mn{ font-size:13px; color:var(--clx-muted); font-variant-numeric:tabular-nums }
.clx-mo .clx-pt{ flex:0 0 auto }
.clx-mf{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--clx-line-soft); margin-top:6px; padding:8px 8px 2px; font-size:12px; color:var(--clx-muted) }
.clx-tlink{ all:unset; box-sizing:border-box; cursor:pointer; font-size:13px; font-weight:700; color:var(--clx-dark); text-decoration:underline; text-underline-offset:2px; padding:4px 2px; border-radius:4px; white-space:nowrap }
.clx-tlink:hover{ color:var(--teal-dark) }
.clx-tlink:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
/* Row 2, the chosen filters */
.clx-active{ padding:0 20px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.clx-fby{ font-size:12px; font-weight:600; color:var(--clx-muted); margin-right:2px }
.clx-fchip{ display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 4px 0 12px; border-radius:999px; background:var(--clx-on-bg); border:1px solid var(--clx-chip2-line); color:var(--clx-dark); font-size:13px; font-weight:600; box-sizing:border-box; white-space:nowrap }
.clx-fx{ all:unset; box-sizing:border-box; cursor:pointer; width:22px; height:22px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:var(--clx-dark) }
.clx-fx:hover{ background:var(--clx-chip2-line) }
.clx-fx:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:1px }
/* Row 3, the count line, and its sort control */
.clx-cline{ border-top:1px solid var(--clx-line-soft); padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; position:relative }
.clx-count{ font-size:13px; color:var(--clx-muted); line-height:18px }
.clx-count b{ color:var(--clx-ink); font-weight:700 }
.clx-sortbtn{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; line-height:18px; color:var(--clx-dark); text-decoration:underline; text-underline-offset:2px; border-radius:4px }
.clx-sortbtn:hover{ color:var(--teal-dark) }
.clx-sortbtn:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.clx-sortbtn[aria-expanded="true"] svg{ transform:rotate(180deg) }
/* too narrow for one row (the brief's own sizes need 1248 px inside the band): the two stat buttons take a row of their own under a line */
@container clxband (max-width: 1247px){
  .clx-bdiv.d2{ flex:1 1 100%; width:auto; height:1px; align-self:auto }
  .clx-bstats{ flex:1 1 100% }
  .clx-bstats .clx-stat{ flex:1 1 0 }
}
.clx-dd-sort{ display:flex }
.clx-dd-sort .clx-menu{ left:auto; right:0 }
/* the client page's Invoices filter (session 356) keeps the old chip */
.clx-chip{ font-family:inherit; font-size:13px; font-weight:600; border:1px solid var(--clx-chip-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:36px }
.clx-chip:hover{ background:var(--clx-row-hover) }
.clx-chip:focus-visible{ outline:2px solid var(--pa-teal-300); outline-offset:2px }
.clx-chip[aria-pressed="true"]{ background:var(--clx-chip-on-bg); border-color:var(--clx-chip-on-line); color:var(--clx-chip-on-ink) }
.clx-chip em{ font-style:normal; color:var(--pa-muted); font-weight:600 }

.clx-pt{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:7px; font-size:12px; font-weight:700; white-space:nowrap }
.clx-pt.str{ background:var(--clx-str-bg); color:var(--clx-str-ink) } .clx-pt.mtr{ background:var(--clx-mtr-bg); color:var(--clx-mtr-ink) }
.clx-pt.coliving{ background:var(--clx-coliving-bg); color:var(--clx-coliving-ink) }   /* session 356 */
.clx-pt.res{ background:var(--clx-res-bg); color:var(--clx-res-ink) } .clx-pt.com{ background:var(--clx-com-bg); color:var(--clx-com-ink) }
.clx-pt.one{ background:var(--clx-one-bg); color:var(--clx-one-ink) }
.clx-pts{ display:flex; gap:5px; flex-wrap:wrap }
.clx-oot{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px 2px 7px; border-radius:999px; background:var(--clx-oot-bg); color:var(--clx-oot-ink); font-size:12px; font-weight:700; white-space:nowrap }

.clx-card{ background:#fff; border-radius:20px; box-shadow:var(--b-shadow-card) }   /* session 360: no overflow:hidden, so a menu can open past it */
.clx-scroll{ overflow-x:auto; border-radius:0 0 20px 20px }
/* session 359 (Daniel: "The screenshots shows stupid spacing. Fix it."): fixed shares of the card's width (the colgroup in scClients), so the
   table always fits its card at 1440 and 1920 and nothing is clipped; long text wraps inside its cell, never cut with dots. */
.clx-table{ width:100%; border-collapse:collapse; table-layout:fixed }
.clx-table th{ background:var(--clx-th-bg); text-align:left; font-size:12.5px; font-weight:600; color:var(--pa-text); padding:10px 12px; line-height:1.3; vertical-align:bottom; white-space:normal; overflow-wrap:break-word }
.clx-table th.sorted{ background:var(--clx-th-on-bg); color:var(--pa-teal-900) }
.clx-sortb{ font-family:inherit; font-size:12.5px; font-weight:700; line-height:1.3; color:inherit; background:none; border:0; padding:0; cursor:pointer; display:inline; text-align:inherit; text-decoration:underline; text-decoration-color:transparent }
.clx-sortb svg{ display:inline-block; vertical-align:-1px; margin-left:4px }
.clx-sortb:hover{ text-decoration-color:currentColor }
.clx-sortb:focus-visible{ outline:2px solid var(--pa-teal-300); outline-offset:2px; border-radius:4px }
.clx-table td{ padding:10px 12px; border-top:1px solid var(--b-line); vertical-align:middle; font-size:14px; line-height:1.3; color:var(--pa-text); overflow-wrap:break-word }
/* the platform's base table (tokens.css: fixed layout, clipped one-line cells, uppercase sticky headers) does not apply to this table */
.clx-table th{ text-transform:none; letter-spacing:normal; position:static; box-shadow:none; cursor:default; user-select:auto }
.clx-table td{ white-space:normal; overflow:visible; text-overflow:clip; max-width:none; border-bottom:0 }
.clx-table tbody tr{ cursor:pointer }
.clx-table tbody tr:hover td{ background:var(--clx-row-hover) }
.clx-table td.sorted{ background:var(--clx-td-on-bg) }
.clx-who{ display:flex; gap:10px; align-items:center; min-width:0 }
.clx-who > div{ min-width:0; line-height:17px }
.clx-who > div > div{ line-height:15px }
.clx-who .lp-av{ flex:0 0 32px; width:32px; height:32px }
.clx-table a.clx-nm{ font-size:15px; font-weight:700; line-height:17px; color:var(--pa-ink); letter-spacing:-0.012em; text-decoration:none }
.clx-table a.clx-nm:hover{ text-decoration:underline; color:var(--pa-teal-600) }
.clx-nm:focus-visible{ outline:2px solid var(--pa-teal-300); outline-offset:2px; border-radius:3px }
.clx-subl{ display:flex; gap:6px; align-items:center; margin-top:2px; flex-wrap:wrap }
/* Session 361 (ListTag mockup): the Out of town tag on its own line under the client type; the toolbar in two lines, the dropdowns on the
   right of the status tabs and the search full width under them */
.clx-ootl{ margin-top:4px; line-height:0 }
.clx-ootl .clx-oot{ line-height:1.45 }
.clx-tb .clx-dds{ margin-left:auto }
.clx-tb .clx-qline{ flex:1 1 100%; display:flex; min-width:0 }
.clx-tb .clx-qline .lp-search{ flex:1 1 auto; min-width:0 }
.clx-sm{ font-size:12.5px; line-height:16px; color:var(--pa-muted) }
.clx-nw{ white-space:normal; font-size:13px }   /* Last contact, the main contact's size */
.clx-since{ font-weight:700; color:var(--pa-ink); line-height:17px }
.clx-table .clx-sm{ line-height:15px }   /* session 359: a name and its type line make a row of about 52 px */
/* session 359: a pill, chip or date in a narrow column wraps inside itself rather than running past its cell */
.clx-table .clx-pt, .clx-table .clx-pill, .clx-table .clx-late, .clx-table .clx-oot{ white-space:normal; max-width:100%; box-sizing:border-box }
.clx-table .clx-pill, .clx-table .clx-late{ border-radius:9px; padding:2px 8px; font-size:12px; line-height:15px }
.clx-p90{ display:flex; flex-direction:column; align-items:flex-start; gap:4px }   /* Last 90 days: its pills stacked */
.clx-ch{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--pa-ink); font-weight:600 }
.clx-r{ text-align:right; font-variant-numeric:tabular-nums; color:var(--pa-ink); font-weight:600 }
.clx-late{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; background:var(--clx-late-bg); color:var(--clx-warn-ink); font-weight:700; font-size:12.5px; white-space:nowrap }
.clx-pill{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap }
.clx-pill.orange{ background:var(--clx-late-bg); color:var(--clx-warn-ink) }
.clx-pill.grey{ background:var(--clx-one-bg); color:var(--clx-one-ink) }
@media (max-width:1179px){
  .clx-table{ min-width:1100px }   /* session 359: under 1180 the table keeps its shares of 1100 px and scrolls inside its card */
}
@media (max-width:760px){
  /* session 360, Part 5: the band stacks (count, the property block, the two stat buttons side by side), its dividers lines */
  .clx-band{ padding:16px; gap:14px }
  .clx-bcount, .clx-bmix, .clx-bstats{ flex:1 1 100% }
  .clx-bcount > b{ font-size:44px }
  .clx-bdiv{ flex:1 1 100%; width:auto; height:1px; align-self:auto }
  .clx-stat{ min-width:0; flex:1 1 0; padding:10px 12px }
  .clx-sl{ white-space:normal }
  /* the toolbar wraps: the tabs on their own line (sideways inside their own box), the search full width, the dropdowns two a line */
  .clx-tb{ padding:14px 16px }
  .clx-page #clSeg{ flex:1 1 100%; min-width:0; overflow-x:auto }
  .clx-page #clSeg .lp-seg{ width:max-content }
  .clx-page #clSeg .lp-seg button{ flex:0 0 auto; flex-direction:row; gap:6px; height:36px; padding:0 10px; font-size:13.5px }   /* one line, as on a computer */
  .clx-ddb{ padding:0 8px 0 12px; gap:6px; font-size:13.5px } .clx-ddb.on{ padding:0 7.5px 0 11.5px }
  .clx-badge{ padding:1px 6px }
  .clx-tb .lp-search{ flex:1 1 100%; min-width:0 }
  .clx-dds{ flex:1 1 100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .clx-ddb{ width:100%; justify-content:space-between }
  .clx-dds .clx-dd{ position:static; min-width:0 }
  .clx-dds .clx-menu, .clx-dds .clx-menu.clx-mr{ top:auto; left:16px; right:16px; width:auto; margin-top:8px }
  .clx-active{ padding:0 16px 12px }
  .clx-cline{ padding:10px 16px }
  .clx-table{ min-width:1240px }
}