/* AT&T Infrastructure Intelligence — Brand CSS (LIGHT THEME)
 * No external CDN resources (SECURITY.md §11).
 * All tokens as CSS custom properties; responsive breakpoints 375/768/1280.
 *
 * Theme note (2026-08-26): converted from the dark #191919 shell to a light,
 * print-friendly surface set appropriate for a client deliverable. AT&T blue
 * is retained as the single accent. Two blues are in play deliberately:
 *   --att-blue      #00A8E0  non-text accents only (indicators, borders, fills)
 *   --att-blue-ink  #067AB4  anything that is TEXT on a light surface
 * #00A8E0 on white is only 2.73:1, which fails WCAG AA for text and 1.4.11 for
 * focus indicators — so text and focus rings use --att-blue-ink (4.7:1).
 */

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  /* AT&T blue family */
  --att-blue: #00A8E0;
  --att-dark-blue: #067AB4;
  --att-deep-blue: #0057A0;
  --att-light-blue: #75DBFF;

  /* Accessible blue for text / focus on light surfaces (4.72:1 on white) */
  --att-blue-ink: #067AB4;

  /* Light theme surfaces */
  --att-navy: #FAFBFC;          /* page background */
  --surface-0: #FFFFFF;         /* card surfaces */
  --surface-1: #F5F7FA;         /* topbar, nav, table head */
  --surface-2: #EDF0F4;         /* secondary surfaces, row hover */
  --surface-3: #E2E7EE;         /* pressed / hover states */

  /* Text — dark on light */
  --text-primary: #0A0E1A;      /* 19.3:1 on white */
  --text-secondary: #4A5568;    /* 7.5:1 on white */
  --text-muted: #5C6B80;        /* 5.4:1 on white, 5.0:1 on --surface-1 */

  /* Borders */
  --border: rgba(0, 0, 0, 0.08);
  --border-accent: rgba(0, 168, 224, 0.25);
  --border-input: #8A94A6;      /* 3.06:1 on white — WCAG 1.4.11 for controls */

  /* Glass — light version */
  --att-glass: rgba(0, 168, 224, 0.06);
  --att-glass-strong: rgba(0, 168, 224, 0.15);
  --att-glass-border: rgba(0, 168, 224, 0.20);

  /* Status colors — used as text on WHITE (all ≥ 4.5:1) */
  --att-success: #00875A;
  --att-warning: #B45309;
  --att-error: #C00000;

  /* Status "ink" — used as text on their own tinted badge backgrounds */
  --ink-success: #056446;
  --ink-warning: #92400E;
  --ink-error: #A00000;

  /* Org chart employment types.  Previously scoped to .cs-tabs-wrap inside
     cost_deepdive.html, which put them out of reach of every stylesheet.
     A mixed parent node renders an equal 50/50 blend, never proportional. */
  --org-inhouse:    #067AB4;  /* AT&T blue family */
  --org-contractor: #B7791F;  /* amber */
  --org-managed:    #5C6B80;  /* slate */

  /* Elevation */
  --att-glow: 0 0 20px rgba(0, 168, 224, 0.15);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);

  /* Motion / layout */
  --dur-base: 280ms;
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
  --content-max: 1400px;
  --gutter: 16px;

  /* Typography scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;

  color-scheme: light;
}

@media (min-width: 768px)  { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }


/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--att-navy);
}

body {
  background: var(--att-navy);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--att-blue-ink);
  text-decoration: none;
}

a:hover {
  color: var(--att-deep-blue);
  text-decoration: underline;
}

button {
  cursor: pointer;
  font: inherit;
}

/* Global focus ring — per-element overrides take precedence where set.
   --att-blue-ink, not --att-blue: 2px of #00A8E0 on white is 2.73:1 and
   fails the 3:1 non-text contrast requirement for focus indicators. */
*:focus-visible {
  outline: 2px solid var(--att-blue-ink);
  outline-offset: 2px;
}

::selection {
  background: rgba(0, 168, 224, 0.22);
  color: var(--text-primary);
}


/* ============================================================
   LAYOUT
   ============================================================ */
.att-shell {
  display: grid;
  /* Rows: topbar | primary-nav | system-section | main-content.
     Mobile-nav (display:none by default) does not participate in layout;
     when shown it takes an implicit auto row before primary-nav. */
  grid-template-rows: auto auto auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

/* Grid and flex children default to min-width:auto, which lets a wide table
   stretch the whole shell instead of scrolling inside its own container. */
.att-shell > *,
.att-content,
.baseline-grid > *,
.kpi-strip > * {
  min-width: 0;
}

.att-content {
  max-width: var(--content-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 24px;
}


/* ============================================================
   TOPBAR
   ============================================================ */
.att-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: var(--gutter);
  height: 56px;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.att-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.att-globe {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.att-appname {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  .att-appname { display: none; }
}

/* User controls cluster */
.att-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}


/* ============================================================
   HCL MODE TOGGLE
   ============================================================ */
.hcl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 36px;
  background: var(--surface-0);
  border: 1px solid var(--att-blue);
  border-radius: 6px;
  color: var(--att-blue-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background var(--dur-base) var(--ease-brand),
              box-shadow var(--dur-base) var(--ease-brand);
  min-height: 44px;
}

.hcl-toggle:hover,
.hcl-toggle:focus-visible {
  background: var(--att-glass);
  box-shadow: var(--att-glow);
  outline: 2px solid var(--att-blue-ink);
  outline-offset: 2px;
}

.hcl-toggle[aria-pressed="true"] {
  background: var(--att-glass-strong);
  border-color: var(--att-deep-blue);
  color: var(--att-deep-blue);
}

/* State pill inside the toggle — replaces the ⬛/⬜ emoji, which rendered as
   a heavy black square on a white topbar. */
.hcl-state {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.hcl-toggle[aria-pressed="true"] .hcl-state {
  background: var(--att-deep-blue);
  color: #fff;
}


/* ============================================================
   USER AVATAR / DROPDOWN
   ============================================================ */
.user-menu {
  position: relative;
}

.user-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 36px;
  min-height: 44px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  transition: background var(--dur-base) var(--ease-brand),
              border-color var(--dur-base) var(--ease-brand);
}

.user-avatar-btn:hover,
.user-avatar-btn:focus-visible {
  background: var(--surface-1);
  border-color: var(--border-accent);
  outline: 2px solid var(--att-blue-ink);
  outline-offset: 2px;
}

/* --att-deep-blue, not --att-blue: white on #00A8E0 is 2.3:1.
   White on #0057A0 is 7.3:1 and stays inside the AT&T blue family. */
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--att-deep-blue);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}

.user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .user-name { display: none; }
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 176px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 200;

  /* Hidden by default */
  display: none;
  flex-direction: column;
}

.user-dropdown.is-open {
  display: flex;
}

.user-dropdown a,
.user-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: none;
  border: none;
  transition: background var(--dur-base) var(--ease-brand);
}

.user-dropdown a:hover,
.user-dropdown button:hover,
.user-dropdown a:focus-visible,
.user-dropdown button:focus-visible {
  background: var(--att-glass);
  color: var(--att-blue-ink);
  text-decoration: none;
  outline: none;
}


/* ============================================================
   PRIMARY NAV TABS
   ============================================================ */
.att-nav {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.att-nav-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: flex-end;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.att-nav-inner::-webkit-scrollbar {
  display: none;
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  height: 44px;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-brand),
              border-color var(--dur-base) var(--ease-brand),
              background var(--dur-base) var(--ease-brand);
  text-transform: capitalize;
}

.nav-tab:hover {
  color: var(--text-primary);
  background: var(--att-glass);
  text-decoration: none;
}

/* Active tab: AT&T blue underline + weight, never a filled pill. */
.nav-tab.is-active,
.nav-tab[aria-current="page"] {
  color: var(--att-blue-ink);
  border-bottom-color: var(--att-blue);
  font-weight: 600;
  background: transparent;
}

.nav-tab:focus-visible {
  outline: 2px solid var(--att-blue-ink);
  outline-offset: -2px;
}

/* ============================================================
   SYSTEM — RAG SECTION
   Admin-only band below the primary nav.  Visually recessed and
   labelled INTERNAL SYSTEM MONITORING so it is never confused with
   the client-facing cost pool tabs above.
   ============================================================ */
