/* ============ Meridian ============
   The design system: see the Meridian spec. Two type families with separate
   jobs, one held-back accent (brass), desaturated series colours, hairlines
   instead of cards, square panels. Light is the default theme; dark is the
   toggle. Both fonts are served from this app — the Content-Security-Policy
   allows fonts from 'self' only, and it keeps visitors' IPs away from Google. */
:root {
  /* surfaces */
  --ground: #F4F3EF;
  --panel: #FBFAF7;
  --raised: #FFFFFF;
  /* lines */
  --hair: #DFDCD4;
  --hair-soft: #E9E6DF;
  /* text */
  --ink: #14181B;
  --muted: #6C757B;
  --dim: #97A0A6;
  /* data series, in priority order; brass is the one accent */
  --brass: #937432;
  --sage: #3F6F65;
  --slate: #4A6187;
  --rose: #8E504B;
  --up: #3F6F65;
  --down: #8E504B;

  /* The app's working names, mapped onto Meridian so every existing rule
     follows the system without being renamed. */
  --page: var(--ground);
  --surface: var(--panel);
  --ink-2: #454D52;
  --grid: var(--hair-soft);
  --baseline: var(--hair);
  --border: var(--hair);
  --sidebar: var(--ground);
  --series-1: var(--brass);
  --series-2: var(--sage);
  --series-3: var(--slate);
  --series-4: var(--rose);
  --good: var(--up);
  --bad: var(--down);
  --warn: var(--brass);
  /* Interactive state is ink, not a brand colour: the accent is for data. */
  --accent: var(--ink);
  --accent-2: var(--sage);
  --accent-grad: var(--ink);
  --accent-soft: rgba(20, 24, 27, 0.055);
  --focus: var(--brass);

  /* The reader's own system font: San Francisco on a Mac, Segoe on Windows,
     Roboto on Android. Nothing to download, and each platform's own face is
     the one its users read fastest. Display figures use the same family at a
     heavier weight rather than a second, thinner one. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--font);

  /* Panels are square; only tooltips, popovers and bar ends are rounded. */
  --r-lg: 0;
  --r-md: 0;
  --r-sm: 3px;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 18px 44px rgba(20, 24, 27, 0.13);
  --glass: var(--panel);
  /* motion: answers an action, never decorates */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: var(--ease);
  --dur: 180ms;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: #0B0F12;
  --panel: #12171B;
  --raised: #171E23;
  --hair: #222A30;
  --hair-soft: #1A2126;
  --ink: #EDE9E2;
  --muted: #7E888F;
  --dim: #566068;
  --brass: #C3A46B;
  --sage: #6F9A90;
  --slate: #7E93B5;
  --rose: #AD7C78;
  --up: #6F9A90;
  --down: #AD7C78;
  --ink-2: #B8B4AC;
  --accent-soft: rgba(237, 233, 226, 0.07);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* The browser's own `[hidden] { display: none }` is a user-agent rule, so ANY
   author rule that sets `display` outranks it and the element stays on screen
   with the attribute set. Every `el.hidden = true` in app.js then silently does
   nothing. This one line settles it for the whole stylesheet; without it each
   class that sets `display` needs its own `.x[hidden] { display: none }` guard
   and the ones nobody remembers leak into the UI. */
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }
body { 
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  /* Tabular figures everywhere: digits sit in fixed columns, so a number
     that updates never jitters and columns of figures line up. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
 }
::selection { background: color-mix(in srgb, var(--brass) 22%, transparent); }
svg text { font-variant-numeric: tabular-nums; }
/* slim, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--baseline) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--baseline); border-radius: var(--r-sm); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }
/* accessible focus ring everywhere */
:focus-visible { outline: 1px solid var(--focus); outline-offset: 4px; }

.app { display: flex; flex-direction: column; min-height: 100vh; }
.shell { display: flex; flex: 1; min-height: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Nav buttons (shared by the rail) ---- */

/* Scoped to the rail. This was a bare `nav {}` and so also hit the top bar's
   <nav class="tb-tabs">, stacking the four section tabs vertically: .tb-tabs
   never declared a flex-direction, so there was nothing for its higher
   specificity to win. Element selectors that set layout do not stay put. */
#nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { 
  position: relative; overflow: hidden;
  text-align: left;
  background: none; border: none;
  padding: 9px 10px 9px 16px; border-radius: var(--r-sm);
  font: inherit; font-size: 13.5px; color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
 }

.nav-item:hover { background: var(--accent-soft); color: var(--ink); }

.nav-item.active { background: var(--accent-soft); color: var(--ink); font-weight: 500; }

.nav-item:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

.primary-btn.small { padding: 8px 12px; font-size: 12.5px; text-align: center; }
.conn { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.conn .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.conn .dot.on { background: var(--good); }
.conn .dot.off { background: var(--bad); }
.conn .dot.demo { background: var(--warn); }
.conn .dot.warn { background: var(--warn); }
.conn-warn { display: block; margin-top: 4px; color: var(--warn); }

/* Connections panel (Connect view) */
.conn-panel h3 { margin: 0 0 6px; font-size: 15px; }
.conn-panel .hint { margin: 0 0 14px; }
.conn-table td { vertical-align: top; }
.conn-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.conn-sub.err { color: var(--bad); max-width: 34rem; }
.conn-badge { display: inline-block; padding: 2px 9px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 600; border: 1px solid transparent; }
.conn-badge.live { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.conn-badge.warn, .conn-badge.unlinked { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.conn-badge.expired { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.conn-actions-cell { white-space: nowrap; }
.conn-actions-cell button { margin: 0 0 4px 4px; }
.ghost-btn.small { padding: 6px 10px; font-size: 12px; }
.ghost-btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.pill { display: inline-block; padding: 1px 7px; border-radius: var(--r-sm); font-size: 11px; font-weight: 500; color: var(--ink-2); background: var(--hair-soft); vertical-align: middle; }
.mono { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-2); }
.warn-text { color: var(--warn); }
.connect-steps { margin: 4px 0 18px; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }
/* Inline action inside a banner ("Reconnect QuickBooks") */
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
            color: inherit; text-decoration: underline; cursor: pointer; }
.banner-detail { display: block; margin-top: 4px; font-size: 12px; opacity: 0.85; }
.conn a { color: var(--accent); }
.ghost-btn { 
  position: relative;
  background: transparent; border: 1px solid var(--hair); border-radius: var(--r-sm);
  padding: 8px 13px; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
 }
.ghost-btn:hover { border-color: var(--muted); color: var(--ink); }


/* ---- Main ---- */
.main { flex: 1; min-width: 0; padding: 30px 26px 64px; max-width: 1040px; }
.topbar { 
  position: sticky; top: 52px; z-index: 40;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin-bottom: 28px; flex-wrap: wrap;
  padding: 14px 0 16px;
  background: var(--page); border-bottom: 1px solid var(--hair);
 }

/* Below this the title and its controls cannot share a line without the
   controls squeezing, so they stack and the controls take the full width. */
@media (max-width: 1000px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .controls { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .topbar { padding: 10px 0 14px; }
  .controls > * { flex: 1 1 140px; }        /* fill the row instead of leaving gaps */
  .controls > button { flex: 1 1 auto; }
}
h1 { 
  font-family: var(--display); font-size: 1.375rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.015em; margin: 0 0 4px; color: var(--ink);
 }
.company-line { margin: 0; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); }
.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Controls keep their natural width and wrap to a new line rather than
   squeezing. A squeezed <select> also narrows its own dropdown, which is how
   the period list came to read "This mont…", "Last mont…". */
.controls > * { flex: 0 0 auto; }
#preset { min-width: 148px; }
#month, #compare, #statement, #detail { min-width: 124px; }
#method { min-width: 104px; }
select {
  appearance: none; -webkit-appearance: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  padding: 7px 30px 7px 11px; font: inherit; font-size: 13px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23848ea3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
select:hover { border-color: var(--muted); }
select:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }

/* Custom period range: month inputs that sit beside the period select and must
   read as part of the same control group. */
.range-input {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 10px; font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums; min-width: 0;
}
.range-input:hover { border-color: var(--baseline); }
.range-input:focus { outline: 1px solid var(--focus); outline-offset: 2px; }
.range-dash { color: var(--muted); font-size: 13px; }

.banner { 
  background: transparent; border: 0; border-left: 2px solid var(--warn);
  padding: 4px 0 4px 14px; font-size: 13px; color: var(--ink-2); margin-bottom: 24px;
 }
.banner a { color: var(--ink); }
.banner.error { border-left-color: var(--bad); }

/* ---- KPI tiles ---- */
.kpis { 
  display: grid; grid-template-columns: 1fr; gap: 1px; margin-bottom: 28px;
  background: var(--hair-soft); border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft);
 }
@media (min-width: 620px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  /* An odd tile out spans the row rather than leaving a hairline-coloured hole. */
  .kpis > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .kpis > .tile:last-child:nth-child(odd) { grid-column: auto; }
}
.tile { 
  position: relative; background: var(--page); border-radius: 0;
  padding: 18px 22px 20px;
 }










.tile .label { font-size: 0.76rem; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; }
.tile .value { font-family: var(--display); font-size: 1.45rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
.tile .sub { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.delta { font-weight: 500; white-space: nowrap; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }

/* ---- Cards & charts ---- */
.card { 
  background: var(--panel); border: 1px solid var(--hair-soft); border-radius: 0;
  padding: 24px 24px 20px; margin-bottom: 28px;
 }

.card h2 { font-size: 0.84rem; font-weight: 500; letter-spacing: 0.01em; margin: 0 0 2px; }


.card .desc { font-size: 0.76rem; letter-spacing: 0.02em; color: var(--muted); margin: 0 0 16px; }
.chart-box { position: relative; height: 290px; }

/* The chart tooltip is a page element, not canvas paint: a canvas tooltip
   cannot carry a shadow, a border radius and the page's own font at once, and
   it gets clipped by the chart's own box. Positioned fixed, so it is never
   trapped inside a scrolling panel. */
.chart-tip {
  /* Above the modals that hold charts (95), below the load bar and toasts. */
  position: fixed; top: 0; left: 0; z-index: 250; pointer-events: none;
  min-width: 150px; max-width: 290px; padding: 10px 12px;
  background: var(--raised); border: 1px solid var(--hair); border-radius: 4px;
  box-shadow: var(--shadow-3);
  font-size: 12px; line-height: 1.5; color: var(--ink);
  opacity: 0; transform: translateY(3px);
  transition: opacity 120ms var(--ease), transform 120ms var(--ease);
}
.chart-tip.on { opacity: 1; transform: none; }
.chart-tip .ct-title { font-size: 11px; color: var(--muted); margin-bottom: 7px; letter-spacing: 0.02em; }
.chart-tip .ct-row { display: flex; align-items: center; gap: 9px; }
.chart-tip .ct-row + .ct-row { margin-top: 5px; }
.chart-tip .ct-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.chart-tip .ct-k { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-tip .ct-v { margin-left: auto; font-weight: 650; white-space: nowrap; }
.grid2 { 
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 28px;
  background: var(--hair-soft); border: 1px solid var(--hair-soft);
 }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
/* A grid item's default `min-width: auto` floors its track at the item's
   min-content width. A chart <canvas> carries an intrinsic 300px, so on a
   phone these tracks refuse to shrink below ~342px and push the page wider
   than the screen. Letting them shrink to 0 hands the real width back to the
   viewport; Chart.js then sizes each canvas to its container. */
.grid2 > *, .prof-grid > * { min-width: 0; }
.grid2 > .card, .prof-grid > .card { margin: 0; border: 0; }
@media (max-width: 720px) {
  .app { flex-direction: column; }
}

/* ---- Statement table ---- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 12px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th:first-child, td:first-child {
  text-align: left; font-variant-numeric: normal; white-space: normal;
  min-width: 220px; position: sticky; left: 0; background: var(--surface);
}
thead th { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); border-bottom: 1px solid var(--hair); }
tbody tr { border-bottom: 1px solid var(--hair-soft); }
tr.kind-section td { font-weight: 600; padding-top: 16px; }
tr.kind-summary td { font-weight: 600; border-top: 1px solid var(--hair); }
tr.kind-data td:first-child { color: var(--ink-2); }
td.neg { color: var(--bad); }

.pagefoot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--hair-soft); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--dim); }

/* ---- Connect screen ---- */
.connect-card { max-width: 560px; padding: 28px; }
.connect-card p { color: var(--ink-2); line-height: 1.55; }
.connect-card code { background: var(--border); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.primary-btn { 
  display: inline-block; background: var(--ink); color: var(--ground);
  border: 1px solid var(--ink); cursor: pointer;
  border-radius: var(--r-sm); padding: 10px 18px; font: inherit; font-size: 13.5px; font-weight: 500;
  text-decoration: none; margin: 10px 0;
 }
.primary-btn:hover { opacity: 0.86; }
.hint { font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Card header with actions ---- */
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.card-actions { display: flex; gap: 10px; align-items: center; }
.kpi-counts { font-size: 12px; color: var(--ink-2); display: inline-flex; flex-wrap: wrap; gap: 8px; }
.kpi-counts .pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.kpi-counts .pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kpi-counts .pill.ok::before { background: var(--good); }
.kpi-counts .pill.bad::before { background: var(--bad); }
.footnote { font-size: 11.5px; color: var(--muted); margin: 12px 0 0; }
.loading { font-size: 13px; color: var(--muted); padding: 8px 2px; }

/* ---- KPI table ---- */
.kpi-table td, .kpi-table th { padding: 9px 12px; }
.kpi-table td:first-child { min-width: 240px; }
tr.kpi-group td { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--page); padding-top: 14px; }
.group-chip { 
  display: inline-flex; width: 18px; height: 18px; border-radius: var(--r-sm);
  align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600;
  margin-right: 8px; vertical-align: middle;
  background: var(--hair-soft); color: var(--ink-2);
 }
.status-ok { color: var(--good); font-weight: 600; }
.status-bad { color: var(--bad); font-weight: 600; }
.trend-up { color: var(--good); }
.trend-down { color: var(--bad); }
.importance { font-size: 12px; color: var(--ink-2); }
.kpi-table input.target-input { 
  width: 110px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 4px 7px;
  font: inherit; font-size: 12.5px; text-align: right;
 }

/* ---- Financials (Fathom-style) table ---- */
.fin-table td, .fin-table th { padding: 8px 12px; }
.var-good { color: var(--good); }
.var-bad { color: var(--bad); }
.donut-cell { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.donut-cell svg { flex-shrink: 0; }
.donut-cell .donut-pct { color: var(--ink-2); font-size: 12px; min-width: 34px; text-align: right; }
tr.kind-grand td { font-weight: 600; border-top: 1px solid var(--ink); }

/* ---- Analysis ---- */
.chart-box.tall { height: 320px; }
.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.insights li { 
  display: flex; gap: 12px; align-items: flex-start;
  border-bottom: 1px solid var(--hair-soft);
  padding: 10px 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
 }
.insights li strong { color: var(--ink); }
.insights .ins-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.insights .ins-dot.good { background: var(--good); }
.insights .ins-dot.bad { background: var(--bad); }
.insights .ins-dot.info { background: var(--slate); }

/* ---- Goalseek ---- */
.gs-goal-input { width: 72px; background: var(--page); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 8px; font: inherit; font-size: 13px; text-align: right; }
.gs-progress { display: flex; align-items: center; gap: 12px; margin: 6px 0 22px; }
.gs-progress .gs-start, .gs-progress .gs-goal-lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.gs-bar { flex: 1; height: 6px; background: var(--hair-soft); overflow: hidden; }
.gs-bar-fill { height: 100%; background: var(--brass); }
.gs-group { margin-bottom: 22px; }
.gs-group-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); text-align: center; margin-bottom: 4px; }
.gs-axis { position: relative; height: 16px; margin-left: 300px; border-bottom: 1px solid var(--grid); }
.gs-axis span { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gs-row { display: grid; grid-template-columns: 150px 90px 60px 1fr; align-items: center; gap: 0; padding: 9px 0; border-bottom: 1px solid var(--grid); }
.gs-row .gs-name { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.gs-row .gs-name .swatch { width: 9px; height: 9px; border-radius: 2px; }
.gs-row .gs-achieve { font-size: 13px; font-weight: 500; text-align: right; padding-right: 20px; }
.gs-row .gs-change { font-size: 12px; color: var(--muted); text-align: right; padding-right: 20px; }
.gs-track { position: relative; height: 22px; }
.gs-track .gs-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--baseline); }
.gs-track .gs-fill { position: absolute; top: 9px; height: 4px; border-radius: 2px; opacity: 0.5; }
.gs-track .gs-marker { position: absolute; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--panel); transform: translateX(-50%); }
.gs-track .gs-cap { position: absolute; top: 4px; width: 3px; height: 14px; border-radius: 2px; }
@media (max-width: 760px) {
  .gs-axis { margin-left: 0; }
  .gs-row { grid-template-columns: 110px 70px 44px 1fr; }
}

/* ---- Classification modal ---- */
.modal { 
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11, 15, 18, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
 }
.modal[hidden] { display: none; }
.modal-box { 
  background: var(--raised); border: 1px solid var(--hair); border-radius: 4px;
  width: 100%; max-width: 620px; max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-3);
 }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 10px; }
.modal-head h2 { font-family: var(--display); font-size: 1.0625rem; font-weight: 650; margin: 0 0 2px; }

.modal-head .desc { margin: 0; max-width: 460px; }
.class-list { overflow-y: auto; padding: 4px 20px; flex: 1; }
.class-group-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); margin: 14px 0 6px; }
.class-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grid); }
.class-row .cr-name { font-size: 13px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.class-row .cr-val { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 1px solid var(--hair); border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; }
.seg button { background: none; border: none; padding: 6px 12px; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.active[data-tag="variable"] { background: var(--rose); color: var(--ground); }
.seg button.active[data-tag="fixed"] { background: var(--ink); color: var(--ground); }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.modal-foot-btns { display: flex; gap: 8px; }
.class-summary { font-size: 12px; color: var(--ink-2); }

/* ---- KPI Explorer ---- */
.kpix-wrap { display: flex; justify-content: center; padding: 8px 0 4px; overflow-x: auto; }
.kpix-wrap svg { max-width: 100%; height: auto; }

/* ---- Profitability / breakeven ---- */
.prof-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1px; margin-bottom: 28px; background: var(--hair-soft); border: 1px solid var(--hair-soft); }
@media (max-width: 900px) { .prof-grid { grid-template-columns: 1fr; } }
.prof-formula { 
  display: flex; align-items: stretch; justify-content: center; gap: 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: visible;
  margin: 4px 0 16px; position: relative;
  transition: background var(--dur) var(--ease);
 }
.prof-formula .pf-cell { flex: 1; text-align: center; padding: 10px 12px; }
.prof-formula .pf-cell + .pf-cell { border-left: 1px solid var(--border); }
.prof-formula .pf-label { font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.prof-formula .pf-value { font-family: var(--display); font-size: 1.15rem; font-weight: 650; line-height: 1.25; }
/* Three side-by-side currency figures cannot shrink below the width of the
   longest amount, so on the narrowest phones the row is wider than the screen.
   Stack the cells there and move the divider from the side to the top. */
@media (max-width: 480px) {
  .prof-formula { flex-wrap: wrap; }
  .prof-formula .pf-cell { flex: 1 1 100%; min-width: 0; }
  .prof-formula .pf-cell + .pf-cell { border-left: 0; border-top: 1px solid var(--border); }
  /* Stacked, the operators would land on the middle figure: put them on the
     rules between the cells instead, clear of the centred text. */
  .prof-formula .pf-op { left: 14px; transform: translateY(-50%); }
  .prof-formula .pf-op.minus { top: 33.33%; }
  .prof-formula .pf-op.equals { top: 66.66%; }
}
.prof-formula .pf-op { 
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%; color: var(--muted); font-weight: 500;
  display: flex; align-items: center; justify-content: center; font-size: 14px; z-index: 2;
  background: var(--panel); border: 1px solid var(--hair);
 }
.prof-formula .pf-op.minus { left: 33.33%; }
.prof-formula .pf-op.equals { left: 66.66%; }
.prof-panel { display: flex; flex-direction: column; }
/* While the chart is hovered the box is a what-if, not the month's actuals —
   tinted so the two are never mistaken for each other. */

.prof-formula.whatif { background: color-mix(in srgb, var(--brass) 7%, transparent); }
.prof-formula .pf-value.neg { color: var(--bad); }
.pf-hint { margin: -10px 2px 12px; font-size: 12px; color: var(--muted); min-height: 1.4em; }
#chart-breakeven { cursor: crosshair; }
.prof-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 2px; border-bottom: 1px solid var(--grid); gap: 12px; }
.prof-row:last-child { border-bottom: none; }
.prof-row .pr-label { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.prof-row .pr-label .swatch { width: 10px; height: 2px; border-radius: 0; display: inline-block; }
.prof-row .pr-value { font-family: var(--display); font-size: 1.15rem; font-weight: 650; line-height: 1.25; }
.prof-row .pr-sub { font-size: 11px; color: var(--muted); }

/* ---- Cash flow waterfall ---- */
#cf-box { height: 520px; }

/* ---- Charts view ---- */
.charts-controls { flex-wrap: wrap; }
.charts-controls .chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.charts-controls .chk input { accent-color: var(--accent); }
.year-tabs { display: flex; gap: 4px; justify-content: flex-end; margin-bottom: 8px; flex-wrap: wrap; }
.year-tabs button {
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 4px 10px; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.year-tabs button:hover { color: var(--ink); background: var(--border); }
.year-tabs button.active { color: var(--ink); font-weight: 600; border-color: var(--border); background: var(--surface); }

/* ---- Growth view ---- */
.growth-box { height: 460px; }
.growth-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; }
.growth-legend .q { border-left: 1px solid var(--hair); padding: 4px 12px; font-size: 12px; color: var(--ink-2); }
.growth-legend .q b { display: block; color: var(--ink); font-size: 12.5px; margin-bottom: 2px; }
.growth-legend .q .qtag { font-size: 10px; letter-spacing: 0.02em; color: var(--muted); }

/* ---- Management report ---- */
.report-section { margin-bottom: 12px; }
.report-cover { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); padding: 28px 0; margin-bottom: 20px; }
.report-cover .rc-eyebrow { font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 8px; }
.report-cover h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.015em; }
.report-cover .rc-meta { font-size: 13px; color: var(--ink-2); }
.report-section h3 { font-size: 0.84rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); margin: 0 0 10px; }

