/* Stylesheet version — must match APP_VERSION in js/config.js (app.js warns if the browser has an old copy) */
:root { --css-version: "2026.11.11.76"; }

/* ==========================================================================
   CRM app styles. Built only on design-tokens.css (MyCRM design system, design-system/mycrm/MASTER.md).
   Older layers below use the legacy token names; redesigned screens sit in the last layers and use
   the semantic --color-* / --space-* / --radius-* tokens directly.
   Animations use transform and opacity only.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scrollbar-color: var(--control-border) transparent; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--grad-page) no-repeat, var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
a { color: var(--link); }
kbd { font-family: var(--font-mono); }
::selection { background: var(--action-tint); color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon { display: block; flex-shrink: 0; }
[data-icon] { display: inline-flex; }
.faint { color: var(--text-faint); }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100dvh; }

/* ---------- Rail: Verde Floresta Profundo ---------- */
.rail {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: calc(var(--s5) + var(--safe-top)) var(--s3) calc(var(--s4) + var(--safe-bottom));
  background: var(--grad-nav);
  border-right: 1px solid var(--divider);
  overflow: hidden;
}
.rail-brand { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s2) var(--s5); }
.brand-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--action-tint);
  color: var(--accent-text);
}
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
/* Company logo (replaces the leaf once img/logo.svg exists) */
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.has-logo .brand-fallback { display: none; }
.has-logo .brand-mark { border-color: transparent; background: transparent; }
/* A wide wordmark: show it at full width instead of the "CRM" title */
.wide-logo .brand-mark { display: flex; align-items: center; width: auto; max-width: 100%; height: 44px; flex: 1; }
.wide-logo .brand-logo { width: auto; max-width: 100%; object-position: left center; }
.brand-logo-mark { display: none; width: 100%; height: 100%; object-fit: contain; }
.wide-logo .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: var(--track-display); color: var(--text); }
.brand-sub { font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; }
.rail-section { padding: var(--s2) var(--s3); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); color: var(--text-faint); white-space: nowrap; }
.rail-nav { display: flex; flex-direction: column; gap: var(--s1); }
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav-item:hover { color: var(--text); background: var(--hover); }
/* Active: Verde Folha underline indicator, weight 500 */
.nav-item.active { color: var(--text); background: var(--hover); font-weight: 500; }
.nav-item.active .icon { color: var(--accent-text); }
.nav-item.active .label:not(.nav-key) {
  text-decoration: underline;
  text-decoration-color: var(--action);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.rail-footer { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: var(--s2); }
.api-status { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; }
.api-status .faint { font-family: var(--mono); }

.api-status.offline { color: var(--error-text); }

.app-version { padding: 0 var(--s3); font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-faint); white-space: nowrap; }
.rail-collapse .icon { transition: transform var(--dur) var(--ease-out); }

@media (min-width: 768px) {
  .shell.collapsed { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }
  .shell.collapsed .rail .label { display: none; }
  .shell.collapsed .rail-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .shell.collapsed .wide-logo .brand-mark { flex: none; width: 40px; height: 40px; }
  /* Collapsed with a wide logo: show its left end (usually the symbol), or the square mark if one is set */
  .shell.collapsed .wide-logo .brand-logo { width: 100%; object-fit: cover; object-position: left center; }
  .shell.collapsed .has-mark .brand-logo { display: none; }
  .shell.collapsed .has-mark .brand-logo-mark { display: block; }
  .shell.collapsed .nav-item { justify-content: center; padding: 0; }
  .shell.collapsed .nav-item.active .icon { color: var(--accent-text); }
  .shell.collapsed .api-status { justify-content: center; padding: 0; }
  .shell.collapsed .app-version { display: none; }
  .shell.collapsed .rail-collapse .icon { transform: scaleX(-1); }
}

/* ---------- App bar: translucent with backdrop blur ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: calc(var(--bar-h) + var(--safe-top));
  padding: var(--safe-top) var(--gutter) 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--divider);
}
.crumbs { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
.crumbs strong { overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 500; }
.crumbs a { color: var(--text-muted); text-decoration: none; border-radius: var(--radius-xs); transition: color var(--dur-fast) var(--ease-out); }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.crumb-sep { color: var(--text-faint); }
.appbar-spacer { flex: 1; }
.sync-time { font-size: var(--fs-micro); color: var(--text-faint); white-space: nowrap; }
.btn.menu-btn { display: none; }

/* Loading: a sliding bar, not a spinner */
.loadbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.loadbar::before { content: ""; position: absolute; inset: 0; width: 40%; background: var(--action); transform: translateX(-100%); animation: scan 1.2s var(--ease-out) infinite; }
.appbar.loading .loadbar { opacity: 1; }
@keyframes scan { to { transform: translateX(250%); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn-ghost { background: transparent; border-color: var(--control-border); color: var(--text); }
.btn-ghost:hover:not(:disabled) { background: var(--raised); }
.btn-quiet { background: transparent; color: var(--text-muted); }
.btn-quiet:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.btn-icon { width: var(--tap); padding: 0; }
.btn-compact { min-height: 36px; padding: 0 var(--s3); font-size: var(--fs-micro); }
.btn .count-inline { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 400; color: var(--text-muted); }

/* ---------- Content ---------- */
.content {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s6) var(--gutter) calc(var(--s8) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s7);
  outline: none;
}

[hidden] { display: none !important; }
/* Text for screen readers only */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.view { display: flex; flex-direction: column; gap: var(--s7); }
.form-root { display: flex; flex-direction: column; gap: var(--s7); }

/* ---------- Hero: asymmetric two-column, the only place for texture and particles ---------- */
.hero { position: relative; isolation: isolate; padding: var(--s5) 0 var(--s2); }

@keyframes drift { to { transform: translate(var(--dx, 30px), var(--dy, -40px)); } }
@keyframes flicker { 0%, 100% { opacity: 0; } 45%, 55% { opacity: var(--peak, .5); } }

.page-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: var(--s6); align-items: end; }
.page-title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 600; line-height: 1.3; letter-spacing: var(--track-display); color: var(--text); }
.page-sub { margin-top: var(--s3); max-width: 52ch; font-size: var(--fs-body); color: var(--text-muted); }

/* Stat cluster: one lead card beside three compact ones (asymmetric) */
.stats { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); gap: var(--s3); }
.stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
}
.stat-label { font-size: var(--fs-small); font-weight: 500; letter-spacing: var(--track-label); color: var(--text-muted); }
.stat-hint { display: block; font-size: var(--fs-micro); font-weight: 400; color: var(--text-faint); }
.stat-value { font-family: var(--font-mono); font-size: var(--fs-figure); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.stat.lead { grid-row: 1 / span 3; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: var(--s5); background: var(--raised); box-shadow: var(--shadow-raised); }
/* The hero's single focal glow */
.stat.lead .stat-value { font-size: var(--fs-figure); font-weight: 600; line-height: 1; color: var(--accent-text); text-shadow: var(--glow-focal); }
.tone-warning { color: var(--warning-text); }
.tone-info { color: var(--info-text); }
.tone-danger { color: var(--error-text); }

/* ---------- Panels ---------- */
.panel { position: relative; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); }

.table-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s5); border-bottom: 1px solid var(--divider); }
.field { display: flex; flex-direction: column; gap: var(--s2); width: min(420px, 100%); }
.field label { font-size: var(--fs-small); font-weight: 500; letter-spacing: var(--track-label); color: var(--text-muted); }
.input-wrap { position: relative; }
.input {
  width: 100%;
  height: var(--tap);
  padding: 0 var(--s8) 0 calc(var(--s3) + 16px + var(--s2));
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-small);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-faint); }
.input:hover { border-color: var(--text-faint); }
.input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* "Clear filter" does this */
.input-icon { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.input-kbd { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%); padding: 0 var(--s1); border: 1px solid var(--divider); border-radius: var(--radius-xs); font-size: var(--fs-micro); line-height: 18px; color: var(--text-faint); pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); }
.input:focus ~ .input-kbd, .input:not(:placeholder-shown) ~ .input-kbd { opacity: 0; }

.toolbar-right { position: relative; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.record-count { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }

/* ---------- Table ---------- */
.table-scroll { overflow-x: auto; }

/* Scrollbar above the table, kept in step with the one below (app.js linkTableScrollbars) */
.table-scroll-top { overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--divider); }
.table-scroll-top-inner { height: 1px; }

/* Table scrollbars that are always visible. macOS hides scrollbars until you scroll by default,
   which would make the top one invisible; styled WebKit scrollbars always show (Chrome, Safari, Edge). */
.table-scroll, .table-scroll-top { scrollbar-width: auto; scrollbar-color: auto; }
.table-scroll::-webkit-scrollbar, .table-scroll-top::-webkit-scrollbar { height: 12px; }
.table-scroll::-webkit-scrollbar-track, .table-scroll-top::-webkit-scrollbar-track { background: var(--surface); }
.table-scroll::-webkit-scrollbar-thumb, .table-scroll-top::-webkit-scrollbar-thumb {
  border: 3px solid var(--surface);
  border-radius: var(--radius-pill);
  background: var(--control-border);
}
.table-scroll::-webkit-scrollbar-thumb:hover, .table-scroll-top::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
@supports not selector(::-webkit-scrollbar) {
  /* Firefox */
  .table-scroll, .table-scroll-top { scrollbar-width: thin; scrollbar-color: var(--control-border) var(--surface); }
}
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-data); }
.data-table th {
  height: 44px;
  padding: 0 var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-align: left;
  color: var(--text-muted);
  white-space: nowrap;
}
.data-table td {
  height: 52px;
  max-width: 280px;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.data-table th:first-child, .data-table td:first-child { position: sticky; left: 0; z-index: 1; padding-left: var(--s5); box-shadow: inset -1px 0 0 var(--divider); }
.data-table th:last-child, .data-table td:last-child { padding-right: var(--s5); }
.data-table th.right, .data-table td.right { text-align: right; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr[data-index] { cursor: pointer; }
.data-table tbody tr[data-index]:hover td,
.data-table tbody tr[data-index]:focus-visible td { background: var(--raised); }
.data-table tbody tr[data-index]:hover td:first-child,
.data-table tbody tr[data-index]:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--action), inset -1px 0 0 var(--divider); }
.data-table tbody tr[data-index]:focus-visible { outline: none; }

.th-btn { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) 0; border: 0; border-radius: var(--radius-xs); background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.th-btn .icon { color: var(--text-faint); }
.th-btn:hover { color: var(--text); }
th[aria-sort="ascending"] .th-btn, th[aria-sort="descending"] .th-btn { color: var(--text); }
th[aria-sort="ascending"] .th-btn .icon, th[aria-sort="descending"] .th-btn .icon { color: var(--accent-text); }

/* Cell content */
.cell-primary { font-weight: 600; color: var(--text); }
.row-link { color: inherit; text-decoration: none; }
.row-link:hover { text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: 3px; }
.cell-empty { color: var(--text-faint); }
.cell-mono, .cell-ref { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }
.cell-link { display: inline-flex; align-items: center; gap: var(--s1); max-width: 100%; color: var(--link); text-decoration: none; border-radius: var(--radius-xs); }
.cell-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-stack { display: flex; flex-direction: column; gap: var(--s1); }
.longtext { white-space: pre-wrap; }

/* Tags (4px) for single values */
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s2); border: 1px solid; border-radius: var(--radius-xs); font-size: var(--fs-micro); font-weight: 500; line-height: 1; white-space: nowrap; }
.pill.success { color: var(--success-text); border-color: var(--success-border); background: var(--success-tint); }
.pill.warning { color: var(--warning-text); border-color: var(--warning-border); background: var(--warning-tint); }
.pill.danger  { color: var(--error-text); border-color: var(--error-border); background: var(--error-tint); }
.pill.info    { color: var(--info-text); border-color: var(--info-border); background: var(--link-tint); }
.pill.neutral { color: var(--neutral); border-color: var(--neutral-border); background: var(--neutral-tint); }

/* Chips for lists */
.chips { display: inline-flex; gap: var(--s1); }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s2); border: 1px solid var(--divider); border-radius: var(--radius-xs); background: var(--raised); font-size: var(--fs-micro); color: var(--text); white-space: nowrap; }
.chip.more { background: transparent; color: var(--text-muted); }

/* Pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s5); border-top: 1px solid var(--divider); }
.pager-info { font-size: var(--fs-small); color: var(--text-muted); }

/* Empty / error states: icon + text + one action */
.state { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s8) var(--s5); text-align: center; }
.state-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: var(--s1); border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--raised); color: var(--accent-text); }
.state h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.state p { max-width: 60ch; font-size: var(--fs-small); color: var(--text-muted); }
.state code { padding: 1px var(--s1); border-radius: var(--radius-xs); background: var(--raised); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text); }
.state .btn { margin-top: var(--s2); }
.db-info { color: var(--text-muted); }
.state.error .state-icon { border-color: color-mix(in srgb, var(--error) 45%, transparent); background: var(--error-tint); color: var(--error-text); }
.state.error h3 { color: var(--error-text); }

/* Skeleton shimmer */
.skeleton { display: block; height: 10px; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--hover) 25%, var(--press) 50%, var(--hover) 75%); background-size: 200% 100%; animation: shimmer 1.6s ease-in-out infinite; }
.skeleton.inline { display: inline-block; vertical-align: middle; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Column picker ---------- */
.col-picker { position: absolute; top: calc(100% + var(--s2)); right: 0; z-index: var(--z-overlay); width: min(380px, calc(100vw - var(--s8))); background: var(--raised); border: 1px solid var(--divider); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); animation: pop var(--dur) var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.col-picker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--divider); font-size: var(--fs-small); font-weight: 600; }
.col-picker-actions { display: flex; gap: var(--s1); }
.col-picker-body { max-height: min(60vh, 520px); overflow-y: auto; padding: var(--s1) var(--s2) var(--s3); }
.col-picker fieldset { margin: 0; padding: 0; border: 0; }
.col-picker legend { padding: var(--s3) var(--s2) var(--s1); font-size: var(--fs-micro); font-weight: 500; color: var(--text-faint); }
.check { display: flex; align-items: center; gap: var(--s3); min-height: 38px; padding: 0 var(--s2); border-radius: var(--radius-xs); font-size: var(--fs-small); color: var(--text); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.check:hover { background: var(--hover); }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--action); cursor: pointer; }
.check.locked { color: var(--text-faint); cursor: default; }
.check.locked:hover { background: transparent; }

/* ---------- Record page ---------- */
.record-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: calc(-1 * var(--s4)); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--tap);
  padding: 0 var(--s3) 0 var(--s2);
  margin-left: calc(-1 * var(--s2));
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.back-link:hover { color: var(--text); background: var(--hover); }
.record-nav { display: flex; align-items: center; gap: var(--s2); }
.record-pos { margin-right: var(--s1); font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }

/* Header: identity left, headline figures right */
.record-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: end; padding: var(--s4) 0 var(--s2); }
.record-kicker { font-size: var(--fs-small); font-weight: 500; letter-spacing: var(--track-label); color: var(--accent-text); }
.record-title { margin-top: var(--s1); font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: 1.3; letter-spacing: var(--track-display); overflow-wrap: anywhere; }
.record-title:focus, .record-section h2:focus { outline: none; }
.record-facts { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: var(--s4) 0 0; }
.record-facts dt { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); color: var(--text-muted); }
.record-facts dd { margin: var(--s1) 0 0; font-size: var(--fs-small); }
.key-figures { display: flex; gap: var(--s3); margin: 0; }
.key-figure { min-width: 160px; padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-md); box-shadow: var(--shadow-small); }
.key-figure dt { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); }
.key-figure dd { margin: var(--s2) 0 0; font-family: var(--font-mono); font-size: var(--fs-figure); font-weight: 600; line-height: var(--lh-tight); }
.key-figure.lead { background: var(--raised); box-shadow: var(--shadow-raised); }
.key-figure.lead dd .num { color: var(--accent-text); text-shadow: var(--glow-focal); } /* the header's single focal glow */

/* Body: sections left, summary right */
.record-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); align-items: start; }
.record-main { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.record-section { padding: var(--s5); scroll-margin-top: calc(var(--bar-h) + var(--safe-top) + var(--s4)); }
.record-section h2 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.record-section h2 .icon { color: var(--accent-text); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s4) var(--s5); margin: 0; }
.field-item { min-width: 0; }
.field-item.wide { grid-column: 1 / -1; }
.field-item dt { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); color: var(--text-muted); }
.field-item dd { margin: var(--s1) 0 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.field-item dd .chips { flex-wrap: wrap; }
.rel-block { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--divider); }
.record-section > h2 + .rel-block { margin-top: 0; padding-top: 0; border-top: 0; }
.rel-block h3 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.rel-block .chips { flex-wrap: wrap; }
.rel-none { font-size: var(--fs-small); color: var(--text-faint); }

.record-aside {
  position: sticky;
  top: calc(var(--bar-h) + var(--safe-top) + var(--s5));
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-height: calc(100dvh - var(--bar-h) - var(--safe-top) - var(--s7));
  overflow-y: auto;
}
.aside-card { padding: var(--s4) var(--s5); }
.aside-card h2 { margin-bottom: var(--s2); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
.aside-list { margin: 0; }
.aside-list > div { padding: var(--s2) 0; border-bottom: 1px solid var(--divider); }
.aside-list > div:last-child { border-bottom: 0; }
.aside-list dt { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); color: var(--text-muted); }
.aside-list dd { margin: 2px 0 0; font-size: var(--fs-small); overflow-wrap: anywhere; }
.count-badge { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 var(--s1); border-radius: var(--radius-pill); background: var(--raised); border: 1px solid var(--divider); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }

/* Linked records along a stem */
.rel-list { position: relative; margin: 0; padding: 0 0 0 var(--s5); list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.rel-list::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--divider); }
.rel-item { position: relative; display: flex; flex-direction: column; gap: var(--s1); }
.rel-item::before { content: ""; position: absolute; left: calc(-1 * var(--s5) + 3px); top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--action); }
.rel-title { font-weight: 500; color: var(--text); }
.rel-meta { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* ---------- Create form ---------- */
.page-actions { display: flex; gap: var(--s3); margin-top: var(--s5); }
.form-saved { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-micro); color: var(--text-faint); }
.form-saved .icon { color: var(--accent-text); }
.form-restored { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s3); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--raised); font-size: var(--fs-small); color: var(--text-muted); }
.form-restored .icon { color: var(--info-text); }
.form-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s6); align-items: start; }

/* Steps */
.stepper { position: sticky; top: calc(var(--bar-h) + var(--safe-top) + var(--s5)); padding: var(--s4) var(--s3); }
.stepper-progress { padding: 0 var(--s2) var(--s2); font-size: var(--fs-micro); font-weight: 500; color: var(--text-muted); }
.stepper ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.step {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--s2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.step:hover { background: var(--hover); color: var(--text); }
.step-mark { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--control-border); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-micro); }
.step.current { background: var(--hover); color: var(--text); font-weight: 500; }
.step.current .step-mark { border-color: var(--action); background: var(--action); color: var(--action-on); }
.step.done .step-mark { border-color: var(--action); color: var(--accent-text); }
.step.error { color: var(--text); }
.step.error .step-mark { border-color: var(--error); color: var(--error-text); }

/* Panel */
.form-panel { padding: var(--s6); }
.form-step-title { margin-bottom: var(--s5); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.25; }
.form-step-title:focus { outline: none; }
.form-step { display: flex; flex-direction: column; gap: var(--s6); }
.form-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-field > * + * { margin-top: var(--s2); }
.form-field > label, .form-field > legend { display: block; padding: 0; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.form-field > legend { margin-bottom: var(--s2); }
.form-field > legend + * { margin-top: 0; }
.optional { margin-left: var(--s2); font-size: var(--fs-micro); font-weight: 500; color: var(--text-faint); }
.form-panel .hint { max-width: 72ch; font-size: var(--fs-small); color: var(--text-muted); }
.form-panel .hint b { color: var(--text); font-weight: 500; }
.form-panel .input { padding: 0 var(--s3); }
.textarea { height: auto; min-height: 96px; padding: var(--s2) var(--s3); line-height: 1.5; resize: vertical; }
.select {
  appearance: none;
  padding-right: var(--s7) !important;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
  cursor: pointer;
}
.select option { background: var(--surface); color: var(--text); }
.input[aria-invalid="true"], .picker-box.invalid { border-color: var(--error); }
.field-error { display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-small); color: var(--error-text); }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4) var(--s5); }
.link-btn { padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.form-alert { margin-bottom: var(--s5); padding: var(--s4); border: 1px solid color-mix(in srgb, var(--error) 45%, transparent); border-radius: var(--radius-sm); background: var(--error-tint); font-size: var(--fs-small); }
.form-alert ul { margin: var(--s2) 0 0; padding-left: var(--s5); }
.form-alert li + li { margin-top: var(--s1); }
.form-alert .link-btn { color: var(--error-text); text-align: left; }
.form-notice { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); border-radius: var(--radius-sm); background: var(--link-tint); font-size: var(--fs-small); }
.form-notice > .icon { margin-top: 2px; color: var(--info-text); }
.form-notice ul { margin: var(--s1) 0 0; padding-left: var(--s5); }
.form-notice .btn { margin-left: auto; }
.form-notice.warn { border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: var(--warning-tint); }
.form-notice.warn > .icon { color: var(--warning-text); }

.form-subsection { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s5); border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--raised); }
.form-subsection > h3 { font-size: var(--fs-h3); font-weight: 600; }

/* Choices */
.check-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.check-chip { position: relative; }
.check-chip input, .radio-card input, .segment input, .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.check-chip span {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-xs);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check-chip span:hover { background: var(--hover); }
.check-chip input:checked + span { border-color: var(--action); background: var(--action-tint); font-weight: 600; }
.check-chip input:checked + span::before { content: "\2713"; color: var(--accent-text); }
.check-chip input:focus-visible + span, .segment input:focus-visible + .radio-body { outline: 2px solid var(--focus); outline-offset: 2px; }

.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
.radio-card {
  position: relative;
  display: block;
  padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 26px);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.radio-card:hover { background: var(--hover); }
.radio-card::before { content: ""; position: absolute; left: var(--s4); top: calc(var(--s4) + 2px); width: 16px; height: 16px; border: 1.5px solid var(--control-border); border-radius: 50%; }
.radio-card:has(input:checked) { border-color: var(--action); background: var(--action-tint); }
.radio-card:has(input:checked)::before { border-color: var(--action); background: radial-gradient(circle, var(--action) 0 4px, transparent 5px); }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.radio-body { display: flex; flex-direction: column; gap: 2px; }
.radio-title { font-size: var(--fs-small); font-weight: 600; }
.radio-text { font-size: var(--fs-small); color: var(--text-muted); }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--control-border); border-radius: var(--radius-sm); justify-self: start; }
.segment .radio-body { display: flex; align-items: center; min-height: 34px; padding: 0 var(--s3); border-radius: var(--radius-xs); color: var(--text-muted); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.segment .radio-body:hover { color: var(--text); background: var(--hover); }
.segment input:checked + .radio-body { background: var(--action); color: var(--action-on); }
.segment input:checked + .radio-body .radio-title { font-weight: 600; }

/* A settings row: label and description on the left, the toggle on the right.
   ".toggle-field > .switch" outranks the generic ".form-field > label { display: block }". */
.toggle-field > .switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--raised);
  font-weight: 400;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.toggle-field > .switch:hover { border-color: var(--control-border); }
.switch .switch-text { order: 1; flex: 1; min-width: 0; }
.switch .switch-track { order: 2; }
.switch-track { position: relative; flex-shrink: 0; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--control-border); transition: background-color var(--dur-fast) var(--ease-out); }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform var(--dur-fast) var(--ease-out); }
.switch input:checked + .switch-track { background: var(--action); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; gap: 2px; }
.switch-text .hint { font-weight: 400; }
.switch-label { font-size: var(--fs-small); font-weight: 600; }

/* Searchable multi-select */
.picker-chosen { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.picker-empty { font-size: var(--fs-small); color: var(--text-faint); }
.chip-removable { gap: 2px; padding-right: 0; }
.chip-removable button { display: grid; place-items: center; width: 24px; height: 22px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); cursor: pointer; }
.chip-removable button:hover { background: var(--hover); color: var(--text); }
.picker-box { overflow: hidden; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--surface); }
.picker-search { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); border-bottom: 1px solid var(--divider); color: var(--text-faint); }
.picker-search:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }
.picker-search-input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--text); font-size: var(--fs-small); outline: none; }
.picker-search-input::placeholder { color: var(--text-faint); }
.picker-search-input::-webkit-search-cancel-button { filter: invert(.8); }
.picker-list { max-height: 280px; overflow-y: auto; padding: 0 0 var(--s2); }
.picker-group-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s3) var(--s1); background: var(--surface); font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); }
.picker-group-head .link-btn { font-weight: 500; font-size: var(--fs-micro); }
.picker-item { display: flex; align-items: center; gap: var(--s3); min-height: 36px; padding: 0 var(--s3); font-size: var(--fs-small); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.picker-item:hover { background: var(--hover); }
.picker-item input { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: var(--action); cursor: pointer; }
.picker-meta { margin-left: auto; padding-left: var(--s3); font-size: var(--fs-micro); color: var(--text-faint); text-align: right; }
.picker-none { padding: var(--s3); font-size: var(--fs-small); color: var(--text-faint); }

.derived { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1px dashed var(--control-border); border-radius: var(--radius-md); }
.derived > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }

/* Footer */
.form-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) calc(-1 * var(--s6)) calc(-1 * var(--s6));
  padding: var(--s4) var(--s6) calc(var(--s4) + var(--safe-bottom));
  border-top: 1px solid var(--divider);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.form-footer-space { flex: 1; }

/* Review */
.review { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); }
.review-section { padding: var(--s4) var(--s5); border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--raised); }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.review-head h3 { font-size: var(--fs-h3); font-weight: 600; }
.review-list { margin: 0; }
.review-list > div { padding: var(--s2) 0; border-top: 1px solid var(--divider); }
.review-list dt { font-size: var(--fs-micro); font-weight: 500; color: var(--text-muted); }
.review-list dd { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s1) 0 0; font-size: var(--fs-small); }

/* URL repeater */

/* UBO repeater */

