/* Component Styles */

/* ── BASE RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg);
}

h1 {
  margin: 0;
}

/* ── APP SHELL ── */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── NAVBAR ── */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--border-color);
}

.navbar__logo {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.navbar__logo-accent {
  color: var(--color-brand);
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.navbar__link {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.navbar__link:hover {
  background: var(--color-grey-50);
}

.navbar__link--active {
  background: var(--color-brand-light);
  color: var(--color-brand);
  border-color: var(--color-brand);
  font-weight: var(--font-semibold);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.navbar__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.navbar__status-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-success);
  flex-shrink: 0;
}

.navbar__btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand);
  color: var(--color-grey-50);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-fast);
}

.navbar__btn:hover {
  background: var(--color-brand-dark);
}

.navbar__avatar {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-grey-300);
  flex-shrink: 0;
}

/* ── MAIN CONTENT ── */
.main-content {
  overflow-y: auto;
  padding: var(--space-8);
  background: var(--color-surface);
}

/* ── PAGE HEADER ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.page-header__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  border-left: var(--space-1) solid var(--color-brand);
  padding-left: var(--space-3);
}

.page-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.page-header__meta-label {
  color: var(--color-text-secondary);
}

.page-header__meta-sep {
  color: var(--color-text-muted);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── BUTTON ── */
.btn--primary {
  background: var(--color-brand);
  color: var(--color-grey-50);
  padding: var(--space-2) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn--primary:hover {
  background: var(--color-brand-dark);
}

/* Ghost / secondary button — outlined with optional leading icon */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn:hover {
  background: var(--color-surface);
  border-color: var(--color-grey-300);
  color: var(--color-text-primary);
}

.btn__icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}

/* Icon-only button — e.g. the KPI customize gear */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.icon-btn:hover {
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.icon-btn__icon {
  width: var(--space-5);
  height: var(--space-5);
}

/* ── KPI TOOLBAR (customize gear) ── */
.kpi-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

/* ── KEY METRICS LAYOUT ── */
/* Two columns: a 2×2 KPI grid on the left, a tall AI Insight card on the
   right (narrower). Stacks on tablet/mobile via the media queries below. */
.metrics-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  margin-bottom: var(--space-8);
  align-items: stretch;
}

/* ── KPI GRID ── */
/* 2×2 grid of KPI cards inside the metrics layout. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

.kpi-grid__item {
  min-width: 0;
}

/* ── AI INSIGHT CARD ── */
/* Light, brand-gradient hero panel that spans the height of the 2×2 grid.
   Layered radial glows over a diagonal brand wash give depth without going
   dark; a soft branded shadow lifts it off the page. */
.ai-insight {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
  overflow: hidden;
  border-color: var(--color-brand-light);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(135% 90% at 100% 0%, var(--color-brand-light) 0%, transparent 52%),
    radial-gradient(120% 80% at 0% 100%, var(--color-info-light) 0%, transparent 48%),
    linear-gradient(152deg, var(--color-bg) 0%, var(--color-brand-light) 100%);
  box-shadow: var(--shadow-brand);
  animation: ai-insight-rise var(--duration-rise) var(--ease-emphasized) both;
}

/* Hairline brand glow along the top edge */
.ai-insight::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-brand), transparent);
  opacity: 0.7;
}

.ai-insight__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ai-insight__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.ai-insight__icon {
  width: var(--space-6);
  height: var(--space-6);
  flex-shrink: 0;
  filter: drop-shadow(var(--shadow-sm));
  animation: ai-insight-float var(--duration-pulse) ease-in-out infinite;
}

.ai-insight__badge {
  letter-spacing: var(--tracking-wide);
}

.ai-insight__period {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-fast);
}

.ai-insight__period:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.ai-insight__chevron {
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
}

/* Hero stat — oversized Outfit numeral, lowercase unit, trend chip */
.ai-insight__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ai-insight__stat {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.ai-insight__figure {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.ai-insight__unit {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 var(--border-width) rgba(0, 124, 255, 0.08);
}

.ai-insight__unit--critical {
  background: var(--color-error-light);
  color: var(--color-error);
}

.ai-insight__unit--high {
  background: var(--color-attention-light);
  color: var(--color-attention-dark);
}

.ai-insight__unit--medium {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

.ai-insight__unit--low {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.ai-insight__headline {
  font-size: var(--text-xl);
  font-weight: var(--font-regular);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.ai-insight__headline strong {
  font-weight: var(--font-bold);
}

.ai-insight__body {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ai-insight__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ai-insight__support {
  max-width: 32ch;
}

.ai-insight__support .ai-insight__unit {
  max-width: 32ch;
}

.ai-insight__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ai-insight__dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-grey-300);
  transition: var(--transition-base);
  cursor: pointer;
}

.ai-insight__dot--active {
  width: var(--space-6);
  background: var(--color-brand);
}

.ai-insight__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.ai-insight__nav-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.ai-insight__count {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.ai-insight__next {
  appearance: none;
  border: var(--border-width) solid rgba(0, 124, 255, 0.16);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-brand-dark);
  padding: var(--space-1_5) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.ai-insight__next:hover {
  border-color: rgba(0, 124, 255, 0.28);
  background: rgba(255, 255, 255, 0.94);
}

.ai-insight__next:focus-visible,
.ai-insight__dot:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.ai-insight--is-swapping .ai-insight__content {
  animation: ai-insight-content-swap 180ms var(--ease-emphasized);
}

.ai-insight__signal--severity {
  background: rgba(255, 138, 0, 0.14);
  color: var(--color-attention-dark);
  box-shadow: inset 0 0 0 var(--border-width) rgba(255, 138, 0, 0.08);
}

.ai-insight__signal--severity::before {
  background: var(--color-attention);
  box-shadow: 0 0 0 var(--space-1) rgba(255, 138, 0, 0.12);
}

.ai-insight__signal--category {
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-brand-dark);
}

.ai-insight__signal--critical {
  background: var(--color-error-light);
  color: var(--color-error);
  box-shadow: inset 0 0 0 var(--border-width) rgba(255, 59, 48, 0.08);
}

.ai-insight__signal--critical::before {
  background: var(--color-error);
  box-shadow: 0 0 0 var(--space-1) rgba(255, 59, 48, 0.12);
}

.ai-insight__signal--high {
  background: var(--color-attention-light);
  color: var(--color-attention-dark);
  box-shadow: inset 0 0 0 var(--border-width) rgba(255, 138, 0, 0.08);
}

.ai-insight__signal--high::before {
  background: var(--color-attention);
  box-shadow: 0 0 0 var(--space-1) rgba(255, 138, 0, 0.12);
}

.ai-insight__signal--medium {
  background: var(--color-info-light);
  color: var(--color-info-dark);
  box-shadow: inset 0 0 0 var(--border-width) rgba(0, 124, 255, 0.08);
}

.ai-insight__signal--medium::before {
  background: var(--color-info);
  box-shadow: 0 0 0 var(--space-1) rgba(0, 124, 255, 0.1);
}

.ai-insight__signal--low {
  background: var(--color-success-light);
  color: var(--color-success-dark);
  box-shadow: inset 0 0 0 var(--border-width) rgba(40, 167, 69, 0.08);
}

.ai-insight__signal--low::before {
  background: var(--color-success);
  box-shadow: 0 0 0 var(--space-1) rgba(40, 167, 69, 0.1);
}

/* ── MANAGER KPI ACTION STRIP ── */
.manager-kpi-strip {
  margin-bottom: var(--space-8);
}

.manager-kpi-strip__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: stretch;
}

.manager-kpi-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  align-content: start;
  gap: var(--grid-gap);
}

.manager-kpi-card {
  --manager-kpi-accent: var(--color-grey-500);
  --manager-kpi-surface: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  border-radius: var(--radius-xl);
  background: var(--manager-kpi-surface);
}

.manager-kpi-card--risk {
  --manager-kpi-accent: var(--color-error);
  --manager-kpi-surface: var(--color-error-light);
  border-color: var(--color-error-light);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-error-light) 100%);
}

.manager-kpi-card--attention {
  --manager-kpi-accent: var(--color-attention);
  --manager-kpi-surface: var(--color-attention-light);
  border-color: var(--color-attention-light);
}

.manager-kpi-card--info {
  --manager-kpi-accent: var(--color-info);
  --manager-kpi-surface: var(--color-info-light);
  border-color: var(--color-info-light);
}

.manager-kpi-card--neutral {
  --manager-kpi-accent: var(--color-success-dark);
  --manager-kpi-surface: var(--color-success-light);
  border-color: var(--color-success-light);
  background: linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-bg) 58%, var(--color-success-light) 100%);
  grid-column: 1 / -1;
  min-height: calc(var(--space-40) + var(--space-16));
}

.manager-kpi-card--coverage {
  --manager-kpi-accent: var(--color-info);
  --manager-kpi-surface: var(--color-info-light);
  border-color: var(--color-info-light);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-info-light) 100%);
}

.manager-kpi-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.manager-kpi-card__header--coverage {
  align-items: center;
  padding-bottom: var(--space-2);
}

.manager-kpi-card__coverage-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.manager-kpi-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.manager-kpi-card__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.manager-kpi-card__pill--critical {
  background: var(--color-error-light);
  color: var(--color-error);
}

.manager-kpi-card__pill--attention {
  background: var(--color-attention-light);
  color: var(--color-attention-dark);
}

.manager-kpi-card__pill--info {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

.manager-kpi-card__pill--neutral {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.manager-kpi-card__value-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.manager-kpi-card__value-block--risk {
  gap: var(--space-1);
}

.manager-kpi-card__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
}

.manager-kpi-card--risk .manager-kpi-card__value {
  color: var(--color-error);
}

.manager-kpi-card__summary {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.manager-kpi-card__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.manager-kpi-card__delta--critical,
.manager-kpi-card__delta--down {
  color: var(--color-error);
}

.manager-kpi-card__delta--positive,
.manager-kpi-card__delta--up {
  color: var(--color-success-dark);
}

.manager-kpi-card__delta--neutral {
  color: var(--color-text-secondary);
}

.manager-kpi-card__rule {
  height: var(--border-width);
  background: var(--color-border);
}

.manager-kpi-card__list,
.manager-kpi-card__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.manager-kpi-card__stack--compact {
  gap: var(--space-2);
}

.manager-kpi-card__list-row,
.manager-kpi-card__support-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.manager-kpi-card__support-line--inline {
  margin-top: auto;
}

.manager-kpi-card__list-value,
.manager-kpi-card__support-value {
  flex-shrink: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--manager-kpi-accent);
}

.manager-kpi-card__list-label,
.manager-kpi-card__support-label {
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.manager-kpi-ai {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.manager-kpi-ai--compact {
  margin-top: 0;
}

.manager-kpi-ai__icon {
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
}

.manager-kpi-ai__text {
  min-width: 0;
}

.risk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.risk-stack__bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: calc(var(--space-8) + var(--space-1));
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-grey-100);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-border);
}

.risk-stack__segment {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-width: calc(var(--space-16) + var(--space-2));
  padding: var(--space-3) var(--space-3);
  color: var(--color-text-primary);
}

.risk-stack__segment--critical {
  background: var(--color-error);
  color: var(--color-white);
}

.risk-stack__segment--high {
  background: var(--color-attention);
  color: var(--color-text-primary);
}

.risk-stack__segment--medium {
  background: var(--color-warning-light);
  color: var(--color-text-primary);
}

.risk-stack__segment + .risk-stack__segment {
  box-shadow: inset var(--border-width) 0 0 0 rgba(250, 251, 252, 0.35);
}

.risk-stack__segment-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0.88;
}

.risk-stack__segment-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

.manager-kpi-card__note {
  margin: 0;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.manager-kpi-card__note--tight {
  padding-top: 0;
}

.manager-kpi-card__rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.manager-kpi-card__rail-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
}

.manager-kpi-card__progress {
  width: 100%;
  height: var(--size-progress-sm);
  appearance: none;
  border: none;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.manager-kpi-card__progress::-webkit-progress-bar {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.manager-kpi-card__progress::-webkit-progress-value {
  background: var(--color-info);
  border-radius: var(--radius-full);
}

.manager-kpi-card__progress::-moz-progress-bar {
  background: var(--color-info);
  border-radius: var(--radius-full);
}

.coverage-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: 0;
  padding-block: var(--space-1);
}

.coverage-gauge__visual {
  position: relative;
  width: calc(var(--space-40) + var(--space-6));
  min-width: 0;
}

.coverage-gauge__chart {
  display: block;
  width: 100%;
  height: calc(var(--space-20) + var(--space-2));
  overflow: visible;
}

.coverage-gauge__track,
.coverage-gauge__fill {
  fill: none;
  stroke-width: var(--space-4);
  stroke-linecap: round;
}

.coverage-gauge__track {
  stroke: var(--color-border);
}

.coverage-gauge__fill {
  stroke: var(--color-info);
}

.coverage-gauge--success .coverage-gauge__fill {
  stroke: var(--color-success);
}

.coverage-gauge__center {
  position: absolute;
  inset: calc(var(--space-6) + var(--space-1)) 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  pointer-events: none;
}

.coverage-gauge__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
}

.coverage-gauge__value--success {
  color: var(--color-success-dark);
}

.coverage-gauge__caption {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.coverage-gauge__target-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.coverage-gauge__summary-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}

.coverage-gauge__summary-label,
.coverage-gauge__summary-target {
  font-weight: var(--font-medium);
}

.coverage-gauge__summary-divider {
  width: var(--space-4);
  height: var(--border-width);
  background: var(--color-border);
}

.coverage-gauge__critical {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  width: auto;
  max-width: 100%;
  padding: 0;
  color: var(--color-error);
}

.coverage-gauge__alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  color: var(--color-error);
  font-size: var(--text-base);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  flex-shrink: 0;
}

.coverage-gauge__critical-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-error);
}

.coverage-gauge__critical-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.closure-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

.closure-flow__body {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  min-width: 0;
}

/* Simple vertical inverted funnel (bands drawn by JS) */
.closure-flow__funnel {
  flex-shrink: 0;
  width: 46%;
  max-width: var(--space-40);
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: visible;
}

