/* Tokens. Spacing: Radix and Primer 4px base. Type: Carbon productive and Geist. Radii and controls: Primer and Carbon.
   Surfaces: Geist dark then Material's +5% steps. Borders: Radix gray 6/7/8. Text: Geist gray-1000 and gray-900, Apple tertiary.
   Crimson (--acc) is allowed on .btn.p, :focus-visible, the selected tab's underline, and overdue or warning marks
   (.late .nodm .err .ban.a .pill.a and the rail dot for overdue work). Nowhere else.
   Green (--live, Radix green 11 dark) means a call is live: the timer and the number being dialled. Nowhere else. */
:root{
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;
--ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
--t-body:14px/20px;--t-sec:13px/18px;--t-cap:12px/16px;--t-h1:24px/32px;--t-panel:20px/28px;--t-h2:16px/24px;--t-h3:14px/20px;--t-read:16px/24px;
--r1:6px;--r2:12px;--rf:9999px;
--c-s:28px;--c:32px;--c-tab:40px;--row:48px;--touch:44px;--ico:16px;--stick:96px;--bleed:32px;
--side:#000;--bg:#0a0a0a;--pan:#141414;--pan2:#1c1c1c;--over:#222;--hov:#1e1e1e;--cur:#262626;
--line:#262626;--line2:#3a3a3a;--line3:#4a4a4a;
--fg:#ededed;--mut:#a1a1a1;--dim:rgba(255,255,255,.5);
--acc:#D44051;--accT:#ff7a88;--accH:#e04c5d;--live:#3dd68c;
--side-w:240px;--rail-w:48px;--nav-h:32px;--pane-w:560px;--main-w:1280px;--crm-w:1600px;
color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:var(--t-body) var(--ff)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;color:inherit;text-align:inherit}
a{color:var(--fg)}
:focus-visible{outline:2px solid var(--accT);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:600}
h1:focus{outline:none}
h1{font:600 var(--t-h1) var(--ff);letter-spacing:-.01em}h2{font:600 var(--t-h2) var(--ff)}h3{font:600 var(--t-h3) var(--ff);margin-bottom:var(--s2)}
p{margin:0 0 var(--s2)}
.m{color:var(--mut);font:var(--t-sec) var(--ff)}
.mk{display:block;flex:none;height:auto;aspect-ratio:1000/1564}
/* The shell: the sidebar column follows the sidebar. Collapsed, both drop to the rail, so the main column takes the width back. */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.app.narrow{grid-template-columns:var(--rail-w) minmax(0,1fr)}
.side{background:var(--side);border-right:1px solid var(--line);padding:var(--s4) var(--s3);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
/* The lockup: the mark unchanged, the word set off it. The mark's viewBox is
   1000x1564, so its height is its width x 1.564, and the gap and the word are
   fractions of that height (10/32 and 21/32), which holds the lockup together
   at any size. Tracking -0.02em. */
.brand{--mkh:calc(var(--ico) * 1.564);display:flex;align-items:center;gap:calc(var(--mkh) * 10 / 32);padding:0 var(--s2) var(--s2);white-space:nowrap}
.brand .mk{width:var(--ico)}
.brand .lbl,.auth .brand span{font:600 calc(var(--mkh) * 21 / 32)/1 var(--ff);letter-spacing:-0.02em;color:var(--fg)}
.auth .brand{--mkh:calc(var(--c) * 1.564)}
.auth .brand .mk{width:var(--c)}
.brand .shut{display:none}
.grp{margin:var(--s6) var(--s2) var(--s2);font:600 var(--t-cap) var(--ff);color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.nav{list-style:none;margin:0;padding:0}
.nav li+li{margin-top:var(--s1)}
.nav a{display:flex;align-items:center;gap:var(--s3);height:var(--nav-h);padding:0 var(--s2);border-radius:var(--r1);color:var(--mut);text-decoration:none}
.nav a:hover{background:var(--hov);color:var(--fg)}
.nav a[aria-current=page]{background:var(--cur);color:var(--fg);font-weight:500}
.nav .n{margin-left:auto;font:600 var(--t-cap) var(--ff);line-height:20px;color:var(--mut);background:var(--over);border-radius:var(--rf);padding:0 var(--s2);min-width:var(--s6);text-align:center}
/* flex-wrap: the name and work address keep the first row, and Sign out drops under them, right-aligned, instead of being pushed past the sidebar's edge. */
.me{margin-top:auto;position:sticky;bottom:0;background:var(--side);padding:var(--s3) var(--s2) 0;border-top:1px solid var(--line);font:var(--t-sec) var(--ff);color:var(--mut);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.me .av{width:var(--c);height:var(--c);border-radius:var(--rf);background:var(--over);display:grid;place-items:center;font-weight:600;color:var(--fg);flex:none}
.me .who{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.me b{color:var(--fg);font-weight:600}
.tb{display:none}
/* The main column fills its grid column and centres its content by padding (Stripe): each side gets
   (column - cap) / 2, never under 32px. The column is 100vw minus the sidebar, so .top can use the
   same number and its edge-to-edge bleed still lines up with the content under it.
   No auto margins here: they turn the item from stretch to fit-content, and a wide CRM table then
   pushes the whole page sideways instead of scrolling inside .tw.
   The cap: 1280px for reading screens (the widest pair, .hm at 1fr + 340px, keeps its text column
   near 900px), 1600px for the CRM table with its pinned first and last columns. */
.main{--sw:var(--side-w);--cw:var(--main-w);--pad:max(var(--s8),calc((100vw - var(--sw) - var(--cw)) / 2));min-width:0;padding:var(--s6) var(--pad) calc(var(--s12) + var(--s4))}
.main.crm{--cw:var(--crm-w)}
.app.narrow .main{--sw:var(--rail-w)}
/* The header: one 32px row (back, title, spacer, secondary buttons, one primary), a facts-only sub line, then any tab row, all in one sticky block with a hairline under it.
   It spans the content column only (Stripe): no side bleed, so its hairline stops at the gutter and never runs into the sidebar. 32px of air under it. */
.top{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line);margin:calc(-1 * var(--s6)) 0 var(--s8);padding:var(--s4) 0}
.top:has(.tabrow){padding-bottom:0}
.toprow{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;min-height:var(--c)}
.top .back{height:var(--c);padding:0 var(--s2);border:0;background:none;box-shadow:none;color:var(--mut);margin-left:calc(-1 * var(--s2))}
.top .back:hover{color:var(--fg);background:var(--hov)}
.tsub{margin:var(--s1) 0 0;color:var(--mut);font:var(--t-sec) var(--ff);max-width:72ch}
.top .tabrow{margin:var(--s2) 0 0;border-bottom:0}
.sp{flex:1}
/* Spacing utilities: the only margins a screen sets by hand, all on the scale. */
.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}.mt6{margin-top:var(--s6)}
.mb2{margin-bottom:var(--s2)}.mb3{margin-bottom:var(--s3)}.mb4{margin-bottom:var(--s4)}.ml6{margin-left:var(--s6)}
p:last-child{margin-bottom:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:var(--c);padding:0 var(--s3);border:1px solid var(--line2);border-radius:var(--r1);color:var(--fg);background:var(--pan2);white-space:nowrap;text-decoration:none;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.btn:hover{background:var(--hov);border-color:var(--line3)}
.btn.s{height:var(--c-s);padding:0 var(--s2);font:var(--t-sec) var(--ff);line-height:1}
.btn.p{background:var(--acc);border-color:var(--acc);color:var(--fg);font-weight:600}
.btn.p:hover{background:var(--accH)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.lnk{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);font-weight:500}
.lnk:hover{text-decoration-color:var(--fg)}
input,select,textarea{background:var(--pan2);border:1px solid var(--line2);border-radius:var(--r1);color:var(--fg);height:var(--c);padding:0 var(--s3);max-width:100%}
input::placeholder{color:var(--dim)}
textarea{height:auto;padding:var(--s2) var(--s3);min-height:88px;resize:vertical;width:100%}
label.f{display:block;font:var(--t-sec) var(--ff);color:var(--mut);margin-bottom:var(--s1)}
.fld{margin-bottom:var(--s4)}
.fld input,.fld select{width:100%}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.tabrow{display:flex;gap:var(--s2) var(--s4);align-items:flex-end;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
/* One row that scrolls sideways at one height: no scrollbar to add its own, a fade at the trailing edge where a tab is cut
   (Linear, Notion), and 32px of end padding so the last tab clears the fade once scrolled to. Nothing wraps. */
/* The strip fades on whichever side is cut, and only that side, so the fade says
   "there is more this way" rather than decorating an edge that has nothing past
   it. main.js adds .cutl and .cutr as it scrolls. Brayden: "make the left side
   blur too, so both sides are consistent... once you're all the way to one side
   or the other, it stops on that side." */
.tabs{display:flex;gap:var(--s1);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;flex:1 1 100%;min-width:0;padding:0 var(--bleed);margin:0 calc(-1 * var(--bleed));scrollbar-width:none}
.tabs.cutr{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--bleed)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--bleed)),transparent)}
.tabs.cutl{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--bleed)),transparent);mask-image:linear-gradient(to left,#000 calc(100% - var(--bleed)),transparent)}
.tabs.cutl.cutr{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--bleed),#000 calc(100% - var(--bleed)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--bleed),#000 calc(100% - var(--bleed)),transparent)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;height:var(--c-tab);padding:0 var(--s3);color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap;display:flex;gap:var(--s2);align-items:center}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-selected=true]{color:var(--fg);border-bottom-color:var(--acc);font-weight:600}
.tabs .n{font:var(--t-cap) var(--ff);line-height:18px;background:var(--pan2);border-radius:var(--rf);padding:0 var(--s2);color:var(--mut)}
.tabs button[aria-selected=true] .n{color:var(--fg);background:var(--cur)}
.tabs .n.z{color:var(--dim);background:var(--pan)}
/* The CRM's tab groups: the label (SELLING, CLOSING) sits on the row beside its tabs, so the row is the 40px every other tab row is. An unlabelled group shows no gap. */
.tg{flex:none;display:flex;align-items:center}
.tg+.tg{margin-left:var(--s1);padding-left:var(--s1);border-left:1px solid var(--line)}
.tgt{height:var(--c-tab);padding:0 var(--s3) 0 var(--s2);font:600 var(--t-cap) var(--ff);line-height:var(--c-tab);color:var(--dim);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.tgt:empty{display:none}
.tgb{display:flex;gap:var(--s1)}
.acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
/* CRM rows: the quick actions stay on one line, two buttons at most (crm.js ACTS). Phones (below) let them wrap inside the card. */
.crm .acts{flex-wrap:nowrap;gap:var(--s1)}
.crm .acts .btn{padding:0 var(--s2)}
.dlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - var(--s8)));max-height:calc(100vh - var(--s8));overflow:auto;background:var(--over);border:1px solid var(--line2);border-radius:var(--r2);padding:var(--s6);z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.dlg.wide{width:min(780px,calc(100vw - var(--s8)))}
.dlg h2{margin-bottom:var(--s2)}.dlg h2:focus{outline:none}
.dlg tbody tr{cursor:default}.dlg tbody tr:hover{background:none}
.dlg td,.dlg th{height:auto}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;max-width:100%}
.chip{height:var(--c-s);padding:0 var(--s3);background:var(--pan2);border:1px solid var(--line2);border-radius:var(--rf);font:var(--t-sec) var(--ff);color:var(--fg);white-space:nowrap}
.chip:hover{background:var(--hov);border-color:var(--line3)}
.chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}
/* The CRM toolbar: one 48px row, every control on one baseline, nothing wrapping down to 900px (below that, the phone stacking). The search gives way first. */
.bar{display:flex;gap:var(--s2);align-items:center;flex-wrap:nowrap;height:var(--row);margin-bottom:var(--s6)}
.bar>*{flex:none}
.bar input[type=search]{flex:0 1 220px;min-width:var(--s12)}
.bar .chip{height:var(--c)}
.bar .row{flex-wrap:nowrap;white-space:nowrap}
.bar .cnt{color:var(--mut);margin-left:auto;white-space:nowrap}
/* The batch bar takes the toolbar's place (Salesforce, HubSpot): the toolbar goes while rows are ticked, so the table stays put. */
.bar:has(+.selbar){display:none}
.selbar{background:var(--cur);border-radius:var(--r1);padding:0 var(--s3)}
.selbar .btn.s{height:var(--c)}
.crm th.ck,.crm td.ck{width:var(--s6);padding-right:0}
/* position:relative keeps the hidden Actions label (.vh, absolute) inside the box. Loose, it sat past the right edge of a wide table and widened the page. */
.tw{overflow-x:auto;position:relative;border:1px solid var(--line);border-radius:var(--r2);background:var(--pan)}
table{width:100%;border-collapse:collapse}
/* Cells wrap. A value that must stay on one line says so with .nw. */
th,td{text-align:left;padding:var(--s2) var(--s3);height:var(--row);border-bottom:1px solid var(--line);vertical-align:middle}
th{font:500 var(--t-sec) var(--ff);color:var(--mut);height:var(--c-tab)}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--hov)}
tr.on{background:var(--cur)}
td .m{display:block;font:var(--t-cap) var(--ff)}
td.wrap{max-width:340px}
.crm th,.crm td{padding:var(--s2)}
.crm th,.crm td{white-space:normal}
/* Scrolling sideways, you keep who the lead is and what you can do about them.
   Brayden: "you have to scroll right and left to see the entire data and the
   buttons on the other side." So the tick box and the business name pin to the
   left edge, the quick actions pin to the right, and only the middle moves.
   separate borders because a collapsed border does not travel with a sticky cell. */
