/* TexArxs Work — the Books design tokens and components (copied from apps/books/assets/books.css), with Work additions at the end.
   Brand: navy accent and Inter, the same as the client documents (assets/invoice.css) and www.texarxs.com.
   Layout: fixed sidebar + sticky top bar + content column; tables and forms are the primary surfaces.
   Light is the default; dark is a full theme, not an inversion. */
@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Inter-Regular.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/Inter-Medium.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/Inter-SemiBold.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Inter-Bold.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-style:italic;font-display:swap;src:url(fonts/Inter-Italic.woff2) format("woff2")}
:root{
  --bg:#0e131b;--surface:#161d28;--surface-2:#1c2431;--raise:#252f3e;--line:#2a3547;--line-2:#3a4860;
  --text:#f1f4f9;--text-2:#c3cbd8;--text-3:#97a2b5;
  --accent:#8fb3ff;--accent-strong:#adc8ff;--accent-ink:#0b1430;--accent-soft:rgba(143,179,255,.16);
  --pos:#4fd29c;--pos-soft:rgba(79,210,156,.14);--neg:#ff8379;--neg-soft:rgba(255,131,121,.13);
  --warn:#f7c05c;--warn-soft:rgba(247,192,92,.14);--info:#7fb3ff;--info-soft:rgba(127,179,255,.14);
  --focus:#7cb7ff;--sidebar:#0b1018;
  --c-overview:#8fb3ff;--c-sales:#4fd29c;--c-purchases:#b79cff;--c-money:#6fb1ff;--c-reports:#ff8fbb;--c-people:#ffb07a;--c-settings:#a9b6c9;
  --u-texarxs:#8fb3ff;--u-maic:#3fd6c6;--u-packnpay:#ffa05c;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.22);
  --f-ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-code:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:10px;--sbw:244px;color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eef1f6;--surface:#ffffff;--surface-2:#f6f8fb;--raise:#e9edf3;--line:#dde3ec;--line-2:#c4cddb;
  --text:#0f1a2a;--text-2:#3b4860;--text-3:#5d6a80;
  --accent:#0e1f4d;--accent-strong:#16296b;--accent-ink:#ffffff;--accent-soft:rgba(29,78,216,.09);
  --pos:#0b7a50;--pos-soft:rgba(11,122,80,.10);--neg:#b42318;--neg-soft:rgba(180,35,24,.08);
  --warn:#8f5508;--warn-soft:rgba(180,110,10,.12);--info:#1d5fc1;--info-soft:rgba(29,95,193,.09);
  --focus:#1d5fc1;--sidebar:#0f1726;
  --c-overview:#1d4ed8;--c-sales:#0b7a50;--c-purchases:#6a3fd1;--c-money:#1d5fc1;--c-reports:#b8326c;--c-people:#b45309;--c-settings:#4a5a72;
  --u-texarxs:#1d4ed8;--u-maic:#0d7f75;--u-packnpay:#b4500f;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 2px 8px rgba(16,24,40,.06);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num,td.num,th.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mono{font-family:var(--f-code);font-size:.9em}
.muted{color:var(--text-3)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:8px 14px;z-index:999}
.skip:focus{left:0}

/* ── Shell ── */
.shell{display:grid;grid-template-columns:var(--sbw) 1fr;min-height:100%}
.sidebar{background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;color:#c9d1dd}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand-home{display:grid;gap:6px;text-decoration:none}
.brand-home img{display:block;width:140px;height:auto}
.brand span{font-size:11px;color:#8792a5}
.nav{padding:10px 8px;display:grid;gap:14px}
.nav h2{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#768196;margin:0 10px 4px;font-weight:600}
.nav a{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:6px;color:#c9d1dd;text-decoration:none;font-size:13px}
.nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav a[aria-current="page"]{background:rgba(214,169,69,.16);color:#f0c968;font-weight:600}

.sidebar-foot{margin-top:auto;padding:12px 16px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;display:grid;gap:8px}
.sidebar-foot .who b{display:block;color:#f1f4f8;font-size:13px}
.sidebar-foot .links{display:flex;gap:12px}
.sidebar-foot .ver{font-size:11px;color:rgba(255,255,255,.55)}.sidebar-foot .ver b{font-family:var(--f-num,monospace);font-weight:600;color:rgba(255,255,255,.8)}
.sidebar-foot .links a{color:#a6b0c0}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 24px;flex-wrap:wrap}
.topbar h1{font-size:17px;margin:0;font-weight:600}
.topbar .crumb{font-size:12px;color:var(--text-3)}
.topbar .tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.content{padding:22px 24px 48px;display:grid;gap:18px;align-content:start}
.env{font:600 10.5px var(--f-num);letter-spacing:.06em;background:var(--warn-soft);color:var(--warn);border-radius:4px;padding:2px 7px}

/* ── Business-unit switch ── */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:2px}
.seg a{padding:4px 10px;border-radius:5px;font-size:12px;color:var(--text-2);text-decoration:none}
.seg a[aria-current="true"]{background:var(--raise);color:var(--text);font-weight:600}

/* ── Panels, stats ── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.panel>header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.panel>header h2{font-size:14px;margin:0;font-weight:600}
.panel>.body{padding:16px}

.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.stat .k{font-size:12px;color:var(--text-3)}
.stat .v{font:600 20px/1.3 var(--f-num);font-variant-numeric:tabular-nums;margin-top:4px}
.stat .s{font-size:12px;color:var(--text-2);margin-top:2px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px}

/* ── Tables ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:600;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover td{background:var(--surface-2)}
/* Mandatory fields: an asterisk after the label of any required control that is in use */
.field:has(> :is(input,select,textarea):required:not(:disabled))>label::after{content:' *';color:var(--neg)}
.th-sort{all:inherit;display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;cursor:pointer}
th.num .th-sort{flex-direction:row-reverse}
.th-sort::after{content:'↕';opacity:.35;font-size:10px}
th[aria-sort=ascending] .th-sort::after{content:'↑';opacity:1}
th[aria-sort=descending] .th-sort::after{content:'↓';opacity:1}
.th-sort:hover,th[aria-sort] .th-sort{color:var(--text)}
.th-sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
tr.total td{font-weight:600;border-top:2px solid var(--line-2);background:var(--surface-2)}
tr.sub td{color:var(--text-2);font-size:13px}
td a{text-decoration:none}
.empty{padding:28px;text-align:center;color:var(--text-3)}

/* ── Status chips ── */
.chip{display:inline-block;font:600 11px/1.6 var(--f-ui);padding:0 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.chip.draft{background:var(--raise);color:var(--text-2);border-color:var(--line-2)}
.chip.issued,.chip.approved,.chip.posted{background:var(--info-soft);color:var(--info)}
.chip.paid{background:var(--pos-soft);color:var(--pos)}
.chip.part{background:var(--warn-soft);color:var(--warn)}
.chip.overdue,.chip.cancelled{background:var(--neg-soft);color:var(--neg)}
.chip.bu{background:var(--accent-soft);color:var(--accent)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:7px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);font:500 13px var(--f-ui);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--raise)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{background:var(--accent-strong)}
.btn.danger{color:var(--neg);border-color:var(--neg-soft);background:var(--neg-soft)}
.btn.small{padding:4px 10px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── Forms ── */
form.stack{display:grid;gap:16px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px 14px}
.field{display:grid;gap:5px;min-width:0}
.field label{font-size:12px;color:var(--text-2);font-weight:500}
.field .hint{font-size:11.5px;color:var(--text-3)}
input,select,textarea{font:14px var(--f-ui);color:var(--text);background:var(--surface-2);border:1px solid var(--line-2);border-radius:6px;padding:8px 10px;width:100%;min-width:0}
input[type=checkbox]{width:auto}
textarea{min-height:70px;resize:vertical}
input.num{text-align:right}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid var(--accent-soft);outline-offset:0}
.check{display:flex;align-items:center;gap:8px;font-size:13px}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0;min-width:0}
legend{font-size:12px;color:var(--text-2);padding:0 6px;font-weight:600}

/* ── Invoice lines editor ── */
.lines{display:grid;gap:8px}
.line{display:grid;grid-template-columns:minmax(0,1fr) 110px 80px 120px 120px 36px;gap:8px;align-items:start}
.line.head{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.line .amt{padding:8px 10px;font-family:var(--f-num);text-align:right;background:var(--raise);border-radius:6px}
.totals{display:grid;gap:4px;max-width:360px;margin-left:auto;font-size:13.5px}
.totals div{display:flex;justify-content:space-between;gap:16px}
.totals .grand{font-weight:700;font-size:15px;border-top:1px solid var(--line-2);padding-top:6px}

/* ── Notices ── */
.notice{border-radius:var(--r);padding:10px 14px;font-size:13.5px;border:1px solid transparent}
.notice.success{background:var(--pos-soft);color:var(--pos)}
.notice.error{background:var(--neg-soft);color:var(--neg)}
.notice.warn{background:var(--warn-soft);color:var(--warn)}
.notice.info{background:var(--info-soft);color:var(--info)}
.row-act form.inline,td form.inline{display:inline-block;margin-left:6px}
.inline-edit{display:flex;gap:6px;align-items:center}.inline-edit input{max-width:220px;padding:5px 8px}

/* ── Journal preview ── */
.journal td:first-child{width:36px;font:600 11px var(--f-num)}
.journal .dr td:first-child{color:var(--pos)}
.journal .cr td:first-child{color:var(--accent)}
.journal .cr td:nth-child(2){padding-left:28px}

/* ── Login ── */
.login{min-height:100%;display:grid;place-items:center;align-content:center;gap:24px;padding:24px}
.login-logo{display:block;width:180px;height:auto}
.login .panel{width:min(100%,380px)}
.qr{display:grid;place-items:center}.qr svg{max-width:100%;height:auto;border-radius:8px}
.codes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font-family:var(--f-code);font-size:16px;letter-spacing:.06em}
.codes li{padding:6px 10px;border:1px dashed var(--line);border-radius:var(--r)}

/* Invoice line fields: the small labels show only on phones (desktop has the column headings) */
.lc{display:contents}
.lc-t{display:none;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);font-weight:600}
/* Phones: the menu opens from a button in the brand bar */
.menu-toggle{display:none;margin-left:auto}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .content{grid-template-columns:minmax(0,1fr)}
  .menu-toggle{display:inline-flex}
  .sidebar:not(.open) .nav,.sidebar:not(.open) .sidebar-foot{display:none}
  .topbar .tools{width:100%}
  .seg{max-width:100%;overflow-x:auto}
  .sidebar{position:static;height:auto}
  .nav{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .content{padding:16px}
  .topbar{padding:10px 16px}
  .line{grid-template-columns:1fr 1fr}
  .line.head{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Printing (and Save as PDF): always light, letterhead on top, no controls */
.print-head{display:none}
@media print{
  :root,:root[data-theme]{--bg:#fff;--surface:#fff;--surface-2:#f4f4f5;--raise:#ececee;--line:#cfd3da;--line-2:#b4bac4;--text:#111;--text-2:#333;--text-3:#555;
    --accent:#111;--pos:#0f6b48;--neg:#a3221a;--warn:#7a4a08;--info:#1d4f9e;--pos-soft:transparent;--neg-soft:transparent;--warn-soft:transparent;--info-soft:transparent;--accent-soft:transparent;color-scheme:light}
  @page{margin:14mm 12mm}
  body{font-size:11.5px;background:#fff}
  .sidebar,.no-print,.topbar .tools,.skip,.btn,.notice:not(.info),nav.actions,nav.seg{display:none!important}
  .content form:not(:has(table)){display:none!important}   /* own rule: a browser without :has() drops only this line, not the one above */
  .shell{display:block}.main{display:block}.content{padding:0;display:block}
  .print-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:10px}
  .print-head img{height:30px;width:auto}
  .print-head p{margin:0;text-align:right;font-size:10.5px;color:#444}
  .topbar{position:static;display:block;border:0;padding:0 0 8px;background:none}
  .panel,.stat{box-shadow:none;break-inside:avoid-page}
  .panel:has(table){break-inside:auto}
  .table-wrap{overflow:visible}
  thead{display:table-header-group}
  tr{break-inside:avoid}
  a{color:inherit;text-decoration:none}
  .content>*+*{margin-top:10px}
}
.hint{font-size:12px;color:var(--text-3);margin:0}
.right{text-align:right}
.m0{margin:0}
.w-xs{max-width:76px}.w-sm{max-width:180px}.w-md{max-width:320px}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:13.5px}
.kv dt{color:var(--text-3)}.kv dd{margin:0}
h3.section{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin:4px 0 0}
.v.neg{color:var(--neg)}
/* Reports: charts (inline SVG), wide tables, linked figures */
.chart{width:100%;height:160px;display:block}

.chart rect.s2{fill:var(--pos)}
.chart-x{display:flex;justify-content:space-around;font-size:11px;color:var(--text-3);margin-top:4px}
.chart-key{display:flex;gap:14px;font-size:12px;color:var(--text-2);margin-top:6px}
.chart-key span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--accent)}
.chart-key .k1::before{background:var(--info)}
.chart-key .k2::before{background:var(--pos)}
table.wide th,table.wide td{white-space:nowrap}
.stat .v a{color:inherit;text-decoration:none}
.stat .v a:hover,.stat .v a:focus-visible{text-decoration:underline}
.stat .v.neg,.num.neg{color:var(--neg)}
/* Setup steps inside a panel */
.body ol{margin:0;padding-left:1.4em;display:grid;gap:.5em}
.body pre{margin:.4em 0 0;padding:.6em .8em;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;white-space:pre}
/* Lists: numbers, dates and document numbers stay on one line; rows highlight on hover */
td a.mono,td .mono,td.mono{white-space:nowrap}
tbody tr:not(.total):hover td{background:var(--surface-2)}
tr[aria-current] td{background:var(--accent-soft)}
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr))}
.field>.btn{justify-self:start}
/* "By unit" tables under a list's figures */
.units td:first-child,.units th:first-child{width:22%}
.units tbody tr td:first-child a{font-weight:600}

/* ── Phones and small tablets ───────────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  input,select,textarea{font-size:16px}                 /* iPhone does not zoom into the field */
  .btn{padding:9px 14px}
  .btn.small{padding:7px 12px;font-size:13px}
  .nav a{padding:10px}
  .topbar{position:static}
  .field>.btn{justify-self:stretch;justify-content:center}
  .panel>header{flex-wrap:wrap}
}
@media (max-width:640px){
  /* list tables become cards: the first cell is the title, the others "label … value" */
  table.cards thead{display:none}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards tr{padding:10px 14px;border-bottom:1px solid var(--line)}
  table.cards tr:last-child{border-bottom:0}
  table.cards td{border:0;padding:3px 0 3px 42%;position:relative;text-align:left;white-space:normal;min-height:22px}
  table.cards td .chip{white-space:normal;max-width:100%}
  table.cards td::before{content:attr(data-label);position:absolute;left:0;top:4px;width:40%;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);font-family:var(--f-ui);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.cards td:first-child{padding-left:0;font-weight:600;font-size:14px}
  table.cards td:first-child::before,table.cards td[data-label=""]::before{content:none}
  table.cards td[data-label=""]{padding-left:0}
  table.cards td.num{text-align:left}
  table.cards td:empty{display:none}
  table.cards td.empty{padding:20px 0;text-align:center}
  table.cards tr.total{background:var(--surface-2)}
  table.cards tbody tr:not(.total):hover td{background:transparent}
  .table-wrap:has(table.cards){overflow-x:visible}
  /* invoice line editor: description on its own row, the figures two by two */
  .line{grid-template-columns:1fr 1fr;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .line>:first-child{grid-column:1/-1}
  .line.head{display:none}
  .lc{display:grid;gap:4px}
  .lc-t{display:block}
  .line .remove-line{grid-column:1/-1;justify-self:end}
  .content{padding:12px}
  .stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
  .stat .v{font-size:19px}
}
.sig-preview{display:block;max-height:60px;max-width:220px;background:#fff;border-radius:6px;padding:6px}
.notice .checks{margin:6px 0 0;padding-left:18px}.notice .checks li+li{margin-top:4px}
.fields.wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.chip.credited{background:var(--raise);color:var(--text-2);border-color:var(--line-2)}

/* ── Entry forms (create and edit) ──────────────────────────────────────────────────────────────────
   One grid for every form: 4 columns on a computer, 2 on a tablet, 1 on a phone. Every control is the same height
   and sits at the top of its cell, so labels and boxes line up across a row whatever help text is under them.
   Text areas take two columns; .full takes the whole row. Filter bars (GET forms) keep their flowing layout. */
.field{display:flex;flex-direction:column;gap:6px}
.field>label:first-child{font-size:12.5px;line-height:1.3}
.field .hint{line-height:1.4}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select{height:40px}
input[type=file]{height:auto;padding:8px 10px}
textarea{min-height:84px;line-height:1.45}
.field>.btn{align-self:flex-start;height:40px}
form[method="post"] .fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px;align-items:start}
form[method="post"] .fields.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
form[method="post"] .field:has(textarea),.field.span-2{grid-column:span 2}
form[method="post"] .fields>.full,form[method="post"] .fields>.check,form[method="post"] .fields>p{grid-column:1/-1}
.panel>header .sub{font-size:12px;color:var(--text-3);font-weight:400}
/* Optional sections fold away until needed */
details.panel>summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none;font-weight:600;font-size:14px}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(-45deg);transition:transform .15s}
details.panel[open]>summary::before{transform:rotate(45deg)}
details.panel[open]>summary{border-bottom:1px solid var(--line)}
details.panel>summary .sub{font-weight:400;font-size:12px;color:var(--text-3)}
/* The form's buttons: Cancel on the left, saving on the right; stays in view at the bottom of long forms */
form.stack>.actions:last-child{position:sticky;bottom:0;z-index:5;justify-content:flex-end;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 -8px 18px rgba(0,0,0,.18)}
form.stack>.actions:last-child>a.btn{order:-1;margin-right:auto}
/* Invoice lines: one row per line, the amount worked out on the right */
.line{grid-template-columns:minmax(0,1fr) 116px 76px 128px 88px 128px 40px;align-items:start}
.line textarea{min-height:40px;height:40px;resize:vertical;padding-top:9px}
.line .amt{height:40px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px}
.line .remove-line{height:40px;width:40px;justify-content:center;padding:0}
.line.head>span:nth-child(n+3){text-align:right}
.line.head>span:nth-child(5){text-align:left}
.lines-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line)}
.totals{min-width:min(100%,320px);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
@media (max-width:1100px){
  form[method="post"] .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select{height:44px}
  .field>.btn{height:44px;align-self:stretch}
  form.stack>.actions:last-child{margin:0 -16px -16px;border-radius:0;border-width:1px 0 0}
  form.stack>.actions:last-child .btn{flex:1;justify-content:center}
  form.stack>.actions:last-child>a.btn{flex:0 0 auto;margin-right:0}
}
@media (max-width:640px){
  form[method="post"] .fields,form[method="post"] .fields.wide{grid-template-columns:minmax(0,1fr)}
  form[method="post"] .field:has(textarea),.field.span-2{grid-column:auto}
  .line{grid-template-columns:1fr 1fr}
  .line .amt,.line textarea{height:44px}
  .totals{width:100%}
}
.field.span-3{grid-column:span 3}
@media (max-width:1100px){.field.span-3{grid-column:span 2}}
@media (max-width:640px){.field.span-3{grid-column:auto}}
.stack{display:grid;gap:18px;align-content:start}
/* Buttons at the end of a form inside a panel: same bar as the long forms */
form[method="post"] .body>.actions:last-child,form[method="post"]>.body>.actions:last-child{justify-content:flex-end;border-top:1px solid var(--line);padding-top:16px;margin-top:2px}
form[method="post"] .body>.actions:last-child>a.btn{order:-1;margin-right:auto}
@media (max-width:860px){form[method="post"] .body>.actions:last-child .btn{flex:1;justify-content:center}form[method="post"] .body>.actions:last-child>a.btn{flex:0 0 auto}}
.line.head>span{padding:0 10px}
@media (max-width:640px){.line .remove-line{grid-column:auto;justify-self:end;align-self:end}}
.entry-grid{min-width:860px;table-layout:fixed}
.entry-grid td{padding:6px 8px;vertical-align:top}
.entry-grid tfoot td{font-weight:600}
td.neg,#j-diff.neg{color:var(--neg)}
/* A form inside a panel's body: its button bar becomes the panel's footer */
.panel>.body>form.stack>.actions:last-child{position:static;border-width:1px 0 0;border-radius:0;box-shadow:none;margin:0 -16px -16px;background:transparent}
details.panel[open]>summary::before{transform:rotate(45deg) translate(-2px,-2px)}
@media (max-width:640px){details.panel>summary{flex-wrap:wrap}details.panel>summary .sub{flex-basis:100%;padding-left:17px}}
.entry-grid th:nth-child(1){width:27%}.entry-grid th:nth-child(2){width:21%}.entry-grid th:nth-child(3){width:132px}.entry-grid th:nth-child(5),.entry-grid th:nth-child(6){width:136px}
/* Bill lines: description, account, HSN/SAC, qty, rate, GST %, GST ₹, amount (with GST) */
.blines{display:grid;gap:8px}
.bline{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.3fr) 104px 70px 116px 84px 108px 120px 40px;gap:8px;align-items:start}
.bline.head{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.bline.head>span{padding:0 10px}.bline.head>span:nth-child(n+4):not(:nth-child(6)){text-align:right}
.bline textarea{min-height:40px;height:40px;resize:vertical;padding-top:9px}
.bline .amt{height:40px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;font-family:var(--f-num);background:var(--raise);border-radius:6px}
.bline .remove-line{height:40px;width:40px;justify-content:center;padding:0}
@media (min-width:1501px){.bline.cl{grid-template-columns:minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,1fr) 104px 70px 116px 84px 108px 120px 40px}.bline.cl.head>span:nth-child(4){text-align:left}.bline.cl.head>span:nth-child(n+5):not(:nth-child(7)){text-align:right}.bline.cl.head>span:nth-child(6){text-align:right}}
@media (min-width:1101px) and (max-width:1500px){.bline.cl{grid-template-columns:1fr 1fr;padding-bottom:12px;border-bottom:1px solid var(--line)}.bline.cl>:first-child,.bline.cl>:nth-child(2){grid-column:1/-1}.bline.cl.head{display:none}.bline.cl .lc{display:grid;gap:4px}.bline.cl .lc-t{display:block}.bline.cl .remove-line{justify-self:end;align-self:end}}
@media (max-width:1100px){.bline{grid-template-columns:1fr 1fr;padding-bottom:12px;border-bottom:1px solid var(--line)}.bline>:first-child,.bline>:nth-child(2){grid-column:1/-1}.bline.head{display:none}.bline .lc{display:grid;gap:4px}.bline .lc-t{display:block}.bline .remove-line{justify-self:end;align-self:end}}

