/* ==========================================================================
   Redesign components (UX_REDESIGN_PLAN.md §3.4) — loaded after app.css, so these rules win by order,
   the same convention app.css already uses for its later layers. Built only on design-tokens.css layer 1/4.
   ========================================================================== */

/* ---------------------------------------------------------------- focus: always visible */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--state-focus-width) solid var(--state-focus-color);
  outline-offset: var(--state-focus-offset);
}
/* containers focused by script (page start, dialogs) aren't controls: no ring */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: var(--radius-xs);
  background: var(--color-card); color: var(--color-muted-foreground); font: 600 var(--text-xs)/1 var(--font-body);
}

.skip-link {
  position: fixed; left: var(--space-md); top: var(--space-sm); z-index: calc(var(--z-toast) + 1); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-control); background: var(--color-primary); color: var(--color-on-primary); font-weight: 600;
  transform: translateY(-200%); transition: transform var(--motion-fast) var(--motion-ease);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- badges (status families) */
.ui-badge {
  display: inline-flex; align-items: center; gap: var(--space-xs); max-width: 100%; height: 22px; padding: 0 var(--space-sm);
  border: 1px solid var(--b, var(--status-inactive-border)); border-radius: var(--radius-pill);
  background: var(--s, var(--status-inactive-soft)); color: var(--t, var(--status-inactive-text));
  font: 600 var(--text-xs)/1 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tone-new      { --s: var(--status-new-soft);      --t: var(--status-new-text);      --b: var(--status-new-border); }
.tone-progress, .tone-info { --s: var(--status-progress-soft); --t: var(--status-progress-text); --b: var(--status-progress-border); }
.tone-success  { --s: var(--status-success-soft);  --t: var(--status-success-text);  --b: var(--status-success-border); }
.tone-hold, .tone-warning { --s: var(--status-hold-soft); --t: var(--status-hold-text); --b: var(--status-hold-border); }
.tone-lost, .tone-danger  { --s: var(--status-lost-soft); --t: var(--status-lost-text); --b: var(--status-lost-border); }
.tone-inactive, .tone-neutral { --s: var(--status-inactive-soft); --t: var(--status-inactive-text); --b: var(--status-inactive-border); }

/* ---------------------------------------------------------------- avatars */
.ui-avatar {
  display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--av, var(--avatar-8)); color: var(--avatar-fg); font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: 0;
  user-select: none;
}
.ui-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.ui-avatar-md { width: 32px; height: 32px; }
.ui-avatar-lg { width: 40px; height: 40px; font-size: var(--text-sm); }

/* ---------------------------------------------------------------- toasts */
.toast#toast { display: none; }   /* the old single slot; js/ui/toast.js draws a stack instead */
.toast-stack {
  position: fixed; right: var(--space-lg); bottom: calc(var(--space-lg) + var(--safe-bottom)); z-index: var(--z-toast);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-sm); width: min(420px, calc(100vw - 2 * var(--space-md)));
  pointer-events: none;
}
.toast-stack .toast {
  position: static; left: auto; bottom: auto; transform: translateY(8px); max-width: 100%; width: 100%;
  display: flex; align-items: flex-start; gap: var(--space-sm-plus); padding: var(--space-sm-plus) var(--space-sm) var(--space-sm-plus) var(--space-md);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-card);
  background: var(--color-card); box-shadow: var(--shadow-lg); color: var(--color-foreground); font-size: var(--text-sm); line-height: 1.45;
  opacity: 0; pointer-events: auto; transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
}
.toast-stack .toast.show { opacity: 1; transform: none; }
.toast-stack .toast.leaving { opacity: 0; transition-duration: var(--motion-fast); }
.toast-stack .toast-icon { display: inline-flex; margin-top: 1px; color: var(--t, var(--status-lost-text)); }
.toast-stack .tone-success .toast-icon { color: var(--status-success-text); }
.toast-stack .tone-info .toast-icon { color: var(--status-progress-text); }
.toast-stack .tone-error .toast-icon { color: var(--status-lost-text); }
.toast-stack .toast-msg { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.toast-action {
  flex: none; height: 28px; padding: 0 var(--space-sm-plus); border: 1px solid var(--color-primary-soft-border); border-radius: var(--radius-control);
  background: var(--color-primary-soft); color: var(--color-primary-text); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.toast-action:hover { background: var(--color-muted-strong); }
.toast-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--color-muted-foreground); cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease);
}
.toast-close:hover { background: var(--state-hover); color: var(--color-foreground); }
.toast-stack .toast.moment { align-items: center; max-width: 100%; }
@media (max-width: 767px) {
  .toast-stack { right: 50%; transform: translateX(50%); bottom: calc(var(--space-md) + var(--safe-bottom)); align-items: stretch; }
}
@media (pointer: coarse) { .toast-close, .toast-action { min-height: 44px; min-width: 44px; } }

/* ---------------------------------------------------------------- dialogs + confirmation */
.ui-dialog {
  width: min(440px, calc(100vw - 2 * var(--space-md))); max-height: calc(100vh - 2 * var(--space-xl)); padding: 0;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-dialog); background: var(--color-card); color: var(--color-foreground);
  box-shadow: var(--shadow-xl);
}
.ui-dialog::backdrop { background: var(--color-overlay); }
.ui-dialog[open] { animation: ui-pop var(--motion-base) var(--motion-ease); }
@keyframes ui-pop { from { opacity: 0; transform: translateY(6px); } }
.ui-dialog-inner { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); }
.ui-dialog-title { margin: 0; font: 600 var(--text-lg)/var(--leading-heading) var(--font-heading); letter-spacing: var(--tracking-heading); }
.ui-dialog-body { margin: 0; color: var(--color-muted-foreground); font-size: var(--text-base); }
.ui-dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-xs); }
.ui-confirm-head { display: flex; align-items: flex-start; gap: var(--space-sm-plus); }
.ui-confirm-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--status-progress-soft); color: var(--status-progress-text); }
.ui-confirm-icon.danger { background: var(--status-lost-soft); color: var(--status-lost-text); }
.ui-confirm-head .ui-dialog-title { padding-top: 6px; }
.ui-confirm-list { margin: 0; padding-left: var(--space-lg); color: var(--color-foreground); font-size: var(--text-sm); }
.ui-confirm-list li + li { margin-top: var(--space-xs); }
.ui-confirm-permanent { margin: 0; color: var(--status-lost-text); font-size: var(--text-sm); font-weight: 600; }

/* ---------------------------------------------------------------- menus */
.ui-menu {
  position: fixed; z-index: var(--z-modal); min-width: 220px; max-width: calc(100vw - 16px); padding: var(--space-xs);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-md);
}
.ui-menu-h { margin: 0; padding: var(--space-sm) var(--space-sm-plus) var(--space-xs); color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: 600; }
.ui-menu-item {
  display: flex; align-items: center; gap: var(--space-sm-plus); width: 100%; min-height: 36px; padding: 0 var(--space-sm-plus);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-foreground); text-align: left; text-decoration: none;
  font: 500 var(--text-sm)/1.3 var(--font-body); cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease);
}
.ui-menu-item .icon { flex: none; color: var(--color-muted-foreground); }
.ui-menu-item:hover, .ui-menu-item:focus-visible { background: var(--color-muted); outline: none; }
.ui-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--color-ring); }
.ui-menu-item .ui-menu-kbd { margin-left: auto; display: inline-flex; gap: 2px; }
.ui-menu-item.danger, .ui-menu-item.danger .icon { color: var(--status-lost-text); }
.ui-menu-sep { height: 1px; margin: var(--space-xs) 0; background: var(--color-border); }
.ui-menu-meta { padding: var(--space-sm) var(--space-sm-plus); color: var(--color-muted-foreground); font-size: var(--text-xs); line-height: 1.5; }
@media (pointer: coarse) { .ui-menu-item { min-height: 44px; } }

/* ---------------------------------------------------------------- top bar: search, + New, inbox */
.appbar { gap: var(--space-sm-plus); }
.appbar .crumbs { min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-search {
  display: inline-flex; align-items: center; gap: var(--space-sm); width: min(var(--topbar-search-w), 34vw); height: 36px; margin-left: auto; padding: 0 var(--space-sm) 0 var(--space-sm-plus);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-card); color: var(--color-muted-foreground);
  font: 400 var(--text-sm)/1 var(--font-body); text-align: left; cursor: pointer; transition: border-color var(--motion-fast) var(--motion-ease);
}
.top-search:hover { border-color: var(--color-primary); }
.top-search-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-search kbd { flex: none; }
.appbar .appbar-spacer { display: none; }
.top-new > span:last-child { margin-left: -2px; }
.top-bell { position: relative; }
.top-bell-badge {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--color-background); border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-on-primary); font: 700 10px/14px var(--font-body); text-align: center; pointer-events: none;
}
.top-bell-badge.urgent { background: var(--status-lost-fill); }
.sync-time { white-space: nowrap; }
@media (max-width: 1099px) {
  .top-search { width: 36px; padding: 0; justify-content: center; }
  .top-search-text, .top-search kbd { display: none; }
  .sync-time { display: none; }
}
@media (max-width: 767px) {
  .top-new .top-new-label, .top-new > span:last-child { display: none; }
  .top-new { width: 36px; padding: 0; }
}
@media (pointer: coarse) { .top-search, .top-new { min-height: 44px; } .top-search { min-width: 44px; } }

/* ---------------------------------------------------------------- inbox panel */
.ibx {
  position: fixed; z-index: var(--z-modal); width: min(400px, calc(100vw - 16px)); max-height: min(560px, calc(100vh - 80px));
  display: flex; flex-direction: column; border: 1px solid var(--color-border-strong); border-radius: var(--radius-card);
  background: var(--color-card); box-shadow: var(--shadow-lg); overflow: hidden;
}
.ibx-head { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
.ibx-h { margin: 0; font: 600 var(--text-md)/1.3 var(--font-heading); }
.ibx-tabs { display: flex; gap: var(--space-xs); }
.ibx-tab {
  display: inline-flex; align-items: center; gap: var(--space-xs); height: 36px; padding: 0 var(--space-sm-plus); border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--color-muted-foreground); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer;
}
.ibx-tab[aria-selected="true"] { border-bottom-color: var(--color-primary); color: var(--color-primary-text); }
.ibx-body { flex: 1; overflow-y: auto; }
.ibx-list { margin: 0; padding: var(--space-xs); list-style: none; }
.ibx-item {
  display: flex; gap: var(--space-sm-plus); padding: var(--space-sm-plus); border-radius: var(--radius-control); color: var(--color-foreground); text-decoration: none;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.ibx-item:hover { background: var(--color-muted); }
.ibx-item.is-unseen { background: var(--color-primary-soft); }
.ibx-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--s, var(--color-muted)); color: var(--t, var(--color-muted-foreground)); }
.ibx-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ibx-title { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.ibx-quote { color: var(--color-muted-foreground); font-size: var(--text-sm); }
.ibx-meta { color: var(--color-muted-foreground); font-size: var(--text-xs); }
.ibx-due { color: var(--t); font-weight: 600; }
.ibx-new { color: var(--color-primary-text); font-weight: 700; }
.ibx-empty { margin: 0; padding: var(--space-xl) var(--space-md); color: var(--color-muted-foreground); text-align: center; font-size: var(--text-sm); }
.ibx-foot { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm-plus); border-top: 1px solid var(--color-border);
  color: var(--color-primary-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.ibx-foot:hover { background: var(--color-muted); }

/* ---------------------------------------------------------------- command palette */
.ui-palette { width: min(640px, calc(100vw - 2 * var(--space-md))); margin-top: 12vh; display: flex; flex-direction: column; overflow: hidden; }
.ui-palette[open] { display: flex; }
.pal-field { display: flex; align-items: center; gap: var(--space-sm-plus); padding: 0 var(--space-md); border-bottom: 1px solid var(--color-border); color: var(--color-muted-foreground); }
.pal-input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; color: var(--color-foreground); font: 400 var(--text-md)/1 var(--font-body); }
.pal-input:focus, .pal-input:focus-visible { outline: none; }
.pal-list { max-height: min(440px, 56vh); overflow-y: auto; padding: var(--space-xs) var(--space-xs) var(--space-sm); }
.pal-group-h { margin: 0; padding: var(--space-sm-plus) var(--space-sm-plus) var(--space-xs); color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: 600; }
.pal-group-h span { font-weight: 400; }
.pal-opt { display: flex; align-items: center; gap: var(--space-sm-plus); min-height: 44px; padding: var(--space-xs) var(--space-sm-plus); border-radius: var(--radius-control); cursor: pointer; }
.pal-opt[aria-selected="true"] { background: var(--color-primary-soft); box-shadow: inset 2px 0 0 var(--color-primary); }
.pal-opt-icon { display: inline-flex; color: var(--color-muted-foreground); }
.pal-opt-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pal-opt-title { font-size: var(--text-base); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pal-opt-meta { color: var(--color-muted-foreground); font-size: var(--text-xs); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pal-empty { margin: 0; padding: var(--space-lg) var(--space-md); color: var(--color-muted-foreground); text-align: center; font-size: var(--text-sm); }
.pal-foot { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0; padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-border);
  color: var(--color-muted-foreground); font-size: var(--text-xs); }
.pal-foot span { display: inline-flex; align-items: center; gap: 3px; }
@media (max-width: 767px) { .ui-palette { margin-top: var(--space-md); } .pal-foot { display: none; } }

/* ---------------------------------------------------------------- shortcut help */
.ui-shortcuts { width: min(560px, calc(100vw - 2 * var(--space-md))); }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.sc-grid h3 { margin: 0 0 var(--space-sm); font: 600 var(--text-sm)/1.3 var(--font-heading); }
.sc-grid dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm) var(--space-sm-plus); align-items: center; font-size: var(--text-sm); }
.sc-grid dt { display: inline-flex; gap: 3px; }
.sc-grid dd { margin: 0; color: var(--color-muted-foreground); }
@media (max-width: 600px) { .sc-grid { grid-template-columns: 1fr; } }

/* (the avatar menu moved to the top bar: .top-me, phase 2) */
.api-pill { display: inline-flex; align-items: center; gap: 6px; }
.api-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--status-inactive-fill); }
.api-pill.online::before { background: var(--status-success-fill); }
.api-pill.offline::before { background: var(--status-lost-fill); }

/* ---------------------------------------------------------------- phone drawer: out of the tab order when closed */
@media (max-width: 767px) { .shell:not(.rail-open) .rail { visibility: hidden; } .shell.rail-open .rail { visibility: visible; } }

/* ---------------------------------------------------------------- not found page */
.not-found { max-width: 560px; margin: var(--space-2xl) auto; padding: var(--space-xl); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-card); text-align: center; }
.not-found .nf-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--space-md);
  border-radius: 50%; background: var(--color-muted); color: var(--color-muted-foreground); }