table.crm{border-collapse:separate;border-spacing:0;min-width:100%}
.crm tr{background:var(--pan)}
.crm tbody tr:hover{background:var(--hov)}
.crm tr.on{background:var(--cur)}
.crm th.ck,.crm td.ck,.crm th.pin,.crm td.pin,.crm th.qa,.crm td.qa{position:sticky;z-index:2;background:inherit}
.crm th.ck,.crm td.ck{left:0}
.crm th.pin,.crm td.pin{left:var(--s6);min-width:160px}
.crm th.qa,.crm td.qa{right:0;white-space:nowrap}
.crm th.pin,.crm td.pin{box-shadow:1px 0 0 var(--line)}
.crm th.qa,.crm td.qa{box-shadow:-1px 0 0 var(--line)}
.crm td.wrap{min-width:0;max-width:none}
.crm td.brk{overflow-wrap:anywhere}
.crm td.em{overflow-wrap:normal;word-break:normal}
/* Above the phone cards: a row is 48px with 16px cell padding and one line per cell (Linear, Attio, Close). A cell that
   can run long (.cut, crm.js COL) cuts with an ellipsis and carries the whole value in its title; a number or a date
   (.num) aligns right. The city, whose lead it is and the links follow the name on its line, in the caption size. */
@media(min-width:641px){
 .crm th,.crm td{padding:0 var(--s4);white-space:nowrap}
 .crm th.ck,.crm td.ck{width:var(--s12);padding:0 var(--s4)}
 .crm th.pin,.crm td.pin{left:var(--s12)}
 .crm td.cut{overflow:hidden;text-overflow:ellipsis;max-width:240px}
 .crm td.wrap{max-width:340px}
 .crm td.pin{max-width:360px}
 .crm td.em .lnk{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
 /* <wbr> still breaks a line inside white-space:nowrap, so an email column split
    over three lines and made every row 61px. The title carries the whole address. */
 .crm td.cut wbr{display:none}
 .crm th.num,.crm td.num{text-align:right;font-variant-numeric:tabular-nums}
 .crm td .m:not(.q){display:inline;margin:0}
 .crm td .m:not(.q)::before{content:" "}
 /* The primary column is the exception: two lines, each cut on its own. */
 .crm td.pin{padding-top:var(--s2);padding-bottom:var(--s2)}
 .crm td.pin>b,.crm td.pin>.m{display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .crm td.pin>.m{margin:0}
 .crm td.pin>.m::before{content:none}
}
.crm b{font-weight:600}
/* The phone list's two pieces (crm.js renders them only when dials() is true): the why line under the name and the round dial button. Shown under 640px only, so a tablet's table stays two lines. */
.crm .ph,.crm .dial{display:none}
.nw{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* One empty state everywhere: a grey line that starts with "No". */
.emp{color:var(--mut);margin:0;padding:var(--s3) 0 0}
.late{color:var(--accT);font-weight:600}
.nodm{color:var(--accT)}
.q{display:inline-flex;align-items:center;gap:var(--s2);border-radius:var(--r1);padding:var(--s1);margin:calc(-1 * var(--s1))}
.q:hover{background:var(--hov)}
.q i{width:var(--s2);height:var(--s2);border-radius:var(--rf);background:var(--fg);display:inline-block}
.q.m{display:inline-flex;color:inherit;font:inherit}
.q.m i{background:var(--mut)}.q.l i{background:var(--line2);border:1px solid var(--line3)}
.q .qi{font:var(--t-cap) var(--ff);width:var(--s4);height:var(--s4);border:1px solid var(--line2);border-radius:var(--rf);display:inline-grid;place-items:center;color:var(--mut)}
.qleg{position:fixed;right:var(--s6);bottom:calc(var(--s12) + var(--s2));width:min(380px,calc(100vw - var(--s8)));background:var(--over);border:1px solid var(--line2);border-radius:var(--r2);padding:var(--s4);z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.qleg dl{margin:var(--s3) 0 0}.qleg dt{font-weight:600;margin-top:var(--s2)}.qleg dd{margin:var(--s1) 0 0;color:var(--mut)}
.pill{font:var(--t-cap) var(--ff);line-height:20px;background:var(--pan2);border-radius:var(--rf);padding:0 var(--s2);color:var(--fg);white-space:nowrap}
/* One pill style per meaning: plain for a status, .a (crimson) for Do not contact, .new for a new resource, .d for a draft label. */
.pill.a{background:none;border:1px solid var(--acc);color:var(--accT)}
.pill.new{background:var(--fg);color:var(--bg);font-weight:600}
.pill.d{background:none;border:1px solid var(--line2);color:var(--mut)}
/* A lead's links: Site · Ad · Competitor, under the business name. */
td .lk{display:block;font:var(--t-cap) var(--ff);margin-top:var(--s1)}
/* In-place editing on the lead: a value is a button; click it and it becomes the input. */
.ed{display:block;width:100%;text-align:left;border-radius:var(--r1);padding:var(--s1) var(--s2);margin:calc(-1 * var(--s1)) calc(-1 * var(--s2));cursor:text;overflow-wrap:anywhere}
.ed:hover{background:var(--hov)}
.ed:hover::after{content:" Edit";color:var(--dim);font:var(--t-cap) var(--ff)}
.dl input,.dl select{width:100%;height:var(--c)}
.dl textarea{min-height:72px}
/* Panels: 24px inside, 32px between sections, 16px under a panel's own heading (Stripe's card rhythm). */
.pnl,.pnl2{background:var(--pan);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s6);margin-bottom:var(--s8)}
.pnl>h2,.pnl2>h2{margin-bottom:var(--s4)}
/* Home: the work list left, a 340px rail (Today, Dates to quote, New resources) right, from 1100px up. Under that the rail drops below the list. */
.hm{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s8);align-items:start}
/* A group's heading row: the count is a 44px button that opens the group's screen (where See all goes), the title beside it, See all at the end. */
.hgh{display:flex;align-items:center;gap:var(--s3);min-height:var(--touch)}
.hgh>h2,.hgt{flex:1;min-width:0}
.hgh .lnk{font:var(--t-sec) var(--ff)}
.big{font:600 var(--t-h1) var(--ff);font-variant-numeric:tabular-nums;min-width:var(--touch)}
button.big{height:var(--touch);padding:0 var(--s2);border:1px solid var(--line2);border-radius:var(--r1);background:var(--pan2);text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.4)}
button.big:hover{background:var(--hov);border-color:var(--line3)}
.hgt .sub{display:block;color:var(--mut);font:var(--t-sec) var(--ff)}
.hgb{margin-top:var(--s3);border-top:1px solid var(--line)}
.hgb .dlh{margin-top:var(--s3)}
.lr{display:flex;gap:var(--s3);align-items:center;width:100%;text-align:left;padding:var(--s2) 0;border-bottom:1px solid var(--line);min-height:var(--row)}
.lr:last-child{border-bottom:0}
button.lr:hover b,button.lt:hover b{text-decoration:underline;text-underline-offset:3px}
.lt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
/* The follow-ups' Call and Log: the CRM row's two small buttons, on one line, at the end. */
.lr .acts{flex:none;flex-wrap:nowrap;gap:var(--s1)}
.why{color:var(--mut);font:var(--t-sec) var(--ff)}
/* The rail's panels: 24px inside, 32px between, and the list ends on the panel's padding, not on its own gap. */
.tl{list-style:none;margin:var(--s3) 0 0 var(--s2);padding:0;border-left:2px solid var(--line)}
.tl li{position:relative;padding:0 0 var(--s4) var(--s4)}
.tl li:last-child{padding-bottom:0}
.pnl .list+.btn{margin-top:var(--s3)}
.tl li::before{content:"";position:absolute;left:calc(-1 * var(--s3) / 2 - 1px);top:var(--s1);width:var(--s3);height:var(--s3);border-radius:var(--rf);background:var(--pan);border:2px solid var(--line3)}
.tl .tt{font:var(--t-sec) var(--ff);color:var(--mut);display:block}
.tl .tc{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.tile{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left}
.tile:hover .tl2{text-decoration:underline;text-underline-offset:3px}
.tiles{display:flex;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s8)}
.tiles .pnl{flex:1;min-width:160px;margin:0}
.tiles .l{color:var(--mut);font:var(--t-sec) var(--ff)}
.tiles .v{font:600 var(--t-h1) var(--ff);margin-top:var(--s1);font-variant-numeric:tabular-nums}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line);min-height:var(--row);flex-wrap:wrap}
.list li:first-child{border-top:0}
.list .t{flex:1 1 160px;min-width:0}
.g2,.g2e{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s8);align-items:start}
.g2e{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.scr{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;z-index:29}
.scr.on{display:block}.scr.m{z-index:39}
.dr{position:fixed;top:0;right:0;bottom:0;width:min(720px,100%);background:var(--pan);border-left:1px solid var(--line2);z-index:30;overflow-y:auto;overflow-x:hidden;display:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.dr.on{display:block}
.drh{position:sticky;top:0;background:var(--pan);border-bottom:1px solid var(--line);padding:var(--s2) var(--s6) 0;z-index:2}
.drh h1{font:600 var(--t-panel) var(--ff)}
.drh .row{margin-bottom:var(--s2);gap:var(--s2)}
.drh .tabs{border:0;margin:0}
.drh .tabs button{height:var(--c-tab)}
.drb{padding:var(--s6) var(--s6) calc(var(--s12) + var(--s4))}
.dr .g2{grid-template-columns:1fr}
/* The lead's fields in three groups: Contact, Calling, Deal. */
.dlh{font:600 var(--t-cap) var(--ff);color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin:var(--s4) 0 var(--s2)}
.dlh:first-of-type{margin-top:0}
/* CRM at 1440px and wider: the lead is a pane beside the table, no scrim, the table narrows and stays live. The footer holds the actions. Under 1440px, and everywhere else, .dr is the drawer. */
/* flex:none on the buttons, or they shrink past their label and clip instead of wrapping to a second row. */
.drf{position:sticky;bottom:0;z-index:2;background:var(--pan);border-top:1px solid var(--line);padding:var(--s3) var(--s6);display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.drf>*{flex:none;max-width:100%}
@media(min-width:1440px){
.app.beside .main.crm{--pad:max(var(--s8),calc((100vw - var(--sw) - var(--pane-w) - var(--cw)) / 2));padding-right:calc(var(--pane-w) + var(--pad))}
.app.beside~.scr{display:none}
.app.beside~.dr{width:var(--pane-w);box-shadow:none}
.app.beside~.dr.on{display:flex;flex-direction:column}
.app.beside~.dr .drb{flex:1 0 auto;padding-bottom:var(--s6)}
}
.dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s2) var(--s3);margin:0}
.dl dt{color:var(--mut)}.dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
/* Crimson means something needs you: overdue, late, missing, refused. Plain notices stay grey; .ban.a is the one that needs action. */
.goal{border-left:3px solid var(--fg);background:var(--pan);border-radius:0 var(--r2) var(--r2) 0;padding:var(--s3) var(--s4);margin-bottom:var(--s6)}
.ban{background:var(--pan);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4);margin-bottom:var(--s6)}
.ban.a{border-color:var(--acc)}
.ew{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--s8);align-items:start}
.cl{background:var(--pan);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.cl .fb{padding:var(--s3);border-bottom:1px solid var(--line)}
.cl .fb input{width:100%}
.cl button.c{display:block;width:100%;text-align:left;padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.cl button.c:first-of-type{border-top:0}
.cl button.c:hover{background:var(--hov)}
.cl button.c[aria-current=true]{background:var(--cur)}
.cl .s{font-weight:600;display:flex;gap:var(--s2);align-items:center}
.cl .un .s::before{content:"";width:var(--s2);height:var(--s2);border-radius:var(--rf);background:var(--fg);flex:none}
.cl .p{color:var(--mut);font:var(--t-sec) var(--ff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg{background:var(--pan);border:1px solid var(--line);border-radius:var(--r2);margin-bottom:var(--s4)}
.msg .mh{display:flex;gap:var(--s2);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);font:var(--t-sec) var(--ff);color:var(--mut);flex-wrap:wrap}
.msg .mh b{color:var(--fg);font-weight:600}
.msg .mb{padding:var(--s4);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.un .mh b::before{content:"";display:inline-block;width:var(--s2);height:var(--s2);border-radius:var(--rf);background:var(--fg);margin-right:var(--s2);vertical-align:middle}
.msg.hl{border-color:var(--line2)}
.tpl{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--pan2)}
.tpl .th{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--s2);font-weight:600}
.tpl .th .mk{width:var(--s3)}
.tpl .fx{padding:var(--s2) var(--s4);color:var(--dim);white-space:pre-wrap}
.tpl textarea{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;min-height:128px}
.player{aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--r2);display:grid;place-items:center;background:var(--side);margin-bottom:var(--s3)}
.player svg{width:var(--s12);height:var(--s12)}
.vl button.v{display:flex;gap:var(--s3);align-items:center;width:100%;text-align:left;padding:var(--s2) var(--s3);border-top:1px solid var(--line);min-height:var(--row)}
.vl button.v:first-child{border-top:0}
.vl button.v:hover{background:var(--hov)}
.vl button.v[aria-current=true]{background:var(--cur)}
.vl .num{color:var(--dim);width:var(--s6)}
.vl .t{flex:1}
.ok{color:var(--fg);font-weight:600}
.toast{position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%);background:var(--over);border:1px solid var(--line2);border-radius:var(--r2);padding:var(--s2) var(--s4);z-index:70;display:none;box-shadow:0 8px 24px rgba(0,0,0,.5);max-width:calc(100vw - var(--s8))}
.toast.on{display:block}
.mark{position:fixed;right:var(--s3);bottom:var(--s2);font:var(--t-cap) var(--ff);color:var(--dim);border:1px solid var(--line);border-radius:var(--r1);padding:0 var(--s2);background:var(--pan);z-index:25}
.pre{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);white-space:pre-wrap;max-height:420px;overflow:auto;background:var(--pan2)}
.tot{display:flex;justify-content:space-between;padding:var(--s2) 0;border-top:1px solid var(--line)}
.tot.b{font:600 var(--t-h2) var(--ff)}
.chk{display:flex;gap:var(--s2);align-items:center;min-height:var(--c-tab);cursor:pointer}
.chk .pr{margin-left:auto;color:var(--mut);font:var(--t-sec) var(--ff)}
input[type=checkbox],input[type=radio]{width:var(--ico);height:var(--ico);padding:0;margin:0;accent-color:var(--fg)}
@media(min-width:761px) and (max-height:760px){.brand{padding-bottom:var(--s1)}.grp{margin-top:var(--s3)}.nav li+li{margin-top:0}.me{padding-top:var(--s2)}}
@media(max-width:1100px){.hm{grid-template-columns:1fr}.ew{grid-template-columns:280px minmax(0,1fr)}}
@media(max-width:900px){.g2,.g2e,.ew{grid-template-columns:1fr}.bar{height:auto;min-height:var(--row);flex-wrap:wrap}.selbar{padding:var(--s2) var(--s3)}}
@media(max-width:760px){
 .app{display:block}
 .tb{display:flex;align-items:center;gap:var(--s2);position:sticky;top:0;z-index:20;background:var(--side);border-bottom:1px solid var(--line);padding:0 var(--s4);height:var(--s12)}
 .tb .mk{width:var(--ico)}
 .tb .tbn{font-weight:600}
 .side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);height:auto;z-index:40;transform:translateX(-102%);visibility:hidden;transition:transform .18s}
 .side.open{transform:none;visibility:visible;border-right:1px solid var(--line2)}
 /* Close menu was being pushed past the sidebar's edge: it and the collapse
    chevron both took margin-left:auto inside a nowrap row. The chevron means
    nothing when the menu slides over the page, so it goes, and Close menu keeps
    the padding it needs. Brayden: "the close menu button gets cut off". */
 .side .brand .narrow{display:none}
 .brand{padding:0 var(--s2) var(--s3);gap:var(--s2);min-width:0}
 .brand .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .brand .shut{display:inline-flex;flex:none;margin-left:var(--s2)}
 /* The Menu button sits on the black bar: no lifted-control shadow, a full
    touch target, and the same hairline the bar uses. */
 .tb .btn{min-height:var(--touch);height:auto;box-shadow:none;background:none;border-color:var(--line2)}
 .tb .btn:hover{background:var(--hov)}
 .tbhome{display:inline-flex;align-items:center;justify-content:center;width:var(--touch);height:var(--touch);margin-left:calc(-1 * var(--s2));border-radius:var(--r1)}
 .tbhome:hover{background:var(--hov)}
 .main{--pad:var(--s4);--bleed:var(--s4);padding:var(--s4) var(--pad) calc(var(--s12) + var(--s4))}
 /* The sidebar is off-canvas here, so the header keeps its edge-to-edge bleed. */
 .top{top:var(--s12);margin:calc(-1 * var(--s4)) calc(-1 * var(--pad)) var(--s4);padding:var(--s3) var(--pad)}
 h1{font:600 var(--t-panel) var(--ff)}
 .drh{padding:var(--s3) var(--s4) 0}.drb{padding:var(--s4) var(--s4) calc(var(--s12) + var(--s4))}
 .dl{grid-template-columns:1fr;gap:var(--s1) 0}.dl dd{margin-bottom:var(--s2)}
 .fg{grid-template-columns:1fr}
 .tabs{flex-basis:100%}
 .mark{bottom:var(--s2);right:var(--s2)}
}
/* Phones: the other tables (data-cards: deleted leads, import refusals, recordings, money) stack as cards, first column on top. */
@media(max-width:640px){
 .tw:has(table[data-cards]){overflow:visible;border:0;background:none}
 table[data-cards],table[data-cards] tbody,table[data-cards] tr,table[data-cards] td{display:block;width:auto}
 table[data-cards] thead{display:none}
 table[data-cards] tr{background:var(--pan);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4);margin-bottom:var(--s2);position:relative}
 table[data-cards] td{height:auto;padding:var(--s1) 0;border:0}
 table[data-cards] td[data-label]{position:relative;padding-left:116px}
 table[data-cards] td[data-label]::before{content:attr(data-label);position:absolute;left:0;top:var(--s1);width:108px;color:var(--mut);font:var(--t-sec) var(--ff)}
 table[data-cards] td.qa{padding-top:var(--s2)}
 table[data-cards] .acts{gap:var(--s2);flex-wrap:wrap}
 table[data-cards] .acts .btn{height:auto;min-height:var(--touch);padding:0 var(--s4)}
 /* The CRM is a list (option D, 2026-09-24): one line per lead in the .tw panel, hairlines between rows, no gaps.
    Tick box, then the name over why it is due (.ph), then the round dial button (.dial). The header keeps only
    Select all. Nothing pins: a list has no sideways scroll. The labelled cells and the quick actions are the
    lead's job; the row opens it. */
 table[data-crm],table[data-crm] thead,table[data-crm] tbody{display:block}
 table[data-crm] tr{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
 table[data-crm] tbody tr:last-child{border-bottom:0}
 table[data-crm] th,table[data-crm] td{display:block;height:auto;padding:0;border:0;white-space:normal}
 table[data-crm] .ck,table[data-crm] .pin,table[data-crm] .qa{position:static;box-shadow:none;min-width:0}
 table[data-crm] thead tr{min-height:var(--c-tab);padding-top:0;padding-bottom:0}
 table[data-crm] th:not(.ck),table[data-crm] td[data-label],table[data-crm] td.pin>.m,table[data-crm] td.pin>.pill,table[data-crm] .acts{display:none}
 table[data-crm] th.ck{display:flex;align-items:center;gap:var(--s2);width:auto;color:var(--mut);font:var(--t-sec) var(--ff)}
 table[data-crm] th.ck::after{content:"Select all"}
 table[data-crm] td.ck{width:auto;flex:none;display:flex}
 table[data-crm] td.pin{flex:1 1 auto}
 table[data-crm] td.pin>b,table[data-crm] .ph{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 table[data-crm] .ph{color:var(--mut);font:var(--t-cap) var(--ff)}
 table[data-crm] td.qa{flex:none}
 table[data-crm] .dial{display:grid;place-items:center;width:var(--touch);height:var(--touch);border-radius:var(--rf);background:var(--acc);color:var(--fg)}
 table[data-crm] .dial svg{width:var(--ico);height:var(--ico)}
}
/* ---------- added for the real app: sign-in screens, states, touch targets ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:var(--s4)}
.auth .pnl2{width:min(400px,100%);padding:var(--s6)}
.auth .brand{padding:0 0 var(--s4)}
.err{color:var(--accT);margin:0 0 var(--s3)}
.busy{opacity:.6;pointer-events:none}
.me .meacts{margin-left:auto}
.side .out{height:var(--c-s);padding:0 var(--s2);font:var(--t-sec) var(--ff)}
.ban p{margin:0 0 var(--s2)}
@media(max-width:640px){.btn{min-height:var(--touch)}.nav a{height:var(--touch)}.tabs button{height:var(--touch)}}
.app.door{display:block}.app.door .side{display:none}
/* resources v2 */
.wprog{margin:0 0 var(--s2)}
.wp h2{font:600 var(--t-panel) var(--ff);margin:var(--s1) 0 var(--s2)}
.wnote{margin:0 0 var(--s2);padding:var(--s2) var(--s3);border-left:3px solid var(--mut);background:var(--pan);border-radius:0 var(--r1) var(--r1) 0}
.wt{font:600 var(--t-panel) var(--ff);margin:0 0 var(--s1)}
.wyt{margin:0 0 var(--s3)}
.wnote b{display:block;font:600 var(--t-cap) var(--ff);text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-bottom:var(--s2)}
.wnote ul{margin:0;padding-left:var(--s4)}.wnote li{margin:var(--s1) 0}
.wintro{margin:0 0 var(--s4);max-width:72ch}.wintro p{margin:0 0 var(--s2)}.wintro p:last-child{margin-bottom:0}
.wthumb{background-size:cover;background-position:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2)}
.wwhy{background:rgba(0,0,0,.72);padding:var(--s1) var(--s2);border-radius:var(--r1);color:var(--fg)}
.wsplit{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s4);align-items:start}
.wsplit .player{margin:0}
.wnotes textarea{min-height:96px}
.vl .wg{padding:var(--s2) var(--s3) var(--s1);font:600 var(--t-cap) var(--ff);color:var(--dim);text-transform:uppercase;letter-spacing:.08em;border-top:1px solid var(--line)}
.vl .wg:first-child{border-top:0}
.vl button.v{align-items:flex-start}
.rd{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s3);align-items:start}
.rl{margin:0}
/* His documents run long: the list follows the scroll, the way the lead column does, so switching never means scrolling back. Below 900 it is a strip across the top instead. */
@media(min-width:901px){.rl{position:sticky;top:calc(var(--stick) + var(--s3));max-height:calc(100vh - var(--stick) - var(--s6));overflow:auto}}
.rl button.v{min-height:var(--touch);padding:var(--s2) var(--s3)}
.rl .rsplit{padding:var(--s2) var(--s3);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.rdocs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);align-items:start}
.rdocs:has(#rright:not(:empty)){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rp{background:var(--pan);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;min-width:0}
.rs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);min-height:var(--row)}
.rs .rname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs .ropen{height:var(--c);font:var(--t-sec) var(--ff);line-height:1;padding:0 var(--s2);max-width:220px}
.rs .rfull{font:var(--t-sec) var(--ff)}
.rf{min-height:200px}
.rf .emp{padding:var(--s4)}
@media(max-width:900px){.wsplit{grid-template-columns:1fr}.rd,.rdocs:has(#rright:not(:empty)){grid-template-columns:1fr}}

/* the call screen: the script stays up, the side flips between the lead and resources */
.ctopic{border-left:3px solid var(--mut);background:var(--pan);border-radius:0 var(--r1) var(--r1) 0;padding:var(--s2) var(--s4);margin:0 0 var(--s3)}
.ctopic b{font:600 var(--t-h2) var(--ff)}
.ctopic p{margin:var(--s1) 0 0}
.ctopic .m{display:block;margin-top:var(--s1)}
.cscript{min-width:0}
.cside{min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.cside .tabs{margin:0}
.cpane{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);max-height:calc(100vh - 430px);overflow:auto}
.cpane h2{margin:var(--s2) 0 0;font:600 var(--t-h3) var(--ff);color:var(--mut)}
.cfact{display:flex;gap:var(--s2);justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding:var(--s2) 0}
.cfact:last-of-type{border-bottom:0}
.cfact .f{color:var(--mut);white-space:nowrap}

/* a document, rendered as the page itself: no frame, no inner scrollbar, no box */
.docbody{color:var(--fg);font:var(--t-read) var(--ff);max-width:72ch}
.docbody h1{font:600 var(--t-h1) var(--ff);margin:0 0 var(--s2)}
.docbody h2{font:600 var(--t-panel) var(--ff);margin:var(--s6) 0 var(--s2)}
.docbody h3{font:600 var(--t-h2) var(--ff);margin:var(--s4) 0 var(--s2)}
.docbody p{margin:var(--s3) 0}
.docbody .m{color:var(--mut);font:var(--t-body) var(--ff)}
.docbody a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line3)}
.docbody a:hover{text-decoration-color:var(--fg)}
.docbody blockquote{margin:var(--s3) 0;padding:var(--s2) var(--s4);border-left:3px solid var(--mut);background:var(--pan);border-radius:0 var(--r1) var(--r1) 0}
.docbody ul,.docbody ol{padding-left:var(--s6)}
.docbody li{margin:var(--s1) 0}
.docbody .map{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:var(--s3) 0 var(--s2);font:var(--t-body) var(--ff)}
.docbody .br{list-style:none;padding:0;margin:var(--s3) 0}
.docbody .br li{padding:var(--s2) 0;border-bottom:1px solid var(--line);margin:0}
.docbody table{width:100%;border-collapse:collapse;margin:var(--s2) 0}
.docbody th,.docbody td{text-align:left;padding:var(--s2);border-bottom:1px solid var(--line);vertical-align:top}
.docbody th{color:var(--mut);font:500 var(--t-sec) var(--ff)}
.docbody td:first-child{color:var(--mut)}
@media(min-width:641px){.docbody td:first-child{width:34%}}
.docbody blockquote p{margin:var(--s2) 0}.docbody blockquote p:first-child{margin-top:0}.docbody blockquote p:last-child{margin-bottom:0}
.docbody p.lead{margin:var(--s4) 0 var(--s2)}
.docbody ol.toc{margin:var(--s3) 0 var(--s2)}
.docbody main{max-width:none;margin:0;padding:0}

