/* HubMaster V2 — stylesheet. Dark MLFG glass dashboard by default; light theme via [data-theme=light]. */
:root{
  --bg:#0a0f1c; --bg2:#0e1116; --panel:#10151f; --panel2:#141a26; --card:#161d2b; --hover:rgba(255,255,255,.035);
  --ln:rgba(255,255,255,.07); --ln2:rgba(255,255,255,.12);
  --tx:#e8eefc; --tx2:#c3cde0; --mt:#8fa0c9; --mt2:#66769a;
  --teal:#36d6c3; --teal-ink:#04211a; --teal-soft:rgba(54,214,195,.14);
  --lg:#5b9bff; --q:#b08bff; --a:#46e0a0; --ad:#8fa0c9;
  --red:#ff6b7a; --red-soft:rgba(255,107,122,.14); --amber:#f2b94b; --amber-soft:rgba(242,185,75,.14); --green:#46e0a0; --green-soft:rgba(70,224,160,.14);
  --focus:#7fe3d6; --shadow:0 18px 50px rgba(0,0,0,.45);
  --r:12px; --r2:8px; --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --disp:"Space Grotesk",var(--sans); --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --side:232px; --ctx:58px;
}
:root[data-theme=light]{
  --bg:#f3f5f9; --bg2:#ffffff; --panel:#ffffff; --panel2:#f7f9fc; --card:#ffffff; --hover:rgba(10,20,40,.035);
  --ln:rgba(10,20,40,.09); --ln2:rgba(10,20,40,.16);
  --tx:#111a2e; --tx2:#26324d; --mt:#5a6986; --mt2:#8491ab;
  --teal:#0f9f8f; --teal-ink:#ffffff; --teal-soft:rgba(15,159,143,.12);
  --lg:#2f6fe0; --q:#7b4fd6; --a:#15935e; --ad:#5a6986;
  --red:#d33b4c; --red-soft:rgba(211,59,76,.12); --amber:#b57a07; --amber-soft:rgba(181,122,7,.14); --green:#15935e; --green-soft:rgba(21,147,94,.12);
  --focus:#0f9f8f; --shadow:0 18px 50px rgba(20,30,60,.16);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font:13.5px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
body{overflow:hidden}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--disp);margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:20px}h2{font-size:16px}h3{font-size:14px}
.muted{color:var(--mt)}.muted2{color:var(--mt2)}.small{font-size:12px}.xs{font-size:11px}
.right{text-align:right}.center{text-align:center}
.nowrap{white-space:nowrap}
.hide{display:none!important}

/* ── app frame ── */
#app{height:100%;display:grid;grid-template-columns:var(--side) 1fr;grid-template-rows:100%}
.side{background:var(--bg2);border-right:1px solid var(--ln);display:flex;flex-direction:column;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 12px}
.brand .logo{width:34px;height:34px;display:block;object-fit:contain;flex:none}
.brand b{font:600 15px var(--disp)}
.brand small{display:block;color:var(--mt2);font-size:10.5px;margin-top:1px;font-style:italic;white-space:nowrap}
.nav{padding:4px 10px;flex:1;overflow:auto}
.nav .grp{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt2);padding:14px 8px 6px;font-weight:600}
.nav .grp.sep{border-top:1px solid var(--ln);margin-top:8px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--tx2);font-weight:500;font-size:13px}
.nav a:hover{background:var(--hover);text-decoration:none}
.nav a[aria-current=page]{background:var(--teal-soft);color:var(--tx)}
.nav a[aria-current=page] svg{color:var(--teal)}
.nav svg{width:17px;height:17px;flex:none;color:var(--mt)}
.nav .sub{padding-left:22px}
.nav .sub a{padding:5px 10px 5px 15px;font-size:12.5px;color:var(--mt)}
.nav .sub a[aria-current=page]{color:var(--tx)}
.side .foot{border-top:1px solid var(--ln);padding:10px}
.side .foot .me{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:9px}
.side .foot .me .av{width:28px;height:28px;border-radius:50%;background:var(--panel2);border:1px solid var(--ln2);display:grid;place-items:center;font:600 11px var(--disp);color:var(--tx2)}
.side .foot .me .who{min-width:0;flex:1}
.side .foot .me .who b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .foot .me .who span{display:block;font-size:11px;color:var(--mt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .foot .row{display:flex;gap:6px;margin-top:6px}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.ctx{min-height:var(--ctx);display:flex;align-items:center;gap:10px;padding:6px 18px;border-bottom:1px solid var(--ln);background:var(--bg2);flex:none;flex-wrap:wrap;position:relative}
/* 2026-10-13 — the thin moving line under the header while the range on screen is still loading */
.busybar{position:absolute;left:0;right:0;bottom:-1px;height:2px;display:none;overflow:hidden;background:linear-gradient(90deg,transparent 0%,var(--teal) 50%,transparent 100%);background-size:35% 100%;background-repeat:no-repeat;animation:busy 1.1s linear infinite}
.busybar.on{display:block}
@keyframes busy{from{background-position:-35% 0}to{background-position:135% 0}}
/* the previous range stays on screen, greyed, while the next one loads */
.stale-data{opacity:.42;filter:grayscale(.55);pointer-events:none;user-select:none;transition:opacity .25s}
.stale-note{display:flex;align-items:center;gap:8px}
.stale-note .spin{width:12px;height:12px;border:2px solid var(--ln2);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;flex:none}
.ctx .title{font:600 15px var(--disp);margin-right:6px;white-space:nowrap}
.ctx .spacer{flex:1}
.ctx .fresh{font-size:11.5px;color:var(--mt);white-space:nowrap;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-left:auto}
.ctx .fresh span:last-child{overflow:hidden;text-overflow:ellipsis}
#hmQuick .chip{padding:3px 8px;font-size:11.5px;min-height:26px}
.ctx .fresh .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.ctx .fresh .dot.warn{background:var(--amber)}.ctx .fresh .dot.bad{background:var(--red)}.ctx .fresh .dot.off{background:var(--mt2)}
.page{flex:1;overflow:auto;padding:18px 22px 40px;scroll-behavior:smooth}
.page > .wrap{max-width:1440px;margin:0 auto}
.menubtn{display:none}
.side-ov{display:none}

/* ── buttons / inputs / chips ── */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ln2);background:var(--panel);color:var(--tx);border-radius:var(--r2);padding:6px 11px;font-size:12.5px;font-weight:500;line-height:1.3;min-height:32px;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:var(--teal-ink);font-weight:700}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--red);border-color:rgba(255,107,122,.4)}
.btn.sm{padding:3px 8px;min-height:26px;font-size:12px}
.btn.wide{width:100%;justify-content:center;min-height:40px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.on{background:var(--teal-soft);border-color:var(--teal);color:var(--tx)}
.btn svg{width:14px;height:14px}
.ghost{border:1px solid transparent;color:var(--mt);border-radius:var(--r2);padding:4px 8px;display:inline-flex;align-items:center;gap:5px;min-height:28px}
.ghost:hover{background:var(--hover);color:var(--tx)}
.ghost svg{width:16px;height:16px}
input.in,select.in,textarea.in{background:var(--panel);border:1px solid var(--ln2);border-radius:var(--r2);padding:6px 10px;min-height:32px;font-size:12.5px;color:var(--tx)}
input.in::placeholder{color:var(--mt2)}
select.in{padding-right:26px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mt) 50%),linear-gradient(135deg,var(--mt) 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px;background-repeat:no-repeat}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--ln2);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--tx2);background:var(--panel);min-height:28px;display:inline-flex;align-items:center;gap:6px}
.chip:hover{background:var(--hover)}
.chip.on{background:var(--teal-soft);border-color:var(--teal);color:var(--tx)}
.chip .n{color:var(--mt2);font-family:var(--mono);font-size:11px}
.chip.lg.on{border-color:var(--lg)}.chip.q.on{border-color:var(--q)}.chip.a.on{border-color:var(--a)}
.seg{display:inline-flex;border:1px solid var(--ln2);border-radius:var(--r2);overflow:hidden;background:var(--panel)}
.seg button{padding:5px 11px;font-size:12.5px;color:var(--mt);border-right:1px solid var(--ln);min-height:30px}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--teal-soft);color:var(--tx)}
.tag{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid var(--ln2);color:var(--mt)}
.tag.red{color:var(--red);border-color:rgba(255,107,122,.4);background:var(--red-soft)}
.tag.amber{color:var(--amber);border-color:rgba(242,185,75,.4);background:var(--amber-soft)}
.tag.green{color:var(--green);border-color:rgba(70,224,160,.35);background:var(--green-soft)}
.tag.teal{color:var(--teal);border-color:rgba(54,214,195,.4);background:var(--teal-soft)}
.tag.lg{color:var(--lg);border-color:currentColor}.tag.q{color:var(--q);border-color:currentColor}.tag.a{color:var(--a);border-color:currentColor}.tag.ad{color:var(--mt);border-color:currentColor}
.tag.role{background:transparent}

