/* CCPM Fintex — self-contained styles (no CDN, works offline). */

/* Brand typefaces, self-hosted so the app keeps working offline. Latin subset
   only; see app/static/fonts/README.md for provenance and licence. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/archivo-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/archivo-black-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
}

:root {
  /* Core palette — mirrored in brand/colors.toml. */
  --ccpm-orange: #E5651F;
  --ccpm-powder: #A8D5E5;
  --ccpm-graphite: #2C3238;
  --ccpm-deepwater: #4E6C7A;
  --ccpm-deck: #E7ECEF;
  --ccpm-chalk: #FFFFFF;

  --bg: var(--ccpm-chalk);
  --surface: var(--ccpm-chalk);
  --surface-2: var(--ccpm-deck);
  --border: #DFE4E7;
  --border-strong: #BFC8CC;
  --text: var(--ccpm-graphite);
  --text-dim: var(--ccpm-deepwater);
  --text-faint: #6C757C;
  --accent: var(--ccpm-orange);
  --accent-soft: rgba(229, 101, 31, 0.12);
  --accent-hover: #C9551A;
  --accent-line: rgba(229, 101, 31, 0.4);
  --powder-line: rgba(168, 213, 229, 0.4);
  --accent-text: var(--ccpm-chalk);
  --good: var(--ccpm-orange);
  --good-soft: rgba(229, 101, 31, 0.12);
  --warn: #E8C547;
  --warn-soft: rgba(232, 197, 71, 0.23);
  --bad: #B3341B;
  --bad-soft: rgba(179, 52, 27, 0.11);
  /* Chrome (sidebar / legal header). Separate from --text so a dark page
     can keep a dark menu; #27 overrides these from Settings. */
  --chrome: var(--ccpm-graphite);
  --chrome-text: var(--ccpm-chalk);
  --chrome-muted: var(--ccpm-powder);
  --chrome-hover: #23282d;
  --err-ink: #7D2413;
  --radius: 3px;
  --shadow: none;
  --body: Archivo, Arial, Helvetica, sans-serif;
  --display: "Archivo Black", Archivo, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--body);
}

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--chrome);
  color: var(--chrome-text);
  border-bottom: 0;
  transform: translateY(-200%);
}
.skip-link:focus, .skip-link:focus-visible {
  transform: none;
  color: var(--chrome-text);
}

/* Content links carry a standing underline per BRAND.md §7, so they are not
   distinguished from body copy by colour alone. Chrome that is already an
   obvious control — nav, tabs, buttons — opts out below. */
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }

/* ---------------------------------------------------------------- layout */
.shell { display: flex; min-height: 100dvh; }

.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: var(--chrome);
  color: var(--chrome-muted);
  padding: 16px 0 32px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100dvh;
  overflow-y: auto;
}

.brand { padding: 4px 18px 22px; display: flex; align-items: center; gap: 12px; }
.brand-mark { display: block; flex: 0 0 auto; width: 36px; height: 36px; overflow: hidden; border-radius: 3px; background: var(--chrome); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-name { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 700; color: var(--chrome-text); letter-spacing: -0.01em; line-height: 1.2; }
.brand small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 8px; font-weight: 600; color: var(--chrome-muted); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

.nav-group { padding: 10px 18px 4px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--chrome-muted); }

/* Signed-in identity + sign out, oidc mode only (backlog #26 Phase 3). Sits
   with the nav links, not the build stamp, since it is about who is looking
   at this copy rather than which copy it is. */
.signed-in-as { margin-top: 8px; padding: 10px 18px; border-top: 1px solid var(--chrome-hover); }
.signed-in-email { display: block; overflow-wrap: anywhere; font-size: 12px; color: var(--chrome-text); }
.signed-in-role { display: block; margin-top: 1px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--chrome-muted); }
.signed-in-as form { margin-top: 8px; }

.sidebar a {
  display: block;
  padding: 7px 18px;
  color: var(--chrome-text);
  font-size: 13.5px;
  border-left: 3px solid transparent;
  border-bottom: 0;
}
.sidebar a:hover { background: var(--chrome-hover); color: var(--chrome-text); text-decoration: none; }
.sidebar a.active { background: var(--chrome-hover); color: var(--chrome-text); border-left-color: var(--accent); font-weight: 700; }

/* Build stamp, pinned to the bottom of the nav. Mono because a version is a
   measurable thing; orange only when this is not production. */
.build-stamp { margin-top: auto; padding: 24px 18px 0; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.6; color: var(--chrome-muted); }
.build-stamp span { display: block; overflow-wrap: anywhere; }
.build-stamp .build-env { color: var(--accent); }
.build-stamp .build-commit { letter-spacing: 0.06em; text-transform: none; }
.legal-links { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 18px 16px; }
.legal-links a {
  display: inline;
  padding: 0;
  border-left: 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--chrome-muted); border-bottom: 0;
}
.legal-links a:hover { color: var(--chrome-text); background: transparent; }

