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

/* ==========================================================================
   CRM app styles — "Amazônia Futurista" (design.md, refined edition).
   Restrained and readable: deep greens carry the brand, Verde Folha guides
   action, bioluminescence is rare. Built only on design-tokens.css.
   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); }
.muted { color: var(--text-muted); }
.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;
}
.nav-key { margin-left: auto; min-width: 20px; padding: 0 var(--s1); border: 1px solid var(--divider); border-radius: var(--radius-xs); font-size: 12px; line-height: 18px; text-align: center; color: var(--neutral); text-decoration: none; }
.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-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--text-faint); }
.api-status.online .api-dot { background: var(--success); }
.api-status.offline { color: var(--error-text); }
.api-status.offline .api-dot { background: var(--error); }
.app-version { padding: 0 var(--s3); font-family: var(--mono); font-size: 12px; 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(--action); color: var(--action-on); }
.btn-primary:hover:not(:disabled) { background: var(--action-hover); box-shadow: var(--shadow-lift); }
.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); }
.hero-fx { position: absolute; inset: calc(-1 * var(--s6)) calc(-1 * var(--gutter)) 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-texture { position: absolute; right: 0; top: 0; width: min(720px, 80%); height: 100%; color: var(--text); opacity: .035; }
.fireflies { position: absolute; inset: 0; }
.firefly {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: var(--action);
  opacity: 0;
  animation: drift var(--dur-drift, 22s) ease-in-out var(--delay, 0s) infinite alternate,
             flicker var(--dur-flicker, 6s) ease-in-out var(--delay, 0s) infinite;
}
.firefly.river { background: var(--info); }
@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: 1.125rem; font-weight: 500; 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: 1.75rem; font-weight: 500; 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: 12px; 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); }
.pager-controls { display: flex; align-items: center; gap: var(--s2); }

/* 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: 1.25rem; font-weight: 500; }
.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, .toc h2 { margin-bottom: var(--s2); font-family: var(--font-display); font-size: 1rem; 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; }
.toc { padding: var(--s4) var(--s3); }
.toc h2 { padding: 0 var(--s2); }
.toc ul { margin: 0; padding: 0; list-style: none; }
.toc button {
  display: block;
  width: 100%;
  min-height: 36px;
  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);
}
.toc button:hover { color: var(--text); background: var(--hover); }
/* Active section: Verde Folha underline indicator, like the navigation */
.toc button[aria-current] { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--action); text-decoration-thickness: 2px; text-underline-offset: 5px; }

.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: 12px; 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: 12px; }
.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-skip { display: flex; align-items: center; gap: var(--s2); }

.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: 1rem; font-weight: 600; }
.item-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 1.5fr); gap: var(--s2) var(--s4); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--divider); }
.form-subsection .hint + .item-row { border-top: 0; }
.item-row .field-error { grid-column: 2; }
.item-name { font-size: var(--fs-small); font-weight: 500; }
.item-note { font-size: var(--fs-small); color: var(--text-muted); }

/* 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); }
.derived-label { min-width: 120px; font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); }

/* 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: 1rem; 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 */
.url-list { display: flex; flex-direction: column; gap: var(--s2); }
.url-row { display: flex; align-items: center; gap: var(--s2); }
.url-row .input { flex: 1; min-width: 0; }

/* UBO repeater */
.ubo-list { display: flex; flex-direction: column; gap: var(--s4); }
.ubo-card { padding: var(--s4) var(--s5); border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--raised); }
.ubo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.ubo-head h3 { font-size: 1rem; font-weight: 600; }
.ubo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }

.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-left: 3px solid var(--action); }
.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) ---------- */
.rail-user { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--s3); margin-bottom: var(--s2); border-bottom: 1px solid var(--divider); }
.rail-user:empty { display: none; }
.rail-user-who { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s3); min-width: 0; }
.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;
}
.rail-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rail-user-name { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-user-role { font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; }
.rail-user-actions { display: flex; flex-direction: column; }
.rail-user-actions .nav-item { min-height: 38px; font-size: var(--fs-small); }
@media (min-width: 768px) {
  .shell.collapsed .rail-user-who { justify-content: center; padding: var(--s2) 0; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .rail-user-who { justify-content: center; padding: var(--s2) 0; }
}
.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-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4) 0; border-bottom: 1px solid var(--divider); }
.flt-tabs { display: flex; gap: var(--s1); }
.flt-tab {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3); margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font-size: var(--fs-small); font-weight: 500; cursor: pointer;
}
.flt-tab:hover { color: var(--text); }
.flt-tab[aria-selected="true"] { border-bottom-color: var(--action); color: var(--text); font-weight: 600; }
.flt-body { padding: var(--s4); overflow: auto; }
.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 var(--control-border); border-left: 3px solid var(--azul-rio, var(--action)); border-radius: var(--radius-sm); background: var(--surface); }
.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 */
.banned-list { display: flex; gap: var(--s2); align-items: flex-start; }
.banned-list ul { margin: var(--s1) 0 var(--s1) var(--s4); padding: 0; }
.banned-list li { margin: 2px 0; }

/* ---------- 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: 0.55em; 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-weight: 600; }
.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-left: 3px solid var(--action); border-radius: var(--radius-xs); 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-left: 3px solid var(--control-border); border-radius: var(--radius-xs); 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: 12px; 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: 12px; 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-precheck { height: 34px; min-width: 150px; max-width: 190px; padding: 0 var(--s8) 0 var(--s3); font-size: var(--fs-small); font-weight: 600; }
.m-precheck.tone-info { border-color: color-mix(in srgb, var(--info) 55%, transparent); color: var(--info-text); }
.m-precheck.tone-success { border-color: color-mix(in srgb, var(--success) 60%, transparent); color: var(--success-text); }
.m-precheck.tone-danger { border-color: color-mix(in srgb, var(--error) 55%, transparent); color: var(--error-text); }
.m-precheck.tone-warning { border-color: color-mix(in srgb, var(--warning) 55%, transparent); color: var(--warning-text); }
.m-precheck option { color: var(--text); }
.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);
  margin-bottom: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--divider); border-left: 3px solid var(--info);
  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; }
.sec-action { flex-shrink: 0; }
@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); }
.kpi { padding: var(--s4); border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--surface); }
.kpi-label { font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { margin-top: var(--s2); font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.kpi-sub { margin-top: var(--s1); font-size: var(--fs-micro); color: var(--text-muted); }
.kpi.warn { border-color: color-mix(in srgb, var(--warning) 50%, transparent); }
.kpi.warn .kpi-sub { color: var(--warning-text); }
.kpi.good .kpi-value { color: var(--success-text); }
.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-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.dash-grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s4); }
.dash-list { margin: 0; padding: 0; list-style: none; max-height: 340px; overflow: auto; }
.dash-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) 0; border-top: 1px solid var(--divider); }
.dash-list li:first-child { border-top: 0; }
.dash-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 2px; }
.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-table tfoot th, .pv-table tfoot td { border-top: 2px solid var(--divider); border-bottom: 0; font-weight: 600; }
.pv-scroll { overflow-x: auto; }
.assign-row { display: flex; gap: var(--s2); align-items: center; }
.assign-select { min-width: 180px; height: 34px; padding: 0 var(--s8) 0 var(--s3); }
.stage-bars { display: flex; flex-direction: column; gap: var(--s2); }
.stage-bar { display: grid; grid-template-columns: minmax(120px, 1.3fr) minmax(0, 2fr) 32px; align-items: center; gap: var(--s3); font-size: var(--fs-small); }
.stage-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.stage-bar-track { height: 10px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.stage-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--info); }
.stage-bar-fill.good { background: var(--success); } .stage-bar-fill.warn { background: var(--warning); } .stage-bar-fill.bad { background: var(--error); }
.stage-bar-n { text-align: right; font-family: var(--font-mono); }
.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-csv { margin-left: auto; }
.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: 12px; font-family: var(--font-body); }
.ch-name { fill: var(--text); font-size: 12px; 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: 12px; 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: 1100px) { .dash-grid3 { grid-template-columns: 1fr; } .dash-grid2 { grid-template-columns: 1fr; } }
@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%; }
  .pv-csv { margin-left: 0; }
  .assign-row { flex-direction: column; align-items: stretch; }
}

/* ---------- 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: 12px; 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); }
.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-left: 3px solid var(--control-border); border-radius: var(--radius-sm); background: var(--surface); }
.task.prio-urgent { border-left-color: var(--error); } .task.prio-high { border-left-color: var(--warning); } .task.prio-medium { border-left-color: var(--info); }
.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) ---------- */
.dash-views { margin-top: var(--s4); margin-left: 0; }
.bd-tabs { margin: 0 0 var(--s3); }
.bd .bd-search { flex: 1; min-width: 200px; }
.bd .bd-search .input { width: 100%; }
.bd-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin: var(--s3) 0 var(--s2); }
.bd-bar .pv-title { margin: 0; }
.bd-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.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-seg th, .bd-seg td { background: var(--action-tint); font-weight: 700; }
.bd-ent th { font-weight: 600; }
.bd-ent th .m-sub, .bd-deal th .m-sub { display: block; font-weight: 400; }
.bd-deal th { padding-left: calc(var(--s3) + 30px); font-weight: 400; }
.bd-deal th, .bd-deal td { background: var(--raised); color: var(--text-muted); }
.bd-deal td { font-size: var(--fs-micro); }
.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-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.bd-head .bd-tabs { margin: 0; }
.bd-range { 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); }
.bd-range-label { align-self: center; padding-right: var(--s2); font-weight: 700; font-size: var(--fs-small); }
.bd-foot { margin-top: var(--s2); font-size: var(--fs-micro); }
.bd-sheet .bd-c1 { left: 0; width: 190px; min-width: 190px; max-width: 190px; }
.bd-sheet .bd-c2 { left: 190px; min-width: 210px; max-width: 240px; }
.bd-sheet th .m-sub { display: block; font-weight: 400; }
.bd-sheet tbody th.bd-c1 { vertical-align: top; font-weight: 600; background: var(--surface); }
.bd-sheet tbody th.bd-c2 { font-weight: 400; }
.bd-sheet tr.bd-first > * { border-top: 2px solid var(--divider); }
.bd-sheet .bd-hgroup th { border-bottom: 1px solid var(--divider); }
.bd-sheet .bd-volhead { text-align: center; color: var(--text); }
.bd-sheet thead tr:nth-child(2) th { top: 33px; }
.bd-sheet .bd-segname { background: var(--action-tint); }
@media (max-width: 767px) { .bd-sheet .bd-c1 { width: 130px; min-width: 130px; max-width: 130px; } .bd-sheet .bd-c2 { left: 130px; min-width: 140px; max-width: 160px; } .bd-range-label { width: 100%; } }