/* Read and the call screen hold documents, not framed panes */
.rf,.rp{border:0;background:none}
.rf iframe{display:none}
.cscript,.cpane{border:0;background:none;padding:0;max-height:none;overflow:visible}
/* The call strip: one 48px row that never scrolls (the .top block is sticky). Back, the name cut with an ellipsis, the pill and dot, the timer, End call last. */
.ctop{padding-top:0;padding-bottom:0}
.ctop .toprow{height:var(--row);flex-wrap:nowrap;min-width:0}
.ctop h1{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ctop .pill,.ctop .q,.ctop .ctimer,.ctop .btn{flex:none}
.ctimer{color:var(--live);font-weight:600;font-variant-numeric:tabular-nums}
/* The number once the call is live: quiet and green, still a link to redial. */
.btn.live{color:var(--live);border-color:var(--live);background:none;box-shadow:none}
.btn.live:hover{background:var(--hov)}
/* A phone strip has no room for the pill; the topic line under it says the status in words. */
@media(max-width:640px){.ctop .pill{display:none}}
.cside .docbody{max-width:none;font:var(--t-body) var(--ff)}

/* the sidebar: the icon leads the label, and stands alone in the rail when collapsed */
.side .ico{width:var(--ico);height:var(--ico);flex:0 0 var(--ico);opacity:.85}
.side .nav a[aria-current="page"] .ico{opacity:1}
.side .brand .narrow{margin-left:auto;background:none;border:0;padding:var(--s1);color:var(--mut);cursor:pointer;line-height:0}
.side .brand .narrow:hover{color:var(--fg)}
.side .brand .narrow .ico{width:var(--ico);height:var(--ico)}
.app.narrow .side{width:var(--rail-w);padding:var(--s4) var(--s2)}
.app.narrow .side .lbl,.app.narrow .side .grp,.app.narrow .side .who,.app.narrow .side .out{display:none}
.app.narrow .side .nav a{justify-content:center;padding:0;gap:0}
.app.narrow .side .nav li{position:relative}
/* The rail says "something is here" with a grey dot. Crimson is for overdue work only (.late), never a number over an icon. */
.app.narrow .side .nav a .n{position:absolute;top:6px;right:10px;width:6px;height:6px;min-width:0;margin:0;padding:0;font-size:0;line-height:0;border-radius:var(--rf);background:var(--mut)}
.app.narrow .side .nav a .n.late{background:var(--acc)}
.app.narrow .side .brand{flex-direction:column;justify-content:center;padding:var(--s2) 0 var(--s3);gap:var(--s2)}
.app.narrow .side .brand svg:first-child{width:var(--ico)}
.app.narrow .side .brand .narrow{margin:0}
.app.narrow .side .me{justify-content:center;padding:var(--s2) 0}
.app.narrow .side .av{margin:0}

/* The call: the script takes everything spare, the call panel a fixed 380px (546px of script at 940px of content). Under 1100px they stack, script first. */
.callw{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s3);align-items:start}
.cpick{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s2)}
.cpick select{max-width:230px}
/* The working column sticks under the strip (48px row + hairline) with 12px clear. */
/* The sticky goes on the column, not on the pane inside it. .cside is content-height,
   so a sticky child of it has nowhere to travel and the number and notes scrolled away
   mid-call. A grid item sticks inside its grid area, which is the full row. */
