/* Lost Clients, To message and Templates tabs (lost-queue.js), Kate, 9 Oct 2026. Sits on lost-lists.css and the dashboard's tokens,
   so dark mode follows; only what they do not cover is here. */
.lq-tabs{display:flex;width:fit-content;max-width:100%;margin:14px 0 4px;flex-wrap:wrap}
.lq-refresh{cursor:pointer;font:inherit;font-size:12.5px}
.lq-stat.on{border-color:var(--text);outline:1px solid var(--text);outline-offset:-3px}
.lq-held{cursor:default}
.lq-stats{margin-bottom:4px}
@media(max-width:1100px){.lq-stats{grid-template-columns:repeat(2,1fr)}}
.lq-batch{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.lq-prog{flex:1;min-width:150px;height:8px;border-radius:99px;background:var(--surface2);overflow:hidden}
.lq-prog i{display:block;height:100%;background:var(--good)}
.lq-tools{margin-top:4px}
.lq-auto{margin:8px 0 2px;font-size:13px;color:var(--muted)}
.lq-type{color:var(--text);font-weight:600}
.lq-st{margin-top:4px}
.lq-msgtd{min-width:260px;max-width:420px}
.lq-msg{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:help}
.lq-msg:hover{-webkit-line-clamp:unset}
.lq-msg-m{margin-top:6px;-webkit-line-clamp:3}
.lq-long{color:var(--warn)}
.lq-acttd{min-width:190px}
.lq-acts{display:flex;gap:6px;flex-wrap:wrap}
.lq-pri{background:var(--text);color:var(--surface);border-color:var(--text)}
/* .tglr.lc-btn (index.html) sets color:var(--text), which beat .lq-pri and left light text on a light pill in dark mode: Open in WhatsApp, Copy and Save had no readable label (Kate, 12 Oct 2026). */
.tglr.lc-btn.lq-pri,.tglr.lc-btn.lq-pri:hover{background:var(--text);color:var(--surface);border-color:var(--text)}
.lq-sent{color:var(--good);font-weight:600;font-size:13px}
.lq-rep{background:var(--good-bg);color:var(--good);border-radius:8px;padding:5px 10px;font-size:13px;font-weight:600;display:inline-block}
.lq-tplgrid{display:grid;grid-template-columns:290px 1fr;gap:14px;margin-top:12px;align-items:start}
@media(max-width:860px){.lq-tplgrid{grid-template-columns:1fr}}
.lq-tpllist{display:flex;flex-direction:column;gap:6px}
.lq-tli{text-align:left;border:1.5px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:9px 12px;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.lq-tli.on{border-color:var(--text);outline:1px solid var(--text);outline-offset:-3px}
.lq-tn{font-weight:600;font-size:14px}
.lq-toks{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.lq-tok{cursor:pointer;background:var(--surface);font:12px ui-monospace,Consolas,monospace;color:var(--text);padding:2px 8px}
.lq-ta{width:100%;box-sizing:border-box;min-height:150px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:10px;padding:12px;font:14px/1.55 inherit;resize:vertical}
.lq-edrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.lq-bubble{background:#DCF8C6;color:#111;border-radius:12px 12px 12px 2px;padding:10px 13px;font-size:14px;line-height:1.5;max-width:460px;white-space:pre-wrap}
[data-theme="dark"] .lq-bubble{background:#1F3A2C;color:#E7F5EC}
.lq-ed button:disabled{opacity:.45;cursor:default}

/* The file buttons stay side by side (Kate, 12 Oct 2026: XLSX and CSV had split across two lines). */
.lq-btns{display:inline-flex;gap:8px;flex-wrap:nowrap}
.lq-btns .tglr{white-space:nowrap}

/* Sending from the site (Kate, 12 Oct 2026): the send bar, the Sending view and the confirm dialog (lost-queue.js, migrations/lost_send.sql). */
.lq-sendbar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin:0 0 12px}
.lq-sendbar.off{background:transparent;border-style:dashed}
.lq-testbox{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.lq-q{color:var(--muted);font-weight:600;font-size:13px}
.lq-skip{color:var(--warn);font-weight:600;font-size:13px}
.lq-fail{color:var(--bad);font-weight:600;font-size:13px}
.lqm-back{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.lqm{width:min(520px,100%);max-height:92vh;overflow:auto}
.lqm h3{margin:0 0 10px}
.lqm-tbl{margin-bottom:8px}
.lqm-n{text-align:right;font-weight:600}
.lqm-ex{max-width:none}
.lqm-list{margin:12px 0;padding-left:18px;font-size:13.5px;color:var(--muted);line-height:1.5}
.lqm-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* To message in waves (Kate, 13 Oct 2026): the WhatsApp and Text areas, the wave status bar, the pace card and the wave cards (lost-waves.js). */
.lqw-area{display:flex;width:100%;margin:2px 0 14px;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);padding:0;gap:0}
.lqw-area button{flex:1;text-align:left;border:0;border-right:1px solid var(--border);border-radius:0;background:transparent;color:var(--text);padding:12px 16px;font:inherit;cursor:pointer;display:block}
.lqw-area button:last-child{border-right:0}
.lqw-area button.on{background:var(--ll-blue-bg,var(--surface2));box-shadow:inset 0 -3px 0 var(--text)}
.lqw-area button .slv-note{display:block}
.lqw-status{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;margin:0 0 14px}
.lqw-lab{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.lqw-line{font-size:15px;margin-bottom:12px}
.lqw-steps{display:flex;align-items:flex-start}
.lqw-step{flex:1;text-align:center;position:relative;min-width:0}
.lqw-step::before{content:'';position:absolute;top:13px;left:-50%;width:100%;height:3px;background:var(--surface2)}
.lqw-step:first-child::before{display:none}
.lqw-step.done::before,.lqw-step.open::before{background:var(--good)}
.lqw-dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;margin:0 auto 4px;display:grid;place-items:center;font:600 13px inherit;background:var(--surface2);color:var(--muted);border:3px solid var(--surface)}
.lqw-step.done .lqw-dot{background:var(--good);color:var(--surface)}
.lqw-step.open .lqw-dot{background:var(--text);color:var(--surface)}
.lqw-step.ready .lqw-dot{border-color:var(--text);color:var(--text)}
.lqw-pace{margin:0 0 14px}
.lqw-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lqw-big{margin:8px 0}
.lqw-big b{font-size:22px;font-weight:600}
.lqw-tbl{margin-top:8px}
.lqw-lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 6px}
@media(max-width:800px){.lqw-lanes{grid-template-columns:1fr 1fr}}
.lqw-lane{border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--surface2)}
.lqw-h{margin:6px 0 10px}
.lqw-wave{border:1.5px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.lqw-wave.cur{border-color:var(--text)}
.lqw-wh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%;text-align:left;border:0;background:transparent;color:var(--text);padding:13px 16px;font:inherit;cursor:pointer}
.lqw-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:600;background:var(--surface2);color:var(--muted);flex:none}
.lqw-wave.done .lqw-num{background:var(--good-bg);color:var(--good)}
.lqw-wave.cur .lqw-num{background:var(--text);color:var(--surface)}
.lqw-wt{flex:1;min-width:230px;display:block}
.lqw-wt .slv-note{display:block;margin-top:2px}
.lqw-pill{display:inline-block;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;background:var(--surface2);color:var(--muted);margin-left:6px}
.lqw-pill.done{background:var(--good-bg);color:var(--good)}
.lqw-pill.open{background:var(--text);color:var(--surface)}
.lqw-pill.ready{background:var(--warn-bg);color:var(--warn)}
.lqw-cnt{display:flex;flex-direction:column;align-items:flex-end;min-width:90px}
.lqw-cnt b{font-size:20px;font-weight:600}
.lqw-brw{min-width:170px;width:200px}
.lqw-brs{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--surface2)}
.lqw-brs i{display:block;height:100%}
.lqw-leg{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.lqw-leg span::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;background:var(--c)}
.lqw-body{border-top:1px solid var(--border);padding:14px 16px;background:var(--surface2)}
.lqw-results{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 10px}
@media(max-width:800px){.lqw-results{grid-template-columns:1fr 1fr}}
.lqw-res{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.lqw-res b{display:block;font-size:20px;font-weight:600}
.lqw-res span{font-size:11.5px;color:var(--muted)}
.lqw-res.good b{color:var(--good)}
.lqw-res.bad b{color:var(--bad)}
.lqw-gate{background:var(--surface);border:1.5px dashed var(--text);border-radius:12px;padding:14px 16px;margin:12px 0 0}
.lqw-chk{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;margin:4px 0}
.lqw-ok{color:var(--good);font-weight:700}
.lqw-no{color:var(--warn);font-weight:700}
.lqw-ph{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin:0 0 10px}
.lqw-slice{margin:0}

/* To message, calmer type (Kate, 13 Oct 2026: "fonts too big, readable but not so in your face"). The table was already 12px, but the
   dropdown pills drew at page size (the pill button inherits, the 12px sat on the hidden select), the stat numbers were 30px, the
   pace and wave numbers 20-22px, and the wave headings, status line and area tabs were all 15-16px. Everything here steps down to
   sit with the 12px table: page text 12-13px, headings 14px, big numbers 18-24px. Scoped to #lostListsContent, so no other page moves. */
#lostListsContent .ps-btn{font-size:12.5px;padding:5px 12px;min-height:32px}
#lostListsContent .lq-stats .ll-n{font-size:24px}
#lostListsContent .lqw-area button{font-size:13px;padding:10px 14px}
#lostListsContent .lqw-status{padding:12px 14px}
#lostListsContent .lqw-lab{font-size:11px}
#lostListsContent .lqw-line{font-size:13px;margin-bottom:10px}
#lostListsContent .lqw-pace{padding:14px 16px}
#lostListsContent .lqw-pace .lqw-row > b{font-size:14px}
#lostListsContent .lqw-big b{font-size:18px}
#lostListsContent .lqw-h{font-size:15px}
#lostListsContent .lqw-wh{font-size:13px;padding:11px 14px}
#lostListsContent .lqw-num{width:30px;height:30px;font-size:13px}
#lostListsContent .lqw-cnt b,#lostListsContent .lqw-res b{font-size:17px}
#lostListsContent .lqw-ph b{font-size:14px}
#lostListsContent .lqw-chk{font-size:12.5px}
#lostListsContent .lqw-dot{width:26px;height:26px;font-size:12px}
#lostListsContent .lqw-step::before{top:12px}
#lostListsContent .lq-sendbar{font-size:12.5px}
.lqw-bd{margin:10px 0 4px;padding:0 4px}.lqw-bd .lqw-tbl td,.lqw-bd .lqw-tbl th{white-space:nowrap}

/* Performance report (Kate, 16 Oct 2026): lost-report.js, drawn into #lqHost by the fourth rail entry. */
#lostListsContent .lr-sec{margin:24px 0 8px}
#lostListsContent .lr-sec{scroll-margin-top:120px}
/* Performance report sub-entries in the rail (Kate, 21 Oct 2026): lost-report.js lrRailSubs. Sidebar rail only, 1400px and up; below that the rail is
   a row of chips and these stay out of it. */
#lostListsContent .side-sub{display:none}
@media(min-width:1400px){
  #lostListsContent .side-sub{display:block;margin:0 0 4px}
  #lostListsContent .lg-side .side-nav .side-sub a{padding:5px 0 5px 27px;font-size:13px;color:var(--muted);border-left:2px solid var(--border2)}
  #lostListsContent .lg-side .side-nav .side-sub a.on{color:var(--text);font-weight:600;border-left-color:var(--text)}
  @media(hover:hover){#lostListsContent .lg-side .side-nav .side-sub a:hover{color:var(--text)}}
  #lostListsContent .lg-side{max-height:calc(100vh - 136px);overflow-y:auto}
}
#lostListsContent .lr-sec h3{font-family:'Playfair Display',serif;font-size:21px;font-weight:600;margin:0 0 10px}
#lostListsContent .lr-cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
#lostListsContent .lr-card{cursor:default}
#lostListsContent .lr-card.lr-warn{border-color:var(--bad)}
#lostListsContent .lr-bad{color:var(--bad)}
#lostListsContent .lr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#lostListsContent .lr-tbl td.lr-when{font-size:12.5px;color:var(--muted)}
#lostListsContent .lr-logt th,#lostListsContent .lr-logt td{text-align:left;white-space:normal}
/* Branch is the first column and the one that stays put when the log scrolls sideways (Kate, 26 Oct 2026); then Client, Status, Outcome, After 31 Oct, Wave, Message, Sent */
#lostListsContent .lr-logt th:first-child,#lostListsContent .lr-logt td:first-child:not([colspan]){position:sticky;left:0;z-index:2;background:var(--surface);min-width:96px;box-shadow:1px 0 0 var(--border)}
#lostListsContent .lr-logt thead th:first-child{z-index:3}
#lostListsContent .lr-logt td:nth-child(7){min-width:130px}
#lostListsContent .lr-logt td:nth-child(2){min-width:190px}
#lostListsContent .lr-logt td:nth-child(8){min-width:150px}
@media(hover:hover){#lostListsContent .lr-row:hover td:first-child{background:var(--surface2)}}
#lostListsContent .lr-row.open td:first-child{background:var(--surface2)}
#lostListsContent .lr-row{cursor:pointer}
@media(hover:hover){#lostListsContent .lr-row:hover td{background:var(--surface2)}}
#lostListsContent .lr-row.open td{background:var(--surface2)}
#lostListsContent .lr-text td{background:var(--surface2);white-space:normal;padding:4px 10px 14px}
#lostListsContent .lr-text .lq-bubble{max-width:560px;margin:6px 0}
#lostListsContent .lr-t{color:var(--muted);font-variant-numeric:tabular-nums}
#lostListsContent .lr-day{margin:0 0 16px}
#lostListsContent .lr-dayh{margin:0 0 4px}
#lostListsContent .lr-slot{display:grid;grid-template-columns:52px minmax(0,1fr) 48px;align-items:center;gap:10px;padding:2px 0;font-size:13px;font-variant-numeric:tabular-nums}
#lostListsContent .lr-bar{height:10px;border-radius:5px;background:var(--border2);overflow:hidden}
#lostListsContent .lr-bar i{display:block;height:100%;background:var(--accent);border-radius:5px}
#lostListsContent .lr-sn{text-align:right;font-weight:600}
/* Booked by deposit (Kate, 18 Oct 2026): lost-report.js lrDepInner. The page's own colours: paid = --good (mint on dark), not paid yet = --accent
   (pink on dark), today = --muted2. The Visual / Table switch is the site's .tp-seg. */
#lostListsContent .lr-dhd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px}
#lostListsContent .lr-dhd h3{margin:0}
/* Kate, 23 Oct 2026, from her phone: "Which message" (All, Smoothing, Colour, Due) ran past the right edge, and she does not want anything to
   scroll sideways. On a phone the switch is the width of the column and its buttons share it by the length of their words, one line each. */
@media(max-width:760px){
  #lostListsContent .lr-dhd .tp-seg{width:100%;box-sizing:border-box}
  #lostListsContent .lr-dhd .tp-seg button{flex:1 1 auto;min-width:0;padding:0 8px;text-align:center;white-space:nowrap;letter-spacing:0}
}
/* The deposit section's detail sits behind one line (progressive disclosure): the example and the check-at-the-desk line show, the working-out folds. */
#lostListsContent .lr-fold{margin:4px 0 0}
#lostListsContent .lr-fold summary{cursor:pointer;color:var(--muted);font-size:13px;padding:6px 0}
/* The send log's three filters (wave, branch, status) share one row on a phone and shrink to the screen, instead of two on one line and one alone
   (Kate, 23 Oct 2026). The search box and the downloads take the rows below. */
@media(max-width:760px){
  #lostListsContent #lr-log .ll-tools .ps{flex:1 1 0;min-width:0}
  #lostListsContent #lr-log .ll-tools .ps-btn{padding:0 10px;font-size:12.5px;gap:6px}
}
#lostListsContent .lr-dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:14px 0 6px}
#lostListsContent .lr-dcard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
#lostListsContent .lr-dcard h4,#lostListsContent .lr-dh{font-size:14px;font-weight:600;margin:0 0 10px}
#lostListsContent .lr-dh{margin:18px 0 8px}
#lostListsContent .lr-drow{display:grid;grid-template-columns:118px minmax(0,1fr) 34px;align-items:center;gap:10px;padding:4px 0;font-size:13px;font-variant-numeric:tabular-nums}
#lostListsContent .lr-drow b{text-align:right;font-weight:600}
#lostListsContent .lr-dbar{display:flex;height:14px;border-radius:5px;overflow:hidden;background:var(--border2);min-width:0}
#lostListsContent .lr-dbar i{display:block;height:100%}
#lostListsContent .lr-dbar i[data-tip]{cursor:pointer;transition:filter 120ms}
#lostListsContent .lr-dbar i[data-tip]:hover{filter:brightness(1.12)}
#lostListsContent .lr-dbar i[data-tip]:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
/* The value label over a bar segment (lrSegI in lost-report.js): the page's own text and background swapped, so it reads on both themes. */
.lr-tip{position:fixed;z-index:700;max-width:min(300px,calc(100vw - 16px));padding:6px 10px;border-radius:8px;background:var(--text);color:var(--bg);font-size:12.5px;line-height:1.35;font-variant-numeric:tabular-nums;box-shadow:0 6px 18px rgba(0,0,0,.28);pointer-events:none}
#lostListsContent .d-paid{background:var(--good)}
#lostListsContent .d-today{background:var(--muted2)}
#lostListsContent .d-unpaid{background:var(--accent)}
/* Not paid yet split by the deposit policy (Kate, 21 Oct 2026): likely needed = --warn (so it is not the same mint as paid on dark), short service = a faded --muted2. */
#lostListsContent .d-need{background:var(--warn)}
#lostListsContent .d-none{background:rgba(119,112,106,.38);background:color-mix(in srgb,var(--muted2) 45%,transparent)}
#lostListsContent .lr-card.lr-need{border-color:var(--warn)}
#lostListsContent .lr-dtag{display:inline-block;font-size:11.5px;border-radius:999px;padding:1px 9px;border:1px solid var(--border);white-space:nowrap}
#lostListsContent .lr-dtag.need{border-color:var(--warn);color:var(--warn)}
#lostListsContent .lr-dtag.paid{border-color:var(--good);color:var(--good)}
#lostListsContent .lr-daway{font-size:11.5px;color:var(--muted);white-space:nowrap}
#lostListsContent .lr-dsvc{white-space:normal;min-width:220px;color:var(--muted)}
#lostListsContent .d-seen{background:var(--good)}
#lostListsContent .d-delivered{background:var(--accent)}
#lostListsContent .d-sentonly{background:var(--muted2)}
#lostListsContent .d-failed{background:var(--bad)}
#lostListsContent .lr-drow2{grid-template-columns:118px minmax(0,1fr) 84px}
#lostListsContent .lr-drow2 b{white-space:nowrap}
#lostListsContent .lr-dkey{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 0;font-size:12px;color:var(--muted)}
#lostListsContent .lr-dkey span{display:inline-flex;align-items:center;gap:6px}
#lostListsContent .lr-dkey i{display:inline-block;width:10px;height:10px;border-radius:50%}
/* On a phone a bar row is two lines: the label and the number, then the bar at the full width of the card (it was about 80px between them). */
@media(max-width:560px){
  #lostListsContent .lr-dgrid{grid-template-columns:minmax(0,1fr)}
  #lostListsContent .lr-drow,#lostListsContent .lr-drow2{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "b b";row-gap:4px;padding:6px 0}
  #lostListsContent .lr-drow > span:first-child,#lostListsContent .lr-drow2 > span:first-child{grid-area:l}
  #lostListsContent .lr-drow > b,#lostListsContent .lr-drow2 > b{grid-area:v}
  #lostListsContent .lr-drow > .lr-dbar,#lostListsContent .lr-drow2 > .lr-dbar{grid-area:b}
  #lostListsContent .lr-cards{grid-template-columns:1fr 1fr;gap:8px}
  #lostListsContent .lr-card{padding:12px}
}
#lostListsContent .lr-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:14px 0 4px}
#lostListsContent .lr-pager .tglr{min-height:44px}
#lostListsContent .lr-pager .tglr[disabled]{opacity:.4;cursor:default}
@media(max-width:760px){#lostListsContent .lr-slot{grid-template-columns:44px minmax(0,1fr) 40px;gap:8px}#lostListsContent .lr-sec h3{font-size:19px}}
/* To message in the Wellness Voucher blast's layout (Kate, 16 Oct 2026): lost-blast.js. */
#lostListsContent .lqb-pace{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:8px 0 2px}
#lostListsContent .lqb-pace p{flex:1 1 100%;margin:4px 0 0}
#lostListsContent .lqb-left{margin:8px 2px 14px}
#lostListsContent .wv-cards{margin-top:2px}
#lostListsContent a.lqb-msg{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;cursor:pointer}
@media(hover:hover){#lostListsContent a.lqb-msg:hover{text-decoration-style:solid}}
.lqm .lqb-mt{margin:12px 0}
.lqm .lqb-mh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:4px}
.lqm .lqb-mt .lq-bubble{white-space:normal}

/* Terms and conditions (Kate, 16 Oct 2026): fifth rail entry, the welcome-back terms PDF inline. */
#lostListsContent .lq-terms-frame{display:block;width:100%;height:78vh;min-height:520px;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}
#lostListsContent .lq-terms-open{font-weight:600}
/* Resend what WhatsApp did not deliver (lost-blast.js), 19 Oct 2026. */
#lostListsContent .lqb-rs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:10px 0 2px;padding:10px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface2)}
#lostListsContent .lqb-rs > div{flex:1 1 420px;line-height:1.5;font-size:13px}
/* The template name on a failed send (lost-queue.js lqFailTpl), 19 Oct 2026. */
#lostListsContent .lq-tpl{margin:6px 0 2px}
#lostListsContent .lq-tpl code{font-size:12.5px;background:var(--surface2);padding:2px 6px;border-radius:6px;user-select:all}

/* The names behind a number (Kate, 26 Oct 2026): a figure that opens the clients in it, and the list over the page. */
#lostListsContent .lr-num{cursor:pointer;border-bottom:1.5px dotted var(--muted2,var(--muted));padding-bottom:1px}
@media(hover:hover){#lostListsContent .lr-num:hover{border-bottom-style:solid;color:var(--accent)}}
#lostListsContent .lr-num:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:3px}
body.lr-modal-open{overflow:hidden}
.lr-modal{position:fixed;inset:0;z-index:500;background:rgba(20,16,14,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.lr-modal-box{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.35);width:min(980px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.lr-modal-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 10px;border-bottom:1px solid var(--border)}
.lr-modal-hd h3{font-family:'Playfair Display',serif;font-size:20px;font-weight:600;margin:0 0 2px}
.lr-modal-hd p{margin:0}
.lr-modal-body{overflow:auto;-webkit-overflow-scrolling:touch;padding:6px 18px 16px}
.lr-modal .lr-logt th,.lr-modal .lr-logt td{text-align:left;white-space:normal;vertical-align:top}
.lr-modal .lr-dsvc{min-width:180px;color:var(--muted)}
@media(max-width:760px){.lr-modal{padding:0;align-items:flex-end}.lr-modal-box{border-radius:14px 14px 0 0;max-height:92vh;width:100%}.lr-modal-hd{padding:14px 14px 8px}.lr-modal-body{padding:4px 12px 14px}}

/* The Outcome filter takes several picks (Kate, 26 Oct 2026). */
#lostListsContent .lr-multi{position:relative;display:inline-block}
#lostListsContent .lr-multi-btn{cursor:pointer;text-align:left;min-width:150px}
#lostListsContent .lr-multi-pop{position:absolute;z-index:30;left:0;top:calc(100% + 6px);min-width:260px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-card-hover,0 10px 30px rgba(0,0,0,.25));padding:8px}
#lostListsContent .lr-multi-pop label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}
#lostListsContent .lr-multi-pop label span.slv-note{margin-left:auto}
@media(hover:hover){#lostListsContent .lr-multi-pop label:hover{background:var(--surface2)}}
#lostListsContent .lr-multi-pop input{width:16px;height:16px;accent-color:var(--text)}
#lostListsContent .lr-multi-ft{display:flex;gap:8px;padding:8px 6px 2px;border-top:1px solid var(--border);margin-top:4px}
.lr-chat,#lostListsContent .lr-chat{font-size:12px;white-space:nowrap;margin-left:6px;color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.lr-copy{cursor:copy;border-radius:3px}
@media(hover:hover){.lr-copy:hover{background:var(--surface2);text-decoration:underline dotted;text-underline-offset:3px}}
.lr-copy:focus-visible{outline:2px solid var(--text);outline-offset:1px}
.lr-logt td .lr-copy.slv-note{display:inline-block;white-space:nowrap}
#lostListsContent .ll-tag.lr-late{background:rgba(220,60,60,.14);font-weight:600}
/* the pop-up lists use the log's columns: Branch stays put on a sideways scroll */
.lr-modal .lr-logt th:first-child,.lr-modal .lr-logt td:first-child{position:sticky;left:0;z-index:2;background:var(--bg);box-shadow:1px 0 0 var(--border);min-width:96px}
.lr-modal .lr-logt td:nth-child(2){min-width:190px}
.lr-modal .lr-logt td:nth-child(8){min-width:150px}

/* Money from the bookings, graph view (29 Oct 2026): one scale, bars with their value at the end */
#lostListsContent .lr-gpanel{margin:0 0 14px}
#lostListsContent .lr-gpanel .slv-note{margin:0 0 12px}
#lostListsContent .lr-grow{display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;align-items:center;padding:7px 0}
#lostListsContent .lr-glab{font-weight:600;font-size:13.5px}
#lostListsContent .lr-glab small{display:block;font-weight:400;font-size:12px;color:var(--muted);line-height:1.35}
#lostListsContent .lr-glines{display:grid;gap:5px;min-width:0}
#lostListsContent .lr-gline{display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:10px;font-variant-numeric:tabular-nums;font-size:13px}
#lostListsContent .lr-gline b{white-space:nowrap;font-weight:600}
#lostListsContent .lr-gline b em{font-style:normal;font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
#lostListsContent .lr-gtrack{display:flex;height:20px;min-width:0}
#lostListsContent .lr-gtrack i{display:block;height:100%;border-radius:0 5px 5px 0;cursor:pointer;transition:filter 120ms}
#lostListsContent .lr-gtrack i:hover{filter:brightness(1.12)}
#lostListsContent .lr-gtrack i:focus-visible,#lostListsContent .lr-gstack i:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
#lostListsContent .lr-gstack{display:flex;height:30px;border-radius:7px;overflow:hidden;margin:2px 0 10px;background:var(--border2)}
#lostListsContent .lr-gstack i{display:block;height:100%;cursor:pointer;transition:filter 120ms}
#lostListsContent .lr-gstack i:hover{filter:brightness(1.12)}
#lostListsContent .d-spent{background:var(--warn)}
#lostListsContent .lr-c0{background:var(--good)}
#lostListsContent .lr-c1{background:var(--ll-blue-bar)}
#lostListsContent .lr-c2{background:#9B7FC4}
#lostListsContent .lr-c3{background:var(--ll-gold-bar)}
#lostListsContent .lr-c4{background:var(--muted)}
#lostListsContent .lr-gcall{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--warn);background:var(--surface2);border-radius:0 8px 8px 0;font-size:13.5px}
#lostListsContent .lr-gnote{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
@media (max-width:640px){
  #lostListsContent .lr-grow{grid-template-columns:minmax(0,1fr);gap:4px}
  #lostListsContent .lr-gline{grid-template-columns:minmax(0,1fr) 96px}
}
/* Warm or standard? (Kate, 2 Nov 2026, Option B): verdict banner and one card per side on the Lost Performance report. */
#lostListsContent .ws-verdict{margin:12px 0 14px;padding:14px 16px;border-radius:12px;background:var(--good-bg);border:1px solid var(--good)}
#lostListsContent .ws-vh{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:var(--good);margin:0 0 10px}
#lostListsContent .ws-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#lostListsContent .ws-stat{background:var(--surface);border-radius:10px;padding:10px 12px;border:1px solid var(--border)}
#lostListsContent .ws-stat .k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
#lostListsContent .ws-stat .v{font-size:19px;font-weight:700;margin:4px 0 2px;font-variant-numeric:tabular-nums}
#lostListsContent .ws-stat .v s{text-decoration:none;color:var(--muted);font-weight:500;font-size:15px}
#lostListsContent .ws-stat .x{font-size:12px;color:var(--good);font-weight:600}
#lostListsContent .ws-caution{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
#lostListsContent .ws-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#lostListsContent .ws-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-card);padding:14px 16px}
#lostListsContent .ws-card.ws-won{border-color:var(--good);box-shadow:var(--shadow-card)}
#lostListsContent .ws-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#lostListsContent .ws-hd h4{font-family:'Playfair Display',serif;font-size:20px;margin:0}
#lostListsContent .ws-win{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--good);background:var(--good-bg);border-radius:20px;padding:3px 10px}
#lostListsContent .ws-who{font-size:12.5px;color:var(--muted);margin:2px 0 10px}
#lostListsContent .ws-big{font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
#lostListsContent .ws-bigl{font-size:13px;color:var(--muted);margin:4px 0 8px}
#lostListsContent .ws-bar{height:10px;border-radius:6px;background:var(--surface2);overflow:hidden;margin:3px 0 12px}
#lostListsContent .ws-bar i{display:block;height:100%;background:var(--good);border-radius:6px}
#lostListsContent .ws-card.ws-lost .ws-bar i{background:var(--muted2)}
#lostListsContent .ws-r{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--border2);font-size:14px;font-variant-numeric:tabular-nums}
#lostListsContent .ws-r span:first-child{color:var(--muted)}
#lostListsContent .ws-r b{font-weight:600;text-align:right}
#lostListsContent .ws-r small{color:var(--muted);font-weight:400;font-size:12px}
#lostListsContent .ws-txt{font-size:12.5px;color:var(--muted);margin:10px 0 0;padding-top:8px;border-top:1px solid var(--border2)}
@media(max-width:760px){#lostListsContent .ws-cols,#lostListsContent .ws-stats{grid-template-columns:1fr}}
#lostListsContent .ws-flat{background:var(--surface2);border-color:var(--border)}
#lostListsContent .ws-flat .ws-vh{color:var(--text)}
#lostListsContent .ws-card .lr-num{cursor:pointer}
#lostListsContent .ws-stat,#lostListsContent .ws-card{min-width:0}
#lostListsContent .ws-stat .v{overflow-wrap:anywhere}
#lostListsContent .ws-r{flex-wrap:wrap}
#lostListsContent .ws-card:not(.ws-won):not(.ws-lost) .ws-bar i{background:var(--muted2)}