/* NUMBAAS design system for the production app: tokens, components (nb-), dashboard layout (db-) and the bridge that restyles
   the existing screens. Source of truth: the NUMBAAS Design System (https://claude.ai/artifact/5drn9LGRwwFUxiB5xz1NtM). */
:root{--ink:#16213E;--ink-2:#3A4660;--muted:#5A6473;--line:#DBE1EA;--control-border:#8A94A8;--canvas:#F4F6F9;--surface:#FFFFFF;--surface-2:#F7F9FC;--blue:#185FA5;--blue-strong:#124A82;--blue-tint:#E7F0FA;--teal:#1D9E75;--teal-text:#0F7A58;--teal-tint:#E4F4EE;--mint:#5DCAA5;--mint-pale:#9FE1CB;--amber-text:#8A5A00;--amber-tint:#FFF3DC;--red:#B42318;--red-tint:#FDECEA;--side-text:#C3CDDD;--side-muted:#8B97AE;--side-hover:#223055;--focus:#185FA5;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;--shadow-dialog:0 16px 48px rgba(22, 33, 62, 0.18);--shadow-popover:0 4px 16px rgba(22, 33, 62, 0.12);--sidebar-width:248px;--topbar-height:56px;--content-max:1320px;--font-display:"Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;--font-sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"Spline Sans Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;}
/* NUMBAAS design system - components. Every value comes from tokens.css (colour, space, radius, shadow, layout, fonts).
   Prefix nb-. Loaded after tokens.css; production loads the same file. */

/* ---------- base ---------- */
.nb-base { font-family: var(--font-sans); font-size: 14px; line-height: 22px; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01"; }
.nb-base *, .nb-base *::before, .nb-base *::after { box-sizing: border-box; }
.nb-muted { color: var(--muted); }
.nb-num, .nb-figure-text { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.nb-pos { color: var(--teal-text); }
.nb-neg { color: var(--red); }
:where(.nb-btn, .nb-input, .nb-tab, .nb-side__link, .nb-queue__item, a):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- button ---------- */
.nb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4);
  font: 600 14px/1 var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--control-border);
  border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .12s, border-color .12s; }