.att-system-section {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.att-system-section-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Clickable "⚙ System — RAG ▶" header — intentionally compact. */
.att-system-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  /* Override the global 44 px floor — this control is internal-only
     and lives below the primary nav. */
  min-height: unset;
}

.att-system-label:hover,
.att-system-label:focus-visible {
  color: var(--att-blue-ink);
  outline: 2px solid var(--att-blue-ink);
  outline-offset: 2px;
}

/* "INTERNAL SYSTEM MONITORING" badge */
.att-system-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
}

/* Compact pill row of system tabs — hidden until section is open. */
.att-system-tabs {
  display: none;
  gap: 2px;
  padding-bottom: 6px;
  flex-wrap: wrap;
}

.att-system-section.is-open .att-system-tabs {
  display: flex;
}

/* Individual system tab pills */
.nav-tab-system {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-brand),
              color var(--dur-base) var(--ease-brand);
  text-transform: capitalize;
}

.nav-tab-system:hover {
  background: var(--surface-3);
  color: var(--att-blue-ink);
  text-decoration: none;
}

.nav-tab-system.is-active {
  background: var(--att-glass);
  color: var(--att-blue-ink);
  font-weight: 600;
}

.nav-tab-system:focus-visible {
  outline: 2px solid var(--att-blue-ink);
  outline-offset: 2px;
}


/* ============================================================
   HAMBURGER (mobile)
   ============================================================ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-brand),
              opacity var(--dur-base) var(--ease-brand);
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 8px var(--gutter);
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav .nav-tab {
  width: 100%;
  border-bottom: 1px solid var(--border);
  border-left: none;
}

.mobile-nav .nav-tab.is-active,
.mobile-nav .nav-tab[aria-current="page"] {
  border-bottom-color: var(--border);
  box-shadow: inset 3px 0 0 0 var(--att-blue);
}

.mobile-nav .nav-tab:last-child {
  border-bottom: none;
}

@media (max-width: 767px) {
  .hamburger { display: flex; }
  .att-nav { display: none; }
}


/* ============================================================
   CARDS
   ============================================================ */
.cost-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-brand),
              border-color var(--dur-base) var(--ease-brand),
              transform var(--dur-base) var(--ease-brand);
}

.cost-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-accent);
}

.cost-card-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.cost-card-value {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--att-blue-ink);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.cost-card-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 4px;
}


/* ============================================================
   SKELETON LOADER
   ============================================================ */
@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-3) 0%,
    var(--surface-1) 50%,
    var(--surface-3) 100%
  );
  background-size: 1600px 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: 4px;
  color: transparent;
  user-select: none;
  display: inline-block;
  min-height: 1em;
  min-width: 48px;
}

.skeleton-text {
  height: 1em;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }
.skeleton-text.w-33 { width: 33%; }

.skeleton-card {
  height: 160px;
  border-radius: 12px;
  display: block;
}

.skeleton-chart,
.honeycomb-skeleton,
.waterfall-skeleton {
  height: 240px;
  width: 100%;
  border-radius: 8px;
  display: block;
}


/* ============================================================
   BADGES
   Tinted background + darker "ink" text. The ink tokens exist because
   --att-success / --att-warning clear 4.5:1 on WHITE but not on their own
   tint; the ink pairs clear 6:1 on the tint.
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

/* "Lever TBD", "Market Benchmark", "In Progress" — 6.0:1 */
.badge-pending {
  background: rgba(180, 83, 9, 0.10);
  color: var(--ink-warning);
  border: 1px solid rgba(180, 83, 9, 0.28);
}

/* "Active" — 6.3:1 */
.badge-done {
  background: rgba(0, 135, 90, 0.10);
  color: var(--ink-success);
  border: 1px solid rgba(0, 135, 90, 0.28);
}

/* "Data Required" — 5.4:1 */
.badge-error {
  background: rgba(192, 0, 0, 0.10);
  color: var(--ink-error);
  border: 1px solid rgba(192, 0, 0, 0.28);
}

/* 4.6:1 */
.badge-info {
  background: var(--att-glass);
  color: var(--att-blue-ink);
  border: 1px solid var(--att-glass-border);
}

.badge-neutral {
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}


/* ============================================================
   HCL BLIND MODE
   ============================================================ */
.hcl-blind {
  filter: blur(8px) grayscale(0.5);
  user-select: none;
  pointer-events: none;
}

/* Used on masked chart axis labels in HCL preview mode */
.hcl-axis-masked {
  opacity: 0.45;
  font-style: italic;
}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 20px;
  height: 44px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-brand),
              box-shadow var(--dur-base) var(--ease-brand),
              transform 80ms ease;
}

.btn:focus-visible {
  outline: 2px solid var(--att-blue-ink);
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.98);
}

/* --att-dark-blue, not --att-blue: white on #00A8E0 is 2.3:1 and dark text on
   #00A8E0 reads as a developer-tool cyan. #067AB4 + white is 4.72:1. */
.btn-primary {
  background: var(--att-dark-blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--att-deep-blue);
  box-shadow: var(--shadow-md);
  color: #fff;
  text-decoration: none;
}

.btn-secondary {
  background: var(--surface-0);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
}

.btn-secondary:hover {
  background: var(--surface-1);
  border-color: var(--att-blue);
  text-decoration: none;
}

.btn-ghost {
  background: none;
  color: var(--att-blue-ink);
  border: 1px solid var(--att-glass-border);
}

.btn-ghost:hover {
  background: var(--att-glass);
  border-color: var(--att-blue);
  text-decoration: none;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Segmented view switch (e.g. AT&T PMO View / Kearney View) */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 40px;
  background: var(--surface-0);
  color: var(--text-secondary);
  border: 1px solid var(--border-input);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background var(--dur-base) var(--ease-brand),
              color var(--dur-base) var(--ease-brand);
}

.toggle-btn:first-child { border-radius: 8px 0 0 8px; }
.toggle-btn:last-child  { border-radius: 0 8px 8px 0; margin-left: -1px; }

.toggle-btn:hover {
  background: var(--surface-1);
  color: var(--text-primary);
}

.toggle-btn.active,
.toggle-btn[aria-pressed="true"] {
  background: var(--att-dark-blue);
  border-color: var(--att-dark-blue);
  color: #fff;
  font-weight: 600;
  position: relative;
  z-index: 1;
}


/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.form-input {
  height: 44px;
  padding: 0 14px;
  background: var(--surface-0);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: var(--fs-base);
  font: inherit;
  transition: border-color var(--dur-base) var(--ease-brand),
              box-shadow var(--dur-base) var(--ease-brand);
}

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

.form-input:hover {
  border-color: var(--text-muted);
}

.form-input:focus {
  outline: none;
  border-color: var(--att-dark-blue);
  box-shadow: 0 0 0 3px rgba(0, 168, 224, 0.22);
}

.form-input[type="password"] {
  letter-spacing: 0.15em;
}


/* ============================================================
   AUTH CARD (login page)
   ============================================================ */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--gutter);
  /* Soft blue-grey field so the white card reads as elevated. */
  background:
    radial-gradient(1100px 600px at 50% -12%, rgba(0, 168, 224, 0.10), transparent 60%),
    linear-gradient(180deg, #F2F6FA 0%, #E9EEF5 100%);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: var(--shadow-lg);
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.auth-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.auth-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-error {
  padding: 10px 14px;
  background: rgba(192, 0, 0, 0.08);
  border: 1px solid rgba(192, 0, 0, 0.30);
  border-radius: 8px;
  color: var(--ink-error);
  font-size: var(--fs-sm);
}

.auth-mfa-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
}

.mfa-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 12px;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   UTILITIES
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted  { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-att    { color: var(--att-blue-ink); }
.text-success { color: var(--att-success); }
.text-warning { color: var(--att-warning); }
.text-error   { color: var(--att-error); }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fs-sm  { font-size: var(--fs-sm); }
.fs-xs  { font-size: var(--fs-xs); }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
}

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

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

@media (max-width: 1279px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
}

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1; }

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin-block: 16px;
}


/* ============================================================
   PLACEHOLDER PATTERNS (honeycomb, waterfall)
   ============================================================ */