.cside{position:sticky;top:calc(var(--stick) + var(--s3));max-height:calc(100vh - var(--stick) - var(--s3));overflow:auto}
.cside textarea{min-height:112px}
.cfield{display:flex;flex-direction:column;gap:var(--s1)}
.cfield input{width:100%}
.cside h2{margin:var(--s2) 0 0;font:600 var(--t-h3) var(--ff);color:var(--mut);text-transform:none}
.cscript.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:start}
.cscript .ccol{min-width:0}
.cscript.split .docbody{max-width:none;font:var(--t-body) var(--ff)}
/* The objection chips under the topic, Focus (the lead column gone, the script takes the width, the strip stays), an anchor jump that clears the sticky strip, and the one-line refresher over the notes. */
.chips.cobj{margin:0 0 var(--s3)}
.callw.focus{grid-template-columns:1fr}
.callw.focus .cside{display:none}
.cscript .docbody [id]{scroll-margin-top:calc(var(--stick) + var(--s3))}
.clast{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.callw{grid-template-columns:1fr}.cside{position:static;max-height:none;overflow:visible}.cscript.split{grid-template-columns:1fr}}

/* The lead on a phone (his pick 2026-09-24, bmw-mobile-lead-full and editing option 3): call first, the sections fold, a field edits in a
   sheet from the bottom. lead.js renders [data-phone], .fr, .sec and .sheet only when dials() is true, so a laptop's drawer has none of this. */