.nb-btn:hover { background: var(--surface-2); border-color: var(--ink-2); }
.nb-btn--primary { color: #FFFFFF; background: var(--blue); border-color: var(--blue); }
.nb-btn--primary:hover { background: var(--blue-strong); border-color: var(--blue-strong); }
.nb-btn--ghost { background: transparent; border-color: transparent; color: var(--blue); }
.nb-btn--ghost:hover { background: var(--blue-tint); border-color: transparent; }
.nb-btn--danger { color: var(--red); border-color: var(--red); }
.nb-btn--danger:hover { background: var(--red-tint); border-color: var(--red); }
.nb-btn--sm { height: 30px; padding: 0 var(--space-3); font-size: 12px; }
.nb-btn[disabled], .nb-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- status pill ---------- */
.nb-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-sans); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.nb-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nb-pill--ok { color: var(--teal-text); background: var(--teal-tint); border-color: transparent; }
.nb-pill--attention { color: var(--amber-text); background: var(--amber-tint); border-color: transparent; }
.nb-pill--problem { color: var(--red); background: var(--red-tint); border-color: transparent; }
.nb-pill--info { color: var(--blue); background: var(--blue-tint); border-color: transparent; }
.nb-pill--restricted { color: #FFFFFF; background: var(--ink); border-color: var(--ink); }
.nb-pill--restricted::before { background: var(--mint); }

/* ---------- panel ---------- */
.nb-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nb-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.nb-panel__title { margin: 0; font: 650 20px/26px var(--font-display); color: var(--ink); }
.nb-panel__sub { margin: 2px 0 0; font-size: 12px; line-height: 18px; color: var(--muted); }
.nb-panel__body { padding: var(--space-6); }
.nb-panel__body--flush { padding: 0; }

/* ---------- page header ---------- */
.nb-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.nb-page-head__title { margin: 0; font: 700 29px/34px var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.nb-page-head__lead { margin: var(--space-2) 0 0; max-width: 64ch; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.nb-page-head__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* ---------- figure strip (dashboard key figures) ---------- */
.nb-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nb-figure { padding: var(--space-4) var(--space-6) var(--space-4); border-left: 1px solid var(--line); min-width: 0; }
.nb-figure:first-child { border-left: 0; }
.nb-figure__label { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--muted); }
.nb-figure__value { margin-top: var(--space-1); font: 650 24px/30px var(--font-display); letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nb-figure__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); font-size: 12px; line-height: 18px; color: var(--muted); }
.nb-figure__delta { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nb-figure__delta--up { color: var(--teal-text); }
.nb-figure__delta--down { color: var(--red); }
.nb-spark { display: block; flex-shrink: 0; width: 72px; height: 24px; overflow: visible; }
.nb-spark path { fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.nb-spark--down path { stroke: var(--red); }
.nb-spark circle { fill: var(--surface); stroke: inherit; stroke-width: 1.75; }

/* ---------- action queue ("Needs you today") ---------- */
.nb-queue { list-style: none; margin: 0; padding: 0; }
.nb-queue > li + li { border-top: 1px solid var(--line); }
.nb-queue__item { display: grid; grid-template-columns: 8px 1fr auto; align-items: start; column-gap: var(--space-3); padding: var(--space-3) var(--space-6);
  color: inherit; text-decoration: none; }
a.nb-queue__item:hover { background: var(--surface-2); }
.nb-queue__dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--amber-text); }
.nb-queue__dot--problem { background: var(--red); }
.nb-queue__dot--info { background: var(--blue); }
.nb-queue__title { font-weight: 600; color: var(--ink); }
.nb-queue__detail { font-size: 12px; line-height: 18px; color: var(--muted); }
.nb-queue__go { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.nb-queue__empty { padding: var(--space-6); color: var(--muted); }

/* ---------- data table ---------- */
.nb-table-wrap { overflow-x: auto; }
.nb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 22px; }
.nb-table th { position: sticky; top: 0; z-index: 1; padding: var(--space-2) var(--space-3); text-align: left; font: 600 12px/18px var(--font-sans); color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.nb-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.nb-table th:first-child, .nb-table td:first-child { padding-left: var(--space-6); }
.nb-table th:last-child, .nb-table td:last-child { padding-right: var(--space-6); }
.nb-table td.nb-subject { color: var(--ink); font-weight: 600; }
.nb-table .nb-num, .nb-table th.nb-num { text-align: right; }
.nb-table td.nb-num { font-family: var(--font-mono); color: var(--ink); }
.nb-table td.nb-pos { color: var(--teal-text); }
.nb-table td.nb-neg { color: var(--red); }
.nb-panel > .nb-table-wrap:first-child .nb-table thead th:first-child { border-top-left-radius: var(--radius-md); }
.nb-panel > .nb-table-wrap:first-child .nb-table thead th:last-child { border-top-right-radius: var(--radius-md); }
.nb-table tbody tr:hover td { background: var(--surface-2); }
.nb-table tr.nb-total td { font-weight: 700; color: var(--ink); border-top: 2px solid var(--ink); border-bottom: 0; background: var(--surface); }
.nb-table tr[aria-selected="true"] td { background: var(--blue-tint); }

/* ---------- form field ---------- */
.nb-field { display: grid; gap: 6px; align-content: start; }
.nb-field__label { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--ink-2); }
.nb-input { width: 100%; height: 36px; padding: 0 var(--space-3); font: 400 14px/22px var(--font-sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--control-border); border-radius: var(--radius-sm); }
textarea.nb-input { height: auto; min-height: 72px; padding: var(--space-2) var(--space-3); resize: vertical; }
.nb-input:hover { border-color: var(--ink-2); }
.nb-input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--blue); }
.nb-input[readonly] { background: var(--surface-2); }
.nb-field__help { font-size: 12px; line-height: 18px; color: var(--muted); }
.nb-field--error .nb-input { border-color: var(--red); }
.nb-field__error { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--red); }

/* ---------- notice ---------- */
.nb-notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--blue-tint); color: var(--ink); font-size: 14px; line-height: 22px; }
.nb-notice__title { font-weight: 700; margin-right: var(--space-1); }
.nb-notice--attention { background: var(--amber-tint); }
.nb-notice--attention .nb-notice__title { color: var(--amber-text); }
.nb-notice--problem { background: var(--red-tint); }
.nb-notice--problem .nb-notice__title { color: var(--red); }
.nb-notice--ok { background: var(--teal-tint); }
.nb-notice--ok .nb-notice__title { color: var(--teal-text); }
.nb-notice--info .nb-notice__title { color: var(--blue); }