.honeycomb-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  padding: 24px;
}

.honeycomb-cell {
  aspect-ratio: 1;
  background: var(--att-glass);
  border: 1px solid var(--att-glass-border);
  border-radius: 8px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background var(--dur-base) var(--ease-brand);
}

.honeycomb-cell.is-active,
.honeycomb-cell:hover {
  background: var(--att-glass-strong);
  border-color: var(--att-blue);
}

.waterfall-placeholder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
}

.waterfall-bar {
  height: 24px;
  background: linear-gradient(
    90deg,
    rgba(0, 168, 224, 0.55) 0%,
    rgba(0, 168, 224, 0.18) 100%
  );
  border-radius: 0 4px 4px 0;
  box-shadow: inset 0 1px 0 rgba(0, 87, 160, 0.10);
}


/* ============================================================
   D3 CHART SURFACES
   The D3 renderers in cost_baseline.html set SVG fill as a presentation
   attribute (#e6edf3 / #8b949e — both dark-theme values, invisible or
   sub-3:1 on white). CSS beats presentation attributes, so the light-theme
   values are asserted here rather than by editing the template.
   ============================================================ */
#honeycomb-container,
#waterfall-container {
  min-height: 240px;
}

#honeycomb-container svg text,
#waterfall-container svg text {
  fill: var(--text-primary);
  font-family: inherit;
}

#waterfall-container svg text {
  fill: var(--text-secondary);
}

/* Value labels — the renderers emit these with fill="#00A8E0" (2.7:1 on
   white); re-point them at the accessible ink blue. */
#honeycomb-container svg text[fill="#00A8E0"],
#waterfall-container svg text[fill="#00A8E0"] {
  fill: var(--att-blue-ink);
  font-weight: 600;
}

#honeycomb-container svg g:focus-visible polygon,
#honeycomb-container svg g:hover polygon {
  stroke: var(--att-deep-blue);
  stroke-width: 2.5;
}


/* ============================================================
   TOUCH TARGETS — global catch-all for interactive controls
   ============================================================ */
.toggle-btn,
a[role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* General button floor so custom sub-components don't slip below 44 px. */
button:not(.hamburger):not(.hamburger-btn):not(.user-avatar-btn):not(.hcl-toggle):not(.btn):not(.att-system-label) {
  min-height: 44px;
}


/* ============================================================
   HAMBURGER-BTN — CSS alias; all display logic lives on .hamburger
   ============================================================ */
.hamburger-btn {
  /* width/height/display already set by .hamburger; this ensures the
     class name the task spec references also works as a standalone hook. */
}

@media (min-width: 768px) {
  .hamburger-btn {
    display: none;
  }
}


/* ============================================================
   COST POOL TABS (.att-topnav + .att-pool-tabs)
   Secondary tab row used inside cost sub-pages.
   ============================================================ */
.att-topnav {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.att-pool-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.att-pool-tabs::-webkit-scrollbar {
  display: none;
}

/* Tablet: horizontally scrollable pill row, no wrapping. */
@media (min-width: 768px) and (max-width: 1279px) {
  .att-pool-tabs {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
}

/* Mobile: hide tabs by default; overlay as vertical list when
   document.body has the .nav-mobile-open class. */
@media (max-width: 767px) {
  .att-topnav .hamburger-icon-pool {
    display: flex;
  }

  .att-pool-tabs {
    display: none;
  }

  .nav-mobile-open .att-pool-tabs {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 56px; /* below the topbar */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: var(--surface-0);
    overflow-y: auto;
    padding: 8px 0;
    border-top: 1px solid var(--border);
  }

  .nav-mobile-open .att-pool-tabs .nav-tab {
    width: 100%;
    border-bottom: 1px solid var(--border);
    padding-block: 12px;
  }
}


/* ============================================================
   BASELINE GRID (honeycomb left / waterfall right on desktop)
   ============================================================ */
.baseline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

/* Tablet: 50/50 side-by-side (same as default, explicit for clarity). */
@media (min-width: 768px) and (max-width: 1279px) {
  .baseline-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile: single column — honeycomb above, waterfall below. */
@media (max-width: 767px) {
  .baseline-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   KPI STRIP (4-up → 2×2 on tablet and mobile)
   ============================================================ */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}

@media (max-width: 1279px) {
  .kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Defaults for pages that do not ship their own KPI styles.
   Single-class selectors only, so a page-level <style> block still wins. */
.kpi-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.kpi-highlight {
  border-color: rgba(0, 168, 224, 0.30);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(0, 168, 224, 0.12);
  background: rgba(0, 168, 224, 0.03);
}

.kpi-value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  min-height: 1.2em;
}

.kpi-highlight .kpi-value {
  color: var(--att-blue-ink);
}

.kpi-label {
  margin-top: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ============================================================
   PANELS (chart containers) — defaults, page styles override
   ============================================================ */
.honeycomb-panel,
.waterfall-panel,
.lever-table-section {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.lever-table-section {
  margin-top: var(--gutter);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.panel-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.panel-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}


/* ============================================================
   LEVER TABLE
   The class is applied both to a scroll wrapper and, on the baseline
   page, directly to the <table>. Both shapes are supported.
   ============================================================ */
.lever-table {
  width: 100%;
  border-radius: 8px;
}

/* Only the wrapper form scrolls. A <table> is a poor scroll container —
   when the class sits on the table itself, .lever-table-section scrolls. */
div.lever-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
}

.lever-table table,
table.lever-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-sm);
}

.lever-table thead th {
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-3);
  white-space: nowrap;
}

.lever-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

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

.lever-table tbody tr:hover {
  background: var(--surface-2);
}

.lever-table .num-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lever-table .owner-cell {
  color: var(--text-secondary);
}

.lever-link {
  color: var(--att-blue-ink);
  font-weight: 500;
}

.lever-link:hover {
  color: var(--att-deep-blue);
  text-decoration: underline;
}

.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.dim-note {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-style: italic;
  padding: 24px 0;
}

/* Confidence dots — solid fills, readable against white */
.conf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}

.conf-high   { background: var(--att-success); }
.conf-medium { background: var(--att-warning); }
.conf-low    { background: var(--att-error); }
.conf-none   { background: var(--text-muted); }

@media (max-width: 767px) {
  .lever-table table,
  table.lever-table {
    min-width: 600px;
  }
}


/* ============================================================
   PAGE HEADER / TITLE
   ============================================================ */
h1.page-title,
.page-title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.page-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.baseline-toggle {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 767px) {
  h1.page-title,
  .page-title {
    font-size: 20px;
  }
  .page-header { flex-direction: column; }
}


/* ============================================================
   COST CARD — full width, no horizontal margin on mobile
   ============================================================ */
@media (max-width: 767px) {
  .cost-card {
    width: 100%;
    margin-inline: 0;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .skeleton {
    animation: none;
    background: var(--surface-2);
  }
}


/* ============================================================
   PRINT — the light theme is the deliverable; make it print clean
   ============================================================ */
@media print {
  .att-topbar,
  .att-nav,
  .att-system-section,
  .att-topnav,
  .mobile-nav,
  .hamburger {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .cost-card,
  .kpi-card,
  .honeycomb-panel,
  .waterfall-panel,
  .lever-table-section {
    box-shadow: none;
    border: 1px solid #C7CDD6;
    break-inside: avoid;
  }
}


/* ============================================================
   SPEND DECOMPOSITION SECTION
   ============================================================ */
.spend-decomp-section {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--gutter);
}

.spend-decomp-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.spend-decomp-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.spend-decomp-total {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.spend-decomp-total strong {
  color: var(--att-blue-ink);
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.spend-decomp-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 16px;
}

/* Stacked bar */
.spend-decomp-bar {
  display: flex;
  width: 100%;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
  gap: 2px;
}

.spend-segment {
  height: 100%;
  transition: opacity var(--dur-base) var(--ease-brand);
  border-radius: 0;
  position: relative;
}

.spend-segment:first-child { border-radius: 6px 0 0 6px; }
.spend-segment:last-child  { border-radius: 0 6px 6px 6px; }

/* AT&T blue family — deepest to lightest */
.spend-segment-hw         { background: var(--att-deep-blue); }   /* #0057A0 */
.spend-segment-sw         { background: var(--att-dark-blue); }   /* #067AB4 */
.spend-segment-labor      { background: var(--att-blue); }        /* #00A8E0 */
.spend-segment-commercial { background: var(--att-light-blue); }  /* #75DBFF */

.spend-segment:hover { opacity: 0.85; }

/* Legend row */
.spend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 20px;
}

.spend-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.spend-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* KPI tiles for each bucket */
.spend-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

@media (max-width: 1279px) {
  .spend-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

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

.spend-kpi-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 0; /* fully flat — thick top accent sits on square corners */
  padding: 14px 16px;
  border-top: 3px solid transparent;
}

.spend-kpi-tile-hw         { border-top-color: var(--att-deep-blue); }
.spend-kpi-tile-sw         { border-top-color: var(--att-dark-blue); }
.spend-kpi-tile-labor      { border-top-color: var(--att-blue); }
.spend-kpi-tile-commercial { border-top-color: var(--att-light-blue); }

.spend-kpi-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.spend-kpi-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.spend-kpi-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Trend indicators */
.trend-up   { color: var(--att-error);   font-weight: 600; }  /* spend up = bad */
.trend-down { color: var(--att-success); font-weight: 600; }  /* spend down = good */
.trend-flat { color: var(--text-muted);  font-weight: 600; }

/* Key cost drivers table */
.spend-drivers-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.spend-drivers-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.spend-driver-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  background: var(--surface-0);
  transition: background var(--dur-base) var(--ease-brand);
}

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

.spend-driver-row:hover { background: var(--surface-1); }

.spend-driver-name { color: var(--text-primary); font-weight: 500; }

.spend-driver-value {
  color: var(--att-blue-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.spend-driver-rank {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--att-glass);
  color: var(--att-blue-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
}

@media print {
  .spend-decomp-section {
    box-shadow: none;
    border: 1px solid #C7CDD6;
    break-inside: avoid;
  }
}


/* ============================================================
   RHS LEVER ANALYSIS PANEL
   Slide-in from the right, over the deep-dive page. Backdrop
   locks page scroll; the panel scrolls internally.
   ============================================================ */
.lever-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 14, 26, 0.42);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-brand);
}

.lever-panel-overlay.is-open { opacity: 1; }

.lever-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 301;
  width: min(600px, 40vw);
  min-width: 380px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  border-left: 1px solid var(--att-glass-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lever-panel.is-open { transform: translateX(0); }

/* Page behind the panel must not scroll */
body.lever-panel-open { overflow: hidden; }

/* ---- Panel header ---------------------------------------- */
.lp-header {
  flex: 0 0 auto;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}

.lp-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lp-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0;
}

.lp-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.45;
}

.lp-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border-input);
  background: var(--surface-0);
  color: var(--text-secondary);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-brand);
}

.lp-close:hover { background: var(--surface-2); color: var(--text-primary); }
.lp-close:focus-visible { outline: 2px solid var(--att-blue-ink); outline-offset: 2px; }

/* ---- Report / Analysis mode switch ----------------------- */
.lp-modes {
  display: inline-flex;
  margin-top: 12px;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  overflow: hidden;
}

.lp-mode-btn {
  padding: 6px 14px;
  background: var(--surface-0);
  color: var(--text-secondary);
  border: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-brand),
              color var(--dur-base) var(--ease-brand);
}

.lp-mode-btn + .lp-mode-btn { border-left: 1px solid var(--border-input); }
.lp-mode-btn:hover { background: var(--surface-2); }
.lp-mode-btn.is-active { background: var(--att-dark-blue); color: #fff; }
.lp-mode-btn:focus-visible { outline: 2px solid var(--att-blue-ink); outline-offset: -2px; }

/* ---- Scrolling body -------------------------------------- */
.lp-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 20px 32px;
}

.lp-section { padding: 18px 0; border-bottom: 1px solid var(--border); }
.lp-section:last-child { border-bottom: none; }

.lp-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.lp-empty {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
  margin: 4px 0;
}

.lp-footnote {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 10px;
}

/* ---- Key/value rows -------------------------------------- */
.lp-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}

.lp-kv:last-child { border-bottom: none; }

.lp-kv-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  min-width: 0;
}

.lp-kv-sub {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  margin-top: 2px;
  word-break: break-all;
}