/* ── cards & panels ── */
.card{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:14px 16px}
.card + .card{margin-top:12px}
.card .ch{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.card .ch h3{font-size:13.5px}
.card .ch .sub{color:var(--mt);font-size:12px}
.card .ch .sp{flex:1}
.grid{display:grid;gap:12px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.stat{padding:10px 12px;border:1px solid var(--ln);border-radius:var(--r2);background:var(--panel)}
.stat .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mt2);font-weight:600}
.stat .v{font:600 22px/1.15 var(--disp);margin:4px 0 2px;font-variant-numeric:tabular-nums}
.stat .v small{font:500 13px var(--sans);color:var(--mt);margin-left:4px}
.stat .s{font-size:11.5px;color:var(--mt)}
.stat.click{cursor:pointer}.stat.click:hover{border-color:var(--ln2);background:var(--hover)}
.stat.na .v{color:var(--mt2)}
.notice{border:1px solid var(--ln2);border-left:3px solid var(--mt);border-radius:var(--r2);padding:9px 12px;font-size:12.5px;color:var(--tx2);background:var(--panel);margin:0 0 12px}
.notice.warn{border-left-color:var(--amber)}.notice.bad{border-left-color:var(--red)}.notice.ok{border-left-color:var(--green)}.notice.info{border-left-color:var(--teal)}
.empty{padding:28px 14px;text-align:center;color:var(--mt);font-size:13px;border:1px dashed var(--ln2);border-radius:var(--r);background:transparent}
.empty b{display:block;color:var(--tx2);margin-bottom:4px}
.loading{display:flex;align-items:center;gap:9px;color:var(--mt);padding:14px 4px;font-size:12.5px}
.spin{width:14px;height:14px;border:2px solid var(--ln2);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--panel),var(--panel2),var(--panel));background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:6px;height:12px}
@keyframes sk{to{background-position:-200% 0}}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:12.5px}
.kv dt{color:var(--mt);white-space:nowrap}.kv dd{margin:0;color:var(--tx2)}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.toolbar .sp{flex:1}
.hint{font-size:11.5px;color:var(--mt2)}
.srcline{font-size:11.5px;color:var(--mt2);margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

/* ── tables ── */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.tbl th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mt2);text-align:left;padding:8px 10px;border-bottom:1px solid var(--ln2);white-space:nowrap;font-weight:600;position:sticky;top:0;background:var(--card);z-index:2}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--ln);vertical-align:top}
.tbl tr:hover td{background:var(--hover)}
.tbl th.r,.tbl td.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl td.num{font-family:var(--mono);font-size:12px}
.tbl .sub{display:block;font-size:11px;color:var(--mt2);margin-top:1px;font-family:var(--sans)}
.tbl tr.tot td{font-weight:600;border-top:1px solid var(--ln2);background:var(--panel2)}
.tbl th.sort{cursor:pointer}.tbl th.sort:hover{color:var(--tx)}
.tbl th.sort.on{color:var(--teal)}
.scrollx{overflow:auto;max-width:100%;border:1px solid var(--ln);border-radius:var(--r2)}
.scrollx .tbl th{top:0}
.linkish{color:var(--tx);border-bottom:1px dotted var(--mt2);cursor:pointer}
.linkish:hover{color:var(--teal);border-bottom-color:var(--teal)}
.stbtn{background:none;border:0;padding:0;text-align:inherit;color:inherit;font:inherit;cursor:pointer;border-radius:4px}
.stbtn:hover .v{color:var(--teal)}
.stbtn .v{text-decoration:underline dotted var(--mt2);text-underline-offset:3px}

