@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* =====================================================================
   DD Dashboard design system — shared by every page in the family.
   Canonical reference: C:/AI/Agent-CEO/forge/reference/design-language.md
   Type + accent inherited from the SPM client portal (dd-portal).

   Linked AFTER each page's inline <style> so these rules win on equal
   specificity. The legacy variable names (--bg, --card, --accent …) are
   deliberately kept and REMAPPED, so existing page rules re-skin with no
   DOM or JS changes — critical for finance_dashboard.html and
   vat_dashboard.html, whose markup is an injection target.

   Colour is reserved for money semantics and state, never decoration:
     amber  = owed / due / cost / attention      (was crimson --accent)
     green  = yours / positive / live
     blue   = operational / neutral series
     red    = negative / overdue only
   ===================================================================== */

:root{
  /* ---- surfaces ---- */
  --bg:#14161A;
  --card:#1B1F24;
  --card-alt:#21262D;
  --border:#2C333B;
  --border-soft:#232930;

  /* ---- text (all >= 6.9:1 on --bg) ---- */
  --text:#F4F6F8;
  --text-dim:#C3C9D1;
  --text-muted:#98A0AA;

  /* ---- semantic money palette (validated: dataviz validate_palette.js,
          dark mode, all six checks PASS) ---- */
  --owed:#C08034;
  --kept:#5A83D6;
  --yours:#2FA36B;

  /* text/mark steps, brighter for legibility on dark */
  --accent:#E0A93F;     /* was #e94560 — dominant meaning was due/owed/cost */
  --accent2:#EFC06A;
  --yellow:#E0A93F;
  --green:#46C489;
  --blue:#7FA5E8;
  --red:#E5705E;
  --purple:#7FA5E8;     /* folded into blue — the rainbow is retired */
  --cyan:#46C489;       /* folded into green */

  --owed-soft:rgba(224,169,63,.09);
  --owed-line:rgba(224,169,63,.28);
  --yours-soft:rgba(47,163,107,.10);
  --yours-line:rgba(47,163,107,.30);
  /* kept tone was missing its soft/line pair — added 2026-08-08 for the nil
     obligation badge on the board's "Money with a date on it" cards. Derived
     from --kept-t (--blue #7FA5E8) at the same alphas as the two above. */
  --kept-soft:rgba(127,165,232,.09);
  --kept-line:rgba(127,165,232,.28);

  --r:12px;
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 18px 40px -30px rgba(0,0,0,.75);
  --tex:repeating-linear-gradient(128deg,rgba(255,255,255,.022) 0 1px,transparent 1px 9px);

  /* ---- aliases ----------------------------------------------------------
     The board (index.html) was authored with semantic names before this file
     existed. They alias the values above rather than restating them, so the
     palette has exactly one definition. Either vocabulary is valid in any
     page; prefer these semantic names in new work.                        */
  --ground:var(--bg);
  --panel:var(--card);
  --panel-2:var(--card-alt);
  --line:var(--border);
  --line-soft:var(--border-soft);
  --ink:var(--text);
  --ink-2:var(--text-dim);
  --ink-3:var(--text-muted);
  --owed-t:var(--accent);
  --kept-t:var(--blue);
  --yours-t:var(--green);
  --danger-t:var(--red);
}

