/* Black Mountain ERP - design tokens and components (F67).
 *
 * Every colour is a named role, never a literal, and every text/background
 * pair below carries its measured contrast ratio. Text roles are at least
 * 4.5:1; control borders and the focus ring are at least 3:1. Nothing is
 * smaller than 12px except .meta, which is 11px by exception. The font stack
 * is the operating system's own, so the app needs no network. */

:root {
  /* --- Ground -------------------------------------------------------- */
  --canvas: #f6f8f5;          /* the page behind the panels */
  --surface: #ffffff;         /* panels, cards, the sidebar */
  --surface-sunken: #f2f5ee;  /* table heads, tiles, toolbars */
  --surface-forest: #183f32;  /* the brand panel and the primary button */
  --surface-forest-hover: #12352a;

  /* --- Text ---------------------------------------------------------- */
  --ink: #1b2a23;             /* 14.98:1 on --surface, 14.03:1 on --canvas */
  --ink-soft: #465446;        /*  8.02:1 on --surface */
  --muted: #5a6a5e;           /*  5.74:1 on --surface, 5.38:1 on --canvas,
                                  5.21:1 on --surface-sunken (11px .meta) */
  --on-forest: #ffffff;       /* 11.69:1 on --surface-forest */
  --on-forest-soft: #b9cfa6;  /*  6.98:1 on --surface-forest */
  --on-forest-faint: #a3bc8d; /*  5.64:1 on --surface-forest */
  --brand: #183f32;           /* 11.69:1 on --surface, 10.95:1 on --canvas */
  --link: #1f6f4a;            /*  6.12:1 on --surface */

  /* --- Lines and rings ----------------------------------------------- */
  --line: #d5ded2;            /* decorative hairline between rows and panels */
  --line-control: #7f8d7c;    /* input and button boundary: 3.50:1 on
                                 --surface, 3.28:1 on --canvas, 3.18:1 on
                                 --surface-sunken */
  --focus: #1f6f4a;           /* focus ring: 6.12:1 on --surface, 5.73:1 on
                                 --canvas - far above the 3:1 floor */
  --focus-on-dark: #d7ecc0;   /* ring used on the forest panel */

  /* --- Status -------------------------------------------------------- */
  --ok-bg: #e8f2dd;  --ok-ink: #2f6b30;   /* 5.56:1 */
  --warn-bg: #fbf1d8; --warn-ink: #7a5a12; /* 5.66:1 */
  --error-bg: #fbe9e4; --error-ink: #99321f; /* 6.32:1 */
  --off-bg: #eceee9;  --off-ink: #4d574c;  /* 6.46:1 */
  --danger: #96341f;  --on-danger: #ffffff; /* 7.48:1 */
  --lime: #dcecc0;    --lime-ink: #3f5a20;  /* 6.24:1 */
  --toast-bg: #1d3d30; --toast-ink: #ffffff; /* 11.92:1 */

  /* --- Type ---------------------------------------------------------- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --text-meta: 11px;   /* the only size below 12px, and only for .meta */
  --text-small: 12px;
  --text-body: 14px;
  --text-lead: 15px;
  --text-h2: 18px;
  --text-h1: 28px;

  /* --- Space, radius, shadow, motion --------------------------------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 6px; --radius: 9px; --radius-lg: 14px;
  --shadow-panel: 0 1px 2px rgba(22, 61, 39, 0.05);
  --shadow-pop: 0 12px 30px rgba(23, 54, 37, 0.14);
  --shadow-modal: 0 20px 60px rgba(16, 47, 40, 0.24);
  --touch: 44px;              /* minimum touch target, used by the pick screen */
  --sidebar: 240px;
  --rail: 56px;
  --motion: 0.15s;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
/* Author display rules beat the user agent's [hidden] rule, so say it here:
   anything with the hidden attribute is hidden, whatever else it is. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: var(--text-body)/1.55 var(--font);
}
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.2px; }
h1 { font-size: var(--text-h1); font-weight: 650; }
h2 { font-size: var(--text-h2); font-weight: 650; }
h3 { font-size: var(--text-lead); font-weight: 600; }
p { margin: 0; }
a { color: var(--link); }
a:hover { color: var(--brand); }
kbd {
  font: var(--text-small)/1.4 var(--font);
  background: var(--surface-sunken);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--ink-soft);
}
code { font-family: ui-monospace, Consolas, "Courier New", monospace; }
.meta { font-size: var(--text-meta); color: var(--muted); display: block; }
.eyebrow {
  font-size: var(--text-small);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
}
.subtitle { color: var(--ink-soft); margin-top: var(--space-2); }
.caption { color: var(--muted); font-size: var(--text-small); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: var(--space-2); z-index: 60;
  background: var(--surface); color: var(--brand); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-4); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.login-art :focus-visible { outline-color: var(--focus-on-dark); }

/* -------------------------------------------------------------- layout */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  color: var(--brand); text-decoration: none;
  font-size: var(--text-small); font-weight: 700; letter-spacing: 0.8px;
}
.brand small {
  display: block; font-size: var(--text-meta); letter-spacing: 0.8px;
  color: var(--muted); font-weight: 500;
}
.brand.light { color: var(--on-forest); }
.brand.light small { color: var(--on-forest-faint); }
.nav-scroll { flex: 1; overflow-y: auto; padding: 0 var(--space-3) var(--space-4); }
.nav-group { margin-bottom: var(--space-4); }
.nav-label {
  font-size: var(--text-small); text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted); padding: var(--space-2) var(--space-3); font-weight: 650;
}
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3); border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-weight: 550;
  min-height: 40px;
}
.nav-item:hover { background: var(--surface-sunken); color: var(--brand); }
.nav-item.is-active { background: var(--surface-forest); color: var(--on-forest); }
.nav-user { border-top: 1px solid var(--line); padding: var(--space-3); }
.user-menu summary {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer;
  list-style: none;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: var(--surface-sunken); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--lime); color: var(--lime-ink);
  display: grid; place-items: center; font-size: var(--text-small); font-weight: 700;
}
.user-name { font-weight: 600; font-size: var(--text-small); }
.user-menu-panel { display: grid; gap: 2px; padding-top: var(--space-2); }
.user-menu-panel a, .link-button {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-size: var(--text-small);
  background: none; border: 0; width: 100%; cursor: pointer; font-family: inherit;
}
.user-menu-panel a:hover, .link-button:hover { background: var(--surface-sunken); }