.closure-flow__band--recommended { fill: var(--color-brand-dark); }
.closure-flow__band--followed { fill: var(--color-teal); }
.closure-flow__band--completed { fill: var(--color-success); }

.closure-flow__band-copy {
  fill: var(--color-white);
  text-anchor: middle;
}

.closure-flow__band-stage {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.closure-flow__band-count {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
}

/* Stage legend aligned with the funnel bands */
.closure-flow__legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.closure-flow__stage {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.closure-flow__dot {
  flex-shrink: 0;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-sm);
}

.closure-flow__stage--recommended .closure-flow__dot { background: var(--color-brand-dark); }
.closure-flow__stage--followed .closure-flow__dot { background: var(--color-teal); }
.closure-flow__stage--completed .closure-flow__dot { background: var(--color-success); }

.closure-flow__stage-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.closure-flow__stage-count {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.closure-flow__summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.closure-flow__summary-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.closure-flow__summary-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-success-dark);
}

.closure-flow__summary-delta {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-success-dark);
}

/* ── TODAY'S BRIEF (sticky-note to-do companion to the KPI grid) ── */
/* .card.ai-brief: compound selector beats the later `.card` rule so the
   yellow border + squared fold corner win the specificity tie. */
.card.ai-brief {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: var(--border-width) solid var(--color-warning);
  border-radius: var(--radius-xl);
  border-top-right-radius: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

/* Dog-ear fold (top-right): amber triangle with a lighter inner peel for depth */
.ai-brief::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: var(--space-5);
  border-color: var(--color-warning) var(--color-warning) transparent transparent;
}

.ai-brief::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  border-style: solid;
  border-width: var(--space-4);
  border-color: var(--color-warning-light) var(--color-warning-light) transparent transparent;
}

.ai-brief__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-right: var(--space-6);
}

.ai-brief__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.ai-brief__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.ai-brief__icon {
  width: var(--space-8);
  height: var(--space-8);
  flex-shrink: 0;
  filter: drop-shadow(var(--shadow-sm));
  animation: ai-insight-float var(--duration-pulse) ease-in-out infinite;
}

.ai-brief__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.ai-brief__tag-icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}

.ai-brief__priorities {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-brief__priority {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.ai-brief__priority .priority-badge {
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.ai-brief__desc {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.ai-brief__rec {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.ai-brief__rec::before {
  content: "→ ";
  font-weight: var(--font-semibold);
  color: var(--color-brand);
}

.ai-brief__divider {
  height: var(--border-width);
  background: var(--color-border);
}

.ai-brief__support {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ai-brief__subhead {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ai-brief__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-brief__action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.ai-brief__action-label {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.ai-brief__cta {
  flex-shrink: 0;
}

@keyframes ai-insight-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-3));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ai-insight-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-1 * var(--space-1)));
  }
}

@keyframes ai-insight-content-swap {
  from {
    opacity: 0.55;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-insight,
  .ai-insight__icon,
  .ai-brief__icon,
  .ai-insight--is-swapping .ai-insight__content {
    animation: none;
  }
}

/* ── CARD (reusable component) ── */
.card {
  position: relative;
  background: var(--color-bg);
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-sm);
  padding: var(--card-padding);
  transition: var(--transition-base);
}

/* Interactive cards lift slightly on hover */
.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  box-shadow: var(--shadow-md);
}

/* Flush variant — no padding; for cards with their own header / body / footer */
.card--flush {
  padding: 0;
  overflow: hidden;
}

/* Alert / critical variant — error border + folded top-right corner */
.card--alert {
  border-color: var(--color-error);
}


/* ── ALERT BANNER (reusable notification component) ── */
/* Four semantic variants: --info, --success, --warning, --error             */
/* Usage: <div class="alert-banner alert-banner--warning" role="alert">      */
.alert-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--alert-color);
  background: var(--alert-bg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}

.alert-banner--info {
  --alert-color: var(--color-info);
  --alert-bg: var(--color-info-light);
  --alert-title-color: var(--color-text-primary);
}

.alert-banner--success {
  --alert-color: var(--color-success);
  --alert-bg: var(--color-success-light);
  --alert-title-color: var(--color-success-dark);
}

.alert-banner--warning {
  --alert-color: var(--color-warning-dark);
  --alert-bg: var(--color-warning-light);
  --alert-title-color: var(--color-warning-dark);
}

.alert-banner--error {
  --alert-color: var(--color-error);
  --alert-bg: var(--color-error-light);
  --alert-title-color: var(--color-error);
}

.alert-banner__icon {
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
  color: var(--alert-color);
  margin-top: 2px;
}

.alert-banner__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-right: var(--space-8);
}

.alert-banner__title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--alert-title-color);
  margin: 0;
}

.alert-banner__text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin: 0;
}

.alert-banner__action {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.alert-banner__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--alert-color);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.alert-banner__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.alert-banner__close svg {
  width: 60%;
  height: 60%;
}

/* Nudge banner width tracks the Sales & Liquidity card's width below it —
   same 12-col grid + breakpoints as .portfolio-bento so the two stay aligned. */
.nudge-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.nudge-row .alert-banner {
  grid-column: 1 / span 8;
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  .nudge-row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .nudge-row .alert-banner { grid-column: 1 / span 4; }
}

@media (max-width: 1024px) {
  .nudge-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nudge-row .alert-banner { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .nudge-row { grid-template-columns: minmax(0, 1fr); }
  .nudge-row .alert-banner { grid-column: 1 / -1; }
}

/* Flex column so the footer can pin to the bottom — keeps all cards equal height */
.kpi-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Status accent — drives sparkline, target %, and progress-bar colors */
.kpi-card--success {
  --kpi-accent: var(--color-success);
  --kpi-fill: var(--color-success-light);
}
.kpi-card--info {
  --kpi-accent: var(--color-info);
  --kpi-fill: var(--color-info-light);
}
.kpi-card--warning {
  --kpi-accent: var(--color-warning-dark);
  --kpi-fill: var(--color-warning-light);
}
.kpi-card--error {
  --kpi-accent: var(--color-error);
  --kpi-fill: var(--color-error-light);
}

.kpi-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.kpi-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Circular info glyph next to the label */
.kpi-card__info {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  color: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  font-style: italic;
  cursor: default;
}

/* Value and sparkline sit side by side */
.kpi-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.kpi-card__value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  min-width: 0;
}

/* Mock filled-area sparkline — geometry in markup, colors from status accent */
.kpi-card__spark {
  flex-shrink: 0;
  width: var(--space-16);
  height: var(--space-8);
}

.kpi-card__spark-fill {
  fill: var(--kpi-fill);
  stroke: none;
}

.kpi-card__spark-line {
  fill: none;
  stroke: var(--kpi-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.kpi-card__trend {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.kpi-card__trend--up {
  color: var(--color-success);
}

.kpi-card__trend--down {
  color: var(--color-error);
}

.kpi-card__trend--flat {
  color: var(--color-text-muted);
}

/* Footer pinned to the bottom so every card matches the tallest */
.kpi-card__footer {
  margin-top: auto;
  padding-top: var(--space-4);
}

.kpi-card__divider {
  height: var(--border-width);
  background: var(--color-border);
  margin-bottom: var(--space-3);
}

.kpi-card__target {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.kpi-card__target-label {
  color: var(--color-text-secondary);
}

.kpi-card__target-pct {
  font-weight: var(--font-semibold);
  color: var(--kpi-accent);
}

/* Full-width track with a status-colored fill */
.kpi-card__progress {
  height: 3px;
  background: var(--color-border);
}

.kpi-card__progress-bar {
  height: 100%;
  background: var(--kpi-accent);
}

.kpi-card__progress-bar--p67 {
  width: 67%;
}
.kpi-card__progress-bar--p71 {
  width: 71%;
}
.kpi-card__progress-bar--p80 {
  width: 80%;
}
.kpi-card__progress-bar--p88 {
  width: 87.7%;
}
.kpi-card__progress-bar--p89 {
  width: 89%;
}
.kpi-card__progress-bar--p100 {
  width: 100%;
}

/* ── MERCHANT GROWTH & ENGAGEMENT (combined Activation + Active User Base) ── */
/* Spans the full bottom row of the 2×2 KPI grid. */
.kpi-grid__item--span {
  grid-column: 1 / -1;
}

.growth-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}

.growth-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.growth-panel__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-info-light);
  color: var(--color-info);
}

.growth-panel__icon svg {
  width: 20px;
  height: 20px;
}

.growth-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.growth-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

/* Each metric sub-card */
.growth-metric {
  --growth-accent: var(--color-info);
  --growth-accent-soft: var(--color-info-light);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-5);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.growth-metric--activation {
  --growth-accent: var(--color-success);
  --growth-accent-soft: var(--color-success-light);
}

.growth-metric--active {
  --growth-accent: var(--color-info);
  --growth-accent-soft: var(--color-info-light);
}

.growth-metric__head {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: var(--space-2);
}

.growth-metric__head--between {
  justify-content: space-between;
  gap: var(--space-3);
}

.growth-metric__chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--growth-accent-soft);
  color: var(--growth-accent);
}

.growth-metric__chip svg {
  width: 22px;
  height: 22px;
}

.growth-metric__name {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

.growth-metric__value {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--growth-accent);
}

.growth-metric__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.growth-metric__count {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.growth-metric__trend {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.growth-metric__head--between .growth-metric__trend {
  margin-top: 0;
  flex-shrink: 0;
}

.growth-metric__trend-icon {
  width: 15px;
  height: 15px;
}

.growth-metric__trend--up {
  color: var(--color-success-dark);
  background: var(--color-success-light);
}

.growth-metric__trend--down {
  color: var(--color-error);
  background: var(--color-error-light);
}

.growth-metric__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
}

.growth-metric__content,
.growth-metric__chart-wrap {
  min-width: 0;
}

/* Activation progress bar (mirrors the reference: pct label inside the fill) */
.growth-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.growth-progress__ticks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.growth-progress__tick {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}

.growth-progress__track {
  position: relative;
  height: var(--space-6);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--growth-accent-soft);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-border);
}

.growth-progress__fill {
  width: 0;
  height: 100%;
  min-width: 0;
  border-radius: var(--radius-full);
  background: var(--growth-accent);
  transition: width var(--transition-base);
}

.growth-progress__marker {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.growth-progress__marker-dot {
  display: block;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: calc(var(--border-width) * 3) solid var(--growth-accent);
  box-shadow: var(--shadow-sm);
}

.growth-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.growth-progress__meta-label,
.growth-progress__remaining {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

.growth-progress__meta-label {
  color: var(--color-text-secondary);
}

.growth-progress__remaining {
  color: var(--growth-accent);
  text-align: right;
}

/* Active User Base mini line chart (geometry drawn by JS from data-series) */
.growth-chart {
  width: 100%;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
}

.growth-chart__summary {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.growth-chart__summary-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
}

.growth-chart__summary-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.growth-chart__summary-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-brand-dark);
}

.growth-chart__svg {
  display: block;
  width: 100%;
  aspect-ratio: 620 / 132;
  height: auto;
  overflow: visible;
}

.growth-chart__avg-line,
.growth-chart__today-guide {
  fill: none;
  stroke: var(--color-brand);
}

.growth-chart__avg-line {
  stroke-width: var(--border-width);
  opacity: 0.28;
}

.growth-chart__today-guide {
  stroke-width: calc(var(--border-width) * 2);
  opacity: 0.12;
}

.growth-chart__area {
  fill: var(--color-info-light);
  stroke: none;
}

.growth-chart__line {
  fill: none;
  stroke: var(--color-info);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.growth-chart__marker {
  fill: var(--color-white);
  stroke: var(--color-info);
  stroke-width: 2.5;
}

.growth-chart__marker--today {
  fill: var(--color-info);
  stroke: var(--color-white);
  stroke-width: 2;
}

.growth-chart__axis {
  display: flex;
  margin-top: var(--space-3);
}

.growth-chart__day {
  flex: 1;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}

.growth-chart__day--today {
  color: var(--color-info);
  font-weight: var(--font-bold);
}

.growth-chart__footnote {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.growth-chart__footnote-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-brand);
  flex-shrink: 0;
}

.growth-chart__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.growth-chart__insight {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-brand-dark);
  text-align: right;
}

.growth-chart__insight--down {
  color: var(--color-error);
}

.growth-chart__insight--up {
  color: var(--color-success-dark);
}

/* ── LIQUIDITY & TRANSACTION PERFORMANCE (combined GTV + Float) ── */
/* Spans the full top row of the 2×2 KPI grid (uses .kpi-grid__item--span). */
.liq-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}

.liq-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.liq-panel__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-teal-light);
  color: var(--color-teal);
}

.liq-panel__icon svg {
  width: 20px;
  height: 20px;
}

.liq-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Summary row: two stat chips + utilization donut */
.liq-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-4);
}

.liq-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.liq-stat {
  --liq-accent: var(--color-info);
  --liq-accent-soft: var(--color-info-light);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.liq-stat--float {
  --liq-accent: var(--color-teal);
  --liq-accent-soft: var(--color-teal-light);
}

.liq-stat--gtv {
  --liq-accent: var(--color-info);
  --liq-accent-soft: var(--color-info-light);
}

.liq-stat__chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-md);
  background: var(--liq-accent-soft);
  color: var(--liq-accent);
}

.liq-stat__chip svg {
  width: 22px;
  height: 22px;
}

.liq-stat__name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.liq-stat__value {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

/* Trend line under each stat — mirrors the Revenue at Risk delta treatment. */
.liq-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.liq-stat__delta--up {
  color: var(--color-success-dark);
}

.liq-stat__delta--down {
  color: var(--color-error);
}

.liq-stat__delta--neutral {
  color: var(--color-text-secondary);
}

/* Float utilization donut card */
.liq-util {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-success-light);
  border-radius: var(--radius-lg);
}

.liq-util__ring {
  position: relative;
  flex-shrink: 0;
  width: var(--space-16);
  height: var(--space-16);
}

.liq-util__chart {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.liq-util__track {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 4;
}

.liq-util__fill {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 4;
  stroke-linecap: round;
}

.liq-util__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-success-dark);
}

.liq-util__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.liq-util__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.liq-util__title strong {
  color: var(--color-success-dark);
}