.lp-kv-value {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.lp-kv-variance .lp-kv-value { color: var(--ink-warning); }

/* ---- Headline total -------------------------------------- */
.lp-total {
  background: var(--att-glass);
  border: 1px solid var(--att-glass-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.lp-total-label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.lp-total-value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--att-blue-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin: 2px 0;
}

.lp-total-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Category bars --------------------------------------- */
.lp-cats { list-style: none; margin: 0; padding: 0; }
.lp-cat + .lp-cat { margin-top: 10px; }

.lp-cat-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.lp-cat-label { font-size: var(--fs-sm); color: var(--text-secondary); }

.lp-cat-value {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lp-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}

.lp-bar-fill {
  height: 100%;
  border-radius: 4px;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform var(--dur-base) var(--ease-brand);
}

.lp-bar-hardware { background: var(--att-deep-blue); }
.lp-bar-software { background: var(--att-blue); }
.lp-bar-labor    { background: var(--att-success); }
.lp-bar-other    { background: var(--text-muted); }

/* ---- Timeline table -------------------------------------- */
.lp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}

.lp-table th,
.lp-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.lp-table thead th {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
}

.lp-table tbody tr:last-child th,
.lp-table tbody tr:last-child td { border-bottom: none; }

.lp-num { text-align: right; font-variant-numeric: tabular-nums; }
.lp-year { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.lp-cost { color: var(--ink-warning); }
.lp-net  { font-weight: 700; color: var(--text-primary); }

/* ---- Methodology ----------------------------------------- */
.lp-formula {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.lp-formula-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.lp-formula-body {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: var(--fs-xs);
  color: var(--text-primary);
  line-height: 1.55;
  white-space: pre-wrap;
}

.lp-assump-head,
.lp-assump {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(64px, 0.7fr) minmax(90px, 1fr) minmax(62px, 0.6fr);
  gap: 10px;
  align-items: center;
}

.lp-assump-head {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.lp-assump {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.lp-assump.is-modified {
  background: rgba(0, 168, 224, 0.05);
  /* Subtle modification indicator — dot marker rather than side-tab border */
  outline: 1px solid rgba(0, 168, 224, 0.30);
  border-radius: 4px;
  padding-left: 8px;
  margin-left: -8px;
}

.lp-assump-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: 1.35;
}

.lp-assump-help {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

.lp-readout {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.lp-range {
  width: 100%;
  accent-color: var(--att-dark-blue);
  cursor: pointer;
}

.lp-range:disabled { cursor: not-allowed; opacity: 0.5; }

.lp-number,
.lp-select,
.lp-textarea {
  width: 100%;
  padding: 5px 8px;
  background: var(--surface-0);
  border: 1px solid var(--border-input);
  border-radius: 6px;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-xs);
  box-sizing: border-box;
}

.lp-number-wide { max-width: 180px; }

.lp-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }

.lp-number:disabled { opacity: 0.5; cursor: not-allowed; }

.lp-number:focus-visible,
.lp-select:focus-visible,
.lp-textarea:focus-visible,
.lp-range:focus-visible {
  outline: 2px solid var(--att-blue-ink);
  outline-offset: 1px;
}

.lp-assump-impact {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lp-assump-impact.is-up   { color: var(--ink-success); }
.lp-assump-impact.is-down { color: var(--ink-error); }

.lp-assump-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}

.lp-btn-sm {
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  font-size: var(--fs-xs);
}

/* Report View: controls are inert and visually recede. */
.lever-panel:not(.is-analysis) .lp-assump-control { opacity: 0.55; }

/* ---- HCL block ------------------------------------------- */
.lp-hcl-current { margin-bottom: 12px; }

.lp-hcl-form {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.lp-field-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
  margin: 8px 0 4px;
}

.lp-field-label:first-child { margin-top: 0; }

.lp-hcl-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.lp-hcl-status { font-size: var(--fs-xs); color: var(--text-muted); }
.lp-hcl-status.is-ok    { color: var(--ink-success); font-weight: 600; }
.lp-hcl-status.is-error { color: var(--ink-error); font-weight: 600; }

/* ---- Evidence -------------------------------------------- */
.lp-evidence-list { list-style: none; margin: 0; padding: 0; }

.lp-evidence-item {
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
}

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

.lp-evidence-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.lp-evidence-metric {
  flex: 1;
  font-size: var(--fs-xs);
  color: var(--text-primary);
  font-weight: 600;
  min-width: 0;
}

.lp-evidence-value {
  font-size: var(--fs-xs);
  color: var(--att-blue-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lp-evidence-src {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-top: 3px;
  word-break: break-all;
}

.lp-evidence-note {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 3px;
}

.lp-evidence-subhead {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
  margin: 14px 0 6px;
}

.lp-evidence-tables {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.66rem;
  color: var(--text-muted);
}

.lp-evidence-tables li { padding: 2px 0; word-break: break-all; }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 900px) {
  .lever-panel {
    width: 100vw;
    min-width: 0;
    border-left: none;
  }

  .lp-assump-head,
  .lp-assump {
    grid-template-columns: minmax(0, 1.4fr) minmax(58px, 0.6fr) minmax(80px, 0.9fr) minmax(56px, 0.6fr);
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lever-panel,
  .lever-panel-overlay,
  .lp-bar-fill {
    transition: none;
  }
}

@media print {
  .lever-panel,
  .lever-panel-overlay,
  .dd-analyze-bar {
    display: none !important;
  }
}


/* ============================================================
   CURRENT STATE ARCHITECTURE DIAGRAMS
   arch_router.js -> arch_datacenter.js | arch_apps.js
   ============================================================ */

.arch-section { margin-bottom: 32px; }

.arch-section .section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.arch-section .section-header h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.arch-section .section-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.arch-diagram {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  min-height: 400px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.arch-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.arch-error {
  padding: 32px 24px;
  text-align: center;
  color: var(--text-secondary);
}

.arch-error strong {
  display: block;
  color: var(--att-error);
  margin-bottom: 6px;
}

.arch-error p { font-size: var(--fs-sm); margin: 0; }

/* ── KPI strip ─────────────────────────────────────────────── */
.arch-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.arch-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: inset 2px 0 0 0 rgba(0,168,224,0.40), var(--shadow-sm);
}

.arch-kpi-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.arch-kpi-value {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.arch-kpi-hint { font-size: 0.6875rem; color: var(--text-muted); }

/* ── Toolbar, buttons, legend ──────────────────────────────── */
.arch-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.arch-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border-input);
  background: var(--surface-0);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: background var(--dur-base) var(--ease-brand),
              border-color var(--dur-base) var(--ease-brand),
              color var(--dur-base) var(--ease-brand);
}

.arch-btn:hover { background: var(--surface-2); border-color: var(--att-blue-ink); }

.arch-btn:focus-visible {
  outline: 2px solid var(--att-blue-ink);
  outline-offset: 2px;
}

.arch-btn-primary {
  background: var(--att-blue-ink);
  border-color: var(--att-blue-ink);
  color: #FFFFFF;
}

.arch-btn-primary:hover { background: var(--att-deep-blue); border-color: var(--att-deep-blue); }

.arch-btn-amber { border-color: var(--att-warning); color: var(--ink-warning); }

.arch-btn-amber.is-on {
  background: var(--att-warning);
  border-color: var(--att-warning);
  color: #FFFFFF;
}

.arch-segmented {
  display: inline-flex;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  overflow: hidden;
}

.arch-seg-btn {
  height: 34px;
  padding: 0 12px;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--surface-0);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: background var(--dur-base) var(--ease-brand),
              color var(--dur-base) var(--ease-brand);
}

.arch-seg-btn:last-child { border-right: none; }
.arch-seg-btn:hover { background: var(--surface-2); color: var(--text-primary); }

.arch-seg-btn.is-on {
  background: var(--att-blue-ink);
  color: #FFFFFF;
}

.arch-seg-btn:focus-visible {
  outline: 2px solid var(--att-blue-ink);
  outline-offset: -2px;
}

.arch-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.arch-legend-item { display: inline-flex; align-items: center; gap: 6px; }

.arch-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 2px solid var(--text-muted);
  background: transparent;
  flex-shrink: 0;
}

.arch-swatch-solid { border-width: 1px; }

.arch-legend-hint { color: var(--text-muted); font-style: italic; }

/* ── Stage: svg + side panel ───────────────────────────────── */
.arch-stage {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.arch-svg-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.arch-svg-wrap-wide { width: 100%; }

.arch-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ── DC nodes ──────────────────────────────────────────────── */
.arch-node {
  cursor: pointer;
  transition: opacity 0.2s var(--ease-brand);
}

.arch-node:hover { opacity: 0.85; }

.arch-node .arch-hex {
  transition: filter 0.2s var(--ease-brand);  /* stroke-width removed — SVG recalc */
}

.arch-node:hover .arch-hex,
.arch-node:focus-visible .arch-hex {
  filter: drop-shadow(0 4px 10px rgba(16, 24, 40, 0.28));
  stroke-width: 3.2;
}

.arch-node:focus-visible { outline: none; }

.arch-node:focus-visible .arch-hex {
  stroke: var(--att-blue-ink);
  stroke-width: 3.5;
}

.arch-node.is-selected .arch-hex {
  filter: drop-shadow(0 6px 16px rgba(16, 24, 40, 0.35));
  stroke-width: 3.6;
}

.arch-node.is-dimmed { opacity: 0.28; }
.arch-node.is-dimmed:hover { opacity: 0.6; }

.arch-link { transition: opacity 0.2s var(--ease-brand); }
.arch-link.is-dimmed { opacity: 0.18; }
.arch-link.is-active .arch-link-base { stroke-opacity: 0.55; }

.arch-link-flow {
  stroke-dasharray: 3 9;
  animation: arch-flow 1.6s linear infinite;
}

@keyframes arch-flow { to { stroke-dashoffset: -24; } }

.arch-hub-pulse {
  transform-origin: center;
  animation: arch-pulse 2.8s var(--ease-brand) infinite;
}

@keyframes arch-pulse {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.12); }
  100% { opacity: 0;    transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .arch-link-flow,
  .arch-hub-pulse { animation: none; }
  .arch-link-flow { stroke-dasharray: none; stroke-opacity: 0.3; }
  .arch-hub-pulse { opacity: 0; }
}

/* ── Side panel ────────────────────────────────────────────── */
.arch-panel {
  flex: 0 0 288px;
  max-width: 288px;
  padding: 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-self: flex-start;
  position: sticky;
  top: 16px;
}

.arch-panel-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}

.arch-panel-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.3;
}

.arch-panel-sub {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin: 12px 0 6px;
}

.arch-panel-h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 16px 0 6px;
}

.arch-panel-note {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 8px 0 0;
}

.arch-panel-source {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Definition-list stat rows, shared by panel and tooltip */
.arch-rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  margin: 0;
  font-size: var(--fs-xs);
}

.arch-rows dt { color: var(--text-muted); }

.arch-rows dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Energy / non-energy split bar */
.arch-splitbar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-3);
}

.arch-splitbar-energy { background: #EF7A45; }
.arch-splitbar-other  { background: var(--att-blue-ink); }

.arch-splitbar-key {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

.arch-splitbar-key .k-energy::before,
.arch-splitbar-key .k-other::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
}

.arch-splitbar-key .k-energy::before { background: #EF7A45; }
.arch-splitbar-key .k-other::before  { background: var(--att-blue-ink); }

/* ── Status pills ──────────────────────────────────────────── */
.arch-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.arch-pill-strategic {
  background: rgba(0, 135, 90, 0.12);
  color: var(--ink-success);
  border-color: rgba(0, 135, 90, 0.3);
}

.arch-pill-open {
  background: rgba(6, 122, 180, 0.12);
  color: var(--att-blue-ink);
  border-color: rgba(6, 122, 180, 0.3);
}

.arch-pill-closing {
  background: rgba(192, 0, 0, 0.1);
  color: var(--ink-error);
  border-color: rgba(192, 0, 0, 0.28);
}

/* ── Tooltip ───────────────────────────────────────────────── */
.arch-tooltip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  min-width: 210px;
  max-width: 300px;
  padding: 12px 14px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs);
  color: var(--text-primary);
}