/* ---------------- base typography ---------------- */
body{
  background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:15.5px; line-height:1.55; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{letter-spacing:-.02em}

/* Courier money is retired family-wide — tabular IBM Plex instead. */
.amount,.mono,td.amount,.kpi-value,.stat-value{
  font-family:'IBM Plex Sans',system-ui,sans-serif !important;
  font-variant-numeric:tabular-nums;
}

::selection{background:var(--owed-line);color:var(--text)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ---------------- surfaces ---------------- */
.card,.kpi,.chart-card,.panel,.alert,.vat-card,.client-card,.deal-card,.lead-card{
  border-radius:var(--r);
  border-color:var(--border);
  box-shadow:var(--shadow);
}

/* Page header: the 2px crimson underline becomes a hairline. */
.header{border-bottom:1px solid var(--border) !important}
.header h1{font-weight:700;letter-spacing:-.02em}

/* The 3px top bars on KPI cards were coloured by class name (.kpi.red,
   .kpi.purple …) — decoration, not meaning. Retired to a hairline; colour now
   lives on the figures, which is where it carries information. */
.kpi::before,.client-card::before,.card::before,.sub-card::before,
.hub-card::before,.report-card::before{
  background:var(--border) !important;
  height:1px !important;
}

/* Section titles kept their accent bar, now amber and thinner. */
.section-title{border-left-width:3px;border-left-color:var(--accent)}

/* ---------------- tables ---------------- */
table{border-collapse:collapse}
thead th{
  background:transparent !important;
  color:var(--text-muted) !important;
  font-weight:600 !important;
  font-size:10.5px !important;
  letter-spacing:.13em !important;
  text-transform:uppercase;
  border-bottom:1px solid var(--border) !important;
}
tbody td{border-bottom:1px solid var(--border-soft);font-size:14.5px}
tbody tr:hover{background:rgba(244,246,248,.035) !important}

/* ---------------- controls ---------------- */
/* Amber needs dark text, never white — #fff on amber is ~2.1:1. */
.tab.active,.fab-btn:hover,.fab-link:hover,.fab-link.active,
.btn-primary,.badge-accent{
  background:var(--accent) !important;
  color:#101317 !important;
  border-color:var(--accent) !important;
  font-weight:600;
}
.tab{border-radius:8px}
.fab-btn,.fab-link{border-radius:10px;border-color:var(--border)}
.fab-link{font-family:'IBM Plex Sans',sans-serif}

/* ---------------- tags / status chips ---------------- */
.tag,.badge,.chip{
  border-radius:100px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:10.5px;
}
.tag-overdue,.tag-danger{background:var(--owed-soft) !important;color:var(--accent) !important}
.tag-paid,.tag-ok,.tag-won{background:var(--yours-soft) !important;color:var(--green) !important}

/* ---------------- links ---------------- */
a{color:inherit}
a.link,.link{color:var(--green)}
a.link:hover,.link:hover{color:var(--text)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}
@media print{
  body{background:#fff;color:#000}
  .fab-wrap{display:none}
}

/* =====================================================================
   ===================  APP SHELL  (added 2026-09-19)  =================
   Everything below serves the single-page app (index.html + app/*.js).
   The block above is untouched legacy: the old stand-alone pages are
   redirect stubs now, but their class names still resolve, so nothing
   here renames or removes a legacy token.

   Layout is a two-row, two-column grid on <body class="app">:

        +-----------------------------------------------+
        |  topbar (brand zone | title | right slot)      |  62px
        +-------------+---------------------------------+
        | side        | main#view  (the only scroller)   |  1fr
        +-------------+---------------------------------+

   Sidebar is 264px open, 64px as an icon rail, a drawer under 900px.
   One accent only: --yours-t green marks where you are.
   ===================================================================== */

:root{
  --side-open:264px;
  --side-rail:64px;
  --side-w:var(--side-open);
  --head-h:62px;
  --t:180ms;
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ---- reset, scoped so the legacy pages keep their own box model ---- */
body.app,body.app *,body.app *::before,body.app *::after{box-sizing:border-box}
body.app h1,body.app h2,body.app h3,body.app h4,body.app h5,
body.app p,body.app figure,body.app ul,body.app ol{margin:0}
body.app ul,body.app ol{padding:0;list-style:none}
body.app a{color:inherit;text-decoration:none}
body.app button{font-family:inherit}
body.app img{display:block}
body.app :focus-visible{outline:2px solid var(--yours-t);outline-offset:3px}

body.app{
  margin:0;
  font-size:16px;
  height:100dvh;
  overflow:hidden;
  display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr);
  grid-template-rows:var(--head-h) minmax(0,1fr);
  grid-template-areas:"topbar topbar" "side view";
  transition:grid-template-columns var(--t) var(--ease);
}
body.app.side-collapsed{--side-w:var(--side-rail)}

/* ---------------- Topbar ---------------- */
.topbar{
  grid-area:topbar;
  display:flex;align-items:center;gap:0;
  background:rgba(27,31,36,.93);backdrop-filter:blur(10px);
  background-image:var(--tex);
  border-bottom:1px solid var(--line);
  z-index:70;
}
.topbar-brand{
  width:var(--side-w);flex:none;
  display:flex;align-items:center;
  height:100%;padding:0 20px;
  border-right:1px solid var(--line);
  transition:width var(--t) var(--ease),padding var(--t) var(--ease);
}
body.app.side-collapsed .topbar-brand{padding:0;justify-content:center}
.lockup{display:flex;align-items:center;min-width:0}
.lockup img{width:auto}
.lockup .mark{height:28px;display:none}
.lockup .full{height:26px}
body.app.side-collapsed .lockup .full{display:none}
body.app.side-collapsed .lockup .mark{display:block}

.topbar-main{
  flex:1;min-width:0;display:flex;align-items:center;gap:14px;
  padding:0 24px;height:100%;
}
.topbar-title{
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.topbar-slot{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}

.icon-btn{
  flex:none;width:36px;height:36px;border-radius:9px;
  display:none;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;color:var(--ink-3);
  cursor:pointer;transition:color var(--t),background var(--t),border-color var(--t);
}
.icon-btn:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.icon-btn svg{width:19px;height:19px}

/* ---------------- Sidebar ---------------- */
.side{
  grid-area:side;
  background:var(--panel);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
}
body.app.side-collapsed .side{overflow:visible}
.nav{flex:1;padding:16px 12px 8px;min-width:0}
body.app.side-collapsed .nav{padding:16px 8px 8px}
.nav-group + .nav-group{margin-top:2px}
.nav-group.has-sub + .nav-group.has-sub{margin-top:10px}

.nav-item{
  position:relative;
  display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 12px;border-radius:9px;
  background:none;border:0;text-align:left;cursor:pointer;
  color:var(--ink-2);
  transition:background var(--t),color var(--t);
}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.nav-ic{flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.nav-ic svg{width:18px;height:18px}
.nav-item:hover .nav-ic{color:var(--ink-2)}
.nav-tx{font-size:13.5px;font-weight:500;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.nav-chev{flex:none;width:14px;height:14px;color:var(--ink-3);transition:transform var(--t) var(--ease)}
.nav-chev svg{width:14px;height:14px}
.nav-group.open .nav-chev{transform:rotate(90deg)}

/* A group heading labels its children; it is never a destination, so it is
   quieter than the items beneath it. */
.nav-head .nav-tx{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.nav-head:hover .nav-tx{color:var(--ink-2)}

.nav-sub{display:none;margin:2px 0 6px 25px;padding-left:11px;border-left:1px solid var(--line)}
.nav-group.open .nav-sub{display:block}
.nav-sub-item{
  position:relative;display:block;
  padding:7px 12px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--t),color var(--t);
}
.nav-sub-item:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.nav-sub-item.none{color:var(--ink-3);opacity:.6;cursor:default;font-style:normal}
.nav-sub-item.none:hover{background:none;color:var(--ink-3)}

/* Active: one green bar, one raised surface. Nothing else changes colour. */
.nav-item.active,.nav-sub-item.active{color:var(--ink);background:var(--yours-soft)}
.nav-item.active .nav-ic{color:var(--yours-t)}
.nav-item.active::before,.nav-sub-item.active::before{
  content:'';position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--yours-t);
}
.nav-sub-item.active::before{left:-12px;top:6px;bottom:6px}
.nav-group.in-path > .nav-head .nav-ic{color:var(--yours-t)}

/* Collapsed rail: icons only, name on hover as a tooltip. */
body.app.side-collapsed .nav-tx,
body.app.side-collapsed .nav-chev,
body.app.side-collapsed .nav-sub,
body.app.side-collapsed .side-foot-tx{display:none}
body.app.side-collapsed .nav-item{justify-content:center;padding:11px 0;gap:0}
body.app.side-collapsed .nav-item.active::before{left:2px}
body.app.side-collapsed .nav-group.in-path > .nav-head{background:var(--yours-soft)}
body.app.side-collapsed .nav-item[data-tip]:hover::after,
body.app.side-collapsed .nav-item[data-tip]:focus-visible::after{
  content:attr(data-tip);
  position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:6px 11px;font-size:12.5px;font-weight:500;color:var(--ink);
  white-space:nowrap;box-shadow:var(--shadow);z-index:90;pointer-events:none;
}

.side-foot{
  flex:none;padding:10px 12px 16px;border-top:1px solid var(--line);
}
body.app.side-collapsed .side-foot{padding:10px 8px 16px}
.side-foot .nav-item{color:var(--ink-3)}
.side-foot .nav-chev{display:flex;align-items:center;justify-content:center}
body.app.side-collapsed .side-foot .nav-chev{display:flex;transform:rotate(180deg)}

/* ---------------- Drawer (phone) ---------------- */
/* The drawer and its scrim start BELOW the header, so the header stays
   visible and the button that opened the drawer is the button that closes it.
   A panel that covers its own dismiss control is a trap. */
.scrim{
  position:fixed;top:var(--head-h);left:0;right:0;bottom:0;z-index:75;
  background:rgba(10,12,14,.62);
  opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease);
}
body.app.drawer-open .scrim{opacity:1;pointer-events:auto}
.icon-btn .ic-close{display:none}
body.app.drawer-open .icon-btn .ic-close{display:block}
body.app.drawer-open .icon-btn .ic-menu{display:none}

/* ---------------- Main ---------------- */
main#view{
  grid-area:view;min-width:0;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding-bottom:56px;
}

/* =====================================================================
   SHARED FURNITURE — moved out of index.html so every view draws from
   one definition. Token driven; no literal colour that is not a token.
   ===================================================================== */
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-3);font-size:13px}
.lab{font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}

/* padding-top only: a section is almost always ALSO a .wrap, and the shorthand
   would silently wipe the wrap's side gutters. */
.sec{padding-top:40px}
.sec-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px}
.sec-ic{width:36px;height:36px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink-2)}
.sec-ic svg{width:18px;height:18px}
.sec-h-txt{flex:1;min-width:0}
.sec-title{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.sec-note{font-size:14px;color:var(--ink-3);margin-top:4px;max-width:62ch}
.sec-act{flex:none;display:flex;gap:10px;align-items:center}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px 26px}
.panel-h{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.panel-h .r{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:500;font-size:12.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.stack{display:grid;gap:14px;align-content:start}

.statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(188px,1fr));gap:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 20px 18px;min-width:0}
.stat .k{font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.stat .g{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.stat.good .v{color:var(--yours-t)}
.stat.warn .v{color:var(--owed-t)}
.stat.nil .v{color:var(--ink-3)}

/* Tables — the legacy block above already sets weight, size and tracking
   with !important; these add only what it leaves open. */
body.app table{width:100%;border-collapse:collapse}
body.app thead th{text-align:left;padding:0 0 12px;text-transform:uppercase}
body.app thead th.r{text-align:right}
body.app tbody td{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;vertical-align:middle}
body.app tbody td.r{text-align:right;font-variant-numeric:tabular-nums}
body.app tbody tr:last-child td{border-bottom:none}

.pulse{width:8px;height:8px;border-radius:50%;background:var(--yours-t);position:relative;flex:none}
.pulse::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--yours-t);
  animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.pulse.warn,.pulse.warn::after{background:var(--owed-t)}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}

.pill{display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-radius:100px;padding:4px 11px;border:1px solid var(--line);color:var(--ink-3)}
.pill.live,.pill.ok{color:var(--yours-t);background:var(--yours-soft);border-color:var(--yours-line)}
.pill.warn{color:var(--owed-t);background:var(--owed-soft);border-color:var(--owed-line)}
.pill.down,.pill.bad{color:var(--danger-t);background:rgba(229,112,94,.10);border-color:rgba(229,112,94,.30)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:13px;font-weight:600;padding:9px 16px;border-radius:9px;
  border:1px solid var(--line);color:var(--ink-2);background:var(--panel-2);cursor:pointer;
  text-align:center;transition:border-color var(--t),color var(--t),background var(--t)}
.btn:hover{color:var(--ink);border-color:var(--ink-3)}
.btn.pri{color:var(--yours-t);background:var(--yours-soft);border-color:var(--yours-line)}
.btn.pri:hover{color:var(--yours-t);border-color:var(--yours-t)}
.btn.off,.btn.off:hover,.btn:disabled,.btn:disabled:hover,
.btn[aria-disabled="true"],.btn[aria-disabled="true"]:hover{
  color:var(--ink-3);background:transparent;border-color:var(--line-soft);
  cursor:not-allowed;opacity:.55}
.btn.off{pointer-events:none}
.btns{display:flex;gap:10px}
.btns .btn{flex:1;padding:9px 12px}

.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-bottom:24px}
.tabs .tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-3);
  padding:10px 2px;margin-bottom:-1px;cursor:pointer;transition:color var(--t),border-color var(--t)}
.tabs .tab:hover{color:var(--ink-2)}
.tabs .tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--yours-t)}

.index-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.idx{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:20px 22px;display:flex;align-items:center;gap:14px;transition:border-color var(--t),transform var(--t)}
.idx:hover{border-color:var(--yours-line);transform:translateY(-2px)}
.idx .ic{width:34px;height:34px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink-3)}
.idx .ic svg{width:17px;height:17px}
.idx h4{font-size:15px;font-weight:600;letter-spacing:-.01em}
.idx p{font-size:12.5px;color:var(--ink-3);margin-top:2px}

.chart-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px 24px}
.chart-card h3{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px}
.chart-box{height:264px;position:relative}
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}