.liq-util__caption {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

/* Dual-series combo chart */
.liq-chart {
  margin-top: var(--space-2);
}

.liq-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
}

.liq-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.liq-chart__swatch {
  display: inline-block;
  flex-shrink: 0;
}

.liq-chart__swatch--float {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--color-teal);
}

.liq-chart__swatch--gtv {
  width: 16px;
  height: 0;
  border-top: 3px solid var(--color-info);
  position: relative;
}

.liq-chart__swatch--gtv::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 2px solid var(--color-info);
  transform: translate(-50%, -50%);
}

.liq-chart__plot {
  position: relative;
}

.liq-chart__axis-title {
  position: absolute;
  top: calc(-1 * var(--space-1));
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.liq-chart__axis-title--left {
  left: 0;
  color: var(--color-teal);
}

.liq-chart__axis-title--right {
  right: 0;
  color: var(--color-info);
}

.liq-chart__svg {
  display: block;
  width: 100%;
  /* Match viewBox aspect → uniform scaling so bars/markers align to labels. */
  aspect-ratio: 640 / 240;
  height: auto;
  margin-top: var(--space-4);
  overflow: visible;
}

.liq-chart__gridline {
  stroke: var(--color-border);
  stroke-width: 1;
}

.liq-chart__gridline--base {
  stroke: var(--color-grey-300);
}

.liq-chart__tick {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--font-medium);
}

.liq-chart__tick--left {
  fill: var(--color-teal);
  text-anchor: start;
}

.liq-chart__tick--right {
  fill: var(--color-info);
  text-anchor: end;
}

.liq-chart__bar {
  fill: var(--color-teal);
  opacity: 0.78;
}

.liq-chart__bar--today {
  opacity: 1;
}

.liq-chart__line {
  fill: none;
  stroke: var(--color-info);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.liq-chart__marker {
  fill: var(--color-white);
  stroke: var(--color-info);
  stroke-width: 2.5;
}

.liq-chart__marker--today {
  fill: var(--color-info);
  stroke: var(--color-white);
  stroke-width: 2;
}

.liq-chart__axis {
  display: flex;
  margin-top: var(--space-2);
}

.liq-chart__day {
  flex: 1;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}

.liq-chart__day--today {
  color: var(--color-info);
  font-weight: var(--font-bold);
}

/* ── STATUS BADGE ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.status-badge--success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.status-badge--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.status-badge--error {
  background: var(--color-error-light);
  color: var(--color-error);
}

.status-badge--info {
  background: var(--color-brand-light);
  color: var(--color-brand);
}

/* ── CONTENT GRID ── */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--grid-gap);
  align-items: start;
}

/* ── PANEL (internal structure; shell comes from .card .card--flush) ── */

.panel__header {
  padding: var(--space-4) var(--card-padding);
  border-bottom: var(--border-width) solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.panel__body {
  padding: var(--space-2) 0;
}

.panel__body--padded {
  padding: var(--card-padding);
}

.panel__footer {
  padding: var(--space-3) var(--card-padding);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: var(--border-width) solid var(--border-color);
}

/* ── FORM CONTROLS ── */
.input,
.select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  transition: var(--transition-fast);
}

.input {
  flex: 1 1 auto;
  min-width: 0;
}

.select {
  flex: 0 0 auto;
  cursor: pointer;
}

.input::placeholder {
  color: var(--color-text-muted);
}

.input:focus,
.select:focus {
  outline: none;
  border-color: var(--color-brand);
}

/* ── OUTLET LIST ── */
.outlet-item {
  display: grid;
  grid-template-columns: var(--space-8) 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--card-padding);
  border-bottom: var(--border-width) solid var(--border-color);
  transition: var(--transition-fast);
}

.outlet-item:hover {
  background: var(--color-grey-50);
}

.outlet-item:last-child {
  border-bottom: none;
}

.outlet-item__rank {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-brand-light);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.outlet-item__rank--rank-1 {
  background: var(--color-error);
  color: var(--color-grey-50);
}

.outlet-item__rank--rank-2 {
  background: var(--color-warning);
  color: var(--color-grey-50);
}

.outlet-item__name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

.outlet-item__location {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.outlet-item__action {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ── PRIORITY OUTLET PANEL (AI-ranked detail list) ── */
.outlet-panel__header {
  align-items: flex-start;
}

.outlet-panel__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ai-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.ai-eyebrow__icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}

/* Priority Outlets — data table */
.outlet-table-wrap {
  overflow-x: auto;
}

.outlet-table {
  width: 100%;
  min-width: calc(var(--space-40) * 6);
  border-collapse: collapse;
}

.outlet-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: var(--border-width) solid var(--border-color);
}

.outlet-table__col-num {
  text-align: center;
}

.outlet-table tbody td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  border-bottom: var(--border-width) solid var(--border-color);
}

.outlet-table tbody tr:last-child td {
  border-bottom: none;
}

/* Row (now a <tr>) hover + active state */
.priority-outlet {
  transition: var(--transition-fast);
  cursor: pointer;
}

.priority-outlet:hover {
  background: var(--color-grey-50);
}

.priority-outlet.ac-row--active {
  background: var(--color-info-light);
}

.priority-outlet.ac-row--active td:first-child {
  box-shadow: inset var(--space-1) 0 0 0 var(--color-brand);
}

.priority-outlet.ac-row--active .outlet-cell__name {
  color: var(--color-brand-dark);
}

/* Rank cell */
.outlet-table__rank {
  white-space: nowrap;
}

.outlet-rank {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.priority-outlet--critical .outlet-rank {
  color: var(--color-error);
}

.priority-outlet--high .outlet-rank {
  color: var(--color-attention-dark);
}

.priority-outlet--medium .outlet-rank {
  color: var(--color-brand);
}

/* Outlet cell — name + one-line reason */
.outlet-table__outlet {
  min-width: 0;
  max-width: 22rem;
}

.outlet-cell__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.outlet-cell__reason {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brief panel open: let the reason wrap so other columns gain width */
/* Revenue at Risk — color carries the band meaning */
.outlet-table__num {
  text-align: center;
}

.outlet-cell__revenue {
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

.outlet-cell__revenue--critical {
  color: var(--color-error);
}

.outlet-cell__revenue--high {
  color: var(--color-attention);
}

.outlet-cell__revenue--medium {
  color: var(--color-info);
}

.outlet-cell__muted {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.outlet-cell__dsp {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Action cell — right-aligned Brief button */
.outlet-table__action {
  text-align: right;
  white-space: nowrap;
}

.outlet-table__col-action,
.outlet-table__action {
  background: transparent;
}

.outlet-table__col-action {
  border-left: var(--border-width) solid var(--border-color);
}

/* Visually-hidden utility (accessible label for icon-only header) */
.u-visually-hidden {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  padding: 0;
  margin: calc(-1 * var(--border-width));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.priority-badge__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.priority-badge--critical {
  background: var(--color-error-light);
  color: var(--color-error);
}

.priority-badge--critical .priority-badge__dot {
  background: var(--color-error);
}

.priority-badge--high {
  background: var(--color-attention-light);
  color: var(--color-attention);
}

.priority-badge--high .priority-badge__dot {
  background: var(--color-attention);
}

.priority-badge--medium {
  background: var(--color-info-light);
  color: var(--color-info);
}

.priority-badge--medium .priority-badge__dot {
  background: var(--color-info);
}

/* ── DSP status badge variants ───────────────────────────────────── */
.priority-badge--dsp-on-track {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}
.priority-badge--dsp-on-track .priority-badge__dot { background: var(--color-success); }

.priority-badge--dsp-watch {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}
.priority-badge--dsp-watch .priority-badge__dot { background: var(--color-warning); }

.priority-badge--dsp-alert {
  background: var(--color-error-light);
  color: var(--color-error);
}
.priority-badge--dsp-alert .priority-badge__dot { background: var(--color-error); }

/* ── DSP roster table rows ────────────────────────────────────────── */
.dsp-roster-row {
  cursor: pointer;
  transition: var(--transition-fast);
}

.dsp-roster-row:hover {
  background: var(--color-grey-50);
}

.dsp-roster-row.ac-row--active {
  background: var(--color-info-light);
}

.dsp-roster-row.ac-row--active td:first-child {
  box-shadow: inset var(--space-1) 0 0 0 var(--color-brand);
}

.dsp-roster-row.ac-row--active .outlet-cell__name {
  color: var(--color-brand-dark);
}

.dsp-roster-row--warning .outlet-rank { color: var(--color-attention-dark); }
.dsp-roster-row--error   .outlet-rank { color: var(--color-error); }

/* ── DSP visit rate cell ─────────────────────────────────────────── */
.dsp-table__visit-cell {
  min-width: 10rem;
}

.dsp-visit-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dsp-visit-bar .roster-row__bar {
  flex: 1 1 0;
  min-width: 4rem;
}

.btn--brief {
  background: var(--color-brand);
  color: var(--color-grey-50);
  border-color: var(--color-brand);
}

.btn--brief:hover {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: var(--color-grey-50);
}

.outlet-panel__footer {
  border-top: var(--border-width) solid var(--border-color);
}

/* ── PII MASK (manager sees redacted contact fields) ── */
.pii-mask {
  display: inline-block;
  width: 120px;
  height: 10px;
  background: var(--color-grey-300);
  border-radius: var(--radius-sm);
  margin-top: var(--space-1);
}

/* ── MANAGER ACTION CENTER ── */
.action-center {
  margin-bottom: var(--space-8);
}

.action-center__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.action-center__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.action-center__rule {
  flex: 1;
  height: 0;
  border-top: var(--border-width) solid var(--color-border);
}

.action-center__alert {
  background: var(--color-error-light);
  color: var(--color-error);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

/* Stat strip */
.action-stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  margin-bottom: var(--space-6);
}

/* Reuses the .card component (border, shadow, padding) for KPI-card parity */
.action-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
}

.action-stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.action-stat--danger .action-stat__value {
  color: var(--color-error);
}

.action-stat--warning .action-stat__value {
  color: var(--color-warning-dark);
}

.action-stat__label {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

.action-stat__source {
  font-family: var(--font-mono);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Outlet-health donut tile — one half of the 50/50 Action Center row */
.action-stat--health {
  gap: var(--space-4);
}

.action-stat__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
}

/* Card head: title + healthy-share headline for an instant gut-check */
.health-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.health-head__pct {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-success);
}

.health-donut {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.health-donut__detail {
  flex: 1;
}

/* Ring + center number share a square box; number is an HTML overlay so it
   sizes from rem tokens instead of the SVG's 42-unit user space. */
.health-donut__ring {
  position: relative;
  flex-shrink: 0;
  width: var(--space-28);
  height: var(--space-28);
}

.health-donut__chart {
  display: block;
  width: 100%;
  height: 100%;
}

.health-donut__track {
  fill: none;
  stroke: transparent;
  stroke-width: 5;
}

/* Gap = 100 − seg-len so the pattern period equals the circumference (100).
   This makes each segment tile exactly once around the ring — the colored
   arc + its gap add up to 100, so the pattern never shows a second colored
   repeat and never leaves an uncovered hole. The healthy segment therefore
   wraps to fill the upper portion that was previously empty. */
.health-donut__seg {
  fill: none;
  stroke-width: 5;
  stroke-linecap: butt;
  stroke-dasharray: var(--seg-len) var(--seg-gap);
  transition: stroke-width var(--transition-base),
    opacity var(--transition-base);
}

.health-donut__seg--healthy {
  --seg-len: 67;
  --seg-gap: 33;
  stroke: var(--color-success);
}

.health-donut__seg--watch {
  --seg-len: 18;
  --seg-gap: 82;
  stroke: var(--color-warning);
}

.health-donut__seg--atrisk {
  --seg-len: 11;
  --seg-gap: 89;
  stroke: var(--color-attention);
}

.health-donut__seg--critical {
  --seg-len: 4;
  --seg-gap: 96;
  stroke: var(--color-error);
}

.health-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: var(--leading-tight);
  pointer-events: none;
}

.health-donut__total {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.health-donut__caption {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.health-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.health-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.health-legend__item:hover {
  background: var(--color-grey-100);
}

.health-legend__dot {
  flex-shrink: 0;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-full);
}

.health-legend__dot--healthy {
  background: var(--color-success);
}

.health-legend__dot--watch {
  background: var(--color-warning);
}

.health-legend__dot--atrisk {
  background: var(--color-attention);
}

.health-legend__dot--critical {
  background: var(--color-error);
}

.health-legend__label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.health-legend__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

/* Footer cue pointing at the unhealthy slice */
.health-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-error);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.health-cta:hover {
  gap: var(--space-2);
}

/* ── OUTLET HEALTH HERO (playful donut variant) ── */

/* Strip becomes single-column when DSP card is removed */
.action-stat-strip--solo {
  grid-template-columns: 1fr;
  max-width: 360px;
}

/* Card: vertical stack, centred content */
.health-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--card-padding);
}

.health-card__head {
  width: 100%;
}

.health-card__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
}

/* Centres the ring in the card */
.health-card__donut-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-2) 0;
}

/* Hero ring size — scoped so the base .health-donut__ring is untouched */
.health-donut__ring--hero {
  width: var(--space-40);
  height: var(--space-40);
}

/* Rounded caps + thicker stroke for the playful look */
.health-donut__ring--hero .health-donut__seg {
  stroke-linecap: round;
  stroke-width: 7;
}

.health-donut__ring--hero .health-donut__track {
  stroke: var(--color-grey-100);
  stroke-width: 7;
}

/* Reduce seg lengths slightly so rounded caps don't overlap adjacent arcs */
.health-donut__ring--hero .health-donut__seg--healthy  { --seg-len: 64; --seg-gap: 36; }
.health-donut__ring--hero .health-donut__seg--watch    { --seg-len: 16; --seg-gap: 84; }
.health-donut__ring--hero .health-donut__seg--atrisk   { --seg-len:  9; --seg-gap: 91; }
.health-donut__ring--hero .health-donut__seg--critical { --seg-len:  3; --seg-gap: 97; }

/* Larger centre number for the bigger ring */
.health-donut__total--hero {
  font-size: var(--text-3xl);
}