.toast.success { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.toast.success .icon { color: var(--accent-text); }

/* ---------- Comments (record pages) ---------- */
.comment-reach { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s4); font-size: var(--fs-small); color: var(--text-muted); }
.comment-reach .icon { margin-top: 3px; color: var(--info-text); flex-shrink: 0; }
.comment-composer { display: flex; flex-direction: column; gap: var(--s2); }
.comment-composer > label { font-size: var(--fs-small); font-weight: 600; }
.comment-composer .input { padding: var(--s2) var(--s3); }
.comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.comment-author { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-small); color: var(--text-muted); }
.comment-author .select { width: auto; min-width: 180px; height: 40px; }
.comment-shortcut { margin-left: auto; font-size: var(--fs-micro); }
.comment-filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 var(--s3); padding-top: var(--s4); border-top: 1px solid var(--divider); }
.comment-filter {
  min-height: 32px;
  padding: 0 var(--s3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.comment-filter:hover { background: var(--hover); color: var(--text); }
.comment-filter[aria-pressed="true"] { border-color: var(--action); background: var(--action-tint); color: var(--text); font-weight: 500; }
.comment-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.comment { padding: var(--s3) var(--s4); border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--raised); }
.comment.is-here { border-color: color-mix(in srgb, var(--action) 35%, var(--divider)); background: var(--action-tint); }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.comment-origin { font-size: var(--fs-small); font-weight: 500; }
.comment-meta { display: inline-flex; flex-wrap: wrap; gap: var(--s2); margin-left: auto; font-size: var(--fs-micro); color: var(--text-muted); }
.comment-meta time { color: var(--text-faint); }
.comment-body { margin-top: var(--s2); font-size: var(--fs-small); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-empty { margin-top: var(--s4); font-size: var(--fs-small); color: var(--text-faint); }
.comment-loading { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
@media (max-width: 767px) {
  .comment-shortcut { display: none; }
  .comment-actions .btn { margin-left: auto; }
  .comment-author .select { min-width: 0; }
  .comment-meta { margin-left: 0; width: 100%; }
}

/* ---------- Comments button in table rows, and the side panel it opens ---------- */
.primary-cell { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-width: 0; }
.primary-cell .row-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row-comment-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.data-table tbody tr:hover .row-comment-btn { color: var(--text-muted); }
.row-comment-btn:hover { border-color: var(--control-border); background: var(--surface); color: var(--accent-text); }

.panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.panel-backdrop.open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease-out); }
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--divider);
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.side-panel.open { transform: none; visibility: visible; transition: transform var(--dur) var(--ease-out); }
.side-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: calc(var(--s5) + var(--safe-top)) var(--s5) var(--s4);
  border-bottom: 1px solid var(--divider);
  background: linear-gradient(180deg, var(--nav-bg), var(--surface));
}
.side-panel-heading { min-width: 0; }
.side-panel-title { margin-top: var(--s1); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.side-panel-open { gap: var(--s1); margin-top: var(--s2); font-size: var(--fs-small); }
.side-panel-body { flex: 1; overflow-y: auto; padding: var(--s5) var(--s5) calc(var(--s8) + var(--safe-bottom)); }
.comments-panel-count { margin-bottom: var(--s3); font-size: var(--fs-small); font-weight: 600; }
/* In the narrower panel: "Posting as" and the button share one line; the shortcut hint is dropped */
.in-panel .comment-shortcut { display: none; }
.in-panel .comment-actions { flex-wrap: nowrap; }
.in-panel .comment-actions .btn { margin-left: auto; flex-shrink: 0; }
.in-panel .comment-author { min-width: 0; white-space: nowrap; }
.in-panel .comment-author .select { min-width: 0; width: 100%; max-width: 200px; }
@media (max-width: 767px) {
  .side-panel { border-left: 0; }
  .side-panel-head, .side-panel-body { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ---------- Row dropdown (an opportunity's matches & prechecks) ---------- */
.row-expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0 var(--s2) 0 2px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.row-expand .icon { transition: transform var(--dur) var(--ease-out); }
.row-expand:hover { border-color: var(--action); color: var(--text); }
.row-expand[aria-expanded="true"] { border-color: var(--action); background: var(--action-tint); color: var(--text); }
.row-expand[aria-expanded="true"] .icon { transform: rotate(90deg); }
.primary-cell .row-expand + .row-link { margin-right: auto; }

.data-table tr.expand-row > td {
  position: static;
  height: auto;
  max-width: none;
  padding: 0;
  background: var(--bg);
  box-shadow: inset 2px 0 0 var(--action);
  white-space: normal;
  overflow: visible;
  cursor: default;
}
/* Stays in view while the main table scrolls sideways; scrolls on its own if wider */
.expand-inner {
  position: sticky;
  left: 0;
  width: var(--table-view-w, 100%);
  max-width: 100%;
  padding: var(--s4) var(--s5) var(--s5);
}
.expand-inner .matches-scroll { max-width: 100%; }

.matches-scroll { overflow-x: auto; border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--surface); }
/* Natural width (scrolls sideways inside the dropdown) so each match stays compact */
.matches-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.matches-table th, .matches-table td { padding: var(--s3); border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; white-space: nowrap; }
.matches-table thead th {
  position: sticky;
  top: 0;
  background: var(--raised);
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
}
.matches-table tbody tr:last-child > * { border-bottom: 0; }
/* The matches table sits inside the main table: reset the main table's cell rules for it */
.data-table .matches-table th, .data-table .matches-table td { height: auto; max-width: none; overflow: visible; text-overflow: clip; box-shadow: none; }
.matches-table tbody > tr > * { background: var(--surface); }
.matches-table tbody tr:hover > * { background: var(--raised); }   /* solid, so the pinned column never shows text through */
/* Provider stays pinned while the matches scroll sideways */
.matches-table .m-provider, .matches-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: inset -1px 0 0 var(--divider);
}
.matches-table thead th:first-child { z-index: 2; }
.matches-table .right { text-align: right; }
.matches-table .m-provider { font-weight: 600; }
.matches-table .m-for { min-width: 340px; max-width: 420px; white-space: normal; }
.matches-table .m-for .chips { flex-wrap: wrap; }
.matches-table .m-wide { min-width: 280px; max-width: 360px; white-space: normal; }
.m-sub { display: block; margin-top: var(--s1); font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; }
.m-sub.m-warn { color: var(--warning-text); }
.m-none { color: var(--text-faint); }
.m-more { color: var(--text-faint); font-size: var(--fs-micro); }
.m-cur { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-micro); }
.m-score { font-size: 1rem; font-weight: 600; color: var(--accent-text); }
.matches-empty { padding: var(--s3) 0; font-size: var(--fs-small); color: var(--text-faint); }
/* On the opportunity page the section card already frames it */
.record-section .matches-scroll { margin-top: var(--s1); }
@media (max-width: 767px) {
  .expand-inner { padding: var(--s3); }
}

/* ---------- Editing ---------- */
.record-actions { display: flex; align-items: center; gap: var(--s3); }
.form-editing { margin-top: var(--s1); font-size: var(--fs-small); color: var(--text-muted); }
.locked-value { display: flex; flex-direction: column; min-height: var(--tap); justify-content: center; padding: var(--s2) var(--s3); border: 1px dashed var(--control-border); border-radius: var(--radius-xs); font-size: var(--fs-small); }
.edit-panel .form-subsection { gap: var(--s4); }
.edit-cands .select { min-width: 170px; height: 38px; }
.edit-cands .edit-note { min-width: 220px; max-width: 320px; white-space: normal; font-size: var(--fs-micro); color: var(--text-muted); }
.edit-cands .edit-note .field-error { margin-top: var(--s1); }
.edit-cands tr.will-convert > * { background: var(--action-tint); }
@media (max-width: 767px) {
  .record-actions { width: 100%; justify-content: space-between; }
}

/* ---------- Stage filter (Merchants, Providers) ---------- */
.stage-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: 0 var(--s5) var(--s4); }
.stage-filters[hidden] { display: none; }
.stage-filters-label { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); }
.stage-filter-group { display: flex; flex-wrap: wrap; gap: var(--s2); }
.stage-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.stage-filter:hover { background: var(--hover); color: var(--text); }
.stage-filter[aria-pressed="true"] { border-color: var(--action); background: var(--action-tint); color: var(--text); font-weight: 500; }
.stage-filter-count { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); }
.stage-filter[aria-pressed="true"] .stage-filter-count { color: var(--accent-text); }
@media (max-width: 767px) {
  .stage-filters { padding: 0 var(--s4) var(--s3); }
}

/* ---------- Lists use the full window width (record pages and forms keep a readable width) ---------- */
[data-view="list"] .content { max-width: none; }

/* ---------- Moving columns ---------- */
.th-inner { display: flex; align-items: center; gap: 2px; }
.th-grip {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 28px;
  margin-left: calc(-1 * var(--s2));
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-faint);
  opacity: 0.45;
  cursor: grab;
  touch-action: none;           /* lets a finger drag the column instead of scrolling */
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.data-table thead th:hover .th-grip, .th-grip:focus-visible { opacity: 1; color: var(--text-muted); }
.th-grip:hover { background: var(--hover); color: var(--text); }
.data-table thead th.is-dragged { opacity: 0.45; }
.data-table thead th.drop-before { box-shadow: inset 3px 0 0 var(--action); }
.data-table thead th.drop-after { box-shadow: inset -3px 0 0 var(--action); }
html.col-dragging, html.col-dragging * { cursor: grabbing !important; user-select: none; }
@media (hover: none) { .th-grip { opacity: 0.8; } }

/* Columns menu: one ordered list */
.col-picker-hint { padding: 0 var(--s4) var(--s2); font-size: var(--fs-micro); color: var(--text-muted); }
.col-order { margin: 0; padding: var(--s1) var(--s2) var(--s3); list-style: none; }
.col-row { display: flex; align-items: center; gap: var(--s2); padding: 2px var(--s2); border-radius: var(--radius-sm); }
.col-row:hover { background: var(--hover); }
.col-row .check { flex: 1; min-width: 0; }
.col-row-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.col-row-group { font-size: var(--fs-micro); color: var(--text-faint); }
.col-move { display: inline-flex; gap: 2px; flex-shrink: 0; }
.btn-icon-sm {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.btn-icon-sm:hover:not([disabled]) { border-color: var(--control-border); background: var(--surface); color: var(--text); }
.btn-icon-sm[disabled] { opacity: 0.3; cursor: default; }
.col-picker-actions .btn[disabled] { opacity: 0.4; }

/* ---------- Sign-in ---------- */
.auth-page {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(var(--s6) + var(--safe-top)) var(--gutter) calc(var(--s6) + var(--safe-bottom));
  background: linear-gradient(180deg, var(--nav-bg) 0%, var(--bg) 60%);
  overflow: hidden;
}
.auth-glow { position: absolute; inset: -30% -10% auto; height: 70%; background: radial-gradient(closest-side, color-mix(in srgb, var(--info) 14%, transparent), transparent); pointer-events: none; }
.auth-card { position: relative; width: min(420px, 100%); padding: var(--s7) var(--s6); }
.auth-brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); }
.auth-mark { width: 44px; height: 44px; }
.auth-mark.has-logo { border-color: transparent; background: transparent; }
.auth-logo { width: 100%; height: 100%; object-fit: contain; }
.auth-brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.auth-brand-text strong { font-family: var(--font-display); font-size: 1.125rem; }
.auth-brand-text span { font-size: var(--fs-micro); color: var(--text-muted); }
.auth-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; }
.auth-card > .hint { margin-top: var(--s1); }
.auth-card .form-notice { margin-top: var(--s4); }
.auth-form { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s5); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 48px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--text); }
.auth-error { padding: var(--s2) var(--s3); border: 1px solid color-mix(in srgb, var(--error) 50%, transparent); border-radius: var(--radius-sm); background: var(--error-tint); color: var(--text); font-size: var(--fs-small); }
.auth-submit { width: 100%; justify-content: center; min-height: 48px; }
.auth-actions { display: flex; gap: var(--s3); }
.auth-actions .auth-submit { flex: 1; width: auto; }
.auth-foot { margin-top: var(--s5); font-size: var(--fs-micro); color: var(--text-muted); text-align: center; }
#authRoot[hidden], .shell[hidden] { display: none !important; }
.field-label { display: block; margin-bottom: var(--s2); font-size: var(--fs-small); font-weight: 600; }

/* ---------- Signed-in user (sidebar) ---------- */

.avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--action-tint);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
  color: var(--text);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.comment-author strong { color: var(--text); font-weight: 600; }

/* ---------- Finance (provider pages) ---------- */
.fin-status { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius-sm); font-size: var(--fs-small); }
.fin-status .icon { margin-top: 2px; flex-shrink: 0; }
.fin-status.warn { border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent); background: var(--warning-tint); }
.fin-status.warn .icon { color: var(--warning-text); }
.fin-status.ok { border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-tint); }
.fin-status.ok .icon { color: var(--accent-text); }
.fin-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.fin-actions .hint { flex: 1 1 280px; margin: 0; }
.fin-table td, .fin-table th { vertical-align: top; }
.fin-table th[scope="row"] { white-space: normal; }
.fin-flag { margin-left: var(--s2); }
.fin-add { display: flex; margin-top: var(--s2); }
.fin-toggle { margin-right: var(--s2); vertical-align: middle; }
.fin-toggle span { font-family: var(--font-body); font-size: var(--fs-micro); }
.fin-expand > td { padding: 0 var(--s3) var(--s4) var(--s3) !important; background: var(--bg) !important; box-shadow: inset 2px 0 0 var(--action); }
.fin-expand .matches-scroll { margin-top: var(--s2); }
.fin-deal-table th, .fin-deal-table td { vertical-align: top; }
.fin-row-actions { white-space: nowrap; }
.fin-row-actions .btn-icon-sm { display: inline-grid; }
.fin-deal-actions { display: flex; justify-content: flex-start; margin-top: var(--s3); }
.fin-deal-table .fin-note { min-width: 140px; max-width: 220px; }
.fin-deal-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); font-size: var(--fs-small); }
.fin-caption { caption-side: top; padding: var(--s3) var(--s3) 0; text-align: left; font-size: var(--fs-micro); color: var(--text-muted); }
.fin-entries { margin-top: var(--s4); }
.fin-entries summary { cursor: pointer; padding: var(--s2) 0; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.fin-entries summary:hover { color: var(--text); }
.fin-note { max-width: 260px; white-space: normal; color: var(--text-muted); }
.fin-owed { margin-top: var(--s5); }
.fin-owed h3 { margin-bottom: var(--s3); font-size: var(--fs-small); font-weight: 600; color: var(--warning-text); }
.fin-collection { padding: var(--s4); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); border-radius: var(--radius-md); background: var(--raised); }
.fin-collection + .fin-collection { margin-top: var(--s3); }
.fin-collection-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); font-size: var(--fs-small); }
.fin-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: var(--s3) 0; }
.fin-figures dt { font-size: var(--fs-micro); color: var(--text-muted); }
.fin-figures dd { margin: 0; font-family: var(--font-mono); font-size: 1rem; }
.fin-out { color: var(--warning-text); }
.fin-total { font-weight: 600; color: var(--accent-text); }
.fin-last { margin-top: var(--s4); }
.matches-table tfoot th, .matches-table tfoot td { border-top: 1px solid var(--divider); background: var(--raised); font-weight: 600; }

/* Dialogs (native <dialog>: Esc closes, focus stays inside) */
dialog.modal {
  width: min(560px, calc(100vw - 2 * var(--s4)));
  max-height: calc(100dvh - 2 * var(--s5));
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
}
dialog.modal.modal-wide { width: min(760px, calc(100vw - 2 * var(--s4))); }
dialog.modal::backdrop { background: var(--overlay); }
dialog.modal[open] { animation: pop var(--dur) var(--ease-out); }
.modal-form { display: flex; flex-direction: column; max-height: inherit; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--divider); }
.modal-head h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
.modal-body { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); overflow-y: auto; }
.modal-error { margin: 0 var(--s5) var(--s3); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s3); padding: var(--s4) var(--s5); border-top: 1px solid var(--divider); background: var(--raised); }
.amount-row { display: flex; gap: var(--s2); }
.amount-row .input:first-child { flex: 1; min-width: 0; }
.amount-row .select { width: 96px; flex-shrink: 0; }
.fin-period { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.check-list { display: flex; flex-direction: column; gap: var(--s2); }
.fin-period-field .field-pair { margin-top: var(--s1); }
.modal-body fieldset.form-field { margin: var(--s2) 0 0; padding: 0; border: 0; }
.modal-body fieldset.form-field legend { margin-bottom: var(--s1); font-size: var(--fs-small); font-weight: 600; }
@media (max-width: 767px) {
  .fin-figures { grid-template-columns: 1fr 1fr 1fr; gap: var(--s2); }
  .fin-figures dd { font-size: var(--fs-small); }
  .modal-body, .modal-head, .modal-foot { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ---------- Columns menu: topics that open and close ---------- */
.col-groups { margin: 0; padding: var(--s1) var(--s2) var(--s3); list-style: none; }
.col-group + .col-group { border-top: 1px solid var(--divider); }
.col-group-head { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); }
.col-group-check { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--action); cursor: pointer; }
.col-group-check-spacer { width: 18px; flex-shrink: 0; }
.col-group-toggle {
  flex: 1; display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s1);
  border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.col-group-toggle:hover { background: var(--hover); }
.col-group-name { flex: 1; font-size: var(--fs-small); font-weight: 600; }
.col-group-count { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); }
.col-group-toggle .icon { color: var(--text-muted); transition: transform var(--dur) var(--ease-out); }
.col-group.open .col-group-toggle .icon { transform: rotate(90deg); }
.col-group .col-order { padding: 0 0 var(--s2) var(--s6); }

/* ---------- Filter panel (filters.js) ---------- */
.btn.is-filtering { border-color: var(--action); background: var(--action-tint); color: var(--text); }
.flt-panel {
  position: absolute; top: calc(100% + var(--s2)); right: 0; z-index: var(--z-overlay);
  width: min(860px, calc(100vw - var(--s8))); max-height: min(72vh, 680px); display: flex; flex-direction: column;
  border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--raised); box-shadow: var(--shadow-overlay);
  animation: pop var(--dur) var(--ease-out);
}

.flt-hint { margin-bottom: var(--s3); font-size: var(--fs-micro); color: var(--text-muted); }
/* quick filters */
.flt-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); }
.flt-qcol h4 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }
.flt-qvals { display: flex; flex-wrap: wrap; gap: var(--s1); }
.flt-qval {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 30px; padding: 0 var(--s2);
  border: 1px solid var(--control-border); border-radius: var(--radius-pill); background: transparent; color: var(--text); font-size: var(--fs-micro); cursor: pointer;
}
.flt-qval:hover { background: var(--hover); }
.flt-qval[aria-pressed="true"] { border-color: var(--action); background: var(--action-tint); font-weight: 600; }
.flt-qcount { font-family: var(--font-mono); color: var(--text-faint); }
/* advanced */
.flt-rows { display: flex; flex-direction: column; gap: var(--s2); }
.flt-row { display: grid; grid-template-columns: 84px minmax(150px, 1.1fr) minmax(130px, 0.9fr) minmax(170px, 1.4fr) 30px; align-items: start; gap: var(--s2); }
.flt-row .input { height: 38px; min-width: 0; }
.flt-row.incomplete .flt-value-cell .input, .flt-row.incomplete .flt-summary { border-style: dashed; }
.flt-where { display: flex; align-items: center; height: 38px; padding-left: var(--s2); font-size: var(--fs-small); color: var(--text-muted); }
.flt-logic { padding-left: var(--s2); }
.flt-value-cell { min-width: 0; }
.flt-between { display: flex; align-items: center; gap: var(--s2); }
.flt-between .input { flex: 1; }
.flt-picker { position: relative; }
.flt-summary { display: flex; align-items: center; height: 38px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; list-style: none; cursor: pointer; }
.flt-summary::-webkit-details-marker { display: none; }
.flt-picker-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; gap: 2px;
  max-height: 260px; padding: var(--s2); overflow: auto; border: 1px solid var(--divider); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-overlay);
}
.flt-picker-list .check { padding: 4px var(--s2); border-radius: var(--radius-xs); font-size: var(--fs-small); }
.flt-picker-list .check:hover { background: var(--hover); }
.flt-group-wrap { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s2); align-items: start; }
.flt-group { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border: 1px solid color-mix(in srgb, var(--action) 30%, var(--control-border)); border-radius: var(--radius-sm); background: var(--action-tint); }
.flt-group .flt-row { grid-template-columns: 84px minmax(130px, 1.1fr) minmax(120px, 0.9fr) minmax(150px, 1.4fr) 30px; }
.flt-group-actions { display: flex; gap: var(--s2); }
.flt-add { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--divider); }
.flt-none { padding: var(--s2) 0; }
@media (max-width: 767px) {
  .flt-panel { position: fixed; top: auto; left: var(--s2); right: var(--s2); bottom: calc(var(--s2) + var(--safe-bottom)); width: auto; max-height: 80vh; }
  .flt-row, .flt-group .flt-row { grid-template-columns: 1fr 30px; }
  .flt-row > .flt-where, .flt-row > .flt-logic { grid-column: 1 / -1; }
  .flt-row > select, .flt-row > .flt-value-cell { grid-column: 1; }
  .flt-row > [data-f="remove"] { grid-column: 2; grid-row: 2; }
  .flt-group-wrap { grid-template-columns: 1fr; }
}

/* ---------- Country pickers grouped by region (collapsible) ---------- */
.picker-group.collapsible { border-bottom: 1px solid var(--divider); }
.picker-group.collapsible .picker-group-head { position: static; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); background: transparent; }
.picker-group-check { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--action); cursor: pointer; }
.picker-group-toggle {
  flex: 1; display: flex; align-items: center; gap: var(--s2); min-height: 42px; padding: 0 var(--s1);
  border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.picker-group-toggle:hover { background: var(--hover); }
.picker-group-name { flex: 1; font-size: var(--fs-small); font-weight: 600; }
.picker-group-count { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); }
.picker-group-toggle .icon { color: var(--text-muted); transition: transform var(--dur) var(--ease-out); }
.picker-group.collapsible.open .picker-group-toggle .icon { transform: rotate(90deg); }
.picker-group.collapsible .picker-item { display: none; padding-left: calc(var(--s6) + var(--s2)); }
.picker-group.collapsible.open .picker-item:not([hidden]),
.picker-box.searching .picker-group.collapsible .picker-item:not([hidden]) { display: flex; }
.flt-qnote { margin: calc(-1 * var(--s1)) 0 var(--s2); font-size: var(--fs-micro); color: var(--text-faint); }

/* Banned jurisdictions (M2.7, verbatim) on the merchant geography step */

/* ---------- Merchant / provider questionnaires (questionnaire.js — mirrors the form prototypes) ---------- */
.q-header .record-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.q-title-sub { font-size: var(--fs-body); font-weight: 500; color: var(--text-muted); }
.q-intro { max-width: 72ch; color: var(--text-muted); }
.q-o1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: var(--fs-small); }
.q-progress { margin-top: var(--s3); font-size: var(--fs-micro); font-family: var(--font-mono); color: var(--text-faint); }
.q-alert ul { margin: var(--s2) 0 0 var(--s4); }
.q-alert a { color: var(--link); }
.q-form { display: flex; flex-direction: column; gap: var(--s3); }
.q-el { border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--surface); }
.q-el-bar { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s3) var(--s4); border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; border-radius: var(--radius-md); }
.q-el-bar:hover { background: var(--hover); }
.q-el-num { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--action-tint); color: var(--accent-text); font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; }
.q-el-name { flex: 1; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-heading); }
.q-el-tick { font-size: var(--fs-micro); color: var(--accent-text); }
.q-el-err { padding: 2px var(--s2); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--error) 18%, transparent); color: var(--error-text); font-size: var(--fs-micro); font-weight: 600; }
.q-el-bar > .icon { color: var(--text-muted); transition: transform var(--dur) var(--ease-out); }
.q-el.open > .q-el-bar > .icon { transform: rotate(90deg); }
.q-el-body { display: none; padding: 0 var(--s4) var(--s4); }
.q-el.open > .q-el-body { display: block; }
.q-el-foot { display: flex; justify-content: flex-end; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--divider); }
.q-note { margin: var(--s2) 0 var(--s3); font-size: var(--fs-small); color: var(--text-muted); max-width: 80ch; }
.q-sub { font-size: var(--fs-micro); color: var(--text-faint); font-weight: 400; }
.q-label { display: block; margin: var(--s3) 0 var(--s2); font-size: var(--fs-small); font-weight: 600; }
.q-field { min-width: 0; }
.q-field .q-label { margin-top: 0; }
.q-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); margin-bottom: var(--s3); }
.q-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.q-mini { max-width: 420px; }
.q-inline { margin: var(--s1) 0; }
.q-derived, .q-ctx { margin-top: var(--s3); padding: var(--s2) var(--s3); border: 1px solid color-mix(in srgb, var(--action) 25%, transparent); border-radius: var(--radius-sm); background: var(--action-tint); font-size: var(--fs-small); }
.q-radios { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); }
.q-opt { display: flex; align-items: flex-start; gap: var(--s3); min-height: 36px; padding: var(--s2) var(--s2); border-radius: var(--radius-xs); cursor: pointer; font-size: var(--fs-small); }
.q-opt:hover { background: var(--hover); }
.q-opt input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--action); }
.q-opt-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.q-branch { margin-top: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--raised); }
.q-branch-h { margin: var(--s4) 0 var(--s2); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
.q-branch > .q-branch-h:first-child { margin-top: 0; }
.q-subrow { margin: 0 0 var(--s2) calc(var(--s6) + var(--s2)); }
.q-subrow2 { margin-top: var(--s3); }
.q-mcc { margin-top: var(--s4); }
.q-pull { margin: var(--s3) 0; font-size: var(--fs-micro); color: var(--text-muted); }
.q-banned { margin-top: var(--s3); padding: var(--s3); border: 1px solid color-mix(in srgb, var(--error) 45%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--error) 10%, transparent); font-size: var(--fs-small); }
.q-cond-note { margin-top: var(--s1); font-size: var(--fs-micro); color: var(--warning-text); }
.q-search { position: relative; margin: var(--s2) 0 var(--s3); max-width: 420px; }
.q-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
/* inputs: no room for an icon (the base .input leaves it), except the search boxes; selects keep room for their arrow */
.q-form .input, .q-summary .input { padding: 0 var(--s3); }
.q-form .input.select { padding-right: var(--s8); }
.q-form .q-search .input { padding-left: 38px; }
.q-seg { margin-bottom: var(--s2); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--raised); }
.q-seg-bar { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3) 0 0; }
.q-seg-toggle { flex: 1; display: flex; align-items: center; gap: var(--s2); min-height: 42px; padding: 0 var(--s3); border: 0; background: transparent; color: var(--text); text-align: left; font-weight: 600; font-size: var(--fs-small); cursor: pointer; border-radius: var(--radius-sm); }
.q-seg-toggle:hover { background: var(--hover); }
.q-seg-toggle .icon { color: var(--text-muted); transition: transform var(--dur) var(--ease-out); }
.q-seg.open .q-seg-toggle .icon { transform: rotate(90deg); }
.q-seg-selall { padding: 2px var(--s2); border: 1px solid var(--control-border); border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font-size: var(--fs-micro); cursor: pointer; }
.q-seg-selall:hover { color: var(--text); border-color: var(--action); }
.q-seg-count { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent-text); white-space: nowrap; }
.q-seg-count.empty { color: var(--text-faint); }
.q-seg-body { display: none; padding: 0 var(--s3) var(--s2) var(--s5); }
.q-seg.open .q-seg-body { display: block; }
.q-seg-foot { display: flex; justify-content: flex-end; }
.q-link { padding: var(--s1) var(--s2); border: 0; background: none; color: var(--link); font-size: var(--fs-micro); cursor: pointer; }
.q-flat { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 var(--s3); }
.q-legend { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0; }
.q-offer-note { margin: 0 0 var(--s2) var(--s6); padding: var(--s2) var(--s3); border-radius: var(--radius-xs); background: var(--hover); font-size: var(--fs-micro); color: var(--text-muted); }
.q-flows { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: 0 0 var(--s2) calc(var(--s6) + var(--s2)); }
.q-flow-lead { font-size: var(--fs-micro); color: var(--text-muted); margin-right: var(--s1); }
.q-flow { min-height: 28px; padding: 0 var(--s3); border: 1px solid var(--control-border); border-radius: var(--radius-pill); background: transparent; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-micro); cursor: pointer; }
.q-flow[aria-pressed="true"] { border-color: var(--action); background: var(--action); color: var(--action-on); font-weight: 600; }
.q-npanel { margin-bottom: var(--s2); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--raised); }
.q-npanel-bar { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 44px; padding: 0 var(--s3); border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.q-npanel-bar:hover { background: var(--hover); }
.q-npanel-bar .icon { color: var(--text-muted); transition: transform var(--dur) var(--ease-out); }
.q-npanel.open .q-npanel-bar .icon { transform: rotate(90deg); }
.q-npanel-cat { padding: 1px var(--s2); border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 600; }
.q-cat-banking { background: color-mix(in srgb, var(--info) 22%, transparent); color: var(--info-text); }
.q-cat-acquiring { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning-text); }
.q-cat-apm { background: color-mix(in srgb, var(--accent-2) 26%, transparent); color: var(--accent-2-text); }
.q-cat-currency { background: var(--action-tint); color: var(--accent-text); }
.q-npanel-title { flex: 1; font-weight: 600; font-size: var(--fs-small); }
.q-npanel-body { display: none; padding: 0 var(--s3) var(--s3); }
.q-npanel.open .q-npanel-body { display: block; }
.q-ind { margin-top: var(--s3); }
.q-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.q-flow-line { padding: var(--s1) 0; font-size: var(--fs-small); }
.q-floor-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.q-floor-row .input { max-width: 180px; }
.q-floor-row .q-opt { padding: 0; min-height: 0; }
.q-ubo { margin-bottom: var(--s3); padding: var(--s3); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--raised); }
.q-ubo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); font-weight: 600; font-size: var(--fs-small); }
.q-actions { display: flex; justify-content: flex-end; gap: var(--s3); margin: var(--s5) 0 var(--s2); }
.q-summary .q-sum-card { padding: var(--s5); }
.q-sum-title { margin-bottom: var(--s1); font-family: var(--font-display); font-size: var(--fs-h3); }
.q-sum-sec { padding: var(--s3) 0; border-top: 1px solid var(--divider); }
.q-sum-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.q-sum-sec-title { flex: 1; font-weight: 600; }
.q-sum-val { padding-left: calc(28px + var(--s3)); font-size: var(--fs-small); }
.q-sum-val ul { margin: 0; padding-left: var(--s4); }
.q-sum-val .none { color: var(--text-faint); }
.q-sum-tag { display: inline-block; margin-top: var(--s1); font-size: var(--fs-micro); color: var(--text-muted); }
/* chips (prototype tag colours, in the CRM palette) */
.qtag { display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--radius-xs); font-size: var(--fs-micro); line-height: 18px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.t-prud { background: color-mix(in srgb, var(--info) 20%, transparent); color: var(--info-text); }
.t-aml { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning-text); }
.t-scheme { background: color-mix(in srgb, var(--accent-2) 24%, transparent); color: var(--accent-2-text); }
.t-inst, .t-rt { background: var(--action-tint); color: var(--accent-text); }
.t-batch { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info-text); }
.t-rtgs { background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--accent-2-text); }
.t-bill, .t-cash { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning-text); }
.t-msg, .t-mm { background: var(--hover); color: var(--text-muted); border-color: var(--control-border); }
.t-a2a { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info-text); }
.t-wal { background: color-mix(in srgb, var(--accent-2) 20%, transparent); color: var(--accent-2-text); }
.t-bnpl { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning-text); }
.t-dom { background: var(--action); color: var(--action-on); }
.t-leg { background: transparent; color: var(--text-faint); border-color: var(--control-border); }
.t-o1 { background: var(--action-tint); color: var(--accent-text); border-color: var(--action); }
.q-segment.q-seg-onshore { background: var(--action-tint); color: var(--accent-text); }
.q-segment.q-seg-offshore { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning-text); }
.q-flag { background: var(--hover); color: var(--text-muted); border-color: var(--control-border); }
.q-flag-pseudo, .q-flag-historical, .q-flag-cert, .q-flag-low-credibility, .q-flag-high-fraud-risk, .q-flag-no-retail { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error-text); border-color: transparent; }
.q-pass { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info-text); }
@media (max-width: 767px) {
  .q-grid2, .q-grid3 { grid-template-columns: 1fr; }
  .q-seg-body { padding-left: var(--s3); }
  .q-subrow, .q-flows, .q-offer-note { margin-left: var(--s4); }
  .q-actions { flex-direction: column-reverse; }
  .q-actions .btn { width: 100%; }
  .q-sum-val { padding-left: 0; }
}

