/* Lost Clients, campaign lists (lost-lists.js), Kate, 9 Oct 2026. Sits on Client's Last Visit's own
   classes (slv-card, sc-seg, lc-row, lc-pager, prd-cards, tglr) and Client Mix's tab bar; only what
   they do not cover is here. Colours are the dashboard's own tokens, so dark mode follows. */
:root,[data-theme="light"]{--ll-blue:#1F5C99;--ll-blue-bg:#E4EEF8;--ll-blue-bar:#4B83BF;--ll-gold-bar:#C99A2E}
[data-theme="dark"]{--ll-blue:#9CC8F5;--ll-blue-bg:rgba(156,200,245,.14);--ll-blue-bar:#6FA3DA;--ll-gold-bar:#E3B955}

.ll-fresh{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.ll-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:4px 12px;font-size:12.5px}
.ll-chip b{color:var(--text);font-weight:600}
.ll-chip.warn{background:var(--warn-bg);border-color:transparent;color:var(--text)}

.ll-cards{display:grid;gap:10px;grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.ll-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.ll-cards{grid-template-columns:1fr 1fr;gap:8px}}
@media(max-width:430px){.ll-cards{grid-template-columns:1fr}}
.ll-card{text-align:left;background:var(--surface);color:var(--text);border:1.5px solid var(--border);border-radius:var(--radius-card);padding:12px 13px;font:inherit;cursor:pointer;box-shadow:var(--shadow-card)}
.ll-card.on{border-color:var(--text);outline:1px solid var(--text);outline-offset:-3px}
@media(hover:hover){.ll-card:hover{box-shadow:var(--shadow-card-hover)}}
.ll-t{font-size:13px;font-weight:600}
.ll-n{font-family:'Playfair Display',serif;font-size:30px;line-height:1.1;margin:2px 0}
.ll-d{font-size:12.5px;color:var(--muted);line-height:1.35;min-height:34px}
.ll-ch{font-size:12px;color:var(--muted);margin-top:4px}
.ll-bar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--surface2);margin-top:9px}
.ll-bar i{display:block;height:100%}
.ll-bar i.ll-act,.ll-legend .ll-act::before{background:var(--good)}
.ll-bar i.ll-18,.ll-legend .ll-18::before{background:var(--ll-gold-bar)}
.ll-bar i.ll-no,.ll-legend .ll-no::before{background:var(--muted2)}
.ll-bar i.ll-txt,.ll-legend .ll-txt::before{background:var(--ll-blue-bar)}
.ll-bar i.ll-num,.ll-legend .ll-num::before{background:var(--bad)}
.ll-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin:10px 0 6px}
.ll-legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

