/* ui.css — the CRM "new look" design system (decision 2026-10-20-crm-new-look-and-navigation).
   Spec: DESIGN.md → "New look (2026-10-20)". Phase 1: this layer is linked on every CRM page but
   nothing uses it yet, so nothing on screen changes. Pages move onto it batch by batch.

   Rules that keep it inert until a page opts in (test/ui-css.test.mjs enforces them):
   1. Every selector is a `.ui-` class (or a descendant/state of one). No element, id or
      attribute-only selectors, no `:root` rules except token definitions. No old markup carries
      a `.ui-` class, so nothing here can match an existing page.
   2. Every custom property it defines starts `--ui-`. It reads app.css tokens (--red, --ink…)
      but never redefines them.
   3. Not in an @layer, on purpose: app.css has unlayered base rules (`button { color: inherit }`,
      `::placeholder`, `:focus-visible`) that would beat any layered rule and, for example, turn
      the white text on .ui-btn-primary red. Unlayered, a .ui- class outranks those bare rules.
   Colour values are the approved app.css palette; the new tokens add surfaces and states. */

/* ───────────── Tokens ───────────── */
:root {
  /* Surfaces */
  --ui-bg: var(--bg);               /* page canvas  #f6f6f8 */
  --ui-surface: var(--card);        /* cards, header, sheets  #fff */
  --ui-side: #fbfbfc;               /* sidebar */
  --ui-sunken: #f1f2f4;             /* inputs at rest on the canvas, segmented tracks */
  --ui-hover: #f4f4f6;
  --ui-line: var(--line);
  --ui-line-strong: #d4d4d9;        /* hover border, dividers that must read */
  /* Text */
  --ui-ink: var(--ink);             
  --ui-ink-2: #3d4451;              /* secondary emphasis */
  --ui-muted: #5f6672;              /* labels, meta: >= 4.5:1 on every surface, both themes (test/ui-css.test.mjs) */
  /* Accent (brand red) */
  --ui-accent: var(--red);          /* fills: primary button, badge */
  --ui-accent-text: var(--red-text);/* red as text */
  --ui-accent-soft: var(--chip-red-bg); /* active nav row, "All agents" picker */
  --ui-accent-ink: var(--chip-red-ink); /* text on --ui-accent-soft */
  /* Channel (SMS only) */
  --ui-sms: var(--sms); --ui-sms-bg: var(--sms-bg); --ui-sms-solid: var(--sms-solid);
  --ui-email-ink: var(--email-ink);
  /* State */
  --ui-ok: var(--green-ink);   --ui-ok-bg: var(--green-bg);
  --ui-warn: var(--warn-ink);  --ui-warn-bg: var(--warn-bg); --ui-warn-line: var(--warn-line);
  --ui-err: var(--red-text);   --ui-err-bg: var(--chip-red-bg);
  --ui-info: #3d4451;          --ui-info-bg: #eef0f3; /* neutral: blue is reserved for SMS */
  --ui-focus: var(--focus);
  --ui-scrim: rgba(17,17,20,.40);

  /* Type: one family, fixed rem-free px scale (~1.2) */
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --ui-fs-xs: 12px;    /* labels, chips, uppercase section heads */
  --ui-fs-sm: 13.5px;  /* secondary, table cells, buttons */
  --ui-fs-md: 15px;    /* body */
  --ui-fs-lg: 16px;    /* card titles, header title */
  --ui-fs-xl: 22px;    /* page heading */
  --ui-fs-2xl: 28px;   /* KPI numbers */
  --ui-fw-reg: 450; --ui-fw-med: 550; --ui-fw-bold: 650;
  --ui-lh: 1.45; --ui-lh-tight: 1.2;
  --ui-track-label: .06em;

  /* Spacing: 4px base */
  --ui-s1: 4px; --ui-s2: 8px; --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 20px; --ui-s6: 24px; --ui-s8: 32px; --ui-s10: 40px;

  /* Radii */
  --ui-r-xs: 6px;      /* kbd, tags */
  --ui-r-sm: 8px;      /* buttons, inputs, nav rows */
  --ui-r-md: 12px;     /* cards, menus */
  --ui-r-lg: 16px;     /* sheets, modals */
  --ui-r-pill: 999px;  /* chips, badges, avatars */

  /* Elevation: a surface gets a border OR a shadow, never both (DESIGN.md) */
  --ui-e0: none;                                                    /* cards: border only */
  --ui-e1: 0 1px 2px rgba(17,17,20,.06), 0 4px 12px rgba(17,17,20,.08);   /* menus, popovers */
  --ui-e2: 0 8px 28px rgba(17,17,20,.14), 0 2px 6px rgba(17,17,20,.06);  /* side panels, sheets */
  --ui-e3: 0 16px 48px rgba(17,17,20,.20);                          /* modals */

  /* Sizes */
  --ui-ctl: 36px;          /* control height, desktop */
  --ui-ctl-sm: 30px;
  --ui-tap: 48px;          /* every phone target (house rule) */
  --ui-side-w: 240px; --ui-rail-w: 64px; --ui-header-h: 56px; --ui-tabbar-h: 60px;
  --ui-content-max: 1200px;

  /* Layers (app.css: nav 5, panel 10, phone bar 12, modal 20, sheet 22, toast 30; side panels here are modal-tier) */
  --ui-z-nav: 5; --ui-z-tabbar: 12; --ui-z-scrim: 19; --ui-z-modal: 20; --ui-z-sheet: 22; --ui-z-toast: 30;
  /* The scrim sits under every overlay it backs (panel, modal, sheet), so clicks inside them never hit it. */

  /* Motion */
  --ui-dur: 180ms; --ui-dur-slow: 240ms; --ui-ease: cubic-bezier(.22,1,.36,1);
}
:root[data-theme="dark"] {
  --ui-side: #171513;
  --ui-sunken: #171513;
  --ui-hover: #26231F;
  --ui-line-strong: #55514A;
  --ui-ink-2: #DDD6CB;
  --ui-muted: #A8A196;       
  --ui-info: #DDD6CB; --ui-info-bg: #26231F;
  --ui-scrim: rgba(0,0,0,.55);
  --ui-e1: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.35);
  --ui-e2: 0 10px 32px rgba(0,0,0,.5);
  --ui-e3: 0 18px 56px rgba(0,0,0,.6);
}

/* ───────────── Text ───────────── */
.ui-h1 { font: var(--ui-fw-bold) var(--ui-fs-xl)/var(--ui-lh-tight) var(--ui-font); letter-spacing: -.01em; margin: 0; color: var(--ui-ink); }
.ui-h2 { font: var(--ui-fw-bold) var(--ui-fs-lg)/var(--ui-lh-tight) var(--ui-font); margin: 0; color: var(--ui-ink); }
.ui-label { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); text-transform: uppercase; color: var(--ui-muted); }
.ui-sub { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-num { font-variant-numeric: tabular-nums; }

/* ───────────── Layout ───────────── */
.ui-page { padding: var(--ui-s6) var(--ui-s6) var(--ui-s10); max-width: var(--ui-content-max); width: 100%; }
.ui-page.ui-full { max-width: none; }
.ui-pagehead { display: flex; align-items: flex-start; gap: var(--ui-s3); flex-wrap: wrap; margin-bottom: var(--ui-s4); }
.ui-pagehead .ui-grow { flex: 1; min-width: 0; }
.ui-stack { display: flex; flex-direction: column; gap: var(--ui-s3); }
.ui-row { display: flex; align-items: center; gap: var(--ui-s2); flex-wrap: wrap; }
.ui-grow { flex: 1; min-width: 0; }
.ui-grid { display: grid; gap: var(--ui-s4); grid-template-columns: minmax(0,1fr) var(--ui-aside-w, 320px); } /* set --ui-aside-w on the element for a wider rail */
.ui-kpis { display: grid; gap: var(--ui-s3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
@media (max-width: 900px) { .ui-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 820px) { .ui-page { padding: var(--ui-s4) var(--ui-s4) var(--ui-s8); } }

/* ───────────── Card ───────────── */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); box-shadow: var(--ui-e0); }
.ui-card-head { display: flex; align-items: center; gap: var(--ui-s2); flex-wrap: wrap; padding: var(--ui-s3) var(--ui-s4); border-bottom: 1px solid var(--ui-line); min-height: 48px; }
.ui-card-head .ui-label { display: inline-flex; align-items: center; gap: 6px; }
.ui-card-body { padding: var(--ui-s4); }
.ui-card-foot { padding: var(--ui-s3) var(--ui-s4); border-top: 1px solid var(--ui-line); display: flex; gap: var(--ui-s2); justify-content: flex-end; }

/* KPI tile: always a link or button (PRODUCT.md: actionable, never vanity) */
.ui-kpi { display: flex; flex-direction: column; gap: 6px; padding: var(--ui-s3) var(--ui-s4); background: var(--ui-surface);
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); color: var(--ui-ink); text-decoration: none; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease); }
.ui-kpi:hover { border-color: var(--ui-line-strong); transform: translateY(-1px); }
/* A tile that only shows a number (no link) is a div: no pointer, no lift. Restyles keep today's clickability. */
div.ui-kpi { cursor: default; }
div.ui-kpi:hover { border-color: var(--ui-line); transform: none; }
.ui-kpi .ui-label { display: inline-flex; align-items: center; gap: 6px; }
.ui-kpi-v { font-size: var(--ui-fs-2xl); font-weight: var(--ui-fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.ui-kpi-d { font-size: var(--ui-fs-xs); color: var(--ui-muted); }

/* ───────────── Buttons ───────────── */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ui-ctl); padding: 0 14px;
  font: var(--ui-fw-med) var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-ink); background: var(--ui-surface);
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: border-color var(--ui-dur) var(--ui-ease), background-color var(--ui-dur) var(--ui-ease); }
.ui-btn:hover { border-color: var(--ui-line-strong); background: var(--ui-hover); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-btn-primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.ui-btn-primary:hover { background: var(--ui-accent); border-color: var(--ui-accent); filter: brightness(.94); }
.ui-btn-ok { background: var(--ui-ok-bg); color: var(--ui-ok); border-color: color-mix(in oklab, var(--ui-ok) 30%, var(--ui-line)); }
.ui-btn-danger { color: var(--ui-accent-text); }
.ui-btn-ghost { border-color: transparent; background: transparent; }
.ui-btn-sm { min-height: var(--ui-ctl-sm); padding: 0 10px; font-size: var(--ui-fs-xs); }
.ui-btn-icon { width: var(--ui-ctl); padding: 0; }
:root[data-theme="dark"] .ui-btn-primary { background: var(--red-solid); border-color: var(--red-solid); } /* #C62828: white 5.6:1 */

/* ───────────── Chips, tags, badges ───────────── */
.ui-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ui-r-pill);
  font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); line-height: 18px; background: var(--chip-bg); color: var(--ui-ink-2); white-space: nowrap; }
.ui-chip-red { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.ui-chip-ok { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-chip-warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
/* Channel tag: the channel in words plus an icon, never colour alone */
.ui-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: var(--ui-r-xs);
  font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); line-height: 18px; background: var(--chip-bg); color: var(--ui-email-ink); }
.ui-tag-sms { background: var(--ui-sms-bg); color: var(--ui-sms); }
.ui-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--ui-r-pill); background: var(--ui-accent); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .ui-badge { background: var(--red-solid); }
.ui-avatar { width: 32px; height: 32px; border-radius: var(--ui-r-pill); background: var(--chip-bg); color: var(--ui-ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--ui-fs-xs); font-weight: 700; flex: none; }
.ui-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); flex: none; }
.ui-dot.is-off { background: var(--ui-line-strong); }

/* ───────────── Forms ───────────── */
.ui-field { display: flex; flex-direction: column; gap: 6px; }
.ui-field > label, .ui-field-label { font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-med); color: var(--ui-ink); }
.ui-hint { font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.ui-err-text { font-size: var(--ui-fs-xs); color: var(--ui-err); }
.ui-input, .ui-select, .ui-textarea { width: 100%; min-height: var(--ui-ctl); padding: 7px 10px; font: var(--ui-fw-reg) var(--ui-fs-md)/1.3 var(--ui-font);
  color: var(--ui-ink); background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-sm); }
.ui-textarea { min-height: 88px; resize: vertical; line-height: var(--ui-lh); }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-muted); }
.ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"] { border-color: var(--ui-err); }
/* Checkbox rows (consent boxes use this): the box and its full text are always visible, never behind a reveal.
   .ui-check-inline is the compact desktop form for checkbox filters; on a phone it is 48px like the rest. */
.ui-check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--ui-tap); padding: 10px 0; font-size: var(--ui-fs-sm); line-height: var(--ui-lh); cursor: pointer; }
.ui-check.ui-check-inline { min-height: var(--ui-ctl); padding: 0; }
.ui-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--ui-accent); }
.ui-search { display: flex; align-items: center; gap: 8px; min-height: var(--ui-ctl); padding: 0 10px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-muted); font-size: var(--ui-fs-sm); cursor: text; }
.ui-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--ui-ink); outline: none; }
.ui-kbd { font: 600 11.5px/1 var(--ui-font); border: 1px solid var(--ui-line); border-radius: var(--ui-r-xs); padding: 3px 5px; background: var(--ui-surface); color: var(--ui-muted); }

/* ───────────── Tabs and segmented filters ───────────── */
.ui-tabs { display: flex; gap: var(--ui-s5); border-bottom: 1px solid var(--ui-line); overflow-x: auto; scrollbar-width: none; }
.ui-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; font: var(--ui-fw-med) var(--ui-fs-md)/1 var(--ui-font);
  color: var(--ui-muted); cursor: pointer; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; text-decoration: none; }
.ui-tab:hover { color: var(--ui-ink); }
.ui-tab[aria-selected="true"], .ui-tab.is-active { color: var(--ui-ink); font-weight: var(--ui-fw-bold); box-shadow: inset 0 -2px 0 var(--ui-accent); }
.ui-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--ui-sunken); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); }
.ui-seg > button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: none; font: var(--ui-fw-med) var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-muted); cursor: pointer; }
.ui-seg > button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-e1); }

/* ───────────── Lists and tables ───────────── */
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-li { display: flex; align-items: center; gap: var(--ui-s3); padding: var(--ui-s3) var(--ui-s4); border-top: 1px solid var(--ui-line); min-height: 56px; }
.ui-li:first-child { border-top: 0; }
.ui-li.is-click { cursor: pointer; } .ui-li.is-click:hover { background: var(--ui-hover); }
.ui-li-title { font-weight: var(--ui-fw-bold); } .ui-li-meta { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--ui-fs-sm); }
.ui-table th { text-align: left; font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); text-transform: uppercase;
  color: var(--ui-muted); padding: 10px var(--ui-s4); border-bottom: 1px solid var(--ui-line); background: var(--ui-surface); position: sticky; top: 0; }
.ui-table td { padding: 10px var(--ui-s4); border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
.ui-table tbody tr:hover { background: var(--ui-hover); }
.ui-table .ui-num, .ui-table td.is-num { text-align: right; }
/* Tables become cards on a phone: each cell carries its label in data-label */
@media (max-width: 820px) {
  .ui-table.ui-cards thead { display: none; }
  .ui-table.ui-cards, .ui-table.ui-cards tbody, .ui-table.ui-cards tr { display: block; }
  .ui-table.ui-cards tr { padding: var(--ui-s3) var(--ui-s4); border-bottom: 1px solid var(--ui-line); min-height: var(--ui-tap); }
  .ui-table.ui-cards td { display: flex; justify-content: space-between; gap: var(--ui-s3); flex-wrap: wrap; border: 0; padding: 3px 0; }
  .ui-table.ui-cards td::before { content: attr(data-label); color: var(--ui-muted); font-size: var(--ui-fs-xs); flex: none; }
  .ui-table.ui-cards td:not([data-label])::before { content: none; }
  .ui-table.ui-cards td[data-primary] { font-weight: var(--ui-fw-bold); font-size: var(--ui-fs-md); }
  .ui-table.ui-cards tr { position: relative; }
  .ui-table.ui-cards td[data-select] { position: absolute; top: 4px; right: 4px; padding: 0; } /* row checkbox sits top-right of the card */
  .ui-table.ui-cards td[data-select] input { width: 22px; height: 22px; margin: 13px; }
  .ui-table.ui-cards td[data-select] + td[data-primary] { padding-right: 48px; }
  .ui-table.ui-cards td > .ui-cell-stack { text-align: right; } /* several values in one cell stay together on the right */
}

/* ───────────── Banners and toasts ───────────── */
.ui-banner { display: flex; gap: 10px; align-items: flex-start; padding: var(--ui-s3) var(--ui-s4); border-radius: var(--ui-r-md); border: 1px solid var(--ui-line);
  background: var(--ui-surface); font-size: var(--ui-fs-sm); }
.ui-banner-warn { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); color: var(--ui-warn); }
.ui-banner-err { background: var(--ui-err-bg); border-color: transparent; color: var(--ui-accent-ink); }
.ui-banner-ok { background: var(--ui-ok-bg); border-color: transparent; color: var(--ui-ok); }
/* Compliance block (TPMO, non-affiliation, licensed-agency lines): always rendered in full, never truncated or collapsed */
.ui-legal { font-size: var(--ui-fs-xs); line-height: 1.5; color: var(--ui-muted); padding: var(--ui-s3) 0; border-top: 1px solid var(--ui-line); }
.ui-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: var(--ui-z-toast); display: flex; align-items: center; gap: 10px;
  background: var(--ui-ink); color: var(--ui-bg); padding: 10px 16px; border-radius: var(--ui-r-md); box-shadow: var(--ui-e2); font-size: var(--ui-fs-sm); }
.ui-toast .ui-btn { min-height: 28px; background: transparent; color: inherit; border-color: color-mix(in oklab, var(--ui-bg) 35%, transparent); }
.ui-toast-undo[hidden] { display: none; }
.ui-toast-undo { width: max-content; max-width: calc(100vw - 32px); } /* left:50% would cap its shrink-to-fit width at half the screen */
.ui-toast-undo .ui-btn { font-weight: var(--ui-fw-bold); }
@media (max-width: 1023px) { .ui-toast-undo { bottom: calc(76px + env(safe-area-inset-bottom)); } .ui-toast-undo .ui-btn { min-height: var(--ui-tap); } } /* above the phone tab bar; 48px Undo */

