/* Finco One — Clean-Energy Project Finance Dashboard
   Dark navy sidebar / institutional pilot palette
   Pure vanilla CSS + HTMX — no framework dependencies
*/

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS Variables ───────────────────────────────────────────────────────── */
:root {
  /* Sidebar (dark navy) */
  --sidebar-bg:       #0f1b2d;
  --sidebar-border:    #1e3a5f;
  --sidebar-section: #162338;
  --sidebar-hover:    #1d3352;
  --sidebar-active:   #1a56db;
  --sidebar-text:    #c8d6e8;
  --sidebar-muted:   #7a96b8;
  --sidebar-badge-bg: #1e3a5f;

  /* Content area (light) */
  --bg:          #f0f4f8;
  --surface:     #ffffff;
  --surface-2:   #f7f9fc;
  --border:      #dde4ed;
  --border-strong: #c4cedd;

  /* Accent colors — renewable / institutional */
  --primary:       #1a56db;
  --primary-hover: #1744b8;
  --primary-light: #eff6ff;
  --accent:        #059669;
  --accent-hover:  #047857;
  --accent-light:  #ecfdf5;
  --teal:          #0891b2;
  --teal-light:    #ecfeff;

  /* Status badges */
  --pass-bg:          #ecfdf5;
  --pass-text:        #065f46;
  --pass-border:      #a7f3d0;
  --warn-bg:          #fffbeb;
  --warn-text:        #92400e;
  --warn-border:      #fde68a;
  --blocked-bg:       #fef2f2;
  --blocked-text:     #991b1b;
  --blocked-border:   #fecaca;
  --convention-bg:    #eff6ff;
  --convention-text:  #1e3a8a;
  --convention-border:#bfdbfe;
  --missing-bg:       #faf5ff;
  --missing-text:     #6b21a8;
  --missing-border:   #e9d5ff;
  --notapproved-bg:   #fff7ed;
  --notapproved-text: #9a3412;
  --notapproved-border:#fed7aa;

  /* Text */
  --text:       #111827;
  --text-2:     #374151;
  --muted:      #6b7280;
  --muted-2:    #9ca3af;

  /* Layout */
  --header-h:   56px;
  --tabs-h:     48px;   /* top tabs ribbon height — update if content changes */
  --sidebar-w:   240px;
  --content-max: 1100px;
  --content-px:  16px;   /* UI-8B: reduced from 24px — give grid more horizontal room */
  --content-py:  16px;   /* UI-8B: reduced from 24px — tighter vertical rhythm */
  /* Canonical spacing scale — 4px base grid */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --radius:      8px;
  --radius-sm:   6px;
  --shadow:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
  --shadow-sidebar: 2px 0 8px rgba(0,0,0,0.15);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* ── Top Header ─────────────────────────────────────────────────────────── */
/* UI-8A: hidden — .fo-chrome (sticky, 164 px) replaces the fixed header.
   The markup is preserved in base.html; only visibility is removed here. */
.top-header {
  display: none;
}

.header-inner {
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--teal) 100%);
  color: white;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.brand-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.brand-sub {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.2;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.env-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  background: var(--warn-bg);
  color: var(--warn-text);
  border: 1px solid var(--warn-border);
}

.version-badge {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 500;
}

.logout-btn {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.logout-btn:hover { color: var(--blocked-text); border-color: var(--blocked-border); }

/* ── App Layout ──────────────────────────────────────────────────────────── */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);  /* col1=sidebar (240px), col2=workspace */
  /* UI-8A: padding-top removed — .fo-chrome is sticky in flow, no fixed header to clear */
  min-height: 100vh;
}

/* .top-tabs-bar spans full width (both columns) */
.app-layout > .top-tabs-bar {
  grid-column: 1 / -1;
  position: sticky;
  top: var(--header-h);
  z-index: 150;
  height: var(--tabs-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
}

/* .sidebar-input (hidden) stays in col1 (no change needed) */

/* .project-sidebar goes in col1 of the grid */
.app-layout > .project-sidebar {
  grid-column: 1;
}

/* .content goes in col2 (main workspace area) */
.app-layout > .content {
  grid-column: 2;
}

/* ── Sidebar Navigation (dark navy) ─────────────────────────────────────── */
.sidebar-nav {
  position: fixed;
  left: 0;
  top: var(--header-h);
  width: var(--sidebar-w);
  height: calc(100vh - var(--header-h));
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  z-index: 100;
}

.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 3px; }

.sidebar-nav-section {
  margin-bottom: 0.25rem;
}

.sidebar-nav-section-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 0.5rem 1rem 0.35rem;
  opacity: 0.7;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--sidebar-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  cursor: pointer;
  line-height: 1.3;
}

.sidebar-nav-link:hover {
  background: var(--sidebar-hover);
  color: #ffffff;
  border-left-color: var(--sidebar-border);
}

.sidebar-nav-link.active {
  background: var(--sidebar-hover);
  color: #ffffff;
  border-left-color: var(--primary);
}

.sidebar-nav-link .nav-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.sidebar-nav-link .nav-badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 100px;
  background: var(--sidebar-badge-bg);
  color: var(--sidebar-muted);
  border: 1px solid var(--sidebar-border);
}

.sidebar-nav-link .nav-badge.badge-blocked {
  background: var(--blocked-bg);
  color: var(--blocked-text);
  border-color: var(--blocked-border);
}

.sidebar-nav-link .nav-badge.badge-warn {
  background: var(--warn-bg);
  color: var(--warn-text);
  border-color: var(--warn-border);
}

.sidebar-nav-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 0.5rem 0;
}

/* ── Input Sidebar (left panel with form) ────────────────────────────────── */
.sidebar-input {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: fixed;
  top: var(--header-h);
  left: 0;
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
  z-index: 50;
}

.sidebar-input::-webkit-scrollbar { width: 4px; }
.sidebar-input::-webkit-scrollbar-track { background: transparent; }
.sidebar-input::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Phase 21: hide legacy sidebar-input on desktop — inputs tab is primary surface */
@media (min-width: 901px) {
  .sidebar-input { display: none !important; }
}

/* ── Main Content ────────────────────────────────────────────────────────── */
.content {
  flex: 1;
  min-width: 0;
  /* UI-8B: reduced padding and removed max-width cap so modelling grids
     can fill available horizontal space rather than being capped at 1100px. */
  padding: var(--content-py) var(--content-px);
}

/* ── Form Sections ───────────────────────────────────────────────────────── */
.form-section {
  margin-bottom: 1.25rem;
}

.form-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.65rem;
}

.field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
}

.field input,
.field select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  padding-right: 1.75rem;
  cursor: pointer;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

.field input::placeholder { color: var(--muted-2); }
.field-hint { font-size: 0.7rem; color: var(--muted); line-height: 1.4; }
.field-error { font-size: 0.7rem; color: var(--blocked-text); }

/* ── Form Actions ────────────────────────────────────────────────────────── */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  text-align: center;
  width: 100%;
  letter-spacing: 0.01em;
}

.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible,
.ps-mini-btn:focus-visible,
.editable-grid-input:focus-visible,
.ps-compare-label select:focus-visible,
.input-group-summary:focus-visible,
.sidebar-nav-link:focus-visible {
  outline: 3px solid rgba(26, 86, 219, 0.22);
  outline-offset: 2px;
}

.btn-primary   { background: var(--primary); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }

.btn-secondary { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--border); }

.btn-accent    { background: var(--accent); color: white; }
.btn-accent:hover:not(:disabled) { background: var(--accent-hover); }

.btn-outline   { background: var(--surface); color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover:not(:disabled) { background: var(--primary-light); }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  width: auto;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
}
.btn-ghost:hover { background: var(--bg); color: var(--text-2); }

.htmx-loading { opacity: 0.6; }
.htmx-indicator {
  display: none;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  padding: 0.25rem 0;
}
.htmx-request .htmx-indicator { display: block; }

/* ── Dashboard KPI Cards ─────────────────────────────────────────────────── */
.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.dashboard-title-group {}

.dashboard-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.dashboard-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.dashboard-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}

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

.kpi-label {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
  line-height: 1.3;
}

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

.kpi-value.positive { color: var(--accent); }
.kpi-value.warning  { color: var(--warn-text); }
.kpi-value.negative { color: var(--blocked-text); }
.kpi-value.info     { color: var(--primary); }

/* ── Governance Banner ───────────────────────────────────────────────────── */
.gov-banner {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: 1.25rem;
  align-items: flex-start;
  font-size: 0.82rem;
}

.gov-banner.gov-blocked {
  background: var(--blocked-bg);
  border-color: var(--blocked-border);
  color: var(--blocked-text);
}

.gov-banner.gov-warning {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}

.gov-banner.gov-info {
  background: var(--primary-light);
  border-color: var(--convention-border);
  color: var(--convention-text);
}

.gov-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.05rem; }

.gov-content { flex: 1; }

.gov-title {
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 0.2rem;
}

.gov-desc {
  font-size: 0.78rem;
  opacity: 0.85;
  line-height: 1.4;
}

/* ── Accessibility utility (C2-PR11) ────────────────────────────────────── */
/* Standard visually-hidden-but-screen-reader-readable utility class, used
   for explicit state announcements (e.g. "Runtime preview status: ...")
   alongside a plain-text visible label that doesn't repeat the same
   wording. Not a new design system — the conventional `.sr-only` pattern. */
.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;
}

/* ── Status Badges ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  border: 1px solid;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-pass    { background: var(--pass-bg);         color: var(--pass-text);         border-color: var(--pass-border); }
.badge-warn    { background: var(--warn-bg);          color: var(--warn-text);          border-color: var(--warn-border); }
.badge-blocked { background: var(--blocked-bg);       color: var(--blocked-text);       border-color: var(--blocked-border); }
.badge-convention { background: var(--convention-bg); color: var(--convention-text);   border-color: var(--convention-border); }
.badge-missing { background: var(--missing-bg);       color: var(--missing-text);       border-color: var(--missing-border); }
.badge-notapproved { background: var(--notapproved-bg); color: var(--notapproved-text); border-color: var(--notapproved-border); }
.badge-runtime { background: #f0f4ff; color: #1a56db; border-color: #bfdbfe; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.2rem 0.55rem; border-radius: 100px; border: 1px solid; text-transform: uppercase; white-space: nowrap; }

/* ── Phase 17 UI: Additional Status Badges ──────────────────────────────── */
/* Used in runtime/preview/saved/dirty state clarity per Phase 17 spec */
.badge-dirty               { background: var(--blocked-bg);   color: var(--blocked-text);   border-color: var(--blocked-border);   }
.badge-saved               { background: var(--accent-light); color: var(--accent-hover); border-color: var(--accent);             }
.badge-preview-only        { background: #fef3c7;            color: #92400e;            border-color: #fcd34d;             }
.badge-template-seeded     { background: var(--primary-light); color: var(--primary);     border-color: var(--primary);        }
.badge-user-created        { background: #f5f3ff;            color: #5b21b6;            border-color: #c4b5fd;             }
.badge-factory-template    { background: var(--surface-2);    color: var(--muted);       border-color: var(--border-strong);  }
.badge-runtime-binding-pending { background: var(--warn-bg);  color: var(--warn-text);   border-color: var(--warn-border);      }

/* ── Phase 17 UI: State Strip Extensions ──────────────────────────────── */
/* .workspace-state-strip already exists; add state-value variants */
.workspace-state-strip__value--dirty   { color: var(--blocked-text); }
.workspace-state-strip__value--saved   { color: var(--accent); }
.workspace-state-strip__value--preview { color: #92400e; }
.workspace-state-strip__value--runtime { color: var(--primary); }

/* ── Phase 17 UI: Runtime Disclosure ─────────────────────────────────── */
.runtime-disclosure {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--primary-light);
  border: 1px solid var(--convention-border);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  color: var(--convention-text);
  line-height: 1.4;
}
.runtime-disclosure__icon { font-size: 0.85rem; flex-shrink: 0; }
.runtime-disclosure__text { flex: 1; }
.runtime-disclosure__badge { flex-shrink: 0; }

/* ── Phase 17 UI: Dirty/Save/Run Action Hierarchy ─────────────────────── */
/* Primary: Run Model */
.action-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.action-bar--primary { justify-content: flex-start; }
.action-bar--secondary { justify-content: flex-start; }

/* Phase 17 button semantic variants — complement .btn-* */
.btn-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  letter-spacing: 0.01em;
}
.btn-primary-action:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary-action:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary-action:hover:not(:disabled) { background: var(--border); }
.btn-secondary-action:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-destructive-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: transparent;
  color: var(--blocked-text);
  border: 1px solid var(--blocked-border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-destructive-action:hover:not(:disabled) { background: var(--blocked-bg); }
.btn-destructive-action:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-neutral-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-neutral-action:hover:not(:disabled) { background: var(--bg); color: var(--text-2); }
.btn-neutral-action:disabled { opacity: 0.45; cursor: not-allowed; }

/* Disabled button clear presentation */
.btn:disabled,
button:disabled,
.ps-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Phase 17 UI: Dirty State Banner ─────────────────────────────────── */
.dirty-state-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  color: var(--warn-text);
}
.dirty-state-banner__icon { font-size: 0.9rem; flex-shrink: 0; }
.dirty-state-banner__text { flex: 1; font-weight: 500; }
.dirty-state-banner__action { flex-shrink: 0; }

/* ── Phase 17 UI: New Project Form Groups ─────────────────────────────── */
.np-form-group {
  margin-bottom: 1.25rem;
}
.np-form-group--metadata { border-left: 3px solid var(--primary); padding-left: 0.75rem; }
.np-form-group--location { border-left: 3px solid var(--teal);    padding-left: 0.75rem; }
.np-form-group--revenue  { border-left: 3px solid var(--accent);  padding-left: 0.75rem; }
.np-form-group--opex      { border-left: 3px solid #f59e0b;       padding-left: 0.75rem; }
.np-form-group--capex      { border-left: 3px solid #7c3aed;      padding-left: 0.75rem; }
.np-form-group--debt      { border-left: 3px solid #dc2626;       padding-left: 0.75rem; }

.np-form-group__title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.65rem;
}

.np-form-group__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

/* ── Phase 17 UI: Typography Scale ───────────────────────────────────── */
/* Modern system font stack (no external CDN) */
:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography hierarchy */
.text-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.text-section-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.text-card-heading {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.text-table-heading {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.text-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
}
.text-helper {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
}
.text-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.text-mono {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* ── Phase 17 UI: Table Number Alignment ──────────────────────────────── */
.num-table-cell {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.num-table-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: right;
}

/* Subtle zebra for tables */
.table-zebra tbody tr:nth-child(even) td { background: var(--surface-2); }
.table-hover tbody tr:hover td { background: var(--bg); }

/* ── Phase 17 UI: KPI Card Variants ────────────────────────────────────── */
.kpi-card--runtime {
  border-left: 3px solid var(--primary);
}
.kpi-card--preview {
  border-left: 3px solid #fcd34d;
  background: #fffbeb;
}
.kpi-card--saved {
  border-left: 3px solid var(--accent);
}
.kpi-card--dirty {
  border-left: 3px solid var(--blocked-text);
  background: var(--blocked-bg);
}

/* ── Phase 17 UI: Phase 17C Disclosure ───────────────────────────────── */
.phase17c-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  background: var(--primary-light);
  border: 1px solid var(--convention-border);
  border-radius: var(--radius-sm);
  margin-top: 0.85rem;
  font-size: 0.75rem;
  color: var(--convention-text);
  line-height: 1.5;
}
.phase17c-notice__icon { font-size: 0.95rem; flex-shrink: 0; margin-top: 0.05rem; }
.phase17c-notice__label { font-weight: 700; margin-bottom: 0.15rem; font-size: 0.75rem; }
.phase17c-notice__body { font-size: 0.73rem; opacity: 0.9; }

.method-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  border: 1px solid;
  text-transform: uppercase;
  white-space: nowrap;
}
.method-badge.method-pct {
  background: var(--primary-light, #eff6ff);
  color: var(--primary, #1a56db);
  border-color: var(--primary, #1a56db);
}
.method-badge.method-fixed {
  background: #fef3c7;
  color: #92400e;
  border-color: #f59e0b;
}
.method-note {
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--primary-light, #eff6ff);
  border-left: 3px solid var(--primary, #1a56db);
  font-size: 0.8rem;
  color: var(--text-2, #6b7280);
}
.method-note.method-fixed {
  background: #fef3c7;
  border-left-color: #f59e0b;
}
.metric-value.no-inflation {
  color: var(--primary, #1a56db);
  font-weight: 600;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.75rem;
}

.card-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.card-body {}

/* ── Input Group Accordion ─────────────────────────────────────────────── */
.input-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.input-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  transition: background 0.12s;
  user-select: none;
}

.input-group-summary:hover { background: var(--bg); }

.input-group-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.input-group-chevron {
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.2s;
}

.input-group[open] .input-group-chevron {
  transform: rotate(180deg);
}

.input-group-body {
  padding: 0.5rem 1rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* ── Audit Panel ─────────────────────────────────────────────────────────── */
.audit-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.audit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.audit-card-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.65rem;
}

.audit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}

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

.audit-item-label { color: var(--text-2); font-weight: 500; }

.audit-item-value {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text);
}

/* ── Downloads Grid ──────────────────────────────────────────────────────── */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.65rem;
}

.download-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.download-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.08);
}

.download-icon { font-size: 1.1rem; flex-shrink: 0; }

.download-info { flex: 1; min-width: 0; }

.download-name {
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.download-desc {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

/* ── Alert / Messages ───────────────────────────────────────────────────── */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  border-width: 1px;
  border-style: solid;
}

.alert-error   { background: var(--blocked-bg);       border-color: var(--blocked-border);       color: var(--blocked-text); }
.alert-warning { background: var(--warn-bg);          border-color: var(--warn-border);          color: var(--warn-text); }
.alert-info    { background: var(--primary-light);     border-color: var(--convention-border);    color: var(--convention-text); }

/* ── Comparison Table ────────────────────────────────────────────────────── */
.comp-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.comp-table thead th {
  text-align: center;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  position: sticky;
  top: 0;
}

.comp-table thead th:first-child { text-align: left; }
.comp-table tbody td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); text-align: center; }
.comp-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--text-2); background: var(--surface); }
.comp-table tbody tr:last-child td { border-bottom: none; }
.comp-table tbody tr:hover td { background: var(--bg); }
.comp-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.comp-best  { color: var(--accent); }
.comp-worst { color: var(--blocked-text); }

/* ── Charts ──────────────────────────────────────────────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}

.chart-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
}

.chart-canvas-wrap { position: relative; height: 180px; }

/* ── Empty State ─────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.empty-icon { font-size: 2.5rem; margin-bottom: 0.85rem; }
.empty-title { font-size: 1rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.4rem; }
.empty-desc  { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }

/* ── Tab Navigation (within content) ────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
}

.tab-nav-link {
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.tab-nav-link:hover { color: var(--text-2); }

.tab-nav-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── Status Banner ────────────────────────────────────────────────────────── */
.status-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--muted);
}

.status-item { display: flex; align-items: center; gap: 0.4rem; }

.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-dot--green  { background: var(--accent); }
.status-dot--yellow { background: var(--warn-text); }
.status-dot--red    { background: var(--blocked-text); }

.status-sep { color: var(--border-strong); }

/* ── Caveats Banner ──────────────────────────────────────────────────────── */
.caveats-banner {
  padding: 0.85rem 1rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--warn-text);
}

.caveats-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem; }
.caveats-label { font-weight: 700; font-size: 0.8rem; margin-bottom: 0.2rem; }
.caveats-text  { font-size: 0.78rem; opacity: 0.85; line-height: 1.4; }

/* ── Content Footer ──────────────────────────────────────────────────────── */
.content-footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.footer-sep { color: var(--border-strong); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --sidebar-w: 200px; }
  .audit-panel { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }

  .sidebar-nav { display: none; }
  .sidebar-input { display: none; }
  .project-sidebar { display: none; }
  .app-layout { padding-left: 0; padding-top: var(--header-h); }
  .top-tabs-bar { position: sticky; top: var(--header-h); z-index: 150; height: var(--tabs-h); }
  .content,
  .workspace-content { max-width: 100%; padding: var(--content-py) 1rem; }
  .charts-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .downloads-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .header-inner { padding: 0 1rem; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .downloads-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Phase 9.5 — Excel-like Project Workspace UI Shell
   New styles: project sidebar, top tabs bar, tab panels, sheet cards
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Top Tabs Bar (scrolls with content, aligns with main workspace) ─────── */
.top-tabs-bar {
  /* static — no sticky; scrolls with page so it aligns with content area */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
}

/* P2-FIX-8 PR2: The legacy 20-tab ribbon is now conditionally
   rendered server-side (only in audit/reviewer mode), so this
   CSS override is no longer needed. The ws-tab DOM is absent
   from normal-mode HTML entirely. */

.top-tabs-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
}
.top-tabs-inner::-webkit-scrollbar { display: none; }

.tab-ribbon {
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 0 1.5rem;
  min-width: max-content;
  height: 100%;
  align-items: center;
}

/* Excel-like tab buttons */
.ws-tab {
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
  font-family: inherit;
}

.ws-tab:hover {
  color: var(--text-2);
}

.ws-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--surface);
}

