/* AP Dashboard.
   Look (Oct 29, 2026): LUPE theme, light by default with a dark mode. The theme layer is the last section of this file.
   Older note: black glassmorphism. Frosted translucent panels over soft glows in the organization colors (blue, violet, orange, green); white primary actions taken from the JA logo.
   Color is reserved for meaning: organization colors (validated categorical palette), priority and due-date status. */
:root{
  --f-display:"Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-body:"Manrope", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r:18px;
}
:root{
  color-scheme:dark;
  --bg:#0E0F11; --ink:#141518;
  --panel:linear-gradient(150deg,rgba(var(--hl),.085) 0%,rgba(var(--hl),.035) 100%); --panel-hi:rgba(var(--hl),.10); --edge:rgba(var(--hl),.13); --edge-hi:rgba(var(--hl),.26);
  --sunk:rgba(var(--hl),.04); --line:rgba(var(--hl),.08);
  --fg:#F4F4F2; --fg2:#D3D4D6; --muted:#9C9EA4; --faint:#6E7177;
  --white:#F4F4F2; --on-white:#121315;
  --bad:#FF7B72; --bad-soft:rgba(255,123,114,.14);
  --warn:#F2C14E; --warn-soft:rgba(242,193,78,.14);
  --good:#6FD39A; --good-soft:rgba(111,211,154,.14);
  --pend:#F2A04E;
  --away:#B8A6FF; --away-soft:rgba(184,166,255,.16); --hol:#E9D7A4; --hol-soft:rgba(233,215,164,.10);
  --shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(var(--hl),.14), inset 0 -1px 0 rgba(var(--hl),.03);
  --hot-bg:linear-gradient(140deg,rgba(57,135,229,.62) 0%,rgba(144,133,233,.50) 100%); --hot-fg:#FFFFFF; --hot-sub:rgba(var(--hl),.78); --white-hi:#fff;
  --thead:#24252A; --tlabel:#1A1B1F; --opt:#1d1e22; --edit-bg:#111;
  --dlg-bg:linear-gradient(150deg,rgba(38,40,52,.82),rgba(20,21,28,.86)); --overlay:rgba(10,11,13,.72); --logo-filter:none;
  --ink-text:#D3D4D6; --grid:rgba(var(--hl),.08); --panel-solid:#1a1b1f;
  --bg-grad:radial-gradient(40vmax 34vmax at 72% 12%, rgba(57,135,229,.50), transparent 62%),
    radial-gradient(36vmax 32vmax at 22% 58%, rgba(144,133,233,.38), transparent 62%),
    radial-gradient(34vmax 30vmax at 88% 82%, rgba(217,89,38,.32), transparent 62%),
    radial-gradient(30vmax 26vmax at 45% 104%, rgba(25,158,112,.30), transparent 60%),
    linear-gradient(170deg,#15161C 0%,#0E0F14 50%,#090A0D 100%);
  --w030:rgba(var(--hl),.03);
  --w035:rgba(var(--hl),.035);
  --w040:rgba(var(--hl),.04);
  --w050:rgba(var(--hl),.05);
  --w060:rgba(var(--hl),.06);
  --w070:rgba(var(--hl),.07);
  --w080:rgba(var(--hl),.08);
  --w090:rgba(var(--hl),.09);
  --w100:rgba(var(--hl),.10);
  --w120:rgba(var(--hl),.12);
  --w140:rgba(var(--hl),.14);
  --w180:rgba(var(--hl),.18);
  --w200:rgba(var(--hl),.2);
  --w250:rgba(var(--hl),.25);
  --k16:rgba(0,0,0,.16);
  --k18:rgba(0,0,0,.18);
  --k25:rgba(0,0,0,.25);
  --k28:rgba(0,0,0,.28);
  --k40:rgba(0,0,0,.4);
  --k55:rgba(0,0,0,.55);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;color:var(--fg);font:14px/1.5 var(--f-body);padding:18px 16px 40px;
  background:var(--bg-grad);
  background-attachment:fixed;background-color:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--fg)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.01em}