/* ───────────── Empty, loading, error states ───────────── */
.ui-empty, .ui-error { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ui-s2); padding: var(--ui-s10) var(--ui-s6); color: var(--ui-muted); }
.ui-empty-ico { width: 44px; height: 44px; border-radius: var(--ui-r-pill); background: var(--chip-bg); display: flex; align-items: center; justify-content: center; color: var(--ui-ink-2); }
.ui-empty-title { font-weight: var(--ui-fw-bold); color: var(--ui-ink); font-size: var(--ui-fs-md); }
.ui-empty p, .ui-error p { margin: 0; max-width: 42ch; font-size: var(--ui-fs-sm); }
/* The in-card size every list uses (js/empty.js): smaller ring, tighter padding; the action sits under the reason. */
.ui-empty-sm { padding: var(--ui-s6) var(--ui-s4); gap: 6px; }
.ui-empty-sm .ui-empty-ico { width: 36px; height: 36px; }
.ui-empty-sm .ui-empty-title { font-size: var(--ui-fs-sm); }
.ui-empty .btn, .ui-empty .ui-btn { margin-top: 6px; }
.ui-empty-error .ui-empty-ico { background: var(--chip-red-bg); color: var(--red); }
.ui-empty-ok .ui-empty-ico { background: var(--green-bg); color: var(--green); }
.ui-skel { display: block; height: 14px; border-radius: var(--ui-r-xs); background: linear-gradient(90deg, var(--chip-bg) 25%, var(--ui-hover) 37%, var(--chip-bg) 63%);
  background-size: 400% 100%; animation: ui-shimmer 1.4s ease infinite; }
.ui-skel-lg { height: 22px; } .ui-skel-sm { height: 10px; } .ui-skel-row { height: 56px; border-radius: 0; }
@keyframes ui-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ───────────── Overlays: menu, side panel, sheet, modal ───────────── */
.ui-menu { background: var(--ui-surface); border-radius: var(--ui-r-md); box-shadow: var(--ui-e1); padding: 6px; min-width: 200px; z-index: var(--ui-z-modal); }
.ui-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; background: none; border-radius: 6px;
  font: inherit; font-size: var(--ui-fs-sm); color: var(--ui-ink); text-align: left; cursor: pointer; text-decoration: none; }
.ui-menu-item:hover, .ui-menu-item[aria-selected="true"] { background: var(--ui-hover); }
.ui-scrim { position: fixed; inset: 0; background: var(--ui-scrim); z-index: var(--ui-z-scrim); }
.ui-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--ui-surface); box-shadow: var(--ui-e2);
  z-index: var(--ui-z-modal); display: flex; flex-direction: column; }
.ui-panel-head { display: flex; align-items: center; gap: var(--ui-s2); min-height: var(--ui-header-h); padding: 0 var(--ui-s4); border-bottom: 1px solid var(--ui-line); }
.ui-panel-body { flex: 1; overflow-y: auto; padding: var(--ui-s4); }
.ui-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; background: var(--ui-surface); border-radius: var(--ui-r-lg) var(--ui-r-lg) 0 0;
  box-shadow: var(--ui-e2); z-index: var(--ui-z-sheet); padding: var(--ui-s2) var(--ui-s4) calc(var(--ui-s4) + env(safe-area-inset-bottom)); }
.ui-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--ui-line-strong); margin: 4px auto var(--ui-s3); }
.ui-modal { position: fixed; left: 50%; top: 10vh; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto;
  background: var(--ui-surface); border-radius: var(--ui-r-lg); box-shadow: var(--ui-e3); z-index: var(--ui-z-modal); }

/* ───────────── Shell: sidebar, rail, header, phone bars (nav Option A, R1–R14) ───────────── */
.ui-shell { display: flex; min-height: 100vh; }
.ui-side { position: sticky; top: 0; height: 100vh; flex: none; width: var(--ui-side-w); background: var(--ui-side); border-right: 1px solid var(--ui-line);
  display: flex; flex-direction: column; padding: var(--ui-s3) 10px; gap: 2px; }
.ui-side-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; }
.ui-side-group { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); text-transform: uppercase; color: var(--ui-muted); padding: 8px 10px 2px; margin: 0; }
.ui-nav-item { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 10px; border-radius: var(--ui-r-sm); font-size: 14px; color: var(--ui-ink); text-decoration: none; position: relative; }
.ui-nav-item svg { color: var(--ui-muted); flex: none; }
.ui-nav-item:hover { background: var(--ui-hover); }
.ui-nav-item[aria-current="page"] { background: var(--ui-accent-soft); color: var(--ui-accent-text); font-weight: 600; }
.ui-nav-item[aria-current="page"] svg { color: var(--ui-accent-text); }
.ui-nav-item .ui-badge { margin-left: auto; }
.ui-side.is-rail { width: var(--ui-rail-w); padding: var(--ui-s3) var(--ui-s2); align-items: center; }
.ui-side.is-rail .ui-side-group, .ui-side.is-rail .ui-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-side.is-rail .ui-nav-item { width: 44px; height: 36px; justify-content: center; padding: 0; }
.ui-side.is-rail .ui-nav-item .ui-badge { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; font-size: 10.5px; padding: 0 4px; }
.ui-tip { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: #1a1a1a; color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 4px 8px; border-radius: var(--ui-r-xs); white-space: nowrap; z-index: var(--ui-z-toast); pointer-events: none; }
.ui-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-header { position: sticky; top: 0; z-index: var(--ui-z-nav); height: var(--ui-header-h); display: flex; align-items: center; gap: 10px; padding: 0 var(--ui-s6);
  background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
.ui-header-title { font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-bold); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Records picker: red-tinted whenever it is not "My records" */
.ui-scope { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ui-ctl); padding: 0 10px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm);
  background: var(--ui-surface); font: var(--ui-fw-med) var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-ink); cursor: pointer; }
.ui-scope.is-wide { background: var(--ui-accent-soft); border-color: transparent; color: var(--ui-accent-ink); font-weight: 600; }
.ui-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ui-z-tabbar); display: flex; background: var(--ui-surface); border-top: 1px solid var(--ui-line);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
.ui-tabbar a, .ui-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; min-width: var(--ui-tap);
  border: 0; background: none; color: var(--ui-muted); font: var(--ui-fw-med) 11.5px/1.1 var(--ui-font); text-decoration: none; border-radius: 10px; position: relative; }
.ui-tabbar [aria-current="page"] { color: var(--ui-accent-text); }
.ui-tabbar .ui-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 10.5px; }
@media (max-width: 820px) {
  .ui-header { padding: 0 var(--ui-s3); }
  .ui-btn, .ui-input, .ui-select, .ui-scope, .ui-seg > button, .ui-menu-item, .ui-tab, .ui-nav-item { min-height: var(--ui-tap); }
  .ui-btn-sm, .ui-check, .ui-check.ui-check-inline, a.ui-chip { min-height: var(--ui-tap); }
  a.ui-chip { padding: 0 12px; }
  .ui-btn-icon { width: var(--ui-tap); }
  .ui-toast .ui-btn { min-height: var(--ui-tap); }
  .ui-search { min-height: var(--ui-tap); }
  /* List rows: title and meta take the line; status and actions wrap under them */
  .ui-li { flex-wrap: wrap; }
  .ui-li > .ui-grow { min-width: 60%; }
  /* Segmented filters scroll sideways instead of wrapping words */
  .ui-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ui-seg > button { white-space: nowrap; }
  .ui-search input { align-self: stretch; }
  .ui-table.ui-cards td[data-primary] a { display: inline-flex; align-items: center; min-height: var(--ui-tap); }
  .ui-input, .ui-select, .ui-textarea { font-size: 16px; } /* no iOS zoom on focus */
}

/* ───────────── App shell (index.html opts in with body.ui-app; nav Option A) ───────────── */
.ui-app .ui-shell { min-height: 100vh; }
.ui-app .ui-main > main { flex: 1; min-width: 0; min-height: calc(100vh - var(--ui-header-h)); } /* app.css's 100vh − 55px under a 56px header scrolled every page by 1px */
.ui-brand { position: relative; margin-bottom: var(--ui-s2); }
.ui-brand-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-md); background: var(--ui-surface); color: var(--ui-ink); font: inherit; text-align: left; cursor: pointer; }
.ui-brand-btn:hover { border-color: var(--ui-line-strong); }
.ui-brand-t { flex: 1; min-width: 0; line-height: 1.25; }
.ui-brand-t b { display: block; font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-brand-t small { display: block; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.ui-brand-car { color: var(--ui-muted); display: flex; }
.ui-brand-mark { flex: none; width: 26px; height: 26px; display: inline-block; background: center/contain no-repeat url("/assets/brand-mark.png"); }
:root[data-theme="dark"] .ui-brand-mark { background-image: url("/assets/brand-mark-white.png"); }
.ui-brand .co-menu { z-index: var(--ui-z-modal); }
.ui-side-foot { flex: none; display: flex; align-items: center; gap: 4px; padding-top: var(--ui-s2); border-top: 1px solid var(--ui-line); }
.ui-me-wrap { position: relative; flex: 1; min-width: 0; }
.ui-me { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 4px 6px; border: 0; border-radius: var(--ui-r-sm);
  background: none; color: var(--ui-ink); font: inherit; text-align: left; cursor: pointer; }
.ui-me:hover { background: var(--ui-hover); }
.ui-me .ui-avatar { width: 30px; height: 30px; }
.ui-me-t { min-width: 0; font-size: 13px; line-height: 1.25; }
.ui-me-t > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ui-me-t small { display: block; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.ui-me-menu { position: absolute; left: 0; bottom: calc(100% + 6px); min-width: 210px; }
.ui-me-menu[hidden] { display: none; }
.ui-badge[hidden] { display: none; }
.ui-nav-item .ui-tip { display: none; }
/* The rail: icons only; labels stay for screen readers (visually hidden in the shell rules above). */
.ui-side.is-rail .ui-side-scroll { overflow-y: auto; overflow-x: hidden; align-items: center; scrollbar-width: none; }
/* Rail tooltips sit outside the scrolling list: fixed, placed at the item by app.js (--tip-x / --tip-y). */
.ui-side.is-rail .ui-tip { position: fixed; left: var(--tip-x, 72px); top: var(--tip-y, 0); }
.ui-side.is-rail .ui-side-group { margin: 0; }
.ui-side.is-rail .ui-side-group + .ui-nav-item::before { content: ""; position: absolute; top: -3px; left: 8px; right: 8px; height: 1px; background: var(--ui-line); }
.ui-side.is-rail .ui-nav-item:hover .ui-tip, .ui-side.is-rail .ui-nav-item:focus-visible .ui-tip { display: block; }
.ui-side.is-rail .ui-brand-t, .ui-side.is-rail .ui-brand-car, .ui-side.is-rail .ui-me-t { display: none; }
.ui-side.is-rail .ui-brand-btn { justify-content: center; width: 44px; padding: 8px 0; }
.ui-side.is-rail .ui-side-foot { flex-direction: column; }
.ui-side.is-rail .ui-me { justify-content: center; }
.ui-side.is-rail .co-menu { left: 0; }
.ui-hdr-brand, .ui-hdr-me { display: none; }
.ui-hdr-me { font-family: inherit; } /* the phone header avatar button painted its initials in Arial (found by the analytics mockup font check) */
.ui-hdr-search { width: 280px; flex: none; font: inherit; font-size: var(--ui-fs-sm); text-align: left; }
.ui-hdr-search .ui-grow { flex: 1; }
.ui-hdr-scope:empty, .ui-hdr-scope[hidden] { display: none; }
.ui-scope select { border: 0; background: transparent; font: inherit; color: inherit; padding: 0 2px; cursor: pointer; max-width: 220px; }
.ui-scope select:focus-visible { outline: none; }
.ui-scope:focus-within { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-scope-k { color: var(--ui-muted); }
.ui-scope.is-wide .ui-scope-k { color: inherit; }
.ui-scope-strip { display: none; }
.ui-more { padding-top: var(--ui-s2); }
.ui-more-brands { display: flex; gap: var(--ui-s2); flex-wrap: wrap; margin-bottom: var(--ui-s2); }
.ui-more-brands .ui-btn { flex: 1 1 140px; justify-content: flex-start; }
.ui-more-brands .ui-btn.is-current { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-more-scope { display: flex; width: 100%; margin-bottom: var(--ui-s2); }
.ui-more-scope select { flex: 1; max-width: none; align-self: stretch; min-height: 44px; }
.ui-more .ui-side-group { padding-left: 2px; }
.ui-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s2); margin-bottom: 4px; }
.ui-more-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 6px;
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); color: var(--ui-ink); text-decoration: none; font-size: 12.5px; font-weight: var(--ui-fw-med); text-align: center; }
.ui-more-grid a svg { color: var(--ui-muted); }
.ui-more-grid a[aria-current="page"] { border-color: var(--ui-accent); color: var(--ui-accent-text); }
.ui-more-grid a[aria-current="page"] svg { color: var(--ui-accent-text); }
.ui-more-foot { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--ui-s2); padding-top: var(--ui-s2); border-top: 1px solid var(--ui-line); }
.ui-tabbar { display: none; }
/* Widths (measured 2026-10-20: today's Contacts, Settings and Broadcasts tables need ~960px of page):
   below 1024 no sidebar, the header + bottom bar instead, so every page keeps today's full width;
   1024–1279 the 64px rail, which opens OVER the page (is-overlay) instead of narrowing it;
   1280 and up the 240px sidebar, collapsible to the rail (remembered). */
@media (max-width: 1023px) {
  .ui-app .ui-side { display: none; }
  .ui-app .ui-tabbar { display: flex; }
  .ui-app .ui-header { padding: 0 var(--ui-s2); gap: 4px; }
  .ui-hdr-brand, .ui-hdr-me { display: flex; align-items: center; justify-content: center; width: var(--ui-tap); height: var(--ui-tap); flex: none;
    border: 0; background: none; border-radius: var(--ui-r-pill); padding: 0; cursor: pointer; }
  .ui-hdr-search { width: var(--ui-tap); padding: 0; justify-content: center; border: 0; background: none; }
  .ui-hdr-search .ui-hdr-search-t, .ui-hdr-search .ui-kbd, .ui-hdr-search .ui-grow { display: none; }
  .ui-hdr-scope { display: none; }
  .ui-scope-strip { display: flex; width: 100%; border-radius: 0; justify-content: center; min-height: 36px; }
  .ui-tabbar a, .ui-tabbar button { min-height: 56px; }
}
@media (max-width: 1023px) {
  /* Room for the bottom bar (its height plus the iPhone home-indicator inset); replaces app.css's 62px body padding. */
  body.ui-app { padding-bottom: 0; }
  .ui-app .ui-main { padding-bottom: calc(var(--ui-tabbar-h) + 12px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ui-hdr-search { width: 220px; }
  .ui-app .ui-shell { padding-left: var(--ui-rail-w); }
  .ui-app .ui-side { position: fixed; left: 0; top: 0; z-index: var(--ui-z-nav); }
  .ui-app .ui-side.is-overlay { z-index: var(--ui-z-modal); box-shadow: var(--ui-e2); }
}

/* ───────────── Page: Today (batch 1) — page root .ui-p-today restyles today.js's own markup ───────────── */
.ui-p-today.today { max-width: 1400px; padding: var(--ui-s6); }
.ui-p-today .today-head h2 { font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); letter-spacing: -.01em; }
.ui-p-today .today-date, .ui-p-today .dash-summary { color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.ui-p-today .dash-summary { margin: 2px 0 var(--ui-s4); }
.ui-p-today .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--ui-s3); }
.ui-p-today .kpi { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s3) var(--ui-s4); background: var(--ui-surface); gap: 6px;
  transition: border-color var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease); }
.ui-p-today a.kpi:hover, .ui-p-today button.kpi:hover { border-color: var(--ui-line-strong); transform: translateY(-1px); }
.ui-p-today .kpi-k { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); color: var(--ui-muted); }
.ui-p-today .kpi-v { font-size: var(--ui-fs-2xl); }
.ui-p-today .dash { gap: var(--ui-s4); }
.ui-p-today .dash-main, .ui-p-today .dash-rail { gap: var(--ui-s4); }
/* Cards: label head with a rule under it, rows below */
.ui-p-today .panelbox, .ui-p-today .widget { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s3) var(--ui-s4); background: var(--ui-surface); }
.ui-p-today .panelbox > h3, .ui-p-today .widget > h3 { margin: calc(-1 * var(--ui-s3)) calc(-1 * var(--ui-s4)) var(--ui-s2); padding: 0 var(--ui-s4); min-height: 48px;
  border-bottom: 1px solid var(--ui-line); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); color: var(--ui-muted); flex-wrap: wrap; }