/* ---------- dialog ---------- */
.nb-scrim { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-6); background: rgba(22, 33, 62, 0.45); }
.nb-dialog { width: min(560px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); }
.nb-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.nb-dialog__title { margin: 0; font: 650 20px/26px var(--font-display); color: var(--ink); }
.nb-dialog__body { padding: var(--space-6); overflow: auto; }
.nb-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); }

/* ---------- tabs ---------- */
.nb-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; }
.nb-tab { position: relative; padding: var(--space-3) var(--space-3); font: 600 14px/22px var(--font-sans); color: var(--muted); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.nb-tab:hover { color: var(--ink); }
.nb-tab[aria-selected="true"] { color: var(--ink); }
.nb-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 2px; background: var(--blue); border-radius: 2px; }

/* ---------- sidebar navigation ---------- */
.nb-side { width: var(--sidebar-width); min-height: 100%; padding: var(--space-4) var(--space-3); background: var(--ink); color: var(--side-text); display: flex; flex-direction: column; gap: var(--space-4); }
.nb-side__brand { display: flex; align-items: center; gap: 10px; padding: var(--space-1) var(--space-3); }
.nb-side__word { font: 700 20px/1 var(--font-display); letter-spacing: -0.02em; color: #FFFFFF; }
.nb-side__word b { color: var(--mint); font-weight: 700; }
.nb-side__org { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--side-hover); }
.nb-side__org b { display: block; color: #FFFFFF; font-weight: 600; }
.nb-side__org span { font-size: 12px; line-height: 18px; color: var(--side-muted); }
.nb-side__group { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--side-muted); padding: var(--space-3) var(--space-3) var(--space-1); }
.nb-side__link { display: flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--side-text); text-decoration: none; font-weight: 500; }
.nb-side__link:hover { background: var(--side-hover); color: #FFFFFF; }
.nb-side__link[aria-current="page"] { background: var(--side-hover); color: var(--mint); font-weight: 600; }
.nb-side__count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--mint); color: var(--ink); font: 700 12px/20px var(--font-sans); text-align: center; }

/* ---------- empty state ---------- */
.nb-empty { padding: var(--space-12) var(--space-6); text-align: center; }
.nb-empty__title { margin: 0; font: 650 20px/26px var(--font-display); color: var(--ink); }
.nb-empty__text { margin: var(--space-2) auto var(--space-4); max-width: 44ch; color: var(--ink-2); }