.glass,.panel,.strip,.banner,.side,.dlg{background:var(--panel);border:1px solid var(--edge);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:var(--shadow)}
.grow{flex:1 1 auto}
.eyebrow{font-size:11.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* ---------- app frame ---------- */
.app{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:232px minmax(0,1fr);gap:18px;align-items:start}
.side{position:sticky;top:18px;border-radius:22px;padding:20px 14px 14px;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 36px);overflow:auto}
.brand{padding:4px 8px 14px;border-bottom:1px solid var(--line)}
.brand img{filter:var(--logo-filter);display:block;width:100%;max-width:180px;height:auto}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:12px;border:0;background:none;color:var(--muted);padding:9px 12px;border-radius:12px;font-weight:600;text-align:left}
.nav button:hover{background:var(--sunk);color:var(--fg)}
.nav button[aria-current="page"]{background:var(--white);color:var(--on-white)}
.nav svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-sites{display:contents}
.nav a{display:flex;align-items:center;gap:12px;color:var(--muted);padding:9px 12px;border-radius:12px;font-weight:600;text-decoration:none}
.nav a:hover{background:var(--sunk);color:var(--fg)}
.nav a svg{flex:none}
.nav a .ext{margin-left:auto;opacity:.55;font-size:12px}
.nav-sites a span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-edit{list-style:none;margin:0;padding:0 18px 4px;display:flex;flex-direction:column;gap:8px}
.site-edit li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:8px;align-items:end}
.site-edit .empty{display:block;padding:4px 0 10px;color:var(--muted)}
@media (max-width:640px){ .site-edit li{grid-template-columns:1fr} }
.side-orgs{display:flex;flex-direction:column;gap:6px}
.side-h{display:flex;justify-content:space-between;align-items:center;padding:0 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
#org-filter{display:flex;flex-direction:column;gap:2px}
.orgbtn{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid transparent;background:none;border-radius:10px;padding:7px 10px;text-align:left;font-size:13px;color:var(--fg2)}
.orgbtn:hover{background:var(--sunk)}
.orgbtn[aria-pressed="true"]{background:var(--panel-hi);border-color:var(--edge);color:var(--fg)}
.orgbtn .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.orgbtn .ct{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.swatch{width:10px;height:10px;border-radius:3px;background:var(--c,#777);display:inline-block;flex:none}
.swatch.all{background:conic-gradient(#3987e5 0 33%,#d95926 0 66%,#199e70 0)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:4px;padding:12px 10px 0;border-top:1px solid var(--line)}
.acct{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.linkbtn{border:0;background:none;padding:0;color:var(--muted);font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-align:left;letter-spacing:0;text-transform:none}
.linkbtn:hover{color:var(--fg)}
.wrap{display:flex;flex-direction:column;gap:18px;min-width:0}
.view{display:flex;flex-direction:column;gap:18px;min-width:0}

header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;padding:6px 2px 0}
header.top h1{font-size:34px;line-height:1.1;margin-top:2px}
header.top .sub{color:var(--muted);font-size:13px}
.btn{color:var(--fg);border:1px solid var(--edge);background:var(--panel-hi);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;padding:8px 16px;font-weight:600;white-space:nowrap}
.btn:hover{border-color:var(--edge-hi);background:var(--w120)}
.btn.primary{background:var(--white);border-color:var(--white);color:var(--on-white)}
.day .chip{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.day .chip.t-event{display:block;white-space:nowrap}
.btn.primary:hover{background:var(--white-hi)}
.btn.sm{padding:5px 12px;font-size:12.5px}
.btn.icon{padding:3px 10px;font-size:16px;line-height:1.2}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.5;cursor:default}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.stack{display:flex;flex-direction:column;gap:10px}
.banner{border-radius:14px;padding:10px 16px;font-size:13px}
.banner b{color:var(--warn)}

/* ---------- stat strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r);overflow:hidden}
.strip.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.strip > div{padding:18px 22px;min-width:0;position:relative}
.strip > div + div::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.strip .k{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.strip .v{font-family:var(--f-display);font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.strip .s{font-size:13px;color:var(--muted)}
.strip > div.hot{background:var(--hot-bg);color:var(--hot-fg)}
.strip > div.hot .k,.strip > div.hot .s{color:var(--hot-sub)}
.strip > div.hot::before{display:none}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.bad{background:var(--bad)}

/* ---------- panels ---------- */
.grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px;align-items:start}
.col{display:flex;flex-direction:column;gap:18px;min-width:0}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px}
.panel{border-radius:var(--r);min-width:0;overflow:hidden}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 12px}
.ph h2{font-size:16px}
.ph .count{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.src{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.empty{padding:20px 18px;color:var(--muted);font-size:13px}
.syncline{font-size:12.5px;color:var(--muted)}

.tabs{display:flex;gap:4px;padding:0 12px 10px;flex-wrap:wrap}
.tab{border:1px solid transparent;background:none;border-radius:999px;padding:4px 11px;font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--fg)}
.tab[aria-pressed="true"]{background:var(--panel-hi);border-color:var(--edge);color:var(--fg);font-weight:600}
.tab .ct{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--k25);border:1px solid var(--edge)}
.seg button{border:0;background:none;border-radius:999px;padding:5px 13px;font-weight:600;font-size:12.5px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--white);color:var(--on-white)}

/* invoices */
.inv-list{list-style:none;margin:0;padding:0 8px 8px;max-height:620px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.inv{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:12px;padding:11px 12px 11px 0;width:100%;text-align:left;border:1px solid transparent;border-radius:14px;background:var(--sunk)}
.inv:hover,.inv[aria-current="true"]{background:var(--w090);border-color:var(--edge)}
.inv .rail{border-radius:0 3px 3px 0;background:var(--c,var(--w200))}
.inv .vendor{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv .meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.inv .amt{text-align:right;font-family:var(--f-mono);font-weight:500;font-size:14px}
.inv .st{text-align:right;margin-top:3px}
.when-tag{font-family:var(--f-mono);font-size:11.5px}
.when-tag.overdue{color:var(--bad)} .when-tag.soon{color:var(--warn)}
.orgtag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--fg2);font-weight:600;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.orgtag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c,#777);flex:none}
.pill{display:inline-block;font-size:10px;font-weight:700;border-radius:999px;padding:1px 8px;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.pill.new{background:var(--w120);color:var(--fg)}
.pill.approved{background:var(--w070);color:var(--fg2);box-shadow:inset 0 0 0 1px var(--edge-hi)}
.pill.scheduled{background:var(--warn-soft);color:var(--warn)}
.pill.paid{background:var(--good-soft);color:var(--good)}
.pill.ex{background:var(--w060);color:var(--muted)}
.pill.att{background:none;color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge);text-transform:none;letter-spacing:0}

/* priority label: bars + words, so it never relies on color alone */
.pri{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px 1px 6px;white-space:nowrap}
.pri i{display:inline-flex;gap:1.5px;align-items:flex-end;height:10px}
.pri i b{width:2.5px;border-radius:1px;background:currentColor;opacity:.25}
.pri i b:nth-child(1){height:4px}.pri i b:nth-child(2){height:7px}.pri i b:nth-child(3){height:10px}
.pri.top{background:var(--bad-soft);color:var(--bad)} .pri.top i b{opacity:1}
.pri.high{background:var(--warn-soft);color:var(--warn)} .pri.high i b:nth-child(-n+2){opacity:1}
.pri.normal{background:var(--w070);color:var(--fg2)} .pri.normal i b:nth-child(1){opacity:1}
.pri.low{background:none;color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge)}

.detail{padding:16px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;background:var(--k18)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);min-width:0;font-weight:600}
.fields label.full{grid-column:1/-1}
input:not([type=checkbox]):not([type=color]),select,textarea{background:var(--k28);border:1px solid var(--edge);border-radius:10px;padding:7px 10px;font-size:13.5px;min-width:0;width:100%;color:var(--fg)}
input[type=date],input[type=time],input[type=month]{color-scheme:dark}
select option{background:var(--opt);color:var(--fg)}
.pair{display:flex;gap:6px}
.steps{display:flex;gap:4px;flex-wrap:wrap}
.steps button{flex:1;border:1px solid var(--edge);background:var(--w050);border-radius:999px;padding:5px 4px;font-size:12px}
.steps button[aria-pressed="true"]{background:var(--white);color:var(--on-white);border-color:var(--white)}

/* tasks */
.todo{list-style:none;margin:0;padding:0 8px 4px;max-height:520px;overflow:auto}
.todo li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px;border-radius:12px;border-left:3px solid transparent}
.todo li:hover{background:var(--sunk)}
.todo li.has-org{border-left-color:var(--c)}
.todo input[type=checkbox]{margin-top:3px;width:16px;height:16px;accent-color:var(--white)}
.todo .t{font-weight:600;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.todo .t a,.todo .t button.lk{color:inherit;text-decoration:none;border:0;background:none;padding:0;font-weight:600;text-align:left}
.todo .t a:hover,.todo .t button.lk:hover{text-decoration:underline}
.todo .d{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center}
.todo li.done .t{text-decoration:line-through;color:var(--muted)}
.todo .right{display:flex;gap:6px;align-items:center}
.when{font-size:12px;font-family:var(--f-mono);white-space:nowrap;border-radius:999px;padding:1px 8px;background:var(--w070)}
.when.overdue{background:var(--bad-soft);color:var(--bad)} .when.soon{background:var(--warn-soft);color:var(--warn)}
.ico-inv{font-family:var(--f-mono);color:var(--fg);font-weight:600;text-align:center}
.addrow{display:flex;gap:8px;padding:12px 18px 16px;flex-wrap:wrap;border-top:1px solid var(--line);align-items:center}
.addrow input{flex:1 1 180px;width:auto}
.addrow input[type=date]{flex:0 1 150px}
.addrow select{flex:0 1 150px;width:auto}
.inbox li{grid-template-columns:minmax(0,1fr) auto}
.inbox .btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* next 7 days */
.agenda{padding:0 10px 12px;display:flex;flex-direction:column;gap:4px;max-height:330px;overflow:auto}
.agenda .ad{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 8px 2px}
.agenda .ad.today{color:var(--fg)}
.ag{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:center;width:100%;text-align:left;border:0;background:var(--sunk);border-radius:10px;padding:7px 10px;border-left:3px solid var(--c,transparent);font-size:13px}
.ag:hover{background:var(--w080)}
.ag .tm{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.ag .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag.done .tt{text-decoration:line-through;color:var(--muted)}

/* payments chart */
.chart-box{position:relative;height:230px;padding:0 14px 14px}
.chart-total{font-family:var(--f-mono);font-size:22px;font-weight:500}

/* ---------- calendar tab ---------- */
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.cal-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 18px 10px}
.calnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.calnav .m{font-family:var(--f-display);font-weight:600;font-size:20px;margin-left:8px}
.cal-filters{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 12px}
.cal-filters label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--edge);border-radius:999px;padding:4px 11px;cursor:pointer;color:var(--fg2)}
.cal-filters input{accent-color:var(--white);width:14px;height:14px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:0 12px 12px}
.cal .dow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:4px 6px;font-weight:700}
.day{min-height:122px;border:1px solid transparent;border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:3px;background:var(--w035);min-width:0;cursor:pointer;position:relative}
.day:hover{background:var(--w070)}
.day.out{background:transparent}
.day.out .n{color:var(--faint)}
.day .n{font-family:var(--f-mono);font-size:12px;display:flex;justify-content:space-between;align-items:center}
.day .add{opacity:0;border:0;background:var(--panel-hi);border-radius:6px;width:20px;height:20px;line-height:18px;padding:0;font-size:14px;color:var(--fg)}
.day:hover .add,.day:focus-within .add{opacity:1}
.day.today .n span{background:var(--white);color:var(--on-white);border-radius:999px;padding:0 7px;font-weight:600}
.day.sel{border-color:var(--edge-hi);background:var(--w080)}
.chip{font-size:11.5px;line-height:1.35;border-radius:6px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:0;text-align:left;width:100%;color:var(--fg);
  background:color-mix(in srgb, var(--c,#8a8d93) 24%, transparent);border-left:3px solid var(--c,#8a8d93)}
.chip:hover{background:color-mix(in srgb, var(--c,#8a8d93) 38%, transparent)}
.chip .tm{font-family:var(--f-mono);font-size:10.5px;color:var(--fg2);margin-right:3px}
.chip.t-due{background:transparent;border:1px dashed var(--c,#8a8d93);border-left-width:3px;border-left-style:solid}
.chip.t-pay::before{content:"$ ";font-family:var(--f-mono);font-weight:600}
.chip.t-event{border-radius:999px;border-left:0;padding-left:8px}
.chip.t-event::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c,#8a8d93);margin-right:5px;vertical-align:1px}
.chip.done{opacity:.45;text-decoration:line-through}
.chip.prio-top{box-shadow:inset 0 0 0 1px var(--bad)}
.more{font-size:11px;color:var(--muted);padding-left:4px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:0 12px 12px}
.wcol{background:var(--w035);border-radius:12px;min-height:360px;padding:8px;display:flex;flex-direction:column;gap:4px;min-width:0;border:1px solid transparent}
.wcol.today{border-color:var(--edge-hi)}
.wcol .wh{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.wcol .wh b{font-family:var(--f-display);font-size:20px;color:var(--fg)}
.wcol .chip{white-space:normal}
.wcol .add-w{margin-top:auto;border:1px dashed var(--edge);background:none;border-radius:8px;color:var(--muted);font-size:12px;padding:4px}
.alist{padding:0 12px 12px;display:flex;flex-direction:column;gap:4px}
.alist .ad{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:12px 6px 4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.alist .ag{grid-template-columns:70px minmax(0,1fr) auto}
.dayview{padding:12px 18px 16px;border-top:1px solid var(--line)}
.dayview .dvh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.dayview h3{font-size:15px}
.dayview ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.dayview li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:var(--sunk);border-left:3px solid var(--c,transparent)}
.dayview li .lk{border:0;background:none;padding:0;text-align:left;font-weight:600}
.dayview li .lk:hover{text-decoration:underline}
.dayview li.done .lk{text-decoration:line-through;color:var(--muted)}
.dayview input[type=checkbox]{accent-color:var(--white)}
.legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:10px 18px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend select{width:auto;padding:2px 6px}
.lg{width:14px;height:10px;border-radius:3px;display:inline-block;background:var(--w180);border-left:3px solid var(--fg2)}
.lg.due{background:transparent;border:1px dashed var(--fg2);border-left:3px solid var(--fg2)}
.lg.event{border-radius:999px;border:0;width:10px;background:var(--fg2)}
.lg.pay{position:relative}
.lg.pend{background:transparent;border:2px dashed var(--pend);border-radius:3px}
.org-totals{display:flex;flex-direction:column;gap:4px;padding:0 18px 12px}
.org-totals .ot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;font-size:12.5px;align-items:center}
.org-totals .bar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--sunk);overflow:hidden}
.org-totals .bar i{display:block;height:100%;background:var(--c)}

/* ---------- financials ---------- */
.fin-head{flex-wrap:wrap}
.fin-tools{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 12px 4px;flex-wrap:wrap}
.fin-tools .tabs{padding:0}
.fin-search{border-radius:999px!important;padding:7px 14px!important;width:220px!important}
.fin-search.wide{flex:1 1 260px;width:auto!important}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:14px 18px}
.filters label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.filters select,.filters input{width:auto;min-width:130px;text-transform:none;letter-spacing:0;font-weight:500}
.filters .pair select{min-width:84px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:0 18px 18px}
.kpi{background:var(--sunk);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.kpi .k{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi .v{font-family:var(--f-display);font-size:24px;font-weight:600;letter-spacing:-.01em}
.kpi .s{font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:18px}
.chart-card .ph{align-items:flex-start}
.chart-card .cb{position:relative;height:280px;padding:0 14px 8px}
.chart-card .cf{display:flex;justify-content:space-between;gap:8px;padding:6px 18px 14px;font-size:11.5px;color:var(--faint);align-items:center}
.chart-card .tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--edge);border-radius:999px;padding:1px 8px;white-space:nowrap}
#fin-tables{display:flex;flex-direction:column;gap:16px;padding:12px}
.xtable{border:1px solid var(--edge);border-radius:14px;overflow:hidden;background:var(--k16)}
.xt-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--edge);background:var(--w040);flex-wrap:wrap}
.xt-h h3{font-size:15px}
.xt-h .src{font-family:var(--f-mono)}
.xt-scroll{overflow:auto;max-height:70vh}
.xtable table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.xtable th,.xtable td{padding:6px 12px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left}
.xtable td + td,.xtable th + th{border-left:1px solid var(--line)}
.xtable thead th{position:sticky;top:0;z-index:2;background:var(--thead);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);font-weight:700;border-bottom:1px solid var(--edge-hi)}
.xtable thead th.n{text-align:right}
.xtable td.lbl{position:sticky;left:0;z-index:1;background:var(--tlabel);font-weight:600;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.xtable thead th:first-child{left:0;z-index:3}
.xtable td.n{text-align:right;font-family:var(--f-mono);font-size:12.5px}
.xtable td.neg{color:var(--bad)}
.xtable td.f{text-decoration:underline dotted var(--w250);text-underline-offset:3px}
.xtable tr.total td{font-weight:700;border-top:1px solid var(--edge-hi);background:var(--w050)}
.xtable tr.total td.lbl{background:var(--thead)}
.xtable tr.section td{font-family:var(--f-display);font-weight:600;color:var(--fg);background:var(--w030);padding-top:10px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.xtable tr:hover td{background:var(--w050)}
.xtable td[data-a]{cursor:cell}
.xtable td.pending,.fin-grid td.pending{box-shadow:inset 0 0 0 2px var(--pend)}
.xtable td.err,.fin-grid td.err{box-shadow:inset 0 0 0 2px var(--bad)}
.xtable td.editing,.fin-grid td.editing{padding:0;overflow:visible}
.xtable td.editing input,.fin-grid td.editing input{width:100%;min-width:160px;border:0;border-radius:0;outline:2px solid var(--white);background:var(--edit-bg);color:var(--fg);padding:6px 10px;font:inherit}
.xtable .addr{font-family:var(--f-mono);font-size:10.5px;color:var(--faint);font-weight:400}
.fin-grid{overflow:auto;max-height:70vh;margin:8px 12px 12px;border-radius:14px;border:1px solid var(--line);background:var(--k16)}
.fin-grid table{border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
.fin-grid th,.fin-grid td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 9px;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;text-align:left}
.fin-grid thead th{position:sticky;top:0;z-index:2;background:var(--thead);color:var(--muted);font-weight:600;font-size:11.5px;text-align:center}
.fin-grid tbody th{position:sticky;left:0;z-index:1;background:var(--thead);color:var(--muted);font-weight:500;font-size:11.5px;text-align:right;min-width:44px}
.fin-grid thead th:first-child{left:0;z-index:3}
.fin-grid td{cursor:cell;min-width:70px}
.fin-grid td.n{text-align:right}
.fin-grid td.f{color:var(--warn)}
.fin-grid td:hover{background:var(--w060)}
.fin-grid .empty{white-space:normal}
.intake{padding:0 18px 18px;display:flex;flex-direction:column;gap:10px}
.intake .hint{font-size:12.5px;color:var(--muted)}
.steps-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:13px}
#script-box{width:100%;font-family:var(--f-mono);font-size:12px}
.copyable,.gate code{font-family:var(--f-mono);font-size:12.5px;background:var(--w080);border:1px solid var(--edge);border-radius:8px;padding:2px 7px;overflow-wrap:anywhere}

/* ---------- mileage ---------- */
.by-staff{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
.by-staff span{font-size:12.5px;border:1px solid var(--edge);border-radius:999px;padding:3px 11px;color:var(--fg2)}
.by-staff b{font-family:var(--f-mono);font-weight:500;color:var(--fg)}
.table-wrap{overflow:auto;padding:0 12px 12px}
.list-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.list-table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--edge)}
.list-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.list-table tr:hover td{background:var(--sunk)}
.list-table td.n,.list-table th.n{text-align:right;font-family:var(--f-mono)}
.list-table .fname{display:flex;align-items:center;gap:8px;min-width:0;max-width:340px}
.list-table .fname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftype{font-family:var(--f-mono);font-size:10px;font-weight:600;border:1px solid var(--edge-hi);border-radius:5px;padding:1px 5px;color:var(--fg2);flex:none}
.list-table .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.preview-body{padding:0 12px 12px}
.preview-body iframe{width:100%;height:75vh;border:1px solid var(--edge);border-radius:12px;background:#fff}
.preview-body img{display:block;max-height:75vh;margin:0 auto;border-radius:12px}

/* ---------- settings ---------- */
.settings{display:flex;flex-wrap:wrap;gap:16px;padding:12px 18px 16px;font-size:13px;align-items:center}
.settings label{display:inline-flex;align-items:center;gap:8px}
.settings input[type=checkbox]{accent-color:var(--white);width:16px;height:16px}
.line-top{border-top:1px solid var(--line)}
.org-edit{list-style:none;margin:0;padding:0 18px 12px;display:flex;flex-direction:column;gap:8px}
.org-edit li{display:grid;grid-template-columns:auto minmax(140px,1fr) minmax(140px,1fr) auto;gap:10px;align-items:center;background:var(--sunk);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:12px;padding:10px 12px}
.org-edit .sw{display:flex;gap:4px;flex-wrap:wrap;max-width:190px}
.org-edit .sw button{width:20px;height:20px;border-radius:6px;border:2px solid transparent;background:var(--c);padding:0}
.org-edit .sw button[aria-pressed="true"]{border-color:var(--white)}
.org-edit .sw input[type=color]{width:24px;height:22px;border:0;background:none;padding:0}
.org-edit .confirm{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}

/* ---------- dialogs, gate, toast ---------- */
.dlg{color:var(--fg);border-radius:20px;padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);background:var(--dlg-bg)}
.dlg::backdrop{background:var(--k55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dlg form,.dlg > div{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px}
.dlg .detail{border:0;background:none;padding:0}
.dlg-h{display:flex;justify-content:space-between;align-items:center}
.dlg-h h2{font-size:18px}
.dlg .seg{align-self:flex-start}
.gate{max-width:620px;margin:7vh auto 0;border-radius:var(--r);padding:30px 30px 26px;display:flex;flex-direction:column;gap:14px}
.gate-logo{filter:var(--logo-filter);width:200px;margin-bottom:8px}
.gate h1{font-size:28px}
#signin{text-align:center;max-width:460px}
#signin .gate-logo{align-self:center}
#signin .actions{justify-content:center}
.intro-logo{position:fixed;z-index:50;margin:0;pointer-events:none;transform-origin:center;will-change:transform,opacity}
.gate p{margin:0;color:var(--muted)}
.gate ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--white);color:var(--on-white);padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;max-width:calc(100% - 32px);z-index:50;box-shadow:0 10px 30px var(--k40)}
.toast[popover]{inset:auto;top:auto;right:auto;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin:0;border:0;overflow:visible}

/* ---------- v3.1: downloads, drag and drop, holidays, out of office ---------- */
.inv-li{position:relative}
.inv-li .inv{padding-right:46px}
.dl-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:9px;border:1px solid var(--edge);background:var(--panel-hi);color:var(--fg);display:grid;place-items:center;padding:0}
.dl-btn:hover{border-color:var(--edge-hi);background:var(--w140)}
.dl-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.drop-hint{margin:4px 12px 14px;border:1px dashed var(--edge-hi);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--muted);text-align:center}
.drop-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}
.drop-overlay div{border:2px dashed var(--white);border-radius:22px;padding:40px 56px;font-family:var(--f-display);font-size:22px;font-weight:600}
.mail-line{padding:0 4px}
.day.hol{background:var(--hol-soft)}
.day.away,.wcol.away{background:repeating-linear-gradient(135deg,var(--away-soft) 0 8px,transparent 8px 16px),rgba(184,166,255,.10);border-color:rgba(184,166,255,.45)}
.chip.t-holiday{background:transparent;border:0;border-left:0;color:var(--hol);font-weight:600;padding-left:0}
.chip.t-holiday::before{content:"★ ";font-size:10px}
.chip.t-away{background:var(--away-soft);border-left:3px solid var(--away);color:var(--fg)}
.ag.t-holiday{border-left-color:var(--hol);cursor:default}
.ag.t-holiday .tt{color:var(--hol)}
.ag.t-away{border-left-color:var(--away);background:var(--away-soft);cursor:default}
.away-note{color:var(--away)}
.away-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:10px 12px;margin-bottom:10px;border:1px solid var(--edge);border-radius:12px;background:var(--sunk)}
.away-form label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);font-weight:600}
.away-form label.grow{flex:1 1 200px}
.lg.hol{background:var(--hol-soft);border-left:3px solid var(--hol)}
.lg.away{background:var(--away-soft);border-left:3px solid var(--away)}