@media(max-width:640px){
 .drh[data-phone] .row{flex-wrap:nowrap}
 .drh[data-phone] .back{flex:none}
 .drh[data-phone] h1{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .drb[data-phone] .call{display:flex;width:100%;min-height:calc(var(--touch) + var(--s3));font:600 var(--t-panel) var(--ff);margin-bottom:var(--s2)}
 .drb[data-phone] .cap{text-align:center;color:var(--mut);font:var(--t-cap) var(--ff);margin:0 0 var(--s1)}
 .drb[data-phone] .cap a{color:var(--mut)}
 .drb[data-phone] .cap .q{font:inherit;color:inherit;padding:0;margin:0}
 .drb[data-phone] .qa4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin:var(--s3) 0}
 .drb[data-phone] .qa4 .btn{padding:0}
 .drb[data-phone] [data-why]{margin:0 0 var(--s3)}
 .drb[data-phone] .sec{border:1px solid var(--line);border-radius:var(--r2);background:var(--pan);margin-bottom:var(--s3);overflow:hidden}
 .drb[data-phone] .sec>summary{list-style:none;cursor:pointer;padding:var(--s3) var(--s4);min-height:var(--touch);display:flex;align-items:center;gap:var(--s2);font-weight:600}
 .drb[data-phone] .sec>summary::-webkit-details-marker{display:none}
 .drb[data-phone] .sec>summary .m{margin-left:auto;font-weight:400;text-align:right}
 .drb[data-phone] .sec>div{padding:0 var(--s4) var(--s4)}
 .drb[data-phone] .sec .pnl2{border:0;background:none;padding:0;margin:0 0 var(--s4)}
 .drb[data-phone] .sec .pnl2:last-child{margin-bottom:0}
 .drb[data-phone] .sec .dlh{margin:var(--s4) 0 0}
 .drb[data-phone] .sec .dlh:first-child{margin-top:0}
 .drb[data-phone] .fr{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--touch);padding:var(--s2) 0;border-bottom:1px solid var(--line);text-align:left}
 .drb[data-phone] .fr:last-child{border-bottom:0}
 .drb[data-phone] .fl{color:var(--mut);font:var(--t-sec) var(--ff);width:112px;flex:none}
 .drb[data-phone] .fv{flex:1;min-width:0;overflow-wrap:anywhere}
 .drb[data-phone] .fr .go{color:var(--dim);flex:none}
 .drb[data-phone] .fr.ro .fv{color:var(--mut)}
 .drb[data-phone] .note{border-left:2px solid var(--line2);padding-left:var(--s3);margin-bottom:var(--s3)}
 .drb[data-phone] .w{width:100%}
 .drb[data-phone] .ldel{border-color:var(--acc);color:var(--accT);margin-top:var(--s2)}
 .shs{position:fixed;inset:0;background:var(--bg);opacity:.6;z-index:31}
 .sheet{position:fixed;left:0;right:0;bottom:0;background:var(--over);border-top:1px solid var(--line2);border-radius:var(--r2) var(--r2) 0 0;padding:var(--s4) var(--s4) var(--s6);z-index:32}
 .sheet .grab{width:var(--c-tab);height:var(--s1);border-radius:var(--rf);background:var(--line3);margin:0 auto var(--s4)}
 .sheet input,.sheet select,.sheet textarea{width:100%;min-height:var(--touch);margin:var(--s2) 0}
 .sheet .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s4)}
}

/* The other screens on a phone (2026-09-24, after the CRM list and the lead): the 48px top bar is the only sticky thing, panels sit 16px
   inside and 16px apart like the lead's sections, every control is 44px, and nothing needs a sideways scroll. Every rule is inside the query. */
@media(max-width:640px){
 .top{position:static}
 .pnl,.pnl2,.tiles{margin-bottom:var(--s4)}
 .pnl,.pnl2{padding:var(--s4)}
 .hm{gap:var(--s4)}
 .hgh .lnk{display:inline-flex;align-items:center;min-height:var(--touch)}
 /* Home's rows: the group's heading already says the status, so the pill goes and the name keeps the width (the CRM list does the same). Do not contact stays. */
 .lr .pill:not(.a){display:none}
 input,select,.rs .ropen{height:var(--touch)}
 .chip,.chk,.side .out{min-height:var(--touch)}
 /* Money's three figures: one line each, the label left and the amount right, instead of two tiles and a stray third. */
 .tiles{flex-direction:column;gap:var(--s2)}
 .tiles .pnl{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
 .tiles .v{margin-top:0}
 [data-cashout] .btn.p{width:100%}
 /* A Drive link, an email address or a long cell breaks instead of pushing the page sideways. */
 a.lnk,.msg .mh,.ew h2,.docbody td,.docbody th{overflow-wrap:anywhere}
 #thr{scroll-margin-top:calc(var(--s12) + var(--s2))}
 /* Read: the document list is one strip you swipe, like the tab row, so the document starts at the top of the screen. Split is a laptop's: two documents on a phone is a scroll, not a split. */
 .rl{display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,var(--fg) calc(100% - var(--s8)),transparent);mask-image:linear-gradient(to right,var(--fg) calc(100% - var(--s8)),transparent)}
 .rl::-webkit-scrollbar{display:none}
 .rl button.v{flex:none;width:auto;white-space:nowrap;border-top:0;border-left:1px solid var(--line)}
 .rl button.v:first-child{border-left:0}
 .rl button.v:last-of-type{margin-right:var(--s8)}
 .rl .rsplit{display:none}
}