/* ── Team Performance ── */
.team-sec{margin-bottom:18px}
.team-head{display:flex;align-items:center;gap:12px;padding:10px 38px 10px 14px;background:var(--panel);border:1px solid var(--ln);border-radius:var(--r) var(--r) 0 0;cursor:pointer;flex-wrap:wrap;position:relative}
.team-head:hover{background:var(--panel2)}
.team-head .rname{font:600 14px var(--disp);display:flex;align-items:center;gap:8px}
.team-head .rname i{width:8px;height:8px;border-radius:50%;display:inline-block}
.team-head .cnt{color:var(--mt);font-size:12px}
.team-head .sum{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.team-head .sum div{font-size:12px;color:var(--mt)}
.team-head .sum b{display:block;font:600 14px var(--disp);color:var(--tx);font-variant-numeric:tabular-nums}
.team-head .chev{color:var(--mt2);transition:transform .15s;position:absolute;right:12px;top:50%;margin-top:-8px}
.team-head[aria-expanded=false] .chev{transform:rotate(-90deg)}
.team-head[aria-expanded=false]{border-radius:var(--r)}
.team-body{border:1px solid var(--ln);border-top:0;border-radius:0 0 var(--r) var(--r);background:var(--card);overflow:hidden}
.ttable{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.ttable th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mt2);text-align:left;padding:7px 10px;border-bottom:1px solid var(--ln);font-weight:600;white-space:normal;line-height:1.2;background:var(--panel2);vertical-align:bottom}
.ttable th.r,.ttable td.r{text-align:right}
.ttable td{padding:9px 10px;border-bottom:1px solid var(--ln);vertical-align:middle}
.ttable tr.rep{cursor:pointer}
.ttable tr.rep:hover td{background:var(--hover)}
.ttable tr.rep[aria-expanded=true] td{background:var(--teal-soft);border-bottom-color:transparent}
.ttable tr.former td{opacity:.75}
.ttable .who{display:flex;align-items:center;gap:9px;min-width:0}
.ttable .who .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--disp);color:var(--tx);background:var(--panel2);border:1px solid var(--ln2);flex:none}
.ttable .who .nm{min-width:0}
.ttable .who .nm b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttable .who .nm span{display:block;font-size:11px;color:var(--mt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttable .chevc{width:28px;color:var(--mt2);padding-left:8px}
.ttable tr[aria-expanded=true] .chevc svg{transform:rotate(180deg)}
.m{display:block;line-height:1.2;width:100%;max-width:100%;min-width:0;text-align:inherit;padding:0}
.ttable td{overflow:hidden}
.m .v{font:600 13.5px var(--disp);font-variant-numeric:tabular-nums;color:var(--tx)}
.m .s{display:block;font-size:11px;color:var(--mt2);margin-top:2px;font-variant-numeric:tabular-nums;white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m.na .v{color:var(--mt2);font-weight:500}
.m.click{cursor:pointer;border-radius:4px}
.m.click:hover .v{color:var(--teal)}
.m.warn .v{color:var(--amber)}.m.bad .v{color:var(--red)}.m.good .v{color:var(--green)}
.flagbtn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ln2);border-radius:999px;padding:3px 8px;font-size:11px;font-weight:600;color:var(--mt);background:var(--panel);min-height:26px;white-space:nowrap;max-width:100%}
.flagbtn .d{color:var(--red)}.flagbtn .w{color:var(--amber)}
.flagbtn.has{border-color:rgba(255,107,122,.45)}
.flagbtn.has.wonly{border-color:rgba(242,185,75,.5)}
.flagbtn.none{color:var(--mt2);border-style:dashed}
.flagbtn:hover{background:var(--hover)}
.xrow td{background:var(--panel)!important;padding:0 0 14px!important;border-bottom:1px solid var(--ln2)!important}
.xp{padding:14px 16px 4px}
.xp .xhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.xp .xhead .sp{flex:1}
.xg{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.xgrp{border:1px solid var(--ln);border-radius:var(--r2);background:var(--card);padding:11px 13px;min-width:0}
.xgrp h4{font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tx2);font-weight:600;margin:0 0 10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xgrp h4 .sub{display:block;font:400 11px/1.3 var(--sans);color:var(--mt2);text-transform:none;letter-spacing:0;white-space:normal;margin-top:2px}
.xgrp.wide{grid-column:1/-1}
.xgrp.ex{border-color:rgba(255,107,122,.3)}
.ml{display:grid;grid-template-columns:minmax(96px,1fr) minmax(0,1.3fr);gap:6px 10px;font-size:12.5px;align-items:baseline}
.ml .k{color:var(--mt)}
.ml .v{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.ml .v small{display:block;font-weight:400;color:var(--mt2);font-size:11px;line-height:1.25}
.ml button.v{color:var(--tx);text-decoration:underline dotted var(--mt2);text-underline-offset:3px}
.ml button.v:hover{color:var(--teal)}
.issue{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;padding:8px 10px;border:1px solid var(--ln);border-radius:var(--r2);margin-bottom:6px;align-items:start;background:var(--panel)}
.issue .sev{width:8px;height:8px;border-radius:50%;margin-top:6px}
.issue .sev.d{background:var(--red)}.issue .sev.w{background:var(--amber)}.issue .sev.i{background:var(--mt2)}.issue .sev.m{background:var(--green)}.issue .sev.x{background:var(--teal)}
.issue .t{font-weight:600;font-size:12.5px}
.issue .dsc{font-size:11.5px;color:var(--mt);grid-column:2}
.issue .act{grid-column:3;grid-row:1/3}
.issue .kind{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mt2);margin-right:6px}

/* split of tracked time: on calls (teal) · other (amber) · idle (red) */
.tsplit{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
.tsplit .bar3{flex:1;height:8px;border-radius:4px;background:var(--panel2);overflow:hidden;display:flex;min-width:40px}
.tsplit .bar3 i{display:block;height:100%}
.tsplit .bar3 .on{background:var(--teal)}.tsplit .bar3 .oth{background:var(--amber)}.tsplit .bar3 .idle{background:var(--red)}
.tsplit .pct{font:600 12.5px var(--disp);font-variant-numeric:tabular-nums;color:var(--tx);min-width:34px;text-align:right}
.tsplit.na .pct{color:var(--mt2)}
.tsplit.big .bar3{height:14px}
.tsplit-legend{display:inline-flex;gap:12px;font-size:11px;color:var(--mt2);align-items:center}
.tsplit-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.m .tsplit .s{display:none}

/* ── inspector drawer ── */
.insp-ov{position:fixed;inset:0;background:rgba(3,6,14,.55);z-index:900;display:none;backdrop-filter:blur(2px)}
.insp-ov.on{display:block}
.insp{position:fixed;top:0;right:0;bottom:0;width:min(640px,96vw);background:var(--bg2);border-left:1px solid var(--ln2);box-shadow:var(--shadow);z-index:901;transform:translateX(102%);transition:transform .18s ease;display:flex;flex-direction:column}
.insp.on{transform:none}
.insp .ih{padding:14px 18px 10px;border-bottom:1px solid var(--ln)}
.insp .ih .crumbs{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mt2);margin-bottom:6px;flex-wrap:wrap}
.insp .ih .crumbs button{color:var(--mt);text-decoration:underline dotted}
.insp .ih .top{display:flex;align-items:flex-start;gap:10px}
.insp .ih h2{font-size:16px;flex:1}
.insp .ih .sub{color:var(--mt);font-size:12.5px;margin-top:3px}
.insp .ih .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 14px;margin-top:10px;font-size:12px}
.insp .ih .facts div span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mt2)}
.insp .ih .facts div b{font-weight:600;color:var(--tx2)}
.insp .ib{flex:1;overflow:auto;padding:12px 18px 24px}
.insp .ib .tbl th{background:var(--bg2)}
.insp .rule{font-size:12px;color:var(--mt);border:1px solid var(--ln);border-radius:var(--r2);padding:8px 10px;margin:0 0 10px;background:var(--panel)}
.insp .rule b{color:var(--tx2)}
.insp .daygrp{margin:12px 0 4px;font:600 12px var(--disp);color:var(--tx2);display:flex;gap:10px;align-items:baseline}
.insp .daygrp span{color:var(--mt2);font:400 11.5px var(--sans)}
.insp .ib .summary{font-size:12.5px;color:var(--tx2);margin:0 0 10px}
.xbtn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--mt);border:1px solid transparent}
.xbtn:hover{background:var(--hover);color:var(--tx)}