.not-found h1 { margin: 0 0 var(--space-sm); font: 600 var(--text-xl)/1.2 var(--font-heading); }
.not-found p { margin: 0 0 var(--space-lg); color: var(--color-muted-foreground); }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

@media (prefers-reduced-motion: reduce) {
  .toast-stack .toast, .ui-dialog[open], .skip-link { transition: none; animation: none; }
}

/* ==========================================================================
   Charts (js/ui/charts.js) — marks carry colour, text uses text colours; bars <= 24px with a 4px rounded end.
   ========================================================================== */
.ch-hbars, .ch-funnel { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ch-hrow, .ch-frow {
  /* label and value on one line, the bar under them at full width: long stage names never get cut */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar"; align-items: center; gap: 4px var(--space-sm-plus);
  width: 100%; min-height: 36px; padding: var(--space-xs) var(--space-sm); border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--color-foreground); font: 400 var(--text-sm)/1.3 var(--font-body); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.ch-hrow:hover, .ch-frow:hover { background: var(--color-muted); }
.ch-hlabel { grid-area: label; color: var(--color-foreground); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ch-htrack { grid-area: bar; position: relative; height: 12px; border-radius: 0 4px 4px 0; background: var(--color-muted); }
.ch-hbar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--bar); min-width: 0; transition: width var(--motion-base) var(--motion-ease); }
.ch-hval { grid-area: value; display: flex; align-items: baseline; gap: var(--space-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-hsub { color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: 400; }
.ch-funnel > li { position: relative; }
.ch-conv { display: block; padding: 0 var(--space-sm); color: var(--color-muted-foreground); font-size: var(--text-xs); text-align: right; line-height: 1; }
.ch-conv::before { content: "↓ "; }
.ch-line { margin: 0; }
.ch-line svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: var(--color-border); stroke-width: 1; }
.ch-axis { fill: var(--color-muted-foreground); font: 400 11px var(--font-body); }
.ch-path { fill: none; stroke: var(--line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { fill: var(--line); opacity: .1; }
.ch-dot { fill: var(--line); stroke: var(--color-card); stroke-width: 2; }
.ch-hit rect { fill: transparent; }
.ch-hit .ch-hover-dot { fill: var(--line); stroke: var(--color-card); stroke-width: 2; opacity: 0; }
.ch-hit:hover .ch-hover-dot, .ch-hit:focus-visible .ch-hover-dot { opacity: 1; }
.ch-hit:hover rect, .ch-hit:focus-visible rect { fill: var(--state-hover); }
.ch-hit:focus-visible { outline: none; }
.ch-hit:focus-visible rect { stroke: var(--color-ring); stroke-width: 2; }
.ch-tip {
  position: fixed; z-index: var(--z-toast); max-width: 280px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control);
  background: var(--color-foreground); color: var(--color-background); font: 600 var(--text-xs)/1.4 var(--font-body); pointer-events: none;
}

/* ==========================================================================
   Today (js/today.js)
   ========================================================================== */
.td { display: flex; flex-direction: column; gap: var(--space-xl); }
.td-head { display: flex; flex-direction: column; gap: var(--space-xs); }
.td-date { margin: 0; color: var(--color-muted-foreground); font-size: var(--text-sm); font-weight: 600; }
.td-head .page-title { margin: 0; }
.td-lead { margin: 0; color: var(--color-muted-foreground); }
.td-section { display: flex; flex-direction: column; gap: var(--space-md); }
.td-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-sm-plus); }
.td-section-head h2 { margin: 0; font: 600 var(--text-lg)/1.3 var(--font-heading); }
.td-section-head h2:focus { outline: none; }
.td-section-sub { margin: 0; color: var(--color-muted-foreground); font-size: var(--text-sm); }
.td-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill);
  background: var(--color-muted); color: var(--color-foreground); font: 700 var(--text-xs)/1 var(--font-body); }
.td-count.big { height: 24px; min-width: 24px; background: var(--color-primary); color: var(--color-on-primary); }

.td-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-md); align-items: start; }
.td-card { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; padding: var(--space-md); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card); background: var(--color-card); }
/* each card is closed until opened: the header is the toggle and keeps the count in sight */
.td-card-h { margin: 0; }
.td-card-head { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: 0; border: 0; background: none; color: var(--color-foreground);
  font: 600 var(--text-base)/1.3 var(--font-heading); text-align: left; cursor: pointer; }
.td-card-title { flex: 1; min-width: 0; }
.td-card-head:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: 4px; border-radius: var(--radius-xs); }
.td-chev { display: inline-flex; color: var(--color-muted-foreground); transition: transform var(--motion-fast) var(--motion-ease); }
.td-card:not(.is-shut) .td-chev { transform: rotate(180deg); }
.td-card.is-shut { gap: 0; }
.td-card.is-shut:hover { border-color: var(--color-primary); }
.td-card-body { display: flex; flex-direction: column; gap: var(--space-sm); }
.td-urgent { color: var(--due-overdue-text); font: 600 var(--text-xs)/1 var(--font-body); white-space: nowrap; }
.td-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--s); color: var(--t); }
.td-hint { margin: 0; color: var(--color-muted-foreground); font-size: var(--text-xs); }
.td-items { margin: 0; padding: 0; list-style: none; }
.td-item { display: flex; align-items: center; gap: var(--space-sm-plus); padding: var(--space-sm) 0; border-top: 1px solid var(--color-border); }
.td-item:first-child { border-top: 0; }
.td-main { flex: 1; min-width: 0; }
.td-title { display: block; color: var(--color-foreground); font-size: var(--text-sm); font-weight: 600; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.td-title:hover { color: var(--color-primary-text); text-decoration: underline; }
.td-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-sm); margin: 2px 0 0; color: var(--color-muted-foreground); font-size: var(--text-xs); }
.td-quote { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.td-sub-link { color: var(--color-primary-text); }
.td-due { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.td-due.is-overdue { color: var(--due-overdue-text); }
.td-due.is-today { color: var(--due-today-text); }
.td-check { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1.5px solid var(--color-control-border);
  border-radius: 50%; background: var(--color-card); color: transparent; cursor: pointer; transition: border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
.td-check:hover, .td-check:focus-visible { border-color: var(--status-success-fill); color: var(--status-success-text); }
.td-more { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0; border: 0; background: none;
  color: var(--color-primary-text); font: 600 var(--text-sm)/1.4 var(--font-body); text-decoration: none; cursor: pointer; }
.td-more:hover { text-decoration: underline; }
.td-assign { flex-wrap: wrap; row-gap: var(--space-sm); }
.td-assign .td-main { flex-basis: 100%; }
.td-assign-ctl { display: flex; gap: var(--space-xs); flex: 1 1 100%; }
.td-assign-ctl .input { flex: 1; min-width: 0; height: 32px; }
.td-also { display: flex; align-items: center; gap: var(--space-xs); margin: 0; color: var(--color-muted-foreground); font-size: var(--text-sm); }
.td-also .icon { color: var(--status-success-text); }
.td-clear { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-card); }
.td-clear > .icon { color: var(--status-success-text); flex: none; }
.td-clear p { margin: 0; color: var(--color-muted-foreground); }
.td-clear .td-clear-h { color: var(--color-foreground); font: 600 var(--text-md)/1.3 var(--font-heading); }

/* six tiles: one row, or two rows of three, or three rows of two — never a lone tile on its own row */
.td-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm-plus); }
.td { container-type: inline-size; }
@container (min-width: 620px) { .td-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1040px) { .td-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.td-kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--space-sm-plus) var(--space-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card);
  background: var(--color-card); color: var(--color-foreground); text-decoration: none; transition: border-color var(--motion-fast) var(--motion-ease); }
.td-kpi:hover { border-color: var(--color-primary); }
.td-kpi-label { color: var(--color-muted-foreground); font-size: var(--text-sm); font-weight: 600; }
.td-kpi-value { font: 600 var(--text-xl)/1.2 var(--font-heading); font-variant-numeric: tabular-nums; }
.td-kpi-sub { color: var(--color-muted-foreground); font-size: var(--text-xs); }
.td-kpi-warn { display: inline-flex; align-items: center; gap: 3px; color: var(--status-hold-text); font-weight: 600; }

.td-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-md); align-items: start; }
.td-chart { display: flex; flex-direction: column; gap: var(--space-sm-plus); min-width: 0; padding: var(--space-md); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card); background: var(--color-card); }
.td-chart.td-wide { grid-column: 1 / -1; }
.td-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.td-chart-head h3 { margin: 0; font: 600 var(--text-base)/1.3 var(--font-heading); }
.td-chart-head p { margin: 2px 0 0; color: var(--color-muted-foreground); font-size: var(--text-xs); }
.td-chart-link { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--color-primary-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.td-chart-link:hover { text-decoration: underline; }
.td-chart-note { margin: 0; color: var(--color-muted-foreground); font-size: var(--text-xs); }
.td-empty { margin: 0; padding: var(--space-md) 0; color: var(--color-muted-foreground); font-size: var(--text-sm); }
.td-err { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0; padding: var(--space-sm-plus); border-radius: var(--radius-control);
  background: var(--status-lost-soft); color: var(--status-lost-text); font-size: var(--text-sm); }
.td-err .link-btn, .td-err .btn { margin-left: auto; }
.td-skel { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xs) 0; }
.td-skel .skeleton { display: block; height: 14px; border-radius: var(--radius-xs); }
.td-skel .skeleton:nth-child(1) { width: 70%; } .td-skel .skeleton:nth-child(2) { width: 90%; } .td-skel .skeleton:nth-child(3) { width: 55%; }
.td-timeline { margin-top: 0; }
@media (pointer: coarse) { .td-check { width: 44px; height: 44px; } .ch-hrow, .ch-frow { min-height: 44px; } }
/* Today is full-bleed like the other screens: its own side gutter (--edge, as app.css's screens use) */
#todayView { background: var(--color-background); }
#todayView .td { padding: var(--space-lg) var(--edge, var(--space-md)) var(--space-2xl); }

/* ==========================================================================
   Lists (UX_REDESIGN_PLAN §5.1): summary chips that filter, tick boxes + bulk bar, row actions, density,
   Filters as a right-hand drawer (the table stays visible beside it).
   ========================================================================== */
#listView .stat.stat-chip {
  width: 100%; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--color-border-strong); background: var(--color-card); box-shadow: none;
  transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease);
}
#listView .stat.stat-chip:hover { border-color: var(--color-primary); }
#listView .stat.stat-chip.lead { background: var(--color-card); box-shadow: none; }
#listView .stat.stat-chip.on { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary); }
#listView .stat.stat-chip.on .stat-label { color: var(--color-primary-text); }
#listView .stat.stat-chip:disabled { cursor: default; }

/* tick boxes in the name column */
.row-pick { flex: none; width: 16px; height: 16px; margin: 0 var(--space-xs) 0 0; accent-color: var(--color-primary); cursor: pointer; }
.th-inner .row-pick { margin-right: var(--space-sm); }
.data-table tbody tr.is-picked > td { background: var(--color-primary-soft); }
@media (pointer: coarse) { .row-pick { width: 22px; height: 22px; } }

/* row actions: always visible (no hover on touch screens), quiet until hovered — UX_FLOW #31 */
#listView .row-comment-btn { color: var(--color-subtle-foreground); }
#listView .data-table tbody tr:hover .row-comment-btn, #listView .row-comment-btn:focus-visible { color: var(--color-muted-foreground); }
#listView .row-comment-btn:hover { color: var(--color-primary-text); }

/* bulk bar */
.bulk-bar {
  position: sticky; left: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-primary-soft-border); background: var(--color-primary-soft);
}
.bulk-count { color: var(--color-primary-text); font-size: var(--text-sm); }
.bulk-group { display: inline-flex; gap: var(--space-xs); }
.bulk-select { height: 30px; min-width: 170px; font-size: var(--text-sm); }
.bulk-clear { margin-left: auto; }

/* density: compact rows */
.density-compact .data-table tbody td, .density-compact .data-table tbody th { padding-top: 3px; padding-bottom: 3px; }
.density-compact .row-comment-btn { width: 24px; height: 24px; }
.btn[data-action="density"][aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-primary-text); }

/* Filters: a drawer on the right, panes stacked, the list visible beside it — UX_FLOW #29 */
@media (min-width: 768px) {
  .flt-backdrop { justify-content: flex-end; align-items: stretch; padding: 0; background: rgba(15, 23, 42, .18); backdrop-filter: none; }
  .flt-panel.flt-modal { width: min(600px, 100%); height: 100dvh; border-radius: 0; border-width: 0 0 0 1px; animation: ui-drawer var(--motion-base) var(--motion-ease); }
  .flt-modal-body { display: block; overflow: auto; overscroll-behavior: contain; }
  .flt-pane { display: block; }
  .flt-pane + .flt-pane { border-left: 0; border-top: 1px solid var(--color-border); }
  .flt-pane-scroll { overflow: visible; }
  .flt-modal .flt-row, .flt-modal .flt-group .flt-row { grid-template-columns: 60px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr) 30px; }
  .flt-modal .flt-group-wrap { grid-template-columns: 60px minmax(0, 1fr); }
}
@keyframes ui-drawer { from { transform: translateX(24px); opacity: 0; } }
.flt-done-count { margin-left: var(--space-xs); font-weight: 400; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .flt-panel.flt-modal { animation: none; } }

/* ==========================================================================
   Deals board (js/deals-board.js) — columns by stage; stage colour on a thin swatch + the column top edge only,
   cards stay neutral so the text is always readable. Horizontal scroll with snap on narrow screens.
   ========================================================================== */
.seg { display: inline-flex; align-self: flex-start; margin-top: var(--space-md); padding: 2px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-muted); }
.seg-btn { display: inline-flex; align-items: center; gap: var(--space-xs); height: 32px; padding: 0 var(--space-sm-plus); border: 0; border-radius: 6px; background: transparent;
  color: var(--color-muted-foreground); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease); }
.seg-btn[aria-pressed="true"] { background: var(--color-card); color: var(--color-foreground); box-shadow: var(--shadow-sm); }
#listView .page-head:has(.seg) { flex-wrap: wrap; }

.kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--space-sm-plus); align-items: start;
  padding: var(--space-md); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.kb-col { --kb: var(--stage-1); display: flex; flex-direction: column; min-width: 0; max-height: calc(100dvh - 220px); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card); background: var(--color-muted); scroll-snap-align: start; transition: background-color var(--motion-fast) var(--motion-ease); }
