/* ============================================================
   RetroDoc Tagetik — Design System
   Technical documentation style: sidebar nav, clean tables,
   code-heavy, consistent colour tokens per object type.
   ============================================================ */

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

/* ── Skip link (keyboard accessibility) ────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--c-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top .1s;
}
.skip-link:focus { top: 0; }

/* ── Focus-visible global ring ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Inputs already show a border-color focus — keep their outline subtle */
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-offset: 0; }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  /* Neutrals */
  --c-bg:          #f8f9fa;
  --c-surface:     #ffffff;
  --c-surface-2:   #f1f3f6;   /* nested table headers, subtle panels */
  --c-panel-inset: #f8f9fb;   /* expandable detail row backgrounds — lighter than surface-2 */
  --c-bg-alt:      var(--c-surface-2);   /* alias — legacy refs */
  --c-bg-subtle:   var(--c-surface-2);   /* alias — legacy refs */
  --c-border:      #e2e6ea;
  --c-border-soft: #eef0f2;
  --c-text:        #1a1d23;
  --c-text-muted:  #6b7280;
  --c-text-faint:  #9ca3af;

  /* Brand */
  --c-brand:       #1e3a5f;
  --c-brand-light: #eaf0f7;
  --c-code-fg:     var(--c-brand);   /* default <code> text — navy on light, readable token on dark */

  /* Phase flow graph nodes */
  --c-phase-node-bg:     #eaf0f7;
  --c-phase-node-stroke: #1e3a5f;
  --c-phase-node-text:   #1e3a5f;

  /* Object type tokens */
  --c-process:     #1e3a5f;   /* deep navy   — processes */
  --c-process-bg:  #eaf0f7;
  --c-dtp:         #b45309;   /* amber        — DTPs */
  --c-dtp-bg:      #fef3c7;
  --c-dataset:     #1d4ed8;   /* blue         — datasets */
  --c-dataset-bg:  #eff6ff;
  --c-datasource:  #6d28d9;   /* violet       — datasources */
  --c-datasource-bg: #f5f3ff;
  --c-dim:         #065f46;   /* green        — dimensions */
  --c-dim-bg:      #ecfdf5;
  --c-rule:        #9f1239;   /* rose         — rules */
  --c-rule-bg:     #fff1f2;
  --c-form:        #0e7490;   /* cyan         — forms */
  --c-form-bg:     #ecfeff;
  --c-workspace:   #4338ca;   /* indigo       — workspaces */
  --c-workspace-bg:#eef2ff;
  --c-sm:          #0f766e;   /* teal         — special methods */
  --c-sm-bg:       #f0fdfa;
  --c-etl:         #0369a1;   /* steel-blue   — classic ETL */
  --c-etl-bg:      #f0f9ff;
  --c-ic:          #7c3aed;   /* violet-700   — IC elision rules / consolidation */
  --c-ic-bg:       #f5f3ff;
  --c-tooltip-bg:  #1e293b;
  --c-tooltip-text:#f1f5f9;
  --c-ds:          #059669;   /* emerald      — ETL inbound/source direction */
  --c-ds-bg:       #ecfdf5;
  --c-accent:      var(--c-dataset);     /* leaf-entity accent — alias: resolves to dark --c-dataset automatically. Keep as an alias, never a literal hex here only, or dark mode breaks. */
  --c-accent-bg:   var(--c-dataset-bg);  /* alias — see --c-accent note */

  /* Status */
  --c-ok:          #16a34a;
  --c-ok-bg:       #f0fdf4;
  --c-warn:        #d97706;
  --c-danger:      #dc2626;

  /* Spacing */
  --sidebar-w:     240px;
  --topbar-h:      52px;
  --radius:        6px;
  --radius-sm:     4px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Layout ────────────────────────────────────────────────── */
.layout {
  display: flex;
  flex: 1;
  padding-top: var(--topbar-h);
}

/* ── Top bar ───────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--c-brand);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

.topbar-brand {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.2px;
  white-space: nowrap;
}
.topbar-brand span { color: #7eb8f7; margin: 0 4px; }

.topbar-search {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  padding: 0 10px;
  gap: 8px;
}
.topbar-search input {
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
  width: 100%;
  padding: 6px 0;
}
.topbar-search input::placeholder { color: rgba(255,255,255,.5); }
.topbar-search .search-icon { color: rgba(255,255,255,.5); font-size: 15px; }

.topbar-meta {
  margin-left: auto;
  font-size: 11.5px;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: 0;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 0 32px;
  z-index: 90;  /* above sticky table headers, below topbar (100) and popups (3000) */
  transition: width .18s ease;
}

/* Drag handle on the right edge of the sidebar */
.sidebar-resize-handle {
  position: absolute;
  top: 0; right: -3px;
  width: 6px; height: 100%;
  cursor: col-resize;
  z-index: 95;
  transition: background .1s;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging { background: rgba(99,102,241,.25); }

/* Collapse/expand toggle tab */
.sidebar-toggle-btn {
  position: fixed;
  top: calc(var(--topbar-h) + 48px);
  left: var(--sidebar-w);
  width: 14px; height: 36px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--c-text-muted);
  z-index: 91;
  padding: 0;
  box-shadow: 2px 0 4px rgba(0,0,0,.06);
  transition: left .18s ease, color .1s, background .1s;
}
.sidebar-toggle-btn:hover { color: var(--c-brand); background: var(--c-bg); }

.sidebar-section { margin-bottom: 4px; }

.sidebar-section-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--c-text-faint);
  padding: 10px 16px 4px;
}

/* Sub-group labels inside an expandable nav tree (e.g. CPM / Analytical under Dimensions) */
.nav-dim-group-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--c-text-muted);
  padding: 8px 16px 2px 16px;
}
.nav-toggle-row .nav-dim-group-label { padding: 0; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: 13px;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s;
}
.sidebar-link:hover {
  background: var(--c-bg);
  color: var(--c-text);
}
.sidebar-link.active {
  color: var(--c-brand);
  font-weight: 600;
  border-left-color: var(--c-brand);
  background: var(--c-brand-light);
}
.sidebar-link .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sidebar-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--c-text-faint);
  background: var(--c-bg);
  border-radius: 10px;
  padding: 0 6px;
  flex-shrink: 0;
}

/* ── Sidebar nav tree (expandable) ─────────────────────────── */
.nav-tree-children {
  display: none;
}
.nav-tree-children.open {
  display: block;
}

/* Each expandable row = caret button (toggle) + link (navigate), side by side */
.nav-toggle-row {
  display: flex;
  align-items: stretch;
}
.nav-toggle-row:hover {
  background: var(--c-bg);
}
/* Caret toggle button */
.nav-caret-btn {
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 6px 3px 6px 14px;
  flex-shrink: 0;
  color: var(--c-text-faint);
  transition: color .12s;
}
.nav-caret-btn:hover { color: var(--c-text-muted); }

/* Level indents applied to the caret button */
.nav-toggle-row.nav-l1 > .nav-caret-btn { padding-left: 22px; }
.nav-toggle-row.nav-l2 > .nav-caret-btn { padding-left: 36px; }

/* Link portion inside a toggle row */
.nav-toggle-row > .sidebar-link {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
  border-left: none;
  background: none;
}
.nav-toggle-row > .sidebar-link:hover { background: none; }

/* Active toggle row */
.nav-toggle-row.active-row {
  background: var(--c-brand-light);
  border-left: 2px solid var(--c-brand);
}
.nav-toggle-row.active-row > .sidebar-link {
  color: var(--c-brand);
  font-weight: 600;
  background: none;
}
.nav-toggle-row.active-row > .nav-caret-btn {
  color: var(--c-brand);
  border-left: none;
}
.nav-toggle-row.active-row:hover { background: var(--c-brand-light); }

/* Caret icon */
.nav-caret {
  display: inline-block;
  font-size: 11px;
  width: 12px;
  flex-shrink: 0;
  transition: transform .15s;
  line-height: 1;
}
.nav-tree-item.nav-open > .nav-toggle-row .nav-caret {
  transform: rotate(90deg);
}

/* Indentation levels for plain leaf links */
.nav-l1.sidebar-link { padding-left: 22px; }
.nav-l2.sidebar-link { padding-left: 44px; }  /* clearly nested under l1 caret+link */
.nav-l3.sidebar-link { padding-left: 56px; }

/* Subtle vertical tree line for open children panels */
.nav-tree-children.open {
  border-left: 1px solid var(--c-border-soft);
  margin-left: 27px;       /* aligns line under the caret centre */
  padding-left: 0;
}
/* Reset margin for top-level workspace/dim children (they have their own indent) */
.nav-tree-children.open .nav-tree-children.open {
  margin-left: 14px;
}