.ui-p-today .panelbox > h3 .n, .ui-p-today .widget > h3 .n { background: var(--chip-bg); color: var(--ui-ink-2); }
.ui-p-today .trow { min-height: 52px; padding: var(--ui-s2) 0; border-bottom-color: var(--ui-line); }
.ui-p-today .trow a.name { font-weight: var(--ui-fw-bold); }
.ui-p-today .tag { background: var(--chip-bg); color: var(--ui-ink-2); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); padding: 2px 8px; border-radius: var(--ui-r-pill); }
.ui-p-today .btn.small { min-height: var(--ui-ctl-sm); border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-med); }
.ui-p-today .empty { border: 0; padding: var(--ui-s6) var(--ui-s4); color: var(--ui-muted); font-size: var(--ui-fs-sm); }
/* Today's appointments: a compact empty state whose action is Open calendar; with rows, the link sits in a footer */
.ui-p-today .ta-empty { padding: var(--ui-s6) var(--ui-s3) var(--ui-s5); gap: 6px; }
.ui-p-today .ta-empty .ui-empty-ico { width: 36px; height: 36px; }
.ui-p-today .ta-empty .ui-empty-title { font-size: var(--ui-fs-sm); }
.ui-p-today .ta-empty p { line-height: 1.5; text-wrap: pretty; } /* no lone last word ("here.") — Critic rail nit */
.ui-p-today .ta-empty .btn { margin-top: var(--ui-s2); }
.ui-p-today .ta-empty a.btn, .ui-p-today .ta-foot a.btn { display: inline-flex; align-items: center; color: var(--ui-ink); text-decoration: none; }
.ui-p-today .ta-foot { display: flex; justify-content: flex-end; margin: var(--ui-s2) calc(-1 * var(--ui-s4)) calc(-1 * var(--ui-s3)); padding: var(--ui-s2) var(--ui-s4); border-top: 1px solid var(--ui-line); }
.ui-p-today .trow:has(+ .ta-foot) { border-bottom: 0; } /* the footer's rule is the only line under the last row */
.ui-p-today .note { color: var(--ui-muted); }
.ui-p-today .late { color: var(--ui-accent-text); }
/* The "Who needs you next" card: tabs over the seven lists; each list keeps its own section */
.ui-p-today .ui-queue { overflow: hidden; }
.ui-p-today .ui-queue-tabs { padding: 0 var(--ui-s4); gap: var(--ui-s4); }
.ui-p-today .ui-queue-tabs .ui-tab { font-size: var(--ui-fs-sm); gap: 6px; }
.ui-p-today .ui-queue-tabs .ui-tab .ui-chip { padding: 0 7px; line-height: 18px; }
.ui-p-today .ui-queue-tabs .ui-tab[aria-selected="true"] .ui-chip { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.ui-p-today .ui-qpanel { border: 0; border-radius: 0; padding-top: var(--ui-s2); }
.ui-p-today .ui-qpanel > h3 { display: none; } /* the tab names the list; its subtitle and rows stay */
.ui-p-today .ui-qpanel[hidden] { display: none; }
.ui-p-today .ui-qpanel:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
@media (min-width: 821px) { .ui-p-today .ui-queue-tabs { flex-wrap: wrap; column-gap: var(--ui-s5); overflow: visible; } }
.ui-p-today .trow a[href^="tel:"] { color: var(--ui-ink-2); text-decoration: none; }
.ui-p-today .trow a[href^="tel:"]:hover { text-decoration: underline; }
/* Bars / Donut / Table view switch (sources-panel.js): a segmented control */
.ui-p-today .src-toggles { gap: 2px; padding: 2px; background: var(--ui-sunken); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); }
.ui-p-today .src-toggle { border: 0; background: none; color: var(--ui-muted); min-height: 28px; padding: 0 9px; }
.ui-p-today .src-toggle.primary { background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-e1); filter: none; }
@media (max-width: 820px) {
  .ui-p-today.today { padding: var(--ui-s4); }
  .ui-p-today .btn, .ui-p-today .btn.small, .ui-p-today a.kpi, .ui-p-today button.kpi { min-height: var(--ui-tap); }
  .ui-p-today .trow a.name, .ui-p-today .trow a[href^="tel:"] { display: inline-flex; align-items: center; min-height: var(--ui-tap); }
  .ui-p-today .feed-item.clickable { min-height: var(--ui-tap); }
  /* Rows: name and tags take the line; owner, phone, time and buttons wrap under (no overlap) */
  .ui-p-today .trow > .grow { flex: 1 1 100%; }
  .ui-p-today .trow { row-gap: 2px; }
}

/* ───────────── Page: Contacts list (batch 1) — .ui-p-contacts restyles contacts.js's markup ───────────── */
.ui-p-contacts { gap: var(--ui-s4); padding: var(--ui-s6); align-items: flex-start; }
@media (min-width: 821px) { .ui-p-contacts > .side { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s2); width: 220px; flex: 0 0 220px; } }
.ui-p-contacts > .side h3 { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); text-transform: uppercase; color: var(--ui-muted); margin: 4px 10px 6px; }
.ui-p-contacts .seg { min-height: 34px; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-sm); color: var(--ui-ink); }
.ui-p-contacts .seg:hover { background: var(--ui-hover); }
.ui-p-contacts .seg.active { background: var(--ui-accent-soft); color: var(--ui-accent-ink); font-weight: 600; }
.ui-p-contacts .seg .n { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-p-contacts .seg.active .n { color: inherit; }
.ui-p-contacts > .clist { padding: 0; }
.ui-p-contacts .contacts-owners { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--ui-sunken); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); margin-bottom: var(--ui-s3); }
.ui-p-contacts .contacts-owners .camp-owners-k { align-self: center; padding: 0 8px; font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); text-transform: uppercase; color: var(--ui-muted); }
.ui-p-contacts .contacts-owners .fchip { border: 0; background: none; min-height: 30px; border-radius: 6px; color: var(--ui-muted); font-weight: var(--ui-fw-med); }
.ui-p-contacts .contacts-owners .fchip.active { background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-e1); }
.ui-p-contacts .bar input[type=search] { min-height: var(--ui-ctl); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg); }
.ui-p-contacts .bar .btn { min-height: var(--ui-ctl); border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-med); }
.ui-p-contacts table.ct { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.ui-p-contacts table.ct th { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); text-transform: uppercase; color: var(--ui-muted); background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); padding: 10px 12px; }
.ui-p-contacts table.ct td { border-bottom: 1px solid var(--ui-line); padding: 10px 12px; }
.ui-p-contacts table.ct tr.row { cursor: pointer; }
.ui-p-contacts table.ct tr.row:hover { background: var(--ui-hover); }
.ui-p-contacts table.ct tr:last-child td { border-bottom: 0; }
.ui-p-contacts .chip { background: var(--chip-bg); color: var(--ui-ink-2); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); padding: 2px 8px; }
.ui-p-contacts .chip.green { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-contacts .chip.red { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.ui-p-contacts .avatar { background: var(--chip-bg); color: var(--ui-ink-2); }
.ui-p-contacts .bulkbar { border-radius: var(--ui-r-sm); }
.ui-p-contacts .sel-hit { display: inline-flex; align-items: center; cursor: pointer; }
@media (max-width: 820px) {
  .ui-p-contacts { padding: var(--ui-s4); }
  .ui-p-contacts .btn, .ui-p-contacts .bar .btn, .ui-p-contacts .seg, .ui-p-contacts .contacts-owners .fchip, .ui-p-contacts .name-edit { min-height: var(--ui-tap); }
  .ui-p-contacts .sel-hit { display: inline-flex; align-items: center; justify-content: center; width: var(--ui-tap); height: var(--ui-tap); cursor: pointer; }
  .ui-p-contacts .name-edit { min-width: var(--ui-tap); }
  .ui-p-contacts .bar input[type=search] { min-height: var(--ui-tap); font-size: 16px; }
  .ui-p-contacts .sel-cell input { width: 22px; height: 22px; margin: 0; }
  /* Segments and "Whose book" scroll sideways in one row each, so the list starts on the first screen */
  .ui-p-contacts .ui-segs, .ui-p-contacts .contacts-owners { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ui-p-contacts .ui-segs .seg, .ui-p-contacts .contacts-owners .fchip { flex: none; white-space: nowrap; }
  .ui-p-contacts .contacts-owners { display: flex; }
  .ui-p-contacts > .side, .ui-p-contacts > .clist, .ui-p-contacts .ui-segs, .ui-p-contacts .contacts-owners { min-width: 0; max-width: 100%; }
  /* Row cards: the checkbox sits in the card's top-right corner instead of its own line */
  .ui-p-contacts table.ct.cardable tr.row { position: relative; }
  .ui-p-contacts table.ct.cardable td.sel-cell { position: absolute; top: 2px; right: 2px; padding: 0; }
  .ui-p-contacts table.ct.cardable td.sel-cell + td { padding-right: 52px; }
  .ui-p-contacts table.ct.cardable td { border-bottom: 0; padding: 3px 0; }
  .ui-p-contacts table.ct.cardable tr.row { border-bottom: 1px solid var(--ui-line); padding: var(--ui-s3) var(--ui-s4); }
}

/* ───────────── Page: Contact (proposal p4, Kuba 2782) — .ui-p-contact; contact.js renders in this order ───────────── */
.ui-p-contact.cpage { padding: var(--ui-s6); max-width: 1400px; }
.ui-p-contact .ui-c-hero { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s4); margin: 0 0 var(--ui-s4); }
.ui-p-contact .head { margin: 0; gap: var(--ui-s3) var(--ui-s4); align-items: flex-start; }
.ui-p-contact .ui-c-who { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ui-p-contact .ui-c-name { display: flex; align-items: center; gap: 4px; }
.ui-p-contact .head h2 { font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ui-p-contact .ui-c-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ui-p-contact .ui-c-cf:empty { display: none; }
.ui-p-contact .ui-c-acts { display: flex; flex-wrap: wrap; gap: var(--ui-s2); align-items: center; }
.ui-p-contact .ui-c-outcome { display: flex; align-items: center; gap: var(--ui-s3); flex-wrap: wrap; margin-top: var(--ui-s4); padding-top: var(--ui-s4); border-top: 1px solid var(--ui-line); }
.ui-p-contact .outcome-bar { margin: 0; align-items: center; }
.ui-p-contact .avatar.lg { width: 52px; height: 52px; flex-basis: 52px; background: var(--chip-bg); color: var(--ui-ink-2); }
.ui-p-contact .avatar.lg.client { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-contact .chip { background: var(--chip-bg); color: var(--ui-ink-2); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); padding: 2px 8px; border-radius: var(--ui-r-pill); }
.ui-p-contact .chip.green { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-contact .chip.red { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.ui-p-contact .chip.amber { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-p-contact .btn { border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-med); min-height: var(--ui-ctl); display: inline-flex; align-items: center; gap: 6px; }
.ui-p-contact .btn.small { min-height: var(--ui-ctl-sm); }
.ui-p-contact .btn.danger { color: var(--ui-accent-text); }
.ui-p-contact .btn.ui-btn-ok { background: var(--ui-ok-bg); color: var(--ui-ok); border-color: color-mix(in oklab, var(--ui-ok) 35%, transparent); }
.ui-p-contact .ready-banner { border-radius: var(--ui-r-md); margin-bottom: var(--ui-s4); }
.ui-p-contact .ui-c-ins:empty { display: none; }
.ui-p-contact .ui-c-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ui-s4); align-items: start; }
.ui-p-contact .ui-c-main, .ui-p-contact .ui-c-rail { display: flex; flex-direction: column; gap: var(--ui-s4); min-width: 0; }
.ui-p-contact .ui-c-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s4); align-items: start; }
.ui-p-contact .panelbox { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s3) var(--ui-s4); background: var(--ui-surface); min-width: 0; margin: 0; }
.ui-p-contact .panelbox > h3 { margin: calc(-1 * var(--ui-s3)) calc(-1 * var(--ui-s4)) var(--ui-s3); padding: 6px var(--ui-s4); min-height: 48px; border-bottom: 1px solid var(--ui-line);
  font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); color: var(--ui-muted); gap: var(--ui-s2); flex-wrap: wrap; }
.ui-p-contact .panelbox > h3 .btn { text-transform: none; letter-spacing: 0; }
.ui-p-contact .ui-c-tabs { padding-top: 0; }
.ui-p-contact .ui-c-tabs .tabs2 { margin: 0 calc(-1 * var(--ui-s4)) var(--ui-s3); padding: 0 var(--ui-s4); gap: var(--ui-s5); border-bottom: 1px solid var(--ui-line); }
.ui-p-contact .fieldrow { border-bottom-color: var(--ui-line); min-height: 36px; }
.ui-p-contact .fieldrow span:first-child, .ui-p-contact .note { color: var(--ui-muted); }
/* K4033 consent lines: one compact button per record, the full record one tap away. */
.ui-p-contact .cl-hint { margin: 0 0 var(--ui-s2); font-size: var(--ui-fs-xs); line-height: var(--ui-lh); }
.ui-p-contact .cl-item { border-bottom: 1px solid var(--ui-line); }
.ui-p-contact .cl-line { display: flex; align-items: center; gap: var(--ui-s2); width: 100%; min-height: var(--ui-tap); padding: 6px 2px; margin: 0;
  background: none; border: 0; border-radius: var(--ui-r-sm); font: inherit; color: var(--ui-ink); text-align: left; cursor: pointer; }
.ui-p-contact .cl-line:hover { background: var(--ui-hover); }
.ui-p-contact .cl-line:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
.ui-p-contact .cl-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ui-p-contact .cl-sum { font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.ui-p-contact .cl-sum .chip { margin: 0; }
.ui-p-contact .cl-tags { font-size: var(--ui-fs-xs); color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-p-contact .cl-chev { flex: none; display: inline-flex; color: var(--ui-muted); transition: transform var(--ui-dur) var(--ui-ease); }
.ui-p-contact .cl-line[aria-expanded="true"] .cl-chev { transform: rotate(180deg); }
.ui-p-contact .cl-detail { padding: 0 2px var(--ui-s3); font-size: var(--ui-fs-sm); }
.ui-p-contact .cl-detail[hidden] { display: none; }
.ui-p-contact .cl-detail dl { margin: 0 0 var(--ui-s2); }
.ui-p-contact .cl-f { display: flex; gap: var(--ui-s3); padding: 2px 0; }
.ui-p-contact .cl-f dt { flex: 0 0 84px; color: var(--ui-muted); }
.ui-p-contact .cl-f dd { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--ui-ink); }
.ui-p-contact .cl-lab { margin-top: var(--ui-s2); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); color: var(--ui-muted); }
.ui-p-contact .cl-note, .ui-p-contact .cl-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--ui-lh); color: var(--ui-ink); }
.ui-p-contact .cl-text { margin-top: 2px; padding: var(--ui-s2) var(--ui-s3); background: var(--ui-sunken); border-radius: var(--ui-r-sm); }
@media (prefers-reduced-motion: reduce) { .ui-p-contact .cl-chev { transition: none; } }
.ui-p-contact .tabs2 button { padding: 0 2px; min-height: 48px; font-size: var(--ui-fs-md); color: var(--ui-muted); border-bottom-width: 2px; }
.ui-p-contact .tabs2 button.active { color: var(--ui-ink); font-weight: var(--ui-fw-bold); border-bottom-color: var(--ui-accent); }
.ui-p-contact select, .ui-p-contact input:not([type=checkbox]):not([type=radio]) { border-color: var(--ui-line-strong); border-radius: var(--ui-r-sm); min-height: var(--ui-ctl); }
.ui-p-contact .ui-c-rail .ui-empty-sm { padding: var(--ui-s3) var(--ui-s2); gap: 4px; } /* the rail is 340px: a quieter empty state */
.ui-p-contact .ui-c-rail .ui-empty-sm .ui-empty-ico { width: 28px; height: 28px; }
.ui-p-contact .th-sys { color: var(--ui-ink-2); } /* call/system lines in Conversations: muted on chip-bg was 4.23:1 (app.css; Inbox gets it in its batch) */
.ui-p-contact .hh-section { container-type: inline-size; }
.ui-p-contact .hh-table td.hh-name { min-width: 9em; } /* the name never squeezes to one word a line */
.ui-p-contact .hh-table td.hh-actcell { white-space: normal; } /* action buttons wrap instead of pushing the name */
.ui-p-contact .hh-table td.hh-actcell .btn { white-space: nowrap; margin: 2px 0; } /* whole buttons wrap, never their labels */
.ui-p-contact .hh-table .hh-acts { flex-wrap: wrap; justify-content: flex-end; }
/* The household table needs ~740px. Where the main column is narrower (below ~1440 wide), each person becomes a
   small card in a grid, the same labelled cells the phone uses, so nothing is dropped and nothing escapes the card. */
@container (max-width: 740px) {
  .ui-p-contact table.ct.hh-table thead { display: none; }
  .ui-p-contact table.ct.hh-table, .ui-p-contact table.ct.hh-table tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--ui-s3); }
  .ui-p-contact table.ct.hh-table { display: block; }
  .ui-p-contact table.ct.hh-table tr { display: block; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); padding: var(--ui-s2) var(--ui-s3); }
  .ui-p-contact table.ct.hh-table td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 3px 0; align-items: baseline; background: none; }
  .ui-p-contact table.ct.hh-table td::before { content: attr(data-label); color: var(--ui-muted); font-size: var(--ui-fs-xs); flex: 0 0 auto; }
  .ui-p-contact table.ct.hh-table td:not([data-label])::before { content: none; }
  .ui-p-contact table.ct.hh-table td.hh-name { font-weight: var(--ui-fw-bold); justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .ui-p-contact table.ct.hh-table td.hh-actcell { justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding-top: var(--ui-s2); white-space: normal; }
  .ui-p-contact table.ct.hh-table tr.hh-self { background: var(--ui-hover); }
}
.ui-p-contact .hh-table tr.hh-self .hh-role, .ui-p-contact .hh-table tr.hh-self .ad-muted, .ui-p-contact .hh-table tr.hh-self td::before { color: var(--ui-ink-2); } /* muted text on the highlighted row stays ≥ 4.5:1 */
@media (max-width: 1279px) { .ui-p-contact .ui-c-grid { grid-template-columns: minmax(0, 1fr) 300px; } .ui-p-contact .ui-c-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) { .ui-p-contact .ui-c-grid { grid-template-columns: minmax(0, 1fr); } .ui-p-contact .ui-c-acts { width: 100%; } }
@media (max-width: 820px) {
  .ui-p-contact.cpage { padding: var(--ui-s4); }
  .ui-p-contact .btn, .ui-p-contact .btn.small, .ui-p-contact .tabs2 button, .ui-p-contact select, .ui-p-contact input:not([type=checkbox]):not([type=radio]) { min-height: var(--ui-tap); }
  .ui-p-contact .name-edit { width: var(--ui-tap); height: var(--ui-tap); }
  .ui-p-contact a.chip, .ui-p-contact .linkbtn, .ui-p-contact .fieldrow a, .ui-p-contact .hh-link { display: inline-flex; align-items: center; min-height: var(--ui-tap); }
  .ui-p-contact .tabs2 { overflow-x: auto; scrollbar-width: none; }
  .ui-p-contact .tabs2 { flex-wrap: nowrap; border-bottom: 1px solid var(--ui-line); gap: var(--ui-s4); }
  .ui-p-contact .tabs2 button { flex: none; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 0 2px; }
  .ui-p-contact .tabs2 button.active { background: none; color: var(--ui-ink); border-bottom-color: var(--ui-accent); } /* underline tabs that scroll sideways, as on desktop (app.css makes phone tabs pills) */
  .ui-p-contact .ui-c-acts .btn { flex: 1 1 auto; justify-content: center; }
  .ui-p-contact .outcome-bar .btn { flex: 1 1 auto; justify-content: center; }
  .ui-p-contact select, .ui-p-contact input:not([type=checkbox]):not([type=radio]) { font-size: 16px; }
}

/* ───────────── Page: Board (batch 2; proposal board mock) — .ui-p-board restyles board.js's markup in place ───────────── */
.ui-p-board .tabs { padding: var(--ui-s5) var(--ui-s6) 0; gap: var(--ui-s2); align-items: center; }
.ui-p-board .tab { border: 1px solid var(--ui-line); border-radius: var(--ui-r-pill); background: var(--ui-surface); color: var(--ui-ink-2); padding: 0 var(--ui-s4);
  min-height: var(--ui-ctl); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-med); box-shadow: none; }