.kb-col.is-side { grid-column: span 1; }
.kb-col.is-collapsed { max-height: none; }
.kb-s1 { --kb: var(--stage-1); } .kb-s2 { --kb: var(--stage-2); } .kb-s3 { --kb: var(--stage-3); } .kb-s4 { --kb: var(--stage-4); } .kb-s5 { --kb: var(--stage-5); }
.kb-connected { --kb: var(--stage-connected); } .kb-hold { --kb: var(--stage-hold); } .kb-lost { --kb: var(--stage-lost); }
.kb-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px var(--space-sm); padding: var(--space-sm-plus) var(--space-sm-plus) var(--space-sm); }
.kb-head h3 { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; margin: 0; font: 600 var(--text-sm)/1.3 var(--font-heading); }
.kb-swatch, .kb-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--kb); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); }
.kb-count { min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-foreground);
  font: 700 var(--text-xs)/22px var(--font-body); text-align: center; }
.kb-total { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--space-sm); margin: 0; color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.kb-exp { font-weight: 400; }
.kb-toggle { height: 24px; padding: 0 var(--space-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-card);
  color: var(--color-primary-text); font: 600 var(--text-xs)/1 var(--font-body); cursor: pointer; }
.kb-cards { flex: 1; min-height: 64px; margin: 0; padding: 0 var(--space-sm) var(--space-sm); list-style: none; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-sm); }
.kb-card { display: flex; flex-direction: column; gap: 6px; padding: var(--space-sm-plus); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control);
  background: var(--color-card); cursor: pointer; transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.kb-card:hover { border-color: var(--color-primary); }
.kb-card.is-movable { cursor: grab; }
.kb-card.is-dragging { opacity: .5; box-shadow: var(--shadow-md); cursor: grabbing; }
.kb-card:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: 1px; }
.kb-card-top { display: flex; align-items: flex-start; gap: var(--space-xs); }
.kb-title { flex: 1; min-width: 0; color: var(--color-foreground); font-size: var(--text-sm); font-weight: 600; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.kb-card:hover .kb-title { color: var(--color-primary-text); }
.kb-menu-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -4px -4px 0 0; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--color-muted-foreground); cursor: pointer; }
.kb-menu-btn:hover, .kb-menu-btn:focus-visible { background: var(--color-muted); color: var(--color-foreground); }
.kb-sub { margin: 0; color: var(--color-muted-foreground); font-size: var(--text-xs); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kb-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-xs); }
.kb-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-val.is-exp { color: var(--color-muted-foreground); font-weight: 600; }
.kb-age { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: var(--color-muted-foreground); }
.kb-age.is-amber { color: var(--due-today-text); font-weight: 600; }
.kb-age.is-red { color: var(--due-overdue-text); font-weight: 600; }
.kb-flags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.kb-empty { padding: var(--space-md) var(--space-sm); color: var(--color-muted-foreground); font-size: var(--text-xs); text-align: center; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-control); }
.kb-more { width: 100%; height: 32px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-control); background: transparent;
  color: var(--color-primary-text); font: 600 var(--text-xs)/1 var(--font-body); cursor: pointer; }
.kb.is-dragging .kb-col { background: var(--color-background); }
.kb-col.is-over { background: var(--color-primary-soft); border-color: var(--color-primary); }
.kb-help { display: flex; align-items: center; gap: var(--space-xs); margin: 0; padding: 0 var(--space-md) var(--space-md); color: var(--color-muted-foreground); font-size: var(--text-xs); }
.kb-move-menu .ui-menu-item { gap: var(--space-sm); }
.kb-move-menu { max-height: min(420px, calc(100vh - 16px)); overflow-y: auto; }
@media (max-width: 767px) { .kb { grid-auto-columns: 82vw; scroll-snap-type: x mandatory; } .kb-col { max-height: none; } }
@media (pointer: coarse) { .kb-menu-btn { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .kb-card, .kb-col { transition: none; } }

/* timeline: one header per person, closed until opened (Today, admins) */
.gt-group-toggle { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.gt-group-toggle .icon { color: var(--color-muted-foreground); transition: transform var(--motion-fast) var(--motion-ease); }
.gt-group.is-open .gt-group-toggle .icon:first-child { transform: rotate(90deg); }
.gt-late { color: var(--due-overdue-text); font-size: var(--text-xs); font-weight: 600; }
.gt-filter { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted-foreground); }
.gt-filter .input { height: 32px; min-width: 180px; }
@media (prefers-reduced-motion: reduce) { .td-chev, .gt-group-toggle .icon { transition: none; } }

/* ==========================================================================
   Record pages (plan §5.2): header with status + owner + actions, next step, activity, drawer form
   ========================================================================== */
.rh-kicker { margin: 0 0 2px; color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; }
.rh-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }
.rh-owner { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-foreground); font-size: var(--text-sm); font-weight: 600; }
.rh-owner.is-none { color: var(--color-muted-foreground); font-weight: 400; }
.rh-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

.next-step { display: flex; align-items: center; gap: var(--space-sm-plus); margin-bottom: var(--space-md); padding: var(--space-sm-plus) var(--space-sm) var(--space-sm-plus) var(--space-md);
  border: 1px solid var(--color-primary-soft-border); border-radius: var(--radius-card); background: var(--color-primary-soft); }
.next-step p { flex: 1; margin: 0; color: var(--color-foreground); font-size: var(--text-sm); font-weight: 600; }
.next-step-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-card); color: var(--color-primary-text); }
.next-step-x { flex: none; }
@media (max-width: 767px) { .next-step { flex-wrap: wrap; } .next-step p { flex-basis: calc(100% - 80px); } }

.act { padding: var(--space-md); }
.act-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.act-head h2 { margin: 0; font: 600 var(--text-md)/1.3 var(--font-heading); }
.act-head h2:focus { outline: none; }
.act-actions { display: flex; gap: var(--space-xs); }
.act-open { margin-bottom: var(--space-sm-plus); padding: var(--space-sm) var(--space-sm-plus); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-background); }
.act-open h3 { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-xs); font: 600 var(--text-sm)/1.3 var(--font-heading); }
.act-open ul { margin: 0; padding: 0; list-style: none; }
.act-open li { display: flex; flex-direction: column; padding: var(--space-xs) 0; }
.act-open li + li { border-top: 1px solid var(--color-border); }
.act-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.act-list { margin: 0; padding: 0; list-style: none; }
.act-item { display: flex; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--color-border); }
.act-item:first-child { border-top: 0; }
.act-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-muted); color: var(--color-muted-foreground); }
.act-notes .act-icon { background: var(--status-progress-soft); color: var(--status-progress-text); }
.act-tasks .act-icon { background: var(--status-success-soft); color: var(--status-success-text); }
.act-main { min-width: 0; flex: 1; }
.act-text { margin: 0; font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; }
.act-quote { color: var(--color-foreground); }
.act-sub { margin: 2px 0 0; color: var(--color-muted-foreground); font-size: var(--text-xs); }
.act-empty { margin: 0; padding: var(--space-sm) 0; color: var(--color-muted-foreground); font-size: var(--text-sm); }

.ui-chip { display: inline-flex; align-items: center; gap: var(--space-xs); height: 28px; padding: 0 var(--space-sm-plus); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-card); color: var(--color-foreground); font: 600 var(--text-xs)/1 var(--font-body); cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease); }
.ui-chip:hover { background: var(--color-muted); }
.ui-chip[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-text); }
.ui-chip:disabled { opacity: .5; cursor: default; }
@media (pointer: coarse) { .ui-chip { height: 36px; } }
.m-filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm-plus); }

/* drawer (task form) */
.ui-drawer { position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw); max-width: 100vw; height: 100dvh; max-height: none; margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--color-border-strong); background: var(--color-card); color: var(--color-foreground); box-shadow: var(--shadow-xl); }
.ui-drawer::backdrop { background: var(--color-overlay); }
.ui-drawer[open] { animation: ui-drawer var(--motion-base) var(--motion-ease); }
.ui-drawer-inner { display: flex; flex-direction: column; height: 100%; }
.ui-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) var(--space-md); border-bottom: 1px solid var(--color-border); }
.ui-drawer-kicker { margin: 0 0 2px; color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: 600; }
.ui-drawer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); }
.ui-drawer-foot { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); background: var(--color-background); }
.ui-drawer-note { display: flex; align-items: center; gap: var(--space-xs); margin: 0; color: var(--color-muted-foreground); font-size: var(--text-xs); }
.ui-spacer { flex: 1; }
.ui-field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; flex: 1; }
.ui-field label { font-size: var(--text-sm); font-weight: 600; }
.ui-field .req { color: var(--status-lost-text); }
.ui-field textarea.input { height: auto; padding: var(--space-sm) var(--space-sm-plus); resize: vertical; }
.ui-field .input[aria-invalid="true"] { border-color: var(--status-lost-fill); }
.ui-field-err { margin: 0; color: var(--status-lost-text); font-size: var(--text-xs); font-weight: 600; }
.ui-field-row { display: flex; gap: var(--space-md); }
.ui-presets { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
@media (max-width: 767px) { .ui-drawer-foot { flex-wrap: wrap; } .ui-field-row { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .ui-drawer[open] { animation: none; } }
@media (min-width: 1101px) { .record-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.act .link-btn { display: inline; text-align: left; font-weight: 600; text-decoration: none; color: var(--color-primary-text); }
.act .link-btn:hover { text-decoration: underline; }
.ui-drawer-body > .ui-field { flex: none; }
.ui-field-row > .ui-field { flex: 1; }
.ui-drawer .input { padding-left: var(--space-sm-plus); text-align: left; }
.ui-drawer select.input { padding-right: 32px; }

/* ------------------------------------------------------------ Deal record (plan §4.13): stepper, Move, Lost, amounts */
.ds { padding: var(--space-md) var(--space-lg); }
.ds-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); }
.ds-step { position: relative; display: grid; grid-template-rows: auto auto auto; justify-items: center; text-align: center; gap: 4px; min-width: 0; }
/* the line between dots: drawn from each step's dot to the previous one */
.ds-step + .ds-step::before {
  content: ""; position: absolute; top: 13px; right: calc(50% + 16px); width: calc(100% - 32px + var(--space-xs)); height: 2px;
  background: var(--color-border); border-radius: 1px;
}
.ds-step.is-done + .ds-step::before, .ds-step.is-done + .ds-step.is-current::before { background: var(--color-primary); }
.ds-dot {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700;
  border: 2px solid var(--color-border); background: var(--color-card); color: var(--color-muted-foreground); font-variant-numeric: tabular-nums;
}
.ds-step.is-done .ds-dot { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-foreground, #fff); }
.ds-step.is-current .ds-dot { border-color: var(--color-primary); color: var(--color-primary-text); background: var(--color-primary-soft); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.ds-step.is-current:last-child .ds-dot { background: var(--stage-connected); border-color: var(--stage-connected); color: var(--stage-connected-fg); box-shadow: none; }
.ds-step.is-paused .ds-dot { border-color: var(--status-hold-fill); background: var(--status-hold-soft); color: var(--status-hold-text); }
.ds-step.is-stopped .ds-dot { border-color: var(--status-lost-fill); background: var(--status-lost-soft); color: var(--status-lost-text); }
.ds-name { font-size: var(--text-xs); font-weight: 600; color: var(--color-foreground); line-height: 1.3; overflow-wrap: anywhere; }
.ds-step.is-todo .ds-name { color: var(--color-muted-foreground); font-weight: 500; }
.ds-date { font-size: var(--text-xs); color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.ds-off { display: flex; align-items: flex-start; gap: var(--space-xs); margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md, 8px); font-size: var(--text-sm); }
.ds-off .icon { flex: none; margin-top: 3px; }
.ds-off.is-hold { background: var(--status-hold-soft); color: var(--status-hold-text); border: 1px solid var(--status-hold-border); }
.ds-off.is-lost { background: var(--status-lost-soft); color: var(--status-lost-text); border: 1px solid var(--status-lost-border); }
@media (max-width: 640px) {
  /* a vertical list on phones: six columns of names don't fit */
  .ds-steps { grid-template-columns: 1fr; gap: 0; }
  .ds-step { grid-template-columns: 28px 1fr auto; grid-template-rows: none; justify-items: start; text-align: left; align-items: center; column-gap: var(--space-sm); padding: 6px 0; }
  .ds-step + .ds-step::before { top: auto; bottom: calc(50% + 14px); right: auto; left: 13px; width: 2px; height: calc(100% - 28px); }
  .ds-date { justify-self: end; min-height: 0; }
}

.split-btn { display: inline-flex; }
.split-btn > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgb(255 255 255 / .35); padding-inline: 8px; min-width: 36px; }

.lost-dialog .lost-reasons { border: 0; margin: var(--space-md) 0 0; padding: 0; min-width: 0; }
.lost-dialog legend { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-sm); padding: 0; }
.lost-dialog .lost-req { display: block; font-weight: 400; color: var(--color-muted-foreground); font-size: var(--text-xs); margin-top: 2px; }
.lost-dialog .check-chips { max-height: 40vh; overflow: auto; padding: 2px; }
.lost-dialog .ui-field-err:not(:empty) { margin-top: var(--space-sm); }

.money-edit { display: grid; gap: var(--space-md); }
.money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); }
.money-grid .input { width: 100%; font-variant-numeric: tabular-nums; }
.money-grid .hint { margin: 0; font-size: var(--text-xs); color: var(--color-muted-foreground); }
.money-foot { display: flex; gap: var(--space-sm); }

/* ------------------------------------------------------------ Merchant profile completeness (plan §4.9) */
.completeness { padding: var(--space-md) var(--space-lg); display: grid; gap: var(--space-sm); }
.cmp-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.cmp-top h2 { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.cmp-count { font-size: var(--text-sm); color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }
.cmp-count strong { color: var(--color-foreground); }
.cmp-bar { height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.cmp-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--color-primary); }
.completeness.is-done .cmp-bar > span { background: var(--status-success-fill, var(--stage-connected)); }
.cmp-text { margin: 0; font-size: var(--text-sm); color: var(--color-muted-foreground); display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; }
.cmp-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
/* "Required" next to a label, in the place "Optional" takes on optional ones */
.optional.is-req { color: var(--color-foreground); font-weight: 600; }