.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: var(--space-3) var(--space-6); min-height: 64px;
  position: sticky; top: 0; z-index: 20;
}
.breadcrumb { color: var(--muted); font-size: var(--text-small); }
.global-search { position: relative; margin-left: auto; display: flex; align-items: center; }
.global-search .icon { position: absolute; left: 12px; color: var(--muted); }
.global-search input {
  width: min(420px, 42vw); padding: 9px 60px 9px 36px;
  border: 1px solid var(--line-control); border-radius: var(--radius-sm);
  background: var(--surface-sunken); font: inherit; color: var(--ink);
}
.search-hint {
  position: absolute; right: 10px; font-size: var(--text-meta);
  color: var(--muted); border-color: var(--line);
}
.search-results:empty { display: none; }
.search-results {
  position: absolute; top: calc(100% + 6px); right: 0; width: min(420px, 80vw);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); z-index: 30;
}
.search-panel { padding: var(--space-4); }
.search-note { color: var(--ink-soft); font-size: var(--text-small); }
.content { padding: var(--space-6); max-width: 1500px; width: 100%; }
.content:focus { outline: none; }
.connection {
  display: flex; gap: var(--space-3); align-items: center;
  background: var(--warn-bg); color: var(--warn-ink);
  padding: var(--space-2) var(--space-6); font-size: var(--text-small);
}
.drawer-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 40;
  min-width: var(--touch); min-height: var(--touch);
  background: var(--surface); border: 1px solid var(--line-control);
  border-radius: var(--radius-sm); color: var(--ink);
}
.scrim {
  position: fixed; inset: 0; background: rgba(20, 46, 37, 0.45);
  z-index: 24;
}

/* ---------------------------------------------------------- page header */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap;
}
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* --------------------------------------------------------------- panels */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-panel); overflow: hidden;
}
.panel.pad { padding: var(--space-5); }
.panel.narrow { max-width: 620px; }
.panel-heading {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 38px; padding: 8px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-control); background: var(--surface); color: var(--ink);
  font: 600 var(--text-body)/1.2 var(--font); cursor: pointer; text-decoration: none;
  transition: background var(--motion), box-shadow var(--motion), transform var(--motion);
}
.btn:hover { background: var(--surface-sunken); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--surface-forest); border-color: var(--surface-forest);
  color: var(--on-forest);
}
.btn.primary:hover { background: var(--surface-forest-hover); color: var(--on-forest); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn.danger:hover { background: #7d2b19; color: var(--on-danger); }
.btn.danger-ghost { color: var(--danger); border-color: var(--line-control); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 32px; padding: 5px 10px; font-size: var(--text-small); }
.btn.block { width: 100%; }
.btn.is-disabled, .btn[disabled] { opacity: 0.55; pointer-events: none; }
.icon-button {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  min-width: 32px; min-height: 32px; border-radius: var(--radius-sm); font-size: 20px;
}
.actions {
  display: flex; gap: var(--space-3); align-items: center;
  margin-top: var(--space-5); flex-wrap: wrap;
}
.actions .btn.danger { margin-left: auto; }
form.inline { display: inline; }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; font-size: var(--text-small); margin-bottom: 6px; }
.field .req { color: var(--danger); text-decoration: none; }
.input, .select {
  width: 100%; padding: 9px 12px; min-height: 40px;
  border: 1px solid var(--line-control); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit;
}
.textarea { min-height: 90px; }
.select { appearance: auto; }
.field.has-error .input, .field.has-error .select { border-color: var(--danger); }
.help { color: var(--muted); font-size: var(--text-small); margin-top: 5px; }
.field-error { color: var(--error-ink); font-size: var(--text-small); margin-top: 5px; font-weight: 600; }
/* A checkbox sits before its label, with the help text on its own line under
   both, whatever order the form partial writes them in. */
.field-check {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 4px var(--space-2);
}
.field-check .checkbox { grid-column: 1; grid-row: 1; }
.field-check label { grid-column: 2; grid-row: 1; margin: 0; }
.field-check .help, .field-check .field-error { grid-column: 1 / -1; grid-row: auto; margin: 0; }
.checkbox { width: 18px; height: 18px; accent-color: var(--surface-forest); }
.field-set { border: 0; margin: 0 0 var(--space-4); padding: 0; min-width: 0; }
.field-set > legend { font-weight: 600; font-size: var(--text-small); padding: 0; margin-bottom: 6px; }
.field-set > .help { margin: 0 0 var(--space-2); }
.checkbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checkbox-list li { margin: 0; }
.checkbox-list label {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0; font-weight: 500; min-height: 26px; cursor: pointer;
}
.form-summary {
  background: var(--error-bg); color: var(--error-ink);
  border: 1px solid var(--danger); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
}
.form-summary ul { margin: var(--space-2) 0 0; padding-left: 18px; font-size: var(--text-small); }
.form-summary a { color: var(--error-ink); }
.alert {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4); font-size: var(--text-small);
}
.alert-error { background: var(--error-bg); color: var(--error-ink); }
.alert-warn { background: var(--warn-bg); color: var(--warn-ink); }
.consequence { color: var(--ink-soft); }