.ui-p-board .tab:hover { border-color: var(--ui-line-strong); }
.ui-p-board .tab.active { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-bg); box-shadow: none; }
.ui-p-board .tabs select, .ui-p-board .board-filter { min-height: var(--ui-ctl); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-sm); background: var(--ui-surface); color: var(--ui-ink); font-size: var(--ui-fs-sm); }
.ui-p-board .tabs label { color: var(--ui-ink-2); }
.ui-p-board .tabs .count { color: var(--ui-muted); font-size: var(--ui-fs-sm); white-space: nowrap; }
.ui-p-board .tabs button.refresh { min-height: var(--ui-ctl); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-surface); color: var(--ui-ink); font-weight: var(--ui-fw-med); }
.ui-p-board .board { padding: var(--ui-s4) var(--ui-s6) var(--ui-s6); gap: var(--ui-s4); }
.ui-p-board .col { background: var(--ui-sunken); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); }
.ui-p-board .col h2 { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); color: var(--ui-muted); padding: var(--ui-s3) var(--ui-s4) var(--ui-s2); align-items: center; }
.ui-p-board .col h2 .n { background: var(--ui-surface); color: var(--ui-ink-2); border: 1px solid var(--ui-line); }
.ui-p-board .col.drop { outline-color: var(--ui-accent); }
.ui-p-board .cards { padding: 0 var(--ui-s2) var(--ui-s3); gap: var(--ui-s2); }
.ui-p-board .card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s3); box-shadow: var(--ui-e1); }
.ui-p-board .card:hover { border-color: var(--ui-line-strong); }
.ui-p-board .card .name { display: flex; align-items: center; gap: var(--ui-s2); font-weight: var(--ui-fw-bold); font-size: var(--ui-fs-md); margin-bottom: 6px; }
.ui-b-av { flex: 0 0 26px; width: 26px; height: 26px; border-radius: var(--ui-r-pill); background: var(--chip-bg); color: var(--ui-ink-2); font-size: 11px; font-weight: var(--ui-fw-bold);
  display: inline-flex; align-items: center; justify-content: center; }
.ui-p-board .card .row { color: var(--ui-muted); font-size: var(--ui-fs-xs); gap: 6px; }
.ui-p-board .card .row a { color: var(--ui-ink-2); }
.ui-p-board .card .badge { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.ui-p-board .card .tag { background: var(--chip-bg); color: var(--ui-ink-2); }
/* Chips: shape only. Colour always comes from app.css's chip classes (red, green, amber, yellow, owner, unowned,
   the DNC "do not call"), so no variant can be greyed out by this page's restyle (Critic b2 M3 and #6). */
.ui-p-board .card .tag, .ui-p-board .card .chip { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); padding: 2px 8px; border-radius: var(--ui-r-pill); border: 0; }
/* A plain chip (no colour class) gets the readable neutral (app.css's is 4.23:1); green is lifted to 4.5:1. */
.ui-p-board .card .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned) { background: var(--chip-bg); color: var(--ui-ink-2); }
.ui-p-board .card .chip.green { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-board .card .actions-row { border-top-color: var(--ui-line); gap: 6px; }
.ui-p-board .card .actions-row .btn.small { min-height: var(--ui-ctl-sm); border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-med); }
.ui-p-board .btn.danger { color: var(--ui-accent-text); } /* cards and the Insights panel: 4.5:1 in both themes (the red text was 4.11:1 in dark) */
.ui-p-board .panelbox .btn.small { min-height: var(--ui-ctl-sm); border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-med); }
.ui-p-board .cards .ui-empty-sm { border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-r-md); padding: var(--ui-s4) var(--ui-s3); }
.ui-p-board .cards .ui-empty-sm .ui-empty-ico { width: 28px; height: 28px; }
.ui-b-state { padding: var(--ui-s6); width: 100%; }
.ui-b-state > .ui-empty, .ui-b-state > .ui-empty-sm { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); }
.ui-p-board .all-group > h3 { margin: var(--ui-s4) var(--ui-s6) var(--ui-s1); font-size: var(--ui-fs-xs); letter-spacing: var(--ui-track-label); color: var(--ui-muted); }
.ui-p-board .panelbox { margin: var(--ui-s3) var(--ui-s6) 0; border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-surface); }
@media (max-width: 820px) {
  .ui-p-board .tabs { padding: var(--ui-s3) var(--ui-s4) 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ui-p-board .tab, .ui-p-board .tabs select, .ui-p-board .board-filter, .ui-p-board .tabs button.refresh { min-height: var(--ui-tap); flex: none; white-space: nowrap; }
  .ui-p-board .tabs label { flex: none; min-height: var(--ui-tap); white-space: nowrap; }
  .ui-p-board .tabs label input { width: 22px; height: 22px; }
  .ui-p-board .board { padding: var(--ui-s3) var(--ui-s4) var(--ui-s5); }
  .ui-p-board .card .actions-row .btn.small, .ui-p-board .card .row a, .ui-p-board .panelbox .btn.small, .ui-p-board .panelbox a { min-height: var(--ui-tap); }
  .ui-p-board .panelbox a { display: inline-flex; align-items: center; }
  .ui-p-board .card .row a { display: inline-flex; align-items: center; }
  .ui-b-state { padding: var(--ui-s4); }
}

/* ───────────── Pages: Quotes and Renewal (batch 2; proposal mocks) — .ui-p-quotes / .ui-p-renewal ───────────── */
.ui-p-quotes.cpage, .ui-p-renewal.cpage { padding: var(--ui-s6); }
.ui-p-quotes .head, .ui-p-renewal .head { gap: var(--ui-s2) var(--ui-s3); margin-bottom: var(--ui-s4); }
.ui-p-quotes .head h2, .ui-p-renewal .head h2 { font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); letter-spacing: -.01em; }
.ui-p-quotes .head .note { color: var(--ui-muted); font-size: var(--ui-fs-sm); flex-basis: 100%; }
.ui-p-quotes .qsearch-wrap { border-color: var(--ui-line-strong); border-radius: var(--ui-r-sm); background: var(--ui-surface); padding: 0 var(--ui-s3); min-height: var(--ui-ctl); }
.ui-p-quotes .qsearch-wrap:focus-within { border-color: var(--ui-focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ui-focus) 22%, transparent); }
.ui-p-quotes .qsearch-wrap svg.icon, .ui-p-quotes .q-plan-empty, .ui-p-quotes .note { color: var(--ui-muted); }
.ui-q-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); }
.ui-p-quotes table.ct.ui-q-table { background: var(--ui-surface); border-color: var(--ui-line); border-radius: var(--ui-r-md); }
.ui-p-quotes table.ct.ui-q-table th { background: var(--ui-sunken); color: var(--ui-muted); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); padding: var(--ui-s3) var(--ui-s4); }
.ui-p-quotes table.ct.ui-q-table td { padding: var(--ui-s3) var(--ui-s4); border-bottom-color: var(--ui-line); }
@media (min-width: 821px) {
  /* the action cell was display:flex, so it left the table's row box and its rule sat lower than the row's (main had it too) */
  .ui-p-quotes table.ct.ui-q-table td.q-actions { display: table-cell; text-align: right; white-space: nowrap; }
  .ui-p-quotes table.ct.ui-q-table td.q-actions .btn { display: inline-flex; margin-left: var(--ui-s2); }
  .ui-p-quotes .qsearch-wrap input[type=search] { width: 320px; } /* the whole placeholder shows */
}
/* Chips: shape only; colour stays with app.css's chip classes (warnings like the red DNC chip included). */
.ui-p-quotes .chip, .ui-p-renewal .chip { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); padding: 2px 8px; border-radius: var(--ui-r-pill); }
.ui-p-quotes .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned), .ui-p-renewal .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned) { background: var(--chip-bg); color: var(--ui-ink-2); }
.ui-p-quotes .chip.green, .ui-p-renewal .chip.green { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-quotes .btn.small, .ui-p-renewal .btn.small { min-height: var(--ui-ctl-sm); border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-med); }
.ui-p-renewal .panelbox { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s3) var(--ui-s4); background: var(--ui-surface); }
.ui-p-renewal .panelbox > h3 { margin: calc(-1 * var(--ui-s3)) calc(-1 * var(--ui-s4)) var(--ui-s2); padding: 0 var(--ui-s4); min-height: 48px; display: flex; align-items: center; gap: var(--ui-s2);
  border-bottom: 1px solid var(--ui-line); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); color: var(--ui-muted); }
.ui-p-renewal .panelbox > h3 .n { background: var(--chip-bg); color: var(--ui-ink-2); padding: 1px 9px; border-radius: var(--ui-r-pill); letter-spacing: 0; }
.ui-p-renewal .rb-card { border-radius: var(--ui-r-md); border-color: var(--ui-line); background: var(--ui-surface); }
.ui-p-renewal .rb-card .rb-sub, .ui-p-renewal .note { color: var(--ui-muted); }
.ui-p-renewal .trow { min-height: 52px; border-bottom-color: var(--ui-line); }
.ui-p-renewal .trow a.name { font-weight: var(--ui-fw-bold); }
@media (max-width: 820px) {
  .ui-p-quotes.cpage, .ui-p-renewal.cpage { padding: var(--ui-s4); }
  .ui-p-quotes .qsearch-wrap input[type=search] { min-height: var(--ui-tap); font-size: 16px; width: 100%; }
  .ui-p-quotes .btn.small, .ui-p-renewal .btn.small, .ui-p-renewal a.rb-card, .ui-p-renewal .trow a { min-height: var(--ui-tap); }
  .ui-p-renewal .trow a { display: inline-flex; align-items: center; }
}

/* ═══ SLOT A START — Campaigns, Broadcasts, Templates. Only group A edits between these markers. ═══ */
/* ───────────── Pages: Campaigns (list + one campaign), Broadcasts, Templates (final card, Kuba 3238; mocks
   shots/after/{campaigns,broadcasts,templates}-1440-light.png) — .ui-p-campaigns / .ui-p-broadcasts / .ui-p-templates.
   Same DOM, ids and handlers. Chips: shape only; colour only on plain chips (Critic b2: the red DNC chip must stay red).
   Modals carry .ui-m-camp / .ui-m-bc / .ui-m-tp on their .modal-bg (the backdrop sits next to the page root). ───────────── */
.ui-p-campaigns.cpage, .ui-p-broadcasts.cpage, .ui-p-templates.cpage { padding: var(--ui-s6); }
.ui-p-campaigns .head, .ui-p-broadcasts .head, .ui-p-templates .head { gap: var(--ui-s2) var(--ui-s3); margin-bottom: var(--ui-s4); }
.ui-p-campaigns .head h2, .ui-p-broadcasts .head h2, .ui-p-templates .head h2 { font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); letter-spacing: -.01em; color: var(--ui-ink); }
.ui-p-campaigns .note, .ui-p-broadcasts .note, .ui-p-templates .note { color: var(--ui-muted); }
.ui-p-campaigns .chip, .ui-p-broadcasts .chip, .ui-p-templates .chip,
.ui-m-camp .chip, .ui-m-bc .chip, .ui-m-tp .chip { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); padding: 2px 8px; border-radius: var(--ui-r-pill); }
.ui-p-campaigns .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned),
.ui-p-broadcasts .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned),
.ui-p-templates .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned),
.ui-m-camp .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned),
.ui-m-bc .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned),
.ui-m-tp .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned) { background: var(--chip-bg); color: var(--ui-ink-2); }
/* green is lifted to the readable ui token on purpose (app.css green chip is 4.49:1 light); the other colours stay app.css's */
.ui-p-campaigns .chip.green, .ui-p-broadcasts .chip.green, .ui-p-templates .chip.green,
.ui-m-camp .chip.green, .ui-m-bc .chip.green, .ui-m-tp .chip.green { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-campaigns .btn.small, .ui-p-broadcasts .btn.small, .ui-p-templates .btn.small { min-height: var(--ui-ctl-sm); border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-med); }
.ui-p-broadcasts .btn.danger, .ui-p-templates .btn.danger { color: var(--ui-accent-text); } /* Critic b2: --red text was 4.11:1 in dark */
/* Tables: the batch-2 table look (sunken label row, roomy cells) */
.ui-p-campaigns .panelbox, .ui-p-broadcasts .panelbox, .ui-p-templates .panelbox { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-surface); }
.ui-p-broadcasts .panelbox:has(> table.ct), .ui-p-templates .panelbox:has(> table.ct) { padding: 0; overflow: hidden; }
.ui-p-campaigns table.ct, .ui-p-broadcasts table.ct, .ui-p-templates table.ct { background: var(--ui-surface); border-color: var(--ui-line); border-radius: var(--ui-r-md); }
.ui-p-broadcasts .panelbox > table.ct, .ui-p-templates .panelbox > table.ct { border: 0; border-radius: 0; margin: 0; }
.ui-p-campaigns table.ct th, .ui-p-broadcasts table.ct th, .ui-p-templates table.ct th { background: var(--ui-sunken); color: var(--ui-muted); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); padding: var(--ui-s3) var(--ui-s4); }
.ui-p-campaigns table.ct td, .ui-p-broadcasts table.ct td, .ui-p-templates table.ct td { padding: var(--ui-s3) var(--ui-s4); border-bottom-color: var(--ui-line); }
.ui-p-broadcasts tr.ui-bc-state td, .ui-p-templates tr.ui-tp-state td { padding: 0; }
.ui-p-broadcasts tr.ui-bc-state:hover td, .ui-p-templates tr.ui-tp-state:hover td { background: none; }

/* Campaigns list: cards with a booked bar and tone pills (booked green, to check / call back amber, the rest grey) */
.ui-p-campaigns .camp-lede { color: var(--ui-muted); font-size: var(--ui-fs-sm); margin: calc(-1 * var(--ui-s2)) 0 var(--ui-s4); }
.ui-p-campaigns .camp-cards { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--ui-s3); }
.ui-p-campaigns .camp-card { background: var(--ui-surface); border-color: var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s4) var(--ui-s5); gap: var(--ui-s3); }
.ui-p-campaigns .camp-card:hover { border-color: var(--ui-line-strong); box-shadow: var(--ui-e1); }
.ui-p-campaigns .camp-card .cc-top strong { font-size: var(--ui-fs-md); color: var(--ui-ink); }
.ui-p-campaigns .cc-sub, .ui-p-campaigns .camp-sub { color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.ui-p-campaigns .camp-prog { height: 10px; }
.ui-p-campaigns .camp-counts { gap: var(--ui-s2); }
.ui-p-campaigns .camp-counts > span { background: var(--chip-bg); color: var(--ui-ink-2); border-radius: var(--ui-r-pill); padding: 2px 10px; font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); }
.ui-p-campaigns .camp-counts > span.cn-ok { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-campaigns .camp-counts > span.cn-warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-p-campaigns .camp-counts b { color: inherit; font-weight: var(--ui-fw-bold); }
/* One campaign: tools, summary panel, filter chips, member table */
.ui-p-campaign .backlink { color: var(--ui-muted); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-med); }
.ui-p-campaign .backlink:hover { color: var(--ui-ink); }
.ui-p-campaign .camp-tools { gap: var(--ui-s2); margin-bottom: var(--ui-s4); }
.ui-p-campaign .camp-tools a.btn { color: var(--ui-ink); }
.ui-p-campaign .camp-ghost { color: var(--ui-ink-2); }
.ui-p-campaign .camp-summary { padding: var(--ui-s4) var(--ui-s5); gap: var(--ui-s3); margin-bottom: var(--ui-s4); }
.ui-p-campaign .camp-owners { border-bottom-color: var(--ui-line); padding-bottom: var(--ui-s3); }
.ui-p-campaign .camp-owners-k { color: var(--ui-muted); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); }
.ui-p-campaign .fchip { background: var(--ui-surface); border-color: var(--ui-line-strong); color: var(--ui-ink); border-radius: var(--ui-r-pill); font-weight: var(--ui-fw-med); min-height: var(--ui-ctl-sm); }
.ui-p-campaign .fchip:hover { border-color: var(--ui-muted); }
.ui-p-campaign .fchip .fn { color: var(--ui-muted); }
.ui-p-campaign .fchip.active { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-surface); }
.ui-p-campaign .fchip.active .fn, .ui-p-campaign .fchip.active .ag-badge { color: var(--ui-surface); }
.ui-p-campaign .fchip.t-green:not(.active) .fn { color: var(--ui-ok); }
.ui-p-campaign .fchip.t-amber:not(.active) .fn { color: var(--ui-warn); }
.ui-p-campaign .camp-reach { color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.ui-p-campaign .camp-reach b { color: var(--ui-ink); }
.ui-p-campaign .camp-bar { gap: var(--ui-s2); margin-bottom: var(--ui-s3); }
.ui-p-campaign .qsearch { border-color: var(--ui-line-strong); border-radius: var(--ui-r-sm); background: var(--ui-surface); min-height: var(--ui-ctl); padding: 0 var(--ui-s3); color: var(--ui-muted); }
.ui-p-campaign .qsearch:focus-within { border-color: var(--ui-focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ui-focus) 22%, transparent); }
.ui-p-campaign .qsearch input { width: 300px; }
.ui-p-campaign .camp-table .cm-name a { color: var(--ui-ink); font-weight: var(--ui-fw-bold); }
.ui-p-campaign .camp-table .ad-muted, .ui-p-campaign .camp-table .cs-reach { color: var(--ui-muted); }