/* ------------------------------------------------------------ Tasks page (plan §4.4) */
.tasks-counts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-xs); }
.tasks-total { color: var(--color-muted-foreground); margin-right: var(--space-xs); }
.tasks-chip { font-variant-numeric: tabular-nums; font-weight: 600; }
.tasks-chip.tone-lost { color: var(--status-lost-text); border-color: var(--status-lost-border); background: var(--status-lost-soft); }
.tasks-chip.tone-hold { color: var(--status-hold-text); border-color: var(--status-hold-border); background: var(--status-hold-soft); }
.tasks-chip.tone-progress { color: var(--status-progress-text); border-color: var(--status-progress-border); background: var(--status-progress-soft); }
.tasks-chip.tone-new { color: var(--status-new-text); border-color: var(--status-new-border); background: var(--status-new-soft); }
.tasks-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px currentColor inset; }
.tasks-hidden-note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-muted-foreground); }
#tasksView .task-desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#tasksView .task[data-task] { cursor: pointer; }
#tasksView .task[data-task] :is(.task-thread, .task-sendback, textarea, input) { cursor: auto; }
#tasksView .task-expand .icon { transition: transform var(--motion-fast, 120ms) ease; }
#tasksView .task.is-expanded .task-expand .icon { transform: rotate(180deg); }
#tasksView .task.is-pending { opacity: .6; }
.task-pending { font-size: var(--text-xs); color: var(--color-muted-foreground); font-style: italic; white-space: nowrap; }
.task-form-drawer .task-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.task-form-drawer .task-form-grid > .span2, .task-form-drawer .task-form-grid > .form-field:has(#tf-rel), .task-form-drawer .task-form-grid > .form-field:has(#tf-assignee) { grid-column: 1 / -1; }
.task-form-drawer .task-form-grid .input { width: 100%; }
@media (max-width: 480px) { .task-form-drawer .task-form-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Forms (plan §4.14–4.17) */
/* The footer with Save stays at the bottom of the window while you scroll the sections (UX_FLOW #8) */
.q-actions.q-sticky, :is(#formView, #publicRoot) .q-actions.q-sticky {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: row; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  margin: var(--space-lg) 0 0; padding: var(--space-sm) var(--edge, var(--space-md));
  background: var(--color-card); border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 16px -12px rgb(15 23 42 / .3);
}
.q-actions.q-sticky .q-actions-space { flex: 1; }
@media (max-width: 640px) {
  :is(#formView, #publicRoot) .q-actions.q-sticky { flex-direction: row; padding: var(--space-sm) var(--edge, var(--space-sm)); }
  :is(#formView, #publicRoot) .q-actions.q-sticky { flex-wrap: nowrap; }
  :is(#formView, #publicRoot) .q-actions.q-sticky .btn { width: auto; flex: 0 0 auto; padding-inline: var(--space-sm); }
  .q-actions.q-sticky .q-actions-space { display: none; }
  :is(#formView, #publicRoot) .q-actions.q-sticky .btn-primary { flex: 1 1 auto; }
}
.q-group-h { margin: var(--space-lg) 0 var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted-foreground); }
.q-group-h:first-child { margin-top: 0; }
.q-header .form-saved { display: inline-flex; align-items: center; gap: var(--space-xs); margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-muted-foreground); }
.q-header .form-restored { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-sm) 0 0; font-size: var(--text-sm); }

.opp-notq { margin-top: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); padding: var(--space-sm) var(--space-md); }
.opp-notq summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: baseline; }
.opp-notq ul { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-xs); max-height: 260px; overflow: auto; }
.opp-notq li { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.opp-notq li > span:first-child { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ Reports & Financials (plan §4.18–4.19) */
/* Reports: each group's figures drawn, this period against the one before */
.ts-chart { margin: 0 0 var(--space-md); }
.ch-pair { margin: 0; }
.ch-pair .ch-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: 0 0 var(--space-sm); font-size: var(--text-xs); color: var(--color-muted-foreground); }
.ch-key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
.ch-key.now { background: var(--color-chart-1); }
.ch-key.prev { background: transparent; border: 2px solid var(--color-muted-foreground); }
.ch-pairtrack { height: 18px; background: transparent; }
.ch-pairtrack .ch-hbar { height: 10px; top: 0; bottom: auto; }
/* the previous period: an outline under the bar, so it reads without relying on colour */
.ch-pairtrack .ch-prev { top: 12px; height: 6px; background: transparent; border: 1.5px solid var(--color-muted-foreground); border-left: 0; }
.ch-pairrow { cursor: default; }
.ch-pairrow:focus-visible { outline: 2px solid var(--color-focus, var(--color-primary)); outline-offset: 2px; border-radius: 4px; }

/* Financials: totals are buttons that put that value in the chart */
#dashboardView .fp-kpis > .fp-kpi { display: grid; gap: 4px; text-align: left; font: inherit; color: inherit; background: none; cursor: pointer;
  border: 0; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-radius: 0; }
#dashboardView .fp-kpis > .fp-kpi:hover { background: var(--color-muted); }
#dashboardView .fp-kpis > .fp-kpi:focus-visible { outline: 2px solid var(--color-focus, var(--color-primary)); outline-offset: -2px; }
.fp-kpi-l { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted-foreground); text-transform: uppercase; letter-spacing: 0.03em; }
.fp-kpi-v { font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* filter chips: each value removable on its own, "Clear" for the whole dimension */
.fp-chip { flex-wrap: wrap; height: auto; padding-block: 3px; }
.fp-chip-val { display: inline-flex; align-items: center; gap: 2px; padding-left: 8px; border-radius: 999px; background: var(--color-muted); }
.fp-chip .link-btn { width: auto; height: auto; border-radius: 4px; padding: 0 6px; }
tr:focus-within .fp-focus { opacity: 1; }

/* ------------------------------------------------------------ Expos, Agents, Sign-in (plan §4.1, 4.20, 4.21) */
.num-link { color: var(--color-primary-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.num-link:hover { text-decoration-thickness: 2px; }
.expo-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); }
.expo-card { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); background: var(--color-card); }
.expo-when { margin: 0; }
.expo-card-name { margin: 0; font-size: var(--text-base, 1rem); font-weight: 600; overflow-wrap: anywhere; }
.expo-card-meta { margin: 0; display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted-foreground); }
.expo-card .expo-site { font-size: var(--text-sm); }
.expo-card-acts { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.agent-acts { white-space: nowrap; }
.agent-switch { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted-foreground); cursor: pointer; }
.agent-switch input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.agent-showinactive { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); align-self: end; padding-bottom: 8px; }
.auth-caps { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: var(--text-xs); font-weight: 600; color: var(--status-hold-text); }
.pw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--text-sm); color: var(--color-muted-foreground); }
.pw-checks li { display: flex; align-items: center; gap: var(--space-xs); }
.pw-mark { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-grid; place-items: center; flex: none; }
.pw-checks li.is-ok { color: var(--status-success-text, var(--color-foreground)); }
.pw-checks li.is-ok .pw-mark { background: var(--status-success-fill, var(--stage-connected)); border-color: transparent; }
.pw-checks li.is-ok .pw-mark::after { content: ""; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* ------------------------------------------------------------ Page widths (the UI was edge to edge on wide screens)
   Every page used the whole window: on a 1920px screen a record's name and its figures sat 1,600px apart and Today's
   cards stretched to 400px each. Each kind of page now has a width that suits what it shows, centred in the window;
   the top bar's contents line up with the same left and right edges as the page below it. */
:root { --page-max: 1280px; }                                   /* reading pages: Today, records, Tasks, Reports, Expos, Agents */
:root[data-view="list"] { --page-max: 1600px; }                  /* lists and the Deals board: data grids need room */
:root[data-view="financials"] { --page-max: 1440px; }            /* the pivot table */
/* forms: the page column is the usual 1280px (so the top bar keeps its room and the title sits under the breadcrumb),
   and the form itself stops at 1040px, so fields stay a readable length */
#formView .form-root { max-width: 1040px; }
.content, :root .content { max-width: var(--page-max); margin-inline: auto; }
/* the top bar spans the window (it's chrome), but its contents start and end where the page does */
@media (min-width: 768px) {   /* phones keep their safe-area padding */
  .appbar { padding-inline: max(var(--edge), calc((100% - var(--page-max)) / 2 + var(--edge))); }
}
/* One left edge per page: content starts where the title does (--edge from the page's side), as Reports' cards and
   Tasks' groups already did. Expos, Financials and the Agents table started at the page's side or 21px in. */
#dashboardView #expoRoot, #dashboardView #finRoot { padding: var(--space-lg) var(--edge) var(--space-xl); }
#agentsView .agents-panel, #agentsView .agents-note { margin-inline: var(--edge); }
@media (max-width: 767px) { #dashboardView #expoRoot, #dashboardView #finRoot { padding-top: var(--space-md); } }
/* the note under the agents table inherited .m-sub's nowrap: one line ~1,100px past the page edge, mostly clipped */
#agentsView .agents-note { white-space: normal; }

/* ------------------------------------------------------------ Matches & prechecks: the card view (matches.js)
   One card per provider, grouped by what to do next. Card: name · match score · status, actions on the right;
   under it the fit (volume, GEOs, vertical, licence) as labelled chips, and when it was sent; Details opens the rest. */
.m-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.m-toolbar .m-filter { margin: 0; }
.m-view { flex: none; }
.mc-needs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md, 8px); background: var(--color-muted); font-size: var(--text-sm); }
.mc-need { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mc-need .chip { margin: 0; }
.mc-need-l { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted-foreground); }
.mc-groups { display: grid; gap: var(--space-lg); }
.mc-group-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-sm); margin-bottom: var(--space-sm); }
.mc-group-h h3 { display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-foreground); }
.mc-group-h h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--status-inactive-fill); }
.mc-group.is-awaiting .mc-group-h h3::before { background: var(--status-hold-fill); }
.mc-group.is-sent .mc-group-h h3::before { background: var(--status-progress-fill); }
.mc-group.is-accepted .mc-group-h h3::before { background: var(--status-success-fill); }
.mc-group.is-rejected .mc-group-h h3::before { background: var(--status-lost-fill); }
.mc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); background: var(--color-card); overflow: hidden; }
.mc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm) var(--space-lg); padding: var(--space-sm-plus, 12px) var(--space-md); }
.mc + .mc { border-top: 1px solid var(--color-border); }
.mc.is-pending { opacity: .6; }
.mc-main { min-width: 0; display: grid; gap: 6px; }
.mc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-sm); margin: 0; }
.mc-name { font-size: var(--text-base, 14px); font-weight: 600; color: var(--color-foreground); text-decoration: none; overflow-wrap: anywhere; }
.mc-name:hover { color: var(--color-primary-text); text-decoration: underline; }
.mc-score { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--color-border);
  font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-muted-foreground); cursor: help; }
.mc-score.is-low { color: var(--status-hold-text); border-color: var(--status-hold-border); }
.mc-score.is-hand { cursor: default; }
.mc-title .pill { margin: 0; }
.mc-fits { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-fit { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--color-muted);
  font-size: var(--text-xs); color: var(--color-foreground); white-space: nowrap; }
.mc-fit-l { color: var(--color-muted-foreground); font-weight: 600; }
.mc-fit .icon { flex: none; }
.mc-fit.is-ok .icon { color: var(--status-success-text); }
.mc-fit.is-warn .icon { color: var(--status-hold-text); }
.mc-fit.is-bad { background: var(--status-lost-soft); }
.mc-fit.is-bad .icon { color: var(--status-lost-text); }
.mc-fit.is-none .icon { color: var(--color-muted-foreground); }
.mc-when { margin: 0; font-size: var(--text-xs); color: var(--color-muted-foreground); }
.mc-when .m-sub { display: inline; }
.mc-reason { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--text-xs); color: var(--color-foreground); }
.mc-reason .icon { margin-top: 2px; color: var(--color-muted-foreground); }
.mc-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-xs); }
.mc-acts .m-pa { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; }
.mc-acts .m-reject { min-width: 260px; }
.mc-more-btn .icon { transition: transform var(--motion-fast, 120ms) ease; }
.mc.is-open .mc-more-btn .icon { transform: rotate(180deg); }
.mc-detail { grid-column: 1 / -1; padding-top: var(--space-sm); border-top: 1px dashed var(--color-border); }
.mc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-sm) var(--space-lg); margin: 0; }
.mc-facts dt { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted-foreground); }
.mc-facts dd { margin: 2px 0 0; font-size: var(--text-sm); }
.mc-facts .m-sub { display: block; }
.mc-basis { font-size: var(--text-xs); color: var(--color-muted-foreground); white-space: pre-line; }
@media (max-width: 640px) {
  .mc { grid-template-columns: 1fr; }
  .mc-acts { justify-content: flex-start; }
  .mc-acts .m-reject { min-width: 0; width: 100%; }
}
.m-view.seg { margin-top: 0; align-self: center; }
/* keep each card's actions near its name: on a wide list row the cards stop at about 1000px */
.mc-groups, .mc-needs, .m-toolbar { max-width: 1040px; }
/* phones: the matches card must not grow to its widest line (grid items default to min-width:auto), and the
   hints inherit .m-sub's nowrap; both pushed the record page past the screen edge */
.rel-grid > .rel-block, .rel-block.wide { min-width: 0; }
.m-filter, .mc-needs, .mc-group, .mc-list, .mc { min-width: 0; }
.mc-group-h .m-sub, .mc .m-sub, .m-add-bar .m-sub { white-space: normal; }

/* Record pages: grouped lists, the group as the heading (Banking → Named accounts; EU / EEA → Malta, Spain) */
.rel-groups { display: grid; gap: var(--space-md); }
.rel-group-h { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-xs); font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted-foreground); }
.rel-group-n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-muted-foreground); padding: 0 6px; border-radius: 999px; background: var(--color-muted); letter-spacing: 0; }
.rel-group .rel-list { margin: 0; }

/* ------------------------------------------------------------ Commercial and Legal on merchants and providers (legal.js) */
.legal-section .sec-body > div { display: grid; gap: var(--space-md); padding-bottom: var(--space-md); }
.legal-meta { margin: 0; font-size: var(--text-xs); color: var(--color-muted-foreground); }
.legal-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.legal-empty .rel-none { margin: 0; }
/* Commercial: the text as written (line breaks kept), at a readable measure */
.commercial-text { max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; color: var(--color-foreground); }
.commercial-edit { display: grid; gap: var(--space-md); max-width: 80ch; }
.commercial-input { width: 100%; min-height: 9rem; line-height: 1.5; font: inherit; }
.commercial-count { margin-left: var(--space-xs); font-variant-numeric: tabular-nums; }
.commercial-count.is-near { color: var(--status-lost-text); font-weight: 600; }
.commercial-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
/* Legal: the drop area, then the files */
.legal-drop { display: grid; justify-items: center; gap: var(--space-xs); padding: var(--space-lg) var(--space-md); text-align: center;
  border: 1.5px dashed var(--color-border); border-radius: var(--radius-md, 8px); color: var(--color-muted-foreground);
  transition: border-color var(--dur-fast, 150ms) ease, background-color var(--dur-fast, 150ms) ease; }