/* 2×2 pill-badge legend */
.health-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  width: 100%;
}

.health-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
}

.health-pill__count {
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
}

.health-pill__label {
  font-weight: var(--font-medium);
}

.health-pill--healthy  { background: var(--color-success-light);   color: var(--color-success-dark); }
.health-pill--watch    { background: var(--color-warning-light);   color: var(--color-warning-dark); }
.health-pill--atrisk   { background: var(--color-attention-light); color: var(--color-attention-dark); }
.health-pill--critical { background: var(--color-error-light);     color: var(--color-error); }

/* ── Risk Movement + Top Risk Drivers summary cards ── */
.risk-move-card,
.risk-drivers-card {
  position: relative;
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  overflow: hidden;
}

.risk-move-card::before,
.risk-drivers-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--space-1);
  background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-attention) 100%);
}

.risk-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.risk-card__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Risk Movement — 4-up stat grid */
.risk-move-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
}

.risk-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  gap: var(--space-1);
  min-height: calc(var(--space-10) + var(--space-6));
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.risk-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

.risk-stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.risk-stat__value--critical { color: var(--color-error); }
.risk-stat__value--up       { color: var(--color-success); }
.risk-stat__value--atrisk   { color: var(--color-attention); }

/* Top Risk Drivers — label | bar | pct rows */
.risk-driver-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.risk-driver {
  display: grid;
  grid-template-columns: var(--space-28) 1fr auto;
  align-items: center;
  gap: var(--space-2);
}

.risk-driver__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

.risk-driver__bar {
  height: var(--space-2);
  background: var(--color-grey-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.risk-driver__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
}

.risk-driver__fill--critical { background: var(--color-error); }
.risk-driver__fill--atrisk   { background: var(--color-attention); }
.risk-driver__fill--neutral  { background: var(--color-grey-400); }
.risk-driver__fill--w48 { width: 48%; }
.risk-driver__fill--w28 { width: 28%; }
.risk-driver__fill--w16 { width: 16%; }
.risk-driver__fill--w8  { width: 8%; }

.risk-driver__pct {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  text-align: right;
}

/* Kill all animation on the hero variant — static donut, no draw-on */
.health-donut__ring--hero .health-donut__seg,
.health-donut__ring--hero .health-donut__center {
  animation: none;
}

/* Pill hover feedback: scale active pill, fade siblings */
.health-pill {
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.health-card:has(.health-pill:hover) .health-pill:not(:hover) {
  opacity: 0.55;
}

.health-pill:hover {
  transform: scale(1.04);
}

/* Pill → slice: fade non-active segments, thicken the active one */
.health-card:has(.health-pill--healthy:hover) .health-donut__seg:not(.health-donut__seg--healthy),
.health-card:has(.health-pill--watch:hover) .health-donut__seg:not(.health-donut__seg--watch),
.health-card:has(.health-pill--atrisk:hover) .health-donut__seg:not(.health-donut__seg--atrisk),
.health-card:has(.health-pill--critical:hover) .health-donut__seg:not(.health-donut__seg--critical) {
  opacity: 0.2;
  transition: opacity var(--transition-fast);
}

.health-card:has(.health-pill--healthy:hover) .health-donut__seg--healthy,
.health-card:has(.health-pill--watch:hover) .health-donut__seg--watch,
.health-card:has(.health-pill--atrisk:hover) .health-donut__seg--atrisk,
.health-card:has(.health-pill--critical:hover) .health-donut__seg--critical {
  stroke-width: 9;
  transition: stroke-width var(--transition-fast);
}

/* Hover a legend row → emphasize its arc, recede the others. */
.health-donut:has(.health-legend__item--healthy:hover) .health-donut__seg:not(.health-donut__seg--healthy),
.health-donut:has(.health-legend__item--watch:hover) .health-donut__seg:not(.health-donut__seg--watch),
.health-donut:has(.health-legend__item--atrisk:hover) .health-donut__seg:not(.health-donut__seg--atrisk),
.health-donut:has(.health-legend__item--critical:hover) .health-donut__seg:not(.health-donut__seg--critical) {
  opacity: 0.3;
}

.health-donut:has(.health-legend__item--healthy:hover) .health-donut__seg--healthy,
.health-donut:has(.health-legend__item--watch:hover) .health-donut__seg--watch,
.health-donut:has(.health-legend__item--atrisk:hover) .health-donut__seg--atrisk,
.health-donut:has(.health-legend__item--critical:hover) .health-donut__seg--critical {
  stroke-width: 7;
}

/* Animated draw property — typed so it interpolates. */
@property --health-dash {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@keyframes health-draw {
  from {
    --health-dash: 0;
  }
}

@keyframes health-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

/* Subtle heartbeat on the critical arc — draws the eye to the unhealthy slice. */
@keyframes health-pulse {
  50% {
    stroke-width: 6.2;
  }
}

/* The orchestrated reveal only runs when motion is welcome; otherwise the
   resting styles above render the donut fully drawn. */
@media (prefers-reduced-motion: no-preference) {
  .health-donut__seg {
    animation: health-draw var(--duration-draw) var(--ease-emphasized) both;
  }

  .health-donut__center {
    animation: health-rise var(--duration-rise) var(--ease-emphasized) both;
    animation-delay: calc(var(--delay-step) * 3);
  }

  .health-legend__item {
    animation: health-rise var(--duration-rise) var(--ease-emphasized) both;
  }

  .health-legend__item:nth-child(1) {
    animation-delay: calc(var(--delay-step) * 1);
  }

  .health-legend__item:nth-child(2) {
    animation-delay: calc(var(--delay-step) * 2);
  }

  .health-legend__item:nth-child(3) {
    animation-delay: calc(var(--delay-step) * 3);
  }

  .health-legend__item:nth-child(4) {
    animation-delay: calc(var(--delay-step) * 4);
  }

  /* Critical arc draws on with the rest, then settles into a slow pulse. */
  .health-donut__seg--critical {
    animation: health-draw var(--duration-draw) var(--ease-emphasized) both,
      health-pulse var(--duration-pulse) ease-in-out infinite;
    animation-delay: calc(var(--delay-step) * 3),
      calc(var(--delay-step) * 4 + var(--duration-draw));
  }
}

/* Two-panel grid + shared bits */
.action-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--grid-gap);
  align-items: stretch;
}

/* Equal-height panels: each card is a flex column so its body absorbs the
   surplus height and the trailing footer/footnote pins to the bottom. */
.action-grid > .panel {
  display: flex;
  flex-direction: column;
}

.action-grid .panel__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Panel B's footnote lives inside the body — push it to the card bottom
   (Panel A's footer is already outside the body, so it pins naturally). */
.action-grid .breakdown-footnote {
  margin-top: auto;
}

.panel__title--icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.panel__title--lg {
  font-size: var(--text-xl);
}

/* Title + AI chip on one row */
.outlet-panel__heading-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-brand-light);
  color: var(--color-brand);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.ai-chip__icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}

/* Priority Outlets sort control */
.outlet-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.outlet-sort__label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.outlet-health-strip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--card-padding) var(--space-4);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  border-bottom: var(--border-width) solid var(--color-border);
}

.outlet-health-strip__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.outlet-health-strip__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.outlet-health-strip__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.outlet-health-strip__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.outlet-health-strip__summary {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-error-light);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-error);
  white-space: nowrap;
}

.outlet-health-strip__bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-grey-200);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-border);
}

.outlet-health-strip__segment {
  min-width: var(--space-2);
}

.outlet-health-strip__segment--healthy {
  flex: 134 1 0;
  background: var(--color-success-dark);
}

.outlet-health-strip__segment--watch {
  flex: 36 1 0;
  background: var(--color-warning-dark);
}

.outlet-health-strip__segment--atrisk {
  flex: 22 1 0;
  background: var(--color-attention);
}

.outlet-health-strip__segment--critical {
  flex: 8 1 0;
  background: var(--color-error);
}

.outlet-health-strip__legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.outlet-health-strip__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-bg);
}

.outlet-health-strip__dot {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.outlet-health-strip__dot--healthy {
  background: var(--color-success-dark);
}

.outlet-health-strip__dot--watch {
  background: var(--color-warning-dark);
}

.outlet-health-strip__dot--atrisk {
  background: var(--color-attention);
}

.outlet-health-strip__dot--critical {
  background: var(--color-error);
}

.outlet-health-strip__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.outlet-health-strip__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.panel__title-icon {
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
}

.btn--square {
  border-radius: 0;
}

.action-count {
  min-width: var(--space-5);
  justify-content: center;
}

/* Panel A — DSP intervention flag rows */
.flag-row {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr) var(--space-20) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--card-padding);
  border-bottom: var(--border-width) solid var(--border-color);
}

.flag-row:last-child {
  border-bottom: none;
}

.flag-row__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.flag-row__avatar--danger {
  background: var(--color-error-light);
  color: var(--color-error);
}

.flag-row__avatar--warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.flag-row__avatar--success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.flag-row__info {
  min-width: 0;
}

.flag-row__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.flag-row__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flag-row__bar {
  height: 6px;
  background: var(--color-grey-200);
  border-radius: 0;
  overflow: hidden;
}

.flag-row__bar-fill {
  height: 100%;
  border-radius: 0;
}

.flag-row__bar-fill--danger {
  background: var(--color-error);
}

.flag-row__bar-fill--warning {
  background: var(--color-warning-dark);
}

.flag-row__bar-fill--success {
  background: var(--color-success);
}

.flag-row__bar-fill--w45 {
  width: 45%;
}
.flag-row__bar-fill--w61 {
  width: 61%;
}
.flag-row__bar-fill--w78 {
  width: 78%;
}
.flag-row__bar-fill--w85 {
  width: 85%;
}
.flag-row__bar-fill--w92 {
  width: 92%;
}

.flag-row__pct {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-align: right;
}

.flag-row__pct--danger {
  color: var(--color-error);
}

.flag-row__pct--warning {
  color: var(--color-warning-dark);
}

.flag-row__pct--success {
  color: var(--color-success);
}

/* Italic variant of the shared panel footer — DSP intervention flags note */
.panel__footer--note {
  font-style: italic;
}

/* Panel B — breakdown rows */
.breakdown-row {
  display: grid;
  grid-template-columns: var(--space-20) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.breakdown-row__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.breakdown-row__label--danger {
  color: var(--color-error);
}

.breakdown-row__label--warning {
  color: var(--color-warning-dark);
}

.breakdown-row__label--info {
  color: var(--color-info);
}

.breakdown-row__label--neutral {
  color: var(--color-text-muted);
}

.breakdown-row__bar {
  height: 6px;
  background: var(--color-grey-200);
  border-radius: 0;
  overflow: hidden;
}

.breakdown-row__bar-fill {
  height: 100%;
  border-radius: 0;
}

.breakdown-row__bar-fill--danger {
  background: var(--color-error);
}

.breakdown-row__bar-fill--warning {
  background: var(--color-warning-dark);
}

.breakdown-row__bar-fill--info {
  background: var(--color-info);
}

.breakdown-row__bar-fill--neutral {
  background: var(--color-grey-500);
}

.breakdown-row__bar-fill--w25 {
  width: 25%;
}
.breakdown-row__bar-fill--w50 {
  width: 50%;
}
.breakdown-row__bar-fill--w75 {
  width: 75%;
}

.breakdown-row__count {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.breakdown-row__note {
  min-width: var(--space-16);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: right;
}

/* Panel B — divider, sub-section, visit cells, footnote */
.action-divider {
  height: 0;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-4) 0;
}

.breakdown-subtitle {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.visit-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.visit-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: 0;
}

.visit-cell--danger {
  background: var(--color-error-light);
}

.visit-cell--warning {
  background: var(--color-warning-light);
}

.visit-cell--neutral {
  background: var(--color-grey-100);
}

.visit-cell__value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.visit-cell--danger .visit-cell__value {
  color: var(--color-error);
}

.visit-cell--warning .visit-cell__value {
  color: var(--color-warning-dark);
}

.visit-cell__label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.breakdown-footnote {
  margin-top: var(--space-4);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── DSP VISIT RATE PERFORMANCE ROSTER PANEL ── */
.roster-panel__header {
  flex-wrap: wrap;
  gap: var(--space-3);
}

.roster-panel__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.roster-panel__icon {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.roster-panel__subtitle {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-secondary);
}

.roster-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.roster-panel__menu {
  min-width: var(--space-8);
  justify-content: center;
}

/* Summary stat tiles */
.roster-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  padding: var(--card-padding);
}

.action-stat__value-sub {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}

/* Toolbar */
.roster-panel__search {
  flex: 1 1 auto;
  min-width: calc(var(--space-20) * 2);
  max-width: calc(var(--space-20) * 3);
}

/* Status legend */
.roster-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  border-left: var(--space-1) solid var(--color-border);
  padding-left: var(--space-4);
}

.roster-legend__label {
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

.roster-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.roster-legend__item::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
}

.roster-legend__item--success::before {
  background: var(--color-success);
}

.roster-legend__item--warning::before {
  background: var(--color-warning-dark);
}

.roster-legend__item--error::before {
  background: var(--color-error);
}

/* Roster rows */
.roster-row {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--card-padding);
  border-bottom: var(--border-width) solid var(--border-color);
}

.roster-row:last-child {
  border-bottom: none;
}

.roster-row__info {
  min-width: 0;
}

.roster-row__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.roster-row__icon {
  flex-shrink: 0;
}

.roster-row__icon--top {
  color: var(--color-warning-dark);
}

.roster-row__icon--alert {
  color: var(--color-error);
}

.roster-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.roster-chip {
  padding: 2px var(--space-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: 0;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.roster-chip--critical {
  border-color: var(--color-error);
  color: var(--color-error);
  background: var(--color-error-light);
}

.roster-row__metric {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.roster-row__visits {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.roster-row__visits strong {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.roster-row__bar {
  flex: none;
  width: calc(var(--space-20) * 2);
  height: 6px;
  background: var(--color-grey-200);
  border-radius: 0;
  overflow: hidden;
}

.roster-row__bar-fill {
  height: 100%;
  border-radius: 0;
}

.roster-row__bar-fill--success {
  background: var(--color-success);
}

.roster-row__bar-fill--warning {
  background: var(--color-warning-dark);
}

.roster-row__bar-fill--error {
  background: var(--color-error);
}

.roster-row__bar-fill--w45 {
  width: 45%;
}
.roster-row__bar-fill--w61 {
  width: 61%;
}
.roster-row__bar-fill--w78 {
  width: 78%;
}
.roster-row__bar-fill--w85 {
  width: 85%;
}
.roster-row__bar-fill--w92 {
  width: 92%;
}

.roster-row__pct {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  white-space: nowrap;
}

.roster-row__pct--success {
  color: var(--color-success);
}

.roster-row__pct--warning {
  color: var(--color-warning-dark);
}

.roster-row__pct--error {
  color: var(--color-error);
}

.roster-row__risk-line {
  font-size: var(--text-xs);
  color: var(--color-danger);
  font-weight: var(--font-medium);
  margin-top: var(--space-1);
}

/* Summary bar */
.roster-panel__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--card-padding);
  border-top: var(--border-width) solid var(--border-color);
  font-size: var(--text-sm);
}

.roster-panel__summary-text {
  color: var(--color-text-secondary);
}

.roster-panel__view-link {
  color: var(--color-brand);
  font-weight: var(--font-medium);
  text-decoration: none;
}

.roster-panel__view-link:hover {
  text-decoration: underline;
}

.roster-panel__footer {
  font-style: italic;
  border-top: none;
  padding-top: 0;
}

@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  /* Action Center panels stack on tablet */
  .action-grid {
    grid-template-columns: 1fr;
  }

  .navbar {
    flex-wrap: wrap;
  }

  /* Metrics layout stacks: AI Insight drops below the 2×2 KPI grid */
  .metrics-layout {
    grid-template-columns: 1fr;
  }

  /* AI Brief drops below the 2×2 KPI grid */
  .manager-kpi-strip__layout {
    grid-template-columns: 1fr;
  }

  .manager-kpi-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .navbar__nav {
    flex-wrap: wrap;
  }

  .navbar__status {
    display: none;
  }

  .page-header {
    flex-direction: column;
  }

  .page-header__actions {
    flex-wrap: wrap;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Growth panel: stack Activation + Active User Base when space is tight */
  .growth-panel__grid {
    grid-template-columns: 1fr;
  }

  /* Liquidity panel: donut drops below the stat chips; chips go full width */
  .liq-summary {
    flex-direction: column;
  }

  .liq-stats {
    flex-direction: column;
  }

  .liq-stat {
    width: 100%;
  }

  .manager-kpi-strip__grid {
    grid-template-columns: 1fr;
  }

  .manager-kpi-card__split {
    grid-template-columns: 1fr;
  }

  .manager-kpi-card__split-divider {
    width: 100%;
    height: var(--border-width);
  }

  .manager-kpi-card--neutral {
    min-height: auto;
  }

  .roster-stat-strip {
    grid-template-columns: 1fr;
  }

  .roster-row {
    grid-template-columns: var(--space-8) minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar info badge"
      "avatar metric metric";
    row-gap: var(--space-2);
  }

  .roster-row .flag-row__avatar {
    grid-area: avatar;
  }

  .roster-row__info {
    grid-area: info;
  }

  .roster-row__metric {
    grid-area: metric;
  }

  .roster-row .status-badge {
    grid-area: badge;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .action-stat-strip {
    grid-template-columns: 1fr;
  }
}

/* ── NAVBAR DIVIDER ── */
.navbar__divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* ── NOTIFICATION BELL ── */
.nav-icon-wrap {
  position: relative;
}

.nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-grey-100);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-icon-btn svg {
  width: 18px;
  height: 18px;
}

.nav-icon-btn:hover {
  background: var(--color-grey-200);
  color: var(--color-text-primary);
}

.nav-icon-btn__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--color-error);
  color: #fff;
  font-size: 9px;
  font-weight: var(--font-bold);
  line-height: 14px;
  text-align: center;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-bg);
  pointer-events: none;
}

/* ── AVATAR DROPDOWN (nav-user) ── */
.nav-user {
  position: relative;
}

.nav-user__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-user__trigger:hover {
  background: var(--color-grey-100);
  box-shadow: var(--shadow-sm);
}

.nav-user__avatar {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.nav-user__info {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
}

.nav-user__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.nav-user__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.nav-user__chevron {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.nav-user__trigger[aria-expanded="true"] .nav-user__chevron {
  transform: rotate(180deg);
}

/* ── DROPDOWN MENU ── */
.nav-user__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 220px;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
  animation: menu-drop 160ms var(--ease-emphasized) both;
}

@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nav-user__menu-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
}

.nav-user__menu-avatar {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.nav-user__menu-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.nav-user__menu-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.nav-user__menu-divider {
  height: var(--border-width);
  background: var(--color-border);
  margin: 0;
}

.nav-user__menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-user__menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.nav-user__menu-item:hover {
  background: var(--color-grey-50);
  color: var(--color-text-primary);
}

.nav-user__menu-item--logout {
  color: var(--color-error);
}

.nav-user__menu-item--logout:hover {
  background: var(--color-error-light);
  color: var(--color-error);
}

.nav-user__menu-item--logout svg {
  color: var(--color-error);
}

/* ─────────────────────────────────────────────────
   MANAGER DASHBOARD
   ───────────────────────────────────────────────── */

/* ── DASHBOARD FONT OVERRIDE ── */
.navbar,
.main-content,
.page-header__title,
.kpi-card__value,
.action-stat__value {
  font-family: var(--font-display);
}

/* ── KPI CARD ENHANCEMENTS ── */
.kpi-card {
  border-radius: var(--radius-lg);
  border: none;
  background: var(--color-bg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.kpi-card:hover {
  transform: translateY(calc(-1 * var(--motion-lift-sm)));
  box-shadow: var(--shadow-lg);
}

.kpi-card__value {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tighter);
}

.kpi-card--error .kpi-card__value {
  color: var(--color-error);
}

.kpi-card__progress {
  height: var(--size-progress-sm);
  border-radius: var(--radius-full);
}

.kpi-card__progress-bar {
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
}

.kpi-card__target-pct {
  color: var(--color-text-secondary);
}

/* Shimmer on progress bar */
@media (prefers-reduced-motion: no-preference) {
  .kpi-card__progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: bar-shimmer 2.4s ease-in-out infinite;
    animation-delay: 0.8s;
  }
  @keyframes bar-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
}

/* ── KPI STAGGERED ENTRANCE ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes kpi-rise {
    from { opacity: 0; transform: translateY(var(--motion-rise-md)); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .kpi-grid__item {
    animation: kpi-rise 420ms var(--ease-emphasized) both;
  }
  .kpi-grid__item[data-kpi-index="1"] { animation-delay: 0ms; }
  .kpi-grid__item[data-kpi-index="2"] { animation-delay: 70ms; }
  .kpi-grid__item[data-kpi-index="3"] { animation-delay: 140ms; }
  .kpi-grid__item[data-kpi-index="4"] { animation-delay: 210ms; }
  .kpi-grid__item[data-kpi-index="5"] { animation-delay: 280ms; }
}

/* ── CARD RADIUS UPGRADE ── */
.card {
  border-radius: var(--radius-lg);
}

.card--flush {
  overflow: hidden;
}

/* ── NAVBAR ENHANCEMENTS ── */
.navbar {
  box-shadow: var(--shadow-navbar);
  border-bottom: none;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.navbar__logo-mark {
  width: var(--size-logo);
  height: var(--size-logo);
  flex-shrink: 0;
}

.navbar__logo {
  font-family: var(--font-display);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
}

/* Tab-style active link */
.navbar__link {
  font-family: var(--font-display);
  border-radius: 0;
  border-bottom: calc(var(--border-width) * 2) solid transparent;
  padding-bottom: calc(var(--space-2) - calc(var(--border-width) * 2));
}

.navbar__link--active {
  background: transparent;
  border-color: transparent;
  border-bottom: calc(var(--border-width) * 2) solid var(--color-brand);
  color: var(--color-brand);
  border-radius: 0;
}

.navbar__link:hover {
  background: transparent;
  color: var(--color-text-primary);
  border-bottom-color: var(--color-grey-300);
}

.navbar__avatar {
  background: var(--color-brand);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.navbar__btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: var(--border-width) solid var(--color-border);
}

.navbar__btn--ghost:hover {
  background: var(--color-grey-50);
  color: var(--color-text-primary);
}

/* ── PAGE HEADER REVEAL ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes section-rise {
    from { opacity: 0; transform: translateY(var(--motion-rise-sm)); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .page-header {
    animation: section-rise 380ms var(--ease-emphasized) both;
  }

  .alert-banner {
    animation: section-rise 380ms var(--ease-emphasized) 360ms both;
  }

  .action-center {
    animation: section-rise 380ms var(--ease-emphasized) 440ms both;
  }

  .roster-panel {
    animation: section-rise 380ms var(--ease-emphasized) 520ms both;
  }
}

/* ── ACTION CENTER ENHANCEMENTS ── */
.action-center__eyebrow {
  color: var(--color-brand);
  border-left: calc(var(--border-width) * 3) solid var(--color-brand);
  padding-left: var(--space-3);
}

.action-center__rule {
  border-color: var(--color-brand);
  opacity: 0.15;
}

/* Danger stat: urgent gradient background */
.action-stat--danger {
  background: linear-gradient(135deg, var(--color-error-light) 0%, var(--color-bg) 100%);
  border-color: var(--color-error);
}

.action-stat--danger .action-stat__value {
  font-size: var(--text-4xl);
  font-family: var(--font-display);
  font-weight: var(--font-extrabold);
}

/* ── BREAKDOWN BARS — taller, rounded ── */
.breakdown-row__bar {
  height: var(--space-2);
  border-radius: var(--radius-full);
}

.breakdown-row__bar-fill {
  border-radius: var(--radius-full);
}

/* ── VISIT CELLS — rounded ── */
.visit-cell {
  border-radius: var(--radius-md);
}

/* ── PRIORITY OUTLET SCORE — circular badge ── */
.priority-outlet__num {
  background: var(--color-grey-100);
  border-radius: var(--radius-full);
  width: var(--space-10);
  height: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
}

.priority-outlet--critical .priority-outlet__num {
  background: var(--color-error-light);
  color: var(--color-error);
}

.priority-outlet--high .priority-outlet__num {
  background: var(--color-attention-light);
  color: var(--color-attention);
}

.priority-outlet--medium .priority-outlet__num {
  background: var(--color-info-light);
  color: var(--color-info);
}

/* ── ROSTER CHIPS — pill style ── */
.roster-chip {
  border-radius: var(--radius-full);
}

/* ── FLAG ROW AVATAR — use shared avatar class ── */
.flag-row__avatar--success {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
}

.flag-row__avatar--warning {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
}

.flag-row__avatar--danger {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
}

/* ── ROSTER BARS — rounded ── */
.roster-row__bar {
  border-radius: var(--radius-full);
}

.roster-row__bar-fill {
  border-radius: var(--radius-full);
}

/* ── AI INSIGHT CARD — LOCAL FEATURE UPGRADE ── */
.ai-insight {
  isolation: isolate;
  border: var(--border-width) solid rgba(0, 124, 255, 0.18);
  background:
    radial-gradient(circle at top right, rgba(0, 124, 255, 0.24) 0, transparent 42%),
    radial-gradient(circle at bottom left, rgba(255, 138, 0, 0.16) 0, transparent 34%),
    linear-gradient(155deg, var(--color-ai-bg-from) 0%, var(--color-ai-bg-mid) 48%, var(--color-ai-bg-to) 100%);
  box-shadow: var(--shadow-ai-insight);
}

.ai-insight::before {
  height: var(--space-1);
  background: linear-gradient(90deg, rgba(0, 124, 255, 0) 0%, var(--color-brand) 30%, var(--color-attention) 78%, rgba(255, 138, 0, 0) 100%);
  opacity: 0.95;
}

.ai-insight::after {
  content: "";
  position: absolute;
  inset: auto -12% -24% auto;
  width: var(--size-orb);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background:
    radial-gradient(circle, rgba(0, 124, 255, 0.18) 0%, rgba(0, 124, 255, 0.08) 36%, rgba(0, 124, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.ai-insight > * {
  position: relative;
  z-index: 1;
}

.ai-insight__top {
  align-items: flex-start;
  gap: var(--space-3);
}

.ai-insight__eyebrow {
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-brand-dark);
  box-shadow: inset 0 0 0 var(--border-width) rgba(0, 124, 255, 0.08);
}

.ai-insight__icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}

.ai-insight__badge {
  background: rgba(0, 124, 255, 0.12);
  color: var(--color-brand-dark);
  border-color: rgba(0, 124, 255, 0.16);
}

.ai-insight__period {
  padding: calc(var(--space-1) + var(--border-width)) var(--space-3);
  border-color: rgba(0, 124, 255, 0.14);
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-brand-dark);
  box-shadow: inset 0 0 0 var(--border-width) rgba(255, 255, 255, 0.5);
}

.ai-insight__period:hover {
  border-color: rgba(0, 124, 255, 0.28);
  background: rgba(255, 255, 255, 0.94);
}

.ai-insight__stat {
  gap: var(--space-2) var(--space-4);
}

.ai-insight__figure {
  color: var(--color-brand-navy);
  text-shadow: var(--text-shadow-ai-figure);
}

.ai-insight__unit {
  padding: var(--size-progress-sm) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 138, 0, 0.14);
  color: var(--color-attention-dark);
}

.ai-insight__headline {
  max-width: 18ch;
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
}

.ai-insight__headline strong {
  color: var(--color-brand-navy);
}

.ai-insight__body {
  max-width: 34ch;
  margin: 0;
  color: var(--color-grey-700);
}

.ai-insight__signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ai-insight__signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2_5) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 var(--border-width) rgba(0, 124, 255, 0.08);
}

.ai-insight__signal::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-brand);
  box-shadow: 0 0 0 var(--space-1) rgba(0, 124, 255, 0.1);
  flex-shrink: 0;
}

.ai-insight__signal--priority::before {
  background: var(--color-attention);
  box-shadow: 0 0 0 var(--space-1) rgba(255, 138, 0, 0.12);
}