/* Broadcasts: the pacing / gates note becomes a full-width banner under the title (same words, always visible) */
.ui-p-broadcasts .head .btn:not(.primary) { order: 1; margin-left: auto; } /* Refresh, then New broadcast, at the right */
.ui-p-broadcasts .head .btn.primary { order: 2; }
.ui-p-broadcasts .head .note { order: 3; flex-basis: 100%; color: var(--ui-ink-2); font-size: var(--ui-fs-sm); background: var(--ui-surface); border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-info); border-radius: var(--ui-r-md); padding: var(--ui-s3) var(--ui-s4); margin-top: var(--ui-s2); }
.ui-p-broadcasts .bc-muted { color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.ui-p-broadcasts td.bc-acts { text-align: right; }

/* Templates: the fail-closed line under the title; rows open the editor */
.ui-p-templates .head .btn.primary { order: 2; margin-left: auto; }
.ui-p-templates .head .note { order: 3; flex-basis: 100%; font-size: var(--ui-fs-sm); }
.ui-p-template-ed .head .note { order: 0; flex-basis: auto; }
.ui-p-template-ed .head .btn { order: 0; margin-left: 0; }
.ui-p-templates .tp-muted { color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.ui-p-templates table.ct tr.row { cursor: pointer; }
.ui-p-templates table.ct tr.row:hover td { background: var(--ui-hover); }
.ui-p-template-ed .panelbox { padding: var(--ui-s4) var(--ui-s5); }
.ui-p-template-ed .panelbox > h3 { font-size: var(--ui-fs-md); font-weight: var(--ui-fw-bold); color: var(--ui-ink); }
.ui-p-template-ed .form-hint { color: var(--ui-muted); }

/* Modals of these pages */
.ui-m-camp .modal, .ui-m-bc .modal, .ui-m-tp .modal { background: var(--ui-surface); border-radius: var(--ui-r-lg); padding: var(--ui-s5) var(--ui-s6); box-shadow: var(--ui-e3); }
.ui-m-camp .modal h3, .ui-m-bc .modal h3, .ui-m-tp .modal h3 { font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-bold); color: var(--ui-ink); }
.ui-m-camp .note, .ui-m-bc .note, .ui-m-tp .note { color: var(--ui-muted); }
.ui-m-camp .btn.small, .ui-m-bc .btn.small, .ui-m-tp .btn.small { min-height: var(--ui-ctl-sm); border-radius: var(--ui-r-sm); }
.ui-m-bc .note.bc-warn { color: var(--ui-accent-text); } /* the "will be blocked" consent warning: red, readable in dark (was --red, 4.11:1) */
.ui-p-templates > .panelbox + .btn { margin-top: var(--ui-s3); }

@media (max-width: 820px) {
  .ui-p-campaigns.cpage, .ui-p-broadcasts.cpage, .ui-p-templates.cpage { padding: var(--ui-s4); }
  .ui-p-campaigns .camp-cards { grid-template-columns: 1fr; }
  /* 48px phone targets (house rule) */
  .ui-p-campaigns .btn, .ui-p-broadcasts .btn, .ui-p-templates .btn, .ui-p-campaigns .btn.small, .ui-p-broadcasts .btn.small, .ui-p-templates .btn.small,
  .ui-p-campaign .fchip, .ui-p-campaign .backlink,
  .ui-m-camp .btn, .ui-m-bc .btn, .ui-m-tp .btn, .ui-m-camp .btn.small, .ui-m-bc .btn.small, .ui-m-tp .btn.small { min-height: var(--ui-tap); }
  .ui-p-campaign .camp-table td a { display: inline-flex; align-items: center; min-height: var(--ui-tap); }
  .ui-p-campaign .camp-table td.cm-name { min-height: var(--ui-tap); }
  .ui-p-campaign .backlink { display: inline-flex; align-items: center; }
  .ui-p-campaign .camp-tools .btn { flex: 1 1 auto; justify-content: center; }
  .ui-p-campaign .qsearch input { width: 100%; min-height: var(--ui-tap); font-size: 16px; }
  .ui-m-camp input:not([type=checkbox]):not([type=radio]), .ui-m-camp select, .ui-m-bc input:not([type=checkbox]):not([type=radio]), .ui-m-bc select,
  .ui-m-tp input:not([type=checkbox]):not([type=radio]), .ui-m-tp select,
  .ui-p-template-ed input:not([type=checkbox]):not([type=radio]), .ui-p-template-ed select { min-height: var(--ui-tap); font-size: 16px; }
  .ui-p-broadcasts .head .btn:not(.primary) { margin-left: 0; }
  /* a radio / checkbox's label is its tap area: 48px tall */
  .ui-m-camp .bk-opt, .ui-m-camp label.chk, .ui-m-bc .editform > label { min-height: var(--ui-tap); display: flex; align-items: center; }
  .ui-p-templates .head .btn.primary { margin-left: 0; }
  /* Card rows: name on top, the rest label / value */
  .ui-p-broadcasts table.ct.cardable tr, .ui-p-templates table.ct.cardable tr { padding: var(--ui-s3) var(--ui-s4); }
  .ui-p-broadcasts table.ct.cardable td, .ui-p-templates table.ct.cardable td { padding: 3px 0; align-items: center; }
  .ui-p-templates table.ct.cardable td.tp-name { font-size: var(--ui-fs-md); padding-bottom: var(--ui-s1); }
  .ui-p-templates table.ct.cardable td.tp-key { word-break: break-all; text-align: right; }
  .ui-p-broadcasts table.ct.cardable td.bc-acts:empty { display: none; }
  .ui-p-broadcasts tr.ui-bc-state td, .ui-p-templates tr.ui-tp-state td { display: block; padding: 0; }
}
/* ═══ SLOT A END ═══ */


/* ═══ SLOT B START — Workflows (list + header), Reviews, Inbox touch-up. Only group B edits between these markers. ═══ */
/* Workflows LIST (.ui-p-workflows on the list's .wfx) and the workflow page HEADER (.ui-p-wfhead on #wf-head) only.
   The canvas body (builder, settings, enrollments, publish) keeps its own approved design in workflows.css.
   workflows.css loads after this file, so these rules chain .wfx / repeat the class to outrank its equal selectors. */
.ui-p-workflows.wfx .listwrap { padding: var(--ui-s6); gap: var(--ui-s5); }
@media (min-width: 761px) { .ui-p-workflows.wfx .listwrap { grid-template-columns: 220px minmax(0, 1fr); } } /* the list column never pushes the page wider than the window */
.ui-p-workflows.wfx .folders a { font-size: var(--ui-fs-sm); border-radius: var(--ui-r-sm); min-height: 36px; }
.ui-p-workflows.wfx .folders a:not(.on):hover { background: var(--ui-hover); }
.ui-p-workflows.wfx .folders a .n { color: var(--ui-muted); font-variant-numeric: tabular-nums; } /* was 4.23:1 */
.ui-p-workflows.wfx .folders a.on .n { color: inherit; }
.ui-p-workflows.wfx .folders .grp { color: var(--ui-muted); font-size: var(--ui-fs-xs); letter-spacing: var(--ui-track-label); } /* was 4.48:1 */
.ui-p-workflows.wfx main h2 { font-size: var(--ui-fs-xl); letter-spacing: -.01em; }
.ui-p-workflows.wfx .btn { border-radius: var(--ui-r-sm); min-height: var(--ui-ctl); font-weight: var(--ui-fw-med); }
.ui-p-workflows.wfx .input { min-height: var(--ui-ctl); border-radius: var(--ui-r-sm); }
.ui-p-workflows.wfx main > .row .input { flex: 1 1 160px; min-width: 160px; } /* inline max-width: 260px caps the grow */
.ui-p-workflows.wfx .wfname { min-width: 150px; } /* the search stays on the heading row beside the hold chip */
.ui-p-workflows.wfx .muted, .ui-p-workflows.wfx .note { color: var(--ui-muted); } /* was 4.48:1 on the canvas */
.ui-p-workflows.wfx .panelbox { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-surface); }
.ui-p-workflows.wfx table.ct { width: 100%; border-collapse: collapse; }
.ui-p-workflows.wfx table.ct th { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); text-transform: uppercase;
  color: var(--ui-muted); background: var(--ui-surface); padding: var(--ui-s3); border-bottom: 1px solid var(--ui-line); }
.ui-p-workflows.wfx table.ct td { padding: var(--ui-s3); border-bottom: 1px solid var(--ui-line); font-size: var(--ui-fs-sm); font-variant-numeric: tabular-nums; vertical-align: middle; }
.ui-p-workflows.wfx table.ct tbody tr:last-child td { border-bottom: 0; }
.ui-p-workflows.wfx table.ct tr.click:hover td { background: var(--ui-hover); }
.ui-p-workflows.wfx table.ct tr.click:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
/* The list table is ~870px; at 1280 the card was 752px and overflow:hidden clipped the last column (lead review of
   the integrated branch). Tighter cells below 1440, and the card scrolls sideways rather than ever hiding a column. */
.ui-p-workflows.wfx .panelbox:has(> table.ct) { overflow-x: auto; }
@media (max-width: 1439px) and (min-width: 761px) { .ui-p-workflows.wfx table.ct th, .ui-p-workflows.wfx table.ct td { padding-left: var(--ui-s2); padding-right: var(--ui-s2); }
  /* the long status chip wraps to two lines so the table fits at 1280 (Critic final Minor 2) */
  .ui-p-workflows.wfx table.ct td .chip { white-space: normal; display: inline-block; min-width: 8.5em; line-height: 1.3; border-radius: var(--ui-r-sm); padding: 3px 8px; } }
.ui-p-workflows.wfx .wfname { font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-bold); }
.ui-p-workflows.wfx .wfname small { color: var(--ui-muted); font-size: var(--ui-fs-xs); margin-top: 2px; }
/* Chips: shape only, so every coloured chip (green On, blue Shadow, amber Draft changes / first-10 holds) keeps its colour.
   Only a plain chip (v3, Off, Never published: muted on chip-bg, 4.23:1) is recoloured, and the green On reads at 4.5:1+. */
.ui-p-workflows.wfx .chip, .ui-p-wfhead.ui-p-wfhead .chip { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); padding: 2px 8px; border-radius: var(--ui-r-pill); line-height: 18px; white-space: nowrap; }
.ui-p-workflows.wfx .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned):not(.blue):not(.warn),
.ui-p-wfhead.ui-p-wfhead .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned):not(.blue):not(.warn) { background: var(--chip-bg); color: var(--ui-ink-2); }
.ui-p-workflows.wfx .chip.green, .ui-p-wfhead.ui-p-wfhead .chip.green { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-workflows.wfx .ui-wf-state { margin: var(--ui-s6); }
.ui-p-workflows.wfx .codecard { border-radius: var(--ui-r-md); }
@media (max-width: 820px) {
  .ui-p-workflows.wfx .listwrap { padding: var(--ui-s4); }
  .ui-p-workflows.wfx .btn, .ui-p-workflows.wfx .input, .ui-p-workflows.wfx .folders a { min-height: var(--ui-tap); }
  .ui-p-workflows.wfx .input { font-size: 16px; } /* no iOS zoom on focus */
  .ui-p-workflows.wfx main > .row .input { flex: 1 1 100%; }
  .ui-p-workflows.wfx p a[data-f] { display: inline-flex; align-items: center; min-height: var(--ui-tap); } /* "Running in code" link was 16px tall */
  .ui-p-workflows.wfx a.chip { display: inline-flex; align-items: center; min-height: var(--ui-tap); }
  .ui-p-workflows.wfx .ui-wf-state { margin: var(--ui-s4); }
}
@media (max-width: 760px) { .ui-p-workflows.wfx table.ct td { padding: 4px var(--ui-s3); } .ui-p-workflows.wfx table.ct td[data-l]::before { color: var(--ui-muted); } }
/* Header */
.ui-p-wfhead.ui-p-wfhead { gap: var(--ui-s3); padding: var(--ui-s3) var(--ui-s6); background: var(--ui-surface); border-bottom-color: var(--ui-line); }
.ui-p-wfhead.ui-p-wfhead h2 { font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); letter-spacing: -.01em; }
.ui-p-wfhead.ui-p-wfhead .crumb { color: var(--ui-muted); font-size: var(--ui-fs-xs); }
.ui-p-wfhead.ui-p-wfhead .crumb a { color: var(--ui-ink-2); }
.ui-p-wfhead.ui-p-wfhead .muted { color: var(--ui-muted); }
.ui-p-wfhead.ui-p-wfhead .btn { border-radius: var(--ui-r-sm); min-height: 34px; font-weight: var(--ui-fw-med); }
.ui-p-wfhead.ui-p-wfhead .btn.danger { color: var(--ui-accent-text); }
@media (max-width: 820px) {
  .ui-p-wfhead.ui-p-wfhead { padding: var(--ui-s2) var(--ui-s4); }
  .ui-p-wfhead.ui-p-wfhead .btn, .ui-p-wfhead.ui-p-wfhead .toggle { min-height: var(--ui-tap); }
}

/* Reviews (.ui-p-reviews on the page's .an-wrap). Every approve / edit / skip control and its wording is unchanged. */
.ui-p-reviews.an-wrap { padding: var(--ui-s6); max-width: 960px; margin: 0; }
.ui-p-reviews .an-head { flex-wrap: wrap; align-items: center; row-gap: 2px; margin-bottom: var(--ui-s4); }
.ui-p-reviews .an-head h2 { font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); letter-spacing: -.01em; }
.ui-p-reviews .an-head .note { order: 3; flex-basis: 100%; color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.ui-p-reviews .btn { border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-med); }
.ui-p-reviews .btn.small { min-height: 34px; }
.ui-p-reviews .note { color: var(--ui-muted); }
.ui-p-reviews .rv-state { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); }
.ui-p-reviews .rv-list { gap: var(--ui-s3); }
.ui-p-reviews .rv-card { border-color: var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s4) var(--ui-s5); }
.ui-p-reviews .rv-card-head { gap: var(--ui-s2); }
.ui-p-reviews .rv-card-head strong { font-weight: var(--ui-fw-bold); }
.ui-p-reviews .rv-card-body { font-size: var(--ui-fs-md); }
.ui-p-reviews .rv-stars { color: var(--star-ink); } /* the app's readable star gold (#e8a33d was 2.2:1 on the card); named by aria-label */
.ui-p-reviews .rv-stars-off { color: var(--ui-line-strong); }
.ui-p-reviews .rv-reply { border-top-color: var(--ui-line); padding-top: var(--ui-s3); }
.ui-p-reviews .rv-pill { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); padding: 2px 8px; line-height: 18px; }
.ui-p-reviews .rv-pill:not(.rv-pill-ok):not(.rv-pill-warn) { color: var(--ui-ink-2); } /* plain "Skipped" pill: muted on chip-bg failed */
.ui-p-reviews .rv-pill-ok { color: var(--ui-ok); }
.ui-p-reviews .rv-reply-posted { background: var(--ui-sunken); border-radius: var(--ui-r-sm); }
.ui-p-reviews .rv-reply-box { border-color: var(--ui-line-strong); border-radius: var(--ui-r-sm); padding: var(--ui-s2) var(--ui-s3); }
.ui-p-reviews .rv-reply-box:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; }
@media (max-width: 820px) {
  .ui-p-reviews.an-wrap { padding: var(--ui-s4); }
  .ui-p-reviews .btn, .ui-p-reviews .btn.small { min-height: var(--ui-tap); }
  .ui-p-reviews .rv-reply-box { font-size: 16px; }
  .ui-p-reviews .rv-card { padding: var(--ui-s3) var(--ui-s4); }
}

/* Inbox touch-up only (.ui-p-inbox on #inbox-wrap): the approved 2026-10-20 redesign stays. Call/system lines in a
   thread were muted on chip-bg, 4.23:1; the placeholder beside the list was 4.48:1 on the canvas. */
.ui-p-inbox .th-sys { color: var(--ui-ink-2); }
.ui-p-inbox .clist > .note { color: var(--ui-muted); }

/* ═══ SLOT B END ═══ */


/* ═══ SLOT C START — Analytics, Commissions, Settings, Integrity, Account. Only group C edits between these markers. ═══ */
/* Page roots: .ui-p-analytics (analytics.js), .ui-p-commissions (commissions.js), .ui-p-settings + .ui-p-account (settings.js),
   .ui-p-integrity (integrity-page.js). Mocks: shots/after/{analytics,commissions,settings,integrity,account}-1440-light.png.
   Same DOM, ids and handlers. Chips: shape only, colour only on plain chips (Critic b2 M3). */

/* Shared: page head, cards with a header band, tables, notes */
.ui-p-analytics.an-wrap { padding: var(--ui-s6); }
.ui-p-commissions.cpage, .ui-p-settings.cpage, .ui-p-account.cpage, .ui-p-integrity.cpage { padding: var(--ui-s6); }
.ui-p-commissions .head h2, .ui-p-settings .head h2, .ui-p-account .head h2, .ui-p-analytics .an-head h2, .ui-p-integrity .page-head h1 {
  font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); letter-spacing: -.01em; margin: 0; line-height: var(--ui-lh-tight); }
.ui-p-analytics .an-head { align-items: center; gap: var(--ui-s3); margin-bottom: var(--ui-s4); flex-wrap: wrap; }
.ui-p-analytics .note, .ui-p-commissions .note, .ui-p-settings .note, .ui-p-account .note, .ui-p-integrity .note { color: var(--ui-muted); }
.ui-p-analytics .panelbox, .ui-p-commissions .panelbox, .ui-p-settings .panelbox, .ui-p-account .panelbox, .ui-p-integrity section.card {
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s3) var(--ui-s4) var(--ui-s4); background: var(--ui-surface); box-shadow: none; }
.ui-p-analytics .panelbox > h3, .ui-p-commissions .panelbox > h3, .ui-p-settings .panelbox > h3, .ui-p-account .panelbox > h3 {
  margin: calc(-1 * var(--ui-s3)) calc(-1 * var(--ui-s4)) var(--ui-s3); padding: 6px var(--ui-s4); min-height: 48px; display: flex; align-items: center; gap: var(--ui-s2) var(--ui-s3);
  flex-wrap: wrap; border-bottom: 1px solid var(--ui-line); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); color: var(--ui-muted); }
.ui-p-analytics .panelbox > h3 .note, .ui-p-commissions .panelbox > h3 .note, .ui-p-settings .panelbox > h3 .note {
  text-transform: none; letter-spacing: 0; font-weight: var(--ui-fw-reg); font-size: var(--ui-fs-sm); }
.ui-p-commissions .panelbox > h3 .btn, .ui-p-settings .panelbox > h3 .btn, .ui-p-account .panelbox > h3 .btn { text-transform: none; letter-spacing: 0; margin-left: auto; }
.ui-p-commissions table.ct, .ui-p-settings table.ct { border: 0; background: transparent; }
.ui-p-commissions table.ct th, .ui-p-settings table.ct th { background: transparent; color: var(--ui-muted); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold);
  letter-spacing: var(--ui-track-label); text-transform: uppercase; padding: var(--ui-s2) var(--ui-s3); border-bottom: 1px solid var(--ui-line); }
.ui-p-commissions table.ct td, .ui-p-settings table.ct td { padding: var(--ui-s2) var(--ui-s3); border-bottom-color: var(--ui-line); }
.ui-p-commissions tr.ui-cm-empty td { border-bottom: 0; }
.ui-p-analytics .chip, .ui-p-commissions .chip, .ui-p-settings .chip, .ui-p-account .chip, .ui-p-integrity .chip {
  font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); padding: 2px 8px; border-radius: var(--ui-r-pill); }