.view-foot{padding:44px 0 0;margin-top:48px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------------- Loading, error, empty ---------------- */
.skeleton{display:grid;gap:14px}
.skeleton .sk{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px 24px}
.sk-line{height:12px;border-radius:6px;margin-bottom:12px;
  background:var(--panel-2);
  background-image:linear-gradient(90deg,transparent 0,rgba(255,255,255,.055) 50%,transparent 100%);
  background-size:220% 100%;background-repeat:no-repeat;
  animation:shimmer 1.5s linear infinite}
.sk-line.a{width:44%;height:17px;margin-bottom:16px}
.sk-line.b{width:78%}
.sk-line.c{width:100%;height:40px;margin-bottom:0}
@keyframes shimmer{from{background-position:220% 0}to{background-position:-120% 0}}

.state-error,.state-empty{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:26px 28px;max-width:74ch}
.state-error{border-color:rgba(229,112,94,.30)}
.state-error .lab{color:var(--danger-t)}
.state-h{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-top:8px}
.state-note{font-size:14px;color:var(--ink-2);margin-top:8px;max-width:70ch;line-height:1.55}
/* The house rule is no monospace anywhere. A path still needs to read as a
   literal, so it gets the panel surface rather than a different typeface. */
.state-note code{font-family:inherit;font-size:13px;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:6px;padding:1px 6px}
.state-detail{font-size:12.5px;color:var(--ink-3);margin-top:10px;overflow-wrap:anywhere}
.state-error .btn,.state-empty .btn{margin-top:18px}

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .grid2{grid-template-columns:1fr}
  .chart-row{grid-template-columns:1fr}
  .statband{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
}
@media (max-width:900px){
  body.app{grid-template-columns:minmax(0,1fr);grid-template-areas:"topbar" "view"}
  .topbar-brand{width:auto;border-right:0;padding:0 4px 0 12px}
  .topbar-main{padding:0 16px 0 10px}
  .lockup .full{display:none}
  .lockup .mark{display:block;height:24px}
  .icon-btn.menu{display:flex;margin-left:8px}
  .side{position:fixed;top:var(--head-h);left:0;bottom:0;width:min(284px,82vw);z-index:80;
    transform:translateX(-100%);transition:transform var(--t) var(--ease);
    box-shadow:0 24px 60px rgba(0,0,0,.5)}
  body.app.drawer-open .side{transform:none}
  body.app.side-collapsed .side{--side-w:var(--side-open)}
  body.app.side-collapsed .nav-tx,
  body.app.side-collapsed .nav-chev,
  body.app.side-collapsed .side-foot-tx{display:block}
  body.app.side-collapsed .nav-group.open .nav-sub{display:block}
  body.app.side-collapsed .nav-item{justify-content:flex-start;padding:9px 12px;gap:12px}
  .side-foot{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .sec{padding-top:32px}
  .statband{grid-template-columns:1fr}
  .topbar-slot{display:none}
  .topbar-slot:has(.slot-act){display:flex;flex:none;margin-left:auto}
  .topbar-slot:has(.slot-act) .money-status > span{display:none}
  .btns{flex-direction:column}
  .tabs{gap:14px;overflow-x:auto}
}
@media print{
  .topbar,.side,.scrim{display:none}
  body.app{display:block;height:auto;overflow:visible}
  main#view{overflow:visible}
}

/* =====================================================================
   BOARD — the CEO board's own furniture, lifted verbatim out of the old
   index.html and scoped so nothing here reaches another view.
   ===================================================================== */
.board .hero{padding-top:40px}
.board .hero-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.board .banner{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--owed-t);background:var(--owed-soft);border:1px solid var(--owed-line);
  border-radius:100px;padding:6px 14px}
.board .banner.ratified{color:var(--yours-t);background:var(--yours-soft);border-color:var(--yours-line)}
.board .hero-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:32px 34px 34px;background-image:var(--tex)}
.board .hero-fig{font-size:64px;font-weight:700;letter-spacing:-.035em;line-height:1}
.board .hero-fig .cur{font-size:24px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-right:12px;vertical-align:.36em}
.board .hero-sub{font-size:14px;color:var(--ink-3);margin-top:12px}