.ai-insight__dots {
  padding-top: var(--space-2);
}

.ai-insight__dot {
  background: rgba(0, 51, 160, 0.14);
}

.ai-insight__dot--active {
  background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-attention) 100%);
}

/* ── EXECUTIVE OVERVIEW ── */
.executive-overview {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(var(--space-40), 1fr);
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-8);
}

.executive-overview .metrics-layout,
.executive-overview .manager-kpi-strip,
.executive-overview .manager-kpi-strip__layout {
  display: contents;
  margin: 0;
}

.executive-overview .manager-kpi-strip__grid {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.executive-overview .kpi-grid {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.executive-overview .ai-brief {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.executive-overview .ai-insight {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

.executive-overview .kpi-grid__item--span,
.executive-overview .manager-kpi-card--neutral {
  grid-column: auto;
}

.executive-overview .manager-kpi-card--risk {
  order: 1;
}

.executive-overview .manager-kpi-card--coverage {
  order: 2;
}

.executive-overview .manager-kpi-card--neutral {
  order: 3;
}

.executive-overview .card {
  border-radius: var(--radius-lg);
}

.executive-overview .manager-kpi-card,
.executive-overview .liq-panel,
.executive-overview .growth-panel,
.executive-overview .ai-insight,
.executive-overview .card.ai-brief {
  height: auto;
  padding: var(--space-4);
}

.executive-overview .manager-kpi-card,
.executive-overview .liq-panel,
.executive-overview .growth-panel,
.executive-overview .ai-insight,
.executive-overview .card.ai-brief,
.executive-overview .closure-flow {
  gap: var(--space-3);
}

.executive-overview .manager-kpi-card--neutral {
  min-height: 0;
  background: var(--color-bg);
}

.executive-overview .manager-kpi-card__header,
.executive-overview .manager-kpi-card__header--coverage,
.executive-overview .liq-panel__header,
.executive-overview .growth-panel__header,
.executive-overview .ai-brief__header {
  gap: var(--space-2);
  padding-bottom: 0;
}

.executive-overview .manager-kpi-card__value {
  font-size: var(--text-3xl);
}

.executive-overview .manager-kpi-card__summary,
.executive-overview .manager-kpi-card__delta,
.executive-overview .manager-kpi-ai,
.executive-overview .risk-stack__segment-label,
.executive-overview .closure-flow__stage-name,
.executive-overview .closure-flow__summary-label,
.executive-overview .coverage-gauge__caption,
.executive-overview .coverage-gauge__critical-label {
  font-size: var(--text-xs);
}

.executive-overview .risk-stack {
  gap: var(--space-2);
  margin-top: 0;
}

.executive-overview .risk-stack__bar {
  min-height: var(--space-8);
  border-radius: var(--radius-md);
}

.executive-overview .risk-stack__segment {
  min-width: var(--space-12);
  padding: var(--space-2);
}

.executive-overview .risk-stack__segment-value,
.executive-overview .closure-flow__stage-count {
  font-size: var(--text-base);
}

.executive-overview .manager-kpi-ai {
  padding-top: 0;
}

.executive-overview .manager-kpi-ai__icon,
.executive-overview .ai-brief__tag-icon {
  width: var(--space-4);
  height: var(--space-4);
}

.executive-overview .coverage-gauge {
  gap: var(--space-2);
  padding-block: 0;
}

.executive-overview .coverage-gauge__visual {
  width: var(--space-28);
}

.executive-overview .coverage-gauge__chart {
  height: var(--space-16);
}

.executive-overview .coverage-gauge__center {
  inset: var(--space-5) 0 auto;
}

.executive-overview .coverage-gauge__value,
.executive-overview .closure-flow__summary-value {
  font-size: var(--text-2xl);
}

.executive-overview .coverage-gauge__summary-row {
  display: none;
}

.executive-overview .coverage-gauge__critical {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.executive-overview .coverage-gauge__alert-icon {
  width: var(--space-5);
  height: var(--space-5);
  font-size: var(--text-xs);
}

.executive-overview .coverage-gauge__critical-value {
  font-size: var(--text-xl);
}

.executive-overview .closure-flow__body {
  gap: var(--space-3);
}

.executive-overview .closure-flow__funnel {
  width: var(--space-20);
  max-width: var(--space-20);
}

.executive-overview .closure-flow__summary {
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.executive-overview .liq-panel__icon,
.executive-overview .growth-panel__icon,
.executive-overview .growth-metric__chip,
.executive-overview .liq-stat__chip {
  width: var(--space-8);
  height: var(--space-8);
}

.executive-overview .liq-panel__icon svg,
.executive-overview .growth-panel__icon svg,
.executive-overview .growth-metric__chip svg,
.executive-overview .liq-stat__chip svg {
  width: var(--space-5);
  height: var(--space-5);
}

.executive-overview .liq-panel__title,
.executive-overview .growth-panel__title,
.executive-overview .ai-brief__heading,
.executive-overview .ai-insight__headline {
  font-size: var(--text-lg);
}

.executive-overview .liq-summary,
.executive-overview .liq-stats,
.executive-overview .growth-panel__grid {
  gap: var(--space-3);
}

.executive-overview .liq-stats {
  flex: 1;
}

.executive-overview .liq-stat {
  flex: 1;
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.executive-overview .liq-stat__value {
  font-size: var(--text-2xl);
}

.executive-overview .liq-util {
  flex: 1;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.executive-overview .liq-util__ring {
  width: var(--space-12);
  height: var(--space-12);
}

.executive-overview .liq-util__title,
.executive-overview .growth-metric__name {
  font-size: var(--text-sm);
}

.executive-overview .liq-util__caption,
.executive-overview .liq-chart__legend-item,
.executive-overview .growth-metric__count,
.executive-overview .growth-chart__footnote {
  font-size: var(--text-xs);
}

.executive-overview .liq-chart {
  margin-top: 0;
}

.executive-overview .liq-chart__legend {
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.executive-overview .liq-chart__svg {
  aspect-ratio: 640 / 190;
  margin-top: var(--space-3);
}

.executive-overview .growth-metric {
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.executive-overview .growth-metric__head {
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.executive-overview .growth-metric__value {
  font-size: var(--text-4xl);
}

.executive-overview .growth-metric__trend {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

.executive-overview .growth-progress {
  height: var(--space-5);
  margin-top: var(--space-4);
}

.executive-overview .growth-progress__target,
.executive-overview .growth-chart__footnote {
  margin-top: var(--space-2);
}

.executive-overview .growth-chart {
  margin-top: var(--space-3);
}

.executive-overview .growth-chart__svg {
  aspect-ratio: 300 / 80;
}

.executive-overview .card.ai-brief {
  gap: var(--space-3);
}

.executive-overview .ai-brief__icon {
  width: var(--space-6);
  height: var(--space-6);
}

.executive-overview .ai-brief__priorities {
  gap: var(--space-3);
}

.executive-overview .ai-brief__desc,
.executive-overview .ai-brief__rec,
.executive-overview .ai-brief__action-label {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.executive-overview .ai-brief__action {
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.executive-overview .ai-brief__cta {
  padding-inline: var(--space-3);
}

.executive-overview .ai-insight {
  padding: var(--space-4);
  gap: var(--space-3);
  min-height: 0;
  box-shadow: var(--shadow-sm);
}

.executive-overview .ai-insight__icon {
  width: var(--space-5);
  height: var(--space-5);
}

.executive-overview .ai-insight__figure {
  font-size: var(--text-4xl);
}

.executive-overview .ai-insight__unit {
  font-size: var(--text-base);
}

.executive-overview .ai-insight__headline,
.executive-overview .ai-insight__body {
  max-width: none;
}

.executive-overview .ai-insight__signal {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  letter-spacing: var(--tracking-normal);
}

.executive-overview .ai-insight__signal::before {
  box-shadow: none;
}

.executive-overview .ai-insight__dots {
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 1024px) {
  .executive-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .executive-overview .ai-brief {
    grid-column: 1;
    grid-row: 1;
  }

  .executive-overview .manager-kpi-strip__grid {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .executive-overview .ai-insight {
    grid-column: 1;
    grid-row: 3;
  }

  .executive-overview .kpi-grid {
    grid-column: 1;
    grid-row: 4;
  }

  .executive-overview .ai-insight__headline,
  .executive-overview .ai-insight__body {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .executive-overview .manager-kpi-strip__grid,
  .executive-overview .growth-panel__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .executive-overview .liq-summary,
  .executive-overview .liq-stats,
  .executive-overview .closure-flow__body {
    flex-direction: column;
  }

  .executive-overview .closure-flow__funnel {
    width: var(--space-28);
    max-width: var(--space-28);
  }
}

/* ── EXECUTIVE PORTFOLIO BENTO ── */
/* Asymmetric collage: the wide liquidity trend leads the top-left glance,
   the tall AI brief anchors the right rail, the three health KPIs sit below,
   and
   merchant / active / AI insight close the base row. Cards are placed by
   grid-area so DOM order is free; the single-column order is set explicitly
   with `order` at the mobile breakpoint. */
.portfolio-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "liquidity liquidity liquidity liquidity liquidity liquidity liquidity liquidity rail rail rail rail"
    "revenue revenue revenue visit visit visit followups followups rail rail rail rail"
    "merchant merchant merchant active active active active active rail rail rail rail";
  gap: var(--space-4);
  align-items: stretch;
  margin-bottom: var(--space-8);
}

.bento--revenue   { grid-area: revenue; }
.bento--visit     { grid-area: visit; }
.bento--followups { grid-area: followups; }
.bento--liquidity { grid-area: liquidity; }
.bento--merchant  { grid-area: merchant; }
.bento--active    { grid-area: active; }

/* Right rail — Daily Brief + AI Insight stacked as one content-sized column.
   align-self: start keeps the rail hugging the top of its row span so the
   Insight sits directly under the Brief, independent of the taller left column. */
.bento--rail {
  grid-area: rail;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* growth-metric articles stand alone as bento cards now → match the shadow of
   their .card siblings for a consistent collage. */
.bento--merchant,
.bento--active {
  box-shadow: var(--shadow-sm);
}

/* — Revenue at Risk: plain surface, large dark figure, red only on the up-trend,
     content centred to fill the cell — */
.bento--revenue {
  background: var(--color-bg);
  border-color: var(--color-border);
  gap: var(--space-3);
}

/* value block grows to absorb the slack so the figure stays centred and the
   severity bar pins to the bottom — no dead space in a tall row. */
.bento--revenue .manager-kpi-card__value-block {
  flex: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.bento--revenue .manager-kpi-card__value {
  font-size: var(--text-5xl);
  color: var(--color-text-primary);
}

.bento--revenue .risk-stack {
  align-items: center;
  margin-top: 0;
}

.bento--revenue .risk-stack__bar {
  width: auto;
  min-height: var(--space-8);
  gap: var(--space-1);
  padding: var(--space-1);
  overflow: visible;
}

.bento--revenue .risk-stack__segment {
  min-width: calc(var(--space-16) + var(--space-2));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.bento--revenue .risk-stack__segment + .risk-stack__segment {
  box-shadow: none;
}

.bento--revenue .risk-stack__segment-value {
  font-size: var(--text-sm);
}

/* — Visit Compliance: larger centred figure, airier gauge, quieter critical pill — */
.bento--visit .coverage-gauge {
  flex: 1;
  justify-content: center;
  gap: var(--space-5);
}

.bento--visit .manager-kpi-card__coverage-head {
  gap: var(--space-3);
}

.bento--visit .coverage-gauge__chart {
  height: calc(var(--space-20) + var(--space-6));
}

.bento--visit .coverage-gauge__center {
  inset: calc(var(--space-8) + var(--space-3)) 0 auto;
}

.bento--visit .coverage-gauge__value {
  font-size: var(--text-5xl);
}

.bento--visit .coverage-gauge__critical {
  padding: 0;
}

.bento--visit .coverage-gauge__alert-icon {
  font-size: var(--text-xs);
}

.bento--visit .coverage-gauge__critical-value {
  font-size: var(--text-base);
}

.bento--visit .coverage-gauge__critical-label {
  font-size: var(--text-xs);
}

/* — Follow-ups / Closure: drop the tall neutral min-height so the row stays compact — */
.bento--followups {
  min-height: 0;
  gap: var(--space-3);
}

.bento--followups .closure-flow {
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.bento--followups .manager-kpi-card__header {
  align-items: center;
  gap: var(--space-2);
}

.bento--followups .manager-kpi-card__eyebrow {
  letter-spacing: var(--tracking-wide);
}

.bento--followups .closure-flow__body {
  flex: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.bento--followups .closure-flow__funnel {
  width: 100%;
  max-width: calc(var(--space-32) + var(--space-14));
}

.bento--followups .closure-flow__summary {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  margin-top: 0;
  padding-top: var(--space-2);
}

.bento--followups .closure-flow__summary-label {
  font-size: var(--text-xs);
}

.bento--followups .closure-flow__summary-value {
  font-size: var(--text-2xl);
}

.bento--followups .closure-flow__band-stage {
  font-size: var(--text-xs);
}

.bento--followups .closure-flow__band-count {
  font-size: var(--text-lg);
}

/* — Liquidity: Float / GTV as plain value-over-trend blocks (Revenue style) — */
.bento--liquidity .liq-summary {
  justify-content: flex-start;
  gap: var(--space-8);
}

.bento--liquidity .liq-stats {
  flex: 1;
  gap: var(--space-4);
}

.bento--liquidity .liq-stat {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.bento--liquidity .liq-stat__value {
  margin-left: 0;
  font-size: var(--text-4xl);
}

.bento--liquidity .liq-stat--gtv {
  border-color: var(--color-brand-light);
}

.bento--liquidity .liq-stat--float {
  border-color: var(--color-teal-light);
}

/* — Merchant Activation: milestone rail with a clear progress instrument — */
.bento--merchant {
  justify-content: flex-start;
  gap: var(--space-5);
  background: var(--color-bg);
}

.bento--merchant .growth-metric__head {
  margin-bottom: 0;
}

.bento--merchant .growth-metric__value {
  color: var(--color-text-primary);
}

.bento--merchant .growth-progress__track {
  height: calc(var(--space-6) + var(--space-1));
}

.bento--merchant .growth-progress__marker-dot {
  border-color: var(--color-success-dark);
}

.bento--merchant .growth-progress__remaining {
  color: var(--color-success-dark);
}

/* — Liquidity: short, wide combo chart (viewBox widened to 1100×190 to match) — */
.bento--liquidity {
  gap: var(--space-4);
}

.bento--liquidity .liq-panel__header {
  margin-bottom: 0;
}

.bento--liquidity .liq-panel__title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.bento--liquidity .liq-chart {
  margin-top: 0;
}

.bento--liquidity .liq-chart__svg {
  aspect-ratio: 1100 / 190;
  margin-top: var(--space-3);
}

.bento--liquidity .liq-panel__missing-note {
  padding-top: 0;
}

/* — Active User Base: pulse card, chart-first with compact KPI support — */
.bento--active {
  gap: var(--space-5);
  background: var(--color-bg);
}

.bento--active .growth-metric__head {
  margin-bottom: 0;
}

.bento--active .growth-metric__split--pulse {
  grid-template-columns: minmax(0, calc(var(--space-40) - var(--space-10))) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-5);
}

.bento--active .growth-metric__content--pulse {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.bento--active .growth-metric__value--pulse {
  font-size: var(--text-4xl);
  color: var(--color-text-primary);
}

.bento--active .growth-metric__chart-wrap--pulse {
  display: flex;
  align-items: stretch;
}

.bento--active .growth-chart {
  margin-top: 0;
}

.bento--active .growth-chart__summary-item {
  min-width: calc(var(--space-16) + var(--space-1));
}

.bento--active .growth-chart__insight {
  max-width: calc(var(--space-40) + var(--space-10));
}

.bento--brief {
  gap: var(--space-3);
}

.bento--brief .ai-brief__priorities {
  flex: 1 1 auto;
  gap: var(--space-4);
}

.bento--brief .ai-brief__heading {
  font-size: var(--text-xl);
}

.bento--brief .ai-brief__icon {
  width: var(--space-8);
  height: var(--space-8);
}

.bento--brief .ai-brief__priority {
  flex: 1 1 0;
  gap: var(--space-2);
  justify-content: center;
}

.bento--brief .ai-brief__desc,
.bento--brief .ai-brief__rec {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.bento--brief .ai-brief__subhead {
  font-size: var(--text-xs);
}

.bento--brief .ai-brief__actions {
  gap: var(--space-2);
}

.bento--brief .ai-brief__action {
  align-items: center;
  padding: var(--space-2) var(--space-3);
}

.bento--brief .ai-brief__action-label {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.bento--brief .ai-brief__cta {
  min-width: calc(var(--space-12) + var(--space-6));
}

/* — AI Insight: lives in the right rail (stacked under the Daily Brief) and is
     content-sized, so it can breathe rather than stay compact — */
.bento--insight {
  padding: var(--space-6);
  gap: var(--space-4);
}

.bento--insight .ai-insight__content {
  gap: var(--space-3);
}

.bento--insight .ai-insight__figure {
  font-size: var(--text-4xl);
}

.bento--insight .ai-insight__meta {
  gap: var(--space-2);
}

.bento--insight .ai-insight__unit {
  font-size: var(--text-base);
  max-width: 34ch;
}

.bento--insight .ai-insight__headline,
.bento--insight .ai-insight__body,
.bento--insight .ai-insight__support {
  max-width: none;
}

.bento--insight .ai-insight__headline {
  font-size: clamp(var(--text-2xl), 2.6vw, var(--text-4xl));
  line-height: 1.02;
}

.bento--insight .ai-insight__body {
  font-size: var(--text-base);
  color: var(--color-grey-700);
}

.bento--insight .ai-insight__nav {
  padding-top: var(--space-2);
}

.bento--insight .ai-insight__nav-meta {
  gap: var(--space-2);
}

.bento--insight .ai-insight__dots {
  gap: calc(var(--space-1) + var(--border-width));
}

.bento--insight .ai-insight__count {
  font-size: var(--text-2xs, 0.6875rem);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.bento--insight .ai-insight__next {
  padding: var(--space-1) var(--space-3);
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .portfolio-bento > * {
    animation: kpi-rise 420ms var(--ease-emphasized) both;
  }
  .portfolio-bento > :nth-child(1) { animation-delay: 0ms; }
  .portfolio-bento > :nth-child(2) { animation-delay: 60ms; }
  .portfolio-bento > :nth-child(3) { animation-delay: 120ms; }
  .portfolio-bento > :nth-child(4) { animation-delay: 180ms; }
  .portfolio-bento > :nth-child(5) { animation-delay: 240ms; }
  .portfolio-bento > :nth-child(6) { animation-delay: 300ms; }
  .portfolio-bento > :nth-child(7) { animation-delay: 360ms; }
  .portfolio-bento > :nth-child(8) { animation-delay: 420ms; }
}

@media (max-width: 1200px) {
  .portfolio-bento {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-areas:
      "liquidity liquidity liquidity liquidity rail rail rail rail"
      "revenue revenue visit visit rail rail rail rail"
      "followups followups followups followups rail rail rail rail"
      "merchant merchant merchant merchant active active active active";
  }
}

@media (max-width: 1024px) {
  .portfolio-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "liquidity liquidity"
      "revenue rail"
      "visit rail"
      "followups rail"
      "merchant active";
  }
}

@media (max-width: 768px) {
  .portfolio-bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  /* clear the named-area placement so cards auto-flow one per row, sequenced
     by `order` below (named areas no longer exist at this breakpoint). */
  .portfolio-bento > * {
    grid-area: auto;
  }

  .bento--liquidity { order: 1; }
  .bento--revenue   { order: 2; }
  .bento--visit     { order: 3; }
  .bento--followups { order: 4; }
  .bento--rail      { order: 5; }
  .bento--merchant  { order: 6; }
  .bento--active    { order: 7; }

  .bento--liquidity .liq-stats,
  .bento--followups .closure-flow__body {
    flex-direction: column;
  }

  .bento--insight .ai-insight__nav {
    flex-wrap: wrap;
  }

  .bento--active .growth-metric__split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .bento--active .growth-chart__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .bento--active .growth-chart__insight {
    max-width: none;
    text-align: left;
  }
}

/* ── AI INSIGHTS BUTTON ── */
/* Animated angle drives the conic gradient so the ring sweeps uniformly
   at any pill width — no rotating pseudo-element that leaves gaps. */
@property --ai-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ai-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: calc(var(--border-width) * 2);
  background: conic-gradient(from var(--ai-angle), var(--color-ai-ring-amber), var(--color-ai-ring-pink), var(--color-ai-ring-violet), var(--color-ai-ring-sky), var(--color-ai-ring-emerald), var(--color-ai-ring-amber));
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.ai-btn__inner {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  border-radius: calc(var(--radius-full) - calc(var(--border-width) * 2));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: calc(var(--space-2) - var(--border-width)) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  transition: background var(--transition-base);
}

.ai-btn__icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex-shrink: 0;
  display: block;
  transition: transform var(--transition-base);
}

.ai-btn__label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease 0.12s;
}

.ai-btn:hover {
  transform: translateY(calc(-1 * var(--border-width)));
}

.ai-btn:hover .ai-btn__label {
  max-width: var(--size-label-max);
  opacity: 1;
}

.ai-btn:hover .ai-btn__icon {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: no-preference) {
  .ai-btn {
    animation: ai-rotate 4s linear infinite,
               ai-glow-pulse 3s ease-in-out infinite;
  }

  @keyframes ai-rotate {
    to { --ai-angle: 360deg; }
  }

  @keyframes ai-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
    50%       { box-shadow: var(--shadow-ai-glow); }
  }

  /* Hover: spin faster, swap the breathing pulse for a steady glow. */
  .ai-btn:hover {
    animation: ai-rotate 1.8s linear infinite;
    box-shadow: var(--shadow-ai-hover);
  }
}


/* ── ACTION CENTER — TAB REDESIGN ────────────────────────────────── */

/* Tab bar */
.ac-tabs-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-4) 0 var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: 0;
}

.ac-tabs-pill {
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  display: inline-flex;
}

.ac-tabs {
  display: flex;
  gap: 0;
}

.ac-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  font-style: italic;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.ac-tab__icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

.ac-tab--active {
  background: var(--color-brand);
  color: white;
  box-shadow: var(--shadow-sm);
}

.ac-tab:hover:not(.ac-tab--active) {
  color: var(--color-text-secondary);
  background: var(--color-grey-200);
}

.ac-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  padding-bottom: var(--space-2);
}

/* Pane visibility */
.ac-pane {
  display: none;
}

@keyframes pane-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ac-pane--active {
  display: block;
  animation: pane-fade-in 180ms ease-out forwards;
}

/* Three-zone flex layout */
.ac-layout {
  display: flex;
  gap: var(--space-6);
  align-items: stretch;
  margin-top: var(--space-6);
  overflow: hidden;
}

.ac-summary {
  flex: 0 0 272px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ac-summary__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.ac-summary__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.ac-summary__headline {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.ac-list-wrap {
  flex: 1 1 0;
  min-width: 0;
}

.ac-outlet-region {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.ac-outlet-region .ac-list-wrap {
  height: 100%;
}

.ac-list-wrap .panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ac-list-wrap .panel .panel__body {
  flex: 1;
  overflow-y: auto;
}

.ac-outlet-region__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--color-grey-900);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
  z-index: 2;
}

.ac-layout--panel-open .ac-outlet-region__scrim {
  opacity: 0.16;
  pointer-events: auto;
}

/* Slide-in brief panel */
.ac-brief-panel {
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition:
    width 300ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms ease;
}

.ac-layout--panel-open .ac-brief-panel {
  width: 380px;
  opacity: 1;
  padding: 0;
}

.ac-brief-panel--outlet {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  max-width: 100%;
  overflow: hidden;
  opacity: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition:
    transform var(--transition-slow),
    opacity var(--transition-base);
  z-index: 3;
}

.ac-layout--panel-open .ac-brief-panel--outlet {
  width: min(560px, 100%);
  opacity: 1;
  transform: translateX(0);
}

.ac-brief-panel--outlet .ac-brief-panel__body {
  min-width: 0;
  overflow-y: auto;
}

/* ── DSP region: mirrors ac-outlet-region overlay pattern ───────── */
.ac-dsp-region {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.ac-dsp-region .ac-list-wrap {
  height: 100%;
}

.ac-dsp-region__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--color-grey-900);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
  z-index: 2;
}

.ac-layout--panel-open .ac-dsp-region__scrim {
  opacity: 0.16;
  pointer-events: auto;
}

.ac-brief-panel--dsp {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100%);
  max-width: 100%;
  overflow: hidden;
  opacity: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition:
    transform var(--transition-slow),
    opacity var(--transition-base);
  z-index: 3;
}

.ac-layout--panel-open .ac-brief-panel--dsp {
  opacity: 1;
  transform: translateX(0);
}

.ac-brief-panel--dsp .ac-brief-panel__body {
  min-width: 0;
  overflow-y: auto;
}

/* ── DSP coverage bar (replaces donut) ──────────────────────────── */
.dsp-coverage-bar {
  display: flex;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  gap: 2px;
  margin: var(--space-3) 0 var(--space-2);
}

.dsp-coverage-bar__seg {
  height: 100%;
  border-radius: var(--radius-full);
  min-width: 4px;
  transition: flex var(--transition-base);
}

.dsp-coverage-bar__seg--on-track { background: var(--color-success); }
.dsp-coverage-bar__seg--watch    { background: var(--color-warning); }
.dsp-coverage-bar__seg--alert    { background: var(--color-danger); }

/* Brief panel header */
.ac-brief-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  border-bottom: var(--border-width) solid var(--color-border);
}

.ac-brief-panel__badge {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.ac-brief-panel__badge--dsp {
  background: var(--color-grey-700);
}

.ac-brief-panel__generated {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.ac-brief-panel__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.ac-brief-panel__close:hover {
  background: var(--color-surface);
  border-color: var(--color-grey-300);
  color: var(--color-text-primary);
}

/* Brief panel body */
.ac-brief-panel__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 360px;
}

.ac-brief-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.ac-brief-title-info {
  flex: 1;
  min-width: 0;
}

.ac-brief-outlet-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0;
}

.ac-brief-location-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.ac-brief-sep {
  color: var(--color-text-muted);
}

.ac-brief-status {
  font-weight: var(--font-semibold);
}

.ac-brief-status--critical { color: var(--color-error); }
.ac-brief-status--high     { color: var(--color-attention); }
.ac-brief-status--watch    { color: var(--color-warning-dark); }
.ac-brief-status--success  { color: var(--color-success-dark); }
.ac-brief-status--warning  { color: var(--color-warning-dark); }
.ac-brief-status--danger   { color: var(--color-error); }

.ac-brief-score-badge {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-light);
  border: calc(var(--border-width) * 2) solid var(--color-brand);
  border-radius: var(--radius-md);
  gap: 2px;
}

.ac-brief-score-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-brand);
  line-height: 1;
}

.ac-brief-score-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1;
}

.ac-brief-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.ac-brief-meta-sep {
  color: var(--color-grey-300);
}

.ac-brief-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ac-dsp-avatar-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  font-family: var(--font-sans);
}

.ac-brief-section-label {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  margin-top: var(--space-2);
}

.ac-brief-section-note {
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Stat grid in brief panel */
.ac-brief-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.ac-brief-stat {
  background: transparent;
  border: 0;
  border-top: calc(var(--border-width) * 2) solid var(--color-border);
  border-radius: 0;
  padding: var(--space-3) var(--space-3) var(--space-1) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ac-brief-stat + .ac-brief-stat {
  border-left: var(--border-width) solid var(--color-border);
  padding-left: var(--space-3);
}

.ac-brief-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.2;
}

.ac-brief-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: 1.1;
}

.ac-brief-stat__trend {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.ac-brief-stat__trend--down { color: var(--color-error); }
.ac-brief-stat__trend--up   { color: var(--color-success-dark); }

/* "Why this outlet" / Coaching note heading */
.ac-brief-why-heading {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-2);
}

.ac-brief-why-icon {
  color: var(--color-brand);
  flex-shrink: 0;
}

/* AI-generated diagnosis callout — dashed brand border + info wash so it reads
   as the AI's verdict, mirroring the "Needs attention" card treatment. */
.ac-brief-diagnosis {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) dashed var(--color-brand);
  border-radius: var(--radius-lg);
  background: var(--color-info-light);
}

.ac-brief-diagnosis .ac-brief-why-heading {
  margin-top: 0;
}

/* Bullet lists in brief panel */
.ac-brief-why,
.ac-brief-coaching {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ac-brief-why li,
.ac-brief-coaching li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.ac-brief-why li::before,
.ac-brief-coaching li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  margin-top: 6px;
  flex-shrink: 0;
}

/* DSP panel specifics */
.ac-dsp-title-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ac-brief-dsp-fullname {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0;
}

@media (max-width: 1280px) {
  .ac-brief-panel--outlet,
  .ac-layout--panel-open .ac-brief-panel--outlet {
    width: 100%;
  }
}

.ac-brief-zones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.ac-brief-zone-tag {
  padding: 2px var(--space-2);
  background: var(--color-grey-100);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.ac-brief-rating-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-brand);
  line-height: 1;
}

.ac-brief-dsp-status {
  font-weight: var(--font-semibold);
}

/* AI Attention card */
.ai-attention-card {
  border: var(--border-width) dashed var(--color-brand);
  background: var(--color-info-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.ai-attention-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.ai-attention-card__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.ai-attention-card__badge {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.ai-attention-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ai-attention-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.ai-attention-card__check {
  display: block;
  width: 14px;
  height: 14px;
  border: var(--border-width) solid var(--color-grey-400);
  border-radius: 3px;
  background: white;
  flex-shrink: 0;
  margin-top: 2px;
}

.ai-attention-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

/* Outlet rows in priority list */
.ac-outlet-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  cursor: pointer;
  transition: var(--transition-fast);
}

.ac-outlet-row:last-child {
  border-bottom: none;
}

.ac-outlet-row:hover {
  background: var(--color-info-light);
}

.ac-row--active {
  background: var(--color-info-light);
  border-left: 3px solid var(--color-brand);
}

.ac-outlet-row__score {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
}

.ac-row--active .ac-outlet-row__score {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.ac-outlet-row__info {
  flex: 1;
  min-width: 0;
}

.ac-outlet-row__name {
  display: block;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DSP rows */
.ac-dsp-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  cursor: pointer;
  transition: var(--transition-fast);
}

.ac-dsp-row:last-child {
  border-bottom: none;
}

.ac-dsp-row:hover {
  background: var(--color-info-light);
}

.ac-dsp-row.ac-row--active {
  background: var(--color-info-light);
  border-left: 3px solid var(--color-brand);
}

/* DSP avatar circle */
.ac-dsp-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  font-family: var(--font-sans);
  color: white;
  background: var(--color-grey-400);
}

.ac-dsp-avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--text-base);
}

.ac-dsp-avatar--success { background: var(--color-success); }
.ac-dsp-avatar--warning { background: var(--color-warning-dark); }
.ac-dsp-avatar--danger  { background: var(--color-error); }

.ac-dsp-row__info {
  flex: 1;
  min-width: 0;
}

.ac-dsp-row__name {
  display: block;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.ac-dsp-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ac-dsp-bar-track {
  flex: 1;
  height: 6px;
  background: var(--color-grey-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.ac-dsp-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
}

.ac-dsp-bar-fill--success { background: var(--color-success); }
.ac-dsp-bar-fill--warning { background: var(--color-warning); }
.ac-dsp-bar-fill--danger  { background: var(--color-error); }

.ac-dsp-bar-fill--p92 { width: 92%; }
.ac-dsp-bar-fill--p85 { width: 85%; }
.ac-dsp-bar-fill--p78 { width: 78%; }
.ac-dsp-bar-fill--p45 { width: 45%; }

.ac-dsp-bar-pct {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  white-space: nowrap;
}

.ac-dsp-bar-pct--success { color: var(--color-success-dark); }
.ac-dsp-bar-pct--warning { color: var(--color-warning-dark); }
.ac-dsp-bar-pct--danger  { color: var(--color-error); }

/* List header actions (Search / Sort) */
.ac-list-actions {
  display: flex;
  gap: var(--space-2);
}

/* DSP card donut overrides (70% / 20% / 10% of 20 reps) */
.health-card--dsp .health-donut__ring--hero .health-donut__seg--healthy  { --seg-len: 67; --seg-gap: 33; }
.health-card--dsp .health-donut__ring--hero .health-donut__seg--watch    { --seg-len: 17; --seg-gap: 83; }
.health-card--dsp .health-donut__ring--hero .health-donut__seg--critical { --seg-len:  8; --seg-gap: 92; }

/* DSP health card eyebrow note */
.health-card__eyebrow-note {
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  font-style: normal;
}

/* Reduce header margin-bottom when tab bar follows directly */
.action-center__header {
  margin-bottom: var(--space-3);
}

/* ============================================================
   AI ASSISTANT (FLOATING) — lower-right FAB + chat panel
   Reusable partial: salescoach/partials/ai_assistant.html
   ============================================================ */

.ai-assistant {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-ai);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

/* ── Floating button (FAB) ── */
.ai-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-ai-fab-from), var(--color-ai-fab-to));
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  min-width: var(--size-ai-fab);
  height: var(--size-ai-fab);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.ai-fab::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size-ai-fab);
  height: var(--size-ai-fab);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-ai-fab-from), var(--color-ai-fab-to));
  animation: ai-fab-pulse 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
  z-index: -1;
  pointer-events: none;
}

.ai-assistant--open .ai-fab::before,
.ai-fab:hover::before,
.ai-fab:focus-visible::before {
  animation: none;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

.ai-fab__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  white-space: nowrap;
}

.ai-fab__icon {
  width: var(--size-fab-icon);
  height: var(--size-fab-icon);
  flex-shrink: 0;
  display: block;
  transition: transform var(--transition-base);
}

/* Label is collapsed by default and revealed on hover/focus — recipe mirrors .ai-btn__label */
.ai-fab__label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-ai-panel-text);
  transition:
    max-width var(--transition-slow) var(--ease-emphasized),
    opacity var(--transition-fast) ease,
    padding-right var(--transition-slow) var(--ease-emphasized);
}

.ai-fab:hover,
.ai-fab:focus-visible {
  transform: translateY(calc(-1 * var(--motion-lift-sm)));
  box-shadow: var(--shadow-ai-hover);
}

.ai-fab:hover .ai-fab__label,
.ai-fab:focus-visible .ai-fab__label,
.ai-assistant--open .ai-fab__label {
  max-width: var(--size-label-max);
  opacity: 1;
  padding-right: var(--space-2);
}

.ai-fab:hover .ai-fab__icon {
  transform: scale(1.08);
}

.ai-assistant--open .ai-fab__icon {
  transform: rotate(90deg);
}

/* ── Chat panel ── */
.ai-panel {
  position: absolute;
  right: 0;
  bottom: calc(var(--size-ai-fab) + var(--space-3));
  width: var(--size-ai-panel-width);
  max-width: var(--size-ai-panel-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  color: var(--color-ai-panel-text);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--color-ai-panel-glow) 0%, transparent 55%),
    linear-gradient(155deg, var(--color-ai-panel-from) 0%, var(--color-ai-panel-to) 100%);
  box-shadow: var(--shadow-ai-panel);
  border: var(--border-width) solid var(--color-ai-panel-border);
}

.ai-panel[hidden] {
  display: none;
}

.ai-panel__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  padding: 0;
  border: var(--border-width) solid var(--color-ai-panel-border);
  border-radius: var(--radius-full);
  background: var(--color-ai-panel-surface);
  color: var(--color-ai-panel-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ai-panel__close:hover {
  background: var(--color-ai-panel-surface-hover);
}

.ai-panel__close svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

.ai-panel__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-right: var(--size-icon-lg);
}

.ai-panel__greeting {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-ai-panel-text-muted);
}

