:root {
      --color-brand: #8B1A1A;
      --color-brand-dark: #5C1010;
      --color-text: #1a1a1a;
      --color-text-secondary: #4a4a4a;
      --color-success: #1e6f3e;
      --color-warning: #b45309;
      --color-danger: #b91c1c;
      --color-muted: #6b7280;
      --color-bg: #f9fafb;
      --color-surface: #ffffff;
      --color-border: #e5e7eb;
      --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-serif: 'Source Serif 4', Georgia, serif;
    }
    
    * { box-sizing: border-box; }
    
    body {
      font-family: var(--font-sans);
      margin: 0;
      padding: 0;
      background: var(--color-bg);
      color: var(--color-text);
      line-height: 1.6;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 24px;
    }
    
    /* Header / Letterhead */
    header {
      background: var(--color-surface);
      border-bottom: 3px solid var(--color-brand);
      padding: 8px 0;
    }

    .brand-logo {
      height: 125px;
      width: auto;
    }
    /* The header brand area is wrapped in an anchor on every page so the
       logo / wordmark act as a "home" link to the dashboard. Strip the
       default anchor styling so the chrome stays visually identical. */
    .brand-home-link {
      display: block;
      color: inherit;
      text-decoration: none;
    }
    .brand-home-link:hover #brand-name { color: var(--color-brand); }
    .brand-home-link:focus-visible {
      outline: 2px solid var(--color-brand);
      outline-offset: 2px;
    }
    
    /* Layout */
    .layout {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 24px;
      align-items: start;
      margin-top: 24px;
    }
    
    @media (max-width: 1024px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }
    
    .card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 6px;
      padding: 20px;
      margin-bottom: 20px;
    }
    
    .card-title {
      margin: 0 0 16px 0;
      font-size: 12px;
      font-weight: 600;
      color: var(--color-muted);
      text-transform: uppercase;
      letter-spacing: 0.75px;
    }
    
    /* Form */
    .form-group {
      margin-bottom: 16px;
    }
    
    label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      font-size: 14px;
      color: var(--color-text);
    }
    
    input[type="file"] {
      display: block;
      width: 100%;
      padding: 12px;
      border: 2px dashed var(--color-border);
      border-radius: 6px;
      background: var(--color-bg);
      cursor: pointer;
      font-size: 14px;
      font-family: var(--font-sans);
    }
    
    input[type="file"]:hover {
      border-color: var(--color-brand);
    }

    .form-help {
      display: block;
      margin-top: 6px;
      font-size: 12px;
      color: var(--color-text-secondary);
    }

    .file-list-preview {
      margin-top: 10px;
      padding: 10px;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 6px;
      font-size: 13px;
    }

    .file-list-preview ol {
      margin: 6px 0 0 0;
      padding-left: 20px;
    }

    .file-list-preview li {
      margin-bottom: 4px;
      color: var(--color-text-secondary);
    }

    input[type="text"] {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      font-size: 14px;
      font-family: var(--font-sans);
    }
    
    input[type="text"]:focus {
      outline: none;
      border-color: var(--color-brand);
    }
    
    input[readonly] {
      background: var(--color-bg);
      color: var(--color-muted);
    }
    
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    
    button {
      width: 100%;
      padding: 14px 24px;
      background: var(--color-brand);
      color: #ffffff;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      font-family: var(--font-sans);
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: background 0.2s;
    }
    
    button:hover {
      background: var(--color-brand-dark);
    }
    
    button:disabled {
      background: var(--color-border);
      color: var(--color-muted);
      cursor: not-allowed;
    }
    
    /* Status */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .status-idle { background: #f3f4f6; color: var(--color-muted); }
    .status-uploading { background: #fef3c7; color: var(--color-warning); }
    .status-success { background: #d1fae5; color: var(--color-success); }
    .status-error { background: #fee2e2; color: var(--color-danger); }
    
    .spinner {
      width: 14px;
      height: 14px;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    /* Decision Banner */
    .decision-banner {
      display: none;
      padding: 16px 20px;
      border-radius: 6px;
      margin-bottom: 20px;
      color: white;
    }
    
    .decision-banner.show { display: flex; justify-content: space-between; align-items: center; }
    .decision-banner.decision-yes { background: var(--color-success); }
    .decision-banner.decision-no { background: var(--color-danger); }
    .decision-banner.decision-maybe { background: var(--color-warning); }
    .program-chip {
      display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px;
      text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
      background: #eef2f4; color: var(--color-muted); border: 1px solid var(--color-border);
    }
    .program-mismatch-banner {
      margin-top: 10px; padding: 10px 12px; border-radius: 6px; font-size: 13px;
      line-height: 1.5; background: #fdf6ec; color: #7a5200;
      border: 1px solid #e8c87a; border-left: 3px solid var(--color-warning);
    }
    
    .decision-text {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 1px;
    }
    
    .confidence-text {
      font-size: 14px;
      opacity: 0.9;
    }
    
    /* Metrics Grid */
    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }
    
    .metric-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 6px;
      padding: 14px;
      text-align: center;
    }
    
    .metric-value {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.2;
    }
    
    .metric-value.good { color: var(--color-success); }
    .metric-value.warning { color: var(--color-warning); }
    .metric-value.bad { color: var(--color-danger); }
    .metric-value.neutral { color: var(--color-text); }
    
    .metric-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-text);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 4px;
    }
    
    .metric-note {
      font-size: 10px;
      color: var(--color-muted);
      margin-top: 2px;
    }
    
    /* Section styling */
    .section-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--color-brand);
      margin: 20px 0 10px 0;
      text-transform: uppercase;
      letter-spacing: 0.75px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--color-border);
    }
    
    /* Reasoning */
    .reasoning-text {
      font-size: 14px;
      color: var(--color-text);
      background: white;
      padding: 14px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      border-left: 3px solid var(--color-brand);
    }
    
    .reasoning-text p { margin: 0 0 10px 0; }
    .reasoning-text p:last-child { margin-bottom: 0; }
    
    /* Key Factors */
    .factors-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .factors-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      background: var(--color-bg);
      border-radius: 4px;
      font-size: 14px;
    }
    
    .factors-list li::before {
      content: none;
    }
    
    .factor-num {
      color: var(--color-brand);
      font-weight: 700;
      min-width: 20px;
    }
    
    /* Validation Steps */
    .validation-category {
      margin-bottom: 16px;
    }
    
    .validation-category-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--color-border);
    }
    
    .validation-step {
      display: flex;
      gap: 10px;
      padding: 10px;
      background: white;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      margin-bottom: 6px;
    }
    
    .validation-status {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
    }
    
    .validation-status.verified { background: #d1fae5; color: var(--color-success); }
    .validation-status.discrepancy { background: #fef3c7; color: var(--color-warning); }
    .validation-status.unable_to_verify { background: #fee2e2; color: var(--color-danger); }
    
    .validation-content { flex: 1; min-width: 0; }
    
    .validation-description {
      font-size: 13px;
      font-weight: 500;
      color: var(--color-text);
      margin-bottom: 4px;
    }
    
    .validation-details {
      font-size: 12px;
      color: var(--color-muted);
    }
    
    .validation-details strong { color: var(--color-text-secondary); }
    
    .validation-sources {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 6px;
    }
    
    .source-tag {
      font-size: 10px;
      padding: 2px 6px;
      background: #f3f4f6;
      color: var(--color-text-secondary);
      border-radius: 3px;
      font-family: monospace;
    }
    
    /* Discrepancies */
    .discrepancy-item {
      padding: 12px;
      border-radius: 4px;
      margin-bottom: 8px;
      border-left: 3px solid;
    }
    
    .discrepancy-item.critical {
      background: #fef2f2;
      border-color: var(--color-danger);
    }
    
    .discrepancy-item.warning {
      background: #fffbeb;
      border-color: var(--color-warning);
    }
    
    .discrepancy-item.info {
      background: #f9fafb;
      border-color: var(--color-muted);
    }
    
    .discrepancy-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 4px;
    }
    
    .discrepancy-label {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 3px;
      text-transform: uppercase;
    }
    
    .discrepancy-item.critical .discrepancy-label { background: var(--color-danger); color: white; }
    .discrepancy-item.warning .discrepancy-label { background: var(--color-warning); color: white; }
    .discrepancy-item.info .discrepancy-label { background: var(--color-muted); color: white; }
    
    .discrepancy-description {
      font-size: 13px;
      color: var(--color-text-secondary);
    }
    
    .discrepancy-sources {
      font-size: 11px;
      color: var(--color-muted);
      margin-top: 4px;
      font-family: monospace;
    }
    
    .discrepancy-resolution {
      font-size: 12px;
      color: var(--color-success);
      margin-top: 4px;
    }
    
    /* Tables */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    
    .data-table th, .data-table td {
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--color-border);
    }
    
    .data-table th {
      font-weight: 600;
      color: var(--color-text);
      background: var(--color-bg);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .data-table tbody tr:hover {
      background: var(--color-bg);
    }
    
    .met-yes { color: var(--color-success); font-weight: 600; }
    .met-no { color: var(--color-danger); font-weight: 600; }
    
    /* Links */
    .links-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }
    
    .link-tile {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      padding: 12px;
    }
    
    .link-tile .label {
      font-size: 10px;
      font-weight: 600;
      color: var(--color-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }
    
    .link-tile a {
      color: var(--color-brand);
      text-decoration: none;
      font-weight: 600;
      font-size: 13px;
    }
    
    .link-tile a:hover { text-decoration: underline; }
    
    /* Income Validation Section */
    .income-verdict-banner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-radius: 6px;
      margin-bottom: 16px;
      color: white;
    }

    .income-verdict-banner.validated { background: var(--color-success); }
    .income-verdict-banner.invalidated_with_conditions { background: var(--color-warning); }
    .income-verdict-banner.unable_to_validate { background: var(--color-danger); }

    .income-verdict-text {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .income-confidence {
      font-size: 12px;
      opacity: 0.9;
    }

    .income-comparison {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 16px;
    }

    .income-stat {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      padding: 12px;
    }

    .income-stat-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--color-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .income-stat-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--color-text);
    }

    .income-stat-note {
      font-size: 11px;
      color: var(--color-muted);
      margin-top: 2px;
    }

    .conditions-list {
      list-style: none;
      padding: 0;
      margin: 12px 0 0 0;
    }

    .conditions-list li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px;
      background: #fffbeb;
      border: 1px solid var(--color-warning);
      border-radius: 4px;
      margin-bottom: 6px;
      font-size: 13px;
    }

    .condition-num {
      color: var(--color-warning);
      font-weight: 700;
      min-width: 18px;
    }

    /* Stateful condition cards (CC-4) — overlay the legacy .conditions-list li
       when the conditions collection has items for the job. */
    .condition-card {
      display: flex !important;
      flex-direction: column;
      gap: 8px;
      padding: 12px;
      background: #fffbeb;
      border: 1px solid var(--color-warning);
      border-radius: 6px;
      margin-bottom: 8px;
      font-size: 13px;
    }
    .condition-card[data-status="satisfied"] {
      background: #ecfdf5;
      border-color: #10b981;
    }
    .condition-card[data-status="waived"] {
      background: #f3f4f6;
      border-color: #9ca3af;
    }
    .condition-card .condition-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      flex-wrap: wrap;
    }
    .condition-card .condition-text {
      flex: 1 1 auto;
      min-width: 240px;
    }
    .condition-card .condition-account {
      font-size: 11px;
      color: var(--color-muted);
      background: rgba(0,0,0,0.04);
      padding: 2px 6px;
      border-radius: 3px;
    }
    .condition-pill {
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 10px;
      white-space: nowrap;
    }
    .condition-pill.open { background: #fef3c7; color: #92400e; }
    .condition-pill.satisfied { background: #d1fae5; color: #065f46; }
    .condition-pill.waived { background: #e5e7eb; color: #374151; }

    .condition-suggestion {
      background: rgba(59, 130, 246, 0.08);
      border: 1px solid rgba(59, 130, 246, 0.35);
      border-radius: 4px;
      padding: 10px;
      font-size: 12px;
      color: var(--color-text);
    }
    .condition-suggestion .suggestion-meta {
      font-size: 11px;
      color: var(--color-muted);
      margin-top: 4px;
    }
    .condition-suggestion em {
      font-style: italic;
      color: var(--color-text);
    }
    .condition-suggestion-unavailable {
      font-size: 12px;
      font-style: italic;
      color: var(--color-muted);
      padding: 4px 0;
    }

    /* Resolution banner — stamped on OPEN priors by the resolution matcher
       when a later attempt's PDF appears to satisfy them. Green-tinted to
       differentiate from the blue forward-match suggestion: the action is
       "Confirm satisfied," visually closer to "approved" than "review match." */
    .condition-resolution {
      background: rgba(16, 185, 129, 0.08);
      border-left: 3px solid var(--color-success);
      border-radius: 0 4px 4px 0;
      padding: 10px 12px;
      font-size: 12px;
      color: var(--color-text);
    }
    .condition-resolution .resolution-headline {
      font-weight: 600;
      margin-bottom: 4px;
    }
    .condition-resolution .resolution-detail {
      color: var(--color-text-secondary);
      margin-bottom: 4px;
      line-height: 1.45;
    }
    .condition-resolution .resolution-meta {
      font-size: 11px;
      color: var(--color-muted);
      margin-bottom: 8px;
    }
    .condition-resolution .confirm-resolution {
      background: var(--color-success);
      color: white;
      border: 0;
    }
    .condition-resolution .confirm-resolution:hover {
      filter: brightness(0.95);
    }

    /* Decision-page summary banner — top-of-page when this submission appears
       to have resolved one or more prior open conditions. Quiet by default. */
    .decision-resolution-banner {
      margin-bottom: 16px;
      padding: 10px 14px;
      background: rgba(16, 185, 129, 0.06);
      border-left: 3px solid var(--color-success);
      border-radius: 0 4px 4px 0;
      font-size: 13px;
      color: var(--color-text);
    }
    .decision-resolution-banner a {
      color: var(--color-brand);
      text-decoration: none;
    }
    .decision-resolution-banner a:hover {
      text-decoration: underline;
    }

    .condition-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .condition-action {
      width: auto;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.3px;
      border-radius: 4px;
      cursor: pointer;
      background: var(--color-brand);
      color: white;
      border: none;
      text-transform: none;
    }
    .condition-action.mark-waived,
    .condition-action.apply-suggestion[data-status="waived"] {
      background: var(--color-muted);
    }
    .condition-action[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .condition-action:hover:not([disabled]) {
      filter: brightness(1.1);
    }

    .condition-cleared-meta {
      font-size: 12px;
      color: var(--color-muted);
    }
    .condition-cleared-meta .condition-note {
      margin-top: 6px;
      padding: 6px 10px;
      background: rgba(255,255,255,0.6);
      border-left: 3px solid currentColor;
      font-style: italic;
      color: var(--color-text);
    }

    .du-alignment-box {
      background: var(--color-bg);
      border-left: 3px solid var(--color-brand);
      padding: 12px;
      margin-top: 12px;
      font-size: 13px;
    }

    .du-alignment-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-brand);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    /* Generic Domain Validation Section */
    .domain-verdict-banner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-radius: 6px;
      margin-bottom: 16px;
      color: white;
    }

    .domain-verdict-banner.validated { background: var(--color-success); }
    .domain-verdict-banner.invalidated_with_conditions { background: var(--color-warning); }
    .domain-verdict-banner.unable_to_validate { background: var(--color-danger); }

    .domain-verdict-text {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .domain-confidence {
      font-size: 12px;
      opacity: 0.9;
    }

    .domain-metrics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .domain-metric {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      padding: 12px;
    }

    .domain-metric-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--color-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .domain-metric-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-text);
    }

    .domain-metric-note {
      font-size: 11px;
      color: var(--color-muted);
      margin-top: 2px;
    }

    .domain-items-list {
      margin: 12px 0;
    }

    .domain-item {
      padding: 8px 12px;
      background: var(--color-bg);
      border-radius: 4px;
      margin-bottom: 6px;
      font-size: 13px;
    }

    .domain-item.warning {
      background: #fffbeb;
      border-left: 3px solid var(--color-warning);
    }

    .domain-item.danger {
      background: #fef2f2;
      border-left: 3px solid var(--color-danger);
    }

    .domain-section-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 12px 0 8px 0;
    }

    .credit-scores-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }

    .credit-score-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      padding: 12px;
      text-align: center;
    }

    .credit-score-card.representative {
      background: var(--color-brand);
      border-color: var(--color-brand);
      color: white;
    }

    .credit-score-card.representative .credit-score-label {
      color: rgba(255,255,255,0.8);
    }

    .credit-score-value {
      font-size: 24px;
      font-weight: 700;
    }

    .credit-score-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--color-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 4px;
    }

    .eligibility-checks-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 8px;
      margin-bottom: 16px;
    }

    .eligibility-check {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: var(--color-bg);
      border-radius: 4px;
      font-size: 13px;
    }

    .eligibility-check-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
    }

    .eligibility-check-icon.pass {
      background: #d1fae5;
      color: var(--color-success);
    }

    .eligibility-check-icon.fail {
      background: #fee2e2;
      color: var(--color-danger);
    }

    .eligibility-check-icon.warn {
      background: #fef3c7;
      color: var(--color-warning);
    }

    /* JSON Output */
    pre {
      background: #1f2937;
      color: #e5e7eb;
      padding: 14px;
      border-radius: 4px;
      overflow: auto;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 11px;
      line-height: 1.5;
      margin: 0;
      max-height: 300px;
    }
    
    .response-placeholder {
      color: var(--color-muted);
      font-style: italic;
    }
    
    .collapsible-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
    }
    
    .collapsible-header:hover {
      opacity: 0.8;
    }
    
    .collapse-icon {
      font-size: 12px;
      color: var(--color-muted);
    }
    
    .collapsible-content {
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    
    .collapsible-content.collapsed {
      max-height: 0;
    }
    
    /* Summary Items */
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    
    .summary-item {
      display: flex;
      flex-direction: column;
      padding: 10px;
      background: var(--color-bg);
      border-radius: 4px;
    }
    
    .summary-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--color-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .summary-value {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text);
      margin-top: 2px;
    }

    /* History */
    .history-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .history-item {
      padding: 10px;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      cursor: pointer;
      background: var(--color-bg);
      transition: background 0.2s;
    }
    .history-item:hover {
      background: #f3f4f6;
      border-color: var(--color-brand);
    }
    .history-item-active {
      border-left: 3px solid var(--color-warning);
      background: #fefce8;
    }
    .history-item-active:hover {
      background: #fef9c3;
    }
    /* Decision page (URL: /decisions/{job_id}) ------------------------- */
    .decision-header-row {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    }
    .decision-header-left { flex: 1; min-width: 0; }
    .back-link {
      display: inline-block; margin-bottom: 8px;
      color: var(--color-brand); text-decoration: none; font-size: 13px;
    }
    .back-link:hover { text-decoration: underline; }
    .decision-meta-title { margin: 0 0 4px 0; font-size: 18px; }
    .decision-meta-sub { color: var(--color-muted); font-size: 13px; }
    .decision-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .secondary-btn {
      padding: 8px 14px; background: var(--color-bg); color: var(--color-text);
      border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer;
      font-size: 13px; font-weight: 600;
    }
    .secondary-btn:hover { background: #f3f4f6; border-color: var(--color-brand); }
    .share-toast {
      margin-top: 10px; padding: 8px 12px; background: #ecfdf5;
      border: 1px solid #a7f3d0; color: #065f46; border-radius: 4px;
      font-size: 13px; text-align: center;
    }
    /* When in decision-page mode, the submission form + history collapse so the
       decision view occupies the full attention of the page. */
    body.decision-mode #form-card,
    body.decision-mode #history-card { display: none !important; }
    body.decision-mode .layout { grid-template-columns: minmax(280px, 1fr) 2fr; }
    .history-meta {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--color-muted);
      margin-bottom: 4px;
    }
    .history-decision {
      font-weight: 700;
      text-transform: uppercase;
    }
    .history-decision.yes { color: var(--color-success); }
    .history-decision.no { color: var(--color-danger); }
    .history-decision.maybe { color: var(--color-warning); }
    .history-ids {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text);
    }

    /* Auth Gate */
    .auth-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--color-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    .auth-overlay.hidden {
      display: none;
    }

    .auth-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 40px;
      max-width: 400px;
      width: 100%;
      text-align: center;
      box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    }

    .auth-card h1 {
      font-family: var(--font-serif);
      font-size: 20px;
      color: var(--color-text);
      margin: 0 0 8px 0;
    }

    .auth-card p {
      font-size: 14px;
      color: var(--color-muted);
      margin: 0 0 24px 0;
    }

    .auth-card input[type="password"] {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      font-size: 16px;
      font-family: var(--font-sans);
      text-align: center;
      letter-spacing: 1px;
      margin-bottom: 16px;
    }

    .auth-card input[type="password"]:focus {
      outline: none;
      border-color: var(--color-brand);
    }

    .auth-card button {
      width: 100%;
      padding: 14px 24px;
      background: var(--color-brand);
      color: #ffffff;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }

    .auth-card button:hover {
      background: var(--color-brand-dark);
    }

    .auth-error {
      color: var(--color-danger);
      font-size: 13px;
      margin-top: 12px;
      display: none;
    }

    .auth-error.visible {
      display: block;
    }

    /* Sign Out Button */
    .sign-out-btn {
      position: fixed;
      top: 16px;
      right: 24px;
      width: auto;
      padding: 8px 16px;
      background: transparent;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      color: var(--color-muted);
      cursor: pointer;
      z-index: 100;
    }

    .sign-out-btn:hover {
      background: var(--color-bg);
      color: var(--color-text);
      border-color: var(--color-text);
    }

    /* Dashboard page (URL: /dashboard) -------------------------------- */
    /* In dashboard-mode the legacy submission form, sidebar history,
       results panel, and quick-links collapse so the dashboard owns the
       full viewport. The form returns as a modal when "+ New review"
       is clicked. */
    body.dashboard-mode #form-card,
    body.dashboard-mode #history-card,
    body.dashboard-mode #links-card,
    body.dashboard-mode #results-panel,
    body.dashboard-mode .layout > .sidebar > .card:last-child {
      display: none !important;
    }
    body.dashboard-mode .layout {
      display: block;
      grid-template-columns: 1fr;
    }
    body.dashboard-mode #dashboard-page { display: block !important; }

    /* Loan-mode (URL /loans/{loan_id}): same shell-hiding as dashboard-mode,
       plus reveal the loan-detail page. #links-card + #results-panel are
       scoped to .layout so the hide only applies in their original location;
       once renderLoanResult relocates them into #loan-result-host (outside
       .layout) the rule stops matching and updateSummary's inline display
       governs — the inline loan result must not inherit this !important hide. */
    body.loan-mode #form-card,
    body.loan-mode #history-card,
    body.loan-mode .layout #links-card,
    body.loan-mode .layout #results-panel,
    body.loan-mode .layout > .sidebar > .card:last-child {
      display: none !important;
    }
    body.loan-mode .layout {
      display: block;
      grid-template-columns: 1fr;
    }
    body.loan-mode #loan-detail-page { display: block !important; }

    /* Reuse the dashboard's new-review modal overlay on the loan page too,
       so "Re-submit to this loan" opens the same form modal centered. */
    body.loan-mode.show-new-review::before {
      content: '';
      position: fixed; inset: 0;
      background: rgba(15, 23, 42, 0.55);
      z-index: 900;
    }
    body.loan-mode.show-new-review #form-card {
      display: block !important;
      position: fixed;
      top: 80px; left: 50%;
      transform: translateX(-50%);
      width: min(540px, calc(100vw - 32px));
      max-height: calc(100vh - 120px);
      overflow-y: auto;
      z-index: 901;
      box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    }

    /* Loan-detail page layout */
    #loan-detail-page {
      display: none;
      max-width: 1240px;
      margin: 0 auto;
    }
    .loan-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--color-border);
    }
    .loan-header-meta h1 {
      font-family: var(--font-serif);
      font-size: 24px; margin: 0 0 4px 0;
      color: var(--color-text);
    }
    .loan-header-meta .loan-sub {
      color: var(--color-muted);
      font-size: 13px;
    }
    .loan-resubmit-btn {
      width: auto; padding: 10px 18px; font-size: 13px;
    }
    .loan-section {
      margin-bottom: 28px;
    }
    .loan-section-title {
      font-family: var(--font-serif);
      font-size: 18px;
      margin: 0 0 12px 0;
      color: var(--color-text);
    }
    .loan-attempts-list {
      display: flex; flex-direction: column;
      gap: 10px;
    }
    /* Attempts are a switcher — clicking a row renders that attempt inline
       above. Pointer + hover affordance; the selected row gets a brand keyline. */
    .loan-attempt-row { cursor: pointer; transition: background 120ms ease, box-shadow 120ms ease; }
    .loan-attempt-row:hover { background: color-mix(in oklch, var(--color-brand) 4%, var(--color-surface)); }
    .loan-attempt-row.selected {
      box-shadow: inset 3px 0 0 var(--color-brand);
      background: color-mix(in oklch, var(--color-brand) 6%, var(--color-surface));
    }
    /* Inline state card for the selected attempt when it's in-flight or failed
       (the shared result panel renders here instead when the attempt completed). */
    .loan-state-card { padding: 18px 20px; margin-bottom: 16px; }
    .loan-state-title { font-weight: 600; font-size: 14px; color: var(--color-text); margin-bottom: 10px; }
    .loan-state-msg { font-size: 13px; color: var(--color-text-secondary); margin-top: 8px; }
    .loan-state-sub { font-size: 12px; color: var(--color-muted); margin-top: 6px; }
    .loan-state-inflight { border-left: 3px solid var(--color-brand); }
    .loan-state-failed { border-left: 3px solid var(--color-danger); }
    .loan-state-failed .loan-state-msg { color: var(--color-danger); }
    .loan-state-failed .secondary-btn { margin-top: 12px; }
    .loan-empty, .loan-loading, .loan-error {
      padding: 24px;
      text-align: center;
      color: var(--color-muted);
      border: 1px dashed var(--color-border);
      border-radius: 8px;
    }
    .loan-error { color: var(--color-decline); border-color: var(--color-decline); }
    .loan-conditions-placeholder {
      padding: 16px;
      color: var(--color-muted);
      font-size: 13px;
      font-style: italic;
      background: var(--color-bg);
      border-radius: 8px;
    }

    /* CC-5 loan-detail Conditions panel */
    .loan-conditions-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--color-border);
    }
    .loan-conditions-tab {
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-muted);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      letter-spacing: 0.2px;
    }
    .loan-conditions-tab[aria-pressed="true"] {
      color: var(--color-text);
      border-bottom-color: var(--color-brand);
    }
    /* The generic button:hover fills brand-dark; tabs have dark text, so make
       the fill intentional + invert text to white for readable contrast. */
    .loan-conditions-tab:hover {
      background: var(--color-brand-dark);
      color: #fff;
      border-bottom-color: var(--color-brand-dark);
    }
    .loan-conditions-domain {
      margin-bottom: 16px;
    }
    .loan-conditions-domain-title {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--color-muted);
      margin: 0 0 6px 0;
    }
    .condition-attempt-link {
      font-size: 11px;
      color: var(--color-muted);
    }
    .condition-attempt-link a {
      color: var(--color-link, var(--color-brand));
      text-decoration: none;
    }
    .condition-attempt-link a:hover { text-decoration: underline; }
    .loan-all-cleared-badge {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.5px;
      padding: 4px 10px;
      border-radius: 10px;
      background: #d1fae5;
      color: #065f46;
      text-transform: uppercase;
    }

    /* ============================================================
       Loan page — two-zone layout: a compact submission dropdown on
       top, then a sticky conditions rail beside the scrolling review.
       ============================================================ */

    /* Submission selector */
    .loan-submissions {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 22px;
    }
    .loan-submissions-label {
      font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
      text-transform: uppercase; color: var(--color-muted);
    }
    .loan-dropdown { position: relative; }
    .loan-dropdown-btn {
      display: inline-flex; align-items: center; justify-content: space-between;
      gap: 12px; width: auto; min-width: 300px;
      padding: 9px 14px; font-size: 14px; font-weight: 500;
      color: var(--color-text); background: var(--color-surface);
      border: 1px solid var(--color-border); border-radius: 8px;
      cursor: pointer;
      transition: border-color 120ms ease, box-shadow 120ms ease;
    }
    /* Keep the select-style button light on hover (just highlight the border) —
       override the generic button:hover brand-dark fill so text stays readable. */
    .loan-dropdown-btn:hover { background: var(--color-surface); border-color: var(--color-brand); }
    .loan-dropdown-btn[aria-expanded="true"] {
      border-color: var(--color-brand);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand) 16%, transparent);
    }
    .loan-dropdown-current { display: inline-flex; align-items: center; gap: 8px; }
    .loan-dropdown-caret {
      width: 0; height: 0; flex: 0 0 auto;
      border-left: 4px solid transparent; border-right: 4px solid transparent;
      border-top: 5px solid var(--color-muted);
      transition: transform 150ms ease;
    }
    .loan-dropdown-btn[aria-expanded="true"] .loan-dropdown-caret { transform: rotate(180deg); }

    .loan-dropdown-list {
      position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
      min-width: 340px; max-width: 460px; max-height: 360px; overflow-y: auto;
      margin: 0; padding: 6px; list-style: none;
      background: var(--color-surface);
      border: 1px solid var(--color-border); border-radius: 10px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    }
    .loan-dropdown-list[hidden] { display: none; }
    .loan-dropdown-option {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px; border-radius: 6px; cursor: pointer;
      font-size: 13px; color: var(--color-text);
    }
    .loan-dropdown-option:hover,
    .loan-dropdown-option.focused {
      background: color-mix(in oklch, var(--color-brand) 8%, var(--color-surface));
    }
    .loan-dropdown-option[aria-selected="true"] {
      background: color-mix(in oklch, var(--color-brand) 12%, var(--color-surface));
      font-weight: 600;
    }
    .loan-dropdown-option .opt-when { white-space: nowrap; }
    .loan-dropdown-option .opt-meta {
      margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
    }
    .loan-dropdown-option .opt-outcome { color: var(--color-muted); font-size: 12px; }
    .loan-dropdown-option .opt-latest {
      font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
      color: var(--color-brand);
    }
    .loan-dropdown-option .opt-check { color: var(--color-brand); font-weight: 700; visibility: hidden; }
    .loan-dropdown-option[aria-selected="true"] .opt-check { visibility: visible; }

    /* Status dot — palette mirrors the .dash-decision-badge colours */
    .loan-status-dot {
      width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
      background: var(--color-muted);
    }
    .loan-status-dot.approve, .loan-status-dot.yes { background: var(--color-success, #059669); }
    .loan-status-dot.refer, .loan-status-dot.maybe { background: var(--color-warning); }
    .loan-status-dot.decline, .loan-status-dot.no,
    .loan-status-dot.failed { background: var(--color-danger); }

    /* Two-zone body */
    .loan-body {
      display: grid; grid-template-columns: 320px minmax(0, 1fr);
      gap: 28px; align-items: start;
    }
    .loan-body:not(.has-rail) { grid-template-columns: 1fr; }
    .loan-body:not(.has-rail) .loan-rail { display: none; }
    .loan-main { min-width: 0; }
    .loan-rail {
      position: sticky; top: 20px; align-self: start;
      max-height: calc(100vh - 40px); overflow-y: auto;
    }
    .loan-rail .loan-section { margin-bottom: 0; }
    /* Tighten the conditions UI for the ~320px rail */
    .loan-rail .loan-conditions-tabs { flex-wrap: wrap; gap: 2px; }
    .loan-rail .loan-conditions-tab { padding: 6px 9px; font-size: 12px; }
    .loan-rail .condition-card .condition-text { min-width: 0; }
    .loan-rail .condition-card .condition-row { flex-wrap: wrap; }

    @media (max-width: 1024px) {
      .loan-body { grid-template-columns: 1fr; }
      .loan-rail { position: static; max-height: none; overflow: visible; }
    }

    /* De-dupe — the grouped Conditions card is redundant on the loan page
       (the rail aggregates conditions, actionable). Hide the WHOLE card in
       loan-mode only; the decision page keeps it inline. */
    body.loan-mode #conditions-card { display: none !important; }

    /* Grouped Conditions card (findings order: conditions front-and-center) */
    .conditions-sub {
      margin: 0 0 12px; font-size: 12px; color: var(--color-muted);
    }
    .cond-group-title {
      display: flex; align-items: center; gap: 8px;
      font-weight: 700; font-size: 13px; margin: 10px 0 8px;
    }
    .cond-group-title::before {
      content: ''; width: 10px; height: 10px; border-radius: 3px; flex: none;
    }
    .cond-group-title.pta::before { background: var(--color-warning); }
    .cond-group-title.ptc::before { background: var(--color-link); }
    .cond-group-count {
      font-weight: 600; font-size: 12px; color: var(--color-muted);
    }
    .condition-domain-tag {
      flex: none; align-self: flex-start;
      background: var(--color-light-bg, #eef2f7); color: var(--color-muted);
      border-radius: 5px; padding: 1px 7px;
      font-weight: 600; font-size: 10px;
      text-transform: uppercase; letter-spacing: 0.4px;
    }

    /* Loan Summary extras (was the Extracted Financial Data table) */
    .loan-summary-extra {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 8px 20px; margin-top: 12px;
    }
    .loan-summary-extra:empty { display: none; }

    /* Income card fold — the surviving line from the old gating card */
    .income-gating-note {
      margin-top: 12px; padding-top: 10px;
      border-top: 1px dashed var(--color-border);
      font-size: 12px; color: var(--color-muted);
    }

    /* Collateral card — appraisability fold + manual-review disclaimer */
    #appraisability-fold {
      margin-top: 14px; padding-top: 12px;
      border-top: 1px dashed var(--color-border);
    }
    .appraisal-disclaimer {
      background: #fff7ed; border: 1px solid #fed7aa; border-radius: 7px;
      padding: 9px 12px; margin-top: 12px;
      font-size: 12px; color: #9a3412;
    }

    /* Submission history — collapsed audit trail */
    .loan-history {
      margin-top: 30px; padding-top: 18px;
      border-top: 1px solid var(--color-border);
    }
    .loan-history-summary {
      cursor: pointer; list-style: none;
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-serif); font-size: 16px; color: var(--color-text);
    }
    .loan-history-summary::-webkit-details-marker { display: none; }
    .loan-history-summary::before {
      content: '\25B8'; color: var(--color-muted);
      transition: transform 150ms ease; font-size: 12px;
    }
    .loan-history[open] .loan-history-summary::before { transform: rotate(90deg); }
    .loan-history .loan-attempts-list { margin-top: 16px; }

    /* Decision page — "X other submissions for this loan" footer link */
    .decision-loan-footer {
      margin-top: 32px;
      padding-top: 16px;
      border-top: 1px solid var(--color-border);
      font-size: 13px;
      color: var(--color-muted);
      text-align: center;
    }
    .decision-loan-footer a {
      color: var(--color-link);
      text-decoration: none;
    }
    .decision-loan-footer a:hover { text-decoration: underline; }

    /* Modal overlay for "+ New review" — repositions #form-card as a
       centered modal when body.show-new-review is set. */
    body.dashboard-mode.show-new-review::before {
      content: '';
      position: fixed; inset: 0;
      background: rgba(15, 23, 42, 0.55);
      z-index: 900;
    }
    /* Lite tier — hide the decision-mix dashboard tile. The body class is
       flipped from localStorage on first paint (avoids flicker for returning
       users) and reconciled from /api/v1/me once it resolves; signOut clears
       the cached tier. The decision-mix tile is only meaningful for the Full
       agent set (Lite jobs have no overall decision). Full-only RESULT cards
       (incl. the checklist) are hidden per-result by body.result-income-assets
       below — keyed on the execution mode of the result shown, NOT the viewer's
       tier, so a Lite user viewing a Full decision still sees its detail. */
    /* Generalised selector — matches both the legacy .dash-tile carrier and
       the new .dash-stats-item.dash-stats-bars after the dashboard refactor. */
    body.lite-mode [data-tile="decisions"] { display: none !important; }
    /* Per-result hide: a full-tier "income & assets only" result has
       product_tier="full" (so no lite-mode) but decision==null, and must hide the
       Full-only cards too. updateSummary toggles this class off the execution mode
       (isLite) so the same shell can render a full result later and re-show them. */
    body.result-income-assets [data-full-only] { display: none !important; }

    /* Income & assets results disclaimer — hidden by default, revealed only for
       income & assets results (CLARA + full-tier income-only) via the same
       execution-mode class that hides the Full-only cards above. Client wording
       from "Questions for Data Entry to Clear Lite". */
    #lite-disclaimer-card { display: none; }
    body.result-income-assets #lite-disclaimer-card {
      display: block;
      border-left: 3px solid var(--color-warning);
    }
    .lite-disclaimer-list {
      margin: 4px 0 0;
      padding-left: 18px;
      color: var(--color-muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .lite-disclaimer-list li { margin-bottom: 6px; }
    .lite-disclaimer-list li:last-child { margin-bottom: 0; }

    /* Submission-type radios are now a hidden state holder set by the mode
       picker (full tier) or the Lite default; never shown directly. */
    #submission-type-row { display: none !important; }
    .submission-type-options { display: flex; flex-direction: column; gap: 6px; }
    .submission-type-option {
      display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px;
      border: 1px solid var(--color-border, #d4d4d8); border-radius: 6px;
      cursor: pointer; font-size: 0.9em; line-height: 1.35;
    }
    .submission-type-option:hover { background: var(--color-surface-hover, #f4f4f5); }
    .submission-type-option input[type="radio"] { margin-top: 2px; }

    /* ----- New-review mode picker (full-tier two-card chooser) ----- */
    .mode-picker-title { font-family: var(--font-serif); font-size: 1.5em; margin: 0 0 4px; color: var(--color-text); }
    .mode-picker-sub { color: var(--color-muted); font-size: 0.95em; margin: 0 0 18px; }
    .mode-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 560px) { .mode-card-grid { grid-template-columns: 1fr; } }
    .mode-card {
      display: flex; flex-direction: column; text-align: left; gap: 6px;
      border: 2px solid var(--color-border); border-radius: 10px; padding: 18px;
      background: var(--color-surface); cursor: pointer; position: relative;
      transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
      font-family: var(--font-sans); text-transform: none; letter-spacing: normal;
    }
    .mode-card--primary { border-color: var(--color-brand); background: #fdf6f6; }
    .mode-card:hover { border-color: var(--color-brand); background: #fdf6f6; box-shadow: 0 4px 14px rgba(139,26,26,.08); }
    .mode-card:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
    .mode-card-tag {
      position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700;
      letter-spacing: .4px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
      background: var(--color-brand); color: #fff;
    }
    .mode-card-tag--muted { background: #eef2f4; color: var(--color-muted); }
    .mode-card-name { font-family: var(--font-serif); font-weight: 700; font-size: 1.15em; color: var(--color-text); }
    .mode-card-desc { color: var(--color-text-secondary); font-size: 0.85em; margin-bottom: 6px; }
    .mode-card-points { margin: 0; padding-left: 16px; color: var(--color-text-secondary); font-size: 0.85em; line-height: 1.55; }
    .mode-card-points strong { color: var(--color-text); }
    .mode-back {
      background: none; border: none; color: var(--color-brand); cursor: pointer;
      font-size: 0.85em; padding: 0 0 10px; font-family: var(--font-sans);
    }
    .mode-back:hover { background: none; text-decoration: underline; }
    /* Pre-UW mode: the Loan ID is auto-derived from the customer name (server
       authoritative), so the input becomes informational. The autofill button
       stays — it now reads Customer ID from W-2 / paystub blocks instead of
       the URLA section 1, and the server returns the derived Loan ID alongside. */
    #loanId[readonly] {
      background: var(--color-surface-muted, #f4f4f5);
      color: var(--color-text-muted, #6b7280);
      cursor: not-allowed;
    }

    body.dashboard-mode.show-new-review #form-card {
      display: block !important;
      position: fixed;
      top: 80px; left: 50%;
      transform: translateX(-50%);
      width: min(540px, calc(100vw - 32px));
      max-height: calc(100vh - 120px);
      overflow-y: auto;
      z-index: 901;
      box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    }
    .new-review-close {
      position: absolute; top: 12px; right: 14px;
      background: transparent; border: none;
      width: 28px; height: 28px; padding: 0;
      font-size: 22px; line-height: 28px;
      color: var(--color-muted); cursor: pointer;
      text-transform: none; letter-spacing: normal;
      font-weight: 400;
    }
    .new-review-close:hover { color: var(--color-text); background: var(--color-bg); }

    /* Dashboard layout */
    .dash-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; margin-bottom: 20px;
    }
    .dash-header h1 {
      font-family: var(--font-serif);
      font-size: 24px; margin: 0;
      color: var(--color-text);
    }
    .dash-new-review-btn {
      width: auto; padding: 10px 18px; font-size: 13px;
    }

    /* Stats tile row */
    .dash-stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    @media (max-width: 1024px) {
      .dash-stats-row { grid-template-columns: repeat(2, 1fr); }
    }
    .dash-tile {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 6px;
      padding: 18px 20px;
      min-height: 110px;
      display: flex; flex-direction: column; justify-content: space-between;
    }
    .dash-tile-label {
      font-size: 11px; font-weight: 600;
      color: var(--color-muted);
      text-transform: uppercase; letter-spacing: 0.75px;
    }
    .dash-tile-value {
      font-family: var(--font-serif);
      font-size: 32px; font-weight: 700;
      color: var(--color-text);
      line-height: 1.1;
      margin: 6px 0 4px 0;
    }
    .dash-tile-sub {
      font-size: 12px; color: var(--color-text-secondary);
    }
    .dash-tile-error {
      font-size: 12px; color: var(--color-danger);
    }
    .dash-tile-error a {
      color: var(--color-brand); cursor: pointer;
      text-decoration: underline; margin-left: 6px;
    }
    .dash-bars {
      display: flex; flex-direction: column; gap: 4px;
      margin-top: 6px;
    }
    .dash-bar-row {
      display: flex; align-items: center; gap: 8px;
      font-size: 11px;
    }
    .dash-bar-label {
      width: 56px; color: var(--color-text-secondary);
      font-weight: 600; letter-spacing: 0.4px;
    }
    .dash-bar-track {
      flex: 1; height: 6px; background: var(--color-bg);
      border-radius: 3px; overflow: hidden;
    }
    .dash-bar-fill { height: 100%; border-radius: 3px; }
    .dash-bar-fill.approve { background: var(--color-success); }
    .dash-bar-fill.refer { background: var(--color-warning); }
    .dash-bar-fill.decline { background: var(--color-danger); }
    .dash-bar-pct {
      width: 36px; text-align: right;
      color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
    }

    .dash-section-hint {
      font-size: 12px; color: var(--color-text-secondary); font-weight: 400;
      text-transform: none; letter-spacing: 0;
    }

    /* Stats strip — replaces the 4-tile hero grid with a single horizontal
       strip. Today + This week are a compact pair; Decisions takes the
       remaining width because the bars are the only stat worth scanning
       at-a-glance. Avg duration was operational vanity; removed. */
    .dash-stats-strip {
      display: grid;
      grid-template-columns: minmax(140px, auto) minmax(140px, auto) 1fr;
      gap: 28px;
      padding: 14px 20px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      background: var(--color-surface);
      margin-bottom: 20px;
      align-items: center;
    }
    .dash-stats-item { display: flex; flex-direction: column; }
    .dash-stats-label {
      font-size: 11px; font-weight: 600;
      color: var(--color-muted);
      text-transform: uppercase; letter-spacing: 0.75px;
      margin-bottom: 4px;
    }
    .dash-stats-value {
      font-family: var(--font-serif);
      font-size: 22px; font-weight: 700;
      color: var(--color-text);
      line-height: 1.1;
    }
    .dash-stats-sub {
      font-size: 12px; color: var(--color-text-secondary);
      margin-top: 2px;
    }
    @media (max-width: 720px) {
      .dash-stats-strip { grid-template-columns: 1fr 1fr; gap: 14px; }
      .dash-stats-bars { grid-column: span 2; }
    }

    /* Segmented filter control — replaces the <select> dropdown.
       More scannable + matches the workflow vocabulary ("Needs attention" /
       "In progress" / "All cleared" / "All") instead of job-state jargon. */
    .dash-segmented {
      display: inline-flex;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      overflow: hidden;
      background: var(--color-surface);
    }
    .dash-segment {
      padding: 6px 14px;
      font-size: 12px; font-weight: 500;
      background: transparent; color: var(--color-text-secondary);
      border: 0; border-right: 1px solid var(--color-border);
      cursor: pointer;
      width: auto;
    }
    .dash-segment:last-child { border-right: 0; }
    .dash-segment:hover { background: color-mix(in oklch, var(--color-text) 4%, var(--color-surface)); }
    .dash-segment-active,
    .dash-segment[aria-pressed="true"] {
      background: var(--color-text);
      color: var(--color-surface);
    }

    /* Loan row — one row per loan_id, click anywhere to drill into the
       loan-detail page. */
    .dash-loan-row {
      display: grid;
      grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) auto auto;
      gap: 16px;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid var(--color-border);
      cursor: pointer;
      transition: background 120ms ease-out;
    }
    .dash-loan-row:last-child { border-bottom: 0; }
    .dash-loan-row:hover { background: color-mix(in oklch, var(--color-text) 3%, var(--color-surface)); }
    .dash-loan-row[data-needs-attention="true"] {
      border-left: 3px solid var(--color-warning);
      padding-left: 13px;
    }
    .dash-loan-ids {
      font-size: 13px; font-weight: 600;
      color: var(--color-text);
    }
    .dash-loan-ids .dash-loan-time {
      display: block; font-weight: 400; font-size: 12px;
      color: var(--color-text-secondary); margin-top: 3px;
    }
    .dash-loan-attempts {
      font-size: 12px; color: var(--color-text-secondary);
    }
    .dash-loan-conditions {
      display: inline-flex; gap: 6px; align-items: center;
    }
    .dash-loan-chip {
      font-size: 11px; font-weight: 600;
      padding: 3px 8px; border-radius: 10px;
      background: var(--color-surface); border: 1px solid var(--color-border);
    }
    .dash-loan-chip.open {
      background: color-mix(in oklch, var(--color-warning) 14%, var(--color-surface));
      border-color: color-mix(in oklch, var(--color-warning) 36%, var(--color-border));
      color: #92400e;
    }
    .dash-loan-chip.cleared {
      background: color-mix(in oklch, var(--color-success) 12%, var(--color-surface));
      border-color: color-mix(in oklch, var(--color-success) 32%, var(--color-border));
      color: #065f46;
    }

    /* Mode tag — quiet category label per loan row (income & assets vs a full
       underwrite). Brand-tinted for the notable income & assets mode, ghost for
       the baseline full mode; deliberately lower-key than the status-coloured
       decision badges so it reads as a category, not a verdict. */
    .dash-mode-tag {
      display: inline-block; vertical-align: middle;
      margin-left: 8px; padding: 2px 8px;
      font-size: 11px; font-weight: 600; white-space: nowrap;
      border-radius: 10px;
    }
    .dash-mode-tag.income-assets {
      background: color-mix(in oklch, var(--color-brand) 10%, var(--color-surface));
      border: 1px solid color-mix(in oklch, var(--color-brand) 28%, var(--color-border));
      color: var(--color-brand-dark);
    }
    .dash-mode-tag.full {
      background: transparent;
      border: 1px solid var(--color-border);
      color: var(--color-text-secondary);
    }

    /* Empty state — teaches the next action instead of just saying "nothing here." */
    .dash-loans-empty {
      padding: 28px 20px; text-align: center;
      color: var(--color-text-secondary);
    }
    .dash-loans-empty a {
      color: var(--color-brand);
      cursor: pointer; text-decoration: underline;
    }
    .dash-loans-empty-cta {
      width: auto; padding: 0;
      background: transparent; border: 0;
      color: var(--color-brand);
      cursor: pointer; text-decoration: underline;
      font-size: inherit; font-family: inherit;
    }
    .dash-loans-empty-cta:hover { filter: brightness(0.9); }
    .dash-loans-empty-cta:focus-visible {
      outline: 2px solid var(--color-brand);
      outline-offset: 2px; border-radius: 2px;
    }
    .dash-loan-row:focus-visible {
      outline: 2px solid var(--color-brand);
      outline-offset: -2px;
    }

    /* Screen-reader-only label utility — used for the search input that
       previously had only a placeholder. */
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    /* Active jobs panel */
    .dash-section {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 6px;
      padding: 20px;
      margin-bottom: 20px;
    }
    .dash-section-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-bottom: 14px;
    }
    .dash-section-title {
      font-size: 12px; font-weight: 600;
      color: var(--color-muted);
      text-transform: uppercase; letter-spacing: 0.75px;
      margin: 0;
    }
    .dash-section-controls {
      display: flex; align-items: center; gap: 10px;
    }
    .dash-section-controls select,
    .dash-section-controls input[type="search"] {
      padding: 6px 10px;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      font-size: 13px;
      font-family: var(--font-sans);
      background: var(--color-surface);
    }
    .dash-section-controls input[type="search"] {
      min-width: 200px;
    }

    .dash-active-row {
      display: grid;
      grid-template-columns: 1fr 1fr 220px 100px;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--color-border);
      border-left: 3px solid var(--color-warning);
      border-radius: 4px;
      margin-bottom: 8px;
      background: #fefce8;
    }
    body.role-underwriter .dash-active-row,
    body.role-underwriter .dash-completed-row {
      grid-template-columns: 1fr 220px 100px;
    }
    /* Underwriters see only their own loans, so the submitter column is
       redundant noise — hide and collapse the grid so the layout doesn't
       leave an empty column behind. */
    body.role-underwriter .dash-row-submitter { display: none; }
    body.role-underwriter .dash-loan-row {
      grid-template-columns: minmax(220px, 2fr) auto auto;
    }
    .dash-row-ids {
      font-size: 13px; font-weight: 600;
      color: var(--color-text);
    }
    .dash-row-submitter {
      font-size: 12px; color: var(--color-text-secondary);
    }
    .dash-row-progress {
      display: flex; flex-direction: column; gap: 4px;
    }
    .dash-progress-bar-track {
      height: 6px; background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 3px; overflow: hidden;
    }
    .dash-progress-bar-fill {
      height: 100%;
      background: var(--color-warning);
      transition: width 0.3s ease;
    }
    .dash-progress-text {
      font-size: 11px; color: var(--color-text-secondary);
    }
    .dash-row-action {
      text-align: right;
    }
    .dash-action-btn {
      width: auto; padding: 6px 14px;
      font-size: 12px; letter-spacing: 0.5px;
      background: var(--color-surface);
      color: var(--color-brand);
      border: 1px solid var(--color-brand);
    }
    .dash-action-btn:hover {
      background: var(--color-brand);
      color: #ffffff;
    }
    .dash-action-btn.retry {
      color: var(--color-text);
      border-color: var(--color-border);
    }
    .dash-action-btn.retry:hover {
      background: var(--color-bg);
      color: var(--color-text);
      border-color: var(--color-text);
    }

    /* Completed rows */
    .dash-completed-row {
      display: grid;
      grid-template-columns: 1fr 1fr 200px 120px;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-bottom: 1px solid var(--color-border);
    }
    .dash-completed-row:last-child { border-bottom: none; }
    .dash-completed-row:hover { background: var(--color-bg); }
    .dash-decision-cell {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; color: var(--color-text-secondary);
    }
    .dash-decision-badge {
      display: inline-flex; align-items: center;
      padding: 3px 10px;
      border-radius: 3px;
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .dash-decision-badge.approve,
    .dash-decision-badge.yes {
      background: #d1fae5; color: var(--color-success);
    }
    .dash-decision-badge.refer,
    .dash-decision-badge.maybe {
      background: #fef3c7; color: var(--color-warning);
    }
    .dash-decision-badge.decline,
    .dash-decision-badge.no {
      background: #fee2e2; color: var(--color-danger);
    }
    .dash-decision-badge.failed {
      background: #f3f4f6; color: var(--color-muted);
    }

    .dash-empty {
      padding: 24px; text-align: center;
      color: var(--color-muted); font-size: 13px;
    }
    .dash-loading {
      padding: 24px; text-align: center;
      color: var(--color-text-secondary); font-size: 13px;
    }

    /* Toast for retry feedback */
    .dash-toast {
      position: fixed;
      bottom: 24px; left: 50%;
      transform: translateX(-50%);
      padding: 12px 20px;
      background: var(--color-text);
      color: #ffffff;
      border-radius: 4px;
      font-size: 13px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
    }
    .dash-toast.visible { opacity: 1; }
    .dash-toast.error { background: var(--color-danger); }

    @media (max-width: 768px) {
      .dash-active-row,
      .dash-completed-row,
      body.role-underwriter .dash-active-row,
      body.role-underwriter .dash-completed-row {
        grid-template-columns: 1fr;
      }
    }

    /* ===================================================================
       Admin console (/admin) — same shell-hiding pattern as dashboard-mode.
       =================================================================== */
    body.admin-mode #form-card,
    body.admin-mode #history-card,
    body.admin-mode #links-card,
    body.admin-mode #results-panel,
    body.admin-mode .layout > .sidebar > .card:last-child {
      display: none !important;
    }
    body.admin-mode .layout { display: block; grid-template-columns: 1fr; }
    body.admin-mode #admin-page { display: block !important; }

    /* ===================================================================
       Help / knowledge base (/help) — same shell-hiding pattern as admin-mode.
       =================================================================== */
    body.help-mode #form-card,
    body.help-mode #history-card,
    body.help-mode #links-card,
    body.help-mode #results-panel,
    body.help-mode .layout > .sidebar > .card:last-child {
      display: none !important;
    }
    body.help-mode .layout { display: block; grid-template-columns: 1fr; }
    body.help-mode #help-page { display: block !important; }

    /* Help nav entry (always visible to signed-in users). */
    .help-nav-link {
      font-size: 0.8em; font-weight: 600; letter-spacing: 0.3px;
      color: var(--color-brand); text-decoration: none;
      padding: 4px 10px; border-radius: 4px;
      border: 1px solid color-mix(in oklch, var(--color-brand) 30%, var(--color-border));
    }
    .help-nav-link:hover { background: color-mix(in oklch, var(--color-brand) 8%, transparent); }

    /* Help page content */
    #help-page { max-width: 860px; margin: 0 auto; }
    .help-header { margin: 8px 0 20px; }
    .help-header h1 { margin: 0 0 4px; }
    .help-sub { color: var(--color-text-secondary); margin: 0; }
    .help-video-wrap { border-radius: 8px; overflow: hidden; background: #000; }
    .help-video-wrap video { width: 100%; display: block; }
    .help-article p { color: var(--color-text); line-height: 1.55; }
    .help-article ul, .help-article ol { margin: 8px 0 0; padding-left: 20px; }
    .help-article li { color: var(--color-text); line-height: 1.55; margin: 4px 0; }
    .help-article code {
      font-size: 0.9em; padding: 1px 5px; border-radius: 4px;
      background: color-mix(in oklch, var(--color-brand) 8%, transparent);
    }
    .help-faq-list { display: flex; flex-direction: column; gap: 8px; }
    .help-faq-item { border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
    .help-faq-item > summary {
      cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none;
    }
    .help-faq-item > summary::-webkit-details-marker { display: none; }
    .help-faq-item[open] > summary { border-bottom: 1px solid var(--color-border); }
    .help-faq-answer { padding: 12px 16px; color: var(--color-text); line-height: 1.55; }

    /* Admin nav entry (super-admins only; toggled by toggleAdminNav). */
    .admin-nav-link {
      font-size: 0.8em; font-weight: 600; letter-spacing: 0.3px;
      color: var(--color-brand); text-decoration: none;
      padding: 4px 10px; border-radius: 4px;
      border: 1px solid color-mix(in oklch, var(--color-brand) 30%, var(--color-border));
    }
    .admin-nav-link:hover { background: color-mix(in oklch, var(--color-brand) 8%, transparent); }

    /* Not-authorized empty state. */
    .admin-denied {
      text-align: center; padding: 48px 24px;
      border: 1px dashed var(--color-border); border-radius: 8px;
      color: var(--color-text-secondary);
    }
    .admin-denied h2 { font-family: var(--font-serif); color: var(--color-text); margin: 0 0 8px; }
    .admin-denied-cta {
      display: inline-block; margin-top: 12px; padding: 10px 18px;
      background: var(--color-brand); color: #fff; border-radius: 4px;
      text-decoration: none; font-size: 13px; font-weight: 600; width: auto;
    }
    .admin-denied-cta:hover { background: var(--color-brand-dark); color: #fff; }

    /* Usage insight cards. */
    .admin-usage-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
    }
    .admin-usage-card {
      border: 1px solid var(--color-border); border-radius: 6px;
      padding: 14px 16px; background: var(--color-surface);
    }
    .admin-usage-org {
      font-size: 13px; font-weight: 600; color: var(--color-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .admin-usage-cost {
      font-family: var(--font-serif); font-size: 26px; font-weight: 700;
      color: var(--color-text); margin: 6px 0 4px; line-height: 1.1;
    }
    .admin-usage-meta {
      display: flex; flex-wrap: wrap; gap: 10px;
      font-size: 12px; color: var(--color-text-secondary);
    }
    .admin-usage-billable { margin-top: 6px; font-size: 11px; color: var(--color-muted); }

    /* Monthly report panel. */
    .admin-hint { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 12px; }
    .admin-report-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .admin-report-status { font-size: 12px; color: var(--color-text-secondary); }
    .admin-report-status.error { color: var(--color-danger); }

    /* Admin tables (reuse .data-table; add row controls). */
    .admin-table-wrap { overflow-x: auto; }
    .admin-table td { vertical-align: middle; }
    .admin-col-actions { text-align: right; white-space: nowrap; }
    .admin-org-name { font-weight: 600; color: var(--color-text); }
    .admin-org-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
    .admin-inline-select {
      padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px;
      font-size: 12px; font-family: var(--font-sans); background: var(--color-surface);
    }

    /* Tier / status pills — clickable, toggle the value on click. */
    .admin-pill {
      width: auto; padding: 4px 12px; border-radius: 999px;
      font-size: 11px; font-weight: 600; letter-spacing: 0.4px; cursor: pointer;
      border: 1px solid var(--color-border); background: var(--color-surface);
      color: var(--color-text-secondary);
    }
    .admin-pill:hover { border-color: var(--color-brand); }
    .admin-pill.tier-lite {
      background: color-mix(in oklch, var(--color-brand) 10%, var(--color-surface));
      border-color: color-mix(in oklch, var(--color-brand) 28%, var(--color-border));
      color: var(--color-brand-dark);
    }
    .admin-pill.status-active {
      background: color-mix(in oklch, var(--color-success) 12%, var(--color-surface));
      border-color: color-mix(in oklch, var(--color-success) 30%, var(--color-border));
      color: #065f46;
    }
    .admin-pill.status-suspended {
      background: color-mix(in oklch, var(--color-danger) 12%, var(--color-surface));
      border-color: color-mix(in oklch, var(--color-danger) 30%, var(--color-border));
      color: var(--color-danger);
    }

    /* Onboard / edit org modal — mirrors the new-review modal overlay. */
    body.admin-mode.show-admin-modal::before {
      content: ''; position: fixed; inset: 0;
      background: rgba(15, 23, 42, 0.55); z-index: 900;
    }
    #admin-org-modal { display: none; }
    body.admin-mode.show-admin-modal #admin-org-modal {
      display: block; position: fixed; top: 64px; left: 50%;
      transform: translateX(-50%);
      width: min(560px, calc(100vw - 32px));
      max-height: calc(100vh - 100px); overflow-y: auto;
      background: var(--color-surface); border: 1px solid var(--color-border);
      border-radius: 8px; padding: 24px; z-index: 901;
      box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    }
    .admin-checkbox {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 0.9em; font-weight: 400;
    }
    .admin-modal-error {
      margin-top: 10px; padding: 8px 12px;
      background: color-mix(in oklch, var(--color-danger) 8%, var(--color-surface));
      border: 1px solid color-mix(in oklch, var(--color-danger) 30%, var(--color-border));
      color: var(--color-danger); border-radius: 4px; font-size: 13px;
    }