/* ── Pipeline (quotes and orders): stages that filter, a value bar, progress, timeline, summary card ───────── */

.stage{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--text);text-decoration:none;position:relative}
.stage:hover{border-color:var(--line-2);background:var(--surface-2)}
.stage.empty{opacity:.55}.stage.empty .v{font-weight:500}
.stage[aria-current="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.stage .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:6px}
.stage .k::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--dot,var(--text-3))}
.stage .v{font:600 18px var(--f-num)}
.stage .s{font-size:12px;color:var(--text-2)}
.st-draft{--dot:var(--text-3)}.st-sent{--dot:var(--info)}.st-accepted{--dot:var(--accent)}.st-part{--dot:var(--warn)}.st-expired{--dot:var(--neg)}.st-won{--dot:var(--pos)}
.pipe-bar,.progress{display:block;width:100%;height:8px;margin-top:10px}
.progress{height:6px;margin-top:0;min-width:80px}.progress.big{height:10px}
.pipe-bar rect,.progress rect{fill:var(--dot,var(--pos))}
.pipe-bar rect.bg,.progress rect.bg{fill:var(--raise)}
.progress rect.done{fill:var(--pos)}.progress rect.draft{fill:var(--pos);opacity:.35}
.prog-cell{display:grid;gap:4px;min-width:120px}.prog-cell .hint{font-size:11.5px}
.rel{font-size:12px;color:var(--text-2)}.rel.soon{color:var(--warn)}.rel.past{color:var(--neg)}
.hero{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.hero .kind{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.hero .title{font:600 22px var(--f-num);margin:2px 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero .who{font-size:15px;font-weight:600}.hero .meta{color:var(--text-2);font-size:13px}
.hero .amount{text-align:right}.hero .amount .big{font:600 24px var(--f-num)}.hero .amount .sub{font-size:12px;color:var(--text-2)}
.hero .next{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:12px;border-top:1px solid var(--line)}
.hero .next .lead{font-size:13px;color:var(--text-2);margin-right:auto}
.hero .prog{grid-column:1/-1;display:grid;gap:6px}
.hero .prog .legend{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--text-2);flex-wrap:wrap}
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.timeline{list-style:none;margin:0;padding:4px 0}
.timeline li{position:relative;padding:0 0 14px 22px}
.timeline li::before{content:'';position:absolute;left:5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--dot,var(--line-2));box-shadow:0 0 0 3px var(--surface)}
.timeline li::after{content:'';position:absolute;left:9px;top:16px;bottom:-2px;width:1px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline .when{font-size:11.5px;color:var(--text-3)}.timeline .what{font-size:13px}
.timeline li.future{opacity:.75}.timeline li.future::before{background:transparent;border:1px dashed var(--line-2)}
.attention{display:grid;gap:8px}
.attention a.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:7px;text-decoration:none;color:var(--text);background:var(--surface-2)}
.attention a.row:hover{border-color:var(--line-2)}
.attention .why{font-size:12px;color:var(--text-2)}
@media (max-width:1100px){.split{grid-template-columns:1fr}}
@media (max-width:640px){.hero{grid-template-columns:1fr}.hero .amount{text-align:left}}

/* ── Refresh (Oct 2026): each menu group has a colour; the page takes its group's colour ─────────────────────
   Sales green, Purchases violet, Money blue, Reports rose, Settings slate, Home gold. Lead figures, headings,
   document numbers and the active menu item use it, so a glance tells where you are. */
:root{--sec:var(--c-overview)}
[data-section=sales]{--sec:var(--c-sales)}[data-section=purchases]{--sec:var(--c-purchases)}[data-section=money]{--sec:var(--c-money)}
[data-section=reports]{--sec:var(--c-reports)}[data-section=people]{--sec:var(--c-people)}[data-section=settings]{--sec:var(--c-settings)}
:root{--sec-soft:color-mix(in srgb,var(--sec) 14%,transparent)}
.num,td.num,th.num{font-feature-settings:"tnum" 1,"lnum" 1}
a{color:var(--sec)}

/* Sidebar: always dark; group headings are coloured labels with an icon, links are indented under a rule */
.sidebar{--c-overview:#8fb3ff;--c-sales:#4fd29c;--c-purchases:#b79cff;--c-money:#6fb1ff;--c-reports:#ff8fbb;--c-people:#ffb07a;--c-settings:#a9b6c9;color:#d5dce7}
.nav{gap:6px;padding:12px 10px 16px}
.nav-group{--g:var(--c-overview);padding-top:8px}
.nav-group+.nav-group{border-top:1px solid rgba(255,255,255,.07)}
.nav-group[data-group=sales]{--g:var(--c-sales)}.nav-group[data-group=purchases]{--g:var(--c-purchases)}.nav-group[data-group=money]{--g:var(--c-money)}
.nav-group[data-group=reports]{--g:var(--c-reports)}.nav-group[data-group=people]{--g:var(--c-people)}.nav-group[data-group=settings]{--g:var(--c-settings)}
.nav h2{display:flex;align-items:center;gap:8px;margin:2px 6px 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--g)}
.nav h2 .ico{flex:none;padding:4px;width:24px;height:24px;border-radius:6px;background:color-mix(in srgb,var(--g) 18%,transparent)}
.nav a{margin-left:17px;padding:6px 10px 6px 14px;border-radius:0 6px 6px 0;border-left:1px solid rgba(255,255,255,.12);color:#cfd6e2;font-size:13.5px}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff;border-left-color:var(--g)}
.nav a[aria-current="page"]{background:color-mix(in srgb,var(--g) 18%,transparent);color:#fff;font-weight:600;border-left:3px solid var(--g);padding-left:12px}
.nav-group[data-group=overview] a{margin-left:0;border-left:0;border-radius:6px;padding-left:10px}
.nav-group[data-group=overview] h2{display:none}
.nav-group[data-group=overview]+.nav-group{border-top:0}
.nav-group[data-group=overview] a::before{content:'';display:none}
.count{font:600 10.5px var(--f-num);border-radius:10px;padding:1px 7px;background:var(--g,rgba(255,255,255,.1));color:#0b1018}
.brand span{color:#a2adbf}

/* Top bar: the group's colour as a rule along the top, the group named above a larger title */
.topbar{border-top:3px solid var(--sec);padding:12px 28px;box-shadow:var(--shadow)}
.topbar h1{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.topbar .crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3);margin-bottom:2px}
.sec-tag{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sec)}
.sec-tag .ico{width:14px;height:14px}
.content{padding:24px 28px 56px;gap:20px}
.seg{background:var(--raise)}
.seg a{color:var(--text-2);font-weight:500}
.seg a[aria-current="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* Panels: raised cards, header set apart from the body, heading marked in the group's colour */
.panel,.stat,.stage,.hero{box-shadow:var(--shadow)}
.panel>header{background:var(--surface-2);border-radius:var(--r) var(--r) 0 0;padding:13px 18px}
.panel>header h2{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
.panel>header h2::before{content:'';width:4px;height:16px;border-radius:2px;background:var(--sec);flex:none}
.panel>.body{padding:18px}
.panel.alert{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.panel.alert>header{background:var(--warn-soft)}
.panel.alert>header h2::before{background:var(--warn)}
.panel.alert td a{color:var(--text);font-weight:500}
.panel.alert td a::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-right:10px;vertical-align:1px}

/* Figures: a coloured rule on top; the first card in a row leads in the page's colour. t-* picks a colour on purpose */
.stat{position:relative;overflow:hidden;--tone:var(--line-2);padding:16px 18px 15px}
.stat::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--tone)}
.stats>.stat:first-child:not([class*=' t-']){--tone:var(--sec)}
.stats>.stat:first-child{background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 12%,transparent),transparent 75%),var(--surface)}
.stat.t-sales{--tone:var(--c-sales)}.stat.t-purchases{--tone:var(--c-purchases)}.stat.t-money{--tone:var(--c-money)}
.stat.t-reports{--tone:var(--c-reports)}.stat.t-gold{--tone:var(--accent)}.stat.t-warn{--tone:var(--warn)}
.stat .k{font-size:12.5px;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:7px}
.stat .k::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--tone);flex:none}
.stat .v{font:700 clamp(18px,1.5vw,24px)/1.25 var(--f-num);letter-spacing:-.01em;margin-top:6px}
.stat .s{color:var(--text-3);margin-top:4px}