.arch-tooltip[hidden] { display: none; }

.arch-tip-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.arch-tip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.arch-tip-region { color: var(--text-muted); font-size: 0.6875rem; }

.arch-tip-sub {
  margin: 10px 0 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.arch-tip-list { list-style: none; margin: 0; padding: 0; }

.arch-tip-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
  font-size: 0.6875rem;
}

.arch-tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.arch-tip-list-name { color: var(--text-secondary); }

.arch-tip-list-val {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.arch-tip-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ── Heat legend ───────────────────────────────────────────── */
.arch-heatkey {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.arch-heatkey-label { font-weight: 600; }

.arch-heatkey-ramp {
  flex: 0 1 200px;
  height: 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
}

.arch-heatkey-min,
.arch-heatkey-max { font-variant-numeric: tabular-nums; }

.arch-source-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ── Treemap cells ─────────────────────────────────────────── */
.arch-cell { cursor: default; }

.arch-cell.is-parent { cursor: pointer; }

.arch-cell .arch-cell-rect {
  transition: opacity 0.2s var(--ease-brand), filter 0.2s var(--ease-brand);
}

.arch-cell:hover .arch-cell-rect {
  filter: brightness(1.08) drop-shadow(0 3px 10px rgba(16, 24, 40, 0.25));
}

.arch-cell:focus-visible { outline: none; }

.arch-cell:focus-visible .arch-cell-rect {
  stroke: var(--att-blue-ink);
  stroke-width: 3;
}

.arch-cell.is-muted { opacity: 0.2; }

.arch-cell.is-opportunity .arch-cell-rect {
  stroke: #B45309;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(180, 83, 9, 0.5));
}

.arch-cell text { pointer-events: none; }

.arch-opp-banner {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(180, 83, 9, 0.08);
  border: 1px solid rgba(180, 83, 9, 0.28);
  border-radius: 8px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.arch-opp-banner[hidden] { display: none; }
.arch-opp-banner strong { color: var(--ink-warning); }
.arch-opp-caveat { color: var(--text-muted); font-style: italic; }

/* ── AppAnalysis supplemental panels (doc_id=162) ──────────── */
.arch-supp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.arch-supp-panel {
  background: var(--surface-1, #F8FAFC);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}

.arch-supp-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
  margin-bottom: 4px;
  line-height: 1.3;
}

.arch-supp-subtitle {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.arch-supp-bars { display: flex; flex-direction: column; gap: 10px; }

.arch-supp-row {
  display: grid;
  grid-template-columns: 140px 1fr 160px;
  align-items: center;
  gap: 10px;
}

.arch-supp-lbl {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arch-supp-barwrap {
  height: 10px;
  background: var(--surface-2, #EFF2F6);
  border-radius: 5px;
  overflow: hidden;
}

.arch-supp-bar {
  height: 100%;
  border-radius: 5px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-brand, ease);
}

.arch-supp-stat {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
}

.arch-supp-stat span {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.6875rem;
}

@media (max-width: 767px) {
  .arch-supp { grid-template-columns: 1fr; }
}

/* ── Placeholder card (levers with no diagram yet) ─────────── */
.arch-diagram.is-placeholder { min-height: 0; }

.arch-ph-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.arch-ph-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.arch-ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.arch-ph-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: inset 2px 0 0 0 rgba(0,168,224,0.40), var(--shadow-sm);
}

.arch-ph-metric-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.arch-ph-metric-value {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.arch-ph-metric .rel-dot { position: absolute; top: 10px; right: 10px; }

.arch-ph-empty {
  margin: 16px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.arch-ph-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.arch-ph-soon { font-style: italic; }
.arch-ph-foot-meta { font-variant-numeric: tabular-nums; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .arch-stage { flex-direction: column; }
  .arch-panel {
    flex: 1 1 auto;
    max-width: none;
    position: static;
  }
}

@media (max-width: 768px) {
  .arch-diagram { padding: 14px; overflow-x: auto; }
  .arch-svg-wrap { min-width: 640px; }
  .arch-legend { margin-left: 0; width: 100%; }
}

@media print {
  .arch-diagram { box-shadow: none; border: 1px solid #C7CDD6; break-inside: avoid; }
  .arch-toolbar, .arch-tooltip { display: none; }
  .arch-link-flow, .arch-hub-pulse { animation: none; }
}

/* ============================================================
   DATA CENTER FOOTPRINT — two-row arranged layout
   (arch_datacenter.js, lever: on-prem__data-center-footprint)
   ============================================================ */

/* Filter bar — uses existing .arch-btn / .arch-btn-primary */
.dc-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Summary bar below the SVG */
.dc-summary-bar {
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
}

.dc-summary-total {
  font-weight: 600;
  color: var(--text-primary);
}

/* Node groups */
.dc-node { cursor: pointer; }

.dc-node:focus-visible { outline: none; }
.dc-node:focus-visible .dc-node-bg {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 5px rgba(0, 168, 224, 0.5));
}

/* Node background rect — default (overridden by status variants below) */
.dc-node .dc-node-bg {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 1.5;
  transition: filter 0.15s var(--ease-brand);
}

.dc-node:hover .dc-node-bg {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
}

/* Closing sites: red fill, dashed red border */
.dc-node-closing .dc-node-bg {
  fill: #FEE2E2;
  stroke: #C00000;
  stroke-dasharray: 4 3;
  stroke-width: 1.5;
}

/* Strategic sites: pale blue fill, solid blue border */
.dc-node-strategic .dc-node-bg {
  fill: rgba(0, 168, 224, 0.06);
  stroke: #067AB4;
  stroke-dasharray: none;
  stroke-width: 1.5;
}

/* Node text defaults */
.dc-node text {
  pointer-events: none;
  user-select: none;
}

.dc-node-id {
  font-size: 11px;
  font-weight: 700;
  fill: var(--text-primary);
}

.dc-node-name {
  font-size: 9px;
  fill: var(--text-muted);
}

.dc-node-cost {
  font-size: 13px;
  font-weight: 700;
  fill: var(--att-blue-ink);
}

.dc-node-strategic .dc-node-cost { fill: var(--att-blue-ink); }
.dc-node-closing   .dc-node-cost { fill: var(--att-error); }

.dc-node-servers {
  font-size: 9px;
  fill: var(--text-muted);
}

/* Row annotation labels */
.dc-annotations text { pointer-events: none; }

/* Selection / dim states — matches existing .arch-node patterns */
.dc-node.is-selected .dc-node-bg {
  filter: drop-shadow(0 0 7px rgba(0, 168, 224, 0.55));
}

.dc-node.is-dimmed { opacity: 0.18; }
.dc-node.is-dimmed:hover { opacity: 0.55; }


/* ============================================================
   KEY TECHNOLOGY PLATFORMS — tool cards
   ============================================================ */
.tools-section { margin-bottom: 32px; }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.tool-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--dur-base) var(--ease-brand),
              border-color var(--dur-base) var(--ease-brand);
}

.tool-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-accent);
}

.tool-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}

.tool-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

.tool-cost {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Corpus-verified: AT&T accessible blue */
.tool-cost.corpus { color: var(--att-blue-ink); }

/* Estimated: amber warning, WCAG-safe on white */
.tool-cost.estimated { color: var(--att-warning); }

.tool-category {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media print {
  .tools-section { break-inside: avoid; }
  .tool-card { box-shadow: none; border: 1px solid #C7CDD6; }
}


/* ============================================================
   CHAT RAIL — floating ask button + slide-in panel
   Uses --att-dark-blue for the button so white text passes
   4.72:1 WCAG AA (same contract as .btn-primary).
   ============================================================ */
.chat-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 200;
  background: var(--att-dark-blue);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md), var(--att-glow);
  transition: background var(--dur-base) var(--ease-brand),
              box-shadow var(--dur-base) var(--ease-brand);
}

.chat-btn:hover {
  background: var(--att-deep-blue);
  box-shadow: var(--shadow-lg), var(--att-glow);
}

.chat-btn:focus-visible {
  outline: 2px solid var(--att-blue-ink);
  outline-offset: 3px;
}

.chat-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 380px;
  background: var(--surface-0);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-brand);
  z-index: 250;
  display: flex;
  flex-direction: column;
  /* Keep below the lever panel overlay (z-index 300/301) */
}

.chat-panel.is-open {
  transform: translateX(0);
}

.chat-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}