/* --------------------------------------------------------------- tables */
.table-panel { padding: 0; }
.table-tools {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
}
.table-tools .tool { flex: 1 1 180px; min-width: 140px; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.data-table caption {
  text-align: left; padding: var(--space-3) var(--space-4);
  color: var(--muted); font-size: var(--text-small);
}
.data-table th, .data-table td {
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.data-table thead th {
  background: var(--surface-sunken); color: var(--ink-soft);
  font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.6px;
  position: sticky; top: 0;
}
.data-table tbody tr:hover { background: var(--surface-sunken); }
.data-table .right, .data-table th.right { text-align: right; }
.nowrap { white-space: nowrap; }
.cell-link { font-weight: 600; color: var(--brand); }
.row-link { cursor: pointer; }
a.sort { color: inherit; text-decoration: none; }
a.sort:hover { color: var(--brand); text-decoration: underline; }
.pagination {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.page-count { color: var(--muted); font-size: var(--text-small); padding: var(--space-3) var(--space-4); }

/* --------------------------------------------------------------- badges */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: var(--text-small); font-weight: 650; white-space: nowrap;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge-off { background: var(--off-bg); color: var(--off-ink); }
.badge-error { background: var(--error-bg); color: var(--error-ink); }

/* ----------------------------------------------------------- empty state */
.empty { padding: var(--space-7) var(--space-5); text-align: center; }
.empty-title { font-size: var(--text-lead); font-weight: 650; }
.empty-filters, .empty-hint { color: var(--muted); font-size: var(--text-small); margin-top: var(--space-2); }
.empty-actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); }

/* -------------------------------------------------------- overview cards */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-5);
}
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between;
  gap: var(--space-3); box-shadow: var(--shadow-panel);
}
.stat-label { color: var(--ink-soft); font-size: var(--text-small); font-weight: 600; }
.stat-number { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; margin: 2px 0; }
.stat-caption { color: var(--muted); font-size: var(--text-small); }
.stat-icon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--lime);
  color: var(--lime-ink); display: grid; place-items: center; flex: none;
}
.overview-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); }
.action-panel { background: var(--surface-forest); border-color: var(--surface-forest); color: var(--on-forest); }
.action-panel .panel-heading { border-bottom-color: rgba(255, 255, 255, 0.16); }
.action-panel h2 { color: var(--on-forest); }
.queue { list-style: none; margin: 0; padding: var(--space-4); display: grid; gap: var(--space-3); }
.queue-item {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface); color: var(--ink); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); min-height: var(--touch);
}
.queue-icon { color: var(--lime-ink); display: grid; place-items: center; }
.queue-label { font-weight: 600; }
.queue-count { margin-left: auto; font-weight: 700; }
.queue-phase { color: var(--muted); font-size: var(--text-meta); }
.timeline { list-style: none; margin: 0; padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-4); }
.timeline li { display: flex; gap: var(--space-3); }
.timeline-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--lime-ink);
  margin-top: 7px; flex: none;
}
.timeline-summary { font-weight: 550; }

/* ----------------------------------------------------------------- tabs */
.tabs {
  display: flex; gap: var(--space-1); flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: var(--space-4);
}
.tab {
  padding: 10px var(--space-4); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--ink-soft); text-decoration: none; font-weight: 600;
  border-bottom: 3px solid transparent; min-height: 40px; display: inline-flex; align-items: center;
}
.tab:hover { background: var(--surface-sunken); color: var(--brand); }
.tab.is-active { color: var(--brand); border-bottom-color: var(--surface-forest); }

/* --------------------------------------------------- record detail lists */
.detail-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4); margin: var(--space-4) 0 0;
}
.detail-list > div { min-width: 0; }
.detail-list dt { color: var(--muted); font-size: var(--text-small); font-weight: 600; }
.detail-list dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.notes { margin-top: var(--space-2); color: var(--ink-soft); white-space: normal; }
.card-list { list-style: none; margin: 0; padding: var(--space-4); display: grid; gap: var(--space-3); }
.record-card {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4);
  background: var(--surface); flex-wrap: wrap;
}
.card-title { font-weight: 650; }
.card-body { color: var(--ink-soft); font-size: var(--text-small); }
.card-actions { display: flex; gap: var(--space-2); }
.stock-figure { font-size: 34px; font-weight: 700; letter-spacing: -1px; }
.stock-figure span { font-size: var(--text-body); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pad { padding: var(--space-5); }
.tool-count { color: var(--muted); font-size: var(--text-small); margin-left: auto; }
.tool-check { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.tool-check label { font-size: var(--text-small); font-weight: 600; }

/* -------------------------------------------------------- search results */
.search-group { border-bottom: 1px solid var(--line); }
.search-group:last-child { border-bottom: 0; }
.search-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); background: var(--surface-sunken);
  font-size: var(--text-small); font-weight: 650; color: var(--ink-soft);
}
.search-option {
  display: block; padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--ink);
}
.search-option:hover, .search-option.is-highlighted {
  background: var(--surface-forest); color: var(--on-forest);
}
.search-option.is-highlighted .meta, .search-option:hover .meta { color: var(--on-forest-soft); }
.search-option strong { display: block; font-weight: 600; }

