/* Manager 24 — workspace.
   One scroll container (.thread). Everything else is fixed in the shell, which
   is the single biggest source of broken mobile chat layouts. */

:root{
  --ink:#eef1f6; --ink-2:#98a2b3;
  /* #6f7987 measured 3.9:1 on the raised surface — under the 4.5:1 floor,
     and it is only ever used at 10-13px, where the large-text exemption
     does not apply. This clears 4.5:1 on all three surfaces. */
  --ink-3:#8c95a4;
  --bg:#0b0e13; --rail:#0f141c; --surface:#12161d; --raised:#171c25; --line:rgba(255,255,255,.08);
  --line-hi:rgba(255,255,255,.14);
  --brand:#4d7cfe; --brand-fill:#2563eb; --mint:#2dd4a7; --amber:#fbbf24; --danger:#f4696b;
  --r:14px;
  --kb:0px;                 /* software keyboard inset, set from visualViewport */
  --ease:cubic-bezier(.2,.8,.2,1);
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
/* a display rule on a class beats the [hidden] UA rule, which is how a
   'hidden' full-screen overlay carries on swallowing every tap */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;
}
h1,h2,h3,b,strong{font-family:"Manrope","Inter",system-ui,sans-serif;letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.tnum{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- shell */
.app{
  display:grid;
  /* An auto grid column sizes to the widest item's MIN-content, which a single
     nowrap label in the top bar or a tab label can push past the viewport — and
     then every row inherits that width and the whole app scrolls sideways.
     Pinning the column to minmax(0,1fr) makes overflow the item's problem. */
  grid-template-columns:minmax(0,1fr);
  /* Rows are assigned explicitly below. Relying on source order breaks the
     moment a row is hidden: the remaining children shift up a track, the pane
     lands on an `auto` row, and the tab bar falls off the bottom of the screen. */
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  width:100%;
  /* svh first as the fallback, dvh second so it wins where supported:
     written the other way round the app is permanently sized to the small
     viewport and leaves a dead band under the tab bar once the URL bar goes. */
  height:100svh;height:100dvh;
  /* the keyboard inset is padding on a top-anchored root: applying it as a
     transform on the bottom-anchored composer makes the composer move its own
     top while iOS is still animating, which reads as a jump */
  padding-bottom:var(--kb);
  padding-top:var(--sat);
  transition:padding-bottom .16s linear;
}
.app>*{min-width:0}
.topbar{grid-row:1}
.offline{grid-row:2}
.pane{grid-row:3}
.composer{grid-row:4}
.tabbar{grid-row:5}

/* ---------------------------------------------------------------- topbar */
.topbar{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid var(--line);background:var(--bg);min-height:52px;
}
.topbar .who{margin-right:auto;min-width:0;line-height:1.15}
.topbar .who b{display:block;font-size:.96rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .who span{display:block;font-size:.72rem;color:var(--ink-3)}
.icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--ink-2);flex:none}
.icon:hover{background:#ffffff0d;color:var(--ink)}
.setup{
  display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;color:var(--brand);
  border:1px solid color-mix(in srgb,var(--brand) 34%,transparent);
  background:color-mix(in srgb,var(--brand) 12%,transparent);
  padding:5px 10px;border-radius:999px;white-space:nowrap;
}
.offline{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber);
  font-size:.8rem;padding:7px 14px;text-align:center}

/* ---------------------------------------------------------------- panes */
.pane{min-height:0}
.thread{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:auto;scrollbar-width:thin}
.thread-inner{width:min(100% - 32px,48rem);margin:0 auto;padding:18px 0 4px}
.thread-spacer{height:0}
.sheet{overflow-y:auto;overscroll-behavior:contain}
.sheet-inner{width:min(100% - 24px,58rem);margin:0 auto;padding:16px 0 28px}
.sheet-h{font-size:1.1rem;margin:0 0 14px}

/* ---------------------------------------------------------------- turns */
.turn{margin-bottom:20px;scroll-margin-top:12px}
.turn.user{display:flex;justify-content:flex-end}
.turn.user .bubble{
  background:var(--raised);border:1px solid var(--line);border-radius:16px 16px 4px 16px;
  padding:10px 14px;max-width:min(100%,34rem);white-space:pre-wrap;overflow-wrap:anywhere;
}
/* the assistant gets no bubble: full-width text reads better and leaves the
   invoice card as the only boxed thing in the thread, which is the point */
.turn.bot .body{white-space:pre-wrap;overflow-wrap:anywhere;contain:layout style}
.turn.bot .body a{color:var(--brand);text-decoration:underline}
.turn .role{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--ink-3);margin-bottom:6px}
.turn .role .dot{width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--brand),var(--mint))}
.turn .acts{display:flex;gap:4px;margin-top:9px}
.turn .acts button{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--ink-3);
  padding:5px 9px;border-radius:8px}
