/* Inter, self-hosted. The stack named it for years without ever loading it, so every
screen has been rendering in the OS UI font. Variable 400-700 in one file per subset,
which covers the 550/620/650 weights the components ask for without extra requests. */
@font-face{
font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
src:url("/static/fonts/inter-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
U+FEFF,U+FFFD;
}
@font-face{
font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
src:url("/static/fonts/inter-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ====================================================== design tokens ==== */
/* One place to change how the product looks. The scales below are the whole system:
components reference them and hold no colours, radii or shadows of their own. */
:root{
/* --- palette ------------------------------------------------------------
Blue is the brand and every primary action. Green means success, completion
and a positive financial movement -- it is never an action colour. Amber is
attention, red is destructive, and purple is a restrained secondary accent
reserved for what the AI layer contributes. */
--blue-50:#EFF6FF; --blue-100:#DBEAFE; --blue-200:#BFDBFE; --blue-400:#60A5FA;
--blue-500:#3B82F6; --blue-600:#2563EB; --blue-700:#1D4ED8;
--green-50:#ECFDF5; --green-100:#D1FAE5; --green-200:#A7F3D0;
--green-500:#10B981; --green-600:#059669; --green-700:#047857;
--amber-50:#FFFBEB; --amber-100:#FEF3C7; --amber-200:#FDE68A;
--amber-600:#D97706; --amber-700:#B45309;
/* Orange exists for one job: the Operating Expenses metric tile. Amber at the 200
step reads yellow at 38px; the reference is a warm orange. Not a status colour. */
--orange-200:#FED7AA; --orange-700:#C2410C;
--red-50:#FEF2F2; --red-100:#FEE2E2; --red-200:#FECACA;
--red-600:#DC2626; --red-700:#B91C1C;
--purple-50:#F5F3FF; --purple-100:#EDE9FE; --purple-200:#DDD6FE;
--purple-500:#8B5CF6; --purple-700:#6D28D9;
--slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1;
--slate-400:#94A3B8; --slate-500:#64748B; --slate-700:#334155; --slate-900:#0F172A;
/* --- surfaces and ink --------------------------------------------------- */
--bg:var(--slate-50); /* the application canvas */
--card:#FFFFFF; /* every panel, table and drawer */
--surface-2:var(--slate-50); /* row hover, zebra, subtotal bands */
--line:var(--slate-200); /* the standard border */
--line-soft:var(--slate-100); /* internal rules inside a panel */
--line-strong:var(--slate-300);/* hover borders and dashed dropzones */
--ink:var(--slate-900); /* primary text */
--ink-2:var(--slate-700); /* secondary text and labels */
--muted:var(--slate-500); /* helper text, captions, table headers */
/* --- primary action / brand --------------------------------------------- */
--accent:var(--blue-600); --accent-hover:var(--blue-700);
--accent-soft:var(--blue-50); --accent-line:var(--blue-200);
--accent-ink:var(--blue-700); --accent-bright:var(--blue-400);
--focus-ring:rgba(37,99,235,.16);
/* --- status ------------------------------------------------------------- */
/* The mark and the word need different greens. #10B981 is the approved success
colour and carries every fill, tick and dot; as text on white it is 2.6:1, so
anything a person has to read uses the darker step. */
--ok:var(--green-500); --ok-soft:var(--green-50); --ok-ink:var(--green-700);
--ok-strong:var(--green-600); --ok-line:var(--green-200);
/* Favourable financial variance: a result that moved the right way against the
T-12 -- NOI or income up, costs down (vclass / GOOD_UP decides which). Its own
role, apart from the status greens above: "better than last year" is not "done".
A truer green than --ok-ink; 5.02:1 on white. Unfavourable stays --danger. */
--fav:#15803D;
--warn:var(--amber-700); --warn-soft:var(--amber-50); --warn-line:var(--amber-200);
--danger:var(--red-600); --danger-soft:var(--red-50); --danger-line:var(--red-200);
--purple:var(--purple-500); --purple-soft:var(--purple-50);
--purple-ink:var(--purple-700); --purple-line:var(--purple-200);
/* --- type ---------------------------------------------------------------
Crisp rather than large. Seven steps, and the half-pixel sizes scattered
through the old stylesheet resolve onto them as components are touched. */
--font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--fs-page:26px; /* page title */
--fs-section:17px; /* section heading inside a page */
--fs-card:14.5px; /* card title */
--fs-body:14px; /* body copy and controls */
--fs-table:13.5px; /* table cells */
--fs-label:13px; /* field labels */
--fs-help:12.5px; /* helper text under a control */
--fs-micro:11px; /* eyebrows, table headers, chips */
--lh-tight:1.25; --lh-body:1.5;
/* --- radius -------------------------------------------------------------- */
--r-card:12px; --r-panel:12px; --r-input:10px; --r-btn:8px;
--r-sm:6px; --r-chip:999px;
/* --- elevation -----------------------------------------------------------
Restrained. A panel is separated by its border; the shadow only lifts it off
the canvas, and the heavier steps are reserved for things that float. */
--shadow-xs:0 1px 2px rgba(15,23,42,.04);
--shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
--shadow-md:0 2px 4px rgba(15,23,42,.04), 0 8px 20px rgba(15,23,42,.06);
--shadow-lg:0 12px 34px rgba(15,23,42,.13);
/* --- spacing -------------------------------------------------------------- */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px;
/* --- aliases kept so nothing that reads the old names breaks -------------- */
--r:var(--r-card);
--shadow:var(--shadow-sm);
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
/* Paint the canvas itself, so no scroll or overscroll state ever exposes an
unpainted strip beside the page. */
html{background:var(--bg)}
body{
background:var(--bg); color:var(--ink); font-family:var(--font);
font-size:var(--fs-body); line-height:var(--lh-body);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent-ink); text-decoration:none}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
/* ---------------------------------------------------------------- chrome */
/* The global navigation: product areas in the middle, configuration, help and the
account at the right. It spans the window, so the grids below keep every pixel of
their width; the active area is blue with a rule along the header's bottom edge. */
.topbar{
background:var(--card); border-bottom:1px solid var(--line);
position:sticky; top:0; z-index:40;
}
/* Three columns: the brand and the right-hand controls take equal shares, so the
product areas sit in the middle of the header, as in the approved design. */
.topbar .inner{
height:60px; padding:0 var(--s7); display:grid; grid-template-columns:1fr auto 1fr;
align-items:center;
}
.brand{display:flex; align-items:center; gap:10px; justify-self:start; color:var(--ink);
font-size:18px; font-weight:700; letter-spacing:-.02em}
.bmark{width:24px; height:24px; display:block}
.bmark .b1{fill:var(--accent)} .bmark .b2{fill:var(--ok)} .bmark .b3{fill:var(--purple)}
.gnav{grid-column:2; display:flex; align-items:stretch; align-self:stretch; gap:4px}
.gright{grid-column:3; justify-self:end; display:flex; align-items:stretch; align-self:stretch; gap:4px}
.gmenu{position:relative; display:flex}
.gnl{
position:relative; display:flex; align-items:center; gap:6px; padding:0 13px;
background:none; border:0; font-family:var(--font); font-size:14.5px; font-weight:500;
color:var(--ink); cursor:pointer; white-space:nowrap; text-decoration:none;
}
.gnl:hover, .gnl[aria-expanded="true"]{color:var(--accent)}
.gnl.on{color:var(--accent); font-weight:600}
.gnl.on::after{
content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px;
background:var(--accent); border-radius:2px 2px 0 0;
}
.gnl:focus-visible{outline:2px solid var(--accent); outline-offset:-10px; border-radius:12px}
.gchev{width:14px; height:14px; flex:none; color:var(--muted); transition:transform .15s}
.gnl:hover .gchev, .gnl.on .gchev{color:currentColor}
.gnl[aria-expanded="true"] .gchev{transform:rotate(180deg); color:currentColor}
.gi{width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round}
.gicon{gap:8px}
.gacct{gap:4px; padding:0 4px 0 12px}
.gav{width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff;
display:grid; place-items:center; flex:none}
.gav svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9;
stroke-linecap:round}
.gacct:focus-visible{outline-offset:-8px}
/* A menu: a small card under its button, items with a line of description. */
.gpanel{
position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:340px;
padding:6px; background:var(--card); border:1px solid var(--line);
border-radius:var(--r-card); box-shadow:var(--shadow-md);
}
.gpanel.gend{left:auto; right:0; min-width:240px}
.gitem{display:flex; flex-direction:column; gap:2px; padding:9px 12px;
border-radius:var(--r-btn); color:var(--ink); text-decoration:none}
a.gitem:hover, button.gitem:hover{background:var(--bg)}
a.gitem:focus-visible, button.gitem:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.gi-t{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; line-height:1.35}
.gi-d{font-size:12.5px; color:var(--muted); line-height:1.4}
.gitem.cur .gi-t{color:var(--accent)}
.gitem.soon{cursor:default}
.gitem.soon .gi-t{color:var(--muted)}
.gsoon{font-size:10.5px; font-weight:600; padding:1px 8px; border-radius:var(--r-chip);
background:var(--slate-100); color:var(--ink-2); white-space:nowrap}
.gacct-h{padding:9px 12px 10px; margin-bottom:4px; border-bottom:1px solid var(--line-soft)}
.gk{display:block; font-size:var(--fs-micro); font-weight:600; letter-spacing:.05em;
text-transform:uppercase; color:var(--muted)}
.gv{display:block; margin-top:2px; font-size:14px; font-weight:600; color:var(--ink)}
.gout{margin:0}
button.gitem{width:100%; border:0; background:none; font-family:var(--font);
text-align:left; cursor:pointer}
/* Narrow screens: one menu button opens the same destinations as a sheet. */
.gburger{display:none}
.gsheet{position:absolute; left:0; right:0; top:100%; z-index:60; max-height:calc(100vh - 56px);
overflow-y:auto; padding:8px 12px 14px; background:var(--card);
border-bottom:1px solid var(--line); box-shadow:var(--shadow-md)}
.gsgroup{padding-top:6px; margin-top:6px; border-top:1px solid var(--line-soft)}
.gsh{padding:6px 12px 2px; font-size:var(--fs-micro); font-weight:600; letter-spacing:.05em;
text-transform:uppercase; color:var(--muted)}
.gitem.gsolo.cur .gi-t{color:var(--accent)}
/* A little less air between 900 and 1180, so the full row still fits at 1024. */
@media (max-width:1180px){
.topbar .inner{padding:0 var(--s5)}
.gnav{gap:0}
.gright{gap:0}
.gnl{padding:0 11px}
}
/* The browser's own [hidden] rule lives in the user-agent stylesheet, and any author
rule that sets display beats it regardless of specificity. Every element given a
display here would otherwise ignore the attribute -- which is how twelve months all
came to be labelled "Edited". */
[hidden]{display:none !important}
.wrap{max-width:1240px; margin:0 auto; padding:32px 24px 80px}
/* There is one page width, not two. Narrow pages used to cap their content at
860px inside the same 1240px container, which between about 940px and 1240px
produced a left-aligned column with a widening dead strip beside it: full
desktop navigation above half-width content. Every page now uses the same
container, so the layout collapses identically everywhere and there is no
width at which one page behaves unlike another. */
.wrap.narrow{max-width:1240px}
/* A twelve-month grid is not prose. 1240px leaves the note column off-screen and a
third of a wide monitor empty beside it, so the pages that are mostly table get
more room; the pages that are mostly reading keep the narrower measure. */
.wrap.wide{max-width:1800px}
/* ------------------------------------------------------------------ type */
h1{font-size:var(--fs-page); font-weight:640; letter-spacing:-.022em;
line-height:var(--lh-tight); margin:0 0 var(--s1); color:var(--ink)}
h2{font-size:var(--fs-section); font-weight:600; letter-spacing:-.014em;
line-height:1.3; margin:0 0 2px; color:var(--ink)}
h3{font-size:var(--fs-card); font-weight:600; letter-spacing:-.006em; margin:0;
color:var(--ink)}
.sub{color:var(--muted); font-size:var(--fs-body); line-height:1.55;
margin:0 0 var(--s6)}
.eyebrow{
font-size:var(--fs-micro); font-weight:600; letter-spacing:.075em;
text-transform:uppercase; color:var(--muted);
}
.page-head{display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.page-head .grow{flex:1; min-width:240px}
/* ----------------------------------------------------------------- cards */
.card{background:var(--card); border:1px solid var(--line);
border-radius:var(--r-card); box-shadow:var(--shadow-sm)}
.card .pad{padding:var(--s5) var(--s6)}
.card-head{padding:var(--s4) var(--s6); border-bottom:1px solid var(--line-soft);
display:flex; align-items:center; gap:var(--s3)}
.card-head .grow{flex:1}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:24px}
.tile{background:var(--card); border:1px solid var(--line);
border-radius:var(--r-card); padding:var(--s5); box-shadow:var(--shadow-sm)}
.tile .k{font-size:var(--fs-help); color:var(--muted); font-weight:500;
margin-bottom:var(--s2)}
.tile .v{font-size:27px; font-weight:640; letter-spacing:-.028em; line-height:1.15}
.tile .n{font-size:12px; color:var(--muted); margin-top:4px}
/* The headline metric, in the same family as the rest. It used to be a filled navy
panel, which outweighed everything beside it. The emphasis it keeps is a firmer
edge and a little more lift -- and, on the budget summary, its own variance in
green. Nothing here asserts success: this rule is shared with the leases tab. */
.tile.hero{border-color:var(--line-strong); box-shadow:var(--shadow-md)}
/* --------------------------------------------------------------- buttons */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
padding:9px 16px; border-radius:var(--r-btn); border:1px solid var(--line);
background:var(--card); color:var(--ink-2); font-size:var(--fs-body);
font-weight:550; font-family:var(--font); cursor:pointer; transition:.13s;
box-shadow:var(--shadow-xs); letter-spacing:-.003em;
}
.btn:hover{border-color:var(--line-strong); background:var(--surface-2); color:var(--ink)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;
box-shadow:0 1px 2px rgba(37,99,235,.24)}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.success{background:var(--ok-strong); border-color:var(--ok-strong); color:#fff;
box-shadow:0 1px 2px rgba(5,150,105,.24)}
.btn.success:hover{background:var(--ok-ink); border-color:var(--ok-ink)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink-2);
box-shadow:none}
.btn.ghost:hover{background:var(--bg)}
.btn.sm{padding:6px 11px; font-size:var(--fs-label); border-radius:var(--r-sm)}
.btn[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none}
.btn-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
/* ---------------------------------------------------------------- tables */
table{width:100%; border-collapse:collapse}
th{
text-align:left; font-size:var(--fs-micro); font-weight:600; letter-spacing:.06em;
text-transform:uppercase; color:var(--muted); padding:11px var(--s4);
border-bottom:1px solid var(--line); white-space:nowrap; background:var(--card);
}
td{padding:12px var(--s4); border-bottom:1px solid var(--line-soft);
font-size:var(--fs-table); color:var(--ink-2)}
tbody tr:last-child td{border-bottom:none}
th.r,td.r{text-align:right}
.t-scroll{overflow-x:auto}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--surface-2)}
tr.group-row td{
background:var(--bg); font-size:11px; font-weight:650; letter-spacing:.06em;
text-transform:uppercase; color:var(--muted); padding:8px 14px;
}
tr.total-row td{font-weight:640; background:var(--surface-2); border-top:1px solid var(--line)}
tr.noi-row td{font-weight:660; background:var(--ok-soft); color:var(--ok-ink);
font-size:15px}
.neg{color:var(--danger)}
/* ---------------------------------------------------------------- badges */
.badge{
display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
border-radius:var(--r-chip); font-size:11.5px; font-weight:600;
background:var(--slate-100); color:var(--ink-2); letter-spacing:-.002em;
}
.badge.ok{background:var(--ok-soft); color:var(--ok-ink)}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.low{background:var(--danger-soft); color:var(--danger)}
.badge.ai{background:var(--purple-soft); color:var(--purple-ink)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.bdot{
display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:7px;
vertical-align:1px; cursor:help;
}
.bdot.low{background:var(--danger)}
.bdot.high{background:var(--warn)}
/* ----------------------------------------------------------------- forms */
label.f{display:block; font-size:var(--fs-label); font-weight:550;
color:var(--ink-2); margin-bottom:var(--s2); letter-spacing:-.003em}
input[type=text],input[type=number],input[type=email],input[type=password],select,textarea{
width:100%; padding:10px 12px; border:1px solid var(--line);
border-radius:var(--r-input); font-size:var(--fs-body); font-family:var(--font);
color:var(--ink); background:var(--card); transition:.13s;
-webkit-appearance:none; appearance:none;
}
input[type=text]:hover,input[type=number]:hover,input[type=email]:hover,input[type=password]:hover,select:hover,textarea:hover{
border-color:var(--line-strong);
}
input::placeholder,textarea::placeholder{color:var(--slate-400)}
input:focus,select:focus,textarea:focus{
outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring);
}
textarea{min-height:88px; resize:vertical; line-height:1.5}
select{background-image:url("data:image/svg+xml;utf8,, which is inline by default and breaks the border */
border:1.5px dashed var(--line-strong); border-radius:var(--r-card); background:var(--card);
padding:22px 18px; text-align:center; cursor:pointer; transition:.15s; position:relative;
}
.drop:hover,.drop.over{border-color:var(--accent); background:var(--accent-soft)}
.drop.filled{border-style:solid; border-color:var(--ok-line); background:var(--ok-soft)}
.drop .ic{font-size:20px; margin-bottom:8px; opacity:.75}
.drop .t{font-weight:600; font-size:14px; margin-bottom:3px}
.drop .h{font-size:12px; color:var(--muted); line-height:1.45}
.drop .fname{font-size:var(--fs-help); color:var(--ok-ink); font-weight:560;
margin-top:var(--s2); word-break:break-all}
.drop input[type=file]{display:none}
.req{font-size:10px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
/* -------------------------------------------------------------- questions */
.qlayout{display:grid; grid-template-columns:210px 1fr; gap:28px; align-items:start}
.steps{position:sticky; top:88px}
.step{
display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px;
font-size:13.5px; color:var(--muted); cursor:pointer; font-weight:520;
}
.step:hover{background:var(--card)}
.step.on{background:var(--card); color:var(--ink); font-weight:600; box-shadow:var(--shadow)}
.step .n{
width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line);
display:grid; place-items:center; font-size:11px; font-weight:650; flex:none;
}
.step.on .n{border-color:var(--accent); color:var(--accent)}
.step.done .n{background:var(--ok); border-color:var(--ok); color:#fff}
.step.done{color:var(--ink-2)}
.q{padding:20px 22px; border-bottom:1px solid var(--line-soft)}
.q:last-child{border-bottom:none}
.qhead{display:flex; align-items:flex-start; gap:12px; margin-bottom:4px}
.qhead .qt{flex:1; margin-bottom:0}
.skip{
border:1px solid var(--line); background:var(--card); color:var(--muted);
font-size:12px; font-weight:560; font-family:var(--font); padding:4px 10px;
border-radius:999px; cursor:pointer; white-space:nowrap; flex:none; transition:.13s;
}
.skip:hover{border-color:var(--line-strong); color:var(--ink-2)}
.skip.on{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-ink)}
.q.skipped{background:var(--surface-2)}
.q.skipped .qi{opacity:.35; pointer-events:none; filter:grayscale(.5)}
.q.skipped .qt,.q.skipped .qc{opacity:.55}
.q .qt{font-size:15.5px; font-weight:580; margin-bottom:4px; letter-spacing:-.005em}
.q .qc{font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:12px; max-width:62ch}
.q .qi{max-width:300px}
.q.wide .qi{max-width:100%}
.capex-row{display:grid; grid-template-columns:1fr 130px 110px 110px 32px; gap:8px; margin-bottom:8px; align-items:center}
.capex-row .x{
border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:17px;
border-radius:8px; height:32px;
}
.capex-row .x:hover{background:var(--bg); color:var(--danger)}
.contract-head,.contract-row{
display:grid; grid-template-columns:2fr 130px 110px 100px 32px;
gap:8px; align-items:center; margin-bottom:8px;
}
.contract-head{
font-size:11px; font-weight:650; letter-spacing:.05em; text-transform:uppercase;
color:var(--muted); margin-bottom:6px;
}
.contract-row .x{
border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:17px;
border-radius:8px; height:32px;
}
.contract-row .x:hover{background:var(--bg); color:var(--danger)}
/* ------------------------------------------------ payroll position builder */
.payhdr{display:flex; align-items:flex-end; gap:12px; margin:22px 0 10px}
/* Unmissable: full-size primary button on the left, its own row. */
.addpos{margin:0 0 14px; padding:12px 22px; font-size:14.5px}
.payhdr > div:first-child{flex:1}
.poscard{border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:var(--card)}
.poshead{display:flex; align-items:center; gap:9px; padding:10px 12px}
.poshead .grip{cursor:grab; color:var(--muted); font-size:15px; user-select:none}
.poshead .grow{flex:1}
.posname{
border:1px solid transparent; border-radius:8px; padding:4px 8px; font:inherit;
font-weight:620; min-width:0; width:220px; background:transparent;
}
.posname:hover, .posname:focus{border-color:var(--line); background:var(--bg); outline:none}
.posgrid{
display:grid; grid-template-columns:repeat(4, minmax(130px,1fr)); gap:12px;
padding:4px 14px 12px; border-top:1px solid var(--line-soft);
}
.segbar{display:flex; gap:0; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.segbtn{
flex:1; padding:8px 10px; font-size:12.5px; font-weight:560; border:none;
background:var(--card); color:var(--muted); cursor:pointer; white-space:nowrap;
}
.segbtn.on{background:var(--accent-soft); color:var(--accent-ink)}
/* On the Overview the selected segment is filled, not tinted: Chart/Table and the
driver filters are choices somebody made, and should be legible across the width of
a card. Scoped there so the drawers' segmented controls, which also appear on Review
Inputs, keep their own treatment. */
.ovw .segbar{background:var(--card)}
.ovw .segbtn.on{background:var(--accent); color:#fff; font-weight:620}
.ovw .segbtn:not(.on):hover{background:var(--surface-2); color:var(--ink-2)}
.plines{width:100%; border-collapse:collapse; min-width:880px}
.plines th{
text-align:left; font-size:10.5px; font-weight:650; letter-spacing:.05em;
text-transform:uppercase; color:var(--muted); padding:8px 8px; border-bottom:1px solid var(--line);
}
.plines th.r, .plines td.r{text-align:right}
.plines td{padding:7px 8px; border-bottom:1px solid var(--line-soft); vertical-align:top; font-size:13px}
.plines .mini{padding:6px 8px; font-size:12.5px; width:100%; min-width:90px}
.plines .amtcell .hint{display:block; margin-top:3px; font-size:10.5px}
.amtpair{display:flex; gap:4px}
.amtpair .amttype{width:52px; min-width:52px; flex:none}
.amtpair .num{min-width:76px}
.paidcell{max-width:230px}
/* The month boxes live right in the row: click the months a bonus pays out. */
.paidcell .mchips{display:grid; grid-template-columns:repeat(6, 1fr); gap:3px; min-width:168px}
.mchips{display:flex; flex-wrap:wrap; gap:3px}
.mchip{
border:1px solid var(--line); background:var(--card); color:var(--muted);
border-radius:6px; padding:3px 6px; font-size:10.5px; font-weight:600; cursor:pointer;
}
.mchip.on{background:var(--accent); border-color:var(--accent); color:#fff}
.mchip.off{opacity:.35; cursor:not-allowed}
.posfoot{display:flex; align-items:center; gap:10px; padding:10px 14px}
.posfoot .grow{flex:1}
.paysum{
display:grid; grid-template-columns:repeat(3, minmax(140px,1fr)) minmax(200px,1.4fr);
gap:14px; align-items:start; margin-top:16px; padding:14px; background:var(--bg);
border-radius:12px;
}
.paysum .fv{font-size:19px}
/* Sign, not sentiment: these tiles compare a cost against the T-12 and the
figure already carries its + or -. */
.paysum .fv.up,.paysum .fv.dn{color:var(--ink)}
.iconbtn{
border:none; background:transparent; cursor:pointer; font-size:14px; color:var(--muted);
border-radius:7px; padding:4px 6px; line-height:1;
}
.iconbtn:hover{background:var(--bg); color:var(--ink)}
.posmenu{
position:absolute; right:0; top:30px; z-index:30; background:var(--card);
border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
min-width:130px; overflow:hidden;
}
.posmenu button{
display:block; width:100%; text-align:left; border:none; background:none;
padding:9px 14px; font-size:13px; cursor:pointer; color:var(--ink); font-family:var(--font);
}
.posmenu button:hover{background:var(--bg)}
.posmenu button.danger{color:var(--danger)}
.plines .gripcell{width:26px; padding-right:0}
.plines .grip{cursor:grab; color:var(--muted); user-select:none}
.plines td.strong{font-weight:640; color:var(--accent-ink)}
.plines .acts{white-space:nowrap}
.mrow td{background:var(--bg); border-radius:8px}
.meritpair{display:flex; gap:6px}
.meritpair .input-suffix{flex:1}
.meritpair select.mini{width:auto; min-width:96px; flex:none}
.input-suffix.sm input{padding:6px 8px 6px 22px; font-size:12.5px}
.input-suffix.sm .pfx{font-size:12px}
/* Each contract field sits in a .cf wrapper whose label is invisible on desktop --
display:contents hands the field straight to the row grid, so the seven-column
layout is untouched. On a phone the wrappers become labeled blocks and the row
stacks into a card (see the mobile media block). */
.cf{display:contents}
.cf > .cl{display:none}
.mini-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px}
.mini{background:var(--bg); border-radius:11px; padding:13px 14px}
.mini .recov{margin-top:6px; color:var(--accent-ink); font-weight:550}
.maprow{
display:grid; grid-template-columns:1fr 220px auto; gap:8px; align-items:center;
margin-top:10px; background:var(--card); border-radius:9px; padding:8px 10px;
}
.maprow .ml{font-size:13.5px; color:var(--ink)}
.maprow.mapline{grid-template-columns:1.4fr 1fr; background:var(--bg)}
.maprow.mapline .ml .hint{margin:0 8px}
.maprow select{padding:6px 10px; font-size:13px}
.preset{
display:inline-block; padding:5px 11px; border-radius:999px; border:1px solid var(--line);
background:var(--card); font-size:12.5px; cursor:pointer; margin:0 6px 6px 0; color:var(--ink-2);
}
.preset:hover{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
.sticky-foot{
position:sticky; bottom:0; background:linear-gradient(to top,var(--bg) 65%,transparent);
padding:16px 0 8px; margin-top:18px; display:flex; gap:10px; align-items:center;
}
/* -------------------------------------------------------------- interview */
.modebar{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px}
.mode{
text-align:left; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
background:var(--card); cursor:pointer; font-family:var(--font); transition:.13s;
}
.mode:hover{border-color:var(--line-strong)}
.mode.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--shadow)}
.mode .ml{display:block; font-weight:620; font-size:14px; color:var(--ink); margin-bottom:2px}
.mode.on .ml{color:var(--accent-ink)}
.mode .mh{display:block; font-size:12px; color:var(--muted); line-height:1.4}
.ivcard{margin-bottom:14px}
.ivhead{display:flex; align-items:flex-start; gap:14px; margin-bottom:12px}
.ivhead > div:first-child{flex:1}
.ivq{font-size:17px; font-weight:600; letter-spacing:-.01em; margin-top:3px; line-height:1.35}
.worth{
flex:none; background:var(--ink); color:#fff; border-radius:999px; padding:5px 11px;
font-size:11.5px; font-weight:600; white-space:nowrap; cursor:help;
}
.rec{
background:var(--accent-soft); border-radius:10px; padding:10px 13px; font-size:14px;
color:var(--accent-ink); font-weight:560; margin-bottom:12px;
}
.rec .reclabel{
font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
opacity:.65; margin-right:8px;
}
.reasons{margin-bottom:14px; display:flex; flex-direction:column; gap:7px}
.reason{display:flex; gap:9px; font-size:13px; color:var(--ink-2); line-height:1.5}
.rk{
flex:none; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
padding:2px 7px; border-radius:5px; height:fit-content; margin-top:1px;
}
.rk.ai{background:var(--purple-soft); color:var(--purple-ink)}
.rk.company{background:var(--slate-100); color:var(--ink-2)}
.rk.historical{background:var(--bg); color:var(--muted)}
.opts{display:flex; gap:8px; flex-wrap:wrap}
.opt{
padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card);
font-size:13.5px; font-weight:540; color:var(--ink-2); cursor:pointer;
font-family:var(--font); transition:.13s;
}
.opt:hover{border-color:var(--line-strong); background:var(--surface-2)}
.opt.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
/* An option that explains itself: the label, then a line saying what it does. */
.opt.optl{text-align:left; max-width:360px}
.opt .optd{display:block; margin-top:3px; font-size:12.5px; font-weight:400; line-height:1.4;
color:var(--muted)}
.opt.on .optd{color:rgba(255,255,255,.85)}
.fields{
display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;
margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft);
}
.frow label.f{margin-bottom:5px}
/* ------------------------------------------------------- assumption center */
.acrow{
display:grid; grid-template-columns:1fr 120px 130px 92px; gap:14px; align-items:center;
padding:14px 22px; border-bottom:1px solid var(--line-soft);
}
.acrow:last-child{border-bottom:none}
.acrow:hover{background:var(--surface-2)}
.acl{font-weight:560; font-size:14px}
.acsub{font-size:12px; color:var(--muted); margin-top:3px; line-height:1.45}
.acv input{text-align:right; font-variant-numeric:tabular-nums}
.src{
font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
padding:2px 7px; border-radius:5px;
}
.src.user{background:var(--accent-soft); color:var(--accent-ink)}
.src.company{background:var(--slate-100); color:var(--ink-2)}
.src.default{background:var(--bg); color:var(--muted)}
.src.skipped{background:var(--warn-soft); color:var(--warn)}
.acimpact{font-size:12px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}
.acimpact b{display:block; color:var(--ink); font-size:13px; font-weight:620}
.acrow .r{text-align:right}
.infob{
width:17px; height:17px; border-radius:50%; border:1px solid var(--line);
background:var(--card); color:var(--muted); font-size:10.5px; font-weight:700;
font-family:var(--font); cursor:pointer; padding:0; line-height:1;
vertical-align:1px; margin-left:7px; transition:.13s;
}
.infob:hover{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
.info{
padding:14px 22px 16px; background:var(--bg); border-bottom:1px solid var(--line-soft);
font-size:13px; color:var(--ink-2); line-height:1.55;
}
.info strong{color:var(--ink)}
/* --------------------------------------------------------------- explain */
.ask{display:flex; gap:10px; margin-bottom:14px}
.ask input{flex:1}
.qa{border-top:1px solid var(--line-soft); padding:16px 0}
.qa:first-child{border-top:none}
.qa .qq{font-weight:600; font-size:14px; margin-bottom:7px}
.qa .qaa{font-size:14px; color:var(--ink-2); line-height:1.6; white-space:pre-wrap}
.suggest{
display:inline-block; padding:6px 12px; border-radius:999px; border:1px solid var(--line);
background:var(--card); font-size:12.5px; cursor:pointer; margin:0 6px 6px 0; color:var(--ink-2);
}
.suggest:hover{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
/* ------------------------------------------------------------------- tabs */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto}
.tab{
padding:10px 15px; font-size:14px; font-weight:540; color:var(--muted); cursor:pointer;
border-bottom:2px solid transparent; white-space:nowrap; background:none; border-top:none;
border-left:none; border-right:none; font-family:var(--font);
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:620}
/* The Draft Budget shell's tab strip: a firmer active tab, shared by all six tabs so the
shell does not shift when switching. Other screens' tabs are untouched. */
#bpgwrap > .tabs .tab{border-bottom-width:2.5px}
#bpgwrap > .tabs .tab.on{color:var(--accent); font-weight:640}
.tab .c{
display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
background:var(--warn-soft); color:var(--warn); font-size:11px; font-weight:650;
}
/* ---------------------------------------------------------------- drawer */
.scrim{
position:fixed; inset:0; background:rgba(22,35,61,.28); opacity:0; pointer-events:none;
transition:.18s; z-index:60;
}
.scrim.on{opacity:1; pointer-events:auto}
/* Parked off-canvas, a shadow on the closed drawer still reached back into the window
and drew a grey fade down its right edge. The shadow belongs to the open drawer;
the transition covers every property, so it fades in with the slide. */
.drawer{
position:fixed; top:0; right:0; bottom:0; width:min(480px,94vw); background:var(--card);
border-left:1px solid var(--line); transform:translateX(100%); transition:.22s cubic-bezier(.2,.8,.3,1);
z-index:61; overflow-y:auto;
}
.drawer.on{transform:none; box-shadow:-16px 0 40px rgba(15,23,42,.09)}
/* The header is sticky, and positioned controls in the body (the % and $ affixes)
painted over it once scrolled beneath it. Lifted above the body. */
.drawer .dh{padding:20px 22px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:5}
.drawer .db{padding:20px 22px 40px}
.close{
position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:8px;
border:none; background:var(--bg); color:var(--muted); cursor:pointer; font-size:16px;
}
.close:hover{background:var(--line); color:var(--ink)}
.driver{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-soft)}
.driver:last-child{border-bottom:none}
.driver .dl{flex:1}
.driver .dn{font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:3px}
.driver .dv{font-weight:620; white-space:nowrap}
.formula{
background:var(--bg); border-radius:10px; padding:11px 13px; font-size:13px;
color:var(--ink-2); margin:14px 0 4px; line-height:1.5;
}
/* ----------------------------------------------------------------- flags */
.flag{display:flex; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line-soft)}
.flag:last-child{border-bottom:none}
.flag .fi{
width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none;
font-size:12px; font-weight:700; background:var(--bg); color:var(--muted); margin-top:1px;
}
.flag.warn .fi{background:var(--warn-soft); color:var(--warn)}
/* Not a warning with a louder voice: the budget cannot be read at all until
the data behind it exists. */
.flag.blocker{background:var(--danger-soft)}
.flag.blocker .fi{background:var(--danger); color:#fff}
.flag.blocker .ft{color:var(--danger)}
.flag .ft{font-weight:580; font-size:14.5px; margin-bottom:3px}
.flag .fd{font-size:13.5px; color:var(--ink-2); line-height:1.55}
/* ------------------------------------------------------------------ misc */
.bar{height:6px; border-radius:999px; background:var(--line-soft); overflow:hidden; margin-top:8px}
.bar span{display:block; height:100%; background:var(--accent); border-radius:999px; transition:.3s}
.spark i.zero{background:var(--line-soft)}
.empty{text-align:center; padding:56px 24px}
.empty .ic{font-size:34px; margin-bottom:12px; opacity:.5}
.empty h2{margin-bottom:6px}
.empty p{color:var(--muted); margin:0 auto 20px; max-width:44ch; font-size:14px}
.spinner{
width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--accent);
border-radius:50%; animation:sp .7s linear infinite; display:inline-block; vertical-align:-2px;
}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{
position:fixed; bottom:22px; left:50%; transform:translate(-50%,90px); z-index:90;
background:var(--ink); color:#fff; padding:11px 18px; border-radius:11px; font-size:14px;
transition:.22s; box-shadow:0 10px 30px rgba(15,23,42,.2);
}
.toast.on{transform:translate(-50%,0)}
/* -------------------------------------------------------- build progress */
#bldover{
position:fixed; inset:0; z-index:120; display:grid; place-items:center;
background:rgba(22,35,61,.45); backdrop-filter:blur(3px);
}
.bldcard{
background:var(--card); border-radius:16px; box-shadow:var(--shadow);
padding:34px 38px; width:min(440px, calc(100vw - 40px)); text-align:center;
}
.bldcard h2{font-size:19px; margin-bottom:18px}
.bldtrack{
height:10px; border-radius:999px; background:var(--line-soft); overflow:hidden;
}
.bldbar{
height:100%; width:4%; border-radius:999px; background:var(--accent);
transition:width .45s ease;
}
.bldstage{font-size:13px; color:var(--muted); margin-top:12px; min-height:18px}
.bldok{
width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff;
display:grid; place-items:center; font-size:22px; margin:0 auto 14px;
}
.bldcard .bldgo{margin-top:16px; font-size:15px; padding:12px 22px}
.bldcard .hint{margin-top:4px}
.note{
background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:11px;
padding:12px 14px; font-size:13.5px; color:var(--accent-ink); line-height:1.5;
}
.note.warn{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}
.hint{font-size:var(--fs-help); color:var(--muted); line-height:1.5}
.hidden{display:none !important}
@media (max-width:820px){
.qlayout{grid-template-columns:1fr}
.steps{position:static; display:flex; gap:6px; overflow-x:auto; padding-bottom:8px;
/* Edge fade: the cue that the strip scrolls instead of being cut off. */
background:
linear-gradient(90deg, var(--bg) 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
linear-gradient(270deg, var(--bg) 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
radial-gradient(farthest-side at 0 50%, rgba(22,35,61,.14), transparent) left / 10px 100% no-repeat,
radial-gradient(farthest-side at 100% 50%, rgba(22,35,61,.14), transparent) right / 10px 100% no-repeat;
background-attachment: local, local, scroll, scroll;
}
.step{white-space:nowrap}
.grid-2{grid-template-columns:1fr}
.capex-row{grid-template-columns:1fr 1fr; }
}
.drop.big{padding:56px 32px; border-width:2px}
.drop.big .ic{font-size:34px; margin-bottom:12px}
.drop.big .t{font-size:17px; margin-bottom:6px}
.drop.big .h{max-width:46ch; margin:0 auto; font-size:13.5px}
/* ---------------------------------------------------------------- copilot */
.copilot-fab{
position:fixed; right:22px; bottom:22px; z-index:50; display:flex; align-items:center;
gap:8px; padding:12px 20px; border-radius:999px; border:none; background:var(--ink);
color:#fff; font-size:14px; font-weight:600; font-family:var(--font); cursor:pointer;
box-shadow:0 8px 26px rgba(15,23,42,.26); transition:.15s;
}
.copilot-fab:hover{transform:translateY(-1px); box-shadow:0 12px 32px rgba(15,23,42,.32)}
.copilot-fab span{color:#8FD3C2}
.copilot{
position:fixed; top:0; right:0; bottom:0; width:min(520px,96vw); background:var(--card);
border-left:1px solid var(--line); transform:translateX(100%);
transition:.22s cubic-bezier(.2,.8,.3,1); z-index:71; display:flex; flex-direction:column;
box-shadow:-16px 0 40px rgba(15,23,42,.11);
}
.copilot.on{transform:none}
#cpscrim{z-index:70}
.cpbody{flex:1; overflow-y:auto; padding:18px 22px; display:flex; flex-direction:column; gap:14px}
.cpfoot{border-top:1px solid var(--line); padding:14px 22px 18px; background:var(--card)}
.cpfoot .ask{margin-bottom:10px}
.cpempty{text-align:center; padding:46px 20px; color:var(--muted)}
.cpempty .ic{font-size:30px; color:var(--accent); margin-bottom:12px}
.cpempty p{font-size:14px; line-height:1.6; max-width:34ch; margin:0 auto}
.cpmsg{font-size:14px; line-height:1.6}
.cpmsg.you{
align-self:flex-end; background:var(--accent); color:#fff; padding:9px 14px;
border-radius:14px 14px 4px 14px; max-width:82%; font-weight:500;
}
.cpmsg.ai{align-self:flex-start; max-width:100%; width:100%; color:var(--ink-2)}
.simcard{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--bg)}
.simchg{font-size:14px; margin:4px 0 10px; color:var(--ink)}
.simnoi{font-size:26px; font-weight:650; letter-spacing:-.02em; margin-bottom:10px}
.simnoi span{font-size:13px; font-weight:500; color:var(--muted); margin-left:6px}
.simnoi.up{color:var(--fav)}
.simnoi.down{color:var(--danger)}
.simcard table td{padding:6px 0; border-bottom:1px solid var(--line-soft); font-size:13px}
.opps td{padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px}
/* --------------------------------------------------- accept / adjust / review */
.rowacts{display:none; margin-left:10px; gap:4px}
tr:hover .rowacts{display:inline-flex}
.ract{
border:1px solid var(--line); background:var(--card); color:var(--ink-2); cursor:pointer;
font-size:11.5px; font-weight:560; font-family:var(--font); padding:3px 9px;
border-radius:7px; white-space:nowrap;
}
.ract:hover{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
.ract.on{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-ink); display:inline-flex}
tr.approved .rowacts{display:inline-flex}
tr.approved td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
/* The drawer is 480px wide, which leaves 436px for four columns -- one of them a
T-12 account name. Sized by content the name took what it wanted and the Budget
box was squeezed to a digit and a half, so the shares are fixed and the name
wraps instead. */
.paymethod{
margin:16px 0 0; padding:13px 15px; background:var(--bg);
border:1px solid var(--line); border-radius:11px;
}
.subtable{table-layout:fixed; width:100%}
.subtable th:nth-child(1), .subtable td:nth-child(1){width:38%}
.subtable th:nth-child(2), .subtable td:nth-child(2){width:17%}
.subtable th:nth-child(3), .subtable td:nth-child(3){width:27%}
.subtable th:nth-child(4), .subtable td:nth-child(4){width:18%}
.subtable td, .subtable th{padding-left:6px; padding-right:6px}
.subtable td:first-child, .subtable th:first-child{padding-left:0}
.subtable td:last-child, .subtable th:last-child{padding-right:0}
/* Tighter than the grid's headers: "CHANGE" has to fit a column narrow enough to
leave the account name a line of its own. */
.subtable th{font-size:10px; letter-spacing:.02em}
.subname{white-space:normal; line-height:1.35}
/* Where a figure came from, and whether somebody has changed it since. It started
on the budget grid; the payroll position editor says the same thing about a cost
line copied from a company default, and that screen is reachable from two pages,
so the rule belongs with the stylesheet both of them load. */
.editmark{
margin-left:8px; font-size:10.5px; font-weight:600; letter-spacing:.03em;
text-transform:uppercase; color:var(--muted); background:var(--bg);
border:1px solid var(--line); border-radius:5px; padding:1px 5px; vertical-align:1px;
}
.editmark.set{color:var(--accent-ink); background:var(--accent-soft);
border-color:transparent}
.subname .editmark{margin-left:0; margin-top:3px; display:inline-block}
/* On a cost line the badge sits under the account name, not beside it. */
.plines .editmark{margin-left:0; margin-top:4px; display:inline-block}
.subin{
width:100%; padding:5px 7px; font-size:13px; text-align:right;
font-variant-numeric:tabular-nums;
}
/* The spinner reserves room a six-figure budget needs, and the month boxes dropped
it for the same reason: people type these, they do not step them. */
.subin::-webkit-outer-spin-button, .subin::-webkit-inner-spin-button{
appearance:none; -webkit-appearance:none; margin:0;
}
.subin{-moz-appearance:textfield; appearance:textfield}
.applied{margin-bottom:20px}
.appliedgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px}
.ap{background:var(--bg); border-radius:10px; padding:11px 13px}
.apk{font-size:12px; color:var(--muted); margin-bottom:3px}
.apv{font-size:19px; font-weight:640; letter-spacing:-.02em}
.opt.asky{border-style:dashed; color:var(--muted)}
.opt.asky:hover{border-style:solid; color:var(--purple-ink); border-color:var(--purple-line); background:var(--purple-soft)}
.askout{
margin-top:14px; padding:13px 15px; background:#F8F8FD; border:1px solid #E8E6F6;
border-radius:11px; font-size:13.5px; line-height:1.6; color:var(--ink-2);
}
/* ------------------------------------------------------- new budget wizard */
.wsteps{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap}
.wstep{
display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
background:var(--card); border:1px solid var(--line); font-size:13.5px;
color:var(--muted); font-weight:520;
}
.wstep.on{border-color:var(--accent); color:var(--accent-ink); font-weight:620; box-shadow:var(--shadow)}
.wstep.done{color:var(--ink-2)}
.wstep .n{
width:19px; height:19px; border-radius:50%; border:1.5px solid var(--line);
display:grid; place-items:center; font-size:10.5px; font-weight:700; flex:none;
}
.wstep.on .n{border-color:var(--accent); color:var(--accent)}
.wstep.done .n{background:var(--ok); border-color:var(--ok); color:#fff}
.picks{display:grid; gap:12px}
.pick{
text-align:left; padding:18px 20px; border-radius:var(--r); border:1px solid var(--line);
background:var(--card); cursor:pointer; font-family:var(--font); transition:.13s;
box-shadow:var(--shadow);
}
.pick:hover{border-color:var(--line-strong)}
.pick.on{border-color:var(--accent); background:var(--accent-soft)}
.pick .pl{display:block; font-size:16px; font-weight:620; color:var(--ink); margin-bottom:3px}
.pick.on .pl{color:var(--accent-ink)}
.pick .ph{display:block; font-size:13.5px; color:var(--muted); line-height:1.5}
input[type=date]{
width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
font-size:15px; font-family:var(--font); color:var(--ink); background:var(--card);
}
input[type=date]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
/* ------------------------------------------------------------- budget setup */
/* Step 1 of creating a budget: the form on the left, what comes next on the right. */
.bsetup{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:var(--s6);
padding:var(--s6)}
.bsform{min-width:0; padding-right:var(--s6); border-right:1px solid var(--line-soft)}
.bsform h2{margin:0}
.bsform .bslead{margin:2px 0 var(--s5); font-size:var(--fs-body)}
.bsform .bshelp{margin:var(--s2) 0 0}
.bsform #sfields .field:last-child, .bsform #sfields .bspair{margin-bottom:0}
.bsform #sfields .bspair .field{margin-bottom:0}
/* One month field alone is as wide as each of a pair would be. */
.bsform .bsnarrow{max-width:calc(50% - 8px)}
.bserr{margin:var(--s2) 0 0; font-size:var(--fs-help); font-weight:550; color:var(--danger)}
/* The orientation panel: the four steps still ahead. Information, not a control. */
.bsnext{align-self:start; background:var(--accent-soft); border-radius:var(--r-panel);
padding:var(--s5) var(--s6) var(--s6)}
.bsnext h3{margin:var(--s4) 0 var(--s4); font-size:var(--fs-section)}
.bsnext ol{list-style:none; margin:0; padding:0; display:grid; gap:var(--s4)}
.bsnext li{display:flex; align-items:flex-start; gap:var(--s4)}
.bsnext .bsn{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
background:var(--blue-100); color:var(--accent-ink); font-size:13px; font-weight:650}
.bsnext .bst{font-size:var(--fs-body); font-weight:600; color:var(--ink); line-height:1.35}
.bsnext .bsd{font-size:var(--fs-help); color:var(--muted); line-height:1.5; margin-top:1px}
/* Cancel on the left, Continue on the right, under the card. */
.setupfoot{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
margin-top:var(--s5)}
/* On its own row the strip sits hard against the card; give it the card's air. */
@media (max-width:860px){ .wrap > .stages{margin-bottom:var(--s3)} }
@media (max-width:900px){
.bsetup{grid-template-columns:1fr; padding:var(--s5)}
.bsform{padding-right:0; border-right:0; padding-bottom:var(--s5);
border-bottom:1px solid var(--line-soft)}
.bsform .bsnarrow{max-width:none}
}
/* ------------------------------------------------------- stages + core uploads */
.stages{display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap}
.stage{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); font-weight:520}
.stage .n{
width:22px; height:22px; border-radius:50%; background:var(--line-soft); color:var(--muted);
display:grid; place-items:center; font-size:11.5px; font-weight:700; flex:none;
}
.stage.on{color:var(--ink); font-weight:640}
.stage.on .n{background:var(--accent); color:#fff}
/* A completed stage is a link back to its page. */
.stage.go{cursor:pointer}
.stage.go:hover{color:var(--ink)}
.stage.go:hover .n{background:var(--accent); color:#fff}
.stage + .stage::before{
content:''; width:34px; height:1px; background:var(--line); margin-right:2px;
}
.tick{color:var(--ok); font-weight:700}
.dropall{
display:block; margin-top:4px; padding:16px; text-align:center; cursor:pointer;
border:1.5px dashed var(--line-strong); border-radius:var(--r); font-size:13.5px;
color:var(--muted); transition:.15s;
}
.dropall:hover,.dropall.over{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink)}
.dropall strong{color:var(--ink); font-weight:600}
.dropall.busy{border-style:solid; background:var(--accent-soft)}
/* ------------------------------------------------------------------ uploads */
/* Step 2 of creating a budget. Three compact rows, one per report; a drop zone that
sorts several files at once; and a card that says how many of the two required
reports are in. */
/* The context line sits under the subtitle, inside the gap the subtitle leaves, so the
step strip is where it was on Setup. */
.ufctx{margin:calc(6px - var(--s6)) 0 0; font-size:var(--fs-label)}
.ufcard{padding:var(--s4) var(--s6) var(--s5)}
.ufcard h2{margin:0}
.ufcard .uflead{margin:2px 0 var(--s3); font-size:var(--fs-body)}
.ufrow{display:flex; align-items:center; gap:var(--s4); padding:10px var(--s4);
margin-bottom:var(--s2); border:1px solid var(--line); border-radius:var(--r-panel);
background:var(--card)}
.ufic{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
background:var(--accent-soft); color:var(--accent)}
.ufic svg{width:18px; height:18px}
.ufmain{flex:1; min-width:0}
.uft{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); font-size:15px;
font-weight:620; color:var(--ink); letter-spacing:-.006em}
.ufchip{font-size:10.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
padding:2px 7px; border-radius:5px; color:var(--muted); background:var(--bg)}
.ufchip.req{color:var(--accent-ink); background:var(--accent-soft)}
.ufd{margin-top:2px; font-size:13.5px; color:var(--muted); line-height:1.45; overflow-wrap:anywhere}
.ufact{flex:none; display:flex; align-items:center; gap:var(--s2)}
/* The way in is a quiet button: three solid blue ones down the page competed with
Continue for being the thing to press. */
.ufbtn{min-width:200px; cursor:pointer; background:var(--accent-soft); border-color:var(--accent-line);
color:var(--accent-ink); box-shadow:none}
.ufbtn:hover{background:var(--blue-100); border-color:var(--accent); color:var(--accent-ink)}
.ufbtn svg{width:16px; height:16px}
.uflink{border:0; background:none; padding:2px 0; font-family:var(--font); font-size:13.5px;
font-weight:550; color:var(--accent-ink); cursor:pointer; text-decoration:none}
.uflink:hover{text-decoration:underline}
.uflink.rm{color:var(--ink-2)}
.uflink.rm:hover{color:var(--danger)}
.ufbtn:focus-visible, .uflink:focus-visible, .ufdrop:focus-visible{outline:2px solid var(--accent);
outline-offset:2px}
.ufsep{color:var(--slate-300)}
/* Read and in: the success green the rest of the product uses for done. */
.ufrow.uf-ok{border-color:var(--ok-line)}
.ufrow.uf-ok .ufic{background:var(--ok-soft); color:var(--ok-ink)}
.ufrow.uf-ok .ufname{color:var(--ink-2); font-weight:550}
/* Could not be read: said on the row, with the reason. */
.ufrow.uf-bad{border-color:var(--danger-line)}
.ufrow.uf-bad .ufic{background:var(--danger-soft); color:var(--danger)}
.ufrow.uf-bad .uferr{color:var(--danger)}
.ufrow.uf-bad .uferr strong{font-weight:600}
.ufdrop{display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:var(--s3);
padding:var(--s3) var(--s4) 14px; text-align:center; cursor:pointer; transition:.15s;
border:1.5px dashed var(--accent-line); border-radius:var(--r-panel); background:var(--surface-2);
font-size:13.5px; color:var(--muted)}
.ufdrop svg{width:26px; height:26px; color:var(--accent)}
.ufdrop strong{font-size:15px; font-weight:620; color:var(--ink)}
.ufdrop .ufsup{font-size:var(--fs-help)}
.ufdrop:hover, .ufdrop.over{border-color:var(--accent); background:var(--accent-soft)}
.ufdrop.busy{border-style:solid; background:var(--accent-soft)}
.ufdrop .spinner{margin-bottom:var(--s2)}
.ufunplaced{margin-top:var(--s3); display:grid; gap:2px}
.ufunplaced strong{font-weight:600}
/* File status: what is said on the left, the count on the right. */
.ufstatus{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
gap:var(--s6); margin-top:var(--s3); padding:var(--s3) var(--s6)}
.ufsl{padding-right:var(--s6); border-right:1px solid var(--line-soft)}
.ufsl h2{margin:0}
.ufsl .hint{margin:2px 0 0; font-size:var(--fs-body)}
.ufsr{display:flex; align-items:center; gap:var(--s4)}
/* A ring that fills as the required reports arrive. --p is the share that are in. */
.ufring{flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
font-size:13px; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums;
background:radial-gradient(closest-side, var(--card) 80%, transparent 81% 100%),
conic-gradient(var(--accent) calc(var(--p) * 100%), var(--slate-200) 0)}
.ufst{font-size:var(--fs-body); font-weight:620; color:var(--ink)}
.ufstatus.ready .ufring{color:var(--ok-ink);
background:radial-gradient(closest-side, var(--card) 80%, transparent 81% 100%), var(--ok)}
.ufstatus.ready .ufst{color:var(--ok-ink)}
@media (max-width:700px){
.ufcard{padding:var(--s4)}
.ufrow{flex-wrap:wrap; row-gap:var(--s3)}
.ufmain{flex:1 1 calc(100% - 52px)}
.ufact{flex:1 1 100%; padding-left:52px}
.ufbtn{flex:1; min-width:0}
.ufstatus{grid-template-columns:1fr; gap:var(--s4); padding:var(--s4)}
.ufsl{padding-right:0; border-right:0; padding-bottom:var(--s4); border-bottom:1px solid var(--line-soft)}
}
@media (max-width:480px){
.ufact{padding-left:0}
}
/* ---------------------------------------------------------- review inputs */
.stagebar{display:flex; align-items:center; gap:16px; margin-bottom:26px; flex-wrap:wrap}
.stagebar .stages{flex:1; margin-bottom:0}
.stage.done .n{background:var(--ok); color:#fff}
.stage.done{color:var(--ink-2)}
.revtop{display:grid; grid-template-columns:minmax(300px,1fr) 1.35fr; gap:16px; margin-bottom:16px}
.gwrap{display:flex; align-items:center; gap:18px}
.donut{width:150px; flex:none}
.donut .dpct{font-size:26px; font-weight:700; fill:var(--accent-ink)}
.donut .dgrade{font-size:11px; fill:var(--muted); font-weight:600}
.gtext{font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.gtext strong{display:block; color:var(--ink); margin-bottom:4px}
.gtext span{display:block; margin-bottom:8px}
.link{
border:none; background:none; padding:0; font-family:var(--font); font-size:13px;
color:var(--accent-ink); cursor:pointer; text-decoration:underline; font-weight:550;
}
.counts .pad{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.cnt{
text-align:center; padding:6px 8px; border-right:1px solid var(--line-soft);
cursor:pointer; border-radius:10px; transition:.13s;
}
.cnt:hover{background:var(--bg)}
.cnt.on{background:var(--bg); box-shadow:inset 0 0 0 2px var(--accent)}
.cnt:last-child{border-right:none}
.filterbar{
padding:10px 22px; border-bottom:1px solid var(--line-soft); font-size:13px;
color:var(--muted);
}
.cv{font-size:32px; font-weight:650; letter-spacing:-.03em; line-height:1.1}
.cnt.ok .cv{color:var(--ok)}
.cnt.warn .cv{color:var(--warn)}
.cnt.info .cv{color:var(--ink-2)}
.cnt.muted .cv{color:var(--muted)}
.cl{font-size:13px; font-weight:620; margin-top:4px}
.cd{font-size:11.5px; color:var(--muted); margin-top:2px}
.revtable td{vertical-align:top; padding:16px 14px}
.area{display:flex; gap:12px; align-items:flex-start}
.aicon{
width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
font-size:15px; flex:none; background:var(--accent-soft);
}
.at{font-weight:620; font-size:14.5px}
.as{font-size:12.5px; color:var(--muted); margin-top:1px}
.af{font-weight:560; font-size:14px}
.ad{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45}
.pill{
display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px;
font-weight:650;
}
.pill.ready{background:var(--ok-soft); color:var(--ok-ink)}
.pill.need_review{background:var(--warn-soft); color:var(--warn)}
.pill.add_details{background:var(--slate-100); color:var(--ink-2)}
.pill.add_plan{background:var(--danger-soft); color:var(--danger)}
.pill.optional{background:var(--bg); color:var(--muted)}
.revfoot{
display:flex; align-items:center; gap:16px; margin-top:22px; flex-wrap:wrap;
}
.revfoot .hint{flex:1; text-align:center}
.bulb{margin-right:4px}
/* ------------------------------------------------------------ review modal */
.modal{
position:fixed; top:50%; left:50%; transform:translate(-50%,-48%) scale(.98);
width:min(620px,94vw); max-height:88vh; background:var(--card); border-radius:16px;
z-index:75; display:flex; flex-direction:column; opacity:0; pointer-events:none;
box-shadow:0 24px 70px rgba(15,23,42,.26); transition:.18s;
}
.modal.on{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.mhead{padding:20px 22px 14px; border-bottom:1px solid var(--line-soft); position:relative}
.mtitle{display:flex; gap:12px; align-items:flex-start}
.mtitle h2{font-size:17px; margin-bottom:2px}
.mtabs{display:flex; gap:2px; padding:0 22px; border-bottom:1px solid var(--line)}
.mtab{
padding:11px 14px; font-size:13.5px; font-weight:540; color:var(--muted); cursor:pointer;
background:none; border:none; border-bottom:2px solid transparent; font-family:var(--font);
}
.mtab:hover{color:var(--ink)}
.mtab.on{color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:620}
.mbody{padding:20px 22px; overflow-y:auto; flex:1}
.mfoot{
padding:14px 22px; border-top:1px solid var(--line-soft); display:flex;
justify-content:flex-end; gap:10px;
}
.foundbox{
border:1px solid var(--line); border-radius:11px; padding:14px 16px; background:var(--bg);
margin-bottom:18px;
}
.fk{font-size:12.5px; color:var(--muted); margin-bottom:2px}
.fv{font-size:27px; font-weight:650; letter-spacing:-.025em}
.fu{font-size:14px; font-weight:500; color:var(--muted)}
.fsrc{font-size:12px; color:var(--muted); margin-top:8px}
.foundbox .frow{
display:flex; justify-content:space-between; font-size:13px; color:var(--ink-2);
padding:5px 0; border-bottom:1px solid var(--line-soft);
}
.foundbox .frow:last-of-type{border-bottom:none}
.ftable{font-size:13px}
.ftable th{background:transparent; padding:6px 0; font-size:10.5px}
.ftable td{padding:7px 0; border-bottom:1px solid var(--line-soft)}
.q2{font-size:14.5px; font-weight:600; margin:4px 0 12px}
.radio{
display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
border:1px solid var(--line); margin-bottom:8px; cursor:pointer; font-size:14px;
transition:.13s;
}
.radio:hover{border-color:var(--line-strong); background:var(--surface-2)}
.radio input{width:auto; margin:0; accent-color:var(--accent)}
.radio:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.minfo{
display:flex; gap:9px; background:var(--accent-soft); border-radius:10px;
padding:11px 13px; font-size:13px; color:var(--accent-ink); line-height:1.5;
margin-top:16px;
}
.uploadslot .dropall{margin-top:0}
.chead,.crow{
display:grid; grid-template-columns:2fr 120px 96px 92px 30px;
gap:6px; align-items:center; margin-bottom:7px;
}
.phead,.prow{
display:grid; grid-template-columns:1.6fr 130px 90px 120px 30px;
gap:6px; align-items:center; margin-bottom:7px;
}
.chead,.phead{
font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase;
color:var(--muted);
}
.crow input,.crow select,.prow input,.prow select{padding:7px 9px; font-size:13px}
.cx{
border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:16px;
border-radius:6px; height:30px;
}
.cx:hover{background:var(--bg); color:var(--danger)}
.ptotal{
display:flex; justify-content:space-between; align-items:center; margin-top:14px;
padding-top:12px; border-top:1px solid var(--line); font-size:14px;
}
.ptotal strong{font-size:17px}
.qbars{display:flex; gap:14px; align-items:flex-end; height:96px; margin-top:16px}
.qb{flex:1; display:flex; flex-direction:column; align-items:center; height:100%}
.qb i{width:100%; background:var(--accent); border-radius:5px 5px 0 0; margin-top:auto}
.qn{font-size:13px; font-weight:640; margin-bottom:5px}
.ql{font-size:11.5px; color:var(--muted); margin-top:6px}
@media (max-width:820px){
.revtop{grid-template-columns:1fr}
.counts .pad{grid-template-columns:repeat(2,1fr); gap:14px}
}
.recbadge{
font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
color:var(--accent-ink); background:var(--accent-soft); padding:2px 8px;
border-radius:5px; margin-left:9px; vertical-align:2px;
}
.pick.on .recbadge{background:#fff}
.src.property{background:var(--accent-soft); color:var(--accent-ink)}
.trig{
font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
padding:2px 7px; border-radius:5px; margin-left:8px; background:var(--bg);
color:var(--muted);
}
.trig.one-time,.trig.anomaly{background:var(--warn-soft); color:var(--warn)}
.trig.missing{background:var(--danger-soft); color:var(--danger)}
.trig.conflict{background:var(--slate-100); color:var(--ink-2)}
.trig.sanity{background:var(--danger-soft); color:var(--danger)}
.savedtag{margin-top:12px; font-size:var(--fs-help); color:var(--ok-ink);
font-weight:600}
/* ------------------------------------------------- capex: summary + worksheet */
.modal.wide{width:min(1000px,96vw)}
.modal.sheet{width:min(1240px,97vw); z-index:85}
.scrim.s2{z-index:80; background:rgba(22,35,61,.34)}
.btn.xs{padding:5px 10px; font-size:12px; border-radius:7px}
.cxwrap{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.cxtable{width:100%; border-collapse:collapse; font-size:13.5px}
.cxtable th,.cxtable td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft)}
.cxtable thead th{
font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
font-weight:640; background:var(--bg); border-bottom:1px solid var(--line);
}
.cxtable .r{text-align:right}
.cxtable .c{text-align:center}
.cxtable tbody tr:hover{background:var(--bg)}
.cxtable tfoot th{
background:var(--accent-soft); color:var(--accent-ink); font-weight:680; font-size:13.5px;
border-bottom:none; border-top:1px solid var(--line);
}
.cxtable tr.gone .cxn{text-decoration:line-through; color:var(--muted)}
.cxn{font-weight:560}
.cxgl{font-size:11px; color:var(--muted); margin-left:7px; font-variant-numeric:tabular-nums}
.mono{font-variant-numeric:tabular-nums}
.up{color:var(--danger)}
.down{color:var(--ok)}
.pct{font-size:11.5px; opacity:.8; margin-left:3px}
.tag{
font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px;
border-radius:5px; background:var(--line-soft); color:var(--muted); margin-left:7px;
font-weight:640;
}
.tag.new{background:var(--accent-soft); color:var(--accent-ink)}
.tag.warn{background:var(--warn-soft); color:var(--amber-700)}
.cbadge{font-size:12px; color:var(--accent-ink); background:var(--accent-soft);
padding:2px 8px; border-radius:20px; font-weight:600}
.cnone{color:var(--line)}
.cxfoot{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:14px}
.exbox{border:1px solid var(--warn-line); background:var(--warn-soft); border-radius:12px;
padding:13px 15px; margin-bottom:16px}
.exhead{font-size:13px; font-weight:660; color:var(--warn); margin-bottom:9px}
.exrow{display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:8px 0; border-top:1px solid #F0DCB8}
.exn{font-size:13.5px; font-weight:560}
.exs{font-size:12px; color:var(--muted); margin-top:1px}
.exq{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted);
white-space:nowrap}
.exfoot{font-size:11.5px; color:var(--warn); opacity:.9; margin-top:9px; line-height:1.5}
.w2gl{margin-bottom:6px; max-width:420px; display:block}
.w2name{
font-size:17px; font-weight:650; border:1px solid transparent; border-radius:7px;
padding:3px 7px; margin:-3px -7px 2px; width:100%; font-family:var(--font);
letter-spacing:-.01em; background:transparent; color:var(--ink);
}
.w2name:hover{border-color:var(--line)}
.w2name:focus{border-color:var(--accent); background:#fff; outline:none}
.w2sum{display:flex; gap:34px; margin-top:14px}
.w2sum .k{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
color:var(--muted); font-weight:640; margin-bottom:2px}
.w2sum .v{font-size:20px; font-weight:650; letter-spacing:-.02em}
.gridscroll{overflow-x:auto; border:1px solid var(--line); border-radius:12px}
.w2grid{border-collapse:collapse; font-size:13px; width:100%; min-width:640px}
.w2grid th,.w2grid td{border-bottom:1px solid var(--line-soft); padding:0; text-align:right}
.w2grid thead th{
font-size:11px; font-weight:640; color:var(--muted); background:var(--bg);
padding:9px 7px; text-align:right; border-bottom:1px solid var(--line);
position:sticky; top:0;
}
.w2grid thead th.part::after{content:' ◐'; opacity:.6}
.w2grid .rowh{
text-align:left; padding:10px 12px; font-weight:560; font-size:12.5px; white-space:nowrap;
background:var(--card); position:sticky; left:0; box-shadow:1px 0 0 var(--line-soft);
z-index:1;
}
.w2grid thead .rowh{background:var(--bg); z-index:2}
.w2grid td{padding:6px 7px}
/* The total is the number the user is steering by, so it stays pinned while the
month columns scroll underneath it. */
.w2grid .tot{
background:var(--bg); font-weight:640; padding-right:13px;
position:sticky; right:0; box-shadow:-1px 0 0 var(--line-soft);
}
.w2grid thead .tot{z-index:3}
.histrow td,.histrow .rowh{background:#FAFAF8; color:var(--muted)}
.histrow .tot{background:#F4F4F0}
.histrow .rowh{color:var(--ink)}
.ro{font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
background:var(--line-soft); padding:2px 5px; border-radius:4px; margin-left:6px; font-weight:640}
.ro.pr{background:var(--accent-soft); color:var(--accent-ink)}
.proprow td{padding:5px 4px}
.proprow input{
width:100%; min-width:70px; text-align:right; padding:6px 7px; font-size:13px;
border:1px solid var(--line); border-radius:7px; font-family:var(--font);
font-variant-numeric:tabular-nums; background:#fff; color:var(--ink);
/* The spinner steals ~16px, which is the difference between "6,000" and "600(". */
appearance:textfield; -moz-appearance:textfield;
}
.proprow input::-webkit-outer-spin-button,
.proprow input::-webkit-inner-spin-button{appearance:none; margin:0}
.proprow input:focus{border-color:var(--accent); outline:none;
box-shadow:0 0 0 3px var(--accent-soft)}
.proprow input:disabled{background:var(--bg); color:var(--muted)}
.chgrow td,.chgrow .rowh{font-size:12px; color:var(--muted)}
.w2acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.w2notes{margin-top:22px; border-top:1px solid var(--line-soft); padding-top:16px}
.cmt{display:flex; gap:10px; align-items:flex-start; background:var(--bg);
border:1px solid var(--line-soft); border-radius:9px; padding:9px 11px; margin-bottom:7px}
.cmt p{font-size:13px; line-height:1.55; flex:1; margin:0}
.cmtadd{display:flex; gap:8px; margin-top:10px}
.cmtadd input{
flex:1; padding:9px 11px; font-size:13px; border:1px solid var(--line);
border-radius:8px; font-family:var(--font); color:var(--ink);
}
.cmtadd input:focus{border-color:var(--accent); outline:none}
.btn.danger.ghost{color:var(--danger); border-color:var(--line)}
.btn.danger.ghost:hover{background:var(--danger-soft); border-color:var(--danger-line)}
/* ------------------------------------------------ chart of accounts: add a code */
.addrow{
display:flex; gap:10px; align-items:center; padding:14px 20px;
border-bottom:1px solid var(--line); background:var(--bg);
}
.addrow input, .addrow select{
padding:9px 11px; font-size:13.5px; border:1px solid var(--line); border-radius:8px;
font-family:var(--font); color:var(--ink); background:#fff;
}
.addrow input:focus, .addrow select:focus{border-color:var(--accent); outline:none;
box-shadow:0 0 0 3px var(--accent-soft)}
.addrow input.acode{width:120px; font-variant-numeric:tabular-nums}
.addrow input:not(.acode){flex:1; min-width:220px}
.addrow select{width:280px}
.badge.cap{background:var(--slate-100); color:var(--ink-2)}
.badge.cap .dot{background:var(--muted)}
/* ------------------------------------------------------------------- sign in */
.loginpage{background:var(--bg); min-height:100vh; display:flex;
align-items:center; justify-content:center; padding:24px}
.loginwrap{width:100%; max-width:380px}
.loginbrand{display:flex; align-items:center; gap:10px; font-size:17px; font-weight:660;
justify-content:center; margin-bottom:20px; letter-spacing:-.01em}
.loginbrand .bmark{width:28px; height:28px}
.logincard{
background:var(--card); border:1px solid var(--line);
border-radius:var(--r-card); padding:28px 26px; box-shadow:var(--shadow-md);
}
.logincard h1{font-size:20px; margin-bottom:4px; letter-spacing:-.02em}
.logincard .sub{font-size:13.5px; color:var(--muted); line-height:1.55; margin-bottom:20px}
.logincard .f{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px}
.logincard input{
width:100%; padding:11px 13px; font-size:var(--fs-body);
border:1px solid var(--line); border-radius:var(--r-input);
font-family:var(--font); color:var(--ink); background:var(--card);
margin-bottom:var(--s4); transition:.13s;
}
.logincard input:focus{border-color:var(--accent); outline:none;
box-shadow:0 0 0 3px var(--accent-soft)}
.logincard .btn{width:100%; justify-content:center; padding:11px}
.loginerr{
background:var(--danger-soft); border:1px solid var(--danger-line); color:var(--danger); font-size:13px;
padding:10px 12px; border-radius:9px; margin-bottom:16px; line-height:1.5;
}
.loginfoot{text-align:center; font-size:12px; color:var(--muted); margin-top:16px}
/* ==========================================================================
Mobile. This is a data-dense tool, so the goal below is not to hide detail
but to let it scroll honestly: month grids and budget tables stay whole and
scroll sideways inside their own container, while the page itself never does.
========================================================================== */
@media (max-width:900px){
/* ---- header: the product areas, Settings and Help move into one sheet; the
account stays where it is ---- */
.topbar .inner{padding:0 16px; height:56px}
.gnav, .gwide{display:none}
.gburger{
display:flex; flex-direction:column; justify-content:center; gap:4px; align-self:center;
width:38px; height:38px; padding:0 8px; margin-left:8px; cursor:pointer;
background:none; border:1px solid var(--line); border-radius:9px;
}
.gburger span{display:block; height:2px; background:var(--ink-2); border-radius:2px;
transition:transform .18s, opacity .12s}
.gburger[aria-expanded="true"]{background:var(--accent-soft); border-color:var(--accent)}
.gburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.gburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.gburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.gburger:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
}
@media (max-width:860px){
/* ---- page furniture ---- */
/* Extra bottom room so the floating copilot button never parks on top of the
last card with nothing below it to scroll. */
.wrap{padding:20px 16px 104px}
.page-head{gap:12px; margin-bottom:18px}
.page-head h1{font-size:23px}
.btn-row{width:100%}
.tiles{grid-template-columns:1fr 1fr; gap:10px}
.tile{padding:14px 15px}
.tile .v{font-size:22px}
.tile.hero{grid-column:1 / -1}
/* Any table wide enough to matter scrolls in its own box, so the page does not.
The fade on the right edge is the only clue a touch device gets that there is
more to see, since there is no scrollbar to notice. */
.card table{min-width:600px}
/* Tabs scroll rather than truncating: "CapEx" and "Explain" must stay reachable.
The edge fade is the cue that they do. */
.tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; min-width:0;
background:
linear-gradient(90deg, var(--bg) 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
linear-gradient(270deg, var(--bg) 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
radial-gradient(farthest-side at 0 50%, rgba(22,35,61,.14), transparent) left / 10px 100% no-repeat,
radial-gradient(farthest-side at 100% 50%, rgba(22,35,61,.14), transparent) right / 10px 100% no-repeat;
background-attachment: local, local, scroll, scroll;
}
.tab{white-space:nowrap; flex:none}
/* Card headers carry buttons next to the title; let them drop to a second line. */
.card-head{flex-wrap:wrap}
.t-scroll, .card > .t-scroll, .gridscroll, .cxwrap{
overflow-x:auto; -webkit-overflow-scrolling:touch;
background:
linear-gradient(90deg, var(--card) 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat,
linear-gradient(270deg, var(--card) 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat,
radial-gradient(farthest-side at 0 50%, rgba(22,35,61,.12), transparent) left / 12px 100% no-repeat,
radial-gradient(farthest-side at 100% 50%, rgba(22,35,61,.12), transparent) right / 12px 100% no-repeat;
background-attachment: local, local, scroll, scroll;
}
/* ---- wizard chrome ---- */
/* The stepper and its exit button competed for one line and both lost. The
stepper scrolls on its own row; the button gets the row beneath it. */
.stagebar{gap:10px; margin-bottom:18px; flex-direction:column; align-items:stretch}
.stagebar > .btn, .stagebar > a.btn{align-self:flex-start}
/* min-width:0 is what makes overflow-x actually engage: a flex item refuses to
shrink below its content width without it, so the strip pushes the page wide
instead of scrolling inside itself. */
.stages{flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:6px;
margin-bottom:0; -webkit-overflow-scrolling:touch; min-width:0; max-width:100%;
/* Same edge-fade cue as .t-scroll, on the page background instead of a card.
Without it a clipped stage name ("4 Budge…") reads as a broken layout
rather than a strip you can scroll. */
background:
linear-gradient(90deg, var(--bg) 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
linear-gradient(270deg, var(--bg) 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
radial-gradient(farthest-side at 0 50%, rgba(22,35,61,.14), transparent) left / 10px 100% no-repeat,
radial-gradient(farthest-side at 100% 50%, rgba(22,35,61,.14), transparent) right / 10px 100% no-repeat;
background-attachment: local, local, scroll, scroll;
}
.stagebar .stages{flex:0 1 auto}
.stage{white-space:nowrap; font-size:13px}
.stage + .stage::before{width:14px}
.sticky-foot, .revfoot{flex-wrap:wrap; gap:10px}
.revfoot .hint{order:3; flex-basis:100%; text-align:left}
/* ---- review + capex windows become sheets ---- */
.modal, .modal.wide, .modal.sheet{
width:100%; max-width:100%; max-height:100dvh; height:100dvh;
top:0; left:0; transform:none; border-radius:0;
}
.modal.on{transform:none}
.mhead{padding:16px 16px 12px}
.mtabs{padding:0 16px; overflow-x:auto}
.mtab{white-space:nowrap}
.mbody{padding:16px}
.mfoot{padding:12px 16px; position:sticky; bottom:0; background:var(--card)}
.cxtable{min-width:620px}
.cxfoot{flex-direction:column; align-items:stretch}
.cxfoot .field{max-width:none !important}
.exrow{flex-direction:column; align-items:flex-start; gap:8px}
.w2sum{gap:18px; flex-wrap:wrap}
.w2sum .v{font-size:17px}
.w2acts{gap:6px}
/* The month grid has ~390px to work with. A sticky row header plus a sticky
total column consume most of it and end up overlapping the very cells being
edited, so on a phone the total un-sticks -- the header above already shows
Budget Total -- and the row labels shed their badges. */
.w2grid .tot{position:static; box-shadow:none}
.w2grid .rowh{max-width:104px; white-space:normal; padding:8px 9px; font-size:11.5px;
line-height:1.3}
.w2grid .ro{display:none}
.w2grid thead th{padding:8px 6px; font-size:10.5px}
.proprow input{min-width:64px; padding:7px 6px}
.w2grid{min-width:0}
.cmtadd{flex-direction:column}
.cmtadd .btn{width:100%}
/* ---- contract editors (wizard question + review modal) ---- */
/* Seven columns cannot survive a phone. The header row disappears, each row
becomes a bordered card, and the .cf wrappers switch from display:contents
to labeled blocks so every field keeps its column name. */
.contract-head, .chead{display:none}
.contract-row, .crow{
grid-template-columns:1fr 1fr; gap:10px; align-items:start; position:relative;
border:1px solid var(--line); border-radius:12px;
padding:12px 46px 12px 12px; /* right strip reserved for the delete button */
margin-bottom:10px;
}
.contract-row .cf, .crow .cf{display:block; min-width:0}
.contract-row .cf > .cl, .crow .cf > .cl{
display:block; font-size:10.5px; font-weight:650; letter-spacing:.05em;
text-transform:uppercase; color:var(--muted); margin-bottom:4px;
}
.cf.wide{grid-column:1 / -1}
.contract-row .cf input, .contract-row .cf select,
.crow .cf input, .crow .cf select{width:100%}
.cf .input-suffix{width:100%}
.contract-row .x, .crow .cx{position:absolute; top:8px; right:8px}
/* ---- payroll position builder ---- */
.posgrid{grid-template-columns:1fr 1fr}
.paysum{grid-template-columns:1fr}
.payhdr{flex-direction:column; align-items:stretch; gap:8px}
.posname{width:120px; flex:1}
/* Unmapped-account mapper: label above, select and button below. */
.maprow{grid-template-columns:1fr}
.maprow select, .maprow .btn{width:100%}
/* Modal tab strip gets the same scroll fade, on the card surface. */
.mtabs{
background:
linear-gradient(90deg, var(--card) 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
linear-gradient(270deg, var(--card) 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
radial-gradient(farthest-side at 0 50%, rgba(22,35,61,.12), transparent) left / 10px 100% no-repeat,
radial-gradient(farthest-side at 100% 50%, rgba(22,35,61,.12), transparent) right / 10px 100% no-repeat;
background-attachment: local, local, scroll, scroll;
}
/* ---- chart of accounts ---- */
.addrow{flex-wrap:wrap; padding:12px 16px}
.addrow input.acode{width:100px}
.addrow input:not(.acode){min-width:140px}
.addrow select{width:100%}
/* ---- forms and pickers ---- */
.picks{grid-template-columns:1fr}
.acrow{grid-template-columns:1fr auto; gap:10px}
.drop.big{padding:34px 18px}
}
@media (max-width:520px){
.tiles{grid-template-columns:1fr}
.page-head h1{font-size:21px}
/* Three interview-mode buttons side by side become unreadable slivers here. */
.modebar{grid-template-columns:1fr}
.btn-row .btn{flex:1; justify-content:center}
.w2sum{gap:14px}
/* iOS Safari zooms the whole page when a focused input is under 16px, which on a
form-heavy tool means fighting the viewport on every field. The bare element
selector loses to every class-scoped input rule in this file, and overriding
each one by name would silently miss the next input added -- so this is the
rare case where the blanket override is the maintainable choice. */
input, select, textarea{font-size:16px !important}
}
/* ------------------------------------------------ record tables on small screens
A month grid is a grid and has to scroll sideways -- twelve columns cannot become
anything else. A list of records is different: each row is one thing, so below
this width the row becomes a small card with its column headers repeated as
labels. Nothing is truncated and nothing scrolls. Only tables marked .t-stack
change; the operating budget and the CapEx worksheet keep their grid. */
@media (max-width:700px){
.t-stack{min-width:0 !important; width:100%}
.t-stack thead{display:none}
.t-stack, .t-stack tbody, .t-stack tr, .t-stack td{display:block; width:auto}
.t-stack tr{
border:1px solid var(--line); border-radius:12px; padding:12px 14px;
margin:0 0 10px; background:var(--card);
}
.t-stack tr:last-child{margin-bottom:0}
.t-stack td{
display:flex; align-items:baseline; justify-content:space-between; gap:14px;
padding:5px 0; border:none; text-align:right;
}
.t-stack td::before{
content:attr(data-label); flex:none; text-align:left;
font-size:11px; letter-spacing:.05em; text-transform:uppercase;
color:var(--muted); font-weight:640;
}
/* The first cell is the record's identity, so it reads as a heading, not a field. */
.t-stack td:first-child{
display:block; text-align:left; padding:0 0 8px;
border-bottom:1px solid var(--line-soft); margin-bottom:6px;
}
.t-stack td:first-child::before{display:none}
.t-stack td:first-child strong{font-size:15px}
/* Cells with no label are actions: give them the full width, side by side. */
.t-stack td:not([data-label]){justify-content:flex-start; gap:8px; padding-top:10px}
.t-stack td:not([data-label])::before{display:none}
.t-stack td.acts .btn, .t-stack td.acts button{flex:1}
.t-stack td select{width:auto; max-width:62%}
.t-stack tr.clickable{cursor:pointer}
/* The scroll container has nothing left to scroll, so drop its edge shading. */
.t-scroll:has(.t-stack){overflow-x:visible; background:none}
}
/* Chart of accounts: the heading type a group of GL accounts sits under. Shown as a
quiet divider rather than a badge per row, so the financial hierarchy reads at a
glance without competing with the account names. */
.typehead{color:var(--muted); font-size:11px; letter-spacing:.06em;
text-transform:uppercase; margin:14px 0 4px}
.typehead:first-child{margin-top:0}
.tag{margin-left:8px; font-size:11px; white-space:nowrap}
/* ============================================= phase 2: budget overview ==== */
/* Reusable pieces, tokens only -- no literal colours, radii or sizes. */
/* ------------------------------------------------- budget page header ---- */
.bpghead{
display:flex; align-items:flex-start; gap:var(--s4);
margin:14px 0 26px; flex-wrap:wrap;
}
/* A little more room between the tab strip and the content under it. Scoped to the
budget page so every other screen's tabs keep their spacing. */
#bpgwrap > .tabs{margin-bottom:26px}
/* The strip keeps the height it was approved at. The Review tab's count badge set it:
the tallest tab, which the rest stretched to. With Review gone the strip would
shrink by that sliver and nudge every tab's content up. A hidden, zero-width tab
carrying the same badge sets the same height at any display scaling -- which a
fixed pixel height cannot -- and leaves every visible label where it was. */
#bpgwrap > .tabs .tabstrut{
visibility:hidden; pointer-events:none; flex:none; width:0;
padding-left:0; padding-right:0; overflow:visible;
}
#bpgwrap > .tabs .tabstrut .c{margin-left:0; padding-left:0; padding-right:0}
.bpghead .grow{flex:1; min-width:280px}
.bpgtitle{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
font-size:30px; font-weight:670; letter-spacing:-.026em; line-height:1.15;
margin:0 0 6px; color:var(--ink);
}
.bpgmeta{margin:0; color:var(--muted); font-size:var(--fs-body)}
.bpgmeta .sep{color:var(--slate-300); margin:0 9px}
/* --------------------------------------------- dashboard content width ---
A reading-and-scanning tab gets a measure; a financial workspace does not.
Applied per tab rather than to the page, because the operating budget needs
every pixel it can get for twelve months, totals and notes. */
.wrap.wide.ovw{max-width:1460px}
/* ------------------------------------------------------------ KPI card ---- */
.kpis{
display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
gap:var(--s3); margin-bottom:var(--s4);
}
.kpicard{
position:relative; background:var(--card); border:1px solid var(--line);
border-radius:var(--r-card); box-shadow:var(--shadow-sm);
padding:22px 22px 22px;
}
/* The headline metric keeps a hairline of emphasis. Everything else about the card is
identical to its four neighbours, which is what makes one line enough. */
.kpicard.lead::before{
content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:4px;
background:var(--ok); border-radius:var(--r-card) var(--r-card) 0 0;
}
.kpicard .kh{display:flex; align-items:center; gap:12px; margin-bottom:16px}
/* The tint names the metric; it is not a verdict. Operating Expenses wears an amber
icon and a green variance at the same time, and both are correct: the icon says
which line this is, the variance says how it is doing. */
.kpi-ic{
width:42px; height:42px; border-radius:12px; flex:0 0 auto;
background:var(--accent-soft); color:var(--accent);
display:grid; place-items:center;
}
/* The 100 steps, not the 50s. A tile has to carry its colour at 38px across a row of
five; the 50 steps are a hair off white and read as grey at that size. The page
ground and the cards are untouched, so the colour stays deliberate rather than busy. */
.kpi-ic.i-noi, .kpi-ic.i-peak{background:var(--green-200); color:var(--green-700)}
.kpi-ic.i-egi, .kpi-ic.i-units, .kpi-ic.i-leases, .kpi-ic.i-done{background:var(--blue-200); color:var(--blue-700)}
.kpi-ic.i-opex, .kpi-ic.i-attn{background:var(--orange-200); color:var(--orange-700)}
.kpi-ic.i-ratio, .kpi-ic.i-items, .kpi-ic.i-budgets{background:var(--purple-200); color:var(--purple-700)}
.kpi-ic.i-capex, .kpi-ic.i-mtm{background:var(--slate-300); color:var(--slate-700)}
.kpi-ic svg{width:21px; height:21px; display:block}
.kpicard .kk{font-size:13.5px; font-weight:600; color:var(--ink-2); line-height:1.25;
letter-spacing:-.005em}
.kpicard .kv{
font-size:29px; font-weight:680; letter-spacing:-.032em; line-height:1.08;
margin-bottom:9px; color:var(--ink);
}
.kpicard .kd{font-size:13px; font-weight:650; display:flex; align-items:center; gap:5px}
.kpicard .kd .ar{font-size:12px; line-height:1}
.kpicard .kd.up{color:var(--fav)}
.kpicard .kd.dn{color:var(--danger)}
.kpicard .kd.flat{color:var(--muted); font-weight:550}
.kpicard .kn{font-size:12.5px; color:var(--muted); margin-top:5px}
/* Five across is the composition from 1400px up and is not touched here. Between 1200
and 1400 the row stays five across but each card gives its title the room: a little
less side padding and a slightly smaller tile, so "Effective Gross Income" sits on
one line without the type itself shrinking. */
@media (max-width:1399px){
.kpicard{padding-left:var(--s4); padding-right:var(--s4)}
.kpicard .kh{gap:9px}
.kpi-ic{width:36px; height:36px; border-radius:10px}
.kpi-ic svg{width:18px; height:18px}
.kpicard .kk{white-space:nowrap}
.kpicard .kv{font-size:27px}
}
/* Under 1200 five cards cannot hold their titles, so the row becomes an intentional
three over two on a six-column grid, rather than four and a stray fifth. */
@media (max-width:1199px){
.kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.kpis > .kpicard{grid-column:span 2}
.kpis > .kpicard:nth-child(n+4){grid-column:span 3}
}
/* Phone and small tablet: the headline card across the top, then two pairs. */
@media (max-width:760px){
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpis > .kpicard, .kpis > .kpicard:nth-child(n+4){grid-column:span 1}
.kpis > .kpicard:first-child{grid-column:1 / -1}
.kpicard .kk{white-space:normal}
}
@media (max-width:480px){
.kpis{grid-template-columns:1fr}
}
/* The compact card (Capital Plan): three across, the tile beside the figure, down to
the same 760px step as the row above; then Total CapEx over a pair, then one column. */
.kpis.kpis3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis.kpis3 > .kpicard{grid-column:auto}
@media (max-width:760px){
.kpis.kpis3{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpis.kpis3 > .kpicard:first-child{grid-column:1 / -1}
}
@media (max-width:480px){
.kpis.kpis3{grid-template-columns:1fr}
}
.kpicard.kpic{display:flex; align-items:center; gap:16px; padding-top:18px; padding-bottom:18px}
.kpicard.kpic .kb{min-width:0}
.kpicard.kpic .kv{margin:4px 0 0}
.kpicard.kpic .kn{margin-top:3px}
/* The same compact card, four across (Budgets): two pairs once four no longer fit
their captions, then one column on a phone. */
.kpis.kpis4{grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:var(--s5)}
.kpis.kpis4 > .kpicard{grid-column:auto}
@media (max-width:1100px){
.kpis.kpis4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
.kpis.kpis4{grid-template-columns:1fr}
}
/* --------------------------------------------------------- budgets list ---- */
/* Planning > Budgeting. The list's header carries the search and the status filter
(the operating budget's own controls), each row opens its budget, and the one
thing a row can do besides -- delete -- sits behind its overflow button. */
.bnew svg{width:14px; height:14px}
.blist .bname{color:inherit; text-decoration:none}
.blist .bname:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.blist td.bacts{width:1%; white-space:nowrap; padding-top:6px; padding-bottom:6px}
.bmore{display:inline-grid; place-items:center; width:32px; height:32px; padding:0; border:0;
border-radius:var(--r-btn); background:none; color:var(--muted); cursor:pointer;
vertical-align:middle}
.bmore svg{width:18px; height:18px; fill:currentColor}
.bmore:hover, .bmore[aria-expanded="true"]{background:var(--slate-100); color:var(--ink)}
.bmore:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
/* The chevron says the row opens. It is a cue, not a control: the row is the link. */
.bgo{width:16px; height:16px; margin-left:6px; color:var(--slate-400); vertical-align:middle}
tr.brow:hover .bgo{color:var(--ink-2)}
/* Fixed, and placed by the page under the button that opened it, so the table's own
scroll container cannot clip it. */
.bmenu{position:fixed; z-index:70; min-width:172px; padding:4px; background:var(--card);
border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg)}
.bmenu button{display:flex; align-items:center; gap:9px; width:100%; border:0; background:none;
font-family:var(--font); font-size:13.5px; font-weight:550; color:var(--ink); text-align:left;
padding:9px 12px; border-radius:7px; cursor:pointer}
.bmenu button svg{width:16px; height:16px; flex:none}
.bmenu button:hover, .bmenu button:focus-visible{background:var(--bg); outline:none}
.bmenu button.danger{color:var(--danger)}
.bmenu button.danger:hover, .bmenu button.danger:focus-visible{background:var(--danger-soft)}
.bnone{padding:28px var(--s6); text-align:center; color:var(--muted); font-size:14px}
.bnone button{border:0; background:none; padding:0; margin-left:4px; font-family:var(--font);
font-size:inherit; font-weight:550; color:var(--accent-ink); cursor:pointer}
.bnone button:hover{text-decoration:underline}
@media (max-width:700px){
/* Stacked, each budget is a small card: its actions sit at the card's right edge. */
.t-stack td.bacts{width:auto; justify-content:flex-end; padding-top:8px; padding-bottom:0}
}
/* ---------------------------------------------------- overview two-up ----- */
/* minmax(0,1fr), not 1fr: a bare 1fr column is at least as wide as its content, so a
table of account names would push the card past a phone screen instead of scrolling
inside it. */
/* The two cards share the row height, so their bottoms line up as well as their tops.
The card stretches, not the table: Budget vs. T-12 keeps its row density and any
extra height is plain card beneath the last row. */
.ovgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s4);
align-items:stretch}
.ovgrid > .card{margin-bottom:0}
@media (max-width:1100px){ .ovgrid{grid-template-columns:minmax(0,1fr)} }
/* Two-up, the comparison table has about 600px. The category names are short enough to
stay on one line if the cells give up a little side padding, which reads far better
than five two-line rows. */
@media (min-width:1101px) and (max-width:1399px){
.ovgrid table th, .ovgrid table td{padding-left:var(--s3); padding-right:var(--s3)}
.ovgrid table td:first-child{white-space:nowrap}
}
/* ------------------------------------------------------- driver list ------ */
.drvhead{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.drvlist{width:100%; border-collapse:collapse}
.drvlist td{
padding:11px var(--s4); border-bottom:1px solid var(--line-soft);
font-size:var(--fs-table); vertical-align:middle;
}
.drvlist tr:last-child td{border-bottom:none}
.drvlist .dnm{color:var(--ink); white-space:nowrap; font-weight:550}
.drvlist .dnm .gl{color:var(--muted); font-size:12px; margin-left:6px}
.drvlist .dbarcell{width:42%; padding-left:0; padding-right:0}
.drvbar{height:9px; border-radius:999px; background:var(--line-soft); overflow:hidden}
/* Magnitude only, one colour for every row. Which way a line moved is in the signed
figure beside it; whether that is good depends on the account, and several of the
largest movers here are one line being split into others rather than money saved. */
.drvbar i{display:block; height:100%; border-radius:999px; background:var(--blue-400)}
.drvlist .damt{text-align:right; white-space:nowrap; font-weight:600; color:var(--ink)}
.drvempty{padding:var(--s5) var(--s4); color:var(--muted); font-size:var(--fs-table)}
/* ------------------------------------------------------------ info tip ---- */
/* The dark explanatory tip beside an info mark: Company Assumptions and the budget
drawers. Hidden until its mark is hovered or opened. */
.tipbox{
position:absolute; right:-4px; bottom:calc(100% + 9px); z-index:50; width:280px;
padding:10px 12px; border-radius:var(--r-input); background:var(--ink); color:#fff;
font-size:12.5px; font-weight:400; line-height:1.45; text-align:left;
text-transform:none; letter-spacing:0; white-space:normal; opacity:0; pointer-events:none;
transition:opacity .13s; box-shadow:0 10px 30px rgba(22,35,61,.22);
}
/* The mark itself: a small ringed i. The budget page carries the same rules in its
own style block; these let the other pages use the mark as it is. */
.azi{display:inline-grid; place-items:center; width:15px; height:15px; flex:none;
border:1.3px solid var(--slate-400); border-radius:50%; color:var(--slate-500);
font-size:9.5px; font-weight:700; font-style:normal; cursor:help;
background:none; padding:0; font-family:var(--font); line-height:1}
.azi:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.dtip{display:inline-flex}
/* Where the mark sits in Budget Questions, the tip is placed against the mark. */
.appliedgrid .dtip, .frow .dtip{position:relative}
.appliedgrid .dtip .tipbox, .frow .dtip .tipbox{left:-10px; right:auto; width:260px; max-width:none}
.dtip .tipbox{left:12px; right:auto; bottom:calc(100% + 6px); width:auto;
max-width:min(280px, calc(100% - 24px))}
.dtip:hover:not(.hush) .tipbox, .dtip.on .tipbox{opacity:1}
.dtip.below .tipbox{top:calc(100% + 6px); bottom:auto}
/* ------------------------------------------------- exception pages ---- */
/* Resolve account matches and Review Inputs: a summary of what BudgetPilot handled
and what is left, a compact table of only the lines that need a person, a green
line when none do, and a quieter secondary card for the rest. */
.rctx{margin:calc(6px - var(--s6)) 0 0; font-size:var(--fs-label)}
.rsum{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
align-items:center; gap:var(--s6); padding:var(--s4) var(--s6); margin-bottom:var(--s4)}
.rsum.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rs{display:flex; align-items:center; gap:var(--s4); min-width:0}
.rs + .rs, .rsact{border-left:1px solid var(--line-soft); padding-left:var(--s6)}
.rsic{flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center}
.rsic svg{width:22px; height:22px}
.rs.ok .rsic{background:var(--ok-soft); color:var(--ok-strong)}
.rs.warn .rsic{background:var(--amber-100); color:var(--amber-600)}
.rst{font-size:15px; font-weight:620; color:var(--ink); letter-spacing:-.006em; line-height:1.3}
.rsd{margin-top:2px; font-size:13.5px; color:var(--muted); line-height:1.45}
.rsact{display:flex; align-items:center}
.rstoggle{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-ink);
font-weight:600; white-space:nowrap}
.rstoggle:hover{background:var(--blue-100); border-color:var(--accent-line); color:var(--accent-ink)}
.rstoggle .cv{margin-left:8px; font-size:12px}
.rcard{margin-bottom:var(--s4)}
.rhead{display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s5) var(--s6) 0}
.rhead .grow{flex:1; min-width:0}
.rhead h2{margin:0}
.rhead .hint{margin:2px 0 0; font-size:var(--fs-body)}
.rtools{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; justify-content:flex-end}
.rtblwrap{padding:var(--s3) var(--s6) 0}
.rtbl th{padding:11px var(--s3)}
.rtbl th:first-child, .rtbl td:first-child{padding-left:var(--s1)}
.rtbl th:last-child, .rtbl td:last-child{padding-right:var(--s1)}
.rtbl td{padding:12px var(--s3); vertical-align:middle}
.rtbl tbody tr:last-child td{border-bottom:1px solid var(--line-soft)}
.rdone{display:flex; align-items:center; gap:var(--s4); margin:var(--s3) var(--s6) 0;
padding:var(--s4) var(--s5); border:1px solid var(--ok-line); border-radius:var(--r-panel);
background:var(--ok-soft)}
.rdone .rsic{background:var(--card); color:var(--ok-strong); width:40px; height:40px}
.rdone .rsic svg{width:20px; height:20px}
.rdone .rst{color:var(--ok-ink)}
.rdone .rsd{color:var(--ok-ink); opacity:.85}
.rsec{box-shadow:none}
.rsec .rhead h2{font-size:var(--fs-section)}
.rsec .rtblwrap{padding-bottom:var(--s5)}
.setupfoot.rfoot .btn.primary{min-width:150px}
@media (max-width:900px){
.rsum, .rsum.two{grid-template-columns:1fr; gap:var(--s3)}
.rs + .rs, .rsact{border-left:0; padding-left:0}
.rs + .rs{border-top:1px solid var(--line-soft); padding-top:var(--s3)}
.rsact{border-top:1px solid var(--line-soft); padding-top:var(--s3)}
.rstoggle{width:100%; justify-content:space-between}
}
@media (max-width:760px){
/* One card per row, not a five-column table: the first line holds the first two
cells, everything else goes full width underneath. */
.rtbl thead{display:none}
.card .rtbl{display:block; min-width:0} /* not the 600px a scrolling table gets */
.rtbl tbody{display:block}
.rtbl tr{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s3);
align-items:center; padding:var(--s3) 0; border-bottom:1px solid var(--line-soft)}
.rtbl tbody tr:last-child{border-bottom:0}
.rtbl td{display:block; width:auto !important; padding:0 !important; border-bottom:0 !important}
.rtbl td.csrc{grid-column:1}
.rtbl td.camt{grid-column:2; text-align:right}
.rhead{flex-direction:column}
.rtools{justify-content:flex-start}
}
@media (max-width:480px){
.rtblwrap, .rhead{padding-left:var(--s4); padding-right:var(--s4)}
.rdone{margin-left:var(--s4); margin-right:var(--s4)}
.rsum{padding:var(--s4)}
.setupfoot.rfoot .btn.primary{min-width:0}
}
/* --------------------------------------------------------- NOI tooltip ---- */
/* The card keeps the full content width -- the monthly table under the Table view
needs it. The plot does not: twelve points drawn across 1,400px push the months and
the axis labels further apart than the data justifies. Capped and centred inside the
card, and under the cap it simply uses what it has. */
.ovw .noiwrap{max-width:1240px; margin-left:auto; margin-right:auto}
.noitip{
position:absolute; z-index:20; pointer-events:none; transform:translate(-50%,0);
background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
box-shadow:var(--shadow-lg); padding:12px 14px; min-width:212px;
}
.noitip .tm{font-size:12px; color:var(--muted); margin-bottom:1px}
.noitip .tv{font-size:20px; font-weight:660; letter-spacing:-.02em; line-height:1.2;
margin-bottom:9px; color:var(--ink)}
.noitip .tr{display:flex; justify-content:space-between; gap:var(--s5);
font-size:12.5px; padding:3px 0}
.noitip .tr.mover{
margin-top:6px; padding-top:8px; border-top:1px solid var(--line-soft);
align-items:baseline;
}
.noitip .tr.mover .tvl{font-weight:600; text-align:right}
.noitip .tr .tk{color:var(--muted)}
.noitip .tr .tvl{color:var(--ink); font-variant-numeric:tabular-nums}
/* ------------------------------------------- operating budget workspace ---- */
/* The monthly grid. Its own class rather than .opgrid, which the capital plan still
uses and which keeps its look. */
.obcard{overflow:hidden}
.obhead{flex-wrap:wrap; row-gap:var(--s3)}
.obhead .grow{min-width:260px}
.obtools{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
/* Expand / Collapse all: a quiet text control beside the search, not a third box. */
.obfoldall{display:inline-flex; align-items:center; gap:6px; padding:6px 8px;
margin-right:2px; background:none; border:none; border-radius:var(--r-btn);
font-family:var(--font); font-size:var(--fs-label); font-weight:550;
color:var(--ink-2); cursor:pointer; white-space:nowrap}
.obfoldall svg{width:14px; height:14px; color:var(--muted)}
.obfoldall:hover:not(:disabled){background:var(--surface-2); color:var(--accent-ink)}
.obfoldall:hover:not(:disabled) svg{color:var(--accent)}
.obfoldall:disabled{color:var(--slate-400); cursor:default}
.obfoldall:disabled svg{color:var(--slate-300)}
.obfoldall:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.obsearch{position:relative; display:block; width:250px; margin:0}
.obsearch svg{
position:absolute; left:12px; top:50%; transform:translateY(-50%);
width:16px; height:16px; color:var(--muted); pointer-events:none;
}
.obsearch input[type=text]{padding:8px 12px 8px 36px; font-size:var(--fs-label)}
.obtools select{
width:auto; min-width:180px; padding:8px 34px 8px 12px;
font-size:var(--fs-label); font-weight:550; color:var(--ink);
}
/* Only the grid scrolls sideways; the page never does. A thin, quiet bar in the
system's own greys rather than the browser's default. */
.obscroll{
overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--slate-300) var(--slate-100);
}
/* Fills the card, and grows past it only when the columns' own minimums do not fit --
then the grid scrolls rather than squeezing a figure. */
.obgrid{border-collapse:separate; border-spacing:0; width:100%}
.obgrid th, .obgrid td{
padding:7px 12px; font-size:var(--fs-label); white-space:nowrap;
border-bottom:1px solid var(--line-soft); background:var(--card); color:var(--ink-2);
}
/* The figures keep their size at every width; what tightened is the gutter between
them, so the whole year, its total and the note fit a full-screen window. Below that
the grid scrolls instead of shrinking a month. */
.obgrid td.num, .obgrid thead th.r{padding-left:6px; padding-right:6px; min-width:75px}
.obgrid .obtot{min-width:88px; padding-right:7px; box-shadow:inset 1px 0 0 var(--line-soft)}
.obgrid thead th{
font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;
color:var(--ink-2); background:var(--surface-2); border-bottom:1px solid var(--line);
padding-top:12px; padding-bottom:12px;
}
.obgrid td.obtot{color:var(--ink); font-weight:550}
/* The account on the left and its note on the right stay put; the months scroll
between them. Each pinned cell is opaque, so no figure shows through underneath. */
.obgrid .obname{
position:sticky; left:0; z-index:2; width:196px; min-width:196px; max-width:196px;
border-right:1px solid var(--line);
}
.obgrid .notecell{
position:sticky; right:0; z-index:2; width:222px; min-width:222px; max-width:222px;
white-space:normal; border-left:1px solid var(--line);
}
.obgrid thead .obname, .obgrid thead .notecell{z-index:3}
/* A soft edge that appears only while something is scrolled beneath it. */
.obgrid .obname::after, .obgrid .notecell::before{
content:""; position:absolute; top:0; bottom:-1px; width:12px; pointer-events:none;
opacity:0; transition:opacity .15s;
}
.obgrid .obname::after{left:100%;
background:linear-gradient(90deg, rgba(15,23,42,.08), rgba(15,23,42,0))}
.obgrid .notecell::before{right:100%;
background:linear-gradient(270deg, rgba(15,23,42,.08), rgba(15,23,42,0))}
.obscroll.sl .obname::after, .obscroll.sr .notecell::before{opacity:1}
/* The note, as the drawer holds it: two lines, then an ellipsis. The whole text is
in the drawer, and in the cell's tooltip. */
.obgrid .obnote{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
font-size:12px; line-height:1.36; color:var(--ink-2);
}
/* The hierarchy: section, then the chart's category, then the account. A long name
wraps to a second line rather than widening the column; the note beside it is two
lines already, so the row is no taller for it. */
.obgrid td.obname{white-space:normal; line-height:1.35}
.obgrid .obname .obl{vertical-align:middle}
.obgrid .obname.d0{padding-left:10px}
.obgrid .obname.d1{padding-left:24px}
/* The chevron sits in a 26px gutter of its own, so text stops 6px short of it. */
.obgrid .obname.d2{padding-left:46px; padding-right:26px}
.obgrid td.obname.d0:not(:has(.obcaret)){padding-left:32px}
.obcaret{
width:16px; height:16px; margin-right:6px; vertical-align:middle; color:var(--muted);
transition:transform .15s;
}
tr[aria-expanded="false"] .obcaret{transform:rotate(-90deg)}
.obgrid .gl{color:var(--muted); font-size:12px; margin-left:2px; vertical-align:middle;
white-space:nowrap}
.obgrid .editmark{vertical-align:middle; margin-left:2px; white-space:nowrap}
/* Section rows: a faint ground for where you are in the statement -- never a verdict
on the figures, which stay in ink. */
.obgrid tr.obsec > td{
background:var(--green-50); color:var(--ink); font-weight:650;
border-bottom-color:var(--line);
}
.obgrid tr.obsec.exp > td{background:var(--red-50)}
.obgrid tr.obsec.nonop > td{background:var(--surface-2)}
/* The section row is a quiet header now -- a lighter tint, no figures -- and the
section's total below its detail carries the full tint and bold figures. NOI stays
the strongest row. */
.obgrid tr.obsec > td{background:color-mix(in srgb, var(--green-50) 50%, var(--card));
font-weight:620; border-bottom-color:var(--line-soft)}
.obgrid tr.obsec.exp > td{background:color-mix(in srgb, var(--red-50) 50%, var(--card))}
.obgrid tr.obsec.nonop > td{background:color-mix(in srgb, var(--surface-2) 50%, var(--card))}
.obgrid tr.obstot > td{
background:var(--green-50); color:var(--ink); font-weight:650;
border-top:1px solid var(--line); border-bottom-color:var(--line);
}
.obgrid tr.obstot.exp > td{background:var(--red-50)}
.obgrid tr.obstot.nonop > td{background:var(--surface-2)}
.obgrid tr.obstot > td.obtot{font-weight:680}
/* "Total Operating Expenses" is a line, not two: it keeps the section label's indent
and takes the cell's right padding, which the figure beside it does not need. */
.obgrid tr.obstot > td.obname{white-space:nowrap; padding-right:0}
.obgrid tr.obgrp > td{color:var(--ink); font-weight:600}
.obgrid tr.obgrp > td.num{font-weight:500}
.obgrid tr.obgrp > td.obtot{font-weight:600}
.obgrid tr.obsec, .obgrid tr.obgrp{cursor:pointer}
.obgrid.filtering tr.obsec, .obgrid.filtering tr.obgrp{cursor:default}
.obgrid tr.obsec:hover .obcaret, .obgrid tr.obgrp:hover .obcaret{color:var(--accent)}
.obgrid tr.obsec:focus-visible, .obgrid tr.obgrp:focus-visible{
outline:2px solid var(--accent); outline-offset:-2px;
}
.obgrid tr.obnoi > td{
background:var(--green-100); color:var(--ink); font-weight:700;
border-top:1px solid var(--line); border-bottom-color:var(--line);
}
.obgrid tr.obcap > td{background:var(--surface-2); color:var(--ink); font-weight:620}
/* The Capital Plan's own total: the palette's softest purple, the family its Capital
items card wears, and the figures a step bolder as the page's final line. The
operating budget's Total CapEx row is untouched. */
.cxgrid tr.obcap > td{background:var(--purple-soft); font-weight:650}
.cxgrid tr.obcap > td.obtot{font-weight:680}
.obgrid tbody tr:last-child > td{border-bottom:none}
/* Accounts open their drawer: a pointer, a blue hover and a quiet chevron that
brightens with it. */
.obgrid tr.oblr > td{background:var(--card)}
.obgrid tr.oblr:hover > td{background:var(--accent-soft)}
.obgrid tr.oblr .obl{color:var(--ink)}
.obgo{
position:absolute; right:6px; top:50%; transform:translateY(-50%);
width:14px; height:14px; color:var(--slate-300); transition:color .12s, transform .12s;
}
.obgrid tr.oblr:hover .obgo{color:var(--accent); transform:translate(2px,-50%)}
.obgrid tr.obx{visibility:collapse}
.obgrid tr.obempty td{padding:28px 14px; color:var(--muted); background:var(--card)}
.obemptyin{position:sticky; left:14px}
/* Where the header is tight, the search gives up 30px so the title and its line
still fit on one row beside Expand / Collapse all, and the grid starts where it
always has. Wider windows are untouched. */
@media (max-width:1060px){ .obsearch{width:220px} }
/* A phone has no room for two pinned columns; the note scrolls with the months. */
@media (max-width:760px){
.obsearch{width:100%}
.obtools, .obtools select{width:100%}
.obgrid .obname{min-width:200px}
.obgrid .notecell{position:static; width:260px; min-width:260px; max-width:260px}
.obgrid .notecell::before{display:none}
}
/* ------------------------------------------------------ assumptions tab ---- */
/* One quiet table: the assumption, its value, where the value came from, and how far
it moves NOI. Section rows are the grid's own quiet headers. */
.asmhead, .asmrow{display:grid; grid-template-columns:minmax(220px,1.7fr) 150px 190px minmax(240px,1.5fr);
column-gap:var(--s6); align-items:center; padding:0 var(--s6)}
.asmhead{height:44px; border-bottom:1px solid var(--line); font-size:var(--fs-micro); font-weight:600;
letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.asmhead > div{display:flex; align-items:center; gap:8px}
.asmsec{padding:10px var(--s6); background:var(--surface-2); font-size:14px; font-weight:650;
color:var(--ink); border-bottom:1px solid var(--line-soft)}
.asmrow{min-height:50px; border-bottom:1px solid var(--line-soft)}
.asm > .asmrow:last-child{border-bottom:none}
.asmn{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink)}
/* The value control's width, shared with the heading above it so "Value" sits centred
over the whole control, suffix included, at every width. */
.asm{--asmv:140px}
.asmv .input-suffix{width:var(--asmv)}
.asmhead > div:nth-child(2){width:var(--asmv); justify-content:center}
/* A value shown for context and set somewhere else: the control's footprint and its
figure where an input's figure sits (clear of the stepper a number input keeps
room for), without the box that says it can be typed in. */
.asmro .asmrv{display:block; padding:8px 49px 8px 12px; text-align:right; font-size:14px;
color:var(--ink-2); font-variant-numeric:tabular-nums}
.asmv input{text-align:right; font-variant-numeric:tabular-nums; padding-top:7px; padding-bottom:7px;
font-size:14px}
.asmi{display:grid; grid-template-columns:72px 1fr; column-gap:var(--s5); align-items:baseline}
.asmi b{text-align:right; font-size:14px; font-weight:650; color:var(--ink)}
.asmi span{font-size:12.5px; color:var(--muted)}
.asmi .asmnone{font-weight:500; color:var(--muted)}
/* The info mark's tip hangs from the mark itself here, not from the row. */
.asm .dtip{position:relative}
.asm .dtip .tipbox{left:-10px; right:auto; width:280px; max-width:none}
.asm .dtip.end .tipbox{left:auto; right:-10px}
.asmhead .tipbox{text-transform:none; letter-spacing:0; font-weight:400}
.src.plan{background:var(--slate-100); color:var(--ink-2)}
/* A source chip that does something: a value set for this budget can be handed back
to the company standard from a one-line menu under its chip. */
.asmsrc{position:relative; display:inline-flex}
button.asmchip{border:0; font-family:inherit; line-height:12px; cursor:pointer;
display:inline-flex; align-items:center; gap:4px}
.asmchip svg{width:9px; height:9px; flex:none}
.asmchip:hover, .asmchip[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--accent-line)}
.asmchip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Handed back, and waiting for Apply changes. */
.asmchip.pending, .asmchip.pending:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.asmmenu{position:absolute; left:0; top:calc(100% + 6px); z-index:40; padding:4px;
background:var(--card); border:1px solid var(--line); border-radius:10px;
box-shadow:var(--shadow-lg); white-space:nowrap}
.asmmenu button{display:block; width:100%; border:0; background:none; font:inherit;
font-size:13px; font-weight:500; color:var(--ink); text-align:left; padding:8px 12px;
border-radius:7px; cursor:pointer}
.asmmenu button:hover, .asmmenu button:focus-visible{background:var(--bg); outline:none}
@media (max-width:1100px){
.asmhead, .asmrow{grid-template-columns:minmax(180px,1.4fr) 130px 160px minmax(200px,1.3fr);
column-gap:var(--s4); padding:0 var(--s5)}
.asmsec{padding-left:var(--s5); padding-right:var(--s5)}
.asm{--asmv:120px}
.asmi{grid-template-columns:64px 1fr; column-gap:var(--s3)}
}
/* Narrow: the assumption and its value on one line, its source and impact beneath. */
@media (max-width:800px){
.asmhead{grid-template-columns:1fr 120px}
.asmhead > div:nth-child(n+3){display:none}
.asmrow{grid-template-columns:1fr 120px; row-gap:6px; padding-top:10px; padding-bottom:10px}
.asms{grid-column:1; grid-row:2}
.asmi{grid-column:1 / -1; grid-row:2; display:flex; gap:7px; justify-content:flex-end;
align-items:baseline; padding-left:150px}
.asm .dtip .tipbox{width:240px}
/* The Value column is at the right edge here: its tip opens leftwards. */
.asmhead .dtip .tipbox{left:auto; right:-10px}
}
@media (max-width:480px){
.asmi{grid-row:3; justify-content:flex-start; padding-left:0}
/* A phone is narrower than a tip hung from its mark: it spans the row instead. */
.asmrow, .asmhead{position:relative}
.asm .dtip{position:static}
.asm .dtip .tipbox, .asmhead .dtip .tipbox{left:12px; right:12px; width:auto}
}
/* ---------------------------------------------------------- leases tab ---- */
/* The blue callout with its mark, and the renewal chart: a count per month, every
bar the one blue, ticks on the left, the count above each bar. */
.note.lrnote{display:flex; gap:12px; align-items:flex-start; margin-bottom:var(--s4)}
.note.lrnote strong{display:block; font-size:14px; margin-bottom:3px}
.lrni{width:20px; height:20px; flex:none; margin-top:1px; fill:none; stroke:currentColor;
stroke-width:2; stroke-linecap:round}
.lrcard{margin-bottom:var(--s4)}
.lrchart{display:grid; grid-template-columns:22px 1fr; grid-template-rows:1fr auto;
column-gap:10px; padding:6px 8px 0}
.lraxis{grid-row:1; writing-mode:vertical-rl; transform:rotate(180deg); text-align:center;
font-size:11.5px; color:var(--muted); align-self:center}
.lrplot{grid-row:1; position:relative; height:150px; margin-left:34px}
.lrgrid{position:absolute; left:0; right:0; height:0; border-top:1px solid var(--line-soft)}
.lrgrid span{position:absolute; right:calc(100% + 10px); top:-7px; font-size:11.5px;
color:var(--muted); font-variant-numeric:tabular-nums}
.lrbars{position:absolute; inset:0; display:grid; grid-template-columns:repeat(12,1fr);
align-items:end; gap:0}
.lrcol{position:relative; height:100%; display:flex; flex-direction:column;
justify-content:flex-end; align-items:center}
.lrcol i{display:block; width:40%; max-width:44px; background:var(--accent);
border-radius:3px 3px 0 0}
.lrcol.nz i{min-height:2px}
.lrcol .lrv{font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:4px; line-height:1}
.lrmonths{grid-column:2; display:grid; grid-template-columns:repeat(12,1fr); margin-left:34px;
padding-top:8px; text-align:center; font-size:12px; color:var(--muted)}
.lrtable th.r, .lrtable td.r{text-align:right}
.lrtable th{font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.04em}
@media (max-width:760px){
.lrplot{height:120px}
.lrmonths span{font-size:10.5px}
.lrcol .lrv{font-size:11px}
}
/* ------------------------------------------------ capital plan workspace ---- */
/* The operating budget's grid with one more column: an item's GL sits beside its
name, since several items may share one. The months give up 5px each for it, so
the whole year, its total and the note still fit a full-screen window. */
/* The page names itself above its figures; the search and Add sit together at the
right, over the grid. */
.cxph{margin-bottom:var(--s4)}
.cxph h2{font-size:22px; font-weight:650; letter-spacing:-.018em; margin:0 0 4px}
.cxph .hint{display:block}
.obtools.cxbar{justify-content:flex-end; margin-bottom:var(--s3)}
.cxadd{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.cxadd svg{width:14px; height:14px}
.cxheld{margin:var(--s4) var(--s6)}
.cxgrid td.num, .cxgrid thead th.r{min-width:70px}
.cxgrid .obname.cxn{padding-left:14px; padding-right:26px}
.cxgrid .cxgl{width:58px; min-width:58px; max-width:58px; padding-left:10px; padding-right:6px;
color:var(--ink-2); font-variant-numeric:tabular-nums}
.cxgrid .cxnone{color:var(--slate-300)}
.cxtag{display:inline-block; font-size:10.5px; font-weight:620; line-height:1.4;
padding:0 6px; border-radius:999px; background:var(--slate-100); color:var(--ink-2);
vertical-align:middle; white-space:nowrap}
.cxtag.warn{background:var(--warn-soft); color:var(--amber-700)}
.obgrid tr.cxgone .obl, .obgrid tr.cxgone td.num{color:var(--muted)}
.obgrid tr.cxsub > td{background:var(--surface-2); color:var(--ink); font-weight:620;
border-top:1px solid var(--line)}
.cxsubn{font-size:12px; font-weight:500; color:var(--muted)}
@media (max-width:760px){
.cxadd{width:100%; justify-content:center}
}
/* ------------------------------------------- draft budget side panels ------ */
/* The Copilot panel is parked off-canvas on the Draft Budget page; like the drawer,
it casts its shadow only while open. (The drawer's own fixes live on .drawer.) */
#bpgwrap ~ .copilot{box-shadow:none}
#bpgwrap ~ .copilot.on{box-shadow:-16px 0 40px rgba(15,23,42,.11)}