.chat-header-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
}

.chat-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  max-width: 90%;
  /* white-space pre-wrap so multi-line answers are readable */
  white-space: pre-wrap;
  word-break: break-word;
}

/* --att-dark-blue + white: 4.72:1 — passes WCAG AA for normal text */
.chat-msg-user {
  background: var(--att-dark-blue);
  color: #fff;
  align-self: flex-end;
}

.chat-msg-bot {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-primary);
  align-self: flex-start;
}

.chat-msg-error {
  background: rgba(192, 0, 0, 0.06);
  border: 1px solid rgba(192, 0, 0, 0.2);
  color: var(--att-error);
  align-self: flex-start;
  font-size: var(--fs-xs);
}

/* Streaming answer — cursor blink shows tokens are arriving */
.chat-msg-streaming::after {
  content: '▌';
  animation: blink 0.7s step-end infinite;
  color: var(--att-blue);
  margin-left: 1px;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

.chat-input-row {
  flex: 0 0 auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-input-row textarea {
  flex: 1;
  resize: none;
  height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-0);
  transition: border-color var(--dur-base) var(--ease-brand),
              box-shadow var(--dur-base) var(--ease-brand);
}

.chat-input-row textarea:focus {
  outline: none;
  border-color: var(--att-dark-blue);
  box-shadow: 0 0 0 3px rgba(0, 168, 224, 0.22);
}

@media (max-width: 767px) {
  .chat-panel {
    width: 100vw;
    border-left: none;
  }

  .chat-btn {
    bottom: 20px;
    right: 20px;
    font-size: var(--fs-xs);
    padding: 10px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel { transition: none; }
  .chat-btn   { transition: none; }
}

@media print {
  .chat-btn,
  .chat-panel { display: none !important; }
}


/* ============================================================
   COST POOL LANDING PAGE
   ============================================================ */
.pool-page-header {
  margin-bottom: 24px;
}

.pool-hero-title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.2;
}

.pool-hero-meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Sub-scope card grid */
.subscope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.subscope-empty {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: 24px 0;
}

/* Individual sub-scope card */
.subscope-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-brand),
              border-color var(--dur-base) var(--ease-brand);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subscope-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-accent);
}

.subscope-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.subscope-card-name {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.subscope-card-lever {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}

.subscope-card-owners {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.subscope-owners-label {
  font-weight: 600;
}

.subscope-owners-tbd {
  font-style: italic;
}

/* Card footer: savings indicator + explore link */
.subscope-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
}

.subscope-savings {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--att-blue-ink);
  font-variant-numeric: tabular-nums;
}

.subscope-savings-tbd {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
}

.subscope-explore {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--att-blue-ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.subscope-explore:hover {
  text-decoration: underline;
}

.subscope-explore:focus-visible {
  outline: 2px solid var(--att-blue-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Responsive: collapse to single column on narrow viewports */
@media (max-width: 480px) {
  .subscope-grid {
    grid-template-columns: 1fr;
  }

  .pool-hero-title {
    font-size: var(--fs-2xl);
  }
}

/* ── Infrastructure Footprint section ──────────────────────────────────────── */
/* Light theme: matches .honeycomb-panel / .waterfall-panel. Previously read
   var(--surface-card, #111827) — an undefined token, so this card rendered dark
   against the light page and put near-black --text-primary labels on it. */
.footprint-section {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 20px 24px 24px;
  margin-bottom: 20px;
}

.footprint-section .section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.footprint-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  .footprint-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footprint-kpi-tile {
  background: rgba(0, 168, 224, 0.05);
  border: 1px solid rgba(0, 168, 224, 0.15);
  border-radius: 8px;
  padding: 14px 16px;
}

.footprint-kpi-tile-hq {
  border-color: rgba(210, 153, 34, 0.3);
  background: rgba(210, 153, 34, 0.05);
}

.footprint-kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  /* --att-blue-ink, not --att-blue: #00A8E0 as text is 2.73:1 on this surface. */
  color: var(--att-blue-ink);
  line-height: 1.1;
  margin-bottom: 4px;
}

.footprint-kpi-tile-hq .footprint-kpi-value {
  color: var(--ink-warning);
}

.footprint-kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary, #e6edf3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.footprint-kpi-sub {
  font-size: 0.72rem;
  color: var(--text-muted, #8b949e);
}

.footprint-map {
  width: 100%;
  min-height: 320px;
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
  background: #F8FAFC;
  border: 1px solid var(--border);
}

/* height:auto lets the viewBox aspect ratio drive the height. Without it the
   height attribute set at render time goes stale on resize and the map
   letterboxes inside a too-tall box. */
.footprint-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.dc-marker {
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-brand);
}

.dc-marker:hover,
.dc-marker:focus-visible {
  opacity: 0.8;
  outline: none;
}

/* The solid marker circle is the last <circle> in the group — the dashed
   closure halo, where present, precedes it. */
.dc-marker:focus-visible circle:last-of-type {
  stroke: var(--att-blue-ink);
  stroke-width: 2.5;
}


/* ============================================================
   POOL-LEVEL ARCHITECTURE DIAGRAMS
   arch_mainframe.js · arch_software.js · arch_workforce.js
   arch_commercial.js · arch_enduser.js
   Shared `.pa-*` primitives; each file also uses the generic
   .arch-* stage / panel / tooltip / kpi classes above.
   ============================================================ */

/* ── Interactive SVG node ──────────────────────────────────── */
.pa-node {
  cursor: pointer;
  transition: opacity 0.2s var(--ease-brand);
}
.pa-node:hover { opacity: 0.88; }
.pa-node:focus-visible { outline: none; }
.pa-node:focus-visible .pa-hit {
  stroke: var(--att-blue-ink);
  stroke-width: 2.5;
  stroke-dasharray: none;
}
.pa-node.is-selected .pa-hit {
  stroke: var(--att-blue-ink);
  stroke-width: 2.5;
}
.pa-node.is-dimmed { opacity: 0.22; }
.pa-node.is-dimmed:hover { opacity: 0.6; }

.pa-hit { transition: stroke 0.18s var(--ease-brand); /* stroke-width removed — SVG geometry recalc */ }

/* Non-interactive scaffolding text inside a diagram */
.pa-lane-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: var(--text-muted);
}
.pa-axis-tick {
  font-size: 10px;
  fill: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pa-node text { pointer-events: none; }

/* ── Provenance flags ──────────────────────────────────────── */
.pa-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.pa-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.pa-flag-corpus { color: var(--ink-success); border-color: rgba(0, 135, 90, 0.35); }
.pa-flag-est    { color: var(--ink-warning); border-color: rgba(180, 83, 9, 0.35); border-style: dashed; }
.pa-flag-bench  { color: var(--att-blue-ink); border-color: rgba(6, 122, 180, 0.35); }
.pa-flag-none   { color: var(--ink-error); border-color: rgba(192, 0, 0, 0.3); }

.pa-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  vertical-align: middle;
}
.pa-tag-corpus { background: rgba(0, 135, 90, 0.12); color: var(--ink-success); }
.pa-tag-est    { background: rgba(180, 83, 9, 0.12); color: var(--ink-warning); }
.pa-tag-bench  { background: rgba(6, 122, 180, 0.12); color: var(--att-blue-ink); }
.pa-tag-none   { background: rgba(192, 0, 0, 0.10); color: var(--ink-error); }

/* ── Callout band under the toolbar ────────────────────────── */
.pa-callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 6px;
  border: 1px solid rgba(180, 83, 9, 0.28);
  background: rgba(180, 83, 9, 0.06);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}
.pa-callout strong { color: var(--ink-warning); }
.pa-callout-blue {
  border-color: rgba(6, 122, 180, 0.28);
  background: rgba(0, 168, 224, 0.06);
}
.pa-callout-blue strong { color: var(--att-blue-ink); }
.pa-callout-red {
  border-color: rgba(192, 0, 0, 0.26);
  background: rgba(192, 0, 0, 0.05);
}
.pa-callout-red strong { color: var(--ink-error); }