.sidebar-livery { display: flex; flex-direction: column; gap: 5px; margin: 18px 18px 0; }
.sidebar-livery-thick { display: block; height: 11px; background: var(--accent); }
.sidebar-livery-thin { display: block; height: 5px; background: var(--accent); }

.nav-toggle { display: none; }
.nav-scrim { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--surface);
  border-bottom: 5px solid var(--accent);
  min-height: 48px;
  padding: 10px 26px;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(26px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crumbs {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
}
.crumbs a {
  color: var(--text);
  border-bottom: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
.crumbs a:hover { color: var(--text); border-bottom: 0; }
.crumb-sep { color: var(--text-dim); font-size: 13px; }
.topbar .spacer { flex: 1; }
.topbar-company {
  display: none;
  min-width: 0;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.content {
  padding: 22px 26px 60px;
  padding-left: max(26px, env(safe-area-inset-left));
  padding-right: max(26px, env(safe-area-inset-right));
  padding-bottom: max(60px, env(safe-area-inset-bottom));
  max-width: 1400px;
  width: 100%;
}

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.card-head h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.card-head .spacer { flex: 1; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }

/* ---------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.stat .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.stat .value { font-size: 24px; font-weight: 620; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat .sub { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.stat.good .value { color: var(--good); }
.stat.bad .value { color: var(--bad); }

/* ---------------------------------------------------------------- tables */
table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
  text-align: left;
  padding: 9px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 600;
}
table.grid td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid tfoot td {
  padding: 10px 14px;
  border-top: 2px solid var(--border-strong);
  font-weight: 620;
  background: var(--surface-2);
}
@media (min-width: 1024px) {
  table.grid thead th {
    position: sticky;
    top: 48px;
    z-index: 1;
  }
}
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: 12.5px; }
.strong { font-weight: 620; }
.neg { color: var(--bad); }

.empty { padding: 34px 16px; text-align: center; color: var(--text-faint); }
.empty p { margin: 0 0 12px; }

/* ---------------------------------------------------------------- pager */
/* Only the audit log paginates (#28) — every other list in this app is bounded
   by how much work a small business does, while the log grows for as long as
   the app is used. Sits in a .card-head so it reads as part of the table's
   frame rather than as loose controls under it. */
.pager { border-top: 1px solid var(--border); border-bottom: 0; }
.pager .faint { white-space: nowrap; }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge.draft { background: #eef0f3; color: #5c6779; }
.badge.open { background: var(--accent-soft); color: var(--accent); }
.badge.partial { background: var(--warn-soft); color: var(--ccpm-graphite); }
.badge.paid { background: var(--good-soft); color: var(--good); }
.badge.accepted { background: var(--good-soft); color: var(--good); }
.badge.declined { background: #eef0f3; color: var(--text-faint); }
.badge.void { background: #eef0f3; color: var(--text-faint); text-decoration: line-through; }
/* #143: budget status -- always with its text label, never colour alone. */
.badge.budget-on-budget { background: var(--good-soft); color: var(--good); }
.badge.budget-watch { background: var(--warn-soft); color: var(--ccpm-graphite); }
.badge.budget-over { background: var(--bad-soft); color: var(--bad); font-weight: 650; }
.budget-sheet .budget-detail > td { padding-top: 0; }
.budget-sheet details > summary { cursor: pointer; color: var(--text-dim); font-size: 12.5px; }
.budget-docs { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; }
.badge.overdue { background: var(--bad-soft); color: var(--bad); }
.badge.ready { background: var(--accent-soft); color: var(--accent); }
.close-packet .report-block { page-break-after: always; break-after: page; }
.close-packet .report-block:last-child { page-break-after: auto; break-after: auto; }
.badge.receipt { background: var(--good-soft); color: var(--good); }
.badge.disbursement { background: var(--bad-soft); color: var(--bad); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
}
a.btn { border-bottom: 1px solid var(--border-strong); text-decoration: none; }
.btn:hover { background: var(--surface-2); text-decoration: none; border-color: var(--text-faint); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
a.btn.primary { border-bottom-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--bad); border-color: #e6c9c9; }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }

/* In-page confirm. Same scrim as the phone drawer. No shadow, no pill. */
.confirm-dialog {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
  max-width: calc(100vw - 32px);
}
.confirm-dialog::backdrop {
  background: rgba(44, 50, 56, 0.45);
}
.confirm-dialog-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
.confirm-dialog p {
  margin: 0;
  overflow-wrap: anywhere;
}
.confirm-dialog-reason {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.confirm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.confirm-dialog .btn {
  min-height: 44px;
}
.btn.sm { padding: 8px 14px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom: 14px; }
.field label, .field .label { display: block; font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; letter-spacing: 0.01em; }
.field .hint { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }

input[type=text], input[type=number], input[type=date], input[type=email],
input[type=search], input[type=url], input[type=color], select, textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 0;
  border-radius: var(--radius);
}
textarea { resize: vertical; min-height: 66px; }
/* A value company.toml fixes: plain text lined up with the inputs beside it (#218). */
.static-value { padding: 8px 0; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.static-value.pre-wrap { white-space: pre-wrap; }
input.num-input { text-align: right; font-variant-numeric: tabular-nums; }
input[type=color] {
  width: 48px;
  height: 44px;
  padding: 3px;
  cursor: pointer;
}
.theme-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.theme-color-row { display: flex; align-items: center; gap: 10px; }
.theme-color-row input[type=text] { font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.theme-appearances { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.theme-appearances label.checkline { margin: 0; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); min-height: 44px; }
.theme-appearances label.checkline:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.theme-preview {
  display: grid;
  grid-template-columns: 92px 1fr;
  min-height: 140px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 8px;
}
.theme-preview-nav {
  background: var(--chrome);
  color: var(--chrome-text);
  padding: 12px 10px;
  font-size: 11px;
  font-weight: 700;
}
.theme-preview-nav small { display: block; margin-top: 6px; color: var(--chrome-muted); font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
.theme-preview-page { background: var(--bg); color: var(--text); padding: 14px 16px; }
.theme-preview-page .btn { margin-top: 10px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 16px; }
/* Two fields that always share a row, such as the address lines (#217); stacked on a phone. */
.grid-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

.checkline { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13.5px; }
.checkline input { width: auto; margin: 0; }
.checkline label { margin: 0; font-size: 13.5px; color: var(--text); font-weight: 500; }

.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters input[type=search], .filters select, .filters input[type=date] { width: auto; min-width: 130px; }

/* searchable select (#85). Native <select> stays in the form for POST. */
.combobox { position: relative; width: 100%; }
.combobox.is-open { z-index: 50; }
.combobox-source {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
.combobox-input {
  width: 100%;
  padding: 7px 28px 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text);
}
.combobox-input:focus {
  border-color: var(--accent);
}
.combobox-input:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 0;
  border-radius: var(--radius);
}
.combobox-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.combobox-mark {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  cursor: pointer;
}
.combobox-mark::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-faint);
}
.combobox-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 40;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 2px 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.combobox-option,
.combobox-empty {
  padding: 7px 9px;
  font-size: 13.5px;
  color: var(--text);
}
.combobox-empty { color: var(--text-faint); }
.combobox-option { cursor: pointer; }
.combobox-option[aria-selected="true"] { font-weight: 600; }
.combobox-option.is-active {
  background: var(--accent-soft);
  color: var(--text);
}

/* dashboard omni-search (#119) — a typeahead over /search, not a <select>,
   so it does not reuse .combobox's hidden-select plumbing, just the same
   input/list look. */
.omnisearch { position: relative; }
.omnisearch-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.omnisearch-input:focus { border-color: var(--accent); }
.omnisearch-input:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 0;
  border-radius: var(--radius);
}
.omnisearch-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.omnisearch-group-label {
  padding: 7px 12px 3px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.omnisearch-result {
  display: block;
  padding: 7px 12px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 0;
  cursor: pointer;
}
.omnisearch-result .omnisearch-label { font-weight: 600; font-size: 13.5px; }
.omnisearch-result .omnisearch-sub { font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.omnisearch-result:hover,
.omnisearch-result.is-active {
  background: var(--accent-soft);
}
.omnisearch-empty { padding: 9px 12px; font-size: 13px; color: var(--text-faint); }

/* line-item editor */
table.lines { width: 100%; border-collapse: collapse; }
table.lines th {
  text-align: left; padding: 7px 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 600;
}
table.lines td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow: visible; }
table.lines input, table.lines select { padding: 6px 8px; font-size: 13px; }
table.lines .combobox-input { padding: 6px 26px 6px 8px; font-size: 13px; }
table.lines .line-amount { text-align: right; font-variant-numeric: tabular-nums; padding-right: 10px; font-weight: 550; }
.line-remove {
  background: none; border: 0; color: var(--text-faint); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 3px 7px; border-radius: 4px;
  font-family: inherit;
}
.line-remove:hover { color: var(--bad); background: var(--bad-soft); }
.line-remove-label { display: none; }
/* #138: per-line spread columns only while "Spread lines separately" is on */
table.lines.spread-by-bill .line-recognize,
table.lines.spread-by-bill .line-recognize-start,
table.lines.spread-by-bill th.spread-col { display: none; }

.totals { margin-left: auto; width: 300px; margin-top: 14px; }
.totals .row { display: flex; justify-content: space-between; padding: 6px 10px; font-size: 13.5px; }
.totals .row.grand {
  border-top: 2px solid var(--border-strong); margin-top: 5px; padding-top: 10px;
  font-size: 17px; font-weight: 650;
}
.totals .row span:last-child { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- misc */
.flash, .errbox {
  padding: 11px 15px; border-radius: var(--radius); margin-bottom: 18px;
  font-size: 13.5px; border: 1px solid;
}
.flash { background: var(--good-soft); border-color: var(--ccpm-orange); color: var(--ccpm-graphite); }
.errbox { background: var(--bad-soft); border-color: var(--bad); color: var(--err-ink, #7D2413); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a {
  padding: 8px 14px; font-size: 13.5px; color: var(--text-dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 550;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabs.family-tabs { margin-bottom: 8px; }
.tabs-hint {
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.45;
}

/* A collapsed-by-default section for something that needs an extra click
   before it's visible, not because it's used less often but because it's
   riskier to act on than the rest of the page (e.g. the domain allowlist
   on the Access → Invites tab, backlog #128). Square corners and a plain
   border like .card, not a warning color -- the friction is the point,
   not an alarm. */
.disclosure { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.disclosure > summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "▸"; color: var(--accent); font-size: 11px; }
.disclosure[open] > summary::before { content: "▾"; }
.disclosure-hint { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); font-weight: 500; }
.disclosure-body { padding: 4px 16px 16px; border-top: 1px solid var(--border); }
.disclosure-body .card:first-child { margin-top: 16px; }

.cols { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

dl.kv { margin: 0; display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 7px 14px; font-size: 13.5px; }
dl.kv dt { color: var(--text-dim); font-size: 12.5px; }
dl.kv dd { margin: 0; }

.addr { white-space: pre-line; line-height: 1.45; }

/* Visit photos (#240): thumbnails that wrap to the card's width, each with its Remove button below. */
.photo-grid {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.photo-grid li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.photo-grid img {
  display: block; width: 100%; max-width: 100%; height: 140px; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}

/* Rich text (#238): rendered Work performed / Notes and job Notes. A wide
   table scrolls inside the block instead of widening the page. */
.rich-text { overflow-x: auto; max-width: 100%; line-height: 1.45; overflow-wrap: break-word; }
.rich-text p, .rich-text ul, .rich-text ol, .rich-text table { margin: 0 0 8px; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text ul, .rich-text ol { padding-left: 22px; }
.rich-text table { border-collapse: collapse; font-size: 13px; }
.rich-text th, .rich-text td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; vertical-align: top; }
.rich-text th { background: var(--surface-2); font-weight: 600; }
.rich-text-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.rich-text-toolbar .btn { padding: 6px 12px; }
.rich-text-preview {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 7px 9px;
  min-height: 66px;
  background: var(--surface);
}
.rich-text-preview[hidden], textarea[data-rich-text][hidden] { display: none; }

.section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim); font-weight: 650; padding: 14px 14px 6px;
}

.report-head { text-align: center; margin-bottom: 22px; }
.report-head h2 { margin: 0 0 3px; font-size: 20px; font-weight: 650; }
/* Keep the legal suffix with the company name in customer-facing headers. */
.report-head .co { font-size: 15px; font-weight: 600; white-space: nowrap; }
.report-head .period { color: var(--text-dim); font-size: 13px; }

tr.total-row td { border-top: 1px solid var(--border-strong); font-weight: 620; }
tr.grand-row td { border-top: 2px solid var(--border-strong); border-bottom: 3px double var(--border-strong); font-weight: 680; }
tr.section-row td { background: var(--surface-2); font-weight: 620; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }

.balanced-note { font-size: 12.5px; padding: 9px 14px; border-radius: var(--radius); margin-top: 14px; }
.balanced-note.ok { background: var(--good-soft); color: var(--ccpm-graphite); }
.balanced-note.off { background: var(--bad-soft); color: #7D2413; }

/* ---------------------------------------------------------------- record-entry (#54 primitive; #39 reuses this)
   Stacked fields, 44px controls, sticky save, decimal keypad. Do not invent
   a second form language for chemistry readings. */
.record-entry .field input,
.record-entry .field select,
.record-entry .field textarea {
  min-height: 44px;
  font-size: 16px;
}
.record-entry input[inputmode="decimal"] {
  min-height: 48px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.record-entry .reading-last {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.record-entry .reading-status.in-range { color: var(--accent); font-weight: 700; }
.record-entry .reading-status.out-of-range { color: var(--bad); font-weight: 700; }
.record-entry .checkline { min-height: 44px; }

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.page-actions .running-total {
  margin-right: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---------------------------------------------------------------- auth (signed-out card; no app sidebar) */
body.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  height: auto;
  background: var(--surface-2);
}
.auth-card { width: 100%; max-width: 380px; margin: 24px; }
.auth-card .card-body { display: flex; flex-direction: column; gap: 10px; }
.auth-head { text-align: center; margin-bottom: 8px; }
.auth-head img { display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 3px; object-fit: contain; }
.auth-head h1 { font-size: 16px; margin: 0 0 4px; letter-spacing: -0.01em; text-transform: none; }
.auth-head p { font-size: 13px; color: var(--text-dim); margin: 0; }
a.btn.provider {
  min-height: 48px;
  width: 100%;
  justify-content: center;
  text-align: center;
}
.auth-legal {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  text-align: left;
}

/* ---------------------------------------------------------------- phone / tablet chrome (#54)
   Below 1024px the sidebar leaves the row. Menu opens the same nav as a
   left drawer. 44px is the brand floor; phone primary actions are 48px. */
@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .topbar-company { display: block; }
  .crumbs { flex-basis: 100%; }
  .crumbs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 85vw);
    flex: none;
    z-index: 40;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 150ms ease, visibility 150ms ease;
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(44, 50, 56, 0.45);
    z-index: 30;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
  }
  .nav-scrim[hidden] { display: none; }
  body.nav-open { overflow: hidden; }
  body.nav-open .sidebar {
    transform: none;
    visibility: visible;
  }
  .content {
    padding: 16px 16px 48px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(48px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

@media (pointer: coarse), (max-width: 639px) {
  .sidebar a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .legal-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0;
  }
  .topbar .btn.primary { min-height: 48px; }
  .record-entry .page-actions,
  .page-actions.sticky-save {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    margin: 0;
  }
  .record-entry .page-actions .btn.primary,
  .page-actions.sticky-save .btn.primary {
    min-height: 48px;
  }
  .checkline { min-height: 44px; }
  input[type=text], input[type=number], input[type=date], input[type=email],
  input[type=search], input[type=url], select, textarea,
  .combobox-input {
    font-size: 16px;
  }
  .combobox-input { min-height: 44px; }
  .combobox-option { min-height: 44px; display: flex; align-items: center; }
  .omnisearch-input { min-height: 44px; }
  .omnisearch-result { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .rich-text-toolbar .btn { min-height: 44px; }
  /* Phone-friendly technician screens (#179). Opt-in with .phone-friendly. */
  .phone-friendly { min-width: 0; overflow-wrap: anywhere; }
  .phone-friendly .btn,
  .phone-friendly .btn.sm { min-height: 44px; }
  .phone-friendly .btn.primary { min-height: 48px; }
  .phone-friendly .btn-row { display: flex; flex-direction: column; width: 100%; }
  .phone-friendly .btn-row .btn { width: 100%; }
  .phone-friendly input,
  .phone-friendly select,
  .phone-friendly textarea { min-height: 44px; font-size: 16px; max-width: 100%; }
  .phone-friendly input[type="checkbox"],
  .phone-friendly input[type="radio"] { min-height: 0; }
  .phone-friendly input[type="file"] { width: 100%; }
  .phone-friendly img { max-width: 100%; height: auto; }
  /* Contact links are real tap targets (#179 part B). */
  .phone-friendly dd a[href^="tel:"],
  .phone-friendly dd a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------- worklists + document forms (#78)
   Phone (≤639px): stacked records and card-per-line. Tablet may keep tables
   but the page itself must not pinch. Desktop tables stay tables. Print is
   unchanged — these rules are screen-only. */
.dashboard-briefing { display: none; }
.phone-save { display: none; }

@media screen and (max-width: 1023px) {
  .card-body.tight,
  .card-body:has(> table.grid:not(.worklist)),
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (max-width: 639px) {
  .grid-pair { grid-template-columns: 1fr; }
  .dashboard-briefing {
    display: block;
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin: 0 0 16px;
    letter-spacing: 0;
    text-transform: none;
  }
  .dashboard { display: flex; flex-direction: column; }
  .dashboard-search { order: -1; }
  .dashboard-briefing { order: 0; }
  .dashboard-overdue { order: 1; }
  .dashboard > .stats { order: 2; }
  .dashboard-more { order: 3; }
  .dashboard-jump { display: none; }

  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
  }
  .tabs a {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
  }

  .filters {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .filters input[type=search],
  .filters select,
  .filters input[type=date],
  .filters .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .card-body.tight:has(table.grid.worklist),
  .card-body.tight:has(table.lines),
  .card-body.tight:has(table.grid.apply-list) {
    overflow: visible;
  }

  table.grid.worklist thead,
  table.grid.apply-list thead,
  table.grid.apply-list tfoot { display: none; }
  table.grid.worklist,
  table.grid.worklist tbody,
  table.grid.apply-list,
  table.grid.apply-list tbody { display: block; width: 100%; }
  table.grid.worklist tbody tr,
  table.grid.apply-list tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 10px;
    padding: 12px;
    background: var(--surface);
  }
  table.grid.worklist tbody tr:last-child,
  table.grid.apply-list tbody tr:last-child { margin-bottom: 0; }
  table.grid.worklist tbody tr:hover,
  table.grid.apply-list tbody tr:hover { background: var(--surface); }
  table.grid.worklist td,
  table.grid.apply-list td {
    display: block;
    border: 0;
    padding: 0;
    width: auto;
  }
  table.grid.worklist td.col-extra,
  table.grid.apply-list td.col-extra { display: none; }
  table.grid.worklist td.col-id,
  table.grid.apply-list td.col-id { order: 1; flex: 1 1 55%; font-weight: 700; }
  table.grid.worklist td.col-party,
  table.grid.apply-list td.col-party { order: 3; flex: 1 1 100%; }
  table.grid.worklist td.col-status,
  table.grid.apply-list td.col-status { order: 4; }
  table.grid.worklist td.col-date,
  table.grid.apply-list td.col-date {
    order: 5;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
  }
  table.grid.worklist td.col-money,
  table.grid.apply-list td.col-money {
    order: 2;
    margin-left: auto;
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: -0.02em;
  }
  table.grid.apply-list td.col-apply {
    order: 6;
    flex: 1 1 100%;
    margin-top: 8px;
  }
  table.grid.apply-list td.col-apply input { min-height: 44px; font-size: 16px; }

  table.lines thead { display: none; }
  table.lines, table.lines tbody { display: block; width: 100%; }
  table.lines tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 12px;
    padding: 12px;
    background: var(--surface);
  }
  table.lines td {
    display: block;
    width: auto !important;
    border: 0;
    padding: 0;
  }
  table.lines input, table.lines select, table.lines .combobox-input { min-height: 44px; font-size: 16px; }
  table.lines td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 4px;
  }
  table.lines .line-item,
  table.lines .line-desc,
  table.lines .line-account,
  table.lines .line-memo { grid-column: 1 / -1; }
  table.lines .line-qty { grid-column: 1; }
  table.lines .line-price { grid-column: 2; }
  table.lines .line-tax { grid-column: 3; }
  table.lines .line-amount { grid-column: 4; font-family: var(--mono); font-size: 16px; }
  table.lines .line-debit { grid-column: 1 / 3; }
  table.lines .line-credit { grid-column: 3 / 5; }
  table.lines .line-remove-cell { grid-column: 1 / -1; }
  .line-remove-icon { display: none; }
  .line-remove-label { display: inline; }
  .line-remove {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid var(--border-strong);
    color: var(--bad);
  }
  table.lines tfoot { display: none; }
  .totals { width: 100%; margin-left: 0; }
  [data-add-line], [data-add-je], [data-apply-all] {
    width: 100%;
    min-height: 44px;
  }

  .desktop-save { display: none; }
  .phone-save { display: flex; }
  form:has(.page-actions.sticky-save) { padding-bottom: 96px; }
  .page-actions.sticky-save {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* One card per row for tables marked stack-phone (#179). */
  table.stack-phone thead { display: none; }
  table.stack-phone,
  table.stack-phone tbody { display: block; width: 100%; }
  table.stack-phone tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 12px;
    padding: 8px 12px;
    background: var(--surface);
  }
  table.stack-phone td {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: baseline;
    width: auto !important;
    border: 0;
    padding: 4px 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  table.stack-phone td.stack-spacer { display: none; }
  table.stack-phone td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
  }

  /* Part B (#179): row titles, wrapping cells, cell forms and the week buttons. */
  table.stack-phone tbody th {
    display: block;
    padding: 0 0 6px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
  }
  table.stack-phone td.nowrap { white-space: normal; }
  .phone-friendly table.stack-phone td form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .phone-friendly table.stack-phone td form select,
  .phone-friendly table.stack-phone td form .combobox {
    flex: 1 1 12rem;
    min-width: 0;
  }
  .schedule-nav { flex-wrap: wrap; }
  .schedule-nav .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- bank reconciliation worksheet (#120) */
.recon-banner { margin-bottom: 12px; }
.recon-banner-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
}
.recon-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.recon-toolbar input[type=search] { min-width: min(100%, 260px); }
.recon-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.recon-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.recon-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.recon-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}
.recon-select-all input { width: 18px; height: 18px; }
.recon-empty-group { margin: 0; padding: 16px 14px; }
.recon-group table.grid { margin: 0; }
.recon-hidden { display: none; }
table.grid tbody tr.is-cleared { background: var(--accent-soft); }
.stat [data-ending-balance] {
  font-size: 24px;
  font-weight: 620;
  width: 100%;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.recon-actions { margin-top: 14px; }
.recon-save-state { margin-right: auto; min-height: 1.2em; }
@media screen and (max-width: 1023px) {
  .recon-columns { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- help (backlog #63)
   Article typography for pages wrapped from help/*.html. Chrome (sidebar,
   topbar, links) stays on the app tokens; these rules only apply inside
   .help-manual so they cannot restyle invoices or the nav. */
.help-manual { max-width: 42rem; line-height: 1.6; }
.help-manual header { border-bottom: 5px solid var(--ccpm-orange); padding-bottom: 26px; margin-bottom: 30px; }
.help-manual .eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ccpm-deepwater);
  margin: 0 0 10px;
}
.help-manual h1 { font-size: clamp(28px, 5vw, 44px); font-weight: 800; letter-spacing: -0.035em; margin: 0 0 0.45em; text-transform: none; }
.help-manual h2 { font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; margin: 0 0 0.55em; }
.help-manual h3 { font-size: 18px; font-weight: 700; margin: 1.1em 0 0.45em; }
.help-manual p { margin: 0 0 0.8em; }
.help-manual .lede { font-size: 18px; max-width: 42rem; color: var(--text); }
.help-manual .glance { font-size: 18px; font-weight: 500; color: var(--text); margin: 0 0 0.85em; }
.help-manual .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.help-manual .cards a {
  display: grid; grid-template-columns: 42px 1fr; gap: 0 12px; padding: 17px;
  min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border);
}
.help-manual .cards a:hover { border-color: var(--accent); border-bottom-color: var(--accent); color: var(--text); }
.help-manual .cards b { grid-row: span 2; color: var(--ccpm-orange); font-family: var(--mono); font-size: 15px; font-weight: 600; }
.help-manual .cards span { font-weight: 700; }
.help-manual .cards small { color: var(--ccpm-deepwater); }
.help-manual .notice, .help-manual blockquote, .help-manual .callout {
  border-left: 5px solid var(--ccpm-orange); background: var(--ccpm-deck);
  padding: 18px 20px; margin: 28px 0;
}
.help-manual .notice h2, .help-manual .callout h2 { font-size: 17px; }
.help-manual .callout p + p, .help-manual .warning p + p { margin-top: 0.75em; }
.help-manual .warning p { margin: 0; }
.help-manual .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 34px; }
.help-manual .toc a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--border);
  color: var(--text);
}
.help-manual .toc a:hover { border-color: var(--accent); color: var(--accent); }
.help-manual section { margin: 8px 0 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.help-manual ul, .help-manual ol { margin: 0.4em 0 1em; padding-left: 1.25em; }
.help-manual .steps li, .help-manual li { margin: 0.7em 0; }
.help-manual .table-scroll { overflow-x: auto; max-width: 100%; }
.help-manual .table-scroll table { min-width: 36rem; }
.help-manual table { border-collapse: collapse; width: 100%; margin: 14px 0 24px; }
.help-manual th, .help-manual td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.help-manual th {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ccpm-deepwater);
}
.help-manual dt { font-weight: 700; margin-top: 1em; }
.help-manual dd { margin: 0.35em 0 0.9em; }
.help-manual code { background: var(--ccpm-deck); padding: 1px 4px; font-family: var(--mono); font-size: 0.9em; }
.help-manual .ref { font-size: 0.92em; color: var(--ccpm-deepwater); }
.help-manual .warning { border-left: 5px solid var(--bad); background: var(--bad-soft); padding: 18px 20px; margin: 28px 0; }
.help-manual .next { border-top: 1px solid var(--border); padding-top: 22px; }
.help-manual footer { margin-top: 50px; color: var(--ccpm-deepwater); font-size: 14px; }

/* ---------------------------------------------------------------- print */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .dashboard-briefing, .phone-save, .combobox-list, .trend-tooltip { display: none !important; }
  /* The printed statement is the table; the chart is a screen aid (#139). */
  .report-chart-card { display: none !important; }
  /* Paper stays white regardless of a dark screen theme (#27). Accent
     (invoice rules, headings) still follows the configured token. */
  :root {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #E7ECEF;
    --text: #2C3238;
    --text-dim: #4E6C7A;
    --text-faint: #6C757C;
    --ccpm-graphite: #2C3238;
    --ccpm-chalk: #FFFFFF;
    --ccpm-deck: #E7ECEF;
    --ccpm-deepwater: #4E6C7A;
    --err-ink: #7D2413;
  }
  body { background: #fff !important; color: #2C3238 !important; }
  .doc, .content { background: #fff !important; }
  .content { padding: 0; max-width: none; }
  .card { border: 0; box-shadow: none; margin: 0; }
  table.grid tbody tr:hover { background: transparent; }
  a { color: inherit; text-decoration: none; border-bottom: 0; }
  .help-manual .toc, .help-manual .next, .help-manual footer { display: none; }
  /* Rich text (#238): the whole table on paper, header repeated per page. */
  .rich-text-toolbar, .rich-text-preview { display: none !important; }
  .rich-text { overflow-x: visible; max-width: none; }
  .rich-text table { border-collapse: collapse; width: 100%; }
  .rich-text th, .rich-text td { border: 1px solid var(--border-strong); overflow-wrap: anywhere; }
  .rich-text thead { display: table-header-group; }
  .rich-text tr { break-inside: avoid; page-break-inside: avoid; }
  .legal-foot {
    background: #fff;
    color: #2C3238;
    padding-top: 20px;
  }
  .legal-livery { display: none; }
  .legal-operator strong { color: #2C3238; }
  .legal-foot a { color: inherit; }
}

/* chemistry trends (#43) */
.trend-fields {
  border: 0;
  margin: 12px 0 0;
  padding: 0;
  min-inline-size: 0;
}
.trend-fields legend {
  padding: 0;
  margin: 0 0 8px;
}
.trend-field-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.trend-field-list .checkline {
  margin: 0;
  min-height: 44px;
}
.trend-chart {
  position: relative;
  width: 100%;
  min-height: 0;
  margin: 8px 0 4px;
}
.trend-pane + .trend-pane { margin-top: 20px; }
.trend-pane-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.trend-chart svg { display: block; }
.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 8px 0 4px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.trend-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.trend-legend-item::before {
  content: "";
  width: 14px;
  height: 4px;
  background: var(--accent);
  border-radius: 1px;
}
.trend-legend-current::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.trend-legend-superseded::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--bad);
  box-sizing: border-box;
}
.trend-legend-band::before {
  height: 10px;
  background: var(--accent);
  opacity: 0.25;
}
.trend-tooltip {
  position: absolute;
  z-index: 2;
  max-width: 280px;
  padding: 6px 8px;
  background: var(--ccpm-graphite);
  color: var(--ccpm-chalk);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  border-radius: 3px;
  pointer-events: none;
}
.trend-frame { position: relative; }

/* report charts (#139) -- drawn by static/js/report_charts.js */
.report-chart-frame { position: relative; }
.report-chart { width: 100%; min-height: 120px; }
.report-chart svg { display: block; }
.report-chart .rc-link { cursor: pointer; }
.report-chart .rc-link:focus { outline: none; }
.report-chart .rc-link:focus-visible .rc-mark { stroke: var(--text); stroke-width: 2; }
.report-chart .rc-link:focus-visible text { text-decoration: underline; }
.report-chart-tooltip {
  position: absolute;
  z-index: 2;
  max-width: 300px;
  padding: 6px 8px;
  background: var(--ccpm-graphite);
  color: var(--ccpm-chalk);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  border-radius: var(--radius);
  pointer-events: none;
  white-space: pre-line;
}

/* ---------------------------------------------------------------- legal (public /privacy and /terms; no app sidebar) */
body.legal-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  height: auto;
  background: var(--bg);
}
.legal-chrome {
  background: var(--chrome);
  color: var(--chrome-text);
  border-bottom: 5px solid var(--accent);
}
.legal-chrome-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  max-width: 940px;
  margin: 0 auto;
  padding: 16px 22px;
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}
.legal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--chrome-text);
  text-decoration: none;
  border-bottom: 0;
  min-width: 0;
}
.legal-brand:hover { color: var(--chrome-text); border-bottom: 0; }
.legal-brand img { width: 36px; height: 36px; border-radius: 3px; object-fit: contain; flex: none; }
.legal-brand span {
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legal-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.legal-switch a {
  padding: 8px 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--chrome-muted);
  text-decoration: none;
  border-bottom: 0;
  font-size: 14px;
  font-weight: 600;
}
.legal-switch a:hover { color: var(--chrome-text); border-bottom: 0; }
.legal-switch a.active { color: var(--chrome-text); box-shadow: inset 0 -2px 0 var(--accent); }
.legal-switch a.legal-app { color: var(--accent); }
.legal-main {
  flex: 1;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 28px 22px 40px;
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}
.legal-article .legal-date {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ccpm-deepwater);
  margin: 0;
}
.legal-foot {
  margin-top: auto;
  background: var(--chrome);
  color: var(--chrome-muted);
  padding: 0 22px 28px;
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}
.legal-livery { display: flex; flex-direction: column; gap: 5px; margin: 0 -22px 22px; }
.legal-livery-thick { display: block; height: 11px; background: var(--accent); }
.legal-livery-thin { display: block; height: 5px; background: var(--accent); }
.legal-operator, .legal-meta {
  max-width: 940px;
  margin: 0 auto 8px;
  font-size: 14px;
}
.legal-operator { display: flex; flex-direction: column; gap: 2px; }
.legal-operator strong { color: var(--chrome-text); font-weight: 700; }
.legal-foot a { color: var(--chrome-muted); border-bottom-color: var(--powder-line); }
.legal-foot a:hover { color: var(--chrome-text); border-bottom-color: var(--chrome-text); }
.legal-meta {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* printable invoice document */
.doc { max-width: 800px; margin: 0 auto; background: var(--ccpm-chalk); padding: 42px 46px; }
.doc-head { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 32px; padding-bottom: 14px; border-bottom: 5px solid var(--ccpm-orange); }
.doc-head h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -0.02em; font-weight: 800; text-transform: uppercase; color: var(--ccpm-orange); }
.doc-logo { display: block; max-width: 280px; height: auto; margin-bottom: 12px; }
.doc-co { font-size: 16px; font-weight: 650; margin-bottom: 5px; white-space: nowrap; }
.report-head .report-logo { max-height: 56px; max-width: 240px; height: auto; margin: 0 auto 10px; display: block; }
.doc-meta { text-align: right; font-size: 13px; }
.doc-meta .num-big { font-size: 15px; font-weight: 620; }
.doc-parties { display: flex; gap: 40px; margin-bottom: 26px; }
.doc-parties .who { flex: 1; }
.doc-parties .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); margin-bottom: 5px; font-weight: 650; }
.doc table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.doc table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim); border-bottom: 2px solid var(--text); padding: 7px 8px; font-weight: 650;
}
.doc table td { padding: 9px 8px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.doc-footer { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); white-space: pre-line; }
.doc .paidstamp { color: var(--good); font-size: 13px; font-weight: 650; }
.doc .paidstamp.draft { display: inline-block; padding: 2px 6px; background: var(--warn); color: var(--ccpm-graphite); }