/* ── Project Sidebar (workspace left panel — sticky, below chrome) ───────── */
.project-sidebar {
  position: sticky;
  left: 0;
  top: var(--fo-sticky-base);     /* sits below stacked .fo-chrome (164 px) */
  width: var(--sidebar-w);
  height: calc(100vh - var(--fo-sticky-base));
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: var(--shadow-sidebar);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  z-index: 100;
  flex-shrink: 0;                 /* don't shrink when content is wide */
}

.project-sidebar::-webkit-scrollbar { width: 3px; }
.project-sidebar::-webkit-scrollbar-track { background: transparent; }
.project-sidebar::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 3px; }

/* Branding strip inside project sidebar */
.ps-brand {
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
}

.ps-brand-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.ps-brand-sub {
  font-size: 0.62rem;
  color: var(--sidebar-muted);
  margin-top: 0.1rem;
}

/* ── Project Selector ──────────────────────────────────────────────────── */
.project-selector {
  padding: 0.75rem 0.75rem 0.5rem;
  border-bottom: 1px solid var(--sidebar-border);
}

.ps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.ps-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  opacity: 0.7;
}

.ps-add-btn {
  width: 20px;
  height: 20px;
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-border);
  border-radius: 4px;
  color: var(--sidebar-muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.ps-add-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

.ps-list { display: flex; flex-direction: column; gap: 0.35rem; }

.ps-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  position: relative;
}

.ps-card:hover {
  background: var(--sidebar-hover);
  border-color: var(--sidebar-border);
}

.ps-card.active {
  background: var(--sidebar-hover);
  border-color: var(--primary);
}

.ps-card-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.ps-card-info { flex: 1; min-width: 0; }

.ps-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-card-meta {
  font-size: 0.65rem;
  color: var(--sidebar-muted);
  margin-top: 0.05rem;
}

.ps-card-status {
  font-size: 0.5rem;
  color: var(--sidebar-muted);
  flex-shrink: 0;
  width: 8px;
  text-align: center;
}

.ps-card-status--active {
  color: var(--primary);
}

/* ── Project Sidebar Sections ───────────────────────────────────────────── */
.ps-section {
  padding: 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
}

.ps-section-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

/* Action buttons */
.ps-actions { display: flex; flex-direction: column; gap: 0.3rem; }

.ps-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  color: var(--sidebar-text);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.ps-action-btn:hover { background: var(--sidebar-active); color: white; border-color: var(--primary); }
.ps-action-btn--primary { background: var(--primary); border-color: var(--primary); color: white; }
.ps-action-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

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

/* Scenario list */
.ps-scenario-list { display: flex; flex-direction: column; gap: 0.25rem; }

.ps-scenario-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  color: var(--sidebar-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s;
}
.ps-scenario-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.ps-scenario-item.active { color: var(--sidebar-text); }

.ps-scenario-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sidebar-border);
  flex-shrink: 0;
}
.ps-scenario-dot--active { background: var(--accent); }

/* Governance items */
.ps-gov-list { display: flex; flex-direction: column; gap: 0.4rem; }

.ps-gov-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.75rem;
}
.ps-gov-item--blocked .ps-gov-label { color: var(--blocked-text); }

.ps-gov-label { color: var(--sidebar-text); font-weight: 500; }

/* Downloads shortcuts */
.ps-downloads { display: flex; flex-direction: column; gap: 0.25rem; }

.ps-download-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  color: var(--sidebar-muted);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.ps-download-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.ps-download-item span { font-size: 0.9rem; }

/* ── Workspace Content Area ─────────────────────────────────────────────── */
.workspace-content {
  flex: 1;
  min-width: 0;
  padding: var(--content-py) var(--content-px);
  max-width: var(--content-max);
}

/* ── Tab Panels ─────────────────────────────────────────────────────────── */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.panel-header {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.panel-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

/* C2-PR21: Operating Preview Panel — wraps the five existing CAPEX/
   Revenue/OPEX/EBITDA/Operating-Cash-Flow preview indicators in one
   cohesive, visually-distinct container. Purely a grouping style; does
   not alter any existing .runtime-status-indicator/.badge-preview-only
   rule. See docs/C2_PR21_OPERATING_PREVIEW_PANEL.md. */
.operating-preview-panel {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
}

.operating-preview-panel__header {
  margin-bottom: 0.75rem;
}

.operating-preview-panel__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 0.2rem;
}

.operating-preview-panel__desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ── Sheet Card (white card) ────────────────────────────────────────────── */
.sheet-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
}

/* ── Placeholder Panel ──────────────────────────────────────────────────── */
.placeholder-panel {
  text-align: center;
  padding: 3rem 2rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  max-width: 560px;
}

.placeholder-icon { font-size: 2.5rem; margin-bottom: 0.85rem; }

.placeholder-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 0.4rem;
}

.placeholder-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.placeholder-note {
  font-size: 0.75rem;
  color: var(--teal);
  background: var(--teal-light);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  display: inline-block;
  font-weight: 500;
}

/* ─── Phase 9.5: Sheet Content Foundation ───────────────────────── */

/* Sheet banner with badge */
.sheet-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface-2, #f5f5f5);
  border-bottom: 1px solid var(--border, #e0e0e0);
  margin-bottom: 1rem;
}
.sheet-banner-tag {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-2);
}
.sheet-banner-badge {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Badge: template preview */
.badge-preview {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Sheet card */
.sheet-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.sheet-card .section-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

/* Assumption grid (key-value pairs) */
.assumption-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.assumption-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Sheet table */
.sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}
.sheet-table thead th {
  background: var(--surface-2, #374151);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.75rem;
  text-align: left;
  white-space: nowrap;
}
.sheet-table thead th.num-col,
.sheet-table tbody td.num-col {
  text-align: right;
}
.sheet-table tbody td {
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.sheet-table tbody tr:nth-child(even) td {
  background: var(--surface-2, #f9fafb);
}
.sheet-table .total-row td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  background: var(--surface-2, #f0f0f0) !important;
}

/* Numeric columns */
.num-col {
  font-variant-numeric: tabular-nums;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.8rem;
}

/* Metric label / value */
.metric-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 500;
}
.metric-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

/* Section divider */
.section-divider {
  height: 1px;
  background: var(--border);
  margin: 1.25rem 0;
}

/* Table note */
.table-note {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Subsection label (financial statements preview label) */
.subsection-label {
  font-size: 0.73rem;
  color: var(--text-2);
  font-style: italic;
  background: var(--surface-2, #fffbeb);
  border-left: 3px solid #fcd34d;
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.65rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Phase 12 sidebar persistence workspace */
.scenario-message {
  margin: 0.5rem 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 0.74rem;
  color: var(--text);
}

.ps-mini-empty {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.45;
  padding: 0.35rem 0 0.15rem;
}

.ps-saved-list,
.ps-export-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ps-saved-item,
.ps-export-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  background: var(--surface);
}

.ps-saved-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.45rem;
}

.ps-saved-stats {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.ps-stat-chip {
  font-size: 0.68rem;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
}

.ps-saved-title,
.ps-export-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.ps-saved-meta,
.ps-export-meta {
  font-size: 0.7rem;
  color: var(--muted);
}

.ps-saved-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.ps-mini-btn {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.7rem;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
}

.ps-mini-btn:hover {
  background: var(--bg);
}

.ps-history-list,
.ps-compare-governance {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ps-history-item {
  border-left: 2px solid var(--border);
  padding-left: 0.55rem;
}

.ps-history-title {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text);
}

.ps-history-meta {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
}

.ps-compare-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.45rem;
  align-items: end;
}

.ps-compare-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: var(--text-2);
}

.ps-compare-label select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.38rem 0.45rem;
  background: var(--surface);
  color: var(--text);
}

.ps-compare-results {
  margin-top: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem;
  background: var(--surface);
}

.ps-compare-heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.ps-compare-banner {
  margin-top: 0.45rem;
  margin-bottom: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.74rem;
  line-height: 1.45;
  padding: 0.6rem 0.7rem;
}

.ps-compare-banner--subtle {
  background: var(--surface);
}

.ps-compare-note {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0.35rem 0 0.6rem;
}

.ps-compare-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}

.ps-compare-context-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 0.65rem 0.7rem;
}

.ps-compare-context-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.ps-compare-context-meta {
  font-size: 0.71rem;
  color: var(--muted);
  line-height: 1.45;
}

.ps-compare-table {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  margin-bottom: 0.7rem;
}

.ps-compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text);
  padding: 0.26rem 0;
  border-bottom: 1px solid var(--border);
}

.ps-compare-row--head {
  font-weight: 700;
  color: var(--text-2);
}

.workspace-state-banner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border: 1px solid #d9b96c;
  background: #fff8e7;
  border-radius: 8px;
  padding: 0.8rem 0.95rem;
  margin-bottom: 0.85rem;
}

.workspace-state-banner.is-hidden {
  display: none;
}

.workspace-state-banner__main {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.workspace-state-banner__text {
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.45;
  max-width: 58rem;
}

.workspace-state-banner__meta {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workspace-state-meta-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.28rem 0.55rem;
  white-space: nowrap;
}

.workspace-state-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.workspace-state-strip__item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.75rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.workspace-state-strip__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.workspace-state-strip__value {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text);
  font-weight: 600;
}

.workspace-reviewer-note {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.76rem;
  line-height: 1.5;
  padding: 0.75rem 0.85rem;
  margin-bottom: 1rem;
}

.workspace-lifecycle-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.85rem;
  margin-bottom: 1rem;
}

.workspace-lifecycle-panel__header {
  margin-bottom: 0.75rem;
}

.workspace-lifecycle-panel__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.workspace-lifecycle-panel__desc {
  margin-top: 0.18rem;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.45;
}

.workspace-lifecycle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.65rem;
}

.workspace-lifecycle-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 0.75rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.workspace-lifecycle-card__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.workspace-lifecycle-card__value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.workspace-lifecycle-card__meta {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.45;
}

.export-lineage-panel,
.export-lineage-history {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.85rem;
  margin-bottom: 1rem;
}

.export-lineage-panel__header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.export-lineage-panel__title,
.export-lineage-history__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.export-lineage-panel__desc,
.export-lineage-history__desc,
.export-lineage-note,
.download-lineage-meta {
  margin-top: 0.18rem;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.45;
}

.export-lineage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.65rem;
}

.export-lineage-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 0.7rem 0.75rem;
}

.export-lineage-card__label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.export-lineage-card__value {
  margin-top: 0.18rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.export-lineage-card__meta {
  margin-top: 0.14rem;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}

.editable-grid-shell {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.85rem;
  margin-bottom: 1rem;
}

.editable-grid-shell__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.editable-grid-shell__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.editable-grid-shell__note {
  margin-top: 0.18rem;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.45;
}

.editable-grid-scroll {
  overflow-x: auto;
}

.editable-grid-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 34rem;
}

.editable-grid-table th,
.editable-grid-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text);
  vertical-align: middle;
}

.editable-grid-table th {
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: var(--surface-2);
}

.editable-grid-input {
  width: 100%;
  min-width: 7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.42rem 0.5rem;
  background: #fff;
  color: var(--text);
  font-size: 0.76rem;
}

.editable-grid-input:focus {
  outline: 2px solid rgba(32, 93, 176, 0.18);
  border-color: #205db0;
}

.reviewer-action-help {
  margin-top: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.75rem;
  line-height: 1.45;
  padding: 0.7rem 0.8rem;
}

.reviewer-action-help--subtle {
  margin-top: 0.45rem;
  background: var(--surface-2);
  color: var(--muted);
}

.downloads-grid--lineage {
  align-items: stretch;
}

.download-item--lineage,
.download-item {
  align-items: flex-start;
}

@media (max-width: 900px) {
  .workspace-state-banner,
  .workspace-state-banner__main {
    flex-direction: column;
    align-items: flex-start;
  }

  .workspace-state-banner__meta {
    justify-content: flex-start;
  }

  .workspace-state-strip {
    grid-template-columns: 1fr 1fr;
  }

  .ps-compare-context-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .workspace-state-strip {
    grid-template-columns: 1fr;
  }

  .editable-grid-shell {
    padding: 0.7rem;
  }

  .editable-grid-shell__header {
    flex-direction: column;
  }

  .reviewer-action-help {
    font-size: 0.73rem;
  }
}

/* Phase 20C: New Project main workspace panel */
.new-project-main-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 680px;
}

.new-project-main-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.new-project-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem 1.5rem;
}

.new-project-fields .field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.new-project-fields .field label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
}

.new-project-fields .field input,
.new-project-fields .field select {
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
}

.new-project-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* Compact export list */
.export-lineage-history--compact .ps-export-list {
  gap: 0.4rem;
}

.ps-export-list--compact .ps-export-item {
  padding: 0.4rem 0.6rem;
}

.ps-export-item--compact {
  padding: 0.35rem 0.5rem !important;
  font-size: 0.78rem;
}

.ps-export-item--compact .ps-export-title {
  font-size: 0.8rem;
}

.ps-export-item--compact .ps-export-meta {
  font-size: 0.72rem;
  color: var(--muted);
}

/* Compact saved items */
.ps-saved-item--compact {
  padding: 0.4rem 0 !important;
  border-bottom: 1px solid var(--border);
}

.ps-saved-item--compact:last-child {
  border-bottom: none;
}

.ps-saved-item--compact .ps-saved-title {
  font-size: 0.82rem;
}

.ps-saved-item--compact .ps-saved-stats {
  gap: 0.3rem;
  margin-top: 0.2rem;
}

/* Badge variants */
.badge-info {
  background: var(--primary);
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-muted {
  background: var(--border);
  color: var(--muted);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* ── Phase P1-B: Driver status badges ───────────────────────────────── */
/* Metadata-only: shown for fields that are saved/displayed
   but not currently used by the Generic runtime. */
.badge-metadata {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* DSCR sculpt driver: shown for fields that affect
   debt / equity / DSCR outputs under the current
   DSCR sculpting method, where project IRR may
   not change. */
.badge-dscr-sculpt {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Phase S2: badge for fields that are reporting /
   derived (e.g. gearing_pct). Visually distinct
   from both metadata-only (gray, "no effect")
   and DSCR sculpt driver (blue, "binds"). The
   reporting/derived badge uses a soft green
   palette to signal "non-binding output / input
   preserved for context". */
.badge-reporting {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Phase S3 review fix: badge for fields that are
   timing drivers (e.g. construction_months).
   Visually distinct from metadata-only (gray,
   "no effect"), DSCR sculpt driver (blue, "binds"),
   and reporting/derived (green, "indicative"). The
   timing driver badge uses a soft amber palette
   to signal "model-affecting via the timeline,
   not via the engine". Internal layout (border,
   padding, font-size) is shared with the other
   badge classes for visual consistency. */
.badge-timing {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 20D — Inputs Tab Primary Surface
   Excel-like structured rows: label | value | badge
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sheet wrapper ───────────────────────────────────────────────────── */
.inp-sheet-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0;
}

/* ── Section card ────────────────────────────────────────────────────── */
.inp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.inp-section-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

/* ── Field rows ───────────────────────────────────────────────────────── */
.inp-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.inp-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.inp-row:last-child {
  border-bottom: none;
}

.inp-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.inp-cell {
  min-width: 0;
}

.inp-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

/* ── UX-2C-2: read-only/calculated cells read as locked "formula"
   cells (Excel-style), distinct from the editable input-cell tint
   above -- a muted background instead of a plain text value. ──────── */
.inp-value-formula-cell {
  display: inline-block;
  background: var(--readonly-bg, #f3f4f6);
  color: var(--muted);
  font-weight: 500;
  font-style: italic;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
}

.inp-input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  /* UX-1B: subtle tint so editable cells read as "input" at a glance,
     without relying on a per-row "Saved" badge to convey editability. */
  background: var(--editable-bg, #f8fafc);
  color: var(--text);
  transition: border-color 0.15s, background-color 0.15s;
}
.inp-input:focus {
  outline: none;
  border-color: var(--primary, #1a56db);
  background: var(--surface-hover, #f9fafb);
}
.inp-input.changed {
  background: var(--warn-bg, #fef9ec);
  border-color: var(--warn-border, #f6c343);
}

/* Numeric input group: number field + static unit suffix side-by-side */
.inp-input-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}
.inp-input-group .inp-input--number {
  flex: 1;
  min-width: 0;
  /* Remove browser spinner arrows for a cleaner look */
  -moz-appearance: textfield;
}
.inp-input-group .inp-input--number::-webkit-outer-spin-button,
.inp-input-group .inp-input--number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.inp-unit {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2, #6b7280);
  white-space: nowrap;
  padding: 0 0.2rem;
  user-select: none;
}

.inp-badge {
  min-width: 24px;
  text-align: right;
}

/* ── UX-1B: compact top-of-sheet legend ─────────────────────────────── */
.inp-legend {
  font-size: 0.78rem;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
}

/* ── UX-1B: calculated/derived field — muted, read-only style ───────── */
.inp-value-calculated {
  color: var(--muted);
  font-weight: 500;
}

/* ── UX-1B: compact caveat icon (replaces loud per-row text badges
   like "DSCR sculpt driver" / "Timing driver" / "Indicative (derived)").
   Caveat text is available via the title attribute (tooltip). ──────── */
.inp-caveat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-2);
  font-size: 0.75rem;
  cursor: help;
}

/* ── Dirty indicator ─────────────────────────────────────────────────── */
.inp-dirty-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--warn-bg, #fef9ec);
  border: 1px solid var(--warn-border, #f6c343);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}

/* ── Read-only baseline banner ────────────────────────────────────────── */
.inp-readonly-shell {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.inp-readonly-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--text-2);
}

.inp-readonly-banner .badge {
  flex-shrink: 0;
}

.inp-readonly-banner strong {
  color: var(--text);
}

/* ── Section note (CAPEX/OPEX detail placeholders) ───────────────────── */
.inp-section-note {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border);
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Sheet banner override for Inputs ────────────────────────────────── */
.sheet-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0 0.5rem;
}
.sheet-banner-tag {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.sheet-banner-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 20H — FINCO CELL DESIGN SYSTEM (fc-*)
   Unified cell semantics for Inputs / Scenarios / Compare tabs.
   Replaces inline <style> blocks in scenario_tab.html, runtime_summary.html.
   Provides Excel-like workbook grammar without Tailwind/Alpine/React.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 20H.1: CSS Variable Extensions ─────────────────────────────────── */
/* These supplement the Phase 17 variables; some were referenced inline
   in scenario_tab.html but never declared — fix now. */
:root {
  /* Accent alias (inline styles referenced --color-accent) */
  --color-accent: var(--accent, #059669);

  /* Border subtlety scale */
  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-muted:   rgba(0, 0, 0, 0.04);

  /* Cell padding canonical */
  --cell-pad-v:  0.4rem;   /* vertical cell padding */
  --cell-pad-h:  0.6rem;   /* horizontal cell padding */

  /* Cell height (for input cells) */
  --cell-h:      2rem;      /* ~32px */

  /* Font sizes */
  --font-cell:   0.82rem;   /* cell value text */
  --font-label:  0.78rem;   /* row label text */
  --font-badge:  0.68rem;   /* badge text */

  /* Color tints for cell variants (accent-based, Excel-like) */
  --cell-inherited-bg:  color-mix(in srgb, var(--color-accent)  4%, var(--surface));
  --cell-override-bg:    color-mix(in srgb, var(--color-accent) 15%, var(--surface));
  --cell-base-bg:        color-mix(in srgb, var(--color-accent)  8%, var(--surface));
  --cell-runtime-bg:     color-mix(in srgb, var(--primary)       8%, var(--surface));
  --cell-factory-bg:     var(--surface-2);
  --cell-warning-bg:     var(--warn-bg, #fffbeb);
  --cell-error-bg:       var(--blocked-bg, #fef2f2);
  --cell-dirty-bg:       #fef9ec;
}

/* ── 20H.2: Cell Base (.fc-cell) ────────────────────────────────────── */
.fc-cell {
  /* Base wrapper — pad, font, color, alignment */
  padding: var(--cell-pad-v) var(--cell-pad-h);
  font-size: var(--font-cell);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.12s, border-color 0.12s;
}

/* ── 20H.3: Cell Variants ────────────────────────────────────────────── */

/* A. Editable input cell — white bg, visible border, hover/focus */
.fc-cell-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: text;
  font-size: var(--font-cell);
  font-weight: 600;
  color: var(--text);
  padding: 0.3rem 0.5rem;
  width: 100%;
  min-height: var(--cell-h);
  box-sizing: border-box;
  transition: border-color 0.15s, background-color 0.15s;
}
.fc-cell-input:hover {
  border-color: var(--border-strong);
  background: #f9fafb;
}
.fc-cell-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}
.fc-cell-input::placeholder {
  color: var(--muted-2);
}
/* Dirty/changed state */
.fc-cell-input.fc-cell--changed,
.fc-cell-input.changed {
  background: var(--cell-dirty-bg);
  border-color: #f6c343;
}

/* B. Calculated/runtime cell — muted gray bg, readonly */
.fc-cell-runtime {
  background: var(--cell-runtime-bg);
  color: var(--text-2);
  font-style: italic;
  cursor: default;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
}

/* C. Factory/baseline value — muted text */
.fc-cell-factory {
  background: var(--cell-factory-bg);
  color: var(--muted);
  font-style: italic;
}

/* D. Inherited scenario value — light accent tint */
.fc-cell-inherited {
  background: var(--cell-inherited-bg);
  color: var(--text-2);
}

/* E. Override cell — highlighted, stronger than inherited */
.fc-cell-override {
  background: var(--cell-override-bg);
  color: var(--text);
  font-weight: 600;
  position: relative;
}

/* F. Readonly cell — no border, no edit affordance */
.fc-cell-readonly {
  background: transparent;
  color: var(--text);
  cursor: default;
}

/* G. Dirty cell — unsaved indicator */
.fc-cell-dirty {
  background: var(--cell-dirty-bg);
  border: 1px dashed #f6c343;
  position: relative;
}

/* H. Warning/error cell */
.fc-cell-warning {
  background: var(--cell-warning-bg);
  color: var(--warn-text);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
}
.fc-cell-error {
  background: var(--cell-error-bg);
  color: var(--blocked-text);
  border: 1px solid var(--blocked-border);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
}

/* I. Empty/null value */
.fc-cell-empty {
  color: var(--muted-2);
  font-style: italic;
}

/* ── 20H.4: Badges (State Indicators) ────────────────────────────────── */
/* Unified badge system for runtime/scenario state */
.fc-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-badge);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.5rem;
  border-radius: 100px;
  border: 1px solid;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.fc-badge--active       { background: var(--accent-light); color: var(--accent-hover); border-color: var(--accent); }
.fc-badge--inherited    { background: var(--cell-inherited-bg); color: var(--text-2); border-color: var(--border-strong); }
.fc-badge--override     { background: var(--cell-override-bg); color: var(--accent-hover); border-color: var(--accent); }
.fc-badge--runtime      { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.fc-badge--dirty        { background: var(--cell-dirty-bg); color: var(--warn-text); border-color: #f6c343; }
.fc-badge--blocked      { background: var(--blocked-bg); color: var(--blocked-text); border-color: var(--blocked-border); }
.fc-badge--notapproved  { background: var(--notapproved-bg); color: var(--notapproved-text); border-color: var(--notapproved-border); }
.fc-badge--factory      { background: var(--surface-2); color: var(--muted); border-color: var(--border-strong); }
.fc-badge--base         { background: var(--cell-base-bg); color: var(--text-2); border-color: var(--border-strong); }

/* ── 20H.5: Total / Subtotal Rows ────────────────────────────────────── */
.fc-total-row {
  font-weight: 700;
  border-top: 2px solid var(--border-strong);
  background: var(--surface-2);
}
.fc-total-row .fc-cell {
  font-weight: 700;
  color: var(--text);
}

.fc-subtotal-row {
  font-weight: 600;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.02);
}
.fc-subtotal-row .fc-cell {
  font-weight: 600;
}

/* ── 20H.6: Section Bands / Headers ──────────────────────────────────── */
/* Reusable section pattern: uppercase label, band fill, optional border */
.fc-section-band {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.fc-section-header {
  padding: var(--cell-pad-v) var(--cell-pad-h);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface-2);
}
.fc-section-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  padding: 0.4rem 0.75rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

/* Sheet section card (used in Inputs) */
.fc-sheet-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.fc-sheet-section-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

/* ── 20H.7: Grid System ──────────────────────────────────────────────── */
/* Reusable grid wrappers for Inputs, Scenario matrix, Compare tables */

/* Base grid wrapper with horizontal scroll */
.fc-grid-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* Base grid table */
.fc-grid {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px;
  table-layout: fixed;
}

/* Sticky first column (label column) */
.fc-grid-col-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  min-width: 160px;
  width: 180px;
}

/* Sticky header row */
.fc-grid-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface-2);
}

/* Header cell */
.fc-th {
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}

/* Data row */
.fc-row {
  border-bottom: 1px solid var(--border-muted);
  transition: background-color 0.12s;
}
.fc-row:hover {
  background: var(--bg);
}
.fc-row:last-child {
  border-bottom: none;
}

/* Label cell */
.fc-td-label {
  font-size: var(--font-label);
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border-right: 1px solid var(--border-muted);
  position: sticky;
  left: 0;
  z-index: 2;
}

/* Column header inner layout */
.fc-col-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.fc-col-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.fc-col-meta {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

/* Base case column tinting */
.fc-col--base {
  background: var(--cell-base-bg) !important;
}

/* Active scenario column tinting */
.fc-col--active {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--surface)) !important;
}

/* ── 20H.8: Numeric Formatting ───────────────────────────────────────── */
/* Standard numeric cell formatting */
.fc-num {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: var(--font-cell);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.fc-num--right  { text-align: right; }
.fc-num--center { text-align: center; }
.fc-num--left   { text-align: left; }

/* Negative values — red */
.fc-num--negative {
  color: var(--blocked-text);
}

/* Empty/null — muted dash */
.fc-num--empty {
  color: var(--muted-2);
  font-style: italic;
}

/* Positive delta — green */
.fc-delta--positive { color: var(--accent-hover); font-weight: 600; }
/* Negative delta — red */
.fc-delta--negative { color: var(--blocked-text); font-weight: 600; }
/* Neutral delta */
.fc-delta--neutral   { color: var(--muted); }

/* ── 20H.9: Compare Tab Cells ─────────────────────────────────────────── */
.fc-compare-base {
  background: var(--cell-base-bg);
  color: var(--text-2);
  font-style: italic;
}
.fc-compare-active {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--surface));
  color: var(--text);
  font-weight: 600;
}
.fc-compare-delta {
  font-weight: 600;
  text-align: right;
}

/* ── 20H.10: Dirty Indicator (unsaved state) ──────────────────────────── */
.fc-dirty-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--cell-dirty-bg);
  border: 1px solid #f6c343;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ── 20H.11: Editable Cell Interaction ───────────────────────────────── */
/* Hover affordance for editable cells (inline edit trigger) */
.fc-editable {
  cursor: pointer;
}
.fc-editable:hover {
  outline: 1px dashed var(--color-accent);
  outline-offset: -1px;
  border-radius: 4px;
}

/* Scenario select button */
.fc-select-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.7rem;
  color: var(--text-2);
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  transition: all 0.15s;
}
.fc-select-btn:hover {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

/* ── 20H.12: Inputs Sheet Compatibility ───────────────────────────────── */
/* Keep inp-* classes working but layer fc-* on top */
.inp-input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  /* UX-1B: subtle tint so editable cells read as "input" at a glance. */
  background: var(--editable-bg, #f8fafc);
  color: var(--text);
  transition: border-color 0.15s, background-color 0.15s;
}
.inp-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}
.inp-input.changed {
  background: var(--cell-dirty-bg);
  border-color: #f6c343;
}
.inp-input-group .inp-input--number {
  -moz-appearance: textfield;
}
.inp-input-group .inp-input--number::-webkit-outer-spin-button,
.inp-input-group .inp-input--number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Inputs sheet grid row */
.inp-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--border-muted);
}
.inp-row:last-child {
  border-bottom: none;
}