.ll-panel{margin-top:14px}
.ll-def{background:var(--surface2);border-radius:10px;padding:10px 13px;font-size:13px;margin:8px 0 12px;line-height:1.5}
.ll-filters{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.ll-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ll-fchip{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:4px 11px;font:inherit;font-size:12.5px;min-height:30px;cursor:pointer}
.ll-fchip em{font-style:normal;opacity:.65;margin-left:3px;font-size:11.5px}
.ll-fchip.on{border-color:transparent;font-weight:600}
.ll-fchip.on.ll-act,.ll-pill.ll-act{background:var(--good-bg);color:var(--good)}
.ll-fchip.on.ll-18,.ll-pill.ll-18{background:var(--warn-bg);color:var(--warn)}
.ll-fchip.on.ll-no,.ll-pill.ll-no{background:var(--surface2);color:var(--muted)}
.ll-fchip.on.ll-txt,.ll-pill.ll-txt{background:var(--ll-blue-bg);color:var(--ll-blue)}
.ll-fchip.on.ll-num,.ll-pill.ll-num{background:var(--bad-bg);color:var(--bad)}
.ll-pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:500;white-space:nowrap}
.ll-tag{display:inline-block;border:1px solid var(--border);border-radius:6px;padding:0 6px;font-size:11.5px;color:var(--muted);margin:0 3px 2px 0;white-space:nowrap}
.ll-tag.sent{border-color:var(--good);color:var(--good)}
.ll-sel{font:inherit;font-size:13px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px 10px}
.ll-hide{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ll-mark{font-size:12px;padding:3px 10px}
.ll-foot{margin-top:14px;font-size:12.5px;max-width:860px}
@media(max-width:760px){.ll-filters{display:block}.ll-chips{margin-top:8px}}

/* The table: eleven columns that size themselves (Client's Last Visit's table is fixed-width columns by percentage,
   which cannot hold a phone number beside a status pill). Kate, 9 Oct 2026: "freeze the Client column so it scrolls to the
   far right properly". It is a scroll box now, both ways: the Client column is frozen at the left and the headings stay at the
   top of the box. The box is as tall as the screen under the top bar, so the headings still stay in view while the list
   scrolls (a scroll box cannot use the page's sticky header, so it keeps its own). */
.lc-wrap.ll-wrap{overflow:auto;max-height:calc(100vh - var(--topbar-cond-h,104px) - 28px);overscroll-behavior-x:contain}
.lc-wrap.ll-wrap > table{table-layout:auto;width:100%;min-width:max-content;font-size:13.5px}
.lc-wrap.ll-wrap th,.lc-wrap.ll-wrap td{text-align:left;vertical-align:top;white-space:normal;overflow-wrap:normal;padding:9px 8px}
.lc-wrap.ll-wrap thead th{position:sticky;top:0;z-index:5;background:var(--surface);box-shadow:0 1px 0 var(--border);white-space:nowrap}
.ll-wrap td.ll-nw,.ll-wrap td .ll-nw{white-space:nowrap}
/* Frozen first column. The colspan row (a client's opened detail) is left alone. */
.lc-wrap.ll-wrap th:first-child,.lc-wrap.ll-wrap td:first-child:not([colspan]){position:sticky;left:0;z-index:3;background:var(--surface);box-shadow:1px 0 0 var(--border)}
.lc-wrap.ll-wrap thead th:first-child{z-index:6}
.lc-wrap.ll-wrap tr.lc-open td:first-child:not([colspan]){background:var(--surface2)}
.lc-wrap.ll-wrap td:first-child{min-width:170px}
.lc-wrap.ll-wrap td.ll-ph,.lc-wrap.ll-wrap td.ll-ph a,.lc-wrap.ll-wrap td .lc-ph a{white-space:nowrap}
.ll-wrap td.ll-team > div{margin-bottom:3px;white-space:nowrap}
.ll-wrap td.ll-team .who{display:inline-block;width:auto;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.ll-wrap .ll-tag{margin-bottom:3px}
.ll-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 8px}
.ll-tools .ll-search{flex:1 1 220px;max-width:300px;min-height:34px;padding:5px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:13px}
.ll-tools .ll-sel{min-height:34px;padding:5px 10px;font-size:13px}
.ll-tools .ll-hide{font-size:12.5px}
@media(max-width:760px){.ll-tools .ll-search{flex:1 1 100%;max-width:none}.ll-tools .tglr{flex:1}}

/* Cards: content stacks from the top and the numbers line up from card to card. */
.ll-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0}
.ll-d{min-height:52px}
.ll-ch{min-height:56px;margin-bottom:8px}
.ll-mix{margin:0 0 8px;display:grid;gap:3px;font-size:12.5px}
.ll-mix > div{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ll-mix dt{color:var(--muted)}
.ll-mix dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ll-mix dd span{font-weight:400;color:var(--muted);margin-left:3px}
.ll-bar{margin-top:auto}
.ll-bar i{background:var(--good)}
.ll-explain{font-size:12.5px;color:var(--muted);margin:10px 0 6px;max-width:900px;line-height:1.5}
.ll-explain b{color:var(--text);font-weight:600}

/* Cards, second pass (Kate, 9 Oct 2026, her screenshot at 125% zoom): as many cards per row as fit
   (never narrower than 200px), the title and number at the top, and the three counts and the bar
   pinned to the bottom, so they line up from card to card however the description wraps. */
.ll-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ll-d,.ll-ch{min-height:0}
.ll-ch{margin-bottom:12px}
.ll-bot{margin-top:auto}
.ll-mix dd span{display:none}
.ll-bar{margin-top:6px}
.ll-pct{font-size:12px;color:var(--muted);margin-top:4px}

/* Compact type (Kate, 9 Oct 2026: "a little too crowded", 12 or 11?). Page text 12px, small print 11px,
   headings 11px. The big numbers on the cards stay large. */
.ll-t{font-size:12.5px}
.ll-d{font-size:11.5px;min-height:0}
.ll-ch{font-size:11px}
.ll-mix{font-size:11.5px}
.ll-pct{font-size:11px}
.ll-chip{font-size:11.5px;padding:3px 11px}
.ll-explain,.ll-foot{font-size:11.5px}
.ll-def{font-size:12px;padding:9px 12px}
.ll-fchip{font-size:11.5px;min-height:28px;padding:3px 10px}
.ll-fchip em{font-size:11px}
.ll-tools .ll-search,.ll-tools .ll-sel{font-size:12px;min-height:32px}
.ll-tools .ll-hide{font-size:11.5px}
.ll-tools .tglr.lc-btn{font-size:12px;min-height:32px;padding:4px 12px}
.ll-panel .sc-seg button{font-size:12px}
.ll-panel .slv-head p{font-size:12px}
.lc-wrap.ll-wrap > table{font-size:12px}
.lc-wrap.ll-wrap thead th{font-size:11px;letter-spacing:.05em}
.lc-wrap.ll-wrap th,.lc-wrap.ll-wrap td{padding:8px 7px}
.ll-wrap .slv-note{font-size:11px;margin-top:1px}
.ll-wrap .lc-stc,.ll-wrap .lc-stc .who{font-size:12px}
.ll-wrap .lc-others{font-size:11px}
.ll-pill{font-size:11px;padding:2px 8px}
.ll-tag{font-size:11px;padding:0 5px}
.ll-wrap .lc-2nums{font-size:10.5px}
.ll-wrap .lc-hint{font-size:11px}
.ll-wrap .lc-more{font-size:11px}
.lc-pager,.lc-pager .slv-note,.lc-pg-txt{font-size:12px}

/* Cards only report (Kate, 9 Oct 2026): not buttons, a small lift and a glow on hover and press. The
   lists are picked on the cards, the filters sit on the table headings. */
:root,[data-theme="light"]{--ll-glow:rgba(15,110,86,.26);--ll-glow-line:rgba(15,110,86,.45)}
[data-theme="dark"]{--ll-glow:rgba(153,246,228,.28);--ll-glow-line:rgba(153,246,228,.5)}
.ll-card{cursor:pointer;transition:transform .18s var(--card-ease,ease),box-shadow .18s var(--card-ease,ease),border-color .18s}
@media(hover:hover){.ll-card:hover{transform:translateY(-3px);border-color:var(--ll-glow-line);box-shadow:var(--shadow-card-hover),0 0 0 1px var(--ll-glow-line),0 0 24px -2px var(--ll-glow)}}
.ll-card:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.ll-card:active{transform:translateY(-1px);border-color:var(--ll-glow-line);box-shadow:var(--shadow-card-hover),0 0 0 1px var(--ll-glow-line),0 0 24px -2px var(--ll-glow)}
@media(prefers-reduced-motion:reduce){.ll-card{transition:none}.ll-card:hover,.ll-card:active{transform:none}}


.ll-thb{border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;cursor:pointer;white-space:nowrap}
.ll-thb span{opacity:.55;font-size:10px}
.ll-thb.on{color:var(--text)}
.ll-thb.on span{opacity:1;color:var(--good)}
@media(hover:hover){.ll-thb:hover{color:var(--text)}}
.ll-pop{position:fixed;z-index:80;min-width:230px;max-width:280px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-card-hover);padding:6px}
.ll-pt{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 8px 2px}
.ll-pn{text-transform:none;letter-spacing:0;font-size:11px;line-height:1.4;padding:6px 8px 4px}
.ll-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;color:inherit;font:inherit;font-size:12px;padding:6px 8px;border-radius:6px;cursor:pointer}
.ll-opt em{font-style:normal;color:var(--muted);margin-left:auto;font-size:11px}
.ll-opt.on{font-weight:600}
@media(hover:hover){.ll-opt:hover{background:var(--surface2)}}
.ll-tick{display:inline-block;width:14px;color:var(--good);font-weight:700}
.ll-pf{display:flex;gap:12px;padding:4px 8px 4px 30px}

.ll-g{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-bottom:2px}
/* Kate, 9 Oct 2026: "too long". The heading block above the cards is tighter on this page, so the cards come up the screen. */
#lostListsContent .slv-intro{margin:6px 0 2px}
#lostListsContent .slv-intro h2{font-size:24px;margin:0 0 2px}
#lostListsContent .slv-intro p{font-size:14px;line-height:1.4}
#lostListsContent .lq-tabs{margin:8px 0 0}
#lostListsContent .ll-fresh{margin:8px 0 8px}

/* In blast switch and the branch review strip (Kate, 12 Oct 2026, the coordinators' review). */
.ll-chip.ok{background:var(--good-bg);border-color:transparent;color:var(--text)}
.ll-review{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:10px 0 14px}
.ll-rv-h{flex:1 0 100%}
.ll-rv-btn{font:inherit;font-size:11.5px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:1px 10px;cursor:pointer}
.ll-rv-btn:hover{background:var(--surface2)}
.ll-blast{font:inherit;font-size:12px;font-weight:500;border-radius:999px;padding:2px 10px;cursor:pointer;white-space:nowrap;border:1px solid transparent}
.ll-blast.in{background:var(--good-bg);color:var(--good)}
.ll-blast.out{background:var(--bad-bg);color:var(--bad)}
.ll-blast:hover{border-color:var(--border)}

/* Note on a taken-out client, and the review file upload preview (Kate, 12 Oct 2026). */
.ll-bnote{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll-notein{width:100%;box-sizing:border-box;margin:2px 0 6px;min-height:32px}
.lrf-box{border:1px solid var(--border);background:var(--surface2);border-radius:10px;padding:12px 14px;margin:10px 0;font-size:13.5px}
.lrf-list{margin:8px 0 10px;padding-left:18px}
.lrf-list li{margin:3px 0}
.lrf-warn{color:var(--muted)}
.lrf-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.ll-btns{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
.ll-btns .tglr{white-space:nowrap}