.ai-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ai-panel-text);
}

/* Quick actions — 2×2 grid */
.ai-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.ai-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: left;
  border: var(--border-width) solid var(--color-ai-panel-border);
  border-radius: var(--radius-lg);
  background: var(--color-ai-panel-surface);
  color: var(--color-ai-panel-text);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}

.ai-action:hover,
.ai-action:focus-visible {
  background: var(--color-ai-panel-surface-hover);
  transform: translateY(calc(-1 * var(--motion-lift-sm)));
}

.ai-action__emoji {
  font-size: var(--text-lg);
  line-height: 1;
  flex-shrink: 0;
}

.ai-action__label {
  line-height: var(--leading-snug);
}

/* Input bar — cream pill with mic */
.ai-panel__inputbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-ai-panel-input-bg);
}

.ai-panel__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.ai-panel__input::placeholder {
  color: var(--color-text-muted);
}

.ai-panel__input:focus {
  outline: none;
}

.ai-panel__mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  padding: 0;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.ai-panel__mic:hover {
  background: var(--color-grey-200);
  color: var(--color-text-primary);
}

.ai-panel__mic svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .ai-assistant--open .ai-panel {
    animation: ai-panel-rise var(--transition-slow) var(--ease-emphasized) both;
  }
}

@keyframes ai-panel-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-3)) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ai-fab-pulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

