*, *::before, *::after { box-sizing: border-box; }

html { min-height: 100%; background: var(--color-canvas); }

body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  color: var(--color-text);
  background:
    radial-gradient(circle at 92% 4%, rgba(53, 91, 87, 0.09), transparent 24rem),
    var(--color-canvas);
  font-family: var(--font-family);
  font-size: var(--font-body);
  line-height: var(--line-body);
  text-rendering: optimizeLegibility;
}

button, a { -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
a { color: inherit; }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-light);
  outline-offset: var(--focus-offset);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-3);
  left: var(--space-3);
  min-height: var(--target-desktop);
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  color: var(--color-on-brand);
  background: var(--color-brand-active);
  border-radius: var(--radius-sm);
  transform: translateY(-180%);
  transition: transform var(--motion-duration) var(--ease-standard);
}

.skip-link:focus { transform: translateY(0); }

.portal-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }

.portal-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  color: var(--color-on-brand);
  background: var(--color-brand);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.portal-sidebar :focus-visible { outline-color: var(--focus-on-brand); }

.brand {
  min-height: var(--target-desktop);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-on-brand);
  border-radius: var(--radius-md);
  font-weight: 700;
}

.brand-copy { display: grid; line-height: var(--line-ui); }
.brand-copy strong { font-size: var(--font-title-sm); }
.brand-copy small { color: rgba(255, 255, 255, 0.72); }

.portal-nav { display: grid; gap: var(--space-2); }
.nav-label { margin: 0 0 var(--space-1); color: rgba(255, 255, 255, 0.72); font-size: var(--font-caption); text-transform: uppercase; letter-spacing: 0.08em; }

.nav-link {
  min-height: var(--target-desktop);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.84);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.nav-link:hover { color: var(--color-on-brand); background: rgba(255, 255, 255, 0.08); }
.nav-link[aria-current="page"] { color: var(--color-on-brand); background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); }

.sidebar-boundary {
  margin-top: auto;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-1);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-md);
}
.sidebar-boundary small { color: rgba(255, 255, 255, 0.75); }

.portal-workspace { min-width: 0; }
.portal-topbar {
  min-height: 4.5rem;
  padding: var(--space-3) var(--content-padding);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
}

.topbar-copy { display: grid; line-height: var(--line-ui); }
.topbar-copy strong { font-size: var(--font-title-sm); }
.topbar-copy small { color: var(--color-text-muted); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.project-switcher { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-caption); }
.project-select, .text-input {
  min-height: var(--target-desktop);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
}
.project-select { max-width: 13rem; padding: 0 var(--space-8) 0 var(--space-3); }
.topbar-logout {
  min-height: var(--target-desktop);
  padding: 0 var(--space-4);
  color: var(--color-brand-active);
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu-button {
  display: none;
  min-width: var(--target-desktop);
  min-height: var(--target-desktop);
  padding: 0 var(--space-3);
  color: var(--color-brand-active);
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.portal-main {
  width: min(100%, var(--content-width));
  min-width: 0;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--content-padding) 4rem;
}

.page-heading { max-width: 48rem; margin-bottom: var(--space-8); }
.eyebrow { margin: 0 0 var(--space-2); color: var(--color-brand); font-size: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: var(--font-display); line-height: var(--line-tight); letter-spacing: -0.035em; }
h2 { margin: 0; font-size: var(--font-title-md); line-height: var(--line-tight); }
.page-lead { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--font-title-sm); }

.surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.organization-card { padding: var(--space-6); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.identity-list { margin: var(--space-5) 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.identity-list dt { color: var(--color-text-muted); }
.identity-list dd { margin: 0; }
.technical-id { font-family: var(--font-mono); font-size: 0.84em; overflow-wrap: anywhere; }

.metric-grid { margin: var(--space-3) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.metric-card { min-height: 7rem; padding: var(--space-5); display: grid; align-content: space-between; }
.metric-card strong { font-size: 2rem; line-height: 1; }
.metric-card span { color: var(--color-text-muted); }

.resource-preview, .resource-card { padding: var(--space-6); }
.text-link { min-height: var(--target-desktop); padding: 0 var(--space-3); display: inline-flex; align-items: center; color: var(--color-brand-active); border-radius: var(--radius-sm); font-weight: 600; }
.project-list, .site-list { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.project-row, .site-row { min-width: 0; padding: var(--space-3) 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); border-top: 1px solid var(--color-border); }
.resource-identity { min-width: 0; display: grid; gap: var(--space-1); }
.resource-identity h2, .resource-identity h3, .resource-identity strong { margin: 0; }
.resource-level-label { color: var(--color-text-muted); font-size: var(--font-caption); font-weight: 600; line-height: var(--line-tight); }
.single-site-context { color: var(--color-text-muted); font-size: var(--font-caption); }
.resource-mark { width: 2rem; height: 2rem; display: grid; place-items: center; color: var(--color-on-brand); background: var(--color-brand); border-radius: var(--radius-sm); font-weight: 700; }
.resource-mark-small { width: 1.75rem; height: 1.75rem; font-size: var(--font-caption); }

.status-chip { min-height: 1.75rem; padding: 0 var(--space-3); display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: var(--radius-pill); font-size: var(--font-caption); font-weight: 600; white-space: nowrap; }
.status-active { color: var(--color-brand-active); background: var(--color-brand-soft); }
.status-suspended { color: var(--color-warning-text); background: var(--color-warning-soft); }
.status-archived { color: var(--color-text-muted); background: var(--color-surface-soft); }

.resource-collection { display: grid; gap: var(--space-4); }
.resource-card-single { max-width: 48rem; }
.resource-card-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.environment-list { margin: var(--space-5) 0 0 calc(2rem + var(--space-3)); display: grid; gap: var(--space-5); border-top: 1px solid var(--color-border); }
.environment-panel { padding-top: var(--space-5); background: transparent; border: 0; border-radius: 0; }
.environment-panel + .environment-panel { border-top: 1px solid var(--color-border); }
.environment-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.environment-kind { color: var(--color-brand-active); }
.environment-panel .site-list { margin-left: calc(1.75rem + var(--space-3)); }
.empty-copy { color: var(--color-text-muted); }

.state-panel { min-height: 16rem; padding: var(--space-8); display: grid; place-content: center; justify-items: start; gap: var(--space-3); }
.state-panel h1, .state-panel p { margin: 0; }
.state-panel p { max-width: 40rem; color: var(--color-text-muted); }
.state-mark { font-size: 2rem; line-height: 1; }
.state-loading .state-mark { color: var(--color-info-text); }
.state-empty .state-mark { color: var(--color-brand); }
.state-error .state-mark { color: var(--color-danger-text); }
.state-degraded .state-mark { color: var(--color-warning-text); }

.scope-strip {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--color-text-muted);
}

.scope-strip strong { color: var(--color-text); }
.lead-list { display: grid; gap: var(--space-4); }
.lead-card { padding: var(--space-6); }
.lead-card-header, .lead-card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.lead-card-title, .delivery-identity { display: grid; gap: var(--space-1); }
.lead-pseudonym { font-size: var(--font-title-md); }
.lead-time, .lead-card-title small, .delivery-identity small { color: var(--color-text-muted); }
.lead-contact {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}
.lead-contact dt, .truth-grid dt, .detail-grid dt { color: var(--color-text-muted); }
.lead-contact dd, .truth-grid dd, .detail-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.contact-value { font-size: var(--font-title-sm); font-weight: 600; }
.truth-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
}
.truth-grid dt { grid-row: 1; }
.truth-value { font-weight: 600; }
.verdict-passed, .delivery-sent { color: var(--color-brand-active); }
.verdict-blocked, .delivery-failed, .delivery-dead_letter,
.delivery-ambiguous { color: var(--color-danger-text); }
.delivery-partial, .delivery-attention_required, .delivery-retrying,
.delivery-retry_wait { color: var(--color-warning-text); }
.lead-card-footer { margin-top: var(--space-5); align-items: center; }
.completeness-label { color: var(--color-text-muted); }

.primary-button, .secondary-button, .back-button {
  min-height: var(--target-desktop);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.primary-button { color: var(--color-on-brand); background: var(--color-brand); border: 1px solid var(--color-brand); }
.primary-button:hover { background: var(--color-brand-active); }
.secondary-button, .back-button { color: var(--color-brand-active); background: var(--color-surface); border: 1px solid var(--color-control-border); }
.back-button { margin-bottom: var(--space-4); }
.pager { min-height: var(--target-desktop); margin-top: var(--space-5); display: flex; justify-content: flex-end; align-items: center; }

.detail-heading { margin-bottom: var(--space-5); }
.detail-section { margin-top: var(--space-4); padding: var(--space-6); }
.detail-section > h2, .detail-section > .section-title { margin-bottom: var(--space-4); }
.detail-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.labelled-value { min-width: 0; display: grid; gap: var(--space-1); }
.completeness-banner, .dependency-banner {
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-1);
  background: var(--color-info-soft);
}
.completeness-banner span, .dependency-banner p { margin: 0; color: var(--color-text-muted); }
.dependency-banner { background: var(--color-warning-soft); }
.delivery-list, .outcome-history, .dependency-facts {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.delivery-row, .outcome-row {
  min-width: 0;
  padding: var(--space-3) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.attempt-count { color: var(--color-text-muted); white-space: nowrap; }
.delivery-metrics { margin-top: var(--space-4); }
.outcome-row { grid-template-columns: minmax(0, 1fr) auto; }
.outcome-row span { color: var(--color-text-muted); }
.dependency-card {
  max-width: 50rem;
  padding: var(--space-8);
  display: grid;
  gap: var(--space-3);
}
.dependency-card h2, .dependency-card p { margin: 0; }
.dependency-card p { color: var(--color-text-muted); }
.dependency-facts { display: grid; gap: var(--space-2); list-style: disc; padding-left: var(--space-5); }

.section-copy { margin: var(--space-2) 0 0; color: var(--color-text-muted); }
.analytics-funnel {
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
}
.analytics-step {
  min-width: 0;
  padding: var(--space-4);
  display: grid;
  align-content: start;
  gap: var(--space-2);
  background: var(--color-surface-soft);
}
.analytics-step-label, .analytics-rate { color: var(--color-text-muted); }
.analytics-step-value { font-size: var(--font-title-lg); line-height: var(--line-tight); }
.analytics-rate { overflow-wrap: anywhere; }
.analytics-rate-grid {
  margin: var(--space-5) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
}
.analytics-rate-grid dt { color: var(--color-text-muted); }
.analytics-rate-grid dd { margin: 0; font-weight: 600; }
.analytics-breakdowns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.analytics-breakdown-group { min-width: 0; }
.analytics-breakdown-group h3 { margin: 0; font-size: var(--font-title-sm); }
.analytics-breakdown-list {
  margin: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
}
.analytics-breakdown-list dt { color: var(--color-text-muted); }
.analytics-breakdown-list dd { margin: 0; font-weight: 600; }
.analytics-series {
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
}
.analytics-day {
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.analytics-day-title { display: flex; justify-content: space-between; gap: var(--space-3); }
.analytics-day-title span { color: var(--color-text-muted); }
.analytics-day-facts {
  margin: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
}
.analytics-day-facts dt { color: var(--color-text-muted); }
.analytics-day-facts dd { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dashboard-heading {
  margin-bottom: var(--space-5);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}
.dashboard-heading-copy { max-width: 54rem; }
.period-switcher {
  padding: var(--space-1);
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-1);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}
.period-button {
  min-height: var(--target-desktop);
  padding: 0 var(--space-4);
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.period-button:hover { color: var(--color-brand-active); }
.period-button[aria-pressed="true"] {
  color: var(--color-brand-active);
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(31, 57, 54, 0.12);
  font-weight: 600;
}

.dashboard-health {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.health-intro, .health-intro > span:last-child { display: flex; align-items: center; gap: var(--space-3); }
.health-intro > span:last-child { align-items: flex-start; flex-direction: column; gap: 0; }
.health-intro small { color: var(--color-text-muted); }
.health-pulse { width: 0.75rem; height: 0.75rem; flex: 0 0 auto; border-radius: 50%; }
.pulse-good { background: var(--color-brand); box-shadow: 0 0 0 4px var(--color-brand-soft); }
.pulse-warn { background: var(--color-warning-text); box-shadow: 0 0 0 4px var(--color-warning-soft); }
.health-sources { margin: 0; display: flex; align-items: center; gap: var(--space-2) var(--space-4); }
.health-sources dt { color: var(--color-text-muted); }
.health-sources dd { margin: 0; font-weight: 600; }
.health-good { color: var(--color-brand-active); }
.health-warn { color: var(--color-warning-text); }
.health-bad { color: var(--color-danger-text); }

.dashboard-kpi-grid {
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}
.dashboard-kpi {
  min-height: 11rem;
  padding: var(--space-4);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--space-2);
  border-top: 3px solid var(--color-border);
}
.dashboard-kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.dashboard-kpi-label { color: var(--color-text-muted); }
.dashboard-kpi-mark { color: var(--color-text-subtle-disabled); font-family: var(--font-mono); font-size: var(--font-caption); }
.dashboard-kpi-value { align-self: end; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; }
.dashboard-kpi-detail, .dashboard-delta { color: var(--color-text-muted); }
.dashboard-delta { font-size: var(--font-caption); }
.delta-good { color: var(--color-brand-active); }
.delta-bad { color: var(--color-danger-text); }
.tone-approved { border-top-color: var(--color-brand); }
.tone-blocked { border-top-color: var(--color-danger-text); }
.tone-warning { border-top-color: var(--color-warning-text); }
.tone-delivery { border-top-color: var(--color-info-text); }
.tone-target { border-top-color: #66538c; }

.dashboard-primary-grid {
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(21rem, 0.9fr);
  gap: var(--space-4);
}
.dashboard-panel { min-width: 0; margin-bottom: var(--space-4); padding: var(--space-6); }
.dashboard-primary-grid .dashboard-panel { margin-bottom: 0; }
.dashboard-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-caption); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.chart-legend span::before { width: 0.55rem; height: 0.55rem; content: ""; border-radius: 0.2rem; }
.legend-approved::before { background: var(--color-brand); }
.legend-blocked::before { background: var(--color-danger-text); }
.legend-unknown::before { background: var(--color-control-border); }

.decision-chart {
  height: 16rem;
  margin-top: var(--space-6);
  padding-top: var(--space-2);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0.4rem, 1fr);
  align-items: end;
  gap: clamp(0.15rem, 0.6vw, 0.5rem);
  border-bottom: 1px solid var(--color-border);
}
.decision-column { height: 100%; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) 1.8rem; align-items: end; }
.decision-stack { min-height: 3px; display: flex; flex-direction: column-reverse; overflow: hidden; border-radius: 0.25rem 0.25rem 0 0; }
.decision-segment { min-height: 1px; display: block; }
.segment-approved { background: var(--color-brand); }
.segment-blocked { background: var(--color-danger-text); }
.segment-unknown { background: var(--color-control-border); }
.decision-date { padding-top: var(--space-2); color: var(--color-text-muted); font-size: 0.65rem; text-align: center; white-space: nowrap; }
.decision-stack.pct-0, .decision-segment.pct-0 { height: 0; min-height: 0; }
.decision-stack.pct-10, .decision-segment.pct-10 { height: 10%; }
.decision-stack.pct-20, .decision-segment.pct-20 { height: 20%; }
.decision-stack.pct-30, .decision-segment.pct-30 { height: 30%; }
.decision-stack.pct-40, .decision-segment.pct-40 { height: 40%; }
.decision-stack.pct-50, .decision-segment.pct-50 { height: 50%; }
.decision-stack.pct-60, .decision-segment.pct-60 { height: 60%; }
.decision-stack.pct-70, .decision-segment.pct-70 { height: 70%; }
.decision-stack.pct-80, .decision-segment.pct-80 { height: 80%; }
.decision-stack.pct-90, .decision-segment.pct-90 { height: 90%; }
.decision-stack.pct-100, .decision-segment.pct-100 { height: 100%; }

.checkpoint-list { margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); list-style: none; }
.checkpoint-row { display: grid; gap: var(--space-2); }
.checkpoint-head { display: flex; justify-content: space-between; gap: var(--space-3); }
.checkpoint-row small { color: var(--color-text-muted); }
.checkpoint-track { height: 0.42rem; overflow: hidden; background: var(--color-border); border-radius: var(--radius-pill); }
.checkpoint-fill { height: 100%; display: block; background: var(--color-control-border); border-radius: inherit; }
.fill-approved { background: var(--color-brand); }
.fill-delivery { background: var(--color-info-text); }
.fill-target { background: #66538c; }
.fill-sales { background: var(--color-brand-active); }

.distribution-grid { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.distribution-group h3, .attention-card h3 { margin: 0; font-size: var(--font-title-sm); }
.distribution-list { margin: var(--space-4) 0 0; display: grid; grid-template-columns: minmax(8rem, 0.8fr) minmax(12rem, 1.2fr); gap: var(--space-3) var(--space-4); }
.distribution-list dt { color: var(--color-text-muted); }
.distribution-value { min-width: 0; margin: 0; display: grid; grid-template-columns: auto minmax(5rem, 1fr); align-items: center; gap: var(--space-3); font-variant-numeric: tabular-nums; }
.distribution-track { height: 0.42rem; overflow: hidden; background: var(--color-border); border-radius: var(--radius-pill); }
.distribution-fill { height: 100%; display: block; background: var(--color-brand); border-radius: inherit; }
.distribution-confirmed_fraud, .distribution-failed, .distribution-attention_required { background: var(--color-danger-text); }
.distribution-no_answer, .distribution-retrying, .distribution-unknown { background: var(--color-warning-text); }
.distribution-won, .distribution-paid { background: var(--color-brand-active); }
.distribution-sent { background: var(--color-info-text); }
.checkpoint-fill.pct-0, .distribution-fill.pct-0 { width: 0; }
.checkpoint-fill.pct-10, .distribution-fill.pct-10 { width: 10%; }
.checkpoint-fill.pct-20, .distribution-fill.pct-20 { width: 20%; }
.checkpoint-fill.pct-30, .distribution-fill.pct-30 { width: 30%; }
.checkpoint-fill.pct-40, .distribution-fill.pct-40 { width: 40%; }
.checkpoint-fill.pct-50, .distribution-fill.pct-50 { width: 50%; }
.checkpoint-fill.pct-60, .distribution-fill.pct-60 { width: 60%; }
.checkpoint-fill.pct-70, .distribution-fill.pct-70 { width: 70%; }
.checkpoint-fill.pct-80, .distribution-fill.pct-80 { width: 80%; }
.checkpoint-fill.pct-90, .distribution-fill.pct-90 { width: 90%; }
.checkpoint-fill.pct-100, .distribution-fill.pct-100 { width: 100%; }

.attention-grid { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.attention-card { min-width: 0; padding: var(--space-5); display: grid; align-content: start; gap: var(--space-2); background: var(--color-surface-soft); border: 1px solid var(--color-border); border-left: 3px solid var(--color-control-border); border-radius: var(--radius-md); }
.attention-card p { margin: 0; color: var(--color-text-muted); }
.attention-value { font-size: var(--font-title-lg); font-weight: 600; line-height: 1; }
.attention-good { border-left-color: var(--color-brand); }
.attention-warn { border-left-color: var(--color-warning-text); }
.attention-bad { border-left-color: var(--color-danger-text); }
.attention-card .text-link { width: fit-content; margin-top: var(--space-2); padding-left: 0; }

.dashboard-table-wrap { margin-top: var(--space-4); overflow-x: auto; }
.dashboard-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dashboard-table th, .dashboard-table td { min-width: 7rem; padding: var(--space-3); text-align: right; border-bottom: 1px solid var(--color-border); }
.dashboard-table th { color: var(--color-text-muted); font-size: var(--font-caption); font-weight: 600; }
.dashboard-table th:first-child, .dashboard-table td:first-child { min-width: 8rem; padding-left: 0; text-align: left; }
.dashboard-table tbody tr:last-child td { border-bottom: 0; }

.tone-good { border-top-color: var(--color-brand); }
.tone-warn { border-top-color: var(--color-warning-text); }
.tone-bad { border-top-color: var(--color-danger-text); }
.tone-neutral { border-top-color: var(--color-info-text); }
.delivery-semantics {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: minmax(12rem, 1.2fr) repeat(4, minmax(9rem, 1fr));
  align-items: center;
  gap: var(--space-3);
}
.delivery-semantics span {
  min-height: 3rem;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.integration-state-grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}
.integration-state {
  min-width: 0;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.integration-state span { color: var(--color-text-muted); }
.integration-state strong { font-size: var(--font-title-md); }
.state-sent { border-color: var(--color-brand); }
.state-retry_wait, .state-pending, .state-leased { border-color: var(--color-warning-text); }
.state-failed_terminal, .state-ambiguous, .state-dead_letter { border-color: var(--color-danger-text); }
.integration-table td:first-child { font-weight: 600; }
.integration-crm { overflow: hidden; }
.coverage-strip {
  margin-top: var(--space-5);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}
.coverage-strip strong { color: var(--color-brand-active); font-size: var(--font-title-md); }
.integration-outcome-grid {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}
.integration-outcome-card {
  min-width: 0;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.integration-outcome-card strong { font-size: var(--font-title-md); }
.integration-outcome-card span { color: var(--color-text-muted); }

.portal-backdrop { display: none; }
noscript { display: block; padding: var(--space-4); color: var(--color-danger-text); }

.auth-shell {
  min-height: 100vh;
  padding: clamp(1rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  align-items: stretch;
  gap: clamp(1rem, 4vw, 4rem);
}
.auth-intro {
  min-height: 36rem;
  padding: clamp(2rem, 6vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-on-brand);
  background: linear-gradient(145deg, var(--color-brand-strong), var(--color-brand));
  border-radius: calc(var(--radius-lg) * 1.5);
}
.auth-brand { margin-bottom: auto; display: flex; align-items: center; gap: var(--space-3); }
.auth-brand .brand-mark { color: var(--color-brand); background: var(--color-on-brand); }
.auth-eyebrow { margin-top: var(--space-10); color: rgba(255, 255, 255, 0.72); }
.auth-intro h1 { max-width: 48rem; }
.auth-lead { max-width: 42rem; margin: var(--space-5) 0 0; color: rgba(255, 255, 255, 0.82); font-size: var(--font-title-sm); }
.auth-benefits { margin: var(--space-8) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); color: rgba(255, 255, 255, 0.86); }
.auth-panel { min-height: 36rem; padding: clamp(2rem, 5vw, 4.5rem); display: grid; align-content: center; }
.auth-form, .stack-form { display: grid; gap: var(--space-4); }
.auth-copy { margin-bottom: var(--space-3); display: grid; gap: var(--space-2); }
.auth-copy h2 { font-size: var(--font-title-lg); }
.auth-copy p { margin: 0; color: var(--color-text-muted); }
.form-field { display: grid; gap: var(--space-2); }
.form-label { font-weight: 600; }
.text-input { width: 100%; padding: 0 var(--space-3); }
.totp-input { font-family: var(--font-mono); font-size: var(--font-title-md); letter-spacing: 0.22em; }
.auth-submit { width: 100%; margin-top: var(--space-2); }
.auth-status { min-height: 1.5rem; }
.form-message { margin: 0; color: var(--color-text-muted); }
.form-message-error { color: var(--color-danger-text); }
.auth-help { margin: 0; color: var(--color-text-muted); font-size: var(--font-caption); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.auth-back-link { width: fit-content; padding-left: 0; }
.security-card { max-width: 44rem; padding: var(--space-6); display: grid; gap: var(--space-5); }
.totp-secret { padding: var(--space-4); color: var(--color-brand-strong); background: var(--color-brand-soft); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--font-title-sm); overflow-wrap: anywhere; user-select: all; }

button:disabled { cursor: wait; opacity: 0.64; }

@media (max-width: 1180px) {
  .dashboard-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-primary-grid { grid-template-columns: 1fr; }
  .delivery-semantics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-semantics strong { grid-column: 1 / -1; }
  .integration-state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .integration-outcome-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .portal-shell { display: block; }
  .portal-sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: min(18rem, calc(100vw - 3rem)); transform: translateX(-105%); transition: transform var(--motion-duration) var(--ease-standard); }
  .portal-sidebar[data-open="true"] { transform: translateX(0); }
  .menu-button { display: inline-flex; align-items: center; }
  .portal-backdrop { position: fixed; z-index: 20; inset: 0 0 0 min(18rem, calc(100vw - 3rem)); width: auto; height: 100%; padding: 0; background: rgba(17, 17, 17, 0.42); border: 0; opacity: 0; pointer-events: none; transition: opacity var(--motion-duration) var(--ease-standard); }
  .portal-backdrop[data-open="true"] { display: block; opacity: 1; pointer-events: auto; }
  .metric-grid { grid-template-columns: 1fr; }
  .truth-grid, .detail-grid { grid-template-columns: 1fr; }
  .truth-grid dt { grid-row: auto; }
  .delivery-row { grid-template-columns: minmax(0, 1fr) auto; }
  .delivery-row .attempt-count { grid-column: 1 / -1; }
  .analytics-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-breakdowns { grid-template-columns: 1fr; }
  .analytics-series { grid-template-columns: 1fr; }
  .dashboard-heading, .dashboard-health { align-items: stretch; flex-direction: column; }
  .period-switcher { align-self: flex-start; }
  .health-sources { flex-wrap: wrap; }
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-panel-head { align-items: stretch; flex-direction: column; }
  .chart-legend { justify-content: flex-start; }
  .distribution-grid, .attention-grid { grid-template-columns: 1fr; }
  .integration-state-grid, .integration-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-strip { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-intro { min-height: 26rem; }
  .auth-panel { min-height: auto; }
}

@media (max-width: 480px) {
  .menu-button, .nav-link, .brand, .text-link, .primary-button,
  .secondary-button, .back-button { min-height: var(--target-mobile); }
  .portal-topbar { min-height: 4rem; }
  .topbar-copy { display: none; }
  .topbar-actions { min-width: 0; flex: 1; justify-content: flex-end; }
  .project-switcher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .project-select { min-width: 0; max-width: 10rem; }
  .topbar-logout { min-height: var(--target-mobile); }
  .portal-main { padding-top: var(--space-8); }
  .organization-card, .resource-preview, .resource-card, .state-panel { padding: var(--space-4); }
  .section-title, .resource-card-header, .environment-header { align-items: flex-start; }
  .resource-card-header, .environment-header { grid-template-columns: auto minmax(0, 1fr); }
  .resource-card-header .status-chip, .environment-header .status-chip { grid-column: 2; justify-self: start; }
  .project-row, .site-row { grid-template-columns: auto minmax(0, 1fr); }
  .project-row .status-chip, .site-row .status-chip { grid-column: 2; justify-self: start; }
  .resource-card .environment-list { margin-left: 0; }
  .resource-card .resource-card-header,
  .resource-card .environment-header,
  .resource-card .site-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .resource-card .resource-card-header .status-chip,
  .resource-card .environment-header .status-chip,
  .resource-card .site-row .status-chip { grid-column: auto; justify-self: end; }
  .environment-panel .site-list { margin-left: 0; }
  .identity-list { grid-template-columns: 1fr; }
  .lead-card, .detail-section, .dependency-card { padding: var(--space-4); }
  .lead-card-header, .lead-card-footer, .section-title { align-items: stretch; flex-direction: column; }
  .lead-contact { grid-template-columns: 1fr; }
  .pager { justify-content: stretch; }
  .pager .secondary-button { width: 100%; }
  .delivery-row, .outcome-row { grid-template-columns: 1fr; align-items: start; }
  .delivery-row .attempt-count { grid-column: auto; }
  .analytics-funnel, .analytics-rate-grid { grid-template-columns: 1fr; }
  .analytics-day-title { align-items: flex-start; flex-direction: column; }
  .period-switcher { width: 100%; }
  .period-button { min-height: var(--target-mobile); flex: 1 1 0; padding: 0 var(--space-2); }
  .dashboard-kpi-grid { grid-template-columns: 1fr; }
  .dashboard-kpi { min-height: 9rem; }
  .dashboard-panel { padding: var(--space-4); }
  .decision-chart { min-width: 32rem; }
  .dashboard-trend { overflow-x: auto; }
  .dashboard-trend .dashboard-panel-head { position: sticky; left: 0; }
  .distribution-list { grid-template-columns: 1fr; gap: var(--space-1); }
  .distribution-value { margin-bottom: var(--space-3); }
  .delivery-semantics, .integration-state-grid, .integration-outcome-grid { grid-template-columns: 1fr; }
  .delivery-semantics strong { grid-column: auto; }
  .auth-shell { padding: 0; }
  .auth-intro { min-height: 18rem; padding: var(--space-8) var(--space-5); border-radius: 0; }
  .auth-brand { margin-bottom: var(--space-8); }
  .auth-intro h1 { font-size: 1.8rem; }
  .auth-benefits { display: none; }
  .auth-panel { border-width: 0; border-radius: 0; }
  .security-card { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: var(--reduced-motion-duration) !important; transition-duration: var(--reduced-motion-duration) !important; animation-iteration-count: 1 !important; }
}

.integration-settings { padding: var(--space-5); margin-top: var(--space-5); }
.integration-settings p { overflow-wrap: anywhere; }
.integration-settings-heading { display: grid; gap: var(--space-2); }
.integration-settings-heading h2, .integration-settings-copy { margin: 0; }
.integration-settings-copy { color: var(--color-text-muted); line-height: 1.55; }
.integration-settings-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.integration-service-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); background: var(--color-surface); }
.integration-service-card > button:first-of-type { margin-top: auto; }
.integration-service-card-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; width: 100%; }
.integration-service-card-head h3 { margin: 0; font-size: var(--font-title-sm); }
.integration-service-icon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-brand-strong); background: var(--color-brand-soft); font-weight: 700; }
.integration-service-status { margin-left: auto; padding: var(--space-1) var(--space-2); border-radius: 2rem; color: var(--color-text-muted); background: var(--color-surface-soft); font-size: var(--font-caption); }
.integration-service-status.is-enabled { color: var(--color-brand-strong); background: var(--color-brand-soft); }
.integration-editor-heading { display: flex; align-items: center; gap: var(--space-3); }
.integration-editor-heading h3 { margin: 0; }
.integration-settings-help { margin: 0; font-size: var(--font-caption); color: var(--color-text-muted); line-height: 1.6; }
.integration-settings-notice { padding: var(--space-4); border-radius: var(--radius-sm); color: var(--color-brand-strong); background: var(--color-brand-soft); }
.integration-settings-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.integration-settings-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.integration-settings-form { display: grid; gap: var(--space-4); margin-top: var(--space-5); padding: var(--space-5); max-width: 48rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-soft); }
.integration-settings-form label { display: grid; gap: var(--space-2); }
.integration-settings-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-4); }
.integration-settings-form input:not([type=checkbox]), .integration-settings-form select, .integration-settings-form textarea {
  width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-3); font: inherit; border-radius: var(--radius-sm);
  border: 1px solid var(--color-control-border); color: var(--color-text); background: var(--color-surface);
}
.integration-settings-form textarea { min-height: 8rem; resize: vertical; }
.integration-settings-form .integration-settings-enabled { display: flex; align-items: start; gap: var(--space-3); }
@media (max-width: 760px) {
  .integration-settings, .integration-settings-form { padding: var(--space-4); }
  .integration-settings-actions { flex-direction: column; }
  .integration-settings-actions button { width: 100%; }
}