/* ---------- Opportunities: new (no precheck sent) rows; precheck buttons and rejection reasons ---------- */
tr[data-mark] > td { font-weight: 700; }
tr[data-mark] > td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.row-mark { flex-shrink: 0; margin-left: var(--s2); padding: 1px 8px; border-radius: 999px; background: var(--info); color: var(--on-info);
  font-size: 12px; 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); }
.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; }
.m-undo { display: block; margin-top: 2px; font-size: var(--fs-micro); }

/* 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-fx { display: none; }
.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: 1.375rem; line-height: 1.2; text-shadow: none; }
@media (max-width: 767px) { .stat.lead .stat-value { font-size: 1.25rem; } }

/* ==========================================================================
   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-key { color: var(--bbs-label); border-color: var(--bbs-hairline); border-radius: var(--radius-xs); }
.rail .nav-item.active .nav-key { color: var(--bbs-active-fg); border-color: rgb(255 255 255 / .45); }
.rail .nav-badge { background: var(--bbs-avatar-bg); color: #ffffff; }
.rail .nav-item.active .nav-badge { background: #ffffff; color: var(--bbs-active-bg); }
.rail .nav-badge.overdue { background: var(--danger); color: #ffffff; }
.rail .brand-mark { background: var(--bbs-avatar-bg); border-color: transparent; color: #ffffff; border-radius: var(--radius-sm); }
.rail .has-logo .brand-mark { background: transparent; }
.rail .avatar { background: var(--bbs-avatar-bg); border-color: transparent; color: #ffffff; }
.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(--accent); color: #ffffff; box-shadow: 0 1px 2px rgba(24, 43, 77, .12); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--shadow-sm); }
.btn-primary:active:not(:disabled) { background: var(--cobalt-press); }
.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(--accent); color: #ffffff; }       /* "New": white on cobalt (5.3:1 light, 4.7:1 dark) */
tr[data-mark] > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- Dashboard cards: each opens a details popup ---------- */
.kpi-btn { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.kpi-btn:hover { border-color: var(--action-border); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: var(--focus-ring); }
.kpi-more { margin-top: auto; padding-top: var(--s2); font-size: var(--fs-micro); font-weight: 500; color: var(--accent-text); opacity: .85; }
.kpi-btn:hover .kpi-more, .kpi-btn:focus-visible .kpi-more { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.kc-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s6) var(--s4); background: var(--overlay); }
.kc-dialog { display: flex; flex-direction: column; width: min(920px, 100%); max-height: min(88vh, 900px); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.kc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s5) var(--s6) var(--s4); border-bottom: 1px solid var(--border); }
.kc-head h2 { margin-top: 2px; font-size: var(--fs-h2); font-weight: 700; color: var(--text-primary); }
.kc-body { overflow-y: auto; padding: var(--s5) var(--s6) var(--s6); display: flex; flex-direction: column; gap: var(--s5); }
.kc-note { padding: var(--s3) var(--s4); border-radius: var(--radius-sm); background: var(--blue-bg); color: var(--text-primary); font-size: var(--fs-small); }
.kc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
.kc-tile { padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.kc-tile.lead { background: var(--action-tint); border-color: var(--action-border); }
.kc-tile.good .kc-value { color: var(--success-text); }
.kc-tile.warn { border-color: var(--warning-border); } .kc-tile.warn .kc-value { color: var(--warn-text); }
.kc-label { font-size: var(--fs-micro); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.kc-value { margin-top: var(--s1); font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kc-sub { margin-top: 2px; font-size: var(--fs-micro); color: var(--text-secondary); }
.kc-change { font-weight: 600; } .kc-change.up { color: var(--success-text); } .kc-change.down { color: var(--danger-text); }
.kc-block h3 { margin-bottom: var(--s2); font-size: var(--fs-h3); font-weight: 600; color: var(--text-primary); }
.kc-bars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.kc-bars li { display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(0, 2fr) minmax(70px, auto); gap: var(--s3); align-items: center; font-size: var(--fs-small); }
.kc-bar-label { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-bar-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-press); overflow: hidden; }
.kc-bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); }
.kc-bar-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.kc-bar-pct { font-weight: 400; color: var(--text-secondary); }
.kc-list { margin: 0; padding: 0; list-style: none; }
.kc-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--border-light); font-size: var(--fs-small); }
.kc-list li:first-child { border-top: 0; }
.kc-list .m-sub { flex-basis: 100%; }
ol.kc-list { counter-reset: kc; } ol.kc-list li::before { counter-increment: kc; content: counter(kc) "."; color: var(--text-secondary); margin-right: var(--s2); }
ol.kc-list li { justify-content: flex-start; } ol.kc-list li .num { margin-left: auto; }
.kc-chart { width: 100%; height: auto; display: block; }
.kc-details { margin-top: var(--s2); font-size: var(--fs-small); }
.kc-details summary { cursor: pointer; color: var(--accent-text); font-weight: 500; }
.kc-details table { margin-top: var(--s2); }
@media (max-width: 767px) {
  .kc-overlay { place-items: end stretch; padding: 0; }
  .kc-dialog { width: 100%; max-height: 92vh; border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0; }
  .kc-head, .kc-body { padding-left: var(--s4); padding-right: var(--s4); }
  .kc-bars li { grid-template-columns: minmax(0, 1fr) 70px; } .kc-bar-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- 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-h2); font-weight: 700; 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: #ffffff; 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: #ffffff; font-size: 11px; 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:first-child { box-shadow: inset 3px 0 0 var(--warning); }
