*, *::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-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-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.environment-list { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.environment-panel { padding: var(--space-4); background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.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); font-weight: 600; }
.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; }

.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: 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; width: 100%; 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; }
  .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; }
  .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; }
  .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; }
}