/* Small screens — widen panel, keep it anchored bottom-right */
@media (max-width: 480px) {
  .ai-assistant {
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .ai-panel {
    width: var(--size-ai-panel-max);
  }
}

/* ───────────────────────────────────────────────────────────────
   Manager dashboard — data-state placeholders & period filter
   Used when a section has no data (empty) or cannot be derived
   from current data/models (unavailable), and the date filter.
   ─────────────────────────────────────────────────────────────── */
.dashboard-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.dashboard-filter__icon {
  width: var(--space-4);
  height: var(--space-4);
  color: var(--color-text-secondary);
}
.dashboard-filter__select {
  border: none;
  background: transparent;
  padding: var(--space-2) var(--space-1);
  color: var(--color-text-primary);
  cursor: pointer;
}

.dashboard-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-4);
  border: var(--border-width) dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.dashboard-state__title {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.9rem;
}
.dashboard-state__hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.dashboard-state__note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  margin: 0;
}
.dashboard-state--unavailable {
  border-style: dashed;
  opacity: 0.85;
}
.dashboard-state--empty {
  border-style: solid;
}

.dashboard-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.dashboard-banner--error {
  background: var(--color-error-light);
  color: var(--color-error);
  border: var(--border-width) solid var(--color-error);
}

/* Risk Movement — zeroed counts shown with a "no comparison data" note.
   Mute the grid so the zeros don't read as real movement. */
.risk-move-card__grid--muted {
  opacity: 0.55;
}
.risk-move-card__note {
  margin-top: var(--space-2);
}

/* Active User Base — "This Week" view tag + missing-day note */
.growth-metric__title-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.growth-metric__view-tag {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-grey-100, var(--color-surface));
  color: var(--color-text-secondary);
  border: var(--border-width) solid var(--border-color);
}
.growth-metric__missing-note {
  margin-top: var(--space-2);
}

/* ───────────────────────────────────────────────────────────────
   Priority Outlets — manager "Priority diagnosis" drawer
   Band-colored score ring, dominant-driver chip, sub-score bars,
   partial-data caveat, compact context strip, freshness stamp.
   ─────────────────────────────────────────────────────────────── */

/* Severity: band-colored score ring */
.ac-brief-score-ring {
  --ring-pct: 0;
  --ring-color: var(--color-text-muted);
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--ring-color) calc(var(--ring-pct) * 1%), var(--color-grey-100, var(--color-surface)) 0);
}
.ac-brief-score-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--color-bg);
}
.ac-brief-score-ring .ac-brief-score-value,
.ac-brief-score-ring .ac-brief-score-label { position: relative; z-index: 1; }
.ac-brief-score-ring .ac-brief-score-value { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.ac-brief-score-ring .ac-brief-score-label { font-size: 0.6rem; color: var(--color-text-muted); }
.ac-brief-score-ring--critical { --ring-color: var(--color-error); }
.ac-brief-score-ring--high     { --ring-color: var(--color-attention); }
.ac-brief-score-ring--medium   { --ring-color: var(--color-warning-dark); }
.ac-brief-score-ring--low      { --ring-color: var(--color-success-dark); }

/* Dominant-driver chip */
.ac-brief-dominant {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--space-2) 0 var(--space-3);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.ac-brief-dominant__caret { color: var(--color-brand); }
.ac-brief-dominant__label { color: var(--color-text-primary); font-weight: 700; }

/* Partial-data caveat */
.ac-brief-missing {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
  font-size: 0.76rem;
}
/* The flex display above otherwise overrides the [hidden] attribute. */
.ac-brief-missing[hidden] { display: none; }
.ac-brief-missing__icon { font-weight: 700; }

/* Score composition — sub-score bars */
.ac-brief-signals {
  list-style: none;
  margin: var(--space-2) 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ac-brief-signal {
  display: grid;
  grid-template-columns: max-content 1fr auto;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.76rem;
}
.ac-brief-signal__label {
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.ac-brief-signal__track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-grey-100, var(--color-surface));
  overflow: hidden;
}
.ac-brief-signal__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
}
.ac-brief-signal__value {
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Dominant = the leading risk (red, bold); opportunity overrides to a distinct hue */
.ac-brief-signal--dominant .ac-brief-signal__label { color: var(--color-text-primary); font-weight: 700; }
.ac-brief-signal--dominant .ac-brief-signal__fill { background: var(--color-error); }
.ac-brief-signal--opportunity .ac-brief-signal__fill { background: var(--color-info); }

/* Supporting context strip (secondary) */
.ac-brief-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-color);
  font-size: 0.76rem;
  color: var(--color-text-secondary);
}
.ac-brief-context__item strong { color: var(--color-text-primary); }

/* Freshness */
.ac-brief-footer-note { margin-top: var(--space-3); font-size: 0.72rem; color: var(--color-text-muted); }
.ac-brief-scored--stale { color: var(--color-warning-dark); }