/* ---------------------------------------------------------------- toasts */
.toasts {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 70;
  display: grid; gap: var(--space-2); max-width: min(420px, 90vw);
}
.toast {
  display: flex; gap: var(--space-3); align-items: center;
  background: var(--toast-bg); color: var(--toast-ink);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); font-size: var(--text-small);
}
.toast-error { background: var(--danger); }
.toast-close {
  margin-left: auto; background: none; border: 0; color: inherit;
  font-size: 18px; cursor: pointer; min-width: 24px; min-height: 24px;
}

/* --------------------------------------------------------------- dialogs */
.modal {
  border: 0; border-radius: var(--radius-lg); padding: 0;
  width: min(580px, 92vw); max-height: 92vh; box-shadow: var(--shadow-modal);
  color: var(--ink); background: var(--surface);
}
.modal::backdrop { background: rgba(20, 46, 37, 0.42); }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}
.modal-body { padding: var(--space-5); overflow-y: auto; }
.modal-foot {
  display: flex; gap: var(--space-3); justify-content: flex-end;
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line);
  background: var(--surface-sunken);
}

/* ----------------------------------------------------------------- login */
body.auth { background: var(--canvas); }
.login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.login-art {
  background: var(--surface-forest); color: var(--on-forest);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-7) var(--space-7); position: relative; overflow: hidden;
}
.login-pitch { position: relative; z-index: 1; padding: var(--space-7) 0; }
.login-art .eyebrow { color: var(--on-forest-soft); margin-bottom: var(--space-4); }
.login-art h1 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.15; letter-spacing: -1.5px; }
.login-sub { color: var(--on-forest-soft); margin-top: var(--space-5); font-size: var(--text-lead); }
.login-logos {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-4);
  align-items: flex-start; padding: var(--space-7) 0;
}
.login-logo {
  display: flex; align-items: center; justify-content: center;
  width: min(300px, 100%); padding: var(--space-4) var(--space-5);
  background: #ffffff; border-radius: var(--radius);
}
.login-logo img { display: block; width: 100%; height: auto; max-height: 120px; object-fit: contain; }
.login-foot {
  color: var(--on-forest-faint); letter-spacing: 1.4px; font-size: var(--text-small);
  position: relative; z-index: 1;
}
.mountain-scene {
  position: absolute; right: -160px; bottom: -40px; opacity: 0.07; color: var(--on-forest);
  line-height: 0;
}
.login-form { align-self: center; justify-self: center; width: min(380px, calc(100% - 48px)); padding: var(--space-7) 0; }
.login-form.wide { width: min(460px, calc(100% - 48px)); }
.login-form h2 { font-size: var(--text-h1); margin-top: var(--space-2); }
.login-lead { color: var(--ink-soft); margin: var(--space-2) 0 var(--space-5); }
.login-note { color: var(--muted); font-size: var(--text-small); margin-top: var(--space-4); text-align: center; }
/* The "or" rule between claiming the old account and creating a new one. */
.login-divider {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: var(--text-small);
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-5);
}
.login-divider::before, .login-divider::after {
  background: var(--line);
  content: "";
  flex: 1;
  height: 1px;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .overview-grid { grid-template-columns: 1fr; }
  .content { padding: var(--space-5); }
}

/* iPad portrait and phones: a full labelled drawer, not an icon rail. */
@media (max-width: 900px) {
  :root { --sidebar: 240px; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 25;
    transform: translateX(-100%); transition: transform var(--motion);
    align-items: stretch;
  }
  .sidebar.is-open { transform: none; }
  .nav-text, .nav-label, .brand-text, .user-name { display: revert; }
  .brand { justify-content: flex-start; padding: var(--space-5) var(--space-4); }
  .nav-item { justify-content: flex-start; padding: 10px var(--space-3); min-height: var(--touch); }
  .drawer-toggle { display: grid; place-items: center; }
  .topbar { padding: var(--space-3) var(--space-4) var(--space-3) 68px; flex-wrap: wrap; min-height: 56px; }
  .breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .global-search { width: 100%; margin-left: 0; min-width: 0; }
  .global-search input { width: 100%; }
  .content { padding: var(--space-4); }
  .page-head > * { min-width: 0; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 160px; }
}

/* Below 640px the tables stack and the login screen goes single column. */
@media (max-width: 640px) {
  .login { grid-template-columns: 1fr; }
  .login-art { padding: var(--space-5); }
  .login-pitch { padding: var(--space-5) 0; }
  .login-logos { flex-direction: row; flex-wrap: wrap; padding: var(--space-4) 0; }
  .login-logo { width: calc(50% - var(--space-2)); padding: var(--space-3); }
  .mountain-scene { display: none; }
  .actions .btn { flex: 1 1 auto; }
  .table-tools { align-items: stretch; }
  .table-tools .tool { flex: 1 1 100%; min-width: 0; }
  .table-tools .btn { width: 100%; }

  /* F69: a table becomes a stack of cards rather than a 650px scroller. */
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; }
  .data-table thead { display: none; }
  .data-table caption { display: block; width: 100%; padding-bottom: 0; }
  .data-table tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    margin: var(--space-3) var(--space-4); padding: var(--space-2) 0;
  }
  .data-table th, .data-table td {
    border-bottom: 0; padding: 3px var(--space-4); text-align: left;
  }
  .data-table .right, .data-table th.right { text-align: left; }
  .table-scroll { overflow-x: visible; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .detail-list { grid-template-columns: 1fr; gap: var(--space-3); }
  .record-card { flex-direction: column; }
}

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

