/* ============================================================================
RoliOh "Friendly Bold" — the same design language as rolioh.com, adapted for a
dense operational UI. Every colour pair below is verified >= 4.5:1 (WCAG AA).
Note on coral: the brand coral #ff5c47 only reaches 3.06:1 against white text,
so it is used for DECORATION (focus rings, meters, rules, fills). Text-bearing
surfaces use --accent-btn / --accent-strong, which pass AA.
========================================================================== */
@font-face{font-family:'Fraunces';src:url(/fonts/fraunces-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(/fonts/inter-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(/fonts/inter-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
--bg:#FFF9F0; --surface:#FFFFFF; --surface-2:#FDF6EA; --border:#EADFD0;
--text:#231F1A; --muted:#5A534A; --faint:#6F675A;
--accent:#FF5C47; --accent-strong:#C0341F; --accent-btn:#D13A25; --accent-soft:#FFE9E5; --on-accent:#FFFFFF;
--good:#146B50; --good-soft:#BFE8D2; --warn:#8A5A00; --butter-soft:#FFF3D0; --butter-line:#F0DCA1; --bad:#A32218; --bad-soft:#FDEAE7; --info:#2B62A8; --info-soft:#CFE4FF;
--shadow:0 2px 4px rgba(35,31,26,.05),0 14px 34px -16px rgba(35,31,26,.20);
--r:18px; --r-sm:12px;
--display:'Fraunces',Georgia,'Times New Roman',serif;
--sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,monospace;
}
/* Warm dark — the brand's night mode. Kept because an operational tool gets
stared at for hours; the website is light-only but the app needs both. */
@media (prefers-color-scheme:dark){
:root{
--bg:#17130F; --surface:#211C17; --surface-2:#2A231D; --border:#3A3128;
--text:#F7EFE4; --muted:#C2B5A5; --faint:#9C8F7F;
--accent:#FF6F5C; --accent-strong:#FF8A7A; --accent-btn:#FF6F5C; --accent-soft:#3A221D; --on-accent:#2A0F0A;
--good:#4FC79A; --good-soft:#14342A; --warn:#E5B769; --butter-soft:#2D2414; --butter-line:#4A3D22; --bad:#FF9182; --bad-soft:#3A1D18; --info:#7FB2E8; --info-soft:#152A3F;
--shadow:0 2px 4px rgba(0,0,0,.35),0 16px 34px -16px rgba(0,0,0,.65);
}
}
:root[data-theme="light"]{--bg:#FFF9F0;--surface:#FFFFFF;--surface-2:#FDF6EA;--border:#EADFD0;--text:#231F1A;--muted:#5A534A;--faint:#6F675A;--accent:#FF5C47;--accent-strong:#C0341F;--accent-btn:#D13A25;--accent-soft:#FFE9E5;--on-accent:#FFFFFF;--good:#146B50;--good-soft:#BFE8D2;--warn:#8A5A00;--butter-soft:#FFF3D0;--butter-line:#F0DCA1;--bad:#A32218;--bad-soft:#FDEAE7;--info:#2B62A8;--info-soft:#CFE4FF;--shadow:0 2px 4px rgba(35,31,26,.05),0 14px 34px -16px rgba(35,31,26,.20)}
:root[data-theme="dark"]{--bg:#17130F;--surface:#211C17;--surface-2:#2A231D;--border:#3A3128;--text:#F7EFE4;--muted:#C2B5A5;--faint:#9C8F7F;--accent:#FF6F5C;--accent-strong:#FF8A7A;--accent-btn:#FF6F5C;--accent-soft:#3A221D;--on-accent:#2A0F0A;--good:#4FC79A;--good-soft:#14342A;--warn:#E5B769;--butter-soft:#2D2414;--butter-line:#4A3D22;--bad:#FF9182;--bad-soft:#3A1D18;--info:#7FB2E8;--info-soft:#152A3F;--shadow:0 2px 4px rgba(0,0,0,.35),0 16px 34px -16px rgba(0,0,0,.65)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* visible keyboard focus for all interactive elements */
a,button,input,select,textarea,[tabindex],.nav a,.acctmenu a,.method,.type,.steps .s,.switch,.acctbtn,tr.clk{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible,.method:focus-visible,.type:focus-visible,.nav a:focus-visible,.acctmenu a:focus-visible,.steps .s:focus-visible,.switch:focus-visible,.acctbtn:focus-visible,tr.clk:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hidden{display:none!important}
/* ---------- APP SHELL ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
@media (max-width:820px){.app{grid-template-columns:1fr}}
.side{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px;padding:18px 14px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
.logo{width:32px;height:32px;border-radius:11px;background:var(--accent-btn);color:var(--on-accent);display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:18px;box-shadow:var(--shadow)}
.brand b{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.2px}
.brand span{display:block;font-size:11px;color:var(--faint);letter-spacing:.3px}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.navlbl{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--faint);font-weight:700;padding:12px 11px 5px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);color:var(--muted);text-decoration:none;font-weight:500;cursor:pointer;font-size:14px}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.on{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
.nav a .i{width:18px;text-align:center;opacity:.9}
.nav a .tag{margin-left:auto;font-size:10px;font-weight:700;background:var(--bad);color:#fff;border-radius:99px;padding:1px 7px}
.side .foot{margin-top:auto;border-top:1px solid var(--border);padding-top:12px;display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.foot small{display:block;color:var(--faint);font-size:11px}
.foot .out{margin-left:auto;color:var(--faint);cursor:pointer;font-size:16px}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.top h1{margin:0;font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:-.3px}
.top .sub{color:var(--faint);font-size:12.5px;margin-top:1px}
.row{display:flex;align-items:center;gap:10px}
.btn{border:1.5px solid var(--border);background:var(--surface);color:var(--text);padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent-btn);color:var(--on-accent);border-color:transparent;box-shadow:0 8px 20px -6px color-mix(in srgb,var(--accent-btn) 55%,transparent)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,var(--border))}
.icon-btn{width:38px;height:38px;padding:0;justify-content:center}
.wrap{padding:26px 28px 70px;width:100%}
@media(min-width:1500px){.wrap{padding-left:40px;padding-right:40px}}
@media(min-width:2000px){.wrap{padding-left:56px;padding-right:56px}}
.view{display:none}.view.on{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.on,.auth-view.on{animation:none}}
.back{color:var(--faint);font-size:13px;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center;margin-bottom:14px}
.back:hover{color:var(--text)}
/* cards / tables */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.card h3{margin:0;padding:15px 18px;font-family:var(--display);font-weight:900;font-size:15px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card h3 a{font-size:12.5px;color:var(--accent-strong);font-weight:600;text-decoration:none;cursor:pointer}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);font-weight:600;padding:10px 18px;border-bottom:1px solid var(--border)}
td{padding:12px 18px;border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:0}
tbody tr{cursor:default}
tbody tr.clk{cursor:pointer}tbody tr.clk:hover{background:var(--surface-2)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;border:1px solid transparent;white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good);border-color:color-mix(in srgb,var(--good) 25%,transparent)}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.pill.mut{background:var(--surface-2);color:var(--muted);border-color:var(--border)}
/* Amber. The third status tone the pills were missing: good/bad alone cannot say "connected
but unproven" or "failing but not dead yet" (see src/senderhealth.js). Built on the existing
butter tokens so it is the same visual language, not a new one. */
.pill.warn{background:var(--butter-soft);color:var(--warn);border-color:var(--butter-line)}
.pill.gold{background:var(--accent-soft);color:var(--accent-strong);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.pill.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.kind{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.muted{color:var(--muted)}.faint{color:var(--faint)}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 16px 14px;box-shadow:var(--shadow)}
.tile .lab{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);font-weight:600}
.tile .big{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:30px;font-weight:900;letter-spacing:-.5px;margin-top:8px}
.tile .big small{font-size:14px;color:var(--faint);font-weight:500}
.meter{height:6px;border-radius:99px;background:var(--surface-2);margin-top:12px;overflow:hidden;border:1px solid var(--border)}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-strong))}
.meter i.g{background:linear-gradient(90deg,var(--good),color-mix(in srgb,var(--good) 70%,#000))}
.spark{display:flex;align-items:flex-end;gap:3px;height:30px;margin-top:12px}
.spark span{flex:1;background:var(--good);opacity:.8;border-radius:2px 2px 0 0}
.tile .delta{font-size:12px;color:var(--good);font-weight:600;margin-top:10px}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:20px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
/* inboxes */
.inbox{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border)}
.inbox:last-of-type{border-bottom:0}
.mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;flex:none}
.mark.g{background:#D9483B}.mark.o{background:#1F6FD6}
.inbox .em{font-weight:600;font-size:13.5px}
.inbox .me{font-size:11.5px;color:var(--faint)}
.cap{margin-left:auto;text-align:right}
.cap b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
.connect{display:flex;gap:8px;padding:14px 18px}
/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:2px}
.field label{font-size:12.5px;font-weight:600;color:var(--muted)}
.field .hint{font-size:11.5px;color:var(--faint)}
.field .req{color:var(--bad)}
.input,.inwrap{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
input.input,select.input{width:100%;padding:10px 12px;font:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
input.input:focus,select.input:focus,.inwrap:focus-within{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inwrap input{flex:1;border:0;background:transparent;padding:10px 12px;font:inherit;font-size:14px;color:var(--text);outline:none}
.inwrap .suf{padding:0 12px;color:var(--faint);font-size:13px;font-family:var(--mono);border-left:1px solid var(--border);align-self:stretch;display:flex;align-items:center;background:var(--surface-2)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.switch{width:38px;height:22px;border-radius:99px;background:var(--border);position:relative;cursor:pointer;flex:none;transition:background .15s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.switch.on{background:var(--good)}.switch.on::after{left:18px}
/* section header w/ number */
.sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.sec-h .n{width:24px;height:24px;border-radius:7px;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;font-size:12px;font-weight:800;font-family:var(--mono);flex:none}
.sec-h h2{font-family:var(--display);font-weight:900;font-size:16px;margin:0}
.sec-h p{margin:0;color:var(--faint);font-size:12.5px}
.step{margin-top:22px}
/* new campaign specifics */
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
@media (max-width:760px){.types{grid-template-columns:1fr}}
.type{border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r);padding:14px;cursor:pointer}
.type:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.type.sel{border-color:var(--accent);background:var(--accent-soft)}
.type b{font-size:14px}.type p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.type .tick{float:right;color:var(--accent-strong);font-weight:800;opacity:0}.type.sel .tick{opacity:1}
.drop{margin-top:12px;border:1.5px dashed color-mix(in srgb,var(--accent) 40%,var(--border));border-radius:var(--r);background:var(--surface-2);padding:22px;display:flex;align-items:center;gap:16px}
.drop .ic{width:44px;height:44px;border-radius:11px;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;font-size:20px;flex:none}
.drop b{font-size:14px}.drop p{margin:3px 0 0;font-size:12px;color:var(--muted)}.drop .btn{margin-left:auto}
.gridwrap{margin-top:14px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.gridwrap .bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:12.5px;color:var(--muted)}
@media(max-width:640px){.gridwrap .bar>.row{margin-left:0;width:100%}.gridwrap .bar>.row .btn{flex:1;justify-content:center}}
.gridscroll{overflow-x:auto}
table.sheet{font-size:13px;min-width:760px}
table.sheet th{background:var(--surface);position:sticky;top:0}
table.sheet td{padding:0;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
table.sheet td:last-child{border-right:0}
table.sheet .cell{padding:10px 12px;outline:none}
table.sheet .cell:focus{box-shadow:inset 0 0 0 2px var(--accent);border-radius:4px;background:var(--accent-soft)}
.offer{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--good)}
table.sheet .cell.src{position:relative;background:color-mix(in srgb,var(--accent) 9%,transparent)}
table.sheet .cell.src::after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
table.sheet .cell.dim{color:var(--faint)}
table.sheet td.selcol,table.sheet th.selcol{width:38px;text-align:center;padding:0}
.rowchk{width:18px;height:18px;cursor:pointer;accent-color:var(--accent);vertical-align:middle}
table.sheet td.selcol{min-height:44px}
table.sheet tr.selrow td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.addrow{padding:9px 14px;font-size:12.5px;color:var(--accent-strong);font-weight:600;cursor:pointer;background:var(--surface)}
.addrow:hover{background:var(--surface-2)}
.launch{position:sticky;bottom:0;margin-top:20px;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow);flex-wrap:wrap}
.launch .meta{font-size:12.5px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.launch .meta b{color:var(--text)}
.launch .sp{margin-left:auto}
.note{font-size:12px;color:var(--faint);margin-top:14px;display:flex;align-items:center;gap:7px}
/* filters */
.filters{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.filters button{border:1px solid var(--border);background:var(--surface);color:var(--muted);padding:9px 15px;border-radius:99px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:40px}
.filters button.on{background:var(--text);color:var(--bg);border-color:var(--text)}
/* campaign detail progress */
.prog{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-bottom:20px}
@media (max-width:760px){.prog{grid-template-columns:1fr}}
.prog .big{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:34px;font-weight:900;letter-spacing:-.5px}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.statgrid div{background:var(--surface);padding:14px 12px}
.statgrid .v{font-family:var(--mono);font-size:20px;font-weight:600}
.statgrid .l{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:2px}
/* settings preview */
.settings-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:18px;align-items:start}
@media (max-width:860px){.settings-grid{grid-template-columns:1fr}}
.preview .line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--border);font-size:13.5px}
.preview .line:last-child{border-bottom:0}
.preview .line b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.preview .grp{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-strong);font-weight:700;margin:14px 0 4px}
/* account menu */
.acct{margin-top:auto}
.acctbtn{display:flex;align-items:center;gap:10px;border-top:1px solid var(--border);padding:12px 6px 4px;cursor:pointer;border-radius:0}
.acctbtn:hover{background:var(--surface-2)}
.acctbtn .car{margin-left:auto;color:var(--faint);font-size:12px}
.acctmenu{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;margin-top:6px;display:none}
.acctmenu.on{display:block}
.acctmenu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);color:var(--text);font-size:13.5px;cursor:pointer;text-decoration:none}
.acctmenu a:hover{background:var(--surface-2)}
.acctmenu a .i{width:16px;text-align:center;opacity:.8}
.acctmenu .sep{height:1px;background:var(--border);margin:5px 4px}
/* connect hub */
.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.methods{grid-template-columns:1fr}}
.method{border:1px solid var(--border);background:var(--surface);border-radius:var(--r);padding:18px;cursor:pointer;box-shadow:var(--shadow)}
.method:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.method .mh{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.method b{font-size:15px}.method p{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.method .badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:99px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);margin-left:auto}
.callout{display:flex;gap:10px;background:var(--info-soft);border:1px solid color-mix(in srgb,var(--info) 25%,transparent);border-radius:var(--r-sm);padding:11px 13px;font-size:12.5px;color:var(--text)}
.callout .i{font-weight:800}
/* wizard */
.wiz{display:grid;grid-template-columns:236px 1fr;gap:22px;align-items:start}
@media (max-width:820px){.wiz{grid-template-columns:1fr}}
.steps{display:flex;flex-direction:column;gap:2px;position:sticky;top:90px}
.steps .s{display:flex;gap:11px;padding:10px;border-radius:var(--r-sm);cursor:pointer}
.steps .s:hover{background:var(--surface-2)}
.steps .s.on{background:var(--accent-soft)}
.steps .s .b{width:23px;height:23px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--mono);flex:none;color:var(--muted)}
.steps .s.on .b{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.steps .s.done .b{background:var(--good);border-color:var(--good);color:#fff}
.steps .s .t{font-size:13px;font-weight:600;line-height:1.3}.steps .s .t small{display:block;color:var(--faint);font-weight:500;font-size:11.5px}
.wcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.wpanel{display:none}.wpanel.on{display:block}
.wcard .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-strong);font-weight:700}
.wcard h2{margin:5px 0 5px;font-family:var(--display);font-weight:900;font-size:21px}
.wcard .lead{color:var(--muted);font-size:13.5px;margin:0 0 16px}
.olist{counter-reset:step;display:flex;flex-direction:column;gap:13px;margin:0;padding:0;list-style:none}
.olist li{position:relative;padding-left:34px;font-size:13.5px;line-height:1.5}
.olist li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;font-size:11px;font-weight:800;font-family:var(--mono)}
.olist li b{color:var(--text)} .olist code{font-family:var(--mono);font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:4px;border:1px solid var(--border);color:var(--accent-strong)}
.copybox{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 8px 8px 12px;margin-top:8px}
.copybox code{font-family:var(--mono);font-size:12.5px;flex:1;overflow-x:auto;white-space:nowrap;color:var(--accent-strong)}
.copybox button{border:0;background:var(--accent);color:var(--on-accent);border-radius:6px;padding:6px 11px;font-size:12px;font-weight:700;cursor:pointer}
.shot{border:1px dashed var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:var(--faint);font-size:12px;padding:24px;text-align:center;margin-top:14px}
.wnav{display:flex;justify-content:space-between;margin-top:22px;gap:10px}
/* onboarding checklist */
.onboard{background:var(--butter-soft);border:1px solid var(--butter-line);border-radius:var(--r);padding:20px 22px;margin-bottom:20px}
.onboard .oh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.onboard h3{margin:0;font-family:var(--display);font-weight:900;font-size:17px;border:0;padding:0}
.ck{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:13.5px;border-bottom:1px solid var(--butter-line)}
.ck:last-child{border-bottom:0}
.ck .cb{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border);display:grid;place-items:center;font-size:12px;flex:none;background:var(--surface)}
.ck.done .cb{background:var(--good);border-color:var(--good);color:#fff}
.ck.done .tx{color:var(--faint);text-decoration:line-through}
.ck .go{margin-left:auto}
/* ---------- AUTH ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media (max-width:840px){.auth{grid-template-columns:1fr}.auth .aside{display:none}}
.auth .aside{background:linear-gradient(160deg,#2A231D,#17130F);color:#F7EFE4;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth .aside::after{content:"";position:absolute;inset:auto -80px -120px auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%)}
.auth .aside .logo{width:38px;height:38px;font-size:19px}
.auth .aside h2{font-family:var(--display);font-size:34px;line-height:1.1;font-weight:900;letter-spacing:-.5px;margin:0 0 12px;max-width:420px;text-wrap:balance}
.auth .aside p{color:#C2B5A5;font-size:15px;max-width:400px;margin:0}
.auth .aside .pts{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.auth .aside .pts div{display:flex;gap:10px;align-items:center;font-size:14px;color:#E6DACA}
.auth .aside .pts .c{width:22px;height:22px;border-radius:6px;background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent-strong);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.auth .panel{display:grid;place-items:center;padding:40px 24px;background:var(--bg)}
.authcard{width:100%;max-width:380px}
.authcard .bhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.authcard h1{font-family:var(--display);font-weight:900;font-size:26px;margin:18px 0 6px;letter-spacing:-.4px}
.authcard .lede{color:var(--faint);font-size:13.5px;margin:0 0 22px}
.authcard .field{margin-bottom:14px}
.authcard .btn.primary{width:100%;justify-content:center;padding:11px}
.authlinks{margin-top:18px;font-size:13px;color:var(--muted);text-align:center}
.authlinks a{color:var(--accent-strong);font-weight:600;cursor:pointer;text-decoration:none}
.authlinks .sep{margin:0 8px;color:var(--border)}
.auth-view{display:none}.auth-view.on{display:grid;animation:fade .22s ease}
.success-ic{width:52px;height:52px;border-radius:14px;background:var(--good-soft);color:var(--good);display:grid;place-items:center;font-size:26px;margin-bottom:6px}
/* ===== RESPONSIVE ===== */
/* hamburger + drawer scrim are desktop-hidden by default */
#hamburger{display:none}
.navscrim{display:none}
/* keep 4-col tiles honest on tablet; !important beats the admin inline 3-col override */
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:820px){
/* --- mobile navigation drawer --- */
#hamburger{display:inline-flex}
.side{
position:fixed;top:0;left:0;z-index:60;
width:284px;max-width:86vw;height:100vh;height:100dvh;
transform:translateX(-100%);transition:transform .25s ease;
box-shadow:var(--shadow);overflow-y:auto;will-change:transform;
}
#shell.nav-open .side{transform:translateX(0)}
.navscrim{
display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.45);
opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
#shell.nav-open .navscrim{opacity:1;visibility:visible}
/* --- spacing & headings --- */
.wrap{padding:16px 16px 60px}
.top{padding:12px 16px;gap:10px;flex-wrap:wrap}
.top h1{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top>.row{min-width:0}
.wcard{padding:18px}
.wcard h2{font-size:17px}
/* --- reflow every multi-column layout to a single column --- */
.tiles{grid-template-columns:1fr!important}
.grid2{grid-template-columns:1fr}
.settings-grid{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.prog{grid-template-columns:1fr}
.statgrid{grid-template-columns:repeat(2,1fr)}
.types{grid-template-columns:1fr}
.methods{grid-template-columns:1fr}
/* --- wizard: stack, drop sticky, horizontal step rail --- */
.wiz{grid-template-columns:1fr}
.steps{position:static;top:auto;flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.steps .s{flex:0 0 auto}
.steps .s .t{white-space:nowrap}
/* --- drop stickiness of settings preview on mobile (inline style needs !important) --- */
.preview{position:static!important;top:auto!important}
/* --- comfortable touch targets --- */
.btn{min-height:40px}
.btn.sm{min-height:36px}
.icon-btn{width:40px;height:40px}
/* --- compact primary button label on very narrow screens --- */
.launch{gap:12px}
.launch .sp{margin-left:0;width:100%}
}
/* very narrow phones: icon-forward primary button */
@media (max-width:430px){
.btnlbl{display:none}
}
@media (prefers-reduced-motion:reduce){
.side{transition:none}
.navscrim{transition:none}
}
/* ============ create-campaign: modal, chips, filter row, pager ============ */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 60; }
.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: min(760px, 100%); max-height: 88vh; overflow: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; background: var(--surface); color: var(--muted); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.filterrow th { padding: 5px 6px; }
.filterrow input { width: 100%; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 9px 12px; border-top: 1px solid var(--border); font-size: 12.5px; }
.offsub { font-size: 11px; color: var(--faint); margin-top: 2px; white-space: nowrap; }
/* the offer sub-line sits under the editable cell, so it needs the cell's own gutter */
table.sheet td .offsub { padding: 0 12px 8px; }
/* Disc % only means anything for cash; Open loan only means anything for sub2's carryback math —
sellerFinance uses neither, so both hide. Classes go on the th/td themselves (no group). */
.sheet.type-sub2 .col-disc, .sheet.type-sellerFinance .col-disc { display: none; }
.sheet.type-cash .col-loan, .sheet.type-sellerFinance .col-loan { display: none; }
/* ============ create-campaign: row delete column (Task 9) ============ */
table.sheet td.delcol, table.sheet th.delcol { width: 34px; text-align: center; padding: 0; }
.rowdel { border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1; padding: 5px 7px; border-radius: 6px; }
.rowdel:hover { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
/* ============ create-campaign: Excel-style column filter dropdown ============ */
.th-in { display: inline-flex; align-items: center; gap: 4px; }
.th-lbl { }
.colcaret { border: 0; background: none; padding: 0; margin: 0; color: var(--faint); cursor: pointer; display: inline-flex; align-items: center; line-height: 0; }
.colcaret svg { display: block; }
.colcaret:hover { color: var(--text); } /* just the arrow darkens — no button box */
.colcaret.on { color: var(--accent); } /* column has an active filter */
.colcaret:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.th-sort { font-size: 10px; color: var(--accent); margin-left: 2px; } /* ↑/↓ on the sorted column */
.colmenu { position: absolute; z-index: 70; min-width: 220px; max-width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; color: var(--text); overflow: hidden; }
.colmenu .sortrow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; }
.colmenu .sortrow:hover { background: var(--surface-2); }
.colmenu .sep { height: 1px; background: var(--border); }
.colmenu .srch { padding: 8px 10px; }
.colmenu .srch input { width: 100%; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.colmenu .list { max-height: 240px; overflow-y: auto; padding: 2px 0; }
.colmenu label { display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.colmenu label:hover { background: var(--surface-2); }
.colmenu label span { overflow: hidden; text-overflow: ellipsis; }
.colmenu .cap { padding: 6px 12px; font-size: 11.5px; color: var(--faint); border-top: 1px solid var(--border); }
.colmenu .foot { display: flex; gap: 8px; justify-content: flex-end; padding: 9px 12px; border-top: 1px solid var(--border); }
/* ---- prose notes (appended) ----------------------------------------------------------- */
/* `.note` above is display:flex — built for a SHORT one-line icon+text note. Every text node and
inline inside a flex container becomes its own flex item on one non-wrapping row, so the
long grid-legend copy got squashed and unreadable (worst on narrow screens). All six .note
usages are prose, so restore normal inline text flow with a comfortable measure + line-height. */
.note { display: block; line-height: 1.55; }
.note .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; margin-right: 5px; }
.note .nb { white-space: nowrap; } /* keep button labels like "Apply to all" from breaking mid-phrase */
@media (max-width: 640px) { .note { font-size: 12.5px; line-height: 1.6; } }
/* ---- sent-message slide-over ------------------------------------------------
Opened from a sent/errored lead row on the campaign page. The email body itself
renders inside a sandboxed iframe, so nothing here can be styled by the email. */
.lead-row{cursor:pointer}
.lead-row:hover{background:var(--surface-2)}
.lead-row:focus-visible{outline:2px solid var(--accent-btn);outline-offset:-2px}
.lead-view{font-size:11.5px;font-weight:600;color:var(--accent-btn);opacity:0;margin-left:6px}
.lead-row:hover .lead-view,.lead-row:focus-visible .lead-view{opacity:1}
/* ---- sent-message slide-over ------------------------------------------------
Reads like a mail client: status + time, the subject as a headline, then the SENDING
ACCOUNT given top billing (it's the question this panel exists to answer), then the body
on its own surface. The body is a sandboxed iframe, so nothing here can be styled by the
email and nothing in the email can reach out.
The [hidden] rules MUST stay: the browser's built-in [hidden]{display:none} is a UA rule, so
any author rule that sets display (.msg-panel{display:flex}) beats it and the panel renders
as a permanently-open blank pane. */
.msg-panel[hidden],.msg-scrim[hidden]{display:none}
.lead-row{cursor:pointer}
.lead-row:hover{background:var(--surface-2)}
.lead-row:focus-visible{outline:2px solid var(--accent-btn);outline-offset:-2px}
.lead-view{font-size:11.5px;font-weight:600;color:var(--accent-btn);opacity:0;margin-left:6px}
.lead-row:hover .lead-view,.lead-row:focus-visible .lead-view{opacity:1}
/* The conversation link on a REPLIED lead row: ALWAYS visible, unlike the hover-revealed
.lead-view — a replied lead is the row you most want to open, and :hover never fires on
touch. foot.js's row handler ignores clicks that land on an anchor, so this navigates to
the thread instead of opening the "as sent" slide-over. */
.lead-convo{opacity:1;text-decoration:none}
.lead-convo:hover{text-decoration:underline}
.msg-scrim{position:fixed;inset:0;background:rgba(23,19,15,.5);backdrop-filter:blur(2px);z-index:60}
.msg-panel{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);z-index:61;
background:var(--surface);border-left:1px solid var(--border);
box-shadow:-24px 0 60px -30px rgba(0,0,0,.5);display:flex;flex-direction:column;
animation:msgIn .2s cubic-bezier(.22,.8,.3,1)}
@keyframes msgIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.msg-panel{animation:none}}
.msg-inner{display:flex;flex-direction:column;min-height:0;flex:1}
.msg-head{padding:16px 22px 18px;border-bottom:1px solid var(--border);background:var(--surface)}
.msg-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.msg-status{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;border:1px solid transparent}
.msg-status.is-ok{background:var(--good-soft);color:var(--good);border-color:var(--good-soft)}
.msg-status.is-bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-soft)}
.msg-status.is-mut{background:var(--surface-2);color:var(--faint);border-color:var(--border)}
.msg-when{font-size:12.5px;color:var(--faint);flex:1}
.msg-close{background:none;border:0;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;
width:32px;height:32px;border-radius:999px;display:grid;place-items:center;flex:none}
.msg-close:hover{background:var(--surface-2);color:var(--text)}
.msg-close:focus-visible{outline:2px solid var(--accent-btn);outline-offset:2px}
.msg-subject{margin:0 0 16px;font-family:var(--display),Georgia,serif;font-weight:900;
font-size:22px;line-height:1.25;letter-spacing:-.01em;color:var(--text);word-break:break-word}
.msg-from{display:flex;align-items:center;gap:11px}
.msg-avatar{width:36px;height:36px;flex:none;border-radius:999px;display:grid;place-items:center;
background:var(--accent-btn);color:var(--on-accent);font-weight:700;font-size:15px}
.msg-from-text{display:flex;flex-direction:column;min-width:0}
.msg-from-text b{font-size:13.5px;font-weight:600;color:var(--text);word-break:break-all}
.msg-sub{font-size:12px;color:var(--faint)}
.msg-to{display:flex;gap:8px;align-items:baseline;margin:10px 0 0;padding-left:47px;font-size:12.5px}
.msg-to span{color:var(--faint)}
.msg-to b{font-weight:500;color:var(--muted);word-break:break-all}
.msg-fail{margin:14px 0 0;padding:10px 12px;border-radius:var(--r-sm);font-size:12.5px;
background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad-soft)}
.msg-fail b{font-weight:700}
.msg-body{flex:1;min-height:0;overflow:auto;background:var(--surface-2)}
.msg-frame{width:100%;height:100%;min-height:440px;border:0;display:block;background:transparent}
.msg-note{padding:26px 22px;font-size:13.5px;color:var(--muted);line-height:1.65}
.msg-note b{color:var(--text)}
.msg-note p{margin:8px 0 0}
@media (max-width:640px){
.msg-head{padding:14px 16px 16px}
.msg-subject{font-size:19px}
.msg-to{padding-left:0}
}
/* ---- conversation inbox: list + thread ------------------------------------------------------
The list reuses table/.clk/.kind exactly like campaigns.ejs.
The thread is an EMAIL client, not a chat. It used to be iMessage-style bubbles (max-width:88%,
ours right / theirs left); this is a deal desk where people negotiate property offers, so the
conversation is now ONE continuous correspondence card: messages stacked full width, separated
by hairline rules, each headed by who sent it and when. Direction is carried by the sender name
("You"), a coral avatar and a coral rail down the left edge — never by which side it floats on.
Each body is still sandboxed exactly like the sent-message panel above — inbound HTML is never
trusted into the app's own DOM. */
.inbox-row.is-unread td{font-weight:700;color:var(--text)}
.unread-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle}
/* 760px keeps the body text at a readable measure once the 34px avatar gutter is taken out. */
.thread{max-width:760px}
/* Thread header. The SUBJECT is the title — it belongs to the conversation, not to each message —
and gets the one display-serif moment on the page, the same treatment as .msg-subject in the
sent-message slide-over. The counterparty sits under it as a participant strip. */
.thread-hd{margin:0 0 16px;max-width:760px}
.thread-title{margin:0;font-family:var(--display);font-weight:900;font-size:22px;line-height:1.25;
letter-spacing:-.01em;color:var(--text);word-break:break-word}
.thread-party{display:flex;align-items:center;gap:11px;margin-top:12px;min-width:0}
.thread-party-avatar{width:34px;height:34px;flex:none;border-radius:999px;display:grid;place-items:center;
background:var(--surface-2);border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--muted)}
.thread-party-text{display:flex;flex-direction:column;min-width:0}
.thread-party-text b{font-size:13.5px;font-weight:600;color:var(--text);word-break:break-word}
.thread-party-sub{font-size:12.5px;color:var(--faint);word-break:break-word}
.thread-party-sub a{color:var(--accent-strong);text-decoration:none;font-weight:600}
.thread-party-sub a:hover{text-decoration:underline}
/* The correspondence file: one card, messages divided by rules rather than floated apart. */
.thread-log{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
box-shadow:var(--shadow);overflow:hidden}
.thread-msg{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;
padding:18px 20px 20px;border-top:1px solid var(--border);border-left:3px solid transparent}
.thread-msg:first-child{border-top:0}
/* The one accent: a coral rail marks the messages YOU sent. Inbound keeps the same 3px so the two
stay in register, but leaves it transparent — a visible rail there would just read as a thicker
card border. */
.thread-msg.is-out{border-left-color:var(--accent)}
.thread-avatar{grid-column:1;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
font-size:12px;font-weight:700;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.thread-msg.is-out .thread-avatar{background:var(--accent-btn);border-color:transparent;color:var(--on-accent)}
.thread-meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;align-content:center;
gap:2px 9px;min-height:34px}
.thread-from{font-size:13.5px;font-weight:600;color:var(--text);word-break:break-word}
.thread-addr{font-size:12.5px;color:var(--faint);word-break:break-all;min-width:0}
.thread-time{margin-left:auto;font-size:12px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.thread-tags{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.auto-pill,.thread-chip{font-size:10.5px;padding:2px 8px}
.thread-subject{grid-column:2;margin-top:11px;font-size:13.5px;font-weight:600;color:var(--text);word-break:break-word}
.thread-body{grid-column:2;margin-top:10px}
/* No-JS frame sizing. The sandbox carries neither allow-scripts nor allow-same-origin, so nothing
— inside or outside — can measure the real body height; that is the security control, not an
oversight, and CSP (script-src 'self', no inline JS) rules out the usual auto-resize trick
anyway. So the height is fixed per direction: an outbound LOI is a full letter, an inbound reply
is usually a few lines. Anything longer scrolls inside its own frame. */
.thread-frame{width:100%;height:180px;border:0;display:block;background:transparent}
.thread-msg.is-out .thread-frame{height:440px}
.thread-text{font-size:13.5px;white-space:pre-wrap;line-height:1.6;color:var(--text);word-break:break-word}
.thread-note{font-size:13px;color:var(--muted);line-height:1.65}
.thread-note b{color:var(--text)}
.thread-empty{padding:30px 22px;text-align:center}
.thread-reply{max-width:760px;margin-top:16px}
@media (max-width:640px){
.thread-title{font-size:19px}
.thread-msg{padding:15px 15px 17px;column-gap:10px}
.thread-avatar,.thread-party-avatar{width:30px;height:30px;font-size:11px}
.thread-meta{min-height:30px}
.thread-time{margin-left:0;width:100%}
.thread-msg.is-out .thread-frame{height:380px}
}