/* Tables: quiet headings, readable rows; document numbers in the group's colour, names in text colour */
th{font-size:11px;color:var(--text-3);background:var(--surface-2);padding:10px 14px}
td{padding:11px 14px;color:var(--text)}
tbody tr:nth-child(even):not(.total):not(.subtotal):not(.grand):not(.group) td:not(.is-calc){background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
tbody tr:not(.total):hover td{background:var(--sec-soft)}
td a{color:var(--text);font-weight:500}
td a:hover,td a:focus-visible{color:var(--sec);text-decoration:underline}
td a.mono{color:var(--sec);font-weight:600}
tr.total td{background:var(--raise);font-weight:700}

/* Status chips get a dot; unit chips each have their own colour */
.chip{font-size:11.5px;padding:1px 9px 1px 8px;display:inline-flex;align-items:center;gap:5px}
.chip:not(.bu)::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.bu{--u:var(--accent);background:color-mix(in srgb,var(--u) 14%,transparent);color:var(--u);border-color:color-mix(in srgb,var(--u) 30%,transparent);border-radius:5px}
.chip.bu-texarxs{--u:var(--u-texarxs)}.chip.bu-maic{--u:var(--u-maic)}.chip.bu-packnpay{--u:var(--u-packnpay)}

/* Buttons and fields */
.btn{border-radius:8px;font-weight:600}
.btn.primary{box-shadow:0 1px 0 rgba(0,0,0,.2)}
input,select,textarea{background:var(--surface);border-color:var(--line-2);border-radius:8px}
.panel input,.panel select,.panel textarea{background:var(--surface-2)}
.field label,.field>label:first-child{color:var(--text-2);font-weight:600}

/* Charts: revenue in Sales green, costs in Purchases violet */
.chart rect.s0{fill:var(--c-sales)}.chart rect.s1{fill:var(--c-purchases)}
.chart-key span::before{background:var(--c-sales)}.chart-key .k1::before{background:var(--c-purchases)}

@media (max-width:860px){.nav a{margin-left:0}.topbar{padding:10px 16px}.content{padding:16px}}
@media print{.topbar{border-top:0;box-shadow:none}.panel,.stat{box-shadow:none}.stat::before,.panel>header h2::before{display:none}tbody tr td{background:none!important}}
/* Grouped report tables: a heading row per block */
tr.group th{background:var(--raise);color:var(--sec);font-size:11.5px;padding-top:12px}
tr.note td{color:var(--text-3);font-size:12.5px;padding-left:28px}

/* ── Calculated figures: how a row or column was worked out is visible ─────────────────────────────────────────
   tr.part      a figure that feeds the total below it (indented)
   tr.subtotal  the sum of the parts above it ("=" mark, rule above)
   tr.total     a section total ("=" mark, rule above, shaded)
   tr.grand     a result worked out from totals (gross profit, net profit, net GST): coloured band, double rule
   .calc        the formula, in small type after a label or under a column heading
   .is-calc     a column worked out from the columns before it (tinted) */
tr.part td:first-child{padding-left:30px;color:var(--text-2)}
tr.subtotal td,tr.total td,tr.grand td{font-weight:700}
tr.subtotal td{border-top:1px solid var(--text-3);background:var(--surface-2)}
tr.total td{border-top:2px solid var(--line-2)}
tr.subtotal td:first-child::before,tr.total td:first-child::before,tr.grand td:first-child::before{content:'=';display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:4px;font:700 12px/1 var(--f-ui);background:var(--raise);color:var(--text-2);vertical-align:1px}
tr.grand td{background:var(--sec-soft);border-top:2px solid var(--sec);border-bottom:3px double var(--sec);font-size:15px}
tr.grand td:first-child::before{background:var(--sec);color:var(--surface)}
tbody tr.grand:hover td,tbody tr.subtotal:hover td{background:var(--sec-soft)}
.calc{display:block;font:400 11.5px/1.3 var(--f-ui);color:var(--text-3);letter-spacing:0;text-transform:none;margin-top:2px}
tr.grand .calc,tr.subtotal .calc,tr.total .calc{display:inline;margin:0 0 0 8px}
td.is-calc,th.is-calc{background:color-mix(in srgb,var(--sec) 6%,transparent)}
tbody tr:not(.total):not(.grand):hover td.is-calc{background:var(--sec-soft)}
tr.total td.is-calc,tr.grand td.is-calc{background:color-mix(in srgb,var(--sec) 14%,transparent)}
@media print{tr.grand td{background:none;border-bottom:3px double #111;border-top:1px solid #111}td.is-calc,th.is-calc{background:none}}
@media (max-width:640px){table.cards tr.subtotal td:first-child::before,table.cards tr.total td:first-child::before,table.cards tr.grand td:first-child::before{display:none}}

/* An amount that opens how it was worked out: reads as a plain figure; on hover it takes the page colour and an arrow */
a.fig,td a.fig,.stat .v a.fig{color:var(--info);text-decoration:none;font-weight:inherit;border-radius:4px}
a.fig::after{content:'↗';display:inline-block;width:0;overflow:hidden;opacity:0;font-size:.8em;vertical-align:.15em;transition:width .12s,opacity .12s}
a.fig:hover,a.fig:focus-visible,td a.fig:hover{color:var(--info);text-decoration:underline;text-underline-offset:3px}
a.fig:hover::after,a.fig:focus-visible::after{width:1em;opacity:1;margin-left:2px}
@media print{a.fig{text-decoration:none}}

/* ── One business unit chosen: the page takes the unit's colour ── */
[data-unit=texarxs]{--unit:var(--u-texarxs)}[data-unit=maic]{--unit:var(--u-maic)}[data-unit=packnpay]{--unit:var(--u-packnpay)}
[data-unit] .topbar{background:linear-gradient(90deg,color-mix(in srgb,var(--unit) 16%,var(--surface)),var(--surface) 70%);box-shadow:inset 0 -3px 0 var(--unit),var(--shadow)}
.unit-badge{display:inline-block;vertical-align:3px;margin-right:10px;padding:2px 10px;border-radius:6px;background:var(--unit);color:var(--surface);font:700 12px/1.6 var(--f-ui);letter-spacing:.04em}
[data-unit] .seg a[aria-current="true"]{background:var(--unit);color:var(--surface)}
[data-unit] .stats>.stat:first-child:not([class*=' t-']){--tone:var(--unit)}
[data-unit] .panel>header h2::before{background:var(--unit)}
@media print{[data-unit] .topbar{background:none;box-shadow:none}.unit-badge{border:1px solid #111;background:none;color:#111}}
[data-unit] tr[aria-current] td{background:color-mix(in srgb,var(--unit) 14%,transparent)!important;font-weight:600}
[data-unit] tr[aria-current] td:first-child{box-shadow:inset 4px 0 0 var(--unit)}

/* ── Figure flow: a record's money as a readable sum (Received + TDS = Cleared); the figure that matters leads ── */
.flow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.flow-meta{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);font-size:13px;color:var(--text-2);background:var(--surface-2)}
.flow-meta .who{font-weight:700;color:var(--text);font-size:14px}
.flow-meta a.who{text-decoration:none}.flow-meta a.who:hover{text-decoration:underline}
.flow-row{display:flex;align-items:stretch}
.flow .fc{flex:1 1 0;min-width:0;padding:18px 20px}
.flow .fc .k{font-size:12.5px;font-weight:600;color:var(--text-3)}
.flow .fc .v{font:600 19px/1.25 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:6px;color:var(--text-2)}
.flow .fc.is-text .v{font-size:15px;font-family:var(--f-ui)}
.flow .fc .s{font-size:12.5px;color:var(--text-3);margin-top:4px}
.flow .fc.main{flex:1.45 1 0;--tone:var(--sec);background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 15%,transparent),color-mix(in srgb,var(--tone) 6%,transparent)),var(--surface);box-shadow:inset 3px 0 0 var(--tone)}
.flow .fc.main .k{color:var(--tone);font-weight:700;letter-spacing:.01em}
.flow .fc.main .v{font-size:clamp(24px,2.3vw,32px);font-weight:700;color:var(--text)}
.flow .fc.main .s{color:var(--text-2)}
.flow .fc.tone-pos{--tone:var(--pos)}.flow .fc.tone-neg{--tone:var(--neg)}.flow .fc.tone-warn{--tone:var(--warn)}
.flow-op{display:flex;align-items:flex-start;padding-top:42px;justify-content:center;width:24px;flex:none;font:300 24px/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text-3)}
/* Figure cards: one can lead (stat.main) */
.stat.main{--tone:var(--sec);background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 15%,transparent),color-mix(in srgb,var(--tone) 5%,transparent) 80%),var(--surface)}
.stat.main .k{color:var(--tone)}
.stat.main .v{font-size:clamp(22px,2vw,30px)}
@media (max-width:860px){
  .flow-row{flex-wrap:wrap}
  .flow .fc{flex:1 1 40%}.flow .fc.main{flex:1 1 100%;order:-1}
  .flow-op{display:none}
  .flow .fc:not(.main){border-top:1px solid var(--line)}
}
@media print{.flow{box-shadow:none}.flow .fc.main{box-shadow:none}}
.stats:has(.stat.main)>.stat:first-child:not(.main){--tone:var(--line-2);background:var(--surface)}