/* ---------- responsive ---------- */
@media (max-width:1180px){ .cal-layout{grid-template-columns:minmax(0,1fr)} .duo{grid-template-columns:minmax(0,1fr)} }
@media (max-width:1000px){ .grid{grid-template-columns:minmax(0,1fr)} .inv-list{max-height:420px} .charts{grid-template-columns:minmax(0,1fr)} }
/* Smaller menu: icons only (desktop) */
.brand{position:relative;padding-right:30px}
.side-toggle{position:absolute;right:-2px;top:2px;width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:var(--sunk);color:var(--muted);display:grid;place-items:center;padding:0}
.side-toggle:hover{color:var(--fg);background:var(--panel-hi)}
.side-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.app{transition:grid-template-columns .2s ease}
@media (min-width:861px){
.app.mini{grid-template-columns:78px minmax(0,1fr)}
.app.mini .side{padding:16px 10px 12px;align-items:stretch}
.app.mini .brand{padding:0 0 12px;padding-right:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.app.mini .brand img{width:46px;height:30px;object-fit:cover;object-position:left center}
.app.mini .side-toggle{position:static}
.app.mini .side-toggle svg{transform:rotate(180deg)}
.app.mini .nav button,.app.mini .nav a{justify-content:center;padding:10px 0}
.app.mini .nav button span,.app.mini .nav a span,.app.mini .side-h,.app.mini .orgbtn .nm,.app.mini .orgbtn .ct,.app.mini .acct{display:none}
.app.mini .orgbtn{grid-template-columns:10px;justify-content:center;padding:9px 0}
.app.mini .side-foot{padding:10px 0 0;align-items:center}
.app.mini .side-foot .linkbtn{font-size:11.5px}
}
@media (max-width:860px){
  .side-toggle{display:none}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;max-height:none;padding:12px;gap:10px}
  .brand{padding:0 4px 8px}
  .brand img{max-width:150px}
  .nav{flex-direction:row;overflow-x:auto}
  .nav button,.nav a{flex:none;padding:8px 10px}
  #org-filter{flex-direction:row;flex-wrap:wrap}
  .orgbtn{grid-template-columns:10px auto auto}
  .side-foot{flex-direction:row;justify-content:space-between;margin-top:0}
}
@media (max-width:700px){
  body{padding:12px 12px 32px}
  .strip,.strip.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip .v{font-size:30px}
  .strip > div:nth-child(3)::before{display:none}
  .day{min-height:54px;padding:3px;border-radius:8px}
  .day .chip{font-size:0;padding:0;height:5px;border-radius:3px;border-left-width:0}
  .day .chip::before{display:none}
  .day .add{display:none}
  .week{grid-template-columns:minmax(0,1fr)}
  .wcol{min-height:0}
  .fields{grid-template-columns:1fr}
  header.top h1{font-size:26px}
  .org-edit li{grid-template-columns:1fr}
  .fin-search{width:100%!important}
  .charts{grid-template-columns:minmax(0,1fr)}
  .chart-card .cb{height:240px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{ body{background:#fff} }

/* ---------- financials: office report ---------- */
.charts .chart-card.wide{grid-column:span 2}
@media (max-width:1100px){ .charts .chart-card.wide{grid-column:auto} }
.or-office-head{flex-wrap:wrap;gap:10px}
.or-office-head .seg{flex-wrap:wrap}
.kpi.or-off{border-left:3px solid var(--c)}
.kpi .sw-dot{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:6px;vertical-align:1px}
.kpi .meter{height:6px;border-radius:999px;background:var(--w080);margin:8px 0 6px;overflow:hidden}
.kpi .meter i{display:block;height:100%;border-radius:999px;background:var(--fg2)}
.kpi .meter.good i{background:var(--good)} .kpi .meter.warn i{background:var(--warn)} .kpi .meter.bad i{background:var(--bad)}
.kpi .st{font-weight:700} .kpi .st.good{color:var(--good)} .kpi .st.warn{color:var(--warn)} .kpi .st.bad{color:var(--bad)}
.or-table{margin:0 18px 18px;overflow:auto}
.or-table td.muted{color:var(--muted)}
.or-foot{padding:0 4px}
/* one header for the whole page: name, live status, months and exports */
.fin-tools-bar{border-top:1px solid var(--line)}
.fin-tools-bar .filters{padding:12px 18px 14px}
.fin-live.on{display:flex;align-items:flex-start;gap:8px}
.fin-live.on::before{content:"";flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}
/* six summary cards: one row on wide screens, two rows of three in between, two columns on phones */
.kpis.or-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:1280px){ .kpis.or-kpis{grid-template-columns:repeat(6,minmax(0,1fr))} .kpis.or-kpis .kpi .v{font-size:22px} }
@media (max-width:640px){ .kpis.or-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .kpis.or-kpis .kpi .v{font-size:20px} }
.kpi .meter + .s{white-space:normal}

/* ---------- mileage: prepare for HR ---------- */
.dlg.wide{width:min(1060px,calc(100vw - 24px))}
.hr-sum{display:flex;flex-wrap:wrap;gap:8px}
.hr-sum span{background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12.5px;color:var(--fg2)}
.hr-sum b{color:var(--fg)}
.hr-grid{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:16px;align-items:start}
.hr-side{display:flex;flex-direction:column;gap:10px}
.hr-side h3{font-size:14px}
.hr-lines{display:flex;flex-direction:column;gap:8px}
.hr-line{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:6px;align-items:center}
.ready-tag.voided{color:#dc2626;background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.3)}
.hr-trips{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto;margin-top:6px;border:1px solid var(--line);border-radius:10px;padding:4px}
.hr-trip{display:grid;grid-template-columns:auto 58px minmax(0,1fr) auto 62px;gap:6px;align-items:center;font-size:12.5px;padding:4px 6px;border-radius:6px;cursor:pointer}
.hr-trip:hover{background:var(--sunk)}
.hr-trip .p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-trip .n{text-align:right;font-variant-numeric:tabular-nums}
.hr-trip-w.void{background:rgba(220,38,38,.10);border-radius:6px;padding-bottom:6px}
.hr-trip.void{color:#dc2626} .hr-trip.void .d,.hr-trip.void .p,.hr-trip.void .n:nth-last-child(2){text-decoration:line-through}
.hr-trip.void .n:last-child{font-weight:700}
.hr-void-note{display:block;width:calc(100% - 12px);margin:2px 6px 0;font-size:12.5px;padding:5px 8px;border:1px solid rgba(220,38,38,.45);border-radius:6px;background:var(--bg,#fff);color:inherit}
.hr-check-ok{color:var(--good)} .hr-check-bad{color:var(--warn)}
.hr-prev{background:var(--sunk);border:1px solid var(--line);border-radius:14px;padding:10px;max-height:62vh;overflow:auto}
.hr-prev canvas{display:block;width:100%;height:auto;border-radius:6px;background:#fff;margin-top:8px}
.ready-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--good);border:1px solid currentColor;border-radius:999px;padding:1px 8px;margin-top:4px}
.ready-tag.todo{color:var(--warn)}
@media (max-width:760px){ .hr-grid{grid-template-columns:1fr} }
#miles-table td:nth-child(2){white-space:nowrap}

/* Receipts tab: the Receipt Matcher fills the page next to the menu */
.rcpt-wrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow, none)}
#rcpt-frame,#rt-frame{display:block;width:100%;height:calc(100vh - 38px - var(--sub-h,0px));min-height:560px;border:0;background:transparent;color-scheme:dark}
/* Receipts fills the page: no page heading above it */
body.rcpt-full main.wrap > header.top{display:none}
@media (max-width:860px){ #rcpt-frame,#rt-frame{height:calc(100vh - 24px - var(--sub-h,0px))} }

/* ---------- Home layout: two even columns ----------
   Row 1: Invoices | Tasks. Row 2: Next 7 days | Notes. Emails to review spans the bottom when there are any.
   Panels in a row share a height; long lists scroll inside their panel. */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"inv tasks" "week notes" "mail mail";gap:18px;align-items:stretch}
.h-inv{grid-area:inv} .h-tasks{grid-area:tasks} .h-week{grid-area:week} .h-notes{grid-area:notes} .h-mail{grid-area:mail}
.home-grid > .panel{display:flex;flex-direction:column}
.h-inv,.h-tasks{height:560px}
.h-week,.h-notes{height:440px}
.home-grid .inv-list,.home-grid .todo,.home-grid .agenda,.home-grid .notes{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
.home-grid .h-mail .todo{max-height:340px}
.home-grid .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:none}
.home-grid .tabs::-webkit-scrollbar{display:none}
.home-grid .tab{flex:none}
.home-grid .ph,.home-grid .addrow,.home-grid .drop-hint{flex:none}
.h-inv .drop-hint{margin-top:8px}
.mail-line{margin-top:10px}
@media (max-width:1000px){
  .home-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"tasks" "inv" "week" "notes" "mail"}
  .h-inv,.h-tasks,.h-week,.h-notes{height:auto}
  .home-grid .inv-list{max-height:460px} .home-grid .todo{max-height:460px}
  .home-grid .agenda{max-height:360px} .home-grid .notes{max-height:420px}
}

/* notes */
.note-new{padding:0 14px 12px;display:flex;flex-direction:column;gap:8px;flex:none;border-bottom:1px solid var(--line)}
.note-new textarea{width:100%;resize:none;min-height:46px;max-height:180px;border:1px solid var(--edge);background:var(--sunk);border-radius:12px;padding:9px 12px;font:inherit;color:var(--fg);line-height:1.45;box-sizing:border-box}
.note-new textarea:focus{outline:none;border-color:var(--edge-hi);background:var(--w080)}
.note-new-row{display:flex;gap:8px;align-items:center}
.note-new-row select{flex:0 1 200px;width:auto;min-width:0}
.notes{list-style:none;margin:0;padding:10px 10px 12px;display:flex;flex-direction:column;gap:8px}
.note{position:relative;background:var(--sunk);border:1px solid transparent;border-left:3px solid var(--c,var(--w200));border-radius:12px;padding:10px 12px 8px}
.note:hover{border-color:var(--edge)}
.note.pinned{background:var(--w080)}
.note .nt{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.5}
.note .nf{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.note .nf .when{font-family:var(--f-mono)}
.note .nb{margin-left:auto;display:flex;gap:2px;opacity:.55;transition:opacity .15s}
.note:hover .nb,.note:focus-within .nb{opacity:1}
.note .nb button{border:0;background:none;color:var(--muted);font-size:12px;font-weight:600;padding:3px 7px;border-radius:8px}
.note .nb button:hover{color:var(--fg);background:var(--w080)}
.note .nb button.on{color:var(--warn)}
.note .nb button.del.sure{color:var(--bad)}
.note .pin-mark{color:var(--warn);font-weight:700}
.note textarea{width:100%;min-height:70px;resize:vertical;border:1px solid var(--edge-hi);background:var(--k25);border-radius:10px;padding:8px 10px;font:inherit;color:var(--fg);box-sizing:border-box}
.note .edit-row{display:flex;gap:6px;margin-top:6px;align-items:center;flex-wrap:wrap}
.note .edit-row select{flex:0 1 180px;width:auto}
@media (hover:none){ .note .nb{opacity:1} }
.home-grid .tabs{gap:2px;padding-left:10px;padding-right:10px}
.home-grid .tab{padding:4px 9px}
.note-new-row select{padding:6px 10px;font-size:13px;border-radius:10px;height:auto}
.note .nf .when{font-size:11.5px}
.h-inv,.h-tasks{height:540px}
@media (max-width:700px){
  .inbox li{grid-template-columns:minmax(0,1fr)}
  .inbox .btns{justify-content:flex-start}
}

/* ---------- phone layout ----------
   A slim top bar (logo + organization), tabs along the bottom, and the full menu as a sheet from "More". */
.mbar,.mnav,.m-scrim,.cal-show-btn{display:none}
@media (max-width:860px){
  body{padding:0 12px calc(86px + env(safe-area-inset-bottom,0px))}
  .app{gap:12px}
  .mbar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:40;margin:0 -12px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
    background:linear-gradient(180deg,rgba(10,11,14,.92),rgba(10,11,14,.72));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--line)}
  .mbar img{height:26px;width:auto;filter:var(--logo-filter)}
  .m-org{display:inline-flex;align-items:center;gap:8px;max-width:58vw;border:1px solid var(--edge);background:var(--sunk);color:var(--fg);border-radius:999px;padding:6px 10px 6px 12px;font-weight:600;font-size:13px}
  .m-org span:not(.swatch){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-org svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex:none;opacity:.7}
  .mnav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:45;padding:6px;border-radius:22px;
    background:rgba(18,19,24,.86);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--edge);box-shadow:0 14px 40px rgba(0,0,0,.45)}
  .mnav button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:var(--muted);font-size:10px;letter-spacing:-.01em;font-weight:600;padding:7px 0 6px;border-radius:16px;min-width:0}
  .mnav button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .mnav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mnav button[aria-current="page"],.mnav button[aria-expanded="true"]{color:var(--fg);background:var(--w090)}
  /* the side menu becomes a sheet */
  .side{position:fixed;left:8px;right:8px;bottom:calc(84px + env(safe-area-inset-bottom,0px));top:auto;z-index:44;max-height:calc(100dvh - 140px);overflow:auto;padding:14px;gap:12px;border-radius:22px;
    transform:translateY(calc(100% + 120px));opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s;background:var(--dlg-bg,rgba(22,23,30,.96));-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)}
  body.sheet-open .side{transform:none;opacity:1;pointer-events:auto}
  .m-scrim{display:block;position:fixed;inset:0;z-index:43;background:rgba(0,0,0,.45)}
  .m-scrim[hidden]{display:none}
  .side .brand{display:none}
  .nav{flex-direction:column;overflow:visible}
  .nav button,.nav a{padding:10px 12px}
  .nav > button[data-goview]:not([data-goview="settings"]):not([data-goview="reimb"]):not([data-goview="sign"]):not([data-goview="bills"]){display:none}
  #org-filter{flex-direction:column}
  .orgbtn{grid-template-columns:10px minmax(0,1fr) auto}
  .side-foot{flex-direction:row;justify-content:space-between;margin-top:0}
  /* page header: smaller, no eyebrow or date */
  header.top{padding-top:14px;gap:10px}
  header.top .eyebrow,header.top .sub{display:none}
  header.top h1{font-size:24px}
  header.top .actions{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  header.top .actions::-webkit-scrollbar{display:none}
  header.top .actions .btn{flex:none;padding:8px 14px;font-size:13px}
  .banner{font-size:13px;padding:10px 14px}
  /* receipts: nothing above the Receipts app; it fills the screen above the tabs */
  body.rcpt-full .mbar{display:none}
  body.rcpt-full main.wrap > *:not(#view-rcpt):not(#view-rtrack){display:none!important}
  body.rcpt-full{padding-top:0;padding-bottom:0}
  body.rcpt-full #rcpt-frame,body.rcpt-full #rt-frame{height:calc(100dvh - 84px - env(safe-area-inset-bottom,0px) - var(--sub-h,0px));border-radius:0 0 18px 18px}
  body.rcpt-full .rcpt-wrap{margin:0 -12px;border:0;border-radius:0}
  /* calendar: filters in a pop-up, words in the month boxes */
  .cal-show-btn{display:inline-flex;margin:0 18px 10px}
  #cal-types{display:none}
  #cal-types.open{display:flex}
}
@media (max-width:700px){
  .day{min-height:66px;padding:3px 2px;gap:2px}
  .day .n{font-size:11px;padding:0 2px}
  .day .chip{font-size:9.5px;line-height:1.25;height:auto;padding:1px 3px;border-radius:4px;white-space:nowrap;display:block;-webkit-line-clamp:unset;border-left-width:2px}
  .day .chip .tm{display:none}
  .cal .dow{font-size:9.5px;padding:4px 2px;letter-spacing:.04em;text-align:center}
  /* mileage list as cards */
  #miles-table thead{display:none}
  #miles-table,#miles-table tbody{display:block}
  #miles-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:12px 6px;border-bottom:1px solid var(--line)}
  #miles-table td{padding:0;border:0;background:none!important}
  #miles-table td:nth-child(1){grid-column:1;grid-row:1;font-size:14px}
  #miles-table td:nth-child(6){grid-column:2;grid-row:1}
  #miles-table td:nth-child(2){grid-column:1;grid-row:2;color:var(--muted);font-size:12.5px}
  #miles-table td:nth-child(5){grid-column:2;grid-row:2;color:var(--muted);font-size:12px}
  #miles-table td:nth-child(5):not(:has(.src))::after{content:" mi"}
  #miles-table td:nth-child(3){grid-column:1/-1;grid-row:3}
  #miles-table td:nth-child(4){grid-column:1/-1;grid-row:4}
  #miles-table td:nth-child(7){display:none}
  #miles-table td:nth-child(8){grid-column:1/-1;grid-row:5;margin-top:6px}
  #miles-table td:nth-child(8) .acts{justify-content:flex-start}
  #miles-table .fname{max-width:100%}
  #miles-table td.empty{grid-column:1/-1}
}
.panel > .actions{padding:0 18px 18px}
@media (max-width:860px){.toast,.toast[popover]{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
@media (max-width:380px){.mnav{padding:6px 4px}.mnav button{font-size:9.5px;letter-spacing:-.02em}}
/* Phone: keep the tab bar low (just above the iPhone home bar), keep the Receipts tab clear of the status bar,
   and size the Receipts frame to exactly the space between them so the page itself never scrolls. */
@media (max-width:860px){
  :root{--nav-b:max(8px, calc(env(safe-area-inset-bottom,0px) - 12px))}
  .mnav{bottom:var(--nav-b)}
  .side{bottom:calc(var(--nav-b) + 76px)}
  body{padding-bottom:calc(var(--nav-b) + 78px)}
  .toast,.toast[popover]{bottom:calc(var(--nav-b) + 84px)}
  html:has(body.rcpt-full),body.rcpt-full{height:100%;overflow:hidden;overscroll-behavior:none}
  body.rcpt-full{padding-top:env(safe-area-inset-top,0px);padding-bottom:0}
  body.rcpt-full #rcpt-frame,body.rcpt-full #rt-frame{min-height:0;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--nav-b) - 76px - var(--sub-h,0px))}
}
/* iPhone zooms the page when you tap a box with small text; 16px text stops that. */
@supports (-webkit-touch-callout:none){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
}
/* Smoothness: the colorful background is its own fixed layer (a fixed page background repaints on every scroll on
   phones), and only things that float over moving content keep the frosted blur. Panels and buttons sit on a soft
   gradient, so blurring behind them looked the same but cost a lot. */
html{background:var(--bg)}
body{background:transparent!important}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bg-grad);transform:translateZ(0)}
.glass,.panel,.strip,.banner,.btn{-webkit-backdrop-filter:none;backdrop-filter:none}
.dlg::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.6)}
/* Smooth, quick motion: pages fade in, dialogs ease in, and every tap gives instant feedback. */
.view:not([hidden]){animation:jaViewIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes jaViewIn{from{opacity:0;transform:translateY(6px)}}
dialog[open]{animation:jaDlgIn .2s cubic-bezier(.2,.8,.2,1)}
dialog[open]::backdrop{animation:jaFade .2s ease-out}
@keyframes jaDlgIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes jaFade{from{opacity:0}}
button,a,label,summary,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn,.mnav button,.chip{transition:transform .12s ease,background-color .15s ease,border-color .15s ease,color .15s ease}
.btn:active,.mnav button:active,.chip:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.view:not([hidden]),dialog[open],dialog[open]::backdrop{animation:none}.btn:active,.mnav button:active,.chip:active{transform:none}}