/* ---------- the first-week checklist (Home) and Paperwork ---------- */
/* Brayden 2026-09-24: the checklist follows "Welcome and First Week" down to the
   mock call. A row the dashboard knows for itself reads; a row it cannot know ticks.
   It keeps the panel's own padding, so nothing sits against an edge. */
.ob summary{cursor:pointer;list-style:none}
.ob summary::-webkit-details-marker{display:none}
.ob>details>summary{display:flex;flex-direction:column;gap:var(--s2)}
.ob>details[open]>summary{margin-bottom:var(--s4)}
.obtop{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
/* Show or Hide, with a chevron: the one clear thing to press (Brayden, 9/25). */
.obtog{flex:none;gap:var(--s2);pointer-events:none}
.obtog::before{content:"Show"}
.obtog::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
details[open]>summary .obtog::before{content:"Hide"}
details[open]>summary .obtog::after{transform:translateY(2px) rotate(-135deg)}
.obg>summary{display:flex;align-items:center;gap:var(--s3);margin:var(--s6) 0 var(--s2)}
.obg:first-child>summary{margin-top:0}
.obg>summary .dlh{margin:0}
.obg>summary .obtog{margin-left:auto}
.obh{display:flex;flex-direction:column;gap:var(--s1)}
.obh b{font:600 var(--t-panel) var(--ff)}
.obbar{display:block;height:4px;border-radius:2px;background:var(--line2);overflow:hidden;margin-top:var(--s2)}
.obbar span{display:block;height:100%;background:var(--live);transition:width .2s}
.ob .dlh{margin:var(--s6) 0 var(--s2)}
.obr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s2) var(--s4);align-items:start;padding:var(--s4) 0;border-top:1px solid var(--line)}
.obr:first-of-type{border-top:0;padding-top:var(--s2)}
.obt{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:baseline;min-width:0}
.obt b{font:var(--t-read) var(--ff);font-weight:500}
.obt .m{flex-basis:100%;margin:0}
.obr.done .obt b{color:var(--mut)}
.obr .acts{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;justify-content:flex-end;padding-top:2px}
.obr .obck{width:20px;height:20px;margin-top:3px;flex:none;border:1px solid var(--line3);border-radius:999px;background:none;display:inline-block;position:relative}
.obr button.obck{min-height:0;cursor:pointer}
.obr button.obck:hover{border-color:var(--fg)}
.obr .obck.on{background:var(--live);border-color:var(--live)}
.obr .obck.on::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #06240f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.obr .obck.read{border-style:dashed}
.obr .obck.read.on{border-style:solid}
.meacts{display:flex;gap:var(--s2);flex-wrap:wrap}
/* Walking it as the demo account: the block says whose screen this is. */
.me.asdemo{border-top-color:var(--acc)}
.me.asdemo .av{background:var(--acc);color:var(--accT)}
.wn p{margin:var(--s3) 0;max-width:72ch}
.wn p:last-child{color:var(--mut)}
.pill.req{background:none;border:1px solid var(--acc);color:var(--acc)}
.agr{max-height:46vh;overflow:auto;padding:var(--s4);background:var(--pan2);border:1px solid var(--line);border-radius:var(--r1);margin:var(--s4) 0}
/* A blank in the agreement, carrying whatever is in the form. Empty reads as a rule to fill, never as nothing. */
.fill{color:var(--fg);font-weight:500;border-bottom:1px solid var(--line3);padding:0 var(--s1);min-width:80px;display:inline-block}
.fill.empty{border-bottom-color:var(--acc);min-height:1.2em}
.agr .docbody,.agr.docbody{max-width:none}
/* Paperwork arrives shut. What is on the screen is the name of a document and
   the way in, never anyone's details (Brayden, 2026-09-25). */