/* ── Wage / rate table inside the side panel ───────────────── */
.pa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.6875rem;
  margin: 6px 0 4px;
}
.pa-table th,
.pa-table td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.pa-table th {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.625rem;
}
.pa-table td { color: var(--text-primary); }
.pa-table td.pa-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pa-table tr.is-est td { color: var(--text-secondary); font-style: italic; }

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pa-node,
  .pa-hit { transition: none; }
}

/* Six arch_*.js modules set `is-reduced-motion` on their container when the
   user has asked for reduced motion, but until now no rule listened for it, so
   the class was inert and the media query above was doing all the work.  This
   makes the class authoritative for everything the diagrams draw inside their
   own container — including marks the media query never named. */
.is-reduced-motion *,
.is-reduced-motion *::before,
.is-reduced-motion *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}

@media print {
  .pa-flags { display: none; }
}

/* ── Lever panel — Discounted NPV row ─────────────────────── */
.lp-npv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--att-glass);
  border: 1px solid var(--att-glass-border);
  border-radius: 8px;
}

.lp-npv-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.lp-npv-value {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--att-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Architecture annotation notes ─────────────────────────────────────── */
.arch-note-panel {
  background: var(--surface-0);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.arch-note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.arch-note-header button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-muted);
  padding: 0 4px;
}

.arch-note-header button:hover {
  color: var(--text-primary);
}

.arch-note-text-input {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border-input, var(--border));
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: var(--fs-sm);
  background: var(--surface-1);
  color: var(--text-primary);
  box-sizing: border-box;
}

.arch-note-text-input:focus {
  outline: 2px solid var(--att-blue);
  outline-offset: 1px;
}

.arch-note-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.arch-notes-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arch-note-item {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}

.arch-note-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
}

.arch-note-text {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
}

/* ── Completeness bar (Phase 9) ─────────────────────────────────────────── */
/* 4px strip at the bottom of each sub-scope card. */
/* Green ≥ 0.7, amber 0.40–0.69, grey < 0.40 (WCAG-safe colours). */
.completeness-bar-wrapper {
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.completeness-bar {
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: #6B7280;   /* grey — default / low */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms ease;
}

.completeness-bar.cb-green { background: var(--att-success); }  /* ≥ 0.70 */
.completeness-bar.cb-amber { background: var(--att-warning); }  /* 0.40–0.69 */
/* below 0.40: grey (default) */

/* ── Expert Lever — applicability dot (layout redesign) ─────────────────── */
.lv-applicability-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}

.lv-applicability-dot--high    { background: #00B050; }  /* green */
.lv-applicability-dot--medium  { background: #FFC000; }  /* yellow */
.lv-applicability-dot--low     { background: #374151; }  /* dark grey */
.lv-applicability-dot--unknown { background: #D1D5DB; }  /* light grey */

/* "Sorted by applicability" micro-label */
.xl-sort-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 24px 4px;
  margin: 0;
  border-bottom: 1px solid var(--border);
}

/* ── Gaps grid — Data Needed + Open Questions side by side ───────────────── */
.dd-gaps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 768px) {
  .dd-gaps-grid { grid-template-columns: 1fr; }
}

/* ── Unit-specific architecture diagrams ─────────────────────────────────── */
.unit-arch-wrap {
  margin-top: 28px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.unit-arch-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.unit-arch-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.unit-arch-src {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

.unit-arch-svg-wrap {
  width: 100%;
  overflow-x: auto;
}

.unit-arch-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: inherit;
}

#unit-arch-container.is-ready {
  /* Confirm render complete — no visual change needed */
}

/* ══════════════════════════════════════════════════════════════════════════
   Corpus Evidence Layer  (/static/arch_corpus_layer.js)

   The pool arch diagrams are hand-authored and identical across sibling
   sub-scopes.  This layer sits beneath them and is drawn from the live
   per-sub-scope generated payloads, so it is the part of the Current State
   Architecture block that is genuinely specific to the sub-scope on screen.
   Every colour below resolves to an existing :root token — nothing new is
   introduced to the palette.
   ══════════════════════════════════════════════════════════════════════════ */

#arch-corpus-layer {
  margin-top: 20px;
}

.acl-tip-host {
  position: relative;
}

.acl-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-0);
  padding: 16px 18px 14px;
  margin-bottom: 16px;
}

.acl-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.acl-panel-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.acl-panel-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Collapsible Evidence wrapper panel */
.acl-collapsible-head {
  cursor: pointer;
  user-select: none;
  justify-content: space-between;
}
.acl-collapsible-head:hover { background: var(--att-glass); border-radius: 6px; }
.acl-collapsible-title { flex: 1; }
.acl-chevron {
  font-size: 1rem;
  color: var(--text-muted);
  transition: transform 220ms ease;
  margin-left: 8px;
}
.acl-collapsible-body > .acl-panel {
  margin-top: 12px;
  border-left: 2px solid var(--border);
  padding-left: 12px;
}

.acl-svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: inherit;
  overflow: visible;
}

.acl-empty {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.acl-foot {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── A. Initiative horizon ───────────────────────────────────────────── */

.acl-col-label {
  font-size: 12px;
  font-weight: 700;
  fill: var(--text-secondary);
  letter-spacing: 0.06em;
}

.acl-col-rule {
  stroke: var(--border);
  stroke-width: 1;
}

.acl-axis-note {
  font-size: 11px;
  fill: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.acl-row-name {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--text-primary);
}

.acl-row-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.acl-row-tag.is-inflight  { fill: var(--ink-success); }
.acl-row-tag.is-proposed  { fill: var(--ink-warning); }

.acl-zero {
  /* The baseline both directions are measured from, so it has to be visible
     without competing with the bars. --border (0.08 alpha) was invisible. */
  stroke: rgba(0, 0, 0, 0.22);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.acl-bar {
  transition: opacity var(--dur-base) var(--ease-brand);
  cursor: default;
}

.acl-bar-value { fill: var(--att-blue-ink); }
.acl-bar-cost  { fill: var(--att-warning); }

/* Proposed is not committed — the outline says so without a second colour. */
.acl-bar.is-proposed {
  fill-opacity: 0.34;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.acl-bar-value.is-proposed { stroke: var(--att-blue-ink); }
.acl-bar-cost.is-proposed  { stroke: var(--att-warning); }

.acl-bar:hover { fill-opacity: 1; }

.acl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
}

.acl-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.acl-key-swatch {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.acl-key-swatch.acl-key-value { background: var(--att-blue-ink); }
.acl-key-swatch.acl-key-cost  { background: var(--att-warning); }
.acl-key-swatch.acl-key-proposed {
  background: rgba(6, 122, 180, 0.34);
  border: 1px dashed var(--att-blue-ink);
}

/* ── B. Evidence base ────────────────────────────────────────────────── */

.acl-file-name {
  font-size: 11.5px;
  fill: var(--text-secondary);
}

.acl-file-bar {
  fill: var(--att-blue-ink);
  fill-opacity: 0.82;
  transition: fill-opacity var(--dur-base) var(--ease-brand);
  cursor: default;
}

.acl-file-bar:hover { fill-opacity: 1; }

.acl-file-count {
  font-size: 11.5px;
  font-weight: 700;
  fill: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ── C. Section coverage ─────────────────────────────────────────────── */

.acl-cov {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.acl-cov-cell {
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  border: 1px solid var(--border);
  min-width: 0;
}

.acl-cov-cell.is-filled {
  background: var(--att-glass);
  border-color: var(--att-glass-border);
}

/* An empty section is a real gap. Dashed, muted, and never mistaken for a
   populated cell with a zero in it. */
.acl-cov-cell.is-empty {
  background: transparent;
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.14);
}

.acl-cov-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acl-cov-value {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.acl-cov-cell.is-empty .acl-cov-value { color: var(--text-muted); }

/* ── Tooltip ─────────────────────────────────────────────────────────── */

.acl-tip {
  position: absolute;
  z-index: 40;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--text-primary);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  line-height: 1.45;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.acl-tip-strong {
  font-weight: 700;
  margin-bottom: 3px;
}

.acl-tip-row { opacity: 0.88; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .acl-cov { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .acl-cov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .acl-bar,
  .acl-file-bar { transition: none; }
}

@media print {
  .acl-tip { display: none; }
}