@media print {
  .sidebar, .topbar, .toasts, .drawer-toggle, .page-actions, .table-tools,
  .pagination, .connection, .skip-link { display: none !important; }
  body { background: #fff; }
  .panel { border-color: #999; box-shadow: none; }
  .content { padding: 0; max-width: none; }
}

.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---------------------------------------------------- documents (Phase 2) */
/* Reviewer note after Phase 2: the builder used to be a 340px column of three
 * stacked panels beside the working column. The left column ran 1188px while
 * the working column ran 729px, so below the Place order footer there was half
 * a screen of nothing. The three panels now sit in a row across the top and
 * the working column has the full width under them, which is both shorter and
 * the order somebody fills them in: brand, customer, details, then lines. */
.builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.builder-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.builder-main { display: grid; gap: var(--space-4); min-width: 0; }
.brand-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.brand-option {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--line-control); border-radius: var(--radius); cursor: pointer;
  min-height: var(--touch); background: var(--surface);
}
.brand-option:hover { background: var(--surface-sunken); }
.brand-option.is-chosen { border-color: var(--surface-forest); box-shadow: inset 0 0 0 1px var(--surface-forest); }
.brand-logo { height: 26px; width: auto; }
.brand-logo.small { height: 18px; vertical-align: middle; }
.pick-results:empty { display: none; }
/* The customer a form has settled on, said in words above the rows that
   belong to them. */
.chosen-line {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.chosen-line .meta { display: block; }
.pick-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 2px;
  max-height: 260px; overflow-y: auto; }
.pick-option {
  display: block; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--ink); cursor: pointer; min-height: var(--touch);
}
.pick-option:hover { background: var(--surface-forest); color: var(--on-forest); }
.pick-option:hover .meta { color: var(--on-forest-soft); }
.detail-value { font-weight: 600; margin-bottom: var(--space-3); }
.cell-input { width: 88px; text-align: right; display: inline-block; }
.totals { margin: 0; padding: var(--space-4) var(--space-5); display: grid; gap: 4px;
  border-top: 1px solid var(--line); }
.totals > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.totals dt { color: var(--ink-soft); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.totals .grand dt, .totals .grand dd { font-size: var(--text-h2); font-weight: 700; }
.builder-foot {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  padding: var(--space-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-panel);
}
.builder-foot .btn.danger { margin-left: auto; }
/* F87: the brand is a notice above the lines, not a step at the top of the
   page, and everything that is nearly always left alone is behind a
   disclosure that starts closed. */
.brand-notice { display: grid; gap: var(--space-2); }
.brand-line { margin: 0; color: var(--ink-soft); }
.brand-line strong { color: var(--ink); }
.brand-change > summary,
.builder-options > summary {
  cursor: pointer; font-weight: 650; min-height: var(--touch);
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.builder-options > summary { padding: var(--space-3) var(--space-4); }
.brand-change[open] > summary { margin-bottom: var(--space-3); }
.brand-change .brand-list { max-width: 26rem; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-4); align-items: start; }
.related-strip { margin-bottom: var(--space-4); }
.inline { display: inline; }

@media (max-width: 1100px) {
  .builder, .detail-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ fulfillment (Phase 3) */

/* The board (F45): one column per stage, the action on every card. */
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.board-column {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  min-width: 0;
}
.board-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4); border-bottom: 1px solid var(--line);
}
.board-head h2 { font-size: var(--text-lead); }
.board-count {
  margin-left: auto; font-weight: 700; background: var(--surface-sunken);
  border-radius: 999px; padding: 1px 10px; font-size: var(--text-small);
}
.board-cards { list-style: none; margin: 0; padding: var(--space-3); display: grid; gap: var(--space-3); }
.board-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3); display: grid; gap: 4px;
}
.board-number { font-weight: 700; font-size: var(--text-lead); }
.board-customer { font-weight: 550; }
.board-total { font-variant-numeric: tabular-nums; font-weight: 650; }
.board-empty { color: var(--muted); font-size: var(--text-small); padding: var(--space-4); }

/* The pick page (F33, F67, F86): its own document, 44px targets, no sidebar.
   Since the owner's instruction of 2026-09-08 it is a stack of item cards, each
   with its own scan box, so the sticky bar at the top has gone and the "Scanner
   here" mark lives on the card the scanner is aimed at. */
body.pick-page {
  background: var(--canvas);
  min-height: 100dvh;
  touch-action: manipulation;
}
body.pick-page.is-complete,
body.pick-page.is-complete .pick-body { background: #edf8ed; }
.pick-top {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--surface-forest); color: var(--on-forest);
  padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-3);
  flex-wrap: wrap;
  position: sticky; top: 0; z-index: 8;
}
.pick-back {
  display: inline-flex; align-items: center; gap: 6px; color: var(--on-forest);
  min-height: var(--touch); text-decoration: none; font-weight: 600;
}
.pick-back:hover { color: var(--on-forest-soft); }
.pick-top :focus-visible { outline-color: var(--focus-on-dark); }
.pick-identity { min-width: 0; }
.pick-number { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.3px; }
.pick-customer { color: var(--on-forest-soft); font-size: var(--text-small); }
.pick-remaining { margin-left: auto; text-align: right; }
.pick-remaining-number { font-size: 30px; font-weight: 700; line-height: 1; display: block; }
.pick-remaining-label { color: var(--on-forest-soft); font-size: var(--text-small); }
.pick-user { color: var(--on-forest-soft); font-size: var(--text-small); }

.pick-body { padding: var(--space-4); display: grid; gap: var(--space-4); }
.scan-banner {
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  font-size: 17px; font-weight: 650; line-height: 1.4;
}
.scan-banner-error { background: var(--error-bg); color: var(--error-ink); }
.scan-banner-ok { background: var(--ok-bg); color: var(--ok-ink); }
.btn.big { min-height: var(--touch); font-size: var(--text-lead); padding: 0 var(--space-4); }

.pick-section-head { font-size: var(--text-h2); }
.pick-section-note { margin-bottom: var(--space-2); }