/* Smaller font + reduced vertical padding for deeper levels */
.nav-l1.sidebar-link, .nav-l2.sidebar-link, .nav-l3.sidebar-link {
  font-size: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Small code chips inside the nav */
.nav-code {
  font-size: 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  padding: 0 4px;
  flex-shrink: 0;
}
.nav-desc {
  font-size: 11px;
  color: var(--c-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Hierarchy tree node tooltip ───────────────────────────── */
.dim-member[data-tip] {
  position: relative;
}
.dim-member[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(17, 24, 39, 0.93);
  color: #f9fafb;
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  margin-left: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* keep it from overflowing right edge */
.dim-member[data-tip]:hover::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: rgba(17, 24, 39, 0.93);
  margin-left: 0px;
  z-index: 200;
  pointer-events: none;
}

/* ── Main content ──────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 28px 32px 48px;
  max-width: 1600px;
  transition: margin-left .18s ease;
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb {
  font-size: 12px;
  color: var(--c-text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-brand); text-decoration: underline; }
.breadcrumb .sep { color: var(--c-text-faint); }
.breadcrumb .current { color: var(--c-text); font-weight: 500; }

/* ── Sticky page header (breadcrumb + page-head + optional sub-nav) ── */
.page-sticky-header {
  position: sticky;
  top: var(--topbar-h);
  background: var(--c-bg);
  z-index: 85;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}
.page-sticky-header .breadcrumb  { margin-bottom: 10px; }
.page-sticky-header .page-head   { margin-bottom: 10px; }
.page-sticky-header .sub-nav     { margin-bottom: 0; }

/* ── Page header ───────────────────────────────────────────── */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-head h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}
.page-head .subtitle {
  font-size: 13px;
  color: var(--c-text-muted);
  margin-top: 3px;
}
.page-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  padding-top: 4px;
}

/* ── Pills / badges ────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-muted);
  white-space: nowrap;
}

/* ── Domain sub-page navigation ─────────────────────────── */
.sub-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.sub-nav a {
  padding: 5px 14px; border-radius: 14px; font-size: 12px; font-weight: 600;
  text-decoration: none; background: var(--c-bg); border: 1px solid var(--c-border);
  color: var(--c-text-muted); transition: background .12s, color .12s, border-color .12s;
}
.sub-nav a:hover { background: var(--c-brand-light); color: var(--c-brand); border-color: var(--c-brand); }
.sub-nav a.active { background: var(--c-brand); color: #fff; border-color: var(--c-brand); pointer-events: none; }
.pill-process    { background: var(--c-process-bg);    color: var(--c-process);    border-color: #b8cfe4; }
.pill-dtp        { background: var(--c-dtp-bg);        color: var(--c-dtp);        border-color: #fcd34d; }
.pill-dataset    { background: var(--c-dataset-bg);    color: var(--c-dataset);    border-color: #93c5fd; }
.pill-datasource { background: var(--c-datasource-bg); color: var(--c-datasource); border-color: #c4b5fd; }
.pill-dim        { background: var(--c-dim-bg);        color: var(--c-dim);        border-color: #6ee7b7; }
.pill-rule       { background: var(--c-rule-bg);       color: var(--c-rule);       border-color: #fda4af; }
.pill-form       { background: var(--c-form-bg);       color: var(--c-form);       border-color: #67e8f9; }
.pill-workspace  { background: var(--c-workspace-bg);  color: var(--c-workspace);  border-color: #a5b4fc; }
.pill-ok         { background: #f0fdf4; color: var(--c-ok);    border-color: #86efac; }
.pill-warn       { background: #fffbeb; color: var(--c-warn);  border-color: #fcd34d; }
.pill-danger     { background: #fff1f2; color: var(--c-danger);border-color: #fca5a5; }
/* Status pills: prepend a symbol so status is not color-only (accessibility) */
.pill-ok::before     { content: '✓\00a0'; font-size: .85em; }
.pill-warn::before   { content: ''; }
.pill-danger::before { content: '✕\00a0'; font-size: .85em; }
.pill-sm         { background: var(--c-sm-bg);        color: var(--c-sm);         border-color: #5eead4; }
.pill-etl        { background: var(--c-etl-bg);       color: var(--c-etl);        border-color: #7dd3fc; }
/* size modifier — combine with any pill (replaces inline font-size:10px) */
.pill-xs         { font-size: 10px; padding: 1px 6px; }

/* ── Card ──────────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.card h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card h2 .count {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text-muted);
}
.card .desc {
  font-size: 12.5px;
  color: var(--c-text-muted);
  max-width: 80ch;
  margin-bottom: 12px;
}

/* ── Key-value list ────────────────────────────────────────── */
.kv {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 4px 12px;
  font-size: 13px;
}
.kv dt {
  color: var(--c-text-muted);
  font-weight: 500;
  padding: 3px 0;
}
.kv dd {
  padding: 3px 0;
  color: var(--c-text);
}

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data thead tr {
  background: var(--c-bg);
  border-bottom: 2px solid var(--c-border);
}
table.data thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--c-text-muted);
  white-space: nowrap;
}
table.data tbody tr {
  border-bottom: 1px solid var(--c-border-soft);
  transition: background .1s;
}
table.data tbody tr:hover { background: var(--c-bg); }
table.data tbody tr.row-highlight { background: #fef9c3; animation: row-flash 2.5s ease-out forwards; }
@keyframes row-flash { 0%{background:#fef08a} 40%{background:#fef9c3} 100%{background:transparent} }
table.data tbody tr:last-child { border-bottom: none; }
table.data td {
  padding: 8px 10px;
  vertical-align: top;
}
table.data td.muted { color: var(--c-text-muted); }

/* ── Sortable columns ───────────────────────────────────────── */
table.data th.sortable-col {
  cursor: pointer;
  user-select: none;
}
table.data th.sortable-col:hover { background: #e8edf5; }
table.data th.sortable-col::after {
  content: ' ⇅';
  color: var(--c-border);
  font-size: 10px;
  font-weight: 400;
}
table.data th.sortable-col.asc::after  { content: ' ▲'; color: var(--c-brand); }
table.data th.sortable-col.desc::after { content: ' ▼'; color: var(--c-brand); }

/* ── Code ──────────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--c-code-fg);
}
code.dtp        { background: var(--c-dtp-bg);        color: var(--c-dtp);        border-color: #fcd34d; }
code.dataset    { background: var(--c-dataset-bg);    color: var(--c-dataset);    border-color: #93c5fd; }
code.datasource { background: var(--c-datasource-bg); color: var(--c-datasource); border-color: #c4b5fd; }
code.dim        { background: var(--c-dim-bg);        color: var(--c-dim);        border-color: #6ee7b7; }
code.process    { background: var(--c-process-bg);    color: var(--c-process);    border-color: #b8cfe4; }
code.workspace  { background: var(--c-workspace-bg);  color: var(--c-workspace);  border-color: #a5b4fc; }
code.sm         { background: var(--c-sm-bg);         color: var(--c-sm);         border-color: #5eead4; }
code.etl        { background: var(--c-etl-bg);        color: var(--c-etl);        border-color: #7dd3fc; }
code.ic         { background: var(--c-ic-bg);         color: var(--c-ic);         border-color: #c4b5fd; }
/* Dense code (inside compact tables) — replaces inline font-size:10/11px on <code> */
code.code-xs    { font-size: 11px; }

/* ── SQL block ─────────────────────────────────────────────── */
.sql-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 5px 8px;
  background: #161b22;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid #30363d;
}
.sql-toolbar-btn {
  font-size: 11px;
  padding: 2px 8px;
  background: #21262d;
  color: #8b949e;
  border: 1px solid #30363d;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background .1s, color .1s;
}
.sql-toolbar-btn:hover { background: #30363d; color: #e6edf3; }
.sql-toolbar-lines {
  font-size: 11px;
  color: #484f58;
  margin-right: auto;
}
.sql-wrap {
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  max-width: 100%;
}
.sql-wrap.with-toolbar {
  border-radius: 0 0 var(--radius) var(--radius);
}
.sql-wrap pre {
  margin: 0;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-all;
  max-height: 520px;
  overflow-y: auto;
}
/* hljs overrides — light theme for SQL bodies */
.sql-wrap pre code.hljs {
  background: var(--c-bg-subtle);
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-text);
}
.sql-wrap pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--c-text);
  font-size: inherit;
}
/* Light-theme syntax token colours (override dark stylesheet) */
.sql-wrap .hljs-keyword, code.etl-text .hljs-keyword         { color: #0369a1; font-weight: 600; }
.sql-wrap .hljs-built_in, code.etl-text .hljs-built_in       { color: #0891b2; }
.sql-wrap .hljs-string,   code.etl-text .hljs-string         { color: #16a34a; }
.sql-wrap .hljs-number,   code.etl-text .hljs-number         { color: #7c3aed; }
.sql-wrap .hljs-operator, code.etl-text .hljs-operator       { color: var(--c-text); }
.sql-wrap .hljs-comment,  code.etl-text .hljs-comment        { color: var(--c-text-faint); font-style: italic; }
.sql-wrap .hljs-title,    code.etl-text .hljs-title          { color: #b45309; }
.sql-wrap .hljs-variable, code.etl-text .hljs-variable       { color: #be185d; }

/* etl-text after hljs: keep our light bg */
code.etl-text.hljs {
  background: var(--c-bg-subtle);
  color: var(--c-text);
  padding: inherit;
}

/* io-detail expand toggle button */
button.io-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 13px;
  color: var(--c-text-muted);
  border-radius: var(--radius-sm);
  line-height: 1;
}
button.io-expand-btn:hover { background: var(--c-bg-alt); color: var(--c-text); }

/* ── Global search dropdown ────────────────────────────────── */
.search-dropdown {
  position: fixed;
  top: var(--topbar-h);
  left: 50%;
  transform: translateX(-200px); /* align under the search input */
  width: 540px;
  max-height: 440px;
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 2px solid var(--c-brand);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  z-index: 2000;
  display: none;
}
.search-dropdown.open { display: block; }
.search-group-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--c-text-faint);
  padding: 8px 14px 4px;
  background: var(--c-bg);
  position: sticky;
  top: 0;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--c-border-soft);
  text-decoration: none;
  color: var(--c-text);
  transition: background .1s;
}
.search-result:hover,
.search-result.kbd-active { background: #eff6ff; }
.search-result-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 52px;
  text-align: center;
}
.badge-proc{ background: var(--c-process-bg);   color: var(--c-process);   }
.badge-ws  { background: var(--c-workspace-bg); color: var(--c-workspace); }
.badge-ds  { background: var(--c-dataset-bg);   color: var(--c-dataset);   }
.badge-dtp { background: var(--c-dtp-bg);       color: var(--c-dtp);       }
.badge-sm  { background: var(--c-sm-bg);        color: var(--c-sm);        }
.badge-fld { background: var(--c-bg);           color: var(--c-text-muted);}
.badge-dim { background: var(--c-dim-bg);       color: var(--c-dim);       }
.badge-ent { background: var(--c-dataset-bg);   color: var(--c-dataset);   }
.badge-fst { background: #f0fdf4;               color: #15803d;            }
.badge-etl  { background: var(--c-etl-bg);       color: var(--c-etl);       }
.badge-form { background: var(--c-form-bg);      color: var(--c-form);      }
.badge-rule { background: var(--c-rule-bg);      color: var(--c-rule);      }
.badge-ic   { background: var(--c-ic-bg);        color: var(--c-ic);        }
.search-result-body { flex: 1; min-width: 0; }
.search-result-code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--c-text-muted);
}
.search-result-desc {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-desc mark {
  background: #fef08a;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.search-result-ctx {
  font-size: 11px;
  color: var(--c-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--c-text-faint);
  font-size: 13px;
}
.search-filters {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--c-border-soft);
}
.sf-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-family: var(--font-sans);
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 2px 9px; cursor: pointer; color: var(--c-text-muted);
  transition: background .1s, border-color .1s, color .1s;
}
.sf-chip:hover { background: #eff6ff; border-color: #bfdbfe; color: var(--c-text); }
.sf-chip.sf-active {
  background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; font-weight: 600;
}
.sf-count {
  font-size: 10px; background: rgba(0,0,0,.07); border-radius: 8px;
  padding: 0 5px; line-height: 1.6;
}
.sf-chip.sf-active .sf-count { background: rgba(29,78,216,.12); }
.search-hint {
  padding: 6px 14px;
  font-size: 11px;
  color: var(--c-text-faint);
  border-top: 1px solid var(--c-border-soft);
  display: flex;
  justify-content: space-between;
}

/* ── Search page (search.html) ─────────────────────────────── */
.sp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.sp-input-wrap {
  flex: 1; position: relative; max-width: 640px;
}
.sp-input-wrap .search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--c-text-muted); pointer-events: none;
}
.sp-input-wrap input {
  width: 100%; padding: 8px 14px 8px 34px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  font-size: 14px; background: var(--c-bg); color: var(--c-text);
  outline: none; transition: border-color .15s;
}
.sp-input-wrap input:focus { border-color: var(--c-brand); }
.sp-summary {
  font-size: 12px; color: var(--c-text-muted); padding: 0 24px 0 0; white-space: nowrap;
}
.sp-body {
  display: flex; flex: 1; overflow: hidden;
}
.sp-facets {
  width: 200px; flex-shrink: 0;
  border-right: 1px solid var(--c-border);
  padding: 14px 0;
  overflow-y: auto;
  background: var(--c-surface);
}
.sp-facet-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-faint); padding: 10px 16px 4px;
}
.sp-facet-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 16px; font-size: 12px; color: var(--c-text-muted);
  cursor: pointer; border-radius: 0; transition: background .1s;
  border: none; background: none; width: 100%; text-align: left;
}
.sp-facet-item:hover { background: var(--c-brand-light); color: var(--c-text); }
.sp-facet-item.sp-facet-active {
  background: var(--c-brand-light); color: var(--c-brand); font-weight: 600;
  border-left: 2px solid var(--c-brand); padding-left: 14px;
}
.sp-facet-count {
  font-size: 10px; color: var(--c-text-faint); background: var(--c-surface-2);
  border-radius: 8px; padding: 0 6px; line-height: 1.7; margin-left: 6px; flex-shrink: 0;
}
.sp-results {
  flex: 1; overflow-y: auto; padding: 0;
}
.sp-placeholder {
  padding: 60px 32px; text-align: center; color: var(--c-text-faint); font-size: 14px;
}
.sp-group-header {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-border);
  padding: 5px 20px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--c-text-muted);
}
.sp-result {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 20px; border-bottom: 1px solid var(--c-border-soft);
  text-decoration: none; color: var(--c-text); transition: background .1s;
}
.sp-result:hover { background: #eff6ff; }
.sp-result-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; padding: 2px 7px; border-radius: 3px;
  min-width: 72px; text-align: center; margin-top: 2px;
}
.sp-result-body { flex: 1; min-width: 0; }
.sp-result-title {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-result-title mark { background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px; }
.sp-result-code {
  font-family: var(--font-mono); font-size: 11px; color: var(--c-text-muted);
}
.sp-result-code mark { background: #fef08a; color: inherit; }
.sp-result-ctx { font-size: 11px; color: var(--c-text-faint); }
.sp-result-snippet {
  font-size: 11px; color: var(--c-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.sp-result-snippet mark { background: #fef08a; color: inherit; border-radius: 2px; }
.sp-no-results {
  padding: 48px 24px; text-align: center; color: var(--c-text-faint); font-size: 14px;
}
.sp-more-hint {
  padding: 10px 20px; font-size: 11px; color: var(--c-text-faint);
  border-top: 1px solid var(--c-border-soft); font-style: italic;
}

/* ── Dimensions overview section header ────────────────────── */
.dims-section-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.dims-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
  border-radius: 4px; padding: 2px 7px;
}
.dims-section-label-aih {
  background: #f0fdf4; color: #15803d; border-color: #bbf7d0;
}
.dims-section-title {
  font-size: 14px; font-weight: 600; color: var(--c-text);
}
.dims-section-desc {
  font-size: 12px; color: var(--c-text-muted); margin-left: 4px;
}

/* ── Annotation badge ──────────────────────────────────────── */
.annotation-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--c-warn);
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 1px 7px;
}

/* ── Collapsible step blocks ───────────────────────────────── */
.step-block {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--c-surface);
  overflow: hidden;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--c-bg);
  border-bottom: 1px solid transparent;
  transition: background .12s;
}
.step-header:hover { background: var(--c-brand-light); }
.step-header.open  { border-bottom-color: var(--c-border); }

/* Entity-colored variants — set bg via class, override color in dark mode */
.step-number-etl { background: var(--c-etl); }
.step-number-ds  { background: var(--c-ds);  }
.step-number-dtp { background: var(--c-dtp); }

.step-number {
  width: 26px; height: 26px;
  background: var(--c-brand);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.step-title { font-size: 13.5px; font-weight: 600; color: var(--c-text); }
.step-subtitle { font-size: 12px; color: var(--c-text-muted); margin-top: 1px; }

.step-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-left: 4px; }

.step-toggle {
  margin-left: auto;
  font-size: 16px;
  color: var(--c-text-faint);
  transition: transform .2s;
}
.step-header.open .step-toggle { transform: rotate(180deg); }

.step-body {
  display: none;
  padding: 16px;
}
.step-body.open { display: block; }

/* ── Task cards (within step) ──────────────────────────────── */
.task-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--c-surface);
  font-size: 12.5px;
}
.task-card .task-type-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 4px;
  display: inline-block;
}
.task-type-dtp     { background: var(--c-dtp-bg);     color: var(--c-dtp); }
.task-type-form    { background: var(--c-form-bg);    color: var(--c-form); }
.task-type-rule    { background: var(--c-rule-bg);    color: var(--c-rule); }
.task-type-check   { background: #f0fdf4;             color: var(--c-ok); }
.task-type-dp      { background: var(--c-brand-light);color: var(--c-brand); }
.task-type-etl     { background: #ecfdf5;             color: #065f46; }
.task-type-submit  { background: #fffbeb;             color: #92400e; }
.task-type-close   { background: #f1f5f9;             color: #475569; }
.task-type-generic { background: #f8fafc;             color: #64748b; }

/* ── Overview grid (home page) ─────────────────────────────── */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 700px) {
  .overview-grid { grid-template-columns: repeat(3, 1fr); }
}

.overview-tile {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--c-surface);
  text-decoration: none;
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .15s, box-shadow .15s;
}
.overview-tile:hover {
  border-color: var(--c-brand);
  box-shadow: 0 2px 8px rgba(30,58,95,.1);
}
.overview-tile.disabled { opacity: .45; pointer-events: none; }

.tile-icon { font-size: 20px; margin-bottom: 2px; }
.tile-title { font-weight: 600; font-size: 13.5px; }
.tile-desc  { font-size: 12px; color: var(--c-text-muted); }
.tile-count { font-size: 18px; font-weight: 700; color: var(--c-brand); margin-top: 6px; }

/* ── Overview — architecture flow (home page) ─────────────── */
.arch-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .arch-flow { grid-template-columns: 1fr; }
}
.arch-col {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.arch-col-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: -14px -16px 10px;
  padding: 7px 16px;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--c-border);
}
.arch-head-in      { background: rgba(3,105,161,.10); color: var(--c-etl); }
.arch-head-process { background: rgba(217,119,6,.10);  color: var(--c-dtp); }
.arch-head-out     { background: rgba(8,145,178,.10);  color: var(--c-form); }
[data-theme="dark"] .arch-head-in      { background: rgba(3,105,161,.20); }
[data-theme="dark"] .arch-head-process { background: rgba(217,119,6,.20);  }
[data-theme="dark"] .arch-head-out     { background: rgba(8,145,178,.20);  }
.arch-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12.5px;
  gap: 8px;
}
.arch-row a { color: var(--c-text); text-decoration: none; }
.arch-row a:hover { color: var(--c-brand); text-decoration: underline; }
.arch-row-label { color: var(--c-text-muted); flex: 1; }
.arch-count {
  font-weight: 700;
  font-size: 13px;
  color: var(--c-brand);
  min-width: 28px;
  text-align: right;
}
.arch-count.zero { color: var(--c-text-faint); font-weight: 400; }
.arch-sub {
  font-size: 11px;
  color: var(--c-text-faint);
  padding: 1px 0 3px 0;
}

/* ── Overview — dimension table (home page) ────────────────── */
.dim-overview-table td, .dim-overview-table th { font-size: 12.5px; }
.dim-stub-row td { opacity: .55; }

/* ── Overview — module health grid (home page) ─────────────── */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 16px;
}
.health-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 12.5px;
}
.health-row:last-child { border-bottom: none; }
.health-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.health-ok   { background: rgba(74,222,128,.15);  color: var(--c-ok);     border: 1px solid rgba(74,222,128,.35); }
.health-warn { background: rgba(251,191,36,.15);  color: var(--c-warn);   border: 1px solid rgba(251,191,36,.35); }
.health-miss { background: rgba(148,163,184,.12); color: var(--c-text-faint); border: 1px solid var(--c-border); }
.health-label { font-weight: 600; min-width: 110px; }
.health-detail { color: var(--c-text-muted); font-size: 11.5px; flex: 1; }
[data-theme="dark"] .health-ok   { background: rgba(74,222,128,.10);  border-color: rgba(74,222,128,.25); }
[data-theme="dark"] .health-warn { background: rgba(251,191,36,.10);  border-color: rgba(251,191,36,.25); }
[data-theme="dark"] .health-miss { background: rgba(148,163,184,.07); }

/* ── Overview V2 — synthesis landing ───────────────────────── */
.ov2-arch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .ov2-arch { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ov2-arch { grid-template-columns: 1fr; } }

.ov2-tile {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
a.ov2-tile-head {
  text-decoration: none;
  color: inherit;
  transition: filter .12s;
}
a.ov2-tile-head:hover { filter: brightness(0.95); }
[data-theme="dark"] a.ov2-tile-head:hover { filter: brightness(1.08); }
.ov2-kpi-link {
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.ov2-kpi-link:hover { background: var(--c-bg) !important; }
.ov2-kpi-link:hover .ov2-kpi-l { color: var(--tile-accent, var(--c-brand)); }
.ov2-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: var(--tile-tint, rgba(30,58,95,.08));
  border-bottom: 1px solid var(--c-border);
}
.ov2-tile-ico { color: var(--tile-accent, var(--c-brand)); display: flex; flex-shrink: 0; }
.ov2-tile-ico svg { width: 18px; height: 18px; }
.ov2-tile-name {
  font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--tile-accent, var(--c-brand));
}
/* KPI grid — 1px gap reveals the border colour as hairline separators */
.ov2-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-border);
  flex: 1;
}
.ov2-kpi { background: var(--c-surface); padding: 11px 13px; }
.ov2-kpi.wide { grid-column: 1 / -1; }
.ov2-kpi-n { font-size: 21px; font-weight: 700; line-height: 1; color: var(--c-text); }
.ov2-kpi-n.zero { color: var(--c-text-faint); font-weight: 400; }
.ov2-kpi.primary .ov2-kpi-n { color: var(--tile-accent, var(--c-brand)); }
.ov2-kpi-l { font-size: 11px; color: var(--c-text-muted); margin-top: 4px; }

/* Tile accent palette (semantic entity tokens) */
.ov2-tile.t-flow    { --tile-accent: var(--c-etl);       --tile-tint: rgba(3,105,161,.10); }
.ov2-tile.t-aih     { --tile-accent: var(--c-workspace);  --tile-tint: rgba(67,56,202,.10); }
.ov2-tile.t-process { --tile-accent: var(--c-process);    --tile-tint: rgba(30,58,95,.08); }
.ov2-tile.t-output  { --tile-accent: var(--c-form);       --tile-tint: rgba(14,116,144,.10); }
[data-theme="dark"] .ov2-tile.t-flow    { --tile-tint: rgba(56,189,248,.13); }
[data-theme="dark"] .ov2-tile.t-aih     { --tile-tint: rgba(165,180,252,.13); }
[data-theme="dark"] .ov2-tile.t-process { --tile-tint: rgba(147,197,253,.13); }
[data-theme="dark"] .ov2-tile.t-output  { --tile-tint: rgba(103,232,249,.13); }

/* Vital signs — two-column layout: dimensions (left) · modules (right) */
.ov2-vitals {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
}
@media (max-width: 900px) { .ov2-vitals { grid-template-columns: 1fr; gap: 20px; } }

.ov2-vitals-head {
  font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: 11px;
}

.ov2-bars { display: flex; flex-direction: column; gap: 9px; }
.ov2-bar-row { display: grid; grid-template-columns: 88px minmax(0, 34%) auto; align-items: center; gap: 10px; }
.ov2-bar-code { text-align: right; }
.ov2-bar-track {
  display: block;
  height: 16px; border-radius: 4px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.ov2-bar-fill {
  display: block; height: 100%; min-width: 3px;
  background: var(--c-dim);
  border-radius: 3px 0 0 3px;
}
.ov2-bar-val { font-size: 13px; font-weight: 700; color: var(--c-text); text-align: left; }

/* Aggregate totals under the bars */
.ov2-agg {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--c-border);
}
.ov2-agg-num   { font-size: 19px; font-weight: 800; color: var(--c-brand); }
[data-theme="dark"] .ov2-agg-num { color: var(--c-text); }
.ov2-agg-label { font-size: 11px; color: var(--c-text-muted); margin-left: 6px; }

/* Module coverage pills — tidy grid, presence only (counts live in tiles) */
.ov2-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ov2-mod {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; padding: 5px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
}
.ov2-mod-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ov2-mod.on  { background: rgba(22,163,74,.09); color: var(--c-ok); border-color: rgba(22,163,74,.30); }
.ov2-mod.on  .ov2-mod-dot { background: var(--c-ok); }
.ov2-mod.off { color: var(--c-text-faint); }
.ov2-mod.off .ov2-mod-dot { background: var(--c-text-faint); }
[data-theme="dark"] .ov2-mod.on { background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.30); }

