/* What Accounts? (stage 3): the What Admin? family look, carried on its own address (nothing loads from What Admin?).
   Phone: the Office's navy bar and bottom tabs, its tokens and Archivo. Laptop (1024px and over): the desktop Office's black
   bar with the lockup and tagline, the strip of sections under it, quiet greys and teal for what is current, Arial for the
   page. Buttons are sized to their words; no counts or badges; calm. The ? is always #1212F2 (Joe's logo rule). */
@font-face{font-family:"Archivo";src:url("/archivo.woff") format("woff");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --navy:#101628;--accent:#F5B800;--on-accent:#101628;--q:#1212F2;
  --ink:#101628;--ink-2:#4A5068;--ink-3:#7E8399;--paper:#F6F5F1;--panel:#fff;--surface:#ECEBE5;--line:#D9D7CF;--line-2:#E7E5DE;
  --link:#1B4FD8;--cur:#1B4FD8;--ok:#157A3C;--warn:#8F5600;--warn-bg:#FFF0CC;--bad:#B3261E;--bad-bg:#FBE7E5;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--page:var(--sans);--tap:48px;--radius:10px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#EEF0F6;--ink-2:#A7ACC0;--ink-3:#7E8399;--paper:#0C1120;--panel:#151C30;--surface:#1B2338;--line:#2A3350;--line-2:#1F2740;
  --link:#8FB0FF;--cur:#F5B800;--ok:#62D18F;--warn:#F5C24B;--warn-bg:#3A2C0C;--bad:#FF8A80;--bad-bg:#3A1A17;color-scheme:dark}}
:root[data-theme="dark"]{--ink:#EEF0F6;--ink-2:#A7ACC0;--ink-3:#7E8399;--paper:#0C1120;--panel:#151C30;--surface:#1B2338;--line:#2A3350;--line-2:#1F2740;--link:#8FB0FF;--cur:#F5B800;--ok:#62D18F;--warn:#F5C24B;--warn-bg:#3A2C0C;--bad:#FF8A80;--bad-bg:#3A1A17;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100dvh;background:var(--paper);color:var(--ink);font-family:var(--page);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--link)}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
h2{font-size:1.08rem;font-weight:750}
h3{font-size:1rem;font-weight:700}
p{margin:0}
.muted{color:var(--ink-2)}.small{font-size:.88rem}.tiny{font-size:.8rem}.warn{color:var(--warn)}.bad{color:var(--bad)}.ok{color:var(--ok)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the lockup (assets/wordmark.css, Joe 31 Oct: "must never change"): picture 1.786em, gap .333em, the ? 1.662em at -.129em */
.wm{display:inline-flex;align-items:center;gap:.333em;font-family:"Archivo","Arial Black",Impact,sans-serif;font-weight:800;font-stretch:125%;letter-spacing:-.01em;white-space:nowrap;text-decoration:none;color:#F1F1F6}
.wm > .wm-ic{display:block;flex:none;width:1.786em;height:1.786em;object-fit:contain}
.wm .q{position:relative;font-size:1.662em;line-height:0;vertical-align:-.129em;color:transparent}
.wm .q::after{content:"";position:absolute;left:.077em;top:.182em;width:.539em;height:.698em;background:url(/pics/q.webp) center/contain no-repeat;pointer-events:none}
.q2{color:var(--q)}

/* ---------- the frame ---------- */
#app{min-height:100dvh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;background:var(--navy);color:#fff;padding-top:env(safe-area-inset-top,0px)}
.top-row{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;height:58px;padding:0 4px}
.top .mid{display:flex;flex-direction:column;align-items:center;min-width:0}
.top .wm{font-size:17px}
.top .tag{display:none}
.ib{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:50%;color:#fff;text-decoration:none}
.ib svg{width:24px;height:24px}
.ib:active{background:rgba(255,255,255,.12)}
.acct{display:none}
.strip{display:none}
main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:16px 16px calc(92px + env(safe-area-inset-bottom,0px))}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs a{display:grid;justify-items:center;gap:2px;padding:8px 2px 10px;color:var(--ink-3);text-decoration:none;font-size:.76rem;font-weight:650;line-height:1.15}
.tabs a svg{width:24px;height:24px}
.tabs a.on{color:var(--ink)}
.tabs a.on svg{color:var(--on-accent);background:var(--accent);border-radius:999px;width:50px;padding:0 13px}
.who{margin:-4px 0 12px;color:var(--ink-2);font-size:.88rem}
.crumb{display:flex;align-items:center;gap:6px;margin:-6px 0 10px -10px}
.crumb button{width:40px;height:40px;display:grid;place-items:center;border:0;background:none;border-radius:50%;color:var(--ink-2)}
.crumb button svg{width:20px;height:20px}
.crumb h1{font-size:1.25rem}

/* ---------- blocks ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.card + .card,.card + .grp,.grp + .card{margin-top:12px}
.card h2{margin-bottom:6px}
.card.call{border-color:var(--accent)}
.grp{margin-top:18px}
.grp > h2,.h{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px 2px}
.rows{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;color:inherit;text-decoration:none;border-top:1px solid var(--line-2);background:none;width:100%;text-align:left;border-left:0;border-right:0;border-bottom:0}
.rows > .row:first-child{border-top:0}
.row:active{background:var(--surface)}
.row .pic{flex:none;width:40px;height:40px;object-fit:contain}
.row .txt{flex:1;min-width:0;display:grid;gap:1px}
.row .txt b{font-weight:700;overflow-wrap:anywhere}
.row .txt small{color:var(--ink-2);font-size:.85rem;overflow-wrap:anywhere}
.row .amt{flex:none;text-align:right;font-weight:700;white-space:nowrap}
.row .amt small{display:block;font-weight:500;color:var(--ink-2);font-size:.8rem}
.row .chev{flex:none;width:18px;height:18px;color:var(--ink-3)}
.row .soon{flex:none;font-size:.78rem;font-weight:650;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.row.static{cursor:default}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px}
.fig span{display:block;font-size:.84rem;color:var(--ink-2)}
.fig b{display:block;font-size:1.3rem;font-weight:800;line-height:1.2}
.fig small{display:block;color:var(--ink-2);font-size:.8rem}
.note{color:var(--ink-2);font-size:.86rem;margin-top:8px}
.tag-o{display:inline-block;font-size:.72rem;font-weight:650;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.late{color:var(--warn);font-weight:650}
.empty{padding:16px;color:var(--ink-2);text-align:center}

/* ---------- buttons and fields ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:0 1rem;border-radius:8px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font-weight:700;font-size:.98rem;text-decoration:none;white-space:nowrap}
.btn.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.go:active{filter:brightness(.92)}
.btn:disabled{opacity:.5;cursor:default}
.btn.sm{min-height:36px;padding:0 .75rem;font-size:.9rem}
.btn.link{border:0;padding:0 .2rem;min-height:36px;color:var(--link);font-weight:650}
.btn svg{width:18px;height:18px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.actions.end{justify-content:flex-end}
.f{display:grid;gap:4px;margin-top:12px;align-content:start}
.f > span{font-size:.86rem;font-weight:650;color:var(--ink-2)}
.f small{color:var(--ink-3);font-size:.8rem}
.in{width:100%;min-height:44px;padding:.5rem .75rem;border:1.5px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:1rem}
.in:focus{border-color:var(--accent);outline:0}
textarea.in{min-height:70px;resize:vertical}
.money{position:relative}
.money::before{content:"£";position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.money .in{padding-left:1.6rem;text-align:left}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.two > *,.three > *{min-width:0}
input[type="date"].in{min-width:0;max-width:100%;padding-right:.4rem}
.three{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.three > :first-child{grid-column:1 / -1}
@media (min-width:600px){.three{grid-template-columns:2fr 1fr 1fr}.three > :first-child{grid-column:auto}}
.tick{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:.95rem}
.tick input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{min-height:38px;padding:0 .8rem;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);font-weight:650;font-size:.92rem}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* a pick-list (Joe, 2 Nov: it drops down from its box, at the box's width; one click chooses; no OK, no full-page sheet) */
.pk{position:relative}
.pk > button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:.45rem .75rem;border:1.5px solid var(--line);border-radius:8px;background:var(--panel);text-align:left;font-size:1rem}
.pk > button svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.pk > button .ph{color:var(--ink-3)}
.pk ul{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:20;max-height:300px;overflow:auto;margin:0;padding:4px 0;list-style:none;background:var(--panel);border:1.5px solid var(--line);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.pk li button{width:100%;text-align:left;padding:.5rem .75rem;border:0;background:none;font-size:.96rem}
.pk li button:hover,.pk li button:focus{background:var(--surface)}
.pk li.g{padding:.45rem .75rem .2rem;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pk li button[aria-selected="true"]{font-weight:750}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;margin:0 0 12px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:38px;padding:0 .85rem;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);font-weight:650;font-size:.92rem;display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.steps{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
.steps .dots{display:flex;gap:6px}
.steps .dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.steps .dots i.on{background:var(--accent)}
.arrow{width:40px;height:40px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:50%;background:var(--panel);color:var(--ink)}
.arrow svg{width:18px;height:18px}
.arrow:disabled{opacity:.35}
.fab{position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:6;width:58px;height:58px;border-radius:16px;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.35);text-decoration:none}
.fab svg{width:28px;height:28px}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;font-size:.94rem;max-width:90vw;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.err{margin-top:10px;color:var(--bad);font-size:.9rem}
.sep{border:0;border-top:1px solid var(--line-2);margin:14px 0 2px}
.kv > div{display:grid;gap:1px;padding:8px 0;border-top:1px solid var(--line-2)}
.kv > div:first-child{border-top:0;padding-top:0}
.kv small{color:var(--ink-2);font-size:.82rem}
.kv b{font-weight:700}
.intro{display:none}
.code{font:600 20px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;overflow-wrap:anywhere}
.wrap{overflow-wrap:anywhere}
/* the mic: hold to talk (Joe, 1 Nov: every microphone is hold to talk for now) */
.mic{display:flex;align-items:center;gap:12px}
.mic > button{flex:none;width:56px;height:56px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none}
.mic > button svg{width:26px;height:26px}
.mic > button.on{background:#E5241B;color:#fff;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,36,27,.45)}50%{box-shadow:0 0 0 12px rgba(229,36,27,0)}}
.say{font-size:.86rem;color:var(--ink-2)}
.say i{font-style:normal;color:var(--ink)}
.photo{display:flex;align-items:center;gap:12px;margin-top:12px}
.photo img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.snap-pic img{display:block;width:100%;max-height:280px;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:var(--paper)}
.snap-pic{margin-bottom:4px}
/* a bank line and what it could be */
.bl{padding:12px 14px;border-top:1px solid var(--line-2)}
.rows > .bl:first-child{border-top:0}
.bl .top1{display:flex;gap:10px;align-items:baseline}
.bl .top1 .what{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:650}
.bl .top1 .amt{font-weight:800;white-space:nowrap}
.bl .in1{color:var(--ok)}
.bl .sub{color:var(--ink-2);font-size:.82rem}
.bl .sug{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--surface)}
.bl .sug span{flex:1;min-width:180px;font-size:.9rem}
.bl .sug span small{display:block;color:var(--ink-2);font-size:.8rem}
.bl .sug .btn.link{white-space:normal;text-align:left;justify-content:flex-start;max-width:100%;padding:4px .2rem;min-height:36px}
.bl .more{margin-top:8px}
.boxes .row{min-height:54px}
.boxes .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:750;background:var(--surface);color:var(--ink-2)}
.drill{padding:4px 14px 10px;border-top:0;font-size:.86rem}
.boxes .drill{padding-left:54px}
.boxes .row.b5{background:var(--surface)}
.boxes .row.b5 .amt{font-size:1.1rem}
.drill div{display:flex;gap:10px;padding:5px 0;border-top:1px dashed var(--line-2)}
.drill div span{flex:1;min-width:0;overflow-wrap:anywhere}
.drill div b{white-space:nowrap}
.drill .kv2,.drill .two{border-top:0}
.drill .kv2{display:block;padding:0}
.drill .two{padding:0}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl td,.tbl th{padding:7px 4px;border-top:1px solid var(--line-2);text-align:left;vertical-align:top}
.tbl th{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-top:0}
.tbl td.r,.tbl th.r{text-align:right;white-space:nowrap}
.tbl tr.tot td{font-weight:800;border-top:2px solid var(--line)}
.tbl tr.sub td{font-weight:700}
.tbl tr.gh td{padding-top:16px;border-top:0;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tbl tr:first-child.gh td{padding-top:4px}
.mb{margin-bottom:10px}.mt{margin-top:8px}
.ctl{display:flex;flex-wrap:wrap;gap:0 12px;align-items:end;margin:0 0 12px}
.ctl .f{margin-top:0}
.ctl .chips{flex-basis:100%}
.f.day{width:172px}
.sure{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.sure > span{font-weight:650;font-size:.92rem}
.qtrs .qtr{padding:12px 14px;border-top:1px solid var(--line-2)}
.qtrs .qtr:first-child{border-top:0}
.qtr .qh{display:flex;gap:8px;align-items:center}
.qtr .qh .tag-o{margin-left:0}
.qtr.later{color:var(--ink-3)}
.qtr .figs{margin-top:8px}
.qtr .drill{padding:2px 0 0}
.kv2{margin-top:10px}
.kv2 > div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line-2);font-size:.92rem}
.kv2 > div span{flex:1;min-width:0}
.kv2 > div b{white-space:nowrap}
.kv2 > div.tot{font-weight:800;border-top:2px solid var(--line)}
.prow{flex-wrap:wrap}
.prow .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.prow .tick{margin-top:0;font-size:.9rem}
.codebox{padding:8px 14px}
.audit{margin-top:10px}
.audit > div{display:grid;gap:1px;padding:8px 0;border-top:1px solid var(--line-2)}
.audit small{color:var(--ink-2);font-size:.8rem}
.audit span{font-size:.92rem;overflow-wrap:anywhere}
.row .amt.bad{color:var(--bad)}
.two-col > div + div{margin-top:12px}
@media print{.top,.tabs,.strip,.fab,.actions,.crumb button,.chips{display:none !important}main{padding:0;max-width:none}body{background:#fff;color:#000}.card,.rows{border-color:#ccc}}

/* ---------- laptop and desktop: the desktop Office's frame ---------- */
@media (min-width:1024px){
  :root{--dk-accent:#087F83;--dk-paper:#FFFFFF;--dk-panel:#FFFFFF;--dk-ink:#202D35;--dk-2:#60717C;--dk-rule:#E4E9EC;--dk-field:#F5F8F9}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dk-accent:#3FB8BC;--dk-paper:#181D23;--dk-panel:#1E252C;--dk-ink:#EEF3F5;--dk-2:#AEBDC6;--dk-rule:#333F48;--dk-field:#222B32}}
  :root[data-theme="dark"]{--dk-accent:#3FB8BC;--dk-paper:#181D23;--dk-panel:#1E252C;--dk-ink:#EEF3F5;--dk-2:#AEBDC6;--dk-rule:#333F48;--dk-field:#222B32}
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{--ink:var(--dk-ink);--ink-2:var(--dk-2);--ink-3:var(--dk-2);--paper:var(--dk-paper);--panel:var(--dk-panel);--surface:var(--dk-field);--line:var(--dk-rule);--line-2:var(--dk-rule);--link:var(--dk-accent);--cur:var(--dk-accent);--page:Arial,"Archivo",system-ui,sans-serif}
  body{font-size:14px}
  .top{background:#0E0D15;position:static}
  .top-row{grid-template-columns:minmax(0,1fr) auto;height:96px;max-width:1320px;margin:0 auto;padding:0 32px}
  .top-row > .ib,.top-row > span:last-child{display:none}
  .top .mid{align-items:flex-start}
  .top .wm{font-size:38.4px;line-height:1.45}
  .top .tag{display:block;margin:-15px 0 0 75px;font-family:"Archivo",system-ui,sans-serif;font-size:13.6px;color:#A3A6B8;white-space:nowrap}
  .acct{display:flex;align-items:center;gap:10px;color:#F3F4F8;font-size:13px;font-family:Arial,sans-serif}
  .acct .av{display:grid;place-items:center;width:34px;height:34px;border:1px solid #52525E;border-radius:50%;font-size:14px}
  .acct .wh{display:grid;line-height:1.35}
  .acct .wh small{font-size:11px;color:#B8BCC7}
  .strip{display:block;background:var(--dk-paper);border-bottom:1px solid var(--dk-rule)}
  .strip-in{display:flex;align-items:center;gap:26px;max-width:1320px;margin:0 auto;padding:0 32px;min-height:43px}
  .strip a{position:relative;display:block;padding:11px 0;color:var(--dk-2);text-decoration:none;white-space:nowrap;font-size:14px}
  .strip a:hover{color:var(--dk-ink)}
  .strip a[aria-current="page"]{color:var(--dk-accent)}
  .strip a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--dk-accent)}
  .strip .home{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--dk-rule);border-radius:8px;color:var(--dk-ink);margin-right:-6px}
  .strip .home svg{width:18px;height:18px}
  .strip .out{margin-left:auto;font-size:13px}
  main{max-width:1320px;padding:20px 32px 48px}
  .tabs{display:none}
  .fab{bottom:28px;right:32px}
  .toast{bottom:28px}
  .crumb{margin-left:-12px}
  .crumb h1{font-size:18px;font-weight:700}
  h1{font-size:24px;font-weight:600;letter-spacing:-.02em}
  .intro{display:block;margin:2px 0 16px}
  .intro h1{font-size:26px;font-weight:500;letter-spacing:-.04em}
  .intro p{font-size:12.5px;color:var(--dk-2);margin-top:4px}
  .who{display:none}
  .card{border-radius:8px}
  .rows{border-radius:8px}
  .row{min-height:52px;padding:8px 12px}
  .row .pic{width:34px;height:34px}
  .home-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:start}
  .home-cols .grp:first-child,.home-cols .grp:nth-child(2){margin-top:4px}
  .narrow{max-width:760px}
  .mid{max-width:980px}
  .two-col > div > .card:first-child,.two-col > div > section:first-child,.two-col > div + div{margin-top:0}
  .two-col{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0 28px;align-items:start}
  .fig b{font-size:22px;font-weight:700}
  .btn{min-height:38px;font-size:14px}
  .in,.pk > button{min-height:38px;font-size:14px}
  .grp > h2,.h{font-size:11.5px;letter-spacing:.14em}
}
/* Rearrange the home (Joe, 5 Nov, as QuickBooks): a small button, then small arrows on each part's heading */
.home-top{display:flex;justify-content:flex-end;margin:14px 0 0}
.home-cols.arranging .grp > .rows{outline:1px dashed var(--line, #3a4170);outline-offset:4px;border-radius:10px}
.grp > h2 .arr{display:inline-flex;gap:4px;margin-left:12px;vertical-align:middle}
.arrb{width:28px;height:28px;border-radius:8px;border:1px solid var(--line, #3a4170);background:transparent;color:inherit;font-size:16px;line-height:1;cursor:pointer}
.arrb[disabled]{opacity:.3;cursor:default}
/* the accountant's adjustments (Joe, 5 Nov) */
.adj-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.adj.rev{opacity:.6}
.adj-t{width:100%;border-collapse:collapse;margin-top:8px;font-size:.92rem}
.adj-t td{padding:6px 4px;border-top:1px solid var(--line, #2a3050)}
.adj-t th{padding:4px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left}
.adj-t th:nth-child(2),.adj-t th:nth-child(3){text-align:right}
.adj-t td:nth-child(2),.adj-t td:nth-child(3){text-align:right;white-space:nowrap;width:24%}
#adjTotal.bad{color:var(--bad, #ff6b6b)}
.tick.sub{margin:4px 0 0 30px;font-size:.88rem}
/* payroll: a pay run's lines (kind, hours, rate, or an amount) */
.pl{display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr auto;gap:6px;align-items:center;margin-bottom:6px}
.pl .money{display:flex}.pl .in{min-width:0;width:100%}
@media(max-width:560px){.pl{grid-template-columns:1fr 1fr 1fr auto}.pl .plk{grid-column:1/-1}}

/* the cash-flow forecast's graph (pages/cash.js) */
.cf-wrap{position:relative}.cf-wrap svg{display:block;overflow:visible}.cf-hit{fill:transparent;cursor:pointer}.cf-grid{stroke:var(--line-2);stroke-width:1}.cf-lab{fill:var(--ink-2)}.cf-zero{stroke:var(--bad);stroke-width:1.5;stroke-dasharray:5 4}
.cf-line{fill:none;stroke:var(--cur);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.cf-dot{fill:var(--cur);stroke:var(--panel);stroke-width:2}.cf-dot.neg{fill:var(--bad)}.cf-cross{stroke:var(--ink-3);stroke-width:1}
.cf-tip{position:absolute;pointer-events:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 8px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15)}