/* compact centred card for the issues view */
.insp.compact{top:50%;left:50%;right:auto;bottom:auto;width:min(640px,94vw);max-height:82vh;border:1px solid var(--ln2);border-radius:14px;transform:translate(-50%,-50%) scale(.98);transition:transform .14s ease,opacity .14s ease;opacity:0;pointer-events:none}
.insp.compact.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.insp.compact .ih{padding:12px 16px 8px}
.insp.compact .ih .facts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:6px}
.insp.compact .ib{padding:8px 16px 14px}
.issue.tight{padding:6px 10px;margin-bottom:4px;gap:2px 10px;align-items:center}
.issue.tight .t{font-weight:500}
.issue .dsc-inline{color:var(--mt2);font-weight:400;font-size:11.5px}
.sevhead{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt2);font-weight:600;margin:8px 0 4px}
.sevhead.d{color:var(--red)}.sevhead.w{color:var(--amber)}
.issue-list{display:flex;flex-direction:column;gap:4px}
button.issue.click{width:100%;text-align:left;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;padding:7px 10px;cursor:pointer;font:inherit;color:inherit}
button.issue.click:hover{border-color:var(--ln2);background:var(--hover)}
button.issue.click .t{font-weight:500}
button.issue.click .dsc{grid-column:2;font-size:11.5px}
.backchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ln2);background:var(--panel);color:var(--tx2);border-radius:999px;padding:4px 10px 4px 8px;font-size:12px;min-height:30px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backchip:hover{background:var(--hover);color:var(--tx)}
.backchip svg{flex:none}

/* ── calendar beside a dated list ── */
.withcal{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;align-items:start}
.calside{position:sticky;top:0}
.calmain{min-width:0}
.cal{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:10px 12px 12px}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.calhead b{font:600 13px var(--disp)}
.calhead .ghost{min-height:26px;padding:2px 8px;font-size:15px;line-height:1}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.calgrid .dow{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--mt2);text-align:center;padding:2px 0 4px}
.cd{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:34px;border-radius:7px;border:1px solid transparent;color:var(--mt);font-size:12px;cursor:pointer;padding:0}
.cd.pad{cursor:default}
.cd:hover:not(.pad){background:var(--hover);color:var(--tx)}
.cd.inr{background:var(--panel2)}
.cd.has{color:var(--tx);font-weight:600}
.cd .c{font-size:9.5px;line-height:1;color:var(--teal);font-weight:600;margin-top:1px}
.cd.today{border-color:var(--ln2)}
.cd.today .n{text-decoration:underline;text-underline-offset:2px}
.cd.sel{background:var(--teal-soft);border-color:var(--teal);color:var(--tx)}
.calsel{margin-top:10px;border-top:1px solid var(--ln);padding-top:8px}
.calsel-h{font-size:12px;font-weight:600;color:var(--tx2);margin-bottom:4px}
.calsel-h span{display:block;font-weight:400;color:var(--mt2);font-size:11px}
.calitem{display:block;width:100%;text-align:left;font-size:11.5px;color:var(--tx2);padding:4px 6px;border-radius:6px;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.calitem:hover{background:var(--hover);border-color:var(--ln);color:var(--tx)}
.jumpable.flash{outline:2px solid var(--teal);outline-offset:2px;transition:outline-color 1.2s ease}
tr.jumpable.flash td{background:var(--teal-soft)!important}
@media (max-width:1100px){.withcal{grid-template-columns:1fr}.calside{position:static}}

/* ── compare ── */
.cpslot select{margin-top:4px}
.tbl.cmp tr.sec td{background:var(--panel2);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt2);font-weight:600;padding:6px 10px}
.tbl.cmp th .sub{text-transform:none;letter-spacing:0;font-weight:400}
.delta{font-weight:600;color:var(--tx)}