.chk-row{display:flex;flex-direction:row;gap:18px;align-items:center}
.chk-row span{display:inline-flex;gap:6px;align-items:center;font-weight:600}
.br-prior-box{margin-top:12px} .br-prior-box summary{cursor:pointer;font-weight:600;font-size:13px}
.br-prior{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.br-prior label{display:flex;flex-direction:column;font-size:12px;gap:2px}
.br-prior input{width:100%}

/* ---------- reimbursements ---------- */
.rb-body{display:flex;flex-direction:column;gap:14px;padding:0 18px 18px}
.rb-who{grid-template-columns:2fr 1fr 1fr}
.rb-who .rb-addr{grid-column:span 2}
#signer-edit li{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 190px auto}
.rb-who label.full{grid-column:1/-1}
.rb-add{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rb-snap{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.rb-snap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.rb-snap:focus-within{outline:2px solid var(--fg);outline-offset:2px}
.rb-lines{display:flex;flex-direction:column;gap:10px}
.rb-empty{border:1px dashed var(--edge);border-radius:14px;padding:22px;text-align:center;color:var(--muted);font-size:13px}
.rb-line{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;align-items:start;background:var(--sunk);border:1px solid var(--line);border-radius:14px;padding:12px}
.rb-line.reading{opacity:.75}
.rb-thumb{width:84px;height:104px;border-radius:10px;border:1px solid var(--edge);background:var(--k28);overflow:hidden;padding:0;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.rb-thumb img{width:100%;height:100%;object-fit:cover}
.rb-pdf{font-size:11px;font-weight:700;letter-spacing:.06em;text-align:center;padding:4px}
.rb-fields{display:grid;grid-template-columns:150px minmax(0,1.5fr) 110px minmax(0,2fr) 200px;gap:8px 10px}
.rb-fields label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);font-weight:600;min-width:0}
.rb-fields .rb-full{grid-column:1/-1}
.rb-reading,.rb-note{grid-column:2/-1;font-size:12.5px;color:var(--muted)}
.rb-note{color:var(--warn)}
.rb-reading::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;border:2px solid var(--muted);border-top-color:transparent;vertical-align:-1px;animation:rbspin .8s linear infinite}
@keyframes rbspin{to{transform:rotate(360deg)}}
.rb-foot{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
.rb-prep{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);font-weight:600;width:220px}
.rb-total{display:flex;flex-direction:column;margin-left:auto;text-align:right}
.rb-total span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rb-total b{font-family:var(--f-display);font-size:28px;font-weight:600}
.rb-btns{display:flex;gap:8px;flex-wrap:wrap}
#rb-table tr.sel td{background:var(--sunk)}
#rb-table .btn.danger{color:var(--bad)}
@media (max-width:1100px){ .rb-fields{grid-template-columns:repeat(3,minmax(0,1fr))} .rb-fields .rb-wide{grid-column:span 2} }
@media (max-width:640px){
  .rb-who{grid-template-columns:1fr 1fr;grid-auto-flow:dense} .rb-who label:first-child,.rb-who .rb-addr{grid-column:1/-1}
  #signer-edit li{grid-template-columns:1fr}
  .rb-del{grid-column:3;grid-row:1;align-self:start}
  .rb-fields{grid-auto-flow:dense} .rb-fields label:nth-child(5){grid-column:1/-1}
  .rb-line{grid-template-columns:64px minmax(0,1fr) auto;padding:10px;gap:10px}
  .rb-thumb{width:64px;height:80px}
  .rb-fields{grid-template-columns:1fr 1fr;grid-column:1/-1;grid-row:2}
  .rb-fields .rb-wide{grid-column:1/-1}
  .rb-reading,.rb-note{grid-column:1/-1}
  .rb-prep{width:100%} .rb-total{margin-left:0;text-align:left} .rb-btns{width:100%} .rb-btns .btn{flex:1}
  #rb-table th:nth-child(2),#rb-table td:nth-child(2){display:none}
}

/* Signatures */
.nav-ct{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--warn);color:#1a1a1a;font-size:11px;font-weight:800;display:inline-grid;place-items:center}
.nav-ct[hidden]{display:none}
.nav button[aria-current="page"] .nav-ct{background:var(--on-white);color:var(--white)}
.app.mini .nav-ct{position:absolute;margin:0;transform:translate(12px,-10px);min-width:16px;height:16px;font-size:10px;padding:0 4px}
.app.mini .nav button{position:relative}
.sg-chain{display:flex;flex-wrap:wrap;gap:6px}
.sg-step{font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line, rgba(var(--hl),.14));color:var(--muted);white-space:nowrap}
.sg-step.now{color:var(--warn);border-color:currentColor;font-weight:700}
.sg-step.done{color:var(--good);border-color:currentColor}
.sg-step.done::before{content:"✓ "}
.sg-table th.ck,.sg-table td.ck{width:34px;padding-right:0}
.sg-table input[type=checkbox]{width:16px;height:16px;accent-color:var(--white)}
.ready-tag.signed a,.ready-tag a{color:inherit}
.hr-signers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0}
.hr-signers label{display:grid;gap:4px}
@media (max-width:640px){ .hr-signers{grid-template-columns:1fr} }

/* ---------- 2026 refresh: sliding glass bubble, blue primary buttons, Plus Jakarta Sans + Inter ----------
   src/6g-glass.js puts one .glass-pill in each .nav, .mnav, .seg and .tabs group and slides it to the picked button.
   Until it is placed (.has-glass), the picked button keeps its own background, so nothing looks broken without it. */