.board .split{display:flex;gap:3px;height:74px;margin-top:34px}
.board .seg{display:flex;align-items:center;padding:0 18px;min-width:0;cursor:pointer;
  transition:filter .16s;border-radius:4px;color:#101317}
.board .seg:first-child{border-radius:8px 4px 4px 8px}
.board .seg:last-child{border-radius:4px 8px 8px 4px}
.board .seg:hover{filter:brightness(1.12)}
.board .seg .pct{font-size:21px;font-weight:700;line-height:1;letter-spacing:-.02em}
.board .seg-owed{background:var(--owed)}
.board .seg-kept{background:var(--kept)}
.board .seg-yours{background:var(--yours)}

.board .legend{display:flex;gap:3px;margin-top:2px}
/* Each cell is flexed by its band's percentage so the legend lines up under
   the bar. That alignment is the point, so the cells are NOT given a width
   floor: flooring them would either break the alignment or distort the bar,
   and a money bar must not be distorted. A band worth a few percent therefore
   gets a narrow, wrapped label. Left as it is on the stand-alone board. */
.board .legend-cell{min-width:0;padding:18px 18px 0;border-top:2px solid transparent}
.board .legend-cell.l-owed{border-top-color:var(--owed)}
.board .legend-cell.l-kept{border-top-color:var(--kept)}
.board .legend-cell.l-yours{border-top-color:var(--yours)}
.board .legend-cell .amt{font-size:22px;font-weight:700;letter-spacing:-.025em}
.board .legend-cell.l-owed .amt{color:var(--owed-t)}
.board .legend-cell.l-kept .amt{color:var(--kept-t)}
.board .legend-cell.l-yours .amt{color:var(--yours-t)}
.board .legend-cell .lbl{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:8px}
.board .legend-cell .sub{font-size:13.5px;color:var(--ink-3);margin-top:5px}

.board .wf{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;
  padding-top:26px;border-top:1px solid var(--line)}
.board .wf-col{min-width:0;display:flex;flex-direction:column}
.board .wf-h{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:9px}
.board .wf-h::before{content:'';width:10px;height:10px;border-radius:3px;flex:none}
.board .wf-owed .wf-h::before{background:var(--owed)}
.board .wf-kept .wf-h::before{background:var(--kept)}
.board .wf-yours .wf-h::before{background:var(--yours)}
.board .wf-rows{flex:1 1 auto;margin-top:14px}
.board .wf-row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line-soft)}
.board .wf-row:last-child{border-bottom:0}
.board .wf-row .l{font-size:13.5px;color:var(--ink-2);min-width:0}
.board .wf-row .l small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.board .wf-row .v{font-size:15px;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.board .wf-owed .wf-row .v{color:var(--owed-t)}
.board .wf-kept .wf-row .v{color:var(--kept-t)}
.board .wf-yours .wf-row .v{color:var(--yours-t)}
.board .wf-row.nil .v{color:var(--ink-3)}
.board .wf-rule{font-size:12.5px;color:var(--ink-3);margin-top:10px;line-height:1.5;
  padding:9px 11px;border-radius:8px;background:var(--kept-soft);border:1px solid var(--kept-line)}
.board .wf-max .wf-rows{margin-top:12px}
.board .wf-row.notheld .l,.board .wf-row.notheld .v{color:var(--ink-3)}
.board .wf-row.notheld .v{text-decoration:line-through;text-decoration-thickness:1.5px}
.board .wf-row.held .l{color:var(--ink)}
.board .wf-tot{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.board .wf-tot .l{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.board .wf-tot .v{font-size:22px;font-weight:700;letter-spacing:-.025em}
.board .wf-owed .wf-tot .v{color:var(--owed-t)}
.board .wf-kept .wf-tot .v{color:var(--kept-t)}
.board .wf-yours .wf-tot .v{color:var(--yours-t)}
.board .wf-note{font-size:12.5px;color:var(--ink-3);margin-top:14px;line-height:1.55;min-height:0}
.board .wf-chip{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;border-radius:100px;padding:2px 8px;margin-left:8px;vertical-align:1px}
.board .wf-chip.on{color:var(--kept-t);background:var(--kept-soft);border:1px solid var(--kept-line)}
.board .wf-chip.off{color:var(--ink-3);background:transparent;border:1px solid var(--line)}

.board .nextout{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;padding-top:24px;
  border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.board .nextout .tag{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.board .nextout b{color:var(--ink);font-weight:600}
.board .nextout .in{margin-left:auto;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border-radius:100px;padding:5px 13px;color:var(--ink-3);border:1px solid var(--line)}
.board .nextout.due .tag,.board .nextout.due b{color:var(--owed-t)}
.board .nextout.due .in{color:var(--owed-t);background:var(--owed-soft);border-color:var(--owed-line)}

.board .due-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.board .due{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px}
.board .due .when{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.board .due .amt{font-size:26px;font-weight:700;letter-spacing:-.025em;margin-top:10px}
.board .due .what{font-size:13.5px;color:var(--ink-2);margin-top:6px}
.board .due .in{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:100px;padding:4px 11px;margin-top:14px}
.board .due-note{font-size:12.5px;line-height:1.5;color:var(--ink-3);margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.board .due.nil .amt{color:var(--kept-t)}
.board .nil-tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kept-t);background:var(--kept-soft);
  border:1px solid var(--kept-line);border-radius:100px;padding:2px 8px;margin-left:6px;vertical-align:1px}
.board .due.soon{border-color:var(--owed-line);background:linear-gradient(180deg,var(--owed-soft),transparent 65%)}
.board .due.soon .when,.board .due.soon .amt{color:var(--owed-t)}
.board .due.soon .in{color:var(--owed-t);background:var(--owed-soft);border-color:var(--owed-line)}
.board .after-note{font-size:13.5px;color:var(--ink-3);margin-top:20px;max-width:78ch}
.board .after-note b{color:var(--ink-2);font-weight:600}

.board .flow-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.board .flow-row .l{color:var(--ink-3)}
.board .flow-row .v{font-weight:600;font-variant-numeric:tabular-nums}
.board .flow-row.total{border-bottom:none;border-top:1px solid var(--line);margin-top:2px;padding-top:18px}
.board .flow-row.total .l{color:var(--ink);font-weight:600}
.board .flow-row.total .v{font-size:20px;font-weight:700}
.board .flow-row.total.hi .v{color:var(--yours-t)}
.board .prop{height:5px;border-radius:3px;background:var(--kept)}
.board .prop-cell{width:96px;padding-left:20px}

/* Header right slot: the money status the board publishes. */
.money-status{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden}
.money-status b{color:var(--ink);font-weight:600}
.money-status .sep{color:var(--ink-3)}

@media (max-width:1200px){.money-status .due-part{display:none}}
@media (max-width:1080px){
  .board .due-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .board .wf{grid-template-columns:1fr;gap:0}
  .board .wf-col + .wf-col{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .board .hero{padding-top:26px}
  .board .hero-card{padding:24px 18px 26px}
  .board .hero-fig{font-size:38px}
  .board .hero-fig .cur{font-size:17px}
  .board .wf-tot .v{font-size:19px}
  .board .split{height:56px;margin-top:26px;gap:2px}
  .board .seg{padding:0 8px;justify-content:center}
  .board .seg .pct{font-size:14px}
  .board .legend{flex-direction:column;gap:0;margin-top:8px}
  .board .legend-cell{padding:14px 0 14px 12px;border-top:none;border-left:3px solid transparent;flex:none!important}
  .board .legend-cell.l-owed{border-left-color:var(--owed)}
  .board .legend-cell.l-kept{border-left-color:var(--kept)}
  .board .legend-cell.l-yours{border-left-color:var(--yours)}
  .board .prop-cell{display:none}
}

/* =====================================================================
   WEBSITES — Instatic instances. Cards, the New website dialog and the
   In progress panel, ported from the stand-alone page.
   ===================================================================== */
.site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.site{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0;
  transition:border-color var(--t),transform var(--t)}
.site:hover{border-color:var(--yours-line);transform:translateY(-2px)}
.site-top{display:flex;align-items:flex-start;gap:12px}
.site-id{flex:1;min-width:0}
.site-id h3{font-size:15px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.site-id .host{font-size:12.5px;color:var(--ink-3);margin-top:3px;overflow-wrap:anywhere}
.site-meta{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  padding-top:12px;border-top:1px solid var(--line-soft);overflow-wrap:anywhere;margin-top:auto}

dialog.dlg{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);
  margin:auto;padding:0;width:min(440px,calc(100vw - 36px));box-shadow:0 24px 60px rgba(0,0,0,.5)}
dialog.dlg::backdrop{background:rgba(10,12,14,.66)}
.dlg-in{padding:24px 26px 22px}
.dlg h2{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.dlg .lede{font-size:13px;color:var(--ink-3);margin-bottom:18px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px}
.fld input{width:100%;font-family:inherit;font-size:14px;padding:10px 12px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink)}
.fld input:focus{outline:none;border-color:var(--yours-line)}
.fld .hint{font-size:12px;color:var(--ink-3);margin-top:6px;overflow-wrap:anywhere}
.fld .err{font-size:12px;color:var(--danger-t);margin-top:6px;display:none}
.fld.bad input{border-color:rgba(229,112,94,.55)}
.fld.bad .err,.formerr.on,.prog.on{display:block}
.formerr{font-size:13px;color:var(--danger-t);margin-top:14px;display:none}
.dlg-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

.prog{display:none;margin-bottom:26px}
.prog .lab{margin-bottom:12px}
.job{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px 20px;margin-bottom:12px}
.job-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.job-id{flex:1;min-width:0}
.job-id h3{font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.job-id .host{font-size:12.5px;color:var(--ink-3);margin-top:3px;overflow-wrap:anywhere}
.job-err{font-size:13px;color:var(--danger-t);margin-top:12px;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:4px 10px;border-radius:100px;
  border:1px solid var(--line-soft);background:var(--panel-2);color:var(--ink-3)}
.chip.ok{color:var(--yours-t);background:var(--yours-soft);border-color:var(--yours-line)}
.chip.running{color:var(--ink);border-color:var(--ink-3)}
.chip.failed{color:var(--danger-t);background:rgba(229,112,94,.10);border-color:rgba(229,112,94,.30)}
.job-act{display:flex;gap:10px;margin-top:14px}
.job-act .btn{flex:none;padding:8px 18px}

/* =====================================================================
   DATA — the file register and the phase 2 shelf.
   ===================================================================== */
.file-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.file-row:last-child{border-bottom:none}
.file-id{flex:1;min-width:0}
.file-id h4{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.file-id .path{font-size:12.5px;color:var(--ink-3);margin-top:3px;overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums}
.file-when{flex:none;text-align:right;font-size:13px;color:var(--ink-2);min-width:150px}
.file-when .exact{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;
  font-variant-numeric:tabular-nums}
.soon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.soon-card{background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r);
  padding:20px 22px;opacity:.75}
.soon-card h4{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2)}
.soon-card p{font-size:13px;color:var(--ink-3);margin-top:8px;line-height:1.5}
.soon-card .btn{margin-top:16px;width:100%}
@media (max-width:640px){
  /* Three columns do not fit a phone. Name and path take the full width, then
     the age and its pill share the line below. */
  .file-row{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
  .file-id{grid-column:1 / -1}
  .file-when{text-align:left;min-width:0}
  .file-when .exact{display:inline;margin:0 0 0 6px}
}

/* =====================================================================
   CONTENT STATS — app/components/content-stats.js. One scope, .cstats,
   because the same component is drawn inside the Content view and inside
   a client's Content tab and must look identical in both.

   No colour is invented here. Type colours come from the chart tokens in
   JS (fixed per type, never per value) and arrive as inline swatches; the
   only colour in this block is ink and surface.
   ===================================================================== */
.cstats{display:block}

.cstats .cs-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.cstats .cs-who{flex:1;min-width:0}
.cstats .cs-name{font-size:17px;font-weight:600;letter-spacing:-.015em}
.cstats .cs-nets{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.cstats .cs-built{flex:none;font-size:12.5px;color:var(--ink-3);text-align:right}
.cstats .cs-exact{display:block;font-size:11.5px;margin-top:3px;font-variant-numeric:tabular-nums}

/* A band of two or three cells should not stretch across 1280px: the
   figures are small counts, not the board's headline money. */
.cstats .cs-band{grid-template-columns:repeat(auto-fit,minmax(220px,320px));justify-content:start}

.cstats .cs-sec{margin-top:34px}
.cstats.cs-compact .cs-sec{margin-top:28px}
.cstats .cs-sec-h{margin-bottom:16px}
.cstats .cs-sec-h h3{font-size:16px;font-weight:600;letter-spacing:-.015em}
.cstats .cs-note{font-size:13px;color:var(--ink-3);margin-top:5px;max-width:78ch;line-height:1.5}
.cstats .cs-flat{font-size:13.5px;color:var(--ink-3);padding:14px 0}

/* ---- block 1: posts per month by type ---- */
.cstats .cs-charts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.cstats .cs-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:-4px 0 14px}
.cstats .cs-key{display:inline-flex;align-items:center;font-size:12.5px;color:var(--ink-2)}
.cstats .cs-key i{width:10px;height:10px;border-radius:3px;margin-right:7px;flex:none}
/* A named reason is two lines of text, not a chart: it takes the height it
   needs instead of stretching to match the chart beside it. */
.cstats .cs-off{border-style:dashed;background:var(--panel-2);align-self:start}
.cstats .cs-off .state-h{font-size:15px}
.cstats .cs-off .state-note{font-size:13.5px;max-width:52ch}

/* ---- block 2: monthly detail ---- */
.cstats .cs-panel{padding:20px 22px}
.cstats .cs-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.cstats .cs-table{width:100%;border-collapse:collapse}
.cstats .cs-table th{padding:0 10px 10px;white-space:nowrap;vertical-align:bottom}
.cstats .cs-table td{padding:9px 10px;border-bottom:1px solid var(--line-soft);
  font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cstats .cs-table tbody tr:last-child td{border-bottom:none}
.cstats .cs-table th.r,.cstats .cs-table td.r{text-align:right}
.cstats .cs-table .cs-mo{text-align:left;color:var(--ink-2);padding-left:0}
.cstats .cs-table .cs-grp{text-align:center}
.cstats .cs-table .cs-edge{border-left:1px solid var(--line)}
.cstats .cs-table .cs-tot{color:var(--ink);font-weight:600}
.cstats .cs-table .cs-zero{color:var(--ink-3);font-weight:400}
/* A refused month is not a quiet month. It reads differently on purpose. */
.cstats .cs-table .cs-na{color:var(--ink-3);text-align:center;letter-spacing:.06em}
.cstats .cs-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}

/* ---- block 3: content preview ---- */
.cstats .cs-mh{display:flex;align-items:baseline;gap:12px;margin:22px 0 12px}
.cstats .cs-mh h4{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:-.01em}
.cstats .cs-cnt{font-size:12.5px;color:var(--ink-3)}
.cstats .cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:12px}
.cstats .cs-card{display:block;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;min-width:0;
  transition:border-color var(--t),transform var(--t)}
a.cs-card:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.cstats .cs-thumb{width:100%;height:96px;object-fit:cover;background:var(--ground)}
.cstats .cs-text{display:block;padding:10px 10px 0;font-size:11.5px;line-height:1.4;
  color:var(--ink-2);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.cstats .cs-meta{display:flex;align-items:center;gap:7px;padding:9px 10px 0}
.cstats .cs-badge{font-size:10px;font-weight:600;letter-spacing:.02em;
  color:var(--bg);padding:2px 7px;border-radius:4px;flex:none}
.cstats .cs-date{font-size:11px;color:var(--ink-3);margin-left:auto;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cstats .cs-eng{padding:6px 10px 10px;font-size:11px;color:var(--ink-3);line-height:1.45}
.cstats .cs-more{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}

/* =====================================================================
   CONTENT VIEW — #/content/<slug>
   ===================================================================== */
.content .cs-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* =====================================================================
   CLIENTS — the list, then one client's three tabs.
   ===================================================================== */
.clients .cl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:14px;margin-top:24px}
.clients .cl-card{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:20px 22px;min-width:0;transition:border-color var(--t),transform var(--t)}
.clients .cl-card:hover{border-color:var(--yours-line);transform:translateY(-2px)}
.clients .cl-top{display:flex;align-items:flex-start;gap:12px}
.clients .cl-id{flex:1;min-width:0}
.clients .cl-id h3{font-size:16px;font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
.clients .cl-what{font-size:13px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.clients .cl-pills{flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
/* margin-top:auto so the money lines up across cards whose headers are not
   the same height. Scanning down a column of figures is the job here. */
.clients .cl-rows{margin-top:auto;padding-top:16px}
.clients .cl-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--line-soft)}
.clients .cl-row:last-child{border-bottom:none}
.clients .cl-row .l{font-size:13px;color:var(--ink-3)}
.clients .cl-row .v{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.clients .cl-row .v.owed{color:var(--owed-t)}
.clients .cl-row .v.nil{color:var(--ink-3)}
.clients .cl-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.clients .cl-other{margin-top:34px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow)}
.clients .cl-other summary{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:18px 22px;cursor:pointer;list-style:none}
.clients .cl-other summary::-webkit-details-marker{display:none}
.clients .cl-other summary::after{content:'';width:8px;height:8px;margin-left:auto;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--t) var(--ease)}
.clients .cl-other[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.clients .cl-cnt{font-size:12.5px;color:var(--ink-3)}
.clients .cl-lines{padding:0 22px 8px}
.clients .cl-line{display:flex;align-items:center;gap:14px;padding:12px 0;
  border-top:1px solid var(--line-soft)}
.clients .cl-line .n{flex:1;min-width:0;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.clients .cl-line:hover .n{color:var(--ink)}
.clients .cl-line .s{flex:none}
.clients .cl-line .v{flex:none;min-width:110px;text-align:right;font-size:13.5px;color:var(--ink-3)}

/* Archived clients: a quiet link under the list, and the list it opens.
   Not scoped to .clients: the empty Clients page carries it too. */
.cl-arch{margin-top:28px}
.cl-arch-toggle{font-size:13px;color:var(--ink-2);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line)}
.cl-arch-toggle:hover,.cl-arch-toggle:focus-visible{color:var(--ink);text-decoration-color:currentColor}
.cl-arch.open{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px 22px 8px}
.cl-arch-head{display:flex;align-items:baseline;gap:12px;padding-bottom:10px}
.cl-arch-head .cl-arch-toggle{margin-left:auto}
.cl-arch-body{padding-bottom:10px}
.cl-arch-body > .state-empty,.cl-arch-body > .state-error{box-shadow:none;max-width:none}
.cl-arch-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line-soft)}
.cl-arch-row .n{flex:1;min-width:0;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.cl-arch-row .d{flex:none;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .cl-arch.open{padding:16px 16px 6px}
  .cl-arch-row{flex-wrap:wrap;gap:6px 12px}
  .cl-arch-row .n{flex:1 0 100%}
  .cl-arch-row .btn{margin-left:auto}
}

/* ---- one client ---- */
.client .cl-panel{outline-offset:6px}
.client .cl-panel[hidden]{display:none}
/* A grid track is as wide as its widest item's min-content, and an invoice
   table's min-content is wider than a phone. Without this the whole tab,
   profile panel included, is pushed off the right edge. */
.client .stack{grid-template-columns:minmax(0,1fr)}
.client .cl-flat{font-size:13.5px;color:var(--ink-3);line-height:1.5;max-width:72ch}
.client .sec-act{align-items:flex-start;flex-wrap:wrap;justify-content:flex-end;max-width:260px}

.client .pf{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px 32px}
.client .pf-row{display:flex;gap:16px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--line-soft)}
.client .pf-k{flex:none;width:96px;font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.client .pf-v{flex:1;min-width:0;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}

.client .cl-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.client .cl-table{width:100%;border-collapse:collapse}
.client .cl-table th{padding:0 12px 10px;white-space:nowrap}
.client .cl-table th:first-child,.client .cl-table td:first-child{padding-left:0}
.client .cl-table th:last-child,.client .cl-table td:last-child{padding-right:0}
.client .cl-table td{padding:12px;border-bottom:1px solid var(--line-soft);
  font-size:13.5px;vertical-align:top;color:var(--ink-2)}
.client .cl-table tbody tr:last-child td{border-bottom:none}
.client .cl-table th.r,.client .cl-table td.r{text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.client .cl-table td b{color:var(--ink);font-weight:600;white-space:nowrap}
.client .cl-table td small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px;
  line-height:1.45;white-space:normal}
.client .cl-desc{min-width:240px;white-space:normal}
.client .cl-nowrap{white-space:nowrap}
.client .pill.over{color:var(--kept-t);background:var(--kept-soft);border-color:var(--kept-line)}

.client .cl-notes{display:grid;gap:10px}
.client .cl-notes li{font-size:13.5px;color:var(--ink-3);line-height:1.5;padding-left:16px;
  position:relative;max-width:82ch}
.client .cl-notes li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--line);}

.client .doc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.client .doc{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--line);transition:border-color var(--t)}
.client a.doc:hover{border-color:var(--ink-3)}
.client .doc-t{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.client a.doc:hover .doc-t{color:var(--ink)}
.client .doc-m{font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}

.client .pt-top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.client .pt-bar{flex:1;height:8px;border-radius:5px;background:var(--panel-2);
  border:1px solid var(--line);overflow:hidden}
.client .pt-bar span{display:block;height:100%;background:var(--kept)}
.client .pt-pct{flex:none;font-size:15px;font-weight:600;color:var(--kept-t)}
.client .pt-phases{display:grid;gap:2px}
.client .pt-phase{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.client .pt-phase:last-child{border-bottom:none}
.client .pt-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.client .pt-n{width:20px;height:20px;border-radius:6px;background:var(--panel-2);
  border:1px solid var(--line);font-size:11px;color:var(--ink-3);flex:none;
  display:flex;align-items:center;justify-content:center}
.client .pt-h b{font-size:14px;font-weight:600;color:var(--ink)}
.client .pt-meta{font-size:12px;color:var(--ink-3)}
.client .pt-note{font-size:13px;color:var(--ink-3);line-height:1.55;margin-top:8px;max-width:78ch}
.client .pt-snap{margin:0 0 14px}
.client .pt-steps{margin-top:8px;display:grid;gap:5px}
.client .pt-steps li{font-size:12.5px;color:var(--ink-3);line-height:1.45;padding-left:14px;
  position:relative;max-width:78ch}
.client .pt-steps li::before{content:'';position:absolute;left:2px;top:8px;width:4px;height:4px;
  border-radius:50%;background:var(--line)}
.client .pt-due{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.client .pt-due .lab{margin-bottom:12px}
.client .pt-row{display:flex;gap:14px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--line-soft)}
.client .pt-row:last-child{border-bottom:none}
.client .pt-chip{flex:none;width:52px;padding:7px 0;border-radius:9px;text-align:center;
  background:var(--panel-2);border:1px solid var(--line);font-size:10.5px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em}
.client .pt-chip b{display:block;font-size:17px;font-weight:700;color:var(--ink-2);
  letter-spacing:-.02em;text-transform:none}
.client .pt-txt{flex:1;min-width:0}
.client .pt-txt b{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.client .pt-txt small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px;
  line-height:1.5;max-width:78ch}
.client .pt-act{margin-top:20px}

@media (max-width:900px){
  .cstats .cs-charts{grid-template-columns:1fr}
  .clients .cl-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cstats .cs-head{flex-direction:column;gap:10px}
  .cstats .cs-built{text-align:left}
  .cstats .cs-band{grid-template-columns:1fr}
  .cstats .cs-sec{margin-top:28px}
  /* Three across is the most a phone can show without the thumbnails
     becoming unreadable stamps. */
  .cstats .cs-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .cstats .cs-meta{gap:4px;padding:7px 7px 0;flex-wrap:wrap}
  .cstats .cs-badge{font-size:9.5px;padding:2px 5px}
  /* The day still matters when you are scanning what went out, so it takes
     its own line rather than disappearing. */
  .cstats .cs-date{width:100%;margin:2px 0 0;font-size:10.5px}
  .cstats .cs-eng{padding:5px 7px 8px;font-size:10.5px}
  /* A view action next to a wrapping title squeezes the title into a column
     three words wide. Below 640 it takes its own line. */
  .content .sec-head,.client .sec-head{flex-wrap:wrap}
  .content .sec-act,.client .sec-act{flex:1 0 100%;justify-content:flex-start;margin-top:2px}
  .clients .cl-line{flex-wrap:wrap;gap:8px 12px}
  .clients .cl-line .v{min-width:0;margin-left:auto}
  .client .pf{grid-template-columns:1fr}
  .client .pf-row{flex-direction:column;gap:2px}
  .client .pf-k{width:auto}
  .client .sec-act{max-width:none}
}

/* =====================================================================
   FINANCE (.fin) and SALES (.sales) — the four finance views and the two
   sales views. Every rule below is scoped to one of those two classes, so
   nothing here can reach the board, the clients views or anything another
   view owns. Added 2026-09-19.

   Colour discipline is unchanged from the rest of the file: amber for what
   is owed or going out, green for what is ours or in, blue for operational,
   grey for void and for what is gone. Nothing is coloured to look varied.
   ===================================================================== */

/* ---------------- tables wider than their panel ---------------- */
/* The table scrolls, never the page. A sideways page loses the reader's
   place in the app and pushes the sidebar off screen. */
.fin .tbl-wrap,.sales .tbl-wrap{overflow-x:auto;overscroll-behavior-x:contain}
.fin .tbl-wrap table,.sales .tbl-wrap table{min-width:560px}
.fin .tbl-wrap.wide table,.sales .tbl-wrap.wide table{min-width:880px}

/* The shared table rules set `padding:14px 0`, which leaves adjacent columns
   touching once a cell fills its column. These carry the body.app prefix on
   purpose: without it they lose to `body.app tbody td` on specificity and the
   columns run together. */
body.app .fin tbody td,body.app .sales tbody td,
body.app .fin thead th,body.app .sales thead th{padding-right:18px}
body.app .fin tbody td:last-child,body.app .sales tbody td:last-child,
body.app .fin thead th:last-child,body.app .sales thead th:last-child{padding-right:0}

/* A half-width panel cannot hold an 880px table without pushing the grid out
   of the page, so inside a two-column section the table scrolls sooner. */
.fin .grid2,.sales .grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fin .grid2 > *,.sales .grid2 > *{min-width:0}
.fin .grid2 .tbl-wrap table,.sales .grid2 .tbl-wrap table{min-width:430px}

/* A chart card is already a surface. A second bordered box inside it for the
   empty state reads as a panel in a panel. */
.fin .chart-card > .state-empty,.sales .chart-card > .state-empty,
.fin .chart-box .state-empty,.sales .chart-box .state-empty{
  background:none;border:0;box-shadow:none;padding:0;max-width:none}

.fin td small,.sales td small{display:block;font-size:11.5px;color:var(--ink-3);
  margin-top:4px;line-height:1.45;font-weight:400;letter-spacing:0;text-transform:none}
.fin td.desc,.sales td.desc{color:var(--ink-2);min-width:230px;max-width:520px}
.fin td.no,.sales td.no{font-weight:600;white-space:nowrap}
.fin td.strong,.sales td.strong{font-weight:600;color:var(--ink)}
.fin td.owed,.sales td.owed{color:var(--owed-t)}
.fin td.yours,.sales td.yours{color:var(--yours-t)}

/* Sub-total and total rows read as arithmetic, not as another record. */
.fin tr.sum td,.sales tr.sum td{background:var(--panel-2);font-weight:600}
.fin tr.grp td,.sales tr.grp td{background:var(--panel-2);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding:12px 18px 12px 0}
.fin tr.tot td,.sales tr.tot td{border-top:1px solid var(--line);border-bottom:none;
  font-weight:700;padding-top:16px}
.fin tr.tot td.owed{color:var(--owed-t)}
.fin tr.tot td.yours{color:var(--yours-t)}
.fin tr.fc td{color:var(--ink-3)}
.fin tr.paid td{background:var(--yours-soft)}

/* A void invoice stays in the sequence and out of every total. */
.fin tr.void td{color:var(--ink-3)}
.fin tr.void td.no,.fin tr.void td.r{text-decoration:line-through;text-decoration-thickness:1.5px}

/* ---------------- sortable headers ---------------- */
.fin th.s,.sales th.s{padding-top:0;padding-bottom:12px}
.fin th.s button,.sales th.s button{appearance:none;background:none;border:0;padding:0;
  font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:color var(--t)}
.fin th.s button:hover,.sales th.s button:hover{color:var(--ink-2)}
.fin th.s.r button,.sales th.s.r button{width:100%;justify-content:flex-end}
.fin th.s .ar,.sales th.s .ar{font-size:8px;opacity:0;transition:opacity var(--t)}
.fin th.s button:hover .ar,.sales th.s button:hover .ar{opacity:.45}
.fin th[aria-sort],.sales th[aria-sort]{color:var(--ink-2) !important}
.fin th[aria-sort] .ar,.sales th[aria-sort] .ar{opacity:1;color:var(--yours-t)}

/* ---------------- filter row ---------------- */
.fin .filters,.sales .filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  margin-bottom:18px}
.fin .fltr,.sales .fltr{display:flex;flex-direction:column;gap:7px;min-width:0}
.fin .fltr label,.sales .fltr label{font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.fin .fltr select,.sales .fltr select{font-family:inherit;font-size:13.5px;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  min-width:172px;max-width:100%}
.fin .fltr select:hover,.sales .fltr select:hover{border-color:var(--ink-3)}
.fin .fltr .btn,.sales .fltr .btn{padding:9px 16px}
.fin .fcount,.sales .fcount{margin-left:auto;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;padding-bottom:10px}

/* ---------------- label and value lines ---------------- */
.fin .lines,.sales .lines{margin-top:2px}
.fin .ln,.sales .ln{display:grid;grid-template-columns:160px minmax(0,1fr);gap:4px 18px;
  padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;align-items:baseline}
.fin .ln:last-child,.sales .ln:last-child{border-bottom:none}
.fin .ln .l,.sales .ln .l{color:var(--ink-3)}
.fin .ln .v,.sales .ln .v{color:var(--ink-2);overflow-wrap:anywhere}
.fin .ln .v b,.sales .ln .v b{color:var(--ink);font-weight:600}
.fin .ln small,.sales .ln small{display:block;font-size:11.5px;color:var(--ink-3);
  margin-top:4px;line-height:1.45}

.fin .prose,.sales .prose{font-size:13.5px;color:var(--ink-3);line-height:1.6;max-width:80ch}
.fin .prose p + p,.sales .prose p + p{margin-top:10px}
.fin .prose b,.sales .prose b{color:var(--ink-2);font-weight:600}
.fin .prose code,.sales .prose code{font-family:inherit;font-size:12.5px;color:var(--ink-2);
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:6px;padding:1px 6px}

.fin .sub-h,.sales .sub-h{font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:26px 0 12px}
.fin .sub-h:first-child,.sales .sub-h:first-child{margin-top:0}

.fin .sec-loading,.sales .sec-loading{font-size:13.5px;color:var(--ink-3);padding:20px 0}
.fin .chart-note,.sales .chart-note{font-size:12.5px;color:var(--ink-3);margin:-8px 0 14px}

/* ---------------- record cards: agreements and leads ---------------- */
.fin .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.fin .rec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px 24px;min-width:0}
.fin .rec-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.fin .rec h3{flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:-.01em;
  overflow-wrap:anywhere}
.fin .rec .head{font-size:14.5px;font-weight:600;color:var(--ink-2);margin-top:10px}
.fin .rec .lines{margin-top:14px;padding-top:8px;border-top:1px solid var(--line-soft)}

/* ---------------- VAT quarter cards ---------------- */
.fin .qtr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));gap:14px}
.fin .qtr{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px;min-width:0}
.fin .qtr.ok{border-left-color:var(--yours-t)}
.fin .qtr.warn{border-left-color:var(--owed-t)}
.fin .qtr-top{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.fin .qtr h3{flex:1;min-width:0;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.fin .qtr .amt{font-size:26px;font-weight:700;letter-spacing:-.025em;margin-top:12px;
  font-variant-numeric:tabular-nums}
.fin .qtr.ok .amt{color:var(--yours-t)}
.fin .qtr.warn .amt{color:var(--owed-t)}
.fin .qtr .rows{margin-top:14px}
.fin .kvrow{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid var(--line-soft);font-size:13px}
.fin .kvrow:last-child{border-bottom:none}
.fin .kvrow .l{color:var(--ink-3)}
.fin .kvrow .v{color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
.fin .qtr-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.fin .qtr-note > summary{list-style:none;cursor:pointer;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:8px}
.fin .qtr-note > summary::-webkit-details-marker{display:none}
/* Without a mark this reads as a heading rather than something to open. */
.fin .qtr-note > summary::after{content:'+';margin-left:auto;font-size:14px;line-height:1}
.fin .qtr-note[open] > summary::after{content:'\2212'}
.fin .qtr-note > summary:hover{color:var(--ink-2)}
.fin .qtr-note p{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:10px}

/* ---------------- accordion: the VAT 3 filing guide ---------------- */
.fin details.acc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);margin-bottom:12px}
.fin details.acc > summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.fin details.acc > summary::-webkit-details-marker{display:none}
.fin details.acc > summary:hover{background:rgba(255,255,255,.03)}
.fin details.acc > summary .t{flex:1;min-width:0;font-size:15px;font-weight:600;
  letter-spacing:-.01em}
.fin details.acc > summary .cv{flex:none;width:14px;height:14px;color:var(--ink-3);
  transition:transform var(--t) var(--ease)}
.fin details.acc > summary .cv svg{width:14px;height:14px}
.fin details.acc[open] > summary .cv{transform:rotate(90deg)}
.fin details.acc[open] > summary{border-bottom:1px solid var(--line)}
.fin .acc-body{padding:22px}

/* Copy and paste list: one row per box on the MRA form. */
.fin .cp-row{display:flex;align-items:baseline;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--line-soft)}
.fin .cp-row:last-child{border-bottom:none}
.fin .cp-row .no{flex:none;width:36px;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.fin .cp-row .lb{flex:1;min-width:0;font-size:13.5px;color:var(--ink-2)}
.fin .cp-row .vals{flex:none;display:flex;gap:8px;align-items:baseline}
.fin .cpv{appearance:none;font-family:inherit;font-size:13px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink);background:var(--panel-2);
  border:1px solid var(--line-soft);border-radius:7px;padding:4px 10px;cursor:pointer;
  min-width:86px;text-align:right;
  transition:border-color var(--t),color var(--t),background var(--t)}
.fin .cpv:hover{border-color:var(--ink-3)}
.fin .cpv.copied{color:var(--yours-t);background:var(--yours-soft);border-color:var(--yours-line)}
.fin span.cpv.na{color:var(--ink-3);background:transparent;border-color:transparent;cursor:default}

/* An alert on a filed return is a warning about money, so it wears amber. */
.fin .note-warn{background:var(--owed-soft);border:1px solid var(--owed-line);
  border-radius:10px;padding:15px 17px;margin-bottom:18px}
.fin .note-warn .nt{font-size:13px;font-weight:600;color:var(--owed-t);margin-bottom:8px}
.fin .note-warn p{font-size:13px;color:var(--ink-2);line-height:1.55}
.fin .note-warn p + p{margin-top:8px}

/* ---------------- bank: the manifest, key by key ---------------- */
.fin .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:0 26px}
.fin .fact{padding:13px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.fin .fact .l{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.fin .fact .v{font-size:16px;font-weight:600;margin-top:6px;overflow-wrap:anywhere}
.fin .fact.wide{grid-column:1 / -1}
.fin .fact .facts{margin-top:4px}
.fin .fact .facts .fact:last-child{border-bottom:none}
.fin .fact ul{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px}
.fin .fact li{font-size:12px;color:var(--ink-3);background:var(--panel-2);
  border:1px solid var(--line-soft);border-radius:100px;padding:3px 11px}

.fin .upload-card{display:flex;gap:20px;align-items:flex-start}
.fin .up-ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--panel-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--ink-3)}
.fin .up-ic svg{width:19px;height:19px}
.fin .up-tx{flex:1;min-width:0}
.fin .up-tx h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.fin .up-tx p{font-size:13.5px;color:var(--ink-3);line-height:1.6;margin-top:10px;max-width:72ch}
.fin .up-tx code{font-family:inherit;font-size:12.5px;color:var(--ink-2);
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:6px;padding:1px 6px}
.fin .up-tx .btn{margin-top:18px}
.fin .up-why{font-size:12.5px;color:var(--ink-3);margin-top:12px}

/* =====================================================================
   SALES
   ===================================================================== */

/* Six stat cards read as five-plus-an-orphan under the page-wide auto-fit
   band, so this view fixes the column count at each width instead of
   letting the minimum card width decide it. */
.sales .statband{grid-template-columns:repeat(6,1fr)}
@media (max-width:1199px){
  .sales .statband{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:899px){
  .sales .statband{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:599px){
  .sales .statband{grid-template-columns:1fr}
}

.sales .ar-panel{margin-top:16px}
.sales .ar-note{max-width:88ch}
.sales .ar-note > summary{list-style:none;cursor:pointer;font-size:13.5px;color:var(--ink-2);
  line-height:1.6}
.sales .ar-note > summary::-webkit-details-marker{display:none}
.sales .ar-note > summary:hover{color:var(--ink)}
.sales .ar-note > .dim{margin-top:10px;font-size:13.5px;line-height:1.6}

/* The board. Seven stages will not fit across a laptop without a sideways
   scroll that hides the last three, so the columns wrap instead and stay in
   stage order, reading left to right then down. On a phone they stack. */
.sales .kan{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:12px;
  align-items:start}
.sales .col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px;min-width:0;display:flex;flex-direction:column;gap:10px}
.sales .col-h{display:flex;align-items:baseline;gap:9px;padding-bottom:11px;
  border-bottom:1px solid var(--line-soft)}
.sales .col-h .nm{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2)}
.sales .col-h .ct{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sales .col-h .vl{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.sales .col.g-won .col-h .nm{color:var(--yours-t)}
.sales .col.g-open .col-h .nm{color:var(--kept-t)}
.sales .col .none{font-size:12.5px;color:var(--ink-3);padding:4px 0 2px}
.sales .col-tog{appearance:none;background:none;border:0;padding:0;margin:-4px -6px -4px 0;
  width:24px;height:24px;flex:none;align-self:center;display:grid;place-items:center;
  border-radius:7px;color:var(--ink-3);cursor:pointer;transition:color var(--t),background var(--t)}
.sales .col-tog:hover{color:var(--ink);background:var(--panel-2)}
.sales .col-tog svg{width:14px;height:14px;transform:rotate(180deg)}
.sales .kan.has-min{display:flex;flex-wrap:wrap}
.sales .kan.has-min > .col{flex:1 1 208px;max-width:360px}
.sales .kan.has-min > .col.min{flex:0 0 56px}
.sales .col.min{position:relative;padding:14px 0;align-items:center}
.sales .col.min > .deal,.sales .col.min > .none{display:none}
.sales .col.min .col-h{writing-mode:vertical-rl;align-items:center;gap:10px;padding:0;border:0;
  white-space:nowrap}
.sales .col.min .col-h .vl{margin-left:0}
.sales .col.min .col-h .vl:empty{display:none}
.sales .col.min .col-tog{order:-1;margin:0}
.sales .col.min .col-tog svg{transform:none}
.sales .col.min .col-tog::after{content:'';position:absolute;inset:0;border-radius:var(--r)}
.sales .col.min:hover .col-tog{color:var(--ink)}
.sales .col.min .col-tog:focus-visible{outline:none}
.sales .col.min .col-tog:focus-visible::after{outline:2px solid var(--yours-t);outline-offset:3px}

.sales .deal{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;min-width:0}
.sales .deal.hold{border-style:dashed;opacity:.72}
.sales .deal-top{display:flex;align-items:flex-start;gap:8px}
.sales .deal .nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  overflow-wrap:anywhere}
.sales .deal .v{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-top:9px;
  font-variant-numeric:tabular-nums}
.sales .deal .sub{font-size:12px;color:var(--ink-3);margin-top:4px}
.sales .deal .held{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.sales .deal .held .since{font-size:11.5px;color:var(--ink-3)}

/* The funnel. One bar per step, the drop-off named between them. */
.sales .funnel{display:grid;gap:4px}
.sales .fstep{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:9px;
  background:var(--panel-2)}
.sales .fstep .fl{flex:none;min-width:92px;font-size:13px;font-weight:600;color:var(--ink-2)}
.sales .ftrack{flex:1;min-width:0;height:30px;background:var(--ground);border-radius:5px;
  overflow:hidden}
/* The soft tokens sit at 9% alpha, which vanishes against the track at this
   size. The bar carries the reading, so it takes a solid fill held back by
   opacity rather than a wash nobody can see. */
.sales .fbar{height:30px;border-radius:5px;background:var(--kept);opacity:.52;
  border-left:3px solid var(--kept-t)}
.sales .fstep.g-won .fbar{background:var(--yours);border-left-color:var(--yours-t)}
.sales .fstats{flex:none;text-align:right;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.sales .fstats b{display:block;color:var(--ink);font-weight:600;font-size:13px}
.sales .frate{font-size:11.5px;color:var(--ink-3);padding:2px 0 2px 108px}

/* The deals table, with the detail opening under the row it belongs to. */
.sales .exp{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:14.5px;
  color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:9px;text-align:left;
  transition:color var(--t)}
.sales .exp:hover{color:var(--yours-t)}
.sales .exp .cv{flex:none;width:13px;height:13px;color:var(--ink-3);
  transition:transform var(--t) var(--ease)}
.sales .exp .cv svg{width:13px;height:13px}
.sales .exp[aria-expanded="true"] .cv{transform:rotate(90deg);color:var(--yours-t)}
.sales tr.row.on td{border-bottom-color:transparent}
.sales tr.det td{padding:0;background:var(--panel-2)}
.sales tr.det:hover td{background:var(--panel-2) !important}
.sales .det-in{padding:18px 20px 22px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px 28px}
.sales .det-in .sub-h{margin-top:0}
.sales .det-in .lines{margin-top:0}
.sales .det-in .ln{grid-template-columns:118px minmax(0,1fr)}
.sales .det-in .next{font-size:13px;color:var(--ink-2);line-height:1.6}
.sales .det-in .notes{font-size:12.5px;line-height:1.6;margin-top:10px}
.sales .det-in .muted{font-size:13px}
.sales .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.sales .chips li{font-size:12px;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);border-radius:100px;padding:4px 11px}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .fin .card-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  /* A kanban does not survive a phone. The same columns, stacked, keep the
     grouping without any sideways scroll. */
  .sales .kan{grid-template-columns:1fr}
  .sales .kan.has-min{display:grid}
  .sales .kan.has-min > .col{max-width:none}
  .sales .col.min{padding:14px 16px;align-items:stretch}
  .sales .col.min .col-h{writing-mode:horizontal-tb;align-items:baseline;gap:9px}
  .sales .col.min .col-h .vl{margin-left:auto}
  .sales .col.min .col-h .vl:empty{display:block}
  .sales .col.min .col-tog{order:0;margin:-4px -6px -4px 0}
  .sales .col-tog svg{transform:rotate(-90deg)}
  .sales .col.min .col-tog svg{transform:rotate(90deg)}
  .fin .upload-card{flex-direction:column;gap:14px}
}
@media (max-width:640px){
  .fin .ln,.sales .ln{grid-template-columns:1fr;gap:3px}
  .fin .ln .l,.sales .ln .l{font-size:12px}
  .fin .filters,.sales .filters{gap:10px}
  .fin .fltr,.sales .fltr{flex:1 1 100%}
  .fin .fltr select,.sales .fltr select{min-width:0;width:100%}
  .fin .fltr .btn,.sales .fltr .btn{width:100%}
  .fin .fcount,.sales .fcount{margin-left:0;padding-bottom:0}
  .fin .qtr-grid{grid-template-columns:1fr}
  .fin .facts{grid-template-columns:1fr}
  .fin .acc-body{padding:18px 16px}
  .fin details.acc > summary{padding:16px}
  .fin .cp-row{flex-wrap:wrap}
  .fin .cp-row .lb{flex:1 1 60%}
  .fin .cp-row .vals{margin-left:auto}
  .fin .cpv{min-width:72px}
  .sales .fstep{flex-wrap:wrap;gap:10px 14px}
  .sales .ftrack{order:3;flex:1 1 100%}
  .sales .fstats{margin-left:auto}
  .sales .frate{padding-left:0}
  .sales .det-in{padding:16px 14px 20px;grid-template-columns:1fr}
}
.sales .deal .v.unpriced{font-size:13.5px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.fin tr.grp td{border-top:1px solid var(--line)}

/* =====================================================================
   SIGN IN and the signed-in user (2026-09-28)
   ===================================================================== */
body.login-page{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--ground)}
.login-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:28px 26px 24px}
.login-logo{display:block;margin-bottom:22px;height:26px;width:auto}
.login-card h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.login-card .lede{font-size:13px;color:var(--ink-3);margin-bottom:20px}
.login-go{width:100%;margin-top:6px;padding:11px 16px}
.topbar-user{display:flex;align-items:center;gap:10px;margin-left:12px;flex:none}
.topbar-user .who{font-size:13px;font-weight:600;color:var(--ink-2)}
.btn.sm{padding:6px 12px;font-size:12px}
@media (max-width:640px){.topbar-user .who{display:none}}

/* =====================================================================
   WRITES: drawers, forms, toasts, contacts (2026-09-28)
   ===================================================================== */
dialog.drawer{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:100dvh;
  width:min(520px,100vw);border:0;border-left:1px solid var(--line);background:var(--panel);
  color:var(--ink);padding:0;box-shadow:-24px 0 60px rgba(0,0,0,.45);display:flex;flex-direction:column}
dialog.drawer:not([open]){display:none}
dialog.drawer::backdrop{background:rgba(10,12,14,.55)}
.drawer-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.drawer-head h2{flex:1;font-size:17px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.drawer-x{width:34px;height:34px}
.drawer-body{flex:1;overflow:auto;padding:20px 22px 24px}
.fld select,.fld textarea{width:100%;font-family:inherit;font-size:14px;padding:10px 12px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink)}
.fld textarea{resize:vertical;line-height:1.5}
.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--yours-line)}
.fld.bad select,.fld.bad textarea{border-color:rgba(229,112,94,.55)}
.fld .req{color:var(--owed-t)}
.fld.check label{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer}
.fld.check input{width:18px;height:18px;accent-color:var(--yours)}
.form-foot{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.form-extra{flex:1;display:flex;gap:10px}
.btn.danger{color:var(--danger-t);border-color:rgba(229,112,94,.35);background:transparent}
.btn.danger:hover{border-color:var(--danger-t)}
.toasts{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:8px;
  max-width:min(380px,calc(100vw - 36px))}
.toast{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--yours-t);
  border-radius:10px;padding:11px 14px;font-size:13.5px;color:var(--ink);box-shadow:var(--shadow);cursor:pointer}