.pnl.shut{padding:var(--s4) var(--s6)}
.shuth{display:flex;align-items:center;gap:var(--s3);min-height:var(--touch)}
.shuti{display:grid;place-items:center;width:var(--c);height:var(--c);flex:none;border-radius:var(--rf);background:var(--over);color:var(--mut)}
.shutt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.shutt b{font:600 var(--t-h2) var(--ff)}
.pnl.shut>.m{margin:var(--s2) 0 0}
/* A blank in the agreement, as something to type in. It sits on the line his text leaves for it. */
.agrf{font:inherit;color:var(--fg);background:rgba(61,214,140,.12);border:0;border-bottom:1px solid var(--line3);border-radius:2px;padding:0 var(--s1);min-height:0;height:auto;width:auto;max-width:100%}
.agrf:focus{background:rgba(61,214,140,.22);outline:2px solid var(--acc);outline-offset:1px}
.agrf::placeholder{color:var(--dim);font-style:italic}
.agrsig{font-family:"Snell Roundhand","Apple Chancery","Segoe Script",cursive;font-size:1.15em;min-width:200px}

/* The IRS form, as they will file it. Tall enough to read a page of it without a second scrollbar fight. */
/* Form W-9, with an input on every box the IRS put there. The page is the
   document: the image is the form at its own proportions, and every field is
   placed by percentage, so it stays lined up at any width. Text sizes in
   container units for the same reason. */
.w9doc{position:relative;container-type:inline-size;margin:var(--s4) 0;background:#fff;border-radius:var(--r1);overflow:hidden;color-scheme:light}
.w9doc img{display:block;width:100%;height:auto}
.w9f{position:absolute;box-sizing:border-box;border:0;border-radius:2px;background:rgba(61,214,140,.14);color:#111;font:500 1.75cqw var(--ff);padding:0 0.4cqw;outline-offset:1px;min-height:0;height:auto}
.w9f:hover{background:rgba(61,214,140,.22)}
.w9f:focus{background:rgba(61,214,140,.3);outline:2px solid var(--acc)}
.w9f::placeholder{color:#999}
.w9sig{font-family:"Snell Roundhand","Apple Chancery","Segoe Script",cursive;font-size:2.4cqw}
.w9c{position:absolute;box-sizing:border-box;padding:0;min-height:0;background:rgba(61,214,140,.18);border:1px solid rgba(0,0,0,.35);border-radius:2px;cursor:pointer}
.w9c:hover{background:rgba(61,214,140,.35)}
.w9c.on{background:#111;border-color:#111}
.w9c.on::after{content:"";position:absolute;left:18%;top:2%;width:28%;height:62%;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.w9c:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
@media(max-width:640px){
 .obr{grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s3);padding:var(--s4) 0}
 .obr .acts{grid-column:2;justify-content:flex-start;padding-top:var(--s1)}
 .obr .obck{margin-top:2px}
 .obr button.obck{width:var(--touch);height:var(--touch);margin:calc((var(--touch) - 20px) / -2);border:0;background:none}
 .obr button.obck::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:1px solid var(--line3);border-radius:999px}
 .obr button.obck.on::before{background:var(--live);border-color:var(--live)}
 .obr button.obck.on::after{left:calc(50% - 4px);top:calc(50% - 6px)}
}

/* The loading screen while Stripe opens (money.js stripeWait): it holds the whole page. */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:70;padding:var(--s4)}
.ovlb{background:var(--over);border:1px solid var(--line2);border-radius:var(--r2);padding:var(--s6);width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.ovlb b{font:600 var(--t-panel) var(--ff)}
.ovlb .m{margin:0}
.spin{width:28px;height:28px;border:3px solid var(--line2);border-top-color:var(--fg);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}