/* Build warnings */
.ov2-warn-list { display: flex; flex-direction: column; gap: 7px; }
.ov2-warn-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-warn);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--c-bg);
}
.ov2-warn-count {
  font-size: 15px; font-weight: 800; color: var(--c-warn);
  min-width: 36px; text-align: center; flex-shrink: 0;
}
.ov2-warn-text { font-size: 12.5px; color: var(--c-text); }
.ov2-warn-cat  { font-size: 11px; color: var(--c-text-faint); }
.ov2-clean {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--c-ok);
}

/* ── Build info card (index.html) ─────────────────────────── */
.bld-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 20px;
}
@media (max-width: 900px) { .bld-grid { grid-template-columns: 1fr; } }
.bld-stacked-bar {
  display: flex; height: 18px; border-radius: 5px; overflow: hidden; gap: 1px;
  background: var(--c-border);
}
.bld-seg { height: 100%; min-width: 2px; }
.bld-legend { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 7px; }
.bld-leg-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--c-text-muted);
}
.bld-leg-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.bld-phase-tbl { width: 100%; border-collapse: collapse; margin-top: 12px; }
.bld-phase-tbl td { padding: 3px 0; font-size: 12px; vertical-align: middle; }
.bld-phase-tbl td:first-child { color: var(--c-text-muted); font-family: 'Courier New', monospace; padding-right: 10px; white-space: nowrap; }
.bld-phase-tbl td.bld-bar-cell { width: 100%; }
.bld-phase-tbl td:last-child { text-align: right; color: var(--c-text); font-weight: 600; white-space: nowrap; padding-left: 8px; }
.bld-bar-mini { height: 5px; border-radius: 3px; display: inline-block; }
.bld-kpis { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-border); }
.bld-kpi { flex: 1; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 9px 10px; text-align: center; }
.bld-kpi-n { font-size: 19px; font-weight: 700; color: var(--c-text); line-height: 1.2; }
.bld-kpi-n.bld-ok { color: var(--c-ok); }
.bld-kpi-n.bld-warn { color: var(--c-warn); }
.bld-kpi-l { font-size: 10px; color: var(--c-text-muted); margin-top: 2px; }
[data-theme="dark"] .bld-kpi { background: var(--c-panel-inset); }

/* ── Lineage graph container ───────────────────────────────── */
.lineage-graph {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 16px;
  min-height: 120px;
}

/* Mermaid rendered graph sits inside this */
.lineage-graph .mermaid { font-size: 13px; }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  margin-left: var(--sidebar-w);
  transition: margin-left .18s ease;
  border-top: 1px solid var(--c-border);
  padding: 14px 32px;
  font-size: 11.5px;
  color: var(--c-text-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--c-surface);
}

.hidden { display: none !important; }

/* ── Column filter funnel + popup (shared across all pages) ─── */
.col-filter {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--c-text-faint);
  font-size: 11px;
  padding: 0 2px;
  margin-left: 2px;
  line-height: 1;
  vertical-align: middle;
}
.col-filter:hover { color: var(--c-dim); }
.col-filter.active { color: var(--c-ok); font-weight: 700; }
th.col-filterable { white-space: nowrap; }

#col-filter-popup {
  position: fixed;
  z-index: 3000;
  min-width: 200px;
  max-width: 300px;
  max-height: 340px;
  display: none;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 2px solid var(--c-dim);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
#col-filter-popup.open { display: flex; }
.cf-search {
  margin: 8px;
  padding: 5px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  outline: none;
}
.cf-search:focus { border-color: var(--c-dim); }
.cf-actions {
  display: flex;
  gap: 10px;
  padding: 0 10px 6px;
  font-size: 11px;
}
.cf-actions a { color: var(--c-dim); cursor: pointer; text-decoration: none; }
.cf-actions a:hover { text-decoration: underline; }
.cf-list { overflow-y: auto; padding: 2px 0 6px; }
.cf-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px;
  font-size: 12.5px;
  color: var(--c-text);
  cursor: pointer;
  text-transform: none;
}
.cf-item:hover { background: var(--c-bg); }
.cf-item input { cursor: pointer; }
.cf-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-empty { padding: 10px 12px; font-size: 12px; color: var(--c-text-faint); }

/* ── Text-contains column filter for high-cardinality DATA tables ──
   (lookup element content; distinct from the categorical funnel above) */
.data-col-filter {
  font-size: 10px; width: 100%; max-width: 100px; margin-top: 3px;
  padding: 1px 4px; border: 1px solid var(--c-border); border-radius: 2px;
  background: var(--c-bg); color: var(--c-text); font-family: inherit;
}

/* ── Hierarchy path badge (grouping / ABBIM) ────────────────── */
.hier-path-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px;
  padding: 1px 6px; font-size: 10.5px; font-family: var(--font-mono);
  color: var(--c-text); white-space: nowrap; margin: 0 4px 2px 0;
  cursor: default;
}
.hier-path-sep { color: var(--c-text-faint); font-size: 9px; }

/* ── ABBI / ABBIM hierarchy chips (inline, flex-wrap) ────────── */
.hier-chips-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px;
}
.hier-abbi-row {
  display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap;
}
.hier-abbi-hier { font-size: 9.5px !important; }
.hier-abbi-node { display: inline-flex; align-items: baseline; gap: 3px; }
.hier-abbi-code {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--c-text); background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 3px;
  padding: 0px 5px; line-height: 1.6;
}
.hier-abbi-desc {
  font-size: 10px; color: var(--c-text-muted);
  font-family: var(--font-sans); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
/* Brief highlight when jumping to a node from a member chip */
.node-flash {
  animation: nodeFlash 1.4s ease-out forwards;
}
@keyframes nodeFlash {
  0%   { background: rgba(59,130,246,0.18); border-radius: 3px; }
  100% { background: transparent; }
}

/* ── Scenario-Period accordion ──────────────────────────────── */
.sp-group { border: 1px solid var(--c-border-soft); border-radius: 6px; margin-bottom: 6px; overflow: hidden; }
.sp-group-hdr {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  cursor: pointer; background: var(--c-bg-subtle); user-select: none;
  font-size: 12.5px; font-weight: 600;
}
.sp-group-hdr:hover { background: #e8edf5; }
.sp-caret { font-size: 14px; color: var(--c-text-muted); transition: transform .15s ease; flex-shrink: 0; }
.sp-summary { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-group-body { display: none; border-top: 1px solid var(--c-border-soft); }
.sp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sp-period-table { margin: 0; border-radius: 0; box-shadow: none; border: none; }
.sp-period-table th, .sp-period-table td { padding: 5px 10px; }
.sp-subtoggle { display: inline-flex; }

/* ── Utility ───────────────────────────────────────────────── */
.muted   { color: var(--c-text-muted); }
.faint   { color: var(--c-text-faint); }
hr.soft  { border: none; border-top: 1px solid var(--c-border-soft); margin: 12px 0; }
a        { color: var(--c-brand); text-decoration: none; }
a:hover  { text-decoration: underline; }

/* ── Design-system type roles (see RETRODOC_DESIGN_SYSTEM.md §2/§4) ── */
.t-meta  { font-size: 12px; color: var(--c-text-muted); }
.t-micro { font-size: 11px; }
/* Uppercase micro-label — the single spec for inline field labels */
.t-label, .field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--c-text-faint);
}
/* Inline "label · value" row inside step-bodies / meta strips */
.field-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}
.field-row .field-label { flex-shrink: 0; }

/* ── Empty state (the single "nothing to show" component) ──── */
.empty-state {
  text-align: center;
  padding: 32px;
  color: var(--c-text-faint);
  font-size: 13px;
}

/* ── Sidebar Configuration / Legend (see §10) ──────────────── */
.legend-body { padding: 4px 16px 10px 30px; }
.legend-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--c-text-muted); padding: 2px 0;
}
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-pills { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 0; }

/* ── Segmented view toggle (shared: dimension, ETL routine, …) ─ */
.view-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface);
}
.view-tab {
  font-size: 12.5px;
  padding: 5px 14px;
  border: none;
  background: var(--c-surface);
  color: var(--c-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.view-tab + .view-tab { border-left: 1px solid var(--c-border); }
.view-tab:hover { background: var(--c-bg); }
.view-tab-active { background: var(--c-brand-light); color: var(--c-brand); font-weight: 600; }
.view-tab-count {
  font-size: 11px;
  background: var(--c-bg);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--c-text-faint);
}

/* ── ETL enriched-view inline chips (CAMPO / {param} tokens) ── */
.etl-dim-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eff6ff;
  color: var(--c-etl, #0369a1);
  border: 1px solid #bfdbfe;
  border-radius: 3px;
  padding: 0 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  vertical-align: middle;
  line-height: 1.6;
  cursor: default;
}
.etl-dim-chip .etl-chip-sup,
.etl-param-chip .etl-chip-sup {
  font-size: 9px;
  color: var(--c-text-faint);
  margin-left: 2px;
}
.etl-param-chip {
  display: inline-flex;
  align-items: center;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 3px;
  padding: 0 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  vertical-align: middle;
  line-height: 1.6;
  cursor: default;
}
/* Inside a <pre>, chips display inline without breaking flow */
pre .etl-dim-chip, pre .etl-param-chip { line-height: inherit; }

/* ── Inactive ETL step-block (when revealed via Show inactive) ─ */
.step-inactive-shown > .step-header {
  opacity: 0.55;
  background: var(--c-surface-2);
}
.step-inactive-shown > .step-header .step-number {
  filter: grayscale(1) opacity(.6);
}

/* ── Hamburger button (topbar, hidden on desktop) ──────────── */
.topbar-hamburger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.topbar-hamburger:hover { background: rgba(255,255,255,.15); }

/* ── Sidebar overlay (mobile, behind open sidebar) ─────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 89; /* below sidebar (90) */
}
.sidebar-overlay.sidebar-overlay-visible { display: block; }

/* Sidebar open state (hamburger context) */
.sidebar.sidebar-open {
  width: 240px !important;
  overflow-y: auto;
  box-shadow: 4px 0 16px rgba(0,0,0,.18);
}

/* ── Source-info popover ("source" chip on card headers) ───── */
.card-src {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
}
.card-src-icon {
  font-size: 11px;
  color: var(--c-text-faint);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  background: var(--c-surface);
  padding: 0px 4px;
  cursor: default;
  user-select: none;
  line-height: 1.6;
  transition: color .12s, border-color .12s, background .12s;
}
.card-src:hover .card-src-icon {
  color: var(--c-brand);
  border-color: var(--c-brand);
  background: var(--c-brand-light);
}
.card-src-popup {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 14px rgba(0,0,0,.13);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--c-text-muted);
  white-space: nowrap;
  z-index: 300;
  pointer-events: none;
  transition: opacity .14s;
}
.card-src:hover .card-src-popup { visibility: visible; opacity: 1; }

/* ── Card-level tab bar (in-card tabs, e.g. process_detail) ─── */
.card-tabbar {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  padding: 0 16px;
}
.card-tabbar .view-tab {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 9px 14px;
}
.card-tabbar .view-tab + .view-tab { border-left: none; }
.card-tabbar .view-tab-active {
  border-bottom-color: var(--c-brand);
  background: none;
  color: var(--c-brand);
}
.card-subtabbar {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
  padding: 0 12px;
}
.card-subtabbar .view-tab {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 6px 14px;
  font-size: 11.5px;
}
.card-subtabbar .view-tab + .view-tab { border-left: none; }
.card-subtabbar .view-tab-active {
  border-bottom-color: var(--c-brand);
  background: none;
  color: var(--c-brand);
}

/* ── Grouping tree (ETL job-groups + Form-groups pages) ─────────
   Shared structure for the two ABBIM-style grouping browse trees.
   Accent is parameterised via --tree-accent (defaults to ETL blue);
   add .tree-accent-form for the cyan Forms variant. EVERYTHING is
   scoped under .group-tree so it never touches dimension_detail's
   hierarchy tree, which reuses some of these same class names. */
