/* Prop-AR — shared visual system with the Big Dig research report */ :root{ /* PropLogix brand, read off proplogix.com on 21 Sep 2026. #41B780 the green. Every call to action on their site is this colour. #1F2B34 the dark slate of their navigation and headings. #023D4D the deep teal their body copy is set in. #F78D1E the orange they use sparingly as a second accent. #7F9DA5 the muted blue-grey under their headings. Two deliberate departures. The green is the brand colour but it is NOT the interface accent here. Green already means "collected" in every screen of this app, and an interface where the button colour and the success colour are the same hue is one where nobody can skim a page for what was paid. So the deep teal carries the interface and the green carries collected, which is the reading their own site supports: teal for structure, green for the thing you want to happen. Second, the greens and reds here are darkened from the brand swatch to clear 4.5:1 against white. A status colour nobody can read on a laptop in a sunlit office is decoration. */ --brand:#41B780; --brand-ink:#FFFFFF; --brand-dark:#1F2B34; --brand-deep:#023D4D; --brand-warm:#F78D1E; --ground:#EFF3F4; --surface:#FFFFFF; --surface2:#F5F9FA; --sunk:#E3EAEC; --line:#D2DCDF; --line-soft:#E4EBED; --ink:#1F2B34; --ink-2:#023D4D; --muted:#5C7080; --faint:#7F9DA5; --accent:#023D4D; --accent-soft:#E0EDF0; --accent-ink:#FFFFFF; --collect:#0F7A52; --collect-bg:#E2F2EA; --pending:#9A5A08; --pending-bg:#FBEEDC; --canceled:#5C7080; --canceled-bg:#E6EBEE; --unclear:#5F4A8A; --unclear-bg:#EDE8F5; /* Did not close: the sale never happened. Deep teal, the interface accent, because on an estoppel this is the strongest finding there is rather than a dead end. */ --noclose:#023D4D; --noclose-bg:#DCE7EA; --danger:#A22C2C; --danger-bg:#F7E4E4; --shadow:0 1px 2px rgba(31,43,52,.06),0 6px 20px rgba(31,43,52,.05); --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Newsreader",Georgia,"Times New Roman",serif; --brandfont:"Poppins","IBM Plex Sans",-apple-system,sans-serif; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ /* On dark the green becomes the accent, because the contrast problem reverses: the deep teal that reads as authority on white disappears against a dark ground, and the brand green lifts off it cleanly. */ --brand:#5CC894; --brand-ink:#0C1419; --brand-dark:#0C1419; --brand-deep:#8FC9D8; --brand-warm:#F2A24A; --ground:#0C1419; --surface:#15222A; --surface2:#1A2831; --sunk:#101A20; --line:#2A3B44; --line-soft:#213038; --ink:#E6EEF1; --ink-2:#C3D6DC; --muted:#93A9B2; --faint:#7F9DA5; --accent:#6FC3DB; --accent-soft:#12303A; --accent-ink:#0C1419; --collect:#5CC894; --collect-bg:#0F3628; --pending:#E6A759; --pending-bg:#3A2A11; --canceled:#93A9B2; --canceled-bg:#1D2A32; --unclear:#B29CE2; --unclear-bg:#241C38; --noclose:#7FC4D6; --noclose-bg:#10303A; --danger:#E68D8D; --danger-bg:#3A1E1E; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.28); }} :root[data-theme="dark"]{ /* On dark the green becomes the accent, because the contrast problem reverses: the deep teal that reads as authority on white disappears against a dark ground, and the brand green lifts off it cleanly. */ --brand:#5CC894; --brand-ink:#0C1419; --brand-dark:#0C1419; --brand-deep:#8FC9D8; --brand-warm:#F2A24A; --ground:#0C1419; --surface:#15222A; --surface2:#1A2831; --sunk:#101A20; --line:#2A3B44; --line-soft:#213038; --ink:#E6EEF1; --ink-2:#C3D6DC; --muted:#93A9B2; --faint:#7F9DA5; --accent:#6FC3DB; --accent-soft:#12303A; --accent-ink:#0C1419; --collect:#5CC894; --collect-bg:#0F3628; --pending:#E6A759; --pending-bg:#3A2A11; --canceled:#93A9B2; --canceled-bg:#1D2A32; --unclear:#B29CE2; --unclear-bg:#241C38; --noclose:#7FC4D6; --noclose-bg:#10303A; --danger:#E68D8D; --danger-bg:#3A1E1E; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.28); } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans); font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased} h1,h2,h3{margin:0;text-wrap:balance} a{color:var(--accent)} button{font:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} [hidden]{display:none!important} /* ---------------- sign in ---------------- */ .signin{min-height:100%;display:grid;place-items:center;padding:24px} .signin-card{width:100%;max-width:390px;background:var(--surface);border:1px solid var(--line); border-radius:3px;box-shadow:var(--shadow);padding:32px 30px 28px;border-top:3px solid var(--brand)} .signin .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin-bottom:10px} .signin h1{font-family:var(--serif);font-size:38px;font-weight:500;letter-spacing:-.015em;line-height:1} .signin .tag{color:var(--muted);font-size:13.5px;margin:9px 0 22px} .field{display:block;margin-bottom:13px} .field span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);margin-bottom:5px} input,select,textarea{width:100%;font-family:var(--sans);font-size:14px;padding:9px 11px; border:1px solid var(--line);border-radius:2px;background:var(--surface);color:var(--ink)} textarea{resize:vertical;min-height:74px;line-height:1.5} .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px; border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:2px; cursor:pointer;font-size:14px;font-weight:600} .btn:disabled{opacity:.55;cursor:default} .btn.wide{width:100%;padding:11px} .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line);font-weight:500} .btn.ghost:hover{background:var(--surface2)} .btn.sm{padding:6px 11px;font-size:13px} .msg{margin-top:12px;padding:9px 11px;border-radius:2px;font-size:13px} .msg.err{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger)} .msg.ok{background:var(--collect-bg);color:var(--collect);border:1px solid var(--collect)} .hint{font-size:12px;color:var(--faint);margin-top:16px;line-height:1.5} /* ---------------- app frame ---------------- */ .app{display:flex;flex-direction:column;min-height:100%} .topbar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:11px 20px; background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40} .brand{display:flex;align-items:center;gap:9px;font-size:21px} /* The PropLogix house, drawn rather than fetched: it inherits currentColor so it works on both themes, stays crisp at any size, and does not put a network request in front of the first paint. */ .plmark{width:26px;height:23px;flex:none;color:var(--brand)} .brand .plname{font-family:var(--brandfont);font-weight:600;font-size:19px; letter-spacing:-.01em;color:var(--ink)} .brand .sep{width:1px;height:17px;background:var(--line);flex:none} .brand .prod{font-family:var(--serif);font-size:20px;font-weight:500;letter-spacing:-.01em; color:var(--ink-2)} .brand em{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);font-style:normal;align-self:center} .brand em:empty{display:none} /* The sign-in and invitation cards: the company first, the tool second. A title agent following an emailed link has to recognise who this is from before anything else on the page matters. */ .pllogo{display:flex;align-items:center;gap:10px;margin-bottom:16px} .pllogo .plmark{width:34px;height:30px} .pllogo .plmark-ar{width:34px;height:47px} .pllogo span{font-family:var(--brandfont);font-weight:600;font-size:25px; letter-spacing:-.015em;color:var(--ink)} .tabs{display:flex;gap:4px;margin-left:6px} .tab{padding:6px 12px;border:1px solid transparent;background:none;color:var(--muted); border-radius:2px;cursor:pointer;font-size:13.5px;font-weight:500} .tab:hover{background:var(--surface2);color:var(--ink)} .tab .pill{font-family:var(--mono);font-size:10.5px;margin-left:6px;opacity:.85} .topbar .who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted)} .topbar .who b{color:var(--ink);font-weight:600} /* ---------------- stat strip ---------------- */ .strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px; background:var(--line);border-bottom:1px solid var(--line)} .stat{background:var(--surface);padding:11px 18px} .stat .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted)} .stat .v{font-family:var(--mono);font-size:20px;font-weight:600;margin-top:2px; font-variant-numeric:tabular-nums;letter-spacing:-.01em} .stat.good .v{color:var(--collect)} .stat.warn .v{color:var(--pending)} /* ---------------- layout ---------------- */ .main{flex:1;display:grid;grid-template-columns:minmax(330px,430px) 1fr; gap:1px;background:var(--line);align-items:start;align-content:start} .pane{background:var(--ground);min-width:0} .queue{background:var(--ground);display:flex;flex-direction:column; max-height:calc(100vh - var(--topbar,57px));position:sticky;top:var(--topbar,57px)} .filters{padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--line); display:flex;flex-direction:column;gap:8px} .frow{display:flex;gap:7px;flex-wrap:wrap} .frow input,.frow select{flex:1 1 130px;min-width:0;font-size:13px;padding:7px 9px} .chips{display:flex;gap:5px;flex-wrap:wrap} .chip{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase; padding:5px 9px;border:1px solid var(--line);background:var(--surface);color:var(--muted); border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;gap:5px} .chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .chip[aria-pressed="true"]{border-color:currentColor;font-weight:600} .chip.k-all[aria-pressed="true"]{color:var(--ink);background:var(--surface2)} .chip.k-collect{color:var(--collect)} .chip.k-collect[aria-pressed="true"]{background:var(--collect-bg)} .chip.k-pending{color:var(--pending)} .chip.k-pending[aria-pressed="true"]{background:var(--pending-bg)} .chip.k-canceled{color:var(--canceled)} .chip.k-canceled[aria-pressed="true"]{background:var(--canceled-bg)} .chip.k-unclear{color:var(--unclear)} .chip.k-unclear[aria-pressed="true"]{background:var(--unclear-bg)} .chip.k-noclose{color:var(--noclose)} .chip.k-noclose[aria-pressed="true"]{background:var(--noclose-bg)} .qcount{font-family:var(--mono);font-size:11px;color:var(--faint);padding:0 2px} .qlist{overflow-y:auto;flex:1;padding:8px;display:flex;flex-direction:column;gap:6px} /* ---------------- queue rows ---------------- */ .qi{width:100%;text-align:left;background:var(--surface);border:1px solid var(--line); border-left:3px solid var(--canceled);border-radius:2px;padding:10px 12px;cursor:pointer; display:grid;grid-template-columns:1fr auto;gap:2px 10px;color:inherit} .qi:hover{background:var(--surface2)} .qi[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)} .qi.v-collect{border-left-color:var(--collect)} .qi.v-pending{border-left-color:var(--pending)} .qi.v-canceled{border-left-color:var(--canceled)} .qi.v-unclear{border-left-color:var(--unclear)} .qi .a{font-weight:600;font-size:13.5px;line-height:1.3} .qi .amt{font-family:var(--mono);font-size:13.5px;font-weight:600;text-align:right; font-variant-numeric:tabular-nums} .qi .c{font-size:11.5px;color:var(--faint);grid-column:1/-1;display:flex;flex-wrap:wrap; gap:4px 8px;align-items:center;margin-top:1px} /* The sold date on a queue row. Mono so a column of dates lines up when the list is sorted by it, which is the point of sorting by it. */ .qi .c .sold{font-family:var(--mono);color:var(--muted)} .qi .c .sold.none{color:var(--faint);font-style:italic;font-family:inherit} /* A transfer that predates our order is not our closing, so it does not get to look like one. */ .qi .c .sold.prior{color:var(--faint);font-family:inherit} .st{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px; letter-spacing:.07em;text-transform:uppercase;font-weight:600;padding:2px 6px;border-radius:2px; border:1px solid var(--line);color:var(--muted);background:var(--surface)} .st.s-done{color:var(--collect);border-color:var(--collect);background:var(--collect-bg)} .st.s-active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)} .st.s-dead{color:var(--canceled);border-color:var(--canceled);background:var(--canceled-bg)} .st.s-due{color:var(--danger);border-color:var(--danger);background:var(--danger-bg)} .flag{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase; padding:2px 6px;border-radius:2px;background:var(--unclear-bg);color:var(--unclear);font-weight:600} /* ---------------- detail ---------------- */ .detail{padding:20px 24px 60px;max-width:900px} .empty{padding:60px 24px;text-align:center;color:var(--muted)} .empty h2{font-family:var(--serif);font-size:24px;font-weight:500;margin-bottom:8px;color:var(--ink)} .dhead{border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:18px} .dhead .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-bottom:7px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center} .dhead h2{font-family:var(--serif);font-size:clamp(24px,3.4vw,32px);font-weight:500; letter-spacing:-.015em;line-height:1.1} .dhead .loc{color:var(--muted);font-size:13.5px;margin-top:5px} .dhead .owed{font-family:var(--mono);font-size:26px;font-weight:600;margin-top:12px; font-variant-numeric:tabular-nums} .verd{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px; letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:2px} .verd .dot{width:6px;height:6px;border-radius:50%;background:currentColor} .verd.v-collect{color:var(--collect);background:var(--collect-bg)} .verd.v-pending{color:var(--pending);background:var(--pending-bg)} .verd.v-canceled{color:var(--canceled);background:var(--canceled-bg)} .verd.v-unclear{color:var(--unclear);background:var(--unclear-bg)} .evidence{background:var(--surface);border:1px solid var(--line);border-radius:3px; padding:16px 18px;margin-bottom:16px} .evidence h3{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-bottom:12px;font-weight:600} .facts{display:flex;flex-wrap:wrap;gap:8px} .fact{flex:1 1 145px;min-width:0;padding:8px 11px;background:var(--surface2); border:1px solid var(--line-soft);border-left:2px solid var(--accent)} .fact.hi{border-left-color:var(--collect)} .fact .k{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase; color:var(--faint)} .fact .v{font-family:var(--mono);font-size:13px;margin-top:3px;font-variant-numeric:tabular-nums; overflow-wrap:anywhere} .finding{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)} .srcline{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)} .srcline b{color:var(--ink-2)} .script{margin-top:14px;padding:13px 15px;background:var(--accent-soft);border-left:3px solid var(--accent); font-size:13.5px;line-height:1.6;color:var(--ink-2)} .script b{color:var(--ink)} .form{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:16px 18px} .form h3{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-bottom:14px;font-weight:600} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px} .grid .full{grid-column:1/-1} .actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:15px; padding-top:14px;border-top:1px solid var(--line-soft)} .saveinfo{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:auto} .log{margin-top:16px} .log h3{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-bottom:9px;font-weight:600} .logitem{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft);font-size:13px} .logitem .when{font-family:var(--mono);font-size:11px;color:var(--faint);flex:none;width:96px} .logitem .what{color:var(--ink-2);min-width:0;overflow-wrap:anywhere} .logitem .what b{color:var(--ink)} /* ---------------- tables (assign + blocked) ---------------- */ .sheet{padding:22px 24px 60px;max-width:1000px} .sheet h2{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:-.01em} .sheet p.lede{color:var(--muted);font-size:14px;margin:7px 0 20px;max-width:72ch} table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line)} th,td{text-align:left;padding:10px 13px;border-top:1px solid var(--line-soft);font-size:13.5px; vertical-align:top} th{background:var(--surface2);font-family:var(--mono);font-size:9.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);border-top:0;font-weight:600} td.n{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} /* A right-aligned column needs a right-aligned heading, or the label floats above the wrong number and every table reads slightly wrong. */ th.n{text-align:right} .tblwrap{overflow-x:auto;border-radius:3px} td select,td input{font-size:13px;padding:6px 8px} .why{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase; padding:2px 7px;border-radius:2px;font-weight:600;white-space:nowrap; background:var(--unclear-bg);color:var(--unclear)} .why.refi{background:var(--pending-bg);color:var(--pending)} .why.gated{background:var(--canceled-bg);color:var(--canceled)} .why.notfound{background:var(--danger-bg);color:var(--danger)} .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90; background:var(--ink);color:var(--ground);padding:10px 18px;border-radius:2px;font-size:13.5px; box-shadow:var(--shadow)} .toast.bad{background:var(--danger);color:#fff} @media (max-width:900px){ .main{grid-template-columns:1fr} .queue{position:static;max-height:none} .qlist{max-height:46vh} .detail,.sheet{padding:18px 16px 50px} .topbar{padding:10px 16px} .who{width:100%;margin-left:0} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ========================================================================== Additions for the full application: dashboard, leaderboard, sync, admin ========================================================================== */ .hidden{display:none!important} .app{display:flex;flex-direction:column;min-height:100vh} /* ---- nav ---- */ .topbar{gap:8px 16px} .tabs{flex-wrap:wrap} .tab.mgr{border-left:2px solid var(--accent);padding-left:10px} .rolebadge{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase; padding:2px 6px;border-radius:2px;background:var(--accent-soft);color:var(--accent);font-weight:600} /* ---- page shell ---- */ .page{padding:22px 24px 70px;max-width:1240px;width:100%;margin:0 auto} .page h2{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-.015em} .page p.lede{color:var(--muted);font-size:14px;margin:7px 0 22px;max-width:74ch} .sechead{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin:32px 0 12px} .sechead h3{font-family:var(--serif);font-size:22px;font-weight:500} .sechead .note{font-size:13px;color:var(--muted)} /* ---- dashboard ---- */ .synccard{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;padding:16px 20px; background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent); border-radius:3px;margin-bottom:20px} .synccard .when{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-.01em; color:var(--accent);line-height:1.1} .synccard .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-bottom:3px} .synccard .detail{font-size:13px;color:var(--ink-2);max-width:60ch} .synccard.stale{border-left-color:var(--pending)} .synccard.stale .when{color:var(--pending)} .synccard.none{border-left-color:var(--danger)} .synccard.none .when{color:var(--danger);font-size:19px} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:12px} .kpi{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:14px 16px} .kpi .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted)} .kpi .v{font-family:var(--mono);font-size:23px;font-weight:600;margin-top:3px;letter-spacing:-.015em; font-variant-numeric:tabular-nums} .kpi .s{font-size:12px;color:var(--muted);margin-top:2px} .kpi.good .v{color:var(--collect)} .kpi.warn .v{color:var(--pending)} .kpi.bad .v{color:var(--danger)} .kpi.accent .v{color:var(--accent)} .split{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:900px){.split{grid-template-columns:1fr}} .lb td.me,.lb tr.me td{background:var(--accent-soft)} .lb .rank{font-family:var(--mono);color:var(--faint);width:34px} .lb .person b{display:block} .lb .person span{font-size:11.5px;color:var(--faint)} .dualbar{display:flex;flex-direction:column;gap:3px;min-width:130px} .dualbar .row{display:flex;align-items:center;gap:6px} .dualbar .track{flex:1;height:7px;background:var(--sunk);border-radius:1px;overflow:hidden} .dualbar .fill{height:100%;display:block} .dualbar .fill.m{background:var(--pending);opacity:.75} .dualbar .fill.c{background:var(--collect)} .dualbar .tag{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase; color:var(--faint);width:56px;flex:none} /* ---- agents board ---- */ .agentgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px} .agentcard{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:14px 15px; display:flex;flex-direction:column;gap:9px;border-left:3px solid var(--line)} .agentcard.unclaimed{border-left-color:var(--collect)} .agentcard.mine{border-left-color:var(--accent);background:var(--accent-soft)} .agentcard .nm{font-weight:600;font-size:14px;line-height:1.3} .agentcard .figs{display:flex;flex-wrap:wrap;gap:3px 16px} .agentcard .fig{min-width:74px} .agentcard .fig .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase; color:var(--faint)} .agentcard .fig .v{font-family:var(--mono);font-size:14px;font-weight:600; font-variant-numeric:tabular-nums} .agentcard .fig.chase .v{color:var(--collect)} .agentcard .foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto; padding-top:4px;font-size:12px;color:var(--muted)} /* ---- upload ---- */ .drop{border:2px dashed var(--line);border-radius:3px;padding:34px 22px;text-align:center; background:var(--surface);transition:border-color .15s,background .15s} .drop.over{border-color:var(--accent);background:var(--accent-soft)} .drop h3{font-family:var(--serif);font-size:20px;font-weight:500;margin-bottom:6px} .drop p{color:var(--muted);font-size:13.5px;max-width:60ch;margin:0 auto 16px} .diff{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px;margin-top:16px} .dcard{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:13px 15px; border-left:3px solid var(--line)} .dcard.add{border-left-color:var(--accent)} .dcard.paid{border-left-color:var(--collect)} .dcard.canc{border-left-color:var(--canceled)} .dcard.dis{border-left-color:var(--danger)} .dcard .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--muted)} .dcard .v{font-family:var(--mono);font-size:21px;font-weight:600;margin-top:2px; font-variant-numeric:tabular-nums} .dcard .s{font-size:12px;color:var(--muted);margin-top:2px} .dcard.paid .v{color:var(--collect)} .dcard.dis .v{color:var(--danger)} .dcard.add .v{color:var(--accent)} /* ---- misc ---- */ .inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .pw{font-family:var(--mono);font-size:15px;font-weight:600;padding:8px 12px;background:var(--sunk); border-radius:2px;display:inline-block;letter-spacing:.02em;user-select:all} .spinner{display:inline-block;width:13px;height:13px;border:2px solid currentColor; border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .loading{padding:44px;text-align:center;color:var(--muted)} td .st{white-space:nowrap} .warnbox{padding:12px 15px;background:var(--pending-bg);border-left:3px solid var(--pending); color:var(--ink-2);font-size:13.5px;border-radius:2px;margin-bottom:16px} /* ---- Last Sale Date, the fact a caller leads with ---- */ .lastsale{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:13px 16px; margin-bottom:14px;background:var(--surface2);border:1px solid var(--line-soft); border-left:4px solid var(--collect);border-radius:2px} .lastsale.none{border-left-color:var(--canceled)} .lastsale .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);width:100%} .lastsale .v{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:-.01em; color:var(--ink);font-variant-numeric:tabular-nums} .lastsale.none .v{color:var(--muted);font-size:16px} .lastsale .s{font-size:12.5px;color:var(--muted)} /* ---- what to say on the call ---- */ .talk{padding:13px 15px;border-radius:2px;margin-bottom:14px;border-left:3px solid var(--accent); background:var(--accent-soft)} .talk.t-collect{border-left-color:var(--collect);background:var(--collect-bg)} .talk.t-pending{border-left-color:var(--pending);background:var(--pending-bg)} .talk.t-noclose{border-left-color:var(--noclose);background:var(--noclose-bg)} /* ---- the two sale dates, and whether they agree ---- Green when the county and the search agree, yellow when only one of them has a date, light red when they disagree. The red is deliberately light: a disagreement is a thing to look at, not an error. */ .sdbadge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:2px; border:1px solid;font-size:13px;cursor:pointer;background:none;text-align:left;width:100%} .sdbadge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} .sdbadge .msg{color:var(--ink);font-weight:400;flex:1} .sdbadge .more{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;opacity:.75;flex:none} .sdbadge:hover{filter:brightness(.98)} .sd-green{color:var(--collect);border-color:var(--collect);background:var(--collect-bg)} .sd-yellow{color:var(--pending);border-color:var(--pending);background:var(--pending-bg)} .sd-red{color:var(--danger);border-color:var(--danger);background:var(--danger-bg)} .sd-grey{color:var(--muted);border-color:var(--line);background:var(--surface2)} .sdlog{margin-top:10px;border:1px solid var(--line);border-radius:2px;overflow:hidden} .sdlog table{width:100%;border-collapse:collapse;font-size:12.5px} .sdlog th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);text-align:left;padding:7px 9px;background:var(--surface2); border-bottom:1px solid var(--line)} .sdlog td{padding:7px 9px;border-bottom:1px solid var(--line-soft);vertical-align:top} .sdlog tr:last-child td{border-bottom:none} .sdlog .side-county{color:var(--collect);font-weight:600} .sdlog .side-serp{color:var(--accent);font-weight:600} .sdlog .side-mls{color:var(--pending);font-weight:600} /* On the market right now. The loudest line in the panel, because open money on a property that is being sold again is the strongest collection signal this system produces. */ .sd-live{margin:10px 0 0;padding:9px 11px;border-radius:2px;font-size:13px;line-height:1.5; color:var(--ink);background:var(--pending-bg);border:1px solid var(--pending)} .sdlog .nil td{color:var(--faint)} .talk .th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; font-weight:600;color:var(--ink);margin-bottom:6px} .talk p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)} /* ---- client portal ---- */ .clsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px} .clsum .box{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:15px 17px} .clsum .box.lead{border-left:4px solid var(--accent)} .clsum .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted)} .clsum .v{font-family:var(--mono);font-size:24px;font-weight:600;margin-top:3px;letter-spacing:-.015em; font-variant-numeric:tabular-nums} .clsum .s{font-size:12px;color:var(--muted);margin-top:2px} .clsum .box.aged .v{color:var(--pending)} td .flagbtn{font-family:var(--sans);font-size:12px;padding:4px 9px;border:1px solid var(--line); background:var(--surface);border-radius:2px;cursor:pointer;color:var(--ink-2);white-space:nowrap} td .flagbtn:hover{border-color:var(--accent);color:var(--accent)} .flagged{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase; padding:2px 7px;border-radius:2px;background:var(--accent-soft);color:var(--accent);font-weight:600} /* ---- modal ---- */ .mask{position:fixed;inset:0;background:rgba(10,20,28,.55);display:grid;place-items:center; z-index:100;padding:20px} .modal{background:var(--surface);border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow); width:100%;max-width:520px;max-height:88vh;overflow-y:auto;padding:24px 26px; border-top:3px solid var(--brand)} .modal.wide{max-width:1000px} .modal h3{font-family:var(--serif);font-size:23px;font-weight:500;margin-bottom:6px} .modal .sub{color:var(--muted);font-size:13.5px;margin-bottom:18px} .modal .actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)} .agentpick{max-height:210px;overflow-y:auto;border:1px solid var(--line);border-radius:2px; padding:8px;background:var(--surface2)} .agentpick label{display:flex;gap:9px;align-items:flex-start;padding:6px 7px;font-size:13px; cursor:pointer;border-radius:2px} .agentpick label:hover{background:var(--surface)} .agentpick input{width:auto;margin:2px 0 0} .agentpick .amt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted); white-space:nowrap} .linkbox{display:flex;gap:8px;align-items:center;margin-top:10px} .linkbox input{font-family:var(--mono);font-size:12px} /* Sub-tabs are real navigation, not a footnote. Two completely different CSV files land on the Sync page and a faint underline was not enough to tell them apart at a glance. These read as buttons: a box you can see when it is off, a filled one when it is on. */ .subtabs{display:inline-flex;gap:0;margin-bottom:22px;border:1px solid var(--line); border-radius:4px;overflow:hidden;background:var(--surface)} .subtabs button{padding:11px 22px;border:0;background:var(--surface);color:var(--muted); cursor:pointer;font-size:14.5px;font-weight:600;letter-spacing:.005em; border-bottom:0;margin-bottom:0;transition:background .12s,color .12s} .subtabs button+button{border-left:1px solid var(--line)} .subtabs button:hover{background:var(--surface2);color:var(--ink)} .subtabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);font-weight:700} .subtabs button[aria-selected="true"]:hover{background:var(--accent)} @media (max-width:560px){ .subtabs{display:flex;width:100%} .subtabs button{flex:1;padding:11px 10px;font-size:13.5px} } /* ---- message threads ---- */ .thread{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;padding:4px 2px} .post{max-width:78%;padding:11px 14px;border-radius:3px;font-size:14px;line-height:1.55} .post .ph{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);margin-bottom:5px} .post p{margin:0;color:var(--ink-2)} .post.them{background:var(--surface2);border:1px solid var(--line-soft);align-self:flex-start} .post.us{background:var(--accent-soft);border:1px solid var(--accent);align-self:flex-end} .post.us .ph{color:var(--accent)} .threadlist{display:flex;flex-direction:column;gap:8px} .thread-row{width:100%;text-align:left;background:var(--surface);border:1px solid var(--line); border-left:3px solid var(--accent);border-radius:3px;padding:13px 15px;cursor:pointer;color:inherit; font:inherit} .thread-row:hover{background:var(--surface2)} .tr-sub{font-size:12px;color:var(--faint);margin-top:3px} .tr-last{font-size:13px;color:var(--ink-2);margin-top:6px} /* ---- settings grid on the Verification tab ---- */ .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 18px} .grid2 .field{margin:0} .field span.hint{margin-top:5px;margin-bottom:0;font-family:var(--sans);font-size:11.5px; letter-spacing:0;text-transform:none;color:var(--faint);line-height:1.45} @media (max-width:720px){.grid2{grid-template-columns:1fr}} /* ---- Title Agents: grid or list ---- */ .pagehead{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .pagehead h2{margin:0} .viewswitch{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:3px; overflow:hidden} .viewswitch button{padding:5px 13px;border:0;background:var(--surface);color:var(--muted); cursor:pointer;font-size:12.5px;font-weight:500} .viewswitch button+button{border-left:1px solid var(--line)} .viewswitch button:hover{background:var(--surface2);color:var(--ink)} .viewswitch button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent); font-weight:600} .agenttbl td.chase{color:var(--pending);font-variant-numeric:tabular-nums} .agenttbl tr.mine td:first-child{box-shadow:inset 2px 0 0 var(--accent);font-weight:600} .agenttbl td.rowacts{width:1%} .agenttbl td.rowacts .acts{display:flex;gap:6px;align-items:center;justify-content:flex-end; flex-wrap:wrap} .agenttbl td.rowacts select{max-width:132px} .agenttbl th:first-child,.agenttbl td:first-child{max-width:380px} @media (max-width:720px){ .viewswitch{margin-left:0} .agenttbl td.rowacts{white-space:normal} } /* ---- Recent passes ---- Numbers in one tabular column each so the eye can run down them, the identifying columns left, and a row that did nothing visibly recedes. */ table.runs{table-layout:auto} table.runs th,table.runs td{vertical-align:baseline} table.runs td.when{white-space:nowrap;line-height:1.35} table.runs td.when .d{display:block;font-variant-numeric:tabular-nums} table.runs td.when .rel{display:block;font-size:11px;color:var(--faint)} table.runs td.dur,table.runs th:nth-child(2){width:1%;color:var(--muted)} table.runs td.who{font-size:12.5px;color:var(--muted);white-space:nowrap} table.runs td.n{width:1%;padding-left:22px} table.runs td.n.good{color:var(--collect)} table.runs td.n.bad{color:var(--danger)} table.runs td.how{font-size:12px;color:var(--muted);font-family:var(--mono)} table.runs tr.nil td{color:var(--faint)} table.runs tr.nil td.n.good{color:var(--faint)} @media (max-width:720px){ table.runs td.who,table.runs th:nth-child(3){display:none} table.runs td.n{padding-left:12px} } /* ---- build stamp in the top bar ---- Sits under the wordmark, quiet enough to ignore and specific enough to answer "am I looking at the new deploy or a cached page". */ .brand{position:relative} .brand .build{position:absolute;left:0;top:100%;margin-top:-1px; font-family:var(--mono);font-size:9px;letter-spacing:.09em;color:var(--faint); white-space:nowrap;pointer-events:none} .topbar{padding-bottom:15px} @media (max-width:720px){ .brand .build{position:static;display:block;margin-top:2px} .topbar{padding-bottom:10px} } /* ---- "a pass is running" indicator ---- Lives in the top bar so it is visible from every tab. It answers one question, "can I deploy right now", so it is loud enough to catch the eye and quiet enough not to nag when nothing is running (it is hidden then). */ .passlive{display:inline-flex;align-items:center;gap:9px;padding:4px 10px;border-radius:3px; background:var(--pending-bg);color:var(--pending);border:1px solid var(--pending); font-size:12px;white-space:nowrap} .passlive b{font-weight:600} .passlive .dot{width:7px;height:7px;border-radius:50%;background:var(--pending);flex:none; animation:passpulse 1.4s ease-in-out infinite} .passlive .bar{width:64px;height:4px;border-radius:2px;background:var(--line);overflow:hidden; flex:none} .passlive .bar i{display:block;height:100%;background:var(--pending);transition:width .4s ease} .passlive .warn{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase; font-weight:600} @keyframes passpulse{0%,100%{opacity:1}50%{opacity:.25}} @media (prefers-reduced-motion:reduce){.passlive .dot{animation:none}} @media (max-width:900px){ .passlive .bar,.passlive .warn{display:none} } /* ---- running-pass banner on the Verification tab ---- */ .running{border:1px solid var(--pending);background:var(--pending-bg);border-radius:3px; padding:16px 18px;margin-top:22px} .running .rh{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .running .rh h3{margin:0;font-size:16px;color:var(--pending)} .running .rh .note{margin-left:auto;font-size:12px;color:var(--muted)} .running .dot{width:9px;height:9px;border-radius:50%;background:var(--pending);flex:none; animation:passpulse 1.4s ease-in-out infinite} .running .rbar{height:7px;border-radius:4px;background:var(--surface);overflow:hidden; margin-top:13px;border:1px solid var(--line)} .running .rbar i{display:block;height:100%;background:var(--pending);transition:width .5s ease} .running .rfoot{display:flex;justify-content:space-between;gap:12px;margin-top:7px; font-family:var(--mono);font-size:11.5px;color:var(--muted);flex-wrap:wrap} .running p.lede{color:var(--ink)} @media (max-width:720px){.running .rh .note{margin-left:0;width:100%}} /* ---- Title Agents: sorting and column definitions ---- */ .sortbar{display:inline-flex;align-items:center;gap:8px;margin-left:auto} .sortbar label{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--muted)} .sortbar select{width:auto;min-width:130px;padding:5px 9px;font-size:12.5px} .sortbar+.viewswitch{margin-left:12px} .sortbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer; display:inline-flex;align-items:center;gap:5px} .sortbtn:hover{color:var(--accent)} .sortbtn[aria-pressed="true"]{color:var(--accent)} .agenttbl th.n .sortbtn,th.n .sortbtn{justify-content:flex-end;width:100%} .sarrow{font-size:9px;line-height:1} .defs{border:1px solid var(--line);border-radius:3px;background:var(--surface); padding:14px 18px;margin-top:22px} .defs h4{margin:0 0 9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);font-weight:600} .defs dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline} .defs dt{font-weight:600;white-space:nowrap} .defs dd{margin:0;color:var(--muted);font-size:13px;line-height:1.5} @media (max-width:720px){ .sortbar{margin-left:0;width:100%} .sortbar select{flex:1} .sortbar+.viewswitch{margin-left:0} .defs dl{grid-template-columns:1fr;gap:2px} .defs dd{margin-bottom:8px} } /* ---- Ask AI ---- */ .askbox{border:1px solid var(--line);border-radius:3px;background:var(--surface);padding:16px 18px} .askrow{display:flex;gap:10px} .askrow input{flex:1} .askrow .btn{white-space:nowrap} .askex{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .exq{border:1px solid var(--line);background:var(--surface2);color:var(--muted); border-radius:99px;padding:5px 12px;font-size:12px;cursor:pointer;line-height:1.3;text-align:left} .exq:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .askans{margin-top:15px;padding-top:14px;border-top:1px solid var(--line)} .askans p{margin:0;font-size:15px;line-height:1.55} .askans.thinking p{color:var(--muted);font-size:13.5px} .askwork{margin-top:12px} .askwork summary{cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);user-select:none} .askwork summary:hover{color:var(--accent)} .askwork pre{margin:10px 0 0;padding:11px 13px;background:var(--surface2);border:1px solid var(--line); border-radius:3px;font-family:var(--mono);font-size:11.5px;line-height:1.55;overflow-x:auto; white-space:pre-wrap;word-break:break-word;color:var(--ink)} .askwork .lede{margin:9px 0 0;font-size:12.5px} table.askres{margin-top:11px;font-size:12.5px} table.askres th{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase} table.askres td{font-variant-numeric:tabular-nums} @media (max-width:720px){ .askrow{flex-wrap:wrap} .askrow input{flex:1 1 100%} } /* ---- one title agent ---- */ .crumb{margin-bottom:10px} .linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer; text-align:left} .linkish:hover{text-decoration:underline} .agentlink{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer; text-align:left} .agentlink:hover{color:var(--accent);text-decoration:underline} .agentcard .nm.agentlink{display:block;width:100%} .notecard{border:1px solid var(--line);border-radius:3px;background:var(--surface); padding:11px 13px;margin-bottom:9px} .notecard .nh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px} .notecard .nh span{font-size:11.5px;color:var(--faint);margin-left:auto;white-space:nowrap} .notecard p{margin:0;font-size:13.5px;line-height:1.5;white-space:pre-wrap} /* ---- sales hold and the sales/collections thread ---- */ .holdbox{border:1px solid var(--pending);background:var(--pending-bg);border-radius:3px; padding:13px 16px;margin:14px 0} .holdbox .hh{font-weight:600;color:var(--pending)} .holdbox p{margin:6px 0 0;font-size:13.5px;line-height:1.5} .holdbox .hf{margin-top:7px;font-size:12px;color:var(--muted)} .repthread{display:flex;flex-direction:column;gap:9px;margin-top:4px} .repthread .post{max-width:92%} .repthread .post.them{align-self:flex-start} .repthread .post.us{align-self:flex-end} /* ---- day-of-week picker on the Email tab ---- Seven buttons rather than a dropdown, because "every weekday" should be one gesture and a cron string in a settings box is a support ticket. */ .daypick{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .daypick button{padding:8px 0;width:52px;border:1px solid var(--line);background:var(--surface); color:var(--muted);border-radius:3px;cursor:pointer;font-size:13px;font-weight:600} .daypick button:hover{background:var(--surface2);color:var(--ink)} .daypick button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent); color:var(--accent-ink)} /* ---- the green / yellow / red rating ---- */ .rate{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px; letter-spacing:.07em;text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:2px; border:1px solid currentColor} .rate .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .rate.r-green{color:var(--collect);background:var(--collect-bg)} .rate.r-yellow{color:var(--pending);background:var(--pending-bg)} .rate.r-red{color:var(--danger);background:var(--danger-bg)} .rate.hand{border-style:dashed} /* ---- rating explanation and control on the agent page ---- */ .ratebox{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin:14px 0 0; padding:12px 15px;background:var(--surface);border:1px solid var(--line);border-radius:3px} .rb-why{flex:1 1 320px;min-width:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)} .rb-why b{color:var(--ink)} .rb-set{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .rb-set select{max-width:190px} .rb-set input{min-width:200px;flex:1 1 200px} .rate.r-none{color:var(--muted);background:var(--surface2)} /* The from-address and base URL are long strings, not figures. Shrunk and allowed to wrap so they read as text rather than being cut off mid-domain. */ .kpi.text .v{font-size:14px;font-weight:600;letter-spacing:0;overflow-wrap:anywhere;line-height:1.4} /* ---- who owns the account, on the agent card ---- Small and quiet: it is the thing you check before dialling, not the thing you are scanning for. */ .agentcard .owners{font-size:12px;color:var(--muted);margin:-2px 0 10px;line-height:1.5} .agentcard .owners b{color:var(--ink);font-weight:600} /* ---- the order-year filter bar ---- Same control as the other sub-tabs, but it has to hold a download button on the right, so it stretches instead of hugging its buttons. */ .yearbar{display:flex;width:100%;align-items:center;border:0;padding:0;margin-bottom:20px;gap:0} .yearbar button[data-year]{border:1px solid var(--line);border-right:0} .yearbar button[data-year]:first-of-type{border-radius:3px 0 0 3px} .yearbar button[data-year]:last-of-type{border-right:1px solid var(--line);border-radius:0 3px 3px 0} .yearbar .btn{margin-left:auto;text-decoration:none} @media (max-width:720px){ .yearbar{flex-wrap:wrap;gap:8px} .yearbar .btn{margin-left:0} } /* The good case needs a box too. Without one, a page where everything is working looks the same as a page nobody has checked. */ .okbox{padding:12px 15px;background:var(--collect-bg);border-left:3px solid var(--collect); color:var(--ink-2);font-size:13.5px;border-radius:2px;margin-bottom:16px;line-height:1.6} /* The parked-accounts toggle, sitting in the order-year bar. */ .parkedtog{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted); margin-left:18px;cursor:pointer;white-space:nowrap} .parkedtog input{margin:0} .parkedtog .note{color:var(--faint)} @media (max-width:720px){ .parkedtog{margin-left:0;width:100%} } /* ---- the estoppel alarm ---------------------------------------------- Full width and above the KPI grid on purpose. A duplicate estoppel order is close to proof that a deal died and a certificate went with it, and the money is refundable for about sixty days from a closing date nobody is watching. A tile in a grid of fourteen tiles is something you scan past. This is something somebody has to act on this week. */ .estoppel-alarm{display:flex;align-items:center;gap:16px;width:100%;text-align:left; background:var(--danger-bg);border:1px solid var(--danger);border-left-width:4px; border-radius:3px;padding:14px 18px;margin:0 0 12px;cursor:pointer;font:inherit;color:inherit} .estoppel-alarm:hover{background:var(--danger-bg);filter:brightness(.98)} .estoppel-alarm .ea-n{font-family:var(--mono);font-size:34px;font-weight:600;color:var(--danger); line-height:1;font-variant-numeric:tabular-nums;flex:0 0 auto} .estoppel-alarm .ea-body{flex:1;min-width:0} .estoppel-alarm .ea-body b{display:block;font-size:15px;color:var(--ink);margin-bottom:3px} .estoppel-alarm .ea-body span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5} .estoppel-alarm .ea-go{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--danger); white-space:nowrap} @media (max-width:700px){ .estoppel-alarm{flex-wrap:wrap;gap:10px} .estoppel-alarm .ea-go{width:100%} } /* The refund clock is urgent rather than alarming: there is still time. */ .estoppel-clock{display:block;width:100%;text-align:left;background:var(--pending-bg); border:1px solid var(--pending);border-left-width:4px;border-radius:3px; padding:12px 18px;margin:0 0 12px;cursor:pointer;font:inherit;color:inherit} .estoppel-clock b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px} .estoppel-clock span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5} /* Waiting on the feed. Deliberately not styled as a warning: nothing is wrong, the data simply is not here yet, and it explains why rather than showing a zero somebody would read as good news. */ .estoppel-wait{background:var(--surface2);border:1px solid var(--line);border-radius:3px; padding:14px 18px;margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.6} .estoppel-wait b{color:var(--ink)} .estoppel-wait p{margin:0 0 8px} .estoppel-wait p:last-child{margin-bottom:0} .estoppel-wait code{font-family:var(--mono);font-size:12px;background:var(--sunk); padding:1px 5px;border-radius:2px} /* ---- sub tabs, inside a page ---- */ .subtabs{display:flex;flex-wrap:wrap;gap:4px;margin:18px 0 0;border-bottom:1px solid var(--line)} .subtab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px; font:inherit;font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:-1px} .subtab:hover{color:var(--ink)} .subtab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)} /* A KPI tile that is also a door into the list behind it. */ .kpi.kpilink{cursor:pointer;text-align:left;font:inherit;width:100%;display:block; transition:border-color .12s ease, transform .12s ease} .kpi.kpilink:hover{border-color:var(--accent);transform:translateY(-1px)} .kpi.kpilink::after{content:"\2192";float:right;margin-top:-18px;color:var(--faint);font-size:13px} /* "Still a client?" column on the at-risk list. */ .qtag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.04em; padding:2px 7px;border-radius:2px;margin-right:6px; background:var(--accent-soft);color:var(--accent)} .qnote{font-size:11px;color:var(--muted);line-height:1.45;margin-bottom:5px} .btn.xs{padding:3px 9px;font-size:11.5px;line-height:1.5} /* The badge on the agent record itself. */ .qualiabanner{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft); border-left:3px solid var(--accent);border-radius:3px;padding:10px 14px;margin:0 0 12px; font-size:12.5px;color:var(--ink-2);line-height:1.5} .qualiabanner b{color:var(--ink)} /* Total row at the foot of a report table. Reports are read bottom-up as often as top-down and the eye needs somewhere to land. */ tr.tot td{border-top:2px solid var(--line);font-weight:600; background:color-mix(in srgb, var(--panel) 80%, var(--bg))} tr.tot td .note{font-weight:400} /* The agent search. Full width because the thing people type is a company name, and company names are long. */ .searchbar{display:flex;gap:10px;align-items:center;margin:14px 0 4px} .searchbar input{flex:1;min-width:0;font-size:14px;padding:10px 12px} .searchbar .note{white-space:nowrap} /* The "you are looking at an old build" bar. Deliberately not a toast: a toast disappears, and the whole problem is somebody reading a stale page for twenty minutes without knowing it. */ .buildbar{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center; gap:14px;padding:11px 18px;font-size:13px;line-height:1.5;color:var(--ink); background:var(--pending-bg);border-top:1px solid var(--pending)} .buildbar span{flex:1} /* ===================================================================== PropOp look (2026-09-23) Max's brief: Prop-AR should look like PropOp, PropLogix's own ops app. So this layer takes PropOp's "plx-dark" theme tokens as they are in PropOp's app/globals.css (surfaces, table head, text, the green, the orange and the rose) and its shapes: rounded panels (14px), cards (11px), pill filters, Outfit throughout. Dark is now the default, as it is in PropOp; the Theme button still switches to light. Everything above is untouched, so removing this block restores the previous look exactly. Kept to tokens and shape: no markup changes. ===================================================================== */ :root{ --sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* Labels and figures were monospace. PropOp sets both in Outfit with tabular figures, which keeps columns aligned without the typewriter look. Real code still gets a monospace face, below. */ --mono:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --brandfont:"Outfit","Poppins",-apple-system,sans-serif; --r-panel:14px; --r-card:11px; --r-ctl:9px; --r-pill:28px; } :root[data-theme="dark"]{ --brand:#4CB97F; --brand-ink:#0D1A21; --brand-dark:#0D1A21; --brand-deep:#8FD6B0; --brand-warm:#F28F00; --ground:#0F1E21; --surface:#16262E; --surface2:#1F3541; --sunk:#0D1A21; --line:#2A4653; --line-soft:rgba(255,255,255,.06); /* faint is lifted from PropOp's value so small labels and hints clear WCAG 4.5:1 on every dark surface here (worst case 4.61, on the tiles). */ --ink:#FFFFFF; --ink-2:#B7CBD2; --muted:#8FA9B2; --faint:#83A0AB; --accent:#4CB97F; --accent-soft:rgba(76,185,127,.14); --accent-ink:#0D1A21; /* Collected stays a different green from the buttons, the rule the original file set out: PropOp's teal "success" does that job. */ --collect:#3AB9A6; --collect-bg:rgba(58,185,166,.14); --pending:#F28F00; --pending-bg:rgba(242,143,0,.14); --canceled:#8FA9B2; --canceled-bg:rgba(143,169,178,.12); --unclear:#B29CE2; --unclear-bg:rgba(178,156,226,.14); --noclose:#7FC4D6; --noclose-bg:rgba(127,196,214,.12); --danger:#F4809F; --danger-bg:rgba(223,15,76,.14); --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.25); --topbar-bg:#0D1A21; --table-head:#2A4653; } /* Painted on , not : body is only one screen tall (height:100%), so a background on it stopped at the fold and a long page showed a band where the root colour took over. The root background covers the whole scrollable canvas. */ :root[data-theme="dark"]{background:#0A0F14 linear-gradient(180deg,#0F1E21 0,#0A0F14 900px) no-repeat} :root[data-theme="dark"] body{background:transparent} body{font-family:var(--sans);letter-spacing:.005em} code,pre,kbd{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace} .num,.kpi .v,.stat .v,td.n,.qi .amt,.dhead .owed,.synccard .when{font-variant-numeric:tabular-nums} /* Headings: PropOp sets them in the sans at a medium weight, not a serif. */ .page h2,.sheet h2,.signin h1,.dhead h2,.empty h2{font-weight:500;letter-spacing:-.01em} .page h2{font-size:30px} .sechead h3{font-weight:500;font-size:19px} /* Top bar */ :root[data-theme="dark"] .topbar{background:var(--topbar-bg);border-bottom-color:var(--line-soft)} .tab{border-radius:var(--r-pill);padding:6px 13px;font-weight:500} .tab.mgr{border-left:0;padding-left:13px} /* The two-pane pages draw their 1px dividers by letting the grid's own background show through the gap. PropOp's line colour is much brighter than the old one, so on dark that background showed as a slab wherever a pane was shorter than its neighbour. Divider by border instead. */ :root[data-theme="dark"] .main{background:var(--ground)} :root[data-theme="dark"] .queue{border-right:1px solid var(--line-soft)} /* Controls */ .btn{border-radius:var(--r-ctl);font-weight:600} .btn.sm{border-radius:8px} input,select,textarea{border-radius:var(--r-ctl)} :root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{ background:#16262E;border-color:#33525F;color:var(--ink)} .msg{border-radius:var(--r-ctl)} .toast{border-radius:var(--r-ctl)} /* Filter chips become pills, the active one filled green as in PropOp. */ .chip{border-radius:var(--r-pill);padding:5px 11px;letter-spacing:.03em} .st,.flag,.why,.verd{border-radius:var(--r-pill)} /* Panels and cards */ .signin-card,.evidence,.form,.synccard,.okbox,.warnbox,.agentcard,.dcard{border-radius:var(--r-panel)} .kpi{border-radius:var(--r-card);padding:14px 16px 13px} :root[data-theme="dark"] .kpi{background:#1B2F3A;border-color:transparent} .kpi .k{letter-spacing:.1em;font-weight:500} .kpi .v{font-size:25px;font-weight:600} .fact{border-radius:8px} .qi{border-radius:var(--r-card)} /* Tables: rounded wrapper, tinted head, hairline rows. */ .tblwrap{border-radius:var(--r-panel);border:1px solid var(--line)} .tblwrap table{border:0} :root[data-theme="dark"] th{background:var(--table-head);color:#B7CBD2} th{font-weight:500;letter-spacing:.09em} :root[data-theme="dark"] tbody tr:hover td{background:rgba(255,255,255,.025)} @media (prefers-reduced-motion:no-preference){ .btn,.tab,.chip{transition:background-color .15s,color .15s,border-color .15s} } /* ===================================================================== PropOp shell: left sidebar (2026-09-23) The thirteen pages lived in one top row that wrapped at laptop widths. They now sit in a left sidebar, grouped, each with a line icon drawn in the house mark's pen, the way PropOp lays out its own navigation. The sidebar collapses to an icon rail on a wide screen (remembered per browser) and becomes a drawer over the page on a narrow one. The client portal keeps its simple top bar; only the staff app changes. ===================================================================== */ :root{--sidew:236px;--side-bg:var(--surface)} :root[data-theme="dark"]{--side-bg:#0D1A21} #view-app:not(.hidden){display:grid;grid-template-columns:var(--sidew) minmax(0,1fr);min-height:100vh} .shell{min-width:0;display:flex;flex-direction:column} .side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column; background:var(--side-bg);border-right:1px solid var(--line-soft);overflow-y:auto;overflow-x:hidden;z-index:50} .side-brand{display:flex;align-items:center;gap:12px;padding:20px 20px 14px} .side-brand .plmark-ar{width:29px;height:40px;flex:none;color:var(--brand)} .side-name{display:flex;flex-direction:column;line-height:1.2;min-width:0} .side-name .plname{font-family:var(--brandfont);font-weight:600;font-size:16.5px;letter-spacing:-.01em;color:var(--ink)} .side-name .prod{font-size:13px;color:var(--muted)} .sidenav{display:flex;flex-direction:column;gap:2px;padding:2px 12px 18px;flex:1} .navgroup{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase; color:var(--faint);padding:16px 10px 6px} .sidenav .tab,.sidenav .tab.mgr{display:flex;align-items:center;gap:11px;width:100%;text-align:left; padding:8px 11px;border:0;border-radius:10px;background:none;color:var(--ink-2); font-size:14px;font-weight:500;line-height:1.25} .sidenav .tab:hover{background:var(--surface2);color:var(--ink)} .navicon{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .navlabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sidenav .tab .pill{margin-left:auto;font-family:var(--sans);font-size:11.5px;opacity:.9} .side-foot{display:flex;align-items:center;gap:10px;padding:10px 14px 14px;border-top:1px solid var(--line-soft)} .side-foot .build{font-family:var(--sans);font-size:11px;color:var(--faint);margin-left:auto} .side-toggle,.side-open{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; flex:none;border:1px solid var(--line-soft);border-radius:9px;background:none;color:var(--muted);cursor:pointer} .side-toggle:hover,.side-open:hover{color:var(--ink);background:var(--surface2)} .side-toggle svg,.side-open svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .side-open{display:none} #view-app .topbar{flex-wrap:nowrap;padding:12px 26px;gap:14px;min-height:60px} /* The two-pane pages (queue, follow-ups) run their panes to the bottom of the window instead of stopping where the content does. */ #main > .main{min-height:calc(100vh - var(--topbar,60px));align-items:stretch;align-content:stretch} .pagetitle{margin:0;font-size:18px;font-weight:500;letter-spacing:-.005em;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-app .topbar .who{flex-wrap:nowrap;white-space:nowrap} @media (min-width:901px){ :root.side-collapsed{--sidew:74px} :root.side-collapsed .side-name,:root.side-collapsed .navlabel, :root.side-collapsed .side-foot .build,:root.side-collapsed .sidenav .tab .pill{display:none} :root.side-collapsed .side-brand{justify-content:center;padding:18px 0 12px} :root.side-collapsed .sidenav{padding:2px 12px 18px} :root.side-collapsed .sidenav .tab{justify-content:center;padding:10px 0} /* Group headings become a hairline, so the rail keeps its sections. */ :root.side-collapsed .navgroup{font-size:0;padding:0;height:1px;margin:10px 8px;background:var(--line-soft)} :root.side-collapsed .side-foot{justify-content:center;padding:10px 0 14px} :root.side-collapsed .side-toggle svg{transform:rotate(180deg)} } @media (max-width:900px){ #view-app:not(.hidden){grid-template-columns:minmax(0,1fr)} .side{position:fixed;left:0;top:0;bottom:0;width:272px;height:auto; transform:translateX(-102%);box-shadow:var(--shadow);z-index:70} :root.nav-open .side{transform:none} .side-scrim{position:fixed;inset:0;background:rgba(5,10,14,.55);z-index:65} .side-open{display:inline-flex} #view-app .topbar{padding:10px 14px;flex-wrap:wrap} #view-app .topbar .who{width:auto;margin-left:auto;flex-wrap:wrap;justify-content:flex-end} } @media (max-width:560px){ #view-app .topbar #who{display:none} } @media (prefers-reduced-motion:no-preference){ .side{transition:transform .22s ease} #view-app:not(.hidden){transition:grid-template-columns .18s ease} } .linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline} /* A test copy says so, loudly: the badge by the name, a stripe down the sidebar and on the sign-in card, and the word in the tab title. Only shown when the server says this is not the live environment. */ .envbadge{display:none;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700; letter-spacing:.08em;vertical-align:1px;background:#F28F00;color:#0D1A21} :root[data-env="dev"] .envbadge,:root[data-env="stage"] .envbadge,:root[data-env="qa"] .envbadge{display:inline-block} :root[data-env="dev"] .side,:root[data-env="stage"] .side,:root[data-env="qa"] .side{box-shadow:inset 3px 0 0 #F28F00} :root[data-env="dev"] .signin-card,:root[data-env="stage"] .signin-card{border-top-color:#F28F00} :root[data-env="dev"] .signin-card .kick::after{content:" \00B7 DEV";color:#F28F00;font-weight:700} /* ===================================================================== UI audit pass (2026-09-23) What the full page-by-page review on DEV found, fixed in one layer at the end so it wins over both the original rules and the PropOp layer without anybody having to untangle the three. Each block says what it fixes. ===================================================================== */ /* the browser draws its own controls (date pickers, file inputs, scrollbars) for the theme actually showing. */ :root[data-theme="dark"]{color-scheme:dark} :root[data-theme="light"]{color-scheme:light} input[type=file]{padding:6px} input[type=file]::file-selector-button{font:inherit;font-size:13px;font-weight:600;margin-right:10px; padding:6px 12px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface2); color:var(--ink);cursor:pointer} /* the summary cards used to pick up the case pane's big padding, because both call their body "detail". */ .synccard .detail{padding:0;max-width:66ch} /* one sub-tab control for every page. Two different rule sets were fighting over .subtabs: a boxed bar that ran the full width and swallowed the underline that showed which tab was on. Now they are all the same pills as the queue's filters. */ .subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0;border:0;border-radius:0; background:none;overflow:visible;width:auto} .subtabs button,.subtabs .subtab{padding:7px 14px;margin:0;border:1px solid var(--line); border-radius:var(--r-pill);background:var(--surface);color:var(--muted);font:inherit; font-size:13.5px;font-weight:500;line-height:1.3;cursor:pointer;flex:0 1 auto} .subtabs button+button{border-left:1px solid var(--line)} .subtabs button:hover,.subtabs .subtab:hover{background:var(--surface2);color:var(--ink)} .subtabs button[aria-selected="true"],.subtabs .subtab.on, .subtabs button[aria-selected="true"]:hover{background:var(--accent-soft);border-color:var(--accent); color:var(--accent);font-weight:600} .kpis + .subtabs,.estoppel-wait + .subtabs{margin-top:24px} .subtabs.yearbar{align-items:center;margin-bottom:16px} .subtabs.yearbar button[data-year],.subtabs.yearbar button[data-year]:first-of-type, .subtabs.yearbar button[data-year]:last-of-type{border:1px solid var(--line);border-radius:var(--r-pill)} .subtabs.yearbar button[aria-selected="true"]{border-color:var(--accent)} .subtabs.yearbar .btn{margin-left:auto} @media (max-width:560px){.subtabs button,.subtabs .subtab{flex:0 1 auto;padding:7px 12px;font-size:13px}} /* the corners the PropOp layer missed. */ .modal,.drop,.askbox,.running,.ratebox,.defs,.clsum .box,.holdbox{border-radius:var(--r-panel)} .notecard,.lastsale,.talk,.script,.sdlog,.sd-live,.qualiabanner,.thread-row,.post, .estoppel-alarm,.estoppel-clock,.estoppel-wait,.buildbar{border-radius:var(--r-card)} .sdbadge,.pw,.daypick button,td .flagbtn,.linkbox input{border-radius:var(--r-ctl)} .viewswitch{border-radius:var(--r-pill)} .viewswitch button{padding:6px 14px} .viewswitch button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600} /* nothing smaller than 11px, and less letter-spacing. Status pills read in the case they were written in. */ .st,.flag,.why,.flagged,.rolebadge,.rate{font-family:var(--sans);font-size:11px;letter-spacing:.02em; text-transform:none;padding:2px 8px} .verd{font-size:11px;letter-spacing:.05em} .chip{font-family:var(--sans);font-size:12px;letter-spacing:.01em;text-transform:none} .fact .k,.kpi .k,.stat .k,.dcard .k,.clsum .k,.lastsale .k,.synccard .lab,.agentcard .fig .k, .talk .th,.evidence h3,.form h3,.log h3,.dualbar .tag,.field span,.sortbar label,.post .ph, .askwork summary,.sdbadge .more,.sdlog th,th,.dhead .eyebrow,.passlive .warn{font-size:11px;letter-spacing:.06em} /* classes the markup used that had no styles behind them. */ .note{font-size:12px;color:var(--muted)} p.note{font-size:13px;line-height:1.55;max-width:80ch} .msg{background:var(--surface2);border:1px solid var(--line);color:var(--ink-2);line-height:1.55} .msg.good{background:var(--collect-bg);border-color:var(--collect);color:var(--ink)} .msg.warn{background:var(--pending-bg);border-color:var(--pending);color:var(--ink)} tr.tot td{background:var(--surface2)} .count{font-size:12px;color:var(--faint);align-self:center} /* a link styled as a button is a button, not underlined text. */ .btn,a.btn:hover{text-decoration:none} /* the rating chip hugs its text instead of stretching across the card. */ .agentcard .rate,.agentcard > .st{align-self:flex-start} /* tiles that are also links line up with the tiles that are not, and look clickable. */ .kpi.kpilink{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch; position:relative;color:var(--ink)} .kpi.kpilink::after{position:absolute;top:13px;right:14px;float:none;margin:0;color:var(--muted)} .kpi.kpilink:hover::after{color:var(--accent)} .kpi.kpilink .k{padding-right:18px} /* one colour per meaning. Sold unpaid is the collect colour everywhere, and a nought gets no colour at all. */ .agenttbl td.chase{color:var(--collect)} .kpi.zero .v,.ttile.zero .v{color:var(--muted)} /* smaller mismatches. */ .dhead{border-bottom:1px solid var(--line)} .form .sechead h3{font-family:var(--sans);text-transform:none;letter-spacing:-.005em;font-size:17px; color:var(--ink);font-weight:500;margin:0} .sortbtn{text-transform:inherit;letter-spacing:inherit;font-weight:inherit} .ratebox{margin:14px 0 18px} .owed-sub{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--muted)} .subname{font-size:12.5px;color:var(--muted);margin-top:2px} .pagehead > div > h2{margin:0} /* Utility colours, so the markup stops carrying inline styles. */ .t-muted{color:var(--muted)} .t-faint{color:var(--faint)} .t-warn{color:var(--pending)} .t-collect{color:var(--collect)} .t-danger{color:var(--danger)} .mono{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums} td.sm{font-size:12.5px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* toasts stack in one live region, stay long enough to read, and can be dismissed. */ .toasts{position:fixed;top:calc(var(--topbar,60px) + 10px);right:18px;z-index:120;display:flex; flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;max-width:min(440px,calc(100vw - 32px))} .toasts > div{display:flex;flex-direction:column;gap:8px;align-items:flex-end} @media (max-width:900px){.toasts{left:12px;right:12px;max-width:none;align-items:stretch} .toasts > div{align-items:stretch}} /* A toast lets taps through to whatever it sits on (the file's agent link, Back to the list); only its own buttons take a click. */ .toasts .toast{position:static;transform:none;display:flex;align-items:center;gap:12px;pointer-events:none; box-shadow:var(--shadow)} .toasts .toast-x,.toasts .toast-act{pointer-events:auto} .toast-x{background:none;border:0;color:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:.7;padding:0 2px} .toast-x:hover{opacity:1} /* nothing scrolls behind an open dialog. */ html.modal-open{overflow:hidden} .modal:focus{outline:none} /* the dashboard opens on the reader's own day. */ .today{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent); border-radius:var(--r-panel);padding:16px 18px;margin:0 0 18px} :root[data-theme="dark"] .today{background:#1B2F3A;border-color:transparent;border-left-color:var(--accent)} .today-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between} .today-head h3{font-size:19px;font-weight:500;margin:0} .today-head .note{font-size:13px} .today-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:14px} .ttile{display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;color:var(--ink);cursor:pointer; background:var(--surface2);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:12px 14px; transition:border-color .12s ease} .ttile:hover{border-color:var(--accent)} .ttile .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500} .ttile .v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .ttile .s{font-size:12px;color:var(--muted)} .ttile.warn .v{color:var(--pending)} .ttile.good .v{color:var(--collect)} .ttile.accent .v{color:var(--accent)} .kgroup{margin-top:22px} .kgroup > h3{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted); margin:0 0 10px} /* the call record's controls are pinned to the bottom of the case pane, so Status, the follow-up date and Save are always in reach. */ .savebar{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px; margin:22px -24px -60px;padding:12px 24px 14px;background:var(--surface);border-top:1px solid var(--line); box-shadow:0 -10px 28px rgba(0,0,0,.18)} :root[data-theme="dark"] .savebar{background:#132229} .sb-field{display:flex;flex-direction:column;gap:4px;margin:0} .sb-field span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .sb-field select,.sb-field input{width:auto;min-width:150px} .sb-week{align-self:flex-end;margin-bottom:5px} .sb-acts{display:flex;gap:8px;margin-left:auto} .savebar .saveinfo{flex-basis:100%;margin:0;text-align:right} .saveinfo.dirty{color:var(--pending);font-weight:600} details.research{margin-top:14px} details.research > summary,details.howto > summary,details.askadmin > summary, details.defs > summary,.morefilters > summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent); user-select:none;list-style-position:inside} details.research[open] > summary{margin-bottom:10px} details.howto{margin:0 0 12px} details.askadmin{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)} details.askadmin .inline{margin-top:10px;align-items:flex-end} .askoff{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between} .hintmore{margin-top:6px} .hintmore > summary{cursor:pointer;font-size:11.5px;color:var(--accent);user-select:none} .hintmore p{font-size:11.5px;line-height:1.5;color:var(--faint);margin:6px 0 0} .fixline{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:90ch} .fixline .why{margin-right:6px} /* The HOA refund queue. One row per claim, and a row opens in place rather than in a pane, because the thing being read is an email and an email is the width of the page. */ .hoarow{border:1px solid var(--line);border-radius:10px;background:var(--surface); margin-bottom:10px;overflow:hidden} .hoamain{display:flex;gap:14px;align-items:flex-start;justify-content:space-between; padding:12px 14px;cursor:pointer} .hoamain:hover{background:var(--surface-2,rgba(0,0,0,.02))} .hoaright{text-align:right;white-space:nowrap} .hoaopen{border-top:1px solid var(--line);padding:14px} /* The claim that is open. Zaryan, 9 Oct: "Because the order I have open is not highlighted in any way, it was hard to scroll back to find." A coloured edge, and a bar that stays at the top while you scroll inside it. */ .hoarow.on{border:2px solid var(--brand);box-shadow:0 2px 14px rgba(0,0,0,.08);overflow:visible} .hoarow.on > .hoamain{background:var(--accent-soft)} .hoabar{position:sticky;top:var(--topbar,0);z-index:5;display:flex;gap:10px;align-items:center; justify-content:space-between;padding:8px 14px;background:var(--accent);color:var(--accent-ink); font-size:13px} .hoabar b{color:var(--accent-ink)} .hoabar .btn{background:#fff;color:var(--accent);border-color:#fff} .hoarules{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 12px; background:var(--panel)} .hoarules li{margin:3px 0;font-size:13.5px;line-height:1.5} .hoarules li.stop{color:#B4232A;font-weight:600} .hoarules li.warn{font-weight:600} .hoasearchbar{display:flex;gap:8px;align-items:center;margin:12px 0 4px;max-width:640px} .hoasearchbar input{flex:1} .hoafind{margin:6px 0 10px} .hoaedit textarea{width:100%;min-height:220px;font:400 13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace} .hoadetail .actions{margin-top:10px} .hoapreview{width:100%;height:520px;border:1px solid var(--line);border-radius:10px;background:#fff} /* The PLSos order notes. Free text somebody typed in another system, so it is shown as typed: pre-wrap keeps the line breaks that make "spoke to Brenda, she wants it faxed" readable, and the scroll cap stops a long history pushing the send button off the screen. */ .hoanotes{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:10px; background:var(--panel)} .hoanote{padding:10px 14px;border-bottom:1px solid var(--line)} .hoanote:last-child{border-bottom:0} .hoanote pre{white-space:pre-wrap;word-break:break-word;margin:3px 0 0; font:400 13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)} /* The hoa_emails string exactly as an operator typed it. Shown before the buttons built from it, so a bad split is visible rather than invisible. */ .hoaraw{margin:0 0 8px;padding:10px 14px;border:1px solid var(--line);border-radius:10px; background:var(--panel);word-break:break-word; font:400 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)} /* HOA Settings: the twelve emails, one open at a time. Folded by default because the page's job is "which one do I want", not "read all twelve". The one you open is the one you are changing. */ details.hoatpl{border:1px solid var(--line);border-radius:10px;background:var(--surface); padding:12px 16px;margin-bottom:8px} details.hoatpl > summary{cursor:pointer;user-select:none;display:flex;gap:10px; align-items:baseline;flex-wrap:wrap;font-size:14px} details.hoatpl[open] > summary{margin-bottom:12px;padding-bottom:10px; border-bottom:1px solid var(--line-soft)} details.hoatpl .field{margin-bottom:12px} details.hoatpl textarea{font:400 13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace} /* The furniture switches. Checkboxes in a row, not a grid: there are three and they belong to the template above them. */ .chk{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2); cursor:pointer;white-space:nowrap} .chk input{width:auto;flex:0 0 auto;margin:0} /* Picking several messages at once. The tick sits over the row's left edge, outside the