:root{--f-display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;--f-body:"Inter","Segoe UI",system-ui,sans-serif;--accent:#3B7BFF;--accent-hi:#4C8DFF}
h1,h2,h3{font-weight:700}
header.top h1{font-weight:800;letter-spacing:-.02em}
.nav,.seg,.tabs{position:relative}
.nav > :not(.glass-pill),.mnav > :not(.glass-pill),.seg > :not(.glass-pill),.tabs > :not(.glass-pill){position:relative;z-index:1}
.glass-pill{position:absolute;left:0;top:0;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(155deg,rgba(var(--hl),.22),rgba(var(--hl),.08));border:1px solid rgba(var(--hl),.22);
  box-shadow:inset 0 1px 0 rgba(var(--hl),.36),0 6px 18px rgba(0,0,0,.35);
  transition:transform .5s cubic-bezier(.3,1.35,.5,1),width .5s cubic-bezier(.3,1.35,.5,1),height .5s cubic-bezier(.3,1.35,.5,1),opacity .2s}
.nav .glass-pill,.mnav .glass-pill{border-radius:12px}
.mnav .glass-pill{border-radius:16px}
.seg .glass-pill,.tabs .glass-pill{border-radius:999px}
.nav.has-glass button[aria-current="page"]{background:transparent;color:#fff}
.mnav.has-glass button[aria-current="page"],.mnav.has-glass button[aria-expanded="true"]{background:transparent;color:#fff}
.seg.has-glass button[aria-pressed="true"]{background:transparent;color:#fff}
.tabs.has-glass .tab[aria-pressed="true"]{background:transparent;border-color:transparent;color:#fff}
.nav button,.seg button,.tab,.mnav button{transition:color .25s ease}
.btn.primary{background:var(--accent);border-color:var(--accent-hi);color:#fff;box-shadow:0 6px 20px rgba(59,123,255,.35)}
.btn.primary:hover{background:var(--accent-hi)}
@media (prefers-reduced-motion:reduce){.glass-pill{transition:opacity .2s}}

/* ---------- Today list on Home ---------- */
.today-list{list-style:none;margin:0;padding:0 18px 12px}
.today-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.today-row:first-child{border-top:0}
.today-txt{flex:1;min-width:0}
.today-txt .t{font-weight:600;color:var(--fg);overflow-wrap:anywhere}
.today-txt .d{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;color:var(--muted);margin-top:2px}
.today-tag{flex:none;min-width:84px;text-align:center;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.today-tag.bad{background:var(--bad-soft);color:var(--bad)}
.today-tag.warn{background:var(--warn-soft);color:var(--warn)}
.today-tag.good{background:var(--good-soft);color:var(--good)}
.today-tag.info{background:rgba(76,141,255,.18);color:#B5CEFF}
.today-empty{padding:6px 0 10px;color:var(--muted)}
@media (max-width:640px){ .today-row{flex-wrap:wrap;gap:8px 12px} .today-tag{min-width:0} .today-txt{flex-basis:calc(100% - 110px)} .today-row .btn{margin-left:auto} }

/* ---------- Signatures: progress tracker (replaces the old pill list) ---------- */
.sg-chain{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0}
.sg-step{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap;padding:0;border:0;border-radius:0;font-weight:500}
.sg-step::before{content:none}
.sg-step.done::before{content:none}
.sg-step i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;flex:none;background:var(--w060);border:1px solid var(--edge);color:var(--muted)}
.sg-step > span{display:flex;flex-direction:column;line-height:1.2}
.sg-step b{font-weight:600;color:var(--fg2);font-size:12.5px}
.sg-step.done i{background:#22B07D;border-color:#22B07D;color:#fff}
.sg-step.now{color:var(--fg);font-weight:600}
.sg-step.now i{background:rgba(59,123,255,.18);border:2px solid #5B90FF;color:#CFE0FF;box-shadow:0 0 0 4px rgba(59,123,255,.18)}
.sg-step.now b{color:#fff}
.sg-line{flex:1 1 14px;min-width:14px;max-width:46px;height:2px;border-radius:2px;background:var(--w120)}
.sg-line.ok{background:#22B07D}
@media (max-width:760px){ .sg-chain{flex-wrap:wrap} .sg-line{display:none} }

/* ---------- Financials: share by office ---------- */
.share-card{display:flex;flex-direction:column}
.share-bar{display:flex;gap:3px;height:16px;margin:6px 18px 16px;border-radius:999px;overflow:hidden}
.share-bar i{display:block;min-width:3px}
.share-list{list-style:none;margin:0;padding:0 18px 18px;display:flex;flex-direction:column;gap:4px}
.share-list li{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:center;gap:12px}
.share-o{display:flex;align-items:center;gap:10px;border:1px solid transparent;background:none;border-radius:10px;padding:8px 10px;margin-left:-10px;font-weight:600;color:var(--fg2);text-align:left;min-width:0}
.share-o:hover{background:var(--sunk);color:var(--fg)}
.share-o.on{border-color:var(--edge);background:var(--w060);color:var(--fg)}
.share-v{color:var(--muted);font-size:13px}
.share-list b{text-align:right;font-size:15px}

/* ---------- Ask bar and answers ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ask-bar{display:flex;align-items:center;gap:10px;border-radius:16px;padding:6px 6px 6px 16px;min-height:52px}
.ask-bar input,.ask-bar #ask-q{flex:1;min-width:0;border:0;outline:none;background:transparent;box-shadow:none;padding:6px 0;font-size:15px;color:var(--fg);border-radius:0}
.ask-bar input::placeholder{color:var(--muted)}
.ask-bar:focus-within{border-color:rgba(122,165,245,.55);box-shadow:var(--shadow),0 0 0 3px rgba(59,123,255,.18)}
.ask-spark{width:19px;height:19px;flex:none;fill:none;stroke:#8FB4FF;stroke-width:2;stroke-linejoin:round}
.ask-mic{width:40px;height:40px;flex:none;border-radius:12px;border:1px solid var(--edge);background:var(--w060);display:grid;place-items:center;color:var(--fg2)}
.ask-mic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ask-mic.on{background:rgba(255,99,99,.2);border-color:rgba(255,123,114,.6);color:#FFB3AD;animation:askPulse 1.2s ease-in-out infinite}
@keyframes askPulse{50%{box-shadow:0 0 0 6px rgba(255,123,114,.15)}}
.ask-bar .btn{min-height:40px;border-radius:12px;padding:8px 18px}
.ask-thread{padding:0 18px 18px;display:flex;flex-direction:column;gap:10px;max-height:min(60vh,520px);overflow:auto}
.ask-q{align-self:flex-end;max-width:85%;background:var(--white);color:var(--on-white);border-radius:16px 16px 4px 16px;padding:9px 14px;font-weight:600}
.ask-a{align-self:flex-start;max-width:92%;background:var(--w060);border:1px solid var(--edge);border-radius:16px 16px 16px 4px;padding:11px 15px;color:var(--fg);line-height:1.55}
.ask-a.err{border-color:rgba(255,123,114,.45);color:#FFC2BD}
.ask-ideas{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ask-ideas .src{width:100%}
.ask-idea{border:1px solid var(--edge);background:var(--w050);color:var(--fg2);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600}
.ask-idea:hover{background:var(--w100);color:var(--fg)}
.ask-dots{display:inline-flex;gap:5px;padding:4px 0}
.ask-dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:askDot 1s ease-in-out infinite}
.ask-dots i:nth-child(2){animation-delay:.15s}.ask-dots i:nth-child(3){animation-delay:.3s}
@keyframes askDot{50%{opacity:.25;transform:translateY(-2px)}}
@media (max-width:860px){ .ask-bar{padding-left:12px} .ask-bar .btn{padding:8px 14px} }
@media (prefers-reduced-motion:reduce){.ask-mic.on,.ask-dots i{animation:none}}
.ask-hb{display:flex;gap:6px;flex:none}
.ask-hb .btn[aria-pressed="true"]{background:var(--navy-soft,var(--w100));border-color:var(--navy-line,var(--edge));color:var(--link,var(--fg))}
.ask-fb{display:flex;gap:6px;align-self:flex-start;margin-top:-4px}
.ask-fb.src,.ask-saved{align-self:flex-start;margin-top:-4px}
.ask-fix{display:flex;gap:6px;align-self:stretch;margin-top:-4px}
.ask-fix input{flex:1;min-width:0}
.ask-knows{display:flex;flex-direction:column;gap:8px}
.ask-knows h3{font-size:13px;margin:6px 0 0;color:var(--fg)}
.ask-knows .ask-a{max-width:none}
.ask-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ask-list li{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;border:1px solid var(--edge);border-radius:12px;padding:8px 10px 8px 12px}

/* Send for signature: the email preview shows on white, the way the signer will see it. */
.mail-preview{background:#fff;color:#222;border-radius:12px;padding:16px 18px;max-height:46vh;overflow:auto;border:1px solid var(--edge)}
.mail-preview p{margin:0 0 10px}
.mail-steps{margin:0;padding-left:20px;display:grid;gap:4px;font-size:13.5px;color:var(--fg)}
#mail-dlg .actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.hr-signers label:has(#hr-emp){grid-column:1/-1}
/* A director's step waiting for the rest of its batch before one email goes out */
.sg-hold{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--fg2);border:1px dashed var(--edge-hi);border-radius:999px;padding:4px 10px;white-space:nowrap}

/* Messages sit at the top of the screen with a slowly color-changing glow around the edge. */
@property --led{syntax:'<angle>';inherits:false;initial-value:0deg}
.toast,.toast[popover]{top:calc(14px + env(safe-area-inset-top,0px));bottom:auto;color:#fff;border:2px solid transparent;border-radius:16px;padding:11px 18px;
  background:linear-gradient(rgba(14,16,26,.94),rgba(14,16,26,.94)) padding-box,conic-gradient(from var(--led),#ff3b6b,#ffb020,#2bdc7d,#22b8ff,#8b5cff,#ff3b6b) border-box;
  animation:ledSpin 2.6s linear infinite,ledGlow 2.6s linear infinite;-webkit-backdrop-filter:none;backdrop-filter:none}
@keyframes ledSpin{to{--led:360deg}}
@keyframes ledGlow{0%,100%{box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 18px rgba(255,59,107,.55)}20%{box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 18px rgba(255,176,32,.55)}40%{box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 18px rgba(43,220,125,.55)}60%{box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 18px rgba(34,184,255,.55)}80%{box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 18px rgba(139,92,255,.55)}}
@media (prefers-reduced-motion:reduce){.toast,.toast[popover]{animation:none;box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 14px rgba(34,184,255,.45)}}
@media (max-width:860px){.toast,.toast[popover]{bottom:auto}}
/* Ask: a round button at the bottom right; it opens the Ask box above it. */
.ask-fab{position:fixed;right:22px;bottom:22px;z-index:60;width:54px;height:54px;border-radius:50%;border:1px solid rgba(143,180,255,.45);display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%,#4f8bff,#2350c8);box-shadow:0 10px 28px rgba(35,80,200,.45),inset 0 1px 0 rgba(var(--hl),.25);color:#fff}
.ask-fab svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ask-fab .ask-x{display:none}.ask-fab.on .ask-x{display:block}.ask-fab.on .ask-spark{display:none}
.ask-fab:hover{transform:translateY(-1px)}
.ask-pop{position:fixed;right:22px;bottom:88px;z-index:60;width:min(520px,calc(100vw - 24px));display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 120px)}
.ask-pop[hidden]{display:none}
.ask-pop .ask-bar,.ask-pop .ask-panel{background:rgba(15,17,27,.97);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.ask-pop .ask-panel{margin:0;min-height:0;display:flex;flex-direction:column}
.ask-pop .ask-thread{max-height:min(50vh,440px)}
@media (max-width:860px){
  .ask-fab{right:14px;bottom:calc(var(--nav-b) + 86px);width:50px;height:50px}
  .ask-pop{right:12px;bottom:calc(var(--nav-b) + 146px);max-height:calc(100dvh - var(--nav-b) - 170px)}
}

/* ---------- signing on the dashboard: your turn ---------- */
.sg-mine{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 10px 30px color-mix(in srgb,var(--accent) 14%,transparent)}
.sg-mine h2{display:flex;align-items:center;gap:8px}
.sg-mine h2::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent);animation:sgPulse 1.8s ease-in-out infinite}
@keyframes sgPulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 6%,transparent)}}
.btn.sg-sign-btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,var(--accent-hi,#4C8DFF),var(--accent,#3B7BFF));border-color:transparent;color:#fff;font-weight:700;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn.sg-sign-btn::before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn.sg-sign-btn:hover{filter:brightness(1.08)}
.sg-step.now.you{color:var(--accent-hi,#4C8DFF)}
tr.sg-you td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.dlg.sgn-dlg{width:min(980px,calc(100vw - 16px));height:calc(100vh - 24px)}
.dlg.sgn-dlg > div{height:100%;padding:12px 12px 12px;gap:8px;box-sizing:border-box}
.dlg.sgn-dlg .dlg-h{padding:2px 6px 0}
#sgn-frame{flex:1;width:100%;min-height:0;border:0;border-radius:14px;background:#eef0f4}
@media (max-width:640px){ .dlg.sgn-dlg{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0} }

/* ---------- Subtabs: related pages share one menu item and switch here ---------- */
.subtabs{align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none;flex:none}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{white-space:nowrap;flex:none;font-size:13px;padding:7px 15px;display:inline-flex;align-items:center;gap:6px}
.subtabs .ct{font-size:11px;font-weight:700;background:var(--accent);color:#fff;border-radius:99px;padding:0 6px;line-height:17px}
body.rcpt-full{--sub-h:52px}
.sub-off{display:none!important}
@media (max-width:860px){ .subtabs{margin:0 -2px} }

/* ---------- Budget (src/6i-budget.js) ---------- */
#bg-root{gap:18px}
.bg-head{flex-wrap:wrap}
.bg-head .actions{display:flex;gap:8px}
.bg-code{font-family:var(--f-mono);font-size:11.5px;background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--fg2)}
.bg-depts{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
@media (max-width:700px){.bg-depts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}
.bg-dept{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--line);background:var(--sunk);color:var(--fg);border-radius:12px;padding:8px 14px;text-align:left;cursor:pointer}
.bg-dept span{font-size:11.5px;color:var(--muted);font-family:var(--f-mono)}
.bg-dept.on{background:rgba(var(--hl),.12);border-color:var(--edge-hi)}
.bg-dept.add{border-style:dashed;color:var(--muted)}
.bg-dept.add span{font-family:inherit}
.bg-note{display:flex;align-items:center;gap:8px;margin:0 18px 12px;padding:8px 12px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-size:12.5px;font-weight:600}
.bg-note svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.bg-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.bg-kpi .v{font-size:28px}
.bg-kpi .s{white-space:normal;display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:var(--muted)}
.bg-st{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 8px 2px 6px;white-space:nowrap;background:var(--sunk);color:var(--fg2)}
.bg-st svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bg-st.good{background:var(--good-soft);color:var(--good)}
.bg-st.warn{background:var(--warn-soft);color:var(--warn)}
.bg-st.bad{background:var(--bad-soft);color:var(--bad)}
/* bullet bars: label | track | % | status */
.bg-bullets{padding:4px 18px 20px;--cols:minmax(150px,220px) minmax(0,1fr) 52px 128px}
.bg-axis,.bg-row{display:grid;grid-template-columns:var(--cols);gap:14px;align-items:center}
.bg-ticks{position:relative;height:18px;font-size:11px;color:var(--faint)}
.bg-ticks span{position:absolute;transform:translateX(-50%);top:0}
.bg-ticks span:first-child{transform:none}
.bg-rows{position:relative}
.bg-row{padding:9px 0;border-top:1px solid var(--line);outline:none;border-radius:8px}
.bg-row:hover,.bg-row:focus-visible{background:rgba(var(--hl),.035)}
.bg-lab{display:flex;flex-direction:column;min-width:0}
.bg-lab b{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-lab span{font-size:12px;color:var(--muted)}
.bg-track{position:relative;height:16px}
.bg-track i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0}
.bg-bud{background:rgba(var(--hl),.07);box-shadow:inset 0 0 0 1px rgba(var(--hl),.06)}
.bg-fc{background:repeating-linear-gradient(135deg,rgba(57,135,229,.42) 0 3px,transparent 3px 7px)}
.bg-fill{background:#3987e5;box-shadow:2px 0 0 var(--panel-solid)}
.bg-fill.over{background:#e66767}
.bg-fill.none{background:#8a8d93}
.bg-row:has(.bg-fill.over) .bg-fc{background:repeating-linear-gradient(135deg,rgba(230,103,103,.45) 0 3px,transparent 3px 7px)}
.bg-pct{text-align:right;font-weight:700;font-size:14px}
.bg-tk{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px solid rgba(var(--hl),.75);border-radius:1px}
.bg-tk.full{border-left:1px solid rgba(var(--hl),.25);top:0;bottom:0}
.bg-ticks .pace{color:var(--fg);font-weight:700}
.bg-two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px}
.bg-top{list-style:none;margin:0;padding:0 18px 16px}
.bg-top li{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 62px;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line);border-radius:6px;outline:none}
.bg-top li:hover,.bg-top li:focus-visible{background:rgba(var(--hl),.035)}
.bg-top .n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-top .n small{display:block;font-size:11px;color:var(--faint);font-family:var(--f-mono);font-weight:400}
.bg-top .bar{height:12px}
.bg-top .bar i{display:block;height:100%;background:#3987e5;border-radius:0 4px 4px 0}
.bg-top .v{text-align:right;font-weight:700;font-size:13px}
.bg-mix{display:flex;gap:2px;height:22px;margin:4px 18px 16px;border-radius:4px;overflow:hidden}
.bg-mix i{min-width:3px;outline:none}
.bg-mix i:hover,.bg-mix i:focus-visible{filter:brightness(1.25)}
.bg-legend{list-style:none;margin:0;padding:0 18px 16px;display:grid;gap:2px}
.bg-legend li{display:grid;grid-template-columns:12px minmax(0,1fr) 56px 60px;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.bg-legend li i{width:12px;height:12px;border-radius:3px}
.bg-legend b,.bg-legend .src{text-align:right}
.bg-ins{list-style:none;margin:0;padding:0 18px 16px;display:grid;gap:0}
.bg-ins li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--fg2)}
.bg-ins li b{color:var(--fg)}
.bg-ins .bg-st{justify-self:start}
.bg-dot{width:6px;height:6px;border-radius:50%;background:var(--faint);justify-self:start;margin-left:8px;align-self:center}
.bg-search{width:min(260px,100%)}
.bg-table td,.bg-table th{padding:8px 12px}
.bg-table .n{text-align:right}
.bg-cat{cursor:pointer}
.bg-cat td{background:rgba(var(--hl),.03)}
.bg-cat td:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin-right:10px;transition:transform .2s;vertical-align:2px}
.bg-cat[aria-expanded="true"] td:first-child::before{transform:rotate(45deg)}
.bg-sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.bg-acct td:first-child{padding-left:44px}
.bg-ac{font-family:var(--f-mono);font-size:11.5px;color:var(--faint);margin-right:10px}
.bg-share{display:inline-block;width:60px;height:6px;border-radius:99px;background:rgba(var(--hl),.08);margin-right:8px;vertical-align:1px;overflow:hidden}
.bg-share i{display:block;height:100%;background:#3987e5}
.bg-tip{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:2px;background:#202127;border:1px solid var(--edge-hi);border-radius:10px;padding:8px 11px;font-size:12px;color:var(--fg2);box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:260px}
.bg-tip b{color:var(--fg);font-size:12.5px}
.bg-tip[hidden]{display:none}
@media (max-width:1100px){ .bg-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .bg-two{grid-template-columns:minmax(0,1fr)} }
@media (max-width:700px){
  .bg-bullets{--cols:minmax(0,1fr) 46px;padding:4px 14px 16px}
  .bg-axis{display:none}
  .bg-row{grid-template-columns:minmax(0,1fr) 46px;row-gap:6px}
  .bg-track{grid-column:1/-1;grid-row:2}
  .bg-stc{grid-column:1/-1;grid-row:3}
  .bg-kpi .v{font-size:22px}
  .bg-top li{grid-template-columns:minmax(0,1fr) 58px}
  .bg-top .bar{grid-column:1/-1;grid-row:2}
  .bg-ins li{grid-template-columns:minmax(0,1fr)}
  .bg-acct td:first-child{padding-left:20px}
  .bg-table:not(.act) th:nth-child(3),.bg-table:not(.act) td:nth-child(3){display:none}
}
/* Budget: departments, locations and plan-only views */
.bg-subrow{padding:0 18px 12px}
.bg-subs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.bg-subs button{white-space:nowrap;flex:none}
.bg-subs small{font-family:var(--f-mono);font-size:10.5px;opacity:.7;margin-left:3px}
.bg-note.info{background:rgba(57,135,229,.12);color:#9ec5f4}
.bg-plan{padding:0 18px 16px}
.bg-prow,.bg-srow{display:grid;grid-template-columns:minmax(140px,210px) minmax(0,1fr) 70px 52px;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);border-radius:6px;outline:none}
.bg-prow:hover,.bg-prow:focus-visible,.bg-srow:hover,.bg-srow:focus-visible{background:rgba(var(--hl),.035)}
.bg-prow .n{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-prow .n i{width:10px;height:10px;border-radius:3px;flex:none}
.bg-prow .bar,.bg-srow .bar{display:block;height:14px}
.bg-prow .bar i,.bg-srow .bar i{display:block;height:100%;border-radius:0 4px 4px 0}
.bg-prow .v,.bg-srow .v{text-align:right;font-weight:700;font-size:13.5px}
.bg-prow .p{text-align:right;color:var(--muted);font-size:12.5px}
.bg-split{padding:0 18px 6px}
.bg-srow{width:100%;grid-template-columns:minmax(120px,180px) minmax(0,1fr) 110px;background:none;border-left:0;border-right:0;border-bottom:0;color:var(--fg);text-align:left;cursor:pointer;font:inherit}
.bg-srow .n b{display:block;font-size:13.5px}
.bg-srow .n small,.bg-srow .v small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;font-family:var(--f-mono)}
.bg-srow .v small{font-family:inherit}
.bg-srow .bars{display:flex;flex-direction:column;gap:3px}
.bg-srow .bar{height:10px}
.bg-srow .bar i{background:#3987e5}
.bg-srow .bar.rev i{background:#199e70}
.bg-key{display:flex;gap:16px;padding:4px 18px 16px;font-size:12px;color:var(--muted)}
.bg-key i{display:inline-block;width:10px;height:10px;border-radius:3px;background:#3987e5;margin-right:6px;vertical-align:-1px}
.bg-key i.rev{background:#199e70}
.bg-table td.neg{color:var(--bad)}
@media (max-width:700px){
  .bg-prow{grid-template-columns:minmax(0,1fr) 64px 44px;row-gap:6px}
  .bg-prow .bar{grid-column:1/-1;grid-row:2}
  .bg-srow{grid-template-columns:minmax(0,1fr) 96px;row-gap:6px}
  .bg-srow .bars{grid-column:1/-1;grid-row:2}
  .bg-table.act th:nth-child(4),.bg-table.act td:nth-child(4){display:none}
}

/* ---------- LUPE theme (Oct 29, 2026) ----------
   Light by default, dark when <html data-theme="dark">. Warm stone neutrals, LUPE navy (#203a6b) as the one accent,
   organization colors only for data. The navy menu stays the same in both themes.
   --hl is the color used for subtle overlays (dark ink on light, white on dark). */
:root{
  color-scheme:light;
  --hl:24,32,47;
  --f-display:"Inter","Segoe UI",system-ui,sans-serif; --f-body:"Inter","Segoe UI",system-ui,sans-serif;
  --r:14px;
  --navy:#203a6b; --navy-2:#2b4c87; --navy-soft:#eef2f9; --navy-line:#dbe4f3; --link:#2b4c87;
  --bg:#f5f4f0; --ink:#ffffff; --surface:#ffffff;
  --panel:#ffffff; --panel-hi:#ffffff; --edge:#e8e5de; --edge-hi:#d5d1c8;
  --sunk:#faf9f6; --line:#efece5;
  --fg:#18202f; --fg2:#475467; --muted:#667085; --faint:#8a93a3;
  --white:#203a6b; --on-white:#ffffff; --white-hi:#2b4c87;
  --accent:#203a6b; --accent-hi:#2b4c87;
  --bad:#c83434; --bad-soft:#fdeeed; --warn:#a86e05; --warn-soft:#fdf4e2; --good:#13805a; --good-soft:#e7f5ee; --pend:#c46a12;
  --away:#6b55c9; --away-soft:#efebfb; --hol:#8a6a12; --hol-soft:#faf3df;
  --shadow:0 1px 2px rgba(24,32,47,.05);
  --hot-bg:linear-gradient(135deg,#203a6b,#2d5197); --hot-fg:#fff; --hot-sub:#c7d4ee;
  --thead:#faf9f6; --tlabel:#f5f4f0; --opt:#fff; --edit-bg:#fff;
  --dlg-bg:#ffffff; --overlay:rgba(24,32,47,.35); --logo-filter:none;
  --ink-text:#475467; --grid:#efece5; --panel-solid:#ffffff;
  --bg-grad:none; --field:#ffffff; --seg-bg:#efede7; --seg-on:#ffffff; --pill-on:#ffffff;
  --k16:rgba(24,32,47,.03); --k18:#faf9f6; --k25:#efede7; --k28:#ffffff; --k40:rgba(24,32,47,.08); --k55:rgba(24,32,47,.12);
  --side-bg:#203a6b; --side-fg:#cdd7ea; --side-dim:#8ea2c8; --side-on:rgba(255,255,255,.13);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --hl:255,255,255;
  --navy:#3d64ad; --navy-2:#8fb0ec; --navy-soft:#1a2440; --navy-line:#2a3a5e; --link:#8fb0ec;
  --bg:#0d1220; --ink:#161c2b; --surface:#161c2b;
  --panel:#161c2b; --panel-hi:#1c2335; --edge:#252d3f; --edge-hi:#343e55;
  --sunk:#121826; --line:#1f2637;
  --fg:#e8ecf3; --fg2:#b4bccb; --muted:#8c96a8; --faint:#6f7a8e;
  --white:#3d64ad; --on-white:#ffffff; --white-hi:#4a72bd;
  --accent:#3d64ad; --accent-hi:#4a72bd;
  --bad:#f27474; --bad-soft:rgba(242,116,116,.14); --warn:#e6ab3e; --warn-soft:rgba(230,171,62,.14); --good:#3fc98d; --good-soft:rgba(63,201,141,.14); --pend:#f2a04e;
  --away:#b8a6ff; --away-soft:rgba(184,166,255,.16); --hol:#e9d7a4; --hol-soft:rgba(233,215,164,.10);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px -12px rgba(0,0,0,.6);
  --hot-bg:linear-gradient(135deg,#25447f,#3561b0); --hot-sub:#c7d4ee;
  --thead:#121826; --tlabel:#121826; --opt:#161c2b; --edit-bg:#121826;
  --dlg-bg:#161c2b; --overlay:rgba(5,8,15,.7);
  --ink-text:#b4bccb; --grid:#232b3d; --panel-solid:#161c2b;
  --field:#121826; --seg-bg:#121826; --seg-on:#2c3550; --pill-on:#2c3550;
  --k16:rgba(0,0,0,.16); --k18:#121826; --k25:#121826; --k28:#121826; --k40:rgba(0,0,0,.4); --k55:rgba(0,0,0,.55);
  --side-bg:#0a101d; --side-fg:#c3cde0; --side-dim:#7f8fae; --side-on:rgba(143,176,236,.14);
}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body)}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.01em}
header.top h1{font-size:30px;font-weight:650;letter-spacing:-.02em}
header.top .eyebrow,.eyebrow{letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:500;color:var(--faint)}
header.top .sub{font-size:14px;color:var(--fg2)}
.num{font-family:var(--f-body);font-variant-numeric:tabular-nums}
.glass,.panel,.strip,.banner,.side,.dlg{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--shadow)}
.panel{border-radius:var(--r)}
.ph h2{font-size:15px;font-weight:600}
input:not([type=checkbox]):not([type=color]),select,textarea{background:var(--field);border-radius:9px}
input[type=date],input[type=time],input[type=month]{color-scheme:light}
:root[data-theme="dark"] input[type=date],:root[data-theme="dark"] input[type=time],:root[data-theme="dark"] input[type=month]{color-scheme:dark}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy-2) 18%,transparent)}
a{color:var(--link)}
.linkbtn{color:var(--link)}

/* buttons */
.btn{background:var(--surface);border-color:var(--edge);border-radius:9px;color:var(--fg);-webkit-backdrop-filter:none;backdrop-filter:none;font-weight:550;box-shadow:0 1px 2px rgba(24,32,47,.04)}
.btn:hover{background:var(--sunk);border-color:var(--edge-hi)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 1px 2px rgba(32,58,107,.25),inset 0 1px 0 rgba(255,255,255,.12)}
.btn.primary:hover{background:var(--white-hi);border-color:var(--white-hi)}
.btn.sm{border-radius:8px}
.seg{background:var(--seg-bg);border:0;border-radius:10px;padding:3px}
.seg button{border-radius:7px;color:var(--fg2)}
.seg button[aria-pressed="true"]{background:var(--seg-on);color:var(--fg);box-shadow:0 1px 2px rgba(24,32,47,.1)}
.tab{border-radius:8px}
.tab[aria-pressed="true"]{background:var(--seg-on);border-color:var(--edge);color:var(--fg)}
.glass-pill{background:var(--pill-on);border:1px solid var(--edge);box-shadow:0 1px 2px rgba(24,32,47,.1)}
.seg .glass-pill,.tabs .glass-pill{border-radius:7px}
.seg.has-glass button[aria-pressed="true"],.tabs.has-glass .tab[aria-pressed="true"]{color:var(--fg)}

/* navy menu */
.side{background:var(--side-bg);border-color:transparent;color:var(--side-fg);box-shadow:0 10px 30px -14px rgba(32,58,107,.6)}
.brand{border-bottom-color:rgba(255,255,255,.1)}
.brand img{max-width:150px}
.side .nav button,.side .nav a{color:var(--side-fg);font-weight:500}
.side .nav button:hover,.side .nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side .nav button[aria-current="page"]{background:var(--side-on);color:#fff}
.side .nav.has-glass button[aria-current="page"]{background:transparent}
.side .nav .glass-pill{background:var(--side-on);border-color:rgba(255,255,255,.08);box-shadow:none}
.side .side-h{color:var(--side-dim)}
.side .linkbtn{color:var(--side-dim)} .side .linkbtn:hover{color:#fff}
.side .orgbtn{color:var(--side-fg)}
.side .orgbtn:hover{background:rgba(255,255,255,.07)}
.side .orgbtn[aria-pressed="true"]{background:rgba(255,255,255,.1);border-color:transparent;color:#fff}
.side .orgbtn .ct{color:var(--side-dim);font-family:var(--f-body)}
.side .side-foot{border-top-color:rgba(255,255,255,.1)}
.side .acct{color:var(--side-dim)}
.side .side-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:var(--side-fg)}
.side .nav-ct{background:rgba(255,255,255,.16);color:#fff}
.side input,.side select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.theme-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;color:var(--side-dim);font-size:12.5px;font-weight:550;text-align:left}
.theme-btn:hover{color:#fff}
.theme-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:inline}
@media (min-width:861px){
  body{padding:0 32px 40px 0}
  .app{max-width:none;grid-template-columns:244px minmax(0,1fr);gap:32px}
  .side{top:0;border-radius:0;min-height:100vh;max-height:100vh;padding:24px 14px 16px}
  .wrap{padding-top:24px;max-width:1440px}
  .app.mini{grid-template-columns:78px minmax(0,1fr)}
}

/* summary cards */
.strip{background:none;border:0;box-shadow:none;gap:14px;overflow:visible;border-radius:0}
.strip > div{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px}
.strip > div + div::before{display:none}
.strip .k{letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:500;color:var(--fg2)}
.strip .v{font-family:var(--f-body);font-size:28px;font-weight:650;letter-spacing:-.02em;margin-top:4px}
.strip .s{font-size:12.5px;color:var(--faint)}
.strip > div.hot{background:var(--hot-bg);border-color:transparent;box-shadow:0 8px 24px -8px rgba(32,58,107,.45)}

/* lists, tags and small parts */
.inv{background:var(--surface);border:1px solid var(--line)}
.inv:hover,.inv[aria-current="true"]{background:var(--navy-soft);border-color:var(--navy-line)}
.inv .amt,.when,.when-tag,.ph .count,.chart-total,.ag .tm,.orgbtn .ct,.tab .ct{font-family:var(--f-body);font-variant-numeric:tabular-nums}
.pill{letter-spacing:.02em;text-transform:none;font-size:11px;font-weight:600;padding:2px 8px}
.pill.new{background:var(--navy-soft);color:var(--link)}
.ag{background:var(--sunk)}
.agenda .ad{letter-spacing:.04em}
.detail{background:var(--sunk)}
.today-tag.info{background:var(--navy-soft);color:var(--link)}
.banner{border:1px solid var(--edge)}
.banner b{color:var(--warn)}
.todo input[type=checkbox]{accent-color:var(--navy)}
.sg-step.now i{background:var(--navy-soft);border-color:var(--navy-2);color:var(--link);box-shadow:0 0 0 4px color-mix(in srgb,var(--navy-2) 15%,transparent)}
.sg-step.now b{color:var(--fg)}
.sg-step.done i,.sg-line.ok{background:var(--good);border-color:var(--good)}
.ask-spark{stroke:var(--link)}
.ask-bar:focus-within{border-color:var(--navy-2);box-shadow:var(--shadow),0 0 0 3px color-mix(in srgb,var(--navy-2) 18%,transparent)}
.ask-fab{background:radial-gradient(120% 120% at 30% 20%,#3a62ad,#203a6b);box-shadow:0 10px 28px rgba(32,58,107,.45)}
.ask-pop .ask-bar,.ask-pop .ask-panel{background:var(--surface);box-shadow:0 18px 50px rgba(24,32,47,.22)}
.ask-a.err{color:var(--bad,#b42318)}
.subtabs .ct{background:var(--navy)}
.bg-dept.on{background:var(--navy-soft);border-color:var(--navy-line)}
.bg-tk{border-left-color:var(--fg)}
.preview-bar{background:var(--surface)}

/* phone */
@media (max-width:860px){
  body{background:var(--bg)}
  .mbar{background:var(--side-bg);border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .m-org{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
  .mnav{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:var(--edge);box-shadow:0 10px 30px -10px rgba(24,32,47,.25)}
  .mnav button[aria-current="page"],.mnav button[aria-expanded="true"],.mnav.has-glass button[aria-current="page"],.mnav.has-glass button[aria-expanded="true"]{color:var(--link)}
  .mnav .glass-pill{background:var(--navy-soft);border-color:transparent;box-shadow:none}
  .side{background:var(--side-bg)}
  .m-scrim{background:var(--overlay)}
}
/* sign-in and setup cards: navy logo on the light theme */
:root:not([data-theme="dark"]) .gate-logo{content:url(img/lupe-navy.svg)}

/* icons in buttons */
.btn:has(> svg){display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn > svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav svg,.mnav svg{stroke-width:1.7}

/* tab groups: one gray track, the picked tab is a raised white chip */
.tabs{display:flex;width:fit-content;max-width:calc(100% - 36px);flex-wrap:wrap;gap:2px;margin:0 18px 12px;padding:3px;border-radius:10px;background:var(--seg-bg)}
.tab{border:0;border-radius:7px;padding:5px 11px;font-weight:550;color:var(--fg2)}
.tab:hover{color:var(--fg)}
.tab[aria-pressed="true"]{background:var(--seg-on);color:var(--fg);box-shadow:0 1px 2px rgba(24,32,47,.1)}
.tabs .glass-pill{border-radius:7px;border:0}
.tab .ct{color:var(--faint)}
.subtabs{background:var(--seg-bg)}

/* switches: calendar filters and settings checkboxes */
.cal-filters label,.settings label:has(> input[type=checkbox]){gap:8px}
.cal-filters label{border-radius:9px;padding:5px 11px 5px 8px;background:var(--surface);border-color:var(--edge);font-weight:500}
.cal-filters label:has(input:checked){background:var(--navy-soft);border-color:var(--navy-line);color:var(--fg)}
.cal-filters input[type=checkbox],.settings input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;margin:0;width:28px;height:16px;border-radius:99px;background:var(--edge-hi);position:relative;cursor:pointer;transition:background .2s}
.cal-filters input[type=checkbox]::after,.settings input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.cal-filters input[type=checkbox]:checked,.settings input[type=checkbox]:checked{background:var(--navy)}
.cal-filters input[type=checkbox]:checked::after,.settings input[type=checkbox]:checked::after{transform:translateX(12px)}
/* round check boxes for tasks */
.todo input[type=checkbox],.dayview input[type=checkbox],.sg-table input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--edge-hi);background:var(--surface);display:grid;place-items:center;cursor:pointer;margin-top:2px}
.todo input[type=checkbox]:checked,.dayview input[type=checkbox]:checked,.sg-table input[type=checkbox]:checked{background:var(--navy);border-color:var(--navy)}
.todo input[type=checkbox]:checked::after,.dayview input[type=checkbox]:checked::after,.sg-table input[type=checkbox]:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}

/* Financials: live data line, a green Live badge then the sync note */
.fin-live.on{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;color:var(--fg2);font-size:13px}
.fin-live.on::before{content:"Live";width:auto;height:auto;margin:0;flex:none;display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 20px;border-radius:99px;font-size:11.5px;font-weight:600;color:var(--good);
  background:radial-gradient(circle at 10px 50%,var(--good) 3px,transparent 3.5px),var(--good-soft);box-shadow:none}

/* ---------- Office report summary (Oct 29, 2026): total revenue card, office cards with a sparkline, headline chart ---------- */
.or-sum .kpis.or-kpis{padding:0;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.or-sum .kpi{border-radius:14px;padding:14px 18px 16px;background:var(--panel-solid,var(--panel));border:1px solid var(--line);display:flex;flex-direction:column;gap:2px;text-align:left;color:var(--fg);font:inherit}
.or-sum .kpi .k{font-size:13px;color:var(--fg2)}
.or-sum .kpi .v{font-size:26px;font-weight:700}
.or-sum .or-hero{background:linear-gradient(160deg,#2f5cb8,#203a6b);border-color:transparent;color:#fff;box-shadow:0 10px 30px rgba(32,58,107,.35)}
.or-sum .or-hero .k,.or-sum .or-hero .s{color:rgba(255,255,255,.82)}
.or-sum .or-hero .s{white-space:normal;font-size:12.5px}
.or-card{cursor:pointer;transition:border-color .15s,transform .15s}
.or-card:hover,.or-card:focus-visible{border-color:var(--c);transform:translateY(-1px)}
.or-card-b{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:2px}
.or-card-b .s{font-size:12.5px;color:var(--muted)}
.or-card .spark{width:58%;height:30px;flex:none}
.png-top{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.png-top svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share-list .share-v{color:var(--fg);font-size:14.5px;font-weight:700;text-align:right}
.share-list .share-p{color:var(--muted);font-size:14px;text-align:right}
@media (max-width:640px){ .or-sum .kpis.or-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .or-sum .or-hero{grid-column:1/-1} .or-sum .kpi .v{font-size:21px} }

/* ---------- Budget, plain-words view (Oct 29, 2026): where a department stands, and every department side by side ---------- */
.bg-stand{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px 24px;padding:20px 20px 6px}
.bg-stand .bg-kpis{grid-template-columns:repeat(2,minmax(0,1fr));padding:0;align-content:start}
.bg-stand .bg-kpi .v{font-size:24px}
.bg-stand-say{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.bg-stand-say h2{font-size:22px;line-height:1.25;margin:0;font-weight:700;letter-spacing:-.01em}
.bg-duo{display:flex;gap:28px;margin:16px 0 10px;flex-wrap:wrap}
.bg-duo div{display:flex;flex-direction:column}
.bg-duo b{font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.bg-duo div:last-child b{color:var(--muted)}
.bg-duo span{font-size:13px;color:var(--muted)}
.bg-stand.good .bg-duo div:first-child b{color:var(--good)}
.bg-stand.warn .bg-duo div:first-child b{color:var(--warn)}
.bg-stand.bad .bg-duo div:first-child b{color:var(--bad)}
.bg-meter{position:relative;height:18px;border-radius:999px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line);margin-top:26px}
.bg-meter .fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--good)}
.bg-stand.warn .bg-meter .fill{background:var(--warn)}
.bg-stand.bad .bg-meter .fill{background:var(--bad)}
.bg-meter .pace{position:absolute;top:-6px;bottom:-6px;border-left:2px solid var(--fg)}
.bg-meter .pace span{position:absolute;bottom:100%;left:0;transform:translateX(-50%);font-size:11.5px;font-weight:700;white-space:nowrap;padding-bottom:3px}
.bg-meter .end{position:absolute;top:0;bottom:0;border-left:1px dashed var(--muted)}
.bg-meter-key{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);margin-top:5px}
.bg-plain{list-style:none;margin:16px 0 8px;padding:0;display:grid;gap:10px}
.bg-plain li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:baseline;font-size:14.5px;line-height:1.45;color:var(--fg2)}
.bg-plain b{color:var(--fg)}
.bg-sn{width:22px;height:22px;border-radius:50%;background:var(--sunk);border:1px solid var(--line);display:inline-grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--muted);transform:translateY(-1px)}
.bg-words{grid-column:1/-1;border-top:1px solid var(--line);padding:10px 0 12px;font-size:13px}
.bg-words summary{cursor:pointer;font-weight:600;color:var(--fg2)}
.bg-words dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 14px;margin:12px 0 0;align-items:center}
.bg-words dt{font-weight:600}
.bg-words dd{margin:0;color:var(--fg2)}
.bg-orgs{display:grid;padding:0 18px 8px}
.bg-org{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(0,1fr) minmax(0,1.2fr) 132px;gap:16px;align-items:center;padding:11px 10px;margin:0 -10px;border:0;border-top:1px solid var(--line);background:none;color:var(--fg);text-align:left;cursor:pointer;border-radius:10px;font:inherit}
.bg-org:first-child{border-top:0}
.bg-org:hover,.bg-org:focus-visible{background:rgba(var(--hl),.04)}
.bg-org.on{background:rgba(var(--hl),.07)}
.bg-org .n{display:flex;flex-direction:column;min-width:0}
.bg-org .n b{font-size:14px;font-weight:600}
.bg-org .n small{font-size:12px;color:var(--muted)}
.bg-org-size{height:10px;border-radius:999px;background:var(--sunk);overflow:hidden}
.bg-org-size i{display:block;height:100%;background:#203a6b;border-radius:999px}
:root[data-theme="dark"] .bg-org-size i{background:#8fb0ec}
.bg-org-use{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px;align-items:center;font-weight:700;font-size:13.5px}
.bg-org-use .num{text-align:right}
.bg-org-use .src{grid-column:1/-1;font-weight:400}
.bg-mini{position:relative;height:10px;border-radius:999px;background:var(--sunk)}
.bg-mini i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--fg2)}
.bg-mini i.good{background:var(--good)} .bg-mini i.warn{background:var(--warn)} .bg-mini i.bad{background:var(--bad)}
.bg-mini b{position:absolute;top:-4px;bottom:-4px;border-left:2px solid var(--fg)}
.bg-org-st{justify-self:end}
.bg-key .use{background:var(--good)!important}
.bg-edit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:6px 24px;padding:0 18px 8px}
.bg-edit-row{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:10px;align-items:center;padding:5px 0;font-size:13.5px}
.bg-edit-row.kid span{padding-left:16px;color:var(--fg2)}
.bg-edit-row input{font-family:var(--f-mono);font-size:13px;white-space:pre}
.bg-edit-foot{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:8px 18px 16px;flex-wrap:wrap}
.bg-edit-foot .src{margin-right:auto}
@media (max-width:1000px){ .bg-stand{grid-template-columns:minmax(0,1fr)} }
@media (max-width:700px){ .bg-org{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px} .bg-org-size{display:none} .bg-org-use{grid-column:1/-1;grid-row:2} .bg-duo b{font-size:28px} .bg-stand-say h2{font-size:19px} .bg-edit-row{grid-template-columns:minmax(0,1fr)} .bg-words dl{grid-template-columns:minmax(0,1fr)} }
.bg-orgs + .bg-key i:not(.use){background:#203a6b} :root[data-theme="dark"] .bg-orgs + .bg-key i:not(.use){background:#8fb0ec}
.bg-edit-dept{border:1px solid var(--line);border-radius:12px;padding:6px 12px;background:var(--sunk)}
.bg-edit-grid{align-items:start}

/* ---------- Budget, simplified (Oct 29, 2026, second pass): one bar on top, one answer card, two short lists, details last ---------- */
.bg-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.bg-picks{display:flex;gap:10px;flex-wrap:wrap}
.bg-pick{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bg-pick select{min-width:190px;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;padding:8px 34px 8px 12px;border-radius:10px}
.bg-bar-r{display:flex;align-items:center;gap:8px}
.bg-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-right:4px}
.bg-live i{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.bg-live.off i{background:var(--faint);box-shadow:none}
.bg-live.err i{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.bg-bar .btn.icon{width:34px;height:34px;padding:0;display:inline-grid;place-items:center}
.bg-bar .btn.icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bg-bar .btn.icon svg circle{fill:currentColor;stroke:none}
.bg-more{position:relative}
.bg-more summary{list-style:none;cursor:pointer}
.bg-more summary::-webkit-details-marker{display:none}
.bg-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;background:var(--surface,var(--panel-solid));border:1px solid var(--edge);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column}
.bg-menu button,.bg-menu label{all:unset;cursor:pointer;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:550;color:var(--fg)}
.bg-menu button:hover,.bg-menu label:hover{background:var(--sunk)}
.bg-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px 32px;padding:22px 22px 20px;align-items:center}
.bg-verdict{display:flex;gap:14px;align-items:flex-start}
.bg-vdot{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);color:var(--fg2)}
.bg-vdot svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bg-hero.good .bg-vdot{background:var(--good-soft);color:var(--good)}
.bg-hero.warn .bg-vdot{background:var(--warn-soft);color:var(--warn)}
.bg-hero.bad .bg-vdot{background:var(--bad-soft);color:var(--bad)}
.bg-verdict h2{margin:0;font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.bg-hero.good .bg-verdict h2{color:var(--good)} .bg-hero.warn .bg-verdict h2{color:var(--warn)} .bg-hero.bad .bg-verdict h2{color:var(--bad)}
.bg-verdict p{margin:5px 0 0;font-size:14.5px;line-height:1.45;color:var(--fg2);max-width:52ch}
.bg-hero .bg-meter{margin-top:40px;height:22px}
.bg-meter .fill span{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11.5px;font-weight:700;color:#fff;white-space:nowrap}
.bg-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bg-nums div{display:flex;flex-direction:column;gap:2px;background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.bg-nums span{font-size:12px;color:var(--muted)}
.bg-nums b{font-size:24px;font-weight:700;letter-spacing:-.01em}
.bg-nums small{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-cats{display:grid;padding:0 18px 12px}
.bg-cat-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(80px,1.3fr) 44px 86px;gap:14px;align-items:center;padding:10px 10px;margin:0 -10px;border:0;border-top:1px solid var(--line);background:none;color:var(--fg);font:inherit;text-align:left;border-radius:10px;outline:none}
.bg-cat-row:first-child{border-top:0}
.bg-cat-row:hover,.bg-cat-row:focus-visible{background:rgba(var(--hl),.04)}
.bg-cat-row .n{display:flex;flex-direction:column;min-width:0}
.bg-cat-row .n b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-cat-row .n small{font-size:12px;color:var(--muted)}
.bg-cat-row .p{text-align:right;font-weight:700;font-size:14px}
.bg-cat-row .l{text-align:right;font-size:12.5px;color:var(--muted);white-space:nowrap}
.bg-cat-row .l.neg{color:var(--bad);font-weight:600}
.bg-cat-row .src{font-size:12.5px}
.bg-dep{cursor:pointer}
.bg-dep.on{background:rgba(var(--hl),.07)}
.bg-dep .l{justify-self:end}
.bg-mini.big{height:12px}
.bg-mini i.plan{background:#203a6b}
:root[data-theme="dark"] .bg-mini i.plan{background:#8fb0ec}
@media (max-width:1000px){ .bg-hero{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .bg-pick select{min-width:0;width:100%} .bg-picks,.bg-pick{flex:1 1 100%} .bg-bar-r{width:100%;justify-content:flex-end} .bg-live{margin-right:auto}
  .bg-verdict h2{font-size:23px} .bg-nums b{font-size:20px} .bg-cat-row{grid-template-columns:minmax(0,1fr) 44px 74px;gap:4px 10px} .bg-cat-row .bg-mini,.bg-cat-row > .src{grid-column:1/-1;grid-row:2} }
.bg-search{flex:0 1 280px;max-width:280px}
.bg-dep{grid-template-columns:minmax(120px,1.2fr) minmax(60px,1fr) 40px 118px}
.bg-st svg circle{stroke-width:2.4}
@media (max-width:640px){ .bg-dep{grid-template-columns:minmax(0,1fr) 40px auto;gap:4px 10px} .bg-dep .bg-mini{grid-column:1/-1;grid-row:2} }
@media (max-width:640px){ .bg-table .bg-cat .src{display:none} .bg-table td,.bg-table th{padding:8px 8px} }

/* ---------- Glass top bar (Nov 9, 2026) ----------
   Juan's redesign from a video he liked: no left menu. On computers every page is one round icon in a floating
   frosted bar at the top (name shows on hover), organizations are chips under the page title, and cards are frosted
   glass over a LUPE navy gradient. Phones keep the bottom tabs, restyled the same way. Mockup: icon-redesign/mockup.html. */
:root{
  --g-bg:radial-gradient(1100px 620px at 78% -8%,#5b8ae0 0%,transparent 58%),radial-gradient(900px 700px at -8% 108%,#3b5fa8 0%,transparent 60%),linear-gradient(160deg,#24427a 0%,#0f2350 100%);
  --panel:rgba(255,255,255,.86); --panel-hi:rgba(255,255,255,.94); --edge:rgba(255,255,255,.55); --surface:#ffffff;
  --bg-grad:var(--g-bg);
  --r:22px; --on-bg:#ffffff; --on-bg-2:rgba(255,255,255,.74);
  --bar-bg:rgba(255,255,255,.14); --bar-line:rgba(255,255,255,.26); --bar-hover:rgba(255,255,255,.2); --bar-on:#ffffff; --bar-on-fg:#203a6b; --tip-bg:#0b1430;
  --shadow:0 10px 30px -18px rgba(8,18,45,.55);
}
:root[data-theme="dark"]{
  --g-bg:radial-gradient(1100px 620px at 78% -8%,#1f3d78 0%,transparent 58%),radial-gradient(900px 700px at -8% 108%,#18305f 0%,transparent 60%),linear-gradient(160deg,#0e1a33 0%,#060b17 100%);
  --panel:rgba(18,25,42,.78); --panel-hi:rgba(28,36,56,.9); --edge:rgba(255,255,255,.08); --surface:#161c2b;
  --bg-grad:var(--g-bg);
  --bar-bg:rgba(255,255,255,.07); --bar-line:rgba(255,255,255,.12); --bar-hover:rgba(255,255,255,.12); --bar-on:#e8ecf3; --bar-on-fg:#0d1220; --tip-bg:#e8ecf3;
}
html{background:#0f2350}
:root[data-theme="dark"] html,:root[data-theme="dark"]{background:#060b17}
body{background:#0f2350;min-height:100vh}
:root[data-theme="dark"] body{background-color:#060b17}
.glass,.panel,.banner,.dlg,.strip > div{-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
.strip{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.panel,.strip,.banner{border-radius:var(--r);border-color:var(--edge)}
dialog.dlg,.dlg{background:var(--dlg-bg)}
/* Text that sits on the gradient, outside the cards */
header.top,header.top h1{color:var(--on-bg)}
header.top h1{font-weight:300;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.035em;line-height:1.05}
header.top .eyebrow,header.top .sub,header.top .src{color:var(--on-bg-2)}
header.top .btn:not(.primary){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
header.top .btn:not(.primary):hover{background:rgba(255,255,255,.24)}
header.top .btn.primary{background:#fff;border-color:#fff;color:#203a6b}
header.top .seg,header.top .tabs{background:rgba(255,255,255,.14)}
header.top .seg button,header.top .tabs .tab{color:rgba(255,255,255,.85)}
header.top .seg button[aria-pressed="true"],header.top .tabs .tab[aria-pressed="true"]{color:#203a6b}
.btn{border-radius:999px}
.btn.sm{border-radius:999px}

/* Organization chips under the title (moved here from the menu on computers) */
.org-chips{display:none}
@media (min-width:861px){
  .org-chips{display:block;margin:-6px 0 -4px}
  .org-chips #org-filter{flex-direction:row;flex-wrap:wrap;gap:6px}
  .org-chips .orgbtn{display:inline-flex;gap:7px;padding:6px 12px;border-radius:999px;background:var(--bar-bg);border:1px solid var(--bar-line);color:#fff;font-size:12.5px}
  .org-chips .orgbtn:hover{background:var(--bar-hover)}
  .org-chips .orgbtn[aria-pressed="true"]{background:#0b1430;border-color:transparent;color:#fff}
  :root[data-theme="dark"] .org-chips .orgbtn[aria-pressed="true"]{background:#e8ecf3;color:#0d1220}
  .org-chips .orgbtn .swatch{border-radius:50%;width:8px;height:8px}
  .org-chips .orgbtn .ct{color:inherit;opacity:.7;font-family:var(--f-body)}
  .org-chips .glass-pill{display:none}
}

/* The bar itself (computers) */
@media (min-width:861px){
  body{padding:14px 28px 40px}
  .app,.app.mini{grid-template-columns:minmax(0,1fr);gap:22px}
  .app,.app.mini{max-width:1440px}
  .wrap{padding-top:0;max-width:none}
  .side,.app.mini .side{position:sticky;top:12px;z-index:50;flex-direction:row;align-items:center;gap:12px;min-height:0;max-height:none;overflow:visible;
    padding:7px 8px 7px 14px;border-radius:999px;background:var(--bar-bg);border:1px solid var(--bar-line);color:#fff;
    -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 12px 34px -18px rgba(0,0,0,.55)}
  .side .brand,.app.mini .brand{border:0;padding:0;display:flex;align-items:center;flex:none}
  .side .brand img,.app.mini .brand img{width:auto;height:26px;max-width:none;object-fit:contain}
  .side-toggle{display:none!important}
  .side .nav{flex-direction:row;gap:2px;margin:0 auto;padding:4px;border-radius:999px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.12)}
  :root[data-theme="dark"] .side .nav{background:rgba(0,0,0,.3)}
  .side .nav button,.side .nav a,.app.mini .nav button,.app.mini .nav a{position:relative;width:40px;height:40px;padding:0;border-radius:50%;justify-content:center;color:#fff;flex:none}
  .side .nav button:hover,.side .nav a:hover{background:var(--bar-hover);color:#fff}
  .side .nav button[aria-current="page"],.side .nav.has-glass button[aria-current="page"]{background:var(--bar-on);color:var(--bar-on-fg);box-shadow:0 4px 14px rgba(0,0,0,.22)}
  .side .nav .glass-pill{display:none}
  .side .nav svg{width:19px;height:19px;stroke-width:1.8}
  .side .nav button span,.side .nav a span,.app.mini .nav button span,.app.mini .nav a span{display:block;position:absolute;top:50px;left:50%;transform:translateX(-50%);background:var(--tip-bg);color:var(--bar-on-fg);
    font-size:12px;font-weight:550;padding:5px 9px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:60;max-width:none;overflow:visible}
  :root:not([data-theme="dark"]) .side .nav button span,:root:not([data-theme="dark"]) .side .nav a span{color:#fff}
  .side .nav button:hover span,.side .nav a:hover span,.side .nav button:focus-visible span,.side .nav a:focus-visible span{opacity:1}
  .side .nav .ext{display:none}
  .side .nav-ct{position:absolute;top:1px;right:1px;margin:0;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#ff5a4f!important;color:#fff!important;font-size:10px;line-height:16px;font-weight:700;text-align:center}
  .side .nav button[aria-current="page"] .nav-ct{top:-3px;right:-3px}
  .side .side-orgs,.app.mini .side-orgs{display:none}
  .side .side-foot,.app.mini .side-foot{margin:0;padding:0;border:0;flex-direction:row;align-items:center;gap:6px;flex:none}
  .side .acct{display:none}
  .side .theme-btn,.side #signout{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;background:var(--bar-bg);color:#fff;text-decoration:none;border:0}
  .side .theme-btn:hover,.side #signout:hover{background:var(--bar-hover)}
  .side .theme-btn span,.side #signout span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .side .theme-btn svg,.side #signout svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .side .me-av{width:40px;height:40px;border-radius:50%;background:#ff8a5c;color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;flex:none}
}
.me-av{display:none}
@media (min-width:861px){ .side .me-av{display:grid} }
#signout svg{display:none}
@media (min-width:861px){ #signout svg{display:block} }
@media (min-width:861px) and (max-width:1180px){
  .side .nav button,.side .nav a{width:36px;height:36px}
  .side{gap:8px}
}

/* Phones: same gradient, glass bars */
@media (max-width:860px){
  .mbar{background:rgba(15,35,80,.55)!important;border:0!important;border-bottom:1px solid var(--bar-line)!important;box-shadow:none!important;color:#fff;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
  :root[data-theme="dark"] .mbar{background:rgba(6,11,23,.6)!important}
  .mbar .m-org{background:var(--bar-bg);border-color:var(--bar-line);color:#fff}
  .mnav{background:rgba(15,35,80,.62)!important;border:1px solid var(--bar-line)!important;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
  .mnav button{color:rgba(255,255,255,.78)}
  .mnav button[aria-current="page"],.mnav button[aria-expanded="true"]{color:#203a6b;background:#fff}
  :root[data-theme="dark"] .mnav button[aria-current="page"]{color:#0d1220;background:#e8ecf3}
  .mnav .glass-pill{display:none}
}

.ask-fab{background:#fff;border-color:rgba(255,255,255,.7);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.ask-fab svg{stroke:#203a6b}
:root[data-theme="dark"] .ask-fab{background:#e8ecf3}

/* Bills to approve inside the dashboard (Nov 10, 2026): the approve page in a frame, so you never leave the dashboard. */
#bills-frame{display:block;width:100%;height:calc(100vh - 230px);min-height:600px;border:0;background:transparent}
@media (max-width:860px){ #bills-frame{height:calc(100dvh - 210px - env(safe-area-inset-bottom,0px));min-height:480px} }