.group-tree { --tree-accent: var(--c-etl); --tree-accent-bg: var(--c-etl-bg); }
.group-tree.tree-accent-form { --tree-accent: var(--c-form); --tree-accent-bg: var(--c-form-bg); }
.group-tree .dim-tree          { list-style: none; padding-left: 0; margin: 0; }
.group-tree .dim-tree-children { padding-left: 24px; border-left: 2px solid var(--c-border-soft); margin-left: 8px; margin-top: 2px; }
.group-tree .dim-node          { padding: 2px 0; }
.group-tree details > summary  { list-style: none; cursor: pointer; }
.group-tree details > summary::-webkit-details-marker { display: none; }
.group-tree .dim-node-summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 4px; user-select: none; line-height: 1.5;
}
.group-tree details > summary.dim-node-summary:hover { background: var(--tree-accent-bg); }
.group-tree details > summary.dim-node-summary::before {
  content: '▶'; font-size: 9px; color: var(--tree-accent);
  transition: transform .15s; flex-shrink: 0;
}
.group-tree details[open] > summary.dim-node-summary::before { transform: rotate(90deg); }
.group-tree .dim-node-desc  { color: var(--c-text-muted); font-size: 12px; }
.group-tree .dim-node-count { font-size: 11px; }
.group-tree .dim-member {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px 2px 10px; font-size: 12px; line-height: 1.5;
}
.group-tree .dim-member-desc { color: var(--c-text-muted); }
.group-tree code.code-ger {
  background: var(--tree-accent-bg); color: var(--tree-accent);
  border: 1px solid color-mix(in srgb, var(--tree-accent) 25%, transparent);
  padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.group-tree code.code-ent {
  background: var(--c-dataset-bg); color: var(--c-dataset); border: 1px solid #93c5fd;
  padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 400; white-space: nowrap;
}
.group-tree a:hover code.code-ent { filter: brightness(.93); }
.group-tree .tree-legend {
  display: flex; gap: 16px; padding: 6px 8px; margin-bottom: 12px;
  background: var(--c-bg); border-radius: 4px; font-size: 11px; color: var(--c-text-muted);
}
.group-tree .tree-legend-item { display: flex; align-items: center; gap: 5px; }
.group-tree .tree-scroll { overflow-x: auto; }
/* Global small button (used in card headers for Expand/Collapse all etc.) */
.btn-xs {
  font-size: 12px; padding: 3px 10px;
  border: 1px solid var(--c-border); border-radius: 4px;
  background: var(--c-bg); cursor: pointer; color: var(--c-text-muted);
  vertical-align: middle;
}
.btn-xs:hover { border-color: var(--c-brand); color: var(--c-brand); }
.group-tree .btn-xs {
  padding: 4px 10px; background: var(--c-surface);
}
.group-tree .btn-xs:hover { border-color: var(--tree-accent); color: var(--tree-accent); }

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

/* ① Narrow desktop / large tablet (≤ 1100px): auto-collapse sidebar, show hamburger */
@media (max-width: 1100px) {
  :root { --sidebar-w: 0px; }
  .sidebar { width: 0; overflow: hidden; }
  .sidebar-toggle-btn { display: none; }
  .sidebar-resize-handle { display: none; }
  .topbar-hamburger { display: flex; align-items: center; }
  .main { margin-left: 0; padding: 20px 20px 40px; }
}

/* ② Tablet / small laptop (≤ 900px): tighten padding + kv grid */
@media (max-width: 900px) {
  .main { padding: 14px 14px 32px; }
  .kv { grid-template-columns: min(160px, 32%) 1fr; }
  .topbar-search { min-width: 0; flex-shrink: 1; }
  .topbar-meta { display: none; }
}

/* ③ Mobile (≤ 600px): single-column, full-bleed cards */
@media (max-width: 600px) {
  .main { padding: 10px 8px 24px; }
  .card { border-radius: 0; margin-left: -8px; margin-right: -8px; }
  .page-head { flex-direction: column; gap: 6px; }
  .page-head-meta { flex-wrap: wrap; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { padding-bottom: 0; color: var(--c-text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
  .topbar-search { max-width: 200px; }
  .sub-nav { flex-wrap: wrap; gap: 4px; }
}

/* ── Dark theme (set via data-theme="dark" on <html>, JS-controlled) ─ */
:root[data-theme="dark"] {
  /* Surfaces & neutrals */
  --c-bg:          #0f1117;
  --c-surface:     #1a1d27;
  --c-surface-2:   #222636;
  --c-panel-inset: #1e2130;
  --c-bg-alt:      var(--c-surface-2);
  --c-bg-subtle:   var(--c-surface-2);
  --c-border:      #2e3347;
  --c-border-soft: #262a38;
  --c-text:        #dde2f0;
  --c-text-muted:  #8891a8;
  --c-text-faint:  #555e75;

  --c-brand:       #1e3a5f;
  --c-brand-light: #172036;
  --c-code-fg:     var(--c-text);    /* navy is invisible on dark — use light body text */

  /* Phase flow graph nodes — readable on dark bg */
  --c-phase-node-bg:     #1a2d4a;
  --c-phase-node-stroke: #60a5fa;
  --c-phase-node-text:   #93c5fd;

  /* Entity foreground colors — shifted to lighter variants (pastel 300-400)
     so chips/badges are readable on their dark entity-bg backgrounds         */
  --c-process:     #93c5fd;   /* blue-300    (was navy #1e3a5f — invisible on dark) */
  --c-dtp:         #fcd34d;   /* amber-300   */
  --c-dataset:     #60a5fa;   /* blue-400    */
  --c-datasource:  #c4b5fd;   /* violet-300  */
  --c-dim:         #6ee7b7;   /* emerald-300 (was dark green #065f46 — invisible)  */
  --c-rule:        #fda4af;   /* rose-300    */
  --c-form:        #67e8f9;   /* cyan-300    */
  --c-workspace:   #a5b4fc;   /* indigo-300  */
  --c-sm:          #5eead4;   /* teal-300    */
  --c-etl:         #38bdf8;   /* sky-300     */
  --c-ic:          #c4b5fd;   /* violet-300  */
  --c-ds:          #34d399;   /* emerald-400 */

  /* Status colors — lighter variants for dark bg */
  --c-ok:          #4ade80;   /* green-400   (was #16a34a — too dark) */
  --c-ok-bg:       #052e16;   /* green-950 */
  --c-warn:        #fbbf24;   /* amber-400   */
  --c-danger:      #f87171;   /* red-400     */

  /* Entity backgrounds — very dark tints */
  --c-process-bg:  #0f1825;
  --c-dtp-bg:      #201300;
  --c-dataset-bg:  #0c1535;
  --c-datasource-bg:#150d30;
  --c-dim-bg:      #0a1f18;
  --c-rule-bg:     #1a0810;
  --c-form-bg:     #081a20;
  --c-workspace-bg:#101535;
  --c-sm-bg:       #081a18;
  --c-etl-bg:      #081520;
  --c-ic-bg:       #130d30;
  --c-ds-bg:       #0a1f15;
  --c-accent-bg:   var(--c-dataset-bg);
  --c-tooltip-bg:  #0f172a;
  --c-tooltip-text:#e2e8f0;
}

/* Layout */
[data-theme="dark"] .topbar { box-shadow: 0 1px 4px rgba(0,0,0,.4); }
[data-theme="dark"] .sidebar { background: #141720; border-right-color: var(--c-border); }
[data-theme="dark"] .card { box-shadow: 0 1px 4px rgba(0,0,0,.3); }
[data-theme="dark"] table.data thead th { background: var(--c-surface-2); }
[data-theme="dark"] pre,
[data-theme="dark"] code:not([class]) { background: var(--c-surface-2); color: var(--c-text); }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }

/* Pill status — near-white bg → transparent dark tint */
[data-theme="dark"] .pill-ok    { background: rgba(74,222,128,.12);  border-color: rgba(74,222,128,.3);  }
[data-theme="dark"] .pill-warn  { background: rgba(251,191,36,.12);  border-color: rgba(251,191,36,.3);  }
[data-theme="dark"] .pill-danger{ background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.3); }

/* Entity pill borders — muted for dark entity-bg */
[data-theme="dark"] .pill-process    { border-color: rgba(147,197,253,.3); }
[data-theme="dark"] .pill-dtp        { border-color: rgba(252,211,77,.3);  }
[data-theme="dark"] .pill-dataset    { border-color: rgba(96,165,250,.3);  }
[data-theme="dark"] .pill-datasource { border-color: rgba(196,181,253,.3); }
[data-theme="dark"] .pill-dim        { border-color: rgba(110,231,183,.3); }
[data-theme="dark"] .pill-rule       { border-color: rgba(253,164,175,.3); }
[data-theme="dark"] .pill-form       { border-color: rgba(103,232,249,.3); }
[data-theme="dark"] .pill-workspace  { border-color: rgba(165,180,252,.3); }
[data-theme="dark"] .pill-sm         { border-color: rgba(94,234,212,.3);  }
[data-theme="dark"] .pill-etl        { border-color: rgba(56,189,248,.3);  }

/* Table interactions */
[data-theme="dark"] table.data th.sortable-col:hover  { background: var(--c-surface-2); }
[data-theme="dark"] table.data tbody tr.row-highlight { background: rgba(250,204,21,.08); animation: none; }

/* Search */
[data-theme="dark"] .search-result:hover,
[data-theme="dark"] .search-result.kbd-active  { background: var(--c-brand-light); }
[data-theme="dark"] .search-result-desc mark   { background: rgba(250,204,21,.25); color: var(--c-text); }
[data-theme="dark"] .sf-chip                   { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text-muted); }
[data-theme="dark"] .sf-chip:hover             { background: var(--c-surface); border-color: var(--c-etl); color: var(--c-text); }
[data-theme="dark"] .sf-chip.sf-active         { background: var(--c-etl-bg); border-color: var(--c-etl); color: var(--c-etl); font-weight: 600; }
[data-theme="dark"] .sf-chip.sf-active .sf-count { background: rgba(56,189,248,.15); }
[data-theme="dark"] .sp-result:hover           { background: var(--c-surface-2); }
[data-theme="dark"] .badge-fst                 { background: var(--c-dim-bg); color: var(--c-dim); }

/* Dimension page */
[data-theme="dark"] .dims-section-label     { background: var(--c-etl-bg); color: var(--c-etl);  border-color: rgba(56,189,248,.2);  }
[data-theme="dark"] .dims-section-label-aih { background: var(--c-dim-bg); color: var(--c-dim);  border-color: rgba(110,231,183,.2); }
[data-theme="dark"] .hier-group-label-nr    { color: var(--c-warn); background: rgba(251,191,36,.08); }
[data-theme="dark"] .hier-row-active.hier-row-nr { border-left-color: var(--c-warn); background: rgba(251,191,36,.06); opacity: 1; }

/* WFM task type badges */
[data-theme="dark"] .task-type-check   { background: var(--c-dim-bg);       color: var(--c-ok);          }
[data-theme="dark"] .task-type-dp      { background: var(--c-workspace-bg);  color: var(--c-workspace);   }
[data-theme="dark"] .task-type-etl     { background: var(--c-etl-bg);        color: var(--c-etl);         }
[data-theme="dark"] .task-type-submit  { background: var(--c-dtp-bg);        color: var(--c-warn);        }
[data-theme="dark"] .task-type-close   { background: var(--c-surface-2);     color: var(--c-text-muted);  }
[data-theme="dark"] .task-type-generic { background: var(--c-surface-2);     color: var(--c-text-muted);  }

/* Step-block hover & code-ent chip — dark mode */
[data-theme="dark"] .step-header:hover { background: var(--c-surface-2); }
[data-theme="dark"] code.code-ent      { background: var(--c-dataset-bg); color: var(--c-dataset); border-color: rgba(96,165,250,.3); }

/* Sidebar nav-code chips — --c-bg blends into sidebar in dark mode */
[data-theme="dark"] .nav-code { background: var(--c-surface-2); color: var(--c-text-muted); }

/* Annotation badge / path badge / ABBI code chip */
[data-theme="dark"] .annotation-badge { background: rgba(251,191,36,.1);  border-color: rgba(252,211,77,.3); }
[data-theme="dark"] .hier-path-badge  { background: var(--c-surface-2);   border-color: var(--c-border);     color: var(--c-text-muted); }
[data-theme="dark"] .hier-abbi-code   { background: var(--c-surface-2);   border-color: var(--c-border); }

/* Step-number badges — entity foreground colors are too bright as bg in dark mode */
[data-theme="dark"] .step-number         { background: var(--c-surface-2);  color: var(--c-text-muted); }
[data-theme="dark"] .step-number-etl     { background: var(--c-etl-bg);     color: var(--c-etl);        }
[data-theme="dark"] .step-number-ds      { background: var(--c-ds-bg);      color: var(--c-ds);         }
[data-theme="dark"] .step-number-dtp     { background: var(--c-dtp-bg);     color: var(--c-dtp);        }

/* ETL enriched-view inline chips */
[data-theme="dark"] .etl-dim-chip   { background: var(--c-etl-bg); color: var(--c-etl);  border-color: rgba(56,189,248,.25);  }
[data-theme="dark"] .etl-param-chip { background: var(--c-dtp-bg); color: var(--c-warn); border-color: rgba(251,191,36,.25);  }

/* ── Shared semantic blocks (light + dark via token system) ─── */

/* AI-generated summary block (dataset, special method) */
.ai-summary-block {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--c-dim-bg);
  border: 1px solid rgba(110,231,183,.25);
  border-radius: var(--radius);
}
/* Light mode override — was hardcoded #f0fdf4 */
:root:not([data-theme="dark"]) .ai-summary-block {
  background: #f0fdf4;
  border-color: #86efac;
}
.ai-summary-date { color: var(--c-text-faint); }
:root:not([data-theme="dark"]) .ai-summary-date { color: #86efac; }

/* Warn/info card (border-left accent, e.g. "data not loaded" notices) */
.warn-info-card { border-left: 3px solid var(--c-warn); background: #fffbeb; }
[data-theme="dark"] .warn-info-card { background: rgba(251,191,36,.07); }
[data-theme="dark"] .warn-info-card h2 { color: var(--c-warn); }

/* CTP dimension pill */
.pill-ctp { background: var(--c-dtp-bg); color: var(--c-dtp); border-color: var(--c-dtp); font-size: 10px; padding: 1px 5px; }

/* ── Theme toggle button (topbar) ───────────────────────────── */
.topbar-theme-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  transition: background .15s;
}
.topbar-theme-btn:hover { background: rgba(255,255,255,.22); }

/* ── Form structure — chips, badges, axis tree ──────────────── */
/* Hierarchy code chip */
.chip-fstr-hier {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--c-surface-2); border: .5px solid var(--c-border);
  color: var(--c-text-muted);
}
/* FST code chip (amber — Financial Statement Template) */
.chip-fstr-fst {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  padding: 1px 5px; border-radius: 3px; font-weight: 500;
  background: var(--c-dtp-bg); border: .5px solid var(--c-dtp); color: var(--c-dtp);
}
/* FST item code chip */
.chip-fstr-fst-item {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--c-dtp-bg); border: .5px dashed var(--c-dtp); color: var(--c-text-muted);
}
/* Fixed node / element chip */
.chip-fstr-node {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--c-surface-2); border: .5px solid var(--c-border); color: var(--c-text);
}
/* Param reference chip (datasource purple) */
.chip-fstr-param {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--c-datasource-bg); border: .5px solid var(--c-datasource);
  color: var(--c-datasource);
}
/* System dim chip (LUNPER, COU) */
.chip-fstr-system {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--c-dtp-bg); border: .5px dashed var(--c-dtp); color: var(--c-dtp);
}
/* Type pills */
.fstr-type-fixed { background: var(--c-dim-bg); color: var(--c-dim); }
.fstr-type-param { background: var(--c-datasource-bg); color: var(--c-datasource); }
/* WS/DS breadcrumb path */
.fstr-ws-path {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 12px; color: var(--c-text-muted); margin-bottom: 8px;
}
.fstr-ws-code {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  border: .5px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text);
}
.fstr-ds-code {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  border: .5px solid var(--c-dataset); background: var(--c-dataset-bg); color: var(--c-dataset);
}
.fstr-ws-sep { color: var(--c-border); }
/* Matrix type badges */
.fstr-mat-aih {
  font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 4px;
  background: var(--c-dim-bg); border: .5px solid var(--c-dim); color: var(--c-dim);
}
.fstr-mat-cpm {
  font-size: 10px; padding: 1px 7px; border-radius: 4px;
  background: var(--c-surface-2); border: .5px solid var(--c-border); color: var(--c-text-muted);
}
/* AIH measure badge */
.fstr-aih-badge {
  font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 4px;
  background: var(--c-dim-bg); border: .5px solid var(--c-dim); color: var(--c-dim);
}
/* Dim group row — <details> with custom summary */
.fstr-dim-row { margin-bottom: 4px; }
.fstr-dim-row > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; cursor: pointer; list-style: none;
  border: .5px solid var(--c-border); border-radius: 5px;
  background: var(--c-surface-2); transition: background .1s;
  font-size: 12px; user-select: none;
}
.fstr-dim-row > summary::-webkit-details-marker { display: none; }
.fstr-dim-row > summary:hover { background: var(--c-bg-alt); }
.fstr-dim-row[open] > summary { background: var(--c-bg-alt); border-radius: 5px; }
.fstr-dim-arr {
  font-size: 9px; color: var(--c-text-muted);
  transition: transform .12s; display: inline-block;
}
.fstr-dim-row[open] > summary .fstr-dim-arr { transform: rotate(90deg); }
.fstr-dim-detail { margin: 4px 0 6px 20px; }
/* TGKML inline block inside table cell */
.fstr-tg-wrap { display: inline-block; }
.fstr-tg-wrap > summary {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; padding: 1px 5px; border-radius: 3px; list-style: none;
  background: var(--c-dtp-bg); color: var(--c-dtp); border: .5px solid var(--c-dtp);
  cursor: pointer; user-select: none;
}
.fstr-tg-wrap > summary::-webkit-details-marker { display: none; }
.fstr-tg-body {
  display: block; margin-top: 3px; font-size: 10px;
  font-family: var(--font-mono); color: var(--c-text-muted);
  background: var(--c-surface-2); border-left: 2px solid var(--c-dtp);
  padding: 4px 8px; white-space: pre-wrap; word-break: break-word;
  max-height: 120px; overflow-y: auto; border-radius: 0 3px 3px 0;
}
/* Form params chips row */
.fstr-param-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
.fstr-param-entry { display: inline-flex; align-items: center; gap: 4px; }
/* Section spacing */
.fstr-section { margin-bottom: 16px; }
.fstr-section:last-child { margin-bottom: 0; }
/* Axis label */
.fstr-axis-label {
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .4px; color: var(--c-text-muted); margin-bottom: 4px;
}
/* Matrix block within sheet */
.fstr-matrix {
  border-left: 2px solid var(--c-border);
  padding: 6px 0 8px 14px; margin-bottom: 14px;
}
.fstr-matrix:last-child { margin-bottom: 0; }
.fstr-matrix-hdr {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.fstr-matrix-name { font-size: 13px; font-weight: 500; }
/* Axis container */
.fstr-axis { margin-bottom: 8px; }
.fstr-axis:last-child { margin-bottom: 0; }
/* Sheet-level collapsible in form structure */
.fstr-sheet-block { margin-bottom: 6px; border: 1px solid var(--c-border); border-radius: 6px; }
.fstr-sheet-hdr {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  cursor: pointer; list-style: none; border-radius: 6px;
  background: var(--c-surface-2);
}
.fstr-sheet-hdr::-webkit-details-marker { display: none; }
.fstr-sheet-hdr:hover { background: var(--c-bg-alt); }
.fstr-sheet-block[open] > .fstr-sheet-hdr { border-bottom: 1px solid var(--c-border); border-radius: 6px 6px 0 0; }
.fstr-sheet-block[open] > .fstr-sheet-hdr .fstr-dim-arr { transform: rotate(90deg); }
.fstr-sheet-body { padding: 10px 14px; }
/* Form structure — entry row within a dim group step-body */
.fstr-entry-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 3px 0; border-bottom: 1px solid var(--c-border);
}
.fstr-entry-row:last-child { border-bottom: none; }
.fstr-entry-sep { color: var(--c-text-faint); font-size: 10px; }
/* AIH measure badge (row-level, not standalone) */
.fstr-aih-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 8px; background: var(--c-dim-bg)44;
  border-radius: 4px; margin-bottom: 3px;
}
/* OWS internal row */
.fstr-ows-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 0;
}
/* Transactional form row (FRM_$ axis) */
.fstr-frm-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 8px; background: var(--c-form-bg);
  border-radius: 4px; margin-bottom: 3px;
}
.fstr-frm-badge {
  font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 4px;
  background: var(--c-form-bg); border: .5px solid var(--c-form); color: var(--c-form);
}
/* Form param row */
.fstr-fparam-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 8px; background: var(--c-bg-alt);
  border-radius: 5px; border-left: 3px solid var(--c-dim)44;
}
/* TGKML inline block */
.fstr-tgkml-toggle {
  font-size: 10px; background: var(--c-dtp-bg); color: var(--c-dtp);
  padding: 1px 5px; border-radius: 3px; cursor: pointer;
  border: .5px solid var(--c-dtp)44;
}
.fstr-tgkml-body {
  flex-basis: 100%; margin-top: 3px; padding: 6px 10px;
  background: var(--c-bg); border-left: 2px solid var(--c-dtp);
  font-family: var(--font-mono); font-size: 11px; color: var(--c-text-muted);
  white-space: pre-wrap; overflow-wrap: break-word;
}
/* WS/DS path in matrix header — text only, no extra chips */
.fstr-mat-ws-path {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.fstr-mat-ws-link { color: var(--c-dataset); font-weight: 500; font-family: var(--font-mono); font-size: 11px; }
.fstr-mat-ws-desc { color: var(--c-text-muted); font-size: 12px; }
.fstr-col-label { color: var(--c-text-faint); font-size: 11px; font-style: italic; }
.fstr-mat-ws-sep  { color: var(--c-text-faint); }

/* ── Compact hierarchy list ─────────────────────────── */
.hier-list-card { padding: 0; overflow: hidden; }
.hier-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--c-border);
}
.hier-list-title { font-size: 13px; font-weight: 600; color: var(--c-text); }