.turn .acts button:hover{background:#ffffff0d;color:var(--ink)}
.turn .acts svg{width:14px;height:14px}
.cursor::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;
  background:var(--brand);vertical-align:-.12em;animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor::after{animation:none}}
.working{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:.84rem;margin-top:8px}
.working .spin{width:13px;height:13px;border:2px solid var(--line-hi);border-top-color:var(--brand);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .working .spin{animation:none;border-top-color:var(--line-hi)}
  .skel{animation:none}
}
.errline{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--danger) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 34%,transparent);font-size:.85rem}
.errline button{margin-left:auto;font-weight:600;color:var(--ink)}

/* ---------------------------------------------------------------- cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  margin-top:12px;overflow:hidden}
.card .c-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.card .c-top b{font-size:.92rem}
.card .tag{font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;background:#ffffff12;color:var(--ink-2)}
.card .tag.draft{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.card .tag.paid{background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--mint)}
.card .c-no{margin-left:auto;font-size:.78rem;color:var(--ink-3)}
.card .c-rows{padding:4px 14px}
.li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .n{font-size:.9rem;min-width:0;overflow-wrap:anywhere}
.li .a{font-size:.9rem;text-align:right;font-variant-numeric:tabular-nums}
.li .q{grid-column:1;font-size:.76rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.card .c-sum{padding:10px 14px;border-top:1px solid var(--line);display:grid;gap:5px}
.card .c-sum div{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink-2)}
.card .c-sum div.total{font-size:1.12rem;color:var(--ink);font-weight:700;margin-top:3px;
  font-family:"Manrope","Inter",sans-serif}
.card .c-sum span{font-variant-numeric:tabular-nums}
.card .c-act{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.card .c-note{padding:0 14px 12px;font-size:.78rem;color:var(--amber)}
.skel{height:14px;border-radius:5px;background:linear-gradient(90deg,#ffffff0a,#ffffff16,#ffffff0a);
  background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}

/* ---------------------------------------------------------------- empty */
.empty{display:grid;gap:14px;padding:clamp(12px,3.5vh,34px) 0 0;text-align:left;
  max-width:48rem;margin-inline:auto}
@media (min-height:620px){
  .empty{min-height:min(60vh,520px);align-content:center;justify-items:center;text-align:center}
  .empty .egrid{width:100%;text-align:left}
}
.empty .mark{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand)}
.empty .mark svg{width:22px;height:22px}
.empty h2{font-size:clamp(1.3rem,4.4vw,1.7rem);margin:0;line-height:1.15;letter-spacing:-.01em}
.empty p{margin:0;color:var(--ink-2);font-size:.94rem}
/* Two columns above phone width so the examples stay on one screen. Three
   stacked full-width buttons pushed the last one below the fold, which is
   where the "upload your own invoice" route was living unseen. */
.egrid{display:grid;gap:9px;grid-template-columns:1fr}
@media (min-width:600px){.egrid{grid-template-columns:1fr 1fr}}
.eg.wide{grid-column:1/-1}
.eg{display:flex;align-items:flex-start;gap:11px;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  transition:border-color .18s,transform .18s var(--ease)}
.eg:hover{border-color:var(--line-hi);transform:translateY(-1px)}
.eg svg{width:17px;height:17px;color:var(--brand);margin-top:1px;flex:none}
.eg b{display:block;font-size:.88rem;font-weight:600}
.eg span{display:block;font-size:.8rem;color:var(--ink-3);margin-top:2px}

/* ---------------------------------------------------------------- composer */
.composer{padding:8px 12px calc(6px + var(--sab));background:var(--bg);
  border-top:1px solid var(--line)}
:root.kb-open .composer{padding-bottom:6px}   /* home indicator is hidden behind the keyboard */
.composer>*{width:min(100% - 8px,48rem);margin-inline:auto}
.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;font-size:.79rem;color:var(--ink-2);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.chips button:hover{border-color:var(--line-hi);color:var(--ink)}
.attach{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-2);
  border:1px solid var(--line);border-radius:10px;padding:7px 10px;margin-bottom:8px}
.attach svg{width:15px;height:15px;flex:none}
.attach span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach button{margin-left:auto;font-size:1.1rem;line-height:1;color:var(--ink-3);padding:0 4px}
/* A ring rather than a border: it costs no layout, so the shell can change
   radius without the text reflowing, and it reads as a surface rather than a
   form field. A bordered box is what people are used to filling in — the one
   thing this product exists to stop them doing. */
.box{display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border-radius:20px;padding:10px 12px 8px;
  box-shadow:0 0 0 1px var(--line),0 6px 20px -14px #000c;
  transition:box-shadow .18s}
.box:focus-within{box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 55%,var(--line)),
  0 8px 26px -14px #000c}
.box textarea{
  width:100%;min-width:0;resize:none;border:0;outline:0;background:none;color:var(--ink);
  font-family:inherit;font-size:1.0625rem;line-height:1.5;padding:2px 0;max-height:40vh;
}
.box textarea::placeholder{color:var(--ink-3)}
.tools{display:flex;align-items:center;gap:6px}
.tools .spacer{flex:1}
.plus{display:inline-flex;align-items:center;gap:7px;width:auto;height:32px;padding:0 10px;
  border-radius:8px;font-size:.78rem;color:var(--ink-2)}
.plus svg{width:16px;height:16px;flex:none}
.plus span{white-space:nowrap}
.plus{flex:none;min-width:0}
.plus:hover{background:#ffffff0f;color:var(--ink)}
@media (max-width:330px){.plus span{display:none}.plus{width:32px;padding:0}}
.send{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;flex:none;
  background:var(--brand-fill);color:#fff;transition:opacity .18s,background .18s}
.send[disabled]{opacity:.35}
.send .s-stop{display:none}
:root.streaming .send .s-send{display:none}
:root.streaming .send .s-stop{display:block;fill:currentColor;stroke:none}
:root.streaming .send{background:var(--ink-3)}
.plus{height:36px}
.fineprint{margin:7px 0 0;font-size:.69rem;color:var(--ink-3);text-align:center}

/* Sits in the same grid row as the thread, pinned to its bottom edge, so it
   lands just above the composer. Positioned absolutely with no offsets — which
   is what it had — its containing block is the whole page and it renders under
   the top bar instead. */
.jump{grid-row:3;align-self:end;justify-self:center;margin-bottom:12px;z-index:3;
  display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;
  background:var(--raised);border:1px solid var(--line-hi);border-radius:999px;
  padding:7px 13px;box-shadow:0 10px 30px -12px #000c}
.jump svg{width:14px;height:14px}

/* ---------------------------------------------------------------- tabbar */
.tabbar{display:flex;border-top:1px solid var(--line);background:var(--bg);
  padding-bottom:var(--sab);transition:height .16s linear}
/* The keyboard is already eating the space, but display:none makes the
   layout jump 52px the instant the inset crosses the threshold, while the
   keyboard is still animating. Collapsing the height moves with it. */
:root.kb-open .tabbar{height:0;overflow:hidden;padding-bottom:0;border-top-color:transparent}
.tabbar button{flex:1;display:grid;justify-items:center;gap:3px;padding:8px 4px 7px;color:var(--ink-3)}
.tabbar button span{font-size:.66rem;font-weight:600}
.tabbar button[aria-pressed="true"]{color:var(--brand)}
.railtop,.railsec,.railfoot{display:none}
@media (min-width:900px){
  .tabbar button{flex:0 0 auto;display:flex;align-items:center;flex-direction:row;
    padding:10px 18px;gap:8px}
  .tabbar button span{font-size:.82rem}
}

/* ---------------------------------------------------------------- insights */
.range{display:flex;gap:5px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}
.range::-webkit-scrollbar{display:none}
.range button{flex:none;font-size:.79rem;color:var(--ink-3);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px}
.range button[aria-pressed="true"]{color:var(--ink);border-color:var(--line-hi);background:#ffffff0d}
.sumbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.sumbar div{background:var(--surface);padding:13px}
.sumbar em{display:block;font-style:normal;font-size:.7rem;color:var(--ink-3);margin-bottom:3px}
.sumbar b{display:block;font-size:clamp(1.05rem,4.4vw,1.4rem);font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.kgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px}
.kpi em{display:block;font-style:normal;font-size:.72rem;color:var(--ink-3)}
.kpi b{display:block;font-size:1.72rem;font-weight:700;margin:5px 0 2px;font-variant-numeric:tabular-nums;
  font-family:"Manrope","Inter",sans-serif}
.kpi .d{font-size:.74rem;color:var(--ink-3)}
.kpi .d.up{color:var(--mint)} .kpi .d.down{color:var(--danger)}
.kpi.span2{grid-column:1/-1}
.kpi svg.spark{width:100%;height:46px;margin-top:10px;overflow:visible}
.kpi svg.chart{width:100%;height:150px;margin-top:12px;display:block}
.chartx{display:flex;justify-content:space-between;font-size:.68rem;color:var(--ink-3);margin-top:5px}
.chart .ax{stroke:var(--line);stroke-width:1}
.chart text,.spark text{fill:var(--ink-3);font-size:10px;stroke:none;font-family:inherit}
.rank{display:grid;gap:9px;margin-top:12px}
.rank .r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;font-size:.85rem}
.rank .r>span:first-child{min-width:0;overflow-wrap:anywhere}
.rank .bar{grid-column:1/-1;height:4px;border-radius:2px;background:#ffffff10;overflow:hidden}
.rank .bar i{display:block;height:100%;border-radius:2px;background:var(--brand)}
.rank .r b{font-variant-numeric:tabular-nums;font-weight:600}
.dlist{display:grid;gap:8px;margin-top:4px}
.drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;text-align:left;width:100%}
.drow .c{font-size:.9rem;font-weight:600;min-width:0;overflow-wrap:anywhere}
.drow .s{font-size:.74rem;color:var(--ink-3)}
.drow .t{font-size:.95rem;font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.drow .st{font-size:.72rem;text-align:right;color:var(--ink-3)}
.blank{border:1px dashed var(--line-hi);border-radius:var(--r);padding:26px 18px;text-align:center;
  color:var(--ink-3);font-size:.88rem}
.blank b{display:block;color:var(--ink);font-size:.98rem;margin-bottom:5px}
.blank .btn{margin-top:14px}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
  background:var(--brand-fill);color:#fff;font-size:.86rem;font-weight:600;
  border-radius:10px;padding:10px 15px;border:1px solid transparent}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--line-hi);background:#ffffff08;filter:none}
.btn.small{padding:7px 11px;font-size:.8rem}
.btn svg{width:15px;height:15px}

/* ---------------------------------------------------------------- boot */
.boot{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:var(--bg);z-index:20;
  padding-bottom:calc(24px + var(--kb));overflow-y:auto}
.boot-card{width:min(100%,25rem);text-align:center}
.boot .mark{width:52px;height:52px;margin:0 auto 16px}
.boot .mark svg{width:52px;height:52px;stroke:none}
.boot h1{font-size:1.5rem;margin:0 0 8px}
.boot p{color:var(--ink-2);margin:0 0 20px;font-size:.92rem}
.boot-actions{display:grid;gap:9px}
.recover{display:grid;gap:9px;margin-top:14px}
.recover input{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:12px;color:var(--ink);font:inherit;text-align:center;letter-spacing:.12em;text-transform:uppercase}
.err{color:var(--danger);font-size:.82rem;margin:0}

/* ---------------------------------------------------------------- dialog */
dialog{border:0;padding:0;background:var(--surface);color:var(--ink);border-radius:16px;
  width:min(100% - 28px,32rem);box-shadow:0 30px 70px -20px #000e;
  /* --kb is applied to .app, and a dialog is not inside it: without this the
     recovery-code field sits underneath the keyboard with no way to scroll. */
  max-height:calc(82dvh - var(--kb));margin-bottom:calc(var(--kb) + 14px)}
dialog::backdrop{background:#000a}
.dlg-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.dlg-head b{font-size:1rem;margin-right:auto}
.dlg-body{padding:16px;overflow-y:auto;font-size:.9rem;line-height:1.6}
.dlg-body p{margin:0 0 12px;color:var(--ink-2)}
.dlg-body .code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.12rem;letter-spacing:.14em;text-align:center;background:var(--bg);
  border:1px solid var(--line-hi);border-radius:10px;padding:14px;margin:12px 0;
  user-select:all;word-break:break-all}
.dlg-body label{display:block;font-size:.78rem;color:var(--ink-3);margin:12px 0 5px}
.dlg-body input,.dlg-body select{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:10px;color:var(--ink);font:inherit}
.dlg-body .row{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.dlg-body .row .btn{min-width:0}
.dlg-body .row .btn{flex:1}
.fieldlist{display:grid;gap:7px;margin:10px 0}
.fieldlist .f{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.fieldlist .f b{font-size:.84rem;font-weight:600}
.fieldlist .f em{font-style:normal;font-size:.74rem;color:var(--ink-3);grid-column:1}
.fieldlist .f .st{font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;background:#ffffff10;color:var(--ink-3);grid-row:1/3}
.fieldlist .f .st.guessed{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}


/* ---------------------------------------------------- desktop: a left rail */
/* The tab bar is a phone instrument. On a laptop it wastes the bottom of the
   screen and puts navigation as far from the pointer as it can get, so above
   900px the same markup is laid out as a rail. No second DOM, no duplicate
   state to keep in sync. */
@media (min-width:900px){
  .app{
    grid-template-columns:232px minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr) auto;
  }
  /* Rail, built to the shape every reference uses: brand, primary action,
     navigation, a section label, and the workspace pinned to the bottom. */
  .tabbar{grid-column:1;grid-row:1 / -1;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:2px;height:auto;padding:14px 12px 12px;
    border-top:0;border-right:1px solid var(--line);background:var(--rail)}
  .tabbar button{flex:none;display:flex;flex-direction:row;align-items:center;
    justify-content:flex-start;gap:11px;height:38px;padding:0 11px;border-radius:10px;
    font-size:.9rem;font-weight:500;color:var(--ink-2);transition:background .14s,color .14s}
  .tabbar button span{font-size:.9rem;font-weight:500}
  .tabbar button svg{width:18px;height:18px;margin:0;flex:none}
  .tabbar button:hover{background:#ffffff08;color:var(--ink)}
  .tabbar button[aria-pressed="true"]{background:#ffffff12;color:var(--ink);font-weight:600}
  .tabbar button[aria-pressed="true"] span{font-weight:600}

  .railtop{display:block;padding:2px 4px 12px}
  .railbrand{display:flex;align-items:center;gap:9px;font-size:.97rem;letter-spacing:-.02em}
  .railbrand .mk{width:24px;height:24px;flex:none}
  .railnew{display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;
    margin-top:12px;height:38px;padding:0 11px;border-radius:10px;font-size:.9rem;font-weight:600;
    color:var(--ink);border:1px solid var(--line-hi);background:transparent;transition:background .14s}
  .railnew:hover{background:#ffffff0d}
  .railnew svg{width:16px;height:16px;flex:none}

  .railsec{display:block;margin:18px 0 6px;padding:0 11px;font-size:.7rem;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

  .railfoot{display:flex;align-items:center;gap:9px;margin-top:auto;padding:10px 11px 2px;
    border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2);min-width:0}
  .rav{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
    font-size:.74rem;font-weight:700;color:#fff;
    background:linear-gradient(135deg,var(--brand),var(--mint))}
  .rnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* the brand now lives in the rail, so the top bar stops repeating it */
  .topbar .who{display:none}
  .topbar{justify-content:flex-end;gap:8px}
  .topbar{grid-column:2;grid-row:1}
  .offline{grid-column:2;grid-row:2}
  .pane{grid-column:2;grid-row:3}
  .composer{grid-column:2;grid-row:4}
  .jump{grid-column:2;grid-row:3}
  #menu{display:none}
}

/* -------------------------------------------------- the invoice, editable */
.c-top .tag{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid currentColor}
.tag.draft{color:var(--ink-3)}
.tag.approved{color:var(--brand)}
.tag.paid{color:var(--mint)}
.tag.cancelled{color:var(--danger)}

/* An amount you can tap and change. It has to look editable before it is
   touched, or nobody discovers it — a dotted underline is the cheapest signal
   that reads as "field" without drawing a box around every number. */
.ed{border-bottom:1px dashed color-mix(in srgb,var(--ink-3) 70%,transparent);
  cursor:text;border-radius:3px;padding:0 1px}
.ed:hover{background:#ffffff0f;border-bottom-color:var(--brand)}
.ed:focus{outline:2px solid var(--brand);outline-offset:1px;border-bottom-color:transparent}
.ed[contenteditable="true"]{min-width:2.2em;display:inline-block}
.c-act{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.c-act .grow{flex:1}
.btn.primary{background:var(--brand-fill);color:#fff;border-color:transparent}
.btn.primary:hover{filter:brightness(1.08)}
.saving{font-size:.74rem;color:var(--ink-3)}

/* the send sheet */
.sendsheet{display:grid;gap:8px}
.sendsheet a,.sendsheet button{display:flex;align-items:center;gap:11px;width:100%;
  text-align:left;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:.92rem;color:var(--ink);background:var(--surface)}
.sendsheet a:hover,.sendsheet button:hover{border-color:var(--line-hi);background:#ffffff0d}
.sendsheet svg{width:19px;height:19px;flex:none;color:var(--ink-2)}
.sendsheet small{display:block;color:var(--ink-3);font-size:.76rem;margin-top:2px}


/* ------------------------------------------------ touch: real tap targets */
/* Measured on Galaxy S24, Pixel 7, A55, iPhone 15 Pro, SE and iPad Mini: the
   icon buttons were 38px, the send button 34px and the setup pill 30px tall.
   The floor on both platforms is 44px. Guarded to coarse pointers so the
   desktop keeps its tighter proportions. */
@media (pointer:coarse){
  .icon{width:44px;height:44px}
  .send{width:44px;height:44px;border-radius:12px}
  .plus{height:44px;padding:0 12px}
  .setup{min-height:44px}
  .tabbar button{min-height:52px}
  .btn.small{min-height:44px}
  .box{padding:10px 12px 8px;gap:4px}
  .eg{min-height:56px}
  .range button{min-height:44px}
  .ed{padding:2px 6px;display:inline-block;min-height:28px}
}

/* ---------------------------------------------------- documents & people
   The shape both reference dashboards agree on: money first, then filter
   chips carrying their own counts, then the list. Status has one colour
   language and it is used everywhere — pill, amount, chip dot. */
.sheet-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.sheet-top>div:first-child{margin-right:auto;min-width:0}
.sheet-top .sheet-h{margin:0}
.sheet-sub{margin:2px 0 0;font-size:.8rem;color:var(--ink-3)}

.sumcards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:14px}
.sc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px}
.sc em{display:block;font-style:normal;font-size:.74rem;color:var(--ink-3)}
.sc b{display:block;font-size:1.35rem;font-weight:700;margin:4px 0 2px;
  font-family:"Manrope","Inter",sans-serif;overflow-wrap:anywhere}
.sc span{font-size:.72rem;color:var(--ink-3)}
/* the two that carry meaning get tinted; the neutral ones stay quiet, so the
   colour still means something when you glance at the row */
.sc-approved{border-color:color-mix(in srgb,var(--amber) 34%,var(--line))}
.sc-approved b{color:var(--amber)}
.sc-paid{border-color:color-mix(in srgb,var(--mint) 30%,var(--line))}
.sc-paid b{color:var(--mint)}

.listbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin-right:auto}
.fchip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 12px;transition:border-color .15s,color .15s}
.fchip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.fchip.t-draft::before{background:var(--ink-3)}
.fchip.t-approved::before{background:var(--amber)}
.fchip.t-paid::before{background:var(--mint)}
.fchip.t-all::before{display:none}
.fchip i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:.76rem}
.fchip:hover{border-color:var(--line-hi);color:var(--ink)}
.fchip[aria-pressed="true"]{color:var(--ink);border-color:var(--line-hi);background:#ffffff0f}
.fchip[aria-pressed="true"] i{color:var(--ink-2)}

.find{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:0 11px;height:38px;min-width:min(100%,250px);flex:1 1 220px;max-width:340px}
.find:focus-within{border-color:var(--line-hi)}
.find svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.find input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;font-size:.88rem;
  outline:none;padding:0}
.find input::-webkit-search-cancel-button{filter:invert(.6)}

/* Documents as cards rather than table rows: a table needs seven columns to
   say what four lines of a card say, and it cannot survive a phone. */
.dgrid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.dcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px 12px;text-align:left;cursor:pointer;
  transition:border-color .16s,transform .16s var(--ease)}
.dcard:hover{border-color:var(--line-hi);transform:translateY(-1px)}
.dc-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.dc-no{font-size:.73rem;color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums}
.dc-menu{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;color:var(--ink-3);flex:none;
  margin-right:-6px}
.dc-menu:hover,.dc-menu[aria-expanded="true"]{background:#ffffff12;color:var(--ink)}
.dc-menu svg{width:16px;height:16px;fill:currentColor;stroke:none}
.dc-amt{display:block;font-size:1.3rem;font-weight:700;font-family:"Manrope","Inter",sans-serif;
  letter-spacing:-.02em;overflow-wrap:anywhere}
.tone-green{color:var(--mint)} .tone-amber{color:var(--amber)} .tone-grey{color:var(--ink)}
.dc-foot{display:flex;align-items:baseline;gap:10px;margin-top:9px;font-size:.78rem}
.dc-cus{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-when{color:var(--ink-3);margin-left:auto;flex:none}

.pill-grey,.pill-amber,.pill-green{font-size:.68rem;font-weight:650;padding:3px 9px;border-radius:999px;
  white-space:nowrap}
.pill-grey{background:#ffffff12;color:var(--ink-2)}
.pill-amber{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.pill-green{background:color-mix(in srgb,var(--mint) 16%,transparent);color:var(--mint)}

/* the row menu is where anything destructive lives, which is the one thing
   every reference agreed on */
.rowmenu{position:absolute;top:38px;right:10px;z-index:5;min-width:150px;padding:5px;
  background:var(--raised);border:1px solid var(--line-hi);border-radius:11px;
  box-shadow:0 18px 40px -18px #000b;display:flex;flex-direction:column;gap:1px}
.rowmenu button{text-align:left;font-size:.84rem;padding:8px 10px;border-radius:7px;color:var(--ink-2)}
.rowmenu button:hover{background:#ffffff0f;color:var(--ink)}
.rowmenu .danger{color:var(--danger)}
.rowmenu .danger:hover{background:color-mix(in srgb,var(--danger) 14%,transparent)}
.btn.danger{background:var(--danger);color:#fff;border-color:transparent}
.btn.ghost.danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 36%,transparent)}
.btn.ghost.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}

.skelcard{height:104px}
.skelcard .skel{height:100%;border-radius:10px}

/* ---- customers ---- */
.clist{display:grid;gap:8px}
.crow{display:grid;grid-template-columns:auto minmax(0,1.4fr) auto auto;gap:12px;align-items:center;
  width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;transition:border-color .16s}
.crow:hover{border-color:var(--line-hi)}
.av{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;flex:none;
  font-size:.82rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand),var(--mint))}
.cn{min-width:0}
.cn b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn i{display:block;font-style:normal;font-size:.76rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm{text-align:right}
.cm b{display:block;font-size:.9rem}
.cm i{display:block;font-style:normal;font-size:.72rem;color:var(--ink-3)}
.cowe{font-size:.74rem;color:var(--ink-3);white-space:nowrap}
.cowe.on{color:var(--amber);font-weight:600}
@media (max-width:560px){
  .crow{grid-template-columns:auto minmax(0,1fr) auto}
  .cowe{grid-column:2/-1;margin-top:-4px}
}

.cform{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.cform .fld:first-child,.cform .row{grid-column:1/-1}
.fld{display:grid;gap:4px;min-width:0}
.fld span{font-size:.74rem;color:var(--ink-3)}
.fld input{background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;color:var(--ink);font:inherit;font-size:.88rem;min-width:0}
.fld input:focus{outline:none;border-color:var(--line-hi)}
@media (max-width:520px){.cform{grid-template-columns:1fr}}

.cinv{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.cinv em{display:block;font-style:normal;font-size:.76rem;color:var(--ink-3);margin-bottom:8px}
.cir{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
  font-size:.83rem;padding:6px 0}
.cir span:first-child{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg-load{color:var(--ink-3);font-size:.86rem;padding:8px 0}
.dlg-card{margin-bottom:4px}

/* a mouse gets small controls; a finger needs the 44px floor */
@media (pointer:coarse){
  .fchip,.find,.crow{min-height:44px}
  .dc-menu{width:36px;height:36px}
  .rowmenu button{padding:11px 12px}
}

.rowmenu .rm-note{display:block;padding:8px 10px;font-size:.76rem;color:var(--ink-3);line-height:1.4}
.muted{color:var(--ink-3);font-size:.82rem}

.cskel{height:56px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.cskel .skel{height:100%}