/* F86: one card per item, and everything that item needs inside it. */
.item-cards { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.item-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-3);
}
.app-brand-logo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; }
body.pick-page.is-complete .item-card,
body.pick-page.is-complete .pick-foot { background: #edf8ed; }
/* The item the scanner is aimed at: the box that was last focused, or the card
   that was last tapped. picking.js owns the class. */
.item-card.is-active { border-color: var(--surface-forest); box-shadow: inset 4px 0 0 var(--surface-forest); }
.item-card.is-done { border-color: var(--ok-ink); }
.item-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.item-name { font-size: var(--text-h2); font-weight: 650; }
.item-figures { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.item-note { color: var(--ink-soft); }
.item-controls {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) minmax(12rem, auto);
  align-items: end;
}
.item-scan { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin: 0; }
.scan-input {
  flex: 1 1 240px; min-height: 56px; font-size: 18px;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
}
.scan-submit { min-height: 56px; padding: 0 var(--space-4); font-size: var(--text-lead); }
/* The width is fixed and the mark is always in the layout: only its visibility
 * changes. While a pill of this kind was allowed to appear and disappear it
 * resized the box beside it, Record case slid out from under the pointer
 * between mousedown and mouseup, and the browser fired the click on the shared
 * parent instead of on the button, so the press did nothing at all. Found by
 * the Phase 6 pick journey; pinned by test_the_scanner_here_mark_has_a_fixed_width. */
.scan-here {
  flex: 0 0 auto; min-width: 8rem; text-align: center; white-space: nowrap;
  visibility: hidden; min-height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ok-ink); border-radius: 999px;
  background: var(--ok-bg); color: var(--ok-ink);
  font-size: var(--text-small); font-weight: 650;
}
.item-card.is-active .scan-here { visibility: visible; }
.item-quantity { display: flex; gap: var(--space-2); align-items: end; margin: 0; }
.item-quantity .field { margin-bottom: 0; }
.item-quantity .input { min-height: var(--touch); width: 7rem; }
.item-quantity .btn { min-height: var(--touch); }
.item-hand { margin: 0; display: grid; gap: var(--space-2); }
.item-hand-fields {
  display: grid; gap: var(--space-3); align-items: end;
  grid-template-columns: minmax(6rem, 1fr) minmax(8rem, 1fr) auto;
}
.item-hand-fields .field { margin-bottom: 0; }
.item-hand-fields .input { min-height: var(--touch); }
.item-secondary { margin: 0; }
.pick-figure { font-size: var(--text-small); color: var(--ink-soft); }
.pick-figure span { display: block; font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.pick-figure.muted-figure span { color: var(--muted); font-size: 20px; }
.scan-log { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.scan-log caption { text-align: left; color: var(--muted); font-size: var(--text-small); padding-bottom: 4px; }
.scan-log th, .scan-log td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.scan-log .right { text-align: right; }
.scan-log tr.is-removed { color: var(--muted); text-decoration: line-through; }
.scan-log tr.is-removed .meta { text-decoration: none; }
.pick-foot {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-4); display: grid; gap: var(--space-3);
}
.pick-totals { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; }
.pick-totals dt { font-size: var(--text-small); color: var(--ink-soft); }
.pick-total-now { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pick-total-estimate { font-size: 20px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.pack-gate { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.pack-gate-title { font-weight: 650; }
.pack-gate ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.scan-bytes { background: var(--surface-sunken); border-radius: var(--radius); padding: var(--space-3); overflow-wrap: anywhere; }
.plain-list { margin: var(--space-2) 0 0; padding-left: 18px; display: grid; gap: 4px; }
@media (max-width: 1100px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .item-controls { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; }
  .pick-user { display: none; }
  .pick-remaining-number { font-size: 24px; }
  .item-card { padding: var(--space-3); }
  .item-figures { gap: var(--space-3); }
  .pick-figure span { font-size: 22px; }
  .item-hand-fields { grid-template-columns: 1fr 1fr; }
  .item-hand-do { grid-column: 1 / -1; }
  .item-hand-do .btn { width: 100%; }
  .scan-submit { flex: 1 1 auto; }
  .pick-page .input { font-size: 16px; min-height: 48px; }
  .pick-foot { padding: var(--space-3); }
  .pick-total-now { font-size: 24px; }
  .pick-section-note { max-width: none; }
}
@media (max-width: 640px) {
  .pick-remaining { margin-left: 0; text-align: left; width: 100%; }
  .scan-submit { flex: 1 1 100%; }
  .scan-here { flex: 1 1 100%; }
  .item-hand-fields { grid-template-columns: 1fr; }
  .item-hand-do .btn { width: 100%; }
  .pick-number { font-size: 16px; }
  .item-name { font-size: 16px; }
  .pick-section-note { display: none; }
  .pick-body { padding: var(--space-3); }
}

/* Replaces the iPad/iPhone system keyboard: light keys, docked to the bottom. */
.num-pad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #d6dcd2;
  color: var(--ink);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(22, 61, 39, 0.12);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.num-pad-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); margin-bottom: 10px;
  max-width: 26rem; margin-left: auto; margin-right: auto;
}
.num-pad-label { font-size: var(--text-small); color: var(--ink-soft); font-weight: 650; }
.num-pad-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }
.num-pad-keys {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  max-width: 26rem; margin: 0 auto;
}
.num-pad-key {
  min-height: 52px; border: 0; border-radius: 8px;
  background: #ffffff; color: var(--ink);
  font-size: 22px; font-weight: 650; cursor: pointer;
  box-shadow: 0 1px 0 rgba(27, 42, 35, 0.18);
}
.num-pad-key:active { background: #c5cec0; }
.num-pad-back { font-size: 18px; background: #eef2ea; }
.num-pad-done {
  grid-column: 1 / -1; background: var(--surface-forest); color: var(--on-forest);
  box-shadow: none;
}
.num-pad[data-mode="int"] .num-pad-dot { visibility: hidden; }
body.num-pad-open .pick-body {
  padding-bottom: calc(var(--num-pad-height, 22rem) + var(--space-4));
}
body.num-pad-open .pick-foot {
  bottom: var(--num-pad-height, 22rem);
}

@media (min-width: 641px) and (max-width: 1024px) {
  .num-pad-key { min-height: 58px; font-size: 24px; }
}

/* ------------------------------------------------------- receivables (Phase 4)
 * The urgency pill, the aging strip, the filter chips, the balance blocks and
 * the payment allocation grid. Every colour is a role from the tokens above and
 * every pair carries the contrast the token comment records. */

.page-purpose {
  color: var(--ink-soft);
  margin-top: var(--space-2);
  max-width: 62ch;
}

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: var(--text-small);
  font-weight: 650;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-overdue { background: var(--error-bg); color: var(--error-ink); border-color: var(--error-ink); }
.pill-due_soon { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-ink); }
.pill-disputed {
  background: var(--surface-sunken); color: var(--brand);
  border-color: var(--brand); border-style: dashed;
}
.pill-open { background: var(--lime); color: var(--lime-ink); }
.pill-paid { background: var(--off-bg); color: var(--off-ink); }
.pill-off { background: var(--off-bg); color: var(--off-ink); }

.aging-strip {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) 0;
}
.aging-chip, .aging-total {
  display: grid; gap: 1px; min-width: 120px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken); color: var(--ink); text-decoration: none;
}
.aging-chip:hover { border-color: var(--line-control); color: var(--ink); }
.aging-chip.is-active { border-color: var(--brand); border-width: 2px; }
.aging-total { background: var(--surface); border-style: dashed; }
.aging-label { font-size: var(--text-small); color: var(--muted); }
.aging-money { font-size: var(--text-h2); font-weight: 700; }
.aging-count { font-size: var(--text-small); color: var(--ink-soft); }