/* ── Home: three answers first, then the year's figures, then what to do ─────────────────────────────────────── */
.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.answer{--tone:var(--accent);display:flex;flex-direction:column;gap:4px;padding:18px 20px 16px;border-radius:var(--r);border:1px solid var(--line);text-decoration:none;color:var(--text);background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 13%,transparent),transparent 70%),var(--surface);box-shadow:var(--shadow);position:relative;overflow:hidden}
.answer::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--tone)}
.answer:hover{border-color:color-mix(in srgb,var(--tone) 45%,var(--line))}
.answer .k{font-size:13px;font-weight:700;color:var(--tone);letter-spacing:.01em}
.answer .v{font:700 clamp(26px,2.6vw,36px)/1.15 var(--f-num);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.answer .s{font-size:12.5px;color:var(--text-2)}
.answer .s b{font-weight:600}
.answer.tone-neg{--tone:var(--neg)}.answer.tone-neg .v{color:var(--neg)}
.answer.tone-warn{--tone:var(--warn)}
.stats.compact{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:10px}
.stats.compact .stat{padding:12px 14px 11px;box-shadow:none}
.stats.compact .stat .v{font-size:18px;margin-top:3px}
.stats.compact .stat .s{font-size:12px}
.stats.compact>.stat:first-child{background:var(--surface)}
.neg{color:var(--neg)}
/* Needs attention: one row per kind of work, most urgent first, each with its action */
.todo-list{list-style:none;margin:0;padding:0}
.todo-list li{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line)}
.todo-list li:first-child{border-top:0}
.todo-list .dot{width:9px;height:9px;border-radius:50%;background:var(--info)}
.todo-list .sev-overdue .dot{background:var(--neg);box-shadow:0 0 0 3px var(--neg-soft)}
.todo-list .sev-soon .dot{background:var(--warn)}
.todo-list .what a{font-weight:600;color:var(--text);text-decoration:none}
.todo-list .what a:hover{text-decoration:underline}
.todo-list .detail{display:block;font-size:12.5px;color:var(--text-3);margin-top:1px}
.todo-list .sev-overdue .detail{color:var(--neg)}
.todo-list .amt{font:600 14px var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:860px){.answers{grid-template-columns:1fr}.todo-list li{grid-template-columns:10px 1fr auto;padding:12px 14px}.todo-list .amt{grid-column:2;grid-row:2}.todo-list .btn{grid-row:1/3;grid-column:3}}