.hier-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: 6px 14px 3px;
  background: var(--c-bg);
}
.hier-group-label-nr { color: #92400e; background: #fffbeb; }

.hier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .1s, border-color .1s;
  min-height: 30px;
}
.hier-row:hover        { background: var(--c-dim-bg); }
.hier-row-active       { border-left-color: var(--c-dim); background: var(--c-dim-bg); }
.hier-row-nr           { opacity: .75; }
.hier-row-nr:hover     { opacity: 1; }
.hier-row-active.hier-row-nr { border-left-color: #d97706; background: #fffbeb; opacity: 1; }

.hier-row-indicator { font-size: 8px; color: var(--c-text-faint); flex-shrink: 0; width: 8px; }
.hier-row-active .hier-row-indicator { color: var(--c-dim); }

.hier-row-code {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 40px;
}
.hier-row-active .hier-row-code { color: var(--c-dim); }

.hier-row-desc {
  font-size: 12px;
  color: var(--c-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hier-row-count {
  font-size: 11px;
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
  margin-left: auto;
  white-space: nowrap;
}
.hier-row-badges {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  min-width: 72px;        /* wide enough for Org+Flat or Org+TV */
  justify-content: flex-end;
}

/* ── Tree legend ────────────────────────────────────── */
.tree-legend {
  display: flex;
  gap: 16px;
  padding: 6px 8px;
  margin-bottom: 12px;
  background: var(--c-bg);
  border-radius: 4px;
  font-size: 11px;
  color: var(--c-text-muted);
}
.tree-legend-item { display: flex; align-items: center; gap: 5px; }

/* ── Consolidation legend ───────────────────────────── */
.consol-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 11px;
}
.consol-legend-label { color: var(--c-text-muted); }

/* ── Tree panel visibility ──────────────────────────── */
.hier-panel         { display: none; padding-bottom: 16px; }
.hier-panel-active  { display: block; }

/* ── Tree structure ─────────────────────────────────── */
.dim-tree {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.dim-tree-children {
  padding-left: 24px;
  border-left: 2px solid var(--c-border-soft);
  margin-left: 8px;
  margin-top: 2px;
}
.dim-node { padding: 2px 0; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

.dim-node-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  user-select: none;
  line-height: 1.5;
}
details > summary.dim-node-summary:hover { background: var(--c-dim-bg); }
details > summary.dim-node-summary::before {
  content: '▶';
  font-size: 9px;
  color: var(--c-dim);
  transition: transform .15s;
  flex-shrink: 0;
}
details[open] > summary.dim-node-summary::before { transform: rotate(90deg); }

.dim-node-desc  { color: var(--c-text-muted); font-size: 12px; }
.dim-node-count { font-size: 11px; }

/* Reference entity tag on group nodes */
.node-ref {
  font-size: 10px;
  color: var(--c-text-faint);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  padding: 0 4px;
  font-family: var(--font-mono, monospace);
}

/* ── Leaf member rows ───────────────────────────────── */
.dim-member {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.dim-member-desc { color: var(--c-text-muted); }

/* ── Group node chips (green = structural group) ────── */
code.code-ger {
  background: var(--c-dim-bg);
  color: var(--c-dim);
  border: 1px solid color-mix(in srgb, var(--c-dim) 25%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Entity leaf chips (blue = actual entity member) ── */
code.code-ent {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

/* ── Formula reference chip (purple) ── */
code.code-formula {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #c4b5fd;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
a:hover code.code-formula { filter: brightness(.94); }

/* ── Currency pill ──────────────────────────────────── */
.pill-currency {
  background: #f8fafc;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}

/* ── Consolidation type pill colours ────────────────── */
.dim-consol-I { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.dim-consol-P { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }
.dim-consol-E { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.dim-consol-N { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }

/* ── Hierarchy badge variants ───────────────────────── */
.pill-flat { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.pill-tv   { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }

/* ── Small button ───────────────────────────────────── */
.btn-xs {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  cursor: pointer;
  color: var(--c-text-muted);
}
.btn-xs:hover { border-color: var(--c-dim); color: var(--c-dim); }

/* ── View toggle ──────────────────────────────────── */
.view-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--c-surface);
}
.view-tab {
  font-size: 12.5px;
  padding: 6px 16px;
  border: none;
  background: var(--c-surface);
  color: var(--c-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s;
}
.view-tab + .view-tab { border-left: 1px solid var(--c-border); }
.view-tab:hover { background: var(--c-bg); }
.view-tab-active { background: var(--c-dim-bg); color: var(--c-dim); font-weight: 600; }
.view-tab-count {
  font-size: 11px;
  background: var(--c-bg);
  border-radius: 10px;
  padding: 0 6px;
  color: var(--c-text-faint);
}
.view-tab-active .view-tab-count { background: var(--c-surface); color: var(--c-dim); }

/* ── Member filter input ────────────────────────────── */
.member-filter {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  outline: none;
  min-width: 220px;
  color: var(--c-text);
  background: var(--c-surface);
}
.member-filter:focus { border-color: var(--c-dim); }
#member-table td .pill-xs { font-weight: 500; }

/* ── Clickable hierarchy chips in the member list ───── */
.hier-chip-link { text-decoration: none; }
.hier-chip-link code.code-ger { cursor: pointer; transition: filter .1s; }
.hier-chip-link:hover code.code-ger { filter: brightness(.94); text-decoration: none; }

/* ── Scroll-box with sticky header ── */
.table-scroll {
  max-height: 68vh;
  overflow: auto;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-sm);
}
.table-scroll table.data { border-collapse: separate; border-spacing: 0; }
.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--c-bg);
  box-shadow: inset 0 -2px 0 var(--c-border);
}
.tree-scroll { max-height: 70vh; overflow: auto; }
/* FST hierarchy refs scrollable table */
.fst-hier-scroll { max-height: 55vh; overflow-y: auto; overflow-x: auto; }
.fst-hier-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--c-bg); box-shadow: inset 0 -1px 0 var(--c-border); }
/* Generic bounded-scroll table wrapper — sticky thead + vertical scroll */
.table-bound-scroll { max-height: 420px; overflow-y: auto; overflow-x: auto; }
.table-bound-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--c-bg); box-shadow: inset 0 -1px 0 var(--c-border); }
/* Viewport-dynamic variant — height tracks the browser window (use with .table-bound-scroll) */
.table-bound-vh { max-height: 72vh; }
/* Section divider row inside a sortable table (parent/child split) */
tr.tbl-section-hdr td { background: var(--c-panel-inset); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); padding: 4px 10px; }
[data-theme="dark"] tr.tbl-section-hdr td { background: var(--c-panel-inset); }
/* ── Control-group parent/child tables — separate tables, columns aligned via
   fixed col widths so the shared leading columns line up between parent & child. */
.cg2-scroll { max-height: 320px; overflow-y: auto; overflow-x: auto; }
.cg2-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--c-bg); box-shadow: inset 0 -1px 0 var(--c-border); }
.cg2-tbl { table-layout: fixed; border-collapse: collapse; }
.cg2-tbl th, .cg2-tbl td { white-space: normal; word-break: break-word; vertical-align: top; }
.cg2-c-action { width: 54px; }
.cg2-c-acct   { width: 280px; }
.cg2-c-hier   { width: 210px; }
.cg2-c-node   { width: 210px; }
.cg2-c-vardet { width: 96px; }
.cg2-c-flag   { width: 46px; }
.cg2-c-fx     { width: 66px; }
.cg2-c-attr   { width: 58px; }
/* Section label above each parent/child table */
.tbl-section-lbl { background: var(--c-panel-inset); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); padding: 4px 10px; margin-top: 8px; }
[data-theme="dark"] .tbl-section-lbl { background: var(--c-panel-inset); }
/* Clickable counter (jump-to parent/child) in the CG members table */
.cg-count-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 3px; }
.cg-count-btn:hover .pill { outline: 1px solid var(--c-brand); }
.cg-count-btn:hover { text-decoration: underline; }
/* Pager bar — shared row-count selector + prev/next (auto-built by rdMakePager) */
.pager-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pager-bar .pager-info { margin-left: 8px; }