/* ---- Sticky table headers ---- */
.table-scroll { max-height: 72vh; overflow: auto; }
thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; }
th:first-child { z-index: 3; }

/* ---- Sign-in overlay ---- */
.login-overlay { 
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  display: flex; align-items: center; justify-content: center;
 }
.login-overlay[hidden] { display: none; }
.login-card { 
  width: min(400px, calc(100vw - 40px));
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 4px; padding: 30px 30px 26px;
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; gap: 14px;
 }
.login-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.login-head img { border-radius: var(--r-sm); }
.login-card h2 { margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 650; line-height: 1.25; }
.login-sub { font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); margin-top: 2px; }
.login-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--muted); }
.login-field input { 
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  padding: 10px 12px; font: inherit; font-size: 14px; letter-spacing: normal;
 }
.login-field input:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }
.login-error { color: var(--bad); font-size: 12.5px; }
.login-btn { margin: 6px 0 0; width: 100%; text-align: center; font-size: 14px; }
.google-btn { 
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--panel); color: var(--ink); border: 1px solid var(--hair);
  font: inherit; font-size: 14px; font-weight: 500;
 }
.google-btn:hover { border-color: var(--muted); }

.login-or { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 11px; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.login-switch { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.linkish { background: none; border: none; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; padding: 0 0 0 4px; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { text-decoration: underline; }
.connect-popup .connect-popup-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 2px 0 6px; }
.connect-popup .ghost-btn { color: var(--ink-2); }

/* Impersonation banner */
.impersonate-bar { 
  position: fixed; top: 0; left: 0; right: 0; z-index: 350;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--ink); color: var(--ground);
  padding: 8px 16px; font-size: 13px; font-weight: 500;
 }
.impersonate-bar[hidden] { display: none; }
.impersonate-bar .ghost-btn { color: var(--ground); border-color: color-mix(in srgb, var(--ground) 45%, transparent); }
body.impersonating { padding-top: 38px; }

/* Manage Users table */
.provider-pill, .role-pill { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); font-size: 11px; font-weight: 500; background: var(--hair-soft); color: var(--ink-2); }