/* ── Sidebar: search and + New on top; menu groups fold, the page's own group open ─────────────────────────── */
.quick{display:flex;gap:8px;align-items:center;padding:12px 12px 4px}
.quick-search{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:7px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#aab4c4;font:500 13px var(--f-ui);cursor:pointer;text-align:left}
.quick-search:hover,.quick-search:focus-visible{border-color:rgba(255,255,255,.28);color:#fff}
.quick-search span{flex:1}
.quick kbd,.palette kbd{font:600 10.5px var(--f-ui);padding:1px 5px;border-radius:4px;border:1px solid currentColor;opacity:.7}
.quick-new{position:relative}
.quick-new>summary{list-style:none;cursor:pointer;white-space:nowrap}
.quick-new>summary::-webkit-details-marker{display:none}
.quick-new .menu{position:fixed;z-index:80;left:12px;top:60px;max-height:calc(100vh - 80px);overflow:auto;min-width:190px;padding:6px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.28)}
.quick-new .menu a{display:block;padding:8px 10px;border-radius:6px;color:var(--text);text-decoration:none;font-size:13.5px}
.quick-new .menu a:hover,.quick-new .menu a:focus-visible{background:var(--accent-soft)}
details.nav-group>summary{list-style:none;cursor:pointer;border-radius:6px}
details.nav-group>summary::-webkit-details-marker{display:none}
details.nav-group>summary h2{position:relative}
details.nav-group>summary h2::after{content:'';margin-left:auto;margin-right:6px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.6;transition:transform .15s}
details.nav-group[open]>summary h2::after{transform:rotate(45deg)}
details.nav-group:not([open]){padding-bottom:4px}
details.nav-group>summary:hover h2{filter:brightness(1.15)}
details.nav-group[data-group=overview]>summary{display:none}
@media (prefers-reduced-motion:reduce){details.nav-group>summary h2::after{transition:none}}

/* ── Search palette (⌘K) ─────────────────────────────────────────────────────────────────────────────────── */
.palette{width:min(640px,calc(100vw - 32px));max-height:min(560px,80vh);padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 24px 64px rgba(0,0,0,.35);margin:12vh auto auto}
.palette::backdrop{background:rgba(8,12,20,.45)}
.palette[open]{display:flex;flex-direction:column}
.palette-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.palette-bar input{flex:1;border:0;background:none;font:500 16px var(--f-ui);color:var(--text);padding:6px 0;outline:none}
.palette-bar kbd{color:var(--text-3)}
.palette-list{list-style:none;margin:0;padding:6px;overflow:auto;flex:1}
.palette-list li a{display:grid;grid-template-columns:110px 1fr;gap:2px 12px;padding:9px 12px;border-radius:8px;color:var(--text);text-decoration:none}
.palette-list li .t{grid-row:span 2;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);padding-top:2px}
.palette-list li .l{font-weight:600}
.palette-list li .s{font-size:12.5px;color:var(--text-3)}
.palette-list li[aria-selected="true"] a{background:var(--accent-soft)}
.palette-list li[aria-selected="true"] .t{color:var(--accent)}
.palette-list .empty{padding:18px 12px;color:var(--text-3);font-size:13.5px}
.palette-list .grp{padding:10px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.palette-foot{margin:0;padding:8px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3);display:flex;gap:6px;align-items:center}
@media (max-width:860px){.quick{padding:0 12px 10px}.palette{margin-top:8vh}.palette-list li a{grid-template-columns:1fr}.palette-list li .t{grid-row:auto}}
/* Invoice form: the customer search box sits over the list (the list stays for keyboard and screen readers) */
.party-find{width:100%}
select.find-backed{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.field:has(select.find-backed){position:relative}
.party-fill{margin:6px 0 0;color:var(--pos)}
.party-fill a{font-weight:600}

/* Status tabs over a list: one tap to a status, with how many are in it */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:-6px}
.tabs a{display:inline-flex;align-items:center;gap:7px;padding:9px 12px 10px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--text-2);text-decoration:none;font-weight:600;font-size:13.5px}
.tabs a:hover{color:var(--text)}
.tabs a[aria-current="true"]{color:var(--text);border-bottom-color:var(--sec)}
.tabs .n{font:600 11.5px var(--f-num);padding:1px 7px;border-radius:999px;background:var(--raise);color:var(--text-2)}
.tabs a[aria-current="true"] .n{background:color-mix(in srgb,var(--sec) 18%,transparent);color:var(--text)}
.tabs .tab-overdue .n{background:var(--neg-soft);color:var(--neg)}
.tabs .tab-partial .n,.tabs .tab-draft .n{background:var(--warn-soft);color:var(--warn)}
.tabs .tab-paid .n{background:var(--pos-soft);color:var(--pos)}
@media (max-width:860px){.tabs{flex-wrap:nowrap;overflow-x:auto}.tabs a{white-space:nowrap}}
/* One status scale everywhere: grey draft or closed, blue open, amber part or due soon, red overdue, green settled */
.chip.cancelled,.chip.declined,.chip.closed,.chip.ignored{background:var(--raise);color:var(--text-3);border-color:var(--line);text-decoration:line-through;text-decoration-thickness:1px}
.chip.sent,.chip.accepted,.chip.issued,.chip.approved,.chip.posted{background:var(--info-soft);color:var(--info)}
.chip.due,.chip.soon,.chip.part{background:var(--warn-soft);color:var(--warn)}
.chip.imported,.chip.matched,.chip.paid{background:var(--pos-soft);color:var(--pos)}
/* Readability: small headings no smaller than 12px */
th{font-size:11.5px}
.stat .k,.flow .fc .k{font-size:12.5px}
/* Date in words next to a date field's label */
.date-words{margin-left:8px;font-weight:500;color:var(--text-3);font-size:12px}
/* Success messages float in the corner and fade */
.notice.toast{position:fixed;z-index:60;right:20px;top:calc(16px + var(--i,0) * 64px);max-width:min(420px,calc(100vw - 40px));padding:12px 40px 12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.18);border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:var(--surface);transition:opacity .4s,transform .4s}
.notice.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--r) 0 0 var(--r);background:currentColor}
.notice.toast.gone{opacity:0;transform:translateY(-8px)}
.toast-x{position:absolute;right:8px;top:8px;border:0;background:none;color:inherit;font-size:18px;line-height:1;cursor:pointer;padding:2px 6px}
@media (prefers-reduced-motion:reduce){.notice.toast{transition:none}}
/* Phones: Home, Search, New and To do always at hand */
.phone-bar{display:none}
@media (max-width:860px){
  .phone-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;z-index:50;left:0;right:0;bottom:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .phone-bar a,.phone-bar button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border:0;background:none;color:var(--text-2);font:600 11px var(--f-ui);text-decoration:none;cursor:pointer}
  .phone-bar a:active,.phone-bar button:active{color:var(--accent)}
  .main{padding-bottom:70px}
  .notice.toast{right:12px;left:12px;max-width:none}
}
@media print{.phone-bar{display:none}}
/* Home: how current the books are */
.uptodate{display:flex;flex-wrap:wrap;gap:8px}
.uptodate span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--surface);border:1px solid var(--line);color:var(--text-2)}
.uptodate span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--pos)}
.uptodate span.late::before{background:var(--warn)}
@media (max-width:860px){.quick kbd{display:none}}
/* Progress through a task (Bank Reconciliation): done, now, to come */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.steps li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);color:var(--text-3)}
.steps .no{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;font:700 12.5px var(--f-num)}
.steps b{display:block;font-size:13.5px;color:var(--text-2)}
.steps small{display:block;font-size:12px;margin-top:1px}
.steps li.done .no{background:var(--pos);border-color:var(--pos);color:#fff}
.steps li.now{border-color:var(--sec);box-shadow:inset 0 0 0 1px var(--sec);color:var(--text-2)}
.steps li.now .no{background:var(--sec);border-color:var(--sec);color:#fff}
.steps li.now b{color:var(--text)}
details.howto ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--text-2);font-size:13.5px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
/* Sidebar group names: Title Case in white, the group's colour only in its icon; the open group reads brighter */
.nav h2{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:#c3cbd8;margin:2px 4px;padding:6px 6px;border-radius:8px;gap:10px}
.nav h2 .ico{color:var(--g);width:26px;height:26px;padding:5px;border-radius:7px;background:color-mix(in srgb,var(--g) 16%,transparent)}
details.nav-group>summary:hover h2{filter:none;background:rgba(255,255,255,.05);color:#fff}
details.nav-group[open]>summary h2{color:#fff}
details.nav-group:not([open])>summary h2{color:#aab4c4}
.nav-group{padding-top:4px}
.nav-group+.nav-group{border-top:0}
.nav a{margin-left:22px}
.nav-group{padding-top:1px}
.nav h2{padding:5px 6px;margin:1px 4px}
.sec-tag{text-transform:none;letter-spacing:0;font-size:12.5px}
/* Chart: each month's figures under its bars */
.chart-x span{flex:1 1 0;text-align:center;min-width:0}
.chart-vals{margin-top:6px}
.chart-vals b{display:block;font:600 11.5px/1.35 var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-vals .v0{color:var(--c-sales)}.chart-vals .v1{color:var(--c-purchases)}
/* A row's next step (Record receipt, Pay) under its status; full strength when the row is pointed at */
a.row-act{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:var(--accent);text-decoration:none;opacity:.75}
tr:hover a.row-act,a.row-act:focus-visible{opacity:1;text-decoration:underline}
td.num.neg,.v.neg,.fc .v.neg{color:var(--neg)}
/* Figures that open more detail are blue everywhere (tables, cards); below zero stays red */
.stat .v a,.stat .v a.fig{color:var(--info)}
.stat .v a:hover{text-decoration:underline;text-underline-offset:3px}
.stat .v.neg a,td.num.neg a.fig,.neg a.fig{color:var(--neg)}
@media print{a.fig,.stat .v a{color:inherit}}
.bar-total{margin-right:auto;display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--text-3)}
.bar-total b{font:700 18px var(--f-num);color:var(--text);font-variant-numeric:tabular-nums}
/* Pipelines (quotes, orders): every stage on one row; empty stages step back */
.pipeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.stage{padding:11px 12px;box-shadow:none}
.stage .k{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--text-2)}
.stage .v{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage.empty{opacity:1;background:var(--surface-2);border-style:dashed}
.stage.empty .k{color:var(--text-3)}
.stage.empty .v{font-size:14px;color:var(--text-3)}
.stage.empty .s{display:none}
@media (max-width:860px){.pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
details.about{margin:0;padding:6px 18px 10px;font-size:12.5px;color:var(--text-3)}
.content>details.about{padding:2px 2px 0}
details.about>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text-3)}
details.about>summary::-webkit-details-marker{display:none}
details.about>summary::before{content:'i';display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1.2px solid currentColor;font:700 10px/1 var(--f-ui)}
details.about>summary:hover{color:var(--text-2)}
details.about[open]>summary{margin-bottom:6px}
details.about .hint{margin:0;padding:0;font-size:12.5px;line-height:1.55;color:var(--text-2)}
/* Month tables: the month on one line; months with nothing in them step back */
td.month,th.month{white-space:nowrap}
tr.quiet td{color:var(--text-3)}
tr.quiet td a{color:var(--text-3)}
/* Column headings may wrap (figures never do), so wide tables fit instead of running off the edge */
thead th,thead th.num{white-space:normal;vertical-align:bottom;min-width:64px}
table.wide thead th{white-space:nowrap}
.body>details.about:only-child{padding:0}.panel>.body:has(>details.about:only-child){padding:10px 18px}
/* ⓘ beside a figure's label; its explanation opens in a small card */
button.info{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;margin-left:2px;padding:0;border-radius:50%;border:1.3px solid currentColor;background:none;color:var(--text-3);font:700 10px/1 var(--f-ui);cursor:pointer;opacity:.8}
button.info:hover,button.info:focus-visible,button.info[aria-expanded="true"]{color:var(--accent);opacity:1}
.figtip{position:fixed;z-index:70;padding:10px 12px;border-radius:10px;background:var(--surface);color:var(--text-2);border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.22);font-size:12.5px;line-height:1.5}
.figtip a{color:var(--accent);font-weight:600}
/* Menu sections: Banking (blue), Tax & Compliance (amber), Accountant (teal) */
:root{--c-banking:var(--c-money);--c-tax:#f0b45a;--c-accountant:#5fd0c8}
:root[data-theme="light"]{--c-tax:#9a5b06;--c-accountant:#0d7f75}
.sidebar{--c-tax:#f0b45a;--c-accountant:#5fd0c8}
[data-section=banking]{--sec:var(--c-money)}[data-section=tax]{--sec:var(--c-tax)}[data-section=accountant]{--sec:var(--c-accountant)}
.nav-group[data-group=banking]{--g:var(--c-money)}.nav-group[data-group=tax]{--g:var(--c-tax)}.nav-group[data-group=accountant]{--g:var(--c-accountant)}
.seal-preview{display:block;width:80px;height:80px;object-fit:contain;background:#fff;border-radius:50%;padding:4px}

/* ── Work ───────────────────────────────────────────────────────────────────────────────────────────── */
.quick>.btn{display:block;text-align:center;text-decoration:none}
.stat .v.warn{color:var(--warn)}
.empty .btn{display:inline-block;margin-top:6px;text-decoration:none}
.label{font-size:12.5px;color:var(--text-2);font-weight:500}
.late{color:var(--neg);font-weight:600}

/* Status chips */
.chip.st-open{background:var(--raise);color:var(--text-2);border-color:var(--line-2)}
.chip.st-in_progress{background:var(--info-soft);color:var(--info)}
.chip.st-waiting{background:var(--warn-soft);color:var(--warn)}
.chip.st-decision{background:rgba(106,63,209,.10);color:#6a3fd1}
.chip.st-blocked,.chip.st-high{background:var(--neg-soft);color:var(--neg)}
.chip.st-done{background:var(--pos-soft);color:var(--pos)}
.chip.st-dropped{background:var(--raise);color:var(--text-3);text-decoration:line-through}
.chip.st-noted{background:var(--pos-soft);color:var(--pos)}

/* Category tags: a fixed palette (inline colours are blocked by the page's security policy) */
.cat{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1.6 var(--f-ui);color:var(--text-2);white-space:nowrap}
.cat::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cat,#4a5a72)}
.cat-blue{--cat:#1d4ed8}.cat-purple{--cat:#6a3fd1}.cat-green{--cat:#0b7a50}.cat-amber{--cat:#b45309}
.cat-pink{--cat:#b8326c}.cat-teal{--cat:#0d7f75}.cat-red{--cat:#b42318}.cat-slate{--cat:#4a5a72}

/* My Day */
.items{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:start;padding:12px 16px;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item.high{box-shadow:inset 3px 0 0 var(--neg)}
.item-title{font-weight:600;color:var(--text);text-decoration:none;font-size:14.5px}
.item-title:hover{text-decoration:underline}
.item-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:5px;font-size:12px;color:var(--text-3)}
.proj{font-weight:500;color:var(--text-2)}
.when{font-size:12px;color:var(--text-3)}
.when.late{color:var(--neg);font-weight:600}
.last-note{margin:6px 0 0;font-size:13px;color:var(--text-2);white-space:pre-line}
.quick-note{grid-column:2;grid-row:1;justify-self:end}
.quick-note[open]{grid-column:1/-1;grid-row:auto;justify-self:stretch}
.quick-note[open]>summary{display:none}
.note-form{display:grid;gap:8px}
.note-form textarea{min-height:60px}
.note-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end}
.note-row label{display:grid;gap:4px;font-size:12px;color:var(--text-2);min-width:150px}
.note-row .btn{height:40px}
.day-sec[data-closed] .item-title{color:var(--text-3)}

/* Tag people */
.people-picks{display:flex;flex-wrap:wrap;gap:6px}
.pick{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer;background:var(--surface-2)}
.pick:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}

/* Item page */
.item-page{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.item-side{position:sticky;top:76px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:13px}
.facts dt{color:var(--text-3)}
.facts dd{margin:0}
ol.notes-list{list-style:none;margin:0;padding:0}
ol.notes-list>li{padding:12px 16px;border-top:1px solid var(--line)}
ol.notes-list>li:first-child{border-top:0}
.tl-head{display:flex;align-items:center;gap:8px;font-size:13px}
.tl-head time{color:var(--text-3);font-size:12px}
.avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:600 11px var(--f-ui)}
.tl-change{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 0 34px;font-size:12px}
.tl-body{margin:6px 0 0 34px;white-space:normal}
.note-cell{max-width:340px;font-size:12.5px;color:var(--text-2)}
.filters .fields{align-items:end}
@media (max-width:900px){
  .item-page{grid-template-columns:1fr}
  .item-side{position:static;order:-1}
  .item{grid-template-columns:1fr}
  .quick-note{grid-column:1;grid-row:auto;justify-self:start}
}
/* Daily Status: the email shown as sent */
.mail-preview{width:100%;height:80vh;min-height:520px;border:1px solid var(--line);border-radius:var(--r);background:#eef1f6}
.status-tools{max-width:420px}