.ui-p-analytics .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned),
.ui-p-commissions .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned),
.ui-p-settings .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned),
.ui-p-account .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned),
.ui-p-integrity .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned) { background: var(--chip-bg); color: var(--ui-ink-2); }
.ui-p-analytics .chip.green, .ui-p-commissions .chip.green, .ui-p-settings .chip.green, .ui-p-account .chip.green, .ui-p-integrity .chip.green { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-analytics .btn.small, .ui-p-commissions .btn.small, .ui-p-settings .btn.small, .ui-p-account .btn.small, .ui-p-integrity .btn.small { border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-med); }
.ui-p-settings .btn.danger, .ui-p-account .btn.danger { color: var(--ui-accent-text); } /* 4.11:1 in dark before (Critic b2 lesson) */
.ui-p-analytics .ui-red-text, .ui-p-commissions .ui-red-text, .ui-p-settings .ui-red-text,
.ui-p-commissions .req, .ui-p-commissions .note.ui-red-text { color: var(--ui-accent-text); font-weight: var(--ui-fw-bold); } /* red as text: --red was 4.11:1 in dark */
.ui-p-commissions .req { font-weight: inherit; }
.ui-p-settings .sess-badge, .ui-p-account .sess-badge { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-settings .sec-2fa .tf-soon, .ui-p-account .sec-2fa .tf-soon { background: var(--chip-bg); color: var(--ui-ink-2); }

/* Analytics: the range is a segmented control; stat tiles and bars on the ui tokens */
.ui-p-analytics .an-range { background: var(--ui-sunken); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); padding: 3px; gap: 2px; }
.ui-p-analytics .an-range .btn.small { background: transparent; border: 0; color: var(--ui-muted); box-shadow: none; min-width: 44px; }
.ui-p-analytics .an-range .btn.small.primary { background: var(--ui-surface); color: var(--ui-ink); font-weight: var(--ui-fw-bold); box-shadow: 0 1px 2px rgba(17,17,20,.08); }
.ui-p-analytics .an-grid { gap: var(--ui-s4); }
.ui-p-analytics .stat .v { font-size: var(--ui-fs-2xl); font-weight: var(--ui-fw-bold); letter-spacing: -.01em; }
.ui-p-analytics .stat .l, .ui-p-analytics .sec { color: var(--ui-muted); }
.ui-p-analytics .hbar .track { background: var(--ui-sunken); border-radius: var(--ui-r-pill); height: 10px; }
.ui-p-analytics .hbar .n { color: var(--ui-ink); font-weight: var(--ui-fw-bold); }
.ui-p-analytics .fstage { border-radius: var(--ui-r-sm); border-color: var(--ui-line); background: var(--ui-surface); }
.ui-p-analytics .kvline { border-bottom-color: var(--ui-line); }
.ui-p-analytics .panelbox .ui-empty-sm { padding: var(--ui-s3) var(--ui-s2); }

/* Commissions: underline tabs (mock), forms on the ui tokens */
.ui-p-commissions .ui-cm-tabs { gap: var(--ui-s5); border-bottom: 1px solid var(--ui-line); margin-bottom: var(--ui-s4) !important; }
.ui-p-commissions .ui-cm-tabs .btn.small { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none;
  color: var(--ui-muted); font-size: var(--ui-fs-md); padding: 0 2px; min-height: 44px; }
.ui-p-commissions .ui-cm-tabs .btn.small.primary { color: var(--ui-ink); font-weight: var(--ui-fw-bold); border-bottom-color: var(--ui-accent); }
.ui-p-commissions .form-sub { color: var(--ui-ink); font-weight: var(--ui-fw-bold); }
.ui-p-commissions .panelbox .editform { flex-direction: row; align-items: flex-end; } /* the inline display:flex meant a wrapping row; .editform's column pushed it to the right edge */
.ui-p-commissions .panelbox > .editform > label, .ui-p-commissions .panelbox > label { color: var(--ui-muted); }
.ui-p-commissions .editform label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: 6px; color: var(--ui-ink-2); }
.ui-p-commissions .statcard { border-color: var(--ui-line); border-radius: var(--ui-r-md); }
.ui-p-commissions .statcard .k { color: var(--ui-muted); }
.ui-p-commissions .statcard .v { font-size: var(--ui-fs-2xl); font-weight: var(--ui-fw-bold); }

/* Settings + Account: underline tabs, the team table, sessions */
.ui-p-settings .tabs2 { gap: var(--ui-s5); border-bottom-color: var(--ui-line); margin-bottom: var(--ui-s4); }
.ui-p-settings .tabs2 button { padding: 0 2px; min-height: 44px; font-size: var(--ui-fs-md); color: var(--ui-muted); }
.ui-p-settings .tabs2 button.active { color: var(--ui-ink); font-weight: var(--ui-fw-bold); border-bottom-color: var(--ui-accent); }
.ui-p-settings table.ct td > input:not([type=checkbox]), .ui-p-settings table.ct td > select { min-height: var(--ui-ctl); background: var(--ui-surface); color: var(--ui-ink); }
.ui-p-settings .fieldrow, .ui-p-account .fieldrow { border-bottom-color: var(--ui-line); }
.ui-p-account .head { margin-bottom: var(--ui-s2); }
.ui-p-account .sec-panels, .ui-p-settings .sec-panels { max-width: 760px; }
.ui-p-account .sess-row, .ui-p-settings .sess-row { border-color: var(--ui-line); }

/* Integrity: header with the mode, cards with a header band */
.ui-p-integrity .page-head { padding: 0; gap: var(--ui-s2) var(--ui-s3); margin-bottom: var(--ui-s2); }
.ui-p-integrity .page-head .note { font-size: var(--ui-fs-sm); flex-basis: 100%; }
.ui-p-integrity > p.note { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s3) var(--ui-s4); margin: var(--ui-s3) 0 var(--ui-s4) !important; color: var(--ui-ink-2); }
.ui-p-integrity section.card { cursor: default; margin: 0 0 var(--ui-s4); }
.ui-p-integrity section.card:hover { border-color: var(--ui-line); }
.ui-p-integrity section.card > h2 { margin: calc(-1 * var(--ui-s3)) calc(-1 * var(--ui-s4)) var(--ui-s3); padding: 6px var(--ui-s4); min-height: 48px; display: flex; align-items: center;
  border-bottom: 1px solid var(--ui-line); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: var(--ui-track-label); text-transform: uppercase; color: var(--ui-muted); }
.ui-p-integrity .trow { min-height: 52px; border-bottom-color: var(--ui-line); }
.ui-p-integrity .tag { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-med); padding: 2px 10px; border-radius: var(--ui-r-pill); }
.ui-p-integrity .tag.warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-p-integrity .tag.ok { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-integrity details summary { cursor: pointer; padding: var(--ui-s2) 0; }
@media (min-width: 1100px) {
  .ui-p-integrity { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--ui-s4); align-items: start; }
  .ui-p-integrity > .page-head, .ui-p-integrity > p.note, .ui-p-integrity > section.card:first-of-type, .ui-p-integrity > .panelbox, .ui-p-integrity > .skel, .ui-p-integrity > div:not(.page-head) { grid-column: 1 / -1; }
}

/* Phones: every target 48px (house rule) */
@media (max-width: 820px) {
  .ui-p-analytics.an-wrap, .ui-p-commissions.cpage, .ui-p-settings.cpage, .ui-p-account.cpage, .ui-p-integrity.cpage { padding: var(--ui-s4); }
  .ui-p-analytics .btn, .ui-p-commissions .btn, .ui-p-settings .btn, .ui-p-account .btn, .ui-p-integrity .btn,
  .ui-p-analytics a[href], .ui-p-commissions select, .ui-p-settings select, .ui-p-account select,
  .ui-p-commissions input:not([type=checkbox]):not([type=radio]), .ui-p-settings input:not([type=checkbox]):not([type=radio]), .ui-p-account input:not([type=checkbox]):not([type=radio]),
  .ui-p-commissions textarea, .ui-p-integrity summary, .ui-p-integrity a[href] { min-height: var(--ui-tap); }
  .ui-p-settings .fieldrow a[href] { min-height: var(--ui-tap); }
  .ui-p-analytics a[href], .ui-p-integrity a[href], .ui-p-settings .fieldrow a[href] { display: inline-flex; align-items: center; }
  .ui-p-commissions input:not([type=checkbox]):not([type=radio]), .ui-p-settings input:not([type=checkbox]):not([type=radio]), .ui-p-account input:not([type=checkbox]):not([type=radio]),
  .ui-p-commissions select, .ui-p-settings select, .ui-p-account select { font-size: 16px; box-sizing: border-box; }
  .ui-p-commissions .ui-cm-tabs .btn.small, .ui-p-settings .tabs2 button { min-height: var(--ui-tap); }
  .ui-p-commissions .ui-cm-tabs, .ui-p-settings .tabs2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--ui-s4); }
  .ui-p-settings .tabs2 button { flex: none; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; }
  .ui-p-settings .tabs2 button.active { background: none; color: var(--ui-ink); border-bottom-color: var(--ui-accent); }
  .ui-p-commissions .ui-cm-tabs .btn.small { flex: none; white-space: nowrap; }
  /* checkboxes: the label round them is the tap area */
  .ui-p-commissions label:has(> input[type=checkbox]), .ui-p-settings label:has(> input[type=checkbox]) { min-height: var(--ui-tap); display: flex; align-items: center; }
  .ui-p-settings .pw-toggle, .ui-p-account .pw-toggle { min-height: var(--ui-tap); min-width: var(--ui-tap); }
  .ui-p-settings table.ct td > input:not([type=checkbox]), .ui-p-settings table.ct td > select { min-height: var(--ui-tap); }
  .ui-p-commissions table.ct.cardable td:not([data-label]), .ui-p-settings table.ct.cardable td:not([data-label]) { display: block; }
  .ui-p-settings table.ct.cardable td[data-label] { align-items: center; }
  .ui-p-settings table.ct.cardable td > input:not([type=checkbox]), .ui-p-settings table.ct.cardable td > select { width: auto !important; flex: 1 1 auto; min-width: 0; max-width: 62%; }
  .ui-p-commissions .editform > label, .ui-p-commissions .form-grid label { width: 100%; }
}

/* ═══ SLOT C END ═══ */


/* ═══ SLOT N START — final-card nits: Contact household stack + phone tab hint, Calendar search Retry. Only group N edits between these markers. ═══ */

/* Contact household at 1440 (table mode): compact action buttons so Edit / Make own contact / Remove share one line
   instead of stacking three rows (Critic contact nit, 1440). The phone card mode keeps its 48px buttons. */
@media (min-width: 821px) {
  .ui-p-contact .hh-table td.hh-actcell .btn { padding: 0 var(--ui-s2); font-size: var(--ui-fs-xs); min-height: var(--ui-ctl-sm); }
  .ui-p-contact .hh-table .hh-acts { gap: 4px; flex-wrap: nowrap; }
  .ui-p-contact .hh-table th, .ui-p-contact .hh-table td { padding-left: var(--ui-s2); padding-right: var(--ui-s2); } /* room for the actions on one line */
}
/* Contact history tabs on a phone scroll sideways: fade the right edge while more tabs are off-screen
   (Critic contact nit: nothing showed the strip scrolls). contact.js sets .ui-at-end at the end. */
@media (max-width: 820px) {
  .ui-p-contact .tabs2:not(.ui-at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
}
/* Contact timeline: a clickable item was 46px on a phone (pages-shot, final suite). */
@media (max-width: 820px) { .ui-p-contact .tl-item.clickable { min-height: var(--ui-tap); } }
/* Today: plain stage chips in the queue rows ("New Lead", "Quoted") were app.css's 4.23:1 neutral. Colour a plain chip
   only; every coloured chip keeps app.css's colour (the batch-2 rule), green lifted to 4.5:1. */
.ui-p-today .chip:not(.red):not(.green):not(.amber):not(.yellow):not(.owner):not(.unowned) { background: var(--chip-bg); color: var(--ui-ink-2); }
.ui-p-today .chip.green { background: var(--ui-ok-bg); color: var(--ui-ok); }
/* ═══ SLOT N END ═══ */


/* ───────────── Page: Calendar (Kuba, Telegram 2782/2914; calendar-v2.pdf) — .ui-p-calendar ───────────── */
/* Full width next to the sidebar; the desktop grid's hour height is fitted to the window by calendar.js
   (fitGrid) so 8 AM–8 PM shows with no page scroll. Same DOM, buttons and filters as before. */
@media (min-width: 821px) { .ui-p-calendar.cal { max-width: none; margin: 0; padding: var(--ui-s4) var(--ui-s6) var(--ui-s4); } } /* phone keeps its own padding */
.ui-p-calendar .cal-head h2 { font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); }
.ui-p-calendar .cal-sync { color: var(--ui-muted); }
.ui-p-calendar .cal-bar { gap: var(--ui-s2); }
@media (min-width: 1024px) { .ui-p-calendar .cal-find { flex: 0 1 210px; min-width: 190px; } } /* desktop only: the phone Find stays full width; 190px keeps the whole placeholder */
.ui-p-calendar .seg2 { border-color: var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-sunken); padding: 2px; gap: 2px; }
.ui-p-calendar .seg2 button { border-left: 0; border-radius: 6px; min-height: 30px; padding: 0 10px; color: var(--ui-muted); }
.ui-p-calendar .cal-dh.is-today .dw { color: var(--ui-accent-text); }
.ui-p-calendar .cal-dh.is-today .dn { background: var(--red-solid); } /* white on #C62828 in dark: 5.6:1 (on #E53935 it was 4.2) */
.ui-p-calendar .seg2 button.active { background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-e1); }
.ui-p-calendar .btn.small { min-height: 34px; border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-med); }
.ui-p-calendar .cal-legend { color: var(--ui-muted); }
.ui-p-calendar .cal-grid { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); }
.ui-p-calendar .cal-dhead { background: var(--ui-surface); }
.ui-p-calendar .cal-hr { color: var(--ui-muted); }
.ui-p-calendar .cal-review, .ui-p-calendar .cal-label { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1439px) { .ui-p-calendar .seg2 button { padding: 0 8px; } .ui-p-calendar .cal-bar { gap: 6px; } }
@media (max-width: 820px) {
  .ui-p-calendar .seg2 button, .ui-p-calendar .btn.small { min-height: var(--ui-tap); }
}

/* ───────────── Focus and motion ───────────── */
.ui-btn:focus-visible, .ui-kpi:focus-visible, .ui-tab:focus-visible, .ui-nav-item:focus-visible, .ui-menu-item:focus-visible, .ui-scope:focus-visible,
.ui-seg > button:focus-visible, .ui-tabbar a:focus-visible, .ui-tabbar button:focus-visible, .ui-li.is-click:focus-visible {
  outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; border-color: transparent; }
.ui-check input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-kpi, .ui-skel { transition: none; animation: none; }
  .ui-kpi:hover { transform: none; }
}


/* ═══ SLOT NC START — New campaign (Kuba 3367/3386): the button and the create form. ═══ */
.ui-p-campaigns .head .ui-camp-new { margin-left: auto; }
.ui-m-campnew { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.ui-m-campnew .ui-nc-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--ui-s3); }
.ui-m-campnew textarea { width: 100%; box-sizing: border-box; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ui-m-campnew .ui-nc-pv { margin: var(--ui-s3) 0; display: flex; flex-direction: column; gap: var(--ui-s3); }
.ui-m-campnew .ui-nc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ui-s2); }
.ui-m-campnew .ui-nc-stats > div { border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); padding: var(--ui-s2) var(--ui-s3); font-size: var(--ui-fs-sm); color: var(--ui-ink-2); }
.ui-m-campnew .ui-nc-stats b { display: block; font-size: 20px; color: var(--ui-ink); }
.ui-m-campnew .ui-nc-stats > .ok { background: var(--ui-ok-bg); border-color: transparent; }
.ui-m-campnew .ui-nc-stats > .ok b { color: var(--ui-ok); }
.ui-m-campnew .ui-nc-stats > .bad { background: var(--ui-err-bg); border-color: transparent; }
.ui-m-campnew .ui-nc-stats > .bad b { color: var(--ui-err); }
.ui-m-campnew .ui-nc-flag { background: var(--ui-warn-bg); border: 1px solid var(--ui-warn-line); border-radius: var(--ui-r-sm); padding: var(--ui-s3); color: var(--ui-warn); font-size: var(--ui-fs-sm); }
.ui-m-campnew .ui-nc-flag strong { color: var(--ui-ink); }
.ui-m-campnew .ui-nc-list { margin: var(--ui-s2) 0; padding-left: 18px; max-height: 160px; overflow: auto; color: var(--ui-ink); }
.ui-m-campnew .ui-nc-chk { display: flex; gap: var(--ui-s2); align-items: center; color: var(--ui-ink); font-weight: var(--ui-fw-med); }
@media (max-width: 640px) {
  .ui-m-campnew .ui-nc-grid, .ui-m-campnew .ui-nc-stats { grid-template-columns: 1fr; }
  .ui-p-campaigns .head .ui-camp-new { margin-left: 0; min-height: var(--ui-tap); }
  .ui-m-campnew .ui-nc-chk { min-height: var(--ui-tap); }
}
/* Add people to a campaign (Kuba 3557) */
.ui-m-campnew .ui-nc-src { flex-wrap: wrap; }
.ui-m-campnew .ui-nc-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ui-m-campnew .ui-nc-res { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; }
.ui-m-campnew .ui-nc-res .bk-res { min-height: var(--ui-tap); }
.ui-m-campnew .ui-nc-chips { display: flex; flex-wrap: wrap; gap: var(--ui-s2); }
.ui-m-campnew .ui-nc-chips .fchip { min-height: var(--ui-tap); }
.ui-p-campaign .camp-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2); margin: 0 0 var(--ui-s2); padding: var(--ui-s2) var(--ui-s3); background: var(--ui-info-bg); border-radius: var(--ui-r-sm); }
.ui-p-campaign .camp-selbar .btn { min-height: var(--ui-tap); }
.ui-p-campaign .cm-sel { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ui-tap); min-height: var(--ui-tap); cursor: pointer; }
.ui-p-campaign .cm-selh, .ui-p-campaign .cm-selc { width: 48px; padding: 0; }
/* ═══ SLOT NC END ═══ */