.role-pill.admin { background: color-mix(in srgb, var(--brass) 14%, transparent); color: var(--brass); }




/* Admin: create-account form above the user table */
.new-user-form { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 16px 0; margin-bottom: 20px; }
.new-user-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.new-user-form .login-field { margin: 0; }
.new-user-form select, .role-select {
  width: 100%; padding: 9px 10px; border: 1px solid var(--grid); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit;
}
.role-select { width: auto; min-width: 130px; padding: 5px 8px; }
.new-user-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.new-user-actions .login-error { margin: 0; }

/* .login-field is designed for the dark sign-in card: white text on a
   translucent white field. Reused inside the app's own light views that
   renders as white-on-white — the value is invisible and the label barely
   legible. Inside a view, use the page's own tokens instead, so both themes
   work. The account modal is not a .view, so it keeps the dark styling. */
.view .login-field { color: var(--ink-2); }
.view .login-field input,
.view .login-field select {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  padding: 10px 12px; font: inherit; font-size: 14px;
  width: 100%; box-sizing: border-box;
}
.view .login-field input::placeholder { color: var(--ink-2); opacity: 0.7; }
.view .login-field input:focus,
.view .login-field select:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }

/* Rendered report: cover, basis of preparation, comparison tables */
.rpt-cover { text-align: center; padding: 42px 24px; }
.rpt-title { margin: 0 0 18px; font-family: var(--display); font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 18px 0; }
.rpt-company { font-size: 18px; font-weight: 600; }
.rpt-period { font-size: 18px; color: var(--ink-2); margin-top: 2px; }
.rpt-published { font-size: 12px; color: var(--muted); margin-top: 14px; }
.rpt-basis p { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); max-width: 62rem; }
.rpt-section-title { margin: 0 0 12px; font-size: 0.84rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.rpt-table + .rpt-section-title { margin-top: 28px; }
.rpt-table td:not(:first-child), .rpt-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt-table tr.row-section td { background: var(--grid); font-size: 12px; }
.rpt-table tr.row-total td { font-weight: 600; border-top: 1px solid var(--grid); }
.rpt-footer { text-align: center; margin-top: 24px; color: var(--muted); }

/* Published reports */
.pub-form { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 16px 0; margin-bottom: 20px; }
.pub-toolbar { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pub-search, .pub-sort {
  padding: 9px 12px; border: 1px solid var(--hair); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
}
.pub-search { flex: 1; min-width: 200px; }
.pub-search:focus, .pub-sort:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }
.pub-empty { color: var(--muted); text-align: center; padding: 28px 12px; font-size: 13px; }

/* Sidebar section headings */
.nav-section {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--muted); padding: 14px 10px 5px 16px;
}
.nav-section:first-child { padding-top: 2px; }

/* Forecast */
.fc-drivers { 
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 16px 0; margin-bottom: 20px;
 }
.fc-driver { display: flex; flex-direction: column; gap: 5px; }
.fc-driver label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fc-driver input {
  padding: 9px 10px; border: 1px solid var(--hair); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px;
  font-variant-numeric: tabular-nums; width: 100%; box-sizing: border-box;
}
.fc-driver input:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }
.fc-base { font-size: 10.5px; color: var(--muted); }
.fc-driver-actions { justify-content: flex-end; }
.fc-summary { 
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin-bottom: 24px;
  background: var(--hair-soft); border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft);
 }