/* ── misc components ── */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9998;background:var(--panel);color:var(--tx);border:1px solid var(--ln2);border-radius:11px;padding:10px 16px;font-size:12.5px;box-shadow:var(--shadow);max-width:min(90vw,520px)}
.toast.bad{border-color:rgba(255,107,122,.5)}
.hm-waitnote{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999;background:rgba(14,20,34,.96);color:#cfd8e8;border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:10px 16px;font:500 12.5px/1.45 var(--sans);box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:min(90vw,460px);text-align:center;pointer-events:none;backdrop-filter:blur(8px);display:none}
.hm-login{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(5,8,16,.92);backdrop-filter:blur(4px)}
.hm-login-card{width:min(380px,92vw);background:#0d1425;border:1px solid #223052;border-radius:14px;padding:26px 24px;box-shadow:0 18px 60px rgba(0,0,0,.55);color:#e8eefc}
.hm-login-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hm-login-head h1{font-size:16px;color:#e8eefc}
.hm-logo{width:34px;height:34px;display:block;object-fit:contain;flex:none}
.hm-login-by{font-size:11px;color:#8fa0c9;font-style:italic;margin-top:1px}
.hm-login-sub{color:#8fa0c9;font-size:12px;margin:0 0 16px}
.hm-field{display:block;margin-bottom:10px}
.hm-field span{display:block;font-size:11px;color:#8fa0c9;margin-bottom:4px}
.hm-field input{width:100%;background:#0a101f;border:1px solid #2a3a63;border-radius:8px;color:#e8eefc;padding:10px 12px;font-size:14px}
.hm-login-err{color:#ff7b8a;font-size:12px;min-height:16px;margin:4px 0 8px}
.hm-login .btn.primary{background:#28d4b2;border-color:#28d4b2;color:#04211a}
.pop{position:absolute;z-index:500;background:var(--panel);border:1px solid var(--ln2);border-radius:var(--r);box-shadow:var(--shadow);padding:12px;min-width:280px}
.pop .lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt2);margin:8px 0 6px;font-weight:600}
.pop .custom{display:flex;align-items:center;gap:6px}
.pop .custom input{flex:1;min-width:0}
.dr{position:relative}
#hmDate{display:flex;align-items:center;gap:8px}
.audio-bar{position:sticky;bottom:0;z-index:50;background:var(--bg2);border:1px solid var(--ln2);border-radius:var(--r);padding:10px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;box-shadow:var(--shadow);margin-top:14px}
.audio-bar .meta b{display:block;font-size:13px}
.audio-bar .meta span{font-size:11.5px;color:var(--mt)}
.audio-bar audio{width:100%}
.audio-bar .ctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.drive-player iframe{display:block;border:0;border-radius:8px;background:var(--panel2)}
.drive-player .hint{margin-top:4px}
.crumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mt);margin-bottom:10px}
.crumb a{color:var(--mt)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--ln);margin-bottom:14px;overflow:auto}
.tabs button{padding:8px 12px;color:var(--mt);border-bottom:2px solid transparent;font-weight:500;white-space:nowrap;min-height:36px}
.tabs button.on{color:var(--tx);border-bottom-color:var(--teal)}
.tabs button:hover{color:var(--tx)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px}
.ok{color:var(--green)}.bad{color:var(--red)}.warn{color:var(--amber)}
.bar{height:6px;background:var(--panel2);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal)}
iframe.legacy{width:100%;height:calc(100vh - var(--ctx) - 2px);border:0;background:var(--bg);display:block}
.page.flush{padding:0}
.help{font-size:12px;color:var(--mt);margin:-4px 0 12px}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer}
.switch input{appearance:none;width:34px;height:20px;border-radius:999px;background:var(--panel2);border:1px solid var(--ln2);position:relative;cursor:pointer;margin:0}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--mt);transition:transform .15s}
.switch input:checked{background:var(--teal-soft);border-color:var(--teal)}
.switch input:checked::after{transform:translateX(14px);background:var(--teal)}
.switch input[disabled]{opacity:.5;cursor:not-allowed}
.acc-grid{overflow:auto;border:1px solid var(--ln);border-radius:var(--r2)}
.acc-grid table{border-collapse:separate;border-spacing:0;font-size:12px;min-width:100%}
.acc-grid th{position:sticky;top:0;background:var(--panel2);padding:6px 8px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mt2);border-bottom:1px solid var(--ln2);white-space:nowrap;z-index:2}
.acc-grid td{padding:5px 8px;border-bottom:1px solid var(--ln);text-align:center;white-space:nowrap}
.acc-grid td:first-child,.acc-grid th:first-child{text-align:left;position:sticky;left:0;background:var(--card);z-index:3}
.acc-grid .sub{display:block;font-size:11px;color:var(--mt2);font-weight:400}
.acc-grid td.on{color:var(--green)}.acc-grid td.off{color:var(--mt2)}.acc-grid td.ovr{font-weight:700}
.kpi-rule{display:grid;grid-template-columns:1.6fr 1fr .8fr .8fr auto;gap:6px;align-items:center;margin-bottom:6px}
.progress{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden;margin:6px 0}
.progress i{display:block;height:100%;background:var(--teal);transition:width .3s}
.pill-list{display:flex;flex-wrap:wrap;gap:6px}
.q-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}
.sched-day h3{margin:14px 0 8px;display:flex;gap:10px;align-items:baseline}
.sched-day h3 span{color:var(--mt2);font:400 12px var(--sans)}
.appt{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:9px 12px;border:1px solid var(--ln);border-radius:var(--r2);margin-bottom:6px;background:var(--panel);align-items:center}
.appt .t{font:600 13px var(--mono);color:var(--tx)}
.appt .t small{display:block;font:400 10.5px var(--sans);color:var(--mt2)}
.appt .c b{font-weight:600}
.appt .c span{display:block;font-size:11.5px;color:var(--mt)}
.appt.past{opacity:.85}
.menu{position:absolute;z-index:970;background:var(--panel);border:1px solid var(--ln2);border-radius:var(--r2);box-shadow:var(--shadow);padding:6px;min-width:200px}
.menu button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:6px;font-size:12.5px}
.menu button:hover{background:var(--hover)}
.menu button.danger{color:var(--red)}
.fieldset{border:1px solid var(--ln);border-radius:var(--r2);padding:10px 12px;margin-bottom:10px}
.fieldset legend{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mt2);padding:0 6px;font-weight:600}
.colpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px;font-size:12.5px}
.colpick label{display:flex;gap:7px;align-items:center;padding:3px 0}
.ovl{position:fixed;inset:0;background:rgba(3,6,14,.6);z-index:960;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg2);border:1px solid var(--ln2);border-radius:var(--r);box-shadow:var(--shadow);width:min(720px,96vw);max-height:90vh;overflow:auto;padding:18px 20px}
.modal h2{margin-bottom:10px}
.modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* ── responsive ── */
@media (max-width:1100px){.split{grid-template-columns:1fr}.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:min(84vw,300px);z-index:950;transform:translateX(-104%);transition:transform .18s}
  .side.open{transform:none;box-shadow:var(--shadow)}
  .side-ov{position:fixed;inset:0;background:rgba(3,6,14,.55);z-index:940;display:none}
  .side-ov.on{display:block}
  .menubtn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--ln2);color:var(--tx)}
  .ctx{padding:0 12px;gap:8px;height:auto;min-height:var(--ctx);flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .ctx .title{font-size:14px}
  .ctx .fresh{width:100%;order:9}
  .page{padding:12px 12px 90px}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .insp{width:100vw;border-left:0}
  .insp.compact{top:0;left:0;right:0;bottom:0;width:100vw;max-height:none;border-radius:0;border:0;transform:none}
  .insp.compact.on{transform:none}
  .team-head .sum{display:none}
  #hmQuick{display:none}
  .ttable thead{display:none}
  .ttable,.ttable tbody{display:block}
  .ttable tr.rep{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:10px 12px;border-bottom:1px solid var(--ln)}
  .ttable tr.rep td{display:block;border:0;padding:0;text-align:left;overflow:visible}
  .ttable tr.rep td.whocell{grid-column:1/-1;margin-bottom:2px}
  .ttable tr.rep td.chevc{display:none}
  .ttable tr.rep td.flagcell{grid-column:1/-1;margin-top:2px}
  .ttable tr.rep td.r::before{content:attr(data-label);display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mt2);font-weight:600;margin-bottom:1px}
  .ttable tr.rep td.r .m{text-align:left}
  .ttable tr.xrow{display:block}
  .ttable tr.xrow td{display:block;padding:0 0 10px!important}
  .xg{grid-template-columns:1fr}
  .m .s{white-space:normal}
  .audio-bar{grid-template-columns:1fr;position:fixed;left:8px;right:8px;bottom:8px;margin:0}
  .appt{grid-template-columns:60px 1fr}
  .appt .acts{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.side,.ctx,.insp,.insp-ov,.audio-bar{display:none!important}.page{overflow:visible}}

