:root{
  --vw-light:#f8fafc; --vw-white:#ffffff; --vw-dark:#0b0f19; --vw-primary:#361567; --vw-secondary:#64748b; --vw-info:#3b82f6;
  --vw-accent-1:#ff3d57; --vw-accent-2:#3b82f6; --vw-accent-3:#14b8a6; --vw-success:#00b36b; --vw-warning:#fde047; --vw-danger:#e52200;
  --vw-dark-navy:var(--vw-dark);
  --line:#e6eaf0; --line-2:#cfd6e0; --ink:#0b0f19; --ink-2:#2b3648; --muted:#64748b; --canvas:#f4f6fa; --surface:#fff;
  --pb-gold:#c9a84c; --pb-obsidian:#08090d;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px; --r-sm:8px;
  --shadow-1:0 1px 2px rgba(11,15,25,.05),0 1px 3px rgba(11,15,25,.04);
  --shadow-2:0 6px 20px rgba(11,15,25,.08),0 1px 3px rgba(11,15,25,.05);
  --shadow-3:0 18px 50px rgba(11,15,25,.16);
  --grad:#0D1120;
  --grad-soft:#F5F3F7;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em}
h1{font-size:24px;line-height:1.15} h2{font-size:16px} h3{font-size:14px} h4{font-size:13px}
.mono{font-family:var(--mono);font-size:13px}
.muted{color:var(--muted)} .small{font-size:12px} .xs{font-size:11px}
.hide{display:none!important}
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
:focus-visible{outline:2px solid var(--vw-info);outline-offset:2px}
img{display:block}

/* shell */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.app.locked{display:none}
.rail{background:var(--vw-dark);color:#fff;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column}
.rail::-webkit-scrollbar{width:0}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.brand img{height:26px;width:auto}
.brand .prod{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:3px 8px;border:1px solid rgba(255,255,255,.14);border-radius:99px}
.navgroup{margin:14px 0 4px;padding:0 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.38)}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:rgba(255,255,255,.72);font-weight:600;font-size:13px;cursor:pointer;position:relative;transition:background .15s,color .15s}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.on{background:rgba(54,21,103,.22);color:#fff}
.nav a.on:before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--rail-bar)}
.nav a .cnt{margin-left:auto;font-size:11px;font-weight:600;color:#fff;background:var(--vw-primary);padding:1px 7px;border-radius:99px}
.nav svg{width:17px;height:17px;flex:none;opacity:.85}
.rail .foot{margin-top:auto;padding:14px 8px 0;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(255,255,255,.45)}
.rail .foot .me{display:flex;align-items:center;gap:10px;color:#fff;margin-bottom:10px}
.rail .foot .me .avatar{background:var(--vw-primary)}
.main{min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 28px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .grow{flex:1}
.topbar .cmd{display:flex;align-items:center;gap:8px;background:var(--canvas);border:1px solid var(--line);border-radius:10px;padding:7px 12px;min-width:320px;color:var(--muted);font-size:13px}
.topbar .cmd kbd{margin-left:auto;font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-radius:5px;padding:0 5px;background:#fff}
.iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;position:relative}
.iconbtn svg{width:17px;height:17px}
.iconbtn .badge{position:absolute;top:-4px;right:-4px;background:var(--vw-accent-1);color:#fff;font-size:11px;font-weight:600;border-radius:99px;padding:0 5px;line-height:16px;border:2px solid #fff}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:12px;font-weight:600;color:var(--ink-2)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--vw-success);box-shadow:0 0 0 3px rgba(0,179,107,.18)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--vw-dark);color:#fff;display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
.avatar.people{background:#e6eaf0;color:var(--ink-2)}
.avatar.sm{width:26px;height:26px;font-size:11px}
.page{padding:26px 28px 80px;max-width:1440px}
.ph{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
.ph .grow{flex:1}
.ph p{margin:6px 0 0;color:var(--muted);max-width:760px}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:6px}

/* hero */
.hero{background:var(--grad);color:#fff;border-radius:18px;padding:26px 28px;display:grid;grid-template-columns:1.4fr 1fr;gap:20px;position:relative;overflow:hidden;box-shadow:none}
.hero:before,.hero:after{content:none}

.hero>*{position:relative;z-index:1}
.hero h1{font-size:28px;color:#fff}
.hero p{color:rgba(255,255,255,.72);margin:6px 0 16px;max-width:520px}
.hero .acts{display:flex;gap:8px;flex-wrap:wrap}
.hero .btn{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.hero .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-self:center}
.hero .stat{background:var(--rail-hover);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:12px 14px;}
.hero .stat .v{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.hero .stat .l{font-size:12px;color:rgba(255,255,255,.7);font-weight:600;margin-top:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;border:1px solid var(--line-2);background:#fff;font-weight:600;font-size:13px;cursor:pointer;line-height:1.2;white-space:nowrap;transition:transform .08s,box-shadow .15s,background .15s}
.btn:hover{background:var(--canvas);box-shadow:var(--shadow-1)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--vw-dark);color:#fff;border-color:var(--vw-dark)}
.btn.primary:hover{background:#1c2233}
.btn.accent{background:var(--vw-primary);color:#fff;border-color:var(--accent)}
.btn.danger{color:var(--vw-danger);border-color:#f3c2b8}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn.xs{padding:3px 9px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn.link{border:none;background:none;padding:0;color:var(--accent);font-weight:600;box-shadow:none}
.btn svg{width:15px;height:15px}

/* cards, grid */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.span2{grid-column:span 2}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-1)}
.card.tight{padding:14px 16px}
.card.soft{background:var(--grad-soft);border-color:transparent}
.card h3{margin-bottom:10px}
.card .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card .hd h3{margin:0}
.kpi .lbl{font-size:12px;color:var(--muted);font-weight:600}
.kpi .val{font-size:28px;font-weight:600;letter-spacing:-.04em;margin:4px 0 0;line-height:1.05}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:4px}
.kpi .delta{font-size:12px;font-weight:600}
.kpi .delta.up{color:var(--vw-success)} .kpi .delta.down{color:var(--vw-danger)}
.kpi .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--grad-soft);color:var(--accent)}
.kpi .ico svg{width:18px;height:18px}
.bar{height:8px;border-radius:99px;background:#eceff5;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:#361567;border-radius:99px;transition:width .4s ease}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:8px}
.sep{height:1px;background:var(--line);margin:14px 0}
.note{padding:11px 13px;border-radius:10px;background:var(--canvas);border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.note b{color:var(--ink)}
.note.warn{background:#fffbe6;border-color:#f5e77a}
.note.danger{background:#fff0ec;border-color:#f3c2b8}
.note.ok{background:#eaf9f1;border-color:#bfe9d3}

/* pills */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.pill.tier:before,.pill.none:before,.pill.build:before,.pill.change:before,.pill.struck:before,.pill.pb:before{display:none}
.pill.live,.pill.ok,.pill.delivered,.pill.active,.pill.verified,.pill.resolved{background:#e3f6ec;color:#04723f}
.pill.pending,.pill.queued,.pill.warn,.pill.in_progress,.pill.expiring{background:#fdf6bf;color:#6b5a00}
.pill.rejected,.pill.failed,.pill.blocked,.pill.expired,.pill.urgent{background:#fde4e0;color:#9a1b00}
.pill.draft,.pill.none,.pill.closed{background:#eef1f6;color:#475569}
.pill.info,.pill.open,.pill.pushed{background:#e4edff;color:#1d4ed8}
.pill.src-property_finder{background:#ffe4e8;color:#b3132b}
.pill.src-bayut{background:#dff5f2;color:#0b6f66}
.pill.src-dubizzle{background:#e4edff;color:#1d4ed8}
.pill.src-own_website{background:#eef1f6;color:#334155}
.pill.tier{background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}
.pill.build{background:#e3f6ec;color:#04723f} .pill.change{background:#fdf6bf;color:#6b5a00} .pill.struck{background:#fde4e0;color:#9a1b00}
.pill.pb{background:var(--pb-obsidian);color:var(--pb-gold)}
.pill.purple{background:#EBE8F0;color:#361567}

/* portal marks */
.mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:11px;font-weight:600;color:#fff;letter-spacing:-.02em}
.mark.pf{background:var(--vw-accent-1)} .mark.by{background:var(--vw-accent-3)} .mark.dz{background:var(--vw-accent-2)} .mark.web{background:var(--vw-secondary)} .mark.b24{background:#2fc6f6}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:#fafbfd}
td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbfe}
td .t{font-weight:600} td .s{font-size:12px;color:var(--muted)}
.tbl{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1)}
.tbl .bar-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:#fff}
.tbl .bar-h .grow{flex:1}
input.q{padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;min-width:220px;background:#fff}
select.f{padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;background:#fff}
.thumb{width:56px;height:42px;border-radius:8px;object-fit:cover;background:var(--grad-soft);flex:none}
.empty{padding:44px 24px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);margin-bottom:4px;font-size:16px}
.empty svg{width:64px;height:64px;margin:0 auto 10px;display:block;color:var(--accent);opacity:.6}

/* source bar on lead rows */
td.srcbar{width:6px;padding:0}
td.srcbar i{display:block;height:100%;min-height:44px;width:6px}
.src-property_finder td.srcbar i{background:var(--vw-accent-1)}
.src-bayut td.srcbar i{background:var(--vw-accent-3)}
.src-dubizzle td.srcbar i{background:var(--vw-accent-2)}
.src-own_website td.srcbar i{background:var(--vw-secondary)}

/* forms */
.form{display:grid;gap:12px}
.f2{grid-template-columns:1fr 1fr}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.field label .req{color:var(--vw-danger);margin-left:2px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(54,21,103,.18);outline:none}
.field textarea{min-height:80px;resize:vertical}
.field .help{font-size:12px;color:var(--muted);margin-top:5px}
.field.err input,.field.err select{border-color:var(--vw-danger)}
.field .e{font-size:12px;color:var(--vw-danger);margin-top:4px;font-weight:600}
.check{display:flex;align-items:flex-start;gap:8px;font-size:13px}
.check input{margin-top:3px;accent-color:var(--vw-primary)}
.toggle{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;cursor:pointer}
.toggle i{width:36px;height:21px;border-radius:99px;background:#cfd6e0;position:relative;transition:.15s}
.toggle i:after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle input{display:none}
.toggle input:checked+i{background:var(--vw-primary)}
.toggle input:checked+i:after{left:17px}
input[type=range]{accent-color:var(--vw-primary);width:100%}

/* gates */
.gates{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.gate{padding:12px 14px;border-right:1px solid var(--line);position:relative}
.gate:last-child{border-right:none}
.gate .k{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.gate .v{font-weight:600;margin-top:4px;display:flex;align-items:center;gap:7px}
.gate .v.pass:before,.gate .v.fail:before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background-size:11px;background-repeat:no-repeat;background-position:center}
.gate .v.pass:before{background-color:#e3f6ec;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304723f' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}
.gate .v.fail:before{background-color:#fde4e0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a1b00' stroke-width='3'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.gate .why{font-size:12px;color:var(--muted);margin-top:3px}

/* drawer + modal */
.overlay{position:fixed;inset:0;background:rgba(11,15,25,.42);z-index:40;display:none;backdrop-filter:none}
.overlay.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:720px;max-width:96vw;background:#fff;z-index:50;box-shadow:var(--shadow-3);transform:translateX(100%);transition:transform .22s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer .dh{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--line)}
.drawer .dh .grow{flex:1}
.drawer .db{padding:20px 22px;overflow:auto;flex:1}
.drawer .df{padding:12px 22px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:#fff}
.dhero{height:220px;background:var(--grad);position:relative;overflow:hidden}
.dhero img{width:100%;height:100%;object-fit:cover;opacity:.9}
.dhero .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,25,0) 30%,rgba(11,15,25,.85));display:flex;align-items:flex-end;padding:18px 22px;color:#fff}
.dhero .ov h2{color:#fff;font-size:20px}
.dhero .ov .s{color:rgba(255,255,255,.75);font-size:13px}
.dhero .x{position:absolute;top:12px;right:12px}
.modal{position:fixed;inset:0;z-index:60;display:none;place-items:center}
.modal.on{display:grid}
.modal .box{background:#fff;border-radius:16px;width:540px;max-width:94vw;padding:24px;box-shadow:var(--shadow-3)}
.modal .box h2{margin-bottom:8px}
.toasts{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--vw-dark);color:#fff;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:var(--shadow-3);max-width:400px;display:flex;gap:8px;align-items:center;animation:tin .2s ease}
.toast:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vw-success);flex:none}
.toast.err{background:var(--vw-danger)} .toast.err:before{background:#fff}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow:auto}
.tabs a{padding:9px 13px;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a.on{color:var(--ink);border-color:var(--accent)}
.code{font-family:var(--mono);font-size:12px;background:var(--vw-dark);color:#e2e8f0;padding:14px 16px;border-radius:10px;white-space:pre;overflow:auto;line-height:1.55}
.kv{display:grid;grid-template-columns:160px 1fr;gap:7px 12px;font-size:13px}
.kv .k{color:var(--muted);font-weight:600}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.timeline li .w{color:var(--muted);font-family:var(--mono);font-size:12px}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.feed li:last-child{border-bottom:none}
.feed .dot{width:8px;height:8px;border-radius:50%;background:var(--vw-primary);margin-top:6px;flex:none}
.feed .w{color:var(--muted);font-size:11px}
.lockrow{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px dashed var(--line-2);border-radius:10px;color:var(--muted);font-size:13px;margin-top:10px}
.qr{width:72px;height:72px;border:1px solid var(--line-2);border-radius:8px;display:grid;place-items:center;font-size:11px;color:var(--muted);text-align:center;line-height:1.2;background:repeating-linear-gradient(45deg,#fff 0 3px,#eef1f6 3px 6px)}
.chat{border:1px solid var(--line);border-radius:var(--r);background:#fff;display:flex;flex-direction:column;height:380px}
.chat .msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:78%;padding:9px 12px;border-radius:12px;background:var(--canvas);font-size:13px}
.msg.me{align-self:flex-end;background:var(--vw-dark);color:#fff}
.msg.note{background:#fdf6bf;color:#6b5a00;font-size:12px}
.msg .w{display:block;font-size:11px;opacity:.7;margin-top:3px}
.chat .in{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat .in input{flex:1;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px}
.widget{position:fixed;right:22px;bottom:22px;z-index:30}
.widget .fab{width:50px;height:50px;border-radius:50%;background:var(--vw-primary);color:#fff;border:none;box-shadow:var(--shadow-3);cursor:pointer;font-weight:600;font-size:16px}
.widget .panel{position:absolute;right:0;bottom:60px;width:350px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-3);padding:16px;display:none}
.widget .panel.on{display:block}
.scopegrid{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.scopegrid .r{display:grid;grid-template-columns:1.3fr 150px 1fr;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px}
.scopegrid .r:last-child{border-bottom:none}
.scopegrid .r.h{background:#fafbfd;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}

/* agent workspace */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:var(--shadow-1)}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.pcard .img{height:170px;background:var(--grad);position:relative;overflow:hidden}
.pcard .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard:hover .img img{transform:scale(1.04)}
.pcard .img .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,25,.05),rgba(11,15,25,.55) 100%)}
.pcard .img .price{position:absolute;left:12px;bottom:10px;color:#fff;font-weight:600;font-size:16px;letter-spacing:-.02em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.pcard .img .price small{display:block;font-size:11px;font-weight:600;opacity:.85}
.pcard .img .fav{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);border:none;border-radius:99px;width:32px;height:32px;display:grid;place-items:center;font-size:16px;cursor:pointer;color:var(--vw-accent-1)}
.pcard .img .cmp{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);border:none;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:600;cursor:pointer}
.pcard .img .score{position:absolute;right:12px;bottom:10px;background:#fff;border-radius:8px;padding:3px 8px;font-size:12px;font-weight:600}
.pcard .bd{padding:13px 14px 14px;display:flex;flex-direction:column;gap:7px}
.pcard .nm{font-weight:600;letter-spacing:-.01em;font-size:16px}
.pcard .st{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 8px;font-size:12px;color:var(--muted);margin-top:2px}
.pcard .st b{color:var(--ink);display:block;font-size:13px}
.tray{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--vw-dark);color:#fff;border-radius:14px;padding:10px 14px;display:none;align-items:center;gap:10px;z-index:35;box-shadow:var(--shadow-3);font-size:13px}
.tray.on{display:flex}
.tray .btn{border-color:rgba(255,255,255,.3);background:transparent;color:#fff}
.tray .btn.primary{background:var(--vw-primary);color:#fff;border-color:var(--accent)}
.sugg{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-2);z-index:30;max-height:320px;overflow:auto;display:none;margin-top:4px}
.sugg.on{display:block}
.sugg .g{padding:8px 12px 2px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sugg .i{padding:7px 12px;cursor:pointer;font-size:13px}
.sugg .i:hover{background:var(--canvas)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.toolbar .srch{position:relative;flex:1;min-width:260px}
.toolbar .srch input{width:100%}
#map{height:560px;border-radius:var(--r);border:1px solid var(--line);background:#eceff5;box-shadow:var(--shadow-1)}
.metric{display:grid;grid-template-columns:140px 1fr 60px;gap:8px;align-items:center;font-size:13px;padding:4px 0}
.metric .bar{margin:0}
.scorebig{font-size:28px;font-weight:600;letter-spacing:-.04em;line-height:1}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gal div,.gal img{aspect-ratio:4/3;border-radius:10px;background:var(--grad-soft);display:grid;place-items:center;font-size:11px;color:var(--muted);object-fit:cover;width:100%}
.strip{display:flex;gap:6px;overflow:auto;padding:10px 0 2px}
.strip img{width:84px;height:60px;border-radius:8px;object-fit:cover;flex:none}
.cmptable td:first-child{font-weight:600;color:var(--ink-2)}
.cmptable .best{background:#e3f6ec}
.tag{display:inline-block;padding:3px 9px;border-radius:8px;background:var(--canvas);border:1px solid var(--line);font-size:12px;margin:2px 4px 2px 0}
.leaflet-container{border-radius:12px}
.chart{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--ink-2);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.ring{position:relative;width:110px;height:110px}
.ring .c{position:absolute;inset:0;display:grid;place-items:center;font-weight:600;font-size:24px;letter-spacing:-.04em}
.flow{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:center;gap:6px}
.flow .node{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;text-align:center}
.flow .node.hub{background:var(--vw-dark);color:#fff;border-color:var(--vw-dark)}
.flow .arrow{text-align:center;color:var(--accent);font-size:20px;font-weight:600}
.plan{display:flex;gap:4px;height:14px;border-radius:99px;overflow:hidden;margin:8px 0}
.plan i{display:block;height:100%}
.plan i:nth-child(1){background:var(--vw-primary)} .plan i:nth-child(2){background:#AFA1C2} .plan i:nth-child(3){background:var(--vw-accent-3)} .plan i:nth-child(4){background:var(--vw-accent-2)}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .left{background:var(--grad);color:#fff;padding:44px 52px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.login .left:before,.login .left:after{content:none}

.login .left>*{position:relative;z-index:1}
.login .left h1{font-size:28px;line-height:1.08;color:#fff;max-width:520px;margin-top:auto}
.login .left p{color:rgba(255,255,255,.72);max-width:480px;font-size:16px}
.login .left .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;max-width:560px}
.login .left .proof div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 14px;font-size:12px;color:rgba(255,255,255,.75)}
.login .left .proof b{display:block;color:#fff;font-size:16px;letter-spacing:-.02em}
.login .left .mock{margin-top:26px;background:var(--rail-hover);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px;max-width:560px}
.login .right{display:grid;place-items:center;padding:40px}
.login .form-card{width:420px;max-width:100%}
.login .form-card h2{font-size:24px;margin-bottom:4px}
.login .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.login .create{margin-top:14px;text-align:center}
.login .create a{font-size:13px;font-weight:600}
.login .form-card .check{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:8px 0}
.login .form-card .help.rule{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.login .form-card a.back{display:inline-block;margin-bottom:12px;font-size:13px}
.login .form-card input.code{letter-spacing:.3em;font-size:20px}
.usage{margin-top:12px}
.usage + .usage{margin-top:10px}
.usage .bar{margin-top:6px}
.login .demo{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}
.login .demo button{padding:10px;border:1px solid var(--line-2);border-radius:10px;background:#fff;cursor:pointer;font-weight:600;font-size:13px;text-align:left}
.login .demo button:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(54,21,103,.15)}
.login .demo small{display:block;color:var(--muted);font-weight:500}

/* responsive shell and grids: 99-zz-system.css.html */
@media (max-width:1100px){.gates{grid-template-columns:1fr 1fr}.span2{grid-column:span 1}}
@media (max-width:640px){.flow{grid-template-columns:1fr}.flow .arrow{transform:rotate(90deg)}}


/* agent workspace */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:pointer}
.pcard:hover{box-shadow:var(--shadow)}
.pcard .img{height:130px;background:repeating-linear-gradient(135deg,#eef2f7 0 10px,#f8fafc 10px 20px);display:grid;place-items:center;color:var(--muted);font-size:12px;position:relative}
.pcard .img .fav{position:absolute;top:8px;right:8px;background:#fff;border:1px solid var(--line);border-radius:99px;width:30px;height:30px;display:grid;place-items:center;font-size:16px;cursor:pointer}
.pcard .img .cmp{position:absolute;top:8px;left:8px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:11px;font-weight:600;cursor:pointer}
.pcard .bd{padding:11px 12px;display:flex;flex-direction:column;gap:6px}
.pcard .nm{font-weight:600;letter-spacing:-.01em}
.pcard .st{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:12px;color:var(--muted)}
.pcard .st b{color:var(--ink)}
.tray{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--vw-dark-navy);color:#fff;border-radius:12px;padding:10px 14px;display:none;align-items:center;gap:10px;z-index:35;box-shadow:var(--shadow);font-size:13px}
.tray.on{display:flex}
.tray .btn{border-color:rgba(255,255,255,.3);background:transparent;color:#fff}
.tray .btn.primary{background:#fff;color:var(--ink);border-color:#fff}
.sugg{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);z-index:30;max-height:320px;overflow:auto;display:none}
.sugg.on{display:block}
.sugg .g{padding:6px 10px 2px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.sugg .i{padding:6px 10px;cursor:pointer;font-size:13px}
.sugg .i:hover{background:var(--canvas)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.toolbar .srch{position:relative;flex:1;min-width:260px}
.toolbar .srch input{width:100%}
#map{height:520px;border-radius:var(--r);border:1px solid var(--line);background:#eef2f7}
.metric{display:grid;grid-template-columns:140px 1fr 60px;gap:8px;align-items:center;font-size:13px;padding:3px 0}
.metric .bar{margin:0}
.scorebig{font-size:28px;font-weight:600;letter-spacing:-.04em;line-height:1}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gal div{aspect-ratio:4/3;border-radius:8px;background:repeating-linear-gradient(135deg,#eef2f7 0 10px,#f8fafc 10px 20px);display:grid;place-items:center;font-size:11px;color:var(--muted)}
.cmptable td:first-child{font-weight:600;color:var(--ink-2)}
.cmptable .best{background:#e6f7ee}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--canvas);border:1px solid var(--line);font-size:12px;margin:2px 3px 2px 0}
.leaflet-container{border-radius:10px}


/* ===== v4 motion and component extras. Motion rules: no infinite animations, nothing replays on every render (99-zz-system). Dark mode is token-driven in 99-zz-system. ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
.imp{background:var(--vw-warning);color:#3d3300;font-weight:600;font-size:13px;padding:8px 24px;display:flex;align-items:center;gap:12px}
.bulkbar{gap:6px;padding:4px 8px;border-radius:10px;background:var(--grad-soft)}
.check-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.check-list li:last-child{border-bottom:none}
.check-list .ck{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;border:2px solid var(--line-2);color:transparent;font-size:12px}
.preview{border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:420px;box-shadow:var(--shadow-2)}
.preview .ph{height:200px;position:relative;margin:0;display:block}
.preview .ph img{width:100%;height:100%;object-fit:cover}
.preview .ph .tagp{position:absolute;left:10px;top:10px;background:var(--pf);color:#fff;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px}
.preview .pb{padding:14px;color:var(--ink)}
.preview .pr{font-size:20px;letter-spacing:-.02em}
.shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:13px}
.shortcuts div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.notif{padding:12px;border-radius:12px;border:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin-bottom:8px}
.notif .d{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px}
.notif.read{opacity:.6}
img.lazy{opacity:1}
.kpi .val{font-variant-numeric:tabular-nums}
html.dark .chart text{fill:#94a3b8} html.dark .chart line{stroke:#232b3d}


/* ===== v5 rail alignment and brand ===== */
.rail{padding:16px 14px}
.brand{display:block;padding:6px 10px 16px;margin-bottom:8px}
.brand img{height:16px;width:auto;display:block}
.brand .prod{display:inline-block;margin-top:10px;font-size:11px;padding:2px 8px}
.navgroup{padding:0 10px;margin:16px 0 4px}
.nav a{padding:9px 10px 9px 12px}
.nav a.on:before{top:8px;bottom:8px}
.nav a .cnt{min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px;line-height:1}
.rail .foot .me{padding-left:2px}
/* setup banner when complete */
.setup-done{display:flex;align-items:center;gap:12px;padding:10px 16px;margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:13px}
.setup-done .ring{width:34px;height:34px}.setup-done .ring .c{font-size:11px}
/* syndication */
.portal{display:flex;flex-direction:column;gap:12px;min-height:100%}
.portal .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.portal .stats div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;text-align:center}
.portal .stats b{display:block;font-size:20px;font-weight:600;letter-spacing:-.03em}
.portal .stats span{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.portal .kv{grid-template-columns:96px 1fr}
.portal .url{font-family:var(--mono);font-size:12px;word-break:break-all;background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:6px 8px;display:flex;gap:6px;align-items:center}
.portal .url span{flex:1}
/* brochures */
.tpl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column}
.tpl .cover{aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--grad)}
.tpl .cover img{width:100%;height:100%;object-fit:cover}
.tpl .cover .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,25,.1),rgba(11,15,25,.85));color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:14px}
.tpl .cover .lg{height:12px;width:auto}
.tpl .cover .t{font-weight:600;font-size:16px;letter-spacing:-.02em;line-height:1.15}
.tpl .cover .p{font-size:12px;opacity:.8}
.tpl .cover .pr{font-size:16px;font-weight:600;margin-top:4px}
.tpl .bd{padding:14px;display:flex;flex-direction:column;gap:10px}
.tpl .opts{display:flex;flex-wrap:wrap;gap:8px 14px}
.prev{width:100%;height:78vh;border:1px solid var(--line);border-radius:10px;background:#eceff5}
html.dark .portal .stats div,html.dark .portal .url{background:#121826;border-color:var(--line)}


/* Layout helpers kept from the first design-system pass. Tokens, type, buttons, controls, chips, tables, shell and dark mode
   live in 99-zz-system.css.html (the one design-system stylesheet). Do not add component styles here. */
.edbar{position:sticky;top:0;z-index:15}
.lsttbl .sticky{position:sticky;left:0;z-index:1}
.inbox{display:flex;gap:16px;min-height:60vh}
.inbox .list{width:380px;flex:none;border-right:1px solid var(--line)}
.inbox .detail{flex:1;min-width:0}
.permgrid{overflow:auto}
.permgrid table{min-width:720px}
.diff td{font-size:13px}
.psw{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;min-width:52px}
.psw input{position:absolute;opacity:0;width:1px;height:1px}
.psw.ro{opacity:.65;pointer-events:none}
.psw .psw-reset{display:none;background:transparent;border:0;cursor:pointer;padding:0}
.psw.over:hover .psw-reset,.psw.over:focus-within .psw-reset{display:inline}
.auditstrip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.auditstrip .it{font-size:12px;color:var(--ink-2)}
@media (max-width:959px){ .inbox{flex-direction:column} .inbox .list{width:auto;border-right:0} }
@media (max-width:767px){ body.ed-full .page{padding:0 0 16px} body.ed-full .rail{display:none} }


/* ===== v6: portal API coverage ===== */
.v6grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.conn{display:flex;flex-direction:column;gap:8px}
.conn .hd{display:flex;align-items:center;justify-content:space-between}
.conn .scopes{display:flex;flex-wrap:wrap;gap:4px}
.conn .scopes span{font-family:var(--mono);font-size:11px;padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:var(--canvas)}
.conn .scopes span.def{border-style:dashed}
.ready{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ready .col{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ready .col h4{margin:0 0 8px;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.ready .r{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:12px;padding:3px 0;border-bottom:1px dashed var(--line)}
.ready .r:last-child{border-bottom:0}
.ready .r i{width:14px;height:14px;border-radius:99px;display:inline-grid;place-items:center;font-style:normal;font-size:11px;color:#fff;margin-top:2px}
.ready .r.pass i{background:var(--vw-success)}
.ready .r.fail i{background:var(--vw-danger)}
.ready .r.warn i{background:#d39e00}
.ready .r .why{color:var(--muted);font-size:11px}
.payload{background:var(--vw-dark);color:#dbe4ff;border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:11px;line-height:1.5;max-height:420px;overflow:auto;white-space:pre}
.payload .k{color:#AFA1C2}
.pipe{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.pipe .st{flex:1;min-width:120px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;position:relative}
.pipe .st b{display:block;font-size:12px}
.pipe .st .s{color:var(--muted);font-size:11px}
.pipe .st.done{border-color:var(--vw-success);background:#f0fbf5}
.pipe .st.now{border-color:var(--accent);box-shadow:0 0 0 3px rgba(54,21,103,.15)}
.pipe .st.bad{border-color:var(--vw-danger);background:#fff3f4}
.statechip{display:inline-flex;gap:6px;align-items:center;font-size:12px}
.statechip .d{width:8px;height:8px;border-radius:99px;background:var(--muted)}
.statechip.live .d{background:var(--vw-success)}
.statechip.draft .d{background:var(--muted)}
.statechip.pending .d{background:#d39e00}
.statechip.rejected .d,.statechip.failed .d,.statechip.takendown .d{background:var(--vw-danger)}
.statechip.active .d{background:var(--vw-success)}
.statechip.expired .d{background:var(--vw-danger)}
.evt{display:grid;grid-template-columns:150px 180px 1fr 90px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.evt:last-child{border-bottom:0}
.evt .ty{font-family:var(--mono);font-size:11px}
.meter{height:8px;background:var(--canvas);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.meter i{display:block;height:100%;background:var(--vw-primary)}
.meter.warn i{background:#d39e00}
.meter.bad i{background:var(--vw-danger)}
.score{font-size:28px;font-weight:600;letter-spacing:-.03em}
.ql{display:flex;flex-wrap:wrap;gap:4px}
.ql span{font-size:11px;padding:2px 7px;border-radius:6px;border:1px solid var(--line);background:var(--canvas)}
.ql span.ok{border-color:#9fe3bf;background:#eefbf3}
.ql span.bad{border-color:#ffb3bd;background:#fff1f3}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:4px 0;font-size:12px;border-left:2px solid var(--line);padding-left:10px}
.tl li.hi{border-left-color:var(--accent)}
.apimap .r{display:grid;grid-template-columns:1.1fr 1.4fr 1.4fr 1fr 90px;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px;align-items:start}
.apimap .r.h{font-weight:600;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.apimap code{font-family:var(--mono);font-size:11px;background:var(--canvas);padding:1px 4px;border-radius:4px;display:inline-block;margin:1px 2px 1px 0}
.health{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.health.dash-health{gap:12px;margin:0 0 14px}
@media (min-width:768px){.health.dash-health{grid-template-columns:repeat(7,minmax(0,1fr))}}
.health .h{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--surface);font-size:12px}
.health .h b{display:block;font-size:16px;letter-spacing:-.02em}
.health .h b .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#94a3b8;margin-right:6px;vertical-align:middle}
.health .h b .dot.ok{background:var(--vw-success)}
.health .h.warn{border-color:#f1d27a;background:#fffbea}
.health .h.bad{border-color:#ffb3bd;background:#fff3f4}
.subgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.subgrid .sub{border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px}
.subgrid .sub .ev{font-family:var(--mono);font-size:11px;font-weight:600}
.rec{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 8px;border-radius:99px;border:1px solid var(--line);background:var(--canvas)}
.rec:before{content:'';width:0;height:0;border-left:7px solid var(--accent);border-top:4px solid transparent;border-bottom:4px solid transparent}
.chan{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:11px;font-weight:600;background:var(--canvas);border:1px solid var(--line)}
.dark .payload{background:#05070c}
.leadstbl .scrollx{overflow-x:auto}
.leadstbl table{width:max-content;min-width:100%}
.leadstbl th{white-space:nowrap;padding-left:8px;padding-right:8px}
.leadstbl .phone{white-space:nowrap}
.leadstbl .ent{white-space:nowrap}
.leadstbl .ent .t{display:inline-block;max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;margin-left:6px}


/* ===== v8: operations parity with the Springfield app ===== */
.stabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.stabs a{font-size:12px;padding:5px 10px;border:1px solid var(--line);border-radius:99px;background:var(--surface);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.stabs a.on{background:var(--vw-dark);color:#fff;border-color:var(--vw-dark)}
.stabs a .n{font-size:11px;opacity:.7}
.fpanel{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface);margin-bottom:12px}
.fpanel .form{gap:8px}
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.fchips span{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--canvas);border:1px solid var(--line)}
.ai{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.ai:last-child{border-bottom:0}
.ai i{width:10px;height:10px;border-radius:99px;display:block}
.ai.danger i{background:var(--vw-danger)}
.ai.warn i{background:#d39e00}
.ai.info i{background:var(--vw-info)}
.ai .s{color:var(--muted);font-size:11px}
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.imgs .im{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--canvas);font-size:11px}
.imgs .im .pic{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,#eef2f7 0 10px,#f8fafc 10px 20px);display:grid;place-items:center;color:var(--muted);position:relative}
.imgs .im .pic img{width:100%;height:100%;object-fit:cover}
.imgs .im .pic .cov{position:absolute;top:6px;left:6px;background:var(--vw-dark);color:#fff;font-size:11px;padding:2px 6px;border-radius:6px}
.imgs .im .pic .wm{position:absolute;right:6px;bottom:6px;background:rgba(255,255,255,.85);font-size:11px;padding:1px 5px;border-radius:4px;font-weight:600;letter-spacing:.05em}
.imgs .im .bt{display:flex;gap:4px;padding:6px;flex-wrap:wrap}
.imgs .im .err{color:var(--vw-danger);padding:0 6px 6px;font-weight:600}
.doc{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.doc:last-child{border-bottom:0}
.notes .n{padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:13px;background:var(--surface)}
.notes .n .w{color:var(--muted);font-size:11px;margin-top:4px}
.menu{position:relative;display:inline-block}
.menu .dd{display:none;position:absolute;right:0;top:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-2);min-width:200px;z-index:40;padding:6px}
.menu.on .dd{display:block}
.menu .dd a{display:block;padding:6px 10px;font-size:13px;border-radius:6px;cursor:pointer;white-space:nowrap}
.menu .dd a:hover{background:var(--canvas)}
.menu .dd .sepm{height:1px;background:var(--line);margin:4px 0}
.menu .dd .g{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px 2px}
.bulkbar .btn{white-space:nowrap}
.page .tbl{overflow:visible}
.cnt8{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--vw-danger);color:#fff;font-size:11px;font-weight:600}
.cnt8.warn{background:#d39e00}
.cnt8.info{background:var(--vw-info)}
.kv8{display:grid;grid-template-columns:140px 1fr;gap:4px 12px;font-size:13px}
.kv8 .k{color:var(--muted)}
.lock{opacity:.6;pointer-events:none}
.mapbox{height:140px;border-radius:10px;border:1px solid var(--line);background:repeating-linear-gradient(45deg,#eef2f7 0 8px,#f8fafc 8px 16px);display:grid;place-items:center;font-size:11px;color:var(--muted)}
.lst th{white-space:nowrap}
.lst td:nth-child(2){white-space:nowrap}
.lst td:nth-child(3){min-width:240px}
.lst td:nth-child(3) .t{white-space:normal}
.pgrid{display:grid;grid-template-columns:auto auto;gap:3px 12px;align-items:center}
.pgrid span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.df .menu .dd{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
.lst tr:nth-last-child(-n+2) .menu .dd{top:auto;bottom:100%}
.pager{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.pager .grow{flex:1}
.pager select{font:inherit}


/* ===== v9: full-page listing editor, repo-parity table, filters modal ===== */
.ed{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
.ed .secnav{position:sticky;top:76px;display:flex;flex-direction:column;gap:2px}
.ed .secnav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--ink-2)}
.ed .secnav a.on{background:var(--vw-dark);color:#fff}
.ed .secnav a .st{width:8px;height:8px;border-radius:99px;background:var(--line-2);flex:none}
.ed .secnav a .st.ok{background:#1aa36a}.ed .secnav a .st.bad{background:var(--vw-danger)}.ed .secnav a .st.warn{background:#d39e00}
.ed .secnav .grp{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:10px 10px 2px}
.ed .sec{margin-bottom:16px}
.ed .sec .card{padding:18px}
.ed .sec h2{font-size:16px;margin:0 0 2px}
.ed .sec .lead{font-size:12px;color:var(--muted);margin:0 0 14px}
.ed .form{gap:12px 14px}
.ed .f3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 14px}
.ed .f4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 14px}
.ed .f2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 14px}
.ed .field label{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ed .field label .pm{display:inline-flex;gap:2px;margin-inline-start:auto}
.ed .field label .pm .mark{transform:scale(.72);transform-origin:right center;opacity:.75}
.ed .field.err input,.ed .field.err select,.ed .field.err textarea{border-color:var(--vw-danger)}
.ed .field .e{font-size:11px;color:var(--vw-danger);margin-top:4px}
.ed .field .cnt{font-size:11px;color:var(--muted);text-align:end;margin-top:3px}
.ed .locked{position:relative}
.ed .locked input,.ed .locked select{background:var(--canvas);color:var(--muted)}
.ed .lk{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;line-height:14px}
.edhead{position:sticky;top:0;z-index:30;background:var(--canvas);padding:10px 0 12px;margin:-6px 0 14px;border-bottom:1px solid var(--line)}
.edhead .row{align-items:center}
.edhead h1{font-size:20px;margin:0}
.edhead .sub{font-size:12px;color:var(--muted)}
.chk{display:flex;flex-wrap:wrap;gap:6px}
.chk label{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:99px;font-size:12px;cursor:pointer;background:var(--surface)}
.chk label.on{background:var(--vw-dark);color:#fff;border-color:var(--vw-dark)}
.chk input{display:none}
.chk .by{font-size:11px;opacity:.7;margin-inline-start:2px}
.srad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.srad label{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:13px;background:var(--surface)}
.srad label.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(54,21,103,.15)}
.srad label b{display:block;margin-bottom:2px}
.srad label span{color:var(--muted);font-size:12px}
.srad input{display:none}
.srad label.dis{opacity:.45;cursor:not-allowed}
.rdy{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.rdy .p{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);font-size:12px}
.rdy .p b{display:block;font-size:13px}
.rdy .p .n{color:var(--muted);font-size:11px}
.rdy .p.ok{border-color:#bfe9d3;background:#eaf9f1}.rdy .p.bad{border-color:#f3c2b8;background:#fff0ec}.rdy .p.warn{border-color:#f5e77a;background:#fffbe6}
.ed .card.bad{border-color:#f3c2b8;background:#fff0ec}
.lsttbl{overflow:visible}
.lsttbl table{width:max-content;min-width:100%}
.lsttbl th,.lsttbl td{white-space:nowrap}
.lsttbl th{padding-inline-start:8px;padding-inline-end:8px}
.lsttbl td.det{white-space:normal}
.lsttbl td.det .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsttbl td.det .detline{white-space:nowrap}
.lsttbl td.num{text-align:end;white-space:nowrap}
.lsttbl td.stcell .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28ch}
.lsttbl .thumb{width:48px;height:36px}
.lsttbl th.sortable{cursor:pointer;user-select:none}
.lsttbl th.sortable:after{content:"↕";opacity:.3;margin-inline-start:4px;font-size:11px}
.lsttbl th.asc:after{content:"↑";opacity:1}.lsttbl th.desc:after{content:"↓";opacity:1}
.lsttbl .menu .dd{inset-inline-start:0;inset-inline-end:auto;min-width:230px;max-height:60vh;overflow:auto}
.lsttbl tr:nth-last-child(-n+3) .menu .dd{top:auto;bottom:100%}
.pmarks{display:inline-flex;gap:3px}
.pmarks .mark{cursor:pointer}
/* portal marks keep their brand colour; state is the corner dot (99-zz-system) */
.lsttbl .psum{font-weight:600;font-size:13px}
.lsttbl .scorecell{font-size:12px;white-space:nowrap}
.lsttbl .scorecell .sc.green{color:#04723f;font-weight:600}
.lsttbl .scorecell .sc.amber{color:#8a6d00;font-weight:600}
.lsttbl .scorecell .sc.red{color:#9a1b00;font-weight:600}
.blockbar .qhint{padding:0 12px 8px;font-size:12px;color:#8a6d00}
.blockbar .qhint.ok{color:#04723f}
html.dark .blockbar .qhint{color:#f5e27a} html.dark .blockbar .qhint.ok{color:#5ee0a3}
.fmodal .form{gap:10px 12px}
.fmodal .f4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 12px}
.fmodal h4{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:10px 0 6px}
.modal .box.wide{width:min(980px,96vw)}
.imgs .im .pic img{display:block}
.imgs .im .ptl{position:absolute;inset-inline-start:6px;bottom:6px;display:flex;gap:2px}
.imgs .im .ptl .mark{transform:scale(.7);transform-origin:left bottom}
.docrow{display:grid;grid-template-columns:150px 1fr 110px 90px auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.docrow:last-child{border-bottom:0}
.kvp{display:grid;grid-template-columns:150px 1fr;gap:4px 12px;font-size:13px}
.kvp .k{color:var(--muted)}
.topchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.topchips .pill{cursor:pointer}
.stdrop{min-width:170px}
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.amen-grid label{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:12px;cursor:pointer;background:var(--surface)}
.amen-grid label.on{border-color:var(--accent);background:#f3eefe}
.amen-grid input[type=checkbox]{margin:0}
.amen-grid input[type=number],.amen-grid input[type=text]{width:80px;padding:2px 6px;font-size:12px;border:1px solid var(--line);border-radius:6px}
html.dark .amen-grid label.on{background:rgba(54,21,103,.18)}
.locpick{display:grid;grid-template-columns:1fr auto;gap:6px}
.locres{border:1px solid var(--line);border-radius:8px;min-height:180px;max-height:180px;overflow:auto;margin-top:6px;background:var(--surface)}
.locres a{display:block;padding:6px 10px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--line);border-inline-start:3px solid transparent}
.locres a:hover{background:var(--canvas)}
.locres a .s{color:var(--muted);font-size:11px}
.locres a.cur{background:#f3eefe;border-inline-start-color:var(--accent)}
html.dark .locres a.cur{background:rgba(54,21,103,.18)}
.locres .divider{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px 2px;background:var(--canvas);border-bottom:1px solid var(--line)}
.note.locur.editing{box-shadow:0 0 0 2px rgba(54,21,103,.35)}
/* blocking panel in the sticky header */
.blockbar{margin-top:10px;border:1px solid #f3c2b8;background:#fff0ec;border-radius:10px;font-size:13px}
.blockbar.ok{border-color:#bfe9d3;background:#eaf9f1}
html.dark .blockbar{background:#2d1611;border-color:#5a2519} html.dark .blockbar.ok{background:#0f2a1d;border-color:#1c5136}
.blockbar .bb-head{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:0;font:inherit;font-size:13px;cursor:pointer;text-align:start;color:inherit}
.blockbar .bb-head:disabled{cursor:default}
.blockbar .bb-head b{font-weight:600}
.blockbar .bb-head .n{margin-inline-start:auto;font-size:11px;color:var(--muted)}
.blockbar .bb-list{list-style:none;margin:0;padding:0 12px 8px;display:grid;gap:3px}
.blockbar .bb-list a{cursor:pointer;color:var(--vw-danger);text-decoration:underline;text-underline-offset:2px}
.blockbar .bb-list a .mark{transform:scale(.75);transform-origin:left center;margin-inline-end:2px}
.ed .field.flash{animation:fieldflash 1.6s ease-out;border-radius:8px}
@keyframes fieldflash{0%{box-shadow:0 0 0 3px rgba(229,34,0,.35)}100%{box-shadow:0 0 0 0 rgba(229,34,0,0)}}
.ed .field .e.pe .mark{transform:scale(.72);transform-origin:left center;opacity:.85}
.ed .field.imgsf{display:block}
/* autosave indicator and quick-edit mode switch in the header */
.autosave{font-size:12px;color:var(--muted);white-space:nowrap}
.autosave.busy{color:var(--vw-info)}.autosave.ok{color:#1aa36a}.autosave.bad{color:var(--vw-danger)}.autosave.dirty{color:var(--muted)}
.edmode{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;font-size:12px}
.edmode button{background:var(--surface);border:0;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink-2)}
.edmode button.on{background:var(--vw-dark);color:#fff}
.ed .sec.collapsed{display:none}
.ed .allfields{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px dashed var(--line);border-radius:10px;margin-bottom:16px;font-size:12px;color:var(--muted)}
.ed .secnav a.dim{opacity:.55}
/* rejected uploads, under the photo grid or the floor plan field */
.uperr{margin-top:8px;font-size:12px;color:var(--vw-danger);display:grid;gap:3px}
.uperr b{font-weight:600}
@media (max-width:1100px){.ed{grid-template-columns:1fr}.ed .secnav{position:static;flex-direction:row;flex-wrap:wrap}.ed .f4,.ed .f3{grid-template-columns:1fr 1fr}.srad{grid-template-columns:1fr 1fr}.rdy{grid-template-columns:1fr 1fr}.fmodal .f4{grid-template-columns:1fr 1fr}}
@media (max-width:767px){
  .edhead{position:sticky;top:0;z-index:16;padding:8px 12px 10px;margin:0 0 10px}
  .edhead .row{flex-wrap:wrap}
  .ed{grid-template-columns:1fr;padding-bottom:72px}
  .ed .secnav{flex-wrap:nowrap;overflow-x:auto}
  .ed .f2,.ed .f3,.ed .f4,.srad,.rdy,.fmodal .f4{grid-template-columns:1fr}
  .lsttbl .scrollx,.leadstbl .scrollx,.tbl .scrollx{overflow:visible}
  .lsttbl table,.leadstbl table,.teampg table,.lsttbl tbody,.leadstbl tbody,.teampg tbody{display:block;width:100%}
  .lsttbl thead,.leadstbl thead,.teampg thead{display:none}
  .lsttbl tbody tr,.leadstbl tbody tr,.teampg tbody tr{display:block;height:auto;border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 10px;background:var(--surface)}
  .lsttbl td,.leadstbl td,.teampg td{display:block;border:0;padding:3px 0;white-space:normal}
  .lsttbl td:nth-child(1),.lsttbl td:nth-child(8),.lsttbl td:nth-child(n+10){display:none}
  .leadstbl td.srcbar{display:none}
  .leadstbl td:nth-child(6),.leadstbl td:nth-child(8),.leadstbl td:nth-child(n+9){display:none}
  .pager{flex-wrap:wrap}
}
#popmenu{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-2);min-width:230px;max-height:70vh;overflow:auto;padding:6px}
#popmenu a{display:block;padding:6px 10px;font-size:13px;border-radius:6px;cursor:pointer;white-space:nowrap}
#popmenu a:hover{background:var(--canvas)}
#popmenu .sepm{height:1px;background:var(--line);margin:4px 0}
#popmenu .g{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px 2px}
/* ---------- listing quick view and listings list (step 33): tokens only ---------- */
.dfacts-a{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-top:8px;font-size:13px;color:var(--ink-2)}
.dfacts-a b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.chipbtn-a{border:0;background:none;padding:0;margin:0;cursor:pointer;font:inherit;border-radius:999px;display:inline-flex}
.chipbtn-a:hover .chip,.chipbtn-a:focus-visible .chip{box-shadow:0 0 0 2px var(--line-2)}
.lsttbl-a td.stc-a{min-width:130px}
.lsttbl-a .pcol-a{white-space:nowrap}
.lsttbl-a .pcol-a .pchips{flex-wrap:nowrap}
.lsttbl-a .lcell-a .s .cnt-a{margin-inline-start:4px;vertical-align:middle}
.tchip-a.ready-a.on{border-color:color-mix(in srgb,var(--vw-success) 60%,var(--line));background:color-mix(in srgb,var(--vw-success) 10%,var(--surface))}


/* Area A screens: listings (cards and table), pocket listings, approvals, listing drawer, publish dialog, filter sheet.
   Layout only, tokens only. Shared components (chips, buttons, inputs, tables, cards) come from the design-system layer. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn.icon{width:32px;min-width:32px;height:32px;min-height:32px;padding:0;display:inline-grid;place-items:center;border-radius:8px}
.btn.danger-outline{background:transparent;color:var(--vw-danger);border:1px solid color-mix(in srgb,var(--vw-danger) 35%,var(--line))}
.btn.danger-outline:hover{background:color-mix(in srgb,var(--vw-danger) 8%,var(--surface))}
.btn.on-a{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--vw-primary) 8%,var(--surface))}

/* toolbar shared by cards and table */
.ltb-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 12px}
.ltb-a .q{flex:1 1 260px;min-width:220px;height:40px;border:1px solid var(--line-2);border-radius:10px;padding-block:0 0;padding-inline:36px 12px;background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 12px center;color:var(--ink);font-size:14px}
.ltb2-a{margin-top:0}
.qf-a{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ltb2-a select,.ltb2-a .btn,.tchip-a{height:40px;min-height:40px}
.ltb2-a select{width:136px;flex:none;border:1px solid var(--line-2);border-radius:10px;padding-block:0 0;padding-inline:12px 32px;background-color:var(--surface);color:var(--ink);font-weight:500;font-size:14px}
.ltb2-a select.on{border-color:var(--accent);background-color:color-mix(in srgb,var(--vw-primary) 8%,var(--surface))}
.ltb2-a select[data-qf20="saleRent"]{width:150px}.ltb2-a select[data-qf20="type"]{width:156px}.ltb2-a select[data-qf20="agent"]{width:150px}
.ltb-a .sort-a{flex:none;width:200px;height:40px;border:1px solid var(--line-2);border-radius:10px;padding-block:0 0;padding-inline:12px 32px;background-color:var(--surface);color:var(--ink);font-weight:500;font-size:14px}
.tchip-a{display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.tchip-a b{font-weight:700;color:var(--muted)}
.tchip-a.on{border-color:color-mix(in srgb,var(--vw-warning) 60%,var(--line));background:color-mix(in srgb,var(--vw-warning) 14%,var(--surface));color:var(--ink)}
.tchip-a.on b{color:var(--ink)}
.ltb-a .lst-tabs-a{flex:0 1 auto;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;max-width:100%}
/* rc1 UI-10: on a desktop screen the Listings controls stay on two rows. Row 1: status tabs, search, sort. Row 2: filters, Needs attention, Ready to publish, Views. No wrapping. */
@media (min-width:1025px){
  .ltb-a{flex-wrap:nowrap}
  .ltb-a .q{flex:1 1 160px;min-width:140px}
  .ltb-a .lst-tabs-a{min-width:0}
  .ltb2-a .qf-a{flex-wrap:nowrap;flex:0 1 auto;min-width:0}
  .ltb2-a select,.ltb2-a select[data-qf20="saleRent"],.ltb2-a select[data-qf20="type"],.ltb2-a select[data-qf20="agent"]{width:auto;min-width:96px;max-width:124px;padding-inline:10px 26px;text-overflow:ellipsis}
  .ltb2-a select[data-qf20="type"]{max-width:146px}
  .ltb2-a .tchip-a{flex:none;padding:0 10px;white-space:nowrap}
  .ltb2-a .btn{flex:none;white-space:nowrap}
}
.lst-tabs-a::-webkit-scrollbar{display:none}
.lst-tabs-a a.arch{color:var(--muted)}
/* rc3 O-12: status pills on their own row; search, sort and one Filters button with a count on the next */
.ltb-st-a{margin-bottom:8px}
.ltb-st-a .lst-tabs-a{flex:1 1 auto}
.btn.filt-a{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap}
.btn.filt-a.on-a{border-color:var(--accent)}
.fcnt-a{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent-tint-2);color:var(--accent-ink);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.lshow-a{display:grid;gap:8px}
.lsw-a{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.lsw-a>span{display:inline-flex;align-items:center;gap:6px;flex:1}
.lsw-a b{color:var(--muted);font-variant-numeric:tabular-nums}
.lviews-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.newl-a .btn svg{flex:none;margin-inline-end:-2px}

/* bulk bar: same height whether idle or busy so the grid never jumps */
.bulk-sep-a{width:1px;align-self:stretch;background:var(--line-2);margin-inline-start:12px}
.bulk-del-a{margin-inline-start:4px}
.bulk-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-3);position:fixed;inset-inline-start:50%;transform:translateX(-50%);bottom:24px;z-index:60;width:min(920px,calc(100vw - 32px))}
.ph-a{gap:8px}
.ph-a .view-a{margin-inline-end:4px}
#popmenu a.danger{color:var(--vw-danger)}
.appr-sel input{margin:0}

/* cards */
#page .lgrid20{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
#page .lcard20{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .15s ease,border-color .15s ease}
#page .lcard20:hover{transform:none;box-shadow:0 12px 28px -14px rgba(15,23,42,.3);border-color:var(--line-2)}
#page .lcard20.sel{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--vw-primary) 30%,transparent)}
#page .lcard20:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#page .lph20{position:relative;aspect-ratio:4/3;background:var(--canvas);overflow:hidden}
#page .lph20 img{width:100%;height:100%;object-fit:cover;display:block}
#page .lph20:after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(11,15,25,.55),rgba(11,15,25,0));pointer-events:none}
.lst-a{position:absolute;top:12px;inset-inline-start:12px;z-index:1;max-width:calc(100% - 100px)}
.lst-a .chip{box-shadow:0 1px 3px rgba(0,0,0,.18);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lst-a .chip.neutral{background:var(--surface);color:var(--ink-2)}
.lsel-a{position:absolute;top:10px;inset-inline-end:48px;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.18);opacity:0;transition:opacity .12s}
#page .lcard20:hover .lsel-a,#page .lcard20.sel .lsel-a,.lsel-a:focus-within{opacity:1}
.lsel-a input{width:16px;height:16px;margin:0;accent-color:var(--vw-primary)}
#page .lmenu20{position:absolute;top:10px;inset-inline-end:10px;z-index:2}
#page .lmenu20>.btn{background:var(--surface);border:none;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
#page .lpc20{position:absolute;inset-inline-end:12px;bottom:10px;z-index:1;color:#fff;font-size:12px;font-weight:600;display:inline-flex;gap:5px;align-items:center}
#page .lbody20{padding:14px 16px 12px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
#page .lprice20{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
#page .lt20{font-weight:600;font-size:14px;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.lmeta-a{font-size:12px;color:var(--muted)}
#page .lfacts20{display:flex;gap:14px;color:var(--ink-2);font-size:13px;margin-top:2px;flex-wrap:wrap}
#page .lfacts20 span{display:inline-flex;gap:5px;align-items:center}
#page .lfacts20 svg,#page .lloc20 svg,#page .lpc20 svg{width:14px;height:14px;flex:none}
#page .lloc20{display:flex;gap:5px;align-items:center;color:var(--muted);font-size:12px;min-width:0}
#page .lln20{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.lchips-a{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.lrej-a{margin-top:6px;font-size:12px;color:var(--vw-danger);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#page .lft20{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2);min-height:46px}
#page .lft20 .av{width:26px;height:26px;border-radius:50%;background:var(--vw-primary);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
#page .lft20 .grow{flex:1}
#page .lag20{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:500}
#page .lref20{font-size:11px;color:var(--muted);flex:none}
.lfix-a{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:12px;color:var(--vw-danger);white-space:nowrap}
.lempty-a{grid-column:1/-1;border:1px dashed var(--line-2);border-radius:14px;background:var(--surface)}

/* portal chips: neutral pill, state dot carries the colour */
.pchips{display:inline-flex;flex-wrap:wrap;gap:4px}
.pchip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.pchip i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.pchip.ok i{background:var(--vw-success)}.pchip.pending i{background:var(--vw-warning)}.pchip.bad i{background:var(--vw-danger)}.pchip.neutral i{background:var(--line-2)}
.pchip.bad{border-color:color-mix(in srgb,var(--vw-danger) 40%,var(--line));color:var(--vw-danger)}
.pchip:hover{border-color:var(--line-2)}

/* table */
.lsttbl-a .tbl-top-a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.lsttbl-a table{width:100%}
.lsttbl-a th.ck,.lsttbl-a td.ck{width:40px}
.lsttbl-a th.act,.lsttbl-a td.act{width:56px;text-align:end}
.lsttbl-a th.num,.lsttbl-a td.num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.lsttbl-a th.sortable-a{cursor:pointer;user-select:none;white-space:nowrap}
.lsttbl-a tr[data-act]{cursor:pointer}
.lsttbl-a tr.sel td{background:color-mix(in srgb,var(--vw-primary) 6%,var(--surface))}
.lcell-a{display:flex;gap:12px;align-items:center;min-width:200px;max-width:270px}
/* A-13: the table scrolls inside its own box (an absolutely placed child no longer escapes it and widens the page); at desktop widths the columns tighten so Portals stays in view; the permit cell wraps, never cuts the date */
.lsttbl-a .scrollx{position:relative}
/* A-010: the Listing column keeps at least 280px for the title */
@media (min-width:768px){.lsttbl-a:not(.pocket-a) .lcell-a{min-width:280px;max-width:360px}.lsttbl-a:not(.pocket-a) th,.lsttbl-a:not(.pocket-a) td{padding-inline:8px}.lsttbl-a:not(.pocket-a) td:nth-child(6){max-width:130px;white-space:normal}.lsttbl-a:not(.pocket-a) td:nth-child(6) *{white-space:normal}}
.lsttbl-a td{vertical-align:middle}
.lsttbl-a td:nth-child(5),.lsttbl-a td:nth-child(7){white-space:nowrap}
.lcell-a .thumb{width:56px;height:42px;border-radius:8px;object-fit:cover;flex:none;background:var(--canvas)}
.lcell-a>div{min-width:0}
.lcell-a .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcell-a .s{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stc-a{min-width:230px}
.stc-a .pchips{flex-wrap:nowrap}
.stc-a .pc-a{margin-top:4px}
.fixs-a{color:var(--vw-danger);font-size:12px;margin-top:2px}

/* approvals */
.appr-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.appr-list{display:flex;flex-direction:column;gap:12px}
.appr-a{position:relative;display:grid;grid-template-columns:220px 1fr;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.appr-a.sel{border-color:var(--accent)}
.appr-sel{position:absolute;top:10px;inset-inline-start:10px;z-index:1;width:32px;height:32px;display:grid;place-items:center;background:var(--surface);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.appr-ph{background:var(--canvas);min-height:180px}
.appr-ph img{width:100%;height:100%;object-fit:cover;display:block}
.appr-body{padding:16px 20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.appr-top{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.appr-price{font-size:20px;font-weight:700;letter-spacing:-.02em}
.appr-title{font-weight:600;font-size:16px}
.appr-meta{color:var(--muted);font-size:13px}
.appr-facts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2);align-items:center}
.appr-facts b{font-weight:500;color:var(--muted);margin-inline-end:4px}
.appr-portals{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.appr-ok{color:var(--vw-success)}
.appr-issues{margin:0;padding-block:10px 10px;padding-inline:28px 12px;border-radius:10px;background:color-mix(in srgb,var(--vw-danger) 8%,var(--surface));color:var(--ink);font-size:13px}
.appr-issues li+li{margin-top:4px}
.appr-err{padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--vw-danger) 35%,var(--line));background:color-mix(in srgb,var(--vw-danger) 8%,var(--surface));color:var(--ink);font-size:13px}
.appr-act{display:flex;gap:8px;align-items:center;margin-top:4px}
.appr-act .grow{flex:1}

/* publish dialog */
#modal .box:has(.pubm-a){width:min(760px,calc(100vw - 32px));max-width:min(760px,calc(100vw - 32px))}
.pubm-a .pv-pick .seg20{flex-wrap:wrap}
.pv-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
.pv-row{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pv-row.blocked{border-color:color-mix(in srgb,var(--vw-danger) 35%,var(--line))}
.pv-main{flex:1;min-width:0}
.pv-t{font-weight:600}
.pv-s{color:var(--muted);font-size:12px;margin-top:2px}
.pv-ok{color:var(--vw-success);font-size:12px;margin-top:4px}
.pv-bad{margin:6px 0 0;padding-inline-start:18px;color:var(--vw-danger);font-size:13px}
.pv-side{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:end;flex:none}
.pv-portals{font-size:12px;line-height:1.9}
.pv-check{display:flex;gap:8px;align-items:center;margin-top:14px;font-weight:500}
.stack-a{display:flex;flex-direction:column;gap:8px}
.stack-a .btn{justify-content:flex-start}

/* listing drawer */
#drawer.drawer-a{display:flex;flex-direction:column}
.dh-a{display:flex;gap:12px;align-items:flex-start}
.dh-a h2{font-size:20px;font-weight:600;margin:2px 0 8px;line-height:1.3;word-break:break-word}
.dref-a{font-size:12px;color:var(--muted)}
.dchips-a{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dtabs-a{display:flex;gap:20px;padding:0 24px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none;mask-image:linear-gradient(to right,#000 85%,transparent)}
.dtabs-a::-webkit-scrollbar{display:none}
.dtabs-a a{padding:10px 0;font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;display:inline-flex;gap:6px;align-items:center}
.dtabs-a a.on{color:var(--ink);border-bottom-color:var(--accent)}
.cnt-a{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--vw-danger);color:#fff;font-size:11px;font-weight:700}
.db-a{flex:1;overflow:auto}
.df-a{display:flex;gap:8px;align-items:center}
.df-a .grow{flex:1}
.dsec-a{margin-bottom:20px}
.dsec-a h3{font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 8px;text-transform:none}
.dstrip-a{display:grid;grid-template-columns:2fr 1fr;gap:6px;margin-bottom:16px}
.dstrip-a img{width:100%;height:96px;object-fit:cover;border-radius:10px;background:var(--canvas)}
.dstrip-a img:first-child{grid-row:span 2;height:198px}
.kv-a{margin:0;display:flex;flex-direction:column}
.kv-a>div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.kv-a>div:last-child{border-bottom:0}
.kv-a dt,.kv-a span{color:var(--muted)}
.kv-a dd,.kv-a b{margin:0;color:var(--ink);word-break:break-word;font-weight:500}
.kv-a em{grid-column:2;font-style:normal;color:var(--vw-success);font-size:12px}
.fix-a{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fix-a li{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:10px 12px;border-radius:10px;font-size:13px;background:var(--canvas);color:var(--ink)}
.fix-a li.danger{background:color-mix(in srgb,var(--vw-danger) 8%,var(--surface))}
.fix-a li.warn{background:color-mix(in srgb,var(--vw-warning) 12%,var(--surface))}
.fix-a li a{font-weight:600;color:var(--accent);white-space:nowrap;cursor:pointer}
.reject-a{padding:12px 14px;border-radius:12px;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--vw-danger) 35%,var(--line));background:color-mix(in srgb,var(--vw-danger) 8%,var(--surface));color:var(--ink);font-size:13px}
.reject-a b{color:var(--vw-danger)}
.step-a{list-style:none;display:flex;gap:4px;margin:0 0 16px;padding:0}
.step-a li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--muted);text-align:center;position:relative}
.step-a li:not(:last-child):after{content:"";position:absolute;top:13px;inset-inline-start:calc(50% + 16px);inset-inline-end:calc(-50% + 16px);height:2px;background:var(--line)}
.step-a li.done:not(:last-child):after{background:var(--vw-success)}
.step-a i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;border:2px solid var(--line-2);background:var(--surface);color:var(--muted)}
.step-a li.done i{background:var(--vw-success);border-color:var(--vw-success);color:#fff}
.step-a li.done span{color:var(--ink)}
.step-a li.now i{border-color:var(--accent);color:var(--accent)}
.step-a li.now span{color:var(--ink);font-weight:600}
.step-a li.bad i{background:var(--vw-danger);border-color:var(--vw-danger);color:#fff}
.step-a li.bad span{color:var(--vw-danger);font-weight:600}
.verdict-a{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.verdict-a.ok{border-color:color-mix(in srgb,var(--vw-success) 35%,var(--line));background:color-mix(in srgb,var(--vw-success) 7%,var(--surface))}
.verdict-a.bad{border-color:color-mix(in srgb,var(--vw-danger) 30%,var(--line))}
.permit-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;padding-top:8px;border-top:1px solid var(--line)}
.permit-a.ok>span:first-child{color:var(--vw-success);font-weight:600}
.permit-a.bad>span:first-child{color:var(--vw-danger);font-weight:600}
.permit-a .btn{margin-inline-start:auto}
.prow-a{padding:10px 0;border-bottom:1px solid var(--line)}
.prow-a:last-of-type{border-bottom:0}
.prow-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.prow-h b{min-width:120px;font-weight:600}
.prow-err{margin-top:6px;font-size:13px;color:var(--ink);padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--vw-danger) 8%,var(--surface))}
.prow-err a{font-weight:600;color:var(--accent);margin-inline-start:6px;cursor:pointer}
.tl-a{list-style:none;margin:0;padding:0}
.tl-a li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.tl-a li.bad span:last-child{color:var(--ink)}
.tl-a .when{color:var(--muted);font-size:12px}
.tech-a{display:inline-flex;gap:4px;margin-inline-start:8px}
.dgrid-a{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dgrid-a figure{margin:0;position:relative}
.dgrid-a img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--canvas);display:block}
.dgrid-a figcaption{position:absolute;inset-inline-start:6px;bottom:6px;font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;background:var(--surface);color:var(--ink)}
.dgrid-a figcaption.bad{color:var(--vw-danger);inset-inline-end:6px}
.docs-a{list-style:none;margin:0 0 8px;padding:0}
.docs-a li{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.docrows-a>div{display:flex;gap:8px;align-items:center;padding:6px 0;font-size:13px}
.docrows-a>div .muted{flex:1}
.prev-a{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.prev-a>img,.prev-ph{width:100%;aspect-ratio:16/10;object-fit:cover;display:grid;place-items:center;background:var(--canvas);color:var(--muted)}
.prev-b{padding:16px 20px}
.prev-price{font-size:20px;font-weight:700}
.prev-t{font-weight:600;margin-top:2px}
.prev-f,.prev-l{color:var(--muted);font-size:13px;margin-top:4px}
.prev-d{font-size:13px;line-height:1.55;margin:12px 0;white-space:pre-line;max-height:12em;overflow:auto}
.prev-foot{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.qr-a{width:56px;height:56px;margin-inline-start:auto}
.notes-a{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.notes-a li{padding:10px 12px;border-radius:10px;background:var(--canvas)}
.notes-a p{margin:0 0 4px;font-size:13px}
.dsec-a #noteText{flex:1;height:40px}

/* filter panel (rc3 toolbar): the kit's dropdown or bottom sheet holds the grouped fields */
.lt-grid .sg-a{grid-column:1/-1;margin-bottom:12px}
.lt-grid{max-height:min(60vh,560px);overflow:auto}
.sg-a{margin-bottom:20px}
.sg-a h3{font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 8px}
.sgrid-a{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.sgrid-a .field{margin:0;min-width:0}
.sgrid-a input,.sgrid-a select{width:100%}

.toast.act{cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* listing editor: a short sticky bar, six step cards, a step rail */
.edbar-a{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 0;margin:-8px 0 4px;background:var(--canvas);border-bottom:1px solid var(--line)}
.edbar-a .grow{flex:1}
.edid-a{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.edid-a .mono{font-size:13px;color:var(--ink-2)}
.edtitle-a h1{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:12px 0 16px;line-height:1.25;word-break:break-word}
.chipbtn-a{border:0;cursor:pointer;font:inherit;font-size:12px;font-weight:600}
#popmenu a[data-act="edGoField"]{white-space:normal;max-width:380px;line-height:1.35}
#page .ed.ed-a{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
#page .ed-a .steps-a{position:sticky;top:76px;display:flex;flex-direction:column;gap:2px}
#page .ed-a .steps-a a{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:500;color:var(--ink-2);background:transparent;cursor:pointer}
#page .ed-a .steps-a a span:nth-child(2){flex:1;text-align:start}
#page .ed-a .steps-a a.on{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.n-a{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--canvas);border:1px solid var(--line-2);font-size:11px;font-weight:700;color:var(--ink-2);flex:none}
#page .ed-a .steps-a a .st{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}
#page .ed-a .steps-a a .st.ok{background:var(--vw-success)}#page .ed-a .steps-a a .st.warn{background:var(--vw-warning)}#page .ed-a .steps-a a .st.bad{background:var(--vw-danger)}
.stepsbody-a{min-width:0}
#page .ed-a .step-a{display:block;width:100%;margin-bottom:20px;scroll-margin-top:12px}
/* the editor bar sits under the sticky top bar (not behind it), so Save and Submit stay reachable while scrolling;
   focus, Tab and jump-to-field scroll fields clear of both bars */
@media (min-width:768px){
  .edbar-a{top:var(--topbar-h)}
  #page .ed-a .steps-a{top:calc(var(--topbar-h) + 76px)}
  html:has(#ed9){scroll-padding-top:calc(var(--topbar-h) + 76px);scroll-padding-bottom:24px}
}
@media (max-width:767px){ html:has(#ed9){scroll-padding-top:84px;scroll-padding-bottom:88px} }
/* the simulator notice scrolls away in the editor, so it never covers the editor bar (Save, Submit, the required-fields count) */
html:has(#ed9) .sim-badge{position:static}
#page .ed-a .step-a>.card{width:100%;box-sizing:border-box;max-width:none}
#page .ed-a .step-a>.card{padding:20px 24px}
.step-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.step-h .n-a{width:28px;height:28px;font-size:13px;background:var(--vw-primary);border-color:var(--accent);color:#fff}
#page .ed-a .step-h h2{font-size:20px;font-weight:600;margin:0 0 2px}
#page .ed-a .field{min-width:0}
#page .ed-a .field>label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
#page .ed-a .field .help{font-size:12px;color:var(--muted);margin-top:4px}
#page .ed-a .field .e{font-size:12px}
#page .ed-a .field input:not([type=checkbox]):not([type=radio]),#page .ed-a .field select,#page .ed-a .field textarea{width:100%;min-width:0;box-sizing:border-box}
.sub-a{font-size:14px;font-weight:600;margin:0 0 10px;color:var(--ink)}
h4.sub-a{margin-top:14px}
/* Write with AI sits on the "Title and description" heading row (it used to float up into the top bar, out of reach) */
.ttl-a{position:relative}
.ttl-a>.sub-a{min-height:32px;display:flex;align-items:center;margin-bottom:8px}
.ttl-a .b-aiw-head{top:0;inset-inline-end:0}
@media (max-width:767px){.ttl-a .b-aiw-head{position:static;margin:0 0 12px}}
.ro-a{min-height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px dashed var(--line-2);border-radius:10px;font-size:14px;color:var(--ink);word-break:break-word}
.link-a{font-size:13px;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:none}
.link-a:hover{text-decoration:underline}
.more-a{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.more-a>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--accent);list-style:none;display:inline-flex;align-items:center;gap:8px}
.more-a>summary::-webkit-details-marker{display:none}
.more-a>summary:before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:6px;border:1px solid currentColor;font-size:12px;line-height:1}
.more-a[open]>summary:before{content:"−"}
.more-b{margin-top:14px}
.aed-a{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);overflow:hidden;height:40px}
.aed-a span{display:grid;place-items:center;padding:0 10px;font-size:13px;font-weight:600;color:var(--muted);background:var(--canvas);border-inline-end:1px solid var(--line)}
#page .ed-a .aed-a input{border:0;border-radius:0;flex:1;min-width:0;height:100%;font-variant-numeric:tabular-nums;box-shadow:none;background:transparent}
.field.err .aed-a{border-color:var(--vw-danger)}
.kind-a{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:6px;background:var(--canvas);color:var(--ink-2);font-size:11px;font-weight:600;margin-inline-start:4px}
.locur-a{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:6px}
.locur-a .s{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.locur-a.editing{border-style:dashed}
#page .ed-a .locpick{display:block}
#page .ed-a .locres{min-height:0;max-height:240px}
#page .ed-a .locres:empty{display:none}
/* the portal has no keys: say so and where to connect it, instead of "no match" */
.locnc-a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;font-size:13px;color:var(--ink)}
.locnc-a span{color:var(--muted)}
.imgs-a{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.im-a{position:relative;border-radius:10px;overflow:hidden;background:var(--canvas);cursor:grab;transition:opacity .15s}
.im-a.gone{opacity:.25;pointer-events:none}
.im-a.drag{opacity:.5}.im-a.over{outline:2px solid var(--accent);outline-offset:2px}
.im-a .pic{aspect-ratio:4/3}
.im-a .pic img{width:100%;height:100%;object-fit:cover;display:block}
.im-a .cov{position:absolute;inset-inline-start:8px;top:8px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface);color:var(--ink)}
.im-a .err{font-size:12px;color:var(--vw-danger);padding:6px 8px;background:var(--surface)}
.ov-a{position:absolute;inset-inline-end:6px;top:6px;display:flex;gap:4px;opacity:0;transition:opacity .12s}
.im-a:hover .ov-a,.im-a:focus-within .ov-a{opacity:1}
.ov-a .btn{background:var(--surface);border:0;box-shadow:0 1px 3px rgba(0,0,0,.2);font-size:14px}
.drop-a{grid-column:1/-1;padding:28px 16px;text-align:center;border:1px dashed var(--line-2);border-radius:12px;color:var(--muted);font-size:13px}
.amen-a{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.amen-a label{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px;cursor:pointer;background:var(--surface);white-space:normal}
.amen-a label.on{border-color:var(--accent);background:color-mix(in srgb,var(--vw-primary) 8%,var(--surface))}
.amen-a label span{flex:1}
.amen-a em{font-style:normal;font-size:11px;color:var(--muted)}
#page .ed-a .amen-a input{width:auto;margin:0;accent-color:var(--vw-primary)}
.pv-card-a{margin-top:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);display:flex;flex-direction:column;gap:2px;font-size:13px}
.pv-card-a.ok{border-color:color-mix(in srgb,var(--vw-success) 40%,var(--line));background:color-mix(in srgb,var(--vw-success) 7%,var(--surface))}
.pv-card-a.ok b{color:var(--vw-success)}
.pv-card-a.bad{border-color:color-mix(in srgb,var(--vw-danger) 35%,var(--line));background:color-mix(in srgb,var(--vw-danger) 7%,var(--surface))}
.slots-a{display:flex;flex-direction:column;gap:6px}
.slot-a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:10px;background:var(--surface);flex-wrap:wrap}
.slot-a.ok{border-style:solid;border-color:var(--line)}
.slot-a .t{font-weight:600;font-size:13px;min-width:120px}
.slot-a .muted{flex:1}
.slot-a .grow{flex:1}
.pcard-a{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface);display:flex;flex-direction:column;gap:6px;min-width:0}
.pcard-a.bad{border-color:color-mix(in srgb,var(--vw-danger) 35%,var(--line))}
.pe-a{font-size:12px;color:var(--ink);padding:6px 8px;border-radius:8px;background:color-mix(in srgb,var(--vw-danger) 8%,var(--surface))}
.edfoot-a{display:none}
@media (max-width:1024px){#page .ed.ed-a{grid-template-columns:170px minmax(0,1fr);gap:16px}}
@media (max-width:760px){
  #page .ed.ed-a{grid-template-columns:minmax(0,1fr)}
  #page .ed-a .steps-a{position:static;flex-direction:row;overflow-x:auto;gap:4px;scrollbar-width:none}
  #page .ed-a .steps-a a{white-space:nowrap}
  #page .ed-a .steps-a a .st{display:none}
  #page .ed-a .f2,#page .ed-a .f3,#page .ed-a .f4{grid-template-columns:minmax(0,1fr)}
  #page .ed-a .step-a>.card{padding:16px}
  .edbar-a [data-act="edSave"],.edbar-a [data-act="edSubmit"],.edbar-a [data-act="edPublish"]{display:none}
  .edbar-a .issues-a .chip{max-width:150px;overflow:hidden;text-overflow:ellipsis}
  .edfoot-a{display:flex;gap:8px;position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  .edfoot-a .btn{flex:1}
  .edtitle-a h1{font-size:20px}
  .stepsbody-a{padding-bottom:80px}
}

#drawer .df.df-a{background:var(--surface);border-top:1px solid var(--line)}
@media (max-width:1240px){.lsttbl-a:not(.pocket-a) th:nth-child(7),.lsttbl-a:not(.pocket-a) td:nth-child(7){display:none}}
@media (max-width:1100px){.lsttbl-a:not(.pocket-a) th:nth-child(5),.lsttbl-a:not(.pocket-a) td:nth-child(5){display:none}.lsttbl-a .stc-a{min-width:200px}}
@media (max-width:1024px){
  #page .lgrid20{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .appr-a{grid-template-columns:160px 1fr}
}
@media (max-width:640px){
  .qf-a,.ltb2-a .sort-a,.ltb2-a .view-a{display:none}
  .filt-phone-a,.btn.filt-phone-a{display:inline-flex}
  .ltb-a{gap:8px;margin-bottom:8px}
  .ltb-a .q{flex-basis:100%;min-width:0;order:-1}
  .ltb-a .sort-a{display:none}
  .lst-tabs-a{width:100%}
  .ltb2-a .tchip-a{flex:1;justify-content:center}
  #page .lgrid20{grid-template-columns:1fr}
  .lsel-a{opacity:1}
  .bulk-a{bottom:76px}
  .ph-a .view-a{display:none}
  .appr-a{grid-template-columns:1fr}
  .appr-ph{min-height:0;aspect-ratio:16/9}
  .appr-act{flex-wrap:wrap}
  .kv-a>div{grid-template-columns:1fr;gap:2px}
  .sgrid-a{grid-template-columns:1fr}
  .dtabs-a{padding:0 16px}
  .pv-row{flex-direction:column}
  .pv-side{align-items:flex-start;text-align:start}
  .tl-a li{grid-template-columns:1fr;gap:2px}
}
.qtips-a{margin:6px 0 0;padding-inline-start:18px;font-size:12.5px;color:var(--neu-ink)}.qtips-a li{margin:2px 0}


/* Area B screens: Today, Leads, the lead drawer, notifications, the search palette and the AI writer.
   Layout only. Tokens only (var(--...)); shared components (.btn, .chip, .card, .tile, .seg20, .tbl) come from the design system. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.b-ic{flex:none;vertical-align:-3px}
.btn .b-ic+span{margin-inline-start:6px}
.b-sub{font-size:12px;color:var(--muted);line-height:1.45}
.b-mono,.b-ref{font-family:var(--mono)}
.b-ref{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--canvas);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap;flex:none}
.b-dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:none}
.b-answered{font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.b-note{padding:10px 12px;border-radius:10px;background:var(--canvas);border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.b-err{color:var(--vw-danger)}
.b-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--vw-primary);color:var(--vw-white);font-size:11px;font-weight:600;margin-inline-start:6px}

/* Lead stages: own outline palette, never the portal-state colours */
.b-stage{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid currentColor;background:transparent}
.b-stage.s-new{color:var(--vw-accent-2)}
.b-stage.s-contacted{color:color-mix(in srgb,var(--accent) 70%,var(--vw-accent-2))}
.b-stage.s-viewing{color:var(--accent)}
.b-stage.s-offer{color:color-mix(in srgb,var(--vw-accent-3) 75%,var(--ink))}
.b-stage.s-won{color:var(--surface);background:var(--ink);border-color:var(--ink)}
.b-stage.s-lost{color:var(--muted);border-color:var(--line-2)}

/* Source and channel */
.b-src{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.b-src .mark{flex:none}
.b-chan{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--canvas);color:var(--ink-2);flex:none}
.b-srccell{display:flex;align-items:center;gap:8px}

/* Leads page */
.b-ph{align-items:center}
.b-phact{display:flex;gap:8px;flex-wrap:wrap}
.b-tabs{margin-bottom:16px}
.b-lbar{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.b-lbar .q{width:100%;max-width:none;height:40px;border:1px solid var(--line);border-radius:10px;padding-block:0 0;padding-inline:36px 12px;font:inherit;font-size:14px;color:var(--ink);background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 12px center}
.b-lbar .lbar20{margin:0}
.b-lbar .lbar20{gap:8px}
.b-lbar .lbar20 select{max-width:180px;font-size:13px;padding-block:0 0;padding-inline:10px 28px}
.b-lbar .lbar20 select.b-sort{margin-inline-start:auto}
:where(.b-tpl,.b-tone,#stage20,.b-sheet select){appearance:auto;border:1px solid var(--line-2);border-radius:8px;background-color:var(--surface);color:var(--ink);padding:0 8px;font:inherit;font-size:13px}
.b-fbtn{display:none;align-self:flex-start}
.b-lbar .btn.b-fbtn{display:none}
.b-ltbl .b-scroll{overflow-x:auto;position:relative}
.b-ltbl table{width:100%;border-collapse:collapse;table-layout:auto}
.b-ltbl th{text-align:start;white-space:nowrap}
.b-th{all:unset;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;display:inline-flex;align-items:center;gap:4px}
.b-th:after{content:"";width:0;height:0;border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:5px solid var(--line-2)}
.b-th.on{color:var(--ink)}.b-th.on:after{border-top-color:var(--accent)}
.b-th:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.b-row{cursor:pointer}
.b-row:hover td{background:var(--canvas)}
.b-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.b-row td{vertical-align:middle}
.b-who{min-width:0}
.b-name{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.b-also{color:var(--accent);font-weight:600;cursor:pointer;white-space:nowrap}
.b-also:hover{text-decoration:underline}
.b-lst{display:flex;align-items:center;gap:8px;min-width:0;max-width:280px}
.b-srcm{display:inline-flex}
.b-lt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);font-size:13px;min-width:0}
.b-agent{white-space:nowrap}
td.b-act,th.b-act{text-align:end;width:1%;white-space:nowrap}
.b-skel td i{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--canvas),var(--line),var(--canvas));background-size:200% 100%;animation:b-sh 1.2s ease-in-out 3}
@keyframes b-sh{from{background-position:200% 0}to{background-position:-200% 0}}
.b-lcards{display:none}
.b-sheet{display:flex;flex-direction:column;gap:10px}
.b-sheet select{width:100%;height:44px}

/* Lead drawer */
.b-dh{align-items:flex-start!important;gap:12px}
.b-dh h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}
.b-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--muted)}
.b-meta .b-src{font-size:12px}
.b-contact{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.b-recorded{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--ink-2)}
/* the contact row and the recorded line use the full width of the drawer header, under the close button */
.b-dh>.b-contact{flex:1 1 100%;margin-top:0}
.b-dh>.b-recorded{flex:1 1 100%;margin-top:-4px}
.b-contact a.btn{text-decoration:none}
/* lead notes */
.b-sec h3 .b-ncnt{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-inline-start:4px;border-radius:999px;background:var(--canvas);border:1px solid var(--line);font-size:11px;letter-spacing:0;color:var(--ink-2);vertical-align:1px}
.b-lnadd{display:flex;flex-direction:column;gap:8px}
#leadNote20{width:100%;min-height:64px;resize:vertical;font:inherit;font-size:14px;line-height:1.5;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink)}
.b-lnfoot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.b-lnotes{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.b-lnotes li{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.b-lnhd{display:flex;align-items:center;gap:8px;font-size:13px}
.b-lnhd .btn{margin-inline-start:auto;min-height:28px;padding:0 8px}
.b-lntext{margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.b-recorded .b-ic{color:var(--vw-success)}
.b-close{flex:none}
.b-db{display:flex;flex-direction:column;gap:20px}
.b-msg{margin:0;padding:12px 16px;border-inline-start:3px solid var(--line-2);background:var(--canvas);border-radius:0 10px 10px 0;font-size:14px;line-height:1.5;color:var(--ink)}
.b-msg0{margin:0}
.b-reply{padding:16px!important;display:flex;flex-direction:column;gap:12px;margin:0}
.b-rhd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.b-rhd h3{margin:0;font-size:16px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.b-rhd h3 .b-ic{color:var(--accent)}
.b-tpl{height:32px;max-width:200px}
.b-sum{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.b-intent{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;border:1px solid currentColor;font-size:12px;font-weight:600;flex:none}
.b-intent.i-hot{color:var(--vw-accent-1)}
.b-intent.i-warm{color:color-mix(in srgb,var(--vw-warning) 45%,var(--ink))}
.b-intent.i-cold{color:var(--vw-secondary)}
.b-lockline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.b-lockline .b-ic{color:var(--muted)}
.b-ropts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.b-seg a{padding:5px 10px}
.b-seg a.off{opacity:.45;cursor:not-allowed}
.b-tone{height:36px;width:auto}
.b-subj{margin:0}
#replyText20{width:100%;min-height:132px;resize:vertical;font:inherit;font-size:14px;line-height:1.5;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink)}
.b-rfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.b-rfoot .b-sub{flex:1 1 180px}
.b-skel3{display:flex;flex-direction:column;gap:8px;padding:2px 0}
.b-skel3 i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--canvas),var(--line),var(--canvas));background-size:200% 100%;animation:b-sh 1.2s ease-in-out infinite}
.b-skel3 i:nth-child(2){width:86%}.b-skel3 i:nth-child(3){width:62%}
.b-draftskel{padding:12px;border:1px solid var(--line);border-radius:10px}
.b-sec h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.b-nolink{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.b-nolink .b-sub{flex:1 1 220px}
.b-mini,.b-sim{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.b-mini[role=button]{cursor:pointer}
.b-mini[role=button]:hover{border-color:var(--line-2)}
.b-mini:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.b-thumb{width:64px;height:48px;border-radius:8px;background:var(--canvas);overflow:hidden;flex:none}
.b-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.b-minibody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.b-mt{font-weight:600;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.b-chev{color:var(--muted)}
.b-sims{display:flex;flex-direction:column;gap:8px}
.b-dl{display:grid;grid-template-columns:132px 1fr;gap:10px 16px;margin:0;font-size:13px}
.b-dl dt{color:var(--muted);font-weight:500}
.b-dl dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.b-dl dd a{color:var(--ink)}
.b-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.b-tag{display:inline-flex;align-items:center;gap:2px;height:26px;padding-block:0 0;padding-inline:10px 4px;border-radius:999px;background:var(--canvas);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2)}
.b-tag button{all:unset;cursor:pointer;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--muted)}
.b-tag button:hover{background:var(--line);color:var(--ink)}
.b-tag button .b-ic{width:12px;height:12px}
#tagIn20{height:26px;min-height:0;width:120px;padding:0 10px;border:1px dashed var(--line-2);border-radius:999px;font:inherit;font-size:12px;background:transparent;color:var(--ink)}
.b-details{border-top:1px solid var(--line);padding-top:12px}
.b-details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:6px}
.b-details summary::-webkit-details-marker{display:none}
.b-details summary:before{content:"";width:6px;height:6px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.b-details[open] summary:before{transform:rotate(45deg)}
.b-details .b-dl{margin-top:12px}
.b-df{align-items:center;flex-wrap:wrap}
html.dark .b-df{background:var(--surface);border-top-color:var(--line)}
.b-df .grow{flex:1}
.b-stagelab{font-size:13px;font-weight:600;color:var(--ink-2)}
#stage20{height:40px;width:auto;min-width:150px}
.b-pick{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.b-pickrow{all:unset;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.b-pickrow:hover,.b-pickrow:focus-visible{border-color:var(--accent)}
.b-pickrow .b-mt{flex:1}

/* Today */
.b-today-h h1{margin:0}
.b-date{margin-top:4px;font-size:13px}
.b-setup{margin:0 0 16px;padding:14px 20px!important}
.b-setuprow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.b-setupt{display:flex;flex-direction:column;gap:2px;min-width:200px}
.b-setupt b{font-size:14px;font-weight:600}
.b-prog{flex:1 1 160px;height:6px;border-radius:999px;background:var(--line);overflow:hidden;min-width:120px}
.b-prog i{display:block;height:100%;background:var(--vw-primary);border-radius:999px}
.b-setupbtns{display:flex;gap:8px}
.b-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column}
.b-steps li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.b-steps li>div{flex:1;min-width:0}
.b-steps li b{font-size:14px;font-weight:600}
.b-stepn{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--canvas);border:1px solid var(--line);color:var(--ink-2);flex:none}
.b-steps li.done .b-stepn{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.b-steps li.done b{color:var(--muted)}
.b-setupfoot{display:flex;justify-content:flex-end;padding-top:8px;border-top:1px solid var(--line)}
.b-setup-hidden{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin:0 0 16px}
.b-showsetup{display:flex;justify-content:center;margin-top:16px}
.b-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.b-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.b-grid>div{min-width:0}
.b-col2,.b-span2{grid-column:span 2}
.b-card{margin:0}
.b-chd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;min-height:32px}
.b-chd h3{margin:0;font-size:16px;font-weight:600}
.b-wlist,.b-tlist,.b-rlist,.b-nlist,.b-plist,.b-llist,.b-alist,.b-legend{list-style:none;margin:0;padding:0}
.b-wlist li,.b-tlist li,.b-rlist li,.b-plist li,.b-llist li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.b-wlist li:first-child,.b-tlist li:first-child,.b-rlist li:first-child,.b-plist li:first-child,.b-llist li:first-child{border-top:0;padding-top:0}
.b-witem,.b-todo[role=button],.b-ritem,.b-alist li[role=button]{cursor:pointer}
.b-witem:hover .b-wmain b,.b-todo[role=button]:hover .b-wmain b,.b-ritem:hover .b-wmain b{color:var(--accent)}
.b-witem:focus-visible,.b-todo:focus-visible,.b-ritem:focus-visible,.b-alist li:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.b-wmain{flex:1;min-width:0}
.b-wmain>b{display:block;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-wmain .b-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;overflow-wrap:anywhere;min-width:0}
.b-wsrc{flex:none;display:flex}
.b-sev{width:8px;height:8px;border-radius:50%;flex:none;background:var(--vw-warning)}
.b-sev.danger{background:var(--vw-danger)}
.b-todo.is-co{background:var(--canvas);border-radius:10px;padding:10px 12px!important;border-top:0!important;margin-bottom:6px}
.b-own{white-space:nowrap}
.b-nlist{display:flex;flex-direction:column;gap:6px}
.b-need{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.b-need:hover{border-color:var(--line-2);background:var(--canvas)}
.b-need:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.b-need b{font-size:20px;font-weight:700;color:var(--ink);min-width:28px;font-variant-numeric:tabular-nums}
.b-need span{flex:1}
.b-need .b-ic{color:var(--muted)}
.b-thumb.sm{width:48px;height:36px}
.b-rstate{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.b-plist .b-pname{flex:1;font-size:14px;font-weight:600;min-width:0}
.b-plist .mark{flex:none}
.b-plist li>b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.b-llist li .b-mono{font-size:12px;font-weight:500;color:var(--muted);margin-inline-start:4px}
.b-alist li{display:flex;gap:10px;padding:8px 0;font-size:13px;color:var(--ink)}
.b-adot{width:8px;height:8px;border-radius:50%;background:var(--line-2);margin-top:6px;flex:none}
.b-chart{display:block;width:100%;height:auto;color:var(--ink)}
.b-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px}
.b-legend li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.b-legend li i{width:10px;height:10px;border-radius:3px;flex:none}
.b-legend li b{color:var(--ink);font-variant-numeric:tabular-nums}
.b-legend-col{flex-direction:column;gap:8px}
.b-legend-col li span{flex:1}
.b-donut{position:relative;width:132px;margin:0 auto}
.b-donutn{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:700}
@media (max-width:1180px){.b-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.b-col2,.b-span2{grid-column:1/-1}}
@media (max-width:900px){.b-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.b-grid{grid-template-columns:minmax(0,1fr)}}

/* Notifications */
.b-notes{gap:16px}
.b-ngroup{border:1px solid var(--line);border-radius:12px;padding:0 12px}
.b-ngroup summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:12px 0;font-size:14px;font-weight:600;color:var(--ink)}
.b-ngroup summary::-webkit-details-marker{display:none}
.b-ngroup summary span{flex:1}
.b-ngroup summary:after{content:"";width:6px;height:6px;border-inline-end:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-inline-start:4px}
.b-ngroup[open] summary:after{transform:rotate(-135deg)}
.b-ncount{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--canvas);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2)}
.b-nitems{list-style:none;margin:0;padding:0}
.b-nitems li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.b-ngroup .b-nitems{padding-bottom:4px}
.b-nitem{cursor:pointer}
.b-nitem:hover .b-wmain b{color:var(--accent)}
.b-nitem:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.b-nh{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.b-upd .b-wmain b{font-weight:500;white-space:normal}
.b-upd.unread .b-wmain b{font-weight:600}
.b-udot{width:8px;height:8px;border-radius:50%;flex:none;background:transparent}
.b-upd.unread .b-udot{background:var(--vw-primary)}

/* Search palette */
#modal.b-cmdmodal{align-items:flex-start}
#modal.b-cmdmodal .box{width:min(640px,calc(100vw - 32px));max-width:640px;padding:0;margin-top:12vh;overflow:hidden}
.b-cmd{display:flex;flex-direction:column;max-height:70vh}
.b-cmdin{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.b-cmdin input{flex:1;height:56px;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:0}
.b-cmd kbd{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 5px;border-radius:5px;border:1px solid var(--line);background:var(--canvas);font:inherit;font-size:11px;font-weight:600;color:var(--muted)}
.b-cmdr{overflow:auto;padding:8px;flex:1}
.b-cgroup{padding:10px 10px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.b-opt{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer;min-height:44px}
.b-opt[aria-selected=true]{background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line)}
.b-opt .b-wmain b{font-size:14px}
.b-picon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--canvas);color:var(--ink-2);flex:none}
.b-cmdfoot{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.b-cmdfoot span{display:inline-flex;align-items:center;gap:4px}
.b-askhead{padding:10px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.b-askt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.b-askt b{font-size:14px;font-weight:600}
.b-askchips{display:flex;flex-wrap:wrap;gap:6px}
.b-askbtns{display:flex;gap:8px}
@media (max-width:767px){.b-cmdfoot{display:none}#modal.b-cmdmodal .box{margin-top:16px}}

/* AI writer in the listing editor: the button sits in the section header row */
#sec-title>.card{position:relative}
.b-aiw-head{position:absolute;top:14px;inset-inline-end:18px;display:flex;align-items:center;gap:8px}
.b-aiw-head .btn .b-ic{color:var(--accent)}
:where(.b-aitone){height:32px;border:1px solid var(--line-2);border-radius:8px;background-color:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:0 8px}
.b-aisug{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--surface)}
.b-aisugh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.b-aisugh .grow{flex:1}
.b-aisugh b{font-size:14px;font-weight:600}
.b-aif{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.b-aif.used{opacity:.7}
.b-aifh{display:flex;align-items:center;gap:10px}
.b-aifh b{font-size:13px;font-weight:600}
.b-aifh .b-sub{flex:1}
.b-aicmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.b-aicur,.b-ainew{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:13px;color:var(--ink-2)}
.b-aicur>div{padding:8px 10px;border-radius:8px;background:var(--canvas);white-space:pre-wrap;overflow-wrap:anywhere}
.b-ainew input,.b-ainew textarea{width:100%;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);color:var(--ink);resize:vertical}
.b-empty{font-style:italic;color:var(--muted)}
.b-aiwarn{font-size:13px;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--vw-warning) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--vw-warning) 55%,var(--line));color:var(--ink)}
.b-aiused{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ink-2)}
.b-aiused .b-ic{color:var(--vw-success)}
@media (max-width:767px){.b-aiw-head{position:static;margin-top:12px}.b-aicmp{grid-template-columns:1fr}}

/* AI check rows: chip, message, one action column */
.b-aclist{list-style:none;margin:0;padding:0}
.b-acrow{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.b-acrow .chip{justify-self:start}
.b-acmsg{font-size:13px;color:var(--ink);min-width:0}
.b-acact{justify-self:end;white-space:nowrap}
.b-aidone{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;color:var(--ink-2)}
.b-aidone .b-ic{color:var(--vw-success)}
.b-aisum{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:12px;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--ink-2)}
.b-aisum>span:nth-child(2){flex:1}

/* Phones: cards instead of the table, filters in a sheet, a footer that fits */
@media (max-width:767px){
  .b-ltbl{display:none}
  .b-lcards{display:flex;flex-direction:column;gap:10px}
  .b-lcard{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer}
  .b-lcmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .b-lchd{display:flex;align-items:center;gap:8px;min-width:0}
  .b-lchd b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .b-lcbtns{display:flex;gap:8px}
  .b-icbtn{width:44px;height:44px;padding:0;display:grid;place-items:center}
  .b-lbar .b-filters{display:none}
  .b-fbtn,.b-lbar .btn.b-fbtn{display:inline-flex}
  .b-ph{flex-wrap:wrap}
  .b-dl{grid-template-columns:1fr}
  .b-dl dt{margin-top:4px}
  .b-df #stage20{flex:1 1 100%}
  .b-df .btn{flex:1 1 auto}
  .b-contact .btn{flex:1 1 0;justify-content:center;min-width:0;padding:0 8px}
  .b-stagelab{display:none}
  #modal .box:has(.b-sheet){width:calc(100vw - 32px);max-width:calc(100vw - 32px)}
  .b-witem,.b-todo,.b-ritem{flex-wrap:wrap}
  .b-witem .b-wmain{flex:1 1 calc(100% - 44px)}
  .b-witem .chip{margin-inline-start:36px}
  .b-witem .btn{margin-inline-start:auto}
  .b-todo .b-wmain{flex:1 1 calc(100% - 24px)}
  .b-todo .btn{margin-inline-start:20px}
  .b-kpis .tile .v{font-size:22px}
  .b-phact .btn{flex:1 1 auto;justify-content:center}
}
/* Today: the purple welcome panel (owner asked for it back) */
.hero.b-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;margin-bottom:16px;position:relative;overflow:hidden;border-radius:18px;padding:28px}
.hero.b-hero:before,.hero.b-hero:after{content:none;display:none}

.hero.b-hero>*{position:relative;z-index:1}
.b-hero-date{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#c4b5fd;margin-bottom:6px}
.hero.b-hero h1{font-size:28px;font-weight:700;letter-spacing:-.02em;color:#fff;margin:0}
.hero.b-hero p{color:rgba(255,255,255,.78);margin:6px 0 18px;font-size:14px}
.hero.b-hero .acts{display:flex;gap:8px;flex-wrap:wrap}
.hero.b-hero .acts .btn svg{width:16px;height:16px}
.hero.b-hero .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero.b-hero .stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;font:inherit;color:#fff;cursor:pointer;background:var(--rail-hover);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:14px 16px;}
.hero.b-hero .stat:hover{background:rgba(255,255,255,.16)}
.hero.b-hero .stat:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero.b-hero .stat .v{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.hero.b-hero .stat .l{font-size:12px;font-weight:600;color:rgba(255,255,255,.78)}
.hero.b-hero .stat .s{font-size:12px;color:rgba(255,255,255,.6)}
.hero.b-hero .stat.warn{background:rgba(250,204,21,.16);border-color:rgba(250,204,21,.38)}
@media (max-width:900px){.hero.b-hero{grid-template-columns:1fr;padding:20px}.hero.b-hero h1{font-size:24px}}


/* Brochures (Workspace > Brochures): first-page thumbnails, the options and preview modal. Layout only, design tokens only. */
.bro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;padding-bottom:88px}
.bro-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s ease,border-color .15s ease}
.bro-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.bro-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint-2)}
.bro-pick{position:relative;display:block;cursor:pointer;background:var(--surface-3);border-bottom:1px solid var(--line)}
.bro-pick:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bro-pick .c-check{top:10px;right:10px}
.bro-card.sel .c-check{background:var(--accent-fill);border-color:var(--accent-fill)}
.bro-thumb{position:relative;aspect-ratio:210/297;overflow:hidden;background:var(--skeleton)}
.bro-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--surface)}
.bro-tfail{display:none}
.bro-thumb.fail img{display:none}
.bro-thumb.fail .bro-tfail,.bro-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:var(--t-12);text-align:center;padding:16px}
.bro-off{position:relative;aspect-ratio:210/297;background:var(--surface-3)}
.bro-tfail svg,.bro-off svg{width:28px;height:28px}
.bro-meta{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.bro-meta .btn{align-self:flex-start;margin-top:8px}
.bro-price{font-size:var(--t-14);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bro-title{font-weight:600;font-size:var(--t-13);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bro-loc{font-size:var(--t-12);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-sticky.bro-sticky{position:sticky;bottom:16px;flex-wrap:nowrap;gap:10px}
.bro-sticky b{white-space:nowrap}

/* options and preview */
#modal .box:has(.bro-wide){width:min(1080px,calc(100vw - 32px));max-width:1080px;padding:24px 24px 20px}
.bro-mhd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.bro-mhd h2{margin:0}
.bro-modal{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start}
.bro-side .c-form{gap:14px}
.bro-preview{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r);padding:16px;max-height:min(68vh,760px);overflow:auto}
.bro-pagelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;transition:opacity .15s ease}
.bro-pagelist.busy{opacity:.55}
.bro-page{margin:0;display:flex;flex-direction:column;gap:6px}
.bro-page img{width:100%;height:auto;display:block;background:var(--surface);border-radius:4px;box-shadow:var(--shadow-2)}
.bro-page figcaption{font-size:var(--t-12);color:var(--muted);text-align:center}
.bro-page.skel{aspect-ratio:210/297;border-radius:4px;background:var(--skeleton)}
.bro-page.bro-off{border-radius:4px}
.bro-people{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.bro-person{display:flex;align-items:center;gap:10px}
.bro-person .grow{min-width:0;display:flex;flex-direction:column}
.bro-person b{font-size:var(--t-13);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bro-av{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;flex:none;font-size:var(--t-12);font-weight:700;background:var(--accent-tint-2);color:var(--accent-ink)}
.bro-av.ok{background:var(--ok-bg);color:var(--ok-ink)}
.bro-skel-line{height:36px;border-radius:var(--r-sm);background:var(--skeleton)}
@media (max-width:900px){
  .bro-modal{grid-template-columns:minmax(0,1fr)}
  .bro-preview{max-height:none}
}
@media (max-width:767px){.c-sticky.bro-sticky{bottom:calc(68px + env(safe-area-inset-bottom));padding:10px 12px}} /* above the phone tab bar (#mbar, 56px) */
@media (max-width:600px){
  .bro-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bro-meta{padding:10px 10px 12px}
  .bro-pagelist{grid-template-columns:minmax(0,1fr)}
  .bro-preview{padding:12px}
}
/* A-013: the line under a name (DLD project number, prepared for) sits on its own line */
.sx-sub.bro-sub{display:block;color:var(--muted);font-weight:400;font-size:12px;white-space:normal}


/* Area C screens (Insights, Reports, Projects, Brochures, Website and feeds, PropBridge, Boosts, Portals events and health).
   Layout only, design tokens only. Shared components (buttons, inputs, tables, chips, tiles, cards) come from the design system. */
.c-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.c-bar .q,.c-bar.lbar20 .q{flex:1 1 220px;min-width:200px;max-width:280px}
.c-bar select,.c-bar.lbar20 select{width:auto;flex:0 0 auto;max-width:200px}
.c-bar.lbar20{margin:0 0 8px}
.c-bar .grow{flex:1}
.c-period{font-size:12px;color:var(--muted);margin:0 0 16px}
.c-period a{color:inherit}
.c-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:16px}
.c-kpis .tile .s.up{color:var(--vw-success)}.c-kpis .tile .s.down{color:var(--vw-danger)}
.c-grid2{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start;margin-bottom:16px}
.c-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px}
.c-stack{display:grid;gap:16px;margin-bottom:16px}
.c-card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.c-card-hd h3{margin:0}
.c-card-hd .c-note{font-size:12px;color:var(--muted)}
.c-note{font-size:12px;color:var(--muted)}
.c-sub{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.c-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.c-nowrap{white-space:nowrap}
.c-mono{font-family:var(--mono);font-size:12px}
.c-link{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:none}
.c-link:hover{text-decoration:underline}
.c-row-click{cursor:pointer}
.c-row-click:hover td{background:var(--canvas)}
.c-scroll{overflow-x:auto;position:relative;-webkit-overflow-scrolling:touch}
.c-scroll table{min-width:100%}
.c-scroll.fade{mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.c-scroll.fade.end{mask-image:none;-webkit-mask-image:none}
th.c-num,td.c-num{padding-right:16px}
table.c-dense th,table.c-dense td{padding-left:8px;padding-right:8px;white-space:nowrap}
table.c-dense th:first-child,table.c-dense td:first-child{padding-left:12px}
.c-group th{font-size:11px;color:var(--muted);text-align:center;border-bottom:0}
.c-group th.c-g{border-bottom:1px solid var(--line)}
/* charts: inline SVG, colours from tokens */
.c-chart{width:100%;height:auto;display:block;overflow:visible}
.c-chart .ax text{fill:var(--muted);font-size:11px}
.c-chart .gl{stroke:var(--line);stroke-width:1}
.c-chart .c-b{fill:var(--accent);opacity:.35}
.c-chart .c-b:hover{opacity:.6}
.c-chart .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.c-chart .dt{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.c-chart .lbl{fill:var(--ink-2);font-size:11px;font-weight:600}
.c-chart .s-pf{stroke:var(--vw-accent-1)}.c-chart .s-bayut{stroke:var(--vw-accent-3)}.c-chart .s-dubizzle{stroke:var(--vw-accent-2)}.c-chart .s-website{stroke:var(--vw-secondary)}
.c-chart .f-pf{fill:var(--vw-accent-1)}.c-chart .f-bayut{fill:var(--vw-accent-3)}.c-chart .f-dubizzle{fill:var(--vw-accent-2)}.c-chart .f-website{fill:var(--vw-secondary)}
.c-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--ink-2);margin-top:8px}
.c-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.c-legend i.k-bar{background:var(--vw-primary);opacity:.4}.c-legend i.k-ln{background:var(--ink);height:3px;border-radius:2px;vertical-align:3px}
.c-legend i.k-pf{background:var(--vw-accent-1)}.c-legend i.k-bayut{background:var(--vw-accent-3)}.c-legend i.k-dubizzle{background:var(--vw-accent-2)}.c-legend i.k-website{background:var(--vw-secondary)}
.c-hbars{display:grid;gap:10px}
.c-hbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;cursor:pointer}
.c-hbar .n{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-hbar .v{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.c-hbar .t{grid-column:1/-1;height:8px;border-radius:999px;background:var(--canvas);overflow:hidden}
.c-hbar .t i{display:block;height:100%;border-radius:999px;background:var(--vw-primary)}
.c-crumb{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.c-crumb a{color:var(--muted);cursor:pointer;font-weight:600}
.c-crumb a:hover{color:var(--ink)}
.c-crumb .sep{color:var(--muted)}
.c-arabic{font-size:16px;color:var(--muted);font-weight:500}
/* projects */
.c-proj-cards{display:none}
.c-progress{display:flex;align-items:center;gap:8px;min-width:120px}
.c-progress .t{flex:1;height:6px;border-radius:999px;background:var(--canvas);overflow:hidden;min-width:60px}
.c-progress .t i{display:block;height:100%;background:var(--vw-primary);border-radius:999px}
.c-progress span{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;width:36px;text-align:right}
.c-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
.c-kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 16px;font-size:13px}
.c-kv .k{color:var(--muted)}
.c-modal-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px}
.c-modal-foot .grow{flex:1}
.c-callout{border:1px solid var(--line);background:var(--canvas);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink-2)}
.c-callout.warn{border-color:var(--vw-warning)}
.c-callout.bad{border-color:var(--vw-danger)}
/* brochures */
#modal .box:has(.c-wide){width:min(800px,calc(100vw - 32px));max-width:800px}
.c-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;padding-bottom:80px}
.c-pick .lcard20{position:relative}
.c-pick .lcard20.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--vw-primary)}
.c-check{position:absolute;top:12px;right:12px;z-index:3;width:26px;height:26px;border-radius:999px;background:var(--surface);border:2px solid var(--line-2);display:grid;place-items:center;color:var(--surface)}
.lcard20.sel .c-check{background:var(--vw-primary);border-color:var(--accent)}
.c-check svg{width:14px;height:14px}
.c-sticky{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-2);padding:12px 16px;margin-top:16px}
.c-sticky .grow{flex:1}
.c-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.c-thumb{width:48px;height:36px;border-radius:6px;object-fit:cover;background:var(--canvas);display:block}
.c-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:16px}
.c-quick .card{display:flex;flex-direction:column;gap:6px}
/* website and feeds */
.c-urlrow{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.c-urlrow:last-of-type{border-bottom:0}
.c-urlrow .u{font-family:var(--mono);font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-urlrow .acts{display:flex;gap:6px}
.c-fields{display:flex;flex-wrap:wrap;gap:6px}
.c-embed{font-family:var(--mono);font-size:12px;background:var(--canvas);border:1px solid var(--line);border-radius:10px;padding:12px;white-space:pre-wrap;word-break:break-all;color:var(--ink-2)}
.c-card-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.c-form{display:grid;gap:16px}
.c-err{color:var(--vw-danger);font-size:12px;margin-top:4px}
textarea.bad,input.bad{border-color:var(--vw-danger)}
/* boosts */
.c-ring{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.c-big{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.c-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.c-opt:last-child{border-bottom:0}
.c-opt b{font-weight:600}
/* portals */
.c-switches{display:grid;gap:0}
.c-switch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.c-switch:last-child{border-bottom:0}
.c-switch .t{font-weight:600;color:var(--ink)}
.c-switch .s{font-size:12px;color:var(--muted)}
.c-adv summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);margin-top:12px}
.c-adv code{font-family:var(--mono);font-size:12px}
.c-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:16px}
.c-tiles .card{display:grid;gap:8px}
.c-tiles .card .c-big{font-size:24px}
.c-stat{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-2)}
.c-stat b{color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:1100px){.c-grid2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1200px){.c-grid.c-w{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.c-grid,.c-options{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .c-bar .q,.c-bar select,.c-bar.lbar20 .q,.c-bar.lbar20 select{flex:1 1 100%;max-width:none;width:100%}
  .c-proj-cards .c-kv{grid-template-columns:auto minmax(0,1fr)}
  .c-proj-table{display:none}
  .c-proj-cards{display:grid;gap:12px}
  .c-urlrow{grid-template-columns:minmax(0,1fr)}
  .c-urlrow .u{white-space:normal;word-break:break-all}
  .c-kv{grid-template-columns:minmax(0,1fr)}
  .c-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Slot sections (reports.crm, settings and team slots) share the report card look: .c-card is the same card as .card.e-card.e-sec, so a slot
   never renders bare on the page background. Headings, inline label and input pairs and button rows get the same spacing as the report cards. */
.c-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;box-shadow:var(--shadow-1);min-width:0;margin-bottom:16px}
.c-card>h2{font-size:16px;font-weight:600;line-height:1.3;margin:0 0 12px}
.c-card>h3,.c-card>details>summary>h3,.c-card>div>h3{font-size:14px;font-weight:600;margin:16px 0 8px}
.c-card>h2+p,.c-card>h3+p{margin-top:0}
.c-card>label,.c-card>div>label,.c-card>details>label{display:inline-flex;align-items:center;gap:8px;margin:0 12px 10px 0;font-size:13px;color:var(--muted)}
.c-card>label>input,.c-card>label>select,.c-card>div>label>input,.c-card>div>label>select,.c-card>details>label>input,.c-card>details>label>select{min-height:36px;border:1px solid var(--line);border-radius:var(--r-ctl-sm);padding:0 10px;background:var(--surface);color:var(--ink)}
.c-card>button,.c-card>div>button{margin:0 8px 10px 0}
.c-card>details{margin:4px 0 10px}.c-card>details>summary{cursor:pointer;color:var(--ink);font-size:13px;padding:4px 0}
.c-card>ul{margin:4px 0 10px;padding-inline-start:18px}.c-card>ul>li{margin:2px 0;font-size:13px}
.c-card>p[role="alert"]{color:var(--vw-danger);margin:4px 0 10px}
.c-card .c-card-foot,.c-card>.pager{margin-top:12px}
@media (max-width:640px){.c-card{padding:16px}.c-card>label,.c-card>div>label{display:flex;margin-right:0}.c-card>label>input,.c-card>label>select{flex:1;min-width:0}}


/* ---------- CRM slice A: Contacts. Layout only, on the design-system tokens; components come from 99-zz-system.css.html and the leads screen (b-*). ---------- */
.ca-av{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent-tint);color:var(--accent-ink);font-size:12px;font-weight:600;letter-spacing:.02em}
.ca-av.big{width:56px;height:56px;font-size:20px}
.ca-role{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent-ink);font-size:12px;font-weight:600;white-space:nowrap}
.ca-roles{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ca-who{display:flex;align-items:center;gap:10px;min-width:0}
.ca-srccell{display:flex;align-items:center;gap:6px}
.ca-tbl td.num{font-variant-numeric:tabular-nums}

/* contact page */
.ca-back{margin:0 0 12px}
.ca-outcome{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface-2)}
.ca-outcome .b-sub{flex:1 1 100%}

/* looking for, and matching listings */
.ca-purpose{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--surface-3);color:var(--ink);font-size:12px;font-weight:600}
.ca-match{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;min-width:0}
.ca-match:hover{border-color:var(--line-2)}
.ca-match.on{border-color:var(--accent);background:var(--accent-tint)}
.ca-match input{width:18px;height:18px;flex:none;accent-color:var(--accent-fill)}
.ca-match .b-minibody{min-width:0}
.ca-mfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.ca-mfoot .b-sub{flex:1 1 220px}
.ca-center{justify-content:center}

/* timeline */

/* details, consent, properties, privacy */

/* duplicates */
.ca-dup + .ca-dup{margin-top:16px}
.ca-duplist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.ca-dupc{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;min-width:0}
.ca-dupc:hover{border-color:var(--line-2)}
.ca-dupc.on{border-color:var(--accent);background:var(--accent-tint)}
.ca-dupc input{margin-top:3px;accent-color:var(--accent-fill)}
.ca-dupb{display:flex;flex-direction:column;gap:6px;min-width:0;overflow-wrap:anywhere}

/* import */
.ca-imp1{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ca-impowner{max-width:320px;margin-top:16px}
.ca-maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ca-mapf label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
.ca-impgo{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:16px}

/* forms in dialogs */
.ca-form{display:flex;flex-direction:column;gap:16px}
.modal .box .ca-form .field + .field{margin-top:0}
.ca-f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ca-frow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ca-form .ca-frow select{width:112px;flex:none}
.ca-form .ca-frow input{flex:1;width:auto;min-width:0}
.ca-frow .btn{flex:none}
.ca-add{margin-top:0}
.ca-dupnote:empty{display:none}
.ca-fs{border:0;padding:0;margin:0;min-width:0}
.ca-fs legend{font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px;padding:0}
.ca-chks{display:flex;flex-wrap:wrap;gap:8px}
.ca-chks.ca-col1{flex-direction:column;align-items:stretch;margin-bottom:12px}
.ca-chk{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
.ca-form .ca-chk,.ca-fs .ca-chk,.ca-chks .ca-chk{display:inline-flex;margin:0;font-size:13px;font-weight:500;color:var(--ink)}
.ca-chk:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}
.ca-chk input,.ca-form .ca-chk input{width:auto;height:auto;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--accent-fill)}
.ca-dnc{align-items:flex-start;padding:12px}
.ca-dnc>span{display:flex;flex-direction:column;gap:2px}
.ca-dnc input{margin-top:3px}
.modal .box .row .ca-left{margin-right:auto}
.ca-padmin{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;display:flex;flex-direction:column;gap:8px}
.ca-padmin .row{justify-content:flex-start;gap:8px}
.ca-mtext{font-size:14px;margin:0 0 12px}
.ca-warns{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.ca-warns li{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--warn-line);border-radius:var(--r-ctl);background:var(--warn-soft);font-size:14px;color:var(--ink)}
.ca-warns li .b-ic{color:var(--pend-ink);margin-top:2px;flex:none}
#caSendText{width:100%;min-height:220px;resize:vertical;font:inherit;font-size:14px;line-height:1.5;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);margin:12px 0}
#modal .box .b-ropts + .b-lockline{margin-top:10px}

/* the Contact section in the lead panel */
.ca-lsec .b-mini{gap:10px}
.ca-lsec .b-minibody{gap:4px}
.ca-lsug{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.ca-lbtns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.b-pickrow .ca-av{width:28px;height:28px;font-size:11px}

/* below 1100: one column, the cards in the order an agent needs them */
@media (max-width:767px){
  .ca-av.big{width:44px;height:44px;font-size:16px}
  .ca-f2{grid-template-columns:minmax(0,1fr)}
  .ca-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ca-tiles .tile .v{font-size:22px}
  .ca-impgo{align-items:stretch}
  .ca-lsec .ca-lc{flex-wrap:wrap}
  .ca-lsec .ca-lc .b-minibody{flex:1 1 calc(100% - 48px)}
  .ca-lsec .ca-lc .btn{flex:1 1 auto;justify-content:center}
  #modal.on .box.wide{width:100%}
}


/* O-23 (rc3): row actions */
.ca-acts{white-space:nowrap;text-align:end;width:1%}
.ca-acts .btn+.btn{margin-inline-start:var(--sp-1)}


/* ---------- CRM slice B: Deals (board, list, deal page, new deal form) and the stage editor in Settings.
   Layout only. Tokens only (var(--...)); shared components (.btn, .chip, .card, .tile, .seg20, .tbl, .field) come from the design system. */
.dl-muted{color:var(--muted);font-size:12px;line-height:1.4}
.dl-p{margin:-4px 0 14px;color:var(--ink-2);font-size:14px;line-height:1.5}
.dl-mt{margin-top:12px}.dl-mb{margin-bottom:12px}
.dl-mact{justify-content:flex-end;gap:8px;margin-top:20px}
.dl-mact .grow{flex:1}
.field .lbl{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.dl-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.dl-seg.sm a{min-height:26px;padding:0 10px;font-size:12px}
.dl-seg svg{width:15px;height:15px}

/* page header and filters */
.dl-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.dl-filters .q{flex:1 1 260px;max-width:360px;min-width:0}
.dl-filters select{width:auto;min-width:0;max-width:220px}
.dl-filters select.on{border-color:var(--accent)}

/* board */
.dl-sk i{display:block;height:12px;margin:10px 12px;border-radius:6px;background:linear-gradient(90deg,var(--canvas),var(--line),var(--canvas));background-size:200% 100%;animation:dl-sh 1.2s ease-in-out infinite}
.dl-sk i:nth-child(2){width:70%}.dl-sk i:nth-child(3){width:50%}
.dl-skm{padding:4px 0}.dl-skm i{margin:12px 0}
.dl-skline{height:12px;width:60%;border-radius:6px;background:linear-gradient(90deg,var(--canvas),var(--line),var(--canvas));background-size:200% 100%;animation:dl-sh 1.2s ease-in-out infinite}
@keyframes dl-sh{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* list */
.dl-sums{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dl-sums span:first-child{font-weight:600;color:var(--ink)}
.dl-ltbl table{width:100%}
.dl-row{cursor:pointer}
.dl-row:hover td{background:var(--surface-2)}
.dl-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dl-tt{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.dl-th:after{display:none}
.dl-dir svg{width:13px;height:13px;vertical-align:-2px}
.dl-lcards{display:none}
.dl-lcard{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;width:100%;padding:12px 14px;margin:0 0 8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1);cursor:pointer}
.dl-lcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-lcrow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums}

/* deal page */
.dl-form .g2{gap:0 16px}
.dl-form .field{margin-bottom:14px}
.dl-formact{justify-content:flex-end;gap:8px;margin-top:4px}
.dl-comm-in{display:flex;align-items:center;gap:8px}
.dl-comm-in input{flex:1;min-width:0}

/* modals: gate form, lost reason, pickers, splits */
.dl-gdoc{border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px 14px 4px;margin:0 0 12px}
.dl-gdoc legend{padding:0 4px;font-size:13px;font-weight:600;color:var(--ink)}
.dl-gdoc.err{border-color:var(--danger)}
.dl-check{display:flex;align-items:center;gap:10px;min-height:36px;font-size:14px;color:var(--ink);cursor:pointer}
.dl-check input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--accent)}
.dl-reasons{border:0;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dl-reasons.err .dl-radio{border-color:var(--danger)}
.dl-reasons .e{grid-column:1/-1;font-size:12px;color:var(--danger);font-weight:500}
.dl-radio{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-ctl);font-size:14px;color:var(--ink);cursor:pointer}
.dl-radio:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}
.dl-radio input{margin:0;accent-color:var(--accent)}
.dl-lblrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.dl-lblrow label{margin:0}
.dl-picked{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface-2)}
.dl-picked .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.dl-pickbox input{width:100%}
.dl-picklist{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:228px;overflow:auto}
.dl-picklist:empty{display:none}
.dl-opt{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:1px;width:100%;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink)}
.dl-opt:hover:not([disabled]),.dl-opt:focus-visible{background:var(--surface-2);outline:none}
.dl-opt:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.dl-opt[disabled]{opacity:.55;cursor:not-allowed}
.dl-opt b{font-weight:600;overflow-wrap:anywhere}
.dl-pickmsg{padding:8px 10px;font-size:13px;color:var(--muted)}
.dl-splited{display:flex;flex-direction:column;gap:4px;margin:0 0 12px}
.dl-srow{display:grid;grid-template-columns:132px minmax(0,1fr) 196px 40px;gap:0 10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.dl-srow:first-child{border-top:0}
.dl-srow .field{margin:0}
.dl-srow:has(.dl-sbrn){grid-template-columns:132px minmax(0,1fr) 96px 196px 40px}
.dl-samtin{display:flex;gap:6px}
.dl-srow .dl-samtin input{flex:1 1 auto;width:auto;min-width:0}
.dl-srow .dl-samtin select{width:76px;flex:none}
.dl-samtv{font-variant-numeric:tabular-nums}
.dl-sdel{margin-top:27px;justify-self:end}
.dl-sdel svg{width:16px;height:16px}
.dl-sco{min-height:var(--input-h,40px);display:flex;align-items:center;font-size:14px;color:var(--ink-2)}
.dl-stotal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;border-radius:var(--r-ctl);background:var(--surface-2);font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.modal .box.wide .dl-p{max-width:640px}

/* lead panel */
.dl-leadsec .dl-ldeal{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.dl-leadsec .btn.link{min-height:0;padding:0;font-weight:600;text-align:left;overflow-wrap:anywhere}
.dl-lnone{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dl-leadsec .btn svg{width:15px;height:15px}

/* settings: stage editor */
.dl-sthead,.dl-strow{display:grid;grid-template-columns:64px minmax(140px,1.3fr) 112px minmax(160px,1.7fr) 196px;gap:8px 12px;align-items:center}
.dl-sthead{margin:16px 0 4px;font-size:12px;font-weight:600;color:var(--muted)}
.dl-stlist{list-style:none;margin:0 0 12px;padding:0}
.dl-strow{padding:8px 0;border-top:1px solid var(--line)}
.dl-stlist li:first-child{border-top:0}
.dl-stclosed{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
.dl-stclosed li:first-child{border-top:0}
.dl-strow .field{margin:0}
.dl-stord{display:flex;gap:2px}
.dl-stord .btn.icon{width:30px;min-width:30px;height:30px;min-height:30px;padding:0}
.dl-stord svg{width:15px;height:15px}
.dl-pctin{display:flex;align-items:center;gap:6px}
.dl-strow .dl-pctin input{width:72px;flex:none}
.dl-strow .dl-stgate{justify-content:flex-start;min-width:0;max-width:100%;overflow:hidden}
.dl-stgate span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-stgate svg{width:14px;height:14px;flex:none}
.dl-stmeta{display:flex;align-items:center;gap:8px;justify-content:flex-end;white-space:nowrap}
.dl-starch{margin:12px 0 0;font-size:13px}
.dl-starch summary{cursor:pointer;color:var(--ink-2);font-weight:600;min-height:32px;display:flex;align-items:center}
.dl-starch ul{list-style:none;margin:4px 0 0;padding:0}
.dl-starch li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line)}
.dl-gset{border:0;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.dl-gset legend{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 6px;padding:0}

.dl-nw{white-space:nowrap}
/* Step 34: the Won gate list (board card and deal page). Tokens only; wraps at 390 wide (the button drops under the text). */
.dl-wlist{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2);min-width:0}
.dl-wgrp{min-width:0}
.dl-wstage{font-size:var(--t-12);font-weight:600;color:var(--muted);margin-bottom:var(--sp-1);overflow-wrap:anywhere}
.dl-wgrp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.dl-witem{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-1) var(--sp-2);min-width:0}
.dl-wtext{flex:1 1 160px;min-width:0;font-size:var(--t-13);color:var(--ink);overflow-wrap:anywhere}
.dl-wwho{display:block;font-size:var(--t-12);color:var(--muted)}
.dl-witem .btn{flex:0 0 auto}
.dl-merr{margin-bottom:0}
@media (max-width:767px){
  .dl-filters .q{flex:1 1 100%;max-width:none}
  .dl-filters select{flex:1 1 calc(50% - 4px);max-width:none}
  .dl-ltbl{display:none}
  .dl-lcards{display:block}
  .dl-reasons{grid-template-columns:minmax(0,1fr)}
  .dl-srow,.dl-srow:has(.dl-sbrn){grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:8px 10px}
  .dl-srow > .field:first-child{grid-column:1;grid-row:1}
  .dl-srow .dl-samt{grid-column:2;grid-row:1}
  .dl-srow .dl-sdel{grid-column:3;grid-row:1;justify-self:end}
  .dl-srow .dl-sgrow{grid-column:1/-1;grid-row:2}
  .dl-srow:has(.dl-sbrn) .dl-sgrow{grid-column:1/2}
  .dl-srow .dl-sbrn{grid-column:2/-1;grid-row:2}
  .dl-sthead{display:none}
  .dl-strow{grid-template-columns:64px minmax(0,1fr) 96px;gap:8px}
  .dl-strow .dl-stgate{grid-column:2/4}
  .dl-strow .dl-stmeta{grid-column:1/4;justify-content:flex-start}
  .dl-strow .dl-stmeta:empty{display:none}
  .dl-gset{grid-template-columns:minmax(0,1fr)}
}


/* ---------- CRM slice C: Tasks and calendar, the activity dialog, Today cards, lead drawer section. Tokens only. ---------- */

/* the screen: the list panel beside the calendar panel (step 37) */
/* O-24 and A-011: the list is 320px with each title on its own line (up to two) and the time under it; the calendar takes the rest */
.tc-split{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
.tc-calw{min-width:0}
.sx-panel.tc-lp{padding:14px 0 8px;gap:4px}
.tc-lp h2{padding:0 16px;margin-top:4px}
.tc-lp .sx-empty{padding:8px 16px 12px}
.tc-item.tc-prow{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"check main main" ". when when";align-items:start;row-gap:2px;padding:10px 16px}
.tc-item.tc-prow .tc-check{margin-top:1px}
.tc-item.tc-prow .tc-main>b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.35}
.tc-item.tc-prow .tc-sub{white-space:nowrap}
.tc-item.tc-prow .tc-when{flex-direction:row;align-items:center;justify-content:flex-start;font-size:12px;color:var(--muted)}
.sx-panel.tc-cp{padding:0;gap:0;overflow:hidden}
.tc-cp .tc-calbar{margin:0;padding:12px 16px;border-bottom:1px solid var(--line)}
.tc-teamtbl{margin:0 0 14px}
@media (max-width:1099px){.tc-split{grid-template-columns:minmax(0,1fr)}}

/* rows */
.tc-list{list-style:none;margin:0;padding:0}
.tc-item{display:grid;grid-template-columns:28px 28px minmax(0,1fr) auto auto;grid-template-areas:"check ico main when state";align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.tc-item:first-child{border-top:0}
.tc-check{grid-area:check;width:24px;height:24px;padding:0;border-radius:7px;border:1.5px solid var(--line-2);background:var(--surface);color:transparent;display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tc-check svg{width:14px;height:14px}
.tc-check:hover{border-color:var(--accent);color:var(--accent)}
.tc-check.on{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.tc-check.off{border-style:dashed;cursor:default}
.tc-check:focus-visible,.tc-main:focus-visible,.tc-vrow:focus-visible,.tc-ev:focus-visible,.tc-mev:focus-visible,.tc-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.tc-ico{grid-area:ico;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-2);flex:none}
.tc-main{grid-area:main;min-width:0;cursor:pointer}
.tc-main>b{display:block;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-main:hover>b{color:var(--accent-ink)}
.tc-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:2px;min-width:0}
.tc-sub>span:not(.b-ref){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tc-when{grid-area:when;display:flex;flex-direction:column;align-items:flex-end;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-when.late>span:first-child{color:var(--danger);font-weight:600}
.tc-state{grid-area:state;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.tc-qbtn{min-height:32px;padding:0 10px}
.tc-item.is-done .tc-main>b,.tc-item.is-cancelled .tc-main>b{text-decoration:line-through;color:var(--muted)}
.tc-item.is-late .tc-ico{background:var(--bad-bg);color:var(--bad-ink)}
.tc-compact .tc-item{padding:10px 0}
.tc-compact .tc-item:first-child{padding-top:0}
.tc-skel{grid-template-columns:28px minmax(0,1fr) 120px;grid-template-areas:none}
.tc-skel i{display:block;height:12px;border-radius:6px;background:var(--skeleton)}
.tc-morebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--line)}
.tc-zero{color:var(--muted)}

/* type colours: violet viewings, blue meetings, grey calls and messages, outlined tasks */
.tc-t-viewing .tc-ico,.tc-ev.tc-t-viewing,.tc-mev.tc-t-viewing,.tc-dkind.tc-t-viewing,.tc-ico.tc-t-viewing,.tc-legend i.tc-t-viewing{background:var(--poc-bg);color:var(--poc-ink);border-left-color:var(--accent)}
.tc-t-meeting .tc-ico,.tc-ev.tc-t-meeting,.tc-mev.tc-t-meeting,.tc-dkind.tc-t-meeting,.tc-ico.tc-t-meeting,.tc-legend i.tc-t-meeting{background:var(--info-bg);color:var(--info-ink);border-left-color:var(--info-ink)}
.tc-ev.tc-t-call,.tc-ev.tc-t-whatsapp,.tc-ev.tc-t-email,.tc-mev.tc-t-call,.tc-mev.tc-t-whatsapp,.tc-mev.tc-t-email,.tc-dkind.tc-t-call,.tc-dkind.tc-t-whatsapp,.tc-dkind.tc-t-email,.tc-legend i.tc-t-call{background:var(--surface-3);color:var(--ink);border-left-color:var(--ink-2)}
.tc-ev.tc-t-task,.tc-ev.tc-t-note,.tc-mev.tc-t-task,.tc-mev.tc-t-note,.tc-legend i.tc-t-task{background:var(--surface);color:var(--ink);border:1px dashed var(--line-2);border-left:3px solid var(--line-2)}
.tc-dkind.tc-t-task,.tc-dkind.tc-t-note{background:var(--surface-3);color:var(--ink-2)}

/* team */
.tc-teamtbl{margin:0 0 16px}
.tc-scroll{overflow-x:auto}
.tc-teamtbl th.num,.tc-teamtbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tc-teamtbl tr[role=button]{cursor:pointer}
.tc-teamtbl tr[role=button]:hover td{background:var(--surface-2)}
.tc-teamtbl tr[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* calendar */
.tc-calbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.tc-calnav{display:flex;align-items:center;gap:6px;min-width:0}
.tc-ib{width:36px;padding:0}
.tc-ib svg{width:16px;height:16px}
.tc-caltitle{font-size:16px;font-weight:600;margin:0;margin-inline-start:8px;white-space:nowrap}
.tc-caltitle .tc-cts{display:none}
.tc-calskel{height:420px;background:var(--skeleton);opacity:.6}
.tc-calnone{padding:12px 16px;border-top:1px solid var(--line)}
.tc-ghead{display:grid;grid-template-columns:56px repeat(var(--cols),minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--surface)}
.tc-gday{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:0;background:none;font:inherit;color:var(--ink-2);cursor:pointer}
.tc-gday span{font-size:12px;color:var(--muted);font-weight:500}
.tc-gday b{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;font-size:16px;font-weight:600;color:var(--ink)}
.tc-gday:hover b{background:var(--surface-3)}
.tc-gday.is-today b{background:var(--accent-fill);color:#fff}
.tc-gbody{display:grid;grid-template-columns:56px repeat(var(--cols),minmax(0,1fr));position:relative;background-image:linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:100% var(--hh)}
.tc-hours>div{height:var(--hh);position:relative}
.tc-hours span{position:absolute;top:-8px;right:8px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;background:var(--surface);padding:0 2px}
.tc-hours>div:first-child span{top:2px}
.tc-col{position:relative;border-left:1px solid var(--line);cursor:pointer;min-width:0}
.tc-col.is-today{background:var(--accent-tint)}
.tc-ev{position:absolute;display:flex;flex-wrap:wrap;align-content:flex-start;column-gap:4px;padding:3px 6px;border:0;border-left:3px solid;border-radius:6px;font:inherit;font-size:12px;line-height:1.3;text-align:left;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-1);z-index:1}
.tc-ev:hover,.tc-ev:focus-visible{z-index:2;box-shadow:var(--shadow-2)}
/* O-24: an event's title takes up to two lines under its time; a short one runs time and title together over two lines */
.tc-ev b{flex:1 1 100%;font-weight:600;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-width:0}
.tc-ev.is-short{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:2px 6px;font-size:11.5px;line-height:1.2}
.tc-ev.is-short .tc-evt,.tc-ev.is-short b{display:inline}
.tc-ev.is-short .tc-evt{margin-inline-end:4px}
.tc-ev.is-narrow .tc-evt{display:none}
.tc-ev.is-narrow b{-webkit-line-clamp:3;font-size:12px;line-height:1.25}
.tc-ev.is-narrow.is-short{-webkit-line-clamp:2}
.tc-evt{font-variant-numeric:tabular-nums;opacity:.8}
.tc-evs{flex-basis:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.tc-grid.is-day .tc-ev{font-size:13px}
.tc-ev.is-done,.tc-mev.is-done{opacity:.6}
.tc-ev.is-done b,.tc-mev.is-done{text-decoration:line-through}
.tc-ev.is-late,.tc-mev.is-late{border-left-color:var(--danger)}
.tc-evmore{position:absolute;left:calc(50% + 2px);width:calc(50% - 4px);height:24px;padding:0 4px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);font:inherit;font-size:12px;font-weight:600;color:var(--accent-ink);cursor:pointer;z-index:1}
.tc-evmore:hover{background:var(--surface-2)}
.tc-now{position:absolute;left:0;right:0;height:2px;background:var(--danger);z-index:3;pointer-events:none}
.tc-now::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tc-mhead{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
.tc-mhead div{padding:8px;font-size:12px;font-weight:600;color:var(--muted)}
.tc-mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.tc-mcell{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:112px;padding:6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tc-mcell:nth-child(7n){border-right:0}
.tc-mcell.is-out{background:var(--surface-2)}
.tc-mday{align-self:flex-start;width:28px;height:28px;border:0;border-radius:999px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.tc-mday:hover{background:var(--surface-3)}
.tc-mcell.is-out .tc-mday{color:var(--muted)}
.tc-mcell.is-today .tc-mday{background:var(--accent-fill);color:#fff}
.tc-mev{min-width:0;max-width:100%;padding:2px 6px;border:0;border-left:3px solid;border-radius:5px;font:inherit;font-size:12px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.tc-mev span{font-variant-numeric:tabular-nums;opacity:.8}
.tc-mmore{align-self:flex-start;padding:2px 6px;border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--accent-ink);cursor:pointer}
.tc-month.is-narrow .tc-mcell{min-height:56px;align-items:center;padding:4px 2px}
.tc-month.is-narrow .tc-mday{align-self:center}
.tc-mdots{display:flex;gap:3px}
.tc-mdots i{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.tc-mdots i.tc-t-viewing{background:var(--accent)}
.tc-mdots i.tc-t-meeting{background:var(--info-ink)}
.tc-aday{padding:12px 16px;border-top:1px solid var(--line)}
.tc-aday:first-child{border-top:0}
.tc-aday h3{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted)}
.tc-aday.is-today h3{color:var(--accent-ink)}
.tc-agenda .tc-item{padding:10px 0}
.tc-agenda .tc-item:first-child{padding-top:4px}
.tc-afree{padding:2px 0}
.tc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:12px 0 0;padding:0;font-size:12px;color:var(--muted)}
.tc-legend li{display:flex;align-items:center;gap:6px}
.tc-legend i{width:14px;height:12px;border-radius:3px;border-left:3px solid}
.tc-legend i.tc-lg-late{background:var(--surface-3);border-left-color:var(--danger)}

/* drawer */
.tc-dkind{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;margin-bottom:6px;border-radius:999px;border:0;font-size:12px;font-weight:600}
.tc-dkind svg{width:14px;height:14px}
.tc-dmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.tc-dreach{flex-basis:100%}
.tc-reach{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tc-warnline{display:flex;align-items:flex-start;gap:6px;font-size:12px;color:var(--pend-ink)}
.tc-warnline svg{flex:none;margin-top:1px}
.tc-dl{grid-template-columns:110px minmax(0,1fr)}
.tc-link{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0;border:0;background:none;font:inherit;color:var(--accent-ink);text-align:left;cursor:pointer}
.tc-link:hover{text-decoration:underline}
.tc-loc{display:inline-flex;align-items:flex-start;gap:6px}
.tc-loc svg{flex:none;margin-top:2px;color:var(--muted)}
.tc-notes{white-space:pre-wrap}
.tc-fu{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.tc-fu.card{padding:12px}
.tc-fubtns{display:flex;gap:8px;margin-left:auto}

/* dialog */
.modal .box.tc-box,#modal .box.tc-box{width:640px}
.tc-form .tc-types{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;margin:4px 0 16px}
.tc-form .tc-types a{flex-direction:column;justify-content:center;gap:2px;min-height:50px;padding:6px 2px;font-size:12px}
.tc-form > .row:last-child{margin-top:8px;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.tc-form > div.tc-warns:not(:empty){margin-top:16px}
.tc-form .tc-mode{margin:0 0 16px}
.tc-fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-top:16px;align-items:start}
.tc-fgrid.two{grid-template-columns:1fr 1fr}
.modal .box .tc-fgrid .field + .field,.modal .box .tc-fgrid + .field,.modal .box .tc-help + .field{margin-top:0}
.modal .box .tc-fgrid + .field,.modal .box .tc-help + .field{margin-top:16px}
.tc-help{margin-top:6px}
.tc-remind label[for]{display:flex;align-items:center;gap:6px}
.tc-remrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tc-remrow select{flex:1 1 200px;max-width:300px;width:auto}
#tcf .tc-fgrid{margin:0 0 16px}
#tcf .tc-fgrid .field{margin:0}
#tcf .tc-help{margin:-8px 0 16px}
#tcf .tc-warns{margin:0}
#tcf-warn:not(:empty){margin:0 0 16px}
#tcf .tc-cbx{display:flex;margin:0;font-weight:400;color:var(--ink)}
#tcf .tc-cbx.off{color:var(--muted)}
#tcf .tc-cbx input{width:18px;height:18px;min-height:0;padding:0;margin:0;flex:none}
.tc-cbx{display:flex;align-items:center;gap:8px;height:40px;font-size:14px;cursor:pointer}
.tc-cbx input{width:18px;height:18px;accent-color:var(--accent-fill)}
.tc-cbx.off{color:var(--muted);cursor:default}
.tc-pick{position:relative}
.tc-pick .lbl{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:var(--ink-2)}
.tc-picked{display:flex;flex-wrap:wrap;gap:8px}
.tc-chip{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;min-height:36px;padding:4px 4px 4px 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);font-size:14px}
.tc-x{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.tc-x:hover{background:var(--surface-3);color:var(--ink)}
.tc-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tc-res{position:absolute;left:0;right:0;top:100%;z-index:5;max-height:280px;overflow:auto;list-style:none;margin:4px 0 0;padding:4px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-2)}
.tc-res li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;min-width:0}
.tc-res li.on,.tc-res li[data-act]:hover{background:var(--accent-tint)}
.tc-res .tc-resmsg{color:var(--muted);font-size:13px;cursor:default}
.tc-optk{flex:none;width:58px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tc-optm{display:flex;flex-direction:column;min-width:0}
.tc-optm b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-warns{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.tc-warns:empty{display:none}
.tc-warn{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.45}
.tc-warn svg{flex:none;margin-top:1px}
.tc-warn.warn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--pend-ink)}
.tc-warn.bad{background:var(--bad-soft);border:1px solid var(--bad-line);color:var(--bad-ink)}
.tc-skelline{height:84px;margin-top:16px;border-radius:10px;background:var(--skeleton)}
.tc-ctx{margin:-4px 0 16px;color:var(--muted)}
.tc-fs{margin:0 0 16px;padding:0;border:0;min-width:0}
.tc-fs legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:500;color:var(--ink-2)}
.tc-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tc-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;font-size:14px;cursor:pointer}
.tc-opt:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}
.tc-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.tc-opt input{margin:3px 0 0;accent-color:var(--accent-fill);flex:none}
.tc-int>span{display:flex;flex-direction:column}
.tc-fs.err .tc-opt{border-color:var(--danger-line)}
.tc-fs .e{margin-top:6px;font-size:12px;font-weight:500;color:var(--danger)}
.tc-subh{margin:8px 0;font-size:13px;font-weight:600;color:var(--muted)}

/* Today cards */
.tc-today .tc-item{padding:10px 0}
.tc-today .tc-item:first-child{padding-top:0}
.tc-vlist{list-style:none;margin:0;padding:0}
.tc-vrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.tc-vrow:first-child{border-top:0;padding-top:0}
.tc-vrow:hover .b-wmain b{color:var(--accent-ink)}
.tc-vtime{flex:none;min-width:52px;padding:4px 8px;border-radius:8px;background:var(--poc-bg);color:var(--poc-ink);font-size:14px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.tc-vrow.is-done .tc-vtime{background:var(--surface-3);color:var(--muted)}
.tc-vrow.is-late .tc-vtime{background:var(--bad-bg);color:var(--bad-ink)}

/* lead drawer */
.tc-lbtns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.tc-lsec .tc-item{padding:8px 0}

@media (max-width:767px){
  .modal .box.tc-box,#modal .box.tc-box{width:100%}
  .tc-item{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"check main state" ". when when";row-gap:4px}
  .tc-item .tc-ico{display:none}
  .tc-when{flex-direction:row;align-items:center;gap:8px;justify-content:flex-start}
  .tc-calbar{align-items:flex-start}
  .tc-caltitle .tc-ctl{display:none}
  .tc-caltitle .tc-cts{display:inline}
}
@media (max-width:560px){
  .tc-fgrid{grid-template-columns:1fr 1fr}
  .tc-fgrid .field:nth-child(3){grid-column:1/-1}
  .tc-opts{grid-template-columns:1fr}
  .tc-form .tc-types{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tc-dl{grid-template-columns:96px minmax(0,1fr)}
  .tc-fubtns{margin-left:0;width:100%}
  .tc-fubtns .btn{flex:1 1 0}
  .tc-caltitle{font-size:14px}
}
/* A-028: the legend swatches show on the dark theme */
html.dark .tc-legend i{box-shadow:inset 0 0 0 1px var(--line-2)}
html.dark .tc-legend i.tc-t-viewing{background:var(--accent-tint-2)}
html.dark .tc-legend i.tc-t-call{background:var(--surface-3)}


/* CRM slice D: lead sources, routing, CSV import, inbox bulk assign and reply-overdue flags. Layout only, design tokens only. */

/* marks for CRM sources (portal marks keep their own colours) */
.mark.crm-cd{background:var(--neu-bg);color:var(--neu-ink);font-size:11px;letter-spacing:-.03em}

/* Settings > Lead sources */
.cd-nm{gap:8px;flex-wrap:wrap;align-items:center}
.cd-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-ctl-sm);background:var(--surface-3);color:var(--ink-2);flex:none}
.cd-src .pm-d{padding-top:0}
.cd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cd-tile{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;min-height:var(--touch)}
.cd-tb{display:flex;flex-direction:column;gap:4px;min-width:0}
.cd-tile .cd-tt{font-weight:600;font-size:var(--t-14);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cd-tile:hover{border-color:var(--line-2);background:var(--surface-2)}
.cd-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cd-tile.off{cursor:default;background:var(--surface-2)}
.cd-tile.off:hover{border-color:var(--line)}
.cd-steps{margin:12px 0;padding-left:20px;display:grid;gap:6px;font-size:var(--t-13);color:var(--ink-2)}
.cd-pre{margin:0;padding:12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface-2);font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink);overflow:auto;max-height:240px;white-space:pre}
.cd-keyrow{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
#modal .note+.note,#modal .field+.note,#modal .note+.field,#modal .cd-steps+.note{margin-top:12px}
.cd-test{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px;font-size:var(--t-14)}
.cd-test li{display:flex;gap:10px;align-items:baseline}
.cd-mk{width:8px;height:8px;border-radius:50%;background:var(--dot-neu);flex:none;transform:translateY(-1px)}
.cd-mk.ok{background:var(--dot-ok)}.cd-mk.pending{background:var(--dot-pend)}.cd-mk.bad{background:var(--dot-bad)}
.cd-danger{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);margin-top:12px}
.cd-danger+.cd-danger{margin-top:0}
.cd-danger .grow{flex:1;min-width:0}
.cd-keys{margin-top:12px}
.cd-keys summary{cursor:pointer;font-weight:600;font-size:var(--t-13);min-height:var(--touch);display:flex;align-items:center}

/* fieldsets and choices used in source, rule and import forms */
.cd-fs{border:0;padding:0;margin:16px 0 0;min-width:0}
.cd-fs legend{font-size:var(--t-13);font-weight:600;color:var(--ink);padding:0;margin-bottom:8px}
.cd-chk{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-14);color:var(--ink);padding:6px 0;cursor:pointer;line-height:1.4}
.cd-chk input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--accent-fill)}
.cd-chk input:disabled+span{color:var(--muted)}
.cd-srcs,.cd-forms{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 16px;padding:4px 0 0 26px}
.cd-forms{padding-left:26px}

/* CSV import */
.cd-file{margin:-8px 0 8px}
.cd-h3{font-size:var(--t-14);margin:20px 0 8px}
.cd-mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 16px}
.cd-impopts{margin-top:8px}
.cd-counts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.cd-imptbl{margin-top:8px}
.cd-imptbl table{min-width:560px}
.cd-imptbl th,.cd-imptbl td:nth-child(1),.cd-imptbl td:nth-child(3),.cd-imptbl td:last-child{white-space:nowrap}
.cd-imptbl td{overflow-wrap:anywhere}

/* routing */
.setbody-d>#crm-routing-slot{margin-top:16px}
.cd-rules{list-style:none;margin:0;padding:0}
.cd-rule{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.cd-rule:first-child{border-top:0;padding-top:0}
.cd-rule .grow{flex:1;min-width:0;font-size:var(--t-14);color:var(--ink)}
.cd-rule.off .grow{color:var(--muted)}
.cd-num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);font-size:12px;font-weight:700;flex:none}
.cd-fallback{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.cd-days{border:0;padding:0;margin:16px 0 12px;display:flex;gap:8px;flex-wrap:wrap}
.cd-days legend{margin-bottom:8px}
.cd-day{position:relative;display:inline-flex}
.cd-day input{position:absolute;opacity:0;width:1px;height:1px}
.cd-day span{display:grid;place-items:center;min-width:48px;height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:var(--t-13);font-weight:600;color:var(--ink-2);background:var(--surface);cursor:pointer}
.cd-day input:checked+span{background:var(--accent-tint-2);border-color:var(--accent);color:var(--accent-ink)}
.cd-day input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.cd-hours[hidden]{display:none}

/* inbox: bulk assign and reply overdue */
.cd-bulkbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-bottom:12px;position:sticky;top:calc(var(--topbar-h) + 8px);z-index:3}
.cd-bulkbar b{font-size:var(--t-14);margin-right:auto}
.cd-bulkctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cd-bulkctl select{min-width:180px}
th.cd-pick,td.cd-pick{width:40px;padding-right:0}
.cd-box{width:18px;height:18px;accent-color:var(--accent-fill);cursor:pointer;vertical-align:middle}
.b-lcard .cd-cardbox{align-self:center;margin-right:4px;flex:none}
.seg20 a.cd-overtab b{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:2px;border-radius:var(--r-pill);background:var(--bad-bg);color:var(--bad-ink)}
.cd-from .mono{overflow-wrap:anywhere}

@media (max-width:767px){
  #modal .box.wide.cd-dlg{width:100%} /* a wide dialog is a full-width sheet on phones */
  .cd-mapgrid{grid-template-columns:1fr}
  .cd-tiles{grid-template-columns:1fr}
  .cd-rule{flex-wrap:wrap}
  .cd-rule .acts-d{width:100%;justify-content:flex-start;padding-left:36px}
  .cd-bulkbar{top:calc(var(--topbar-h) + 4px)}
  .cd-bulkbar b{flex-basis:100%}
  .cd-bulkctl{width:100%}
  .cd-bulkctl select{flex:1;min-width:0}
  .cd-srcs,.cd-forms{grid-template-columns:1fr}
  .cd-danger{flex-wrap:wrap}
}


/* CRM slice E: CRM reports (Reports > CRM, and My reports for agents) and the CRM tiles on Today.
   Layout only, design tokens only. Tables, cards, tiles, chips and bars come from the design system and the Reports page (.c-*). */
.e-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.e-kpis .tile{min-width:0}
.e-kpis .tile .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-card{margin-bottom:16px}
.e-sec{scroll-margin-top:72px}
table.e-tbl tfoot th,table.e-tbl tfoot td{border-top:1px solid var(--line-2);font-weight:600;color:var(--ink);background:transparent}
table.e-tbl tfoot th{font-size:13px;text-transform:none;letter-spacing:0;text-align:left}
table.e-tbl tfoot tr th,table.e-tbl tfoot tr td{border-bottom:0}
table.e-tbl tr.e-grp th{background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;padding-top:8px;padding-bottom:8px}
table.e-tbl td.e-name{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
table.e-tbl .c-progress{min-width:110px}
.e-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.e-sum > div{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;min-width:0}
.e-sum .l{display:block;font-size:12px;color:var(--muted)}
.e-sum b{display:block;font-size:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-sum .s{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.e-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:32px;align-items:start}
.e-split h4{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink-2)}
.e-loading{font-size:12px;color:var(--muted)}
.e-today{margin:0 0 16px}
.e-today .b-kpis{margin-bottom:0}
@media (min-width:901px){.e-today .b-kpis.b-kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}} /* three tiles fill the row (never a blank cell); the tablet and phone grids are main's */
@media (min-width:1720px){.e-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:1100px){.e-split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .e-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .e-kpis .tile{padding:12px 14px}
  .e-kpis .tile .v{font-size:20px;white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .e-card .c-card-hd{flex-wrap:wrap;gap:2px 12px}
  .e-card .c-card-hd .c-note{flex-basis:100%}
  .e-bars .c-hbar{grid-template-columns:minmax(0,1fr)}
  .e-bars .c-hbar .v{text-align:left;white-space:normal}
  .e-sum{grid-template-columns:minmax(0,1fr)}
}


/* ---------- Step 25: Inbox list and board (99-zz-y-inbox.js). Header, filters, table, board and cards are the shared components
   (screens/components/components.css); what is left is the dialogs, the bulk bar and the list's two-line cells. Tokens only. ---------- */
.iv-page{min-width:0}
/* rc3: the list toolbar (list-toolbar.css) draws the header; the gear's own button stays hidden, Inbox settings in More opens its panel */
.iv-page .iv-gear{display:contents}
.iv-page .iv-gear .sx-vs>summary{display:none}
.iv-page .iv-gear .sx-vsp{top:calc(100% + 6px)}
#popmenu .dd-h{padding:6px 12px 2px;color:var(--muted);font-size:12px;font-weight:600}
#popmenu hr{margin:6px 0;border:0;border-top:1px solid var(--line)}
.iv-muted{color:var(--muted);font-size:12px;line-height:1.4}
.iv-mt{margin-top:12px}
.iv-mp{margin:-4px 0 14px;color:var(--ink-2);font-size:14px;line-height:1.5}
.iv-mact{justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
.iv-err{margin-top:6px;color:var(--bad-ink);font-size:12px;font-weight:600}
.iv-chk{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:var(--ink);cursor:pointer}
.iv-chk input{width:16px;height:16px;accent-color:var(--accent)}
.iv-f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.iv-ic{flex:none}

/* list: the cells with two lines, the group button, the select box */
.iv-two{display:flex;flex-direction:column;gap:2px;min-width:0}
.iv-l1{font-size:13px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv-l2{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-two.late .iv-l2{color:var(--bad-ink);font-weight:600}
.iv-grp{display:inline-flex;align-items:center;gap:2px;flex:none;height:20px;margin-inline-start:8px;padding-block:0 0;padding-inline:8px 4px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:11px;font-weight:700;cursor:pointer}
.iv-grp:hover,.iv-grp:focus-visible{border-color:var(--accent);color:var(--accent-ink);outline:none}
.iv-grp svg{width:12px;height:12px;transition:transform .15s}
.iv-grp[aria-expanded="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-ink)}
.iv-grp[aria-expanded="true"] svg{transform:rotate(180deg)}
.iv-box{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer}
.iv-c-sel{width:44px}

/* bulk bar */
.iv-bulk{position:sticky;bottom:16px;z-index:20;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;width:max-content;max-width:100%;margin:16px auto 0;padding-block:10px 10px;padding-inline:16px 12px;background:var(--ink);color:var(--surface);border-radius:14px;box-shadow:var(--shadow-3)}
.iv-bulk b{font-size:14px;font-weight:600}
.iv-bulka{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.iv-bulka .btn svg{width:15px;height:15px}
.iv-bulka .btn.ghost{color:var(--surface);border-color:transparent;background:transparent}
.iv-bulka .btn.ghost:hover{background:color-mix(in srgb,var(--surface) 14%,transparent)}
.iv-bulka .btn:disabled{opacity:.55}
@media (max-width:767px){
  .iv-f2{grid-template-columns:minmax(0,1fr)}
  .iv-bulk{bottom:calc(68px + env(safe-area-inset-bottom));width:auto;margin:16px 0 0}
  .iv-bulka{width:100%}
}


/* ---------- Step 23: record pages (lead now; contact and deal next). One layout for every CRM record:
   header with actions, stage path, About | Activity | Related. Tokens only, no new colours. ---------- */
.rpage{display:flex;flex-direction:column;gap:16px;min-width:0;text-align:start}
.rec-back{padding-inline-start:8px}

/* header */
.rec-av{display:inline-grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--accent-tint);color:var(--accent-ink);font-size:18px;font-weight:600;letter-spacing:.02em}
.rec-av.sm{width:32px;height:32px;font-size:12px}
.rec-note-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);padding:8px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.rec-note-line.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.rec-note-line.bad{background:var(--bad-soft);border-color:var(--bad-line)}
.rec-note-line .b-ic{color:var(--muted)}

/* menus (Log activity, More) */

/* stage path */

/* columns: About | Activity | Related; two columns on laptops; one column with tabs below 960 px */

/* O-19 and O-22: activity and composer wide on the left; one right column of collapsible groups (About, Coming up, Contact, Related).
   Three columns only from 1600 px: About and Coming up move to a left column. Below 1100 px one column (components.css). */
.rpage .rec-sa,.rpage .rec-sb{display:flex;flex-direction:column;gap:14px;min-width:0}
.rpage .rec-sa:empty,.rpage .rec-sb:empty{display:none}
.rec-grp{display:flex;flex-direction:column;gap:10px;min-width:0}
.rec-grpb{display:flex;flex-direction:column;gap:12px;min-width:0}
.rec-grpb[hidden]{display:none}
.rec-grph{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:0 4px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;text-align:start;cursor:pointer}
.rec-grph:hover{color:var(--ink);background:var(--surface-2)}
.rec-grph:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rec-grph small{color:var(--muted);font-size:12px;font-weight:500}
.rec-grpc{display:inline-grid;place-items:center;margin-inline-start:auto;color:var(--muted);transition:transform .15s}
.rec-grpc svg{width:14px;height:14px}
.rec-grph[aria-expanded="true"] .rec-grpc{transform:rotate(90deg)}
[dir="rtl"] .rec-grph[aria-expanded="false"] .rec-grpc{transform:scaleX(-1)}
.rec-tasks .sx-task span{overflow-wrap:anywhere}
@media (min-width:1600px){
  .rpage .sx-rgrid{grid-template-columns:280px minmax(0,1fr) 320px;grid-template-rows:auto 1fr}
  .rpage .sx-rside{display:contents}
  .rpage .rec-sa{grid-column:1;grid-row:1/span 2}
  .rpage .sx-rmain{grid-column:2;grid-row:1/span 2}
  .rpage .sx-rside>.sx-nba{grid-column:3;grid-row:1}
  .rpage .rec-sb{grid-column:3;grid-row:2}
}

/* A-039: a read-only person sees no button that writes in the side cards: only those that open, copy, filter or fold */
.rec-ro :is(button,a)[data-act]:not([data-act*="Open"]):not([data-act*="open"]):not([data-act*="Copy"]):not([data-act*="copy"]):not([data-act="recGrp"]):not([data-act="retentionRead"]):not(.rec-li){display:none}
.rec-ro .rec-btns:not(:has(> :not([data-act]))):not(:has([data-act*="Open"])){display:none}
.rec-ro :is(input,textarea,select):not([type=search]):not([readonly]){display:none}

/* side cards */
.rec-kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 12px;margin:0;font-size:13px}
.rec-kv dt{color:var(--muted);font-weight:500}
.rec-kv dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.rec-kv.stack{grid-template-columns:minmax(0,1fr);gap:2px}
.rec-kv.stack dt{font-size:12px}
.rec-kv.stack dd{margin-bottom:10px}
.rec-kv.stack dd:last-child{margin-bottom:0}
.rec-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.rec-ch{display:flex;align-items:center;gap:4px;min-height:40px;padding:6px 0;border-bottom:1px solid var(--line)}
.rec-ch:last-child{border-bottom:0}
.rec-ch .v{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;margin-inline-end:4px}
.rec-ch .v b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-ch .v span{font-size:12px;color:var(--muted)}
.rec-ib{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;flex:none;text-decoration:none;padding:0}
.rec-ib:hover:not(:disabled){background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.rec-ib:disabled{color:var(--muted);background:var(--surface-3);cursor:not-allowed}
.rec-ib svg{width:16px;height:16px}
.rec-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.rec-li{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.rec-li[role=button]{cursor:pointer}
.rec-li[role=button]:hover{border-color:var(--line-2);background:var(--surface-2)}
.rec-li .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rec-li .m b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-li .m span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-li.late{border-color:var(--bad-line);background:var(--bad-soft)}
.rec-empty{font-size:13px;color:var(--muted);margin:0}
.rec-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rec-more-n{font-size:12px;color:var(--muted);margin-top:8px}

/* composer */
.rec-crow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rec-crow>.field{flex:1 1 160px}
.rec-crow .grow{flex:1}
.rec-cfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rec-cfoot .grow{flex:1}
.rec-help{font-size:12px;color:var(--muted);line-height:1.45}
.rec-notehint{margin-bottom:6px}
.rec-from{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}
.rec-from b{color:var(--ink-2);font-weight:600}
.rec-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rec-tools select{min-height:32px;height:32px;font-size:13px;width:auto}
.rec-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:var(--accent-tint);border:1px solid var(--accent-tint-2);font-size:13px;font-weight:600;color:var(--ink)}
.rec-ask .grow{flex:1}
.rec-outs{display:flex;flex-wrap:wrap;gap:6px}
.rec-outs button{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.rec-outs button:hover{border-color:var(--accent);color:var(--ink)}
.rec-outs button[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-ink)}
.rec-pin{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer}
.rec-lock{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.rec-lock .btn.link{font-size:12px}
.rec-cdis{padding:24px 16px;text-align:center}
.rec-err{order:1;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--danger)}
.rec-err .b-ic{color:var(--danger)}
.rec-merr{font-size:12px;color:var(--danger);margin-top:6px;font-weight:500}

/* timeline */
.rec-it-w{font-size:12px;color:var(--muted)}

/* lead stage chip for the new Qualified stage (same outline family as the other lead stages) */
.b-stage.s-qualified{color:color-mix(in srgb,var(--accent) 85%,var(--vw-accent-2))}

/* phone: sticky action bar above the bottom navigation */
@media (max-width:767px){
  .rec-av{width:44px;height:44px;font-size:16px}
  .rpage{padding-bottom:64px}
  .rec-kv{grid-template-columns:88px minmax(0,1fr)}
}

/* Phones: record menus (More, owner) open as a sheet above the action bar on every record page (lead, contact, deal), not off screen. */


/* ---------- Step 23: the contact record page (99-zz-z-rec-2-contact.js). Only what the shared record styles (98-crm-r.css.html)
   do not cover: the status strip in place of a stage path, consent rows, requirement matches in the side column. Tokens only. ---------- */

/* status strip: open deals, last activity, next step, marketing consent, calls */

/* header: source chip next to the Property Finder contact badge */
.rc-srcv{display:inline-flex;align-items:center;gap:6px}
.rc-srcv .mark{width:18px;height:18px;font-size:11px}

/* side cards */
.rc-tag{padding-inline-end:10px}
.rc-notes{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.rc-sub{font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 4px}
.rc-sub:first-child{margin-top:0}
.rc-subgap{margin-top:14px}
.rc-showall{margin-top:6px}
.rc-cons{display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 0;border-bottom:1px solid var(--line)}
.rc-cons:last-of-type{border-bottom:0}
.rc-cons .k{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rc-cons .k b{font-size:13px;font-weight:600}
.rc-cons .k span{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.rc-hist{margin:6px 0 2px;font-size:12px}
.rc-hist summary{cursor:pointer;color:var(--ink-2);font-weight:600}
.rc-hist ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rc-hist li{display:flex;flex-direction:column;gap:1px}
.rc-hist li span{color:var(--muted)}
.rc-dnc{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:13px}
.rc-dnc .w{flex:1 1 140px;min-width:0;font-size:12px;color:var(--muted)}

/* looking for: requirement, matches, send */
.rc-req{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.rc-req:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.rc-reqhd{display:flex;align-items:flex-start;gap:8px}
.rc-reqhd .t{flex:1;min-width:0;font-size:13px;line-height:1.45;color:var(--ink)}
.rc-reqhd .chip{flex:none}
.rc-matches{display:flex;flex-direction:column;gap:6px}
.rc-matches .ca-match{padding:6px 8px;gap:8px}
.rc-matches .b-thumb{width:48px;height:36px}
.rc-matches .b-minibody{min-width:0}
.rc-matches .b-mt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-mfoot{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.rc-mfoot .grow{flex:1}

/* composer and dialogs */
.rc-grow2{flex:2 1 240px}
.rc-center{justify-content:center}
.rc-mb6{margin-bottom:6px}
.rc-mt12{margin-top:12px}
.rc-mtext{font-size:14px;margin:0 0 12px}
.rc-mrow{justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
.rc-warns{margin:8px 0 0}
.rc-duplist{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* phones: the strip becomes a two-column grid instead of a sideways scroll */


/* ---------- Step 23: the deal record page (99-zz-z-rec-3-deal.js). The frame's 98-crm-r.css.html does the layout; these are the deal-only parts:
   key figures in the header, documents, commission splits, the AML line. Tokens only, no new colours. ---------- */

/* key figures */

/* stage path: deal stage names are long (MOU signed (Form F)); room for the check, and a lock on a stage that needs details first */

/* About */
.rd-who{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:6px}
.rd-who .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rd-who .m b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.rd-who .m>span{font-size:12px;color:var(--muted)}
.rd-amlw{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.rd-amlw .rec-btns,.rd-amlw .rec-more-n{margin-top:0}
.rd-aml{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.rd-aml .btn{margin-inline-start:auto}
.rec-kv dd .b-sub{font-size:12px}
.rec-kv dd .rec-chips{margin-top:4px}

/* Related: documents */
.rd-count{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.rd-alerts{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.rd-docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rd-doc{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.rd-doc:first-child{border-top:0;padding-top:0}
.rd-dic{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;border:1px dashed var(--line-2);color:var(--muted)}
.rd-dic svg{width:13px;height:13px}
.rd-doc.s-done .rd-dic{border:0;background:var(--ok-bg);color:var(--ok-ink)}
.rd-doc.s-expiring .rd-dic{border:0;background:var(--pend-bg);color:var(--pend-ink)}
.rd-doc.s-expired .rd-dic{border:0;background:var(--bad-bg);color:var(--bad-ink)}
.rd-doc .m{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.rd-doc .m b{font-size:13px;font-weight:600;color:var(--ink)}
.rd-doc .m span:not(.chip){font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.rd-doc .btn.sm{flex:none;min-height:28px;padding:0 10px;font-size:12px}

/* Related: commission */
.rd-comm{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.rd-comm b{font-size:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rd-comm span{font-size:12px;color:var(--muted)}
.rd-splits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rd-split{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.rd-split .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rd-split .m b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-split .m span{font-size:12px;color:var(--muted)}
.rd-split .amt{font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.rd-sum{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;font-size:12px;color:var(--muted)}

/* composer and dialogs */
.rec-crow>.field.rd-subj{flex:2 1 240px}
.rd-mb6{margin-bottom:6px}
.rd-mt{margin-top:12px}
.rd-center{justify-content:center}
.rd-edit .dl-form{margin-top:4px}
.rd-edit .rec-help{margin:0}

/* Step 34: the Won gate list under the header (items and buttons are styled in 98-crm-b.css.html, .dl-wlist). */


/* Layout for Settings, Team, Plan and billing, Support and the help panel (area D). Tokens only; components come from the design system. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stack-d{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;min-width:0}
.stack-d>*{min-width:0}
.sub-d{font-size:12px;color:var(--muted);line-height:1.45}
.nm-d{font-size:13px;font-weight:600;color:var(--ink)}
.em-d{font-size:12px;color:var(--muted)}
.lbl-d{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.r-d{text-align:end}.c-d{text-align:center}
td.num,.num{font-variant-numeric:tabular-nums}
.scroll-d{overflow-x:auto;max-width:100%}
.stack-d>.seg20{justify-self:start;max-width:100%;overflow-x:auto}
.reply-d .grow,.prow-d .grow,.srow-d .grow{flex:1}
.facts-d .btn.link,.help .btn.link,.chg-d .btn.link,.tfoot-d .btn.link,.btn.link.back-d,.devices-d .btn.link,.card>.btn.link{min-height:0;height:auto;padding:0}
.tbl .bar-h input.q{min-width:260px}
.mono{overflow-wrap:anywhere}

/* card header and footer */
.hd-d{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.hd-d .grow{flex:1;min-width:0}
.hd-d h3{margin:0}
.hd-d .sub-d{margin-top:2px}
.ft-d{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.mft-d{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}
.grid2-d{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.grid3-d{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
.field input:disabled,.field select:disabled{background:var(--canvas);color:var(--muted);cursor:not-allowed}
.setbody-d .field,#modal .field,.drawer .db .field{margin:0 0 16px}
.setbody-d form+.ft-d,.setbody-d form+.lock-d{margin-top:0}
.field .help{line-height:1.4}
.num-d{max-width:120px}

/* Settings: section list on the left from 1024 px, a scrolling strip below that */
.setwrap-d{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.setnav-d{display:flex;flex-direction:column;gap:2px;position:sticky;top:72px}
.setnav-d a{display:block;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;text-decoration:none;border-inline-start:2px solid transparent}
.setnav-d a:hover{background:var(--surface)}
.setnav-d a.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1);border-inline-start-color:var(--accent)}
.setnav-d a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.setbody-d{min-width:0}
@media (max-width:1023px){
  .setwrap-d{grid-template-columns:minmax(0,1fr);gap:16px}
  .setnav-d{position:relative;top:auto;flex-direction:row;overflow-x:auto;gap:4px;border-bottom:1px solid var(--line);padding-bottom:0;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .setnav-d::-webkit-scrollbar{display:none}
  .setnav-d a{white-space:nowrap;border-radius:0;border-inline-start:0;border-bottom:2px solid transparent;padding:10px 8px;margin-bottom:-1px}
  .setnav-d a.on{background:transparent;box-shadow:none;border-bottom-color:var(--accent)}
}

/* setting rows, switches with a line under them */
.srow-d{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.hd-d+.srow-d,.srow-d:first-child{border-top:0;padding-top:0}
.srow-d .grow{flex:1;min-width:0}
.srow-d>.btn{flex:none}
.sw-d{padding:4px 0}
.sw-d+.sw-d{margin-top:12px}
.sw-d .sub-d{margin-block:4px 0;margin-inline:44px 0;max-width:64ch}
.state-d{margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lock-d{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:4px}
.danger-o-d{background:transparent!important;color:var(--vw-danger)!important;border:1px solid currentColor!important}
.list-d{margin:8px 0 12px;padding-inline-start:20px}.list-d li{margin:4px 0}

/* people lists, avatars */
.av-d{width:32px;height:32px;border-radius:50%;background:var(--canvas);border:1px solid var(--line);color:var(--ink-2);display:inline-grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.av-d.lg{width:44px;height:44px;font-size:15px}
.av-d.sq{border-radius:10px;width:44px;height:44px}
.who-d{display:flex;align-items:center;gap:10px;min-width:0}
.who-d>div{min-width:0}
.avs-d{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.avs-d .av-d{width:26px;height:26px;font-size:11px}
.avs-d .sub-d{margin-inline-start:4px}
.people-d{list-style:none;margin:0;padding:0}
.people-d li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.people-d li:first-child{border-top:0;padding-top:0}
.people-d .grow{flex:1;min-width:0}
.people-d .nm-d{font-size:14px}

/* logo tile */
.logo-row-d{display:flex;align-items:center;gap:16px}
.logo-d{width:96px;height:96px;border:1px dashed var(--line-2);border-radius:12px;display:grid;place-items:center;background:var(--canvas);overflow:hidden;flex:none}
.logo-d img{max-width:100%;max-height:100%;object-fit:contain}
.logo-d span{font-size:12px;color:var(--muted)}

/* portal credentials */
.prow-d{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.prow-d:nth-of-type(1),.hd-d+.prow-d{border-top:0;padding-top:0}
.prow-d .grow{flex:1;min-width:0}
.prow-d .sub-d{margin-top:4px}
.pm-d{display:flex;gap:4px;padding-top:2px}
.acts-d{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.perr-d{margin-top:6px;font-size:12px;color:var(--vw-danger);overflow-wrap:anywhere}
.copy-d{display:flex;gap:8px}
.copy-d input{flex:1;min-width:0;font-size:12px}
.scopes-d{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 24px}
.scopes-d li{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.scopes-d li .sub-d{flex-basis:100%}
.linkrow-d{display:flex;align-items:center;gap:16px}
.linkrow-d .grow{flex:1;min-width:0}

/* roles and permissions */
.chg-d{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px}
.chg-d .btn.link{font-size:12px}
.hist-d{list-style:none;margin:0;padding:0}
.hist-d li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.hist-d li:first-child{border-top:0;padding-top:0}
.hist-d li .sub-d{white-space:nowrap}

/* teams modal checklist */
fieldset.checks-d{border:0;padding:0;margin:0 0 12px;min-width:0}
fieldset.checks-d legend{font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px;padding:0}
.checklist-d{border:1px solid var(--line);border-radius:10px;max-height:260px;overflow:auto}
.check-d,.checklist-d .check-d{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);cursor:pointer;font-size:14px;font-weight:500;color:var(--ink);margin:0}
.check-d:first-child{border-top:0}
.check-d:hover{background:var(--canvas)}
.check-d input{accent-color:var(--vw-primary);width:16px;height:16px;flex:none}
.check-d .grow{flex:1;min-width:0}
.check-d.plain{border:0;padding:0;font-size:13px}

/* small tables inside cards */
.kvt-d{width:100%;border-collapse:collapse}
.kvt-d th{background:transparent;padding:8px 0}
.kvt-d td{padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.kvt-d td+td,.kvt-d th+th{padding-inline-start:16px}
.kvt-d tr:last-child td{border-bottom:0}

/* devices */
.dev-d{list-style:none;margin:0;padding:0}
.dev-d li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.dev-d li:first-child{border-top:0;padding-top:0}
.dev-d .grow{flex:1;min-width:0}

/* website summary */
.srows-d{list-style:none;margin:0;padding:0}
.srows-d li{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.srows-d li:first-child{border-top:0;padding-top:0}
.srows-d .grow{flex:1;min-width:0}
.val-d{font-size:13px;text-align:end}

/* authenticator steps */
.steps-d{margin:8px 0 0;padding-inline-start:20px;display:grid;gap:14px}
.steps-d li b{display:block;font-size:14px;font-weight:600}
.qr-d{width:168px;height:168px;display:block;margin:8px 0 0;border:1px solid var(--line);border-radius:10px;background:#fff}
.otp-d{max-width:180px;font-size:20px!important;letter-spacing:.3em;font-family:var(--mono);text-align:center}

/* watermark preview */
.wm-d{display:flex;gap:16px;align-items:flex-start}
.wmprev-d{position:relative;width:200px;height:132px;border-radius:12px;flex:none;overflow:hidden;background:linear-gradient(160deg,var(--line-2),var(--canvas) 55%,var(--line))}
.wmtxt-d{position:absolute;font-size:12px;font-weight:700;color:var(--ink);max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wmtxt-d.p-bottom-right{inset-inline-end:10px;bottom:8px}.wmtxt-d.p-bottom-left{inset-inline-start:10px;bottom:8px}.wmtxt-d.p-top-right{inset-inline-end:10px;top:8px}.wmtxt-d.p-top-left{inset-inline-start:10px;top:8px}.wmtxt-d.p-centre{inset-inline-start:50%;top:50%;transform:translate(-50%,-50%)}

/* Team */
.ph-acts-d{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.facts-d{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 24px;margin:0}
.facts-d div{min-width:0}
.facts-d dt{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:2px}
.facts-d dd{margin:0;font-size:13px;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.team-d table{min-width:1040px}
tr.click-d{cursor:pointer}
tr.click-d:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
tr.off-d td{opacity:.6}
.tfoot-d{padding:10px 16px;border-top:1px solid var(--line)}
.sec-d{font-size:11px!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:20px 0 10px}
.sec-d:first-child{margin-top:0}
.ro-d{min-height:40px;display:flex;align-items:center;font-size:14px;color:var(--ink)}
.drawer .who-d h2{margin:0}
.drawer .df .grow{flex:1}
.locgrid-d{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.lochd-d{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.locbar-d{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.locbar-d input.q{flex:1;min-width:180px}
.loc-d table{min-width:420px}

/* Plan and billing */
.plan-d{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center}
.pname-d{font-size:20px;font-weight:600;color:var(--ink)}
.pprice-d{font-size:16px;font-weight:600;margin:4px 0;font-variant-numeric:tabular-nums}
.pprice-d .sub-d{font-weight:400}
.uses-d{display:grid;gap:14px}
.use-d{font-size:13px}
.use-d .bar{margin-top:6px}
.bar.hot-d i{background:var(--vw-danger)}
tr.cur-d td{background:var(--canvas)}
.tbl .bar-h h3{margin:0}

/* More from VortexWeb */
.prods-d{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.prod-d{display:flex;gap:14px;align-items:flex-start}
.prod-d .grow{flex:1;min-width:0}
.prod-d h3{margin:0 0 4px}
.plogo-d{width:44px;height:44px;border-radius:10px;object-fit:contain}

/* Support */
.back-d{margin-bottom:12px}
.conv-d{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.msg-d{max-width:min(78%,640px);border-radius:14px;padding:10px 14px;border:1px solid var(--line);background:var(--surface)}
.msg-d.me{align-self:flex-end;background:color-mix(in srgb,var(--vw-primary) 9%,var(--surface));border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.msg-d.them{align-self:flex-start;background:var(--canvas)}
.msg-d.internal{border-style:dashed}
.meta-d{font-size:12px;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.body-d{white-space:pre-wrap;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.badge-d{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:600;background:var(--vw-primary);color:#fff}
.files-d{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.file-d{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-d.staged{cursor:default}
.file-d button{border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer;padding-block:0 0;padding-inline:2px 0;line-height:1}
.reply-d{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.drop-d{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px dashed var(--line-2);border-radius:10px;padding:10px 12px}
.sup-d table{min-width:640px}

/* help panel: the article scrolls, the actions stay in view */
#wpanel .hp-d{display:flex;flex-direction:column;max-height:min(70vh,560px);margin:-16px}
.hp-top-d{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.hp-scroll-d{overflow:auto;padding:12px 16px;font-size:13px;flex:1;min-height:80px}
.hp-scroll-d h3{font-size:16px;margin:0 0 8px}.hp-scroll-d h4{font-size:13px;margin:12px 0 4px}.hp-scroll-d ul{padding-inline-start:18px;margin:6px 0}.hp-scroll-d li{margin:4px 0}.hp-scroll-d p{margin:6px 0}
.hp-foot-d{padding:12px 16px;border-top:1px solid var(--line);display:grid;gap:10px;background:var(--surface);border-radius:0 0 14px 14px}
.hp-row-d{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;font-size:13px;cursor:pointer;color:var(--ink)}
.hp-row-d span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* sign-up terms line and the reset-link sent state */
#login label.check{display:flex;align-items:flex-start;gap:8px;line-height:1.45;font-size:13px}
#login label.check input{margin:3px 0 0;padding:0;flex:none;width:16px;height:16px;min-height:0;accent-color:var(--vw-primary)}
.check-d input{min-height:0;padding:0}
#login .form .note.danger{margin:0}
.sent-d .env-d{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--accent);margin-bottom:12px}
.sent-d p{margin:8px 0 0}

@media (max-width:767px){
  .grid2-d,.grid3-d,.locgrid-d,.plan-d{grid-template-columns:minmax(0,1fr)}
  .srow-d,.linkrow-d,.prow-d{flex-wrap:wrap}
  .acts-d{justify-content:flex-start;width:100%}
  .hd-d{flex-wrap:wrap}.hd-d>.grow{flex:1 1 100%}
  .ph:has(.ph-acts-d){flex-wrap:wrap}.ph-acts-d{width:100%}.ph-acts-d .btn{flex:1}
  .wm-d{flex-direction:column}
  .msg-d{max-width:92%}
  .hist-d li{flex-direction:column;gap:2px}
  /* Team and Support tables become stacked cards, each value with its column name */
  .team-d table,.sup-d table{min-width:0}
  .team-d thead,.sup-d thead{display:none}
  .team-d tbody tr,.sup-d tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .team-d tbody td,.sup-d tbody td{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0!important;padding:0!important;text-align:start}
  .team-d tbody td::before,.sup-d tbody td::before{content:attr(data-label);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  .team-d tbody td[data-label="Name"],.sup-d tbody td[data-label="Subject"]{grid-column:1/-1}
  .team-d tbody td[data-label="Name"]::before,.sup-d tbody td[data-label="Subject"]::before{content:none}
  .team-d tr.empty-tr,.sup-d tr.empty-tr{display:block}
  .team-d tr.empty-tr td,.sup-d tr.empty-tr td{display:block}
  .team-d tr.empty-tr td::before,.sup-d tr.empty-tr td::before{content:none}
}
/* Roles and permissions (Settings): the roles in a list, the picked one's permissions beside it, as the Roles reference lays them out */
.sx-roles{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;align-items:start}
.sx-rail{display:flex;flex-direction:column;gap:8px}
.sx-role{display:flex;align-items:center;justify-content:space-between;gap:8px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-align:start}
.sx-role b{color:var(--muted);font-size:12px;font-weight:400}
.sx-role.on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent);font-weight:600}
.sx-role:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sx-roled{padding:0;gap:0;overflow:hidden}
.sx-roled>h2{padding:14px 16px}
.sx-roled .sx-bar{margin:0;padding:0 16px 12px}
.sx-roled .sx-tbl{border:0;border-radius:0;border-top:1px solid var(--line)}
.sx-roled .sx-sub{display:block;color:var(--muted);font-weight:400;font-size:12px;white-space:normal}
.sx-roled td.c-d,.sx-roled th.c-d{text-align:center;width:120px}
.sx-roled .chg-d{display:inline-flex;align-items:center;gap:6px;margin-inline-start:8px}
@media (max-width:767px){.sx-roles{grid-template-columns:minmax(0,1fr)}.sx-rail{flex-direction:row;flex-wrap:wrap}.sx-role{flex:none;gap:10px}.sx-roled th:first-child,.sx-roled td:first-child{display:none}.sx-roled td.c-d,.sx-roled th.c-d{width:84px}}
/* rc3 A-007: the Team table fits at 1440 (Leads was cut off) and a BRN never wraps mid-number */
.team-d th,.team-d td{padding-inline:10px}
.team-d td[data-label="BRN"] .mono{white-space:nowrap}
.team-d th{white-space:nowrap}


/* QA round H: layout fixes for the non-listing screens. Tokens only, no new colours. */
.sim-badge{background:var(--pend-bg);color:var(--pend-ink);font-weight:600;font-size:13px;padding:6px 28px;border-bottom:1px solid var(--line);position:sticky;top:var(--topbar-h,57px);z-index:19}
@media (max-width:640px){.sim-badge{font-size:12px;padding:5px 16px;top:56px}}
.jobs-h{overflow-x:auto;margin:0 -2px}
.jobs-h table{width:100%;min-width:640px}
.jobs-h td.nowrap{white-space:nowrap}
.jobs-h td.job-err{min-width:260px;max-width:420px;overflow-wrap:anywhere;color:var(--muted);line-height:1.4}
/* Boosts: the upgrade name keeps its width; price buttons wrap under each other instead of cutting the name */
.c-opt{grid-template-columns:minmax(96px,max-content) minmax(0,1fr)}
.verif-h td .s{color:var(--muted);font-size:12px;margin-top:2px}
.verif-reasons{margin:8px 0 0 18px;padding:0;display:grid;gap:4px;color:var(--ink-2)}
.jobs-h.fit table{min-width:0}
.jobs-h td .mono,.jobs-h td.mono{white-space:nowrap}
/* Insights and Reports KPI tiles on phones: 'AED 1,431,599' fits on one line in a half-width tile */
@media (max-width:640px){.c-kpis .tile .v{font-size:20px}}
/* a visually hidden table header inside a scrolling table must not widen the whole page on phones */
.scroll-d,.c-scroll,.jobs-h{position:relative}


/* Step 22a: Plan and billing, lead-cap warnings and plan-limit toasts. Layout only, on the design-system tokens. */
.plan-card-p .cur-p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:24px;align-items:start}
.pname-p{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.pprice-p{font-size:16px;font-weight:600;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.cur-name-p .sub-d{margin-top:4px}
.meters-p{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.meter-p .mh-p{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:6px}
.meter-p .mh-p .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.meter-p .sub-d{margin-top:6px;font-size:12px}
.bar-p{height:8px;border-radius:999px;background:var(--track);overflow:hidden}
.bar-p i{display:block;height:100%;border-radius:999px;background:var(--accent-fill)}
.meter-p.warn .bar-p i{background:var(--dot-pend)}.meter-p.bad .bar-p i{background:var(--dot-bad)}
.meter-p.warn .mh-p b{color:var(--pend-ink)}.meter-p.bad .mh-p b{color:var(--bad-ink)}
.alert-p{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r-card);border:1px solid var(--warn-line);background:var(--warn-soft);color:var(--ink);font-size:14px}
.alert-p>span{flex:1;min-width:220px}
.alert-p.bad{border-color:var(--bad-line);background:var(--bad-soft)}
.alert-p.top-p{margin:0 0 16px}
.pgrid-p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px}
.pcard-p{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface-2)}
.pcard-p.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:var(--accent-tint)}
.pcard-p h3{margin:0;font-size:16px}
.price-p{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.price-p small{font-size:13px;font-weight:500;color:var(--muted)}
.save-p{font-size:12px;font-weight:600;color:var(--ok-ink)}
.save-tag-p{font-size:11px;font-weight:700;color:var(--ok-ink)}
.caps-p{list-style:none;margin:0;padding:0;display:grid;gap:0;flex:1;font-size:13px}
.caps-p li{display:block;padding:7px 0;border-top:1px solid var(--line)}
.caps-p li.no{color:var(--muted)}
.pact-p{display:flex;align-items:center;min-height:32px}
.pact-p .btn{width:100%;justify-content:center}
.pick-p{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.pick-p:first-of-type{border-top:0}
.pps-p{display:flex;flex-wrap:wrap;gap:8px}
.pp-p{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--surface);cursor:pointer;font-weight:600;font-size:13px}
.pp-p input{accent-color:var(--accent-fill);width:16px;height:16px;margin:0}
.pp-p.on{border-color:var(--accent);background:var(--accent-tint)}
.pp-p.off{opacity:.55;cursor:not-allowed}
.toast .tx-act{margin-top:8px}
.pcard-a.off-plan-p{background:var(--surface-2);border-style:dashed}
.pcard-a.off-plan-p .toggle{opacity:.6}
.plan-off-p{margin-top:8px;font-size:12px;color:var(--muted)}
.plan-off-p a{color:var(--accent);font-weight:600}
@media (max-width:1099px){.plan-card-p .cur-p{grid-template-columns:1fr}.pgrid-p{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.meters-p,.pgrid-p,.pgrid-p.three{grid-template-columns:1fr}.pick-p{grid-template-columns:1fr;gap:8px}.hd-d .seg20{margin-top:8px}}
.inv-links-p{display:inline-flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap} /* rc3 A-047: PDF and Receipt side by side */


/* Design pass (step 20): photo-first listings. Uses the existing tokens only. */
.lbar20{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 18px}
.lbar20 .q{flex:1 1 240px;min-width:200px;max-width:360px;height:40px;border:1px solid var(--line);border-radius:10px;padding-block:0 0;padding-inline:36px 12px;background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 12px center;color:var(--ink)}
.lbar20 select{width:auto;flex:0 0 auto;max-width:200px;height:40px;border:1px solid var(--line);border-radius:10px;padding-block:0 0;padding-inline:12px 30px;background-color:var(--surface);color:var(--ink);font-weight:500;min-height:40px}
.lbar20 select.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(54,21,103,.14)}
.seg20{display:inline-flex;background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg20 a{padding:7px 12px;border-radius:9px;font-weight:600;font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.seg20 a b{font-weight:600;font-size:11px;color:var(--muted)}
.seg20 a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.08),0 0 0 1px var(--line)}
.seg20 a.on b{color:var(--accent)}
.lgrid20{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.lcard20{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.lcard20:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(15,23,42,.28);border-color:var(--line-2)}
.lcard20:focus-visible{outline:3px solid rgba(54,21,103,.45);outline-offset:2px}
.lph20{position:relative;aspect-ratio:4/3;background:var(--canvas);overflow:hidden}
.lph20 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.lcard20:hover .lph20 img{transform:scale(1.03)}
.lph20:after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(11,15,25,.62),rgba(11,15,25,0));pointer-events:none}
.lst20{position:absolute;top:12px;inset-inline-start:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:#0b0f19;font-size:12px;font-weight:600;padding:5px 10px;border-radius:99px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.lst20 i{width:7px;height:7px;border-radius:50%;background:#94a3b8}
.lst20.live i{background:#00b36b}.lst20.pending i{background:#eab308}.lst20.rejected i,.lst20.failed i{background:#e52200}.lst20.draft i{background:#94a3b8}.lst20.unpublished i,.lst20.archived i{background:#64748b}.lst20.pocket i{background:var(--vw-primary)}
.lpc20{position:absolute;inset-inline-end:12px;bottom:12px;z-index:1;color:#fff;font-size:12px;font-weight:600;display:inline-flex;gap:5px;align-items:center}
.lpm20{position:absolute;inset-inline-start:12px;bottom:11px;z-index:1}
.lpm20 .pmarks{gap:4px}
.lpm20 .mark{box-shadow:0 1px 2px rgba(0,0,0,.25)}
.lmenu20{position:absolute;top:10px;inset-inline-end:10px;z-index:2}
.lmenu20>.btn{min-height:32px;width:32px;padding:0;border-radius:10px;background:rgba(255,255,255,.94);border:none;color:#0b0f19;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.lmenu20 .dd{inset-inline-end:0;inset-inline-start:auto;max-height:60vh;overflow:auto}
.lbody20{padding:14px 16px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.lprice20{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.lprice20 span{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.lt20{font-weight:600;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.lfacts20{display:flex;gap:14px;color:var(--ink-2);font-size:13px;margin-top:4px;flex-wrap:wrap}
.lfacts20 span{display:inline-flex;gap:5px;align-items:center}
.lfacts20 svg,.lloc20 svg,.lpc20 svg{width:14px;height:14px;flex:none}
.lloc20{display:flex;gap:5px;align-items:center;color:var(--muted);font-size:13px;white-space:nowrap;min-width:0}
.lln20{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.lref20{font-size:11px;color:var(--muted);flex:none}
.lag20{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lwarn20,.lsc20{white-space:nowrap;flex:none}
.lft20{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.lft20 .av{width:26px;height:26px;border-radius:50%;background:var(--vw-primary);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.lft20 .grow{flex:1}
.lsc20{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:12px;padding:3px 8px;border-radius:99px;background:var(--canvas);color:var(--ink-2)}
.lsc20.green{background:rgba(0,179,107,.12);color:#067348}.lsc20.amber{background:rgba(234,179,8,.18);color:#6b5a00}.lsc20.red{background:var(--bad-bg);color:var(--bad-ink)}
.lwarn20{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:12px;color:var(--pend-ink)}
.lempty20{grid-column:1/-1;text-align:center;padding:56px 16px;border:1px dashed var(--line-2);border-radius:16px;color:var(--muted)}
.lempty20 b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
html.dark .lst20,html.dark .lmenu20>.btn{background:rgba(22,28,43,.92);color:#f1f5f9}
html.dark .lsc20.green{color:#4ade80}html.dark .lsc20.amber{color:#facc15}html.dark .lsc20.red{color:#f87171}
@media (max-width:640px){.lgrid20{grid-template-columns:1fr}.lbar20 .q{max-width:none}}
.lq20{margin-top:8px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}.lq20 b{font-weight:600}.lq20 b.ok{color:var(--ok-ink)}.lq20 b.pending{color:var(--pend-ink)}.lq20 b.bad{color:var(--bad-ink)}


/* =====================================================================================================================
   Propliyo design system. ONE stylesheet, the last CSS layer: every shared component is defined here, on tokens.
   Screens do not add their own versions of these components (area layout goes in 98-<area>-screens.css.html, tokens only).
   Reference for developers: docs/design-system.md
   ===================================================================================================================== */

/* ---------- 1. Tokens (light) ---------- */
:root{
  --canvas:#F7F7FC; --surface:#FFFFFF; --surface-2:#FAFAFD; --surface-3:#F0F1F5;
  --line:#E6E6F0; --line-2:#D3D5E0;
  --ink:#0D1120; --ink-2:#3B4054; --muted:#61677B; --placeholder:#7A7F92;
  /* Propliyo palette v1.1 (owner, 20 Oct 2026; docs/design-system.md): Deep Violet scale from #361567, Ink #0D1120, Cloud #F7F7FC. Violet only for the one primary action, links, focus and the active item. No gradients in the product. */
  --violet-50:#F5F3F7; --violet-100:#EBE8F0; --violet-200:#D3CCDE; --violet-300:#AFA1C2; --violet-400:#8A77A7; --violet-500:#6A528F; --violet-600:#4E3179; --violet-700:#361567; --violet-800:#2C1154; --violet-900:#230D42;
  --liyo-top:#AFA1C2; --liyo-shadow:#230D42; --liyo-mid:#4E3179;
  --brand:#361567; --brand-deep:#230D42; --brand-bright:#361567; --brand-navy:#0D1120; --brand-liyo:#230D42; --brand-liyo-dark:#AFA1C2;
  --accent:#361567; --accent-fill:#361567; --accent-tint:#F5F3F7; --accent-tint-2:#EBE8F0; --accent-ink:#361567;
  --primary-bg:#230D42; --primary-ink:#FFFFFF; --primary-hover:#2C1154;
  --rail:#0D1120; --rail-ink:#D9DBE6; --rail-muted:#9FA3B5; --rail-hover:#171A2C; --rail-on:#230D42; --rail-bar:#AFA1C2; --rail-line:rgba(255,255,255,.08);
  --danger:#C4281C; --danger-line:#F5C6C0; --danger-fill:#C4281C;
  --ok-ink:#0B7A4B; --ok-bg:#E7F6EF; --ok-line:#BFE6D3; --ok-soft:#F1FAF5;
  --pend-ink:#9A5800; --pend-bg:#FFF4DB; --warn-line:#F2DDA8; --warn-soft:#FFFAEE; --pend-soft:var(--warn-soft);
  --bad-ink:#C4281C; --bad-bg:#FDECEA; --bad-line:#F5C6C0; --bad-soft:#FEF5F4;
  --neu-ink:#4B5164; --neu-bg:#F0F1F5;
  --info-ink:#2557D6; --info-bg:#EAF0FE;
  --poc-ink:#361567; --poc-bg:#EBE8F0;
  --track:#ECEDF3; --skeleton:#EFF0F5;
  --dot-ok:#0B7A4B; --dot-pend:#C98A1B; --dot-bad:#C4281C; --dot-neu:#9FA3B5;
  --pf:#e11d48; --bayut:#0f766e; --dubizzle:#2563eb; --website:#475569; --bitrix:#0284c7;
  /* Report charts (owner 22 Oct): a colour-blind-safe set (Okabe-Ito) so Property Finder, Bayut, dubizzle and Website stay distinct for every viewer */
  --chart-pf:#D55E00; --chart-bayut:#009E73; --chart-dubizzle:#0072B2; --chart-website:#E69F00;
  --badge-danger:#C4281C;
  --shadow-1:0 1px 2px rgba(13,17,32,.05);
  --shadow-2:0 8px 24px rgba(13,17,32,.10);
  --shadow-3:0 18px 50px rgba(11,15,25,.18);
  --overlay:rgba(0,0,0,.5);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --mag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  /* radius, spacing, type, sizes */
  --r-mark:6px; --r-ctl:10px; --r-ctl-sm:8px; --r:14px; --r-card:14px; --r-modal:16px; --r-pill:999px; --r-sm:8px;
  --display:"Montserrat","Inter",system-ui,sans-serif;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-16:16px; --t-20:20px; --t-24:24px; --t-28:28px;
  --ctl-h:40px; --ctl-h-sm:32px; --touch:44px; --topbar-h:60px; --rail-w:236px; --content:1280px;
  --drawer-w:640px; --modal-s:480px; --modal-l:800px;
  /* legacy tokens from the first layers, now pointing at the system */
  --vw-primary:#361567; --vw-danger:var(--danger); --vw-success:#047857; --vw-info:#2563eb; --vw-warning:#fde047;
  --vw-accent-1:var(--pf); --vw-accent-2:var(--dubizzle); --vw-accent-3:var(--bayut); --vw-secondary:var(--website);
  --vw-dark:#0D1120; --vw-white:#ffffff; --vw-light:var(--canvas);
  --grad:#0D1120;
  --grad-soft:var(--accent-tint);
  --t-title:24px; --t-section:20px; --t-label:13px; --t-body:14px; --t-meta:12px;
  --row-h:52px; --input-h:40px; --card-pad:20px; --page-pad:24px;
  color-scheme:light;
}
/* ---------- 1b. Tokens (dark). Every colour above has a value here. ---------- */
html.dark{
  --canvas:#0d1120; --surface:#141832; --surface-2:#11152b; --surface-3:#1d2240;
  --line:#262b48; --line-2:#363c5e;
  --ink:#ffffff; --ink-2:#d9dbe6; --muted:#9fa3b5; --placeholder:#808598;
  --brand-liyo:#afa1c2; --liyo-top:#ebe8f0; --liyo-shadow:#8a77a7; --liyo-mid:#afa1c2;
  --accent:#afa1c2; --accent-fill:#afa1c2; --accent-tint:rgba(175,161,194,.12); --accent-tint-2:rgba(175,161,194,.20); --accent-ink:#d3ccde;
  --primary-bg:var(--accent-fill); --primary-ink:#0d1120; --primary-hover:var(--accent-ink);
  --rail:#0a0d19; --rail-ink:rgba(255,255,255,.82); --rail-muted:#9fa3b5; --rail-hover:#171a2c; --rail-on:#230d42; --rail-bar:#afa1c2; --rail-line:rgba(255,255,255,.08);
  --danger:#ff8f75; --danger-line:#5a2519; --danger-fill:#b91c1c;
  --ok-ink:#3fd09a; --ok-bg:rgba(0,179,107,.18); --ok-line:#1c5136; --ok-soft:rgba(0,179,107,.10);
  --pend-ink:#f5b547; --pend-bg:#443b25; --warn-line:#756534; --warn-soft:#3d3826; --pend-soft:var(--warn-soft);
  --bad-ink:#ff6b5e; --bad-bg:rgba(229,34,0,.20); --bad-line:#5a2519; --bad-soft:rgba(229,34,0,.14);
  --neu-ink:#9fa3b5; --neu-bg:#1f2839;
  --info-ink:#7fa6ff; --info-bg:rgba(59,130,246,.20);
  --poc-ink:#d3ccde; --poc-bg:rgba(175,161,194,.16);
  --track:#1f2839; --skeleton:#1f2839;
  --dot-ok:#3fd09a; --dot-pend:#f5b547; --dot-bad:#ff6b5e; --dot-neu:#6a7084;
  --pf:#e11d48; --bayut:#0f766e; --dubizzle:#2563eb; --website:#475569; --bitrix:#0284c7;
  --chart-pf:#EE7A3A; --chart-bayut:#2BB58C; --chart-dubizzle:#56B4E9; --chart-website:#F0B440;
  --badge-danger:#ff6b5e;
  --shadow-1:0 1px 2px rgba(0,0,0,.30); --shadow-2:0 8px 24px rgba(0,0,0,.40); --shadow-3:0 20px 50px rgba(0,0,0,.55);
  --overlay:rgba(0,0,0,.7);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --mag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --vw-success:#5ee0a3; --vw-info:#93c5fd; --grad:#0d1120;
  color-scheme:dark;
}

/* ---------- 2. Base and type scale (11, 12, 13, 14, 16, 20, 24, 28 only). Brand fonts, self-hosted (build.mjs copies apps/web/assets/fonts): Inter for the product, Montserrat for page titles. Arabic keeps IBM Plex Sans Arabic until the brand picks an Arabic face. ---------- */
@font-face{font-family:"Inter";src:url(/assets/fonts/Inter-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/Inter-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/Inter-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/Inter-Bold.woff2) format("woff2");font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/assets/fonts/Montserrat-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/assets/fonts/Montserrat-Bold.woff2) format("woff2");font-weight:700 800;font-style:normal;font-display:swap}
html,body{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em;color:inherit}
h1{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.01em}
h2{font-family:var(--display);font-size:20px;line-height:1.3}
h3,.card h3{font-size:16px;line-height:1.35}
h4{font-size:14px}
p{line-height:1.5}
a{color:inherit}
.small,caption{font-size:12px}
.xs{font-size:11px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:0}
.eyebrow,.overline{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
b,strong{font-weight:600}
::placeholder{color:var(--placeholder);opacity:1}
::selection{background:var(--accent-tint-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
main:focus,#page:focus,#page h1[tabindex="-1"]:focus{outline:none}
.skip{position:fixed;inset-inline-start:16px;top:-48px;z-index:200;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 12px;font-weight:600}
.skip:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hide{display:none!important}
[hidden]{display:none!important}

/* ---------- 3. Shell: rail, topbar, page ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w,var(--rail-w)) minmax(0,1fr);min-height:100vh}
.rail{background:var(--rail);color:#fff;padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;border-inline-end:1px solid var(--rail-line)}
.rail::-webkit-scrollbar{width:6px}.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px}
.rail-hd{display:flex;align-items:center;gap:8px;height:48px;padding:2px 8px 18px;margin:0 0 2px}
.rail-hd .side-tg{order:2;margin-inline-start:auto;width:28px;height:28px;opacity:.7}
.brand{display:flex;align-items:center;gap:10px;min-width:0;padding:0;margin:0;border:0;text-decoration:none;color:#fff}
.side-tg:not(.iconbtn){width:32px;height:32px;flex:none;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:var(--r-ctl);background:transparent;color:var(--rail-ink);cursor:pointer}
.side-tg:not(.iconbtn):hover{background:var(--rail-hover);color:#fff}
.side-tg:not(.iconbtn):focus-visible{outline:2px solid var(--rail-bar);outline-offset:1px}
.side-tg svg{width:18px;height:18px}
.topbar .side-tg{display:none}
.side-grip{position:fixed;top:0;bottom:0;inset-inline-start:calc(var(--sidebar-w,var(--rail-w)) - 4px);width:8px;z-index:31;cursor:col-resize;touch-action:none}
.side-grip:after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:3px;width:2px;background:transparent;transition:background .15s}
.side-grip:hover:after,.side-drag .side-grip:after{background:var(--rail-bar)}
.side-grip:focus-visible{outline:none}.side-grip:focus-visible:after{background:var(--rail-bar);box-shadow:0 0 0 2px var(--surface)}
.side-drag,.side-drag *{cursor:col-resize!important;user-select:none!important}
.brand img,.brand .prod{display:none}
/* Propliyo logo: the folded P mark and the two-tone wordmark ("Prop" ink or white, "liyo" brand purple) */
.pl-mark{width:30px;height:30px;flex:none;display:grid;place-items:center;background:none;color:inherit}
.pl-mark svg{width:100%;height:100%;display:block}
.pl-lockup{display:inline-flex;align-items:center;gap:10px}
.pl-word{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.pl-word b{font-size:20px;font-weight:800;letter-spacing:-.025em;color:inherit}
.pl-word b i{font-style:normal;color:var(--brand-liyo)}
.pl-lockup.on-dark .pl-word b i,.login .left .pl-word b i{color:var(--brand-liyo-dark)}
.rail .brand .pl-mark{width:26px;height:26px}
.rail .pl-word b{font-size:19px;font-weight:600;letter-spacing:0}
.rail .pl-word b i{color:inherit}
.pl-lockup.on-dark{color:#fff}
.pl-word small{font-size:11px;font-weight:500;color:var(--rail-muted);margin-top:3px;letter-spacing:.01em}
.navgroup{margin:0 0 2px;padding:14px 10px 6px;font-size:11px;font-weight:400;line-height:1.45;text-transform:uppercase;letter-spacing:.08em;color:var(--rail-muted)}
.nav a{display:flex;align-items:center;gap:12px;min-height:0;padding:9px 10px;margin:0 0 2px;border-radius:var(--r-ctl);text-decoration:none;color:var(--rail-ink);font-weight:400;font-size:14px;line-height:1.45;cursor:pointer;position:relative;transition:background .15s,color .15s;transform:none}
.nav a:hover{background:var(--rail-hover);color:#fff;transform:none}
/* O-02: collapsible menu groups */
button.navgroup{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:start;cursor:pointer;font-family:inherit;border-radius:var(--r-ctl-sm)}
button.navgroup:hover{color:var(--rail-ink)}
button.navgroup:focus-visible{outline:2px solid var(--rail-bar);outline-offset:-2px}
.navgroup .navchev{width:14px;height:14px;margin-inline-start:auto;flex:none;transition:transform .15s}
.navsec.closed .navchev{transform:rotate(-90deg)}
[dir="rtl"] .navsec.closed .navchev{transform:rotate(90deg)}
.navsec.closed .navitems{display:none}
.navsum{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--rail-on);color:var(--rail-ink);font-size:11px;letter-spacing:0;display:inline-flex;align-items:center;justify-content:center}
.nav a.on,.nav a[aria-current="page"]{background:var(--rail-on);color:#fff}
.nav a:focus-visible{outline:2px solid var(--rail-bar);outline-offset:-2px}
.nav svg{width:17px;height:17px;flex:none;opacity:.85;stroke-width:1.6}
.nav a.on svg{opacity:1;color:#fff}
.nav a .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav a .cnt{margin-inline-start:auto}
.rail .foot{margin-top:auto;padding:12px 10px 4px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:var(--rail-muted);line-height:1.6}
.rail .foot a{color:var(--rail-muted);text-decoration:none}.rail .foot a:hover{color:#fff;text-decoration:underline}
.rail .foot .me{display:none}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;height:var(--topbar-h);padding:0 28px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.topbar .grow{flex:1}
.topbar .tb-mark{display:none;text-decoration:none}
.topbar .chip,.topbar #topPlan,.topbar label[for="roleSel"],.topbar #roleSel,#logout,#theme{display:none!important}
.topbar .cmd{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;min-width:380px;padding:0 12px;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-ctl);color:var(--muted);font-size:14px;font-weight:400;cursor:pointer;text-align:start}
.topbar .cmd:hover{border-color:var(--line-2)}
.topbar .cmd svg{display:none}
.topbar .cmd span{flex:1;white-space:nowrap}
.topbar .cmd kbd,.kbd{font-family:var(--sans);font-size:11px;line-height:16px;border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;background:var(--surface);color:var(--muted)}
.iconbtn{width:38px;height:38px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;position:relative;flex:none;padding:0}
.iconbtn:hover{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)}
.iconbtn svg{width:18px;height:18px}
.iconbtn[aria-expanded="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.iconbtn .badge{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--badge-danger);color:#fff;font-size:11px;font-weight:600;line-height:1;text-align:center;font-variant-numeric:tabular-nums;border:2px solid var(--surface);display:inline-flex;align-items:center;justify-content:center}
.iconbtn .badge:empty{display:none}
.avbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding-block:0 0;padding-inline:4px 4px;border:1px solid transparent;border-radius:999px;background:transparent;cursor:pointer;color:var(--ink)}
.avbtn:hover,.avbtn[aria-expanded="true"]{background:var(--surface-2);border-color:var(--line)}
.avatar{width:32px;height:32px;border-radius:50%;background:#361567;color:#fff;display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
.topbar .avatar{width:36px;height:36px;background:var(--brand-deep);font-size:13px}
.avatar.sm{width:24px;height:24px;font-size:11px}
.avatar.people{background:var(--surface-3);color:var(--ink-2)}
.viewas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 24px;background:var(--surface-3);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.viewas b{color:var(--ink)}
.viewas select{height:32px;min-height:32px;max-width:320px;font-size:13px}
.viewas .grow{flex:1}
.page{padding:22px 28px 48px;max-width:var(--content);width:100%;margin:0}
.page.route-in{animation:plFade .15s ease both}
@keyframes plFade{from{opacity:.4}to{opacity:1}}
/* menus that drop from the topbar (account, help) */
.popmenu{position:fixed;z-index:70;min-width:240px;max-width:min(360px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);padding:6px}
.popmenu .pm-hd{padding:10px 12px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.popmenu .pm-hd b{display:block;font-size:14px}
.popmenu .pm-hd span{font-size:12px;color:var(--muted)}
.popmenu button,.popmenu a.pm-i{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 12px;border:0;background:none;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink);text-align:start;cursor:pointer;text-decoration:none}
.popmenu button:hover,.popmenu a.pm-i:hover{background:var(--surface-2)}
.popmenu button svg,.popmenu a.pm-i svg{width:16px;height:16px;color:var(--muted);flex:none}
.popmenu .pm-sep{height:1px;background:var(--line);margin:6px 0}
.popmenu .pm-seg{display:flex;gap:2px;margin:4px 8px 6px;padding:3px;background:var(--canvas);border:1px solid var(--line);border-radius:10px}
.popmenu .pm-seg button{flex:1;justify-content:center;min-height:30px;font-size:13px;font-weight:600;color:var(--ink-2);border-radius:8px;padding:0 8px}
.popmenu .pm-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.popmenu .pm-foot{padding:8px 12px 6px;font-size:12px;color:var(--muted)}
.popmenu .pm-foot a{color:var(--muted)}
#railTip{position:fixed;z-index:90;pointer-events:none;background:#0b0f19;color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;box-shadow:var(--shadow-2);white-space:nowrap}
html.dark #railTip{background:#f1f5f9;color:#0b0f19}

/* ---------- 4. Page header and sections ---------- */
.ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;min-height:40px}
.ph .grow{flex:1;min-width:200px}
.ph h1{margin:0}
.ph p{margin:4px 0 0;color:var(--muted);font-size:13px}
.ph .btn{flex:none}
.ph .btn.sm,.ph .btn.xs{min-height:40px;padding:0 16px;font-size:14px;border-radius:var(--r-ctl)}
.ph + .tabs,.ph + .seg20{margin-top:0}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:4px}
.sep{height:1px;background:var(--line);margin:16px 0}
.row{display:flex;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:8px}

/* ---------- 5. Buttons: primary, secondary (default), ghost, danger outline, small, icon, link ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;height:auto;padding:0 16px;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;text-decoration:none;box-shadow:none;transition:background .15s,border-color .15s,color .15s;filter:none;transform:none}
.btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--line-2);box-shadow:none;filter:none}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn.primary,.btn.accent,.btn.sm.primary,.btn.xs.primary{background:var(--primary-bg);color:var(--primary-ink);border-color:var(--primary-bg)}
.btn.primary:hover:not(:disabled),.btn.accent:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover:not(:disabled){background:var(--surface-2);border-color:transparent;color:var(--ink)}
.btn.danger,.btn.sm.danger,.btn.xs.danger{background:transparent;color:var(--danger);border-color:var(--danger-line)}
.btn.danger:hover:not(:disabled){background:var(--bad-soft);border-color:var(--danger-line)}
.modal .btn.danger,.btn.danger.solid{background:var(--danger-fill);color:#fff;border-color:var(--danger-fill)}
.modal .btn.danger:hover:not(:disabled){background:#991b1b;border-color:#991b1b}
.btn.sm,.btn.xs{min-height:32px;padding:0 12px;border-radius:var(--r-ctl-sm);font-size:13px}
.btn.icon{width:32px;min-height:32px;padding:0;border-radius:var(--r-ctl-sm)}
.btn.icon.lg{width:40px;min-height:40px}
.btn.link{min-height:0;height:auto;padding:0;border:0;background:none;color:var(--accent);font-size:13px;font-weight:600;border-radius:4px}
.btn.link:hover:not(:disabled){background:none;text-decoration:underline}
.btn:disabled,.btn[aria-disabled="true"],.btn.primary:disabled,.btn.sm.primary:disabled,.btn.xs.primary:disabled,.btn.accent:disabled{opacity:1;background:var(--surface-3);color:var(--muted);border-color:var(--line);cursor:not-allowed;transform:none}
.btn.link:disabled{background:none}
.btn[aria-busy="true"]{opacity:.6;cursor:progress}
.btn.wide{width:100%}
.hero .btn{background:#fff;color:var(--brand-navy);border-color:#fff}
.hero .btn:hover:not(:disabled){background:#e9ecf2}
.hero .btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.hero .btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.2)}
.tray .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.tray .btn.primary{background:#fff;color:var(--brand-navy);border-color:#fff}

/* ---------- 6. Controls: inputs, selects (one style, one chevron), textarea, search, labels ---------- */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=submit],[type=button])),
:where(select),:where(textarea){font:inherit;font-size:14px;color:var(--ink);background-color:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-ctl);min-height:40px;padding:0 12px;max-width:100%;transition:border-color .15s,box-shadow .15s}
:where(textarea){padding:10px 12px;line-height:1.5;min-height:88px;resize:vertical}
:where(select:not([multiple]):not([size])),select.f,.field select:not([multiple]):not([size]),.lbar20 select,.pager select{appearance:none;-webkit-appearance:none;background-image:var(--chev);background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-inline-end:34px;font-weight:500;cursor:pointer}
:where(select[multiple]),:where(select[size]){padding:6px 8px;background-image:none}
:where(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--line-2) 60%,var(--muted))}
:where(input,select,textarea):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint-2)}
:where(input,select,textarea):disabled{background-color:var(--surface-3);color:var(--muted);cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--accent-fill);margin:0;vertical-align:-3px;cursor:pointer}
input[type=range]{accent-color:var(--accent-fill)}
input.q,select.f,.field input,.field select,.field textarea,.chat .in input,.lbar20 select,.lbar20 .q{height:auto;min-height:40px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background-color:var(--surface);color:var(--ink);font-size:14px}
.field input,.field select,.field textarea{width:100%;padding-inline-start:12px}
.field textarea{padding:10px 12px;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus,input.q:focus,select.f:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint-2);outline:none}
input.q,.lbar20 .q,input[type=search]{padding-block:0 0;padding-inline:36px 12px;min-width:260px;background-image:var(--mag);background-repeat:no-repeat;background-position:12px center;background-size:16px}
select.f{padding-block:0 0;padding-inline:12px 34px}
select.on,select.f.on,.lbar20 select.on{border-color:var(--accent);background-color:var(--accent-tint);box-shadow:none;color:var(--ink)}
.pager select{min-height:32px;height:32px;font-size:13px;padding-block:0 0;padding-inline:10px 30px;border-radius:var(--r-ctl-sm)}
.field{min-width:0}
.field label,label.lbl{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px;letter-spacing:0;text-transform:none}
.field label .req{color:var(--danger)}
.field .help,.help{font-size:12px;color:var(--muted);margin-top:6px}
.field.err input,.field.err select,.field.err textarea,[aria-invalid="true"]{border-color:var(--danger)!important}
.field .e{font-size:12px;color:var(--danger);margin-top:6px;font-weight:500}
.form{display:grid;gap:16px}
.f2{grid-template-columns:1fr 1fr}
.check{display:flex;align-items:flex-start;gap:8px;font-size:14px}
.check input{margin-top:3px}
.fpanel .field label,.fmodal .field label{font-size:13px}
.fmodal h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px}
.amen-grid input[type=number],.amen-grid input[type=text]{min-height:28px;height:28px;width:80px;padding:0 8px;font-size:12px;border-radius:6px}
.login .form-card input.code,input.code{letter-spacing:.3em;font-size:20px;font-family:var(--mono)}
/* switch: one component (.toggle on forms, .psw in matrices) */
.toggle{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:14px;cursor:pointer;color:var(--ink)}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle i,.psw i{width:36px;height:20px;border-radius:999px;background:var(--line-2);position:relative;transition:background .15s;flex:none;display:block}
.toggle i:after,.psw i:after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s;transform:none}
.toggle input:checked+i,.psw input:checked+i,.psw.over input:checked+i{background:var(--accent-fill)}
.toggle input:checked+i:after,.psw input:checked+i:after{transform:translateX(16px);inset-inline-start:2px}
.toggle input:focus-visible+i,.psw input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.toggle input:disabled+i,.psw input:disabled+i{opacity:.5}
.psw.over i{box-shadow:0 0 0 2px var(--accent-tint-2)}
.psw .psw-reset{color:var(--accent);font-size:12px;font-weight:600}
/* editor pill checkboxes and selectable cards */
.chk label{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;background:var(--surface);color:var(--ink-2)}
.chk label.on{background:var(--accent-tint);color:var(--accent-ink);border-color:var(--accent)}
.srad label{border-color:var(--line-2);background:var(--surface);border-radius:var(--r-ctl)}
.srad label.on{border-color:var(--accent);background:var(--accent-tint);box-shadow:none}
.amen-grid label{border-color:var(--line);background:var(--surface);color:var(--ink-2)}
.amen-grid label.on{border-color:var(--accent);background:var(--accent-tint)}

/* ---------- 7. Tabs (underline, page sections) and segmented control (.seg20, alias .seg: in-page filters and views) ---------- */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:0 0 24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);padding-inline-end:24px}
.tabs::-webkit-scrollbar{display:none}
.tabs.at-end{-webkit-mask-image:none;mask-image:none}
.tabs a,.tabs button{display:inline-flex;align-items:center;gap:6px;padding:10px 0;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;text-decoration:none;border-radius:0;flex:none;transition:color .15s,border-color .15s}
.tabs a:hover,.tabs button:hover{color:var(--ink)}
.tabs a.on,.tabs a[aria-selected="true"],.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs a:focus-visible,.tabs button:focus-visible{outline-offset:-2px;border-radius:4px}
.drawer .tabs{margin:0 0 16px;gap:20px}
.seg20,.seg,.stabs,.edmode{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px;padding:3px;background:var(--canvas);border:1px solid var(--line);border-radius:12px;margin:0;overflow:visible}
.seg20 a,.seg20 button,.seg a,.seg button,.stabs a,.edmode button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border:0;border-radius:9px;background:transparent;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:none}
.seg20 a:hover,.seg20 button:hover,.seg a:hover,.stabs a:hover,.edmode button:hover{color:var(--ink)}
.seg20 a.on,.seg20 button.on,.seg a.on,.seg button.on,.stabs a.on,.edmode button.on,.seg20 a[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.08),0 0 0 1px var(--line)}
.seg20 a b,.seg20 button b,.seg a b,.stabs a .n{font-size:12px;font-weight:600;color:var(--muted);opacity:1}
.seg20 a.on b,.seg20 button.on b,.seg a.on b,.stabs a.on .n{color:var(--accent)}
.stabs{margin:0 0 16px}
.edmode{flex-wrap:nowrap;flex:none}

/* ---------- 8. Badges (counts in nav, tabs, segments, tables) ---------- */
.cnt,.cnt8,.badge-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;background:var(--surface-3);color:var(--ink-2);flex:none;margin-inline-start:0!important}
.nav a .cnt{min-width:20px;height:20px;border-radius:10px;background:var(--brand);color:#fff}
.tabs a .cnt{background:var(--surface-3);color:var(--ink-2)}
.tabs a.on .cnt{background:#361567;color:#fff}
.cnt8{background:var(--badge-danger);color:#fff}
.cnt8.warn{background:#fde047;color:#3d3300}
.cnt8.info{background:#2563eb;color:#fff}

/* ---------- 9. Chips: one status chip (22px, 12px/600, tinted, 6px dot). Legacy .pill and .statechip render the same. ---------- */
.chip,.pill,.statechip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:0;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;background:var(--neu-bg);color:var(--neu-ink);text-transform:none;letter-spacing:0;transform:none;vertical-align:middle}
.chip i,.statechip .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;box-shadow:none}
.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:1;flex:none}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:none}
a.chip,button.chip{cursor:pointer;text-decoration:none}
/* tones */
.chip.ok,.chip.live,.pill.live,.pill.ok,.pill.delivered,.pill.active,.pill.verified,.pill.resolved,.pill.pushed,.pill.done,.pill.build,.pill.connected,.statechip.live,.statechip.active,.statechip.verified,.statechip.approved{background:var(--ok-bg);color:var(--ok-ink)}
.chip.pending,.chip.amber,.chip.warn,.pill.pending,.pill.queued,.pill.warn,.pill.in_progress,.pill.expiring,.pill.change,.pill.processing,.statechip.pending,.statechip.pending_approval,.statechip.queued{background:var(--pend-bg);color:var(--pend-ink)}
.chip.bad,.chip.failed,.chip.rejected,.pill.rejected,.pill.failed,.pill.blocked,.pill.expired,.pill.urgent,.pill.struck,.pill.dead,.statechip.rejected,.statechip.failed,.statechip.expired,.statechip.takendown{background:var(--bad-bg);color:var(--bad-ink)}
.chip.neutral,.chip.none,.pill.draft,.pill.none,.pill.closed,.pill.unpublished,.pill.archived,.pill.tier,.pill.not.pushed,.pill.not,.statechip.draft,.statechip.unpublished,.statechip.none,.statechip.archived{background:var(--neu-bg);color:var(--neu-ink);border:0}
.chip.info,.pill.info,.pill.open,.pill.new,.statechip.info{background:var(--info-bg);color:var(--info-ink)}
.chip.pocket,.pill.purple,.pill.pocket{background:var(--poc-bg);color:var(--poc-ink)}
.pill.tier:before,.pill.none:before,.pill.build:before,.pill.change:before,.pill.struck:before,.pill.pb:before{display:inline-block}
/* sources: brand-tinted labels, never state colours */
.pill.src-property_finder,.chip.src-pf{background:#ffe4e8;color:#b3132b}
.pill.src-bayut,.chip.src-bayut{background:#dff5f2;color:#0b6f66}
.pill.src-dubizzle,.chip.src-dubizzle{background:#e4edff;color:#1d4ed8}
.pill.src-own_website,.chip.src-website{background:#eef1f6;color:#334155}
html.dark .pill.src-property_finder,html.dark .chip.src-pf{background:rgba(225,29,72,.2);color:#fda4b4}
html.dark .pill.src-bayut,html.dark .chip.src-bayut{background:rgba(20,184,166,.18);color:#6ee7db}
html.dark .pill.src-dubizzle,html.dark .chip.src-dubizzle{background:rgba(59,130,246,.2);color:#93c5fd}
html.dark .pill.src-own_website,html.dark .chip.src-website{background:#1f2839;color:#cbd5e1}
.pill.pb{background:var(--surface-3);color:var(--ink-2)}
/* listing card status on photos keeps the white pill with a coloured dot */
.lst20{font-size:12px;font-weight:600;padding:0 10px;height:24px;background:rgba(255,255,255,.94);color:#0b0f19}
.lst20 i{width:6px;height:6px}
.lst20.live i{background:var(--dot-ok)}.lst20.pending i{background:var(--dot-pend)}.lst20.rejected i,.lst20.failed i{background:var(--dot-bad)}.lst20.pocket i{background:#361567}
html.dark .lst20,html.dark .lmenu20>.btn{background:rgba(22,28,43,.92);color:#f1f5f9}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-mark);background:var(--surface-3);border:0;color:var(--ink-2);font-size:12px;font-weight:500;margin-block:2px 2px;margin-inline:0 4px}
.rec{background:var(--surface-3);border-color:var(--line);color:var(--ink-2);font-size:12px}
.ql span{font-size:11px;border-color:var(--line);background:var(--surface-3);color:var(--ink-2)}
.ql span.ok{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok-ink)}
.ql span.bad{border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad-ink)}
.lsc20{font-size:12px;font-weight:600;height:22px;padding:0 8px;background:var(--neu-bg);color:var(--neu-ink)}
.lsc20.green{background:var(--ok-bg);color:var(--ok-ink)}.lsc20.amber{background:var(--pend-bg);color:var(--pend-ink)}.lsc20.red{background:var(--bad-bg);color:var(--bad-ink)}
html.dark .lsc20.green{color:var(--ok-ink)}html.dark .lsc20.amber{color:var(--pend-ink)}html.dark .lsc20.red{color:var(--bad-ink)}
.lwarn20{font-size:12px;font-weight:600;color:#a16207}
html.dark .lwarn20{color:#facc15}
.lsttbl .scorecell .sc.green{color:var(--ok-ink)}.lsttbl .scorecell .sc.amber{color:#8a6d00}.lsttbl .scorecell .sc.red{color:var(--bad-ink)}
html.dark .lsttbl .scorecell .sc.green{color:#5ee0a3}html.dark .lsttbl .scorecell .sc.amber{color:#facc15}html.dark .lsttbl .scorecell .sc.red{color:#ff8f75}

/* ---------- 10. Portal marks: brand colour only; state is a 6px corner dot plus a title ---------- */
.mark{display:inline-grid;place-items:center;position:relative;width:20px;height:20px;border-radius:var(--r-mark);font-size:11px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1;flex:none;vertical-align:middle;opacity:1;filter:none}
.mark.pf,.mark.pf:not(.off){background:var(--pf);color:#fff}
.mark.by{background:var(--bayut)}.mark.dz{background:var(--dubizzle)}.mark.web{background:var(--website)}.mark.b24{background:var(--bitrix)}
.mark.off,.pmarks .mark.off{opacity:1}
.mark.ok:after,.mark.amber:after,.mark.bad:after,.pmarks .mark.off:after,.mark.live:after,.mark.pending:after,.mark.failed:after{content:"";position:absolute;inset-inline-end:-3px;bottom:-3px;width:8px;height:8px;border-radius:50%;border:2px solid var(--surface);background:var(--dot-neu)}
.mark.ok:after,.mark.live:after{background:var(--dot-ok)}.mark.amber:after,.mark.pending:after{background:var(--dot-pend)}.mark.bad:after,.mark.failed:after{background:var(--dot-bad)}
.pmarks{display:inline-flex;gap:6px}
.pmarks .mark.ok,.pmarks .mark.amber,.pmarks .mark.bad,.pmarks .mark.off{color:#fff}
.pmarks .mark.pf{background:var(--pf)}.pmarks .mark.by{background:var(--bayut)}.pmarks .mark.dz{background:var(--dubizzle)}.pmarks .mark.web{background:var(--website)}
/* rc3 O-13: an official portal logo in the mark's place (09-ds.js portalLogo); the letter badge stays when there is no file */
.mark.plogo,.mark.plogo:not(.off){background:var(--surface);overflow:hidden}.mark.plogo img{display:block;width:100%;height:100%;object-fit:contain}
.lpm20 .mark:after{border-color:rgba(255,255,255,.9)}
.ed .field label .pm .mark,.imgs .im .ptl .mark,.blockbar .bb-list a .mark,.ed .field .e.pe .mark{transform:none;width:16px;height:16px;font-size:11px;border-radius:4px}
.chan{width:20px;height:20px;border-radius:var(--r-mark);font-size:11px;font-weight:600;background:var(--surface-3);border:0;color:var(--ink-2)}

/* ---------- 11. Cards, notes, KPI tiles ---------- */
.card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;box-shadow:var(--shadow-1);min-width:0}
.card.tight{padding:16px}
.card.soft{background:var(--accent-tint);border-color:transparent;box-shadow:none}
.card h3{margin:0 0 12px}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.card .hd h3{margin:0}
.card > .row.spread:first-child{margin-bottom:12px}
.card > .row.spread:first-child h3{margin:0}
.grid{display:grid;gap:16px;align-items:start}
.grid:has(> .kpi),.grid:has(> .tile),.grid.stretch{align-items:stretch}
.page > .grid + .grid,.page > .card + .card,.page > .card + .grid,.page > .grid + .card,.page > .tbl + .tbl,.page > .grid + .tbl,.page > .tbl + .grid,.page > .card + .tbl,.page > .tbl + .card{margin-top:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.note{padding:12px 14px;border-radius:var(--r-ctl);background:var(--surface-2);border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.note b{color:var(--ink)}
.note.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--ink-2)}
.note.danger{background:var(--bad-soft);border-color:var(--bad-line);color:var(--ink-2)}
.note.ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ink-2)}
.note.info{background:var(--info-bg);border-color:transparent}
/* KPI tile: label 12/500 on top, value 28/700, sub 12 muted; warn and bad change only border and background */
.tile,.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;color:var(--ink);box-shadow:var(--shadow-1)}
.tile.warn,.kpi.warn,.health .h.warn{border-color:var(--warn-line);background:var(--warn-soft)}
.tile.bad,.kpi.bad,.health .h.bad{border-color:var(--bad-line);background:var(--bad-soft)}
.tile{display:block;text-align:start;font:inherit;min-width:0}
button.tile{cursor:pointer}button.tile:hover{border-color:var(--line-2)}
.tile .l{font-size:12px;font-weight:500;color:var(--muted)}
.tile .v{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.tile .s{font-size:12px;color:var(--muted);margin-top:4px}
.kpi .lbl{font-size:12px;font-weight:500;color:var(--muted)}
.kpi .val{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:4px 0 0;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:4px}
.kpi .delta{font-size:12px;font-weight:600}
.kpi .delta.up{color:var(--vw-success)}.kpi .delta.down{color:var(--danger)}
.kpi .ico{width:32px;height:32px;border-radius:var(--r-ctl-sm);background:var(--accent-tint);color:var(--accent)}
.kpi .ico svg{width:16px;height:16px}
button.tile{width:100%}
button.tile:focus-visible,.health .h[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.health{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.health .h{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:var(--r-card);padding:12px 16px;background:var(--surface);font-size:12px;font-weight:500;color:var(--muted);box-shadow:var(--shadow-1)}
.health .h b{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2;font-variant-numeric:tabular-nums}
.health .h b .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dot-neu);margin:0}
.health .h b .dot.ok{background:var(--dot-ok)}
.health .h[data-act]{cursor:pointer}.health .h[data-act]:hover{border-color:var(--line-2)}
.hero{background:var(--grad);color:#fff;border-radius:var(--r-card);padding:24px;box-shadow:none}
.hero:before,.hero:after{display:none;animation:none}
.hero h1{font-size:24px;color:#fff}
.hero p{color:rgba(255,255,255,.75)}
.hero .stats{gap:12px}
.hero .stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;background:var(--rail-hover);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 16px;}
.hero .stat .v{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.hero .stat .l{font-size:12px;font-weight:500;color:rgba(255,255,255,.72);margin:0 0 4px}
.score,.scorebig{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.portal .stats div{border-color:var(--line);background:var(--surface-2)}
.portal .stats b{font-size:20px;font-weight:700}
.portal .stats span{font-size:11px;font-weight:600;letter-spacing:.06em}
.portal .url{background:var(--surface-2);border-color:var(--line)}
.lprice20,.pcard .img .price,.preview .pr{font-weight:700}
.lprice20{font-size:20px}
.lprice20 span{font-size:13px}
.ring .c{font-weight:700}
html.dark .ring circle:first-child{stroke:var(--track)}
.kv,.kv8,.kvp{font-size:13px}
.kv{grid-template-columns:minmax(0,160px) minmax(0,1fr)}.kv8{grid-template-columns:minmax(0,140px) minmax(0,1fr)}.kvp{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
.kv > *,.kv8 > *,.kvp > *{min-width:0;overflow-wrap:anywhere}
.card .row,.drawer .row,.modal .row,.tbl .bar-h{flex-wrap:wrap}
td .row,.card td .row,.chip,.pill{flex-wrap:nowrap}
.kv .k,.kv8 .k,.kvp .k,span.k,.gate .k{color:var(--muted);font-weight:500}
.gate .k{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.gates,.scopegrid,.flow .node{background:var(--surface);border-color:var(--line)}
.scopegrid .r.h{background:var(--surface-2);font-size:11px;font-weight:600;letter-spacing:.06em}
html.dark .gate .v.pass:before{background-color:var(--ok-bg)} html.dark .gate .v.fail:before{background-color:var(--bad-bg)}
.flow .node.hub{background:var(--primary-bg);color:var(--primary-ink);border-color:var(--primary-bg)}

/* ---------- 12. Progress, skeletons ---------- */
.bar,.meter{height:6px;border-radius:999px;background:var(--track);overflow:hidden;border:0;margin-top:8px}
.bar i,.meter i{display:block;height:100%;background:var(--accent-fill);border-radius:999px;animation:none;transition:width .3s ease;min-width:4px}
.meter.warn i{background:#ca8a04}.meter.bad i{background:var(--danger-fill)}
.plan{height:8px;gap:2px}
.plan i:nth-child(1){background:#361567}.plan i:nth-child(2){background:#AFA1C2}.plan i:nth-child(3){background:var(--bayut)}.plan i:nth-child(4){background:var(--dubizzle)}
.sk{background:var(--skeleton);border-radius:8px;min-height:12px;animation:none}
.sk.line{height:12px;margin:8px 0}
.img{background:var(--surface-3);animation:none}
html.dark .img{background:var(--surface-3)}
.thumb{background:var(--surface-3);border-radius:8px}
.gal div,.gal img{background:var(--surface-3);color:var(--muted)}
.imgs .im{border-color:var(--line);background:var(--surface-2)}
.imgs .im .pic{background:var(--surface-3);color:var(--muted)}
.mapbox{background:var(--surface-3);border-color:var(--line);color:var(--muted)}
.qr{background:var(--surface);border-color:var(--line-2)}
#map{background:var(--surface-3);border-color:var(--line)}

/* ---------- 13. Tables: 40px header (overline), 52px rows, right-aligned numbers, sticky header in its scroller ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
th{height:40px;padding:0 12px;text-align:start;vertical-align:middle;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
td{height:52px;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink)}
th:first-child,td:first-child{padding-inline-start:16px}
th:last-child,td:last-child{padding-inline-end:16px}
tbody tr:last-child td,tr:last-child td{border-bottom:0}
tbody tr:hover td,tr:hover td{background:var(--surface-2)}
tr[data-act]{cursor:pointer}
tr[data-act]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
td .t{font-weight:600}
td .s{font-size:12px;color:var(--muted)}
th.num,td.num,.num{text-align:end;font-variant-numeric:tabular-nums}
td.num{white-space:nowrap}
.tbl{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1);min-width:0}
.page .tbl{overflow:visible}
.tbl > table:first-child thead tr:first-child th:first-child,.tbl > .tscroll:first-child th:first-child{border-start-start-radius:13px}
.tbl > table:first-child thead tr:first-child th:last-child,.tbl > .tscroll:first-child th:last-child{border-start-end-radius:13px}
.tbl .bar-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:56px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:13px 13px 0 0}
.tbl .bar-h b{font-size:14px;font-weight:600}
.tbl .bar-h .grow{flex:1}
.card .bar-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.tscroll,.scrollx,.tblwrap{overflow-x:auto;min-width:0;max-width:100%;scrollbar-width:thin}
.tscroll::-webkit-scrollbar,.scrollx::-webkit-scrollbar{height:8px}
.tscroll::-webkit-scrollbar-thumb,.scrollx::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
.card:not(.tight) > .tscroll{margin:0 -20px;width:calc(100% + 40px);max-width:none}
.card > .tscroll > table{min-width:100%}
.card:not(.tight) > .tscroll:last-child{margin-bottom:-20px}
.card:not(.tight) > .tscroll th:first-child,.card:not(.tight) > .tscroll td:first-child{padding-inline-start:20px}
.card:not(.tight) > .tscroll th:last-child,.card:not(.tight) > .tscroll td:last-child{padding-inline-end:20px}
.card > .tscroll:last-child tr:last-child td:first-child{border-end-start-radius:13px}
.card > .tscroll:last-child tr:last-child td:last-child{border-end-end-radius:13px}
.card > h3 + .tscroll,.card > .hd + .tscroll,.card > .row + .tscroll{border-top:1px solid var(--line)}
.lsttbl .scrollx,.leadstbl .scrollx{max-height:calc(100vh - 220px);overflow:auto}
.lsttbl thead th,.leadstbl thead th,.tscroll.sticky thead th{position:sticky;top:0;z-index:2;background:var(--surface-2)}
.lsttbl tbody tr{height:auto}
.lsttbl tbody tr td{height:56px}
.lsttbl .thumb{width:48px;height:36px}
.lsttbl tbody tr:hover,.lsttbl tbody tr:hover td{background:var(--surface-2)}
.lsttbl .sticky{background:var(--surface)}
.pager{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap}
.pager .grow{flex:1}
.empty-tr td{height:auto}
.cmptable .best{background:var(--ok-soft)}
.permgrid th,.permgrid td{text-align:center}
.permgrid th:first-child,.permgrid td:first-child{text-align:start}

/* ---------- 14. Empty states (emptyState() and the legacy .empty block) ---------- */
.empty,.empty-ds,.lempty20{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5}
.empty b,.empty-ds .t,.lempty20 b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin:0 0 4px}
.empty-ds .ic,.empty .ic{display:grid;place-items:center;width:40px;height:40px;margin:0 auto 12px;color:var(--muted)}
.empty-ds .ic svg,.empty svg{width:40px;height:40px;color:var(--muted);opacity:1;margin:0 auto 12px;display:block}
.empty-ds .ic svg{margin:0}
.empty-ds .s,.empty .s{font-size:13px;max-width:48ch;margin:0 auto}
.empty-ds .btn,.empty .btn{margin-top:16px}
.lempty20{border:1px dashed var(--line-2);border-radius:var(--r-card)}
td .empty,td .empty-ds{padding:32px 16px}

/* ---------- 15. Toasts: top-right, surface, icon, persistent errors ---------- */
.toasts,#toasts{position:fixed;top:auto;inset-inline-end:16px;bottom:20px;/* A-037 (rc3): bottom end, off the page header actions */inset-inline-start:auto;z-index:120;display:flex;flex-direction:column;gap:8px;width:min(400px,calc(100vw - 32px));pointer-events:none}
/* rc3: with a side drawer open, toasts sit beside it so they never cover its footer buttons (desktop only; on a phone the drawer is the full screen) */
@media (min-width:901px){body:has(#drawer.on) #toasts,body:has(#drawer.on) .toasts{inset-inline-end:calc(min(var(--drawer-w),100vw) + 16px)}}
.toast{display:flex;align-items:flex-start;gap:10px;min-width:0;max-width:400px;padding:12px 14px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);font-size:14px;font-weight:500;line-height:1.45;pointer-events:auto;animation:plToast .18s ease both}
.toast:before{display:none}
.toast .ti{width:16px;height:16px;flex:none;margin-top:2px;color:var(--dot-ok)}
.toast.err .ti{color:var(--danger)}
.toast.err{background:var(--surface);color:var(--ink);border-color:var(--bad-line)}
.toast .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.toast .tx-x{flex:none;width:24px;height:24px;margin-block:-2px 0;margin-inline:0 -4px;border:0;background:none;border-radius:6px;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.toast .tx-x:hover{background:var(--surface-2);color:var(--ink)}
.toast .tx-x svg{width:14px;height:14px}
@keyframes plToast{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 16. Overlay, modals (S 480, L 800), drawers (640) ---------- */
.overlay{background:var(--overlay);backdrop-filter:none;z-index:40}
.modal{z-index:60;padding:16px}
.modal .box,#modal .box{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-modal);width:var(--modal-s);max-width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:24px;box-shadow:var(--shadow-3)}
.modal .box.wide,.modal .box.l,#modal .box.wide{width:var(--modal-l)}
.modal .box > h2:first-child,.modal .box h2{font-size:20px;font-weight:600;margin:0 0 12px;padding-inline-end:32px}
.modal .box > .row:last-child{margin-top:24px!important;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.modal .box .field + .field,.modal .box .form + .field,.modal .box .field + .form{margin-top:16px}
.modal .box .dlg-x{position:absolute;top:18px;inset-inline-end:18px}
.modal .box{position:relative}
.modal.on .box{animation:plPop .18s ease both}
@keyframes plPop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.drawer,#drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;width:min(var(--drawer-w),100vw);max-width:100vw;background:var(--surface);color:var(--ink);z-index:50;box-shadow:none;transform:translateX(100%);visibility:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s;display:flex;flex-direction:column;border-inline-start:1px solid var(--line)}
.drawer.on,#drawer.on{transform:none;visibility:visible;box-shadow:var(--shadow-3);transition:transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s}
.drawer .dh{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.drawer .dh h2{font-size:20px;font-weight:600;margin:0;line-height:1.3}
.drawer .dh .grow{flex:1;min-width:0}
.drawer .dh .small,.drawer .dh .muted{font-size:12px;color:var(--muted)}
.drawer .db{padding:20px 24px;overflow:auto;flex:1;min-height:0}
.drawer .db>*{animation:none}
.drawer .df{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:12px 24px;border-top:1px solid var(--line);background:var(--surface)}
.drawer .dlg-x{order:99;margin-inline-start:auto}
.dhero .ov h2{font-size:20px}
.dhero .ov .s{font-size:13px}
html.dark .dhero .x .btn{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}
.prev{background:var(--surface-3);border-color:var(--line)}

/* ---------- 17. Menus, suggestion lists, popovers, help panel ---------- */
.menu .dd,#popmenu,.sugg{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2)}
.menu .dd a,#popmenu a,.sugg .i{min-height:34px;display:flex;align-items:center;padding:0 12px;font-size:13px;border-radius:8px}
.menu .dd a:hover,#popmenu a:hover,.sugg .i:hover{background:var(--surface-2)}
.menu .dd .g,#popmenu .g,.sugg .g{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.widget{position:fixed;top:64px;inset-inline-end:16px;bottom:auto;z-index:70}
.widget .fab{display:none!important;animation:none}
.widget .panel{position:static;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 88px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);padding:16px}
.widget .panel [data-help99]{max-height:none!important;overflow:visible!important}
.widget .panel h1,.widget .panel h2{font-size:16px;margin:0 0 8px}
.widget .panel h3{font-size:14px;margin:12px 0 4px}
.widget .panel p,.widget .panel li{font-size:13px}
.notif{background:var(--surface);border-color:var(--line);border-radius:12px;transition:none;transform:none}
.notif:hover{transform:none;border-color:var(--line-2);box-shadow:none}

.chat{background:var(--surface);border-color:var(--line)}
.msg{background:var(--surface-3)}
.msg.me{background:var(--primary-bg);color:var(--primary-ink)}
.msg.note{background:var(--pend-bg);color:var(--pend-ink)}
.preview,.tpl,.pcard,.lcard20{background:var(--surface);border-color:var(--line)}
.lcard20{border-radius:var(--r-card)}
.lcard20:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pcard:hover,.lcard20:hover{transform:none}
.code{background:#0b0f19;color:#e2e8f0}
html.dark .code,html.dark .payload{background:#05070c}
.imp,#demoBanner99,#pauseBanner{font-size:13px;padding:8px 24px}
.imp{background:var(--pend-bg);color:var(--pend-ink)}
.check-list .ck.done{background:#047857;border-color:#047857;color:#fff}
.pipe .st{border-color:var(--line)}
.pipe .st.done{border-color:var(--ok-line);background:var(--ok-soft)}
.pipe .st.bad{border-color:var(--bad-line);background:var(--bad-soft)}
.pipe .st.now{border-color:var(--accent);box-shadow:none;background:var(--accent-tint)}
.rdy .p{border-color:var(--line);background:var(--surface);color:var(--ink)}
.rdy .p.ok{border-color:var(--ok-line);background:var(--ok-soft)}
.rdy .p.bad{border-color:var(--bad-line);background:var(--bad-soft)}
.rdy .p.warn{border-color:var(--warn-line);background:var(--warn-soft)}
.rdy .p .n{font-size:12px;color:var(--muted)}
.ed .card.bad{border-color:var(--bad-line);background:var(--bad-soft)}
.blockbar{border-color:var(--bad-line);background:var(--bad-soft);color:var(--ink)}
.blockbar.ok{border-color:var(--ok-line);background:var(--ok-soft)}
.blockbar .bb-list a{color:var(--bad-ink);text-decoration:none;font-weight:500}
.blockbar .bb-list a:hover{text-decoration:underline}
.ed .secnav a{font-size:13px;color:var(--ink-2);border-radius:8px;min-height:32px}
.ed .secnav a.on{background:var(--accent-tint);color:var(--accent-ink)}
.ed .secnav .grp{font-size:11px;font-weight:600;letter-spacing:.06em}
.ed .sec h2{font-size:16px}
.ed .lk{font-size:11px}
.edhead{background:var(--canvas)}
.edhead h1{font-size:20px}
.locres{background:var(--surface);border-color:var(--line)}
.locres a.cur{background:var(--accent-tint);border-inline-start-color:var(--accent)}
.locres .divider{background:var(--surface-2)}
.imgs .im .pic .cov{background:#0b0f19;color:#fff;font-size:11px}
.imgs .im .pic .wm{font-size:11px;color:#0b0f19}
.statechip{gap:6px}
.auditstrip{background:var(--surface-2);border-color:var(--line)}
.login .demo button{background:var(--surface);border-color:var(--line)}

/* ---------- 18. Sign in, sign up, forgot password ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:var(--canvas)}
.login .left{background:var(--grad);color:#fff;padding:40px 48px;display:flex;flex-direction:column;gap:24px}
.login .left:before,.login .left:after{display:none}
.login .left .auth-hero{margin:auto 0;max-width:520px}
.login .left h1{font-size:28px;line-height:1.2;color:#fff;margin:0 0 12px;max-width:520px}
.login .left p{color:rgba(255,255,255,.75);font-size:16px;margin:0;max-width:480px}
.login .left .proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px;max-width:560px}
.login .left .proof div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 16px;font-size:12px;color:rgba(255,255,255,.75)}
.login .left .proof b{display:block;color:#fff;font-size:20px;font-weight:700}
.login .left .auth-foot{font-size:12px;color:rgba(255,255,255,.6)}
.login .left .auth-foot a{color:rgba(255,255,255,.8)}
.login .left .pl-word small{color:rgba(255,255,255,.6)}
.login .right{display:grid;place-items:center;padding:40px 24px;background:var(--canvas)}
.login .form-card{width:420px;max-width:100%}
.login .form-card h2{font-size:28px;font-weight:600;margin:0 0 4px}
.login .form-card > .muted,.login .form-card > p.muted{font-size:14px;margin:0 0 24px}
.login .form-card .btn.primary{width:100%;margin-top:4px}
.login .form-card h2 + .form,.login .form-card h2 + form{margin-top:16px}
.login .form-card .check{display:block;line-height:1.6;margin:4px 0}
.login .form-card .check input{margin-block:0 0;margin-inline:0 8px;vertical-align:-3px}
.login .form-card .check a{color:var(--accent);font-weight:600}
.login .form-card .note.danger{margin:0 0 4px}
.login .create{margin-top:16px;text-align:center}
.login .create a,.login a.back{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}
.login .create a:hover,.login a.back:hover{text-decoration:underline}
.login .form-card a.back{display:inline-flex;margin-bottom:16px}
.auth-brand{display:none;align-items:center;gap:10px;margin:0 0 24px;color:var(--ink)}
.auth-brand .pl-word small{color:var(--muted);font-size:14px;font-weight:400}
.auth-brand .pl-mark{width:36px;height:36px}.auth-brand .pl-word b{font-size:24px}
.login .left .pl-mark{width:34px;height:34px}.login .left .pl-word b{font-size:22px}
.login .left .auth-tag{font-size:14px;font-weight:400;color:rgba(255,255,255,.6);margin:0 0 12px}
.auth-legal{margin-top:24px;font-size:12px;color:var(--muted);text-align:center}
@media (min-width:1100px){.auth-legal{display:none}}
.auth-legal a{color:var(--muted)}

/* ---------- 19. Responsive shell. 900 and wider: the sidebar at --sidebar-w (src/screens/sidebar.js), html.side-c the 56px icon rail (the old 768-1099 icon rail styles).
   Below 900: the sidebar is a slide-in drawer from the top bar button. Below 768: the bottom bar too; its More opens the same drawer. ---------- */
@media (min-width:900px){
  .side-c .rail{padding:12px 4px;align-items:center}
  .side-c .rail-hd{flex-direction:column;gap:8px;width:100%;height:auto;padding-bottom:12px}
  .side-c .rail-hd .side-tg{order:0;margin:0;opacity:1}
  .side-c .brand .pl-word{display:none}
  .side-c .navgroup{width:32px;height:1px;margin:10px auto;padding:0;background:rgba(255,255,255,.12);font-size:0;color:transparent}
  .side-c .navgroup .navchev,.side-c .navgroup .navsum{display:none}
  .side-c .navsec.closed .navitems{display:block}
  .side-c button.navgroup{pointer-events:none;visibility:hidden;height:0;margin:0}
  .side-c .navsec::before{content:"";display:block;width:32px;height:1px;margin:10px auto;background:rgba(255,255,255,.12)}
  .side-c .rail .foot,.side-c .side-grip{display:none}
  .side-c .nav{width:100%}
  .side-c .nav a{justify-content:center;width:48px;height:44px;min-height:44px;margin:0 auto 2px;padding:0}
  .side-c .nav a .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .side-c .nav a .cnt{position:absolute;top:6px;inset-inline-end:6px;min-width:8px;width:8px;height:8px;padding:0;font-size:0;border:2px solid var(--rail)}
}
@media (max-width:899px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side-grip{display:none}
  .rail{position:fixed;inset-inline-start:0;top:0;bottom:0;width:min(300px,86vw);height:100%;z-index:48;transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s;box-shadow:var(--shadow-3)}
  .rail.open{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s}
  .topbar .side-tg{display:grid}
  .topbar .tb-mark{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
  .topbar .tb-mark .pl-word small{display:none}
  .topbar .tb-mark .pl-word b{font-size:18px}
  .topbar .tb-mark .pl-mark{width:26px;height:26px}
}
#mbar{display:none}
body:not(.authed) #mbar,body:not(.authed) .widget,body:not(.authed) .rail{display:none!important}
@media (max-width:1279px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1099px){
  .topbar{padding:0 16px}
  .topbar .cmd{min-width:0;width:38px;padding:0;justify-content:center}
  .topbar .cmd svg{display:block;width:16px;height:16px}
  .topbar .cmd span,.topbar .cmd kbd{display:none}
  .g2.g2-keep{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f2{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .login{grid-template-columns:1fr}
  .login .left{display:none}
  .auth-brand{display:flex}
}
@media (max-width:959px){
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .span2{grid-column:auto}
}
@media (max-width:767px){
  .app{grid-template-columns:minmax(0,1fr)}
  .topbar{height:56px;padding:0 12px;gap:6px}
  #helpBtn{display:none}
  .viewas{padding:8px 12px}
  .page{padding:16px 16px calc(80px + env(safe-area-inset-bottom))}
  .ph{gap:8px}
  .row{flex-wrap:wrap}
  td .row,.chip,.pill{flex-wrap:nowrap}
  .ph h1{font-size:20px}
  .btn{min-height:44px}
  .btn.sm,.btn.xs,.btn.icon{min-height:36px}
  .btn.link{min-height:0}
  input.q,.lbar20 .q,input[type=search]{min-width:0;width:100%}
  .tbl .bar-h > *{max-width:100%}
  .tbl .bar-h input.q{flex:1 1 100%}
  .nav a{min-height:48px;padding:0 12px;gap:12px;font-size:15px}
  #mbar{position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:47;display:flex;height:calc(56px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);background:var(--rail);border-top:1px solid rgba(255,255,255,.08)}
  #mbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:rgba(255,255,255,.7);font-size:11px;font-weight:600;text-align:center;cursor:pointer;text-decoration:none;position:relative}
  #mbar a.on,#mbar a[aria-current="page"],#mbar a[aria-expanded="true"]{color:#fff}
  #mbar a.on:after{content:"";position:absolute;top:0;inset-inline-start:30%;inset-inline-end:30%;height:2px;border-radius:2px;background:#AFA1C2}
  #mbar svg{width:20px;height:20px}
  #mbar .cnt{position:absolute;top:6px;inset-inline-start:calc(50% + 6px);min-width:16px;height:16px;font-size:11px;padding:0 4px;background:#361567;color:#fff}
  #toasts,.toasts{top:auto;bottom:calc(68px + env(safe-area-inset-bottom));inset-inline-end:12px;inset-inline-start:12px;width:auto}
  .widget{top:60px;inset-inline-end:8px;inset-inline-start:8px}
  .widget .panel{width:auto}
  .drawer,#drawer{width:100vw!important;border-inline-start:0}
  .drawer .dh,.drawer .db,.drawer .df{padding-inline-start:16px;padding-inline-end:16px}
  .modal{place-items:end center;padding:0}
  .modal .box,#modal .box{width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:92vh;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
  .health{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:20px 16px}
  .hero .stats{grid-template-columns:1fr 1fr}
  .login .right{place-items:start center;padding:24px 16px 32px}
  .login .form-card{width:100%}
  .kv{grid-template-columns:minmax(0,120px) minmax(0,1fr)}
  .kv span,.kv8 span,.kvp span,.mono{overflow-wrap:anywhere}
  .tabs{gap:20px;margin-bottom:16px}
  td{height:48px}
  .lsttbl .scrollx,.leadstbl .scrollx{max-height:none;overflow:visible}
  .lsttbl td.det .t,.lsttbl td.det .detline,.lsttbl td .s{white-space:normal;overflow-wrap:anywhere}
  .lsttbl td,.leadstbl td{min-width:0;max-width:100%}
  .evt,.docrow,.doc,.apimap .r,.scopegrid .r{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .evt > *,.docrow > *,.doc > *,.apimap .r > *,.scopegrid .r > *{min-width:0;overflow-wrap:anywhere}
  .metric{grid-template-columns:minmax(0,110px) minmax(0,1fr) auto}
  .timeline li,.tl li{grid-template-columns:minmax(0,1fr)}
  .ready,.rdy,.srad{grid-template-columns:minmax(0,1fr)}
  .card:not(.tight) > .tscroll{margin:0 -20px;width:calc(100% + 40px)}
  .popmenu{inset-inline-start:8px!important;inset-inline-end:8px!important;max-width:none}
  body.ed-full #mbar,body.ed-full .topbar{display:none}
}
@media (min-width:768px){#mbar{display:none!important}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.boot-splash{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--neu-ink);font-size:15px;background:var(--bg,#f6f7fb)}.boot-mark{width:40px;height:40px;display:grid;place-items:center;animation:bootpulse 1.2s ease-in-out infinite}.boot-mark svg{width:100%;height:100%}@keyframes bootpulse{50%{opacity:.55}}@media (prefers-reduced-motion:reduce){.boot-mark{animation:none}}
/* 29b: the module entry did not start the app (90-api.js showLoadFailure) */
.load-fail-box{max-width:420px;padding:28px;text-align:center}.load-fail-box h1{font-size:20px;margin:0 0 8px}.load-fail-box p{margin:0 0 18px;color:var(--muted)}
/* Owner decision 17 Oct 2026: one primary button everywhere, the navy to purple pill. Links and focus rings use brand-deep. Tray keeps its white button. */
.btn.primary:not(.tray .btn.primary){background:var(--primary-bg);border-color:transparent;color:var(--primary-ink);font-weight:600;border-radius:999px;box-shadow:none;}
.btn.primary:not(.tray .btn.primary):hover{background:var(--primary-hover);filter:none}
.btn.primary:not(.tray .btn.primary):disabled{opacity:.55;box-shadow:none;filter:none}
.login .create a,.login a.back{color:#361567}
.login .form-card input:focus{border-color:#361567;box-shadow:0 0 0 3px rgba(54,21,103,.15);outline:none}
.login .form-card input:-webkit-autofill,.login .form-card input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:var(--ink);transition:background-color 9999s}
/* A-026 (rc3 lane C2): text people typed (titles, names, deal lines) keeps its own direction in Arabic, so an English title is cut at its
   end, not its start, and figures stay in order; the line still lines up with the Arabic page. */
[dir="rtl"] :is(.tc-main>b,.tc-ev b,.tc-sub,.sx-name,.sx-tx,.sx-person b,.sx-plt,.rec-li .m b,.rec-li .m span,.rec-ch .v b,.b-wmain b,.iv-l1,.iv-l2,.rec-tasks .sx-task span){unicode-bidi:plaintext;text-align:match-parent}
/* A-028 (rc3 lane C2): dark theme. Owner avatars readable, project progress on the dark track, no bright photo placeholder, chips on a
   photo on a solid surface. Tokens only. */
html.dark .sx-av{background:var(--accent-tint-2);color:var(--accent-ink)}
html.dark .c-progress .t{background:var(--track)}
html.dark .c-progress .t i{background:var(--accent-fill)}
html.dark .lph20 img[src^="data:image/svg+xml"]{filter:brightness(.28) saturate(.6)}
html.dark .lph20 .chip{background:var(--surface);box-shadow:0 0 0 1px var(--line-2)}