/* ---------- store league (the signature: every branch ranked by profit) ---------- */
.nb-league { list-style: none; margin: 0; padding: 0; }
.nb-league__row { display: grid; grid-template-columns: 28px minmax(120px, 200px) 1fr 120px 64px; align-items: center; column-gap: var(--space-4); padding: 10px var(--space-6); border-top: 1px solid var(--line); }
.nb-league__row:first-child { border-top: 0; }
.nb-league__rank { font: 700 14px/1 var(--font-display); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.nb-league__row--top .nb-league__rank { color: var(--teal-text); }
.nb-league__store { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-league__store small { display: block; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--muted); }
.nb-league__track { position: relative; height: 14px; }
.nb-league__track::before { content: ""; position: absolute; top: -4px; bottom: -4px; left: var(--zero, 25%); width: 1px; background: var(--control-border); }
.nb-league__bar { position: absolute; top: 0; height: 14px; border-radius: 3px; background: var(--teal); }
.nb-league__bar--loss { background: var(--red); }
.nb-league__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.nb-league__margin { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .nb-btn, .nb-input { transition: none; } }

/* ---------- app shell + dashboard layout (to join the design system after approval) ---------- */
.db { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); background: var(--canvas); }
.db-main { display: flex; flex-direction: column; min-width: 0; }
.db-top { height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-8); background: var(--surface); border-bottom: 1px solid var(--line); }
.db-period { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--surface); font: 600 14px/1 var(--font-sans); color: var(--ink); }
.db-search { flex: 1; max-width: 420px; }
.db-who { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); font-size: 14px; }
.db-who b { display: block; font-weight: 600; color: var(--ink); line-height: 18px; }
.db-who span { display: block; font-size: 12px; line-height: 18px; color: var(--muted); }
.db-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue); font: 700 14px/1 var(--font-sans); }
.db-content { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) var(--space-8) var(--space-12); }
.db-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; }
.db-row--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.db-page-head { margin-bottom: 0; }
.db-soon { list-style: none; margin: 0; padding: 0; }
.db-soon li { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-6); }
.db-soon li + li { border-top: 1px solid var(--line); }
.db-date { font: 700 14px/18px var(--font-display); color: var(--ink); }
.db-date small { display: block; font: 500 12px/18px var(--font-sans); color: var(--muted); }
.db-chart { display: block; width: 100%; height: auto; }
.db-chart .axis { stroke: var(--line); stroke-width: 1; }
.db-chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.db-chart .label { font: 500 12px var(--font-sans); fill: var(--muted); }
.db-chart .line { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.db-chart .line--prior { stroke: var(--control-border); stroke-width: 1.5; stroke-dasharray: 4 4; }
.db-chart .dot { fill: var(--surface); stroke: var(--teal); stroke-width: 2.5; }
.db-chart .bar { fill: var(--teal); }
.db-chart .bar--muted { fill: var(--mint-pale); }
.db-chart .target { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.db-chart .value { font: 600 12px var(--font-mono); fill: var(--ink); }
.db-progress { height: 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.db-progress > i { display: block; height: 100%; background: var(--teal); border-radius: var(--radius-pill); }
.db-aged { display: flex; height: 28px; border-radius: var(--radius-sm); overflow: hidden; }
.db-aged > i { display: block; height: 100%; }
.db-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.db-legend div { font-size: 12px; line-height: 18px; color: var(--muted); }
.db-legend b { display: block; font: 500 14px/22px var(--font-mono); color: var(--ink); }
.db-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.db-steps { display: flex; align-items: center; gap: 4px; }
.db-steps i { width: 22px; height: 6px; border-radius: 3px; background: var(--line); }
.db-steps i.done { background: var(--teal); }
.db-steps i.now { background: var(--amber-text); }
.db-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.db-pipe > div { padding: var(--space-4) var(--space-6); border-left: 1px solid var(--line); }
.db-pipe > div:first-child { border-left: 0; }
.db-pipe span { display: block; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--muted); }
.db-pipe b { display: block; margin-top: var(--space-1); font: 650 24px/30px var(--font-display); color: var(--ink); }
.db-pipe em { display: block; font-style: normal; font: 400 12px/18px var(--font-mono); color: var(--ink-2); }
.db-meter { display: grid; gap: var(--space-2); }
.db-meter-head { display: flex; justify-content: space-between; align-items: baseline; }
.db-big { font: 700 35px/40px var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.db-note { font-size: 12px; line-height: 18px; color: var(--muted); }
.db-viewonly { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }

/* ---------- bridge: the existing app's classes, restyled with the design system (until each screen is rebuilt) ---------- */
:root { --paper: var(--canvas); --card: var(--surface); --navy: var(--ink); --clay: var(--red);
  --serif: var(--font-display); --sans: var(--font-sans); --brand: var(--font-display); }
body { font-family: var(--font-sans); font-size: 14px; line-height: 22px; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
:where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* sign-in */
#login { background: var(--ink); }
.loginCard { border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-dialog); }
.wm { font-family: var(--font-display); letter-spacing: -0.02em; }
.loginCard .wm b { color: var(--teal-text); }
.loginCard h1 { font: 700 24px/30px var(--font-display); letter-spacing: -0.01em; margin: var(--space-2) 0 var(--space-1); }
.sub { color: var(--muted); font-size: 14px; }
.err { background: var(--red-tint); color: var(--red); border-radius: var(--radius-sm); font-size: 14px; padding: var(--space-2) var(--space-3); }
.apib { font-size: 12px; line-height: 18px; }

/* app shell */
#app { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
@media (max-width: 760px) { #app { grid-template-columns: 68px minmax(0, 1fr); } }   /* phones: the icon rail (sidebar option A). This file loads after the page's own rules, so it must say so too (PL1) */
.side { background: var(--ink); color: var(--side-text); padding: var(--space-4) 0; }
.brand { padding: var(--space-1) var(--space-6) var(--space-1); gap: 10px; }
.brand .wm { font-size: 20px; color: #FFFFFF; }
.brand .wm b { color: var(--mint); }
.tag { padding: 0 var(--space-6) var(--space-4); }
.org { margin: 0 var(--space-3) var(--space-3); background: var(--side-hover); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.org b { font-weight: 600; }
.org span { font-size: 12px; line-height: 18px; color: var(--side-muted); }
.nav .grp { font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--side-muted); padding: var(--space-3) var(--space-6) var(--space-1); }
.nav button { width: calc(100% - 24px); margin: 0 var(--space-3); height: 34px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--side-text); }
.nav button:hover { background: var(--side-hover); color: #FFFFFF; }
.nav button.on { background: var(--side-hover); color: var(--mint); font-weight: 600; border: 0; }
.topbar { min-height: var(--topbar-height); padding: var(--space-2) var(--space-8); }
.crumb { font-size: 12px; line-height: 18px; color: var(--muted); }
.crumb b { font: 650 20px/26px var(--font-display); color: var(--ink); margin-top: 0; }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.content { padding: var(--space-8) var(--space-8) var(--space-12); max-width: var(--content-max); }

/* headings, panels, key figures */
h2 { font: 650 20px/26px var(--font-display); color: var(--ink); margin: 0 0 var(--space-3); }
.card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); margin-bottom: var(--space-6); }
.kpis { gap: var(--space-4); }
.kpi { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
.kpi .k { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.kpi .v { font: 650 24px/30px var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: var(--space-1); }
.kpi .d { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--muted); margin-top: var(--space-2); }
.grid2 { gap: var(--space-6); }

/* tables */
table { font-size: 14px; line-height: 22px; }
th, td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
th { font: 600 12px/18px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
td { color: var(--ink-2); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
th.num { font-family: var(--font-sans); }
td.num { color: var(--ink); }
tr.tot td { font-weight: 700; color: var(--ink); border-top: 2px solid var(--ink); }
tbody tr:hover td { background: var(--surface-2); }

/* pills, notices, text helpers */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--radius-pill); font: 600 12px/1 var(--font-sans); background: var(--teal-tint); color: var(--teal-text); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.banner { background: var(--blue-tint); border: 0; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 22px; color: var(--ink); margin-bottom: var(--space-6); }
.soon { color: var(--muted); font-size: 14px; }
.mono { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* buttons: the old dark button is the primary action, the ghost button is secondary */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-4); border: 1px solid var(--blue); border-radius: var(--radius-sm);
  background: var(--blue); color: #FFFFFF; font: 600 14px/1 var(--font-sans); }
.btn:hover { background: var(--blue-strong); border-color: var(--blue-strong); }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--control-border); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--ink-2); }

/* form fields */
label { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--ink-2); }
input, select.f, textarea { border: 1px solid var(--control-border); border-radius: var(--radius-sm); font: 400 14px/22px var(--font-sans); color: var(--ink); padding: 6px var(--space-3); min-height: 36px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--blue); }
.ltbl input, .ltbl select { border-color: var(--control-border); border-radius: var(--radius-sm); }