.legal-drop p { margin: 0; }
.legal-drop strong { color: var(--color-foreground); font-weight: 600; }
.legal-drop.is-over { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.legal-drop-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); }
.legal-files { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); }
.legal-file { display: flex; align-items: center; gap: var(--space-sm-plus, 12px); min-height: 56px; padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); }
.legal-file + .legal-file { border-top: 1px solid var(--color-border); }
.legal-file-icon { flex-shrink: 0; display: inline-grid; color: var(--color-muted-foreground); }
.legal-file-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.legal-file-name, .legal-file-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: 600; }
.legal-file-name { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--link, var(--color-primary)); cursor: pointer; }
.legal-file-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-file-actions { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-xs); }
.legal-file-actions .btn-icon { width: 36px; height: 36px; }
.legal-delete:hover { color: var(--status-lost-text); }
.legal-progress { display: block; height: 4px; border-radius: 2px; background: var(--color-border); overflow: hidden; }
.legal-progress > span { display: block; height: 100%; border-radius: 2px; background: var(--color-primary); transition: width 120ms linear; }
.legal-file.is-failed .legal-file-icon, .legal-error { color: var(--status-lost-text); }
@media (prefers-reduced-motion: reduce) { .legal-drop, .legal-progress > span { transition: none; } }
@media (max-width: 767px) { .legal-file { padding-left: var(--space-sm); } .legal-file-icon { display: none; } }

/* ------------------------------------------------------------ Form links (ui/form-link.js) */
.share-link .btn .icon { margin-right: var(--space-xs); }
.form-link-dialog { width: min(640px, calc(100vw - 32px)); }
.form-link-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.form-link-head .ui-dialog-title { margin: 2px 0 0; overflow-wrap: anywhere; }
.form-link-list { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.share-link-card { margin: 0; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); display: grid; gap: var(--space-sm); justify-items: start; }
.share-link-card .share-link-box { justify-self: stretch; margin-top: 0; max-width: none; }
.share-link-title { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.share-link-what { margin: 0; font-size: var(--text-sm); color: var(--color-muted-foreground); line-height: 1.5; max-width: 62ch; }
@media (max-width: 767px) { .share-link-row { flex-wrap: wrap; } .share-link-row .btn { flex: 1; } }
/* QR codes for form links: a thumbnail beside the link, a big one in a pop-up (always black on white, to scan) */
.share-link-box:not([hidden]) { display: flex; gap: var(--space-md); align-items: flex-start; }
.share-link-main { flex: 1; min-width: 0; }
.qr-thumb { flex-shrink: 0; width: 88px; height: 88px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px);
  background: #fff; cursor: zoom-in; overflow: hidden; transition: box-shadow var(--dur-fast, 150ms) ease, transform var(--dur-fast, 150ms) ease; }
.qr-thumb:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.qr-thumb:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.qr-thumb svg, .qr-big svg { display: block; width: 100%; height: 100%; }
.qr-dialog { width: min(480px, calc(100vw - 32px)); }
.qr-big { width: min(360px, 100%); aspect-ratio: 1; margin: 0 auto; background: #fff; border-radius: var(--radius-md, 8px); overflow: hidden; }
.qr-help { margin: 0; text-align: center; font-size: var(--text-sm); color: var(--color-muted-foreground); }
@media (max-width: 480px) { .share-link-box:not([hidden]) { flex-direction: column; } .qr-thumb { width: 120px; height: 120px; } }
@media (prefers-reduced-motion: reduce) { .qr-thumb { transition: none; } }

/* ------------------------------------------------------------ Several agents on a merchant or provider (q-shared.js, migration 045) */
.q-agents { display: grid; gap: var(--space-sm); }
.q-agent-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); align-items: end; }
.q-agent-row.multi { grid-template-columns: minmax(0, 1fr) 128px 40px; }
.q-agent-row .q-field { margin: 0; }
.q-agent-remove { width: 40px; height: 40px; }
.q-agent-add { justify-self: start; }
.q-agent-add .icon { margin-right: var(--space-xs); }
.q-pct { position: relative; display: flex; align-items: center; }
.q-pct .input { width: 100%; padding-right: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.q-pct > span { position: absolute; right: 10px; color: var(--color-muted-foreground); pointer-events: none; }
.q-agent-total { max-width: 360px; margin-top: var(--space-xs); }
.q-agent-total .q-pct { max-width: 160px; }
.q-agent-sum { display: flex; align-items: flex-start; gap: var(--space-xs); color: var(--status-success-text, var(--color-muted-foreground)); }
.q-agent-sum > .icon { flex-shrink: 0; margin-top: 3px; }
.q-agent-sum.is-off { color: var(--status-lost-text); font-weight: 600; }
@media (max-width: 480px) { .q-agent-row.multi { grid-template-columns: minmax(0, 1fr) 96px 40px; } }

/* Today · "How many matches become live deals?": the three figures over the funnel, and each step's second line */
.td-fun-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: 0 0 var(--space-md); }
.td-fun-stats > div { padding: var(--space-sm) var(--space-sm-plus); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); min-width: 0; }
.td-fun-stats dt { font-size: var(--text-xs); line-height: 1.3; color: var(--color-muted-foreground); overflow-wrap: anywhere; }
.td-fun-stats dd { margin: 2px 0 0; font: 600 var(--text-lg, 1.125rem)/1.2 var(--font-heading, inherit); font-variant-numeric: tabular-nums; }
.ch-fsub { grid-column: 1 / -1; color: var(--color-muted-foreground); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .td-fun-stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   Reference style, phase 1 (UX_REFERENCE_PLAN.md): the look of Hugo / CX Hub / Plan / Salesage on every screen,
   nothing moved. Flat cards on hairlines, white secondary buttons, one teal accent, Inter at 600 at most,
   grey table headers, soft focus halo. The colours themselves are in design-tokens.css.
   ========================================================================== */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* headings and figures: semibold, never bold */
h1, h2, h3, h4, .page-title, .record-title, .brand-name, .kb-val, .ts-val, .ibx-new, .glance h2,
.flt-pane-head h3, .task-group-h, .q-branch-h, tr[data-mark] > td, .bd-table tfoot th, .bd-table tfoot td { font-weight: 600; }
.page-title, .record-title { letter-spacing: var(--tracking-heading); }

/* cards and panels: a hairline, no shadow */
.panel, .ui-card, .td-chart, .kb-col, .completeness, .next-step { box-shadow: none; }
.panel { border-color: var(--color-border); }

/* buttons: teal primary with a whisper of shadow; white secondary with a grey edge */
.btn { border-radius: var(--radius-control); font-weight: 600; letter-spacing: 0; }
.btn:active:not(:disabled) { transform: none; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); box-shadow: var(--shadow-xs); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--color-primary-press); }
.btn-ghost { background: var(--color-card); border-color: var(--color-border-strong); color: var(--color-neutral-text); box-shadow: var(--shadow-xs); }
.btn-ghost:hover:not(:disabled) { background: var(--color-muted); color: var(--color-foreground); }
.btn-quiet:hover:not(:disabled) { background: var(--color-muted); }
html.dark .btn-ghost { background: transparent; }

/* inputs: grey edge, teal edge and halo on focus (the halo is the focus indicator, with the border change) */
.input { box-shadow: var(--shadow-xs); }
.input:hover { border-color: var(--color-muted-foreground); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--state-focus-ring); }
select.input:focus, textarea.input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--state-focus-ring); }

/* tables: grey header band, roomier rows, no vertical lines in the body, soft status pills (not solid cells) */
.data-table thead th { height: 44px; background: var(--color-muted); color: var(--color-muted-foreground); font-weight: 500; letter-spacing: 0; border-right-color: var(--color-border); }
.data-table tbody td { height: 52px; border-right: 0; border-bottom-color: var(--color-border); }
.density-compact .data-table tbody td { height: 40px; }
.data-table tbody tr:hover > td, .data-table tbody tr[data-index]:focus-visible > td { background: var(--color-muted); }
.data-table tbody td:has(> .pill:only-child) { padding: 0 12px; }
.data-table tbody td > .pill:only-child { display: inline-flex; width: auto; height: 22px; min-height: 0; padding: 0 10px; border-radius: var(--radius-pill); }
.data-table tbody td > .pill.success:only-child { background: var(--status-success-soft); color: var(--status-success-text); }
.data-table tbody td > .pill.warning:only-child { background: var(--status-hold-soft); color: var(--status-hold-text); }
.data-table tbody td > .pill.danger:only-child  { background: var(--status-lost-soft); color: var(--status-lost-text); }
.data-table tbody td > .pill.info:only-child    { background: var(--status-progress-soft); color: var(--status-progress-text); }
.data-table tbody td > .pill.neutral:only-child { background: var(--status-inactive-soft); color: var(--status-inactive-text); }

/* the main lists (#listView rules in app.css are more specific: same changes at their level) */
#listView .data-table thead th { font-weight: 500; letter-spacing: 0; border-bottom-color: var(--color-border); }
#listView .data-table tbody td { border-right: 0; }
#listView .data-table th:first-child, #listView .data-table td:first-child { box-shadow: inset -1px 0 0 var(--color-border); }
#listView .data-table tbody tr[data-index]:hover > td:first-child { box-shadow: inset 3px 0 0 var(--color-primary), inset -1px 0 0 var(--color-border); }
#listView .data-table tbody td > .pill:only-child,
#listView .data-table tbody tr[data-index]:focus-visible > td > .pill:only-child { height: 22px; min-height: 0; font-weight: 500; box-shadow: none; }
@media (pointer: coarse) { #listView .data-table tbody td > .pill:only-child { height: 24px; min-height: 0; } }
#listView .table-scroll::-webkit-scrollbar-thumb, #listView .table-scroll-top::-webkit-scrollbar-thumb { background: var(--color-border-strong); }
#listView .table-scroll::-webkit-scrollbar-thumb:hover, #listView .table-scroll-top::-webkit-scrollbar-thumb:hover { background: var(--color-control-border); }

/* the always-visible table scrollbars: thin and light */
.table-scroll::-webkit-scrollbar, .table-scroll-top::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb, .table-scroll-top::-webkit-scrollbar-thumb { border-width: 2px; background: var(--color-border-strong); }
.table-scroll::-webkit-scrollbar-thumb:hover, .table-scroll-top::-webkit-scrollbar-thumb:hover { background: var(--color-control-border); }
.table-scroll-top { border-bottom-color: var(--color-border); }

/* status pills: soft fill, no heavy weight */
.ui-badge { font-weight: 500; height: 22px; padding: 0 10px; }

/* the selected nav item: quiet grey fill, dark text, teal icon (no edge bar) */
.nav-item.active, .rail .nav-item.active { box-shadow: none; font-weight: 500; }
.nav-item.active .icon, .rail .nav-item.active .icon, .shell.collapsed .rail .nav-item.active .icon { color: var(--color-primary-text); }

/* ==========================================================================
   Reference style, phase 2 (UX_REFERENCE_PLAN.md): grouped sidebar, user card in the top bar
   ========================================================================== */
/* sidebar groups: a quiet heading that folds its items (app.js initNavGroups) */
.rail-group { display: flex; flex-direction: column; }
.rail-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); width: 100%;
  margin-top: var(--space-sm); padding: 6px 10px 6px 12px; border: 0; border-radius: var(--radius-control); background: transparent;
  color: var(--color-nav-label); font: 500 var(--text-xs)/1.2 var(--font-body); text-align: left; cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.rail-group-head:hover { background: var(--color-nav-hover); color: var(--color-nav-text); }
.rail-group-chev { display: inline-flex; color: var(--color-nav-label); transition: transform var(--motion-base) var(--motion-ease); }
.rail-group.is-closed .rail-group-chev { transform: rotate(-90deg); }
.rail-group-items { display: flex; flex-direction: column; gap: 2px; }
.rail-group.is-closed .rail-group-items { display: none; }
/* a folded group hides a task dot: show one on its heading */
.rail-group.is-closed:has(.nav-dot) .rail-group-head .label::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; vertical-align: middle; background: var(--warning);
}
.rail-group.is-closed:has(.nav-dot.overdue) .rail-group-head .label::after { background: var(--status-lost-fill); }
@media (prefers-reduced-motion: reduce) { .rail-group-chev { transition: none; } }
/* icon-only rail (collapsed, or 768–1099px): no headings, every item shows */
@media (min-width: 768px) {
  .shell.collapsed .rail-group-head { display: none; }
  .shell.collapsed .rail-group.is-closed .rail-group-items { display: flex; }
  .shell.collapsed .rail-group + .rail-group, .shell.collapsed .rail-group:first-of-type { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-nav-border); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .rail-group-head { display: none; }
  .rail-group.is-closed .rail-group-items { display: flex; }
  .rail-group { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-nav-border); }
}

/* top bar: help, a hairline, then your user card (avatar, name, role) */
.appbar-sep { flex: none; width: 1px; height: 24px; background: var(--color-border); }
.top-me {
  display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 40px; max-width: 240px; padding: 4px 8px 4px 4px;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-foreground); text-align: left; cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.top-me:hover, .top-me[aria-expanded="true"] { background: var(--color-muted); }