/* ---------- Matches & prechecks: movable columns, precheck menu ---------- */
.m-th { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; }
.m-grip { display: inline-grid; place-items: center; width: 20px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-faint); font-size: var(--fs-micro); letter-spacing: -2px; cursor: grab; }
.m-grip:hover, .m-grip:focus-visible { color: var(--text); background: var(--hover); }
.m-grip:active { cursor: grabbing; }
.m-movable.drag-over { box-shadow: inset 3px 0 0 var(--action); }

.m-reset { margin: var(--s2) 0 0 var(--s1); font-size: var(--fs-micro); }

/* ---------- Filter pop-up (overrides the old dropdown panel) ---------- */
body.flt-open { overflow: hidden; }
.flt-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal, 300); display: flex; align-items: center; justify-content: center;
  padding: max(var(--s5), env(safe-area-inset-top, 0px)) var(--s5) max(var(--s5), env(safe-area-inset-bottom, 0px));
  background: var(--overlay); backdrop-filter: blur(3px); animation: fade var(--dur) var(--ease-out);
}
.flt-panel.flt-modal {
  position: relative; top: auto; right: auto; width: min(1180px, 100%);
  height: min(780px, calc(100dvh - 2 * var(--s5))); max-height: none;   /* sized to the window, not its content */
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-overlay);
  animation: pop var(--dur) var(--ease-out);
}
.flt-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--divider); }
.flt-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
.flt-count { margin-top: 2px; font-size: var(--fs-small); color: var(--text-muted); }
.flt-close { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--control-border);
  border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.flt-close:hover { color: var(--text); background: var(--hover); }
/* inputs in the pop-up: no icon space (the base .input leaves it), except the search box; selects keep room for the arrow */
.flt-modal .input { padding: 0 var(--s3); }
.flt-modal .input.select { padding-right: var(--s7, 28px); }
.flt-modal .flt-qsearch .input { padding-left: 38px; }
.flt-modal-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); min-height: 0; }
.flt-pane { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.flt-pane + .flt-pane { border-left: 1px solid var(--divider); }
.flt-pane-head { padding: var(--s4) var(--s5) var(--s3); border-bottom: 1px solid var(--divider); }
.flt-pane-head h3 { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.flt-pane-head .flt-hint { margin: var(--s1) 0 0; }
.flt-pane-scroll { min-height: 0; overflow: auto; padding: var(--s4) var(--s5); overscroll-behavior: contain; }
.flt-qsearch { position: relative; margin-top: var(--s3); }
.flt-qsearch .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.flt-qsearch .input { padding-left: 38px; height: 38px; }
.flt-modal .flt-quick { grid-template-columns: 1fr; gap: var(--s4); }
.flt-modal .flt-qcol { padding-bottom: var(--s3); border-bottom: 1px dashed var(--divider); }
.flt-modal .flt-qcol:last-child { border-bottom: 0; }
.flt-modal .flt-row { grid-template-columns: 78px minmax(130px, 1.1fr) minmax(120px, 0.9fr) minmax(150px, 1.4fr) 30px; }
.flt-modal .flt-group-wrap { grid-template-columns: 78px minmax(0, 1fr); }
.flt-modal .flt-group .flt-row { grid-template-columns: 74px minmax(120px, 1.1fr) minmax(110px, 0.9fr) minmax(140px, 1.4fr) 30px; }
.flt-modal .flt-picker-list { position: static; margin-top: 4px; box-shadow: none; }
.flt-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s5); border-top: 1px solid var(--divider); background: var(--raised); border-radius: 0 0 var(--radius-md) var(--radius-md); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1023px) {
  /* stacked: one scrolling column, each pane at its full height */
  .flt-modal-body { display: block; overflow: auto; overscroll-behavior: contain; }
  .flt-pane { display: block; min-height: auto; }
  .flt-pane + .flt-pane { border-left: 0; border-top: 1px solid var(--divider); }
  .flt-pane-scroll { overflow: visible; }
}
@media (max-width: 767px) {
  .flt-backdrop { padding: 0; }
  .flt-panel.flt-modal { width: 100%; height: 100dvh; border-radius: 0; border: 0; inset: auto; position: relative; left: auto; bottom: auto; }
  .flt-modal-head, .flt-pane-head, .flt-pane-scroll { padding-left: var(--s4); padding-right: var(--s4); }
  .flt-modal .flt-row, .flt-modal .flt-group .flt-row { grid-template-columns: 1fr 30px; }
  .flt-modal .flt-group-wrap { grid-template-columns: 1fr; }
  .flt-modal-foot { padding-bottom: max(var(--s3), env(safe-area-inset-bottom, 0px)); border-radius: 0; }
  .flt-modal-foot .btn-primary { flex: 1; }
}

/* ---------- Record pages: tidy sections (merchants & providers) ---------- */
.record-section.tidy { padding-top: 0; padding-bottom: 0; }
.record-section.tidy > h2 { margin: 0; }
.sec-toggle {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 60px; padding: var(--s3) 0;
  border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.sec-name { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: var(--fs-h3, 1.25rem); font-weight: 600; white-space: nowrap; }
.sec-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--text-muted); }
.sec-toggle > .icon:last-child { flex-shrink: 0; color: var(--text-muted); transform: rotate(90deg); transition: transform var(--dur) var(--ease-out); }
.record-section.tidy.collapsed .sec-toggle > .icon:last-child { transform: none; }
.sec-toggle:hover .sec-name { color: var(--accent-text); }
.sec-body { padding: 0 0 var(--s5); border-top: 1px solid var(--divider); padding-top: var(--s4); }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.field-grid + .rel-grid { margin-top: var(--s5); }
.rel-block.card { margin: 0; padding: var(--s3) var(--s4); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--raised); }
.rel-block.card h3 { margin-bottom: var(--s2); }
.rel-body.is-clamped { max-height: 7.25rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.clamp-toggle { margin-top: var(--s2); font-size: var(--fs-micro); }
.sec-empty { margin-top: var(--s4); }
.sec-empty > summary { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-micro); color: var(--text-muted); cursor: pointer; list-style: none; }
.sec-empty > summary::before { content: ""; display: inline-block; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--dur) var(--ease-out); }
.sec-empty[open] > summary::before { transform: rotate(90deg); }
.sec-empty > summary::-webkit-details-marker { display: none; }
.sec-empty > summary:hover { color: var(--text); }
.sec-empty .field-grid { margin-top: var(--s3); }
.sec-empty .field-grid dt, .sec-empty .field-grid .cell-empty { color: var(--text-faint); }
@media (max-width: 767px) {
  .sec-toggle { flex-wrap: wrap; row-gap: 2px; }
  .sec-summary { order: 3; flex-basis: 100%; text-align: left; white-space: normal; }
  .rel-grid { grid-template-columns: 1fr; }
}

/* ---------- "+N" cells: all values on hover / focus (more-pop.js) ---------- */
.has-more { cursor: help; border-radius: var(--radius-xs); }
.has-more:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.has-more .chip.more { text-decoration: underline dotted; text-underline-offset: 2px; }
.more-pop {
  position: fixed; z-index: var(--z-toast, 500); padding: var(--s3); overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-overlay);
  animation: fade var(--dur-fast, 120ms) var(--ease-out);
}
.more-pop-head { margin-bottom: var(--s2); font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); }
.more-pop-list { display: flex; flex-wrap: wrap; gap: var(--s1); }
.more-pop-list .cell-link { display: block; width: 100%; padding: 2px 0; }

/* ---------- Record page: comments strip, "At a glance", Quick menu ---------- */
.comment-strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4); border: 1px solid var(--divider);
  border-radius: var(--radius-sm); background: var(--surface);
}
.comment-strip-head { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: var(--fs-small); }
.comment-strip-head .icon { color: var(--info-text); }
.comment-strip-latest { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; font-size: var(--fs-small); }
.comment-strip-meta { flex-shrink: 0; color: var(--text-muted); font-size: var(--fs-micro); }
.comment-strip-body { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.glance { margin-bottom: var(--s4); padding: var(--s4) var(--s5); }
.glance h2 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.glance-list { margin: 0; padding: 0; list-style: none; }
.glance-list li + li { border-top: 1px solid var(--divider); }
.glance-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: start; gap: var(--s4); width: 100%;
  padding: var(--s3) var(--s2); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.glance-row:hover { background: var(--hover); }
.glance-row:hover .glance-label { color: var(--accent-text); }
.glance-label { font-weight: 600; font-size: var(--fs-small); }
/* separators only between items on the same line: each item starts with a dot, and dots that land at the
   start of a line fall into the clipped margin */
.glance-clip { min-width: 0; overflow: hidden; }
.glance-text { display: flex; flex-wrap: wrap; row-gap: var(--s1); margin-left: -1.5em; font-size: var(--fs-small); color: var(--text-muted); }
.glance-text span { position: relative; padding-left: 1.5em; }      /* wrapped lines of a long item start after its dot */
.glance-text span::before { content: "·"; position: absolute; left: 0; width: 1.5em; text-align: center; color: var(--text-faint); }
.glance-row > .icon { margin-top: 3px; color: var(--text-faint); }
.flt-pick-search { position: relative; margin-bottom: var(--s2); }
.flt-pick-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.flt-modal .flt-pick-search .input { height: 34px; padding-left: 32px; font-size: var(--fs-small); }
.flt-picker-list label.check[hidden] { display: none; }
@media (max-width: 767px) {
  .comment-strip { grid-template-columns: 1fr auto; }
  .comment-strip-latest { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  .glance { padding: var(--s3) var(--s4); }
  .glance-row { grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); }
  .glance-clip { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Merchant form: qualification switches ---------- */
.q-switches { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: var(--s2) 0 var(--s3); }
.q-switch { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--divider);
  border-radius: var(--radius-sm); background: var(--raised); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.q-switch:hover:not(:disabled) { border-color: var(--action); }
.q-switch:disabled { cursor: not-allowed; opacity: 0.6; }
.q-switch-track { position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: 999px; background: var(--control-border); transition: background var(--dur) var(--ease-out); }
.q-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform var(--dur) var(--ease-out); }
.q-switch[aria-checked="true"] .q-switch-track { background: var(--action); }
.q-switch[aria-checked="true"] .q-switch-knob { transform: translateX(20px); background: var(--action-on); }
.q-switch-text { display: flex; flex-direction: column; }
.q-qual-lock { color: var(--warning-text); }

/* a section header with an action button (e.g. "Register opportunity") */
.sec-head { display: flex; align-items: center; gap: var(--s3); }
.sec-head > h2 { flex: 1; min-width: 0; margin-bottom: 0; }   /* the toggle's own padding spaces it; the body adds the rest */
.sec-action { flex-shrink: 0; }
.sec-action-note { align-self: center; font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 767px) { .sec-head { flex-wrap: wrap; } .sec-head .sec-action { margin-bottom: var(--s3); } }

/* ---------- Share form link (merchant form) and the public form page (form.html) ---------- */
.share-link { margin-top: var(--s4); }
.share-link-box { margin-top: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--raised); max-width: 760px; }
.share-link-row { display: flex; gap: var(--s2); }
.share-link-row .input { flex: 1; min-width: 0; padding: 0 var(--s3); font-family: var(--font-mono); font-size: var(--fs-small); }
.share-link-box .q-sub { display: block; margin-top: var(--s2); }
.public-page { min-height: 100dvh; background: var(--bg); }
.public-head { display: flex; align-items: center; gap: var(--s3); max-width: 1100px; margin: 0 auto; padding: var(--s5) var(--s5) 0; }
.public-logo { height: 32px; width: auto; }
.public-brand { font-family: var(--font-display); font-weight: 600; color: var(--text-muted); }
.public-shell { max-width: 1100px; margin: 0 auto; padding: var(--s4) var(--s5) var(--s8); }
.public-message { max-width: 640px; margin: var(--s8) auto; padding: var(--s6); text-align: center; }
.public-message p { margin-top: var(--s3); color: var(--text-muted); }
.public-message.done .record-title { color: var(--accent-text); }
.public-toast { position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); z-index: 500; max-width: min(560px, 92vw);
  padding: var(--s3) var(--s4); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-overlay); }
@media (max-width: 767px) { .public-shell, .public-head { padding-left: var(--s4); padding-right: var(--s4); } .share-link-row { flex-direction: column; } }

/* ---------- Deals table: stage menu ---------- */
.deal-stage-select { height: 32px; min-width: 190px; max-width: 260px; padding: 0 var(--s8) 0 var(--s3); font-size: var(--fs-small); font-weight: 600; }
.deal-stage-select.tone-info { border-color: color-mix(in srgb, var(--info) 55%, transparent); color: var(--info-text); }
.deal-stage-select.tone-success { border-color: color-mix(in srgb, var(--success) 60%, transparent); color: var(--success-text); }
.deal-stage-select.tone-warning { border-color: color-mix(in srgb, var(--warning) 55%, transparent); color: var(--warning-text); }
.deal-stage-select.tone-danger { border-color: color-mix(in srgb, var(--error) 55%, transparent); color: var(--error-text); }
.deal-stage-select option { color: var(--text); }

/* money is EUR only: a fixed currency label where a currency choice used to be */
.static-currency { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s3); border: 1px dashed var(--control-border);
  border-radius: var(--radius-xs); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-small); }

/* ---------- Dashboard (dashboard.js) ---------- */
.dash { display: flex; flex-direction: column; gap: var(--s5); padding-bottom: var(--s8); }
.dash-head .record-title { margin-top: var(--s1); }
.dash-sub { margin-top: var(--s2); color: var(--text-muted); max-width: 72ch; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); }

.dash-panel { padding: var(--s4) var(--s5); min-width: 0; }
.dash-panel-head { margin-bottom: var(--s3); }
.dash-panel-head h2 { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: var(--fs-h3, 1.25rem); font-weight: 600; }
.dash-hint { margin-top: var(--s1); font-size: var(--fs-small); color: var(--text-muted); }
.dash-empty { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0; color: var(--text-muted); font-size: var(--fs-small); }
.dash-empty .icon { color: var(--accent-text); }

.dash-table, .pv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.dash-table th, .dash-table td, .pv-table th, .pv-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--divider); text-align: left; vertical-align: middle; }
.dash-table thead th, .pv-table thead th { font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.dash-table .right, .pv-table .right { text-align: right; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong { font-weight: 600; }

.pv-scroll { overflow-x: auto; }

.pv-presets { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.chip-btn { min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--control-border); border-radius: 999px; background: transparent; color: var(--text); font-size: var(--fs-small); cursor: pointer; }
.chip-btn:hover { border-color: var(--action); }
.chip-btn[aria-pressed="true"] { border-color: var(--action); background: var(--action-tint); color: var(--accent-text); font-weight: 600; }
.pv-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); padding: var(--s3); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--raised); }
.pv-ctl { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); }
.pv-ctl .input { height: 36px; min-width: 150px; padding: 0 var(--s3); font-size: var(--fs-small); }
.pv-ctl .input.select { padding-right: var(--s8); }

.pv-title { margin: var(--s4) 0 var(--s2); font-weight: 600; }
.ch { margin: 0 0 var(--s4); }
.ch svg { width: 100%; height: auto; display: block; }
.ch-grid { stroke: var(--divider); stroke-width: 1; }
.ch-x, .ch-y { fill: var(--text-muted); font-size: var(--fs-micro); font-family: var(--font-body); }
.ch-name { fill: var(--text); font-size: var(--fs-micro); font-family: var(--font-body); }
.ch-name.other, .pv-other th { fill: var(--text-muted); color: var(--text-muted); font-style: italic; }
.ch-break { stroke: var(--surface); stroke-width: 3; }
.ch-val { fill: var(--text-muted); font-size: var(--fs-micro); font-family: var(--font-mono); }
.pv-note { display: flex; gap: var(--s2); align-items: flex-start; margin: 0 0 var(--s3); font-size: var(--fs-small); color: var(--text-muted); }
.pv-note .icon { flex-shrink: 0; margin-top: 2px; color: var(--info-text); }
.ch-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); font-size: var(--fs-small); color: var(--text-muted); }
.ch-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }

@media (max-width: 767px) {
  .dash-panel { padding: var(--s3) var(--s4); }
  .pv-controls { flex-direction: column; align-items: stretch; }
  .pv-ctl .input { min-width: 0; width: 100%; }

  
}

/* ---------- Tasks (tasks.js) ---------- */
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--action); color: var(--action-on);
  font-size: var(--fs-micro); font-weight: 700; line-height: 20px; text-align: center; }
.nav-badge.overdue { background: var(--error-solid); color: var(--on-error); }
.tasks-page { display: flex; flex-direction: column; gap: var(--s4); padding-bottom: var(--s8); }
.tasks-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.tasks-filters .tasks-search { flex: 1; min-width: 220px; }
.tasks-filters .tasks-search .input { width: 100%; }
.seg-toggle { display: inline-flex; margin-left: auto; border: 1px solid var(--control-border); border-radius: var(--radius-sm); overflow: hidden; }
.seg-toggle button { min-height: 36px; padding: 0 var(--s4); border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.seg-toggle button + button { border-left: 1px solid var(--control-border); }
.seg-toggle button[aria-pressed="true"] { background: var(--action-tint); color: var(--accent-text); font-weight: 600; }
.task-form { padding: var(--s4) var(--s5); }
.task-form h2 { margin-bottom: var(--s3); font-family: var(--font-display); font-size: var(--fs-h3, 1.25rem); font-weight: 600; }
.task-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.task-form-grid .span2 { grid-column: 1 / -1; }
.task-form .input { padding: 0 var(--s3); }
.task-form textarea.input, .task-sendback textarea.input { padding: var(--s2) var(--s3); height: auto; resize: vertical; }
.task-form .input.select { padding-right: var(--s8); }
.task-form-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s3); }

/* Agents page (js/agents.js): one sortable table */
.agents-panel { padding: 0; overflow: hidden; }
.agents-table th.agent-name { font-weight: 600; color: var(--text); font-size: var(--fs-small); text-transform: none; letter-spacing: 0; }
.agents-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.agents-table .agent-split { display: block; font-size: var(--fs-micro); }
.agents-table tr.is-inactive th, .agents-table tr.is-inactive td.num { color: var(--text-muted); }
.agent-sort { display: inline-flex; align-items: center; gap: var(--s1); padding: 0; border: 0; background: none; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.agent-sort .icon { opacity: 0.45; }
.agent-sort.is-on, .agent-sort:hover { color: var(--text); }
.agent-sort.is-on .icon { opacity: 1; }
.agent-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.agent-active { display: flex; align-items: center; gap: var(--s2); min-height: 40px; font-size: var(--fs-small); }
.agents-note { max-width: 70ch; }

/* Dashboard Expo tab (js/expo-tab.js): upcoming and past conferences */
.expo-tab { display: flex; flex-direction: column; gap: var(--s4); }
.expo-group { padding: 0; overflow: hidden; }
.expo-group h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s4);
  font-family: var(--font-display); font-size: var(--fs-h3, 1.25rem); font-weight: 600; }
.expo-group h2 .m-sub { font-family: inherit; font-weight: 400; }
.expo-group .dash-empty { padding: 0 var(--s4) var(--s4); }
.expo-table th.expo-name { font-weight: 600; color: var(--text); font-size: var(--fs-small); text-transform: none; letter-spacing: 0; }
.expo-table .expo-site { display: flex; align-items: center; gap: 4px; width: fit-content; margin-top: 2px; font-weight: 400;
  font-size: var(--fs-micro); color: var(--text-muted); }
.expo-table .expo-site:hover { color: var(--accent-text); }
.expo-table td.num, .expo-table tfoot td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.expo-table .nowrap { white-space: nowrap; }
.expo-table tfoot th, .expo-table tfoot td { border-bottom: 0; border-top: 1px solid var(--divider); font-size: var(--fs-small); }
.expo-acts { white-space: nowrap; }
.expo-acts .btn { margin-left: var(--s1); }
.task-group-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.task-group-h .m-sub { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: var(--s2); }
.task-group.overdue .task-group-h { color: var(--error-text); }
.task-group.awaiting .task-group-h { color: var(--warning-text); }
.task-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: var(--s3) var(--s4);
  border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--surface); }
.task-check { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border: 2px solid var(--control-border); border-radius: 50%;
  background: transparent; color: transparent; cursor: pointer; }
button.task-check:hover, button.task-check:focus-visible { border-color: var(--action); color: var(--accent-text); }
.task-check.is-waiting { border-color: var(--warning); color: var(--warning-text); cursor: default; }
.task-check.is-done { border-color: var(--success); background: var(--success); color: var(--action-on); cursor: default; }
.task-check.is-off { cursor: default; opacity: 0.4; }
.task-title { font-weight: 600; }
.task-desc { margin-top: 2px; font-size: var(--fs-small); color: var(--text-muted); white-space: pre-line; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin-top: var(--s2); font-size: var(--fs-small); }
.task-due { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.task-due.overdue { color: var(--error-text); font-weight: 600; } .task-due.today { color: var(--warning-text); font-weight: 600; }
.task-who { color: var(--text-muted); }
.task-status { display: flex; align-items: center; gap: 6px; margin-top: var(--s2); font-size: var(--fs-small); }
.task-status.waiting { color: var(--warning-text); } .task-status.done { color: var(--success-text); } .task-status.sent-back { color: var(--warning-text); }
.task-actions { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }
.task-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); cursor: pointer; }
.task-icon:hover, .task-icon:focus-visible { background: var(--hover); color: var(--text); }
.task-sendback { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--raised); }
.task-sendback textarea { width: 100%; }
@media (max-width: 767px) {
  .task-form-grid { grid-template-columns: 1fr; }
  .task { grid-template-columns: auto minmax(0, 1fr); }
  .task-actions { grid-column: 2; justify-content: flex-start; }
  .seg-toggle { margin-left: 0; }
}

/* ---------- Dashboard: Overview / Volume breakdown (breakdown.js) ---------- */

.bd-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--divider); border-radius: var(--radius-sm); }
.bd-scroll:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.bd-table { border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); min-width: 100%; }
.bd-table th, .bd-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--divider); white-space: nowrap; background: var(--surface); }
.bd-table thead th { position: sticky; top: 0; z-index: 2; font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; background: var(--raised); }
.bd-table .right { text-align: right; }
.bd-table .bd-sticky { position: sticky; left: 0; z-index: 1; min-width: 260px; max-width: 340px; text-align: left; white-space: normal; border-right: 1px solid var(--divider); }
.bd-table thead .bd-sticky { z-index: 3; }
.bd-table tfoot th, .bd-table tfoot td { position: sticky; bottom: 0; z-index: 1; font-weight: 700; background: var(--raised); border-top: 2px solid var(--divider); }
.bd-table tfoot .bd-sticky { z-index: 2; }

.bd-toggle { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; vertical-align: middle; border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-muted); cursor: pointer; }
.bd-toggle:hover, .bd-toggle:focus-visible { background: var(--hover); color: var(--text); }
.bd-toggle .icon { transition: transform var(--dur) var(--ease-out); }
.bd-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
@media (max-width: 767px) { .bd-table .bd-sticky { min-width: 170px; max-width: 200px; } }