/* ═══ SLOT G START — client groups and the contact filter (Kuba 3386/3411): Contacts filters, chips, groups, campaign source. ═══ */
.ui-p-contacts .ui-groups-side { margin-top: var(--ui-s4); }
.ui-p-contacts .ui-fchips { display: flex; flex-wrap: wrap; gap: var(--ui-s2); align-items: center; margin: 0 0 var(--ui-s3); padding: var(--ui-s2) var(--ui-s3); background: var(--ui-info-bg); border-radius: var(--ui-r-sm); color: var(--ui-ink-2); font-size: var(--ui-fs-sm); }
.ui-p-contacts .ui-fchips[hidden] { display: none; }
.ui-p-contacts .ui-fchip-txt { flex: 1 1 200px; min-width: 0; }
.ui-m-filter { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.ui-fp { display: flex; flex-direction: column; gap: var(--ui-s3); }
.ui-fp-set { border: 0; margin: 0; padding: 0; }
.ui-fp-set legend { font-size: 13px; font-weight: var(--ui-fw-med); color: var(--ui-ink-2); margin-bottom: var(--ui-s1); }
.ui-fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-fp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--ui-line-strong); border-radius: 999px; font-size: var(--ui-fs-sm); color: var(--ui-ink); cursor: pointer; background: var(--ui-surface); }
.ui-fp-chip:has(input:checked) { background: var(--ui-accent-soft); border-color: transparent; color: var(--ui-accent-ink); font-weight: var(--ui-fw-med); }
.ui-fp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s2) var(--ui-s3); }
.ui-fp-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ui-ink-2); }
.ui-fp-grid input, .ui-fp-grid select { min-height: 36px; padding: 0 10px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-sm); background: var(--ui-surface); color: var(--ui-ink); font: var(--ui-fw-reg) var(--ui-fs-sm)/1.3 var(--ui-font); }
.ui-m-campnew .ui-nc-src { margin: 0 0 var(--ui-s3); }
.ui-m-campnew .ui-nc-filter { margin-top: var(--ui-s2); padding: var(--ui-s3); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); }
@media (max-width: 640px) {
  .ui-fp-grid { grid-template-columns: minmax(0, 1fr); }
  .ui-fp-chip { min-height: var(--ui-tap); }
  .ui-fp-grid input, .ui-fp-grid select { min-height: var(--ui-tap); font-size: 16px; }
  .ui-p-contacts .ui-fchips .btn { min-height: var(--ui-tap); }
  .ui-m-campnew .ui-nc-src { display: flex; }
  .ui-m-campnew .ui-nc-src > button { flex: 1; }
}
.ui-p-contacts .ui-groups-msg { padding: var(--ui-s2) var(--ui-s3); color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.ui-m-filter .ui-fm-err { color: var(--ui-err); }
/* Critic k3411 M5: inside the New campaign form, .editform's label rules stacked each checkbox above its text. */
.ui-m-campnew .ui-nc-filter .ui-fp-chip { flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.ui-m-campnew .ui-nc-filter .ui-fp-chip input { width: auto; margin: 0; }
/* ═══ SLOT G END ═══ */

/* ═══ SLOT TG START — tag library, bulk tagging, contacts by category (card B; contract §4.1/4.2/4.4). ═══ */
/* Tag colours: a dot in the colour on a light tint; the text keeps the theme's ink, so it reads in light and dark. */
.ui-tag { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.ui-tag[class*="ui-tag-c-"] { background: color-mix(in srgb, var(--ui-tag-c) 18%, var(--ui-surface)); color: var(--ui-ink); }
.ui-tag[class*="ui-tag-c-"]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-tag-c); flex: none; }
.ui-tag-c-gray { --ui-tag-c: #8a9099; } .ui-tag-c-red { --ui-tag-c: #d6201f; } .ui-tag-c-orange { --ui-tag-c: #e8710a; }
.ui-tag-c-amber { --ui-tag-c: #c99a06; } .ui-tag-c-green { --ui-tag-c: #2e8b57; } .ui-tag-c-teal { --ui-tag-c: #0f8b8d; }
.ui-tag-c-blue { --ui-tag-c: #2f6fdb; } .ui-tag-c-purple { --ui-tag-c: #7b4bd1; } .ui-tag-c-pink { --ui-tag-c: #d1477a; }
.ui-tag-swatches { display: flex; flex-wrap: wrap; gap: var(--ui-s2); }
.ui-tag-sw { position: relative; width: var(--ui-tap); height: var(--ui-tap); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ui-tag-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ui-tag-sw span { width: 28px; height: 28px; border-radius: 50%; background: var(--ui-tag-c); box-shadow: 0 0 0 2px var(--ui-surface); }
.ui-tag-sw input:checked + span { box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-ink); }
.ui-tag-sw input:focus-visible + span { outline: 2px solid var(--ui-focus); outline-offset: 4px; }
.ui-tags-head { display: flex; gap: var(--ui-s3); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--ui-s3); }
.ui-tags-table td { vertical-align: middle; }
.ui-tags .ui-tag-n a { font-weight: var(--ui-fw-med); display: inline-flex; align-items: center; justify-content: center; min-width: var(--ui-tap); min-height: var(--ui-tap); padding: 0 var(--ui-s2); border-radius: var(--ui-r-sm); } /* Critic k3470 m7 */
.ui-tags .ui-tag-n a:hover { background: var(--ui-hover); }
.ui-tags .ui-tag-acts { text-align: right; white-space: nowrap; }
.ui-tags .ui-tag-acts .btn { margin-left: var(--ui-s1); }
.ui-tag-lock { font-size: var(--ui-fs-xs); color: var(--ui-muted); border: 1px solid var(--ui-line); border-radius: var(--ui-r-pill); padding: 1px 8px; }
.ui-tag-err { color: var(--ui-err); background: var(--ui-err-bg); border-radius: var(--ui-r-sm); padding: var(--ui-s2) var(--ui-s3); }
.ui-m-tag .ui-bt-op { margin-bottom: var(--ui-s3); }
.ui-m-tag .ui-bt-pv { background: var(--ui-sunken); border-radius: var(--ui-r-sm); padding: var(--ui-s3); margin: var(--ui-s3) 0 var(--ui-s2); min-height: 48px; }
.ui-m-tag .ui-fp-set { border: 0; padding: 0; margin: 0; }
.ui-p-contacts .ui-ct-view { margin: var(--ui-s2) 0; }
.ui-p-contacts .ui-fp-exact, .ui-fp-exact { flex-direction: row; align-items: center; gap: 6px; }
.ui-cats { display: grid; gap: var(--ui-s3); margin-top: var(--ui-s2); }
.ui-cat { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s3); background: var(--ui-surface); }
.ui-cat h3 { margin: 0 0 var(--ui-s2); font-size: var(--ui-fs-md); }
.ui-cat-link { font: inherit; background: none; border: 0; padding: 0 var(--ui-s1); min-height: var(--ui-tap); color: var(--ui-ink); cursor: pointer; text-align: left; border-radius: var(--ui-r-sm); }
.ui-cat-link:hover { background: var(--ui-hover); }
.ui-cat-link b { font-weight: var(--ui-fw-bold); margin-left: 4px; }
.ui-cat-line { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: var(--ui-s2); align-items: start; border-top: 1px solid var(--ui-line); padding-top: var(--ui-s1); }
.ui-cat-carriers { display: flex; flex-wrap: wrap; gap: var(--ui-s1); }
.ui-cat-carriers .ui-cat-c { border: 1px solid var(--ui-line); border-radius: var(--ui-r-pill); padding: 0 var(--ui-s3); font-size: var(--ui-fs-sm); display: inline-flex; align-items: center; min-height: var(--ui-tap); }
@media (max-width: 600px) {
  .ui-cat-line { grid-template-columns: 1fr; }
  .ui-tags .ui-tag-acts { text-align: left; white-space: normal; }
}
/* ═══ SLOT TG END ═══ */
/* ═══ SLOT IM START — Contacts → Import (Kuba 3419/3422; contract §6). ═══ */
.ui-m-import { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; }
.ui-m-import .ui-im-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s3); align-items: end; margin: var(--ui-s3) 0; }
.ui-m-import .ui-im-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s2) var(--ui-s3); margin: var(--ui-s2) 0 var(--ui-s3); }
.ui-m-import label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ui-ink-2); }
.ui-m-import select, .ui-m-import input:not([type=checkbox]) { min-height: 36px; padding: 0 10px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-sm); background: var(--ui-surface); color: var(--ui-ink); font: var(--ui-fw-reg) var(--ui-fs-sm)/1.3 var(--ui-font); }
.ui-m-import .ui-im-chk { flex-direction: row; align-items: center; gap: var(--ui-s2); color: var(--ui-ink); }
.ui-m-import .ui-im-set { border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); padding: var(--ui-s2) var(--ui-s3); margin: 0 0 var(--ui-s3); }
.ui-m-import .ui-im-set legend { font-size: 13px; font-weight: var(--ui-fw-med); color: var(--ui-ink-2); padding: 0 4px; }
.ui-m-import .ui-im-st { display: flex; flex-wrap: wrap; gap: var(--ui-s4); }
.ui-m-import .ui-im-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: var(--ui-s3) 0; }
.ui-m-import .ui-im-stats > div { border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); padding: 6px 8px; font-size: 12px; color: var(--ui-ink-2); }
.ui-m-import .ui-im-stats b { display: block; font-size: 18px; color: var(--ui-ink); }
.ui-m-import .ui-im-stats > .ok { background: var(--ui-ok-bg); border-color: transparent; }
.ui-m-import .ui-im-stats > .ok b { color: var(--ui-ok); }
.ui-m-import .ui-im-stats > .red { background: var(--ui-err-bg); border-color: transparent; }
.ui-m-import .ui-im-stats > .red b { color: var(--ui-err); }
.ui-m-import .ui-im-stats > .warn { background: var(--ui-warn-bg); border-color: transparent; }
.ui-m-import .ui-im-rows { max-height: 260px; overflow: auto; margin-top: var(--ui-s2); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); }
.ui-m-import .ui-im-err { color: var(--ui-err); }
@media (max-width: 760px) {
  .ui-m-import .ui-im-grid, .ui-m-import .ui-im-map { grid-template-columns: minmax(0, 1fr); }
  .ui-m-import .ui-im-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-m-import select, .ui-m-import input:not([type=checkbox]):not([type=radio]), .ui-m-import .btn, .ui-m-import .ui-im-chk { min-height: var(--ui-tap); font-size: 16px; }
}
/* ═══ SLOT IM END ═══ */

/* ═══ SLOT PG START — permission to contact for voicemail and calls (decision 2026-10-21-call-voicemail-permission-gate). ═══ */
.ui-m-campnew .ui-nc-perm p { margin: var(--ui-s2) 0; }
.ui-nc-choice { border: 0; padding: 0; margin: var(--ui-s2) 0 0; display: grid; gap: var(--ui-s2); }
.ui-nc-choice legend { color: var(--ui-ink); font-weight: var(--ui-fw-med); margin-bottom: var(--ui-s1); }
.ui-nc-risk { background: var(--ui-err-bg); border-left: 3px solid var(--ui-err); padding: var(--ui-s2) var(--ui-s3); color: var(--ui-ink); font-size: var(--ui-fs-sm); border-radius: var(--ui-r-sm); }
.ui-camp-perm { display: flex; gap: var(--ui-s3); align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--ui-warn-bg); border: 1px solid var(--ui-warn-line); border-radius: var(--ui-r-sm); padding: var(--ui-s3); margin: var(--ui-s3) 0; color: var(--ui-ink); font-size: var(--ui-fs-sm); }
.ui-perm-list { list-style: none; margin: var(--ui-s2) 0; padding: 0; max-height: 220px; overflow: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); }
.ui-perm-list li { padding: 0 var(--ui-s3); border-bottom: 1px solid var(--ui-line); }
.ui-perm-list li:last-child { border-bottom: 0; }
.ui-m-camp .ui-perm-list .ui-nc-chk, .ui-m-camp .modal > .ui-nc-chk { display: flex; gap: var(--ui-s2); align-items: center; min-height: var(--ui-tap); color: var(--ui-ink); }
.ui-m-camp .editform label.ui-perm-affirm { min-height: var(--ui-tap); align-items: flex-start; }
.ui-m-camp .editform label.ui-perm-affirm input { width: 22px; height: 22px; margin-top: 1px; }
.ui-m-camp .ui-seg.ui-perm-act { margin: var(--ui-s3) 0; }
.ui-m-camp .ui-perm-stmt { background: var(--ui-sunken); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); padding: var(--ui-s3); font-size: var(--ui-fs-sm); color: var(--ui-ink); }
.ui-m-camp .ui-perm-stmt blockquote { margin: var(--ui-s1) 0 0; padding: 0; font-style: normal; }
.ui-m-camp .ui-perm-weak { color: var(--ui-warn); }
.ui-cm-noperm { color: var(--ui-muted); }
/* ═══ SLOT PG END ═══ */

/* ═══ SLOT AU START — the audit board (contract §7, Settings → Audit) and the calendar's "booked by". ═══ */
.ui-audit-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ui-s2) var(--ui-s3); margin: var(--ui-s3) 0; }
.ui-audit-filters label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-audit-filters select, .ui-audit-filters input { min-height: var(--ui-tap); font: inherit; color: var(--ui-ink); background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-sm); padding: 0 var(--ui-s2); }
.ui-audit-table td { vertical-align: top; }
.ui-audit-when { white-space: nowrap; color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.ui-audit-what { display: block; color: var(--ui-ink); }
.ui-audit-sum { display: block; font-size: var(--ui-fs-xs); }
.ui-audit-link { display: inline-flex; align-items: center; min-height: var(--ui-tap); min-width: var(--ui-tap); }
.ui-audit-msg td { background: var(--ui-sunken); }
.ui-audit-more { margin-top: var(--ui-s3); text-align: center; }
/* ═══ SLOT AU END ═══ */

/* ── Home Screen app (Kuba 3636) ── no Safari bars: Back and Forward at the top left of the header, 44px+ targets;
   nothing under the notch or the home bar (viewport-fit=cover + safe areas). */
.ui-hdr-hist { display: inline-flex; gap: 2px; margin-left: -6px; }
.ui-hdr-hist .ui-btn { min-width: 48px; min-height: 48px; }
.ui-hdr-hist .ui-btn:disabled { opacity: .35; }
.ui-header { padding-top: env(safe-area-inset-top); height: calc(var(--ui-header-h) + env(safe-area-inset-top));
  padding-left: max(var(--ui-s6), env(safe-area-inset-left)); padding-right: max(var(--ui-s6), env(safe-area-inset-right)); }
@media (max-width: 820px) { .ui-header { padding-left: max(var(--ui-s3), env(safe-area-inset-left)); padding-right: max(var(--ui-s3), env(safe-area-inset-right)); } }
.ui-side { padding-top: max(var(--ui-s3), env(safe-area-inset-top)); padding-left: max(10px, env(safe-area-inset-left)); } /* desktop unchanged: env() is 0 there (Critic k3636 M1) */
.ui-app .ui-header { padding-top: env(safe-area-inset-top); }

/* Kuba 3680: the update bar and pull-to-refresh */
.ui-update-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 12px; align-items: center;
  padding: 10px 12px 10px 16px; background: var(--ui-ink); color: var(--ui-surface); border-radius: 12px; box-shadow: var(--ui-e2); max-width: calc(100vw - 24px); }
.ui-update-bar .ui-btn { min-height: 48px; }
.ui-ptr { position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translate(-50%, -60px); z-index: 30; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ui-surface); color: var(--ui-muted); box-shadow: var(--ui-e2); pointer-events: none; transition: color .15s; }
.ui-ptr.on { color: var(--ui-accent-text); }