.top-me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.top-me-name { font-size: var(--text-sm); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-me-role { font-size: var(--text-xs); color: var(--color-muted-foreground); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-me > .icon { flex: none; color: var(--color-muted-foreground); }
@media (max-width: 1279px) { .top-me-text { display: none; } .top-me { padding-right: 4px; } }
@media (max-width: 767px) { .top-me > .icon, .appbar-sep, #helpBtn { display: none; } }
@media (pointer: coarse) { .top-me { min-height: 44px; } }

/* the search: wide, and quieter until hovered. "Synced …" only where there's room (the Refresh button always says it) */
.top-search { border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }
@media (min-width: 1100px) { .top-search { width: min(400px, 28vw); } }
@media (max-width: 1599px) { .sync-time { display: none; } }
.appbar .crumbs { flex: 1 1 auto; }
.top-search:hover { border-color: var(--color-control-border); }

/* the sidebar footer now holds only Collapse */
.rail-footer { border-top-color: var(--color-nav-border); }
@media (pointer: coarse) {
  .rail-group-head { min-height: 44px; }
  .top-new { min-width: 44px; }
}

/* ==========================================================================
   Reference style, phase 3 (UX_REFERENCE_PLAN.md): lists — saved-view tabs, two-line name cells with an initials
   tile, an icon per column header, Sort by, List / Grid, KPI cards
   ========================================================================== */
/* saved views as tabs: an underline marks the open one */
.view-tabs { display: flex; align-items: flex-end; gap: var(--space-xs); padding: 0 var(--space-md-plus); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; }
.view-tabs::-webkit-scrollbar { display: none; }
.vt {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 44px; padding: 0 var(--space-sm-plus);
  border: 0; background: transparent; color: var(--color-muted-foreground); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease);
}
.vt::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.vt:hover { color: var(--color-foreground); }
.vt.is-on { color: var(--color-primary-text); }
.vt.is-on::after { background: var(--color-primary); }
.vt .icon { color: currentColor; }
.vt-mod { color: var(--status-hold-fill); font-size: 18px; line-height: 0; }
.vt-add { color: var(--color-muted-foreground); }
.vt-add:hover { color: var(--color-primary-text); }
@media (max-width: 767px) { .vt-add span { display: none; } }

/* the name cell: initials tile, name, grey second line */
.row-tile {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: color-mix(in srgb, var(--av, var(--avatar-8)) 14%, var(--color-card)); color: var(--av, var(--avatar-8));
  font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .02em;
}
html.dark .row-tile { background: color-mix(in srgb, var(--av, var(--avatar-8)) 30%, var(--color-card)); color: var(--color-foreground); }
.row-name { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; margin-right: auto; }
.primary-cell .row-name .row-link { font-weight: 600; }
.row-sub { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: 400; line-height: 1.3; }
.primary-cell { gap: var(--space-sm-plus); }
#listView .data-table tbody td:first-child { height: 60px; }
.density-compact #listView .data-table tbody td:first-child, #listView .density-compact .data-table tbody td:first-child { height: 44px; }
.density-compact .row-sub, .density-compact .row-tile { display: none; }
#listView .data-table td:first-child { max-width: 360px; min-width: 260px; }

/* an icon by data type in each column header */
.th-type { display: inline-flex; margin-right: 6px; color: var(--color-subtle-foreground); }
.th-btn .th-type .icon { width: 14px; height: 14px; }

/* Sort by and List / Grid in the toolbar */
.sort-by { display: inline-flex; align-items: center; gap: var(--space-xs); }
.sort-by-label { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted-foreground); font-size: var(--text-sm); white-space: nowrap; }
.sort-by-select { width: auto; max-width: 180px; height: 36px; padding-left: 10px; }
.seg.seg-sm { margin-top: 0; align-self: center; }
.seg.seg-sm .seg-btn { height: 30px; padding: 0 10px; }
@media (max-width: 1279px) { .seg.seg-sm .seg-btn span, .sort-by-label span { display: none; } }

/* Grid: the page's records as cards */
.lg-grid { list-style: none; margin: 0; padding: var(--space-md-plus); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md); }
.lg-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-sm-plus); height: 100%; padding: var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-card);
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.lg-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.lg-card:focus-within { border-color: var(--color-primary); }
.lg-top { display: flex; align-items: center; gap: var(--space-sm-plus); min-width: 0; }
.lg-top .row-tile { width: 40px; height: 40px; border-radius: 10px; font-size: var(--text-sm); }
.lg-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-link { color: var(--color-foreground); font-weight: 600; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lg-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card opens the record */
.lg-link:focus-visible { outline: none; }
.lg-card:has(.lg-link:focus-visible) { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: 2px; }
.lg-status { display: flex; }
.lg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); margin: 0; }
.lg-facts dt { color: var(--color-muted-foreground); font-size: var(--text-xs); }
.lg-facts dd { margin: 2px 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.lg-facts a, .lg-status a { position: relative; z-index: 1; }
.lg-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-sm-plus); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-muted-foreground); }
.lg-owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--color-foreground); }
.lg-owner.is-none { color: var(--color-muted-foreground); }
.lg-item.enter { animation: page-in var(--motion-base) var(--motion-ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
@media (prefers-reduced-motion: reduce) { .lg-card { transition: none; } .lg-item.enter { animation: none; } }

/* KPI cards: label on top, a big light figure */
#listView .stat.stat-chip, #listView .stat { padding: var(--space-md) var(--space-md-plus); border-radius: var(--radius-card); border-color: var(--color-border); gap: var(--space-sm); }
#listView .stat .stat-label { color: var(--color-muted-foreground); font-size: var(--text-sm); font-weight: 500; }
#listView .stat .stat-value, #listView .stat.lead .stat-value { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-foreground); }
#listView .stat.stat-chip:hover { border-color: var(--color-border-strong); background: var(--color-muted); }
#listView .stat.stat-chip.on { border-color: var(--color-primary); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-primary); }
#listView .stat.stat-chip.on .stat-value { color: var(--color-primary-text); }
/* phones: Sort by, List / Grid and Download share a row */
@media (max-width: 767px) {
  #toolbarRight > .seg.seg-sm { grid-column: auto; justify-self: start; }
  .sort-by-select { flex: 1; max-width: none; }
}

/* ==========================================================================
   Reference style, phase 4 (UX_REFERENCE_PLAN.md): record pages — a header card with a facts row, a stage bar,
   then tabs (app.js recordTabsFor) in place of one long page. Activity stays in the right column.
   ========================================================================== */
/* the header card */
.record-hero {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id figs" "stage stage"; align-items: start; gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg); padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-card);
}
.record-hero > .record-identity { grid-area: id; min-width: 0; }
.record-hero > .key-figures { grid-area: figs; }
.record-hero > .rh-stage { grid-area: stage; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.record-hero .record-title { font-size: 1.5rem; }
/* facts row: label over value, thin dividers between */
.record-hero .record-facts { gap: var(--space-sm) 0; margin-top: var(--space-md); }
.record-hero .record-facts > div { padding: 0 var(--space-lg) 0 0; margin-right: var(--space-lg); border-right: 1px solid var(--color-border); }
.record-hero .record-facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.record-hero .record-facts dt { color: var(--color-muted-foreground); font-weight: 400; }
.record-hero .record-facts dd { margin-top: 4px; font-weight: 500; }
.record-hero .key-figure { min-width: 150px; padding: var(--space-sm-plus) var(--space-md); border-color: var(--color-border); background: var(--color-muted); box-shadow: none; }
.record-hero .key-figure.lead { background: var(--color-primary-soft); border-color: var(--color-primary-soft-border); }
.record-hero .key-figure dd { font-size: 1.375rem; font-weight: 500; }
.record-hero .rh-actions { margin-top: var(--space-md); }
.record-hero .rh-stage .ds { padding: 0; border: 0; background: none; box-shadow: none; }
@media (max-width: 1099px) {
  .record-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "figs" "stage"; padding: var(--space-md); }
  .record-hero .record-facts > div { padding-right: var(--space-md); margin-right: var(--space-md); }
}

/* stage bar: chevrons, done in teal, the current one solid, Disqualified in red at the end */
.sbar { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sbar::-webkit-scrollbar { display: none; }
.sb-step {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 110px; height: 36px; padding: 0 22px;
  background: var(--color-muted); color: var(--color-muted-foreground); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.sb-step:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.sb-step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); border-radius: 0 8px 8px 0; }
.sb-step.is-done { background: var(--color-primary-soft); color: var(--color-primary-text); }
.sb-step.is-current { background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; }
.sb-step.is-stopped { background: var(--status-lost-soft); color: var(--status-lost-text); font-weight: 600; }
html.dark .sb-step.is-done { background: rgba(198, 244, 50, .12); }
@media (max-width: 767px) { .sb-step { min-width: 0; padding: 0 18px; font-size: var(--text-xs); } }

/* tabs: an underline marks the open one; counts in a quiet pill */
.rtabs { display: flex; gap: 0; margin-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; }
.rtabs::-webkit-scrollbar { display: none; }
.rtab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 44px; padding: 0 10px;
  border: 0; background: transparent; color: var(--color-muted-foreground); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease);
}
.rtab::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.rtab:hover { color: var(--color-foreground); }
.rtab[aria-selected="true"] { color: var(--color-primary-text); }
.rtab[aria-selected="true"]::after { background: var(--color-primary); }
.rtab:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-color); outline-offset: -2px; border-radius: 6px; }
.rtab-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-muted-strong); color: var(--color-muted-foreground); font-size: var(--text-xs); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.rtab[aria-selected="true"] .rtab-count { background: var(--color-primary-soft); color: var(--color-primary-text); }
.rtab-panel { display: flex; flex-direction: column; gap: var(--space-md); }
.rtab-panel:focus { outline: none; }
.rtab-panel > .record-section, .rtab-panel > .panel { margin: 0; }
/* the header card sits inside the page margin (app.css draws #detailView as full-width bands) */
#detailView > .record-hero {
  margin: var(--space-md) var(--edge) 0; padding: var(--space-lg); gap: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-card);
}
@media (max-width: 1099px) { #detailView > .record-hero { padding: var(--space-md); } }

/* ==========================================================================
   Reference style, phase 6 (UX_REFERENCE_PLAN.md): the same language on Today and Financials
   ========================================================================== */
/* Today · Key figures: label on top, a big light figure (as the list KPI cards) */
.td-kpi { border-color: var(--color-border); border-radius: var(--radius-card); padding: var(--space-md) var(--space-md-plus); gap: var(--space-xs); }
.td-kpi-label { font-weight: 500; }
.td-kpi-value { font: 500 1.75rem/1.1 var(--font-heading); letter-spacing: -0.02em; }
/* Today · the matches chart's three figures: never wrap a figure */
.td-fun-stats dd { font-size: var(--text-md); white-space: nowrap; }
/* Financials: the panel title reads as the page title; the figures strip in sentence case with big light numbers */
#dashboardView .fp > .dash-panel-head h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-heading); }
.fp-kpi-l, #dashboardView .fp-kpi dt { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--text-sm); }
.fp-kpi-v, #dashboardView .fp-kpi dd { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }

/* ==========================================================================
   Calm pass (Manrope): lighter type, more space, fewer boxes, a quieter toolbar.
   Nothing removed — only made quieter. Light (300) for titles and big figures, medium (500) for names and labels.
   ========================================================================== */
/* lighter type */
.page-title, #listView .page-title { font-size: 2rem; font-weight: 300; letter-spacing: -0.025em; }
.record-title, #detailView .record-title, .record-hero .record-title { font-size: 1.875rem; font-weight: 300; letter-spacing: -0.025em; }
h2, h3, h4, .sec-name, .dash-panel-head h2, .td-section-head h2, .td-chart-head h3, .ui-dialog-title { font-weight: 500; }
#dashboardView .fp > .dash-panel-head h2, .td-greeting, #todayView h1 { font-weight: 300; letter-spacing: -0.025em; }
.btn, .seg-btn, .vt, .rtab { font-weight: 500; }
.primary-cell .row-name .row-link, .lg-link, .top-me-name, .glance-label { font-weight: 500; }
.data-table thead th, #listView .data-table thead th { font-weight: 500; color: var(--color-subtle-foreground); }
/* big figures: light */
#listView .stat .stat-value, #listView .stat.lead .stat-value, .td-kpi-value, .record-hero .key-figure dd, .fp-kpi-v, #dashboardView .fp-kpi dd, .td-fun-stats dd {
  font-weight: 300; letter-spacing: -0.03em; }
#listView .stat .stat-value, #listView .stat.lead .stat-value, .td-kpi-value { font-size: 2.125rem; }
.record-hero .key-figure dd { font-size: 1.75rem; }

/* more space */
:root { --gutter: clamp(1.25rem, 4vw, 3rem); }
@media (min-width: 1101px) { :root { --edge: 40px; } }
#listView .hero { margin-bottom: var(--space-xl); }
.rtab-panel { gap: var(--space-lg); }
.td-section + .td-section, .td-section { margin-top: var(--space-xl); }

/* fewer boxes — list summary figures: no cards, thin dividers between, the chosen one in teal with a teal underline */
#listView .stats { gap: 0; }
/* (.stat.stat doubles the class: older #listView .stats .stat.lead rules are this specific) */
#listView .stats > .stat.stat {
  border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: var(--space-xs) var(--space-lg); border-left: 1px solid var(--color-border);
}
#listView .stats > .stat.stat:first-child { border-left: 0; padding-left: 0; }
#listView .stats > .stat.stat-chip:hover { background: transparent; }
#listView .stats > .stat.stat-chip:hover .stat-label { color: var(--color-foreground); }
#listView .stats > .stat.stat.on { background: transparent; box-shadow: inset 0 -2px 0 var(--color-primary); }
#listView .stats > .stat.stat.on .stat-value, #listView .stats > .stat.stat.on .stat-label { color: var(--color-primary-text); }
/* fewer boxes — Today's key figures the same way */
.td-kpis { gap: 0; }
.td-kpi { border: 0; border-radius: 0; background: transparent; padding: var(--space-xs) var(--space-lg); border-left: 1px solid var(--color-border); }
.td-kpi:first-child { border-left: 0; padding-left: 0; }
/* fewer boxes — record pages: sections inside a tab split by thin lines, not boxed */
#detailView .rtab-panel > .record-section.panel, #detailView .rtab-panel > .glance.panel {
  border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-left: 0; padding-right: 0;
  border-top: 1px solid var(--color-border);
}
#detailView .rtab-panel > .record-section.panel:first-child, #detailView .rtab-panel > .glance:first-child { border-top: 0; }
#detailView .rtab-panel > .glance { padding: var(--space-sm) 0; }

/* the toolbar's More menu */
.tb-more { position: relative; }
.tb-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-overlay); min-width: 240px; padding: 6px;
  border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-lg);
}
.tb-more-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--color-foreground); font: 400 var(--text-sm)/1 var(--font-body); text-align: left; cursor: pointer;
}
.tb-more-item:hover, .tb-more-item:focus-visible { background: var(--color-muted); }
.tb-more-item > span:first-of-type { flex: 1; }
.tb-more-item .count-inline { color: var(--color-muted-foreground); }
.tb-more-item > .icon:first-child { color: var(--color-muted-foreground); }
.tb-more-item > .icon:last-child:not(:first-child) { color: var(--color-primary-text); }
@media (pointer: coarse) { .tb-more-item { min-height: 44px; } }
html.dark .data-table thead th, html.dark #listView .data-table thead th { color: var(--color-muted-foreground); }   /* subtle grey is 4.37:1 on the dark header band */

/* ==========================================================================
   Financials chart (js/finance-pivot.js chartHtml): a card under the totals, with its own header,
   thin rounded marks, a crosshair and a tooltip. Read with the mouse or the arrow keys.
   ========================================================================== */
#dashboardView .fp-chart { position: relative; margin: var(--space-lg) 0 var(--space-md); padding: var(--space-lg) var(--space-lg) var(--space-md);
  border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-card); }