.fc-card { padding: 14px 18px; background: var(--panel); }
.fc-card-label { font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); }
.fc-card-value { font-family: var(--display); font-size: 1.45rem; font-weight: 700; line-height: 1.2; margin: 6px 0 3px; }
.fc-card-value.fc-neg { color: var(--bad); }
.fc-card-extra { font-size: 11.5px; color: var(--ink-2); }
.fc-chart-wrap { position: relative; height: 290px; margin-bottom: 24px; }

/* KPI detail drawer */
tr.kpi-row { cursor: pointer; transition: background var(--dur) var(--ease); }
tr.kpi-row:hover { background: var(--accent-soft); }
.kd-overlay { 
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(11, 15, 18, 0.45); padding: 24px;
 }
/* An author `display` rule beats the browser's [hidden] { display: none }, so a
   flex overlay stays on screen with the attribute set unless this guard exists.
   Without it the drawer sits permanently over the page showing its placeholder. */
.kd-overlay[hidden] { display: none; }
.kd-panel { 
  position: relative; display: flex; gap: 0; width: min(1040px, 100%); max-height: 88vh;
  background: var(--raised); border: 1px solid var(--hair); border-radius: 4px; box-shadow: var(--shadow-3); overflow: hidden;
 }
.kd-main { flex: 1; min-width: 0; padding: 28px 28px 24px; overflow-y: auto; }
.kd-sidebar {
  width: 260px; flex-shrink: 0; background: var(--page); border-left: 1px solid var(--grid);
  padding: 28px 22px; overflow-y: auto;
}
.kd-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer;
}
.kd-close:hover { color: var(--ink); }
.kd-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.kd-head h2 { margin: 0; font-family: var(--display); font-size: 1.4rem; font-weight: 650; letter-spacing: -0.015em; }
.kd-status { 
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--ground); font-size: 19px; font-weight: 500;
 }
.kd-status.ok { background: var(--good); }
.kd-status.bad { background: var(--bad); }
.kd-status.na { background: var(--muted); }
.kd-narrative { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 20px; }
.kd-narrative strong { color: var(--ink); }
.kd-loading { color: var(--muted); font-size: 13px; }
.kd-chart-wrap { position: relative; height: 220px; margin-bottom: 14px; }
.kd-months { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted); }
.kd-month { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 34px; }
.kd-month-mark { font-size: 12px; font-weight: 600; line-height: 1; }
.kd-month-mark.ok { color: var(--good); }
.kd-month-mark.bad { color: var(--bad); }
.kd-month-mark.na { color: var(--muted); }
.kd-stat { margin-bottom: 20px; }
.kd-stat-label { font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.kd-stat-value { font-family: var(--display); font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.kd-stat-value .trend-up, .kd-stat-value .trend-down { font-size: 17px; }
.kd-muted { color: var(--muted); font-weight: 500; }
.kd-importance { font-family: var(--font); font-size: 14px; font-weight: 500; }
@media (max-width: 860px) {
  .kd-panel { flex-direction: column; }
  .kd-sidebar { width: auto; border-left: 0; border-top: 1px solid var(--grid); display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
}

/* KPI alerts — a breached level, not merely a missed target */
.pill.alert { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.alert-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bad); margin-left: 7px; vertical-align: middle;
}
tr.kpi-alerting td:first-child { font-weight: 600; }
.kpi-footnote { margin-top: 10px; }
.kpi-alerts { margin-top: 20px; border-top: 1px solid var(--grid); padding-top: 16px; }
.alerts-title { margin: 0 0 12px; font-family: var(--display); font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.alert-item { margin-bottom: 14px; }
.alert-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 13px; font-weight: 600; flex-wrap: wrap;
}
.alert-figure { color: var(--bad); font-weight: 500; }
.alert-level { color: var(--muted); font-weight: 500; }
.alert-text { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); max-width: 60rem; }

/* QuickBooks app credentials view */
.qboapp-steps { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 16px 0; margin-bottom: 20px; }
.qboapp-steps h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.qboapp-steps ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; line-height: 1.55; }
.copy-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.copy-row code { background: var(--hair-soft); border-radius: var(--r-sm); padding: 7px 10px; font-size: 12px; overflow-wrap: anywhere; flex: 1; min-width: 200px; }
#qboapp-form .new-user-grid { margin-bottom: 4px; }

/* Sidebar account block */
.account-box { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--grid); padding-top: 10px; margin-top: 2px; }
.account-btn {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  background: none; border: 0; padding: 4px; border-radius: var(--r-sm); cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.account-btn:hover { background: var(--grid); }
.account-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.account-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-email { font-size: 11px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-btn { flex-shrink: 0; }
.avatar { 
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--ground);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
 }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }

/* Account modal */
.account-card { max-width: 460px; width: 100%; max-height: 88vh; overflow-y: auto; }
.acct-rows { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; }
.acct-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--grid); font-size: 13px; }
.acct-row span { color: var(--ink-2); }
.acct-row strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.acct-section { border-top: 1px solid var(--grid); padding-top: 14px; margin-top: 12px; }
.acct-section h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.acct-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.acct-msg { font-size: 12px; font-weight: 600; }
.acct-msg.ok { color: var(--good); }
.acct-msg.bad { color: var(--bad); }
.acct-note { font-size: 12px; color: var(--ink-2); background: var(--grid); border-radius: var(--r-sm); padding: 10px 12px; line-height: 1.5; }
.acct-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--grid); }
.acct-section .footnote { margin-top: 10px; }

/* Role badge under the brand */
.brand-role { display: inline-block; margin-top: 6px; }

/* Read-only accounts: neutralise editable cells the server would reject */
body.role-readonly [contenteditable="true"] { pointer-events: none; opacity: 0.75; }
.user-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.user-actions .ghost-btn { padding: 5px 10px; font-size: 12px; }
.user-actions .danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }

/* ============ Motion system ============ */

/* Page change: one short fade that answers the click. No rise, no stagger. */
@keyframes viewRise { from { opacity: 0; } to { opacity: 1; } }
.view-enter { animation: viewRise 180ms var(--ease) both; }


.primary-btn { position: relative; transition: opacity var(--dur) var(--ease); }
.primary-btn:hover { opacity: 0.86; }


/* Top loading bar (replaces the plain “Loading…” text) */
.loadbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300;
  background: transparent; pointer-events: none; opacity: 0; transition: opacity 200ms var(--ease);
}
body.is-loading .loadbar { opacity: 1; }
.loadbar::before { content: ''; position: absolute; inset: 0; width: 40%; background: var(--brass); animation: loadSlide 1.1s var(--ease) infinite; }
@keyframes loadSlide {
  from { transform: translateX(-110%); }
  to   { transform: translateX(280%); }
}
.loading { display: none; }

/* Toasts */
#toast-root { position: fixed; bottom: 22px; right: 22px; z-index: 400; display: flex; flex-direction: column; gap: 8px; }
.toast { 
  display: flex; align-items: center; gap: 10px;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 4px;
  padding: 11px 16px; font-size: 13px;
  box-shadow: var(--shadow-3);
  animation: toastIn 220ms var(--ease) both;
 }