/* Inputs cell */
.inp-cell {
  min-width: 0;
}

/* Inputs label */
.inp-label {
  font-size: var(--font-label);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

/* Inputs value */
.inp-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

/* Override badge inline */
.fc-override-badge {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.7rem;
  color: var(--color-accent);
  cursor: default;
}

/* ── 20H.13: KPI Grid (runtime summary) ───────────────────────────────── */
.fc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.fc-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-sm);
}
.fc-kpi-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.fc-kpi-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fc-kpi-value--missing {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
}
.fc-kpi-card--runtime {
  border-left: 3px solid var(--primary);
}
.fc-kpi-card--preview {
  border-left: 3px solid #fcd34d;
  background: #fffbeb;
}
.fc-kpi-card--saved {
  border-left: 3px solid var(--accent);
}
.fc-kpi-card--dirty {
  border-left: 3px solid var(--blocked-text);
  background: var(--blocked-bg);
}

/* ── 20H.14: Run Banner (runtime summary) ─────────────────────────────── */
.fc-run-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.fc-run-banner-left {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.fc-run-banner-right {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.fc-run-banner-label {
  color: var(--text-2);
  font-weight: 500;
}
.fc-run-banner-project {
  font-weight: 700;
  color: var(--accent);
}
.fc-run-banner-icon {
  font-size: 1rem;
}
.fc-run-banner-time {
  color: var(--text-2);
  font-size: 0.78rem;
}

/* ── 20H.15: Compare Table ────────────────────────────────────────────── */
.fc-compare-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.fc-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 100px;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border-muted);
  font-size: var(--font-cell);
}
.fc-compare-row:last-child {
  border-bottom: none;
}
.fc-compare-row--head {
  background: var(--surface-2);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.fc-compare-row--base {
  background: var(--cell-base-bg);
}
.fc-compare-row--active {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--surface));
}

/* Provenance cards */
.fc-provenance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.fc-provenance-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.fc-provenance-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.75rem;
  font-size: 0.78rem;
}
.fc-provenance-grid-label {
  color: var(--muted);
}
.fc-provenance-grid-value {
  color: var(--text);
  font-weight: 500;
}

/* Compare heading */
.fc-compare-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* Compare provenance card (used in compare tab) */
.ps-compare-provenance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 20H LEGACY ALIASES (sc-* → fc-* mapping)
   These allow incremental migration from sc-* to fc-* class names.
   Remove these once all sc-* references are updated to fc-*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Scenario matrix aliases */
.sc-container    { padding: 1rem 1.25rem; font-size: 0.82rem; }
.sc-header       { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.75rem; }
.sc-header-title { font-size: 1rem; font-weight: 600; color: var(--text); }
.sc-header-subtitle { font-size: 0.78rem; color: var(--text-2); }

.sc-add-form {
  display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem;
  padding: 0.6rem 0.75rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; max-width: 520px;
}
.sc-add-input  { flex: 1; font-size: 0.82rem; padding: 0.3rem 0.5rem; min-width: 0; }

.sc-matrix-wrapper { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }
.sc-matrix {
  border-collapse: collapse; width: 100%; min-width: 600px;
  table-layout: fixed;
}

.sc-th {
  padding: 0.5rem 0.6rem; text-align: left; font-size: 0.78rem;
  border-bottom: 2px solid var(--border); background: var(--surface-2);
  position: sticky; top: 0; z-index: 3; white-space: nowrap; overflow: hidden;
}
.sc-th--label { /* inherits sc-th */ }
.sc-th--base  { background: var(--cell-base-bg); }
.sc-th--active { background: color-mix(in srgb, var(--color-accent) 12%, var(--surface)); }

.sc-matrix th.sc-th--label,
.sc-matrix td.sc-td--label {
  width: 180px; min-width: 160px; position: sticky; left: 0; z-index: 2; background: var(--surface);
}

.sc-col-header { display: flex; flex-direction: column; gap: 0.2rem; }
.sc-col-name   { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.sc-col-meta   { display: flex; gap: 0.3rem; align-items: center; }

.sc-section-header td {
  padding: 0.4rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-2);
  border-bottom: 1px solid var(--border); position: sticky; left: 0; z-index: 1;
}

.sc-row {
  border-bottom: 1px solid var(--border-subtle);
}
.sc-row:hover    { background: var(--surface-2); }
.sc-row:last-child { border-bottom: none; }

.sc-td {
  padding: 0.4rem 0.6rem; vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-td--label {
  font-weight: 500; color: var(--text); background: var(--surface);
  border-right: 1px solid var(--border-subtle); position: sticky; left: 0; z-index: 2;
}
.sc-td--base { background: var(--cell-base-bg); }

.sc-value { font-size: 0.82rem; color: var(--text); }
.sc-value--base { color: var(--text-2); font-style: italic; }

/* Cell type colours — map to fc-cell-* */
.sc-matrix-cell--inherited { background: var(--cell-inherited-bg); color: var(--text-2); }
.sc-matrix-cell--override   { background: var(--cell-override-bg); color: var(--text); font-weight: 600; }
.sc-matrix-cell--base       { background: var(--cell-base-bg); color: var(--text-2); }

/* Aliases for inline sc-* styles */
.sc-override-badge { display: inline-block; margin-left: 0.3rem; font-size: 0.7rem; color: var(--color-accent); cursor: default; }
.sc-editable-td   { cursor: pointer; }
.sc-editable-td:hover { outline: 1px dashed var(--color-accent); outline-offset: -1px; }

.sc-select-btn {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  font-size: 0.7rem; color: var(--text-2); cursor: pointer;
  padding: 0.1rem 0.35rem; transition: all 0.15s;
}
.sc-select-btn:hover { background: var(--color-accent); color: white; border-color: var(--color-accent); }

/* Inline edit popover */
.sc-popover {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 1000;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); min-width: 240px; max-width: 320px;
}
.sc-popover-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 0.85rem;
}
.sc-popover-close {
  background: none; border: none; cursor: pointer; color: var(--text-2);
  font-size: 0.9rem; padding: 0;
}
.sc-popover-body   { padding: 0.75rem; }
.sc-popover-input  { width: 100%; font-size: 0.9rem; padding: 0.4rem 0.6rem; }
.sc-popover-footer {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-top: 1px solid var(--border);
}

/* PR-856: Scenario Excel Matrix — section banners and sub-labels */
.sc-section-banner {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  border-left: 3px solid var(--border); margin-bottom: 0.75rem;
  background: var(--surface-2); border-radius: 0 4px 4px 0;
}
.sc-section-banner--inputs  { border-left-color: var(--color-accent); }
.sc-section-banner--outputs { border-left-color: var(--color-pass); }
.sc-section-banner-label {
  font-weight: 700; font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text);
}
.sc-section-banner-note { font-size: 0.78rem; color: var(--text-2); }

.sc-col-sub { font-size: 0.7rem; color: var(--text-2); font-weight: 400; white-space: nowrap; }

/* KPI summary table (scenario outputs) */
.sc-kpi-th { padding: 0.5rem 0.6rem; text-align: left; font-size: 0.78rem;
  border-bottom: 2px solid var(--border); background: var(--surface-2);
  vertical-align: top;
}
.sc-kpi-th--label { width: 160px; min-width: 140px; }
.sc-kpi-th--base  { background: var(--cell-base-bg); }
.sc-kpi-col-name  { font-weight: 600; color: var(--text); }
.sc-kpi-col-sub   { font-size: 0.7rem; color: var(--text-2); font-weight: 400; margin-top: 0.15rem; }
.sc-kpi-unit      { font-size: 0.7rem; color: var(--text-2); margin-left: 0.3rem; }
.sc-kpi-td        { padding: 0.35rem 0.6rem; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.sc-kpi-td--base  { background: var(--cell-base-bg); font-weight: 600; color: var(--text); }
.sc-kpi-td--empty { color: var(--text-2); font-style: italic; }

/* ps-compare aliases (compare tab) */
.ps-compare-heading {
  font-size: 1rem; font-weight: 700; color: var(--text);
  margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.ps-compare-banner {
  padding: 0.65rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.78rem;
  background: var(--primary-light, #eff6ff); border: 1px solid var(--border);
  color: var(--text-2); margin-bottom: 0.75rem;
}
.ps-compare-banner--subtle { background: var(--surface-2); }
.ps-compare-note { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.5rem; }
.ps-compare-context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.ps-compare-context-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.ps-compare-context-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 0.5rem; }
.ps-compare-context-meta { font-size: 0.75rem; color: var(--text-2); margin-bottom: 0.25rem; }
.ps-compare-table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 1rem; }
.ps-compare-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr 80px;
  padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--border-muted); font-size: 0.82rem;
}
.ps-compare-row:last-child { border-bottom: none; }
.ps-compare-row--head {
  background: var(--surface-2); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.ps-compare-governance { display: flex; flex-direction: column; gap: 0.4rem; }
.ps-compare-label {
  font-size: 0.75rem; color: var(--text-2); margin-bottom: 0.25rem;
}
.ps-compare-label select {
  font-size: 0.78rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border);
  border-radius: 4px; background: var(--surface); color: var(--text);
}
.ps-compare-form { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.ps-compare-results { padding: 0.5rem 0; }
.ps-mini-empty { padding: 1.5rem; text-align: center; color: var(--muted); font-size: 0.82rem; }
.ps-history-item { padding: 0.5rem 0; border-bottom: 1px solid var(--border-muted); }
.ps-history-title { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.ps-history-meta { font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; }
.ps-export-list { display: flex; flex-direction: column; gap: 0.25rem; }
.ps-export-item { padding: 0.35rem 0.5rem; font-size: 0.75rem; }
.ps-export-title { font-weight: 600; color: var(--text); }
.ps-export-meta { color: var(--muted); font-size: 0.72rem; }
.ps-export-list--compact .ps-export-item { padding: 0.25rem 0.35rem; }
.ps-export-item--compact .ps-export-title { font-size: 0.78rem; }
.ps-export-item--compact .ps-export-meta { font-size: 0.7rem; }

/* ── Runtime Summary Legacy Aliases (.run-*) ────────────────────────── */
/* Used in runtime_summary.html — these map to fc-* design system */
.runtime-summary { padding: 0.5rem 0; }

.run-banner {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.6rem 1rem; margin-bottom: 1rem; font-size: 0.85rem;
}
.run-banner-left  { display: flex; gap: 0.5rem; align-items: center; }
.run-banner-right { display: flex; gap: 0.75rem; align-items: center; }
.run-banner-label { color: var(--text-2); font-weight: 500; }
.run-banner-project { font-weight: 700; color: var(--accent); }
.run-banner-icon { font-size: 1rem; }
.run-banner-time { color: var(--text-2); font-size: 0.78rem; }

.badge-runtime {
  background: #dbeafe; color: #1d4ed8; font-size: 0.72rem;
  padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 600;
}

.runtime-notice {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem;
  padding: 0.4rem 0.75rem; background: #f8fafc; border: 1px solid var(--border);
  border-radius: 4px; font-size: 0.75rem; color: var(--text-2);
}
.runtime-notice-text { color: var(--text-2); }

.kpi-missing { color: var(--muted) !important; font-style: italic; }

.run-messages { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.run-message {
  font-size: 0.78rem; padding: 0.35rem 0.6rem; background: #fefce8;
  border-left: 3px solid #eab308; border-radius: 3px; color: #854d0e;
}

.run-error {
  margin-top: 0.75rem; padding: 0.5rem 0.75rem; background: #fef2f2;
  border: 1px solid #fca5a5; border-radius: 4px; color: #991b1b; font-size: 0.82rem;
}

/* kpi-grid alias (runtime summary) */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem; margin-bottom: 0.75rem;
}
.kpi-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.85rem 1rem; box-shadow: var(--shadow-sm);
}
.kpi-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.35rem;
}
.kpi-value {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi-value.positive { color: var(--accent); }

/* Runtime notice alias (runtime summary) */
.runtime-notice {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem;
  padding: 0.4rem 0.75rem; background: #f8fafc; border: 1px solid var(--border);
  border-radius: 4px; font-size: 0.75rem; color: var(--text-2);
}
.runtime-notice-text { color: var(--text-2); }

/* ════════════════════════════════════════════════════════════════════════
   Phase 20I — CAPEX Detail Grid Extensions
   Workbook-style line-item grid with fc-* design system
   ════════════════════════════════════════════════════════════════════════ */

/* Section band tweaks for CAPEX grid */
.fc-section-band {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.fc-section-band__label {
  padding: 0.4rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
}

/* Column widths for CAPEX grid (wider label, narrow code, wide amount) */
.fc-grid-col-label {
  width: 220px;
  min-width: 220px;
}
.fc-cell--code {
  font-size: 0.72rem;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-align: left;
  width: 110px;
  min-width: 110px;
}
.fc-cell--amount {
  text-align: right;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  width: 130px;
  min-width: 130px;
}
.fc-th--code {
  width: 110px;
  min-width: 110px;
  text-align: left;
}
.fc-th--amount {
  text-align: right;
}

/* Subtotal and total rows */
.fc-subtotal-row {
  background: var(--surface-2);
}
.fc-total-cell {
  text-align: right;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.fc-total-value {
  font-variant-numeric: tabular-nums;
}
.fc-hard-capex-total {
  background: color-mix(in srgb, var(--color-accent) 6%, var(--surface-2));
  border-top: 2px solid var(--border);
}
.fc-hard-capex-total td {
  font-weight: 700;
}
.fc-grand-total {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--surface-2));
  border-top: 2px solid var(--accent);
}
.fc-grand-total__label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.fc-grand-total__value {
  font-weight: 800;
  font-size: 1rem;
}

/* Delta warning row */
.fc-delta-row {
  border-top: 1px dashed var(--border);
}
.fc-delta-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}
.fc-delta-warning {
  font-size: 0.72rem;
  color: var(--warning-text);
  font-weight: 500;
}

/* Native number inputs inside cells (not .fc-cell-input which is bare styled) */
.fc-input-native {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.3rem 0.4rem;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}
.fc-input-native:hover {
  border-color: var(--color-accent);
}
.fc-input-native:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.fc-input-native:read-only,
.fc-input-native:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* CAPEX grid wrapper override (slightly different from default fc-grid-wrapper) */
.fc-capex-grid-wrapper {
  margin-bottom: 1rem;
}

/* Readonly notice tweak for CAPEX */
.inp-readonly-notice--capex {
  margin-bottom: 0.75rem;
}

/* Dirty indicator (shared with inputs) */
.inp-dirty-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Phase 20J — OPEX Detail Grid Extensions
   Workbook-style line-item grid with fc-* design system
   ════════════════════════════════════════════════════════════════════════ */