tr[data-tasks="overdue"] > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
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) 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; }
.strips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.task-strip { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.task-strip > .btn { align-self: flex-start; }
.tstrip-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.tstrip-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); padding: var(--s2) var(--s3); border-left: 3px solid var(--warning); border-radius: var(--radius-xs); background: var(--surface-2); }
.tstrip-item.overdue { border-left-color: var(--danger); }
.tstrip-title { justify-self: start; font-weight: 600; text-align: left; }
.tstrip-meta { grid-column: 1; font-size: var(--fs-micro); color: var(--text-secondary); }
.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; }
@media (max-width: 900px) { .strips { grid-template-columns: 1fr; } }

/* ---------- 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; }
  .toc { display: none; }

  .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); }
  .hero-fx { inset: calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0; }
  .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.lead .stat-value { font-size: 1.5rem; }
  .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; }
  .toc { display: none; }
  .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); }
  .item-row { grid-template-columns: minmax(0, 1fr); }
  .item-row .field-error { grid-column: 1; }
  .radio-cards { grid-template-columns: minmax(0, 1fr); }
  .ubo-grid { 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; }
  .fireflies { display: none; }
  .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: 14px; line-height: 1.55; 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: #ffffff; box-shadow: none; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--bbs-ink); }
.brand-sub { font-size: 12px; color: var(--bbs-label); }
.rail-section { padding: var(--s5) var(--s3) var(--s1); font-size: 12px; 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: 14px; 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: 12px; 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); }
.rail-user { padding: var(--s2) var(--s3); }

/* ---------- 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: 13px; 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: 28px; font-weight: 600; line-height: 1.2; color: var(--text-primary); }
.page-sub { font-size: 14px; line-height: 1.55; 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: 13px; font-weight: 500; color: var(--text-secondary); }
.stat-hint { font-size: 12px; color: var(--text-3); }
.stat-value { font-size: 22px; 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: 13.5px; 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(--accent); border-color: var(--accent); color: #ffffff; box-shadow: none; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--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: 13px; }
.btn-icon { width: 36px; min-width: 36px; padding: 0; }
.input { min-height: 36px; border-radius: var(--radius-sm); font-size: 14px; background: var(--surface); }
.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: 12px; font-weight: 500; letter-spacing: 0; }
.count-badge { font-weight: 600; }

/* ---------- Tables ---------- */
.data-table { font-size: 13.5px; }
.data-table thead th { height: 40px; padding: 0 var(--s4); background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12.5px; 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: 13px; color: var(--text-secondary); }