/* 2026-10-20 — VanillaSoft pipeline (62_vspipe.js): action dialog form rows */
.frow{margin:0 0 10px}.frow label{display:block;font-size:12px;color:var(--mt);margin-bottom:4px}.frow .hint{margin-top:4px}
/* 2026-10-21 — the "Edit contact details" form: sections, a grid of columns, changed ones lit teal, locked ones dimmed */
.ve-sec{border:1px solid var(--ln);border-radius:var(--r2);padding:8px 12px;margin:0 0 10px;background:var(--panel)}
.ve-sec summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--tx2);padding:2px 0;list-style:none}
.ve-sec summary::-webkit-details-marker{display:none}
.ve-sec summary::before{content:"▸";display:inline-block;width:14px;color:var(--mt);transition:transform .15s}
.ve-sec[open] summary::before{transform:rotate(90deg)}
.ve-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 14px;margin-top:8px}
.ve-grid .frow{margin-bottom:8px;min-width:0}
.frow.changed label{color:var(--teal)}.frow.changed .in{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal-soft)}
.frow.locked label{opacity:.65}.frow.locked .in{opacity:.6}
/* 2026-10-21 — the one-list Pipeline: sortable column headers and stage group rows (Sales progress) */
.tbl th .thsort{background:none;border:0;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
.tbl th .thsort:hover{color:var(--teal)}.tbl th.sorted .thsort{color:var(--teal)}
.tbl.vsbook td:first-child:not(.selc){min-width:190px}
.tbl tr.grp td{background:var(--panel2);border-top:1px solid var(--ln2);padding:7px 10px;font-family:var(--disp);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt)}
.tbl tr.grp .grp-name{color:var(--teal)}
.tbl tr.click td{cursor:default}.btn.on{border-color:var(--teal);color:var(--teal)}

/* 2026-10-20: the recording player inside the evidence drawer + ▶ cells in audit tables */
.insp-player{position:sticky;top:0;z-index:5;margin:0 0 12px;background:var(--bg)}
.insp-player .audio-bar{position:static;margin:0;grid-template-columns:1fr}.insp-player .audio-bar audio{display:block;width:100%}
.btn.play{padding:3px 8px;min-height:26px;font-size:12px;gap:4px}.btn.play.on{border-color:var(--teal);color:var(--teal)}
.player .meta .tag.ok{display:inline-block}
.tbl td .tag{white-space:nowrap}