/* ---------- Volume table on the overview (sheet layout) ---------- */

.bd-foot { margin-top: var(--s2); font-size: var(--fs-micro); }

/* Financials pivot (js/finance-pivot.js): controls, headline figures, the chart and the pivot table */
.fp-controls { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); border: 1px solid var(--divider);
  border-radius: var(--radius-sm); background: var(--raised); }
.fp-ctlrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.fp-ctlrow + .fp-ctlrow { padding-top: var(--s3); border-top: 1px solid var(--divider); }
.fp-ctl-label { align-self: center; min-width: 56px; font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.fp-vals, .fp-filters { align-items: center; gap: var(--s2); }
.fp-val { min-height: 30px; }
.fp-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 4px 0 var(--s3); border-radius: 999px;
  background: var(--action-tint); color: var(--accent-text); font-size: var(--fs-small); }
.fp-chip b { font-weight: 600; }
.fp-chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.fp-chip button:hover, .fp-chip button:focus-visible { background: var(--hover); }
.fp-filters .pv-ctl .input { min-width: 170px; height: 32px; }
.fp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin: var(--s4) 0 0; overflow: hidden;
  border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--surface); }
.fp-kpi { margin: 0 -1px -1px 0; padding: var(--s3); border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.fp-kpi dt { font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.fp-kpi dd { margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.2rem); overflow-wrap: anywhere; font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-kpi.is-on { box-shadow: inset 0 -3px 0 var(--chart-1); }
.fp-chart { margin-top: var(--s5); }
.fp-chart .fp-bar, .fp-chart .fp-dot { transition: opacity var(--dur) var(--ease-out); }
.fp-chart svg:hover .fp-bar, .fp-chart svg:hover .fp-dot { opacity: 0.55; }
.fp-chart svg .fp-bar:hover, .fp-chart svg .fp-dot:hover { opacity: 1; }
.fp-chart .fp-zero { stroke: var(--text-muted); }
.fp-legend { gap: var(--s1) var(--s2); }
.fp-leg { display: inline-flex; align-items: center; padding: 2px var(--s2); border: 0; border-radius: var(--radius-xs); background: none;
  color: var(--text); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.fp-leg:hover { background: var(--hover); }
.fp-leg[aria-pressed="false"] { color: var(--text-muted); text-decoration: line-through; }
.fp-leg[aria-pressed="false"] i { opacity: 0.3; }
.fp-tablebar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin: var(--s3) 0 var(--s2); }
.fp-search { flex: 1; min-width: 200px; max-width: 360px; }
.fp-search .input { width: 100%; }
.fp-tableacts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.fp-tableacts [aria-pressed="true"] { background: var(--action-tint); color: var(--accent-text); }
.fp-table .bd-sticky { min-width: 240px; }
.fp-table thead .fp-colhead { text-align: center; border-left: 1px solid var(--divider); color: var(--text); }
.fp-table thead .fp-total { background: var(--action-tint); }
.fp-table thead th.right.fp-colhead { text-align: right; }
.fp-table td.num { font-variant-numeric: tabular-nums; }
.fp-table td.fp-heat { background: color-mix(in srgb, var(--chart-1) calc(var(--heat, 0) * 18%), var(--surface)); }
.fp-table td.fp-neg { color: var(--error-text); }
.fp-name { display: table-cell; }
.fp-name .fp-label { display: inline; }
.fp-name .m-sub { display: inline; margin-left: var(--s2); font-weight: 400; font-size: var(--fs-micro); }
.fp-r1 .fp-name { font-weight: 600; }
.fp-r2 th, .fp-r2 td { background: var(--raised); color: var(--text-muted); }
.fp-r2 .fp-name { padding-left: calc(var(--s3) + 30px); font-weight: 400; }
.fp-r1.is-open th, .fp-r1.is-open td { border-bottom-color: transparent; }
.fp-focus { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; vertical-align: middle; border: 0;
  border-radius: var(--radius-xs); background: none; color: var(--text-muted); cursor: pointer; opacity: 0; }
tr:hover .fp-focus, .fp-focus:focus-visible { opacity: 1; }
.fp-focus:hover { background: var(--hover); color: var(--text); }
@media (hover: none) { .fp-focus { opacity: 1; } }
.fp-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.fp-sort .icon { opacity: 0.45; }
.fp-sort.is-on, .fp-sort:hover { color: var(--text); }
.fp-sort.is-on .icon { opacity: 1; }
.fp-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.fp-then { font-weight: 400; }
.fp-more { margin-top: var(--s2); }
@media (max-width: 767px) {
  .fp-ctlrow { flex-direction: column; align-items: stretch; }
  .fp-vals, .fp-filters { flex-direction: row; }
  .fp-table .bd-sticky { min-width: 160px; }
}

/* ---------- Opportunities: new (no precheck sent) rows; precheck buttons and rejection reasons ---------- */
tr[data-mark] > td { font-weight: 700; }
.row-mark { flex-shrink: 0; margin-left: var(--s2); padding: 1px 8px; border-radius: 999px; background: var(--info); color: var(--on-info);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.02em; }
.m-pa { display: flex; gap: var(--s1); flex-wrap: wrap; }
.m-pa .btn { min-height: 30px; padding: 0 var(--s3); font-size: var(--fs-small); }
.btn-danger { border: 1px solid var(--error-solid); background: var(--error-solid); color: var(--on-error); }
.btn-danger:hover { filter: brightness(1.08); }
.m-reject { display: flex; flex-direction: column; gap: var(--s1); min-width: 240px; max-width: 320px; }
.m-reject-label { font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); }
.m-reject textarea { padding: var(--s2); height: auto; resize: vertical; font-size: var(--fs-small); }
.m-reject select.input { height: 38px; padding: 0 var(--s8) 0 var(--s3); font-size: var(--fs-small); }
.m-reject-actions { display: flex; gap: var(--s1); }
/* Deal edit form: the automatic Connection / Financial (migration 035) */
.deal-status-facts { margin: 0; }
.deal-status-facts dt { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.deal-status-facts dd { margin: var(--s1) 0 0; font-weight: 600; color: var(--text); }
/* "Add provider" box under Matches & prechecks: search every provider and add one to precheck by hand */
.m-add-bar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }
.m-add { display: flex; flex-direction: column; gap: var(--s2); max-width: 520px; margin-top: var(--s3); padding: var(--s3);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.m-add-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.m-add .input { height: 38px; font-size: var(--fs-small); }
.m-add-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; border-top: 1px solid var(--divider); }
.m-add-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 40px;
  padding: var(--s1) var(--s2); border-bottom: 1px solid var(--divider); font-size: var(--fs-small); }
.m-add-item[hidden] { display: none; }
.m-add-name { flex: 1; min-width: 0; }
.m-add-score { font-weight: 600; color: var(--accent-text); }
.m-score.m-low, .m-add-score.m-low { color: var(--text-muted); font-weight: 500; }
.m-add-item:hover { background: var(--hover); }
.m-add-item .btn { min-height: 28px; padding: 0 var(--s3); font-size: var(--fs-small); }
.m-add-none { margin: 0; padding: var(--s2); font-size: var(--fs-small); color: var(--text-muted); }
.m-reason { display: block; max-width: 280px; margin-top: 4px; font-size: var(--fs-small); font-style: italic; color: var(--text-muted); white-space: normal; }
.m-reason .m-sub { display: block; font-style: normal; }
/* Action Log (migration 029): the latest action, the rest behind "n earlier" */
.m-log { min-width: 220px; max-width: 320px; font-size: var(--fs-small); white-space: normal; }
.m-log .m-sub { white-space: normal; }
.m-log-more { margin-top: var(--s1); }
.m-log-more summary { cursor: pointer; font-size: var(--fs-micro); color: var(--link, var(--accent-text)); }
.m-log-more ol { margin: var(--s1) 0 0; padding-left: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }

/* wide content in a record section (e.g. the Matches & prechecks table) spans the full width */
.rel-grid .rel-block.wide { grid-column: 1 / -1; }

/* numbers line up in tables and figures (Inter, tabular figures) */
table, .num, .kpi-value, .stat-value, .key-figure dd, .fin-figures dd, .count-badge, .nav-key { font-variant-numeric: tabular-nums; }

/* Neutral design: no decorative texture or particles; a compact 2 × 2 summary beside the page title */

.hero { padding: var(--s4) 0 var(--s2); }
.page-head { align-items: center; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
.stat.lead { grid-row: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--s3) var(--s4);
  background: var(--surface); box-shadow: var(--shadow-small); }
.stat.lead .stat-value { font-size: var(--fs-figure); font-weight: 600; line-height: var(--lh-tight); text-shadow: none; }

/* ==========================================================================
   Refined Cobalt — shared components (REFINED_COBALT_FRONTEND_REDESIGN.md §6–7)
   ========================================================================== */
body { font-family: var(--font); background: var(--canvas); color: var(--text-primary); font-feature-settings: "cv11", "ss01"; }
* { scrollbar-color: var(--text-3) transparent; scrollbar-width: thin; }

/* ---- Sidebar: deep navy in both themes, with its own palette ---- */
.rail {
  background: var(--bbs-rail-bg);
  border-right: 1px solid var(--bbs-rail-border);
  color: var(--bbs-ink);
  transition: width var(--sidebar-transition);
  /* the shared names, re-pointed for everything inside the rail */
  --text: var(--bbs-ink);
  --text-muted: var(--bbs-link);
  --text-faint: var(--bbs-label);
  --divider: var(--bbs-hairline);
  --control-border: var(--bbs-hairline);
  --hover: var(--bbs-hover-bg);
  --raised: var(--bbs-hover-bg);
  --surface: var(--bbs-hover-bg);
  --focus: var(--bbs-focus);
  --accent-text: var(--bbs-focus);
  --error-text: #ff8a80;
  --success-text: #4ade80;
}
.rail-section { padding: var(--s3) var(--s3) var(--s1); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bbs-label); }
.rail .nav-item { border-radius: var(--radius-sm); color: var(--bbs-link); font-weight: 500; }
.rail .nav-item .icon { color: var(--bbs-icon); }
.rail .nav-item:hover { background: var(--bbs-hover-bg); color: var(--bbs-ink); }
.rail .nav-item:hover .icon { color: var(--bbs-ink); }
.rail .nav-item.active { background: var(--bbs-active-bg); color: var(--bbs-active-fg); font-weight: 600; }
.rail .nav-item.active .icon, .shell.collapsed .rail .nav-item.active .icon { color: var(--bbs-active-fg); }
.rail .nav-item.active .label:not(.nav-key) { text-decoration: none; }

.rail .nav-badge { background: var(--bbs-avatar-bg); color: var(--color-on-primary); }
.rail .nav-item.active .nav-badge { background: var(--color-card); color: var(--bbs-active-bg); }
.rail .nav-badge.overdue { background: var(--danger); color: var(--color-on-destructive); }
.rail .brand-mark { background: var(--bbs-avatar-bg); border-color: transparent; color: var(--color-on-primary); border-radius: var(--radius-sm); }
.rail .has-logo .brand-mark { background: transparent; }
.rail .avatar { background: var(--bbs-avatar-bg); border-color: transparent; color: var(--color-on-primary); }
.rail :focus-visible { outline-color: var(--bbs-focus); }

/* ---- App bar: restrained ---- */
.appbar { background: var(--glass); border-bottom: 1px solid var(--border); }

/* ---- Page headings ---- */
.page-title, .record-title { font-weight: 700; color: var(--text-primary); }
.page-sub, .dash-sub { color: var(--text-secondary); }

/* ---- Buttons ---- */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: none; }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); box-shadow: none; }
.btn-primary:active:not(:disabled) { background: var(--color-accent-hover); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text-primary); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-3); }
.btn-quiet { color: var(--text-secondary); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--text-primary); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.06); }
.btn:disabled { opacity: .5; }
.btn[aria-busy="true"] { cursor: progress; opacity: .75; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible { box-shadow: var(--focus-ring); }

/* ---- Inputs, selects, textareas ---- */
.input { background-color: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius-sm); color: var(--text-primary); }
.input::placeholder { color: var(--text-secondary); }
.input:hover { border-color: var(--text-secondary); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.input[aria-invalid="true"] { border-color: var(--danger-text); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
.field-error, .form-error { color: var(--danger-text); }

/* ---- Cards and metric tiles ---- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.kpi, .stat, .q-switch, .task, .share-link-box { border-color: var(--border); border-radius: var(--radius-md); }
.kpi, .stat { background: var(--surface); box-shadow: var(--shadow-sm); }
.kpi-label, .stat-label { color: var(--text-secondary); }
.kpi-value, .stat-value { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ---- Tables: clear headers, light row dividers, quiet hover ---- */
.data-table th { background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-micro); font-weight: 600; color: var(--text-secondary); }
.data-table td { border-bottom: 1px solid var(--border-light); font-size: var(--fs-data); font-variant-numeric: tabular-nums; }
.data-table tbody tr[data-index]:hover td,
.data-table tbody tr[data-index]:focus-visible td { background: var(--surface-2); }
.data-table tbody tr[data-index]:hover td:first-child,
.data-table tbody tr[data-index]:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--border); }
.expand-row > td { background: var(--surface-press); }
.dash-table th, .dash-table td, .pv-table th, .pv-table td, .bd-table th, .bd-table td { border-bottom-color: var(--border-light); }
.dash-table thead th, .pv-table thead th, .bd-table thead th { background: var(--surface-2); }

/* ---- Badges and statuses: soft tinted pills, always with their text ---- */
.pill { height: 22px; padding: 0 10px; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 500; }
.pill.success { color: var(--success-text); background: var(--green-bg); border-color: transparent; }
.pill.warning { color: var(--warn-text); background: var(--amber-bg); border-color: transparent; }
.pill.danger  { color: var(--danger-text); background: var(--red-bg); border-color: transparent; }
.pill.info    { color: var(--info-text); background: var(--blue-bg); border-color: transparent; }
.pill.neutral { color: var(--text-secondary); background: var(--surface-2); border-color: var(--border); }
.chip { border-color: var(--border); background: var(--surface-2); color: var(--text-primary); border-radius: var(--radius-xs); }
.count-badge { background: var(--surface-press); color: var(--text-secondary); }

/* ---- Dialogs, side panel, menus, toasts ---- */
.flt-panel.flt-modal { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); background: var(--surface); overflow: hidden; }
.flt-modal-foot { background: var(--surface-2); }
.side-panel { border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--surface); }
.more-pop, .flt-picker-list, .col-menu { border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); background: var(--surface); }
.toast { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); color: var(--text-primary); }

/* ---- Tabs / segmented controls ---- */
.seg-toggle { border-color: var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 2px; gap: 2px; }
.seg-toggle button { border-radius: 8px; }
.seg-toggle button + button { border-left: 0; }
.seg-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-sm); }

@media (max-width: 768px) {
  .input, select.input, textarea.input { font-size: 16px; }      /* no iOS zoom on focus */
  .flt-panel.flt-modal { border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0; }
}

.row-mark { background: var(--color-primary); color: var(--color-on-primary); }       /* "New": white on primary blue (5.2:1) */

/* ---------- Dashboard cards: each opens a details popup ---------- */

 

/* ---------- Tasks: related record, time left, timeline (Gantt) ---------- */
.task-rel { display: inline-flex; align-items: center; max-width: 100%; padding: 1px 10px; border-radius: var(--radius-pill); background: var(--action-tint);
  color: var(--accent-text); font-size: var(--fs-micro); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-rel:hover { text-decoration: underline; text-underline-offset: 2px; }
.task-time { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); max-width: 520px; }
.task-time-track { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--surface-press); overflow: hidden; }
.task-time-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--info); }
.task-time.warning .task-time-fill { background: var(--warning); } .task-time.danger .task-time-fill { background: var(--danger); }
.task-time.done .task-time-fill { background: var(--success); }
.task-time-text { flex-shrink: 0; font-size: var(--fs-micro); font-weight: 600; color: var(--info-text); font-variant-numeric: tabular-nums; }
.task-time.warning .task-time-text { color: var(--warn-text); } .task-time.danger .task-time-text { color: var(--danger-text); } .task-time.done .task-time-text { color: var(--success-text); }
.task-status.watching { color: var(--text-secondary); }
.task-group.watched .task-group-h { color: var(--accent-text); }
.task.task-flash { box-shadow: 0 0 0 3px var(--accent), var(--shadow-md); transition: box-shadow .3s; }

.gt { padding: var(--s5); }
.gt-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-bottom: var(--s4); }
.gt-top h2 { font-size: var(--fs-h3); font-weight: 600; margin-right: auto; }
.gt-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-micro); color: var(--text-secondary); }
.gt-legend i { display: inline-block; width: 12px; height: 8px; margin-right: 6px; border-radius: 3px; vertical-align: middle; }
.lg-urgent { background: var(--danger); } .lg-high { background: var(--warning); } .lg-medium { background: var(--accent); } .lg-low { background: var(--text-3); }
.gt-legend .lg-today { width: 2px; height: 12px; background: var(--accent); border-radius: 0; }
.gt-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.gt-chart { min-width: 900px; position: relative; }
.gt-head, .gt-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.gt-head { position: sticky; top: 0; z-index: 3; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.gt-label { position: sticky; left: 0; z-index: 2; padding: var(--s2) var(--s3); background: var(--surface); border-right: 1px solid var(--border); min-width: 0; }
.gt-corner { background: var(--surface-2); font-size: var(--fs-micro); font-weight: 600; color: var(--text-secondary); display: flex; align-items: flex-end; }
.gt-axis { position: relative; height: 46px; }
.gt-months, .gt-days { position: absolute; left: 0; right: 0; }
.gt-months { top: 4px; height: 18px; } .gt-days { bottom: 4px; height: 18px; }
.gt-months span, .gt-days span { position: absolute; top: 0; overflow: hidden; white-space: nowrap; font-size: var(--fs-micro); color: var(--text-secondary); }
.gt-months span { padding-left: 6px; font-weight: 600; color: var(--text-primary); border-left: 1px solid var(--border); }
.gt-days span { text-align: center; font-variant-numeric: tabular-nums; }
.gt-days span.we { color: var(--text-secondary); font-weight: 400; opacity: 1; }
.gt-days span.now { color: var(--color-on-primary); background: var(--accent); border-radius: var(--radius-pill); font-weight: 600; }
.gt-body { position: relative; }
.gt-grid { position: absolute; top: 0; bottom: 0; left: 260px; right: 0; pointer-events: none; z-index: 0; }
.gt-weekend { position: absolute; top: 0; bottom: 0; background: var(--surface-2); }
.gt-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); z-index: 1; }
.gt-today span { position: absolute; top: 2px; left: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--color-on-primary); font-size: var(--fs-micro); font-weight: 600; line-height: 16px; }
.gt-group { position: relative; }
.gt-group-h { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: var(--s2); width: 260px; padding: var(--s3) var(--s3) var(--s1);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface); }
.gt-row { position: relative; min-height: 48px; border-bottom: 1px solid var(--border-light); }
.gt-row:hover .gt-label, .gt-row:hover { background: var(--surface-2); }
.gt-name { display: block; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--text-primary);
  text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-name:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.gt-meta { display: block; font-size: var(--fs-micro); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-track { position: relative; z-index: 1; }
.gt-bar { position: absolute; top: 10px; height: 28px; min-width: 10px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--bar) 22%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--bar); --bar: var(--accent); text-align: left; }
.gt-bar.prio-urgent { --bar: var(--danger); } .gt-bar.prio-high { --bar: var(--warning); } .gt-bar.prio-medium { --bar: var(--accent); } .gt-bar.prio-low { --bar: var(--text-3); }
.gt-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--bar) 55%, var(--surface)); }
.gt-bar-text { position: relative; display: block; padding: 0 8px; line-height: 28px; font-size: var(--fs-micro); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-bar.tone-danger { box-shadow: inset 0 0 0 2px var(--danger); }
.gt-bar.is-done { opacity: .55; }
.gt-bar.cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gt-bar.cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--bar) 18%, transparent) 6px 9px); }
.gt-bar:hover { filter: brightness(1.04); box-shadow: inset 0 0 0 2px var(--bar), var(--shadow-sm); }
.gt-bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gt-outside { position: absolute; top: 14px; left: var(--s3); font-size: var(--fs-micro); color: var(--text-secondary); }
.gt-undated { margin-top: var(--s4); }
.gt-undated h3 { font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--s2); }
.gt-undated ul { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
@media (max-width: 767px) {
  .gt { padding: var(--s3); }
  .gt-head, .gt-row { grid-template-columns: 160px minmax(0, 1fr); }
  .gt-grid { left: 160px; } .gt-group-h { width: 160px; }
}

/* ---------- Saved views (boards) ---------- */
.views-btn { max-width: 280px; }
.views-btn .views-btn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.views-btn.has-view { border-color: var(--action-border); color: var(--accent-text); font-weight: 600; }
.view-mod { flex-shrink: 0; margin-left: var(--s1); padding: 0 8px; border-radius: var(--radius-pill); background: var(--amber-bg); color: var(--warn-text); font-size: var(--fs-micro); font-weight: 600; line-height: 20px; }
.views-panel { position: absolute; top: calc(100% + var(--s2)); right: 0; z-index: var(--z-overlay); width: min(360px, calc(100vw - var(--s8)));
  padding: var(--s2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); animation: pop var(--dur) var(--ease-out); }
.views-h { padding: var(--s2) var(--s2) var(--s1); font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); }
.view-list { margin: 0; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; }
.view-item { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-sm); }
.view-item:hover { background: var(--surface-2); }
.view-apply { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: var(--s1) var(--s2); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary); font: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer; }
.view-apply > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-apply .m-sub { display: block; }
.view-apply .icon { flex-shrink: 0; color: var(--text-secondary); }
.view-item.is-active .view-apply { color: var(--accent-text); font-weight: 600; }
.view-item.is-active .view-apply .icon { color: var(--accent-text); }
.view-item.is-active { background: var(--action-tint); }
.view-loading, .views-empty { padding: var(--s2); }
.views-actions { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2); margin-top: var(--s1); border-top: 1px solid var(--border-light); }
.view-form { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2); margin-top: var(--s1); border-top: 1px solid var(--border-light); }
.view-form .input { padding: 0 var(--s3); }
.view-form-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s1); }
@media (max-width: 767px) { .views-panel { left: 0; right: 0; width: auto; } .views-btn { max-width: 100%; } }

/* ---------- Dashboard tabs ---------- */
.dash-tabs { display: flex; gap: var(--s1); overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tabs [role="tab"] { position: relative; flex-shrink: 0; min-height: 44px; padding: 0 var(--s4); border: 0; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: var(--fs-body); font-weight: 500; cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.dash-tabs [role="tab"]:hover { color: var(--text-primary); background: var(--surface-2); }
.dash-tabs [role="tab"][aria-selected="true"] { color: var(--accent-text); font-weight: 600; }
.dash-tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.dash-tabs [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dash-tabpanel { display: flex; flex-direction: column; gap: var(--s5); }
.dash-tabpanel:focus { outline: none; }
.ts-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.ts-stamp { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-small); color: var(--text-secondary); }
.ts-stamp strong { color: var(--text-primary); font-weight: 600; }
.ts-groups { display: flex; flex-direction: column; gap: var(--s4); }
.ts-group { padding: var(--s5) var(--s5) var(--s3); }
.ts-group h2 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); font-size: var(--fs-h3); font-weight: 600; color: var(--text-primary); }
.ts-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--action-tint); color: var(--accent-text); font-size: var(--fs-micro); font-weight: 700; }
.ts-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.ts-table th, .ts-table td { padding: var(--s3) var(--s3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-light); }
.ts-table thead th { padding-top: var(--s2); padding-bottom: var(--s2); background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-micro); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.ts-table thead th:first-child { border-top-left-radius: var(--radius-sm); } .ts-table thead th:last-child { border-top-right-radius: var(--radius-sm); }
.ts-table tbody tr:last-child > * { border-bottom: 0; }
.ts-table tbody tr:hover > * { background: var(--surface-2); }
.ts-table tbody th { width: 26%; font-weight: 600; color: var(--text-primary); }
.ts-table .right { text-align: right; }
.ts-val { width: 14%; font-size: 1.125rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-table td:nth-child(3) { width: 22%; }
.ts-cmp { display: block; font-size: var(--fs-small); color: var(--text-secondary); }
.ts-cmp strong { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.ts-chg { display: inline-block; margin-top: 2px; padding: 0 8px; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 600; line-height: 20px; }
.ts-chg.up { background: var(--green-bg); color: var(--success-text); } .ts-chg.down { background: var(--red-bg); color: var(--danger-text); }
.ts-chg.flat { background: var(--surface-2); color: var(--text-secondary); }
.ts-detail { font-size: var(--fs-small); color: var(--text-secondary); }
.ts-note { display: flex; gap: 6px; align-items: flex-start; margin-top: var(--s1); font-size: var(--fs-micro); color: var(--text-secondary); }
.ts-note .icon { flex-shrink: 0; margin-top: 2px; color: var(--info-text); }
@media (max-width: 760px) {
  .ts-group { padding: var(--s4) var(--s3) var(--s2); }
  .ts-table thead { display: none; }
  .ts-table, .ts-table tbody, .ts-table tr, .ts-table th, .ts-table td { display: block; width: auto; }
  .ts-table tr { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--border-light); }
  .ts-table tbody tr:last-child { border-bottom: 0; }
  .ts-table th, .ts-table td { padding: 2px 0; border: 0; text-align: left; }
  .ts-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-micro); font-weight: 600; color: var(--text-secondary); margin-top: var(--s2); }
  .ts-table td.right { text-align: left; }
  .ts-table tbody th { font-size: var(--fs-h3); }
}

/* an input with a unit after it (e.g. Profit margin %) */
.input-suffix { display: flex; align-items: center; gap: var(--s2); }
.input-suffix .input { flex: 1; min-width: 0; }
.input-suffix > span { color: var(--text-secondary); font-weight: 600; }