.toast.leaving { animation: toastOut 260ms var(--ease) both; }
@keyframes toastIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastOut { to { opacity: 0; } }
.toast .t-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--good); display: flex; align-items: center; justify-content: center;
}
.toast .t-check svg path {
  stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: drawCheck 400ms 120ms var(--ease) forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* Tables: calm rows that light up on hover */
tbody tr { transition: background-color 160ms var(--ease); }
tbody tr:hover td { background: var(--accent-soft); }
tbody tr:hover td:first-child { background: var(--accent-soft); }

/* KPI Explorer: ring sweep, square pop-in, hover expansion */
.kpix-ring { transition: stroke-dasharray 400ms var(--ease); }
/* Opacity only. Every label and group name is placed by an SVG transform
   attribute, and ANY CSS transform — even an animation ending on
   `transform: none` — replaces it: that is what laid every label flat and
   piled them into each other. */
.kpix-fade { animation: kpixFade 500ms var(--ease) both; }
@keyframes kpixFade { from { opacity: 0; } to { opacity: 1; } }

/* Chart canvases are always fully visible (no opacity animation that could
   leave a canvas stuck invisible if the animation is interrupted). */
.chart-box canvas, .growth-box canvas, #cf-box canvas { opacity: 1 !important; }

/* Belt-and-braces for the same intrinsic-300px problem: a canvas Chart.js has
   not sized yet (view never opened, or a chart that failed to build) still
   renders at its attribute width and would overflow a narrower card. */
.chart-box canvas, .fc-chart-wrap canvas, .kd-chart-wrap canvas { max-width: 100%; }

/* Respect reduced motion: kill every animation & transition */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsive refinements */
@media (max-width: 900px) {
  .topbar { position: static; }
  .main { padding: 16px 14px 40px; }
}

/* ---- Print / PDF export ---- */
.print-header { display: none; }
@media print {
  @page { margin: 14mm 12mm; }
  body { background: #fff; color: #000; font-size: 11px; }
  .appbar, .rail, .controls, .banner, .loading, #edit-targets, .pagefoot { display: none !important; }
  .table-scroll { max-height: none; overflow: visible; }
  thead th { position: static; }
  .report-section { break-inside: auto; }
  .report-section h3 { break-after: avoid; }
  .report-cover { border: none; padding: 0 0 12px; }
  .report-break { break-before: page; }
  .app { display: block; }
  .main { max-width: none; padding: 0; }
  .topbar { display: none; }
  .print-header {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 16px; gap: 16px;
  }
  .ph-brand { font-weight: 600; font-size: 14px; }
  .ph-title { font-weight: 600; font-size: 16px; }
  .ph-meta { font-size: 10.5px; color: #444; text-align: right; }
  .card { border: none; padding: 0; margin-bottom: 18px; box-shadow: none; }
  .card h2 { font-size: 13px; }
  .table-scroll { overflow: visible; }
  table { font-size: 10.5px; }
  th:first-child, td:first-child { position: static; }
  tr { break-inside: avoid; }
  .chart-box { height: 240px; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .grid2 { grid-template-columns: 1fr 1fr; }
}

/* Connect view: the exact OAuth settings, so a redirect_uri mismatch is visible */
.conn-config { display: grid; gap: 12px; margin: 16px 0 6px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.conn-config-key { display: block; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.conn-uri { display: inline-block; font-size: 12.5px; padding: 4px 8px; border-radius: var(--r-sm); background: var(--hair-soft); word-break: break-all; }
.conn-blocked { margin: 14px 0 0; padding: 4px 0 4px 14px; font-size: 13px; line-height: 1.6; color: var(--bad); border-left: 2px solid var(--bad); }

/* The "connect a company" step on the Source Data page. Set apart from the
   credentials form above it so it reads as the next action, not part of it. */
.qboapp-next { 
  margin-top: 20px; padding: 16px 0 16px 18px;
  border-left: 2px solid var(--ink);
 }
.qboapp-next h3 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 500; }
.qboapp-next p { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.qboapp-next .footnote { margin: 8px 0 0; }

/* Dismiss control for the welcome popup. Positioned against .login-card, which
   is why that needs to be a positioning context. */
.connect-popup { position: relative; }
.popup-close { 
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; padding: 4px 8px; border-radius: var(--r-sm);
  color: var(--muted);
 }
.popup-close:hover { color: var(--ink); background: var(--accent-soft); }
.popup-close:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

/* The three states of stored Intuit credentials, on the Source Data page:
   saved and usable, saved but undecryptable, and never entered. The base .pill
   is accent-blue for all three, which made a broken row look fine. */
#qboapp-state .pill.ok   { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
#qboapp-state .pill.bad  { color: var(--bad);  background: color-mix(in srgb, var(--bad) 12%, transparent); }
#qboapp-state .pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
#qboapp-state .pill.warn::before { content: ''; width: 8px; height: 8px; border-radius: 50%;
                                   display: inline-block; background: var(--warn); }

/* Session timeout warning — sits above the dashboard without displacing it, so
   a half-finished form underneath keeps its place. */
.session-warning { 
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 4px;
  border: 1px solid var(--hair); border-left: 2px solid var(--warn);
  background: var(--raised); color: var(--ink); box-shadow: var(--shadow-3); font-size: .92rem;
 }
.session-warning button { flex: none; }

/* ---- Source Data page ----
   Grouped cards with a heavy head and quiet divided rows beneath: the shape
   reads as "one source, several settings" rather than a wall of form fields. */
.sd-page { max-width: 880px; }
.sd-heading { font-family: var(--display); font-size: 1.1875rem; font-weight: 600; margin: 30px 0 12px; letter-spacing: -0.01em; }
.sd-heading:first-child { margin-top: 0; }

.sd-card { background: var(--panel); border: 1px solid var(--hair-soft); border-radius: 0; overflow: visible; margin-bottom: 20px; }
.sd-card-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.sd-logo { 
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hair-soft); color: var(--ink);
  font-weight: 500; font-size: 14px;
 }
.sd-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-title strong { font-size: 15px; font-weight: 500; }
.sd-sub { font-size: 12.5px; color: var(--muted); }
.sd-sub em { font-style: italic; }
.sd-warn, .sd-expired { color: var(--bad); }
.sd-head-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* Fathom's quiet outlined action: reads as available without competing with
   the page's primary gradient button. */
.sd-btn { 
  background: transparent; border: 1px solid var(--ink); color: var(--ink);
  border-radius: var(--r-sm); padding: 8px 15px; font: inherit; font-size: 13px;
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease);
 }
.sd-btn:hover:not(:disabled) { background: var(--accent-soft); }
.sd-btn:disabled { opacity: 0.55; cursor: default; }

.sd-menu-wrap { position: relative; }
.sd-kebab {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 19px; line-height: 1; padding: 6px 8px; border-radius: var(--r-sm);
}
.sd-kebab:hover { background: var(--border); color: var(--ink); }
.sd-menu { 
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 200px;
  background: var(--raised); border: 1px solid var(--hair);
  border-radius: 4px; box-shadow: var(--shadow-3); padding: 4px;
 }
.sd-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 12px; border-radius: var(--r-sm); font: inherit; font-size: 13px;
  color: var(--ink-2); cursor: pointer;
}
.sd-menu-item:hover { background: var(--border); color: var(--ink); }
.sd-menu-item.danger:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }

.sd-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-top: 1px solid var(--border); }
.sd-row-main { flex: 1 1 auto; min-width: 0; }
.sd-row-main strong { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.sd-row-side { flex: 0 0 auto; font-size: 12px; color: var(--muted); padding-top: 2px; }
.sd-note { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.sd-error {
  margin: 0 20px 4px; padding: 10px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); font-size: 12.5px;
}
.sd-empty .sd-row-main { padding: 20px; }
.sd-body { padding: 4px 20px 20px; border-top: 1px solid var(--border); }

.sd-steps { margin: 14px 0 18px; }
.sd-steps summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sd-steps ol { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 13px; line-height: 1.8; }

/* Switch. The checkbox stays in the DOM for keyboard and screen readers and is
   drawn over by the track, rather than being replaced by a div. */
.sd-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sd-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sd-track { flex: 0 0 auto; position: relative; width: 34px; height: 18px; border-radius: var(--r-sm); background: var(--hair); transition: background var(--dur) var(--ease); }
.sd-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 2px; background: var(--raised); transition: transform var(--dur) var(--ease); }
.sd-toggle input:checked + .sd-track { background: var(--ink); }
.sd-toggle input:checked + .sd-track::after { transform: translateX(16px); }
.sd-toggle input:focus-visible + .sd-track { outline: 1px solid var(--focus); outline-offset: 3px; }
.sd-toggle input:disabled + .sd-track { opacity: 0.5; }
.sd-toggle input:disabled ~ span { opacity: 0.6; }

@media (max-width: 720px) {
  .sd-card-head { flex-wrap: wrap; }
  .sd-head-actions { margin-left: 0; width: 100%; }
  .sd-row { flex-direction: column; gap: 6px; }
}

/* ---- Update data dialog ----
   Centred, narrow, and vertically stacked: icon, what is being updated, the
   range, then the actions on a tinted footer. */
.upd-overlay { 
  position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: rgba(11, 15, 18, 0.45); padding: 24px;
 }
.upd-card { 
  position: relative; width: min(460px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--raised); border: 1px solid var(--hair); border-radius: 4px; box-shadow: var(--shadow-3);
  padding: 34px 32px 0; text-align: center;
 }
.upd-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--muted); padding: 4px 8px; border-radius: var(--r-sm);
}
.upd-close:hover { background: var(--accent-soft); color: var(--ink); }
.upd-icon { font-size: 34px; line-height: 1; color: var(--muted); margin-bottom: 10px; }
.upd-card h2 { margin: 0 0 14px; font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: var(--ink); }
.upd-company { margin: 0; font-size: 15.5px; font-weight: 600; }
.upd-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.upd-range { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 26px 0 0; }
.upd-field {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted);
}
.upd-field input {
  font: inherit; font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none;
  color: var(--ink); background: var(--surface);
  padding: 10px 12px; border: 1px solid var(--baseline); border-radius: var(--r-sm);
}
.upd-field input:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }
.upd-to { padding-bottom: 12px; font-size: 13px; color: var(--muted); }

.upd-hint { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.upd-hint.warn { color: var(--warn); }
.upd-hint.bad { color: var(--bad); }
.upd-msg {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm); font-size: 12.5px;
  background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); text-align: left;
}

.upd-actions { 
  display: flex; gap: 12px; margin: 26px -32px 0; padding: 18px 32px;
  background: var(--panel); border-top: 1px solid var(--hair);
 }
.upd-actions button { flex: 1 1 0; margin: 0; justify-content: center; }
.upd-actions .primary-btn { background: var(--ink); }
.upd-actions .primary-btn:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 480px) {
  .upd-range { flex-direction: column; align-items: stretch; }
  .upd-to { padding: 0; text-align: center; }
}

/* ---- Company profile ---- */
.cp-identity { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.cp-mark { 
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--ground); font-family: var(--display); font-size: 24px; font-weight: 650;
 }
.cp-identity-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
/* Edit in place, as on the Fathom screen: underlined rather than boxed, so the
   name still reads as a heading until you click it. */
.cp-name { 
  font-family: var(--display); font-size: 1.45rem; font-weight: 650; letter-spacing: -0.01em;
  color: var(--ink); background: none; border: none;
  border-bottom: 1px dashed var(--hair); padding: 2px 0; width: 100%;
 }
.cp-name:hover:not(:disabled) { border-bottom-color: var(--muted); }
.cp-name:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--focus); }
.cp-name:disabled { border-bottom-color: transparent; color: var(--ink); opacity: 1; }
.cp-source { font-size: 12.5px; color: var(--muted); }