.toast.bad{border-left-color:var(--danger-t)}
.contact-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.contact-row:last-of-type{border-bottom:none}
.contact-id{flex:1;min-width:0}
.contact-id small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px;overflow-wrap:anywhere}
.row-actions{display:flex;gap:8px;flex:none}
.block-act{margin-top:14px}
.pf-v.pre{white-space:pre-line}
@media (max-width:640px){
  .drawer-body{padding:16px}
  .contact-row{flex-wrap:wrap}
  .form-foot{flex-wrap:wrap}
}

.sales .deal[draggable="true"]{cursor:grab}
.sales .deal.dragging{opacity:.45}
.sales .col.drop-ok{border-color:var(--yours-line);background:var(--yours-soft)}
.deal-open{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer}
.deal-open:hover,.deal-open:focus-visible{text-decoration:underline}
.move-bar{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:16px;
  border-bottom:1px solid var(--line-soft)}
.move-bar label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.move-bar select{flex:1;font-family:inherit;font-size:14px;padding:8px 10px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink)}
.det-act{margin-bottom:12px}
.act-row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.act-row:last-child{border-bottom:none}
.act-when{font-size:13px;color:var(--ink-2)}
.act-when small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px;font-variant-numeric:tabular-nums}
.act-what{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.act-ch{margin:6px 0 0 18px;font-size:12.5px;color:var(--ink-3)}
@media (max-width:640px){.act-row{grid-template-columns:1fr;gap:4px}}