/* col-filter CSS lives in style.css (shared across all pages) */

/* ── FST tab layout ─────── */
.fst-subtoggle { margin-bottom: 0; }

.fst-schema-counts {
  font-size: 11px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* FST schema account-type badges */
.fst-badge-normal  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.fst-badge-detail  { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.fst-badge-flow    { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.fst-badge-formula { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
/* Schema row two-line layout */
.fst-schema-row      { align-items: flex-start !important; }
.fst-schema-row-body { flex: 1; min-width: 0; overflow: hidden; }
.fst-schema-row-main { display: flex; align-items: center; gap: 8px; }
.fst-schema-row-main .hier-row-desc { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fst-schema-attrs    { display: flex; align-items: center; gap: 5px; margin-top: 5px; flex-wrap: nowrap; overflow: hidden; }
.fst-attrs-spacer    { flex: 1; min-width: 12px; }
/* Grouped key:value badges */
.fst-gbadge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600;
  padding: 1px 8px 1px 6px; border-radius: 20px; border: 1px solid;
  white-space: nowrap; cursor: default; flex-shrink: 0;
}
.fst-gbadge-key {
  font-size: 9px; font-weight: 500; opacity: .55;
  letter-spacing: .03em; text-transform: lowercase;
  padding-right: 2px; border-right: 1px solid currentColor; opacity: .35;
}
.fst-gbadge-dim    { background: #faf5ff; color: #6d28d9; border-color: #ddd6fe; }
.fst-gbadge-flag   { background: #fff7ed; color: #c2410c; border-color: #fed7aa; padding: 1px 8px; }
.fst-gbadge-type   { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.fst-gbadge-nature { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
/* VOCE item CLASSE badge */
.fst-classe-badge { font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 10px; border: 1px solid; flex-shrink: 0; cursor: default; background:#f8fafc; color:#64748b; border-color:#e2e8f0; }
.fst-classe-n  { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; }
.fst-classe-r  { background: #fff7ed; color: #c2410c; border-color: #fdba74; }
.fst-classe-c  { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.fst-classe-a  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.fst-classe-p  { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.fst-classe-ia { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.fst-classe-ip { background: #fdf4ff; color: #86198f; border-color: #f0abfc; }
.fst-classe-da { background: #fff7ed; color: var(--c-warn); border-color: #fed7aa; }
.fst-classe-dp { background: #fefce8; color: #a16207; border-color: #fef08a; }

.fst-schema-panel         { display: none; }
.fst-schema-panel-active  { display: block; }

/* ── VOCE item card ──────────────────────────────────── */
.fst-voce-list    { display: flex; flex-direction: column; gap: 8px; }
.fst-voce-item    { border: 1px solid var(--c-border-soft); border-radius: var(--radius-sm); overflow: hidden; }

/* Collapsible summary */
details.fst-voce-item > summary { list-style: none; cursor: pointer; user-select: none; }
details.fst-voce-item > summary::-webkit-details-marker { display: none; }
details.fst-voce-item > summary.fst-voce-header::before {
  content: '▶';
  font-size: 8px;
  color: var(--c-text-faint);
  flex-shrink: 0;
  transition: transform .15s;
}
details.fst-voce-item[open] > summary.fst-voce-header::before { transform: rotate(90deg); }

/* Tinted header by type */
.fst-item-a .fst-voce-header { background: #f0fdf4; }
.fst-item-f .fst-voce-header { background: #f5f3ff; }
.fst-item-d .fst-voce-header { background: #f9fafb; }

.fst-voce-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--c-bg);
  flex-wrap: wrap;
}

.fst-voce-type {
  font-size: 10px; font-weight: 700;
  border-radius: 3px; padding: 1px 5px; flex-shrink: 0;
}
.fst-type-a { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.fst-type-f { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }

.fst-voce-code  { font-size: 11px; font-weight: 600; flex-shrink: 0; }
.fst-voce-desc  { font-size: 12px; color: var(--c-text); flex: 1; min-width: 0; }
.fst-voce-badge { font-size: 11px; color: var(--c-text-muted); flex-shrink: 0; }
.fst-voce-count { font-size: 11px; flex-shrink: 0; }

/* ── DEF assignment list ────────────────────────────── */
.fst-voce-body { border-top: 1px solid var(--c-border-soft); }
.fst-view-def, .fst-view-deployed { padding: 7px 10px; }

.fst-def-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.fst-def-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }

.fst-azione {
  font-size: 14px; font-weight: 700;
  width: 16px; text-align: center; flex-shrink: 0;
}
.fst-azione-1 { color: #15803d; }
.fst-azione-0 { color: #dc2626; }

.fst-target-type {
  font-size: 10px; color: var(--c-text-faint);
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: 3px; padding: 0 4px; flex-shrink: 0;
}
.fst-target-code { font-size: 11px; }

.fst-formula { padding: 2px 0; }
.fst-formula-decoded {
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  line-height: 1.8;
}
/* Formula token styles */
.fst-ref-acct {
  font-size: 11px; background: #eff6ff; color: #1d4ed8;
  border: 1px solid #bfdbfe; border-radius: 3px; padding: 0 4px;
}
.fst-ref-voce {
  font-size: 11px; background: #ede9fe; color: #5b21b6;
  border: 1px solid #ddd6fe; border-radius: 3px; padding: 0 4px;
  cursor: pointer; text-decoration: none;
}
.fst-ref-voce:hover { filter: brightness(.93); }
.fst-ref-voce-same {
  font-size: 11px; background: #fef3c7; color: #92400e;
  border: 1px solid #fde68a; border-radius: 3px; padding: 0 4px;
}
.fst-formula-raw { color: var(--c-text-muted); }
.fst-ref-desc {
  font-size: 10px;
  color: var(--c-text-faint);
  font-style: italic;
  font-family: var(--font-sans, sans-serif);
}

.fst-deployed-list { display: flex; flex-wrap: wrap; gap: 3px; }

.pill-nr { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* ── FST badge / classe / type / azione dark-mode overrides ── */
[data-theme="dark"] .pill-currency { background: var(--c-surface); color: var(--c-text-muted); }

/* FST schema type badges */
[data-theme="dark"] .fst-badge-normal  { background: rgba(21,128,61,.12);  color: var(--c-ok);           border-color: rgba(21,128,61,.3); }
[data-theme="dark"] .fst-badge-detail  { background: var(--c-dataset-bg);  color: var(--c-dataset);      border-color: rgba(96,165,250,.3); }
[data-theme="dark"] .fst-badge-flow    { background: rgba(120,53,15,.12);  color: var(--c-warn);         border-color: rgba(146,64,14,.3); }
[data-theme="dark"] .fst-badge-formula { background: var(--c-surface-2);   color: var(--c-text-muted);   border-color: var(--c-border); }

/* VOCE classe badges */
[data-theme="dark"] .fst-classe-badge { background: var(--c-surface-2);  color: var(--c-text-muted);   border-color: var(--c-border); }
[data-theme="dark"] .fst-classe-n  { background: var(--c-surface-2);     color: var(--c-text-faint);   border-color: var(--c-border); }
[data-theme="dark"] .fst-classe-r  { background: rgba(194,65,12,.12);    color: var(--c-warn);         border-color: rgba(194,65,12,.3); }
[data-theme="dark"] .fst-classe-c  { background: rgba(220,38,38,.12);    color: var(--c-danger);       border-color: rgba(220,38,38,.3); }
[data-theme="dark"] .fst-classe-a  { background: var(--c-dataset-bg);    color: var(--c-dataset);      border-color: rgba(96,165,250,.3); }
[data-theme="dark"] .fst-classe-p  { background: rgba(91,33,182,.12);    color: rgba(196,181,253,.85); border-color: rgba(91,33,182,.3); }
[data-theme="dark"] .fst-classe-ia { background: rgba(21,128,61,.12);    color: var(--c-ok);           border-color: rgba(21,128,61,.3); }
[data-theme="dark"] .fst-classe-ip { background: rgba(134,25,143,.12);   color: rgba(216,180,254,.85); border-color: rgba(134,25,143,.3); }
[data-theme="dark"] .fst-classe-da { background: rgba(194,65,12,.12);    color: var(--c-warn);         border-color: rgba(194,65,12,.3); }
[data-theme="dark"] .fst-classe-dp { background: rgba(161,98,7,.12);     color: var(--c-warn);         border-color: rgba(161,98,7,.3); }

/* VOCE type chips */
[data-theme="dark"] .fst-type-a { background: rgba(21,128,61,.12);  color: var(--c-ok);           border-color: rgba(21,128,61,.3); }
[data-theme="dark"] .fst-type-f { background: rgba(91,33,182,.12);  color: rgba(196,181,253,.85); border-color: rgba(91,33,182,.3); }

/* Include/exclude +/− symbols */
[data-theme="dark"] .fst-azione-1 { color: var(--c-ok); }
[data-theme="dark"] .fst-azione-0 { color: var(--c-danger); }

/* Formula token chips in def list */
[data-theme="dark"] .fst-ref-acct     { background: var(--c-dataset-bg);     color: var(--c-dataset);      border-color: rgba(96,165,250,.3); }
[data-theme="dark"] .fst-ref-voce     { background: rgba(91,33,182,.12);     color: rgba(196,181,253,.85); border-color: rgba(91,33,182,.3); }
[data-theme="dark"] .fst-ref-voce-same{ background: rgba(120,53,15,.12);     color: var(--c-warn);         border-color: rgba(161,98,7,.3); }

/* No-report pill */
[data-theme="dark"] .pill-nr { background: rgba(120,53,15,.12); color: var(--c-warn); border-color: rgba(161,98,7,.3); }

/* VOCE row header tint by type (collapsed rows) */
[data-theme="dark"] .fst-item-a .fst-voce-header { background: rgba(21,128,61,.08); }
[data-theme="dark"] .fst-item-f .fst-voce-header { background: rgba(91,33,182,.08); }
[data-theme="dark"] .fst-item-d .fst-voce-header { background: var(--c-surface-2); }

/* ============================================================
   Dark-mode colour audit fixes (session 37)
   Every rule below had a hardcoded light hex with no dark
   override. Text uses the bright pastel tokens so it stays
   readable on the low-alpha tinted backgrounds.
   ============================================================ */

/* Entity code-chip borders — bg/text already adapt via tokens,
   only the pastel border was hardcoded (too bright on dark chip) */
[data-theme="dark"] code.dtp        { border-color: rgba(252,211,77,.3);  }
[data-theme="dark"] code.dataset    { border-color: rgba(96,165,250,.3);  }
[data-theme="dark"] code.datasource { border-color: rgba(196,181,253,.3); }
[data-theme="dark"] code.dim        { border-color: rgba(110,231,183,.3); }
[data-theme="dark"] code.process    { border-color: rgba(147,197,253,.3); }
[data-theme="dark"] code.workspace  { border-color: rgba(165,180,252,.3); }
[data-theme="dark"] code.sm         { border-color: rgba(94,234,212,.3);  }
[data-theme="dark"] code.etl        { border-color: rgba(56,189,248,.3);  }
[data-theme="dark"] code.ic         { border-color: rgba(196,181,253,.3); }
[data-theme="dark"] .group-tree code.code-ent { border-color: rgba(96,165,250,.3); }

/* Formula code chip */
[data-theme="dark"] code.code-formula { background: var(--c-datasource-bg); color: var(--c-datasource); border-color: rgba(196,181,253,.3); }

/* Consolidation badges (dimension members) */
[data-theme="dark"] .dim-consol-I { background: var(--c-dataset-bg);  color: var(--c-dataset); border-color: rgba(96,165,250,.3); }
[data-theme="dark"] .dim-consol-P { background: rgba(251,191,36,.12); color: var(--c-warn);    border-color: rgba(251,191,36,.3); }
[data-theme="dark"] .dim-consol-E { background: rgba(248,113,113,.12);color: var(--c-danger);  border-color: rgba(248,113,113,.3); }
[data-theme="dark"] .dim-consol-N { background: var(--c-surface-2);   color: var(--c-text-muted);border-color: var(--c-border); }

/* Misc pills */
[data-theme="dark"] .pill-flat { background: rgba(251,191,36,.12);  color: var(--c-warn);       border-color: rgba(251,191,36,.3); }
[data-theme="dark"] .pill-tv   { background: rgba(196,181,253,.12); color: var(--c-datasource); border-color: rgba(196,181,253,.3); }

/* FST grouping key badges */
[data-theme="dark"] .fst-gbadge-dim    { background: rgba(196,181,253,.1); color: var(--c-datasource); border-color: rgba(196,181,253,.3); }
[data-theme="dark"] .fst-gbadge-flag   { background: rgba(251,146,60,.12); color: #fdba74;            border-color: rgba(251,146,60,.3); }
[data-theme="dark"] .fst-gbadge-type   { background: rgba(74,222,128,.1);  color: var(--c-ok);         border-color: rgba(74,222,128,.3); }
[data-theme="dark"] .fst-gbadge-nature { background: rgba(56,189,248,.12); color: var(--c-etl);        border-color: rgba(56,189,248,.3); }

/* Search result group hover */
[data-theme="dark"] .sp-group-hdr:hover { background: #2a3047; }

/* Search highlight marks — solid amber + dark text so the hit pops */
[data-theme="dark"] .sp-result-title mark,
[data-theme="dark"] .sp-result-code mark,
[data-theme="dark"] .sp-result-snippet mark { background: rgba(251,191,36,.8); color: #15171f; }

/* SQL / ETL syntax highlighting — lighter variants for the dark code surface */
[data-theme="dark"] .sql-wrap .hljs-keyword,  [data-theme="dark"] code.etl-text .hljs-keyword  { color: #60a5fa; }
[data-theme="dark"] .sql-wrap .hljs-built_in, [data-theme="dark"] code.etl-text .hljs-built_in { color: #67e8f9; }
[data-theme="dark"] .sql-wrap .hljs-string,   [data-theme="dark"] code.etl-text .hljs-string   { color: #4ade80; }
[data-theme="dark"] .sql-wrap .hljs-number,   [data-theme="dark"] code.etl-text .hljs-number   { color: #c4b5fd; }
[data-theme="dark"] .sql-wrap .hljs-title,    [data-theme="dark"] code.etl-text .hljs-title    { color: #fbbf24; }
[data-theme="dark"] .sql-wrap .hljs-variable, [data-theme="dark"] code.etl-text .hljs-variable { color: #fda4af; }

/* ── Print / Save as PDF ──────────────────────────────────────── */
/* top: 20mm gives enough room so the browser's running header (date + title)
   doesn't collide with the repeated <thead> on pages 2+ */
@page { size: A4 portrait; margin: 20mm 14mm 15mm; }

@media print {
  /* ① Force all backgrounds to print (pills, cards, entity chips) */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ② Reset ALL colour tokens to light values — dark-mode users get a white page */
  :root {
    --c-bg:          #ffffff;
    --c-surface:     #f8fafc;
    --c-surface-2:   #f1f5f9;
    --c-panel-inset: #f8fafc;
    --c-bg-alt:      #f1f5f9;
    --c-bg-subtle:   #f1f5f9;
    --c-border:      #e2e8f0;
    --c-border-soft: #eef0f2;
    --c-text:        #0f172a;
    --c-text-muted:  #64748b;
    --c-text-faint:  #9ca3af;
    --c-brand:       #1e3a5f;
    --c-brand-light: #eaf0f7;
    --c-code-fg:     #1e3a5f;
    /* entity tokens */
    --c-process:     #1e3a5f; --c-process-bg:    #eaf0f7;
    --c-dtp:         #b45309; --c-dtp-bg:        #fef3c7;
    --c-dataset:     #1d4ed8; --c-dataset-bg:    #eff6ff;
    --c-datasource:  #6d28d9; --c-datasource-bg: #f5f3ff;
    --c-dim:         #065f46; --c-dim-bg:        #ecfdf5;
    --c-rule:        #9f1239; --c-rule-bg:       #fff1f2;
    --c-form:        #0e7490; --c-form-bg:       #ecfeff;
    --c-workspace:   #4338ca; --c-workspace-bg:  #eef2ff;
    --c-sm:          #0f766e; --c-sm-bg:         #f0fdfa;
    --c-etl:         #0369a1; --c-etl-bg:        #f0f9ff;
    --c-ds:          #059669; --c-ds-bg:         #ecfdf5;
    --c-ok:          #16a34a;
    --c-warn:        #d97706;
    --c-danger:      #dc2626;
  }

  /* ③ Remove chrome: topbar, sidebar, interactive controls */
  .topbar, .sidebar, .sidebar-overlay, .sidebar-toggle-btn,
  .page-head-meta button, .view-toggle, nav.sub-nav,
  #member-filter, #member-page-size, #member-prev, #member-next, #member-page-info,
  .print-hide, .skip-link { display: none !important; }

  /* ④ Layout: cancel flex so .main fills the full page width */
  body  { background: #fff !important; margin: 0 !important; width: auto !important; }
  .layout { display: block !important; }
  .main {
    margin-left: 0 !important;
    padding: 12px 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  .page-sticky-header { position: static !important; box-shadow: none !important; }

  /* ⑤ Cards: no shadow, no page-break mid-card */
  .card {
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 12px;
  }

  /* ⑥ Tables: full-width, fixed layout, small font to fit A4 columns */
  /* Cancel inline min-width on nested tables (e.g. DTP mapping table min-width:700px) */
  .table-wrap { overflow: visible !important; }
  div[style*="overflow-x"] { overflow: visible !important; }
  table, table[style*="min-width"] { min-width: 0 !important; }
  table.data {
    border-collapse: collapse;
    width: 100%;
    font-size: 9px;
    table-layout: fixed;
  }
  /* All tables in print: small font, fixed layout, no overflow */
  table { font-size: 9px; table-layout: fixed; width: 100%; }
  /* Nested mapping tables (DTP conditions, ETL lookups): even smaller to reduce mid-token wraps */
  table table { font-size: 7.5px; }
  table table code { font-size: 7.5px !important; }
  table th, table td {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  table.data th, table.data td {
    border: 1px solid #d1d5db !important;
    padding: 2px 5px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  table.data th { font-size: 8.5px; text-transform: uppercase; letter-spacing: .03em; }
  /* Prevent table rows from splitting across page breaks */
  tr { break-inside: avoid; page-break-inside: avoid; }
  /* Disable thead repetition — browser running header (date+title) occupies the
     top margin and collides with repeated thead; no CSS can move the browser header */
  thead { display: table-row-group; }

  /* ⑦ Code & SQL: wrap long lines, no horizontal scroll */
  code { font-size: 8.5px !important; word-break: break-all; }
  pre, .sql-wrap pre {
    max-height: none !important;
    overflow: visible !important;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 8px;
  }

  /* ⑧ Pills: wrap text inside cells */
  .pill { white-space: normal !important; max-width: 100% !important; display: inline-block !important; }

  /* ⑨ Step-blocks: force all open so content is visible */
  .step-body { display: block !important; }
  .step-toggle { display: none; }

  /* ⑩ Pagination: show all member rows (not just current page) */
  #member-table tbody tr { display: table-row !important; }

  /* ⑪ SVG / Mermaid diagrams: constrain to page width */
  svg, .mermaid svg { max-width: 100% !important; height: auto !important; }

  /* ⑫ KV grid: single column on narrow print area */
  .kv { grid-template-columns: 140px 1fr !important; }

  /* ⑬ Page breaks: keep headings with their content */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  h1, h2, h3, h4 { break-before: auto; }

  /* ⑭ Suppress link URL clutter for internal links */
  a[href$=".html"]::after, a[href^="#"]::after { content: ""; }
}

/* ── OSR Graph ────────────────────────────────────────────────────────────── */
.osr-graph-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.osr-slider-wrap    { display: flex; align-items: center; gap: 8px; }
.osr-scenario-sel   { font-size: 12px; padding: 3px 8px; height: 28px; }
.osr-slider-wrap input[type=range] { width: 160px; accent-color: var(--c-brand); }
.osr-svg-wrap       { position: relative; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.osr-svg-wrap svg   { display: block; }
.osr-graph-tip      { position: absolute; background: var(--c-tooltip-bg); color: var(--c-tooltip-text); border-radius: 7px; padding: 7px 11px; font-size: 11px; pointer-events: none; display: none; max-width: 220px; line-height: 1.5; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
/* SVG node styles (via CSS class on <g>) */
.osr-node-root rect  { fill: var(--c-ic-bg);  stroke: var(--c-ic);      stroke-width: 2.5; }
.osr-node rect       { fill: var(--c-surface); stroke: var(--c-border);  stroke-width: 1.5; }
.osr-node:hover rect { stroke: var(--c-brand); }
.osr-node text.osr-code { font-weight: 700; font-size: 11px; fill: var(--c-text); }
.osr-node-root text.osr-code { fill: var(--c-ic); }
.osr-node text.osr-desc { font-size: 9px; fill: var(--c-text-muted); }
.osr-node text.osr-badge { font-size: 8px; fill: var(--c-text-faint); }
.osr-edge-tree path    { stroke: var(--c-text-faint); stroke-width: 1.5; fill: none; }
.osr-edge-lateral path { stroke: var(--c-text-faint); stroke-width: 1.5; fill: none; stroke-dasharray: 3,3; }
.osr-edge-cross path   { stroke: var(--c-warn);       stroke-width: 1.5; fill: none; stroke-dasharray: 5,3; }
.osr-edge-lateral .edge-hit, .osr-edge-cross .edge-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: crosshair; }
.osr-edge-lbl rect   { fill: var(--c-surface); }
.osr-edge-lbl text   { font-size: 9px; font-weight: 600; fill: var(--c-brand); }
[data-theme="dark"] .osr-edge-lbl rect { fill: var(--c-bg); }
[data-theme="dark"] .osr-svg-wrap      { background: var(--c-bg); }
@media print { .osr-graph-controls { display: none; } }

/* ── Consolidation Area Graph ────────────────────────────────────────────── */
/* Method-colored node variants: JS toggles these classes on <g.ca-node> */
.ca-node rect              { fill: var(--c-surface); stroke: var(--c-border);  stroke-width: 1.5; }
.ca-node:hover rect        { stroke: var(--c-brand); }
.ca-node-root rect         { fill: var(--c-ic-bg);   stroke: var(--c-ic);      stroke-width: 2.5; }
.ca-node-ig rect           { fill: var(--c-ok-bg);   stroke: var(--c-ok);      stroke-width: 1.5; }
.ca-node-prop rect         { fill: var(--c-info-bg,#eff6ff); stroke: var(--c-brand); stroke-width: 1.5; }
.ca-node-mee rect          { fill: #fef9c3;          stroke: var(--c-warn);    stroke-width: 1.5; }
.ca-node-excl rect         { fill: var(--c-surface); stroke: var(--c-text-faint); stroke-width: 1.5; stroke-dasharray: 5,3; }
[data-theme="dark"] .ca-node-mee rect { fill: #422006; }
[data-theme="dark"] .ca-node-prop rect { fill: #1e3a5f; }
.ca-node text.ca-code      { font-weight: 700; font-size: 11px; fill: var(--c-text); }
.ca-node-root text.ca-code { fill: var(--c-ic); }
.ca-node-ig text.ca-code   { fill: var(--c-ok); }
.ca-node-mee text.ca-code  { fill: #a16207; }
[data-theme="dark"] .ca-node-mee text.ca-code { fill: #fbbf24; }
.ca-node-excl text.ca-code { fill: var(--c-text-faint); }
.ca-node text.ca-desc      { font-size: 9px; fill: var(--c-text-muted); }
.ca-node text.ca-pct       { font-size: 8px; fill: var(--c-text-faint); font-weight: 600; }
.ca-edge-tree path         { stroke: var(--c-text-faint); stroke-width: 1.5; fill: none; }
.ca-edge-lateral path      { stroke: var(--c-text-faint); stroke-width: 1.5; fill: none; stroke-dasharray: 3,3; }
.ca-edge-cross path        { stroke: var(--c-warn);       stroke-width: 1.5; fill: none; stroke-dasharray: 5,3; }
.ca-edge-lateral .edge-hit, .ca-edge-cross .edge-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: crosshair; }
.ca-edge-lbl rect          { fill: var(--c-surface); }
.ca-edge-lbl text          { font-size: 9px; font-weight: 600; fill: var(--c-brand); }
[data-theme="dark"] .ca-edge-lbl rect { fill: var(--c-bg); }
[data-theme="dark"] .ca-svg-wrap      { background: var(--c-bg); }
.ca-svg-wrap               { position: relative; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.ca-svg-wrap svg           { display: block; }
.ca-graph-controls         { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ca-graph-tip              { position: absolute; background: var(--c-tooltip-bg); color: var(--c-tooltip-text); border-radius: 7px; padding: 7px 11px; font-size: 11px; pointer-events: none; display: none; max-width: 240px; line-height: 1.5; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.25); }