.filter-chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; margin: var(--space-3) 0 0; padding: 0 var(--space-4);
}
.filter-chip {
  display: inline-flex; gap: 6px; align-items: center;
  border: 1px solid var(--line-control); border-radius: 999px;
  padding: 2px 10px; font-size: var(--text-small);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.filter-chip:hover { background: var(--surface-sunken); color: var(--brand); }

.note-cell { max-width: 26ch; color: var(--ink-soft); font-size: var(--text-small); }

.next-step {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  background: var(--lime); color: var(--lime-ink);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.figure-row { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-3) 0 0; }
.figure-row > div { display: grid; gap: 2px; }
.figure-row dt { font-size: var(--text-small); color: var(--muted); }
.figure-row dd { margin: 0; font-size: var(--text-h2); font-weight: 650; }
.figure-row .figure-lead dd { font-size: 26px; font-weight: 700; }
.figure-row .figure-bad dd { color: var(--error-ink); }

.small-table { font-size: var(--text-small); }
.detail-list.tight { margin-bottom: var(--space-3); }

.alloc-rows { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.alloc-row {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); background: var(--surface);
}
.alloc-row.has-error { border-color: var(--error-ink); background: var(--error-bg); }
.alloc-invoice { flex: 1 1 240px; display: grid; gap: 2px; }
.alloc-balance { display: grid; gap: 2px; min-width: 110px; }
.alloc-label { font-size: var(--text-small); color: var(--muted); }
.alloc-figure { font-size: var(--text-h2); font-weight: 650; }
.alloc-input { min-width: 200px; display: grid; gap: 2px; }
.alloc-input label { font-size: var(--text-small); font-weight: 600; }
.alloc-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }
.alloc-totals {
  margin-top: var(--space-4); border-top: 2px solid var(--line);
  padding-top: var(--space-3);
}
.alloc-totals.is-over { border-top-color: var(--error-ink); }
.alloc-submit { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

.payment-form .form-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.modal.wide { max-width: 760px; }
.tab-count {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; background: var(--surface-sunken);
  font-size: var(--text-small); color: var(--ink-soft);
}
.data-table tr.is-removed { color: var(--muted); text-decoration: line-through; }
.data-table tr.is-removed .meta, .data-table tr.is-removed a { text-decoration: none; }

@media (max-width: 640px) {
  .aging-strip { flex-direction: column; }
  .alloc-row { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------ purchasing, tasks, reports,
 * settings, help and first-time use (Phase 5).
 * Every colour is a role from the tokens at the top of this file; nothing here
 * introduces a new one. */

/* The contextual link from a screen to its Help section (F78). */
.help-link {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--link);
  white-space: nowrap;
  margin-left: var(--space-2);
}
.topbar-help {
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-4);
}
.topbar-help:hover { color: var(--brand); }

.alert-ok { background: var(--ok-bg); color: var(--ok-ink); }

/* Getting started (F76). */
.getting-started { margin-bottom: var(--space-4); }
/* The finished list stays until somebody puts it away, and says it is finished. */
.getting-started.is-complete { border-color: var(--ok-ink); }
.getting-started.is-complete .panel-heading { background: var(--ok-bg); }
.checklist { list-style: none; margin: 0; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.checklist-item {
  display: flex; gap: var(--space-3); align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); background: var(--surface);
}
.checklist-item.is-done { background: var(--surface-sunken); }
.checklist-mark {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700;
  background: var(--surface-sunken); color: var(--ink-soft);
}
.checklist-item.is-done .checklist-mark { background: var(--ok-bg); color: var(--ok-ink); }
.checklist-body { flex: 1 1 auto; min-width: 0; }
.checklist-label { font-weight: 650; }
.checklist-item.is-done .checklist-label { color: var(--muted); }
.checklist-why { color: var(--muted); font-size: var(--text-small); }

/* The Overview chart (F61): twelve rectangles, no chart library. */
.chart-scroll { overflow-x: auto; }
.bar-chart { width: 100%; min-width: 560px; height: 200px; }
.chart-base { stroke: var(--line); stroke-width: 1; }
.chart-bar { fill: var(--surface-forest); }
.chart-bar:hover { fill: var(--lime-ink); }
.chart-label { font-size: 11px; fill: var(--muted); }

/* Tasks (F59). */
.task-groups { display: grid; }
.task-group { border-bottom: 1px solid var(--line); }
.task-group:last-child { border-bottom: 0; }
.task-group > summary {
  display: flex; gap: var(--space-3); align-items: baseline; cursor: pointer;
  padding: var(--space-3) var(--space-4); background: var(--surface-sunken);
}
.task-group-name { font-weight: 700; }
.task-group-name.is-overdue { color: var(--error-ink); }
.task-group-count {
  background: var(--surface); border-radius: 999px; padding: 0 8px;
  font-size: var(--text-small); font-weight: 700;
}
.task-group-hint { color: var(--muted); font-size: var(--text-small); }
.task-list { list-style: none; margin: 0; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.task {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3); background: var(--surface);
}
.task.is-overdue { border-left: 4px solid var(--error-ink); }
.task.is-done .task-title { color: var(--muted); text-decoration: line-through; }
.task-tick { margin: 0; }
.task-check {
  min-width: var(--touch); min-height: var(--touch);
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 0; color: var(--ok-ink);
}
.task-box {
  width: 20px; height: 20px; border: 2px solid var(--line-control);
  border-radius: var(--radius-sm); display: block;
}
.task-check:hover .task-box { border-color: var(--surface-forest); }
.task-body { flex: 1 1 auto; min-width: 0; }
.task-title { font-weight: 650; }
.task-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: 4px; }
.task-who, .task-due, .task-done-by { color: var(--muted); font-size: var(--text-small); }
.task-due.is-overdue { color: var(--error-ink); font-weight: 700; }
.task-detail { color: var(--ink-soft); font-size: var(--text-small); margin-top: 4px; }
.task-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Settings (F62). */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); align-items: start; }
.settings-section { min-width: 0; }
.wide-section { grid-column: 1 / -1; padding: 0; }
.settings-danger { grid-column: 1 / -1; border-color: var(--danger); }
.settings-danger .caption { max-width: 72rem; }
.data-reset-form { max-width: 28rem; margin-top: var(--space-4); }
.due-preview {
  background: var(--lime); color: var(--lime-ink); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
}
.data-table tr.has-error { background: var(--error-bg); }