.fp-ch-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-md); }
.fp-ch-main { flex: 1 1 220px; min-width: 0; }
.fp-ch-title { margin: 0; color: var(--color-muted-foreground); font-size: var(--text-sm); font-weight: 500; }
.fp-ch-total { margin: 2px 0 0; color: var(--color-foreground); font: 300 clamp(1.75rem, 3.2vw, 2.375rem)/1.1 var(--font-display);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fp-ch-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: var(--space-xs) 0 0; color: var(--color-muted-foreground); font-size: var(--text-sm); }
.fp-ch-delta b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-ch-delta svg { flex: none; }
.fp-ch-delta.good b, .fp-ch-delta.good svg { color: var(--color-success-text); }
.fp-ch-delta.bad b, .fp-ch-delta.bad svg { color: var(--color-destructive-text); }
.fp-ch-facts { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin: 0; }
.fp-ch-facts > div { min-width: 0; padding-left: var(--space-md); border-left: 1px solid var(--color-border); }
.fp-ch-facts dt { color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: 500; }
.fp-ch-facts dd { margin: 4px 0 0; max-width: 220px; overflow: hidden; color: var(--color-foreground); font-size: var(--text-base); font-weight: 500;
  white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.fp-ch-facts dd span { color: var(--color-muted-foreground); font-weight: 400; }
#dashboardView .fp-ch-type { margin: 0 0 0 auto; }
#dashboardView .fp-ch-type .seg-btn { height: 30px; font-size: var(--text-sm); }

.fp-plot { position: relative; border-radius: var(--radius-control); }
.fp-plot:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 4px; }
.fp-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
#dashboardView .fp-chart .ch-grid { stroke: var(--color-border); stroke-width: 1; shape-rendering: crispEdges; }
#dashboardView .fp-chart .ch-grid.fp-zero { stroke: var(--color-border-strong); }
#dashboardView .fp-chart .ch-x, #dashboardView .fp-chart .ch-y { fill: var(--color-muted-foreground); font: 400 11.5px var(--font-body); font-variant-numeric: tabular-nums; }
#dashboardView .fp-chart .ch-name { fill: var(--color-foreground); font: 400 12.5px var(--font-body); }
#dashboardView .fp-chart .ch-name.other { fill: var(--color-muted-foreground); }
#dashboardView .fp-chart .ch-val { fill: var(--color-foreground); font: 500 12px var(--font-body); font-variant-numeric: tabular-nums; }
#dashboardView .fp-chart .ch-break { stroke: var(--color-card); stroke-width: 3; }
.fp-peak { fill: var(--color-foreground); font: 600 11.5px var(--font-body); font-variant-numeric: tabular-nums; }

/* marks */
#dashboardView .fp-chart .fp-bar { opacity: 1; transition: opacity 160ms var(--motion-ease, ease); }
.fp-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fp-end { stroke: var(--color-card); stroke-width: 2; }
.fp-pt { stroke: var(--color-card); stroke-width: 2; opacity: 0; transition: opacity 120ms ease; }
.fp-pt.is-on { opacity: 1; }
.fp-cross { stroke: var(--color-muted-foreground); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.fp-hit { fill: transparent; cursor: crosshair; }
.fp-row .fp-hit { cursor: default; }
/* hovering one period or bar quiets the rest */
#dashboardView .fp-plot.is-hover .fp-bar { opacity: .35; }
#dashboardView .fp-plot.is-hover .fp-bar.is-on, #dashboardView .fp-plot.is-hover .fp-row.is-on .fp-bar { opacity: 1; }
.fp-plot.is-hover .fp-row.is-on .ch-name { font-weight: 600; }
.fp-plot.is-hover .fp-peak { opacity: 0; }

/* tooltip */
.fp-tip { position: absolute; z-index: 5; min-width: 150px; max-width: 260px; padding: 10px 12px; border: 1px solid var(--color-border);
  border-radius: 10px; background: var(--color-card); color: var(--color-foreground); box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06);
  font-size: var(--text-xs); pointer-events: none; }
.fp-tip-head { margin: 0 0 6px; color: var(--color-muted-foreground); font-weight: 500; }
.fp-tip-row { display: flex; align-items: center; gap: 8px; line-height: 1.7; }
.fp-tip-row i { flex: none; width: 10px; height: 3px; border-radius: 2px; }
.fp-tip-row b { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-tip-row span { min-width: 0; overflow: hidden; color: var(--color-muted-foreground); white-space: nowrap; text-overflow: ellipsis; }
.fp-tip-row.is-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border); }
.fp-tip-row.is-part b { font-size: var(--text-xs); font-weight: 500; }
.fp-tip-note { margin: 6px 0 0; color: var(--color-muted-foreground); }
#dashboardView .fp-chart .ch-legend { margin-top: var(--space-sm); }
@media (max-width: 640px) {
  #dashboardView .fp-chart { padding: var(--space-md) var(--space-sm) var(--space-sm); border-radius: 12px; }
  .fp-ch-head { gap: var(--space-sm) var(--space-md); }
  #dashboardView .fp-ch-type { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .fp-pt, #dashboardView .fp-chart .fp-bar { transition: none; } }
.fp-avg { stroke: var(--color-muted-foreground); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; pointer-events: none; }
.fp-avg-l { fill: var(--color-muted-foreground); font: 500 11px var(--font-body); font-variant-numeric: tabular-nums; }
/* Financials table: grows to fit every row (the page scrolls); only sideways scrolling stays */
#dashboardView .fp-scroll { max-height: none; overflow-x: auto; overflow-y: visible; }

/* Today: 12 key figures (counts, money and rates) in rows of four */
@container (min-width: 620px) { .td-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the divider sits between tiles in a row, never at the start of one */
.td-kpis { row-gap: var(--space-lg); }
.td-kpi:nth-child(2n+1) { border-left: 0; padding-left: 0; }
@container (min-width: 620px) {
  .td-kpi:nth-child(2n+1) { border-left: 1px solid var(--color-border); padding-left: var(--space-lg); }
  .td-kpi:nth-child(4n+1) { border-left: 0; padding-left: 0; }
}
/* Funnel: a branch that leaves the funnel (lost prechecks), indented under the step it leaves from */
.ch-funnel > li.ch-branch { margin-left: var(--space-lg); padding-left: var(--space-sm-plus); border-left: 2px solid var(--color-border); }
.ch-conv-branch { text-align: left; color: var(--color-destructive-text); }
.ch-conv-branch::before { content: "↳ "; }

/* Numbers in every table start from the left, like the text around them (decided 2026-11-12).
   Cells still use tabular figures; the action column of the agents table stays on the right. */
table th.right, table td.right, .data-table th.right, .data-table td.right, #listView .data-table th.right, #listView .data-table td.right,
.dash-table .right, .pv-table .right, .bd-table .right, .ts-table .right, .matches-table .right,
#dashboardView .fp-table thead th.right.fp-colhead, #dashboardView .fp-table th.right, #dashboardView .fp-table td.right { text-align: left; }
table td.right.agent-acts, table th.right.agent-acts { text-align: right; }

/* Provider page: the Availability switch beside the status, and the note when it's off */
.avail { display: inline-flex; align-items: center; gap: var(--space-sm); margin-left: var(--space-xs); }
.avail-switch { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 999px;
  background: var(--color-border-strong); cursor: pointer; transition: background-color 160ms ease; }
.avail-switch::after { content: ""; position: absolute; inset: -12px -4px; }   /* a 44px-tall hit area */
.avail-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .2); transition: transform 160ms ease; }
.avail.is-on .avail-switch { background: var(--color-primary); }
.avail.is-on .avail-knob { transform: translateX(16px); }
.avail-switch:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.avail-switch:disabled { cursor: not-allowed; opacity: .55; }
.avail-text { color: var(--color-muted-foreground); font-size: var(--text-sm); font-weight: 500; }
.avail.is-on .avail-text { color: var(--color-foreground); }
.rh-unavailable { display: flex; align-items: flex-start; gap: var(--space-xs); margin: var(--space-sm) 0 0; max-width: 70ch;
  color: var(--status-hold-text, var(--color-muted-foreground)); font-size: var(--text-sm); }
.rh-unavailable svg { flex: none; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .avail-switch, .avail-knob { transition: none; } }

/* Provider capabilities and coverage: a switch on every group, item and flow (js/ui/switches.js) */
.sw { position: relative; flex: none; width: 32px; height: 18px; padding: 0; border: 0; border-radius: 999px;
  background: var(--color-border-strong); cursor: pointer; transition: background-color 160ms ease; }
.sw::after { content: ""; position: absolute; inset: -8px -4px; }   /* a bigger hit area */
.sw .sw-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .2); transition: transform 160ms ease; }
.sw[aria-checked="true"] { background: var(--color-primary); }
.sw[aria-checked="true"] .sw-knob { transform: translateX(14px); }
.sw.sw-sm { width: 28px; height: 16px; }
.sw.sw-sm .sw-knob { width: 12px; height: 12px; }
.sw.sw-sm[aria-checked="true"] .sw-knob { transform: translateX(12px); }
.sw:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.sw:disabled { cursor: default; opacity: .6; }
/* a flow: a small pill that is on (teal) or off (struck through) */
.sw.sw-chip { width: auto; height: 22px; padding: 0 8px; border: 1px solid var(--color-border-strong); background: transparent;
  color: var(--color-muted-foreground); font: 500 var(--text-xs)/1 var(--font-body); }
.sw.sw-chip::after { inset: -6px -2px; }
.sw.sw-chip[aria-checked="true"] { border-color: transparent; background: var(--color-primary-soft); color: var(--color-primary-text); }
.sw.sw-chip[aria-checked="false"] .sw-chip-text { text-decoration: line-through; }

.sw-groups { display: flex; flex-direction: column; gap: var(--space-md); }
.sw-group-h { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.sw-group-h h4 { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.sw-n, .sw-offcount { color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: 400; }
.sw-offcount { margin-left: var(--space-xs); }
.sw-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sw-group-h + .sw-list { padding-left: calc(32px + var(--space-sm)); }   /* items sit under the group's name */
.sw-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); min-height: 32px; }
.sw-title { min-width: 0; font-size: var(--text-sm); }
.sw-flows { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.sw-item.is-off .sw-title { color: var(--color-muted-foreground); text-decoration: line-through; }
.sw-item.is-off .sw-flows { opacity: .5; }
.sw-group.is-off .sw-group-h h4 { color: var(--color-muted-foreground); }
.sw-group.is-off .sw-list { opacity: .5; }   /* the group overrides: its items keep their own switch, shown faded */
@media (prefers-reduced-motion: reduce) { .sw, .sw .sw-knob { transition: none; } }

/* Deals board: expected and reported volume and commission, in the column head and on each card */
.kb-head dl.kb-total { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-sm); margin: 2px 0 0; }
.kb-head dl.kb-total > div { display: contents; }
.kb-head dl.kb-total dt { color: var(--color-muted-foreground); font-size: var(--text-xs); }
.kb-head dl.kb-total dd { margin: 0; color: var(--color-foreground); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.kb-head dl.kb-total .kb-exp { color: var(--color-muted-foreground); }
.kb-card .kb-meta { flex-wrap: wrap; align-items: flex-end; }
.kb-money { display: block; flex: 1 1 100%; font-variant-numeric: tabular-nums; font-weight: 600; }
.kb-money .is-exp { color: var(--color-muted-foreground); font-weight: 500; }
.kb-money-l { display: inline-block; min-width: 42px; color: var(--color-muted-foreground); font-weight: 400; }
.kb-card .kb-meta .kb-age { margin-left: auto; }

/* Clickable cards (data-card-href / data-card-tab, handled in app.js): the whole card opens its page */
[data-card-href], [data-card-tab] { cursor: pointer; }
[data-card-href] :is(p, h3, h4, dt, dd, span, li, td, th) { cursor: inherit; }
.td-card[data-card-href], .td-chart[data-card-href], .ts-group[data-card-href], .expo-card[data-card-href], .mc[data-card-href] {
  transition: border-color 160ms ease, box-shadow 160ms ease; }
.td-card[data-card-href]:hover, .td-chart[data-card-href]:hover, .ts-group[data-card-href]:hover, .expo-card[data-card-href]:hover, .mc[data-card-href]:hover {
  border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.mc [data-card-skip], .td-card .td-card-head { cursor: auto; }
.mc [data-card-skip] button, .td-card .td-card-head { cursor: pointer; }
#detailView .key-figure[data-card-tab] { border-radius: var(--radius-control); transition: background-color 160ms ease; }
#detailView .key-figure[data-card-tab]:hover { background: var(--color-muted); }
#detailView .key-figure[data-card-tab]:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { [data-card-href], [data-card-tab] { transition: none !important; } }

/* Sign in: the welcome panel (js/auth.js heroHtml) — always dark, in both themes, to match the Monepik logo */
.auth-page.has-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; place-items: stretch; padding: 0; }
.auth-side { position: relative; display: grid; place-items: center; padding: var(--space-xl) var(--gutter, 16px) calc(var(--space-xl) + var(--safe-bottom, 0px)); overflow: hidden; }
.auth-hero { --hero-bg: #050605; --hero-lime: 198, 244, 50; --spot-x: 50%; --spot-y: 40%;
  position: relative; overflow: hidden; min-height: 132px; isolation: isolate; color: #F5F5F4;
  background: radial-gradient(120% 90% at 85% 10%, rgba(var(--hero-lime), .10), transparent 55%), var(--hero-bg); }
.auth-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 240ms ease;
  background: radial-gradient(380px circle at var(--spot-x) var(--spot-y), rgba(var(--hero-lime), .16), transparent 62%); }
.auth-hero.is-lit .auth-spot { opacity: 1; }
.auth-scene { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 700ms ease; }
.auth-scene.is-ready { opacity: 1; }
.auth-scene spline-viewer { display: block; width: 100%; height: 100%; }
.auth-hero-text { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-md); height: 100%;
  padding: calc(var(--space-lg) + var(--safe-top, 0px)) var(--gutter, 16px) var(--space-lg); pointer-events: none; }
.auth-hero-logo { flex: none; width: 48px; height: 48px; border-radius: 50%; }
.auth-hero-title { margin: 0; font: 300 clamp(1.5rem, 5vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -0.02em;
  color: #F5F5F4; }

@media (min-width: 960px) {
  .auth-page.has-hero { grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr); grid-template-rows: 100dvh; }
  .auth-hero { min-height: 0; }
  .auth-hero-text { position: absolute; inset: auto 0 0 0; height: auto; flex-direction: column; align-items: flex-start; gap: var(--space-lg);
    padding: var(--space-3xl, 64px) var(--space-3xl, 64px) var(--space-3xl, 64px); }
  .auth-hero-logo { position: fixed; top: var(--space-xl); left: var(--space-xl); width: 56px; height: 56px; }
  .auth-hero-title { font-size: clamp(2.5rem, 4vw, 3.75rem); max-width: 12ch; }
}
@media (prefers-reduced-motion: reduce) { .auth-spot, .auth-scene { transition: none; } }
@media (min-width: 960px) {
  .auth-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(5, 6, 5, .78)); }
}

/* Sign in as one scene: the robot's panel and the form share one dark background and one spotlight */
.auth-page.has-hero { --hero-lime: 198, 244, 50; --spot-x: 50%; --spot-y: 40%; position: relative; isolation: isolate;
  background: radial-gradient(70% 60% at 40% 15%, rgba(var(--hero-lime), .09), transparent 60%), #050605; }
.auth-page.has-hero > .auth-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 240ms ease;
  background: radial-gradient(420px circle at var(--spot-x) var(--spot-y), rgba(var(--hero-lime), .14), transparent 62%); }
.auth-page.has-hero.is-lit > .auth-spot { opacity: 1; }
.auth-page.has-hero .auth-hero { background: transparent; z-index: 1; }
.auth-page.has-hero .auth-side { background: transparent; z-index: 1; }
.auth-page.has-hero .auth-card { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035);
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.auth-page.has-hero .auth-card .input { background: rgba(255, 255, 255, .04); }
@media (prefers-reduced-motion: reduce) { .auth-page.has-hero > .auth-spot { transition: none; } }