/* ───────────── Page: Analytics (K3367 §3, the approved mockup) — page root .ui-p-analytics.an2 ───────────── */
/* Chart colours, each ≥ 3:1 against the card in its theme (WCAG 1.4.11; test/analytics-ui.test.mjs checks them). */
:root {
  --ui-chart-1: #D6201F; --ui-chart-2: #3D4451; --ui-chart-3: #A0682A; --ui-chart-4: #E06A50; --ui-chart-5: #8A9099; --ui-chart-6: #6E4B9E;
  --ui-chart-sent: #3D4451; --ui-chart-sent-soft: rgba(61,68,81,.10); --ui-chart-fail: #D6201F; --ui-chart-grid: #ececef;
}
:root[data-theme="dark"] {
  --ui-chart-1: #E53935; --ui-chart-2: #DDD6CB; --ui-chart-3: #C8946A; --ui-chart-4: #F08A75; --ui-chart-5: #8A9099; --ui-chart-6: #B39DDB;
  --ui-chart-sent: #DDD6CB; --ui-chart-sent-soft: rgba(221,214,203,.10); --ui-chart-fail: #FF8A80; --ui-chart-grid: #2c2a26;
}
.ui-p-analytics.an2 { max-width: 1240px; }
.ui-p-analytics .an-head { align-items: flex-end; margin-bottom: var(--ui-s4); }
.ui-p-analytics .an-filters { display: flex; gap: var(--ui-s2); flex-wrap: wrap; }
.ui-p-analytics .an-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-s2) var(--ui-s3); margin: 0 0 var(--ui-s4); }
.ui-p-analytics .an-custom label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-p-analytics .an-custom .ui-input { width: auto; }
.ui-p-analytics .an-scope-note, .ui-p-analytics .an-warnbar { margin-bottom: var(--ui-s4); align-items: center; }
.ui-p-analytics .an-warnbar .ui-btn { margin-left: auto; flex: none; }
.ui-p-analytics .an-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: var(--ui-s4); }
.ui-p-analytics .an-kpi { min-width: 0; text-decoration: none; color: inherit; }
.ui-p-analytics .an-kpi .ui-kpi-d { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.ui-p-analytics .an-d { font-weight: var(--ui-fw-bold); }
.ui-p-analytics .an-d-good { color: var(--ui-ok); } .ui-p-analytics .an-d-bad { color: var(--ui-err); } .ui-p-analytics .an-d-flat { color: var(--ui-muted); font-weight: var(--ui-fw-med); }
.ui-p-analytics .an-of { color: var(--ui-muted); }
.ui-p-analytics .an-warn { font-size: var(--ui-fs-xs); color: var(--ui-warn); background: var(--ui-warn-bg); border-radius: var(--ui-r-pill); padding: 1px 8px; align-self: flex-start; font-weight: var(--ui-fw-med); }
.ui-p-analytics .an-brandwide { font-size: 10px; letter-spacing: .02em; color: var(--ui-muted); font-weight: var(--ui-fw-med); text-transform: none; }
.ui-p-analytics .an-charts { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--ui-s4); }
.ui-p-analytics .an-card { min-width: 0; }
.ui-p-analytics .an-card .ui-card-head h2 { margin: 0; }
.ui-p-analytics .an-card-sub { margin-left: auto; }
.ui-p-analytics .an-chart { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; }
.ui-p-analytics .an-yax { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--ui-fs-xs); color: var(--ui-muted); text-align: right; height: 160px; }
.ui-p-analytics .an-plot svg { display: block; width: 100%; height: 160px; }
.ui-p-analytics .an-chart-line .an-yax, .ui-p-analytics .an-chart-line .an-plot svg { height: 110px; }
.ui-p-analytics .an-chart-strip { margin-top: 10px; } .ui-p-analytics .an-chart-strip .an-yax, .ui-p-analytics .an-chart-strip .an-plot svg { height: 28px; }
.ui-p-analytics .an-gridline { stroke: var(--ui-chart-grid); stroke-width: 1; } .ui-p-analytics .an-base { stroke: var(--ui-line-strong); stroke-width: 1; }
.ui-p-analytics .an-xax { display: flex; justify-content: space-between; font-size: var(--ui-fs-xs); color: var(--ui-muted); margin-top: 4px; }
.ui-p-analytics .an-legend { list-style: none; margin: var(--ui-s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--ui-fs-sm); color: var(--ui-ink-2); }
.ui-p-analytics .an-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ui-p-analytics .an-funnel { display: flex; flex-direction: column; gap: 14px; }
.ui-p-analytics .an-fhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.ui-p-analytics .an-fk { font-size: var(--ui-fs-sm); color: var(--ui-ink-2); } .ui-p-analytics .an-fn { font-weight: var(--ui-fw-bold); font-size: var(--ui-fs-lg); margin-left: auto; } .ui-p-analytics .an-fp { font-size: var(--ui-fs-xs); color: var(--ui-muted); min-width: 34px; text-align: right; }
.ui-p-analytics .an-ftrack { height: 14px; border-radius: 4px; background: var(--ui-sunken); overflow: hidden; }
.ui-p-analytics .an-ftrack span { display: block; height: 100%; border-radius: 4px; background: var(--ui-chart-2); } .ui-p-analytics .an-ftrack span.is-last { background: var(--ui-chart-1); }
.ui-p-analytics .an-foot { margin: var(--ui-s3) 0 0; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.ui-p-analytics .an-speed { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-s4); }
.ui-p-analytics .an-speed-big { display: flex; flex-direction: column; gap: 4px; }
.ui-p-analytics .an-hbars, .ui-p-analytics .an-speed-bars { display: flex; flex-direction: column; gap: 8px; }
.ui-p-analytics .an-hbar { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--ui-fs-sm); }
.ui-p-analytics .an-hbar-k { color: var(--ui-ink-2); overflow-wrap: anywhere; line-height: 1.25; } /* wraps; never clipped: the label is the information */
.ui-p-analytics .an-kpi-warn { font-size: var(--ui-fs-md); font-weight: var(--ui-fw-bold); line-height: 1.25; color: var(--ui-warn); }
.ui-p-analytics .an-hbar-t { height: 10px; background: var(--ui-sunken); border-radius: 3px; overflow: hidden; } .ui-p-analytics .an-hbar-t span { display: block; height: 100%; border-radius: 3px; }
.ui-p-analytics .an-hbar-n { font-weight: var(--ui-fw-bold); text-align: right; min-width: 2.5em; }
.ui-p-analytics .an-h2 { margin: var(--ui-s8) 0 var(--ui-s3); }
.ui-p-analytics .an-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-s4); }
.ui-p-analytics .an-span-all { grid-column: 1 / -1; }
.ui-p-analytics .an-table th.is-num { text-align: right; }
.ui-p-analytics .an-table td, .ui-p-analytics .an-table th { padding-left: 0; } .ui-p-analytics .an-table td:last-child, .ui-p-analytics .an-table th:last-child { padding-right: 0; }
.ui-p-analytics .an-compact th, .ui-p-analytics .an-compact td { padding-top: 8px; padding-bottom: 8px; }
.ui-p-analytics .an-bookcols .an-hbar { grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; }
.ui-p-analytics .an-sec { margin: var(--ui-s4) 0 var(--ui-s2); } .ui-p-analytics .an-sec-first { margin-top: 0; }
.ui-p-analytics .an-kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ui-line); font-size: var(--ui-fs-sm); }
.ui-p-analytics .an-kv:first-child { border-top: 0; } .ui-p-analytics .an-kv b { text-align: right; } .ui-p-analytics .an-kv small { display: block; color: var(--ui-muted); font-weight: var(--ui-fw-reg); }
.ui-p-analytics .an-hbars + .an-kv, .ui-p-analytics .ui-empty + .an-kv { margin-top: var(--ui-s3); }
.ui-p-analytics .an-red { color: var(--ui-err); }
.ui-p-analytics .an-cta { margin-top: var(--ui-s3); }
.ui-p-analytics .an-seg-pipe { margin-bottom: var(--ui-s3); max-width: 100%; overflow-x: auto; }
.ui-p-analytics .an-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ui-p-analytics .an-stage { border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui-p-analytics .an-stage .ui-label { letter-spacing: .03em; min-height: 2.6em; line-height: 1.3; overflow-wrap: anywhere; }
.ui-p-analytics .an-stage-n { font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); }
.ui-p-analytics .an-wl { margin-top: var(--ui-s3); flex-wrap: wrap; }
.ui-p-analytics .an-bookstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ui-s3); margin-bottom: var(--ui-s2); }
.ui-p-analytics .an-bookstats > div { display: flex; flex-direction: column; gap: 4px; } .ui-p-analytics .an-bookstats b { font-size: var(--ui-fs-xl); }
.ui-p-analytics .an-bookcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s6); }
.ui-p-analytics .an-refs { margin: 0; padding: 0; list-style: none; }
.ui-p-analytics .an-refs li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--ui-line); min-height: 40px; }
.ui-p-analytics .an-refs li:first-child { border-top: 0; }
.ui-p-analytics .an-refs a { color: var(--ui-accent-text); text-decoration: none; font-weight: var(--ui-fw-med); font-size: var(--ui-fs-sm); }
/* The QR panel (qr-panel.js) draws its own box: inside this card it sits flat. */
.ui-p-analytics .an-qr .panelbox { border: 0; padding: 0; margin: 0; box-shadow: none; background: none; }
.ui-p-analytics .an-qr .panelbox > h3 { display: none; }
@media (max-width: 1180px) { .ui-p-analytics .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ui-p-analytics .an-charts, .ui-p-analytics .an-detail { grid-template-columns: minmax(0, 1fr); } .ui-p-analytics .an-bookcols { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 820px) {
  .ui-p-analytics .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s2); }
  .ui-p-analytics .an-kpi { padding: var(--ui-s3); } .ui-p-analytics .an-kpi .ui-kpi-v { font-size: 24px; }
  .ui-p-analytics .an-filters { width: 100%; flex-direction: column; }
  .ui-p-analytics .an-filters .ui-seg { display: grid; width: 100%; overflow: visible; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ui-p-analytics .an-filters .ui-seg > button { white-space: normal; padding: 0 6px; line-height: 1.15; }
  .ui-p-analytics .an-custom label { flex: 1 1 140px; } .ui-p-analytics .an-custom .ui-input { width: 100%; font-size: 16px; }
  .ui-p-analytics .an-custom .ui-btn { flex: 1 1 100%; }
  .ui-p-analytics .an-warnbar { flex-wrap: wrap; } .ui-p-analytics .an-warnbar .ui-btn { margin-left: 0; width: 100%; }
  .ui-p-analytics .an-card-sub { margin-left: 0; flex-basis: 100%; }
  .ui-p-analytics .an-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-p-analytics .an-seg-pipe > button { min-height: var(--ui-tap); }
  .ui-p-analytics .an-bookstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-p-analytics .an-refs li, .ui-p-analytics .an-refs a { min-height: var(--ui-tap); display: flex; align-items: center; }
  /* Phone: the label gets its own full-width line above its bar */
  .ui-p-analytics .an-hbar, .ui-p-analytics .an-bookcols .an-hbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .ui-p-analytics .an-hbar-k { grid-column: 1 / -1; }
  .ui-p-analytics .an-cta { width: 100%; }
  .ui-p-analytics .an-compact th { font-size: 11px; letter-spacing: .03em; } .ui-p-analytics .an-compact th, .ui-p-analytics .an-compact td { padding-right: 6px; }
}
/* QR scans inside its Analytics card: the header row sat on the page grey (#6b7280 on #f6f6f8 = 4.48:1). */
.ui-p-analytics .an-qr .qr-headrow { background: var(--ui-surface); color: var(--ui-muted); }
.ui-p-analytics .an-viewnote { margin: 0 0 var(--ui-s3); }
/* ═══ SLOT K START — K3367: template editor (formatted body, merge chips, live preview), Automatic emails list. ═══ */
.ui-p-templates .ui-tp-tabs { display: flex; gap: var(--ui-s1); margin-bottom: var(--ui-s3); border-bottom: 1px solid var(--ui-line); }
.ui-p-templates .ui-tp-tab { min-height: 40px; padding: 0 var(--ui-s4); border: 0; border-bottom: 2px solid transparent; background: none; font: var(--ui-fw-med) var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-muted); cursor: pointer; margin-bottom: -1px; }
.ui-p-templates .ui-tp-tab.on { color: var(--ui-ink); border-bottom-color: var(--ui-accent); }
.ui-p-templates .ui-tp-lead { margin: 0 0 var(--ui-s3); font-size: var(--ui-fs-sm); }
.ui-p-templates td.tp-act { text-align: right; }
.ui-p-template-ed .head h2 { font-size: 19px; }
.ui-p-template-ed .ui-tp-flow { display: flex; flex-wrap: wrap; gap: var(--ui-s2); align-items: center; margin: 0 0 var(--ui-s3); font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.ui-p-template-ed .ui-tp-step { padding: 3px 10px; border-radius: 999px; background: var(--ui-info-bg); color: var(--ui-ink-2); font-weight: var(--ui-fw-med); }
.ui-p-template-ed .ui-tp-step.ok { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-p-template-ed .ui-tp-step.cur { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-p-template-ed .ui-tp-versions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: var(--ui-s3); }
.ui-p-template-ed .ui-tp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-s4); align-items: start; }
.ui-p-template-ed .ui-tp-left, .ui-p-template-ed .ui-tp-right { display: flex; flex-direction: column; gap: var(--ui-s3); min-width: 0; }
.ui-p-template-ed .ui-tp-right { position: sticky; top: var(--ui-s4); }
.ui-p-template-ed .ui-tp-lbl { font-size: 13px; font-weight: var(--ui-fw-med); color: var(--ui-ink-2); }
.ui-p-template-ed .ui-tp-pvhead { display: flex; flex-wrap: wrap; gap: var(--ui-s2); align-items: center; margin-bottom: var(--ui-s2); }
.ui-p-template-ed .ui-tp-pvhead h3 { margin: 0 auto 0 0; font-size: var(--ui-fs-md); font-weight: var(--ui-fw-bold); }
.ui-p-template-ed .ui-tp-frame { display: flex; justify-content: center; background: var(--ui-sunken); border-radius: var(--ui-r-md); padding: var(--ui-s2); }
.ui-p-template-ed .ui-tp-frame .tpl-preview { width: 100%; transition: width .2s ease; }
.ui-p-template-ed .ui-tp-frame.phone .tpl-preview { width: 375px; max-width: 100%; }
/* The formatted body editor (rich-editor.js). */
.ui-rte { border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-sm); background: var(--ui-surface); }
.ui-rte-bar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 4px; background: var(--ui-sunken); border-bottom: 1px solid var(--ui-line); border-radius: var(--ui-r-sm) var(--ui-r-sm) 0 0; }
.ui-rte-b { min-height: 32px; min-width: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ui-ink-2); font: var(--ui-fw-med) var(--ui-fs-sm)/1 var(--ui-font); cursor: pointer; }
.ui-rte-b:hover:not(:disabled) { background: var(--ui-surface); border-color: var(--ui-line); }
.ui-rte-b:disabled { color: var(--ui-muted); cursor: default; }
.ui-rte-b[aria-pressed="true"] { background: var(--ui-surface); border-color: var(--ui-line-strong); color: var(--ui-ink); }
.ui-rte-src { margin-left: auto; }
.ui-rte-sep { width: 1px; height: 18px; background: var(--ui-line-strong); margin: 0 4px; }
.ui-rte-mf { position: relative; }
.ui-rte-menu { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; min-width: 240px; display: flex; flex-direction: column; padding: 4px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.ui-rte-menu[hidden] { display: none; }
.ui-rte-menu > button { display: flex; justify-content: space-between; gap: var(--ui-s3); min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--ui-ink); font: var(--ui-fw-reg) var(--ui-fs-sm)/1 var(--ui-font); text-align: left; cursor: pointer; align-items: center; }
.ui-rte-menu > button:hover, .ui-rte-menu > button:focus-visible { background: var(--ui-hover); }
.ui-rte-menu code { color: var(--ui-muted); font-size: 12px; }
.ui-rte-body { min-height: 240px; padding: var(--ui-s3) var(--ui-s4); font: var(--ui-fw-reg) var(--ui-fs-md)/1.55 var(--ui-font); color: var(--ui-ink); outline: none; overflow-wrap: anywhere; }
.ui-rte-body:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-focus); border-radius: 0 0 var(--ui-r-sm) var(--ui-r-sm); }
.ui-rte-body p { margin: 0 0 12px; }
.ui-rte-body a { color: var(--ui-accent-text); }
.ui-rte-body table { max-width: 100%; }
.ui-rte.ro .ui-rte-body { background: var(--ui-sunken); color: var(--ui-ink-2); }
.ui-rte-html { width: 100%; box-sizing: border-box; border: 0; padding: var(--ui-s3); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ui-surface); color: var(--ui-ink); }
.ui-mf { display: inline-block; padding: 0 6px; margin: 0 1px; border-radius: 5px; background: var(--ui-info-bg); border: 1px solid var(--ui-line-strong); color: var(--ui-ink-2); font-size: .9em; font-weight: var(--ui-fw-med); line-height: 1.5; white-space: nowrap; user-select: all; }
@media (max-width: 1100px) {
  .ui-p-template-ed .ui-tp-cols { grid-template-columns: minmax(0, 1fr); }
  .ui-p-template-ed .ui-tp-right { position: static; }
}
@media (max-width: 640px) {
  .ui-p-templates .ui-tp-tab, .ui-rte-b, .ui-rte-menu > button { min-height: var(--ui-tap); }
  .ui-rte-b { min-width: var(--ui-tap); }
  .ui-p-template-ed .ui-seg button { min-width: var(--ui-tap); min-height: var(--ui-tap); }
  .ui-p-templates td.tp-act { text-align: left; }
  .ui-p-template-ed .ui-tp-frame { padding: 0; background: none; }
}
/* The email is drawn for white paper (its own dark text and light borders): in the dark theme the body box stays paper so a secondary button is not dark on dark (Critic k3367-editor Minor 2). */
:root[data-theme="dark"] .ui-rte-body { background: #fff; color: #1a1a1a; }
:root[data-theme="dark"] .ui-rte-body a { color: #b3171a; }
:root[data-theme="dark"] .ui-rte-body .ui-mf { background: #eef1f5; border-color: #b8bfc9; color: #3a3f47; }
@media (max-width: 640px) { .ui-p-templates .tp-act .btn { min-width: var(--ui-tap); min-height: var(--ui-tap); } }
/* Approve screen: where the footer starts (Kuba 4879). Amber warning above the threshold; the acknowledgement is a 48px row. */
.ui-tp-foot { margin: 0 0 var(--ui-s3); font-size: var(--ui-fs-sm); color: var(--ui-ink-2); }
.ui-tp-footwarn { margin: 0 0 var(--ui-s3); padding: var(--ui-s3); border: 1px solid var(--ui-warn-line); border-radius: var(--ui-r-sm); background: var(--ui-warn-bg); color: var(--ui-ink); font-size: var(--ui-fs-sm); line-height: 1.5; }
.ui-tp-footwarn[hidden] { display: none; }
.ui-tp-footwarn strong { color: var(--ui-warn); }
.ui-tp-ack { display: flex; gap: var(--ui-s2); align-items: center; min-height: var(--ui-tap); margin-top: var(--ui-s2); cursor: pointer; font-weight: var(--ui-fw-med); scroll-margin: 72px 0 96px; }
.ui-tp-ack input { width: 24px; height: 24px; flex: none; }
.ui-p-template-ed .btn.primary:disabled { opacity: .55; cursor: not-allowed; }
/* ═══ SLOT K END ═══ */

/* ── Brand chip (One CRM stage C): the brand of an item in an All brands view. The letters carry the meaning, the tint only helps. ── */
.ui-bchip { display: inline-block; font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold); letter-spacing: .04em; line-height: 1; padding: 3px 7px; border-radius: var(--ui-r-pill); vertical-align: 1px; margin-left: 6px; white-space: nowrap; }
.ui-bchip.mpp { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-bchip.och { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-bchips { display: inline-flex; gap: 2px; }
.ui-scope-row { display: flex; gap: var(--ui-s2); flex-wrap: wrap; align-items: center; }
.ui-seg-brand { display: inline-flex; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-pill); overflow: hidden; }
.ui-seg-brand button { min-height: 48px; min-width: 48px; padding: 0 14px; border: 0; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-med); cursor: pointer; }
.ui-seg-brand button[aria-pressed="true"] { background: var(--ui-ink); color: var(--ui-surface); }
.ui-seg-brand button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
.ui-pp { margin-bottom: var(--ui-s4); }
.ui-pp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s3); }
.ui-pp-col { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s3); background: var(--ui-surface); min-width: 0; }
.ui-pp-h { display: flex; align-items: center; gap: var(--ui-s2); flex-wrap: wrap; margin-bottom: 2px; }
.ui-pp-sec { margin-top: var(--ui-s2); font-size: var(--ui-fs-sm); }
.ui-pp-sec ul { margin: 2px 0 0; padding-left: 18px; }
.ui-pp-actions { display: flex; gap: var(--ui-s2); flex-wrap: wrap; margin-top: var(--ui-s3); }
.ui-pp-actions .btn { min-height: 48px; display: inline-flex; align-items: center; }
.ui-pp-diff { margin: 4px 0 var(--ui-s2); }
@media (max-width: 720px) { .ui-pp-cols { grid-template-columns: minmax(0, 1fr); } }
.ui-pp-actions a.btn { text-decoration: none; color: var(--ui-ink); }
.ui-pp h3 { justify-content: flex-start; gap: var(--ui-s2); }
.ui-pp-contact a { display: inline-flex; align-items: center; min-height: 48px; }
/* U65 stripe (Kuba 4784): the Today rail's row padding above would sit the text on the stripe. */
.ui-p-today .trow.u65 { padding-left: 14px; }