/* ============================================================
       DESIGN TOKENS — Dark-first intelligence/ops aesthetic
       Deep navy-black surfaces, amber/red threat indicators,
       tactical green for baselines, pure white for key data
    ============================================================ */
    :root {
      --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
      --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
      --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
      --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
      --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

      --space-1:  0.25rem;
      --space-2:  0.5rem;
      --space-3:  0.75rem;
      --space-4:  1rem;
      --space-5:  1.25rem;
      --space-6:  1.5rem;
      --space-8:  2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;

      --radius-sm: 0.25rem;
      --radius-md: 0.375rem;
      --radius-lg: 0.5rem;
      --radius-xl: 0.75rem;

      --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

      /* Pinkerton Dark Palette */
      --bg:          #05206A;   /* Pinkerton Blue — sidebar/chrome */
      --surface:     #071d5e;
      --surface-2:   #0a2468;
      --surface-3:   #0d2b78;
      --border:      #1a3a8a;
      --border-dim:  #122f7a;

      --text:        #e8edf5;
      --text-muted:  #ADCBFA;   /* New Kate Blue — muted on dark blue */
      --text-faint:  rgba(173,203,250,0.45);

      /* Threat/Impact colors */
      --critical:    #DC3A25;   /* NASH Orange — used sparingly per brand guide */
      --critical-bg: rgba(220,58,37,0.12);
      --high:        #e07020;
      --high-bg:     rgba(224,112,32,0.1);
      --medium:      #c49a06;
      --medium-bg:   rgba(196,154,6,0.1);
      --low:         #2e9e5b;
      --low-bg:      rgba(46,158,91,0.1);

      /* Data accents — Pinkerton Blue family */
      --accent:      #ADCBFA;   /* New Kate Blue */
      --accent-dim:  rgba(173,203,250,0.18);
      --teal:        #6ab0f5;
      --teal-dim:    rgba(106,176,245,0.12);
      --purple:      #a78bfa;
      --gold:        #f0b429;

      --shadow-sm:  0 1px 3px rgba(0,0,0,0.5);
      --shadow-md:  0 4px 16px rgba(0,0,0,0.6);
      --shadow-lg:  0 12px 40px rgba(0,0,0,0.7);
      --logo-filter: invert(1) brightness(2);
    }

    /* Pinkerton Blue sidebar/topbar in light mode */
    [data-theme="light"] .sidebar {
      background: #05206A;
      border-right-color: #03185a;
    }
    [data-theme="light"] .sidebar .logo-primary { color: #ffffff; }
    [data-theme="light"] .sidebar .logo-secondary { color: #ADCBFA; }
    [data-theme="light"] .sidebar .sidebar-section-label { color: rgba(173,203,250,0.6); }
    [data-theme="light"] .sidebar .sidebar-footer { color: rgba(173,203,250,0.55); border-top-color: rgba(173,203,250,0.2); }
    [data-theme="light"] .sidebar .nav-item { color: #ADCBFA; }
    [data-theme="light"] .sidebar .nav-item:hover { background: rgba(173,203,250,0.12); color: #ffffff; }
    [data-theme="light"] .sidebar .nav-item.active { background: rgba(173,203,250,0.2); color: #ffffff; }
    [data-theme="light"] .sidebar .nav-item.active .nav-dot { background: #ffffff; }
    [data-theme="light"] .sidebar .nav-dot { background: rgba(173,203,250,0.3); }
    [data-theme="light"] .sidebar .threat-badge { background: rgba(220,58,37,0.15); border-color: rgba(220,58,37,0.4); }
    [data-theme="light"] .sidebar .threat-label { color: #ff6b56; }
    [data-theme="light"] .sidebar .threat-pulse { background: #DC3A25; }
    [data-theme="light"] .sidebar .nav-badge.critical { background: rgba(220,58,37,0.2); color: #ff6b56; }
    [data-theme="light"] .sidebar .nav-badge.high { background: rgba(224,112,32,0.2); color: #f5934a; }
    [data-theme="light"] .sidebar .nav-badge.medium { background: rgba(196,154,6,0.2); color: #e0b800; }
    [data-theme="light"] .sidebar .sidebar-logo { border-bottom-color: rgba(173,203,250,0.2); }

    [data-theme="light"] .topbar {
      background: #05206A;
      border-bottom-color: #03185a;
    }
    [data-theme="light"] .topbar .page-title { color: #ffffff; }
    [data-theme="light"] .topbar .status-chip.active { border-color: rgba(220,58,37,0.6); color: #ff8070; background: rgba(220,58,37,0.18); }
    [data-theme="light"] .topbar .status-chip.active .threat-pulse { background: #DC3A25; }
    [data-theme="light"] .topbar .timestamp { color: #ADCBFA; }
    [data-theme="light"] .topbar .theme-toggle { color: #ADCBFA; }
    [data-theme="light"] .topbar .theme-toggle:hover { color: #ffffff; }
    [data-theme="light"] .topbar .mobile-menu-btn { color: #ADCBFA; }
    [data-theme="light"] .topbar .mobile-menu-btn:hover { color: #ffffff; background: rgba(173,203,250,0.12); }
    [data-theme="light"] .topbar-right { color: #ADCBFA; }
    [data-theme="light"] .topbar-right button { color: #ADCBFA; }
    [data-theme="light"] .topbar-right button:hover { color: #ffffff; }
    [data-theme="light"] .mobile-nav-drawer { background: #05206A; border-right-color: #03185a; }
    [data-theme="light"] .mobile-nav-drawer .logo-primary { color: #ffffff; }
    [data-theme="light"] .mobile-nav-drawer .logo-secondary { color: #ADCBFA; }
    [data-theme="light"] .mobile-nav-header { border-bottom-color: rgba(173,203,250,0.2); }
    [data-theme="light"] .mobile-nav-close { color: #ADCBFA; }
    [data-theme="light"] .mobile-nav-close:hover { color: #ffffff; background: rgba(173,203,250,0.12); }
    [data-theme="light"] .mobile-nav-section-label { color: rgba(173,203,250,0.6); }
    [data-theme="light"] .mobile-nav-item { color: #ADCBFA; }
    [data-theme="light"] .mobile-nav-item:hover { background: rgba(173,203,250,0.12); color: #ffffff; }
    [data-theme="light"] .mobile-nav-item.active { background: rgba(173,203,250,0.2); color: #ffffff; }
    [data-theme="light"] .mobile-nav-item.active .nav-dot { background: #ffffff; }
    [data-theme="light"] .mobile-nav-item .nav-dot { background: rgba(173,203,250,0.3); }
    [data-theme="light"] .mobile-nav-threat { background: rgba(220,58,37,0.15); border-color: rgba(220,58,37,0.4); }
    [data-theme="light"] .mobile-nav-threat .threat-label { color: #ff6b56; }
    [data-theme="light"] .mobile-nav-threat .threat-pulse { background: #DC3A25; }
    [data-theme="light"] .mobile-nav-item .nav-badge.critical { background: rgba(220,58,37,0.2); color: #ff6b56; }
    [data-theme="light"] .mobile-nav-item .nav-badge.high { background: rgba(224,112,32,0.2); color: #f5934a; }
    [data-theme="light"] .mobile-nav-item .nav-badge.medium { background: rgba(196,154,6,0.2); color: #e0b800; }

    [data-theme="light"] {
      /* Pinkerton Light Palette */
      --logo-filter: none;
      --bg:          #F7F7F7;   /* Off-Grey — spec background */
      --surface:     #FFFFFF;   /* White — card surfaces */
      --surface-2:   #F7F7F7;   /* Off-Grey */
      --surface-3:   #eef1f7;   /* Light blue-tinted grey */
      --border:      #d0d8e8;
      --border-dim:  #e4eaf4;
      --text:        #232323;   /* Midnight Black */
      --text-muted:  #918787;   /* Middle Grey */
      --text-faint:  #b0b8c8;

      /* Threat/Impact — Pinkerton brand aligned */
      --critical:    #DC3A25;   /* NASH Orange-Red (sparingly, <5%) */
      --critical-bg: rgba(220,58,37,0.07);
      --high:        #d96018;
      --high-bg:     rgba(217,96,24,0.07);
      --medium:      #b08800;
      --medium-bg:   rgba(176,136,0,0.07);
      --low:         #1e8a47;
      --low-bg:      rgba(30,138,71,0.07);

      /* Data accents — Pinkerton Blue as primary accent */
      --accent:      #05206A;   /* Pinkerton Blue */
      --accent-dim:  rgba(5,32,106,0.1);
      --teal:        #0a4fa8;   /* Mid-blue tone */
      --teal-dim:    rgba(10,79,168,0.08);
      --purple:      #6d4faa;
      --gold:        #c88a00;

      --shadow-sm:  0 1px 3px rgba(5,32,106,0.07);
      --shadow-md:  0 4px 16px rgba(5,32,106,0.09);
      --shadow-lg:  0 12px 40px rgba(5,32,106,0.12);
    }

    /* ============================================================
       BASE RESET
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
    body {
      height: 100dvh;
      overflow: hidden;
      font-family: 'Inter', -apple-system, sans-serif;
      font-size: var(--text-sm);
      color: var(--text);
      background: var(--bg);
      display: grid;
      grid-template-columns: 220px 1fr;
      grid-template-rows: 52px 1fr;
    }
    button { cursor: pointer; background: none; border: none; color: inherit; font: inherit; }
    table { border-collapse: collapse; width: 100%; }
    font-variant-numeric { font-variant-numeric: tabular-nums lining-nums; }

    /* ============================================================
       LAYOUT
    ============================================================ */
    .sidebar {
      grid-row: 1 / -1;
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .topbar {
      grid-column: 2;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--space-6);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .main {
      grid-column: 2;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--space-6);
    }

    .sidebar,
    .topbar,
    .main,
    .topbar-left,
    .topbar-right {
      min-width: 0;
    }

    /* ============================================================
       SIDEBAR
    ============================================================ */
    .sidebar-logo {
      padding: var(--space-4) var(--space-4) var(--space-3);
      border-bottom: 1px solid var(--border-dim);
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    .logo-icon {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
    }

    .logo-primary {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text);
      line-height: 1.2;
    }

    .logo-secondary {
      font-size: 0.65rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      line-height: 1.2;
    }

    .threat-badge {
      margin: var(--space-3) var(--space-4);
      padding: var(--space-2) var(--space-3);
      background: var(--critical-bg);
      border: 1px solid rgba(255,61,74,0.3);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .threat-pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--critical);
      flex-shrink: 0;
      animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }

    .threat-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--critical);
    }

    .sidebar-section {
      padding: var(--space-4) var(--space-3) var(--space-2);
    }

    .sidebar-section-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-faint);
      padding: 0 var(--space-2) var(--space-2);
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background var(--transition), color var(--transition);
      font-size: var(--text-xs);
      font-weight: 500;
      color: var(--text-muted);
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }

    .nav-item:hover { background: var(--surface-3); color: var(--text); }
    .nav-item.active { background: var(--accent-dim); color: var(--accent); }
    .nav-item.active .nav-dot { background: var(--accent); }

    .nav-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--border);
      flex-shrink: 0;
      transition: background var(--transition);
    }

    .nav-badge {
      margin-left: auto;
      font-size: 0.6rem;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: var(--radius-full, 9999px);
      letter-spacing: 0.04em;
    }
    .nav-badge.critical { background: var(--critical-bg); color: var(--critical); }
    .nav-badge.high { background: var(--high-bg); color: var(--high); }
    .nav-badge.medium { background: var(--medium-bg); color: var(--medium); }

    .sidebar-footer {
      margin-top: auto;
      padding: var(--space-3) var(--space-4);
      border-top: 1px solid var(--border-dim);
      font-size: 0.65rem;
      color: var(--text-faint);
    }

    /* ============================================================
       TOPBAR
    ============================================================ */
    .topbar-left {
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }

    .page-title {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--text);
    }

    .status-chip {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 3px var(--space-3);
      border-radius: var(--radius-full, 9999px);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .status-chip.active {
      background: var(--critical-bg);
      color: var(--critical);
      border: 1px solid rgba(255,61,74,0.2);
    }

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

    .timestamp {
      font-size: var(--text-xs);
      color: var(--text-muted);
      font-family: 'JetBrains Mono', monospace;
    }

    .theme-toggle {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      transition: background var(--transition), color var(--transition);
    }
    .theme-toggle:hover { background: var(--surface-3); color: var(--text); }

    .mobile-menu-btn {
      display: none;
      width: 32px;
      height: 32px;
      border-radius: var(--radius-md);
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      flex-shrink: 0;
      transition: background var(--transition), color var(--transition);
    }
    .mobile-menu-btn:hover { background: var(--surface-3); color: var(--text); }

    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      visibility: hidden;
      pointer-events: none;
    }

    .mobile-nav-overlay.open {
      visibility: visible;
      pointer-events: auto;
    }

    .mobile-nav-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.5);
      opacity: 0;
      transition: opacity 250ms ease;
    }

    .mobile-nav-overlay.open .mobile-nav-backdrop {
      opacity: 1;
    }

    .mobile-nav-drawer {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: min(280px, 82vw);
      background: var(--surface);
      border-right: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overscroll-behavior: contain;
      transform: translateX(-100%);
      transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-nav-overlay.open .mobile-nav-drawer {
      transform: translateX(0);
    }

    .mobile-nav-header {
      padding: var(--space-4);
      border-bottom: 1px solid var(--border-dim);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
    }

    .mobile-nav-header .sidebar-logo {
      padding: 0;
      border-bottom: none;
    }

    .mobile-nav-close {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      flex-shrink: 0;
      transition: background var(--transition), color var(--transition);
    }
    .mobile-nav-close:hover { background: var(--surface-3); color: var(--text); }

    .mobile-nav-threat {
      margin: var(--space-3) var(--space-4) 0;
    }

    .mobile-nav-section {
      padding: var(--space-4) 0;
    }

    .mobile-nav-section-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-faint);
      padding: 0 var(--space-4) var(--space-2);
    }

    [data-mobile-nav-container] {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
      padding: 0 var(--space-3);
    }

    .mobile-nav-item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background var(--transition), color var(--transition);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--text-muted);
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }

    .mobile-nav-item:hover { background: var(--surface-3); color: var(--text); }
    .mobile-nav-item.active { background: var(--accent-dim); color: var(--accent); }
    .mobile-nav-item.active .nav-dot { background: currentColor; }
    .mobile-nav-item .nav-badge { margin-left: auto; }

    body.mobile-nav-open .main {
      overflow: hidden;
    }

    .threat-label,
    .page-title,
    .timestamp,
    .section-title,
    .section-subtitle,
    .card-title,
    .card-subtitle,
    .metric-name,
    .metric-desc,
    .detail-card-description,
    .status-description,
    .status-action,
    .note-description,
    .ranked-description,
    .footer-note span {
      overflow-wrap: anywhere;
    }

    /* ============================================================
       CONTENT SECTIONS
    ============================================================ */
    .section { display: none; }
    .section.active { display: block; }

    .section-header {
      margin-bottom: var(--space-6);
    }

    .section-title {
      font-size: var(--text-lg);
      font-weight: 700;
      color: var(--text);
      margin-bottom: var(--space-2);
      line-height: 1.2;
    }

    .section-subtitle {
      font-size: var(--text-sm);
      color: var(--text-muted);
      max-width: 72ch;
    }

    /* ============================================================
       KPI CARDS
    ============================================================ */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: var(--space-4);
      margin-bottom: var(--space-6);
    }

    .kpi-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-4) var(--space-5);
      position: relative;
      overflow: hidden;
    }

    .kpi-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
    }

    .kpi-card.critical::before { background: var(--critical); }
    .kpi-card.high::before { background: var(--high); }
    .kpi-card.medium::before { background: var(--medium); }
    .kpi-card.info::before { background: var(--accent); }
    .kpi-card.teal::before { background: var(--teal); }
    .kpi-card.purple::before { background: var(--purple); }

    .kpi-label {
      font-size: var(--text-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: var(--space-2);
    }

    .kpi-value {
      font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
      font-weight: 700;
      color: var(--text);
      line-height: 1;
      font-variant-numeric: tabular-nums lining-nums;
      margin-bottom: var(--space-1);
    }

    .kpi-card.critical .kpi-value { color: var(--critical); }
    .kpi-card.high .kpi-value { color: var(--high); }
    .kpi-card.medium .kpi-value { color: var(--medium); }

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

    .kpi-delta.up { color: var(--critical); }
    .kpi-delta.down { color: var(--low); }
    .kpi-delta.neutral { color: var(--text-muted); }

    .kpi-baseline {
      font-size: var(--text-xs);
      color: var(--text-faint);
      margin-top: var(--space-1);
    }

    /* ============================================================
       IMPACT CARDS / CONTENT CARDS
    ============================================================ */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: var(--space-4);
      margin-bottom: var(--space-6);
    }

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

    .card-grid.three-col {
      grid-template-columns: repeat(3, 1fr);
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .card-header {
      padding: var(--space-4) var(--space-5);
      border-bottom: 1px solid var(--border-dim);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .card-title {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .card-body {
      padding: var(--space-4) var(--space-5);
    }

    .impact-pill {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 2px var(--space-2);
      border-radius: var(--radius-sm);
    }

    .impact-pill.critical { background: var(--critical-bg); color: var(--critical); border: 1px solid rgba(255,61,74,0.2); }
    .impact-pill.high { background: var(--high-bg); color: var(--high); border: 1px solid rgba(255,140,66,0.2); }
    .impact-pill.medium { background: var(--medium-bg); color: var(--medium); border: 1px solid rgba(245,200,66,0.2); }
    .impact-pill.low { background: var(--low-bg); color: var(--low); border: 1px solid rgba(74,222,128,0.2); }

    /* ============================================================
       DATA ROWS / METRIC ROWS
    ============================================================ */
    .metric-list { list-style: none; }

    .metric-row {
      display: flex;
      align-items: center;
      padding: var(--space-3) 0;
      border-bottom: 1px solid var(--border-dim);
      gap: var(--space-3);
    }

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

    .metric-name {
      flex: 1;
      font-size: var(--text-xs);
      color: var(--text-muted);
      font-weight: 500;
    }

    .metric-val {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--text);
      font-variant-numeric: tabular-nums lining-nums;
      text-align: right;
      min-width: 80px;
    }

    .metric-bar-wrap {
      width: 80px;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .metric-bar {
      height: 100%;
      border-radius: 2px;
      transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ============================================================
       CHART CONTAINERS
    ============================================================ */
    .chart-wrap {
      position: relative;
      height: 220px;
      width: 100%;
    }

    .chart-wrap.tall {
      height: 280px;
    }

    /* ============================================================
       TIMELINE
    ============================================================ */
    .timeline {
      position: relative;
      padding-left: var(--space-6);
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--border);
    }

    .timeline-item {
      position: relative;
      margin-bottom: var(--space-5);
    }

    .timeline-dot {
      position: absolute;
      left: calc(-1 * var(--space-6) + 4px);
      top: 4px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid var(--surface);
      z-index: 1;
    }

    .timeline-dot.critical { background: var(--critical); box-shadow: 0 0 0 3px rgba(255,61,74,0.2); }
    .timeline-dot.high { background: var(--high); box-shadow: 0 0 0 3px rgba(255,140,66,0.2); }
    .timeline-dot.medium { background: var(--medium); box-shadow: 0 0 0 3px rgba(245,200,66,0.2); }
    .timeline-dot.low { background: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,0.2); }

    .timeline-phase {
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: var(--space-1);
    }

    .timeline-phase.critical { color: var(--critical); }
    .timeline-phase.high { color: var(--high); }
    .timeline-phase.medium { color: var(--medium); }
    .timeline-phase.low { color: var(--teal); }

    .timeline-date {
      font-size: 0.65rem;
      color: var(--text-faint);
      font-family: 'JetBrains Mono', monospace;
      margin-bottom: var(--space-2);
    }

    .timeline-events {
      list-style: none;
    }

    .timeline-events li {
      font-size: var(--text-xs);
      color: var(--text-muted);
      padding: var(--space-1) 0;
      border-bottom: 1px solid var(--border-dim);
      display: flex;
      align-items: flex-start;
      gap: var(--space-2);
    }

    .timeline-events li::before {
      content: '›';
      color: var(--text-faint);
      flex-shrink: 0;
      margin-top: 1px;
    }

    .timeline-events li:last-child { border-bottom: none; }

    /* ============================================================
       CASCADE MAP / DEPENDENCY FLOW
    ============================================================ */
    .cascade-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--space-4);
      margin-bottom: var(--space-6);
    }

    .cascade-node {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      position: relative;
    }

    .cascade-node.source { border-color: rgba(255,61,74,0.4); }
    .cascade-node.secondary { border-color: rgba(255,140,66,0.3); }
    .cascade-node.tertiary { border-color: rgba(245,200,66,0.25); }

    .cascade-node-title {
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: var(--space-3);
    }

    .cascade-node.source .cascade-node-title { color: var(--critical); }
    .cascade-node.secondary .cascade-node-title { color: var(--high); }
    .cascade-node.tertiary .cascade-node-title { color: var(--medium); }

    .cascade-item {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) 0;
      border-bottom: 1px solid var(--border-dim);
      font-size: var(--text-xs);
      color: var(--text-muted);
    }

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

    .cascade-icon {
      font-size: 0.9rem;
      flex-shrink: 0;
    }

    /* ============================================================
       REGIONAL EXPOSURE TABLE
    ============================================================ */
    .exposure-table {
      width: 100%;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .exposure-table th {
      background: var(--surface-3);
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      text-align: left;
    }

    .exposure-table td {
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-xs);
      color: var(--text-muted);
      border-top: 1px solid var(--border-dim);
    }

    .exposure-table tr:hover td {
      background: var(--surface-2);
    }

    .country-name {
      font-weight: 600;
      color: var(--text);
    }

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

    .exposure-bar-track {
      flex: 1;
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
    }

    .exposure-bar-fill {
      height: 100%;
      border-radius: 3px;
    }

    /* ============================================================
       PRICE SPIKE TABLE
    ============================================================ */
    .price-table { font-variant-numeric: tabular-nums lining-nums; }

    .price-change {
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .price-change.up { color: var(--critical); }
    .price-change.slight-up { color: var(--high); }

    /* ============================================================
       OVERVIEW FLOW DIAGRAM
    ============================================================ */
    .flow-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      margin-bottom: var(--space-6);
      overflow-x: auto;
    }

    .flow-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
      margin-bottom: var(--space-5);
      flex-wrap: nowrap;
    }

    .flow-row:last-child { margin-bottom: 0; }

    .flow-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      min-width: 100px;
      text-align: center;
    }

    .flow-circle {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
      border: 2px solid transparent;
    }

    .flow-circle.source { background: var(--critical-bg); border-color: rgba(255,61,74,0.4); }
    .flow-circle.primary { background: var(--high-bg); border-color: rgba(255,140,66,0.3); }
    .flow-circle.secondary { background: var(--medium-bg); border-color: rgba(245,200,66,0.25); }
    .flow-circle.tertiary { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.25); }

    .flow-label {
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--text);
      max-width: 90px;
      line-height: 1.3;
    }

    .flow-arrow {
      font-size: 1.2rem;
      color: var(--text-faint);
      flex-shrink: 0;
      align-self: center;
      margin-bottom: 20px;
    }

    /* ============================================================
       ALERT BANNERS
    ============================================================ */
    .alert-banner {
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-md);
      border-left: 3px solid;
      margin-bottom: var(--space-4);
      font-size: var(--text-xs);
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
    }

    .alert-banner.critical { background: var(--critical-bg); border-color: var(--critical); color: var(--text); }
    .alert-banner.high { background: var(--high-bg); border-color: var(--high); color: var(--text); }
    .alert-banner.medium { background: var(--medium-bg); border-color: var(--medium); color: var(--text); }

    .alert-icon { flex-shrink: 0; font-size: 1rem; }
    .alert-content strong { font-weight: 700; display: block; margin-bottom: 2px; }
    .alert-content p { color: var(--text-muted); line-height: 1.5; }

    /* ============================================================
       FOOTER
    ============================================================ */
    .footer-note {
      font-size: var(--text-xs);
      color: var(--text-faint);
      border-top: 1px solid var(--border-dim);
      padding-top: var(--space-4);
      margin-top: var(--space-6);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 0.35rem 0.5rem;
    }

    .footer-note a {
      color: var(--accent);
      text-decoration: none;
    }
    .footer-note a:hover { text-decoration: underline; }

    .sidebar .threat-badge[data-tone="high"] { background: var(--high-bg); border-color: var(--high); color: var(--high); }
    .sidebar .threat-badge[data-tone="medium"] { background: var(--medium-bg); border-color: var(--medium); color: var(--medium); }
    .sidebar .threat-badge[data-tone="low"] { background: var(--low-bg); border-color: var(--low); color: var(--low); }
    .sidebar .threat-badge[data-tone="info"],
    .sidebar .threat-badge[data-tone="accent"] { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
    .sidebar .threat-badge[data-tone="teal"] { background: var(--teal-dim); border-color: var(--teal); color: var(--teal); }
    .sidebar .threat-badge[data-tone="purple"] { background: rgba(167,139,250,0.12); border-color: var(--purple); color: var(--purple); }
    .mobile-nav-threat[data-tone="high"] { background: var(--high-bg); border-color: var(--high); color: var(--high); }
    .mobile-nav-threat[data-tone="medium"] { background: var(--medium-bg); border-color: var(--medium); color: var(--medium); }
    .mobile-nav-threat[data-tone="low"] { background: var(--low-bg); border-color: var(--low); color: var(--low); }
    .mobile-nav-threat[data-tone="info"],
    .mobile-nav-threat[data-tone="accent"] { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
    .mobile-nav-threat[data-tone="teal"] { background: var(--teal-dim); border-color: var(--teal); color: var(--teal); }
    .mobile-nav-threat[data-tone="purple"] { background: rgba(167,139,250,0.12); border-color: var(--purple); color: var(--purple); }

    .sidebar .threat-badge[data-tone] .threat-label {
      color: currentColor;
    }

    .sidebar .threat-badge[data-tone] .threat-pulse {
      background: currentColor;
    }

    .mobile-nav-threat[data-tone] .threat-label {
      color: currentColor;
    }

    .mobile-nav-threat[data-tone] .threat-pulse {
      background: currentColor;
    }

    .topbar .status-chip[data-tone="high"] { background: var(--high-bg); border: 1px solid var(--high); color: var(--high); }
    .topbar .status-chip[data-tone="medium"] { background: var(--medium-bg); border: 1px solid var(--medium); color: var(--medium); }
    .topbar .status-chip[data-tone="low"] { background: var(--low-bg); border: 1px solid var(--low); color: var(--low); }
    .topbar .status-chip[data-tone="info"],
    .topbar .status-chip[data-tone="accent"] { background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); }
    .topbar .status-chip[data-tone="teal"] { background: var(--teal-dim); border: 1px solid var(--teal); color: var(--teal); }
    .topbar .status-chip[data-tone="purple"] { background: rgba(167,139,250,0.12); border: 1px solid var(--purple); color: var(--purple); }

    .topbar .status-chip[data-tone] .threat-pulse {
      background: currentColor;
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 768px) {
      body {
        grid-template-columns: 1fr;
        grid-template-rows: 52px minmax(0, 1fr);
      }

      .sidebar {
        display: none;
      }

      .topbar {
        grid-column: 1;
        padding: 0 var(--space-3);
      }

      .topbar-left {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        gap: var(--space-3);
      }

      .topbar-right {
        gap: var(--space-2);
      }

      .page-title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: var(--text-xs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .status-chip {
        flex-shrink: 0;
      }

      .timestamp {
        display: none;
      }

      .mobile-menu-btn {
        display: flex;
      }

      .main {
        grid-column: 1;
        padding: var(--space-4);
      }

      .section-header {
        margin-bottom: var(--space-5);
      }

      .kpi-grid,
      .card-grid,
      .card-grid.two-col,
      .card-grid.three-col,
      .cascade-grid {
        grid-template-columns: 1fr;
      }

      .card-header,
      .card-body {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
      }

      .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .section-title {
        font-size: 1.25rem;
      }

      .section-subtitle {
        font-size: var(--text-xs);
      }

      .chart-wrap {
        height: 200px;
      }

      .chart-wrap.tall {
        height: 240px;
      }
    }

    @media (max-width: 1100px) {
      .card-grid.three-col { grid-template-columns: repeat(2, 1fr); }
    }

    /* ============================================================
       MISC UTILS
    ============================================================ */
    .mono { font-family: 'JetBrains Mono', monospace; }
    .text-critical { color: var(--critical); }
    .text-high { color: var(--high); }
    .text-medium { color: var(--medium); }
    .text-low { color: var(--low); }
    .text-muted { color: var(--text-muted); }
    .text-accent { color: var(--accent); }
    .text-teal { color: var(--teal); }

    .divider {
      height: 1px;
      background: var(--border-dim);
      margin: var(--space-4) 0;
    }

    .source-tag {
      display: inline-block;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 1px 5px;
      border-radius: var(--radius-sm);
      background: var(--surface-3);
      color: var(--text-faint);
      margin-left: var(--space-2);
    }

    /* ============================================================
       DATA-DRIVEN RENDERER
    ============================================================ */
    [data-nav-container] {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }

    .section-block {
      margin-bottom: var(--space-6);
    }

    .section-block:last-of-type {
      margin-bottom: 0;
    }

    .section-block > .alert-banner,
    .section-block > .card,
    .section-block > .card-grid,
    .section-block > .kpi-grid {
      margin-bottom: 0;
    }

    .footer-note {
      margin-top: 0;
    }

    .card-header {
      align-items: flex-start;
      gap: var(--space-3);
      flex-wrap: wrap;
    }

    .card-heading {
      flex: 1 1 220px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .card-subtitle {
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.4;
    }

    .card-body-scrollable {
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .card-block + .card-block {
      margin-top: var(--space-4);
    }

    .card-block > .alert-banner {
      margin-bottom: 0;
    }

    .impact-pill.info,
    .impact-pill.accent {
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid rgba(5,32,106,0.18);
    }

    .impact-pill.teal {
      background: var(--teal-dim);
      color: var(--teal);
      border: 1px solid rgba(106,176,245,0.24);
    }

    .impact-pill.purple {
      background: rgba(167,139,250,0.12);
      color: var(--purple);
      border: 1px solid rgba(167,139,250,0.24);
    }

    .alert-banner.info,
    .alert-banner.accent {
      background: var(--accent-dim);
      border-color: var(--accent);
      color: var(--text);
    }

    .alert-banner.low {
      background: var(--low-bg);
      border-color: var(--low);
      color: var(--text);
    }

    .alert-banner.teal {
      background: var(--teal-dim);
      border-color: var(--teal);
      color: var(--text);
    }

    .alert-banner.purple {
      background: rgba(167,139,250,0.12);
      border-color: var(--purple);
      color: var(--text);
    }

    .kpi-card.low::before { background: var(--low); }
    .kpi-card.accent::before { background: var(--accent); }

    .kpi-card.low .kpi-value { color: var(--low); }
    .kpi-card.info .kpi-value,
    .kpi-card.accent .kpi-value { color: var(--accent); }
    .kpi-card.teal .kpi-value { color: var(--teal); }
    .kpi-card.purple .kpi-value { color: var(--purple); }

    .text-purple { color: var(--purple); }

    .metric-row-pill .metric-name {
      flex: 0 0 auto;
      min-width: 136px;
      color: var(--text);
      font-weight: 600;
    }

    .metric-row-pill .metric-desc {
      flex: 1;
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.5;
    }

    .metric-row-stage {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .metric-stage-title {
      font-weight: 700;
      font-size: var(--text-xs);
    }

    .metric-stage-description {
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.5;
    }

    .table-scroll {
      overflow-x: auto;
    }

    .data-table {
      width: 100%;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .data-table th {
      background: var(--surface-3);
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      text-align: left;
    }

    .data-table td {
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-xs);
      color: var(--text-muted);
      border-top: 1px solid var(--border-dim);
      vertical-align: top;
      line-height: 1.5;
    }

    .data-table tr:hover td {
      background: var(--surface-2);
    }

    .tone-critical {
      --tone-color: var(--critical);
      --tone-bg: var(--critical-bg);
      --tone-border: rgba(255,61,74,0.22);
    }

    .tone-high {
      --tone-color: var(--high);
      --tone-bg: var(--high-bg);
      --tone-border: rgba(255,140,66,0.22);
    }

    .tone-medium {
      --tone-color: var(--medium);
      --tone-bg: var(--medium-bg);
      --tone-border: rgba(245,200,66,0.24);
    }

    .tone-low {
      --tone-color: var(--low);
      --tone-bg: var(--low-bg);
      --tone-border: rgba(74,222,128,0.24);
    }

    .tone-teal {
      --tone-color: var(--teal);
      --tone-bg: var(--teal-dim);
      --tone-border: rgba(106,176,245,0.24);
    }

    .tone-purple {
      --tone-color: var(--purple);
      --tone-bg: rgba(167,139,250,0.12);
      --tone-border: rgba(167,139,250,0.24);
    }

    .tone-accent {
      --tone-color: var(--accent);
      --tone-bg: var(--accent-dim);
      --tone-border: rgba(5,32,106,0.18);
    }

    .fact-grid {
      display: grid;
      grid-template-columns: repeat(var(--fact-columns, 3), minmax(0, 1fr));
      gap: var(--space-4);
    }

    .fact-card {
      background: var(--surface-2);
      border: 1px solid var(--border-dim);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
    }

    .fact-value {
      font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
      font-weight: 700;
      line-height: 1;
    }

    .fact-description {
      margin-top: 4px;
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.5;
    }

    .legend-list {
      display: flex;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      color: var(--text-muted);
    }

    .legend-symbol {
      font-weight: 700;
    }

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

    .panel-card {
      background: var(--tone-bg, var(--surface-2));
      border: 1px solid var(--tone-border, var(--border-dim));
      border-left: 3px solid var(--tone-color, var(--accent));
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      padding: var(--space-3);
    }

    .panel-title {
      margin-bottom: 4px;
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--tone-color, var(--text));
    }

    .panel-description {
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.5;
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(var(--detail-columns, 3), minmax(0, 1fr));
      gap: var(--space-4);
    }

    .detail-card {
      background: var(--tone-bg, var(--surface-2));
      border: 1px solid var(--tone-border, var(--border-dim));
      border-radius: var(--radius-lg);
      padding: var(--space-4);
    }

    .detail-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-3);
      margin-bottom: var(--space-3);
    }

    .detail-card-title {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--text);
    }

    .detail-card-description {
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: var(--space-3);
    }

    .detail-stats {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .detail-stat-row {
      display: flex;
      justify-content: space-between;
      gap: var(--space-3);
      font-size: var(--text-xs);
    }

    .detail-stat-row dt {
      color: var(--text-muted);
    }

    .detail-stat-row dd {
      margin: 0;
      font-weight: 700;
      color: var(--text);
      text-align: right;
    }

    .detail-note {
      margin-top: var(--space-3);
      padding: var(--space-2) var(--space-3);
      background: var(--tone-bg, var(--surface-3));
      border: 1px solid var(--tone-border, var(--border-dim));
      border-left: 3px solid var(--tone-color, var(--accent));
      border-radius: var(--radius-sm);
    }

    .detail-note-title {
      margin-bottom: 2px;
      font-size: 0.65rem;
      font-weight: 700;
      color: var(--tone-color, var(--accent));
    }

    .detail-note-description {
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.5;
    }

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

    .status-item {
      display: grid;
      grid-template-columns: 180px 110px minmax(0, 1fr) 180px;
      gap: var(--space-4);
      align-items: center;
      padding: var(--space-3) var(--space-4);
      background: var(--tone-bg, var(--surface-2));
      border: 1px solid var(--tone-border, var(--border-dim));
      border-left: 3px solid var(--tone-color, var(--accent));
      border-radius: var(--radius-md);
    }

    .status-title {
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--text);
    }

    .status-description {
      min-width: 0;
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.5;
    }

    .status-action {
      font-size: var(--text-xs);
      font-weight: 600;
      /*color: var(--text);*/
      line-height: 1.4;
    }

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

    .ranked-item {
      display: flex;
      gap: var(--space-3);
      align-items: flex-start;
    }

    .rank-badge {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 0.65rem;
      font-weight: 700;
      color: #fff;
      background: var(--tone-color, var(--accent));
    }

    .ranked-copy {
      min-width: 0;
    }

    .ranked-title {
      margin-bottom: 2px;
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--text);
    }

    .ranked-description {
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.5;
    }

    .note-card {
      padding: var(--space-3);
      background: var(--tone-bg, var(--surface-2));
      border: 1px solid var(--tone-border, var(--border-dim));
      border-radius: var(--radius-md);
    }

    .note-overline {
      margin-bottom: var(--space-2);
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--tone-color, var(--accent));
    }

    .note-description {
      font-size: var(--text-xs);
      color: var(--text-muted);
      line-height: 1.6;
    }

    .timeline-shell {
      min-width: 0;
    }

    @media (max-width: 1100px) {
      .detail-grid,
      .fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .status-item {
        grid-template-columns: 160px 110px minmax(0, 1fr);
      }

      .status-action {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 768px) {
      .section-block {
        margin-bottom: var(--space-5);
      }

      .fact-grid,
      .detail-grid {
        grid-template-columns: 1fr;
      }

      .metric-row-pill {
        flex-direction: column;
        align-items: flex-start;
      }

      .metric-row {
        flex-wrap: wrap;
        align-items: flex-start;
      }

      .metric-row-pill .metric-name {
        min-width: 0;
      }

      .metric-row-bar {
        flex-wrap: wrap;
      }

      .metric-row-bar .metric-bar-wrap {
        flex: 1 1 100%;
        order: 3;
        width: 100%;
      }

      .metric-val {
        min-width: 0;
        white-space: normal;
        text-align: left;
      }

      .detail-card-header,
      .detail-stat-row {
        flex-direction: column;
        align-items: flex-start;
      }

      .detail-stat-row dd {
        text-align: left;
      }

      .status-item {
        grid-template-columns: 1fr;
      }

      .footer-note {
        justify-content: flex-start;
      }

      .card-header > .impact-pill {
        margin-left: 0;
      }

      .table-scroll {
        -webkit-overflow-scrolling: touch;
      }
    }