/* Sign in: the typewriter welcome line. The ghost copy holds the line's full size so nothing moves while it types. */
.tw { display: inline-grid; }
.tw > span { grid-area: 1 / 1; }
.tw-ghost { visibility: hidden; }
.tw.is-typing .tw-live::after { content: "|"; margin-left: .08em; font-weight: 200; color: rgb(198, 244, 50); animation: tw-blink 1s steps(1, end) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw.is-typing .tw-live::after { animation: none; } }

/* ==========================================================================
   Dark mode, in the sign-in screen's look: one near-black canvas with a soft lime glow behind the whole app.
   The page areas let it through; bars that stay on screen while you scroll are tinted glass, so content scrolls
   readably beneath them. Cards keep their own (opaque) surface.
   ========================================================================== */
html.dark { background: #050605; }
html.dark body {
  background: radial-gradient(70% 55% at 30% -5%, rgba(198, 244, 50, .085), transparent 62%),
              radial-gradient(50% 45% at 100% 100%, rgba(198, 244, 50, .04), transparent 70%), #050605;
  background-attachment: fixed;
}
html.dark :is(#listView, #detailView, #dashboardView, #todayView, #listView > .hero, #detailView > .record-hero,
  #detailView .record-aside, #dashboardView .dash-tabs, .dash-tabpanel > .ts-bar, .dash-tabpanel > .ts-range) { background: transparent; }
html.dark :is(.appbar, .topbar) { background: rgba(5, 6, 5, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Dashboards: one sentence per line (app.js stackSentences), on one left edge, at a readable width */
.stack { max-width: 68ch; line-height: 1.55; text-align: left; }
.stack-line { display: block; }
.stack-line + .stack-line { margin-top: 2px; }

/* Today's key figures: label, figure and grey line sit on the same three rows across each row of tiles,
   so the figures line up even when a label wraps */
.td-kpis { align-items: stretch; }
@supports (grid-template-rows: subgrid) {
  .td-kpis > .td-kpi { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-xs); align-content: start; }
  .td-kpis > .td-kpi > .td-kpi-label { align-self: end; }
  .td-kpis > .td-kpi > .td-kpi-value { align-self: start; }
  .td-kpis > .td-kpi > .td-kpi-sub { align-self: start; }
  #dashboardView .fp-kpis > .fp-kpi { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 4px; }
  #dashboardView .fp-kpis > .fp-kpi > .fp-kpi-l { align-self: end; }
}
/* Funnel rows (Today's matches card): their facts one under the other, not joined with dots */
.ch-fsub-line { display: block; }

/* Today: the period bar above Key figures (it also sets Pipeline and money) */
.td-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm) var(--space-md); margin: 0 0 var(--space-md); }
.td-period .pv-ctl { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.td-period .pv-ctl > span { color: var(--color-muted-foreground); font-size: var(--text-xs); font-weight: 500; }
.td-period-note { flex: 1 1 100%; margin: 0; color: var(--color-muted-foreground); font-size: var(--text-xs); }
@media (min-width: 720px) { .td-period-note { flex: 0 1 auto; align-self: center; margin-top: 18px; } }

/* Today: Leads by payment consultant — per consultant a Merchants and a Providers bar on one shared scale,
   split into qualified / in progress and disqualified, each part with its share of the bar inside it.
   Fills chosen so the percentage text inside passes 4.5:1 (light: white on teal / red; dark: near-black on lime / red). */
.td-chart:has(#tdPeople) { --pc-ok: #0E7C73; --pc-out: #DC2626; --pc-ink: #FFFFFF; }
html.dark .td-chart:has(#tdPeople) { --pc-ok: #7AA21A; --pc-out: #F87171; --pc-ink: #050605; }
.pc-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: 0 0 var(--space-sm); color: var(--color-muted-foreground); font-size: var(--text-xs); }
.pc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pc-legend i { width: 10px; height: 10px; border-radius: 3px; }
.pc-legend i.is-ok { background: var(--pc-ok); } .pc-legend i.is-out { background: var(--pc-out); }
.pc-list { display: flex; flex-direction: column; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.pc-name { margin: 0 0 4px; font-size: var(--text-sm); font-weight: 500; }
.pc-bar-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 40px; align-items: center; gap: var(--space-sm); min-height: 24px; }
.pc-kind { color: var(--color-muted-foreground); font-size: var(--text-xs); }
.pc-track { position: relative; height: 20px; }
.pc-bar { display: flex; height: 100%; min-width: 4px; gap: 2px; }   /* a 2px gap between the parts */
.pc-seg { display: flex; align-items: center; justify-content: center; min-width: 4px; overflow: hidden; }
.pc-seg:first-child { border-radius: 4px 0 0 4px; } .pc-seg:last-child { border-radius: 0 4px 4px 0; } .pc-seg:only-child { border-radius: 4px; }
.pc-seg.is-ok { background: var(--pc-ok); } .pc-seg.is-out { background: var(--pc-out); }
.pc-pct { color: var(--pc-ink); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 4px; }
.pc-total { text-align: left; font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
/* every consultant's bars are full width (shares, not sizes); a part is never too narrow for its percentage */
.pc-bar { width: 100%; }
.pc-seg { flex: 1 1 0; min-width: 40px; }
.pc-pct { padding: 0 6px; }

/* Pipeline and money bars, in the style of the reference progress bars: the label (and count) above, a thin
   8px pill on a soft track, the percentage at the end of the track (stages: share of the deals; funnel: of the
   first step). The consultant bars keep their percentages inside, so they stay 20px, with the same pill ends. */
.ch-hrow, .ch-frow { grid-template-columns: minmax(0, 1fr) minmax(40px, auto); grid-template-areas: "label value" "bar pct"; row-gap: 8px; padding: var(--space-sm); }
.ch-hlabel { color: var(--color-muted-foreground); font-weight: 600; }
.ch-hrow:hover .ch-hlabel, .ch-frow:hover .ch-hlabel { color: var(--color-foreground); }
.ch-htrack { height: 8px; border-radius: 9999px; background: var(--color-muted-strong, var(--color-muted)); overflow: hidden; }
.ch-hbar { border-radius: 9999px; }
.ch-hbar[style*="width:0%"] { display: none; }
.ch-hpct { grid-area: pct; justify-self: end; color: var(--color-foreground); font-size: var(--text-xs); font-variant-numeric: tabular-nums; line-height: 1; }
.ch-fsub { grid-column: 1 / -1; }
.pc-track { height: 20px; }
.pc-bar { border-radius: 9999px; overflow: hidden; background: var(--color-muted-strong, var(--color-muted)); }
.pc-seg:first-child, .pc-seg:last-child, .pc-seg:only-child { border-radius: 0; }
/* the track runs under the count too (long counts no longer shorten it); the percentage has its own fixed slot */
.ch-hrow, .ch-frow { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "label value value" "bar bar pct"; }

/* Pipeline and money, laid out (wide screens): leads by consultant on the left at the full height of the column
   beside it; deals by stage and the matches funnel stacked on the right; commission across the bottom.
   The cards' edges line up: the same gap everywhere, tops level, the left card as tall as the right column. */
.td-charts:has(#tdPeople) { align-items: stretch; }
@media (min-width: 900px) {
  .td-charts:has(#tdPeople) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "people deals" "people funnel" "trend trend"; }
  .td-chart:has(#tdPeople) { grid-area: people; }
  .td-chart:has(#tdStages) { grid-area: deals; }
  .td-chart:has(#tdFunnel) { grid-area: funnel; }
  .td-chart:has(#tdTrend) { grid-area: trend; }
}

/* ==========================================================================
   Pipeline and money, compact: the four cards fit one screen (2026-11-13).
   Wide (1000px+): consultants | deals | prechecks in one row, commission as a short strip under them.
   Rows are tighter, the funnel's three figures are one slim line, and each card's notes sit behind an ⓘ.
   ========================================================================== */
.td-charts:has(#tdPeople) { gap: var(--space-sm-plus); }
.td-charts:has(#tdPeople) > .td-chart { padding: var(--space-sm-plus) var(--space-md); gap: var(--space-sm); }
.td-charts:has(#tdPeople) .td-chart-head h3 { font-size: var(--text-sm); }
.td-charts:has(#tdPeople) .td-chart-head p { margin-top: 1px; }
.td-chart-acts { display: flex; align-items: center; gap: var(--space-sm); flex: none; }
/* bars and funnel rows */
.td-charts:has(#tdPeople) :is(.ch-hrow, .ch-frow) { min-height: 0; padding: 3px var(--space-xs); row-gap: 3px; font-size: 12.5px; }
.td-charts:has(#tdPeople) :is(.ch-hbars, .ch-funnel) { gap: 1px; }
.td-charts:has(#tdPeople) .ch-htrack { height: 6px; }
.td-charts:has(#tdPeople) .ch-hsub { font-size: 11px; }
.td-charts:has(#tdPeople) .ch-fsub { font-size: 11px; line-height: 1.25; }
.td-charts:has(#tdPeople) .ch-conv { font-size: 10.5px; margin: -1px 0; }
.td-charts:has(#tdPeople) .ch-funnel > li.ch-branch { margin-left: var(--space-md); padding-left: var(--space-sm); }
/* the funnel's three figures: one slim line */
.td-charts:has(#tdPeople) .td-fun-stats { gap: var(--space-xs); margin: 0 0 var(--space-xs); }
.td-charts:has(#tdPeople) .td-fun-stats > div { padding: 4px var(--space-sm); }
.td-charts:has(#tdPeople) .td-fun-stats dt { font-size: 10.5px; }
.td-charts:has(#tdPeople) .td-fun-stats dd { margin-top: 0; font-size: var(--text-sm); }
/* consultants */
.td-charts:has(#tdPeople) .pc-legend { margin-bottom: 2px; }
.td-charts:has(#tdPeople) .pc-list { gap: var(--space-sm); }
.td-charts:has(#tdPeople) .pc-name { margin-bottom: 1px; font-size: 12.5px; }
.td-charts:has(#tdPeople) .pc-bar-row { grid-template-columns: 62px minmax(0, 1fr) 28px; min-height: 18px; gap: 6px; }
.td-charts:has(#tdPeople) .pc-track { height: 16px; }
.td-charts:has(#tdPeople) .pc-seg { min-width: 34px; }
.td-charts:has(#tdPeople) .pc-pct { font-size: 10px; }
/* the commission strip: short */
.td-charts:has(#tdPeople) .ch-line svg { max-height: 150px; }

/* the notes behind ⓘ: a small popover in the card's head */
.td-info { position: relative; }
.td-info > summary { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  color: var(--color-muted-foreground); cursor: pointer; list-style: none; }
.td-info > summary::-webkit-details-marker { display: none; }
.td-info > summary:hover, .td-info[open] > summary { background: var(--state-hover); color: var(--color-foreground); }
.td-info > summary:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.td-info-pop { position: absolute; right: 0; top: 32px; z-index: 6; width: min(320px, 78vw); padding: var(--space-sm) var(--space-sm-plus);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-card); box-shadow: var(--shadow-lg);
  color: var(--color-muted-foreground); font-size: var(--text-xs); line-height: 1.5; cursor: auto; }
.td-info-pop p { margin: 0; }
.td-info-pop p + p { margin-top: var(--space-xs); }

@media (min-width: 1000px) {
  .td-charts:has(#tdPeople) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "people deals funnel" "trend trend trend"; }
}
/* a bar's sub-line (e.g. the stage's volume) on its own small line, so the stage name isn't cut short */
.ch-hrow { grid-template-areas: "label value value" "bar bar pct" "sub sub sub"; }
.ch-hrow > .ch-hsub { grid-area: sub; margin-top: -1px; }
.td-charts:has(#tdPeople) .ch-line svg { max-height: 120px; }
.td-charts:has(#tdPeople) .td-fun-stats dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-charts:has(#tdPeople) .ch-conv { line-height: 10px; }
/* wide screens: a section's filters sit on the same row as its heading (the dates are in the line under it) */
@media (min-width: 1000px) {
  .td-section:has(> .td-period) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-lg); align-items: end; }
  .td-section:has(> .td-period) > * { grid-column: 1 / -1; }
  .td-section:has(> .td-period) > .td-section-head { grid-column: 1; align-self: end; }
  .td-section:has(> .td-period) > .td-period { grid-column: 2; grid-row: 1; margin: 0; flex-wrap: nowrap; }
  .td-section:has(> .td-period) > .td-period .pv-ctl { min-width: 0; width: 140px; }
  .td-section:has(> .td-period) > .td-period .td-period-note { display: none; }
}
.td-charts:has(#tdPeople) .ch-line svg { max-height: 96px; }
.td-charts:has(#tdPeople) .ch-frow .ch-hlabel { white-space: normal; }
.td-charts:has(#tdPeople) .ch-fsub { line-height: 1.15; }
.td-charts:has(#tdPeople) .ch-conv { margin: -3px 0 -2px; }
.td-charts:has(#tdPeople) .ch-line svg { max-height: 84px; }
.td-charts:has(#tdPeople) > .td-chart:has(#tdTrend) { gap: 4px; padding-bottom: var(--space-sm); }

/* Commission sits under the consultant breakdown in the left column (same width); deals and prechecks on the right.
   The left column's two cards share its height: the consultants on top, commission filling the rest. */
.td-charts:has(#tdPeople) .ch-line svg { max-height: none; }
@media (min-width: 900px) {
  .td-charts:has(#tdPeople) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "people deals" "trend funnel"; grid-template-rows: auto 1fr; }
}
@media (min-width: 1000px) {
  .td-charts:has(#tdPeople) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "people deals funnel" "trend deals funnel"; grid-template-rows: auto 1fr; }
}
.td-charts:has(#tdPeople) > .td-chart:has(#tdTrend) { padding-bottom: var(--space-sm-plus); }

/* Commission removed (2026-11-13): consultants, deals and prechecks side by side, all the same height */
@media (min-width: 900px) {
  .td-charts:has(#tdPeople) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "people deals" "people funnel"; grid-template-rows: auto auto; }
}
@media (min-width: 1000px) {
  .td-charts:has(#tdPeople) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "people deals funnel"; grid-template-rows: auto; }
}

/* Tasks on a record are completed from its page: instead of a tick, a dashed circle with an arrow that opens it */
.task-check.is-linked, .td-check.is-linked { border-style: dashed; color: var(--color-muted-foreground); text-decoration: none; }
.task-check.is-linked:hover, .td-check.is-linked:hover, .task-check.is-linked:focus-visible, .td-check.is-linked:focus-visible {
  border-style: solid; border-color: var(--color-primary); color: var(--color-primary-text); }