.cp-select, .cp-input {
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface);
  padding: 9px 12px; border: 1px solid var(--baseline); border-radius: var(--r-sm);
}
.cp-select:focus, .cp-input:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }
.cp-select:disabled, .cp-input:disabled { background: var(--page); color: var(--ink-2); }

.cp-badge { display: inline-block; padding: 4px 9px; border-radius: var(--r-sm); background: var(--hair-soft); color: var(--ink-2); font-size: 12px; font-weight: 500; }
.cp-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }

/* ---- Chart of accounts ----
   Grouped, indented, quiet. Depth is shown with em dashes rather than padding
   alone, because at four levels deep pure indentation stops being legible. */
.coa-page { max-width: 1040px; }
.coa-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.coa-tab { 
  background: none; border: none; cursor: pointer; font: inherit; font-size: 14.5px;
  color: var(--muted); padding: 10px 2px 12px; border-bottom: 1px solid transparent;
  margin-bottom: -1px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
 }
.coa-tab:hover { color: var(--ink); }
.coa-tab.active { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }

.coa-toolbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.coa-search { display: flex; align-items: center; gap: 8px; flex: 0 1 320px; color: var(--muted); }
.coa-search input {
  font: inherit; font-size: 13.5px; color: var(--ink); background: none;
  border: none; padding: 5px 0; width: 100%;
}
.coa-search input:focus { outline: none; }
.coa-search:focus-within { color: var(--ink); }
.coa-toolbar-right { margin-left: auto; font-size: 12.5px; color: var(--muted); }

.coa-group { margin-bottom: 26px; }
.coa-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.coa-group-head h3 { margin: 0; font-family: var(--display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.coa-count { margin-left: auto; font-size: 12px; color: var(--muted); }
.coa-letter { 
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500;
  background: var(--hair-soft); color: var(--ink-2);
 }
/* A colour per group, so the eye can find a section without reading it. */






.coa-list { background: var(--panel); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden; }
.coa-row { 
  display: flex; align-items: center; gap: 12px; padding: 10px 4px;
  border-bottom: 1px solid var(--hair-soft); font-size: 13.5px;
  transition: background var(--dur) var(--ease);
 }
.coa-row:last-child { border-bottom: none; }
.coa-row:hover { background: var(--accent-soft); }
.coa-name { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.coa-parent { font-weight: 500; }
.coa-depth { color: var(--baseline); letter-spacing: -1px; user-select: none; }
.coa-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.coa-behaviour { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.coa-behaviour.set { color: var(--ink); }
.coa-moved { font-size: 11px; font-weight: 500; color: var(--ink-2); background: var(--hair-soft); padding: 1px 6px; border-radius: var(--r-sm); }
/* Revealed on hover, as in Fathom — visible on touch, where hover never fires. */
.coa-reclassify { 
  background: none; border: none; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--ink); border-bottom: 1px dashed currentColor; padding: 0;
  opacity: 0; transition: opacity var(--dur) var(--ease);
 }
.coa-row:hover .coa-reclassify, .coa-reclassify:focus-visible { opacity: 1; }
@media (hover: none) { .coa-reclassify { opacity: 1; } }
.coa-empty { padding: 16px; font-size: 12.5px; color: var(--muted); text-align: center; }

.rc-card { text-align: left; }
.rc-card h2 { text-align: center; }
.rc-card .upd-company, .rc-card .upd-sub { text-align: center; }
.rc-fields { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.rc-field { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 600;
            letter-spacing: 0.04em; color: var(--muted); }
.rc-field select {
  font: inherit; font-size: 13.5px; font-weight: 400; letter-spacing: normal; text-transform: none;
  color: var(--ink); background: var(--surface);
  padding: 10px 12px; border: 1px solid var(--baseline); border-radius: var(--r-sm);
}
.rc-field select:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }

/* ---- KPI settings ----
   Reuses the chart-of-accounts group/list shell; the difference is the two
   fixed columns on the right, which need headings to be readable. */
.ks-col-head {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted);
}
.coa-group-head .ks-col-head:first-of-type { margin-left: auto; width: 128px; }
.ks-status-head { width: 56px; text-align: center; }
.ks-row { gap: 12px; }
.ks-importance { flex: 0 0 128px; margin-left: auto; }
.ks-status { flex: 0 0 56px; display: flex; justify-content: center; }
.ks-status .sd-toggle { gap: 0; }

.ks-select { 
  font: inherit; font-size: 12px; font-weight: 500; width: 100%;
  padding: 5px 8px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--hair); background: transparent; color: var(--ink-2);
 }
.ks-select:focus { outline: 1px solid var(--focus); outline-offset: 2px; }
.ks-select:disabled { cursor: default; opacity: 0.7; }
/* Importance is colour-coded, as in Fathom: critical reads as urgent without
   having to be read. */
.ks-critical { color: var(--ink); border-color: var(--ink); }
.ks-medium { color: var(--ink-2); }
.ks-low { color: var(--muted); }

/* A switched-off KPI stays legible but recedes — it is still a row you can act
   on, not a disabled control. */
.ks-off .coa-name { color: var(--muted); }
.ks-off .ks-select { opacity: 0.75; }

@media (max-width: 640px) {
  .coa-group-head .ks-col-head { display: none; }
  .ks-importance { flex: 0 0 110px; }
}

/* ---- Sidebar density ----
   Eighteen nav rows plus five footer controls read as a wall. Settings moved
   behind one row (see showNavPanel), and what remains is tightened: smaller
   section labels, less air between rows, a quieter footer. */
.nav-section {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--muted); padding: 14px 10px 4px 16px;
}
.nav-item { padding: 7px 10px 7px 16px; font-size: 13px; }

/* The row that opens Settings. Deliberately not a .nav-item: it changes which
   list you are looking at rather than which view is on screen. */


/* Footer: the company switcher and who you are matter; everything else is
   occasional and should not compete with them. */
.conn { font-size: 11.5px; line-height: 1.45; }

/* ================= Shell: top bar + icon rail =================
   Four sections across the top, the pages of the active one down the side.
   Replaces a single sidebar that had grown to eighteen rows — the density
   problem was never the styling, it was asking one list to carry everything. */
.appbar { 
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; height: 52px; flex: 0 0 auto;
  background: var(--ground); border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 45;
 }
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.tb-logo { border-radius: var(--r-sm); flex: 0 0 auto; }
.tb-brand { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.tb-company { 
  font: inherit; min-width: 0; font-size: 13px; color: var(--ink); background-color: transparent;
  border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 5px 28px 5px 9px;
  max-width: 200px; margin-left: 6px;
 }
.tb-company:focus { outline: 1px solid var(--focus); outline-offset: 2px; }

.tb-tabs { display: flex; flex-direction: row; gap: 2px; align-items: stretch; height: 100%; min-width: 0; }
.tb-tab { 
  background: none; border: none; cursor: pointer; font: inherit; font-size: 13.5px;
  color: var(--muted); padding: 0 14px; border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
 }
.tb-tab:hover { color: var(--ink); }
.tb-tab.active { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.tb-tab:focus-visible { outline: 1px solid var(--focus); outline-offset: -3px; }

.tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; }
/* Truncate rather than overflow: at 260px the sync line ran out of its box and
   printed straight into the Refresh button ("…not a real companyRefresh"). */
.tb-right .conn {
  font-size: 11.5px; max-width: 260px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--ink-2); font-size: 15px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tb-icon:hover { background: var(--accent-soft); color: var(--ink); }
.tb-right .account-box { display: flex; align-items: center; gap: 6px; border-top: 0; padding-top: 0; margin-top: 0; }
.tb-right .account-btn { padding: 3px 6px; }
.tb-right .account-meta { display: none; }        /* the avatar is enough up here */
.tb-right .brand-role { margin: 0; }

/* ---- rail ---- */
.rail { 
  flex: 0 0 auto; width: 60px; display: flex; flex-direction: column;
  background: var(--ground); border-right: 1px solid var(--hair);
  padding: 12px 0; position: sticky; top: 52px; height: calc(100vh - 52px);
 }
.rail-group { display: flex; flex-direction: column; gap: 2px; }
/* The rail's buttons are icons; the label is the tooltip and the accessible
   name. Overriding .nav-item wholesale keeps one definition of a nav button. */
.rail .nav-item {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 40px; margin: 0 auto; padding: 0; border-radius: var(--r-sm);
  color: var(--muted);
}
.rail .nav-item::before { content: none; }
.rail .nav-item:hover { background: var(--accent-soft); color: var(--ink); padding-left: 0; }
.rail .nav-item.active { background: var(--accent-soft); color: var(--ink); }
.nav-ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* The label rides along as a tooltip rather than a title attribute, which the
   browser delays by a second and styles unreadably on a dark rail. */
.nav-label { 
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 12px; padding: 5px 9px; border-radius: 4px;
  background: var(--raised); color: var(--ink); border: 1px solid var(--hair); box-shadow: var(--shadow-3);
  opacity: 0; pointer-events: none; transition: opacity 120ms var(--ease); z-index: 50;
 }
.rail .nav-item:hover .nav-label, .rail .nav-item:focus-visible .nav-label { opacity: 1; }
/* Company actions: icon plus a caption, set apart from the page links above. */
.rail-foot { 
  margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-inline: 4px; padding-top: 10px; border-top: 1px solid var(--hair);
 }
.rail-action { 
  width: 100%; padding: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; border-radius: var(--r-sm); cursor: pointer; font: inherit;
  font-size: 9.5px; line-height: 1.15; font-weight: 500; text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
 }
.rail-action:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }
.rail-cap { display: block; max-width: 100%; letter-spacing: -0.01em; }  /* words wrap whole, never mid-word */
.rail-add { color: var(--ink); }
.rail-add:hover { background: var(--accent-soft); }
.rail-danger { color: var(--muted); }
.rail-danger:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }

.main { max-width: 1040px; margin: 0 auto; width: 100%; }

/* Phone: the rail becomes a scrolling strip under the tabs, because 60px of
   chrome down the side of a 400px screen is a sixth of it. */
/* The top bar sheds its least important parts one at a time, so it is never
   choosing between overflowing and jumping straight to the phone layout. */
@media (max-width: 1180px) {
  .tb-brand { display: none; }                 /* the logo still identifies it */
  .tb-company { max-width: 160px; }
  .tb-right .conn { max-width: 180px; }
}
@media (max-width: 980px) {
  /* Every page header already names the company and its sync state, so this is
     the first thing that can go rather than the last. */
  .tb-right .conn { display: none; }
  .tb-company { max-width: 130px; }
  .tb-tab { padding: 0 10px; }
}
@media (max-width: 860px) {
  /* Scroll the tabs rather than let them squeeze the account controls away. */
  .tb-tabs { overflow-x: auto; scrollbar-width: none; }
  .tb-tabs::-webkit-scrollbar { display: none; }
  .tb-tab { white-space: nowrap; }
}

@media (max-width: 480px) {
  /* The role is on the account menu too; the bar needs the room. */
  .tb-right .brand-role { display: none; }
  .tb-company { max-width: 150px; }
  .tb-right { gap: 2px; }
}
@media (max-width: 720px) {
  .appbar { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; }
  .tb-tabs { order: 3; flex: 1 1 100%; }
  .tb-right .conn { display: none; }
  .shell { flex-direction: column; }
  .rail {
    width: 100%; height: auto; position: static; flex-direction: row;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 6px 8px; overflow-x: auto;
  }
  .rail-group { flex-direction: row; }
  .rail-foot { margin-top: 0; margin-left: auto; flex-direction: row; padding-top: 0; border-top: none;
               padding-left: 8px; border-left: 1px solid var(--border); margin-inline: 0; }
  .nav-label { display: none; }
}

/* ---- KPI Explorer dial ---- */
.kpix-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--hair); margin-bottom: 4px; }
.kpix-showing { margin: 0; font-size: 14px; color: var(--muted); }
.kpix-showing strong { color: var(--ink); font-weight: 500; border-bottom: 1px dashed var(--hair); }
.kpix-dd { position: relative; display: inline-block; }
.kpix-dd-btn { background: none; border: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); padding: 1px 2px; border-bottom: 1px dashed var(--hair); }
.kpix-dd-btn:hover { border-bottom-color: var(--ink); }
.kpix-dd-menu { 
  position: absolute; top: calc(100% + 6px); left: -8px; z-index: 30; min-width: 150px;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--raised); border: 1px solid var(--hair);
  border-radius: 4px; box-shadow: var(--shadow-3);
 }
.kpix-dd-menu[hidden] { display: none; }
.kpix-dd-menu button {
  background: none; border: none; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--ink-2); text-align: left; padding: 8px 10px; border-radius: var(--r-sm);
}
.kpix-dd-menu button:hover { background: var(--accent-soft); color: var(--ink); }

.kpix-filter { margin-left: auto; display: flex; gap: 0; border: 1px solid var(--hair); border-radius: var(--r-sm); }
.kpix-f { 
  display: flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--muted); padding: 6px 12px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
 }
.kpix-f b { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.kpix-f:hover { color: var(--ink); }
.kpix-f.active { background: var(--accent-soft); color: var(--ink); }
.kpix-f-on b { color: var(--good); }
.kpix-f-off b { color: var(--bad); }
.kpix-desc { margin: 10px 0 0; }

.kpix-wrap { position: relative; }
.kpix-svg { width: 100%; max-width: 860px; margin: 0 auto; height: auto; display: block; overflow: visible; }
.kpix-label { font-size: 11.5px; fill: var(--ink-2); }
.kpix-groupname { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; fill: var(--muted); }
.kpix-month { font-family: var(--display); font-size: 26px; font-weight: 600; fill: var(--ink); }
.kpix-sort { font-size: 12px; fill: var(--dim); }
.kpix-pct { font-family: var(--display); font-size: 34px; font-weight: 700; fill: var(--ink); }
.kpix-pct-sign { font-size: 20px; fill: var(--muted); }
.kpix-total { font-size: 12.5px; font-weight: 500; fill: var(--ink-2); }
.kpix-big { font-family: var(--display); font-size: 26px; font-weight: 700; }
.kpix-big-on { fill: var(--good); }
.kpix-big-off { fill: var(--bad); }
.kpix-small { font-size: 11px; letter-spacing: 0.02em; fill: var(--muted); }

.kpix-tile { cursor: pointer; }
.kpix-on rect  { fill: var(--good); }
.kpix-off rect { fill: var(--bad); }
.kpix-na rect { fill: var(--hair); }
.kpix-pop { transform-box: fill-box; transform-origin: center; transition: transform 140ms var(--ease), filter 140ms var(--ease); }
.kpix-tile:hover .kpix-pop, .kpix-tile:focus-visible .kpix-pop { transform: scale(1.08); }
.kpix-tile:focus-visible { outline: none; }
.kpix-tile:focus-visible rect { stroke: var(--focus); stroke-width: 2; }
.kpix-sub { font-size: 12px; fill: var(--muted); }
.kpix-ico { fill: none; stroke: var(--dim); stroke-width: 1.4; stroke-linecap: round; }
.kpix-f-na b { color: var(--muted); }

/* Tooltip is a positioned div rather than an SVG <title>: the native one takes
   about a second to appear and cannot show a value against its target. */
.kpix-tip { 
  position: absolute; z-index: 25; pointer-events: none;
  background: var(--raised); color: var(--ink); border: 1px solid var(--hair);
  padding: 10px 14px; border-radius: 4px; box-shadow: var(--shadow-3);
  font-size: 12.5px; line-height: 1.5; text-align: center; white-space: nowrap;
 }
.kpix-tip[hidden] { display: none; }
.kpix-tip strong { font-weight: 500; }
.kpix-tip span { display: block; color: var(--muted); }



@media (max-width: 720px) {
  .kpix-filter { margin-left: 0; width: 100%; }
  .kpix-f { flex: 1 1 0; justify-content: center; padding: 6px 4px; }
  /* Scaled to a phone's width the labels came out around 5px. Keep the dial
     legible and let it scroll sideways inside its own card instead. Block, not
     flex: a centred flex child that overflows is clipped on its left edge. */
  .kpix-wrap { display: block; -webkit-overflow-scrolling: touch; }
  .kpix-svg { min-width: 600px; }
}

/* ---- Bank Analysis (U6 / U7 / U8) ---- */
/* Text columns read left to right; only money is right-aligned. The base table
   rule right-aligns everything, which suits statements and not narratives. */
.bank-table th, .bank-table td, .bank-jobs th, .bank-jobs td, .bank-u8-table th, .bank-u8-table td { text-align: left; }
.bank-table .num, .bank-jobs .num, .bank-u8-table .num { text-align: right; }

.bank-drop {
  border: 1px dashed var(--muted); border-radius: var(--r-sm); background: var(--raised);
  padding: 34px 20px; text-align: center; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bank-drop:hover, .bank-drop.over, .bank-drop:focus-visible { border-color: var(--ink); background: var(--accent-soft); outline: none; }
.bank-drop.compact { padding: 14px 16px; margin-top: 12px; }
.bank-drop-title { font-size: 0.95rem; font-weight: 500; color: var(--ink); }
.bank-drop.compact .bank-drop-title { font-size: 0.8rem; font-weight: 400; color: var(--ink-2); }
.bank-drop-sub { margin-top: 6px; font-size: 0.78rem; color: var(--muted); }

.bank-pending { border-left: 2px solid var(--warn); }
.bank-pending select {
  background: var(--panel); color: var(--ink); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 9px 10px; font: inherit; font-size: 13px;
}
.bank-jobs tbody tr { cursor: pointer; }
.bank-jobs tbody tr:hover td { background: var(--accent-soft); }

.bank-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bank-title { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; margin: 8px 0 4px; }
.bank-sub { font-size: 0.82rem; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bank-actions { display: flex; gap: 10px; align-items: center; }
.bank-actions .primary-btn { margin: 0; }
.bank-actions .primary-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.bank-note { font-size: 0.78rem; color: var(--muted); }
.bank-blockers { margin: 0 0 14px; }

.bank-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--hair-soft); border: 1px solid var(--hair-soft); margin-bottom: 28px; }
.bank-tile { background: var(--panel); padding: 18px 20px; min-width: 0; }
.bank-tile-label { font-size: 0.74rem; letter-spacing: 0.02em; color: var(--muted); }
.bank-tile-value { font-family: var(--display); font-size: 1.2rem; font-weight: 700; margin: 6px 0 2px; white-space: nowrap; }
.bank-tile-sub { font-size: 0.76rem; color: var(--ink-2); }

.bank-warnings { border-left: 2px solid var(--warn); background: var(--panel); padding: 12px 16px; margin-bottom: 28px; font-size: 0.82rem; color: var(--ink-2); display: grid; gap: 4px; }

.bank-u8-table { max-width: 720px; }
.bank-money, .bank-nominal input {
  width: 150px; background: var(--raised); color: var(--ink); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 6px 8px; font: inherit; font-size: 13px; text-align: right;
}
.bank-money:focus, .bank-nominal input:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }
.bank-nominal { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.bank-nominal input { width: 90px; text-align: left; }
.bank-u8-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.bank-verdict { font-size: 0.86rem; font-weight: 600; }
.bank-verdict.ok { color: var(--good); }
.bank-verdict.bad { color: var(--bad); }
.bank-u8-foot .ghost-btn { margin-left: auto; }

.bank-progress { min-width: 260px; }
.bank-progress-bar { height: 6px; background: var(--hair-soft); border-radius: var(--r-sm); overflow: hidden; }
.bank-progress-bar span { display: block; height: 100%; background: var(--good); }
.bank-progress-text { margin-top: 6px; font-size: 0.74rem; color: var(--ink-2); text-align: right; }

.bank-q { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--hair-soft); }
.bank-q-main { min-width: 0; }
.bank-q-title { font-size: 0.92rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.bank-q-meta { font-size: 0.78rem; color: var(--ink-2); }
.bank-q-why { font-size: 0.8rem; color: var(--ink-2); margin-top: 4px; }
.bank-q-samples { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.bank-q-samples span { font-size: 0.72rem; color: var(--muted); background: var(--hair-soft); border-radius: var(--r-sm); padding: 2px 7px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-q-answer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bank-q-answer .primary-btn { margin: 0; }
.bank-sugg { font-weight: 400; opacity: 0.7; margin-left: 4px; }
.bank-q-select, .bank-row-select {
  background: var(--raised); color: var(--ink); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 7px 8px; font: inherit; font-size: 12.5px;
}
.bank-always { font-size: 0.76rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }

.bank-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hair); margin-bottom: 14px; flex-wrap: wrap; }
.bank-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font: inherit; font-size: 0.86rem; font-weight: 500; color: var(--muted); cursor: pointer; }
.bank-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.bank-tab-n { font-weight: 400; font-size: 0.76rem; color: var(--muted); margin-left: 6px; }
.bank-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.bank-cat { display: inline-flex; gap: 8px; align-items: baseline; border: 1px solid var(--hair-soft); border-radius: var(--r-sm); padding: 5px 10px; font-size: 0.78rem; color: var(--ink-2); }
.bank-cat strong { color: var(--ink); font-weight: 600; }
.bank-cat em { font-style: normal; color: var(--muted); font-size: 0.72rem; }
.bank-cat.ask { border-color: var(--warn); }