/* dialogs */
.ov { background: rgba(22, 33, 62, 0.45); }
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); }
.mhead { padding: var(--space-4) var(--space-6); }
.mhead b { font: 650 20px/26px var(--font-display); }
.mbody { padding: var(--space-6); }
.mfoot { padding: var(--space-4) var(--space-6); gap: var(--space-2); }
.pmodal .mtop label { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.pmodal .ltbl th { font-size: 12px; letter-spacing: 0; text-transform: none; }
.pmodal .mtop input, .pmodal .mtop select, .pmodal .ltbl input, .pmodal .ltbl select { border-color: var(--control-border); border-radius: var(--radius-sm); }
.pmodal .mtop input:focus, .pmodal .mtop select:focus, .pmodal .ltbl input:focus, .pmodal .ltbl select:focus { outline: 2px solid var(--focus); outline-offset: 0; box-shadow: none; }
/* === Screens (step 5): shared layout for cleaned-up screens (scripts/apply-sales-ui.mjs) === */
.nb-screen { display: flex; flex-direction: column; gap: var(--space-6); }
.nb-screen__lead { margin: 0; }
.nb-screen__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--space-6); }   /* side by side from 420 px each; stacked on phones (PL1) */
.nb-toolbar--split { justify-content: space-between; }
.nb-toolbar .nb-input { width: auto; }
.nb-toolbar .nb-toolbar__search { width: 300px; }
.nb-screen .nb-panel + .nb-panel, .nb-screen__row > .nb-panel { margin-top: 0; }   /* the screen's gap does the spacing */
@media (min-width: 1100px) { .nb-screen .nb-table-wrap { overflow: visible; } }   /* row menus aren't clipped; narrow screens still scroll */
.nb-sortable { cursor: pointer; user-select: none; }
.nb-sortable:hover { color: var(--ink); }
.nb-legend-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nb-figure__value.nb-pos { color: var(--teal-text); }
.nb-figure__value.nb-neg { color: var(--red); }
/* === end screens === */
/* === Screens, part 2 (step 5): forms and table cell details (scripts/apply-sales2-ui.mjs) === */
.nb-cell-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--muted); font-weight: 400; }
.nb-form-row { display: grid; grid-template-columns: minmax(260px, 2fr) 150px minmax(170px, 1fr) minmax(200px, 2fr) auto; gap: var(--space-4); align-items: end; }
.nb-form-row .nb-field { margin: 0; }
.nb-form-row .nb-input { width: 100%; margin: 0; }   /* older rules gave text boxes, not dropdowns, a top margin */
@media (max-width: 1100px) { .nb-form-row { grid-template-columns: 1fr 1fr; } }
.nb-warn { color: var(--amber-text); }
.nb-mono { font-family: var(--font-mono); font-size: 13px; }
/* === end screens, part 2 === */
/* === Screens, part 3 (step 5): charts and selection (scripts/apply-purchases-ui.mjs) === */
.nb-colchart { display: flex; gap: var(--space-2); align-items: flex-end; height: 180px; padding-top: var(--space-2); }
.nb-colchart__col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.nb-colchart__bar { width: 100%; max-width: 44px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--blue); }
.nb-colchart__label { margin-top: 6px; font-size: 11px; line-height: 16px; color: var(--muted); }
.nb-check { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.nb-check:disabled { cursor: not-allowed; }
.nb-table .nb-input { height: 32px; margin: 0; }
.nb-field--inline { display: flex; align-items: center; gap: var(--space-2); }
.nb-grow { flex: 1; min-width: 220px; }
.nb-panel__foot { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); }
.nb-figure__value.nb-warn { color: var(--amber-text); }
.nb-input--amount { width: 140px; }
.nb-input--year { width: 110px; }
.nb-rank-bar { width: 38%; }
/* === end screens, part 3 === */
/* === Screens, part 4 (step 5): filters, statements and reconciliation (scripts/apply-financials-ui.mjs) === */
.nb-filters { align-items: flex-end; gap: var(--space-4); }
.nb-filters .nb-field { margin: 0; }
.nb-filters .nb-input { margin: 0; }
.nb-input--wide { min-width: min(260px, 100%); }   /* never wider than a phone (PL1) */
.nb-indent { padding-left: var(--space-6) !important; }
.nb-rec-form { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.nb-rec-form .nb-field { margin: 0; }
.nb-rec-form .nb-input { margin: 0; }
.nb-rec-form b { font: 600 16px/24px var(--font-mono); color: var(--ink); }
.nb-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.nb-checklist ul { margin: var(--space-2) 0 0; padding-left: 18px; font-size: 14px; line-height: 24px; color: var(--ink-2); }
.nb-cell-sub.nb-neg { color: var(--red); }       /* small print keeps its warning colour */
.nb-cell-sub.nb-pos { color: var(--teal-text); }
.nb-toolbar .nb-input--year { width: 110px; }    /* narrow boxes stay narrow inside toolbars (also Spend) */
.nb-toolbar .nb-input--amount { width: 140px; }
/* === end screens, part 4 === */
/* === Screens, part 5 (step 5): budgets, assets and management reports (scripts/apply-fin2-ui.mjs) === */
.nb-budget-bar { margin-top: 6px; }
.nb-budget-bar .nb-bar__track { height: 6px; }
.nb-row--muted td { opacity: .55; }
.nb-check-label { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-2); padding-bottom: 8px; }
.nb-figures--ratios .nb-figure__value { font-size: 22px; }
/* === end screens, part 5 === */
/* === Screens, part 6 (step 5): payroll (scripts/apply-payroll-ui.mjs) === */
.nb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }   /* the toolbar component itself (used since part 1) */
.nb-toolbar.nb-filters { align-items: flex-end; gap: var(--space-4); }
.nb-toolbar.nb-toolbar--split { justify-content: space-between; }
.nb-tabpanel { margin-top: var(--space-2); }
.nb-panel--focus { border: 2px solid var(--blue); }
.nb-row--flag td { background: #FFFBF2; }
.nb-flags .nb-pill { margin: 1px 2px; }
/* === end screens, part 6 === */
/* === Screens, part 7 (step 5): payroll org chart, calculator (scripts/apply-payroll2-ui.mjs) === */
.nb-org { list-style: none; margin: 0; padding: 0; }
.nb-org__item { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 22px; color: var(--ink-2); }
.nb-org__item:last-child { border-bottom: 0; }
.nb-org__item b { color: var(--ink); font-weight: 600; }
.nb-org__item[data-depth="1"] { padding-left: 24px; } .nb-org__item[data-depth="2"] { padding-left: 48px; } .nb-org__item[data-depth="3"] { padding-left: 72px; }
.nb-org__item[data-depth="4"] { padding-left: 96px; } .nb-org__item[data-depth="5"] { padding-left: 120px; } .nb-org__item[data-depth="6"] { padding-left: 144px; }
.nb-org__item:not([data-depth="0"])::before { content: "\2514\2500 "; color: var(--muted); }
.nb-panel--narrow { max-width: 560px; }
.nb-form-stack { display: grid; gap: var(--space-4); }
.nb-form-stack .nb-field, .nb-form-stack .nb-input { margin: 0; }
.nb-calc:not(:empty) { margin-top: var(--space-6); }
.nb-calc th[scope="rowgroup"] { text-align: left; padding: var(--space-4) var(--space-6) var(--space-2); font-size: 12px; color: var(--muted); font-weight: 600; background: none; }
.nb-calc__note { margin: var(--space-3) 0 0; font-size: 12px; }
.nb-panel__head .nb-toolbar { flex-shrink: 0; }
/* === end screens, part 7 === */
/* === Screens, part 8 (step 5): Admin forms, AI Assistant, Tax Estimate, Branches (scripts/apply-admin1-ui.mjs) === */
/* Restored: shared building blocks every cleaned-up screen relies on (row actions, More menus, bars, hidden labels,
   no-wrap cells, sortable headings). They were in the test copy but missing from the shipped stylesheet since step 5. */
.nb-nowrap { white-space: nowrap; }
.nb-small { font-size: 12px; line-height: 18px; }
.nb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb-table th[data-sort] { cursor: pointer; user-select: none; }
.nb-table th[data-sort]:hover { color: var(--ink); }
.nb-table th[data-dir="asc"]::after { content: " \25B2"; font-size: 8px; vertical-align: 1px; }
.nb-table th[data-dir="desc"]::after { content: " \25BC"; font-size: 8px; vertical-align: 1px; }
.nb-actions { white-space: nowrap; text-align: right; }
.nb-actions > * + * { margin-left: var(--space-2); }
.nb-menu { position: relative; display: inline-block; vertical-align: middle; }
.nb-menu > summary { list-style: none; }
.nb-menu > summary::-webkit-details-marker { display: none; }
.nb-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px; padding: 4px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-popover); text-align: left; }
.nb-menu__list button { background: none; border: 0; padding: 8px 10px; border-radius: var(--radius-sm); font: 500 13px/18px var(--font-sans); color: var(--ink-2); text-align: left; cursor: pointer; }
.nb-menu__list button:hover, .nb-menu__list button:focus-visible { background: var(--surface-2); color: var(--ink); }
.nb-bars { display: flex; flex-direction: column; gap: var(--space-3); }
.nb-bar { display: grid; grid-template-columns: 88px minmax(0, 1fr) 128px; align-items: center; gap: var(--space-3); font-size: 13px; line-height: 20px; }
.nb-bar > b { text-align: right; font-weight: 600; color: var(--ink); }
.nb-bar__track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.nb-bar__fill { height: 100%; border-radius: 4px; }
.db-legend.nb-legend-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nb-logo-row input[type=file] { width: auto; }
.nb-screen--form { max-width: 820px; }
.nb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.nb-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.nb-form-grid .nb-field, .nb-form-grid .nb-input { margin: 0; }
.nb-field--wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .nb-form-grid, .nb-form-grid--3 { grid-template-columns: 1fr; } }
.nb-logo-row { display: flex; gap: var(--space-4); align-items: center; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.nb-logo-box { width: 120px; height: 70px; flex-shrink: 0; border: 1px dashed var(--line); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface-2); }
.nb-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nb-ai-answer { margin-top: var(--space-3); white-space: pre-wrap; color: var(--ink-2); font-size: 14px; line-height: 22px; }
.nb-ai-answer:empty { display: none; }
.nb-inline-figure { display: block; font: 600 16px/36px var(--font-mono); color: var(--ink); }
.nb-panel--hero { background: var(--ink); border-color: var(--ink); }
.nb-panel--hero .nb-field__label { color: #B4C1D6; }
.nb-hero-figure { margin-top: var(--space-1); font: 700 32px/40px var(--font-mono); color: #FFFFFF; }
.nb-branch-form { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: var(--space-4); align-items: end; }
.nb-branch-form .nb-field, .nb-branch-form .nb-input { margin: 0; }
.nb-upper { text-transform: uppercase; }
.nb-chip { margin: 0 6px 4px 0; }
.nb-chip__x { height: 18px; padding: 0 4px; }
.nb-inline { display: inline-flex; gap: 6px; align-items: center; }
.nb-input--compact { height: 30px; width: auto; }
/* === end screens, part 8 === */
/* === Screens, part 9 (step 5): Privacy, Team & Access, Plans, Audit, Integrity, Dashboard (scripts/apply-admin2-ui.mjs) === */
.nb-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 26px; color: var(--ink-2); }
.nb-check-label--inline { display: inline-flex; padding-bottom: 0; font-size: 13px; }
.nb-msg { margin-top: var(--space-2); }
.nb-msg:empty { display: none; }
.nb-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); }
.nb-plan--current { border: 2px solid var(--teal); }
.nb-plan__head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }   /* the price always on its own line, so every card lines up */
.nb-plan__price { font: 700 20px/28px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.nb-plan__price .nb-muted { font: 400 12px/18px var(--font-sans); }
.nb-plan__text { margin: var(--space-2) 0 var(--space-4); font-size: 13px; line-height: 20px; }
.nb-chart { height: 230px; position: relative; }
/* === end screens, part 9 === */
/* === Screens, part 10: Chart of Accounts (scripts/apply-chart.mjs) === */
.nb-edit-row td { background: var(--surface-2); padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.nb-edit-row .nb-input { background: var(--surface); }
.nb-edit-row .nb-cell-sub { margin-top: var(--space-2); }
.nb-msg.nb-neg { color: var(--red); }
/* === end screens, part 10 === */

/* ===== Part 11 - business units (Phase U1b) ===== */
/* The hidden attribute must always hide: .nb-field (display: grid) and similar rules otherwise override it. */
[hidden] { display: none !important; }
/* The add-unit form gains Type and Division; the naming form has a choice and two optional fields. */
.nb-branch-form--wide { grid-template-columns: 140px minmax(0, 1fr) minmax(150px, auto) minmax(150px, auto) auto; }
.nb-branch-form--label { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(0, 1fr) auto; }
.nb-branch-form--label > .nb-btn { grid-column: -2 / -1; }   /* Save stays last, whether or not the own-name fields show */
@media (max-width: 760px) { .nb-branch-form--wide, .nb-branch-form--label { grid-template-columns: 1fr; } .nb-branch-form--label > .nb-btn { grid-column: auto; } }

/* ===== Part 12 - tab strips and payroll units (Phase U2b) ===== */
/* A tab strip scrolls sideways only. The selected tab's underline used to sit 1px below the strip (on its border), which
   counted as vertical overflow and gave every tab strip a vertical scrollbar where scrollbars are always shown (Windows).
   The line is now drawn just inside the strip (its border kept, transparent, so the layout is unchanged) and the underline
   sits on it without overflowing. */
.nb-tabs { overflow-y: hidden; border-bottom-color: transparent; box-shadow: inset 0 -1px 0 var(--line); }   /* same height as before: nothing below moves */
.nb-tab[aria-selected="true"]::after { bottom: 0; }

/* Phones (PL1): screens fit a 360-390 px screen. Long button labels wrap, a table wider than the screen scrolls inside its
   panel, the logo row stacks and a file picker stays on the screen. */
@media (max-width: 760px) {
  .nb-screen .nb-btn { white-space: normal; text-align: center; max-width: 100%; }
  .nb-panel__body { overflow-x: auto; }
  .nb-logo-row { flex-wrap: wrap; }
  .nb-logo-row > div { min-width: 0; max-width: 100%; }
  .nb-screen input[type=file] { max-width: 100%; }
}