/* Reports. */
.range-form { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin-bottom: var(--space-4); }
.range-form .field { margin-bottom: 0; }
.range-form .actions { margin: 0; }
.range-form .caption { flex-basis: 100%; }

/* Purchasing. */
.picker-add { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; }

/* Help (F78). */
.help-contents {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4);
}
.help-contents ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.help-heading { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-h2); }
.help-section { margin-bottom: var(--space-4); scroll-margin-top: var(--space-5); }
.help-steps { margin: var(--space-3) 0 0; padding-left: 20px; display: grid; gap: var(--space-2); }
.glossary { display: grid; gap: var(--space-3); margin: 0; }
.glossary dt { font-weight: 700; }
.glossary dd { margin: 2px 0 0; color: var(--ink-soft); }
.role-block { margin-bottom: var(--space-5); }
.role-label { font-size: var(--text-small); font-weight: 700; color: var(--muted); margin-top: var(--space-2); }

/* The first-sign-in tour (F81). */
.tour-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 46, 37, 0.45);
  display: grid; place-items: center; padding: var(--space-4);
}
.tour-card {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal); padding: var(--space-5);
  max-width: 420px; width: 100%;
}
.tour-step { color: var(--muted); font-size: var(--text-small); font-weight: 700; }
.tour-title { font-size: var(--text-h2); margin: var(--space-2) 0; }
.tour-title:focus { outline: none; }
.tour-body { color: var(--ink-soft); }
.tour-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-5); }
.tour-highlight {
  position: relative; z-index: 61;
  outline: 3px solid var(--focus-on-dark); outline-offset: 3px;
  border-radius: var(--radius);
}

@media (max-width: 640px) {
  .settings-grid { grid-template-columns: 1fr; }
  .task { flex-wrap: wrap; }
  .task-actions { width: 100%; }
  .topbar-help { display: none; }
}

.help-line { margin-top: 2px; }
.help-line .help-link { margin-left: 0; }

/* --------------------------------------------- invoice prices (F84)
 * The Edit prices grid: one money input per billing line, the flat amount
 * above it, and the totals the server redoes on every change. */
.flat-amount { border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.flat-amount > legend { padding: 0 var(--space-2); margin-bottom: 0; }
.flat-amount-row { display: flex; gap: var(--space-3); align-items: flex-start;
  flex-wrap: wrap; }
.flat-amount-row .field { flex: 1 1 220px; margin-bottom: 0; }
.flat-amount-row .btn { flex: 0 0 auto; margin-top: 26px; }
.price-table .price-input { max-width: 9rem; }
.price-table tfoot tr.grand td { font-weight: 700; }
.prices-actions { display: flex; gap: var(--space-3); justify-content: flex-end;
  margin-top: var(--space-4); }
.caption.stamp { font-style: italic; }