/* ---------- Record pages ---------- */
.record-kicker { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.record-title { font-size: 26px; font-weight: 600; line-height: 1.2; }
.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); }
.strips { gap: var(--s3); margin-bottom: var(--s4); }

/* ---------- 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: 14px; }
.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: 15px; }
.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 { font-size: 24px; }
  .record-title { font-size: 22px; }
  .table-toolbar { padding: var(--s3) var(--s4); }
  .ts-group { padding: var(--s4) var(--s4) var(--s2); }
  .stat { padding: var(--s3); }
  .stat-value { font-size: 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: 13px; }
.stage-filter .count, .stage-filter span:last-child { font-size: 12px; }
.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 */
.strips { grid-template-columns: 1fr; gap: var(--s3); margin-bottom: 0; align-items: start; }
.comment-strip { padding: var(--s3) var(--s4); }
.task-strip { padding: var(--s4); gap: var(--s3); }
.tstrip-item { padding: var(--s2) var(--s3); border-radius: var(--radius-sm); border-left-width: 2px; }
.tstrip-title { font-weight: 500; text-decoration: none; color: var(--text-primary); }
.tstrip-title:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1200px) { .tstrip-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 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: #ffffff; }
.rail .nav-badge.overdue, .rail .nav-item.active .nav-badge.overdue { background: var(--danger); color: #ffffff; }
/* 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: stack so long amounts fit */
  .key-figures { display: grid; grid-template-columns: 1fr; gap: var(--s2); width: 100%; }
}
@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: 12px; 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; }
.rail-user { padding-left: 0; padding-right: 0; }
.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); }
#bdRoot > * { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; }

/* ---------- 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(--s4); 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-head, #bdRoot .bd-top { margin-bottom: var(--s4); }
#bdRoot .bd-controls, #bdRoot .pv-controls, .dash-tabpanel .pv-controls { margin-bottom: var(--s5); }
#bdRoot .bd-summary, #bdRoot .bd-meta { margin-bottom: var(--s4); }
.dash-tabpanel .pv-presets { margin-bottom: var(--s4); }
.dash-tabpanel .pv-chart, .dash-tabpanel .chart-wrap { margin-bottom: var(--s6); }
.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-range { margin-bottom: var(--s5); }
.dash-tabpanel .bd-bar { margin-top: 0; margin-bottom: var(--s3); }
.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: 26px; 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(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* sidebar: selected item = soft violet with a violet 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: 13px; 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: 12.5px; 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: 12.5px; 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; }
.rail-user-text { min-width: 0; }
.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; }