.bank-table td { white-space: normal; vertical-align: top; }
.bank-table td:first-child, .bank-table .num { white-space: nowrap; }
.bank-desc { max-width: 380px; }
.bank-why { font-size: 0.74rem; color: var(--muted); max-width: 320px; }
.bank-row.m-ask td { background: color-mix(in srgb, var(--warn) 9%, transparent); }
.bank-cat-btn { background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 2px 6px; margin: -3px -7px; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.bank-cat-btn:hover { border-color: var(--hair); background: var(--raised); }
.bank-row.m-ask .bank-cat-btn { color: var(--warn); font-weight: 600; }
/* How a line was decided, by colour: a saved rule is green, the AI is blue,
   a line still waiting is amber. Bank type and keyword stay neutral. */
.pill.bank-m-rule { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.pill.bank-m-ai { color: var(--slate); background: color-mix(in srgb, var(--slate) 16%, transparent); }
.pill.bank-m-ask, .pill.bank-ask { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.pill.bank-m-user { color: var(--ink); }
.pill.bank-ok { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }

.bank-files details { font-size: 0.78rem; color: var(--ink-2); }
.bank-skipped { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; }

/* The QuickBooks company's chrome says nothing true about a bank client. */
body.view-bank #company-line, body.view-bank #banner, body.view-bank #pdf-btn,
body.view-bank #pagefoot, body.view-bank .tb-company, body.view-bank #refresh-btn,
body.view-bank #conn-status { display: none; }
.bank-jobs td { white-space: normal; }
.bank-jobs td:last-child, .bank-jobs .num { white-space: nowrap; }

/* Columns / Payees / Lines switch, and the column editor. */
.bank-modes { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding-bottom: 6px; }
.bank-mode { background: transparent; border: 1px solid var(--hair); padding: 6px 12px; font: inherit; font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.bank-mode:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.bank-mode:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.bank-mode + .bank-mode { border-left: 0; }
.bank-mode.active { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.bank-cols-note { margin: 0 0 12px; }
.bank-cols td { vertical-align: middle; }
.bank-col-name, .bank-col-nominal, .bank-col-merge, .bank-payee-select, .bank-col-add input {
  background: var(--raised); color: var(--ink); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 6px 8px; font: inherit; font-size: 13px;
}
.bank-col-name { width: 200px; font-weight: 500; }
.bank-col-nominal { width: 90px; }
.bank-col-name:focus, .bank-col-nominal:focus, .bank-col-add input:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }
.bank-col-add { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.bank-col-add input { width: 260px; }

/* Several banks for one client and year; lines placed by the default rule. */
.bank-banks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.bank-bank { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 8px 12px; font: inherit; font-size: 0.82rem; color: var(--ink-2); cursor: pointer; }
.bank-bank.active { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.bank-row.m-default td { background: color-mix(in srgb, var(--slate) 6%, transparent); }
.pill.bank-m-default { color: var(--slate); background: color-mix(in srgb, var(--slate) 16%, transparent); }
.bank-default-note { border-left-color: var(--slate); }
.bank-known tbody tr { cursor: default; }
.bank-known tbody tr:hover td { background: transparent; }
.bank-row-actions { white-space: nowrap; text-align: right; }

/* The statement as the bank laid it out. */
.bank-statement-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--hair-soft); border: 1px solid var(--hair-soft); margin-bottom: 14px; }
.bank-statement-head div { background: var(--raised); padding: 12px 16px; display: grid; gap: 4px; }
.bank-statement-head span { font-size: 0.74rem; color: var(--muted); }
.bank-statement-head strong { font-size: 1.02rem; font-weight: 700; }
.bank-statement td { vertical-align: middle; }
.bank-type { font-size: 0.72rem; color: var(--muted); }

/* Last year's file and this year's records, side by side. */
.bank-drop-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.bank-drop-pair .bank-drop { padding: 22px 20px; text-align: left; }
.bank-drop-step { font-size: 0.72rem; color: var(--muted); margin-bottom: 6px; }
.bank-drop-hint { margin-top: 12px; font-size: 0.76rem; color: var(--ink-2); font-weight: 500; }
.bank-drop.template { border-style: solid; border-color: var(--hair); }
.bank-drop.template:hover, .bank-drop.template.over { border-color: var(--ink); }

/* U12 wages summary and U15 purchases day book. */
.bank-wages td, .bank-extra td { vertical-align: middle; }
.bank-wage-select, .bank-supplier-select {
  background: var(--raised); color: var(--ink); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 5px 7px; font: inherit; font-size: 12.5px; max-width: 250px;
}
.bank-extra-note { margin: 12px 0 0; }
.bank-extra-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 10px; }
.bank-quarters { max-width: 560px; margin-top: 16px; }
.bank-lines-bare { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.bank-lines-bare .bank-tabs { margin-bottom: 0; }
.bank-modes { flex-wrap: wrap; }
.bank-wages th, .bank-wages td { padding: 6px 8px; font-size: 0.78rem; }
.bank-wages th:first-child, .bank-wages td:first-child { min-width: 0; width: 44px; }
.bank-wages td:nth-child(2) { white-space: nowrap; }
.bank-wage-select { max-width: 190px; }
.bank-download { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.bank-sheets { font-size: 0.7rem; font-weight: 400; opacity: 0.75; letter-spacing: 0.02em; }

.bank-one-sheet {
  background: transparent; color: var(--ink-2); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.bank-actions { flex-wrap: wrap; justify-content: flex-end; }

/* Payees that come up often, offered as columns. */
.bank-frequent { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hair); }
.bank-frequent h3 { font-size: 0.84rem; font-weight: 500; margin: 0 0 4px; }
.bank-frequent-min {
  width: 58px; background: var(--raised); color: var(--ink); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 3px 6px; font: inherit; font-size: 12.5px; text-align: center;
}
.bank-frequent-scroll { max-height: 420px; margin-top: 12px; }
.bank-tick, .bank-table th.bank-tick, .bank-table td.bank-tick { width: 34px; min-width: 0; text-align: center; }
.bank-frequent-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.bank-frequent-form input[type="text"] {
  width: 280px; background: var(--raised); color: var(--ink); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 7px 9px; font: inherit; font-size: 13px;
}
.bank-frequent-form input[type="text"]:focus { outline: 1px solid var(--focus); outline-offset: 2px; border-color: var(--muted); }
.bank-frequent-form .primary-btn { margin: 0; }

/* Bookkeeping-only mode: one page, so nothing to navigate to and no session to
   show. The server refuses the routes behind everything hidden here. */
body.bookkeeping-only .tb-tabs,
body.bookkeeping-only .tb-company,
body.bookkeeping-only #conn-status,
body.bookkeeping-only #refresh-btn,
body.bookkeeping-only .account-box,
body.bookkeeping-only .rail { display: none !important; }