/* dashboard tabs: time range, sub-figures */
.ts-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); }
.ts-range .pv-ctl .input { min-width: 160px; }
.ts-range-text { align-self: center; margin-left: auto; font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); }
.ts-sub-row > th { padding-left: calc(var(--s3) + 18px); font-weight: 500; }
.ts-sub-mark { display: inline-block; width: 18px; margin-left: -18px; color: var(--text-secondary); }
.ts-sub-row > * { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
@media (max-width: 760px) { .ts-range-text { margin-left: 0; width: 100%; } .ts-sub-row > th { padding-left: 18px; } }

/* ---------- Tasks across the CRM: row highlights, sidebar dots, record strip, comment action ---------- */
tr[data-tasks] > td { background: color-mix(in srgb, var(--warning) 6%, var(--surface)); }
tr[data-tasks="overdue"] > td { background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
tr[data-tasks="overdue"] > td { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.row-task { flex-shrink: 0; margin-left: var(--s2); padding: 0 8px; border-radius: var(--radius-pill); background: var(--amber-bg); color: var(--warn-text);
  font-size: var(--fs-micro); font-weight: 600; line-height: 20px; white-space: nowrap; }
.row-task.overdue { background: var(--red-bg); color: var(--danger-text); }
.nav-dot { flex-shrink: 0; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #ff8a80; box-shadow: 0 0 0 2px var(--bbs-rail-bg); }
.nav-dot.overdue { background: #ff453a; }
.shell.collapsed .nav-dot { position: absolute; top: 8px; right: 10px; margin: 0; }
.rail .nav-item { position: relative; }

.tstrip-due { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--fs-micro); font-weight: 600; white-space: nowrap; color: var(--info-text); }
.tstrip-due.warning { color: var(--warn-text); } .tstrip-due.danger { color: var(--danger-text); }
.comment-actions { margin-top: var(--s1); }
.comment-task { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: 600; }
.task-origin { gap: 4px; }
.dash-tasks:empty { display: none; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--s5) + var(--safe-bottom)); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--s3); max-width: calc(100% - var(--s8)); padding: var(--s3) var(--s4); border: 1px solid color-mix(in srgb, var(--error) 45%, transparent); border-radius: var(--radius-sm); background: var(--raised); box-shadow: var(--shadow-overlay); font-size: var(--fs-small); color: var(--text); opacity: 0; transform: translate(-50%, var(--s4)); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); pointer-events: none; }
.toast .icon { color: var(--error-text); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Motion ---------- */
.enter { opacity: 0; transform: translateY(var(--enter-y)); animation: enter var(--dur-enter) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes enter { to { opacity: 1; transform: none; } }
.page-in { animation: page-in var(--dur-page) var(--ease-out); }
@keyframes page-in { from { opacity: 0; } }

/* ---------- Mobile (< 768px) ---------- */
.scrim { display: none; }
/* ---------- Medium screens: tablets and small laptop windows (768–1099px) ----------
   The full sidebar plus two-column record and form layouts don't fit here, so the sidebar
   becomes the icon-only rail, record headers stack, and the side column and form steps move
   above the content (as on phones, with wider spacing). */
@media (min-width: 768px) and (max-width: 1099px) {
  .shell, .shell.collapsed { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }
  .rail .label { display: none; }
  .rail-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .wide-logo .brand-mark { flex: none; width: 40px; height: 40px; }
  .wide-logo .brand-logo { width: 100%; object-fit: cover; object-position: left center; }
  .has-mark .brand-logo { display: none; }
  .has-mark .brand-logo-mark { display: block; }
  .nav-item { justify-content: center; padding: 0; }
  .api-status { justify-content: center; padding: 0; }
  .rail-collapse { display: none; }               /* already as slim as it goes */

  .page-head { grid-template-columns: minmax(0, 1fr); }
  .record-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .key-figures { flex-wrap: wrap; }
  .key-figure { flex: 1 1 180px; min-width: 0; }
  .record-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .record-aside { display: contents; }
  .record-aside > .aside-card:first-child { order: -1; }
  .record-aside > .aside-card { order: 1; }

  .form-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .stepper { position: static; padding: var(--s3); }
  .stepper ol { flex-direction: row; gap: var(--s1); overflow-x: auto; }
  .step { width: auto; flex-shrink: 0; }
  .step .step-title { display: none; }
  .step.current .step-title { display: inline; }
}

/* Long tags (e.g. a candidate's match basis) wrap instead of running off narrow screens */
@media (max-width: 1099px) {
  .rel-meta .chip, .detail-row .chip, .field-item .chip, .review-list .chip { height: auto; min-height: 24px; padding-top: 2px; padding-bottom: 2px; white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 767px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; left: 0; bottom: 0; z-index: var(--z-modal); width: var(--rail-w); height: auto; padding-left: calc(var(--s3) + var(--safe-left)); transform: translateX(-100%); transition: transform var(--dur) var(--ease-out); }
  .shell.rail-open .rail { transform: none; box-shadow: var(--shadow-overlay); }
  .rail-collapse { display: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur); }
  .shell.rail-open .scrim { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease-out); }
  .btn.menu-btn { display: inline-flex; }
  .appbar { gap: var(--s2); padding: var(--safe-top) max(var(--s4), var(--safe-right)) 0 max(var(--s3), var(--safe-left)); }
  .crumbs > span:first-child, .crumb-sep { display: none; }
  .content { padding: var(--s4) var(--s4) calc(var(--s8) + var(--safe-bottom)); gap: var(--s5); }
  .hero { padding-top: var(--s3); }

  .page-head { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .stats { display: flex; flex-wrap: wrap; }
  .stat { flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .stat.lead { flex-basis: 100%; flex-direction: row; align-items: center; padding: var(--s4); }
  .stat-hint { display: none; }
  .table-toolbar, .pager { padding-left: var(--s4); padding-right: var(--s4); }
  .field { width: 100%; }
  .input-kbd { display: none; }
  .data-table th:first-child, .data-table td:first-child { padding-left: var(--s4); }
  .record-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .key-figures { flex-wrap: wrap; }
  .key-figure { flex: 1 1 140px; min-width: 0; }
  .record-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  /* Workflow above the sections, Record below them */
  .record-aside { display: contents; }
  .record-aside > .aside-card:first-child { order: -1; }
  .record-aside > .aside-card { order: 1; }
  .record-section { padding: var(--s4); }
  .field-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3) var(--s4); }
  .form-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .stepper { position: static; padding: var(--s3); }
  .stepper ol { flex-direction: row; gap: var(--s1); overflow-x: auto; }
  .step { width: auto; flex-shrink: 0; }
  .step .step-title { display: none; }
  .step.current .step-title { display: inline; }
  .form-panel { padding: var(--s4); }
  .form-footer { gap: var(--s2); margin: var(--s5) calc(-1 * var(--s4)) calc(-1 * var(--s4)); padding-left: var(--s3); padding-right: var(--s3); }
  .form-footer .btn { padding: 0 var(--s3); }

  
  .radio-cards { grid-template-columns: minmax(0, 1fr); }

  .check { min-height: var(--tap); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }

  .enter { opacity: 1; transform: none; }
}

/* Buttons that are links (New merchant, New provider, Register opportunity) */
a.btn, a.btn:hover { text-decoration: none; }

/* =====================================================================================================
   ALPINE SPA LAYER — the refined system (calm mineral palette, one grotesque, hairlines over shadows,
   an 8-point rhythm, sentence-case labels). Later rules than the component layers, so it wins by order.
   ===================================================================================================== */
body { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: .003em; color: var(--text-primary); background: var(--canvas);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.num, .stat-value, .kpi-value, .ts-val, .kc-value, .data-table td, .bd-table td, .pv-table td, .dash-table td { font-variant-numeric: tabular-nums; }
h1, h2, h3, .page-title, .record-title { letter-spacing: -0.015em; }

/* labels: sentence case, quiet (no tracked-out capitals) */
.q-branch-h, .flt-pane-head h3, .kpi-label, .dash-table thead th, .pv-table thead th, .task-group-h, .bd-table thead th,
.rail-section, .kc-label, .glance h2, .gt-group-h, .record-kicker { text-transform: none; letter-spacing: 0; }
.api-status .faint, .app-version { font-family: var(--font); letter-spacing: 0; }

/* ---------- Sidebar ---------- */
.rail { background: var(--bbs-rail-bg); border-right: 1px solid var(--bbs-rail-border); box-shadow: none; }
.rail-brand { padding: var(--s5) var(--s4) var(--s3); gap: var(--s3); }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--color-on-primary); box-shadow: none; }
.brand-name { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; color: var(--bbs-ink); }
.brand-sub { font-size: var(--fs-micro); color: var(--bbs-label); }
.rail-section { padding: var(--s5) var(--s3) var(--s1); font-size: var(--fs-micro); font-weight: 500; color: var(--bbs-label); }
.rail-nav { gap: 2px; padding: 0 var(--s2); }
.nav-item { min-height: 36px; padding: 0 var(--s3); gap: 10px; border-radius: var(--radius-sm); font-size: var(--fs-body); font-weight: 500; color: var(--bbs-link);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav-item .icon { color: var(--bbs-icon); }
.nav-item:hover { background: var(--bbs-hover-bg); color: var(--bbs-ink); }
.nav-item.active { background: var(--bbs-active-bg); color: var(--bbs-active-fg); font-weight: 600; box-shadow: inset 2px 0 0 var(--brass); }
.nav-item.active .icon { color: var(--bbs-active-fg); }
.nav-item.active .label:not(.nav-key) { color: var(--bbs-active-fg); }
.nav-item .count-badge, .nav-item .nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 600; }
.nav-dot { width: 7px; height: 7px; background: var(--warning); box-shadow: none; }
.nav-dot.overdue { background: var(--danger); }
.rail-footer { padding: var(--s3) var(--s2) var(--s4); border-top: 1px solid var(--bbs-hairline); }

/* ---------- Top bar ---------- */
.appbar { height: var(--appbar-h); padding: 0 clamp(16px, 3vw, 40px); background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--separator); box-shadow: none; }
.crumbs { font-size: var(--fs-small); color: var(--text-secondary); }

/* ---------- Page ---------- */
.content { padding: var(--s8) clamp(16px, 3vw, 40px) 56px; max-width: 1440px; }
.hero { margin-bottom: var(--s6); gap: var(--s6); }
.page-head { gap: var(--s2); }
.page-title { font-size: var(--fs-hero); font-weight: 600; line-height: var(--lh-tight); color: var(--text-primary); }
.page-sub { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); max-width: 60ch; }
.page-actions { margin-top: var(--s4); gap: var(--s2); }
.stats { gap: var(--s3); }
.stat { padding: var(--s3) var(--s4); min-height: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: none; }
.stat-label { font-size: var(--fs-small); font-weight: 500; color: var(--text-secondary); }
.stat-hint { font-size: var(--fs-micro); color: var(--text-3); }
.stat-value { font-size: var(--fs-figure); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }

/* ---------- Surfaces ---------- */
.panel { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: none; }
.table-toolbar { padding: var(--s4) var(--s5); gap: var(--s3); border-bottom: 1px solid var(--separator); }

/* ---------- Controls ---------- */
.btn { min-height: 36px; padding: 0 14px; gap: var(--s2); border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 500; letter-spacing: .005em; box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); box-shadow: none; }
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); }
.btn-ghost:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--text-3) 45%, var(--border)); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-quiet:hover { background: var(--surface-press); color: var(--text-primary); }
.btn-compact { min-height: 32px; padding: 0 12px; font-size: var(--fs-small); }
.btn-icon { width: 36px; min-width: 36px; padding: 0; }
.input { min-height: 36px; border-radius: var(--radius-sm); font-size: var(--fs-body); background-color: var(--surface); }   /* -color: keeps the select arrow image */
.input:focus, .input:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
:focus-visible { outline-color: var(--accent); }
.pill { height: 22px; padding: 0 8px; border-radius: 6px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0; }
.count-badge { font-weight: 600; }

/* ---------- Tables ---------- */
.data-table { font-size: var(--fs-data); }
.data-table thead th { height: 40px; padding: 0 var(--s4); background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-micro); font-weight: 500; color: var(--text-secondary); }
.data-table tbody td { height: 48px; padding: 0 var(--s4); border-bottom: 1px solid var(--border-light); }
.data-table tbody tr:hover > td { background: var(--surface-2); }
.data-table tbody tr:last-child > td { border-bottom: 0; }
.pager { padding: var(--s3) var(--s5); border-top: 1px solid var(--separator); font-size: var(--fs-small); color: var(--text-secondary); }

/* ---------- Record pages ---------- */
.record-kicker { font-size: var(--fs-small); font-weight: 500; color: var(--text-secondary); }
.record-title { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); }
.record-layout { gap: var(--s6); }
.record-section { border-radius: var(--radius-md); box-shadow: none; }
.comment-strip, .task-strip { border-radius: var(--radius-md); box-shadow: none; border: 1px solid var(--border); }

/* ---------- Dashboard ---------- */
.dash { gap: var(--s6); }
.dash-tabs { gap: var(--s1); border-bottom: 1px solid var(--border); }
.dash-tabs [role="tab"] { min-height: 40px; padding: 0 var(--s3); font-size: var(--fs-body); }
.dash-tabs [role="tab"][aria-selected="true"]::after { height: 2px; left: var(--s3); right: var(--s3); background: var(--accent); }
.ts-num { display: none; }                                   /* the sections aren't a sequence */
.ts-group { padding: var(--s5) var(--s6) var(--s3); }
.ts-group h2 { margin-bottom: var(--s3); font-size: var(--fs-h3); }
.ts-table th, .ts-table td { padding: var(--s3) var(--s3); }
.ts-chg { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 6px; }
.ts-sub-mark { display: inline-flex; vertical-align: -2px; color: var(--text-3); }
.ts-range { padding: var(--s3) var(--s4); border-radius: var(--radius-md); }
.kpi, .kc-tile, .ts-item { box-shadow: none; }

/* ---------- Pop-overs, dialogs, toasts ---------- */
.col-picker, .views-panel, .flt-modal, .kc-dialog { border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.flt-modal, .kc-dialog { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.toast { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

/* ---------- Tasks ---------- */
.task { border-radius: var(--radius-md); box-shadow: none; }
.row-task { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 0 7px; }
.q-flag, .q-pass { display: inline-flex; align-items: center; gap: 4px; }
.q-el-tick { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .content { padding: var(--s6) var(--s6) 48px; }
  .hero { flex-direction: column; align-items: stretch; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .content { padding: var(--s5) var(--s4) 40px; }
  .page-title, .record-title { font-size: var(--fs-title-sm); }
  .table-toolbar { padding: var(--s3) var(--s4); }
  .ts-group { padding: var(--s4) var(--s4) var(--s2); }
  .stat { padding: var(--s3); }
  .stat-value { font-size: 1.25rem; }      /* figures on phones: 20px */
}
@media (pointer: coarse) { .btn, .input { min-height: 44px; } .btn-icon { width: 44px; min-width: 44px; } .nav-item { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .nav-item, .btn { transition: none; } }

/* spa layer: rhythm fixes (one source of spacing per stack) */
.view { gap: var(--s6); }
.hero { margin-bottom: 0; padding: 0; }
.stage-filters { gap: 6px; row-gap: 6px; padding: var(--s3) var(--s5); }
.stage-filter { min-height: 30px; height: 30px; padding: 0 10px; gap: 6px; border-radius: var(--radius-sm); font-size: var(--fs-small); }
.stage-filter .count, .stage-filter span:last-child { font-size: var(--fs-micro); }
.table-toolbar label[for="search"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dash-head .record-kicker { display: none; }
@media (pointer: coarse) { .stage-filter { min-height: 36px; height: 36px; } }
/* spa layer: record page strips — comments as one quiet line, tasks listed beneath */
.comment-strip { padding: var(--s3) var(--s4); }

/* spa layer: contrast refinements */
.stat-hint { color: var(--text-secondary); }
.gt-bar.is-done { opacity: 1; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.gt-bar.is-done .gt-fill { opacity: .35; }
.gt-bar.is-done .gt-bar-text { color: var(--text-secondary); }
.rail .nav-badge { background: var(--surface-press); color: var(--text-primary); }
.rail .nav-item.active .nav-badge { background: var(--accent); color: var(--color-on-primary); }
.rail .nav-badge.overdue, .rail .nav-item.active .nav-badge.overdue { background: var(--danger); color: var(--color-on-destructive); }
/* spa layer: phones and small tablets */
.key-figure dd, .key-figure .value { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  /* filter buttons: one row that scrolls sideways */
  .stage-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: var(--s4);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .stage-filters::-webkit-scrollbar { display: none; }
  .stage-filters .stage-filter { flex-shrink: 0; }
  .stage-filters > :first-child:not(.stage-filter) { flex-shrink: 0; align-self: center; }
  /* toolbar: the three buttons share one row */
  #toolbarRight { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: var(--s2); align-items: center; width: 100%; }
  #toolbarRight .btn { min-width: 0; padding: 0 10px; justify-content: center; }
  #toolbarRight .btn .count-inline { display: none; }
  /* record header figures: each as wide as its figure, wrapping, so short counts share a row and a long amount
     takes its own (instead of one tall card per figure) */
  .key-figures { display: flex; flex-wrap: wrap; gap: var(--s2); width: 100%; }
  .key-figure { flex: 1 1 auto; min-width: 0; padding: var(--s3); }
  .key-figure dd { margin-top: var(--s1); font-size: 1.25rem; overflow-wrap: normal; white-space: nowrap; }
}
@media (max-width: 767px) {
  .stage-filters { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); overflow: visible; mask-image: none; -webkit-mask-image: none; padding-right: 0; }
  .stage-filter-group { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--s4)); padding-right: var(--s4);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .stage-filter-group::-webkit-scrollbar { display: none; }
  .stage-filters-label { font-size: var(--fs-micro); color: var(--text-secondary); }
  #toolbarRight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #toolbarRight > :not(.btn):not(.views-panel):not(.col-picker) { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .stage-filters-label { align-self: flex-start; text-align: left; } }
.auth-glow { display: none; }
/* spa layer: one left edge in the sidebar (the menu icons' 32px line) */
.rail-brand { padding-left: 20px; padding-right: 16px; }
.rail-section { padding-left: 12px; }

.api-status, .app-version { padding-left: 12px; padding-right: 16px; }

/* =====================================================================================================
   FULL-SCREEN LAYOUT — the app fills the window edge to edge: the root is 100vw × 100vh with no margin,
   padding or border; only the content area scrolls. Page sections are full-bleed bands divided by hairlines
   (no outer boxes, gaps or width cap); text inside a band keeps an inner inset (--edge) so it never touches
   the window edge.
   ===================================================================================================== */
:root { --edge: 32px; }
html, body { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; overflow: hidden; }
.shell { width: 100vw; height: 100vh; height: 100dvh; min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }
.main { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.rail { height: 100%; max-height: none; margin: 0; }
.appbar { position: sticky; top: 0; padding: 0 var(--edge); }
body.flt-open .main { overflow: hidden; }

/* the outer wrapper: no padding, margin, border or width cap */
.content { margin: 0; padding: 0; border: 0; width: 100%; max-width: none; }
.view { gap: 0; margin: 0; padding: 0; }

/* ---------- Boards: header band + table band ---------- */
#listView > .hero { padding: var(--s6) var(--edge); border-bottom: 1px solid var(--separator); background: var(--canvas); }
#listView > .panel { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
#listView > .panel .table-toolbar, #listView > .panel .stage-filters { padding-left: var(--edge); padding-right: var(--edge); }
.table-panel .data-table thead th:first-child, .table-panel .data-table tbody td:first-child { padding-left: var(--edge); }
.table-panel .data-table thead th:last-child, .table-panel .data-table tbody td:last-child { padding-right: var(--edge); }
.table-panel .pager { padding-left: var(--edge); padding-right: var(--edge); }

/* ---------- Dashboard ---------- */
.dash { gap: 0; }
.dash-head { padding: var(--s6) var(--edge) var(--s3); }
.dash-tabs { padding: 0 var(--edge); margin: 0; }
.dash-tabpanel { gap: 0; }
.dash-tabpanel > * , .dash-tabpanel > .dash-tasks > * { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; }
.dash-tabpanel > .panel, .dash-tabpanel > section, .dash-tabpanel .ts-group, .dash-tabpanel > .dash-tasks > .panel, #bdRoot > * { padding-left: var(--edge); padding-right: var(--edge); }
.dash-tabpanel > .ts-bar, .dash-tabpanel > .ts-range { padding: var(--s3) var(--edge); border-bottom: 1px solid var(--separator); background: var(--canvas); }
.dash-tabpanel > .ts-groups { gap: 0; }
.ts-group { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; padding-left: var(--edge); padding-right: var(--edge); }

/* ---------- Tasks ---------- */
.tasks-page { gap: 0; padding: 0; }
.tasks-page > .tasks-head { padding: var(--s6) var(--edge) var(--s3); }
.tasks-page > .tasks-filters { padding: var(--s3) var(--edge); margin: 0; border-bottom: 1px solid var(--separator); }
.tasks-page > .task-group, .tasks-page > .gt, .tasks-page > section, .tasks-page > .task-form { margin: 0; padding: var(--s5) var(--edge); border-radius: 0; border: 0; border-bottom: 1px solid var(--separator); box-shadow: none; }

/* ---------- Record pages: header band, then main column + side column ---------- */
#detailView > .record-top { padding: var(--s4) var(--edge) 0; margin: 0; }
#detailView > .record-hero { padding: var(--s3) var(--edge) var(--s5); margin: 0; border-bottom: 1px solid var(--separator); }
.record-layout { gap: 0; margin: 0; align-items: stretch; }
.record-main { padding: var(--s5) var(--edge) var(--s8); gap: var(--s3); min-width: 0; }
.record-aside { padding: var(--s5) var(--edge) var(--s8); border-left: 1px solid var(--separator); background: color-mix(in srgb, var(--surface-2) 55%, var(--canvas)); top: var(--appbar-h); }

/* ---------- Forms (new / edit) ---------- */
#formView .form-root > .record-top { padding: var(--s4) var(--edge) 0; margin: 0; }
#formView .form-root > .form-intro, #formView .form-root > .form-alert { margin: 0; padding: var(--s3) var(--edge) var(--s5); }
#formView .form-root > .q-form { padding: 0; margin: 0; gap: 0; }
#formView .q-form > * { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; }
#formView .q-form > * > .q-el-bar, #formView .q-form > * > .q-el-body { padding-left: var(--edge); padding-right: var(--edge); }
#formView .form-root > .q-actions, #formView .q-actions { padding: var(--s4) var(--edge); margin: 0; border-top: 1px solid var(--separator); }

@media (max-width: 1100px) { :root { --edge: 24px; } .record-layout { grid-template-columns: 1fr; } .record-aside { border-left: 0; border-top: 1px solid var(--separator); } }
@media (max-width: 767px) { :root { --edge: 16px; } }
.task-meta { flex-wrap: wrap; min-width: 0; }
.task-meta .m-sub, .task .m-sub { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.task-group-h { flex-wrap: wrap; row-gap: 2px; }
.task-group-h .m-sub { white-space: normal; min-width: 0; }
@media (max-width: 767px) { .task-group-h .m-sub { flex-basis: 100%; } }
.tasks-page > .tasks-filters { border: 0; border-bottom: 1px solid var(--separator); border-radius: 0; box-shadow: none; background: transparent; }

/* =====================================================================================================
   DASHBOARD SPACING — sections stay edge to edge from side to side, but each is its own band: canvas shows
   between bands (24px) and every band has room above and below its content. Applies to every tab.
   ===================================================================================================== */
.dash-tabpanel { gap: var(--s6); padding: var(--s6) 0 var(--s8); }
.dash-tabpanel > .ts-groups { gap: var(--s6); }

/* each section: a white band with hairlines above and below, and vertical room inside */
.dash-tabpanel > .panel, .dash-tabpanel > section, .dash-tabpanel > .dash-tasks > .panel, #bdRoot > *, .dash-tabpanel .ts-group {
  background: var(--surface); border-top: 1px solid var(--separator); border-bottom: 1px solid var(--separator);
  padding-top: var(--s6); padding-bottom: var(--s6); }
.dash-tasks, #bdRoot { margin: 0; }

/* inside a band: clear space between the heading, its controls and the content */
.dash-tabpanel .panel > h2, .dash-tabpanel section > h2, .dash-tabpanel .dash-panel-head, .dash-tabpanel .ts-group > h2 { margin-bottom: var(--s4); }
.dash-tabpanel .gt-top { margin-bottom: var(--s5); }
.dash-tabpanel .gt-undated { margin-top: var(--s5); }

#bdRoot .bd-controls, #bdRoot .pv-controls, .dash-tabpanel .pv-controls { margin-bottom: var(--s5); }

.dash-tabpanel .pv-presets { margin-bottom: var(--s4); }

.dash-tabpanel .dash-sub, .dash-tabpanel .panel > p:first-of-type { margin-bottom: var(--s4); }

/* the period and "as of" bars of the area tabs sit inside the flow, not as boxes */
.dash-tabpanel > .ts-range { padding: var(--s4) var(--edge); border-top: 1px solid var(--separator); border-bottom: 1px solid var(--separator); background: var(--surface); }
.dash-tabpanel > .ts-bar { padding: 0 var(--edge); border: 0; background: transparent; }
.dash-tabpanel .ts-group h2 { margin-bottom: var(--s4); }

@media (max-width: 767px) {
  .dash-tabpanel { gap: var(--s5); padding: var(--s5) 0 var(--s6); }
  .dash-tabpanel > .ts-groups { gap: var(--s5); }
  .dash-tabpanel > .panel, .dash-tabpanel > section, .dash-tabpanel > .dash-tasks > .panel, #bdRoot > *, .dash-tabpanel .ts-group { padding-top: var(--s5); padding-bottom: var(--s5); }
}
/* dashboard: the inner rhythm of each section */
.dash-tabpanel .panel > :last-child, .dash-tabpanel section > :last-child { margin-bottom: 0; }

.dash-tabpanel .bd-foot { margin-top: var(--s3); }
.dash-tabpanel .pv-title { margin-top: var(--s2); }
.dash-tabpanel figure.ch { margin-bottom: var(--s6); }
/* area tabs: the period picker and the "as of" line form one header band */
.dash-tabpanel { --dash-gap: var(--s6); }
.dash-tabpanel > .ts-range { border-bottom: 0; padding-bottom: var(--s3); }
.dash-tabpanel > .ts-bar { margin-top: calc(-1 * var(--dash-gap)); padding: var(--s2) var(--edge) var(--s4); background: var(--surface); border-bottom: 1px solid var(--separator); }
@media (max-width: 767px) { .dash-tabpanel { --dash-gap: var(--s5); } }
@media (max-width: 760px) {
  .ts-table tbody th, .ts-table .ts-val, .ts-table td:nth-child(3), .ts-table td, .ts-table th { width: auto; max-width: none; }
  .ts-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); }
  .ts-table tbody tr > th { grid-column: 1; align-self: center; }
  .ts-table tbody tr > .ts-val { grid-column: 2; grid-row: 1; text-align: right; align-self: center; }
  .ts-table tbody tr > .ts-val::before { content: none; }
  .ts-table tbody tr > td:not(.ts-val) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ts-table tbody tr { padding: var(--s3) 0; row-gap: var(--s2); }
  .ts-table tbody tr > th, .ts-table tbody tr > td { padding: 0; }
  .ts-table td[data-label]::before { margin-top: 0; margin-bottom: 2px; }
}
@media (hover: none) { .ts-table tbody tr:hover > *, .data-table tbody tr:hover > td { background: transparent; } }

/* =====================================================================================================
   BOARD LAYER — spreadsheet-dense tables with fine gridlines, solid colour status cells, Onest.
   ===================================================================================================== */
body { font-family: var(--font); letter-spacing: 0; }
.page-title { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.02em; }
.record-title { font-weight: 600; letter-spacing: -0.02em; }
.dash-head h1, .record-title, .page-title { color: var(--text-primary); }
.btn { font-weight: 500; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* sidebar: selected item = soft blue with a primary edge */
.nav-item.active { background: var(--bbs-active-bg); color: var(--bbs-active-fg); box-shadow: inset 3px 0 0 var(--brass); font-weight: 600; }

/* ---------- Boards: spreadsheet grid ---------- */
.data-table { font-size: var(--fs-data); border-collapse: separate; border-spacing: 0; }
.data-table thead th { height: 36px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-light);
  font-size: var(--fs-micro); font-weight: 500; color: var(--text-secondary); }
.data-table tbody td { height: 36px; padding: 0 12px; border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light); }
.data-table thead th:last-child, .data-table tbody td:last-child { border-right: 0; }
.data-table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }

/* status, stage, type and yes/no shown as solid colour cells */
.data-table tbody td:has(> .pill:only-child) { padding: 0; }
.data-table tbody td > .pill:only-child { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; min-height: 36px;
  margin: 0; padding: 0 10px; border: 0; border-radius: 0; font-size: var(--fs-micro); font-weight: 500; white-space: nowrap; }
.data-table tbody td > .pill.success:only-child { background: var(--cell-success); color: var(--cell-success-fg); }
.data-table tbody td > .pill.warning:only-child { background: var(--cell-warning); color: var(--cell-warning-fg); }
.data-table tbody td > .pill.danger:only-child  { background: var(--cell-danger);  color: var(--cell-danger-fg); }
.data-table tbody td > .pill.info:only-child    { background: var(--cell-info);    color: var(--cell-info-fg); }
.data-table tbody td > .pill.neutral:only-child { background: var(--cell-neutral); color: var(--cell-neutral-fg); }

/* figures: equal-width digits only where columns of numbers must line up */
.stat-value, .kpi-value, .kc-value, .ts-val, .page-title, .record-title { font-variant-numeric: normal; }
.data-table td { font-variant-numeric: normal; }
.data-table td.right, .data-table td .num, .bd-table td, .pv-table td { font-variant-numeric: tabular-nums; }
/* slimmer sidebar (208px): the tagline and role line wrap instead of being cut off */
.rail-brand { padding-right: 12px; gap: 10px; }
.brand-sub, .rail-user-role, .rail-user .rail-user-text span:last-child { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

.nav-item { padding: 0 10px; }
/* boards: natural figures (Onest's equal-width "1" is very wide) */
.data-table td, .data-table td.right, .data-table td .num { font-variant-numeric: normal; }

/* =====================================================================================================
   TYPE ROLES — the scale in design-tokens.css, applied across layers (last, so it wins by order).
   ===================================================================================================== */
h1, h2, h3 { line-height: var(--lh-heading); text-wrap: balance; }
.page-title, .record-title, .dash-head h1 { line-height: var(--lh-tight); }
p, dd, .page-sub, .q-intro, .hint { text-wrap: pretty; }
.record-title:first-child { margin-top: 0; }   /* its top margin only spaces it below a label line (public form) */

/* =====================================================================================================
   MOMENTS (delight.js) — a deal going live, and an empty task list. Each animation ends on the drawn state,
   so reduced motion (the rule above shortens every animation) shows the finished picture at once.
   ===================================================================================================== */
.toast.moment { gap: var(--s4); padding: var(--s3) var(--s5) var(--s3) var(--s4); max-width: min(560px, calc(100% - var(--s8))); }
.toast.moment .toast-msg { font-size: var(--fs-body); line-height: var(--lh-heading); }

/* Deal goes live: merchant and provider meet, a line joins them, the provider's node lights up */
.conn-mark { flex: none; overflow: visible; }
.conn-line { stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.conn-node { fill: var(--raised); stroke: var(--accent-text); stroke-width: 2; }
.conn-b { fill: var(--accent-text); }
.conn-ring { fill: none; stroke: var(--accent-text); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.toast.moment.show .conn-a { animation: conn-meet-a 420ms var(--ease-out) both; }
.toast.moment.show .conn-b { animation: conn-meet-b 420ms var(--ease-out) both, conn-light 260ms var(--ease-out) 520ms both; }
.toast.moment.show .conn-line { animation: conn-draw 320ms var(--ease-out) 260ms both; }
.toast.moment.show .conn-ring { animation: conn-ring 520ms var(--ease-out) 560ms forwards; }   /* hidden until the nodes meet */
@keyframes conn-meet-a { from { transform: translateX(-5px); opacity: .5; } }
@keyframes conn-meet-b { from { transform: translateX(5px); opacity: .5; } }
@keyframes conn-light { from { fill: var(--raised); } }
@keyframes conn-draw { from { stroke-dashoffset: 1; } }
@keyframes conn-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }

/* Tasks all done: three task rows, checked off */
.all-clear { display: flex; align-items: center; gap: var(--s5); padding: var(--s6) var(--s5); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); }
.ac-mark { flex: none; overflow: visible; }
.ac-mark rect { fill: none; stroke: var(--border); stroke-width: 1.5; }
.ac-mark line { stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.ac-tick { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ac-title { font-size: var(--fs-h3); font-weight: 600; color: var(--text-primary); }
.ac-text { margin-top: var(--s1); max-width: 52ch; font-size: var(--fs-small); color: var(--text-secondary); }
.all-clear.fresh .ac-tick { animation: conn-draw 360ms var(--ease-out) calc(160ms + var(--i) * 140ms) both; }
.all-clear.fresh .ac-row line { animation: ac-settle 360ms var(--ease-out) calc(160ms + var(--i) * 140ms) both; }
@keyframes ac-settle { from { opacity: 1; stroke: var(--text-secondary); } }
@media (max-width: 480px) { .all-clear { flex-direction: column; align-items: flex-start; gap: var(--s3); } }

/* =====================================================================================================
   COMPACT DENSITY — a work tool used all day: tighter padding inside cards and tables, same type sizes.
   Cards 12/16 inside (was 16–24 / 20–32), table rows 32px (was 36), groups 8–12 apart. Last, so it wins by order.
   Touch screens keep 44px targets (the pointer: coarse rules at the end).
   ===================================================================================================== */
/* page frame */
.content { padding-top: var(--s5); }
.hero { margin-bottom: var(--s4); gap: var(--s4); }
.page-actions { margin-top: var(--s3); }
.stats { gap: var(--s2); }
.stats .stat, .stats .stat.lead { padding: var(--s2) var(--s3); }
.table-toolbar { padding: var(--s3) var(--s4); }
.pager { padding: var(--s2) var(--s4); }

/* tables: 32px rows, 10px cells (the first column keeps its page-edge alignment) */
.data-table thead th { height: 32px; padding-top: 0; padding-bottom: 0; padding-right: 10px; }
.data-table tbody td { height: 32px; padding-top: 0; padding-bottom: 0; padding-right: 10px; }
.data-table thead th:not(:first-child), .data-table tbody td:not(:first-child) { padding-left: 10px; }
.data-table tbody td > .pill:only-child { height: 32px; min-height: 32px; }
.dash-table th, .dash-table td, .pv-table th, .pv-table td, .bd-table th, .bd-table td { padding: 6px 10px; }

/* dashboard: full-width bands keep their page-edge sides; less room above, below and between them */
.dash-tabpanel { --dash-gap: var(--s4); gap: var(--s4); padding-top: var(--s4); }
.dash-tabpanel > .panel, .dash-tabpanel > section, .dash-tabpanel > .dash-tasks > .panel, #bdRoot > *, .dash-tabpanel .ts-group { padding-top: var(--s4); padding-bottom: var(--s4); }
.dash-tabpanel > .ts-groups { gap: var(--s4); }
.dash-panel-head { margin-bottom: var(--s2); }
.gt-label { padding-top: 6px; padding-bottom: 6px; }   /* timeline rows ~49px: two text lines around the 28px bar */

.bd-range, .pv-controls { padding: var(--s2); gap: var(--s2); }

/* record pages */
#detailView > .record-hero { padding-bottom: var(--s4); gap: var(--s4); }
.key-figure { padding: var(--s3) var(--s4); }
.key-figure dd { margin-top: var(--s1); }
.record-main { padding-top: var(--s4); }
.record-aside { padding-top: var(--s4); gap: var(--s3); }
.panel.record-section { padding: 0 var(--s4); }
.sec-toggle { min-height: 44px; padding: 10px 0; }
.sec-body { padding: var(--s3) 0 var(--s4); }
.field-grid { gap: var(--s3) var(--s4); }
.glance-row { padding: 6px var(--s2); gap: var(--s3); }
.panel.aside-card { padding: var(--s3) var(--s4); }
.aside-list > div { padding: 6px 0; }
.comment-strip { padding: var(--s2) var(--s3); }

.rel-block.card { padding: var(--s2) var(--s3); }

/* tasks: a band per group, cards tighter inside */
.tasks-page > .tasks-head { padding-top: var(--s5); }
.tasks-page > .task-group, .tasks-page > .gt, .tasks-page > section, .tasks-page > .task-form { padding-top: var(--s4); padding-bottom: var(--s4); }
.task { padding: var(--s2) var(--s3); gap: var(--s2) var(--s3); }
.task-meta, .task-status { margin-top: 6px; }

/* touch screens: rows and quick-menu links stay comfortable to tap */
@media (pointer: coarse) {
  .data-table thead th, .data-table tbody td, .data-table tbody td > .pill:only-child { height: 40px; min-height: 40px; }
}

/* ---------- Dashboard tabs (Merchants · Providers · Opportunities): a denser read ----------
   Figures sit on one line each: smaller counts, the change pill beside its comparison, tighter cells and bands. */
@media (min-width: 761px) {
  .ts-table th, .ts-table td { padding: 7px 10px; vertical-align: middle; }
  .ts-table thead th { padding-top: 6px; padding-bottom: 6px; }
  .ts-val { font-size: var(--fs-h3); }
  .ts-cmp { display: inline; }
  .ts-chg { margin: 0 0 0 6px; line-height: 18px; vertical-align: 1px; }
  .ts-note { margin-top: 2px; }
  .ts-table tbody th { width: 24%; }
  .ts-val { width: 10%; }
  .ts-table td:nth-child(3) { width: 30%; }
}
.dash-tabpanel .ts-group { padding-top: var(--s3); padding-bottom: var(--s3); }
.dash-tabpanel .ts-group > h2 { margin-bottom: var(--s2); }
.dash-tabpanel > .ts-groups { gap: var(--s3); }
.dash-tabpanel > .ts-range { padding-top: var(--s2); padding-bottom: var(--s2); }

/* ---------- Tasks: closed groups, cards that open their record, and each task's comment thread ---------- */
.task-group-h { margin-bottom: 0; }
.task-group-toggle { display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px; margin: 0 0 0 calc(-1 * var(--s1)); padding: 0 var(--s2) 0 var(--s1);
  border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.task-group-toggle:hover { background: var(--surface-2); }
.task-group-toggle svg { flex-shrink: 0; transition: transform .16s ease-out; }
.task-group-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.task-group.is-open .task-list { margin-top: var(--s2); }
.tasks-page > .task-group:not(.is-open) { padding-top: var(--s2); padding-bottom: var(--s2); }

.task-title-link { color: inherit; text-decoration: none; }
.task-title-link:hover, .task-title-link:focus-visible { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

.task-thread-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s2); padding: 2px var(--s2) 2px 0; border: 0; background: none;
  color: var(--text-secondary); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.task-thread-toggle:hover, .task-thread-toggle[aria-expanded="true"] { color: var(--link); }
.task-thread { margin-top: var(--s2); padding: var(--s3); border-radius: var(--radius-sm); background: var(--surface-2); cursor: auto; }
.tc-list { margin: 0 0 var(--s3); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.tc-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--fs-micro); }
.tc-author { font-weight: 600; font-size: var(--fs-small); }
.tc-head time { color: var(--text-faint); margin-left: auto; }
.tc-body { margin-top: 2px; font-size: var(--fs-small); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.tc-empty { margin: 0 0 var(--s3); font-size: var(--fs-small); color: var(--text-muted); }
.tc-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: end; }
.tc-composer textarea.input { height: auto; min-height: 0; font: inherit; font-size: var(--fs-small); padding: var(--s2) var(--s3); resize: vertical; background: var(--surface); }
.tc-composer .field-error { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.task-thread > .tc-empty:last-child, .task-thread > .field-error:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .tc-composer { grid-template-columns: 1fr; } .tc-composer .btn { justify-self: end; } }

/* ---------- Tasks grouped by age: the newest group and today's tasks stand out ---------- */
.task-group.fresh .task-group-h { color: var(--accent-text); }
.task-age { display: inline-flex; align-items: center; font-size: var(--fs-micro); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.task-age.is-new { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--action-tint); color: var(--accent-text); font-weight: 600; }

/* ---- Tagging people in comments (comments.js) and "You've been tagged" (tasks.js) */
.mention-wrap { position: relative; }
.mention-pop {
  position: absolute; z-index: 30; left: 0; top: calc(100% + var(--s1)); width: min(320px, 100%);
  max-height: 264px; overflow-y: auto; margin: 0; padding: var(--s1); list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.mention-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 36px; padding: 0 var(--s3); border-radius: 6px; font-size: var(--fs-small); cursor: pointer;
}
.mention-opt:hover, .mention-opt[aria-selected="true"] { background: var(--action-tint); color: var(--accent-text); }
.mention-none { padding: var(--s2) var(--s3); font-size: var(--fs-small); color: var(--text-muted); }
.mention-btn { margin-right: auto; font-size: var(--fs-small); }
.mention { padding: 0 3px; border-radius: 4px; background: var(--action-tint); color: var(--accent-text); font-weight: 600; }
.mention.is-me { background: var(--accent); color: var(--color-on-primary); }
.comment.comment-flash { box-shadow: 0 0 0 3px var(--accent); transition: box-shadow .3s; }
.comment:focus { outline: none; }
.tag-mark { color: var(--accent-text); }
.tag-quote { color: var(--text-secondary); }
.task.tag-item.is-unseen { border-color: var(--accent); }

/* =====================================================================================================
   SCREEN: CONTACTS LIST (#/merchants, #/providers, #/opportunities, #/deals — #listView, app.js render()).
   MyCRM design system, flat: semantic tokens only (no raw colours, sizes from the --space / --radius /
   --text scales). Last, so it wins by order. Markup and behaviour are unchanged.
   ===================================================================================================== */
#listView { background: var(--color-background); }

/* ---- header band: title, subtitle, CTA, summary tiles ---- */
#listView > .hero { padding: var(--space-lg) var(--edge); background: var(--color-background); border-bottom: 1px solid var(--color-border); }
#listView .page-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-lg); align-items: end; }
#listView .page-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); color: var(--color-foreground); }
#listView .page-sub { margin-top: var(--space-sm); max-width: 60ch; font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-muted-foreground); }
#listView .page-actions { margin-top: var(--space-md); }

/* summary tiles: one even row of four flat cards */
#listView .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; gap: var(--space-sm-plus); }
#listView .stats .stat, #listView .stats .stat.lead {
  grid-row: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-sm);
  min-height: 88px; padding: var(--space-sm-plus) var(--space-md);
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; }
#listView .stats .stat.lead { border-color: var(--color-primary-soft-border); background: var(--color-primary-soft); }
#listView .stat-label { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-heading); color: var(--color-muted-foreground); }
#listView .stat-hint { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted-foreground); }
#listView .stat-value { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums; color: var(--color-foreground); }
#listView .stat.lead .stat-value { color: var(--color-primary-text); }

/* ---- table card: toolbar, filters, table, pager ---- */
#listView > .table-panel { background: var(--color-card); }
#listView .table-toolbar { gap: var(--space-sm-plus); padding: var(--space-sm-plus) var(--edge); background: var(--color-card); border-bottom: 1px solid var(--color-border); }

/* search */
#listView .table-toolbar .field { width: min(400px, 100%); }
#listView .table-toolbar .input { height: var(--size-control); min-height: var(--size-control);
  padding-left: calc(var(--space-sm-plus) + 16px + var(--space-sm)); padding-right: var(--space-xl);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
  background: var(--color-card); color: var(--color-foreground); font-size: var(--text-base);
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
#listView .table-toolbar .input::placeholder { color: var(--color-muted-foreground); }
#listView .table-toolbar .input:hover { border-color: var(--color-muted-foreground); }
#listView .table-toolbar .input:focus, #listView .table-toolbar .input:focus-visible {
  outline: none; border-color: var(--color-ring); box-shadow: var(--state-focus-ring); }
#listView .input-icon { color: var(--color-muted-foreground); }
#listView .input-kbd { border-color: var(--color-border-strong); border-radius: var(--radius-xs); background: var(--color-muted); color: var(--color-muted-foreground); font-family: var(--font-body); }

#listView .toolbar-right { gap: var(--space-sm); }
#listView .record-count { font-size: var(--text-sm); color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }

/* buttons on this screen */
#listView .btn { min-height: var(--size-control); border-radius: var(--radius-control); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
#listView .btn-primary { padding: 0 var(--space-md); background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
#listView .btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
#listView .btn-ghost { background: var(--color-card); border: 1px solid var(--color-border-strong); color: var(--color-foreground); }
#listView .btn-ghost:hover:not(:disabled) { background: var(--color-muted); border-color: var(--color-control-border); }
#listView .btn-ghost[aria-expanded="true"], #listView .btn-ghost[aria-pressed="true"] {
  background: var(--state-selected-bg); border-color: var(--state-selected-border); color: var(--state-selected-fg); }
#listView .btn-quiet { color: var(--color-muted-foreground); }
#listView .btn-quiet:hover:not(:disabled) { background: var(--state-hover); color: var(--color-foreground); }
#listView .btn .count-inline { font-family: var(--font-body); font-weight: var(--weight-regular); color: var(--color-muted-foreground); }
#listView .btn:disabled { opacity: var(--state-disabled-opacity); }
#listView .btn:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: var(--state-focus-offset); box-shadow: none; }

/* status filter: segmented chips with counts */
#listView .stage-filters { gap: var(--space-sm); padding: var(--space-sm-plus) var(--edge); background: var(--color-card); border-bottom: 1px solid var(--color-border); }
#listView .stage-filters-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-muted-foreground); }
#listView .stage-filter-group { gap: var(--space-xs); }
#listView .stage-filter { height: var(--size-control-sm); min-height: var(--size-control-sm); gap: var(--space-sm); padding: 0 var(--space-sm-plus);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-card);
  color: var(--color-foreground); font-size: var(--text-sm); font-weight: var(--weight-medium); }
#listView .stage-filter:hover { background: var(--color-muted); border-color: var(--color-control-border); }
#listView .stage-filter[aria-pressed="true"] { background: var(--state-selected-bg); border-color: var(--color-primary); color: var(--state-selected-fg); font-weight: var(--weight-semibold); }
#listView .stage-filter-count { min-width: 20px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-muted);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--color-muted-foreground); }
#listView .stage-filter[aria-pressed="true"] .stage-filter-count { background: var(--color-primary); color: var(--color-on-primary); }
#listView .stage-filter:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: var(--state-focus-offset); }

/* table */
#listView .table-scroll-top { border-bottom: 1px solid var(--color-border); }
#listView .table-scroll::-webkit-scrollbar-track, #listView .table-scroll-top::-webkit-scrollbar-track { background: var(--color-card); }
#listView .table-scroll::-webkit-scrollbar-thumb, #listView .table-scroll-top::-webkit-scrollbar-thumb { border-color: var(--color-card); background: var(--color-control-border); }
#listView .data-table { font-family: var(--font-body); font-size: var(--text-sm); }
#listView .data-table thead th { height: var(--size-row); background: var(--color-muted); color: var(--color-muted-foreground);
  border-bottom: 1px solid var(--color-border-strong); border-right: 1px solid var(--color-border);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .01em; }
#listView .data-table tbody td { height: var(--size-row); background: var(--color-card); color: var(--color-card-foreground);
  border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
#listView .data-table thead th:last-child, #listView .data-table tbody td:last-child { border-right: 0; }
#listView .data-table th:first-child, #listView .data-table td:first-child { box-shadow: inset -1px 0 0 var(--color-border-strong); }
#listView .data-table tbody td > .pill:only-child { height: var(--size-row); min-height: var(--size-row); font-weight: var(--weight-semibold); }

/* sort buttons in the header */
#listView .th-btn { gap: var(--space-xs); color: inherit; }
#listView .th-btn .icon { color: var(--color-muted-foreground); }
#listView .th-btn:hover, #listView th[aria-sort="ascending"] .th-btn, #listView th[aria-sort="descending"] .th-btn { color: var(--color-foreground); }
#listView th[aria-sort="ascending"] .th-btn .icon, #listView th[aria-sort="descending"] .th-btn .icon { color: var(--color-primary-text); }
#listView .th-btn:focus-visible, #listView .th-grip:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: 0; }
#listView .th-grip { color: var(--color-muted-foreground); }
#listView .th-grip:hover { background: var(--state-hover); color: var(--color-foreground); }
#listView .data-table thead th.drop-before { box-shadow: inset 3px 0 0 var(--color-primary); }
#listView .data-table thead th.drop-after { box-shadow: inset -3px 0 0 var(--color-primary); }

/* rows: quiet hover; keyboard focus draws a full 2px ring round the row (not colour alone) */
#listView .data-table tbody tr[data-index]:hover > td { background: var(--color-muted); }
#listView .data-table tbody tr[data-index]:hover > td:first-child { box-shadow: inset 3px 0 0 var(--color-primary), inset -1px 0 0 var(--color-border-strong); }
#listView .data-table tbody tr[data-index]:focus-visible { outline: none; }
#listView .data-table tbody tr[data-index]:focus-visible > td { background: var(--state-selected-bg);
  box-shadow: inset 0 var(--state-focus-width) 0 var(--state-focus-color), inset 0 calc(-1 * var(--state-focus-width)) 0 var(--state-focus-color); }
#listView .data-table tbody tr[data-index]:focus-visible > td:first-child {
  box-shadow: inset var(--state-focus-width) 0 0 var(--state-focus-color), inset 0 var(--state-focus-width) 0 var(--state-focus-color), inset 0 calc(-1 * var(--state-focus-width)) 0 var(--state-focus-color); }
#listView .data-table tbody tr[data-index]:focus-visible > td:last-child {
  box-shadow: inset calc(-1 * var(--state-focus-width)) 0 0 var(--state-focus-color), inset 0 var(--state-focus-width) 0 var(--state-focus-color), inset 0 calc(-1 * var(--state-focus-width)) 0 var(--state-focus-color); }
#listView .data-table tbody tr[data-index]:focus-visible > td > .pill:only-child {   /* solid cells fill their cell: carry the ring over them */
  box-shadow: inset 0 var(--state-focus-width) 0 var(--state-focus-color), inset 0 calc(-1 * var(--state-focus-width)) 0 var(--state-focus-color); }
#listView .expand-row > td { background: var(--color-muted); }

/* cells */
#listView .cell-primary, #listView .row-link { font-weight: var(--weight-semibold); color: var(--color-foreground); }
#listView .row-link:hover { color: var(--color-primary-text); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
#listView .cell-link { color: var(--color-primary-text); }
#listView .cell-empty { color: var(--color-muted-foreground); }
#listView .cell-mono, #listView .cell-ref { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted-foreground); }
#listView .chip { border-color: var(--color-border-strong); border-radius: var(--radius-xs); background: var(--color-muted); color: var(--color-foreground); }
#listView .chip.more { background: transparent; color: var(--color-muted-foreground); }
#listView .row-mark { padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary);
  font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 20px; }
#listView .row-task { border-radius: var(--radius-pill); background: var(--color-warning-soft); color: var(--color-warning-text); }
#listView .row-task.overdue { background: var(--color-destructive-soft); color: var(--color-destructive-text); }
#listView .row-comment-btn { width: 28px; height: 28px; border-radius: var(--radius-control); color: var(--color-muted-foreground); cursor: pointer; }
#listView .row-comment-btn:hover { border-color: var(--color-border-strong); background: var(--color-card); color: var(--color-primary-text); }
#listView .row-comment-btn:focus-visible, #listView .row-expand:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: 0; }
#listView .row-expand[aria-expanded="true"] { border-color: var(--color-primary); background: var(--state-selected-bg); color: var(--state-selected-fg); }

/* pager */
#listView .pager { padding: var(--space-sm) var(--edge); background: var(--color-card); border-top: 1px solid var(--color-border-strong);
  font-size: var(--text-sm); color: var(--color-muted-foreground); }
#listView .pager-info { color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }

/* empty / error states */
#listView .state h3 { font-family: var(--font-heading); color: var(--color-foreground); }
#listView .state p { color: var(--color-muted-foreground); }
#listView .state-icon { border-color: var(--color-border); border-radius: var(--radius-card); background: var(--color-primary-soft); color: var(--color-primary-text); }
#listView .state.error .state-icon { border-color: var(--color-destructive-border); background: var(--color-destructive-soft); color: var(--color-destructive-text); }
#listView .state.error h3 { color: var(--color-destructive-text); }

/* ---- responsive ---- */
@media (max-width: 1279px) {
  #listView .page-head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 767px) {
  #listView > .hero { padding: var(--space-md) var(--edge); }
  #listView .page-title { font-size: var(--text-xl); }
  #listView .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  #listView .stats .stat, #listView .stats .stat.lead { min-height: 0; padding: var(--space-sm) var(--space-sm-plus); }
  #listView .stat-value { font-size: var(--text-lg); }
  #listView .table-toolbar .field { width: 100%; }
  #listView .stage-filters { padding: var(--space-sm) var(--edge); }
}
@media (pointer: coarse) {
  #listView .btn, #listView .table-toolbar .input { min-height: var(--size-touch); height: var(--size-touch); }
  #listView .stage-filter { height: 36px; min-height: 36px; }
  #listView .row-comment-btn { width: 36px; height: 36px; }
  #listView .data-table thead th, #listView .data-table tbody td, #listView .data-table tbody td > .pill:only-child { height: var(--size-touch); min-height: var(--size-touch); }
}
@media (prefers-reduced-motion: reduce) {
  #listView .btn, #listView .stage-filter, #listView .table-toolbar .input, #listView .data-table td { transition: none; }
}

/* =====================================================================================================
   SCREEN: RECORD PAGE (#/merchants/<id>, #/providers/<id>, #/opportunities/<id>, #/deals/<id> — #detailView,
   app.js renderDetail()). MyCRM design system, flat: semantic tokens only. Last, so it wins by order.
   Markup and behaviour are unchanged. Finance and matches blocks inside the page keep their own styles for now.
   ===================================================================================================== */
#detailView { background: var(--color-background); }

/* ---- top bar: back link, Edit, previous / next ---- */
#detailView > .record-top { padding: var(--space-md) var(--edge) 0; }
#detailView .back-link { min-height: var(--size-control); border-radius: var(--radius-control); color: var(--color-muted-foreground);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
#detailView .back-link:hover { background: var(--state-hover); color: var(--color-foreground); }
#detailView .record-actions { gap: var(--space-sm-plus); }
#detailView .record-nav { gap: var(--space-xs); }
#detailView .record-pos { margin-right: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }

/* buttons on this screen */
#detailView .btn { border-radius: var(--radius-control); font-family: var(--font-body); font-weight: var(--weight-semibold);
  transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
#detailView .btn-compact { min-height: var(--size-control-sm); padding: 0 var(--space-sm-plus); font-size: var(--text-sm); }
#detailView .btn-icon { width: var(--size-control); min-width: var(--size-control); min-height: var(--size-control); }
#detailView .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
#detailView .btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
#detailView .btn-ghost { background: var(--color-card); border: 1px solid var(--color-border-strong); color: var(--color-foreground); }
#detailView .btn-ghost:hover:not(:disabled) { background: var(--color-muted); border-color: var(--color-control-border); }
#detailView .btn-quiet { color: var(--color-muted-foreground); }
#detailView .btn-quiet:hover:not(:disabled) { background: var(--state-hover); color: var(--color-foreground); }
#detailView .btn:disabled { opacity: var(--state-disabled-opacity); }
#detailView .link-btn { color: var(--color-primary-text); }

/* one focus style for every control on the page: 2px primary outline, 2px away */
#detailView :is(.btn, .back-link, .sec-toggle, .glance-row, .link-btn, .cell-link, .rel-title a, .sec-empty > summary, a):focus-visible {
  outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: var(--state-focus-offset); box-shadow: none; }

/* ---- header: title, facts, key figures ---- */
#detailView > .record-hero { gap: var(--space-lg); padding: var(--space-sm-plus) var(--edge) var(--space-lg);
  background: var(--color-background); border-bottom: 1px solid var(--color-border); }
#detailView .record-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); color: var(--color-foreground); }
#detailView .record-facts { gap: var(--space-sm-plus) var(--space-lg); margin-top: var(--space-sm-plus); }
#detailView .record-facts dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-muted-foreground); }
#detailView .record-facts dd { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-foreground); }
#detailView .key-figures { gap: var(--space-sm-plus); }
#detailView .key-figure { min-width: 180px; padding: var(--space-sm-plus) var(--space-md);
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; }
#detailView .key-figure.lead { background: var(--color-primary-soft); border-color: var(--color-primary-soft-border); }
#detailView .key-figure dt { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-muted-foreground); }
#detailView .key-figure dd { margin-top: var(--space-xs); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-semibold);
  line-height: var(--leading-tight); font-variant-numeric: tabular-nums; color: var(--color-foreground); }
#detailView .key-figure.lead dd, #detailView .key-figure.lead dd .num { color: var(--color-primary-text); text-shadow: none; }

/* ---- two columns: main + side ---- */
#detailView .record-main { gap: var(--space-sm-plus); padding: var(--space-md) var(--edge) var(--space-xl); }
#detailView .record-aside { gap: var(--space-sm-plus); padding: var(--space-md) var(--edge) var(--space-xl);
  background: var(--color-background); border-left: 1px solid var(--color-border); }

/* cards: one look for every panel on the page */
#detailView .panel, #detailView .comment-strip, #detailView .task-strip {
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; }

/* ---- activity strips: comments, tasks ---- */

#detailView .comment-strip { padding: var(--space-sm) var(--space-md); }

#detailView .comment-strip-head { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-foreground); }
#detailView .comment-strip-head .icon { color: var(--color-primary-text); }
#detailView .comment-strip-latest { font-size: var(--text-sm); color: var(--color-foreground); }
#detailView .comment-strip-meta, #detailView .faint { color: var(--color-muted-foreground); }
#detailView .count-badge { min-width: 20px; height: 20px; border: 0; background: var(--color-muted); color: var(--color-muted-foreground);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); }

#detailView .tstrip-due { color: var(--color-info-text); }
#detailView .tstrip-due.warning { color: var(--color-warning-text); }
#detailView .tstrip-due.danger { color: var(--color-destructive-text); }

/* ---- "At a glance" ---- */
#detailView .glance { margin-bottom: 0; padding: var(--space-sm-plus) var(--space-md); }
#detailView .glance h2 { margin-bottom: var(--space-xs); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: 0; text-transform: none; color: var(--color-foreground); }
#detailView .glance h2 .icon { color: var(--color-primary-text); }
#detailView .glance-list li + li { border-top-color: var(--color-border); }
#detailView .glance-row { padding: var(--space-sm) var(--space-sm); border-radius: var(--radius-control); color: var(--color-foreground);
  transition: background-color var(--motion-fast) var(--motion-ease); }
#detailView .glance-row:hover { background: var(--color-muted); }
#detailView .glance-row:hover .glance-label { color: var(--color-primary-text); }
#detailView .glance-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
#detailView .glance-text { font-size: var(--text-sm); color: var(--color-muted-foreground); }
#detailView .glance-text span::before, #detailView .glance-row > .icon { color: var(--color-muted-foreground); }

/* ---- sections: collapsible cards ---- */
#detailView .panel.record-section { padding: 0 var(--space-md); scroll-margin-top: calc(var(--appbar-h) + var(--space-md)); }
#detailView .sec-toggle { min-height: 52px; padding: var(--space-sm) 0; gap: var(--space-sm-plus); border-radius: var(--radius-control); color: var(--color-foreground); }
#detailView .sec-toggle {   /* room inside the ring: text stays on the card's edge line, the focus ring sits just inside the card */
  width: calc(100% + 2 * var(--space-sm)); margin-inline: calc(-1 * var(--space-sm)); padding-inline: var(--space-sm); }
#detailView .sec-toggle:focus-visible { outline-offset: calc(-1 * var(--state-focus-width)); }
#detailView .sec-name { gap: 0; font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); }
#detailView .sec-name .icon { display: none; }             /* the old leaf mark: decoration, not information */
#detailView .sec-toggle:hover .sec-name { color: var(--color-primary-text); }
#detailView .sec-summary { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted-foreground); }
#detailView .sec-toggle > .icon:last-child { color: var(--color-muted-foreground); transition: transform var(--motion-base) var(--motion-ease); }
#detailView .sec-body { padding: var(--space-md) 0; border-top: 1px solid var(--color-border); }
#detailView .sec-action-note { font-size: var(--text-sm); color: var(--color-muted-foreground); }

/* fields */
#detailView .field-grid { gap: var(--space-md) var(--space-lg); }
#detailView .field-item dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .01em; color: var(--color-muted-foreground); }
#detailView .field-item dd { margin-top: var(--space-xs); font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-foreground); }
#detailView .cell-empty, #detailView .rel-none { color: var(--color-muted-foreground); }
#detailView .cell-link { color: var(--color-primary-text); }
#detailView .chip { border-color: var(--color-border-strong); border-radius: var(--radius-xs); background: var(--color-muted); color: var(--color-foreground); }
#detailView .chip.more { background: transparent; color: var(--color-muted-foreground); }
#detailView .sec-empty > summary { min-height: var(--size-control-sm); border-radius: var(--radius-control); font-size: var(--text-sm); color: var(--color-muted-foreground); }
#detailView .sec-empty > summary:hover { color: var(--color-foreground); }
#detailView .sec-empty .field-grid dt, #detailView .sec-empty .field-grid .cell-empty { color: var(--color-muted-foreground); }

/* linked records */
#detailView .rel-grid { gap: var(--space-sm-plus); }
#detailView .rel-block.card { padding: var(--space-sm-plus) var(--space-md); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
#detailView .rel-block h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-foreground); }
#detailView .rel-list::before { background: var(--color-border-strong); }
#detailView .rel-item::before { background: var(--color-primary); }
#detailView .rel-title { font-weight: var(--weight-semibold); color: var(--color-foreground); }

/* ---- side column: quick menu, workflow / record cards ---- */
#detailView .aside-card h2 { margin-bottom: var(--space-sm); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-foreground); }
#detailView .panel.aside-card { padding: var(--space-sm-plus) var(--space-md); }
#detailView .aside-list > div { padding: var(--space-sm) 0; border-bottom-color: var(--color-border); }
#detailView .aside-list dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-muted-foreground); }
#detailView .aside-list dd { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-foreground); }

/* ---- loading and error states ---- */
#detailView .state h3 { font-family: var(--font-heading); color: var(--color-foreground); }
#detailView .state p { color: var(--color-muted-foreground); }
#detailView .state.error h3 { color: var(--color-destructive-text); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  #detailView .record-aside { padding: 0; border: 0; background: transparent; }
}
@media (max-width: 767px) {
  #detailView > .record-top { padding-top: var(--space-sm-plus); }
  #detailView > .record-hero { padding-bottom: var(--space-md); }
  #detailView .record-title { font-size: var(--text-xl); }
  #detailView .key-figure { min-width: 0; padding: var(--space-sm) var(--space-sm-plus); }
  #detailView .key-figure dd { font-size: var(--text-lg); }
  #detailView .record-main { padding: var(--space-sm-plus) var(--edge) var(--space-xl); }
  #detailView .panel.record-section { padding: 0 var(--space-sm-plus); }
  #detailView .field-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-sm-plus) var(--space-md); }
}
@media (pointer: coarse) {
  #detailView .btn, #detailView .back-link { min-height: var(--size-touch); }
  #detailView .btn-icon { width: var(--size-touch); min-width: var(--size-touch); }
  #detailView .sec-empty > summary { min-height: var(--size-touch); }
}
@media (prefers-reduced-motion: reduce) {
  #detailView .btn, #detailView .back-link, #detailView .glance-row, #detailView .sec-toggle > .icon:last-child { transition: none; }
}

/* =====================================================================================================
   SCREEN: DASHBOARD (#/dashboard — #dashboardView, dashboard.js; Financials = finance-pivot.js, Expo = expo-tab.js,
   task timeline = tasks.js timelineHtml). MyCRM design system, flat: semantic tokens only. Last, so it wins by order.
   Sections become cards on the canvas (like the record page) instead of edge-to-edge bands. Markup and behaviour unchanged.
   ===================================================================================================== */
#dashboardView { background: var(--color-background); }
#dashboardView .dash { gap: 0; padding-bottom: 0; }

/* ---- header + tabs ---- */
#dashboardView .dash-head { padding: var(--space-lg) var(--edge) var(--space-sm-plus); }
#dashboardView .dash-head .record-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); color: var(--color-foreground); }
#dashboardView .dash-sub { margin-top: var(--space-sm); max-width: 72ch; font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-muted-foreground); }
#dashboardView .dash-tabs { gap: var(--space-xs); padding: 0 var(--edge); border-bottom: 1px solid var(--color-border-strong); background: var(--color-background); }
#dashboardView .dash-tabs [role="tab"] { min-height: var(--size-touch); padding: 0 var(--space-sm-plus); border-radius: var(--radius-control) var(--radius-control) 0 0;
  color: var(--color-muted-foreground); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
#dashboardView .dash-tabs [role="tab"]:hover { background: var(--state-hover); color: var(--color-foreground); }
#dashboardView .dash-tabs [role="tab"][aria-selected="true"] { color: var(--color-primary-text); }
#dashboardView .dash-tabs [role="tab"][aria-selected="true"]::after { left: var(--space-sm); right: var(--space-sm); height: 3px; border-radius: 3px 3px 0 0; background: var(--color-primary); }
#dashboardView .dash-tabs [role="tab"]:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: calc(-1 * var(--state-focus-width)); }

/* ---- tab panel: cards on the canvas, one rhythm ---- */
#dashboardView .dash-tabpanel { --dash-gap: var(--space-md); gap: var(--space-md); padding: var(--space-lg) var(--edge) var(--space-xl); }
#dashboardView .dash-tabpanel > .ts-groups { gap: var(--space-md); }
#dashboardView .panel,
#dashboardView .dash-tabpanel > .panel, #dashboardView .dash-tabpanel > section, #dashboardView .dash-tabpanel .ts-group,
#dashboardView .dash-tabpanel > .dash-tasks > .panel, #dashboardView .dash-tabpanel > .ts-range {
  margin: 0; padding: var(--space-md) var(--space-md-plus); background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; }

/* section heads */
#dashboardView .dash-panel-head, #dashboardView .dash-tabpanel .dash-panel-head { margin-bottom: var(--space-sm-plus); }
#dashboardView .dash-panel-head h2, #dashboardView .ts-group h2, :is(#dashboardView, #tasksView, #todayView) .gt-top h2, #dashboardView .pv-title {
  gap: var(--space-sm); font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-heading); color: var(--color-foreground); }
#dashboardView .dash-tabpanel .ts-group > h2 { margin-bottom: var(--space-sm-plus); }
#dashboardView .dash-panel-head h2 { display: block; }      /* a long title wraps with its count pill right after it */
#dashboardView .dash-panel-head h2 .pill { margin-left: var(--space-xs); vertical-align: 2px; }
#dashboardView .dash-hint, #dashboardView .pv-note { font-size: var(--text-sm); color: var(--color-muted-foreground); }
#dashboardView .pv-note .icon { color: var(--color-info-text); }
#dashboardView .dash-empty { font-size: var(--text-sm); color: var(--color-muted-foreground); }
#dashboardView .dash-empty .icon { color: var(--color-primary-text); }

/* pills: the dashboard's tone-* pills get the soft status look (text + tint, never colour alone) */
:is(#dashboardView, #tasksView, #todayView) .pill { height: 22px; padding: 0 var(--space-sm); border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); }
:is(#dashboardView, #tasksView, #todayView) .pill.tone-neutral { background: var(--color-neutral-soft); border-color: var(--color-neutral-border); color: var(--color-neutral-text); }
:is(#dashboardView, #tasksView, #todayView) .pill.tone-info    { background: var(--color-info-soft);    border-color: var(--color-info-border);    color: var(--color-info-text); }
:is(#dashboardView, #tasksView, #todayView) .pill.tone-success { background: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success-text); }
:is(#dashboardView, #tasksView, #todayView) .pill.tone-warning { background: var(--color-warning-soft); border-color: var(--color-warning-border); color: var(--color-warning-text); }
:is(#dashboardView, #tasksView, #todayView) .pill.tone-danger  { background: var(--color-destructive-soft); border-color: var(--color-destructive-border); color: var(--color-destructive-text); }

/* lists (Leads, idle deals, potential) */

#dashboardView .dash-list .cell-link, #dashboardView .cell-link { color: var(--color-primary-text); font-weight: var(--weight-semibold); }
#dashboardView .m-sub, #dashboardView .m-none { font-size: var(--text-xs); color: var(--color-muted-foreground); }

/* tables (unassigned, My providers, Financials pivot) */
#dashboardView .dash-table, #dashboardView .pv-table { font-family: var(--font-body); font-size: var(--text-sm); }
#dashboardView .dash-table th, #dashboardView .dash-table td, #dashboardView .pv-table th, #dashboardView .pv-table td { padding: var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--color-border); color: var(--color-foreground); }
#dashboardView .dash-table tbody th[scope="row"] { white-space: nowrap; }

#dashboardView .dash-table thead th, #dashboardView .pv-table thead th { background: var(--color-muted); color: var(--color-muted-foreground);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .01em; text-transform: none; border-bottom-color: var(--color-border-strong); }
#dashboardView .dash-table thead th:first-child, #dashboardView .pv-table thead th:first-child { border-top-left-radius: var(--radius-control); }
#dashboardView .dash-table thead th:last-child, #dashboardView .pv-table thead th:last-child { border-top-right-radius: var(--radius-control); }
#dashboardView .dash-table tbody tr:hover > *, #dashboardView .pv-table tbody tr:hover > * { background: var(--color-muted); }

#dashboardView .num { font-family: var(--font-body); font-variant-numeric: tabular-nums; }

/* deals by stage */

/* ---- controls: inputs, selects, buttons, chips ---- */
#dashboardView .pv-ctl { gap: var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-muted-foreground); }
#dashboardView .input { height: var(--size-control); min-height: var(--size-control); border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
  background-color: var(--color-card); color: var(--color-foreground); font-family: var(--font-body); font-size: var(--text-sm);
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
#dashboardView .input:hover { border-color: var(--color-muted-foreground); }
#dashboardView .input:focus, #dashboardView .input:focus-visible { outline: none; border-color: var(--color-ring); box-shadow: var(--state-focus-ring); }
#dashboardView .btn { border-radius: var(--radius-control); font-family: var(--font-body); font-weight: var(--weight-semibold);
  transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
#dashboardView .btn-compact { min-height: var(--size-control-sm); padding: 0 var(--space-sm-plus); font-size: var(--text-sm); }
#dashboardView .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
#dashboardView .btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
#dashboardView .btn-ghost { background: var(--color-card); border: 1px solid var(--color-border-strong); color: var(--color-foreground); }
#dashboardView .btn-ghost:hover:not(:disabled) { background: var(--color-muted); border-color: var(--color-control-border); }
#dashboardView .btn:disabled { opacity: var(--state-disabled-opacity); }
#dashboardView .chip-btn { min-height: var(--size-control-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-card); color: var(--color-foreground); font-size: var(--text-sm); font-weight: var(--weight-medium); }
#dashboardView .chip-btn:hover { background: var(--color-muted); border-color: var(--color-control-border); }
#dashboardView .chip-btn[aria-pressed="true"] { background: var(--state-selected-bg); border-color: var(--color-primary); color: var(--state-selected-fg); font-weight: var(--weight-semibold); }
#dashboardView .pv-controls { padding: var(--space-sm-plus); background: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
#dashboardView .link-btn { color: var(--color-primary-text); }
#dashboardView .fp-ctl-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: none; letter-spacing: 0; color: var(--color-muted-foreground); }

/* one focus style for every control */
#dashboardView :is(.btn, .chip-btn, .link-btn, a, button:not([role="tab"]), summary, [tabindex="0"]):focus-visible {
  outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: var(--state-focus-offset); box-shadow: none; }

/* ---- area tabs (Merchants · Providers · Opportunities · Deals): period, "as of", figure tables ---- */
#dashboardView .dash-tabpanel > .ts-range { padding: var(--space-sm-plus) var(--space-lg); }
#dashboardView .ts-range-text { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-foreground); }
#dashboardView .dash-tabpanel > .ts-bar { margin-top: calc(-1 * var(--space-xs)); padding: 0 var(--space-xs); background: transparent; border: 0; }
#dashboardView .ts-stamp { font-size: var(--text-sm); color: var(--color-muted-foreground); }
#dashboardView .ts-stamp strong { color: var(--color-foreground); }
#dashboardView .ts-table { font-family: var(--font-body); font-size: var(--text-sm); }
#dashboardView .ts-table th, #dashboardView .ts-table td { border-bottom-color: var(--color-border); color: var(--color-foreground); }
#dashboardView .ts-table thead th { background: var(--color-muted); color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: var(--weight-semibold); border-bottom-color: var(--color-border-strong); }
#dashboardView .ts-table thead th:first-child { border-top-left-radius: var(--radius-control); }
#dashboardView .ts-table thead th:last-child { border-top-right-radius: var(--radius-control); }
#dashboardView .ts-table tbody tr:hover > * { background: var(--color-muted); }
#dashboardView .ts-table tbody th { font-weight: var(--weight-semibold); }
#dashboardView .ts-val { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--color-foreground); }
#dashboardView .ts-sub-row > * { background: var(--color-background); }
#dashboardView .ts-sub-row > th { font-weight: var(--weight-medium); }
#dashboardView .ts-sub-mark { color: var(--color-muted-foreground); }
#dashboardView .ts-cmp, #dashboardView .ts-detail, #dashboardView .ts-note { color: var(--color-muted-foreground); }
#dashboardView .ts-cmp strong { color: var(--color-foreground); }
#dashboardView .ts-note .icon { color: var(--color-info-text); }
#dashboardView .ts-chg { border-radius: var(--radius-pill); font-weight: var(--weight-semibold); }
#dashboardView .ts-chg.up   { background: var(--color-success-soft); color: var(--color-success-text); }
#dashboardView .ts-chg.down { background: var(--color-destructive-soft); color: var(--color-destructive-text); }
#dashboardView .ts-chg.flat { background: var(--color-neutral-soft); color: var(--color-neutral-text); }

/* ---- Financials figure tiles ---- */
#dashboardView .fp-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-color: var(--color-border); border-radius: var(--radius-control); }
#dashboardView .fp-kpi { border-color: var(--color-border); }
#dashboardView .fp-kpi dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: none; letter-spacing: 0; color: var(--color-muted-foreground); }
#dashboardView .fp-kpi dd { font-family: var(--font-heading); font-size: var(--text-md); white-space: nowrap; overflow-wrap: normal; color: var(--color-foreground); }
#dashboardView .fp-kpi.is-on { box-shadow: inset 0 -3px 0 var(--color-primary); }

/* ---- charts (Financials) ---- */
#dashboardView .ch-grid { stroke: var(--color-border); }
#dashboardView .ch-x, #dashboardView .ch-y, #dashboardView .ch-val { fill: var(--color-muted-foreground); font-family: var(--font-body); }
#dashboardView .ch-name { fill: var(--color-foreground); font-family: var(--font-body); }
#dashboardView .ch-break { stroke: var(--color-card); }
#dashboardView .ch-legend { color: var(--color-muted-foreground); }

/* ---- task timeline on the Overview ---- */
:is(#dashboardView, #tasksView, #todayView) .gt-scroll { border-color: var(--color-border); border-radius: var(--radius-control); }
:is(#dashboardView, #tasksView, #todayView) .gt-head, :is(#dashboardView, #tasksView, #todayView) .gt-corner { background: var(--color-muted); }
:is(#dashboardView, #tasksView, #todayView) .gt-label, :is(#dashboardView, #tasksView, #todayView) .gt-group-h { background: var(--color-card); }
:is(#dashboardView, #tasksView, #todayView) .gt-group-h { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; color: var(--color-muted-foreground); }
:is(#dashboardView, #tasksView, #todayView) .gt-row { border-bottom-color: var(--color-border); }
:is(#dashboardView, #tasksView, #todayView) .gt-row:hover, :is(#dashboardView, #tasksView, #todayView) .gt-row:hover .gt-label { background: var(--color-muted); }
:is(#dashboardView, #tasksView, #todayView) .gt-weekend { background: var(--color-background); }
:is(#dashboardView, #tasksView, #todayView) .gt-name:hover { color: var(--color-primary-text); }
:is(#dashboardView, #tasksView, #todayView) .gt-meta, :is(#dashboardView, #tasksView, #todayView) .gt-legend, :is(#dashboardView, #tasksView, #todayView) .gt-months span, :is(#dashboardView, #tasksView, #todayView) .gt-days span { color: var(--color-muted-foreground); }
:is(#dashboardView, #tasksView, #todayView) .gt-months span { color: var(--color-foreground); border-left-color: var(--color-border); }
:is(#dashboardView, #tasksView, #todayView) .gt-days span.now, :is(#dashboardView, #tasksView, #todayView) .gt-today span { background: var(--color-primary); color: var(--color-on-primary); }   /* today: white on blue, 5.2:1 */

/* ---- responsive ---- */
@media (max-width: 767px) {
  #dashboardView .dash-head { padding-top: var(--space-md); }
  #dashboardView .dash-head .record-title { font-size: var(--text-xl); }
  #dashboardView .dash-tabpanel { gap: var(--space-sm-plus); padding: var(--space-md) var(--edge) var(--space-lg); }
  #dashboardView .panel,
  #dashboardView .dash-tabpanel > .panel, #dashboardView .dash-tabpanel > section, #dashboardView .dash-tabpanel .ts-group,
  #dashboardView .dash-tabpanel > .dash-tasks > .panel, #dashboardView .dash-tabpanel > .ts-range { padding: var(--space-sm-plus) var(--space-md); }
  #dashboardView .dash-tabs { padding: 0 var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) {
  #dashboardView .dash-tabs [role="tab"], #dashboardView .btn, #dashboardView .input { transition: none; }
}

/* =====================================================================================================
   SCREEN: TASKS (#/tasks — #tasksView, tasks.js; "all clear" = delight.js). MyCRM design system, flat: semantic
   tokens only. Last, so it wins by order. Each group is a card; its tasks are rows inside it. The timeline view
   shares the dashboard's timeline rules (:is(#dashboardView, #tasksView, #todayView) above). Markup and behaviour unchanged.
   ===================================================================================================== */
#tasksView { background: var(--color-background); }
#tasksView .tasks-page { gap: var(--space-md); padding: 0 0 var(--space-xl); }

/* ---- header ---- */
#tasksView .tasks-page > .tasks-head { padding: var(--space-lg) var(--edge) 0; align-items: flex-end; }
#tasksView .tasks-head .record-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); color: var(--color-foreground); }
#tasksView .dash-sub { margin-top: var(--space-sm); font-size: var(--text-base); color: var(--color-muted-foreground); }

/* ---- filter bar: a band across the page, like the list toolbar ---- */
#tasksView .tasks-page > .tasks-filters { gap: var(--space-sm-plus); padding: var(--space-sm-plus) var(--edge); background: var(--color-card);
  border: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-radius: 0; }
#tasksView .pv-ctl { gap: var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-muted-foreground); }

/* segmented toggles (List / Timeline, Open / Completed, timeline range) */
:is(#tasksView, #dashboardView) .seg-toggle { padding: var(--space-2xs); gap: var(--space-2xs); background: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
:is(#tasksView, #dashboardView) .seg-toggle button { min-height: var(--size-control-sm); padding: 0 var(--space-sm-plus); border-radius: calc(var(--radius-control) - 2px);
  color: var(--color-muted-foreground); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
:is(#tasksView, #dashboardView) .seg-toggle button:hover { color: var(--color-foreground); }
:is(#tasksView, #dashboardView) .seg-toggle button[aria-pressed="true"] { background: var(--color-card); color: var(--color-primary-text); font-weight: var(--weight-semibold);
  box-shadow: inset 0 0 0 1px var(--color-border-strong); }

/* ---- controls ---- */
#tasksView .input { min-height: var(--size-control); border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
  background-color: var(--color-card); color: var(--color-foreground); font-family: var(--font-body); font-size: var(--text-sm);
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
#tasksView input.input, #tasksView select.input { height: var(--size-control); }
#tasksView .input::placeholder { color: var(--color-muted-foreground); }
#tasksView .input:hover { border-color: var(--color-muted-foreground); }
#tasksView .input:focus, #tasksView .input:focus-visible { outline: none; border-color: var(--color-ring); box-shadow: var(--state-focus-ring); }
#tasksView .input[aria-invalid="true"] { border-color: var(--color-destructive-text); }
#tasksView .field-error { color: var(--color-destructive-text); font-size: var(--text-sm); }
#tasksView .btn { border-radius: var(--radius-control); font-family: var(--font-body); font-weight: var(--weight-semibold);
  transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
#tasksView .btn-compact { min-height: var(--size-control-sm); padding: 0 var(--space-sm-plus); font-size: var(--text-sm); }
#tasksView .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
#tasksView .btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
#tasksView .btn-ghost { background: var(--color-card); border: 1px solid var(--color-border-strong); color: var(--color-foreground); }
#tasksView .btn-ghost:hover:not(:disabled) { background: var(--color-muted); border-color: var(--color-control-border); }
#tasksView .btn-quiet { color: var(--color-muted-foreground); }
#tasksView .btn-quiet:hover:not(:disabled) { background: var(--state-hover); color: var(--color-foreground); }
#tasksView .btn:disabled { opacity: var(--state-disabled-opacity); }
#tasksView .link-btn { color: var(--color-primary-text); }

/* one focus style for every control */
#tasksView :is(.btn, .link-btn, a, button, summary, [tabindex="0"]):focus-visible {
  outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: var(--state-focus-offset); box-shadow: none; }
#tasksView .seg-toggle button:focus-visible { outline-offset: 0; }

/* ---- cards: the form, each group, the timeline, the all-clear state ---- */
#tasksView .tasks-page > .task-form, #tasksView .tasks-page > .task-group, #tasksView .tasks-page > .gt,
#tasksView .tasks-page > .all-clear, #tasksView .tasks-page > .dash-empty {
  margin: 0 var(--edge); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; }
#tasksView .tasks-page > .task-form, #tasksView .tasks-page > .gt { padding: var(--space-md) var(--space-md-plus); }
#tasksView .tasks-page > .dash-empty { padding: var(--space-md) var(--space-md-plus); font-size: var(--text-sm); color: var(--color-muted-foreground); }
#tasksView .dash-empty .icon { color: var(--color-primary-text); }

/* the New / Edit task form */
#tasksView .task-form h2, #tasksView .gt-top h2 { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-foreground); }
#tasksView .task-form-grid { gap: var(--space-sm-plus) var(--space-md); }
#tasksView .form-field label, #tasksView .q-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-foreground); }
#tasksView .q-sub { font-weight: var(--weight-regular); color: var(--color-muted-foreground); }
#tasksView .task-form-actions { gap: var(--space-sm); margin-top: var(--space-md); }

/* ---- task groups ---- */
#tasksView .tasks-page > .task-group, #tasksView .tasks-page > .task-group:not(.is-open) { padding: 0; overflow: hidden; }
#tasksView .task-group-h { flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); margin: 0; padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; color: var(--color-foreground); }
#tasksView .task-group-toggle { min-height: var(--size-control); margin: 0; padding: 0 var(--space-sm); border-radius: var(--radius-control); font-weight: var(--weight-semibold);
  transition: background-color var(--motion-fast) var(--motion-ease); }
#tasksView .task-group-toggle:hover { background: var(--state-hover); }
#tasksView .task-group-toggle .icon { color: var(--color-muted-foreground); }
#tasksView .task-group-toggle:focus-visible { outline-offset: 0; }
#tasksView .task-group-h .m-sub { margin-left: 0; font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-muted-foreground); }
#tasksView .count-badge { min-width: 20px; height: 20px; border: 0; background: var(--color-muted); color: var(--color-muted-foreground);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
#tasksView .task-group.fresh .task-group-h, #tasksView .task-group.watched .task-group-h { color: var(--color-primary-text); }
#tasksView .task-group.fresh .count-badge { background: var(--color-primary); color: var(--color-on-primary); }
#tasksView .task-group.awaiting .task-group-h { color: var(--color-warning-text); }
#tasksView .task-group.awaiting .count-badge { background: var(--color-warning-soft); color: var(--color-warning-text); }
#tasksView .task-group.overdue .task-group-h { color: var(--color-destructive-text); }

/* tasks: rows inside the group card */
#tasksView .task-group.is-open .task-list { margin-top: 0; }
#tasksView .task-list { gap: 0; border-top: 1px solid var(--color-border); }
#tasksView .task { gap: var(--space-sm-plus); padding: var(--space-sm-plus) var(--space-md); background: var(--color-card);
  border: 0; border-top: 1px solid var(--color-border); border-radius: 0; box-shadow: none;
  transition: background-color var(--motion-fast) var(--motion-ease); }
#tasksView .task:first-child { border-top: 0; }

#tasksView .task.is-overdue { box-shadow: inset 3px 0 0 var(--color-destructive); }
#tasksView .task.tag-item.is-unseen { box-shadow: inset 3px 0 0 var(--color-primary); background: var(--color-primary-soft); }
#tasksView .task.task-flash { box-shadow: inset 0 0 0 2px var(--color-primary); }

/* the done circle */
#tasksView .task-check { width: 24px; height: 24px; border: 2px solid var(--color-control-border); color: transparent;
  transition: border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
#tasksView button.task-check { cursor: pointer; }
#tasksView button.task-check:hover, #tasksView button.task-check:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
#tasksView .task-check.is-waiting { border-color: var(--color-warning); color: var(--color-warning-text); }
#tasksView .task-check.is-done { border-color: var(--color-success); background: var(--color-success); color: var(--color-on-accent); }
#tasksView .task-check.tag-mark { border-color: var(--color-primary-soft-border); color: var(--color-primary-text); opacity: 1; }

/* title, description, meta */
#tasksView .task-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-foreground); }
#tasksView .task-title-link:hover { color: var(--color-primary-text); }
#tasksView .task-desc, #tasksView .tag-quote { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted-foreground); }
#tasksView .task-meta { gap: var(--space-xs) var(--space-sm-plus); margin-top: var(--space-sm); font-size: var(--text-sm); }
#tasksView .task-who, #tasksView .task-due, #tasksView .task-age, #tasksView .m-sub { color: var(--color-muted-foreground); }
#tasksView .task-age { font-size: var(--text-xs); }
#tasksView .task-age.is-new { padding: 0 var(--space-sm); background: var(--color-primary-soft); color: var(--color-primary-text); font-weight: var(--weight-semibold); }
#tasksView .task-due.overdue { color: var(--color-destructive-text); }
#tasksView .task-due.today { color: var(--color-warning-text); }
#tasksView .task-rel { padding: 0 var(--space-sm); line-height: 22px; background: var(--color-primary-soft); color: var(--color-primary-text); font-weight: var(--weight-semibold); }

/* time left */
#tasksView .task-time { gap: var(--space-sm-plus); margin-top: var(--space-sm); }
#tasksView .task-time-track { height: 6px; background: var(--color-muted-strong); }
#tasksView .task-time-fill { background: var(--color-info); }
#tasksView .task-time.warning .task-time-fill { background: var(--color-warning); }
#tasksView .task-time.danger .task-time-fill { background: var(--color-destructive); }
#tasksView .task-time.done .task-time-fill { background: var(--color-success); }
#tasksView .task-time-text { color: var(--color-info-text); }
#tasksView .task-time.warning .task-time-text { color: var(--color-warning-text); }
#tasksView .task-time.danger .task-time-text { color: var(--color-destructive-text); }
#tasksView .task-time.done .task-time-text { color: var(--color-success-text); }

/* status lines */
#tasksView .task-status { gap: var(--space-xs); margin-top: var(--space-sm); font-size: var(--text-sm); }
#tasksView .task-status.waiting, #tasksView .task-status.sent-back { color: var(--color-warning-text); }
#tasksView .task-status.done { color: var(--color-success-text); }
#tasksView .task-status.watching { color: var(--color-muted-foreground); }

/* row actions */
#tasksView .task-actions { gap: var(--space-xs); }
#tasksView .task-icon { width: var(--size-control-sm); height: var(--size-control-sm); border-radius: var(--radius-control); color: var(--color-muted-foreground);
  transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
#tasksView .task-icon:hover { background: var(--state-hover); color: var(--color-foreground); }
#tasksView .task-sendback { padding: var(--space-sm-plus); background: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius-control); }

/* comment thread */
#tasksView .task-thread-toggle { gap: var(--space-xs); margin-top: var(--space-sm); color: var(--color-muted-foreground); font-size: var(--text-sm); border-radius: var(--radius-xs); }
#tasksView .task-thread-toggle:hover, #tasksView .task-thread-toggle[aria-expanded="true"] { color: var(--color-primary-text); }
#tasksView .task-thread { padding: var(--space-sm-plus); background: var(--color-muted); border-radius: var(--radius-control); }
#tasksView .tc-author { color: var(--color-foreground); }
#tasksView .tc-head time, #tasksView .tc-empty { color: var(--color-muted-foreground); }
#tasksView .tc-body { color: var(--color-foreground); }
#tasksView .tc.is-mine .tc-author { color: var(--color-primary-text); }

/* all clear (no open tasks) */
#tasksView .tasks-page > .all-clear { padding: var(--space-lg) var(--space-md-plus); }
#tasksView .ac-title { font-family: var(--font-heading); font-size: var(--text-md); color: var(--color-foreground); }
#tasksView .ac-text { color: var(--color-muted-foreground); }
#tasksView .ac-mark rect { stroke: var(--color-border-strong); }
#tasksView .ac-tick { stroke: var(--color-success); }

/* the timeline view's range buttons sit with the title */
#tasksView .gt-top { margin-bottom: var(--space-md); }

/* ---- responsive ---- */
@media (max-width: 767px) {
  #tasksView .tasks-page { gap: var(--space-sm-plus); }
  #tasksView .tasks-page > .tasks-head { padding-top: var(--space-md); }
  #tasksView .tasks-head .record-title { font-size: var(--text-xl); }
  #tasksView .task { padding: var(--space-sm-plus); }
  :is(#tasksView, #dashboardView) .seg-toggle button { flex: 1; }   /* a full-width toggle: its buttons share the width */
}
@media (pointer: coarse) {
  #tasksView .task-icon, #tasksView .task-group-toggle, :is(#tasksView, #dashboardView) .seg-toggle button { min-height: var(--size-touch); min-width: var(--size-touch); }
  #tasksView .task-check { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  #tasksView .task, #tasksView .btn, #tasksView .input, #tasksView .task-icon, #tasksView .task-check, :is(#tasksView, #dashboardView) .seg-toggle button { transition: none; }
}

/* =====================================================================================================
   SCREEN: FORMS — new / edit merchant and provider (questionnaire.js), opportunity and deal edit (edit-forms.js),
   new opportunity (opportunity-new.js) in #formView, and the public merchant form (form.html, #publicRoot).
   MyCRM design system, flat: semantic tokens only. Last, so it wins by order. Sections become cards on the canvas.
   Markup and behaviour unchanged.
   ===================================================================================================== */
#formView, .public-page { background: var(--color-background); }

/* ---- page head: back link, kicker, title, intro ---- */
#formView .form-root > .record-top { padding: var(--space-md) var(--edge) 0; }
:is(#formView, #publicRoot) .back-link { min-height: var(--size-control); border-radius: var(--radius-control); color: var(--color-muted-foreground); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
:is(#formView, #publicRoot) .back-link:hover { background: var(--state-hover); color: var(--color-foreground); }
#formView .form-root > .form-intro { padding: var(--space-sm-plus) var(--edge) var(--space-lg); }
:is(#formView, #publicRoot) .record-kicker { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .record-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading); color: var(--color-foreground); }
:is(#formView, #publicRoot) .q-title-sub { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .q-intro, :is(#formView, #publicRoot) .form-intro p { max-width: 72ch; font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .q-progress { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .form-saved { color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .form-saved .icon { color: var(--color-success-text); }

/* ---- the questionnaire: numbered collapsible sections as cards ---- */
#formView .form-root > .q-form { gap: var(--space-sm-plus); padding: 0 var(--edge); }
:is(#formView, #publicRoot) .q-form { gap: var(--space-sm-plus); }
:is(#formView, #publicRoot) .q-form > .q-el, #formView .q-form > * { margin: 0; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; overflow: clip; }
#formView .q-form > * > .q-el-bar, #formView .q-form > * > .q-el-body { padding-left: var(--space-md-plus); padding-right: var(--space-md-plus); }
:is(#formView, #publicRoot) .q-el-bar { min-height: 56px; gap: var(--space-sm-plus); color: var(--color-foreground); transition: background-color var(--motion-fast) var(--motion-ease); }
:is(#formView, #publicRoot) .q-el-bar:hover { background: var(--state-hover); }
:is(#formView, #publicRoot) .q-el-bar:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: calc(-1 * var(--state-focus-width)); }
:is(#formView, #publicRoot) .q-el-num { width: 28px; height: 28px; background: var(--color-primary-soft); color: var(--color-primary-text); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-bold); }
:is(#formView, #publicRoot) .q-el.open .q-el-num { background: var(--color-primary); color: var(--color-on-primary); }
:is(#formView, #publicRoot) .q-el-name { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); }
:is(#formView, #publicRoot) .q-el-tick { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-success-text); }
:is(#formView, #publicRoot) .q-el-err { background: var(--color-destructive-soft); color: var(--color-destructive-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
:is(#formView, #publicRoot) .q-el-bar > .icon { color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .q-el-body { padding-bottom: var(--space-md-plus); }
:is(#formView, #publicRoot) .q-el.open > .q-el-body { border-top: 1px solid var(--color-border); padding-top: var(--space-sm-plus); }
:is(#formView, #publicRoot) .q-el-foot { margin-top: var(--space-md); padding-top: var(--space-sm-plus); border-top-color: var(--color-border); }

/* text, labels, notes */
:is(#formView, #publicRoot) .q-label, :is(#formView, #publicRoot) .form-field > label, :is(#formView, #publicRoot) .form-field > legend { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-foreground); }
:is(#formView, #publicRoot) .q-sub, :is(#formView, #publicRoot) .optional { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .q-note, :is(#formView, #publicRoot) .q-pull, :is(#formView, #publicRoot) .hint, :is(#formView, #publicRoot) .form-panel .hint, :is(#formView, #publicRoot) .item-note { font-size: var(--text-sm); color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .q-cond-note { color: var(--color-warning-text); }
:is(#formView, #publicRoot) .q-branch-h { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .field-error { font-size: var(--text-sm); color: var(--color-destructive-text); }

/* ---- controls ---- */
:is(#formView, #publicRoot) .input { min-height: var(--size-control); border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
  background-color: var(--color-card); color: var(--color-foreground); font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
:is(#formView, #publicRoot) input.input, :is(#formView, #publicRoot) select.input { height: var(--size-control); }
:is(#formView, #publicRoot) .input::placeholder, :is(#formView, #publicRoot) .picker-search-input::placeholder { color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .input:hover { border-color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .input:focus, :is(#formView, #publicRoot) .input:focus-visible { outline: none; border-color: var(--color-ring); box-shadow: var(--state-focus-ring); }
:is(#formView, #publicRoot) .input[aria-invalid="true"], :is(#formView, #publicRoot) .picker-box.invalid { border-color: var(--color-destructive-text); }
:is(#formView, #publicRoot) .q-search .icon, :is(#formView, #publicRoot) .picker-search { color: var(--color-muted-foreground); }

/* checkbox and radio rows */
:is(#formView, #publicRoot) .q-opt { gap: var(--space-sm-plus); border-radius: var(--radius-control); color: var(--color-foreground); font-size: var(--text-sm); transition: background-color var(--motion-fast) var(--motion-ease); }
:is(#formView, #publicRoot) .q-opt:hover { background: var(--state-hover); }
:is(#formView, #publicRoot) .q-opt input, :is(#formView, #publicRoot) .picker-item input { accent-color: var(--color-primary); }
:is(#formView, #publicRoot) .q-opt:has(input:checked) { background: var(--color-primary-soft); }
:is(#formView, #publicRoot) .q-opt:has(input:focus-visible) { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: 0; }
:is(#formView, #publicRoot) .q-opt:has(input:disabled) { opacity: var(--state-disabled-opacity); cursor: not-allowed; }

/* nested groups: segments, native-network panels, branches, UBO cards */
:is(#formView, #publicRoot) .q-seg, :is(#formView, #publicRoot) .q-npanel, :is(#formView, #publicRoot) .q-branch, :is(#formView, #publicRoot) .q-ubo, :is(#formView, #publicRoot) .form-subsection, :is(#formView, #publicRoot) .review-section, :is(#formView, #publicRoot) .ubo-card, :is(#formView, #publicRoot) .share-link-box, :is(#formView, #publicRoot) .toggle-field > .switch {
  background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
:is(#formView, #publicRoot) .q-seg-toggle, :is(#formView, #publicRoot) .q-npanel-bar { color: var(--color-foreground); border-radius: var(--radius-control); font-weight: var(--weight-semibold); transition: background-color var(--motion-fast) var(--motion-ease); }
:is(#formView, #publicRoot) .q-seg-toggle:hover, :is(#formView, #publicRoot) .q-npanel-bar:hover { background: var(--state-hover); }
:is(#formView, #publicRoot) .q-seg-toggle:focus-visible, :is(#formView, #publicRoot) .q-npanel-bar:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: calc(-1 * var(--state-focus-width)); }
:is(#formView, #publicRoot) .q-seg-toggle .icon, :is(#formView, #publicRoot) .q-npanel-bar .icon { color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .q-seg-count { font-family: var(--font-body); font-weight: var(--weight-semibold); color: var(--color-primary-text); }
:is(#formView, #publicRoot) .q-seg-count.empty { color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .q-seg-selall { min-height: 24px; border-color: var(--color-border-strong); background: var(--color-card); color: var(--color-foreground); font-weight: var(--weight-medium); }
:is(#formView, #publicRoot) .q-seg-selall:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
:is(#formView, #publicRoot) .q-link { color: var(--color-primary-text); font-weight: var(--weight-semibold); }
:is(#formView, #publicRoot) .q-npanel-cat { font-weight: var(--weight-semibold); }
:is(#formView, #publicRoot) .q-cat-banking { background: var(--color-info-soft); color: var(--color-info-text); }
:is(#formView, #publicRoot) .q-cat-acquiring { background: var(--color-warning-soft); color: var(--color-warning-text); }
:is(#formView, #publicRoot) .q-cat-apm { background: var(--color-neutral-soft); color: var(--color-neutral-text); }
:is(#formView, #publicRoot) .q-cat-currency { background: var(--color-success-soft); color: var(--color-success-text); }
:is(#formView, #publicRoot) .q-derived, :is(#formView, #publicRoot) .q-ctx { background: var(--color-primary-soft); border-color: var(--color-primary-soft-border); border-radius: var(--radius-control); color: var(--color-foreground); }
:is(#formView, #publicRoot) .q-banned { background: var(--color-destructive-soft); border-color: var(--color-destructive-border); border-radius: var(--radius-control); color: var(--color-destructive-text); }
:is(#formView, #publicRoot) .q-offer-note { background: var(--color-muted); color: var(--color-muted-foreground); border-radius: var(--radius-control); }
:is(#formView, #publicRoot) .derived { border-color: var(--color-border-strong); border-radius: var(--radius-control); }
:is(#formView, #publicRoot) .derived-label { color: var(--color-muted-foreground); }

/* flow toggles (B2B, C2B ...) */
:is(#formView, #publicRoot) .q-flow { border-color: var(--color-border-strong); background: var(--color-card); color: var(--color-foreground); font-family: var(--font-body); font-weight: var(--weight-semibold);
  transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
:is(#formView, #publicRoot) .q-flow:hover { border-color: var(--color-primary); }
:is(#formView, #publicRoot) .q-flow[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
:is(#formView, #publicRoot) .q-flow-lead { color: var(--color-muted-foreground); }

/* switches */
:is(#formView, #publicRoot) .q-switch { background: var(--color-background); border-color: var(--color-border); border-radius: var(--radius-control); color: var(--color-foreground); }
:is(#formView, #publicRoot) .q-switch:hover:not(:disabled) { border-color: var(--color-primary); }
:is(#formView, #publicRoot) .q-switch:disabled { opacity: var(--state-disabled-opacity); }
:is(#formView, #publicRoot) .q-switch-track, :is(#formView, #publicRoot) .switch-track { background: var(--color-control-border); }
:is(#formView, #publicRoot) .q-switch-knob, :is(#formView, #publicRoot) .switch-thumb { background: var(--color-card); box-shadow: var(--shadow-sm); }
:is(#formView, #publicRoot) .q-switch[aria-checked="true"] .q-switch-track, :is(#formView, #publicRoot) .switch input:checked + .switch-track { background: var(--color-primary); }
:is(#formView, #publicRoot) .q-switch[aria-checked="true"] .q-switch-knob { background: var(--color-card); }
:is(#formView, #publicRoot) .q-switch:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: var(--state-focus-offset); }
:is(#formView, #publicRoot) .q-qual-lock { color: var(--color-warning-text); }

/* chips, radio cards, segmented choices, pickers */
:is(#formView, #publicRoot) .check-chip span { border-color: var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-foreground); }
:is(#formView, #publicRoot) .check-chip span:hover { background: var(--color-muted); }
:is(#formView, #publicRoot) .check-chip input:checked + span { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-text); }
:is(#formView, #publicRoot) .check-chip input:checked + span::before { color: var(--color-primary-text); }
:is(#formView, #publicRoot) .radio-card { border-color: var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-card); }
:is(#formView, #publicRoot) .radio-card:hover { background: var(--color-muted); }
:is(#formView, #publicRoot) .radio-card:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
:is(#formView, #publicRoot) .radio-card::before { border-color: var(--color-control-border); }
:is(#formView, #publicRoot) .radio-card:has(input:checked)::before { border-color: var(--color-primary); background: radial-gradient(circle, var(--color-primary) 0 4px, transparent 5px); }
:is(#formView, #publicRoot) .radio-text { color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .segmented { background: var(--color-muted); border-color: var(--color-border); border-radius: var(--radius-control); }
:is(#formView, #publicRoot) .segment .radio-body { color: var(--color-muted-foreground); border-radius: calc(var(--radius-control) - 2px); }
:is(#formView, #publicRoot) .segment input:checked + .radio-body { background: var(--color-card); color: var(--color-primary-text); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
:is(#formView, #publicRoot) .picker-box { border-color: var(--color-control-border); border-radius: var(--radius-control); background: var(--color-card); }
:is(#formView, #publicRoot) .picker-search:focus-within { box-shadow: inset 0 0 0 2px var(--color-ring); }
:is(#formView, #publicRoot) .picker-group-head { background: var(--color-card); color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .picker-item:hover { background: var(--color-muted); }
:is(#formView, #publicRoot) .picker-meta, :is(#formView, #publicRoot) .picker-none, :is(#formView, #publicRoot) .picker-empty { color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .chip { border-color: var(--color-border-strong); background: var(--color-muted); color: var(--color-foreground); }

/* alerts and notices */
:is(#formView, #publicRoot) .form-alert { background: var(--color-destructive-soft); border-color: var(--color-destructive-border); border-radius: var(--radius-control); color: var(--color-foreground); }
:is(#formView, #publicRoot) .form-alert .link-btn, :is(#formView, #publicRoot) .q-alert a { color: var(--color-destructive-text); }
:is(#formView, #publicRoot) .form-notice { background: var(--color-info-soft); border-color: var(--color-info-border); border-radius: var(--radius-control); color: var(--color-foreground); }
:is(#formView, #publicRoot) .form-notice > .icon { color: var(--color-info-text); }
:is(#formView, #publicRoot) .form-notice.warn { background: var(--color-warning-soft); border-color: var(--color-warning-border); }
:is(#formView, #publicRoot) .form-notice.warn > .icon { color: var(--color-warning-text); }
:is(#formView, #publicRoot) .form-restored { background: var(--color-info-soft); border-color: var(--color-info-border); border-radius: var(--radius-control); }

/* buttons */
:is(#formView, #publicRoot) .btn { border-radius: var(--radius-control); font-family: var(--font-body); font-weight: var(--weight-semibold);
  transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
:is(#formView, #publicRoot) .btn-compact { min-height: var(--size-control-sm); padding: 0 var(--space-sm-plus); font-size: var(--text-sm); }
:is(#formView, #publicRoot) .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
:is(#formView, #publicRoot) .btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
:is(#formView, #publicRoot) .btn-ghost { background: var(--color-card); border: 1px solid var(--color-border-strong); color: var(--color-foreground); }
:is(#formView, #publicRoot) .btn-ghost:hover:not(:disabled) { background: var(--color-muted); border-color: var(--color-control-border); }
:is(#formView, #publicRoot) .btn-quiet { color: var(--color-muted-foreground); }
:is(#formView, #publicRoot) .btn-quiet:hover:not(:disabled) { background: var(--state-hover); color: var(--color-foreground); }
:is(#formView, #publicRoot) .btn:disabled { opacity: var(--state-disabled-opacity); }
:is(#formView, #publicRoot) .link-btn { color: var(--color-primary-text); }

/* one focus style for every other control */
:is(#formView, #publicRoot) :is(.btn, .link-btn, .q-link, .q-seg-selall, .q-flow, .back-link, .step, a, summary, .chip-removable button):focus-visible {
  outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: var(--state-focus-offset); box-shadow: none; }

/* ---- action bar at the end of the questionnaire ---- */
#formView .form-root > .q-actions, #formView .q-actions { margin: var(--space-md) 0 0; padding: var(--space-sm-plus) var(--edge);
  background: var(--color-card); border-top: 1px solid var(--color-border); gap: var(--space-sm); }
.public-shell .q-actions { gap: var(--space-sm); }

/* ---- review / summary ---- */
#formView .form-root > .q-summary > .q-sum-card { margin: 0 var(--edge); }   /* the review card sits inside the page edge like the sections */
:is(#formView, #publicRoot) .q-summary .q-sum-card { padding: var(--space-md-plus); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; }
:is(#formView, #publicRoot) .q-sum-title, :is(#formView, #publicRoot) .review-head h3, :is(#formView, #publicRoot) .ubo-head h3, :is(#formView, #publicRoot) .form-subsection > h3, :is(#formView, #publicRoot) .form-step-title { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--color-foreground); }
:is(#formView, #publicRoot) .q-sum-sec, :is(#formView, #publicRoot) .review-list > div, :is(#formView, #publicRoot) .item-row { border-top-color: var(--color-border); }
:is(#formView, #publicRoot) .q-sum-sec-title { color: var(--color-foreground); }
:is(#formView, #publicRoot) .q-sum-val { color: var(--color-foreground); }
:is(#formView, #publicRoot) .q-sum-val .none, :is(#formView, #publicRoot) .q-sum-tag, :is(#formView, #publicRoot) .review-list dt { color: var(--color-muted-foreground); }

/* ---- opportunity / deal edit form (edit-forms.js): one card with a sticky footer ---- */
#formView .form-root > .form-panel, #formView .form-root > .panel { margin: 0 var(--edge) var(--space-xl); padding: var(--space-lg); background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; }
:is(#formView, #publicRoot) .form-step { gap: var(--space-lg); }
:is(#formView, #publicRoot) .form-subsection { padding: var(--space-md) var(--space-md-plus); gap: var(--space-sm); }
:is(#formView, #publicRoot) .form-footer { margin: var(--space-lg) calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)); padding: var(--space-sm-plus) var(--space-lg) calc(var(--space-sm-plus) + var(--safe-bottom));
  border-top-color: var(--color-border); border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--color-card); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- the public form page (form.html) ---- */
/* the app's full-screen rules (html, body: 100% high, overflow hidden — the app scrolls #mainScroll) also reached this
   page, which has no inner scroller, so a long form couldn't be scrolled. Here the page itself scrolls. */
html:has(> body.public-page), body.public-page { height: auto; min-height: 100%; overflow: visible; overflow-y: auto; }
html:has(> body.public-page) { overflow-y: auto; }
.public-page .public-head { padding-top: var(--space-lg); }
.public-page .public-brand { font-family: var(--font-heading); color: var(--color-foreground); }
.public-page .public-shell { padding-top: var(--space-md); }
.public-page .public-message { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.public-page .public-message p { color: var(--color-muted-foreground); }
.public-page .public-message.done .record-title { color: var(--color-success-text); }
.public-page .public-toast { background: var(--color-card); border-color: var(--color-border); border-radius: var(--radius-control); color: var(--color-foreground); box-shadow: var(--shadow-lg); }

/* ---- responsive ---- */
@media (max-width: 767px) {
  :is(#formView, #publicRoot) .record-title { font-size: var(--text-xl); }
  #formView .form-root > .q-form { padding: 0 var(--space-sm); }
  #formView .form-root > .q-summary > .q-sum-card { margin: 0 var(--space-sm); padding: var(--space-md); }
  #formView .q-form > * > .q-el-bar, #formView .q-form > * > .q-el-body { padding-left: var(--space-sm-plus); padding-right: var(--space-sm-plus); }
  #formView .form-root > .form-panel, #formView .form-root > .panel { margin: 0 var(--space-sm) var(--space-lg); padding: var(--space-md); }
  :is(#formView, #publicRoot) .form-footer { margin: var(--space-md) calc(-1 * var(--space-md)) calc(-1 * var(--space-md)); padding-left: var(--space-md); padding-right: var(--space-md); }
}
@media (pointer: coarse) {
  :is(#formView, #publicRoot) .q-opt, :is(#formView, #publicRoot) .q-seg-toggle, :is(#formView, #publicRoot) .q-npanel-bar, :is(#formView, #publicRoot) .picker-item { min-height: var(--size-touch); }
  :is(#formView, #publicRoot) .q-flow { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#formView, #publicRoot) .q-el-bar, :is(#formView, #publicRoot) .q-opt, :is(#formView, #publicRoot) .q-seg-toggle, :is(#formView, #publicRoot) .q-npanel-bar, :is(#formView, #publicRoot) .q-flow, :is(#formView, #publicRoot) .btn, :is(#formView, #publicRoot) .input { transition: none; }
}