/* OPEX grid wrapper override */
.fc-opex-grid-wrapper {
  margin-bottom: 1rem;
}

/* Numeric column (start year, end year) */
.fc-cell--num {
  text-align: center;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  width: 60px;
  min-width: 60px;
}

/* Notes column */
.fc-cell--notes {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  max-width: 160px;
}

/* Subtotal label cell */
.fc-subtotal-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* OPEX grid column widths (sticky first two) */
.fc-opex-grid-wrapper .fc-grid {
  table-layout: fixed;
}

/* Notes column max-width within grid */
.fc-opex-grid-wrapper .fc-cell--notes {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Readonly notice override for OPEX */
.inp-readonly-notice--opex {
  margin-bottom: 0.75rem;
}

/* OPEX dirty indicator (reuse inp-dirty-indicator) */
#opex-dirty-indicator {
  margin-bottom: 0.5rem;
}

/* OPEX sheet: extra padding for the grid container */
.fc-opex-grid-wrapper .fc-grid-wrapper {
  overflow-x: auto;
}

/* OPEX table note */
.table-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--muted);
}
.table-note__text {
  color: var(--text-2);
}

/* Delta warning icon */
.delta-warning-icon {
  margin-right: 0.3rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 20K — Revenue Detail Grid Foundation
   Workbook-style revenue assumptions grid
   ═══════════════════════════════════════════════════════════════════ */

/* Revenue grid sticky positioning — mirrors CAPEX/OPEX grid */
.fc-revenue-grid-wrapper {
  overflow-x: auto;
  overflow-y: visible;
}

/* Dirty indicator for revenue edits */
.inp-dirty-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: var(--badge-preview-bg, #fff8e1);
  border: 1px solid var(--warning, #f59e0b);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--warning-text, #92400e);
  margin-bottom: 0.6rem;
}

.inp-dirty-indicator .dirty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning, #f59e0b);
  flex-shrink: 0;
}

/* Readonly notice for revenue baseline */
.inp-readonly-notice--revenue {
  margin-bottom: 0.75rem;
}

/* Revenue section header */
.fc-revenue-grid-wrapper .section-header {
  margin-bottom: 0.5rem;
}

/* Revenue grid numeric alignment — amounts right-aligned */
.fc-grid .fc-cell--amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Revenue editable input — native number, full-width */
.fc-input-native {
  width: 100%;
  min-width: 80px;
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: var(--bg-input, #fff);
  color: var(--text-1, #1a1a1a);
  box-sizing: border-box;
}

.fc-input-native:focus {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 1px;
}

/* Revenue subtotal rows */
.fc-subtotal-row {
  background: var(--row-subtotal-bg, #f0f4f8);
}

.fc-subtotal-label {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-2, #374151);
}

/* Revenue grand total row */
.fc-grand-total {
  background: var(--row-grandtotal-bg, #dbeafe);
  border-top: 2px solid var(--accent, #3b82f6);
}

.fc-grand-total__label {
  font-weight: 700;
  font-size: 0.82rem;
}

.fc-grand-total__value {
  font-weight: 700;
  color: var(--accent, #1d4ed8);
}

/* Revenue cell notes / hint column */
.fc-cell--notes {
  font-size: 0.72rem;
  color: var(--muted, #6b7280);
  font-style: italic;
}

/* CO2 flag display */
.fc-cell-runtime--flag {
  font-size: 0.75rem;
}

/* Revenue grid footer note */
.fc-revenue-grid-wrapper .table-note {
  margin-top: 0.6rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 20L — Construction / IDC Workbook UX Foundation
   Monthly drawdown grid and IDC summary grid
   ═══════════════════════════════════════════════════════════════════ */

/* Construction / IDC grid wrappers */
.fc-construction-grid-wrapper,
.fc-idc-grid-wrapper,
.fc-idc-monthly-wrapper {
  overflow-x: auto;
  overflow-y: visible;
}

/* Horizontal scroll container for wide grids */
.fc-grid-wrapper--scroll-x {
  overflow-x: auto;
  overflow-x: scroll; /* fallback */
  -webkit-overflow-scrolling: touch;
}

/* Readonly notice for construction/IDC tabs */
.inp-readonly-notice--construction,
.inp-readonly-notice--idc {
  margin-bottom: 0.75rem;
}

/* Construction/IDC cards row layout */
.fc-const-idc-cards .assumption-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.fc-const-idc-cards .assumption-item {
  min-width: 140px;
  flex: 1 1 140px;
}

/* Construction grid — wider column for row labels */
.fc-construction-grid-wrapper .fc-grid-col-label {
  min-width: 120px;
  width: 120px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
}

/* IDC grid — numeric amount cells right-aligned */
.fc-idc-grid-wrapper .fc-cell--amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Monthly IDC grid */
.fc-idc-monthly-wrapper {
  margin-top: 0.75rem;
}

/* Section band for construction grid (spans all columns) */
.fc-construction-grid-wrapper .fc-section-band {
  background: var(--row-section-band-bg, #e8edf2);
}

.fc-construction-grid-wrapper .fc-section-band__label {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-2, #374151);
  padding: 0.25rem 0.5rem;
}

/* Subtotal rows in construction grid */
.fc-construction-grid-wrapper .fc-subtotal-row {
  background: var(--row-subtotal-bg, #f0f4f8);
}

.fc-construction-grid-wrapper .fc-subtotal-label {
  font-weight: 600;
  font-size: 0.78rem;
}

/* Grand total in construction grid */
.fc-construction-grid-wrapper .fc-grand-total__value {
  font-weight: 700;
  color: var(--accent, #1d4ed8);
}

/* IDC grand total */
.fc-idc-grid-wrapper .fc-grand-total {
  background: var(--row-grandtotal-bg, #dbeafe);
  border-top: 2px solid var(--accent, #3b82f6);
}

.fc-idc-grid-wrapper .fc-grand-total__label {
  font-weight: 700;
  font-size: 0.82rem;
}

.fc-idc-grid-wrapper .fc-grand-total__value {
  font-weight: 700;
  color: var(--accent, #1d4ed8);
}

/* Runtime/audit badge */
.badge-audit {
  background: var(--badge-preview-bg, #fff8e1);
  color: var(--warning-text, #92400e);
  border: 1px solid var(--warning, #f59e0b);
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 20M — Financial Statements + Runtime Polish
   Runtime summary provenance, financial statement grids, fc-grid polish
   ═══════════════════════════════════════════════════════════════════ */

/* ── Runtime Summary provenance banner ────────────────────────────── */
.rs-provenance-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  margin-bottom: 0.75rem;
  gap: 1rem;
}

.rs-lifecycle-note {
  margin-bottom: 0.85rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text-2, #4b5563);
  font-size: 0.76rem;
  line-height: 1.5;
  padding: 0.75rem 0.85rem;
}

.rs-provenance-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rs-provenance-icon {
  font-size: 1.1rem;
}

.rs-provenance-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.rs-provenance-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2, #6b7280);
}

.rs-provenance-project {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1, #1a1a1a);
}

.rs-provenance-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rs-provenance-time {
  font-size: 0.75rem;
  color: var(--muted, #6b7280);
}

/* ── KPI grid ────────────────────────────────────────────────────── */
.rs-kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.rs-kpi-card {
  background: var(--surface-2, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  min-width: 110px;
  flex: 1 1 110px;
  max-width: 160px;
}

.rs-kpi-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2, #6b7280);
  margin-bottom: 0.25rem;
}

.rs-kpi-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-1, #1a1a1a);
}

.rs-derivation {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border, #e5e7eb);
  padding-top: 0.45rem;
}

.rs-derivation-summary {
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent, #2563eb);
  list-style: none;
}

.rs-derivation-summary::-webkit-details-marker {
  display: none;
}

.rs-derivation-body {
  margin-top: 0.45rem;
  background: var(--surface-1, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 0.6rem;
}

.rs-derivation-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-2, #6b7280);
  margin-bottom: 0.25rem;
}

.rs-derivation-formula {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-1, #111827);
  margin-bottom: 0.5rem;
}

.rs-derivation-list {
  margin: 0;
}

.rs-derivation-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.18rem 0;
}

.rs-derivation-row dt {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-2, #6b7280);
}

.rs-derivation-row dd {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-1, #111827);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rs-kpi-missing {
  color: var(--muted, #9ca3af);
  font-style: italic;
  font-weight: 400;
  font-size: 0.9rem;
}

/* ── Runtime notice ─────────────────────────────────────────────── */
.rs-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  margin-bottom: 0.5rem;
}

.rs-notice-text {
  font-size: 0.75rem;
  color: var(--muted, #6b7280);
}

/* ── Runtime messages / errors ─────────────────────────────────── */
.rs-messages {
  margin-top: 0.5rem;
}

.rs-message {
  padding: 0.35rem 0.6rem;
  background: var(--warn-bg, #fef3c7);
  border: 1px solid var(--warn-border, #fcd34d);
  border-radius: 4px;
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
}

.rs-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--blocked-bg, #fee2e2);
  border: 1px solid var(--blocked-border, #fecaca);
  border-radius: 4px;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* ── Financial Statements ─────────────────────────────────────── */
.fs-statement-card {
  margin-bottom: 0;
}

.fs-statement-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.fs-statement-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-1, #1a1a1a);
}

/* Financial statements grid */
.fs-grid {
  width: 100%;
  min-width: 600px;
}

.fs-grid .fc-grid-col-label {
  min-width: 160px;
  width: 160px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
}

/* Negative values in financial tables */
.fc-cell--negative {
  color: var(--text-negative, #dc2626);
}

/* ── Financial statement runtime block ─────────────────────────── */
.fs-runtime-block {
  padding: 0.6rem 0.8rem;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.fs-runtime-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fs-runtime-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fs-runtime-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1, #1a1a1a);
}

.fs-runtime-project {
  font-size: 0.78rem;
  color: var(--text-2, #6b7280);
}

.fs-runtime-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fs-runtime-time {
  font-size: 0.72rem;
  color: var(--muted, #6b7280);
}

.fs-runtime-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fs-secondary-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border, #e5e7eb);
  margin-top: 0.4rem;
}

.fs-metric {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.fs-metric-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2, #6b7280);
}

.fs-metric-value {
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-1, #1a1a1a);
}

/* ── Scenario Compare improvements ─────────────────────────────── */
.ps-compare-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.ps-compare-heading-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-1, #1a1a1a);
}

.ps-compare-heading-vs {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ps-compare-provenance-header {
  margin-bottom: 0.4rem;
}

.ps-compare-provenance-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.25rem 1rem;
  font-size: 0.75rem;
}

.ps-compare-provenance-key {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #6b7280);
}

.ps-compare-provenance-grid > span:last-child {
  font-weight: 500;
  color: var(--text-1, #1a1a1a);
}

/* ── UI-2.1: State Clarity Banner ────────────────────────────────────── */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border, #dde4ed);
  margin-bottom: 1rem;
  background: var(--surface, #ffffff);
  font-size: 0.85rem;
  line-height: 1.4;
}

.banner-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--surface-2, #f7f9fc);
  color: var(--text-1, #1a1a1a);
  margin-top: 0.05rem;
}

.banner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.banner-title {
  font-weight: 700;
  color: var(--text-1, #1a1a1a);
}

.banner-desc {
  color: var(--text-2, #475569);
  font-size: 0.8rem;
}

.banner-info {
  border-left: 3px solid #1a56db;
  background: #f0f5ff;
}

.banner-info .banner-icon {
  background: #1a56db;
  color: #ffffff;
}

.banner-success {
  border-left: 3px solid #0f7a52;
  background: #e8f3ed;
}

.banner-success .banner-icon {
  background: #0f7a52;
  color: #ffffff;
}

.banner-warn {
  border-left: 3px solid #b45309;
  background: #fef5e7;
}

.banner-warn .banner-icon {
  background: #b45309;
  color: #ffffff;
}

.banner-fail {
  border-left: 3px solid #b91c1c;
  background: #fde8e8;
}

.banner-fail .banner-icon {
  background: #b91c1c;
  color: #ffffff;
}

.banner-neutral {
  border-left: 3px solid #7a96b8;
  background: var(--surface-2, #f7f9fc);
}

.banner-neutral .banner-icon {
  background: #7a96b8;
  color: #ffffff;
}

/* ── UI-2.2: Runtime Impact Chip ────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 6px;
  margin: 1px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.chip-drives-model {
  background: #0f7a52;
  color: #ffffff;
}

.chip-display-only {
  background: #475569;
  color: #ffffff;
}

.chip-pending {
  background: #b45309;
  color: #ffffff;
}

.chip-needs-review {
  background: #b91c1c;
  color: #ffffff;
}

.chip-unknown,
.chip-fallback {
  background: #7a96b8;
  color: #ffffff;
}

/* ── UI-2.3: Validation Summary Bar ────────────────────────────────────── */
.validation-summary-bar {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border, #dde4ed);
  margin-bottom: 0.9rem;
  background: var(--surface, #ffffff);
  font-size: 0.82rem;
  line-height: 1.35;
}

.validation-summary-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--surface-2, #f7f9fc);
  color: var(--text-1, #1a1a1a);
  margin-top: 0.05rem;
}

.validation-summary-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.validation-summary-title {
  font-weight: 700;
  color: var(--text-1, #1a1a1a);
}

.validation-summary-desc {
  color: var(--text-2, #475569);
  font-size: 0.78rem;
}

.validation-summary-meta {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--text-2, #475569);
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
  align-self: flex-start;
}

.validation-summary-pass {
  border-left: 3px solid #0f7a52;
  background: #e8f3ed;
}

.validation-summary-pass .validation-summary-icon {
  background: #0f7a52;
  color: #ffffff;
}

.validation-summary-warn {
  border-left: 3px solid #b45309;
  background: #fef5e7;
}

.validation-summary-warn .validation-summary-icon {
  background: #b45309;
  color: #ffffff;
}

.validation-summary-fail {
  border-left: 3px solid #b91c1c;
  background: #fde8e8;
}

.validation-summary-fail .validation-summary-icon {
  background: #b91c1c;
  color: #ffffff;
}

.validation-summary-info {
  border-left: 3px solid #1a56db;
  background: #f0f5ff;
}

.validation-summary-info .validation-summary-icon {
  background: #1a56db;
  color: #ffffff;
}

/* ── Phase 24-G-1: Stale run enhancements ────────────────────────────────── */
.empty-state-notice--stale {
  align-items: center;
}

.esn-icon--stale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-size: 0.7rem;
  margin-bottom: 0.25rem;
}

.esn-stale-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  background: #b45309;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  line-height: 1;
}

.esn-stale-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
}

.esn-stale-rerun {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  background: #b45309;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.2;
  border: 1px solid #92400e;
}

.esn-stale-rerun:hover,
.esn-stale-rerun:focus {
  background: #92400e;
  color: #ffffff;
  text-decoration: none;
}

.esn-stale-changed {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: rgba(180, 83, 9, 0.12);
  color: #7c2d12;
  font-size: 0.7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Phase 24-G-1: Validation groups (Error / Warning / Information) ───────── */
.validation-group {
  margin-bottom: 0.9rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border, #dde4ed);
  overflow: hidden;
}

.validation-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border, #dde4ed);
}

.validation-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffffff;
}

.validation-group-title {
  flex: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.validation-group-count {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.validation-group-body {
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.validation-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0.4rem 0.6rem !important;
  font-size: 0.78rem;
}

.validation-item-message {
  flex: 1;
  min-width: 0;
}

.validation-item-count {
  flex-shrink: 0;
  font-size: 0.7rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  font-variant-numeric: tabular-nums;
}

.validation-group--error .validation-group-header {
  background: #fde8e8;
  color: #7f1d1d;
}

.validation-group--error .validation-group-icon {
  background: #b91c1c;
}

.validation-group--warning .validation-group-header {
  background: #fef5e7;
  color: #7c2d12;
}

.validation-group--warning .validation-group-icon {
  background: #b45309;
}

.validation-group--information .validation-group-header {
  background: #f0f5ff;
  color: #1e3a8a;
}

.validation-group--information .validation-group-icon {
  background: #1a56db;
}

.validation-header {
  font-size: 0.85rem;
}

/* ── UI-2.4: Factory Lock Indicator ────────────────────────────────────── */
.factory-lock-indicator {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border, #dde4ed);
  border-left: 3px solid #1a56db;
  background: #f0f5ff;
  margin: 0.5rem 0 0.75rem 0;
  font-size: 0.78rem;
  line-height: 1.3;
}

.factory-lock-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #1a56db;
  color: #ffffff;
  margin-top: 0.05rem;
}

.factory-lock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.factory-lock-title {
  font-weight: 700;
  color: var(--text-1, #1a1a1a);
}

.factory-lock-desc {
  color: var(--text-2, #475569);
  font-size: 0.74rem;
}

/* ── UI-2.6: Last run / run-source indicator ─────────────────────────────── */
.last-run-indicator {
  display: block;
  margin: 0.75rem 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-2, #cbd5e1);
  border-left: 3px solid var(--accent-1, #1f6feb);
  background: var(--bg-2, #f8fafc);
  font-size: 0.78rem;
  color: var(--text-1, #1a1a1a);
  border-radius: 4px;
}

.last-run-indicator__row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.last-run-indicator__row--note {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border-2, #cbd5e1);
}

.last-run-indicator__label {
  font-weight: 600;
  color: var(--text-2, #475569);
  min-width: 8rem;
}

.last-run-indicator__value {
  color: var(--text-1, #1a1a1a);
}

.last-run-indicator__value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  background: var(--bg-1, #ffffff);
  padding: 0 0.25rem;
  border: 1px solid var(--border-2, #cbd5e1);
  border-radius: 3px;
}

.last-run-indicator__note {
  color: var(--text-2, #475569);
  font-style: italic;
}

/* ── Phase 56B: Help pointer (Overview → Help tab) ─────────────────────── */
.help-pointer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: 1rem;
  background: var(--bg-2, #f8fafc);
  border: 1px dashed var(--border-2, #cbd5e1);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-2, #475569);
}

.help-pointer__label {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #475569);
  background: var(--bg-1, #ffffff);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border-2, #cbd5e1);
  border-radius: 3px;
}

.help-pointer__text {
  line-height: 1.45;
}

.help-pointer__link {
  color: var(--primary, #1d4ed8);
  text-decoration: underline;
  font-weight: 600;
}

.help-pointer__link:hover {
  color: var(--primary-hover, #1e40af);
}

/* ── Phase 56C: New Project v1 form helpers ─────────────────────── */
.np-helper {
  color: var(--text-2, #475569);
  font-weight: 400;
  font-size: 0.72rem;
  display: block;
  margin-top: 0.15rem;
}

.np-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: var(--warn-bg, #fef9c3);
  border-left: 3px solid var(--warn-border, #fde047);
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--warn-color, #92400e);
  line-height: 1.4;
}

.np-warning .badge {
  flex-shrink: 0;
}

.np-hidden-defaults {
  display: none;
}

/* ── Phase 56D: COD derived field display ──────────────────────── */
.np-derived-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.45rem 0.6rem;
  background: var(--bg-2, #f1f5f9);
  border-left: 3px solid var(--info-border, #3b82f6);
  border-radius: 4px;
  font-size: 0.74rem;
  color: var(--text-2, #475569);
  line-height: 1.4;
}

.np-derived-note__label {
  font-weight: 700;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--info-color, #1d4ed8);
  background: var(--bg-1, #ffffff);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--info-border, #3b82f6);
  border-radius: 3px;
  flex-shrink: 0;
}

.np-derived-note__text {
  flex: 1;
}

/* Readonly date input — keep it visually distinct */
input[readonly],
input[aria-readonly="true"] {
  background: var(--bg-2, #f1f5f9);
  color: var(--muted, #9ca3af);
  cursor: not-allowed;
}

/* ── Phase 56E: Project switch visual hierarchy ────────────────────────── */
/* Active project card — name first, code/details behind disclosure. */
.ps-ap-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}
.ps-ap-origin {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: 100px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
  color: var(--sidebar-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.ps-ap-origin--factory {
  background: rgba(95, 168, 255, 0.12);
  color: #5fa8ff;
  border-color: rgba(95, 168, 255, 0.2);
}
.ps-ap-origin--user {
  background: rgba(120, 200, 140, 0.12);
  color: #8fc99c;
  border-color: rgba(120, 200, 140, 0.2);
}
.ps-ap-origin--baseline {
  background: rgba(255, 183, 0, 0.12);
  color: #ffd060;
  border-color: rgba(255, 183, 0, 0.2);
}
/* P1-UX-FIX-1: Working Copy badge for user-created projects
   derived from a reference template. Distinct colour so users
   see at-a-glance that they are editing a copy, not the
   original. */
.ps-ap-origin--wc {
  background: rgba(154, 122, 230, 0.12);
  color: #9a7ae6;
  border-color: rgba(154, 122, 230, 0.25);
  font-weight: 600;
}

/* P1-UX-FIX-1: Dashboard empty-state hint shown when runtime
   evidence exists (P2-FIX-4 CTA already handles "no run at
   all") but KPI cards cannot be populated (e.g. scenario
   select cleared runtime, or fresh project). Inline badge +
   text, no border, matches dashboard card style. */
.dashboard-empty-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  margin: 0.75rem 0;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-2);
}

.dashboard-empty-hint code {
  background: var(--bg-2, #f6f7f9);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.78rem;
}
.ps-ap-scenario-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.62rem;
  color: var(--sidebar-muted);
}
.ps-ap-empty-hint {
  font-size: 0.72rem;
  color: var(--sidebar-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}
/* Project code / slug is hidden by default; shown via <details>. */
.ps-ap-details {
  margin-top: 0.4rem;
  font-size: 0.7rem;
}
.ps-ap-details-summary {
  cursor: pointer;
  color: var(--sidebar-muted);
  list-style: none;
  user-select: none;
  font-size: 0.7rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.ps-ap-details-summary::-webkit-details-marker { display: none; }
.ps-ap-details-summary::before {
  content: "›";
  display: inline-block;
  transition: transform 0.15s;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--sidebar-muted);
}
.ps-ap-details[open] .ps-ap-details-summary::before {
  transform: rotate(90deg);
}
.ps-ap-details-body {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  padding: 0.3rem 0.4rem;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
.ps-ap-details-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sidebar-muted);
}
.ps-ap-details-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: #d0d6e0;
  word-break: break-all;
}
/* Quick action labels and primary button. */
.ps-action-label {
  flex: 1;
}
.ps-action-btn--primary {
  background: var(--sidebar-active, #1d4ed8);
  border-color: var(--sidebar-active, #1d4ed8);
  color: #ffffff;
  font-weight: 600;
}
.ps-action-btn--primary:hover {
  background: var(--sidebar-active-hover, #2563eb);
  border-color: var(--sidebar-active-hover, #2563eb);
  color: #ffffff;
}
.ps-action-btn--primary:active {
  background: var(--sidebar-active, #1d4ed8);
  color: #ffffff;
}
.ps-ap-name {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  word-break: break-word;
}

/* ── Phase 56F: State banner visual hierarchy polish ───────────────── */
/* Phase 56F: make state banners feel like product UX, not debug
   output. The base `.banner` is preserved for backward compat; the
   new `.banner-56f` modifier is the recommended look going forward. */
.banner-56f {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border, #dde4ed);
  margin-bottom: 0.75rem;
  background: var(--surface, #ffffff);
  font-size: 0.8rem;
  line-height: 1.4;
  /* No heavy shadow, no oversized borders — calmer feel. */
  box-shadow: none;
}
.banner-56f .banner-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  background: transparent;
  color: var(--text-2, #475569);
  margin: 0;
}
.banner-56f .banner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.banner-56f .banner-title {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-1, #1a1a1a);
  line-height: 1.3;
}
.banner-56f .banner-desc {
  color: var(--text-2, #475569);
  font-size: 0.74rem;
  line-height: 1.4;
}
/* 56F tones — softer backgrounds, no bold left border (icon does the
   semantic signalling). Kept for visual hierarchy of severity. */
.banner-56f.banner-info {
  background: #f5f7fb;
  border-color: #d8e0ec;
}
.banner-56f.banner-info .banner-icon {
  color: #1a56db;
  background: rgba(26, 86, 219, 0.08);
}

.banner-56f.banner-success {
  background: #f3f8f4;
  border-color: #d2e3d8;
}
.banner-56f.banner-success .banner-icon {
  color: #0f7a52;
  background: rgba(15, 122, 82, 0.08);
}

.banner-56f.banner-warn {
  background: #fdf6e7;
  border-color: #ecdfb9;
}
.banner-56f.banner-warn .banner-icon {
  color: #a85a07;
  background: rgba(180, 83, 9, 0.08);
}

.banner-56f.banner-fail {
  background: #fbecec;
  border-color: #ecc7c7;
}
.banner-56f.banner-fail .banner-icon {
  color: #a11818;
  background: rgba(185, 28, 28, 0.08);
}

.banner-56f.banner-neutral {
  background: var(--surface-2, #f7f9fc);
  border-color: var(--border, #dde4ed);
}
.banner-56f.banner-neutral .banner-icon {
  color: #5a6a82;
  background: rgba(122, 150, 184, 0.08);
}

/* ───────────────────────────────────────────────────────────────────
 * Phase 57A-8: CAPEX Add-Line UX (in-memory preview)
 * ───────────────────────────────────────────────────────────────────
 * Visual styling for the add-line toolbar, the temporary
 * row marker, and the run/save warning. Keep this minimal;
 * do NOT introduce any framework / utility class system.
 */

.capex-add-line-toolbar {
  margin: 0.5rem 0 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border, #d4d4d8);
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.04);
}

.capex-add-line-copy {
  margin: 0 0 0.5rem 0;
  font-size: 0.78rem;
  color: var(--muted, #71717a);
  line-height: 1.3;
}

.capex-add-line-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.capex-add-line-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.74rem;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  border: 1px solid var(--border, #d4d4d8);
  border-radius: 4px;
  background: var(--surface, #fff);
  color: var(--text, #18181b);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.capex-add-line-btn:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: #7c3aed;
}
.capex-add-line-btn:focus {
  outline: 2px solid #7c3aed;
  outline-offset: 1px;
}
.capex-add-line-btn-code {
  font-weight: 600;
  color: #7c3aed;
}
.capex-add-line-btn-icon {
  font-size: 0.95rem;
  font-weight: 600;
  color: #7c3aed;
}
.capex-add-line-btn-text {
  color: var(--muted, #71717a);
}

.capex-add-line-preview-totals {
  margin: 0.5rem 0 0 0;
  font-size: 0.74rem;
  color: #b45309;
  line-height: 1.3;
}

/* UX-2A: per-category inline Add Line button, rendered inside the
   category section_band row instead of the (removed) top toolbar. */
.fc-section-band__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.capex-add-line-btn--inline {
  flex-shrink: 0;
}

/* UX-2A: collapsed-by-default CAPEX Sheet Guide (column key, status
   legend, deferred-note, Sources & Uses bridge governance copy). */
.capex-sheet-guide {
  margin: 0.75rem 0;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border, #d4d4d8);
  border-radius: 6px;
  background: var(--surface, #fff);
}
.capex-sheet-guide__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0;
  list-style: none;
}
.capex-sheet-guide[open] .capex-sheet-guide__summary {
  margin-bottom: 0.5rem;
}

tr.lig-row--data-tmp {
  background: rgba(124, 58, 237, 0.05);
  border-left: 3px solid #7c3aed;
}
tr.lig-row--data-tmp td.fc-cell--tmp-remove {
  text-align: right;
  width: 110px;
  min-width: 110px;
}
.capex-tmp-unsaved-badge {
  font-size: 0.65rem;
  margin-left: 0.4rem;
}
.capex-tmp-remove-btn {
  padding: 0.18rem 0.5rem;
  font-size: 0.7rem;
  border: 1px solid #d4d4d8;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.capex-tmp-remove-btn:hover {
  background: #fee2e2;
  border-color: #dc2626;
  color: #dc2626;
}

.capex-tmp-run-warning {
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  background: rgba(251, 191, 36, 0.08);
  color: #92400e;
  font-size: 0.8rem;
  line-height: 1.4;
}
.capex-tmp-run-warning p {
  margin: 0 0 0.3rem 0;
}
.capex-tmp-run-warning p:last-child {
  margin: 0;
}

/* ============================================================
   Phase 24-G-2: Run Status Clarity + Empty-state review
   (all additive — no :root mods, no removal of existing rules)
   ============================================================ */

/* ---- Empty-state --info variant (neutral) ---- */
.empty-state-notice--info {
  background: var(--info-bg, #eff6ff);
  border: 1px solid var(--info-border, #bfdbfe);
  border-radius: var(--radius-md, 8px);
  color: var(--text, #111827);
  margin: 1rem 0;
}

.empty-state-notice--info .esn-desc {
  color: var(--text-2, #6b7280);
}

.esn-icon--no-project,
.esn-icon--no-scenario,
.esn-icon--no-run {
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
  color: var(--info-fg, #1d4ed8);
}

/* ---- Validation group — empty hint row ---- */
.validation-group-empty {
  font-size: 0.8rem;
  color: var(--muted, #9ca3af);
  font-style: italic;
  padding: 0.4rem 0.6rem;
  background: var(--surface-2, #f9fafb);
  border-left: 3px solid var(--muted-border, #d1d5db);
  border-radius: 4px;
}

.validation-group--empty .validation-group-header {
  opacity: 0.7;
}

/* ---- Validation group — hint subtitle (Phase 24-G-2) ---- */
.validation-group-hint {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted, #6b7280);
  font-style: italic;
  letter-spacing: 0.01em;
}

.validation-group--error .validation-group-hint {
  color: #991b1b;
}

.validation-group--warning .validation-group-hint {
  color: #92400e;
}

.validation-group--information .validation-group-hint {
  color: #1e40af;
}

/* ---- Last run indicator — status badge (Phase 24-G-2) ---- */
.last-run-indicator__status {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-left: auto;
}

.last-run-indicator__status--ok {
  background: #15803d;
  color: #ffffff;
}

.last-run-indicator__status--error {
  background: #b91c1c;
  color: #ffffff;
}

.last-run-indicator__status--blocked {
  background: #b45309;
  color: #ffffff;
}

.last-run-indicator__status--none {
  background: var(--muted, #9ca3af);
  color: #ffffff;
}

.last-run-indicator--status-error {
  border-left: 3px solid #b91c1c;
}

.last-run-indicator--status-blocked {
  border-left: 3px solid #b45309;
}

.last-run-indicator--status-ok {
  border-left: 3px solid #15803d;
}

/* ---- Last run indicator — stale row (Phase 24-G-2) ---- */
.last-run-indicator__row--stale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  padding: 0.3rem 0.5rem;
  background: rgba(180, 83, 9, 0.10);
  border-left: 3px solid #b45309;
  border-radius: 4px;
  font-size: 0.75rem;
}

.last-run-indicator__stale-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  background: #b45309;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  line-height: 1;
}

.last-run-indicator__stale-hint {
  flex: 1;
  min-width: 220px;
  color: #7c2d12;
  font-size: 0.72rem;
  line-height: 1.3;
}

.last-run-indicator__value--strong {
  font-weight: 600;
  color: var(--text, #111827);
}

.last-run-indicator__value--error {
  color: #991b1b;
  font-weight: 500;
}

.last-run-indicator__row--header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.last-run-indicator__row--project,
.last-run-indicator__row--scenario,
.last-run-indicator__row--id,
.last-run-indicator__row--time,
.last-run-indicator__row--error {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.last-run-indicator__row--error {
  padding: 0.3rem 0.5rem;
  background: rgba(185, 28, 28, 0.08);
  border-left: 3px solid #b91c1c;
  border-radius: 4px;
  margin-top: 0.3rem;
}

.last-run-indicator__row--note {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted, #6b7280);
}

/* ============================================================
   Phase 24-G-3: CAPEX Sheet Readability + Export / Download Clarity
   (all additive — no :root mods, no removal of existing rules)
   ============================================================ */

/* ---- CAPEX legend lead (under status legend) ---- */
.capex-legend-lead {
  margin: 0 0 0.4rem 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text, #111827);
}

/* ---- CAPEX deferred placeholders ---- */
.capex-deferred-lead {
  margin: 0.4rem 0 0.5rem 0;
  padding: 0.4rem 0.6rem;
  background: var(--surface-2, #f9fafb);
  border-left: 3px solid var(--muted-border, #d1d5db);
  border-radius: 4px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text, #111827);
}

.capex-deferred-detail {
  display: inline;
  color: var(--muted, #6b7280);
  font-size: 0.78rem;
}

/* ---- CAPEX Sources & Uses bridge (compact) ---- */
.capex-sources-uses-bridge {
  margin: 0.6rem 0 0.8rem 0;
  padding: 0.6rem 0.85rem;
  background: var(--surface-2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
}

.capex-su-lead {
  margin: 0 0 0.4rem 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text, #111827);
}

.capex-su-summary {
  margin: 0 0 0.4rem 0;
  padding: 0.4rem 0.6rem;
  background: var(--surface-3, #ffffff);
  border-left: 3px solid var(--info-fg, #1d4ed8);
  border-radius: 4px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.capex-su-tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  margin: 0 0.2rem 0 0.2rem;
  background: var(--info-bg, #eff6ff);
  color: var(--info-fg, #1e40af);
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}

.capex-su-note {
  margin: 0.3rem 0 0 0;
  font-size: 0.74rem;
  color: var(--muted, #6b7280);
}

/* ---- Export registry lead ---- */
.export-registry-lead {
  margin: 0.5rem 0 0.8rem 0;
  padding: 0.5rem 0.75rem;
  background: var(--info-bg, #eff6ff);
  border-left: 3px solid var(--info-fg, #1d4ed8);
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text, #111827);
}

/* ---- Export card lineage row ---- */
.export-card-lineage {
  margin: 0.3rem 0 0.3rem 0;
  padding: 0.3rem 0.5rem;
  background: var(--surface-2, #f9fafb);
  border-left: 2px solid var(--muted-border, #d1d5db);
  border-radius: 3px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted, #6b7280);
}

/* ---- Export empty state ---- */
.export-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
  padding: 1.5rem 1rem;
  background: var(--surface-2, #f9fafb);
  border: 1px dashed var(--border, #d1d5db);
  border-radius: var(--radius-md, 8px);
}

.export-empty-state__icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.export-empty-state__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #111827);
  margin-bottom: 0.4rem;
}

.export-empty-state__desc {
  font-size: 0.82rem;
  color: var(--text, #111827);
  max-width: 540px;
  line-height: 1.5;
  margin: 0 0 0.5rem 0;
}

.export-empty-state__hint {
  font-size: 0.74rem;
  color: var(--muted, #6b7280);
  max-width: 540px;
  line-height: 1.4;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase 24-H — Exploratory Project Warning
   UI-only. No :root mods. Applied to:
   - .inp-exploratory-notice  (inputs_section.html)
   - .last-run-indicator__row--exploratory + children  (_last_run_indicator.html)
   - .export-explorer-warning  (export_registry.html)
   The badge is amber (badge-warn) to match the existing G20 / R99/R102
   "unvalidated" tone, and the body copy uses the standard muted foreground
   so it sits in the same hierarchy as other notices.
   ───────────────────────────────────────────────────────────────────────── */

.inp-exploratory-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  margin: 0.5rem 0 1rem 0;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-md, 8px);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text, #111827);
}
/* ── Phase P1-B: Driver status legend ────────────────────────────────── */
/* Shows after the exploratory warning, lists the
   METADATA_ONLY and DSCR SCULPT DRIVER badges so the
   user understands which fields do and don't move
   project IRR. */
.inp-driver-status-note {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text);
}
.inp-driver-status-note strong {
  font-weight: 600;
  color: var(--text);
}
.inp-driver-status-note .badge {
  align-self: flex-start;
  margin-right: 0.25rem;
}

.inp-exploratory-notice .badge {
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.last-run-indicator__row--exploratory {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  padding-left: 0.5rem;
  margin-top: 0.25rem;
  border-radius: 0 4px 4px 0;
}

.last-run-indicator__exploratory-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: #f59e0b;
  color: #1f2937;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 0.5rem;
}

.last-run-indicator__exploratory-hint {
  font-size: 0.78rem;
  color: var(--muted, #6b7280);
  line-height: 1.4;
}

.export-explorer-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 1rem 0;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-md, 8px);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text, #111827);
}

.export-explorer-warning .badge {
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Phase 25B-1: Generic Defaults Prefill Button
   On /projects/new, the prefill button is hidden for factory
   templates (tuho / oborovo) and shown for generic_solar /
   generic_wind. The visibility is driven by JS
   (data-state="visible"|"hidden"). The button uses the
   existing .btn-secondary style and the hint is small / muted
   to keep the form compact.
   ───────────────────────────────────────────────────────────────────── */

.np-prefill-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0 0.5rem 0;
  margin: 0.25rem 0 0.75rem 0;
  border-top: 1px dashed var(--border, #e5e7eb);
  border-bottom: 1px dashed var(--border, #e5e7eb);
}

.np-prefill-row[data-state="hidden"] {
  display: none;
}

.np-prefill-row[data-state="visible"] {
  display: flex;
}

.np-prefill-hint {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted, #6b7280);
  flex: 1 1 320px;
  min-width: 240px;
}

.np-prefill-hint code {
  font-size: 0.76rem;
  padding: 0.05rem 0.3rem;
  background: var(--surface-2, #f3f4f6);
  border-radius: var(--radius-sm, 4px);
}

/* ── Phase 25B-2 — Multi-scenario compare (2-4 scenarios) ─────────────── */
.scm-multi-compare {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--surface-2, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  background: var(--surface-1, #fff);
}

.scm-multi-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.scm-multi-heading-label {
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.scm-multi-empty {
  padding: 0.5rem 0.25rem;
}

.scm-multi-banner,
.scm-multi-exploratory-banner {
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-2, #f3f4f6);
  color: var(--text-muted, #6b7280);
}

.scm-multi-exploratory-banner {
  background: rgba(245, 158, 11, 0.08);
  color: var(--text-primary, #111827);
  border-left: 3px solid var(--color-warn, #f59e0b);
}

.scm-multi-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
}

.scm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--surface-2, #e5e7eb);
  border-radius: 999px;
  background: var(--surface-1, #fff);
  color: var(--text-primary, #111827);
}

.scm-chip--base {
  border-color: var(--color-accent, #2563eb);
  background: rgba(37, 99, 235, 0.05);
}

.scm-chip-name {
  font-weight: 500;
  font-size: 0.74rem;
}

.scm-chip-vs {
  color: var(--text-muted, #6b7280);
  font-size: 0.7rem;
  font-style: italic;
}

.scm-multi-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--surface-2, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
  overflow-x: auto;
  font-size: 0.72rem;
}

.scm-multi-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.2fr) repeat(4, minmax(80px, 1fr)) minmax(140px, 1.4fr);
  gap: 0.25rem;
  padding: 0.3rem 0.4rem;
  align-items: center;
  border-bottom: 1px solid var(--surface-2, #f3f4f6);
}

.scm-multi-row--head {
  font-weight: 600;
  background: var(--surface-2, #f3f4f6);
  color: var(--text-primary, #111827);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.scm-multi-row--gov {
  background: var(--surface-2, #f3f4f6);
  font-style: italic;
  color: var(--text-muted, #6b7280);
}

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

.scm-multi-metric {
  font-weight: 500;
  color: var(--text-primary, #111827);
}

.scm-multi-value {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-primary, #111827);
}

.scm-col-base {
  font-weight: 600;
  color: var(--color-accent, #2563eb);
}

.scm-multi-deltas {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 0.7rem;
}

.scm-delta-token {
  display: inline-block;
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
  font-weight: 500;
}

.scm-delta--pos {
  color: #047857;
  background: rgba(16, 185, 129, 0.08);
}

.scm-delta--neg {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.08);
}

.scm-delta--zero {
  color: var(--text-muted, #6b7280);
  background: transparent;
}

.scm-delta--na {
  color: var(--text-muted, #6b7280);
  background: transparent;
  font-style: italic;
}

/* V4-2: direction-aware delta colours */
.scm-delta--good {
  color: #047857;
  background: rgba(16, 185, 129, 0.1);
  font-weight: 600;
}

.scm-delta--bad {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.1);
  font-weight: 600;
}

/* V4-2: changed-cell highlight in value columns */
.scm-cell--changed {
  background: rgba(99, 102, 241, 0.06);
}

/* V4-2: input diff table */
.scm-input-diff {
  margin-top: 0.5rem;
}

.scm-input-diff__summary {
  font-size: 0.72rem;
  color: var(--sidebar-muted, #6b7280);
  margin-bottom: 0.5rem;
}

.scm-diff-row {
  display: grid;
  grid-template-columns: 6rem 8rem 1fr 1fr 4rem;
  gap: 0.25rem;
  padding: 0.2rem 0.3rem;
  font-size: 0.72rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
  align-items: center;
}

.scm-diff-row--head {
  font-weight: 600;
  background: var(--bg-subtle, #f3f4f6);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  border-bottom: 2px solid var(--border, #e5e7eb);
}

.scm-diff-row--changed {
  background: rgba(99, 102, 241, 0.04);
}

.scm-diff-changed-badge {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6366f1;
  margin-right: 0.3rem;
  flex-shrink: 0;
}

.scm-diff-delta {
  font-weight: 600;
  color: #6366f1;
}

.scm-diff-section-group {
  margin-top: 0.5rem;
}

.scm-diff-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
  padding: 0.25rem 0.3rem 0.1rem;
  border-top: 1px solid var(--border, #e5e7eb);
  margin-top: 0.25rem;
}

/* V4-2: FS compare */
.scm-fs-compare {
  margin-top: 0.5rem;
}

.scm-fs-compare__table {
  overflow-x: auto;
  font-size: 0.72rem;
}

.scm-fs-row {
  display: grid;
  gap: 0.25rem;
  padding: 0.18rem 0.3rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
  align-items: center;
}

.scm-fs-row--head {
  font-weight: 600;
  background: var(--bg-subtle, #f3f4f6);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
}

.scm-fs-row--section {
  font-weight: 700;
  background: var(--bg-subtle, #f3f4f6);
  font-size: 0.7rem;
}

.scm-fs-col-label {
  font-weight: 500;
}

.scm-fs-col-base {
  font-weight: 600;
}

.scm-fs-cell--changed {
  background: rgba(99, 102, 241, 0.06);
}

.scm-fs-back-link {
  font-size: 0.72rem;
  color: var(--sidebar-muted, #6b7280);
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
}

.scm-fs-back-link:hover {
  color: var(--text, #111827);
}

/* V4-3: Sensitivity workspace */
.sens-workspace {
  margin-top: 0.25rem;
}

.sens-tornado {
  margin-bottom: 0.75rem;
}

.sens-table-wrap {
  margin-bottom: 0.75rem;
}

.sens-table {
  border-collapse: collapse;
  font-size: 0.68rem;
  width: 100%;
  min-width: 600px;
}

.sens-table th {
  background: var(--bg-subtle, #f3f4f6);
  font-weight: 700;
  text-align: right;
  padding: 0.2rem 0.4rem;
  border-bottom: 2px solid var(--border, #e5e7eb);
  white-space: nowrap;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
}

.sens-table th:first-child,
.sens-table th:nth-child(2) {
  text-align: left;
}

.sens-table td {
  padding: 0.18rem 0.4rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sens-table td:first-child,
.sens-table td:nth-child(2) {
  text-align: left;
}

.sens-row--base td {
  font-weight: 600;
  background: var(--bg-subtle, #f3f4f6);
}

.sens-row--error td {
  color: #b91c1c;
  font-style: italic;
}

.sens-cell-shock {
  font-weight: 600;
  color: var(--text, #111827);
}

.sens-cell-level {
  color: var(--text-muted, #6b7280);
}

.sens-cell-err {
  font-size: 0.65rem;
}

.sens-export-row {
  margin-bottom: 0.5rem;
}

.sens-export-btn {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  background: var(--bg-subtle, #f3f4f6);
  color: var(--text, #111827);
  text-decoration: none;
  border: 1px solid var(--border, #d1d5db);
}

.sens-export-btn:hover {
  background: var(--border, #e5e7eb);
}

.sens-export-btn--xl {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}

.sens-export-btn--xl:hover {
  background: #1e40af;
}

.scm-multi-soft-note {
  font-size: 0.7rem;
  line-height: 1.4;
  padding: 0.3rem 0.4rem;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

/* Phase 25B-2.1 — Multi-Compare Picker (selection entry point)
 * Read-only UI; matches .svh-* and .scm-* conventions; no Tailwind/Alpine. */
.scm-pick {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.45rem 0.5rem;
  background: var(--sidebar-card-bg, #fafafa);
  border: 1px solid var(--sidebar-border, #e5e7eb);
  border-radius: 6px;
}

.scm-pick-header {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.scm-pick-title {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-strong, #111827);
}

.scm-pick-subtitle {
  font-size: 0.7rem;
  color: var(--sidebar-muted, #6b7280);
}

.scm-pick-banner,
.scm-pick-exploratory-banner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  line-height: 1.35;
  padding: 0.3rem 0.45rem;
  border-radius: 4px;
  background: var(--info-bg, #eff6ff);
  color: var(--text-strong, #111827);
}

.scm-pick-exploratory-banner {
  background: var(--warn-bg, #fff7ed);
  border-left: 3px solid var(--warn-fg, #b45309);
}

.scm-pick-empty {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.scm-pick-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.scm-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  max-height: 11rem;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.scm-pick-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  padding: 0.22rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  background: var(--sidebar-row-bg, transparent);
  transition: background-color 0.1s ease, border-color 0.1s ease;
}

.scm-pick-row:hover {
  background: var(--sidebar-row-hover, #f3f4f6);
}

.scm-pick-row--disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.scm-pick-cb {
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

.scm-pick-row-name {
  font-weight: 500;
  color: var(--text-strong, #111827);
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scm-pick-row-active {
  font-size: 0.6rem;
  padding: 0.05rem 0.3rem;
}

.scm-pick-row-meta {
  font-size: 0.65rem;
  color: var(--sidebar-muted, #6b7280);
  flex: 0 0 auto;
}

.scm-pick-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}

.scm-pick-count {
  font-size: 0.68rem;
  color: var(--sidebar-muted, #6b7280);
  flex: 1 1 auto;
}

.scm-pick-compare-btn,
.scm-pick-compare-btn-fallback {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  background: var(--accent-bg, #1d4ed8);
  color: var(--accent-fg, #ffffff);
  text-decoration: none;
  border: 1px solid var(--accent-bg, #1d4ed8);
  cursor: pointer;
  transition: opacity 0.1s ease, background-color 0.1s ease;
}

.scm-pick-compare-btn:hover,
.scm-pick-compare-btn-fallback:hover {
  opacity: 0.92;
}

.scm-pick-compare-btn--disabled,
.scm-pick-compare-btn[aria-disabled="true"] {
  background: var(--text-muted, #9ca3af);
  border-color: var(--text-muted, #9ca3af);
  cursor: not-allowed;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────
   Phase 25B-3 — "What changed since previous run?" delta panel
   Read-only UI. Shows deltas between the current run summary and
   the previous run summary (when available). No new colors — uses
   existing CSS variables only.
   ───────────────────────────────────────────────────────────────────── */

.wc-panel {
  margin-top: 0.6rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--sidebar-border, var(--text-muted, #d0d7de));
  border-radius: 6px;
  background: var(--info-bg, #f6f8fa);
  font-size: 0.85rem;
}

.wc-panel[data-state="no-previous"] {
  background: var(--warn-bg, #fff8e1);
}

.wc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.wc-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-strong, #24292f);
}

.wc-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted, #57606a);
}

.wc-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.wc-banner--exploratory {
  background: var(--warn-bg, #fff8e1);
  color: var(--warn-fg, #6a4500);
  border-left: 3px solid var(--warn-accent, #b08800);
}

.wc-banner--descriptive {
  background: var(--info-bg, #eef5fb);
  color: var(--text-muted, #24292f);
  border-left: 3px solid var(--accent, #0969da);
}

.wc-banner-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--warn-fg, #b08800);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.wc-banner-text {
  flex: 1;
}

.wc-empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  color: var(--text-muted, #57606a);
  font-size: 0.85rem;
}

.wc-empty-icon {
  font-size: 1.2rem;
  color: var(--text-muted, #57606a);
}

.wc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.4rem;
}

.wc-table th,
.wc-table td {
  padding: 0.25rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--sidebar-border, #d8dee4);
  font-size: 0.8rem;
}

.wc-th-metric,
.wc-td-label {
  font-weight: 600;
  color: var(--text-strong, #24292f);
}

.wc-th-current,
.wc-td-current {
  text-align: right;
}

.wc-th-previous,
.wc-td-previous {
  text-align: right;
  color: var(--text-muted, #57606a);
}

.wc-th-delta,
.wc-td-delta {
  text-align: right;
  font-weight: 600;
}

.wc-th-percent,
.wc-td-percent {
  text-align: right;
  color: var(--text-muted, #57606a);
}

.wc-row--positive .wc-td-delta {
  color: var(--pass-fg, #1a7f37);
}

.wc-row--negative .wc-td-delta {
  color: var(--warn-fg, #b08800);
}

.wc-row--zero .wc-td-delta {
  color: var(--text-muted, #57606a);
}

.wc-row--n_a {
  opacity: 0.6;
}

.wc-footer {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--sidebar-border, #d8dee4);
  font-size: 0.7rem;
  color: var(--text-muted, #57606a);
}

.wc-footer-note {
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════════
   Phase 25B-4 — Dirty state visual indicators (.ds-*)
   Purely additive. No :root changes. No resets.
   ════════════════════════════════════════════════════════════════════════ */

.ds-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 500;
  border: 1px solid transparent;
  background: var(--muted-bg, #f1f3f5);
  color: var(--muted, #555);
}

/* Phase P2-FIX-7A: CSS parser cleanup.
   The two bugs below were both introduced in commit
   8c85168 (Phase 25B-5, June 10 2026):
     1. The block of text starting "Phase 25B-5 —
        Scenario workflow polish" was inserted
        without an opening ``/*``. The closing
        ``*/`` alone produced a malformed comment
        that browsers (and cssutils) treated as a
        parse error, silently dropping every CSS
        rule after it on the stylesheet.
     2. ``.ds-badge--factory {`` was opened on
        line 6705 and never closed; the next
        selector (``.sw-label__icon``) replaced the
        missing ``}``.
   Both bugs together caused browsers to abort
   CSS parsing on the external stylesheet, which
   is why P2-FIX-5A's standalone page templates
   rendered as plain text on ``/``, ``/projects/new``,
   and ``/projects/browse`` and why P2-FIX-7 had to
   ship a temporary inline <style> fallback.
   Fix: the malformed block is now a real comment
   that closes the .ds-badge block above and opens
   a new section header below. */

/* Phase 25B-5 — Scenario workflow polish (.svh-* + .sw-*)
   Purely additive. No :root changes. No resets.

   The .svh-card--active class existed in the template but had NO
   CSS rules — the active scenario highlight was invisible. This
   block also adds the missing .svh-card base styles so the
   scenario version history card has a usable visual surface.
   ════════════════════════════════════════════════════════════════════════ */

.svh-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.svh-header {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.svh-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--fg, #1a1a1a);
}

.svh-subtitle {
  font-size: 0.72rem;
  color: var(--muted, #666);
}

.svh-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.svh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #d8dde3;
  border-radius: 6px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.svh-card--active {
  border-color: #4a7c59;
  box-shadow: 0 0 0 2px #d6eadb, 0 1px 2px rgba(0, 0, 0, 0.04);
  background: #f7fbf8;
}

.svh-card-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.88rem;
  flex-wrap: wrap;
}

.svh-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--muted, #666);
}

.svh-meta-item {
  white-space: nowrap;
}

.svh-card-gov {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.svh-badge {
  font-size: 0.7rem;
  padding: 0.12rem 0.45rem;
}

.svh-empty {
  font-size: 0.8rem;
  color: var(--muted, #666);
  padding: 0.4rem 0.5rem;
  background: #f7f8fa;
  border: 1px dashed #d8dde3;
  border-radius: 6px;
}

.svh-explainer {
  font-size: 0.72rem;
  color: var(--muted, #666);
  padding: 0.4rem 0.55rem;
  background: #f7f8fa;
  border: 1px solid #e8eaef;
  border-radius: 6px;
}

.svh-explainer-title {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.svh-explainer-list {
  margin: 0;
  padding-left: 1.1rem;
}

.svh-explainer-list li {
  margin-bottom: 0.15rem;
}

.svh-warning {
  font-size: 0.78rem;
  padding: 0.4rem 0.6rem;
  background: #fff4d6;
  border: 1px solid #f0d27a;
  border-radius: 6px;
  color: #6b4900;
}

/* ── .sw-* (scenario workflow polish) ─────────────────────────────────── */

.sw-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid transparent;
  vertical-align: middle;
  user-select: none;
}

.ds-badge__icon {
  font-size: 0.85em;
  line-height: 1;
}

.ds-badge__label {
  white-space: nowrap;
}

.ds-badge--saved {
  background: #e6f7ec;
  color: #1f7a3a;
  border-color: #b6e2c2;
}

.ds-badge--unsaved {
  background: #fff4d6;
  color: #8a5a00;
  border-color: #f0d27a;
}

.ds-badge--stale {
  background: #fde7d2;
  color: #a04a00;
  border-color: #f1b67a;
}

.ds-badge--factory {
  background: #eef0f3;
  color: #4a5566;
  border-color: #cdd3dc;
}

.sw-label__icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
}

.sw-label__text {
  white-space: nowrap;
}

.sw-label--base {
  background: #e6f0fb;
  color: #1a4a82;
  border-color: #b8d3ee;
}

.sw-label--downside {
  background: #fbe6e6;
  color: #8a1a1a;
  border-color: #eeb8b8;
}

.sw-label--upside {
  background: #e6f7ec;
  color: #1f7a3a;
  border-color: #b6e2c2;
}

.sw-label--custom {
  background: #f0f1f3;
  color: #4a5566;
  border-color: #cdd3dc;
}

.ds-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0.5rem 0;
}

.ds-notice__icon {
  font-size: 1rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.ds-notice__body {
  flex: 1 1 auto;
}

.ds-notice__title {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.ds-notice__text {
  color: inherit;
  opacity: 0.92;
}

.ds-notice--unsaved {
  background: #fff8e1;
  border-color: #f0d27a;
  color: #6b4900;
}

.ds-notice--factory {
  background: #f3f5f8;
  border-color: #cdd3dc;
  color: #4a5566;
}

.ds-run-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 500;
  border: 1px solid #f1b67a;
  background: #fde7d2;
  color: #a04a00;
  vertical-align: middle;
  cursor: help;
  user-select: none;
}

.ds-run-warning__icon {
  font-size: 0.85em;
}

.ds-run-warning__label {
  white-space: nowrap;
}

.ds-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-left: 0.4rem;
  vertical-align: middle;
  flex-shrink: 0;
}

.ds-dot--dirty {
  background: #d4a017;
  box-shadow: 0 0 0 2px #fff4d6;
  animation: ds-dirty-pulse 1.8s ease-in-out infinite;
}

@keyframes ds-dirty-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Layout hooks for embedding in existing workspace shell */
.workspace-dirty-state-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem 0;
  padding: 0.4rem 0.6rem;
  background: var(--panel-bg, #fafbfc);
  border: 1px solid var(--panel-border, #e1e4e8);
  border-radius: 6px;
}

.workspace-dirty-state-bar__title {
  font-size: 0.78rem;
  color: var(--muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-right: 0.25rem;
}

.sw-quick-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  background: #fafbfc;
  border: 1px solid #e8eaef;
  border-radius: 4px;
  font-size: 0.74rem;
}

.sw-quick-summary__row {
}

/* Phase P2-FIX-7A: CSS parser cleanup (continued).
   See the comment above .svh-container for the full
   history. The two remaining bugs from commit
   8c85168 (Phase 25B-5) and the equivalent bug
   from commit 554599e (Phase 25B-6) were:
     3. ``.workspace-dirty-state-bar__title {``
        was opened and not closed.
     4. The block of text "Phase 25B-6 — Generic
        Project Review Pack" was inserted without
        an opening ``/*``.
   Both are now fixed by closing the prior block
   and turning the malformed text into a real
   comment header. */

/* Phase 25B-6 — Generic Project Review Pack (.rev-*)
   Purely additive. No :root changes. No resets.
   ════════════════════════════════════════════════════════════════════════ */

.rev-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #d8dde3;
  border-radius: 6px;
  background: #fff;
  font-size: 0.82rem;
  margin: 0.5rem 0 1rem 0;
}

.rev-classification {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 500;
}

.rev-classification__icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.rev-classification__text {
  flex: 1 1 auto;
}

.rev-classification__source {
  font-size: 0.7rem;
  color: var(--muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rev-classification--exploratory {
  background: #fff8e1;
  border-color: #f0d27a;
  color: #6b4900;
}

.rev-classification--parity_validated {
  background: #e6f7ec;
  border-color: #b6e2c2;
  color: #1f7a3a;
}

.rev-classification--factory_template {
  background: #f3f5f8;
  border-color: #cdd3dc;
  color: #4a5566;
}

.rev-classification--user_created {
  background: #e6f0fb;
  border-color: #b8d3ee;
  color: #1a4a82;
}

.rev-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rev-section__title {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #666);
}

.rev-section__note {
  font-size: 0.78rem;
  color: var(--muted, #666);
  padding: 0.4rem 0.55rem;
  background: #f7f8fa;
  border: 1px dashed #d8dde3;
  border-radius: 4px;
  font-style: italic;
}

.rev-section--note {
  background: #fff8e1;
  border: 1px solid #f0d27a;
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
}

.rev-section--warn {
  background: #f7f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
}

.rev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.rev-table__label {
  text-align: left;
  font-weight: 500;
  padding: 0.25rem 0.5rem 0.25rem 0;
  color: var(--muted, #666);
  border-bottom: 1px solid #f0f2f5;
  vertical-align: top;
  width: 50%;
}

.rev-table__value {
  text-align: right;
  font-weight: 500;
  padding: 0.25rem 0 0.25rem 0.5rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: top;
  white-space: nowrap;
}

.rev-table tr:last-child .rev-table__label,
.rev-table tr:last-child .rev-table__value {
  border-bottom: none;
}

.rev-scenarios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  background: #fafbfc;
  border: 1px solid #e8eaef;
  border-radius: 4px;
}

.rev-scenarios__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.sw-quick-summary__label {
  color: var(--muted, #666);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sw-quick-summary__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sw-state--good {
  color: #1f7a3a;
}

.sw-state--ok {
  color: #8a5a00;
}

.sw-state--bad {
  color: #8a1a1a;
}

.sw-state--n_a {
  color: var(--muted, #999);
  font-weight: 400;
  font-style: italic;
}

.sw-compare-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 500;
  background: #f7f8fa;
  border: 1px solid #d8dde3;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}

.sw-compare-link:hover {
  background: #eef0f3;
  border-color: #c0c6d0;
  text-decoration: none;
}

.sw-compare-link__arrow {
  font-size: 0.9em;
  color: var(--muted, #666);
}

.sw-compare-link__label {
  white-space: nowrap;
}

.sw-empty-notice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  border: 1px solid #e8eaef;
  margin-bottom: 0.4rem;
}

.sw-empty-notice__icon {
  font-size: 0.95rem;
  font-weight: 700;
  width: 1.2rem;
  text-align: center;
  color: var(--muted, #666);
  flex-shrink: 0;
}

.sw-empty-notice__text {
  flex: 1 1 auto;
}

.sw-empty--empty {
  background: #f7f8fa;
  border-color: #d8dde3;
  color: var(--muted, #666);
}

.sw-empty--one {
  background: #fff8e1;
  border-color: #f0d27a;
  color: #6b4900;
}

.sw-empty--two {
  background: #e6f0fb;
  border-color: #b8d3ee;
  color: #1a4a82;
}

.sw-empty--many {
  background: #e6f7ec;
  border-color: #b6e2c2;
  color: #1f7a3a;
}

.rev-scenarios__count-num {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rev-scenarios__count-label {
  font-size: 0.7rem;
  color: var(--muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rev-scenarios__kinds {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.rev-scenarios__kind {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid transparent;
}

.rev-scenarios__kind--base {
  background: #e6f0fb;
  color: #1a4a82;
  border-color: #b8d3ee;
}

.rev-scenarios__kind--downside {
  background: #fbe6e6;
  color: #8a1a1a;
  border-color: #eeb8b8;
}

.rev-scenarios__kind--upside {
  background: #e6f7ec;
  color: #1f7a3a;
  border-color: #b6e2c2;
}

.rev-scenarios__kind--custom {
  background: #f0f1f3;
  color: #4a5566;
  border-color: #cdd3dc;
}

.rev-scenarios__active {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--muted, #666);
}

.rev-scenarios__active strong {
  color: #1a1a1a;
  font-weight: 600;
}

.rev-list {
  margin: 0;
  padding-left: 1.1rem;
}

.rev-list li {
  margin-bottom: 0.25rem;
  line-height: 1.45;
  font-size: 0.78rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE M1 — Read-Only Scenario Matrix Prototype (UI only)
   Visual styling for the Base | Downside | Upside | Custom matrix.
   No scenario persistence, no scenario CRUD, no scenario engine.
   ═══════════════════════════════════════════════════════════════════════ */

.scenario-matrix-card {
  margin: 1.25rem 0;
  padding: 0.5rem 0.85rem 0.85rem 0.85rem;
}

.scenario-matrix-inheritance-note {
  font-size: 0.78rem;
  color: var(--text-2);
  padding: 0.5rem 0.7rem;
  margin: 0.5rem 0 0.85rem 0;
  background: var(--surface-2);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
}

.scenario-matrix-table-wrap {
  overflow-x: auto;
  margin: 0.5rem 0 0.85rem 0;
}

.scenario-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  background: var(--surface);
}

.scenario-matrix-table thead th {
  text-align: left;
  padding: 0.45rem 0.55rem;
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.scenario-matrix-table thead th.matrix-corner {
  width: 18%;
}

.scenario-matrix-table thead th.matrix-col-header {
  width: 20.5%;
}

.scenario-matrix-table thead th .matrix-col-name {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--text);
}

.scenario-matrix-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.scenario-matrix-table tbody tr.matrix-section-row {
  background: var(--surface-2);
}

.scenario-matrix-table tbody th.matrix-section-header {
  text-align: left;
  padding: 0.4rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.scenario-matrix-table tbody th.matrix-row-label {
  text-align: left;
  padding: 0.35rem 0.55rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  background: transparent;
}

.scenario-matrix-table tbody td.matrix-cell {
  padding: 0.35rem 0.55rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  vertical-align: middle;
}

.scenario-matrix-table tbody td.matrix-cell-base {
  background: rgba(16, 185, 129, 0.05);
  color: var(--text);
  font-weight: 600;
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}

.scenario-matrix-table tbody td.matrix-cell-inherit {
  color: var(--muted);
  font-style: italic;
}

.scenario-matrix-table tbody td.matrix-cell-future {
  color: var(--muted);
}

.scenario-matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: center;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  font-size: 0.74rem;
  color: var(--text-2);
  border-top: 1px solid var(--border);
}

.scenario-matrix-legend .badge {
  font-size: 0.65rem;
}

/* M1 column header badges (color-coded placeholders). */
.badge-base {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.35);
  font-size: 0.65rem;
}

.badge-inherit {
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.30);
  font-size: 0.65rem;
}

.badge-future {
  background: rgba(107, 114, 128, 0.10);
  color: #4b5563;
  border-color: rgba(107, 114, 128, 0.30);
  font-size: 0.65rem;
}

/* ── Phase P2-min-1: Project Home (presentation entry point) ─────── */

/* ── P1-CLEANUP-SPRINT-2 TASK C: Quick action cards ──────────── */
.ph-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.ph-quick-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}

.ph-quick-card:hover {
  border-color: var(--accent, #1a56db);
  transform: translateY(-1px);
}

.ph-quick-card--primary {
  border-color: var(--accent, #1a56db);
  background: linear-gradient(135deg, #f0f5ff 0%, #ffffff 100%);
}

.ph-quick-card--accent {
  border-color: #16a34a;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.ph-quick-icon {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent, #1a56db);
}

.ph-quick-card--accent .ph-quick-icon { color: #16a34a; }

.ph-quick-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.ph-quick-desc {
  font-size: 0.78rem;
  color: var(--text-2);
}

/* ── P1-CLEANUP-SPRINT-2 TASK C: Section tab strip ────────────── */
.ph-section-tabs {
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ph-section-tabs-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.ph-section-tabs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ph-section-tab {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  background: var(--bg, #ffffff);
  transition: border-color 0.15s, background 0.15s;
}

.ph-section-tab:hover {
  border-color: var(--accent, #1a56db);
  background: #f0f5ff;
}

.ph-section-tab--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--surface-2, #f6f7f9);
}

.ph-section {
  margin-bottom: 1.5rem;
}

.ph-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}

.ph-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}

.ph-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.ph-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ph-card--user { /* no extra styling — shared grid */ }

.ph-card-info { display: flex; flex-direction: column; gap: 0.25rem; }

.ph-card-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.ph-card-meta {
  font-size: 0.78rem;
  color: var(--text-2);
}

.ph-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.ph-empty-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.ph-empty-desc {
  font-size: 0.85rem;
  color: var(--text-2);
}

.ph-actions {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1.25rem;
}

.ph-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

/* ── P2-FIX-8 PR3: My Projects table ──────────────────────────────── */

.ph-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.ph-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.ph-table th {
  text-align: left;
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.ph-table td {
  padding: 0.7rem 1rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.ph-table-row:last-child td { border-bottom: none; }

.ph-table-row:hover { background: var(--surface-2); }

.ph-table-link {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.ph-table-link:hover { text-decoration: underline; }

.ph-table-date { color: var(--text-2); white-space: nowrap; }

.ph-table-actions { white-space: nowrap; }

.ph-action-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--primary);
  border-radius: 4px;
}
.ph-action-link:hover { background: var(--primary); color: #fff; }

.ph-status {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.ph-status--draft { background: #f1f5f9; color: #64748b; }
.ph-status--run-completed { background: #d1fae5; color: #065f46; }
.ph-status--needs-rerun { background: #fef3c7; color: #92400e; }

/* ── Phase P2-min-1: Header Help link ─────────────────────────────── */

.header-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}

.header-help-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Phase P2-min-2: Generic status line ─────────────────────────── */

.generic-status-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: rgba(107, 114, 128, 0.10);
  border: 1px solid rgba(107, 114, 128, 0.30);
  border-radius: 6px;
  color: var(--text-2);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.generic-status-line__icon {
  color: var(--text-2);
  font-size: 0.65rem;
}

.generic-status-line__text {
  font-weight: 500;
}

/* ── Phase P2-min-3: Dashboard v1 ─────────────────────────── */

.dashboard {
  margin: 1.25rem 0;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.dashboard-kpi-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 0.75rem 0.85rem;
  position: relative;
}

.dashboard-kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #4b5563);
  margin-bottom: 0.25rem;
}

.dashboard-kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text, #111827);
}

.dashboard-kpi-value[data-p2min3-kpi-status="derived"] {
  color: var(--text-2, #4b5563);
}

.dashboard-kpi-value[data-p2min3-kpi-status="missing"] {
  color: var(--text-2, #9ca3af);
}

.dashboard-kpi-tooltip {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-2, #9ca3af);
  cursor: help;
}

.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0.85rem;
}

.dashboard-chart-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 0.85rem;
}

.dashboard-chart-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text, #111827);
  margin-bottom: 0.5rem;
}

.dashboard-svg {
  width: 100%;
  height: auto;
  max-height: 220px;
}

/* ── Phase P2-min-4: Navigation Compression ─────────────────────────── */
/* UI-8A: hidden — .fo-sheets tab strip in .fo-chrome is the sole nav. */

.nav-compression {
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.nav-compression-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2, #4b5563);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.nav-compression-tab:hover {
  background: rgba(107, 114, 128, 0.08);
  color: var(--text, #111827);
}

.nav-compression-tab.active {
  background: var(--primary, #2563eb);
  color: #fff;
  border-color: var(--primary, #2563eb);
}

/* ── Phase P2-FIX-7: Standalone page styles ────────────────────────
   P2-FIX-5A added full-page standalone templates
   (project_home_page.html, project_new_page.html,
   project_browse_page.html) that use the following
   classes. The CSS rules for these classes were not
   added in P2-FIX-5A, so the standalone pages
   rendered as plain text. P2-FIX-7 adds the rules.
   Scope: ONLY the standalone pages. Workspace
   pages and the Finco One header are unaffected. */

body.standalone-page {
  margin: 0;
  background: var(--bg, #f0f4f8);
  color: var(--text, #111827);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.standalone-page .top-header {
  flex: 0 0 auto;
}

.standalone-main {
  flex: 1 1 auto;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  box-sizing: border-box;
}

.standalone-main--minimal {
  max-width: 720px;
}

.standalone-main--browse {
  max-width: 1100px;
}

.page-shell {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #dde4ed);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04);
}

.page-shell--project-home,
.page-shell--project-browse,
.page-shell--project-new {
  /* Each variant shares the base card; future variant-specific
     overrides can target these modifier classes. */
}

.page-shell-header {
  margin: 0 0 1.5rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--border, #dde4ed);
}

.page-shell-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text, #111827);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.page-shell-desc {
  color: var(--text-2, #4b5563);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.page-shell-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #dde4ed);
  color: var(--text-2, #4b5563);
  font-size: 0.85rem;
}

/* Responsive: tighten padding on small screens */
@media (max-width: 640px) {
  .standalone-main {
    padding: 1.5rem 1rem 2rem;
  }
  .page-shell {
    padding: 1.25rem;
  }
  .page-shell-title {
    font-size: 1.4rem;
  }
}

/* ── End Phase P2-FIX-7 standalone page styles ──────────────────── */

/* ══════════════════════════════════════════════════════════════════════
   Phase WF-2 — Results Sheet Styling
   Adds rules for all sheet_*.html class names that had zero coverage.
   ══════════════════════════════════════════════════════════════════════ */

/* ── fc-data-row ─────────────────────────────────────────────────── */
tr.fc-data-row {
  border-bottom: 1px solid var(--border, #dde4ed);
}
tr.fc-data-row:hover td {
  background: var(--row-hover, #f5f7fb);
}
tr.fc-data-row--child td {
  padding-left: 2rem;
  color: var(--text-2, #4b5563);
  font-size: 0.88rem;
}

/* ── fc-cell modifiers ───────────────────────────────────────────── */
td.fc-cell--label,
th.fc-cell--label {
  text-align: left;
  font-weight: 500;
}
td.fc-cell--col-label,
th.fc-cell--col-label {
  text-align: left;
  font-weight: 600;
  color: var(--text, #111827);
}
td.fc-cell--year,
th.fc-cell--year {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 5.5rem;
}
td.fc-cell--month,
th.fc-cell--month {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
  font-size: 0.82rem;
}
td.fc-cell--pct,
th.fc-cell--pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 4rem;
}
td.fc-cell--val {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
td.fc-cell--status,
th.fc-cell--status {
  text-align: center;
  min-width: 5.5rem;
}
td.fc-cell--muted {
  color: var(--text-3, #9ca3af);
  font-size: 0.85rem;
}
td.fc-cell--indented {
  padding-left: 2rem;
}
td.fc-cell--cat-total {
  font-weight: 700;
  border-top: 2px solid var(--border, #dde4ed);
  background: var(--surface-2, #f8f9fb);
}
td.fc-cell--inactive-year {
  color: var(--text-3, #9ca3af);
  font-style: italic;
}

/* ── fc-th column headers ────────────────────────────────────────── */
th.fc-th--year,
th.fc-th--year-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 5.5rem;
  background: var(--surface-2, #f8f9fb);
}
th.fc-th--month,
th.fc-th--month-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
  font-size: 0.82rem;
  background: var(--surface-2, #f8f9fb);
}
th.fc-th--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
th.fc-th--pct {
  text-align: right;
  min-width: 4rem;
}
th.fc-th--status {
  text-align: center;
}
th.fc-th--notes {
  text-align: left;
  min-width: 12rem;
}
th.fc-th--sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface, #fff);
  border-right: 1px solid var(--border, #dde4ed);
}

/* ── fc-grid-header row variants ─────────────────────────────────── */
tr.fc-grid-header--groups th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2, #4b5563);
  border-bottom: 1px solid var(--border, #dde4ed);
  background: var(--surface-3, #f0f3f8);
}
tr.fc-grid-header--sub th {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2, #4b5563);
  background: var(--surface-2, #f8f9fb);
  border-bottom: 1px solid var(--border, #dde4ed);
}

/* ── fc-grid-scroll-wrapper ──────────────────────────────────────── */
.fc-grid-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border, #dde4ed);
  border-radius: var(--radius, 6px);
}

/* ── fc-section-band variant ─────────────────────────────────────── */
.fc-section-band__code {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--text-3, #9ca3af);
  margin-left: 0.4rem;
}

/* ── fc-val, fc-flag, fc-rt-dot, fc-sched, fc-child-indicator ───── */
.fc-val {
  font-variant-numeric: tabular-nums;
}
.fc-flag {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  vertical-align: middle;
  margin-right: 0.25rem;
}
.fc-rt-dot {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--green, #22c55e);
  vertical-align: middle;
  margin-right: 0.3rem;
}
.fc-sched {
  font-size: 0.82rem;
  color: var(--text-2, #4b5563);
}
.fc-child-indicator {
  color: var(--text-3, #9ca3af);
  margin-right: 0.3rem;
}
.fc-auth-src {
  font-size: 0.75rem;
  color: var(--text-3, #9ca3af);
  font-style: italic;
}

/* ── CAPEX grid classes ───────────────────────────────────────────── */
.fc-capex-detail-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.fc-capex-group-header td {
  font-weight: 700;
  background: var(--surface-2, #f8f9fb);
  padding: 0.5rem 0.75rem;
  border-top: 2px solid var(--border, #dde4ed);
}
.fc-capex-cat-row td {
  font-weight: 600;
  background: var(--surface-3, #f0f3f8);
  padding: 0.4rem 0.75rem;
}
.fc-capex-child td {
  padding: 0.3rem 0.75rem 0.3rem 2rem;
  color: var(--text-2, #4b5563);
  font-size: 0.85rem;
}
.fc-capex-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-2, #4b5563);
  margin: 0.5rem 0;
}

/* ── CAPEX summary strip & cards ─────────────────────────────────── */
.capex-summary-strip {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.capex-summary-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #dde4ed);
  border-radius: var(--radius, 6px);
  padding: 0.6rem 1rem;
  min-width: 9rem;
  flex: 1 1 9rem;
}
.capex-summary-card--total {
  border-color: var(--accent, #2563eb);
  background: var(--accent-light, #eff6ff);
  font-weight: 600;
}
.capex-summary-card__label {
  font-size: 0.78rem;
  color: var(--text-2, #4b5563);
  margin-bottom: 0.2rem;
}
.capex-summary-card__value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #111827);
}
.capex-summary-card__unit {
  font-size: 0.75rem;
  color: var(--text-3, #9ca3af);
  margin-top: 0.15rem;
}

/* ── CAPEX auth strip ────────────────────────────────────────────── */
.capex-auth-strip {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface-2, #f8f9fb);
  border: 1px solid var(--border, #dde4ed);
  border-radius: var(--radius, 6px);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
}
.capex-auth-label {
  font-weight: 600;
  color: var(--text-2, #4b5563);
  margin-right: 0.25rem;
}
.capex-auth-card {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border, #dde4ed);
  background: var(--surface, #fff);
}
.capex-auth-card--backend { border-color: #22c55e; }
.capex-auth-card--app     { border-color: #3b82f6; }
.capex-auth-card--excel   { border-color: #f59e0b; }
.capex-auth-card--missing { border-color: #ef4444; }
.capex-auth-card--mismatch { border-color: #f97316; }
.capex-auth-card--scope-mismatch { border-color: #a855f7; }
.capex-auth-card--deferred { border-color: #6b7280; }
.capex-auth-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.capex-auth-name {
  color: var(--text-2, #4b5563);
}
.capex-auth-total {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-2, #4b5563);
}
.capex-auth-total__label { font-weight: 500; }
.capex-auth-total__count { font-weight: 700; }

/* ── CAPEX column key ────────────────────────────────────────────── */
.capex-column-key {
  background: var(--surface-2, #f8f9fb);
  border: 1px solid var(--border, #dde4ed);
  border-radius: var(--radius, 6px);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
}
.capex-column-key__title {
  font-weight: 700;
  color: var(--text, #111827);
  margin-bottom: 0.4rem;
}
.capex-column-key__section {
  margin-top: 0.4rem;
}
.capex-column-key__section-title {
  font-weight: 600;
  color: var(--text-2, #4b5563);
  margin-bottom: 0.2rem;
}
.capex-column-key__lead {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.capex-column-key__chips {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}
.capex-column-key__chip-desc {
  font-size: 0.75rem;
  color: var(--text-3, #9ca3af);
}
.capex-column-key__group-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  vertical-align: middle;
  margin-right: 0.2rem;
}

/* ── CAPEX toolbar & controls ────────────────────────────────────── */
.capex-grid-toolbar,
.opex-grid-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.capex-toolbar-label,
.opex-toolbar-label {
  font-size: 0.82rem;
  color: var(--text-2, #4b5563);
  margin-right: 0.25rem;
}
.capex-mode-btn,
.opex-mode-btn,
.capex-m-btn,
.opex-yr-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid var(--border, #dde4ed);
  border-radius: 4px;
  background: var(--surface, #fff);
  cursor: pointer;
  color: var(--text-2, #4b5563);
}
.capex-mode-btn:hover,
.opex-mode-btn:hover,
.capex-m-btn:hover,
.opex-yr-btn:hover {
  background: var(--surface-2, #f8f9fb);
}
.capex-display-mode,
.opex-display-mode {
  font-size: 0.8rem;
  color: var(--text-3, #9ca3af);
}
.capex-month-range,
.opex-year-range {
  font-size: 0.8rem;
  color: var(--text-3, #9ca3af);
}
.capex-collapse-controls,
.opex-collapse-controls {
  margin-left: auto;
  display: flex;
  gap: 0.35rem;
}
.capex-collapse-btn,
.opex-collapse-btn {
  padding: 0.15rem 0.4rem;
  font-size: 0.78rem;
  border: 1px solid var(--border, #dde4ed);
  border-radius: 3px;
  background: var(--surface, #fff);
  cursor: pointer;
  color: var(--text-2, #4b5563);
}

/* ── CAPEX misc ──────────────────────────────────────────────────── */
.capex-display-only-banner {
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: var(--radius, 6px);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}
.capex-driving-copy {
  font-size: 0.82rem;
  color: var(--text-2, #4b5563);
  font-style: italic;
}
.capex-deferred-note {
  font-size: 0.82rem;
  color: var(--text-3, #9ca3af);
  font-style: italic;
  margin-top: 0.25rem;
}
.capex-metadata-disclaimer {
  font-size: 0.78rem;
  color: var(--text-3, #9ca3af);
  margin-top: 0.4rem;
}
.capex-status-legend {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-2, #4b5563);
  margin: 0.4rem 0;
}
.capex-add-line-preview-totals-detail {
  font-size: 0.82rem;
  color: var(--text-2, #4b5563);
  margin-top: 0.4rem;
}

/* ── OPEX summary ────────────────────────────────────────────────── */
.opex-summary-strip {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.opex-summary-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #dde4ed);
  border-radius: var(--radius, 6px);
  padding: 0.6rem 1rem;
  min-width: 9rem;
  flex: 1 1 9rem;
}
.opex-summary-card__label {
  font-size: 0.78rem;
  color: var(--text-2, #4b5563);
  margin-bottom: 0.2rem;
}
.opex-summary-card__value {
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #111827);
}
.opex-summary-card__unit {
  font-size: 0.75rem;
  color: var(--text-3, #9ca3af);
  margin-top: 0.15rem;
}
.opex-legacy-summary {
  border: 1px dashed var(--border, #dde4ed);
  border-radius: var(--radius, 6px);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-2, #4b5563);
}
.opex-legacy-summary__toggle {
  cursor: pointer;
  color: var(--accent, #2563eb);
  font-size: 0.82rem;
}
.fc-opex-detail-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.fc-opex-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-2, #4b5563);
  margin: 0.5rem 0;
}

/* ── CAPEX/OPEX cat rows ─────────────────────────────────────────── */
.fc-cat-row {
  background: var(--surface-2, #f8f9fb);
}
.fc-cat-row td {
  font-weight: 600;
  padding: 0.4rem 0.75rem;
}
.fc-cat-child td {
  padding: 0.3rem 0.75rem 0.3rem 1.75rem;
  font-size: 0.85rem;
  color: var(--text-2, #4b5563);
}
.fc-cat-tbody tr:last-child td {
  border-bottom: 2px solid var(--border, #dde4ed);
}
.fc-cat-toggle-icon {
  cursor: pointer;
  user-select: none;
  font-size: 0.7rem;
  margin-right: 0.3rem;
  color: var(--text-3, #9ca3af);
}

/* ── runtime-block (Senior Debt live KPI overlay) ─────────────────── */
.runtime-block {
  background: var(--surface-2, #f8f9fb);
  border: 1px solid var(--border, #dde4ed);
  border-radius: var(--radius, 6px);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.runtime-block-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.runtime-block-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #111827);
}
.runtime-block-project {
  font-size: 0.82rem;
  color: var(--text-2, #4b5563);
  margin-left: auto;
}
.runtime-block-kpis {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.runtime-block-secondary {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border, #dde4ed);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

/* ── rb-metric ───────────────────────────────────────────────────── */
.rb-metric {
  display: flex;
  flex-direction: column;
  min-width: 7rem;
}
.rb-metric-label {
  font-size: 0.75rem;
  color: var(--text-2, #4b5563);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
}
.rb-metric-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #111827);
}
.rb-blocked {
  opacity: 0.4;
  pointer-events: none;
}

/* ── inp-readonly-notice ─────────────────────────────────────────── */
.inp-readonly-notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: var(--radius, 6px);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.inp-readonly-notice__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
}
.inp-readonly-notice__body {
  flex: 1;
}
.inp-readonly-notice__body p {
  margin: 0.25rem 0 0;
  color: var(--text-2, #4b5563);
}
.inp-readonly-notice__hint {
  font-size: 0.82rem;
  color: var(--text-3, #9ca3af);
  margin-top: 0.35rem !important;
}

/* ── badge variants (sheet audit badges) ─────────────────────────── */
.badge-mapped     { background: #dcfce7; color: #166534; }
.badge-partial    { background: #fef9c3; color: #854d0e; }
.badge-mismatch   { background: #fee2e2; color: #991b1b; }
.badge-warning    { background: #ffedd5; color: #9a3412; }
.badge-unmapped   { background: #f3f4f6; color: #374151; }
.badge-backend    { background: #dbeafe; color: #1e40af; }
.badge-contingency { background: #e0e7ff; color: #3730a3; }
.badge-design-only { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.badge-export-only { background: #fafafa; color: #6b7280; border: 1px solid #d1d5db; }
.badge-factory    { background: #fdf4ff; color: #7e22ce; }
.badge-metadata-only { background: #f3f4f6; color: #6b7280; }
.badge-runtime-used { background: #dcfce7; color: #15803d; }
.badge-rt         { background: #dbeafe; color: #1d4ed8; font-size: 0.72rem; }
.badge-rt-display-only       { background: #f3f4f6; color: #6b7280; font-size: 0.72rem; }
.badge-rt-drives-model       { background: #dcfce7; color: #15803d; font-size: 0.72rem; }
.badge-rt-needs-review       { background: #fef9c3; color: #92400e; font-size: 0.72rem; }
.badge-rt-not-applicable     { background: #f3f4f6; color: #9ca3af; font-size: 0.72rem; }
.badge-rt-not-comparable     { background: #f3f4f6; color: #9ca3af; font-size: 0.72rem; }
.badge-rt-pending-runtime-source { background: #ffedd5; color: #9a3412; font-size: 0.72rem; }
.badge-rt-pending-treatment  { background: #fef9c3; color: #92400e; font-size: 0.72rem; }
.badge-rt-reference-only     { background: #f0f9ff; color: #0369a1; font-size: 0.72rem; }
.badge-rt-timing-only        { background: #fdf4ff; color: #7e22ce; font-size: 0.72rem; }
.badge-scope-aggregate        { background: #dbeafe; color: #1e40af; font-size: 0.72rem; }
.badge-scope-fee-only         { background: #f3f4f6; color: #6b7280; font-size: 0.72rem; }
.badge-scope-payment-batch    { background: #e0e7ff; color: #3730a3; font-size: 0.72rem; }
.badge-scope-project-rights   { background: #fdf4ff; color: #7e22ce; font-size: 0.72rem; }
.badge-scope-timing-only      { background: #fef9c3; color: #92400e; font-size: 0.72rem; }
.badge-auth-app         { background: #dbeafe; color: #1e40af; }
.badge-auth-backend     { background: #dcfce7; color: #15803d; }
.badge-auth-deferred    { background: #f3f4f6; color: #6b7280; }
.badge-auth-excel       { background: #fef9c3; color: #92400e; }
.badge-auth-mismatch    { background: #fee2e2; color: #991b1b; }
.badge-auth-missing     { background: #fee2e2; color: #991b1b; }
.badge-auth-na          { background: #f3f4f6; color: #9ca3af; }
.badge-auth-scope-mismatch { background: #fdf4ff; color: #7e22ce; }

/* ── banner-sub ──────────────────────────────────────────────────── */
.banner-sub {
  font-size: 0.82rem;
  color: var(--text-2, #4b5563);
  margin-top: 0.2rem;
}

/* ── preview-notice ──────────────────────────────────────────────── */
.preview-notice {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  background: var(--surface-2, #f8f9fb);
  border: 1px solid var(--border, #dde4ed);
  border-radius: var(--radius, 6px);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-2, #4b5563);
  margin-bottom: 0.75rem;
}

/* ── End Phase WF-2 ──────────────────────────────────────────────── */

/* ── Phase WF-3: Sidebar two-group navigation ────────────────────── */
.ps-nav-group {
  padding: 0.5rem 0 0.25rem;
  border-top: 1px solid var(--sidebar-border, rgba(255,255,255,0.08));
}
.ps-nav-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-muted, rgba(255,255,255,0.4));
  padding: 0 0.75rem 0.3rem;
}
.ps-nav-link {
  display: block;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  color: var(--sidebar-text, rgba(255,255,255,0.75));
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s;
}
.ps-nav-link:hover {
  background: var(--sidebar-hover, rgba(255,255,255,0.08));
  color: #fff;
}
.ps-nav-link--active {
  background: var(--sidebar-active-bg, rgba(255,255,255,0.12));
  color: #fff;
  font-weight: 600;
}
/* ── End WF-3 ────────────────────────────────────────────────────── */

/* ── Phase WF-4: Minimal Create form + Technology badges ─────────── */

/* Technology badge pills in My Projects table */
.ph-tech-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.5rem;
  border-radius: 100px;
  text-transform: uppercase;
}
.ph-tech-badge--wind   { background: rgba(37,99,235,0.12); color: #1d4ed8; }
.ph-tech-badge--solar  { background: rgba(217,119,6,0.12);  color: #b45309; }
.ph-tech-badge--hybrid { background: rgba(124,58,237,0.12); color: #7c3aed; }

/* Create project form (standalone page) */
.create-form-header {
  margin-bottom: 1.5rem;
}
.create-form-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text, #111827);
  margin: 0 0 0.4rem;
}
.create-form-desc {
  font-size: 0.9rem;
  color: var(--text-2, #4b5563);
  margin: 0;
  line-height: 1.5;
}
.create-form-errors {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius, 6px);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #991b1b;
}
.create-form-error-item + .create-form-error-item {
  margin-top: 0.25rem;
}
.create-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 28rem;
}
.create-form-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text, #111827);
}
.create-form-input,
.create-form-select {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border, #dde4ed);
  border-radius: var(--radius, 6px);
  font-size: 0.9rem;
  color: var(--text, #111827);
  background: var(--surface, #fff);
  width: 100%;
  box-sizing: border-box;
}
.create-form-input:focus,
.create-form-select:focus {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 1px;
  border-color: var(--accent, #2563eb);
}
.create-form-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}
.create-form-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #d1fae5;
  border: 1px solid #86efac;
  border-radius: var(--radius, 6px);
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  color: #065f46;
  margin-top: 0.75rem;
}
.create-form-success-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── End WF-4 ────────────────────────────────────────────────────── */

/* ── Phase WF-5: Grouped Results sub-navigation ──────────────────── */
.results-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0.6rem 0.75rem 0.5rem;
  background: var(--surface-2, #f8f9fb);
  border-bottom: 1px solid var(--border, #dde4ed);
  align-items: flex-start;
}
.results-subnav-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-right: 1rem;
  border-right: 1px solid var(--border, #dde4ed);
}
.results-subnav-group:last-child {
  border-right: none;
  padding-right: 0;
}
.results-subnav-group-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3, #9ca3af);
  margin-bottom: 0.1rem;
  white-space: nowrap;
}
.results-subnav-tab {
  background: none;
  border: none;
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
  color: var(--text-2, #4b5563);
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.results-subnav-tab:hover {
  background: var(--surface-3, #eef2f7);
  color: var(--text, #111827);
}
.results-subnav-tab.active,
.results-subnav-tab[aria-selected="true"] {
  background: var(--accent-light, #eff6ff);
  color: var(--accent, #2563eb);
  font-weight: 600;
}
@media (max-width: 768px) {
  .results-subnav {
    gap: 0.4rem 0.75rem;
  }
  .results-subnav-group {
    padding-right: 0.6rem;
  }
}
/* STAB-4: results subnav wrapper visibility */
.results-subnav-wrapper--hidden { display: none !important; }
/* ── End WF-5 ────────────────────────────────────────────────────── */

/* ── Phase M2 — Live Scenario Matrix ─────────────────────────────── */
/* Extends M1 matrix classes with live-scenario column states.        */
.badge-m2-live {
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 0.65rem;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-m2-scenario {
  background: #059669;
  color: #fff;
  font-size: 0.65rem;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.matrix-col-header-live {
  background: #f0fdf4;
  border-bottom: 2px solid #059669;
}
.matrix-cell-scenario {
  background: #f0fdf4;
  color: var(--text, #111827);
  border: 1px solid #a7f3d0;
  padding: 0.3rem 0.6rem;
  font-variant-numeric: tabular-nums;
}
.scenario-matrix-m2-note {
  margin: 0.5rem 1rem 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #f0fdf4;
  border-left: 3px solid #059669;
  border-radius: 0 4px 4px 0;
  font-size: 0.8rem;
  color: #065f46;
}
/* ── End M2 ────────────────────────────────────────────────────────── */

/* ── Phase M3 — Inline Matrix Override Editing ─── */
.matrix-cell-editable { cursor: pointer; }
.matrix-cell-editable:hover { background: #fffbeb; border-color: #fbbf24; }
.matrix-cell-edit-hint { font-size: 0.7rem; color: #9ca3af; margin-left: 0.3rem; }
.matrix-cell-editing { background: #fffbeb !important; padding: 0.1rem; }
.matrix-cell-edit-form { display: flex; align-items: center; gap: 0.25rem; }
.matrix-cell-input { width: 7rem; font-size: 0.8rem; padding: 0.15rem 0.3rem; border: 1px solid #f59e0b; border-radius: 3px; }
.matrix-cell-save-btn { font-size: 0.75rem; background: #059669; color: #fff; border: none; border-radius: 3px; padding: 0.1rem 0.3rem; cursor: pointer; }
.matrix-cell-cancel-btn { font-size: 0.75rem; background: #6b7280; color: #fff; border: none; border-radius: 3px; padding: 0.1rem 0.3rem; cursor: pointer; }
.matrix-cell-saved { border-color: #059669 !important; }
/* ── End M3 ─────────────────────────────────────── */

/* ── Phase WF-6 — Scenario Status Badges ────────────────────────── */
.nav-scenario-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 0 0.25rem;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.sc-run-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  font-weight: 600;
  margin-top: 0.2rem;
}
.sc-run-badge--run {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.sc-run-badge--not-run {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
}
/* ── End WF-6 ────────────────────────────────────────────────────── */

/* ── Phase M4 — Scenario Matrix Run Integration ──────────────────── */
.matrix-run-badge-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.matrix-run-btn {
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #6366f1;
  background: #eef2ff;
  color: #4338ca;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}
.matrix-run-btn:hover {
  background: #c7d2fe;
}
.matrix-run-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  font-weight: 600;
}
.matrix-run-badge--run {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.matrix-run-badge--not-run {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
}
.matrix-run-badge--error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.matrix-run-kpi {
  font-size: 0.6rem;
  color: #374151;
  font-weight: 500;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
}
.matrix-run-error-msg {
  font-size: 0.6rem;
  color: #991b1b;
}
/* ── End M4 ──────────────────────────────────────────────────────── */

/* ── UX-4C: Disabled export cards ──────────────────────────────────── */
.export-card--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
}
.export-card--disabled .export-card-name {
  color: #6b7280;
}

/* ── UX-4C: Disabled download items ────────────────────────────────── */
.download-item--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: #f9fafb;
}

/* ── EXTERNAL-FRIENDLY-PILOT-PREP-A: footer caveat + pilot guide page ── */
.app-footer-caveat {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}
.pilot-guide-text {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ── C1-PR2: Active Cell foundation — visual state only ── */
.fc-active-cell {
  outline: 2px solid #1a56db;
  outline-offset: -1px;
}

/* ── C1-PR6: Selection Model foundation — visual state only ── */
.fc-selected-cell {
  background-color: rgba(26, 86, 219, 0.08);
}

/* C2-PR26: Debt preview basis sub-line. Two stacked micro-rows
   showing "Saved CAPEX used: X" and "Saved gearing used: Y%" so the
   user can see exactly which SAVED inputs anchor the placeholder
   senior-debt preview. Purely presentational; never carries
   calculation. The `title` attribute provides the safety copy on
   hover, in addition to the visible label "Debt preview (saved inputs
   only)" already in the main indicator label. */
.debt-preview-basis {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-left: 0.75rem;
  padding: 0.25rem 0.55rem;
  background: rgba(146, 64, 14, 0.06);
  border: 1px dashed rgba(146, 64, 14, 0.3);
  border-radius: 4px;
  font-size: 0.74rem;
  color: #6b7280;
  vertical-align: middle;
}
.debt-preview-basis-row {
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
}
.debt-preview-basis-label {
  font-weight: 500;
  color: #92400e;
}
.debt-preview-basis-value {
  font-variant-numeric: tabular-nums;
  color: #374151;
}

/* ── V4-4: Lender Case & Covenant Workspace ─────────────────────────────── */

/* Lender Case */
.lc-workspace { padding: 0.5rem 0; }
.lc-adj-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.75rem; }
.lc-adj-chip {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
  padding: 0.2rem 0.65rem; font-size: 0.74rem; color: #1e40af;
}
.lc-kpi-table { margin-top: 0.5rem; }

/* Covenant Dashboard */
.cv-dashboard { padding: 0.5rem 0; }
.cv-summary-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.cv-chip {
  border-radius: 12px; padding: 0.2rem 0.7rem; font-size: 0.8rem; font-weight: 500;
  border: 1px solid transparent;
}
.cv-chip--breach  { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.cv-chip--warn    { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.cv-chip--info    { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }
.cv-chip--ok      { background: #f0fdf4; border-color: #86efac; color: #166534; }

.cv-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; font-size: 0.73rem; }
.cv-legend-item { display: flex; align-items: center; gap: 0.25rem; }
.cv-rag--breach  { color: #ef4444; }
.cv-rag--warning { color: #f97316; }
.cv-rag--caution { color: #eab308; }
.cv-rag--ok      { color: #22c55e; }

.cv-table { border-collapse: collapse; width: 100%; font-size: 0.78rem; white-space: nowrap; }
.cv-table th {
  background: #f9fafb; border-bottom: 1px solid #e5e7eb; padding: 0.35rem 0.5rem;
  font-weight: 600; color: #374151; text-align: left;
}
.cv-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #f3f4f6; }
.cv-row.cv-rag--breach  { background: rgba(239,68,68,0.06); }
.cv-row.cv-rag--warning { background: rgba(249,115,22,0.06); }
.cv-row.cv-rag--caution { background: rgba(234,179,8,0.06); }

.cv-cell-num    { text-align: right; font-variant-numeric: tabular-nums; }
.cv-cell-center { text-align: center; }
.cv-cell--breach { color: #dc2626; font-weight: 600; }

.cv-lockup-badge {
  background: #fef3c7; border: 1px solid #fcd34d; border-radius: 4px;
  padding: 0.1rem 0.4rem; font-size: 0.7rem; color: #92400e; font-weight: 600;
}
.cv-rag-badge {
  display: inline-block; border-radius: 4px; padding: 0.1rem 0.4rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
}
.cv-rag-badge--breach  { background: #fee2e2; color: #991b1b; }
.cv-rag-badge--warning { background: #ffedd5; color: #9a3412; }
.cv-rag-badge--caution { background: #fef9c3; color: #854d0e; }
.cv-rag-badge--ok      { background: #f0fdf4; color: #166534; }

/* Credit Summary */
.cs-summary { padding: 0.5rem 0; }
.cs-print-area { padding: 0.5rem 0; }

.cs-header { margin-bottom: 1rem; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.5rem; }
.cs-project-name { font-size: 1.15rem; font-weight: 700; color: #111827; }
.cs-project-meta { font-size: 0.83rem; color: #6b7280; margin-top: 0.15rem; }

.cs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin-bottom: 1rem;
}
.cs-card {
  border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.75rem 0.9rem;
  background: #fff;
}
.cs-card--lender { border-color: #bfdbfe; background: #eff6ff; }
.cs-card-title {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #6b7280; margin-bottom: 0.5rem;
  padding-bottom: 0.3rem; border-bottom: 1px solid #f3f4f6;
}
.cs-card--lender .cs-card-title { color: #1e40af; border-color: #dbeafe; }

.cs-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.18rem 0; gap: 0.5rem; }
.cs-label { font-size: 0.77rem; color: #6b7280; flex-shrink: 0; }
.cs-value { font-size: 0.82rem; font-weight: 500; color: #111827; font-variant-numeric: tabular-nums; text-align: right; }
.cs-delta { font-size: 0.72rem; font-variant-numeric: tabular-nums; min-width: 3rem; text-align: right; }
.cs-delta.scm-delta--bad  { color: #dc2626; }
.cs-delta.scm-delta--good { color: #16a34a; }

.cs-footer {
  font-size: 0.72rem; color: #9ca3af; text-align: right;
  border-top: 1px solid #e5e7eb; padding-top: 0.4rem; margin-top: 0.5rem;
}

/* Covenant Timeline */
.ct-timeline { padding: 0.5rem 0; }
.ct-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.5rem; font-size: 0.73rem; }
.ct-legend-item { display: flex; align-items: center; gap: 0.25rem; }
.ct-rag--ok      { color: #22c55e; }
.ct-rag--caution { color: #eab308; }
.ct-rag--warning { color: #f97316; }
.ct-rag--breach  { color: #ef4444; }
.ct-rag--lockup  { color: #f59e0b; }

.ct-summary-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.78rem; }
.ct-stat { color: #6b7280; }
.ct-stat--bad  { color: #dc2626; font-weight: 600; }
.ct-stat--warn { color: #92400e; font-weight: 600; }

/* ── V4-5: IC / Credit Reporting Pack ─────────────────────────────────────── */

/* Shared report chrome */
.rp-brand-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid #1e3a5f; padding-bottom: 0.4rem; margin-bottom: 0.75rem;
}
.rp-brand-logo {
  font-size: 1rem; font-weight: 800; color: #1e3a5f; letter-spacing: 0.04em;
}
.rp-brand-meta { font-size: 0.72rem; color: #6b7280; }

.rp-proj-header { margin-bottom: 0.75rem; }
.rp-proj-name { font-size: 1.1rem; font-weight: 700; color: #111827; }
.rp-proj-sub { font-size: 0.83rem; color: #6b7280; margin-top: 0.1rem; }
.rp-scenario-badge {
  display: inline-block; margin-top: 0.3rem;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
  padding: 0.15rem 0.6rem; font-size: 0.73rem; color: #1e40af;
}

.rp-scenario-banner {
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 6px;
  padding: 0.4rem 0.75rem; font-size: 0.82rem; color: #0369a1; margin-bottom: 0.6rem;
}

/* Traffic-light strip */
.rp-rag-strip {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem;
}
.rp-rag-item {
  display: flex; align-items: center; gap: 0.35rem;
  border-radius: 8px; padding: 0.3rem 0.7rem; font-size: 0.78rem; font-weight: 500;
  border: 1px solid transparent;
}
.rp-rag-item--green  { background: #f0fdf4; border-color: #86efac; }
.rp-rag-item--amber  { background: #fffbeb; border-color: #fcd34d; }
.rp-rag-item--red    { background: #fef2f2; border-color: #fca5a5; }
.rp-rag-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.rp-rag-item--green  .rp-rag-dot  { background: #22c55e; }
.rp-rag-item--amber  .rp-rag-dot  { background: #f59e0b; }
.rp-rag-item--red    .rp-rag-dot  { background: #ef4444; }
.rp-rag-label { color: #374151; }
.rp-rag-status { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em; }
.rp-rag-item--green  .rp-rag-status { color: #166534; }
.rp-rag-item--amber  .rp-rag-status { color: #92400e; }
.rp-rag-item--red    .rp-rag-status { color: #991b1b; }

/* KPI grid (exec summary) */
.rp-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem;
  margin-bottom: 0.75rem;
}
.rp-kpi-card {
  border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.65rem 0.8rem; background: #fff;
}
.rp-kpi-card-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #6b7280; margin-bottom: 0.4rem;
  padding-bottom: 0.25rem; border-bottom: 1px solid #f3f4f6;
}
.rp-kpi-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.15rem 0; gap: 0.4rem;
}
.rp-kpi-label { font-size: 0.75rem; color: #6b7280; flex-shrink: 0; }
.rp-kpi-value {
  font-size: 0.8rem; font-weight: 500; color: #111827;
  font-variant-numeric: tabular-nums; text-align: right;
}

/* Print area */
.rp-print-area { padding: 0.25rem 0; }

/* Sections (IC / Credit pack) */
.rp-section {
  margin-bottom: 1rem; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 0.75rem 0.9rem; background: #fff;
}
.rp-section-title {
  font-size: 0.85rem; font-weight: 700; color: #1e3a5f;
  border-bottom: 1px solid #e5e7eb; padding-bottom: 0.35rem; margin-bottom: 0.5rem;
}

/* Two-column layout */
.rp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 600px) { .rp-two-col { grid-template-columns: 1fr; } }

.rp-kv-group-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #6b7280; margin-bottom: 0.35rem;
}
.rp-kv-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.15rem 0; gap: 0.4rem; font-size: 0.8rem;
  border-bottom: 1px solid #f9fafb;
}
.rp-kv-label { color: #6b7280; flex-shrink: 0; }
.rp-kv-val { font-weight: 500; color: #111827; font-variant-numeric: tabular-nums; }

/* KPI flat table (IC pack sections) */
.rp-kpi-table { display: flex; flex-direction: column; gap: 0; }
.rp-kpi-trow {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 0.2rem 0.4rem; border-bottom: 1px solid #f3f4f6; font-size: 0.8rem;
}
.rp-kpi-trow:hover { background: #f9fafb; }
.rp-kpi-trow--head { font-weight: 700; font-size: 0.75rem; color: #6b7280; background: #f9fafb; }
.rp-kpi-trow--breach { background: rgba(239,68,68,0.06); }
.rp-kpi-tlabel { flex: 1; color: #374151; }
.rp-kpi-tval { font-variant-numeric: tabular-nums; color: #111827; white-space: nowrap; }

/* Risk table */
.rp-risk-table { display: flex; flex-direction: column; gap: 0; }
.rp-risk-row {
  display: grid; grid-template-columns: 2fr 0.6fr 3fr;
  gap: 0.75rem; align-items: start; padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #f3f4f6; font-size: 0.8rem;
}
.rp-risk-row--head { font-weight: 700; color: #6b7280; font-size: 0.73rem; background: #f9fafb; }
.rp-risk-label { color: #111827; font-weight: 500; }
.rp-risk-note { color: #6b7280; }
.rp-sev-badge {
  border-radius: 4px; padding: 0.1rem 0.4rem; font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
}
.rp-sev--high   { background: #fee2e2; color: #991b1b; }
.rp-sev--medium { background: #fef3c7; color: #92400e; }
.rp-sev--low    { background: #f0fdf4; color: #166534; }

/* Distribution table */
.rp-dist-table { border-collapse: collapse; width: 100%; font-size: 0.8rem; white-space: nowrap; }
.rp-dist-table th {
  background: #f9fafb; border-bottom: 1px solid #e5e7eb;
  padding: 0.3rem 0.5rem; font-weight: 600; color: #374151; text-align: left;
}
.rp-dist-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid #f3f4f6; }
.rp-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Footer */
.rp-footer {
  font-size: 0.7rem; color: #9ca3af; text-align: right;
  border-top: 1px solid #e5e7eb; padding-top: 0.4rem; margin-top: 0.5rem;
}

/* Export row */
.rp-export-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.rp-export-btn {
  display: inline-block; padding: 0.35rem 0.9rem;
  background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 0.78rem; font-weight: 600; color: #374151; text-decoration: none;
  cursor: pointer;
}
.rp-export-btn:hover { background: #e5e7eb; }
.rp-export-btn--xl { background: #f0fdf4; border-color: #86efac; color: #166534; }
.rp-export-btn--docx { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }