/* Import design tokens - inline for now, will be external CSS later */
    :root {
      /* Colors */
      --color-teal-primary: #1DB88D;
      --color-teal-hover: #17a67d;
      --color-orange-accent: #FFC000;
      --color-gold-accent: #d4af37;
      --color-gold-hover: #e5c158;

      /* Light theme */
      --color-background: #FFFFFF;
      --color-surface: #FFFFFF;
      --color-secondary-bg: #F5F5F5;
      --color-tertiary-bg: #F8F9FA;
      --color-text: #1A1A1A;
      --color-text-secondary: #666666;
      --color-text-light: #888888;
      --color-border: #E0E0E0;
      --color-primary: var(--color-teal-primary);
      --color-primary-hover: var(--color-teal-hover);

      /* Status colors */
      --color-success: #10B981;
      --color-error: #EF4444;
      --color-warning: #FFC000;
      --color-info: #3B82F6;

      /* Dark theme colors */
      --color-dark-bg: #22262e;
      --color-dark-surface: #2a3142;
      --color-dark-sidebar: #2a3142;
      --color-dark-text: #FFFFFF;
      --color-dark-text-secondary: #B0B0B0;
      --color-dark-border: #3a4452;

      /* Typography */
      --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-size-xs: 12px;
      --font-size-sm: 14px;
      --font-size-base: 16px;
      --font-size-lg: 18px;
      --font-size-xl: 20px;
      --font-size-2xl: 24px;
      --font-size-3xl: 32px;

      /* Spacing */
      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 12px;
      --space-lg: 16px;
      --space-xl: 24px;
      --space-2xl: 32px;
      --space-3xl: 48px;

      /* Borders */
      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;

      /* Shadows */
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
      --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

      /* Layout */
      --sidebar-width: 300px;
      --sidebar-collapsed-width: 100px;
      --header-height: 90px;
    }

    [data-theme="dark"] {
      --color-background: var(--color-dark-bg);
      --color-surface: var(--color-dark-surface);
      --color-secondary-bg: var(--color-dark-sidebar);
      --color-tertiary-bg: var(--color-dark-bg);
      --color-text: var(--color-dark-text);
      --color-text-secondary: var(--color-dark-text-secondary);
      --color-border: var(--color-dark-border);
      --color-primary: var(--color-gold-accent);
      --color-primary-hover: var(--color-gold-hover);
    }

    /* Reset & Base */
    

    body {
      font-family: var(--font-family);
      font-size: var(--font-size-base);
      line-height: 1.5;
      color: var(--color-text);
      background: var(--color-background);
      transition: background 250ms, color 250ms;
      zoom: 0.8;
    }

    /* Layout */
    .app-container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .page-wrapper {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* Header */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--header-height);
      background: var(--color-surface);
      border-bottom: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--space-xl);
      z-index: 100;
      box-shadow: var(--shadow-sm);
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: var(--space-xl);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--color-text);
    }

    .logo-img {
      height: 60px;
      width: auto;
      display: block;
    }

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

    .company-name {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: var(--color-text);
      letter-spacing: 1px;
      line-height: 1;
    }

    .j-with-dot {
      position: relative;
      display: inline-block;
    }

    .yellow-dot {
      position: absolute;
      top: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 8px;
      background: var(--color-orange-accent);
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(255, 192, 0, 0.4);
    }

    .logo-tagline {
      font-size: 10px;
      font-weight: 500;
      color: var(--color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .header-nav {
      display: flex;
      align-items: center;
      gap: var(--space-xl);
    }

    .header-nav-link {
      font-size: var(--font-size-sm);
      font-weight: 500;
      color: var(--color-text-secondary);
      text-decoration: none;
      transition: color 200ms;
      white-space: nowrap;
    }

    .header-nav-link:hover {
      color: var(--color-primary);
    }
    /* Partners nav dropdown */
    .nav-dropdown { position: relative; display: inline-flex; align-items: center; }
    .nav-dropdown-btn { background: none; border: none; cursor: default; padding: 0; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); transition: color 200ms; white-space: nowrap; display: flex; align-items: center; gap: 3px; font-family: inherit; }
    .nav-dropdown:hover .nav-dropdown-btn { color: var(--color-primary); }
    .nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 8px; min-width: 230px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 200; }
    .nav-dropdown:hover .nav-dropdown-menu { display: block; }
    .nav-dropdown-coming-soon { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-primary); background: rgba(29,184,141,0.1); border: 1px solid rgba(29,184,141,0.2); border-radius: 3px; padding: 2px 8px; margin-bottom: 6px; display: inline-block; }
    .nav-dropdown-item { display: block; padding: 6px 8px; font-size: 13px; color: var(--color-text-secondary); text-decoration: none; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0.45; }

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

    .theme-toggle {
      background: transparent;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-sm) var(--space-md);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      color: var(--color-text);
      font-size: var(--font-size-sm);
      transition: all 200ms;
    }

    .theme-toggle:hover {
      background: var(--color-secondary-bg);
      border-color: var(--color-primary);
    }

    /* Sidebar */
    .sidebar-item:hover .sidebar-tooltip {
      opacity: 1;
      pointer-events: auto;
    }
    .sidebar-item.active .icon {
      stroke: white !important;
    }
    /* Hover tooltip for collapsed sidebar */
    .sidebar-tooltip {
      position: absolute;
      left: calc(-25% + var(--space-md));
      top: 12%;
      transform: translateY(-50%);
      background: var(--color-text-dark);
      color: --color-text-light;
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      font-weight: 500;
      white-space: normal;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
      z-index: 9999;
      display: none;
    }

    /* Footer */
    .footer {
      background: var(--color-secondary-bg);
      border-top: 2px solid var(--color-border);
      padding: var(--space-3xl) var(--space-xl) var(--space-xl);
      width: 100%;
      box-sizing: border-box;
    }

    .footer-container {
      max-width: 100%;
      margin: 0 auto;
      padding: 0 var(--space-xl);
    }

    .footer-branding {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      margin-bottom: var(--space-xl);
    }

    .footer-logo-img {
      height: 60px;
      width: auto;
      display: block;
    }

    .footer-logo-text-wrapper {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .footer-company-name {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: var(--color-text);
      letter-spacing: 1px;
      line-height: 1;
    }

    .footer-logo-text {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: var(--color-primary);
      letter-spacing: -0.5px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: var(--space-3xl);
      margin-bottom: var(--space-2xl);
    }

    .footer-section {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }

    .footer-title {
      font-size: var(--font-size-lg);
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: var(--space-sm);
    }

    .footer-text {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      line-height: 1.6;
    }

    .footer-link {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      text-decoration: none;
      transition: color 200ms;
    }

    .footer-link:hover {
      color: var(--color-primary);
    }

    .footer-bottom {
      border-top: 1px solid var(--color-border);
      padding-top: var(--space-lg);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--font-size-xs);
      color: var(--color-text-light);
      flex-wrap: wrap;
      gap: var(--space-md);
    }

    .footer-legal-links {
      display: flex;
      gap: var(--space-lg);
    }

    /* Main Content */
    .main-content {
      margin-top: var(--header-height);
      flex: 1;
      padding: var(--space-xl);
      background: var(--color-background);
      min-height: calc(100vh - var(--header-height));
      box-sizing: border-box;
      overflow-x: hidden;
    }

    .content-wrapper {
      max-width: 100%;
      margin: 0 auto;
      width: 100%;
    }

    /* Page Header */
    .page-header {
      margin-bottom: var(--space-xl);
    }

    .page-title {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      margin-bottom: var(--space-md);
      color: var(--color-text);
    }

    .page-description {
      font-size: var(--font-size-base);
      color: var(--color-text-secondary);
      line-height: 1.6;
    }

    /* Scenario Bar */
    .scenario-bar {
      background: var(--color-primary);
      border-radius: var(--radius-xl);
      padding: var(--space-xl);
      margin-bottom: var(--space-2xl);
      box-shadow: var(--shadow-md);
    }

    .scenario-bar-inner {
      display: flex;
      align-items: flex-end;
      gap: var(--space-lg);
      flex-wrap: wrap;
    }

    .scenario-bar-label {
      color: var(--color-text-dark);
      font-size: var(--font-size-sm);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .scenario-input-wrapper {
      flex: 1;
      min-width: 300px;
    }

    .scenario-input {
      width: 100%;
      padding: var(--space-md) var(--space-lg);
      border: 2px solid var(--color-border);
      border-radius: var(--radius-md);
      font-size: var(--font-size-base);
      font-weight: 500;
      background: var(--color-surface);
      color: var(--color-text);
      transition: all 200ms;
    }

    .scenario-input:focus {
      outline: none;
      border-color: var(--color-primary);
      background: var(--color-surface);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

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

    .scenario-actions {
      display: flex;
      gap: var(--space-md);
      flex-shrink: 0;
      align-items: center;
    }

    /* Buttons */
    .btn {
      padding: var(--space-md) var(--space-xl);
      border-radius: var(--radius-md);
      font-size: var(--font-size-base);
      font-weight: 600;
      cursor: pointer;
      transition: all 200ms;
      border: none;
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      white-space: nowrap;
    }

    .btn-white {
      background: white;
      color: var(--color-text-secondary);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 2px solid var(--color-border);
    }

    .btn-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    

    .btn-primary:hover {
      background: var(--color-primary-hover);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .btn-secondary {
      background: transparent;
      color: var(--color-text);
      border: 2px solid var(--color-border);
    }

    .btn-secondary:hover {
      background: var(--color-secondary-bg);
      border-color: var(--color-primary);
    }

    .btn-sm {
      padding: var(--space-sm) var(--space-lg);
      font-size: var(--font-size-sm);
    }

    .btn-icon {
      width: 16px;
      height: 16px;
    }

    /* Data Sections */
    .data-sections {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xl);
    }

    /* Reorganised layout: two conceptual groups via flex order, so the section
       markup and the id-keyed render JS stay untouched.
       Group A — Current State (actual positions today)
       Group B — Forecast / Projection (versioned, tied to the selected scenario) */
    #treasuryRegisters        { order: 1; }
    #trAccountsSection        { order: 2; }
    #trFacilitiesSection      { order: 3; }
    #trCovenantsSection       { order: 4; }
    #trDepositsSection        { order: 5; }
    #hedgeTradesSection       { order: 6; }
    #hedgingPolicySection     { order: 7; }
    #trIrTradesSection        { order: 8; }
    #forecastDivider          { order: 10; }
    #forecastedRequirementsSection { order: 11; }
    #trFlowsSection           { order: 12; }
    #potentialTradesSection   { order: 13; }
    /* Company Financials shown first in Current State (org-level headline figures). */
    #trFinancialsSection      { order: 0; }

    /* Two-zone tabs — Current State vs Forecasts & Projections */
    .zone-tabs {
      display: flex;
      gap: 4px;
      border-bottom: 1px solid var(--color-border);
      margin-bottom: var(--space-xl);
      flex-wrap: wrap;
    }
    .zone-tab {
      appearance: none;
      font: inherit;
      background: transparent;
      border: 0;
      border-bottom: 2px solid transparent;
      padding: 12px 18px 13px;
      margin-bottom: -1px;
      cursor: pointer;
      color: var(--color-text-secondary);
      font-size: var(--font-size-base);
      font-weight: 600;
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: left;
    }
    .zone-tab:hover { color: var(--color-text); }
    .zone-tab.active { color: var(--color-text); border-bottom-color: var(--color-primary); }
    .zone-tab-sub { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); opacity: .8; }
    /* Per-zone scope banner — makes the org-wide vs projection distinction explicit. */
    .zone-scope { margin: 4px 0 18px; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.45;
      border: 1px solid var(--color-border); background: var(--color-tertiary-bg); color: var(--color-text-secondary); }
    .zone-scope strong { color: var(--color-text); font-weight: 650; }
    .zone-scope.zone-scope-forecast { background: rgba(29,184,141,0.06); border-color: rgba(29,184,141,0.28); }

    /* Collapsible section cards — header stays; body collapses. Keeps the long
       Current State tab scannable (click a title to expand). Set up in JS. */
    .data-section .section-header-top > div:first-child { cursor: pointer; user-select: none; }
    .sec-chevron { display: inline-block; margin-right: 10px; color: var(--color-primary); font-size: 20px; font-weight: 700; line-height: 1; transition: transform .15s; }
    .data-section:not(.collapsed) .sec-chevron { transform: rotate(90deg); }
    .sec-count { display: inline-block; margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
                 background: var(--color-background); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 10px; vertical-align: middle; }
    .sec-count.empty { background: transparent; border: 0; color: var(--color-text-secondary); opacity: .6; font-weight: 500; font-style: italic; }
    .data-section.collapsed > *:not(.section-header) { display: none !important; }
    .data-section.collapsed .section-header { border-bottom: 0; }

    /* Zone dividers: the tab already names the zone, so hide the duplicate heading;
       keep the description as a compact intro, and box the Snapshots panel so it
       doesn't float as orphaned left-aligned text. */
    .treasury-divider { margin: 0 0 16px !important; padding-top: 0 !important; border-top: 0 !important; }
    .treasury-divider > h2 { display: none; }
    .treasury-divider > p { font-size: 13px; color: var(--color-text-secondary); max-width: 900px; margin: 0 0 14px; }
    #snapshotsPanel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 16px 20px; margin-top: 0 !important; }

    .data-section {
      background: var(--color-surface);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-md);
      border: 1px solid var(--color-border);
      overflow: hidden;
    }

    .section-header {
      background: var(--color-tertiary-bg);
      padding: var(--space-xl);
      border-bottom: 2px solid var(--color-border);
    }

    .section-header-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: var(--space-md);
    }

    .section-title {
      font-size: var(--font-size-xl);
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: var(--space-xs);
    }

    .section-description {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      line-height: 1.5;
    }

    .section-actions {
      display: flex;
      gap: var(--space-sm);
    }

    /* Table Container — fixed-height scroll so long tables scroll internally
       instead of stretching the page. Headers stay sticky within the scroll.
       NO top padding: with a padding-top the sticky `top:0` header pins BELOW the
       padding, leaving a gap where rows scroll ABOVE the header. H + bottom only. */
    .table-container {
      overflow: auto;
      max-height: 480px;
      padding: 0 var(--space-xl) var(--space-xl);
    }

    /* Per-table search + sort (see table-tools.js) */
    .tt-mount { padding: 12px var(--space-xl) 0; }
    .tt-search {
      width: 280px; max-width: 100%;
      padding: 7px 11px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      font: inherit; font-size: var(--font-size-sm);
      background: var(--color-background); color: var(--color-text);
    }
    .tt-search:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
    /* ============================================================
       TABLES — ONE shared definition for BOTH the Domain-A grids
       (.data-table) and the treasury registers (.treasury-table):
       same border model, sticky header, body styling and sort
       affordance, so every table behaves and looks identical.
       Do NOT re-declare these per-table anywhere else.
       ============================================================ */

    /* border-collapse:separate (not collapse) so each cell owns its border +
       background — required for the sticky header to hold them while rows scroll. */
    .data-table, .treasury-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: auto;
    }

    /* Sticky header: pinned to the top of the scroll container, opaque, above body. */
    .data-table thead th, .treasury-table thead th {
      position: sticky;
      top: 0;
      z-index: 20;
      background: var(--color-secondary-bg);
      border-bottom: 2px solid var(--color-border);
      padding: var(--space-md) var(--space-sm);
      text-align: left;
      font-size: var(--font-size-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--color-text-secondary);
      white-space: nowrap;
      vertical-align: middle;
    }

    /* Body cells */
    .data-table tbody td, .treasury-table tbody td {
      padding: var(--space-md) var(--space-sm);
      border-bottom: 1px solid var(--color-border);
      font-size: var(--font-size-sm);
      color: var(--color-text);
      white-space: nowrap;
      vertical-align: middle;
    }
    .data-table tbody tr:hover, .treasury-table tbody tr:hover { background: var(--color-tertiary-bg); }
    .data-table tbody tr:last-child td, .treasury-table tbody tr:last-child td { border-bottom: none; }
    .data-table td.num, .data-table th.num, .treasury-table td.num, .treasury-table th.num { text-align: right; }
    .treasury-table td.neg { color: var(--color-error); font-weight: 600; }

    /* Sort affordance — grid-native (.sortable/.sort-indicator) + table-tools (.tt-*) */
    .data-table thead th.sortable, .data-table thead th.tt-sortable,
    .treasury-table thead th.sortable, .treasury-table thead th.tt-sortable { cursor: pointer; user-select: none; }
    .data-table thead th.sortable:hover, .treasury-table thead th.tt-sortable:hover { background: var(--color-tertiary-bg); }
    .data-table thead th .sort-indicator { display: inline-block; margin-left: 4px; opacity: 0.3; font-size: 10px; vertical-align: middle; }
    .data-table thead th.sort-asc .sort-indicator, .data-table thead th.sort-desc .sort-indicator { opacity: 1; color: var(--color-primary); }
    .data-table thead th.tt-asc::after, .treasury-table thead th.tt-asc::after { content: ' \25B2'; font-size: 9px; color: var(--color-primary); }
    .data-table thead th.tt-desc::after, .treasury-table thead th.tt-desc::after { content: ' \25BC'; font-size: 9px; color: var(--color-primary); }

    /* Form Inputs in Table */
    .table-input,
    .table-select {
      width: 100%;
      padding: var(--space-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      font-size: var(--font-size-sm);
      background: var(--color-surface);
      color: var(--color-text);
      transition: all 200ms;
      font-family: var(--font-family);
    }

    .table-input:focus,
    .table-select:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(29, 184, 141, 0.1);
    }

    .table-input[type="number"] {
      text-align: right;
    }

    .delete-row-btn {
      background: transparent;
      border: none;
      color: var(--color-error);
      cursor: pointer;
      padding: var(--space-sm);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 200ms;
    }

    .delete-row-btn:hover {
      background: rgba(239, 68, 68, 0.1);
    }

    .delete-row-btn svg {
      width: 18px;
      height: 18px;
    }

    /* Section Footer */
    .section-footer {
      background: var(--color-tertiary-bg);
      padding: var(--space-lg) var(--space-xl);
      border-top: 1px solid var(--color-border);
      display: flex;
      gap: var(--space-md);
      flex-wrap: wrap;
    }

    /* Empty State */
    .empty-state {
      text-align: center;
      padding: var(--space-3xl);
      color: var(--color-text-secondary);
    }

    .empty-state-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto var(--space-lg);
      opacity: 0.3;
    }

    .empty-state-title {
      font-size: var(--font-size-xl);
      font-weight: 600;
      margin-bottom: var(--space-sm);
      color: var(--color-text);
    }

    .empty-state-description {
      font-size: var(--font-size-base);
      margin-bottom: var(--space-xl);
    }

    /* Pre-save warning gate — advisory, so it is amber rather than red: nothing here blocks the save. */
    .grid-warn {
      background: var(--bone-2);
      border: 1px solid var(--orange);
      border-radius: var(--radius-md);
      padding: var(--space-lg) var(--space-xl);
      margin-bottom: var(--space-lg);
    }
    .grid-warn-head {
      font-weight: 650;
      color: var(--orange-deep, #B4661F);
      margin-bottom: var(--space-sm);
    }
    .grid-warn-note {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      margin-bottom: var(--space-md);
    }
    .grid-warn-section {
      font-weight: 600;
      font-size: var(--font-size-sm);
      color: var(--color-text);
      margin: var(--space-md) 0 var(--space-xs);
    }
    .grid-warn-list { list-style: none; margin: 0; padding: 0; }
    .grid-warn-item {
      display: flex;
      gap: var(--space-sm);
      align-items: baseline;
      padding: 2px 0;
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
    }
    /* The row number is a button: "which row?" should be answerable by clicking it, not by counting. */
    .grid-warn-row {
      flex: 0 0 auto;
      border: 0;
      background: transparent;
      padding: 0;
      font: inherit;
      font-weight: 600;
      color: var(--color-primary);
      cursor: pointer;
      text-decoration: underline;
    }
    .grid-warn-field { font-weight: 600; color: var(--color-text); }
    .grid-warn-actions {
      display: flex;
      gap: var(--space-md);
      margin-top: var(--space-lg);
      flex-wrap: wrap;
    }
    /* The row a warning points at, while it is being looked at. */
    tr.row-flash > td { background: var(--bone-2); transition: background-color .4s; }

    /* Status Messages */
    .status-message {
      padding: var(--space-lg);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-xl);
      display: flex;
      align-items: center;
      gap: var(--space-md);
      animation: slideIn 300ms ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .status-success {
      background: rgba(16, 185, 129, 0.1);
      border: 1px solid var(--color-success);
      color: var(--color-text);
    }

    .status-error {
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid var(--color-error);
      color: var(--color-text);
    }

    /* Responsive */
    @media (max-width: 1280px) {
      /* Collapse sidebar to icons only */
      .sidebar {
        width: var(--sidebar-collapsed-width);
        padding: var(--space-xl) var(--space-sm) var(--space-3xl);
        height: fit-content;
        max-height: calc(100vh - var(--header-height) - var(--space-xl) - var(--space-lg));
        top: calc(var(--header-height) + var(--space-xl));
        left: var(--space-lg);
      }

      .sidebar-title {
        text-align: center;
        font-size: var(--font-size-xs);
        margin-bottom: var(--space-lg);
      }

      .sidebar-item-text {
        display: none;
      }

      .sidebar-tooltip {
        position: absolute;
        display: inline;
      }

      .coming-soon-badge {
        display: inline;
        font-size: 6px;
        white-space: pre-wrap;
        text-align: centre;
      }

      .sidebar-item {
        justify-content: center;
        padding: var(--space-md);
        position: relative;
        gap: 0;
      }

      .sidebar-item .icon {
        margin: 0;
      }

      .sidebar-item:hover .sidebar-tooltip {
        opacity: 1 !important;
        pointer-events: auto;
      }

      .main-content {
        flex: 1;
      }
    }

    @media (max-width: 1024px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
      }

      .scenario-bar-inner {
        flex-direction: column;
        align-items: stretch;
      }

      .scenario-actions {
        width: 100%;
        justify-content: center;
      }

      .main-content {
        padding: var(--space-xl);
      }

      .logo-img {
        height: 50px;
      }

      .company-name {
        font-size: var(--font-size-xl);
      }
    }

    @media (max-width: 768px) {
      .sidebar {
        width: var(--sidebar-collapsed-width);
        padding: var(--space-xl) var(--space-sm) var(--space-3xl);
        height: fit-content;
        max-height: calc(100vh - var(--header-height) - var(--space-xl) - var(--space-lg));
        top: calc(var(--header-height) + var(--space-xl));
        left: var(--space-sm);
      }

      .main-content {
         padding: var(--space-lg);
      }

      .sidebar-title {
        text-align: center;
        font-size: var(--font-size-xs);
        margin-bottom: var(--space-lg);
      }

      .sidebar-item-text {
        display: none;
      }

      .sidebar-tooltip {
        position: absolute;
        display: inline;
      }

      .coming-soon-badge {
        display: inline;
        font-size: 6px;
        white-space: pre-wrap;
        text-align: centre;
      }

      .sidebar-item {
        justify-content: center;
        padding: var(--space-md);
        position: relative;
        gap: 0;
      }

      .sidebar-item .icon {
        margin: 0;
      }

      .sidebar-item:hover .sidebar-tooltip {
        opacity: 1 !important;
        pointer-events: auto;
      }

      .main-content {
        padding: var(--space-lg);
      }

      .page-title {
        font-size: var(--font-size-xl);
      }

      .table-container {
        padding: var(--space-md);
        overflow-x: auto;
      }

      .footer {
        padding: var(--space-xl) var(--space-lg) var(--space-lg);
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .cta-section {
        padding: var(--space-2xl) var(--space-lg);
      }

      .cta-title {
        font-size: var(--font-size-xl);
      }

      .cta-buttons {
        flex-direction: column;
        align-items: stretch;
      }

      .btn-large {
        width: 100%;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .logo-tagline {
        display: none;
      }

      .logo-img {
        height: 48px;
      }

      .company-name {
        font-size: var(--font-size-lg);
      }

      .data-table {
        font-size: var(--font-size-xs);
      }

      .data-table th,
      .data-table td {
        padding: var(--space-xs);
      }
    }

    /* Loading Spinner */
    .spinner {
      border: 3px solid rgba(29, 184, 141, 0.1);
      border-top-color: var(--color-primary);
      border-radius: 50%;
      width: 20px;
      height: 20px;
      animation: spin 800ms linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* CTA Section */
    .cta-section {
      background: var(--color-secondary-bg);
      padding: var(--space-3xl) var(--space-xl);
      text-align: center;
      border-top: 3px solid var(--color-primary);
      border-bottom: 1px solid var(--color-border);
      width: 100%;
      box-sizing: border-box;
    }

    .cta-title {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      margin-bottom: var(--space-md);
      color: var(--color-text);
    }

    .cta-subtitle {
      font-size: var(--font-size-base);
      color: var(--color-text-secondary);
      margin-bottom: var(--space-2xl);
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-buttons {
      display: flex;
      gap: var(--space-lg);
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-large {
      padding: var(--space-lg) var(--space-2xl);
      font-size: var(--font-size-lg);
    }

    /* Drag and Drop Zone */
    .drop-zone {
      border: 2px dashed var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-3xl);
      text-align: center;
      transition: all 200ms;
      cursor: pointer;
      background: var(--color-tertiary-bg);
    }

    .drop-zone:hover {
      border-color: var(--color-primary);
      background: var(--color-secondary-bg);
    }

    .drop-zone.drag-over {
      border-color: var(--color-primary);
      background: rgba(29, 184, 141, 0.05);
      transform: scale(1.02);
    }

    .drop-zone-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto var(--space-lg);
      color: var(--color-text-secondary);
    }

    .drop-zone-title {
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: var(--space-sm);
    }

    .drop-zone-text {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      margin-bottom: var(--space-lg);
    }

    .drop-zone-formats {
      font-size: var(--font-size-xs);
      color: var(--color-text-light);
    }

    .file-input {
      display: none;
    }

    /* Import Modal */
    .import-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 500;
    }

    .import-modal-backdrop.active {
      display: flex;
    }

    .import-modal {
      background: var(--color-surface);
      border-radius: var(--radius-xl);
      border: 1px solid var(--color-border);
      width: min(680px, 96vw);
      max-height: 90vh;
      padding: var(--space-xl);
      box-shadow: var(--shadow-xl);
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
    }

    .import-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: var(--space-md);
      border-bottom: 1px solid var(--color-border);
    }

    .import-modal-title {
      font-size: var(--font-size-xl);
      font-weight: 700;
      color: var(--color-text);
      margin: 0;
    }

    .import-modal-body {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }

    .import-modal-info {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      line-height: 1.6;
    }

    .import-textarea {
      width: 100%;
      min-height: 180px;
      padding: var(--space-md);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      font-family: 'Courier New', monospace;
      background: var(--color-surface);
      color: var(--color-text);
      resize: vertical;
    }

    .import-textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(29, 184, 141, 0.1);
    }

    .import-controls {
      display: flex;
      gap: var(--space-md);
      flex-wrap: wrap;
    }

    .import-select {
      padding: var(--space-sm) var(--space-md);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      background: var(--color-surface);
      color: var(--color-text);
      cursor: pointer;
    }

    .import-select:focus {
      outline: none;
      border-color: var(--color-primary);
    }

    .import-error {
      font-size: var(--font-size-sm);
      color: var(--color-error);
      min-height: 20px;
    }

    .import-modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: var(--space-md);
      padding-top: var(--space-md);
      border-top: 1px solid var(--color-border);
    }

    .import-step2-summary {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      padding-bottom: var(--space-sm);
      border-bottom: 1px solid var(--color-border);
    }

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

    .mapping-table th {
      padding: var(--space-sm) var(--space-md);
      text-align: left;
      font-weight: 600;
      color: var(--color-text-secondary);
      border-bottom: 2px solid var(--color-border);
      background: var(--color-tertiary-bg);
    }

    .mapping-table td {
      padding: var(--space-sm) var(--space-md);
      border-bottom: 1px solid var(--color-border);
      vertical-align: middle;
    }

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

    .mapping-source-select {
      width: 100%;
      padding: var(--space-xs) var(--space-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      font-size: var(--font-size-sm);
      background: var(--color-surface);
      color: var(--color-text);
      cursor: pointer;
    }

    .mapping-source-select:focus {
      outline: none;
      border-color: var(--color-primary);
    }

    .date-format-select {
      padding: var(--space-xs) var(--space-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      font-size: var(--font-size-xs);
      background: var(--color-surface);
      color: var(--color-text);
      cursor: pointer;
    }

    .confidence-badge {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: var(--font-size-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .confidence-badge.high   { background: rgba(29,184,141,0.15); color: var(--color-primary); }
    .confidence-badge.medium { background: rgba(255,192,0,0.15);  color: #A07800; }
    .confidence-badge.manual { background: rgba(99,102,241,0.15); color: #6366F1; }
    .confidence-badge.pending{ background: var(--color-tertiary-bg); color: var(--color-text-light); }

    .ambiguous-pill {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 999px;
      font-size: var(--font-size-xs);
      background: rgba(255,192,0,0.18);
      color: #A07800;
      font-weight: 600;
      margin-left: 4px;
    }

    .preview-data-section {
      margin-top: var(--space-md);
    }

    .preview-data-title {
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-text-secondary);
      margin-bottom: var(--space-sm);
    }

    .preview-data-scroll {
      overflow-x: auto;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      max-height: 180px;
      overflow-y: auto;
    }

    .preview-data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--font-size-xs);
      white-space: nowrap;
    }

    .preview-data-table th {
      padding: 4px 10px;
      background: var(--color-tertiary-bg);
      border-bottom: 1px solid var(--color-border);
      text-align: left;
      font-weight: 600;
      color: var(--color-text-secondary);
      position: sticky;
      top: 0;
    }

    .preview-data-table td {
      padding: 4px 10px;
      border-bottom: 1px solid var(--color-border);
      color: var(--color-text);
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .preview-data-table tr:last-child td { border-bottom: none; }

    /* ---- Step 3: Review & Amend grid ---- */
    .review-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    .review-pill {
      padding: 4px 10px;
      border-radius: 999px;
      font-size: var(--font-size-xs);
      background: var(--color-tertiary-bg);
      border: 1px solid var(--color-border);
      color: var(--color-text);
    }
    .review-pill.warn {
      background: rgba(255,192,0,0.18);
      border-color: rgba(255,192,0,0.5);
      color: #8a6200;
    }
    .review-pill.info {
      background: rgba(59,130,246,0.15);
      border-color: rgba(59,130,246,0.4);
      color: #1e40af;
    }
    body.dark-theme .review-pill.warn { color: #ffd966; }
    body.dark-theme .review-pill.info { color: #93c5fd; }

    .review-notimported {
      margin-bottom: 12px;
      font-size: var(--font-size-xs);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 8px 12px;
      background: var(--color-tertiary-bg);
    }
    .review-notimported summary {
      cursor: pointer;
      color: var(--color-text-light);
      font-weight: 500;
    }
    .review-notimported summary:hover { color: var(--color-text); }
    .review-notimported-section {
      margin-top: 8px;
    }
    .review-notimported-section-title {
      color: var(--color-text-light);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
    }
    .review-chip {
      display: inline-block;
      padding: 2px 8px;
      margin: 2px;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      font-size: var(--font-size-xs);
      color: var(--color-text-light);
    }
    .review-banner {
      margin: 8px 0;
      padding: 8px 12px;
      border-radius: var(--radius-md);
      font-size: var(--font-size-xs);
      background: rgba(255,192,0,0.12);
      border: 1px solid rgba(255,192,0,0.4);
      color: var(--color-text);
    }

    .review-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      font-size: var(--font-size-xs);
      margin-bottom: 8px;
      color: var(--color-text-light);
    }
    .review-swatch {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 2px;
      margin-right: 4px;
      vertical-align: middle;
      border: 1px solid var(--color-border);
    }
    .review-swatch.transformed { background: rgba(59,130,246,0.25); }
    .review-swatch.warning     { background: rgba(255,192,0,0.35); }
    .review-swatch.blank       { background: var(--color-tertiary-bg); }
    .review-swatch.ok          { background: var(--color-bg); }

    .review-grid-wrap {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      overflow: auto;
      max-height: 420px;
    }
    .review-grid {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--font-size-xs);
    }
    .review-grid thead th {
      position: sticky;
      top: 0;
      background: var(--color-bg-secondary);
      border-bottom: 1px solid var(--color-border);
      padding: 6px 8px;
      text-align: left;
      color: var(--color-text);
      font-weight: 600;
      white-space: nowrap;
      z-index: 1;
    }
    .review-grid td {
      padding: 0;
      border-bottom: 1px solid var(--color-border);
      vertical-align: middle;
    }
    .review-grid tr:last-child td { border-bottom: none; }
    .review-cell {
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .review-grid input,
    .review-grid select {
      flex: 1;
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      padding: 6px 8px;
      font-size: inherit;
      color: inherit;
      font-family: inherit;
    }
    .review-grid input:focus,
    .review-grid select:focus {
      border-color: var(--color-primary);
      background: var(--color-bg);
      outline: none;
      border-radius: 3px;
    }

    .cell-transformed { background: rgba(59,130,246,0.12); }
    .cell-warning     { background: rgba(255,192,0,0.18); }
    .cell-blank       { background: var(--color-tertiary-bg); }

    body.dark-theme .cell-transformed { background: rgba(59,130,246,0.22); }
    body.dark-theme .cell-warning     { background: rgba(255,192,0,0.22); }
    body.dark-theme .cell-blank       { background: rgba(255,255,255,0.04); }

    .cell-restore-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--color-text-light);
      padding: 0 6px;
      font-size: 13px;
      line-height: 1;
    }
    .cell-restore-btn:hover { color: var(--color-primary); }

    .cell-info-icon {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: rgba(59,130,246,0.4);
      color: #fff;
      font-size: 10px;
      line-height: 14px;
      text-align: center;
      margin-right: 4px;
      flex-shrink: 0;
    }
    .cell-warning .cell-info-icon { background: rgba(255,192,0,0.7); color: #5a4500; }
  

            .treasury-divider { margin: 40px 0 20px; padding-top: 28px; border-top: 2px solid var(--color-border); }
            .treasury-divider h2 { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
            .treasury-divider p { font-size: var(--font-size-sm); color: var(--color-text-secondary); max-width: 880px; }
            /* All .treasury-table structure/sticky-header/body CSS now lives in ONE
               place — the shared .data-table/.treasury-table block in the <head>
               <style>. Only treasury-specific component styles (pills) remain here. */
            .tr-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
            .tr-pill-warn { background: rgba(255,192,0,0.15); color: #B8860B; }
            .tr-pill-ok { background: rgba(16,185,129,0.15); color: var(--color-success, #10B981); }
            .tr-pill-err { background: rgba(239,68,68,0.12); color: var(--color-error, #EF4444); }
            .tr-icon-btn { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); padding: 4px 6px; border-radius: 4px; font-size: 14px; line-height: 1; }
            .tr-icon-btn:hover { color: var(--color-primary); }
            .tr-icon-btn.danger:hover { color: var(--color-error, #EF4444); }
            .tr-inline-input { width: 120px; padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-background); color: var(--color-text); font-size: var(--font-size-sm); text-align: right; font-family: inherit; }
            /* Rows a provider owns — an execution provider's booked trades, or an account fed
               by an open-banking link. The markup for these has been emitted since the FX
               execution work but never had styles, so a synced row was indistinguishable from
               one the user could edit. That is the wrong way round: the whole point of the
               badge is to explain why the edit controls are absent. */
            .tr-provider-row { background: rgba(29,184,141,0.04); }
            .tr-provider-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 6px; border-radius: 10px; background: rgba(29,184,141,0.15); color: var(--color-primary, #1DB88D); vertical-align: middle; }
            .tr-provider-lock { color: var(--color-text-light, #9AA5B1); font-size: 13px; cursor: help; }
            .tr-empty { padding: 28px; text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
            .tr-modal-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9000; align-items: center; justify-content: center; }
            .tr-modal-backdrop.open { display: flex; }
            .tr-modal { background: var(--color-surface); border-radius: 12px; padding: 28px; max-width: 580px; width: 94%; max-height: 86vh; overflow-y: auto; }
            .tr-modal-title { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: 16px; color: var(--color-text); }
            .tr-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
            .tr-modal-grid .tr-field { margin-bottom: 14px; }
            .tr-field label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
            .tr-field label .hint { font-weight: 400; font-size: 11px; color: var(--color-text-secondary); margin-left: 6px; }
            .tr-field input, .tr-field select { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-background); font-size: var(--font-size-sm); color: var(--color-text); font-family: inherit; }
            .tr-modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }

            /* ── Data Readiness tab (data-readiness.js) ─────────────────────────────
               "How ready is my data for each tool" — a register table, then four queues,
               worst-first. No score: a single number would hide exactly which tool/field is
               the problem.

               TYPE: the whole block used to sit on --font-size-sm (14px) + --color-text-secondary
               (#56544a), which read as uniformly light and small over a screen this dense. Everything
               that carries INFORMATION is now --font-size-base + --color-text; only genuinely
               secondary marks (the optional-for list, "none yet", the scope badge, column labels)
               stay muted, one step down at --font-size-sm. Nothing sits below --font-size-xs (12px). */
            #dataReadinessContainer { padding: 0 var(--space-xl) var(--space-xl); }
            .dr-intro { font-size: var(--font-size-base); color: var(--color-text); line-height: 1.6; margin: 0 0 var(--space-md); max-width: 70ch; }
            .dr-intro + .dr-intro { margin-bottom: var(--space-xl); }
            /* .data-section carries no padding of its own — its children supply it, and every sibling
                (.section-header, .table-container) insets by --space-xl. These two must match it or the
                whole readiness tab sits 24px left of the heading above it. */
            .dr-scenario-picker { display: flex; align-items: center; gap: var(--space-md);
              padding: var(--space-lg) var(--space-xl) 0; margin-bottom: var(--space-lg); }
            .dr-scenario-picker .scenario-input { width: auto; min-width: 280px; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-base); font-weight: 500; }
            .dr-loading, .dr-error, .dr-empty-note { padding: var(--space-xl); text-align: center; color: var(--color-text); font-size: var(--font-size-base); }
            .dr-queue { margin-bottom: var(--space-xl); }
            .dr-queue-title { display: flex; align-items: baseline; gap: var(--space-sm); font-size: var(--font-size-lg, 18px); font-weight: 650; color: var(--color-text); margin: 0 0 6px; }
            .dr-queue-count { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); background: var(--color-background); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 10px; }
            .dr-queue-note { font-size: var(--font-size-base); color: var(--color-text); line-height: 1.5; margin: 0 0 var(--space-md); max-width: 78ch; }
            .dr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-lg); }
            /* --space-lg is 16px, which still read as cramped at card size — cards get --space-xl (24px). */
            .dr-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-xl); }
            /* Status is now a per-CARD state, not a parent queue: tools are grouped by the sidebar's
               Solutions sections so a tool stays where the user navigates to it, and its status is a badge
               that changes in place instead of moving the card to another section. */
            .dr-card.dr-s-blocked { border-left: 3px solid var(--color-error); }
            .dr-card.dr-s-nodata { border-left: 3px solid var(--color-border); }
            .dr-card.dr-s-exclusions { border-left: 3px solid var(--orange, #E88830); }
            .dr-card.dr-s-ready { border-left: 3px solid var(--color-success); }
            .dr-card.dr-s-unchecked, .dr-card.dr-s-none { border-left: 3px solid var(--color-border); opacity: 0.72; }
            .dr-status { font-size: var(--font-size-xs, 12px); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; text-transform: uppercase; }
            .dr-s-blocked .dr-status { color: var(--color-error); }
            .dr-s-exclusions .dr-status { color: var(--orange-deep, #B4661F); }
            .dr-s-ready .dr-status { color: var(--color-success); }
            .dr-s-nodata .dr-status, .dr-s-unchecked .dr-status, .dr-s-none .dr-status { color: var(--color-text-secondary); }
            /* One block per sidebar group, tinted with that group's own accent so the grouping reads as the
               same thing the navigation shows. */
            /* Each Solutions group is a collapsible <details>. The summary is a banner that says whether
               anything inside needs the reader, so the screen opens as four headlines rather than sixteen
               cards — and a group with nothing to fix stays shut. */
            .dr-group { margin-bottom: var(--space-lg); border: 1px solid var(--color-border);
              border-left: 3px solid var(--acc, var(--color-border)); border-radius: var(--radius-md);
              background: var(--color-surface); overflow: hidden; }
            .dr-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
              padding: var(--space-lg) var(--space-xl); cursor: pointer; list-style: none;
              background: var(--color-background); }
            .dr-group-head::-webkit-details-marker { display: none; }
            .dr-group-head:hover { background: var(--color-surface-hover, var(--color-background)); }
            .dr-group-head:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
            /* A disclosure caret that turns, so the control reads as a control. */
            .dr-group-head::before { content: '\25B8'; display: inline-block; margin-right: var(--space-sm);
              color: var(--color-text-secondary); transition: transform 0.15s ease; flex: 0 0 auto; }
            .dr-group[open] > .dr-group-head::before { transform: rotate(90deg); }
            .dr-group-title { font-size: var(--font-size-lg, 18px); font-weight: 650; color: var(--color-text);
              margin: 0; flex: 1 1 auto; }
            .dr-group-state { font-size: var(--font-size-sm); font-weight: 650; white-space: nowrap;
              border-radius: 999px; padding: 4px 12px; border: 1px solid transparent; }
            .dr-gs-clear { color: var(--color-success); border-color: var(--color-success); }
            .dr-gs-attention { color: var(--orange-deep, #B4661F); border-color: var(--orange, #E88830); }
            .dr-gs-blocked { color: var(--color-error); border-color: var(--color-error); }
            .dr-group-body { padding: var(--space-xl); border-top: 1px solid var(--color-border); }
            @media (prefers-reduced-motion: reduce) { .dr-group-head::before { transition: none; } }
            .dr-tally { font-size: var(--font-size-base); color: var(--color-text); margin: 0 0 var(--space-xl); }
            .dr-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: 6px; }
            .dr-card-label { font-size: var(--font-size-base); font-weight: 650; color: var(--color-text); }
            .dr-fix-count { font-size: var(--font-size-xs, 12px); font-weight: 700; color: var(--color-error); white-space: nowrap; }
            .dr-composed, .dr-note { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.45; margin: 3px 0; }
            /* Says whether the projection picker moves this card. Quiet by design — it is orientation, not
               a finding, so it must never compete with the blockers and warnings below it. */
            .dr-scope-line { font-size: var(--font-size-xs, 12px); color: var(--color-text-light); margin: 0 0 4px; }
            .dr-findings { list-style: none; margin: var(--space-md) 0 0; padding: 0; font-size: var(--font-size-base); line-height: 1.55; }
            .dr-findings li { padding: 5px 0; }
            .dr-findings li + li { border-top: 1px solid var(--color-border-light, rgba(0,0,0,0.06)); }
            .dr-blockers li { color: var(--color-error); }
            .dr-warnings li { color: var(--orange-deep, #B4661F); }
            .dr-gaps { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.5; margin: var(--space-md) 0 0; }
            .dr-gaps li { padding: 4px 0; }

            /* EVERY FINDING IS A LINK to the register that fixes it. Styled as the surrounding text rather
               than as a control: it must read as the sentence it is, with the affordance appearing on
               hover/focus. A button (not an <a>) because it navigates within the page — and it inherits
               colour, so a blocker stays red and a gap stays muted. */
            .dr-goto { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0;
              margin: 0; font: inherit; color: inherit; line-height: inherit; cursor: pointer;
              border-radius: var(--radius-sm, 4px); }
            .dr-goto::after { content: ' \2192'; opacity: 0; transition: opacity 0.12s ease; }
            .dr-goto:hover, .dr-goto:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
            .dr-goto:hover::after, .dr-goto:focus-visible::after { opacity: 0.7; }
            .dr-goto:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
            .dr-reg-name .dr-goto { font-weight: 650; }

            /* A tool with nothing to report is a CHIP, not a card — it still answers "is this ready?" but
               gives the space back to the tools that need you. */
            .dr-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
            .dr-chip { display: inline-flex; align-items: center; gap: 7px; font-size: var(--font-size-sm);
              color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border);
              border-radius: 999px; padding: 5px 12px; }
            .dr-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); flex: 0 0 auto; }
            .dr-chip.dr-s-ready .dr-chip-dot { background: var(--color-success); }
            .dr-chip.dr-s-nodata .dr-chip-dot, .dr-chip.dr-s-none .dr-chip-dot { background: var(--color-text-light, #9aa0a6); }
            .dr-chip-state { font-size: var(--font-size-xs, 12px); color: var(--color-text-secondary); text-transform: lowercase; }
            .dr-chip.dr-s-none .dr-chip-state, .dr-chip.dr-s-nodata .dr-chip-state { font-style: italic; }

            /* What entering this register would unlock — shown only on an empty one, naming the tools that
               are actually held up right now. */
            .dr-unlock { margin-top: 6px; font-size: var(--font-size-sm); font-weight: 600; color: var(--orange-deep, #B4661F); }
            /* Clicking a readiness finding scrolls here and flashes the register for a moment, so the
               reader lands looking at the right table instead of scanning for it. */
            @keyframes registerFlash {
              0%   { box-shadow: 0 0 0 3px rgba(232,136,48,0.55); }
              100% { box-shadow: 0 0 0 3px rgba(232,136,48,0); }
            }
            .register-flash { animation: registerFlash 1.6s ease-out; border-radius: var(--radius-md); }
            @media (prefers-reduced-motion: reduce) {
              .register-flash { animation: none; box-shadow: 0 0 0 3px rgba(232,136,48,0.35); }
              .dr-goto::after { transition: none; }
            }

            /* Register table — the "where do I go type?" half, above the tool queues. */
            .dr-registers { margin-top: var(--space-2xl, 32px); margin-bottom: var(--space-xl);
              border: 1px solid var(--color-border); border-radius: var(--radius-md);
              background: var(--color-surface); padding: var(--space-xl); }
            .dr-scope { font-size: var(--font-size-base); color: var(--color-text); line-height: 1.5; background: var(--color-background); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin: 0 0 var(--space-md); max-width: 78ch; }
            .dr-scope b { font-weight: 650; }
            .dr-table-wrap { overflow-x: auto; }
            .dr-table th { font-size: var(--font-size-sm); color: var(--color-text); }
            .dr-table td { font-size: var(--font-size-base); color: var(--color-text); line-height: 1.5; padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
            .dr-table th, .dr-table td { vertical-align: top; }
            .dr-reg-name { font-weight: 650; color: var(--color-text); white-space: nowrap; }
            .dr-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
            .dr-none { color: var(--color-text-secondary); font-style: italic; }
            .dr-muted { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
            .dr-row-gap { background: rgba(232,136,48,0.08); }
            .dr-row-gap .dr-reg-name { box-shadow: inset 3px 0 0 var(--orange, #E88830); padding-left: 10px; }
            .dr-uses-label { font-size: var(--font-size-xs, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); margin-right: 5px; }
            .dr-scope-badge { display: inline-block; font-size: var(--font-size-xs, 12px); font-weight: 650; border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 9px; white-space: nowrap; color: var(--color-text-secondary); }
            .dr-scope-projection, .dr-scope-shared { border-color: var(--color-primary); color: var(--color-primary); }