/* ── 2026-10-24: Pipeline · Appointments · Leads redesign ── */
.tbl.vsbook td{padding:7px 10px;vertical-align:middle;line-height:1.3}
.tbl.vsbook tr.click td{cursor:default}
.tbl.vsbook .cmain{min-width:190px}
.tbl.vsbook td.selc,.tbl.vsbook th.selc{width:28px;min-width:0;max-width:34px;padding-right:0;padding-left:10px}
.tbl.vsbook td.actc{width:34px;padding-left:0}
.tbl.vsbook tr.selected td{background:var(--teal-soft)}
.tbl.vsbook .cname{font-weight:600;color:var(--tx)}.tbl.vsbook .cname:hover{color:var(--teal);text-decoration:none}
.cellbtn{background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer;display:block;max-width:100%}
.cellbtn b{font-weight:600;color:var(--tx2)}.cellbtn:hover b{color:var(--teal)}
.cellbtn .sub{display:block;font-size:11px;color:var(--mt2);margin-top:1px}
select.in.prio{min-height:26px;padding:1px 22px 1px 6px;font-size:12px}
.tag.prog{border-color:transparent;background:var(--panel2);color:var(--tx2)}
.tag.prog.p0{background:rgba(91,155,255,.14);color:var(--lg)}.tag.prog.p1{background:rgba(176,139,255,.16);color:var(--q)}.tag.prog.p2{background:var(--amber-soft);color:var(--amber)}
.tag.prog.p3{background:var(--teal-soft);color:var(--teal)}.tag.prog.p4{background:var(--green-soft);color:var(--green)}.tag.prog.p5{background:var(--green);color:var(--teal-ink)}
.ladder{display:flex;gap:3px;flex-wrap:wrap;margin:2px 0}
.ladder .step{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--ln);color:var(--mt2);background:var(--panel)}
.ladder .step.on{border-color:var(--teal);color:var(--tx)}.ladder .step.cur{background:var(--teal-soft);color:var(--teal);font-weight:700}
.toolbar.ctb{gap:6px}
.toolbar.ctb .btn.fbtn.on{border-color:var(--teal)}
.toolbar .n,.chip .n{display:inline-block;min-width:16px;padding:0 5px;border-radius:999px;background:var(--teal);color:var(--teal-ink);font-size:10.5px;font-weight:700;line-height:16px;text-align:center}
.chips.achips{margin:-4px 0 12px}
.chips.achips .chip .x{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--mt);margin-left:2px}
.chips.achips .chip .x:hover{background:var(--hover);color:var(--tx)}
.chips.achips .chip .x svg{width:12px;height:12px}
.morefl{margin-bottom:12px}
.mfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px 18px}
.mfgroup h4{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt2);margin:0 0 6px;font-weight:600}
.mfrow{margin-bottom:8px;border:1px solid transparent;border-radius:var(--r2);padding:4px 6px}
.mfrow.on{border-color:var(--teal);background:var(--teal-soft)}
.mfrow>label{display:block;font-size:12px;color:var(--mt);margin-bottom:3px}
.fpop{min-width:260px;max-width:min(360px,94vw)}
.fpop .acts{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
.flist{max-height:240px;overflow:auto;border:1px solid var(--ln);border-radius:var(--r2);padding:4px 6px;background:var(--bg2)}
.fopt{display:flex;gap:8px;align-items:center;padding:4px 2px;font-size:12.5px;cursor:pointer;color:var(--tx2)}
.fopt input{accent-color:var(--teal)}
.fpop-body .hint{font-size:11.5px}
.skelrow{display:flex;gap:14px;padding:9px 4px;border-bottom:1px solid var(--ln)}.skelrow:last-child{border:0}
.bbar{position:sticky;bottom:8px;z-index:40;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--teal);border-radius:var(--r);padding:8px 12px;margin-top:12px;box-shadow:var(--shadow)}
.bbar b{font-family:var(--disp)}
.bbar .sp{flex:1}
.dist{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid var(--ln);font-size:12.5px}.dist:last-child{border:0}.dist b{font-variant-numeric:tabular-nums}
.progress .bar{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden;margin:6px 0}.progress .bar i{display:block;height:100%;background:var(--teal);transition:width .3s}
.ccards .ccard{border:1px solid var(--ln);border-radius:var(--r);background:var(--card);padding:10px 12px;margin-bottom:8px}
.ccards .ccard.selected{border-color:var(--teal)}
.ccards .ccard .top{display:flex;align-items:center;gap:8px;margin-bottom:4px}.ccards .ccard .top .sp{flex:1}
.ccards .ccard .cname{font-weight:600;color:var(--tx)}
.ccards .ccard .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:3px 0;font-size:12px}
.ccards .ccard .row .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mt2);min-width:40px}
.vrow{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--ln)}.vrow:last-child{border:0}.vrow .linkish{flex:1;text-align:left}
.menu .sep{border-top:1px solid var(--ln);margin:4px 0}
/* the contact drawer */
.insp.contact{width:min(760px,96vw)}
.insp.contact.full{width:100vw}
.insp.contact .ih .top{align-items:center}
.insp.contact .ih .top .ghost{min-height:30px}
.insp.contact .ih .facts{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.insp.contact .ih .facts div b{display:block;margin-top:2px}
.ctabs{margin:0 0 12px}.ctabs .n{margin-left:4px;background:var(--panel2);color:var(--mt);border:1px solid var(--ln)}
.contact-page{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:16px 18px}
.contact-page .ih{border-bottom:1px solid var(--ln);padding-bottom:10px;margin-bottom:10px}
.contact-page .ih h2{font-size:18px}.contact-page .ih .sub{color:var(--mt);font-size:12.5px;margin-top:3px}
.contact-page .ih .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 14px;margin-top:10px;font-size:12px}
.contact-page .ih .facts div span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mt2)}
.contact-page .ih .facts div b{font-weight:600;color:var(--tx2);display:block;margin-top:2px}
.contact-page .ih .top{display:flex;align-items:center;gap:10px}
.jny{position:relative;padding-left:4px}
.jev{position:relative;padding:0 0 14px 22px;border-left:2px solid var(--ln);margin-left:6px}
.jev:last-child{border-left-color:transparent}
.jev .dot{position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--mt2);border:2px solid var(--bg2)}
.jev.lg .dot{background:var(--lg)}.jev.q .dot{background:var(--q)}.jev.a .dot{background:var(--a)}.jev.bad .dot{background:var(--red)}.jev.warn .dot{background:var(--amber)}
.jev .jt{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.jev .jt b{font-family:var(--disp);font-size:13px}.jev .jt .when{color:var(--mt2);font-size:11.5px}
.jev .jl{font-size:12.5px;color:var(--mt);margin-top:2px;line-height:1.5}.jev .jl b{color:var(--tx2);font-weight:600}
.applist .card.cur,.applist .appcard.cur{border-color:var(--teal)}
.applist .card+.card{margin-top:10px}
/* appointments */
.apx{display:grid;grid-template-columns:84px 1fr auto;gap:12px;padding:9px 12px;border:1px solid var(--ln);border-radius:var(--r2);margin-bottom:6px;background:var(--panel);align-items:center}
.apx.selected{border-color:var(--teal);background:var(--teal-soft)}
.apx .t{font:600 13px var(--mono);color:var(--tx)}.apx .t small{display:block;font:400 10.5px var(--sans);color:var(--mt2)}.apx .t input{margin-top:4px;accent-color:var(--teal)}
.apx .c .cname{font-weight:600;color:var(--tx)}.apx .c .sub{display:block;font-size:11.5px;color:var(--mt);margin-top:1px}
.apx .c .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.apx .acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.apx.past{opacity:.9}
.apx.compact{grid-template-columns:1fr;gap:4px;padding:6px 8px}
.apx.compact .t{font-size:12px;display:flex;gap:6px;align-items:center}.apx.compact .t small{display:inline}
.apx.compact{min-width:0;overflow:hidden}
.apx.compact .c{min-width:0}.apx.compact .c .cname{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apx.compact .c .sub{white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.apx.compact .c .row{row-gap:3px}.apx.compact .c .row .muted{overflow-wrap:anywhere;min-width:0}
.apx.compact .t{flex-wrap:wrap}
.apx.compact .acts{justify-content:flex-start}
.lane{margin:6px 0 10px}.lane-h{font:600 12px var(--disp);color:var(--tx2);margin:0 0 4px;display:flex;gap:8px;align-items:baseline}
.week{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:8px;overflow:auto}
.wday{border:1px solid var(--ln);border-radius:var(--r2);background:var(--card);padding:6px;min-height:120px;min-width:0;overflow:hidden}
.wday .lane{min-width:0}
.wday.today{border-color:var(--teal)}
.wh{display:flex;justify-content:space-between;align-items:baseline;font:600 12px var(--disp);color:var(--tx2);padding:2px 4px 6px;border-bottom:1px solid var(--ln);margin-bottom:6px}
.dayv .hrow{display:grid;grid-template-columns:70px 1fr;gap:10px;padding:6px 0;border-top:1px solid var(--ln)}
.dayv .hh{color:var(--mt2);font-size:12px;padding-top:10px}
@media (max-width:900px){
  .tbl.vsbook .cmain{min-width:140px}
  .bbar{position:fixed;left:8px;right:8px;bottom:8px;margin:0}
  .apx{grid-template-columns:64px 1fr}.apx .acts{grid-column:1/-1;justify-content:flex-start}
  .week{grid-template-columns:1fr}
  .insp.contact .ih .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mfgrid{grid-template-columns:1fr}
}

/* ── Call Library (2026-10-25): day chips, the expanding row, the docked player ── */
.daychips .chip.busy{border-color:var(--teal);color:var(--teal);opacity:.8}
.daychips .chip.none{opacity:.4;cursor:default}
.daychips .chip.bad{border-color:var(--red);color:var(--red)}
.tbl.calls tr.click td{cursor:pointer}
.tbl.calls tr.open td{background:rgba(54,214,195,.06)}
.tbl.calls tr.selrow td{background:rgba(54,214,195,.08)}.tbl.calls tr.selrow td:first-child{box-shadow:inset 3px 0 0 var(--teal)}
.tbl.calls tr.exp td{background:var(--panel2);padding:0;cursor:default}
.tbl.calls .sumcell{max-width:340px}.tbl.calls .snip{display:block;white-space:normal;line-height:1.35;color:var(--tx2)}
.cl-exp{padding:14px 16px 10px;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.cl-exp h4.xs{letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;font-size:10.5px}
.cl-exp p.small{margin:0 0 6px;line-height:1.45}
.cl-transcript{max-height:260px;overflow:auto;white-space:pre-wrap;color:var(--tx2);line-height:1.5;padding:8px 10px;border:1px solid var(--ln);border-radius:8px;background:var(--panel)}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:950;padding:0 14px 10px}
.dock .dockbox .audio-bar{position:static;margin:0 auto;max-width:1180px;box-shadow:0 -6px 30px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.dock .pill{display:none;margin:0 auto;max-width:420px;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--ln2);border-radius:999px;padding:6px 8px 6px 12px;box-shadow:0 -4px 20px rgba(0,0,0,.4)}
.dock .pill .pillopen{flex:1;text-align:left;color:var(--tx);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock.min .dockbox{display:none}.dock.min .pill{display:flex}
body.has-dock .page{padding-bottom:150px}
@media (max-width:900px){.dock{padding:0 6px 6px}.cl-exp .grid.c2{grid-template-columns:1fr}.tbl.calls .sumcell{max-width:none}}

/* ── framed inside the HR app (?embed=1&page=payroll): no sidebar, no menu button, the date picker stays ── */
html.embed .side,html.embed .side-ov,html.embed .menubtn,html.embed #hmBack{display:none!important}
html.embed .main{grid-column:1/-1}
html.embed #app{grid-template-columns:1fr}
/* ── Payroll (2026-10-25): every adjustable cell is a button ── */
.tbl.pay td.adj{background:rgba(255,184,77,.08)}
.tbl.pay td.adjpay{background:rgba(54,214,195,.07)}.tbl.pay td.adjpay .small{display:block;font-size:11px}
.tbl.pay tr.adjrow td:first-child{box-shadow:inset 3px 0 0 var(--amber,#f5b544)}
.tbl.pay .cellbtn{display:inline-block;text-align:right;max-width:none;font:inherit;color:inherit;background:none;border:0;padding:2px 4px;border-radius:6px;cursor:pointer;text-decoration:underline dotted;text-decoration-color:var(--mt2);text-underline-offset:3px}
.tbl.pay .cellbtn:hover{background:var(--teal-soft);color:var(--teal);text-decoration-color:var(--teal)}
.tbl tr.muted td{opacity:.6}
/* 2026-10-25: the drawer's "All VanillaSoft fields" (64_contact.js) */
details.cfields{margin-top:10px}details.cfields summary{cursor:pointer;list-style:none;font-size:13px;color:var(--tx2)}details.cfields summary::-webkit-details-marker{display:none}
details.cfields summary::before{content:"▸";display:inline-block;width:14px;color:var(--mt);transition:transform .15s}details.cfields[open] summary::before{transform:rotate(90deg)}
details.cfields .kv{margin-top:10px;max-height:420px;overflow:auto}details.cfields .kv dt{white-space:normal;max-width:260px}details.cfields .kv dd{word-break:break-word}

/* ── Payroll · Wheelspin (2026-10-26) ── */
.wsform{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-start;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.wsform .frow{margin:0}
.tbl.pay td.wheel{color:var(--teal)}
.card.wheel .tbl td{vertical-align:top}
/* ── offers as the offer section writes them (2026-10-25) ── */
details.raw{margin-top:8px}details.raw summary{cursor:pointer}
.rawtxt{white-space:pre-wrap;word-break:break-word;font:12px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--mt);background:var(--bg2,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0 0;max-height:260px;overflow:auto}
.tag.muted{opacity:.7}