/* ============================================================
   app-components.css — Gold Standard: UI Component Styles
   Project: DataOrbix / Elment Hub
   Load Order: theme.css → main.css → app-components.css
   ============================================================
   All hex colors are FORBIDDEN here.
   Every color MUST use a CSS variable from theme.css.
   ============================================================

   COMPONENT INDEX
   ──────────────────────────────────────────────────────────
   §1   Buttons & CTAs
   §2   Form Controls
   §3   Cards — Surface Card (.do-surface-card, .card)
   §4   Cards — Pillar Card (.do-pillar)
   §5   Icons (.do-icon)
   §6   Typography Components (.do-eyebrow, .do-title, .do-desc, .do-label, .do-tag)
   §7   Badges & Pills (.do-badge, .do-pill)
   §8   Navigation Components
   §9   Stats / Metrics Counter Block
   §10  Capabilities Asymmetric Block (1/3 + 2/3 layout)
   §11  Hero Section
   §12  Workflow Steps
   §13  Compliance Section
   §14  Modals & Overlays
   §15  Tables & Data Grids
   §16  Alerts & Toast Notifications
   §17  Loaders & Skeletons
   §18  Email Registration / Priority Access Card
   §19  Theme Toggle Button
   §20  Card Interaction System (isolated hover)
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   §1  BUTTONS & CTAs
   ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-surface), transform var(--transition-fast), color var(--transition-fast);
  position: relative;
  min-height: 40px;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
  background: transparent;
  color: var(--text-primary);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — high emphasis */
.btn-primary {
  background: var(--text-primary);
  color: var(--text-inverse);
  border-color: transparent;
}

.btn-primary:hover {
  background: var(--text-secondary);
  color: var(--text-inverse);
}

/* Secondary — medium emphasis */
.btn-secondary {
  background: var(--bg-sub-surface);
  color: var(--text-primary);
  border-color: var(--border-color);
}

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

/* Outline / ghost */
.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-outline:hover {
  background: var(--item-hover-bg);
  border-color: var(--border-hover);
}

/* Ghost — no border */
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--item-hover-bg);
  color: var(--text-primary);
}

/* Size variants */
.btn-sm  { padding: var(--spacing-xs) var(--spacing-md); min-height: 32px; font-size: var(--font-size-xs); }
.btn-lg  { padding: var(--spacing-lg) var(--spacing-2xl); min-height: 52px; font-size: var(--font-size-base); }
.btn-xl  { padding: var(--spacing-lg) var(--spacing-2xl); min-height: 56px; font-size: var(--font-size-lg); }
.btn-full { width: 100%; }

/* Click physics */
.btn:active {
  transform: var(--active-scale);
  transition: transform var(--transition-instant);
}

/* Icon spacing inside buttons */
.btn i,
.btn svg {
  font-size: inherit;
  line-height: 1;
  flex-shrink: 0;
}


/* ────────────────────────────────────────────────────────────
   §2  FORM CONTROLS
   ──────────────────────────────────────────────────────────── */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.form-label--required::after {
  content: ' *';
  color: var(--color-error);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea,
select {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: 40px;
  transition: var(--transition-surface);
  appearance: none;
  -webkit-appearance: none;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-disabled);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--bg-surface);
}

.form-control:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg-sub-surface);
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-error);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: unset;
  accent-color: var(--text-primary);
  cursor: pointer;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  width: 36px;
  height: 20px;
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  transition: var(--transition-surface);
  position: relative;
  flex-shrink: 0;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), background var(--transition-base);
}

.toggle-switch input:checked + .toggle-track {
  background: var(--text-primary);
  border-color: var(--text-primary);
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(16px);
  background: var(--text-inverse);
}


/* ────────────────────────────────────────────────────────────
   §3  SURFACE CARD (.card, .do-surface-card)
   ──────────────────────────────────────────────────────────── */

.card,
.do-surface-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl) var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  transition: var(--transition-surface);
  cursor: default;
}

.card:hover,
.do-surface-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  box-shadow: none;
}

/* Action card modifier — primary CTA emphasis */
.do-surface-card--action {
  border-color: var(--border-hover);
  background: var(--bg-sub-surface);
  text-align: center;
  align-items: center;
}

.do-surface-card--action:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.do-surface-card--action .do-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--text-primary);
  stroke-width: 1.4px;
  transition: var(--do-transition-icon);
}

.do-surface-card--action:hover .do-icon svg {
  stroke: var(--text-primary);
  transform: rotate(20deg);
}

/* Sub-card — nested inside a surface card */
.card-sub,
.do-card-sub {
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  transition: var(--transition-surface);
}

/* Surface card grid */
.do-surface-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-md);
}

/* Capability card variant */
.capability-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
  transition: var(--transition-surface);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
}

.capability-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

/* Capability grid */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-3xl);
}

/* Staggered entry animations */
.capabilities-grid .capability-card:nth-child(1),
.do-surface-grid .do-surface-card:nth-child(1) { animation: fadeInUp 0.6s ease-out 0.1s both; }
.capabilities-grid .capability-card:nth-child(2),
.do-surface-grid .do-surface-card:nth-child(2) { animation: fadeInUp 0.6s ease-out 0.2s both; }
.capabilities-grid .capability-card:nth-child(3),
.do-surface-grid .do-surface-card:nth-child(3) { animation: fadeInUp 0.6s ease-out 0.3s both; }
.capabilities-grid .capability-card:nth-child(4),
.do-surface-grid .do-surface-card:nth-child(4) { animation: fadeInUp 0.6s ease-out 0.4s both; }
.capabilities-grid .capability-card:nth-child(5),
.do-surface-grid .do-surface-card:nth-child(5) { animation: fadeInUp 0.6s ease-out 0.5s both; }

/* Card icon */
.card-icon {
  width: 48px;
  height: 48px;
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  flex-shrink: 0;
  transition: var(--transition-surface);
}

.capability-card:hover .card-icon {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm);
}

.card-desc,
.card-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}


/* ────────────────────────────────────────────────────────────
   §4  PILLAR CARD (.do-pillar)
   ──────────────────────────────────────────────────────────── */

.do-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: 0;
  row-gap: var(--spacing-2xl);
}

.do-pillar {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border-divider);
  border-radius: 0;
  padding: var(--spacing-xl) var(--spacing-2xl);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  transition: background 0.28s ease;
  cursor: default;
}

/* Animated bottom underline */
.do-pillar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--spacing-2xl);
  right: var(--spacing-2xl);
  height: 1px;
  background: var(--do-underline-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s ease;
  border-radius: 2px;
}

.do-pillar:hover {
  background: var(--do-hover-wash);
}

.do-pillar:hover::after {
  transform: scaleX(1);
}


/* ────────────────────────────────────────────────────────────
   §5  ICON COMPONENT (.do-icon)
   ──────────────────────────────────────────────────────────── */

.do-icon {
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 4px 4px 0;
  flex-shrink: 0;
}

.do-icon svg {
  /* Explicit px fallback first — guarantees a visible size even if CSS
     custom properties haven't resolved (e.g. early paint, cascade order). */
  width: 20px;
  height: 20px;
  width: var(--do-icon-size, 20px);
  height: var(--do-icon-size, 20px);
  /* Force the SVG to actually paint — overrides any inherited display:none */
  display: block;
  stroke: var(--icon-color, #888888);
  stroke-width: 1.5px;
  fill: none;
  overflow: visible;
  transition: var(--do-transition-icon);
}

.do-pillar:hover .do-icon svg,
.do-surface-card:hover .do-icon svg {
  stroke: var(--icon-hover);
  transform: rotate(5deg);
}

/* ── Inline icon (inside buttons, table headers, text rows) ──
   Compact 16×16 square, neutral resting color, inherits from
   currentColor so it adapts to button/hover states automatically. */
.do-icon--inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}
.do-icon--inline svg {
  display: block;          /* never collapses to 0 height */
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
  overflow: visible;
  transition: var(--do-transition-icon);
}

/* ── Icon inside <button class="btn"> ───────────────────────
   Uses currentColor so the icon always matches the button's
   text color, including hover/active/disabled states.         */
.btn .do-icon,
.btn .do-icon--inline {
  padding: 0;
  width: 16px;
  height: 16px;
}
.btn .do-icon svg,
.btn .do-icon--inline svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
  transition: stroke 0.2s ease, transform 0.2s ease;
}

/* ── Solid-style icons (fill="currentColor") ─────────────────
   Used for grip dots, solid action buttons. Override fill only. */
.do-icon--solid svg {
  fill: currentColor;
  stroke: none;
}
.do-icon--solid.do-icon--inline svg {
  fill: currentColor;
  stroke: none;
}

/* ── Small icon variant (.do-icon--sm) ───────────────────────
   Designed for tight data-grid spaces: action buttons, pill
   removes, move-btn chevrons. 16×16, currentColor inheritance,
   no padding so it sits flush inside its parent button.
   Mirrors .do-icon--inline but with explicit class semantics
   for table action columns.                                   */
.do-icon--sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}
.do-icon--sm svg {
  display: block;          /* never collapses to 0 height */
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
  overflow: visible;
  transition: var(--do-transition-icon);
}

/* Ensure action buttons containing .do-icon--sm maintain centering */
.action-btn .do-icon--sm,
.move-btn   .do-icon--sm {
  pointer-events: none;    /* clicks pass through to the button */
}

/* Solid-mode support (fill icons like grip-dots) */
.do-icon--sm.do-icon--solid svg {
  fill: currentColor;
  stroke: none;
}

/* ── Sort / table-header icons ───────────────────────────────
   Slightly dimmer at rest; brighten on hover of th. */
th .do-icon--inline svg {
  opacity: 0.55;
  transition: opacity 0.2s ease, stroke 0.2s ease;
}
th:hover .do-icon--inline svg,
th.sorted-asc .do-icon--inline svg,
th.sorted-desc .do-icon--inline svg {
  opacity: 1;
}

/* ── Section title icons (h1/h2 with icon prefix) ────────────
   Slightly larger (20px), muted at rest, brighter on card hover. */
.section-title .do-icon,
.protocol-title .do-icon,
h1 > .do-icon,
h2 > .do-icon {
  padding: 0 0 0 0;
  width: 20px;
  height: 20px;
}
.section-title .do-icon svg,
.protocol-title .do-icon svg,
h1 > .do-icon svg,
h2 > .do-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--icon-color);
  stroke-width: 1.5px;
  fill: none;
  transition: var(--do-transition-icon);
}

/* ── Stat row icons (comment count row) ─────────────────────
   16px, currentColor to respect stat-item text color. */
.stat-item .do-icon,
.stat-item .do-icon--inline {
  padding: 0;
  width: 16px;
  height: 16px;
}
.stat-item .do-icon svg,
.stat-item .do-icon--inline svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

/* ── Stat card icon wraps (admin dashboard) ──────────────────
   Icon inside .stat-icon-wrap: inherits background from wrap,
   icon itself uses currentColor. */
.stat-icon-wrap .do-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

/* ── Role indicator row ──────────────────────────────────────
   Small inline, matches text color. */
.role-indicator .do-icon {
  padding: 0;
}
.role-indicator .do-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

/* ── Modal / overlay close button ───────────────────────────
   Matches button hover brightening. */
.custom-modal-close .do-icon svg,
.modal-close .do-icon svg {
  stroke: var(--icon-color);
  stroke-width: 1.5px;
  fill: none;
  transition: stroke 0.2s ease, transform 0.2s ease;
}
.custom-modal-close:hover .do-icon svg,
.modal-close:hover .do-icon svg {
  stroke: var(--text-primary);
  transform: rotate(8deg);
}

/* ── Modal warning/info icon (large, centered) ──────────────
   Inherits color from parent .custom-modal-icon. */
.custom-modal-icon .do-icon svg {
  width: 36px;
  height: 36px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

/* ── Upload zone icon ────────────────────────────────────────
   Large cloud-upload centered in drop zone. */
.upload-icon .do-icon svg {
  width: 48px;
  height: 48px;
  stroke: var(--icon-color);
  stroke-width: 1.2px;
  fill: none;
}

/* ── Info block header icon ──────────────────────────────────
   16px, muted, matches info text color. */
.info-header .do-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

/* ── Preview / notice / badge inline ─────────────────────────
   Inherits text color from parent element. */
.preview-badge .do-icon svg,
.preview-notice .do-icon svg,
.topbar-badge .do-icon svg,
.page-eyebrow .do-icon svg {
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

/* ── Pin gate icons ──────────────────────────────────────────
   Centered logo-mark and lock icon. */
.pin-logo-mark .do-icon svg,
.pin-card-icon .do-icon svg {
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}
.pin-logo-mark .do-icon svg {
  width: 28px;
  height: 28px;
}
.pin-card-icon .do-icon svg {
  width: 40px;
  height: 40px;
}
.topbar-logo-mark .do-icon svg {
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
  width: 20px;
  height: 20px;
}

/* ── Visit dropdown icon ─────────────────────────────────────
   Chevron-down, transitions to match dropdown open state. */
.visit-dropdown-icon .do-icon svg {
  transition: transform 0.25s ease, stroke 0.2s ease;
  stroke: var(--icon-color);
  stroke-width: 1.5px;
  fill: none;
}
.visit-dropdown-toggle.open .visit-dropdown-icon .do-icon svg {
  transform: rotate(180deg);
}

/* ── Search input icon ───────────────────────────────────────
   Inside .search-wrap / .visit-dropdown-search, muted. */
.search-icon .do-icon svg,
.visit-dropdown-search .do-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--icon-color);
  stroke-width: 1.5px;
  fill: none;
}

/* ── Theme toggle crf-preview button ─────────────────────────
   Moon icon, inherits button color. */
.theme-toggle .do-icon svg {
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

/* ── btn-link (visit management buttons) ────────────────────
   Tiny 14px inline icon, matches link color. */
.btn-link .do-icon svg,
.visit-management-actions .do-icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

/* ── Remove button (danger text button) ─────────────────────
   Inherits danger color from .btn-danger. */
.btn-danger .do-icon svg {
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}


/* ────────────────────────────────────────────────────────────
   §6  TYPOGRAPHY COMPONENTS
   ──────────────────────────────────────────────────────────── */

/* Section eyebrow — small all-caps label */
.do-eyebrow {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}

/* ── Kicker / label strip ──────────────────────────────────── */
.do-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hero kicker — mirrors .do-label exactly, orange palette, no border */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--do-orange);
  /* Full crisp-text rendering stack */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke: 0;
  will-change: auto;
}

/* Inherit crisp rendering on all child spans */
.kicker-powered,
.kicker-dori {
  color: var(--do-orange);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.do-label-sep,
.kicker-separator {
  color: var(--do-orange);
  font-weight: 300;
  opacity: 0.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Card / pillar primary heading */
.do-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

/* Card / pillar body copy */
.do-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0.2rem 0 0;
}

/* Small tag / capability label */
.do-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--spacing-md);
}

.do-tag svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

/* Gradient text utility */
.gradient-text {
  color: var(--text-primary);
  font-weight: 600;
}


/* ────────────────────────────────────────────────────────────
   §7  BADGES & PILLS
   ──────────────────────────────────────────────────────────── */

.do-badge,
.do-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
}

.do-badge { border-radius: var(--radius-md); }
.do-pill  { border-radius: var(--radius-full); }

.do-badge--neutral, .do-pill--neutral {
  background: var(--item-hover-bg);
  border-color: var(--border-color);
  color: var(--text-muted);
}

.do-badge--muted, .do-pill--muted {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-disabled);
}

.do-badge--success, .do-pill--success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.do-badge--warning, .do-pill--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.do-badge--error, .do-pill--error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error);
}

.do-badge--info, .do-pill--info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info);
}


/* ────────────────────────────────────────────────────────────
   §8  NAVIGATION COMPONENTS
   ──────────────────────────────────────────────────────────── */

/* ── §8.0  LOGO — Dynamic Multi-Theme PNG Swap ────────────────
   Two transparent PNGs sit inside .logo-link:
     · logo-img--dark-theme  → white text, shown on dark backgrounds
     · logo-img--light-theme → dark text, shown on light backgrounds
   No background blocks, wrappers, or borders are used.
   Visibility is toggled purely via display, causing zero layout shift.
   ─────────────────────────────────────────────────────────────── */

/* Base: block-level, fixed height, auto width — preserves natural aspect ratio */
.logo-link .logo-img {
  display: block;
  height: 28px;
  width: auto;
}

/* DEFAULT STATE — dark theme assumed (shows white-text logo, hides dark-text logo) */
.logo-link .logo-img--light-theme {
  display: none !important;
}
.logo-link .logo-img--dark-theme {
  display: block !important;
}

/* LIGHT THEME ACTIVE STATE OVERRIDES */
/* Triggered by data-theme="light" on <html>, or class="light-theme" on <html>/<body> */
[data-theme="light"] .logo-link .logo-img--dark-theme,
html.light-theme .logo-link .logo-img--dark-theme,
body.light-theme .logo-link .logo-img--dark-theme {
  display: none !important;
}

[data-theme="light"] .logo-link .logo-img--light-theme,
html.light-theme .logo-link .logo-img--light-theme,
body.light-theme .logo-link .logo-img--light-theme {
  display: block !important;
}

/* Align the projects-topbar-brand version to match header height properly */
.projects-topbar-brand.logo-link .logo-img {
  height: 24px;
}

/* Theme toggle button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-surface), color var(--transition-fast);
  flex-shrink: 0;
}

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

.theme-toggle-btn svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
  transition: stroke var(--transition-fast);
}

/* Nav CTA button */
.btn-nav {
  background: var(--text-primary);
  color: var(--text-inverse);
  border: 1px solid transparent;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  min-height: 32px;
  cursor: pointer;
  transition: var(--transition-surface), color var(--transition-fast);
}

.btn-nav:hover {
  background: var(--text-secondary);
}


/* ────────────────────────────────────────────────────────────
   §9  STATS / METRICS COUNTER BLOCK (horizontal wireframe)
   ──────────────────────────────────────────────────────────── */

.stats-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--spacing-xl);
  border-right: 1px solid var(--border-color);
  transition: var(--transition-surface);
  text-align: left;
}

.stat-item:last-child {
  border-right: none;
}

.stat-item:hover {
  background: var(--bg-sub-surface);
}

.stat-number {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Hero stats — horizontal inline variant */
.hero-stats {
  display: flex;
  gap: var(--spacing-2xl);
  flex-wrap: wrap;
  animation: fade-in-up 1s ease-out 0.6s both;
}

.hero-stats .stat-item {
  border: none;
  background: transparent;
  padding: 0;
  flex: 0 1 auto;
}


/* ────────────────────────────────────────────────────────────
   §10  CAPABILITIES — ASYMMETRIC 1/3 + 2/3 BLOCK
   ──────────────────────────────────────────────────────────── */

.capabilities-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

.capabilities-split__label {
  /* 1/3 column: eyebrow, heading, sub-text */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
}

.capabilities-split__label h2 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}

.capabilities-split__label p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.capabilities-split__grid {
  /* 2/3 column: feature grid */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

/* Feature card within capabilities grid */
.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 1px solid var(--border-divider);
  border-radius: 0;
  padding: var(--spacing-xl) var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  position: relative;
  transition: background 0.28s ease;
  cursor: default;
  overflow: visible;
}

.feature-card::before,
.feature-card::after { display: none; }

.feature-card:hover {
  background: var(--do-hover-wash);
}

@media (max-width: 768px) {
  .capabilities-split {
    grid-template-columns: 1fr;
  }

  .capabilities-split__grid {
    grid-template-columns: 1fr;
  }
}


/* ────────────────────────────────────────────────────────────
   §11  HERO SECTION
   ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  overflow: hidden;
  margin-top: 90px;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#dataOrbixCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-color: transparent;
}

.hero-container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 100px var(--spacing-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  min-height: 70vh;
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl);
  position: relative;
  z-index: 10;
  /* Promote to its own GPU layer up-front so animated children
     don't get rasterized on a fractional-pixel boundary */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
  animation: fade-in-up 0.8s ease-out;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  color: var(--text-primary);
  animation: fade-in-up 1s ease-out 0.2s both;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hero-accent {
  display: block;
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--text-primary);
  margin-top: var(--spacing-sm);
}

.hero-subtitle {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--spacing-xl);
  max-width: 600px;
  animation: fade-in-up 1s ease-out 0.4s both;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hero-cta {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-wrap: wrap;
  animation: fade-in-up 1s ease-out 0.6s both;
}

.hero-cta .btn {
  min-width: 160px;
  justify-content: center;
}

.hero-cta .btn-primary {
  background: var(--text-primary);
  color: var(--text-inverse);
  border: none;
}

.hero-cta .btn-primary:hover {
  background: var(--text-secondary);
  transform: translateY(-1px);
}

.hero-cta .btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.hero-cta .btn-secondary:hover {
  background: var(--item-hover-bg);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

/* Canvas opacity per theme */
body[data-theme="dark"] #dataOrbixCanvas,
body:not([data-theme="light"]) #dataOrbixCanvas {
  opacity: 0.55;
}

body[data-theme="light"] #dataOrbixCanvas {
  opacity: 0.25;
  filter: invert(1) hue-rotate(180deg);
}

/* Hero canvas wrapper */
.hero-prereg-canvas-wrapper {
  position: relative;
  background: var(--bg-primary);
}

/* Suppress unused hero elements */
.hero-particles,
.hero-gradient,
.hero::before,
.hero-scroll-indicator { display: none; }


/* ────────────────────────────────────────────────────────────
   §12  WORKFLOW STEPS
   ──────────────────────────────────────────────────────────── */

.workflow-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-3xl);
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
  align-items: stretch;
}

.workflow-step {
  text-align: center;
  padding: var(--spacing-2xl);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: var(--transition-surface);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 220px;
}

.workflow-step:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

/* Hide arrows — cleaner layout */
.workflow-arrow { display: none !important; }

.step-number {
  width: 44px;
  height: 44px;
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 auto var(--spacing-md);
  flex-shrink: 0;
  transition: var(--transition-surface);
}

.workflow-step:hover .step-number {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.step-icon {
  font-size: var(--font-size-lg);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
  line-height: 1.4;
}

.step-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  flex-grow: 1;
}

@media (max-width: 768px) {
  .workflow-steps { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .workflow-step  { min-height: auto; padding: var(--spacing-lg); }
}


/* ────────────────────────────────────────────────────────────
   §13  COMPLIANCE / TRUST SECTION
   ──────────────────────────────────────────────────────────── */

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
}

.compliance-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  text-align: center;
  transition: var(--transition-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.compliance-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.compliance-icon {
  width: 48px;
  height: 48px;
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-surface);
}

.compliance-item:hover .compliance-icon {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

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

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


/* ────────────────────────────────────────────────────────────
   §14  MODALS & OVERLAYS
   ──────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--spacing-2xl);
  position: relative;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-xl);
}

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

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-size-lg);
  padding: var(--spacing-xs);
  transition: color var(--transition-fast);
  line-height: 1;
}

.modal-close:hover { color: var(--text-primary); }

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

.modal-footer {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}


/* ────────────────────────────────────────────────────────────
   §15  TABLES & DATA GRIDS
   ──────────────────────────────────────────────────────────── */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

thead th {
  background: var(--bg-sub-surface);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

tbody tr:last-child { border-bottom: none; }

tbody tr:hover { background: var(--bg-sub-surface); }

tbody td {
  padding: var(--spacing-sm) var(--spacing-md);
  vertical-align: middle;
  color: var(--text-secondary);
}

tbody td:first-child { color: var(--text-primary); font-weight: 500; }


/* ────────────────────────────────────────────────────────────
   §16  ALERTS & TOAST NOTIFICATIONS
   ──────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.alert--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.alert--error   { background: var(--color-error-bg);   border-color: var(--color-error-border);   color: var(--color-error); }
.alert--info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info); }

/* Toast */
.toast-container {
  position: fixed;
  bottom: var(--spacing-xl);
  right: var(--spacing-xl);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  pointer-events: none;
}

.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 280px;
  animation: slideInUp 0.3s ease-out;
}


/* ────────────────────────────────────────────────────────────
   §17  LOADERS & SKELETONS
   ──────────────────────────────────────────────────────────── */

.skeleton {
  background: var(--bg-sub-surface);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--item-hover-bg) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s infinite;
}

.skeleton-text  { height: 1em; margin-bottom: 0.5em; }
.skeleton-title { height: 1.5em; width: 60%; margin-bottom: 1em; }
.skeleton-card  { height: 120px; }

/* Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

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


/* ────────────────────────────────────────────────────────────
   §18  EMAIL REGISTRATION / PRIORITY ACCESS CARD
   ──────────────────────────────────────────────────────────── */

.prereg-card,
.priority-access-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.prereg-card__title,
.priority-access-card__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.prereg-card__desc,
.priority-access-card__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.prereg-card__form,
.priority-access-card__form {
  display: flex;
  gap: var(--spacing-sm);
}

.prereg-card__input,
.priority-access-card__input {
  flex: 1;
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: 40px;
  transition: border-color var(--transition-fast);
}

.prereg-card__input::placeholder { color: var(--text-disabled); }
.prereg-card__input:focus        { outline: none; border-color: var(--border-focus); }

.prereg-card__note,
.priority-access-card__note {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* Inline email bar (hero strip) */
.email-register-strip {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md);
  max-width: 460px;
  width: 100%;
}

.email-register-strip input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  min-height: 36px;
}

.email-register-strip input::placeholder { color: var(--text-disabled); }
.email-register-strip input:focus        { outline: none; }


/* ────────────────────────────────────────────────────────────
   §19  THEME TOGGLE COMPONENT (self-contained)
   ──────────────────────────────────────────────────────────── */

.theme-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Icon visibility per theme */
.icon-sun  { display: none; }
.icon-moon { display: block; }

body[data-theme="light"] .icon-sun  { display: block; }
body[data-theme="light"] .icon-moon { display: none; }


/* ────────────────────────────────────────────────────────────
   §20  CARD INTERACTION SYSTEM (isolated hover — no double-fire)
   ──────────────────────────────────────────────────────────── */

/*
  Card base state — unified surface + border system.
  All named card types use the same interaction tokens.
*/
.metric-card,
.domain-card,
.workflow-item,
.config-section,
.compliance-item,
.info-card,
.primary-action-card,
.mapping-domain-card,
.card {
  background:    var(--bg-surface);
  border:        1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition:    var(--transition-surface);
  box-shadow:    none;
}

/*
  Card hover — ISOLATED:
  Parent card hover is BLOCKED when any child interactive element is hovered.
  Uses :has() pseudo-class. Prevents double-activation on nested sub-cards.
*/
.metric-card:hover:not(:has(button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover)),
.domain-card:hover:not(:has(button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover)),
.workflow-item:hover:not(:has(button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover)),
.compliance-item:hover:not(:has(button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover)),
.info-card:hover:not(:has(button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover)),
.primary-action-card:hover:not(:has(button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover)),
.mapping-domain-card:hover:not(:has(button:hover, a:hover, select:hover, [role="button"]:hover)),
.card:hover:not(:has(button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover)) {
  background:   var(--bg-hover);
  border-color: var(--border-hover);
  box-shadow:   none;
  transform:    none;
}

/* Parent RETREATS when child is hovered */
.metric-card:hover:has(button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover),
.domain-card:hover:has(button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover),
.card:hover:has(button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover) {
  background:   var(--bg-surface);
  border-color: var(--border-color);
}

/* Click physics — snap scale */
.metric-card:active,
.domain-card:active,
.card:active,
.do-surface-card:active,
.capability-card:active {
  transform: var(--active-scale);
  transition: transform var(--transition-instant);
}


/* ────────────────────────────────────────────────────────────
   §21  CTA SECTION
   ──────────────────────────────────────────────────────────── */

.cta {
  text-align: center;
}

.cta-wrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.cta-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
  padding: var(--spacing-lg) var(--spacing-2xl);
}

.cta-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin: 0 0 var(--spacing-md);
  color: var(--text-primary);
  line-height: 1.3;
}

.cta-description {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
  line-height: 1.6;
  font-weight: 400;
}

.cta-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}

.cta-actions .btn-primary {
  background: var(--text-primary);
  color: var(--text-inverse);
  border: none;
  font-weight: 700;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  padding: 0 var(--spacing-xl);
  height: 42px;
  min-height: 42px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cta-actions .btn-primary:hover {
  background: var(--text-secondary);
  transform: translateY(-1px);
}

.cta-actions .btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  font-weight: 600;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  padding: 0 var(--spacing-xl);
  height: 42px;
  min-height: 42px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cta-actions .btn-secondary:hover {
  background: var(--item-hover-bg);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.cta-note {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
  margin-top: var(--spacing-lg);
  opacity: 0.8;
}

.section-section-title::after { display: none; }
.cta::before                   { display: none; }

/* =============================================================================
   §22  PART-2 STRUCTURAL RECOVERY
   Source archives: dashboard.css · dashboard-alternative.css ·
                    dashboard-enhanced.css · do-components.css ·
                    crf-review.css · checklist-traffic-light.css
   Rules: structural / positional / dimensional ONLY.
   Zero hardcoded hex — every colour value uses a CSS variable.
   ============================================================================= */

/* ─── §22.1  Dashboard — outer shells ──────────────────────────────────────── */

.dashboard-main {
  min-height: calc(100vh - var(--nav-height));
  padding-top: calc(var(--nav-height) + 6px);
}

.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.dashboard-header {
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  border-bottom: 1px solid var(--border-color);
  height: var(--nav-height);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
  height: 100%;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--spacing-xl);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.user-menu {
  position: relative;
}

/* ─── §22.2  Dashboard — page title & study info ───────────────────────────── */

.page-title-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.study-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.study-status-badge {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ─── §22.3  Dashboard — status overview & status cards grid ───────────────── */

.status-overview {
  margin-bottom: var(--spacing-3xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.status-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

/* ─── §22.4  Dashboard — generic status/info card ──────────────────────────── */

.status-card {
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl);
  transition: var(--transition-surface);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
}

.status-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.status-card::before { display: none; }
.status-card:hover::before { display: none; }

/* ─── §22.5  Dashboard — card header / icon / title ────────────────────────── */

.card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  min-height: 40px;
  position: relative;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.card-icon i {
  line-height: 1;
  display: block;
  margin: 0;
  padding: 0;
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  height: 40px;
  letter-spacing: -0.25px;
}

/* ─── §22.6  Dashboard — card content / info items ─────────────────────────── */

.card-content {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-md);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
  gap: var(--spacing-sm);
}

.info-item:last-child { margin-bottom: 0; }

.info-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: 400;
  flex-shrink: 0;
  min-width: 60px;
}

.info-value {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
  text-align: right;
  flex: 1;
  word-break: break-word;
  line-height: 1.4;
}

/* ─── §22.7  Dashboard — progress bar ──────────────────────────────────────── */

.progress-section { margin-bottom: var(--spacing-md); }

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--bg-sub-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--color-warning);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.progress-fill.complete { background-color: var(--color-success); }

/* ─── §22.8  Dashboard — card footer ───────────────────────────────────────── */

.card-footer {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  position: relative;
  background-color: var(--bg-sub-surface);
  border-left: 2px solid var(--border-color);
  margin-left: calc(-1 * var(--spacing-md));
  margin-right: calc(-1 * var(--spacing-md));
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* ─── §22.9  Dashboard — status indicators / badges ────────────────────────── */

.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid currentColor;
  transition: var(--transition-surface);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.status-current   { color: var(--color-success); }
.status-warning   { color: var(--color-warning); }
.status-progress  { color: var(--color-success); }
.status-pending   { color: var(--text-muted); }

.status-badge {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid currentColor;
}

.status-in-review    { color: var(--color-warning); }
.status-not-started  { color: var(--color-error); }

/* ─── §22.10  Dashboard — section header / controls ────────────────────────── */

.activity-progress {
  margin-bottom: var(--spacing-xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--spacing-lg);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.section-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.section-controls .btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  transition: var(--transition-fast);
  min-height: 32px;
}

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

/* ─── §22.11  Dashboard — mapped domains container & cards ─────────────────── */

.mapped-domains-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  min-height: 120px;
  overflow-y: auto;
  max-height: 600px;
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
}

.mapping-domain-card {
  width: 285px !important;
  height: 64px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  padding: var(--spacing-sm) var(--spacing-md);
  flex-shrink: 0;
  transition: var(--transition-surface);
}

.mapping-domain-card:hover {
  border-color: var(--border-hover);
  background-color: var(--bg-hover);
}

.mapping-domain-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
  line-height: 1;
}

.mapping-domain-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
  min-width: 0; /* allow flex child to shrink */
  overflow: hidden;
}

.mapping-domain-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapping-domain-subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapping-domain-subtitle::after { display: none; }

.mapping-domain-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
}

.mapping-domain-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  position: relative;
}

.mapping-domain-status::after { display: none; }

.mapping-domain-version {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.mapping-domain-timestamp {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background-color: var(--bg-sub-surface);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  white-space: nowrap;
  font-weight: 500;
}

.mapping-variables,
.mapping-visits {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: transparent;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-weight: 500;
  border: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* ─── §22.12  Dashboard — completion indicator ──────────────────────────────── */

.completion-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  transition: var(--transition-fast);
  margin-left: auto;
}

.completion-indicator.complete      { background-color: var(--color-success); color: var(--text-inverse); }
.completion-indicator.in-progress   { background-color: var(--color-warning); color: var(--text-inverse); }

/* ─── §22.13  Dashboard — timeline view (activity/progress) ─────────────────── */

.progress-content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--spacing-lg) 0;
  position: relative;
  overflow: hidden;
}

.progress-content::before { display: none; }

.timeline-view { position: relative; }

.timeline {
  position: relative;
  padding-left: var(--spacing-lg);
}

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

.timeline-item {
  position: relative;
  margin-bottom: 32px;
  padding-left: var(--spacing-lg);
}

.timeline-item:last-child { margin-bottom: 0; }

.timeline-marker {
  position: absolute;
  left: -20px;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  z-index: 1;
  transition: var(--transition-surface);
}

/* Timeline track segments */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 24px;
  width: 6px;
  height: calc(100% + 8px);
  background-color: var(--border-color);
  border-radius: 3px;
  opacity: 0.3;
  z-index: 0;
}

.timeline-item:last-child::before { display: none; }

.timeline-item.completed::before { background-color: var(--color-success); opacity: 1; }
.timeline-item.current::before   { background-color: var(--color-warning);  opacity: 1; }
.timeline-item.pending::before   { background-color: var(--text-muted);     opacity: 0.6; }

/* Timeline marker states */
.timeline-item.completed .timeline-marker {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--text-inverse);
}

.timeline-item.current .timeline-marker {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--text-inverse);
  animation: pulse-timeline-current 2s infinite;
}

.timeline-item.pending .timeline-marker {
  background: transparent;
  border-color: var(--text-muted);
  color: var(--text-muted);
}

@keyframes pulse-timeline-current {
  0%   { box-shadow: 0 0 0 0 var(--color-warning-bg); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Timeline content */
.timeline-content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--spacing-sm) 0;
  transition: var(--transition-surface);
  position: relative;
  overflow: hidden;
}

.timeline-content::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  width: 12px;
  height: 2px;
  background-color: var(--border-color);
  transform: translateY(-50%);
  border-radius: 1px;
  z-index: 1;
}

.timeline-item.completed .timeline-content::before { background-color: var(--color-success); }
.timeline-item.current   .timeline-content::before { background-color: var(--color-warning); }
.timeline-item.pending   .timeline-content::before { background-color: var(--text-muted); opacity: 0.6; }

.timeline-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: 0.25px;
  display: inline;
}

.timeline-description {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: inline;
  margin-left: var(--spacing-xs);
  line-height: 1.3;
}

.timeline-date {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  background: transparent;
  padding: 1px 0;
  border-radius: 0;
  display: block;
}

/* ─── §22.14  Dashboard — checklist items ───────────────────────────────────── */

.checklist-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  transition: var(--transition-surface);
  cursor: pointer;
}

.checklist-item:hover {
  border-color: var(--border-hover);
  background-color: var(--bg-hover);
  transform: translateY(-1px);
}

.checklist-item.checked {
  border-color: var(--color-success);
  background-color: var(--color-success-bg);
}

.checklist-item.current {
  border-color: var(--color-warning);
  background-color: var(--color-warning-bg);
  animation: pulse-checklist-current 2s infinite;
}

.checklist-item.pending {
  border-color: var(--border-color);
  opacity: 0.6;
}

@keyframes pulse-checklist-current {
  0%   { box-shadow: 0 0 0 0 var(--color-warning-bg); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Checklist checkbox */
.checklist-checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.checklist-checkbox:hover {
  border-color: var(--color-success);
  background-color: var(--color-success-bg);
}

.checklist-checkbox.checked {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.checklist-checkbox.checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: bold;
}

.checklist-item.checked .checklist-title,
.checklist-item.checked .checklist-description {
  opacity: 0.7;
  text-decoration: line-through;
}

/* ─── §22.15  Dashboard — alternative timeline (timeline-alt) ───────────────── */

.activity-progress-alternative {
  margin-bottom: var(--spacing-xl);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.progress-content-alternative {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  position: relative;
}

.progress-content-alternative::before { display: none; }

.timeline-alt { position: relative; }

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

.timeline-item-alt {
  position: relative;
  margin-bottom: var(--spacing-lg);
  padding-left: 60px;
  transition: var(--transition-surface);
}

.timeline-item-alt:hover { transform: translateX(4px); }

.timeline-marker-alt {
  position: absolute;
  left: 0;
  top: 8px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background-color: var(--bg-sub-surface);
  border: 2px solid var(--border-color);
  z-index: 1;
  transition: var(--transition-surface);
}

.timeline-item-alt.completed .timeline-marker-alt {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--text-inverse);
}

.timeline-item-alt.current .timeline-marker-alt {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--text-inverse);
  animation: pulse-timeline-current 2s infinite;
}

.timeline-item-alt.pending .timeline-marker-alt {
  background-color: var(--bg-sub-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}

.timeline-content-alt {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  position: relative;
}

.timeline-content-alt:hover { border: none; box-shadow: none; transform: none; }
.timeline-content-alt::before { display: none; }

.timeline-header-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.timeline-title-alt {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.25px;
}

.timeline-badge-alt {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border: 1px solid currentColor;
}

.timeline-badge-alt.completed { color: var(--color-success);  background-color: var(--color-success-bg); }
.timeline-badge-alt.current   { color: var(--color-warning);  background-color: var(--color-warning-bg); }
.timeline-badge-alt.pending   { color: var(--text-muted);     background-color: transparent; }

.timeline-description-alt {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.5;
}

.timeline-meta-alt {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.timeline-date-alt {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: 500;
  background-color: var(--bg-sub-surface);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.timeline-progress-alt {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.progress-bar-alt {
  flex: 1;
  height: 6px;
  background-color: var(--bg-sub-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
  max-width: 200px;
}

.progress-fill-alt {
  height: 100%;
  background-color: var(--color-success);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.progress-text-alt {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 35px;
}

/* ─── §22.16  Dashboard — alt checklist items ───────────────────────────────── */

.checklist-alt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.checklist-item-alt {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--bg-sub-surface);
  border: none;
  border-radius: 0;
  transition: var(--transition-surface);
  position: relative;
  border-left: 4px solid transparent;
}

.checklist-item-alt:hover { background-color: var(--bg-hover); }

.checklist-item-alt.completed { border-left-color: var(--color-success); background-color: var(--color-success-bg); }
.checklist-item-alt.current   { border-left-color: var(--color-warning);  background-color: var(--color-warning-bg); }
.checklist-item-alt.pending   { border-left-color: var(--border-color);   opacity: 0.8; }

.checklist-checkbox-alt {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
  background-color: var(--bg-surface);
  border: 2px solid var(--border-color);
  transition: var(--transition-surface);
}

.checklist-item-alt.completed .checklist-checkbox-alt {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--text-inverse);
}

.checklist-item-alt.current .checklist-checkbox-alt {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--text-inverse);
  animation: pulse-timeline-current 2s infinite;
}

.checklist-item-alt.pending .checklist-checkbox-alt {
  background-color: var(--bg-sub-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}

.checklist-header-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.checklist-title-alt {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.25px;
}

.checklist-status-alt {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.checklist-status-alt.completed { color: var(--color-success); }
.checklist-status-alt.current   { color: var(--color-warning); }
.checklist-status-alt.pending   { color: var(--text-muted); }

.checklist-description-alt {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.5;
}

.checklist-meta-alt {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.checklist-date-alt,
.checklist-user-alt,
.checklist-eta-alt,
.checklist-assignee-alt {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: 500;
  background-color: var(--bg-surface);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

/* ─── §22.17  Checklist grid / tiles (checklist-traffic-light) ──────────────── */

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.checklist-tile {
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl);
  transition: var(--transition-surface);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-height: 120px;
  border-left: 4px solid var(--border-color);
}

.checklist-tile:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.checklist-tile.completed {
  border-color: var(--color-success);
  background-color: var(--color-success-bg);
}

.checklist-tile.current {
  border-color: var(--color-warning);
  background-color: var(--color-warning-bg);
}

.checklist-tile.pending {
  border-color: var(--border-color);
  opacity: 0.8;
}

.checklist-tile-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  position: relative;
  flex: 1;
}

.checklist-checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-sm);
}

/* Tile-level checkbox (18px square) */
.checklist-tile .checklist-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.checklist-tile .checklist-checkbox:hover {
  border-color: var(--color-warning);
  background-color: var(--color-warning-bg);
}

.checklist-tile.completed .checklist-checkbox {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.checklist-tile.current .checklist-checkbox {
  border-color: var(--color-warning);
  background: transparent;
  animation: pulse-checklist-current 2s infinite;
}

.checklist-tile.pending .checklist-checkbox {
  border-color: var(--border-color);
  background: transparent;
  opacity: 0.6;
}

.checklist-checkbox.checked::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 6px;
  border: solid var(--text-inverse);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
  top: 2px;
  left: 3px;
}

.checklist-status-icon {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checklist-status-icon.completed { color: var(--color-success); font-size: 1.2rem; }
.checklist-status-icon.current   { color: var(--color-warning);  font-size: 1.2rem; }
.checklist-status-icon.pending   { color: var(--text-muted);     font-size: 1.2rem; opacity: 0.6; }

.pulsing-ring {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-warning);
  border-radius: 50%;
  position: relative;
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes pulse-border-amber {
  0%   { box-shadow: 0 0 0 0   var(--color-warning-bg); }
  70%  { box-shadow: 0 0 0 4px transparent; }
  100% { box-shadow: 0 0 0 0   transparent; }
}

.checklist-tile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.checklist-tile-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.checklist-tile-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.checklist-tile.completed .checklist-tile-title { color: var(--color-success); }
.checklist-tile.current   .checklist-tile-title { color: var(--color-warning); font-weight: 700; }
.checklist-tile.pending   .checklist-tile-title { color: var(--text-muted); opacity: 0.8; }
.checklist-tile.pending   .checklist-tile-description { opacity: 0.7; }

/* ─── §22.18  DO component library (do-components) ─────────────────────────── */

.do-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: 0;
  row-gap: 2rem;
}

.do-pillar {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border-color);
  border-radius: 0;
  padding: 2rem 2.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition-surface);
  cursor: default;
}

.do-pillar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2.25rem;
  right: 2.25rem;
  height: 1px;
  background-color: var(--border-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s ease;
  border-radius: 2px;
}

.do-pillar:hover { background-color: var(--bg-hover); }
.do-pillar:hover::after { transform: scaleX(1); }

.do-surface-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.do-surface-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition-surface);
  cursor: default;
}

.do-surface-card:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
}

.do-icon {
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 4px 4px 0;
  flex-shrink: 0;
}

.do-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-muted);
  stroke-width: 1.5px;
  fill: none;
  transition: var(--transition-fast);
}

.do-pillar:hover .do-icon svg,
.do-surface-card:hover .do-icon svg {
  stroke: var(--text-primary);
  transform: rotate(5deg);
}

.do-eyebrow {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}

.do-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0.35rem 0.85rem;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.do-label-sep { color: var(--text-muted); font-weight: 300; opacity: 0.7; }

.do-title  { font-size: 1.1rem; font-weight: 700; color: var(--text-primary);   margin: 0; line-height: 1.3; }
.do-desc   { font-size: 0.875rem; color: var(--text-secondary);               line-height: 1.7; margin: 0.2rem 0 0; }

.do-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1rem;
}

.do-tag svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.5px; fill: none; }

.do-badge,
.do-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
}

.do-badge { border-radius: var(--radius-md); }
.do-pill  { border-radius: 9999px; }

.do-badge--neutral, .do-pill--neutral {
  background-color: var(--bg-sub-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}

.do-badge--muted, .do-pill--muted {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.do-badge--success, .do-pill--success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.do-badge--warning, .do-pill--warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.do-badge--error, .do-pill--error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}

.do-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.do-section {
  padding: 6rem 0;
  background-color: var(--bg-primary);
}

.do-section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}


/* ────────────────────────────────────────────────────────────
   §21  ENVIRONMENT CARDS (.do-env-card)
   Landing portal card for Sponsor/Project/Environment navigation.
   Left border color encodes the environment type.
   All colors via CSS vars — dark/light theme adaptive.
   ──────────────────────────────────────────────────────────── */

/* ── Base Card ── */
.do-env-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.do-env-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.do-env-card:active {
  transform: var(--active-scale);
  transition: transform var(--transition-instant);
}

/* ── Environment modifier: left border color ── */
.do-env-card--spec { border-left-color: var(--dori-purple); }
.do-env-card--dev  { border-left-color: var(--env-dev); }
.do-env-card--uat  { border-left-color: var(--env-uat); }
.do-env-card--prod { border-left-color: var(--env-prod); }

/* ── Study Avatar (circular logo/initials holder) ── */
.study-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  flex-shrink: 0;
  user-select: none;
}

.study-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ── Env-specific avatar tints ── */
.do-env-card--spec .study-avatar { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.25); color: var(--dori-purple); }
.do-env-card--dev  .study-avatar { background: rgba(249, 115, 22, 0.12);  border-color: rgba(249, 115, 22, 0.25);  color: var(--env-dev);  }
.do-env-card--uat  .study-avatar { background: rgba(59, 130, 246, 0.12);  border-color: rgba(59, 130, 246, 0.25);  color: var(--env-uat);  }
.do-env-card--prod .study-avatar { background: rgba(16, 185, 129, 0.12);  border-color: rgba(16, 185, 129, 0.25);  color: var(--env-prod); }

/* ─────────────────────────────────────────────────────────────────────────────
   §21-RBAC  ENVIRONMENT CARD — LOCKED / RESTRICTED STATE
   Applied dynamically by rbac-engine.js when the user's role token does not
   include the card's environment type in its permission array.

   Design system pattern: "Locked / Disabled" — not hidden, not deceptive.
   Uses opacity + grayscale to signal inaccessibility, a visible lock badge
   to communicate governance intent, and pointer-events:none for safety.
   ───────────────────────────────────────────────────────────────────────────── */

.do-env-card--locked {
  /* ── Structural dim: communicates disabled, never invisible ── */
  opacity: 0.48;
  filter: grayscale(100%);
  cursor: not-allowed !important;

  /* ── Nullify all interaction: clicks, hover transforms, focus ── */
  pointer-events: none;

  /* ── Muted border to reinforce neutral / inactive state ── */
  border-color: var(--border-color) !important;
  border-left-color: var(--border-neutral, var(--border-color)) !important;

  /* ── Suppress lift-on-hover that would imply interactability ── */
  transform: none !important;
  box-shadow: none !important;

  /* ── position:relative already set on .do-env-card, needed for ::after ── */
  position: relative;
}

/* Suppress all child color accents — avatars, dots, arrows go fully muted */
.do-env-card--locked .study-avatar {
  background: var(--bg-sub-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-disabled) !important;
}

.do-env-card--locked .env-card-status-dot {
  background: var(--text-disabled) !important;
  box-shadow: none !important;
}

.do-env-card--locked .env-card-title {
  color: var(--text-muted) !important;
}

.do-env-card--locked .env-card-action {
  color: var(--text-disabled) !important;
}

/* ── Explicit "Restricted Access" lock badge overlay ──
   Rendered via ::after pseudo-element — no extra markup required.
   Positioned bottom-right inside the card, layered above content.     */
.do-env-card--locked::after {
  content: '🔒 Restricted Access';
  position: absolute;
  bottom: var(--spacing-sm, 8px);
  right: var(--spacing-md, 12px);

  /* Typography */
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-family-primary, 'Inter', sans-serif);
  letter-spacing: 0.02em;
  color: var(--text-muted);

  /* Surface */
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-neutral, var(--border-color));
  border-radius: var(--radius-sm, 4px);
  padding: 3px 7px;

  /* Stack above card content */
  z-index: 2;

  /* No pointer events on the badge itself */
  pointer-events: none;
}

/* ── Hover suppression: locked cards must never react to hover ── */
.do-env-card--locked:hover {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Details Stack ── */
.env-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.env-card-context {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.env-card-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* ── Status dot (live indicator) ── */
.env-card-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
}

.env-card-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.env-card-status-dot--spec { background: var(--dori-purple); box-shadow: 0 0 6px rgba(139, 92, 246, 0.6); }
.env-card-status-dot--dev  { background: var(--env-dev);    box-shadow: 0 0 6px rgba(249, 115, 22, 0.6); }
.env-card-status-dot--uat  { background: var(--env-uat);    box-shadow: 0 0 6px rgba(59, 130, 246, 0.6); }
.env-card-status-dot--prod { background: var(--env-prod);   box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); }

.env-card-status-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Action Arrow ── */
.env-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--icon-color);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.do-env-card:hover .env-card-action {
  color: var(--text-primary);
  transform: translateX(3px);
}

.env-card-action svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75px;
}

/* ── Environment card grid layout ── */
.env-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-md);
}

/* ══════════════════════════════════════════════════════════
   WORKSPACE CANVAS CONTAINER
   ─────────────────────────────────────────────────────────
   Gap-based vertical rhythm: the container owns ALL spacing
   between sponsor sections. Individual sponsor sections and
   project row groups carry zero margin/padding so that when
   JS adds .is-empty-sponsor / .is-empty-group the element
   truly collapses to 0 px with nothing left behind.
══════════════════════════════════════════════════════════ */
.workspace-canvas-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

/* ── Project row group shell ─────────────────────────────
   Baseline: zero margin, zero padding.
   Spacing between sibling project groups is added only when
   the group is visible (:not(.is-empty-group)).            */
.project-row-group {
  margin: 0;
  padding: 0;
  display: block;
}

.project-row-group:not(.is-empty-group) {
  margin-bottom: var(--spacing-lg);
}

/* ── Sponsor section shell ───────────────────────────────
   Margin is owned by the parent .workspace-canvas-container
   gap; individual sponsor sections carry none of their own. */
.sponsor-section {
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════
   EMPTY-STATE COLLAPSE RULES
   ─────────────────────────────────────────────────────────
   JS adds these classes when a group has zero visible cards.
   display:none removes the element from the layout entirely,
   so the flex gap above simply doesn't fire for that slot.
   The redundant metric properties are defence-in-depth for
   any browser that treats display:none as still box-modeled.
══════════════════════════════════════════════════════════ */
.project-row-group.is-empty-group,
.sponsor-section.is-empty-sponsor {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

.sponsor-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.sponsor-section-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sponsor-section-count {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-disabled);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.5rem;
}

/* ── Breadcrumb selector ── */
.projects-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.breadcrumb-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.breadcrumb-trigger:hover {
  background: var(--item-hover-bg);
  color: var(--text-primary);
}

.breadcrumb-trigger:active {
  background: var(--item-hover-bg-alt);
}

.breadcrumb-trigger--active {
  color: var(--text-primary);
  font-weight: 600;
}

.breadcrumb-trigger--muted {
  color: var(--text-muted);
  font-weight: 400;
}

.breadcrumb-trigger--muted:hover {
  color: var(--text-secondary);
}

.breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  color: var(--text-disabled);
  flex-shrink: 0;
  pointer-events: none;
}

.breadcrumb-separator svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2px;
}

/* ── Breadcrumb dropdown panel ── */
.breadcrumb-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.breadcrumb-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.breadcrumb-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.6rem var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.breadcrumb-dropdown-item:hover {
  background: var(--item-hover-bg);
  color: var(--text-primary);
}

.breadcrumb-dropdown-item.is-active {
  color: var(--text-primary);
  font-weight: 600;
}

.breadcrumb-dropdown-item .do-icon--inline svg {
  width: 14px;
  height: 14px;
}

/* ── Page-level layout shell for projects.html ── */
.projects-shell {
  min-height: 100vh;
  background: var(--bg-primary);
  font-family: var(--font-family-primary);
  -webkit-font-smoothing: antialiased;
}

.projects-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--nav-height);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-xl);
  gap: var(--spacing-md);
  transition: background 0.2s ease;
}

.projects-topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.projects-topbar-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
}

.projects-topbar-wordmark {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.projects-topbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  flex-shrink: 0;
}

.projects-topbar-end {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-left: auto;
}

.projects-content {
  padding-top: calc(var(--nav-height) + var(--spacing-xl));
  padding-bottom: var(--spacing-3xl);
  max-width: 1100px;
  margin: 0 auto;
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

.projects-page-header {
  margin-bottom: var(--spacing-2xl);
}

.projects-page-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  margin: 0 0 var(--spacing-xs);
  line-height: 1.15;
}

.projects-page-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════
   BENTO METRICS GRID
   FIX 2: Layout + micro-typography
   FIX 3: Hover lift + animated left accent bar
══════════════════════════════════════════════════════════ */

/* ── Grid wrapper ── */
.do-metrics-bento-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

/* ── Individual tile shell ── */
.do-metric-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-neutral, var(--border-color));
  border-radius: var(--radius-md, 8px);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s ease-in-out,
              border-color 0.2s ease-in-out,
              transform 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out;
  user-select: none;
}

/* ── Accent bar (hidden by default, expands left-to-right on hover) ── */
.do-metric-tile::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 0;
  transition: width 0.15s ease-in-out;
  pointer-events: none;
}

/* ── Hover: lift + surface tint + border brighten ── */
.do-metric-tile:hover {
  background: var(--bg-sub-surface);
  border-color: var(--border-active, var(--text-secondary));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── Hover: snap accent bar to 4 px (matches env-card left border) ── */
.do-metric-tile:hover::before {
  width: 4px;
}

/* ── Tile typography ── */
.do-metric-tile .tile-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--spacing-xs);
}

.do-metric-tile .tile-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ── Env-keyed accent bar colours ── */
.do-metric-tile[data-env="all"]::before  { background: var(--text-secondary); }
.do-metric-tile[data-env="spec"]::before { background: #A855F7; } /* Spec purple  */
.do-metric-tile[data-env="dev"]::before  { background: #F97316; } /* Dev orange   */
.do-metric-tile[data-env="uat"]::before  { background: #3B82F6; } /* UAT blue     */
.do-metric-tile[data-env="prod"]::before { background: #22C55E; } /* Prod green   */

/* ── Active filter state: tile is selected as environment toggle ── */
.do-metric-tile.is-active-filter {
  background: var(--bg-sub-surface);
  border-color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.do-metric-tile.is-active-filter::before {
  width: 4px !important; /* Permanently lock accent bar open */
}
.do-metric-tile.is-active-filter .tile-number {
  color: var(--text-primary);
}
.do-metric-tile.is-active-filter .tile-label {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── Responsive: collapse to 2-col on narrow viewports ── */
@media (max-width: 700px) {
  .do-metrics-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* "Total" tile spans both columns on small screens */
  .do-metric-tile[data-env="all"] {
    grid-column: span 2;
  }
}


/* ── Filter toolbar — hidden since pills are removed; kept for structural spacing ── */
.projects-toolbar {
  display: none;
}

.projects-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.projects-search-icon {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--icon-color);
}

.projects-search-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75px;
}

.projects-search-input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  padding: 0.5rem 0.75rem 0.5rem 2.4rem;
  min-height: 38px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.projects-search-input:focus {
  border-color: var(--border-focus);
}

.projects-search-input::placeholder {
  color: var(--text-disabled);
}

/* ── Filter pills (DEPRECATED — removed from UI, kept as dead CSS tombstone) ── */
.projects-filter-pills { display: none !important; }
.projects-filter-pill  { display: none !important; }
.projects-filter-pill-dot { display: none !important; }

/* ── Empty state ── */
.projects-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  text-align: center;
  gap: var(--spacing-md);
}

.projects-empty-icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--text-disabled);
  fill: none;
  stroke-width: 1.5px;
}

.projects-empty-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.projects-empty-desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0;
}

.do-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}

.do-section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 1rem;
}

.do-section-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* ─── §22.19a  CRF Review — page shell & form containment ──────────────────── */

/*
  FIX 1: CRF PAGE CONTAINMENT & MAXIMUM WIDTH
  Prevents the review form from expanding full-viewport width.
  The crf-preview-main is the outermost <main>; crf-preview-container
  is the inner sheet; crf-form-container is the scrollable body;
  crf-form-content is the max-width constrained column.
*/

.crf-preview-main {
  min-height: 100vh;
  background-color: var(--bg-background, var(--bg-secondary));
  padding-top: var(--nav-height, 60px);
}

.crf-preview-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  min-height: calc(100vh - var(--nav-height, 60px));
  display: flex;
  flex-direction: column;
  background-color: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

.crf-header {
  background-color: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
  padding: var(--spacing-lg) var(--spacing-xl);
  position: sticky;
  top: var(--nav-height, 60px);
  z-index: var(--z-raised);
  flex-shrink: 0;
}

.crf-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.crf-title-section h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
}

.crf-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.crf-metadata span {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.review-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-info-bg);
  border: 1px solid var(--color-info-border, var(--border-color));
  color: var(--color-info);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Scrollable body of the CRF form */
.crf-form-container {
  flex: 1;
  padding: var(--spacing-xl) var(--spacing-lg);
  background-color: var(--bg-background, var(--bg-secondary));
}

/*
  The constrained content column — max 1200px driven down to
  the spec width; padding gives the "sheet" breathing room.
*/
.crf-form-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: var(--spacing-xl) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* Form section cards */
.form-section {
  background-color: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

/* Section header */
.section-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.section-header h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
}

.section-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Field group spacing */
.field-group {
  margin-bottom: var(--spacing-xl);
}

.field-group:last-child { margin-bottom: 0; }

.group-header { margin-bottom: var(--spacing-md); }

.group-header h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
}

.group-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* CRF footer bar */
.crf-footer {
  background-color: var(--bg-sub-surface);
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-md) var(--spacing-xl);
  flex-shrink: 0;
}

.footer-content-horizontal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.footer-logo { height: 28px; width: auto; }

.review-notice {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ─── §22.19  CRF Review — field container & input wrapper ─────────────────── */

/* Parent must be position:relative so triggers stay inside */
.field-container { position: relative; }

.field-label-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.field-label-wrapper .field-label { margin-bottom: 0; flex: 1; }

.field-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

/* ─── §22.19b  CRF Review — inline range warnings & conditional hints ───────── */

/*
  FIX 3: INLINE RANGE WARNINGS / CONDITIONAL HINTS
  The JS method addFieldFeedback() appends .field-feedback divs inside
  .field-container (after .field-input-wrapper).  Without these styles
  the hints break the grid flow and drop to the section baseline.

  STRUCTURAL RULE:
    .field-container
      └─ .field-label-wrapper
      └─ .field-input-wrapper
      └─ .field-feedback          ← hint rendered here, flush below input
*/

/* .field-container is a flex column so .field-feedback flows naturally below */
.field-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Contextual hint strip — base */
.field-feedback {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.4;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  /* keeps the hint tucked inside its grid column, never overflows */
  width: 100%;
  box-sizing: border-box;
}

/* Type: info — used for "Enter values ≥140/90 …" and "Enter value <90% …" */
.field-feedback-info {
  background-color: var(--color-info-bg);
  color: var(--color-info);
  border-left-color: var(--color-info);
}

/* Type: warning */
.field-feedback-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border-left-color: var(--color-warning);
}

/* Type: error */
.field-feedback-error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
  border-left-color: var(--color-error);
}

/* Type: success */
.field-feedback-success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border-left-color: var(--color-success);
}

/* Conditional reveal fields — hidden by default, animated in */
.conditional-field {
  display: none;
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--bg-sub-surface);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--color-warning);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.conditional-field.visible,
.conditional-field[style*="display: block"] {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Validation state helpers — applied by JS to .field-input */
.field-input.valid,
.field-textarea.valid {
  border-color: var(--color-success) !important;
  background-color: var(--color-success-bg);
}

.field-input.invalid,
.field-textarea.invalid {
  border-color: var(--color-error) !important;
  background-color: var(--color-error-bg);
}

/* Static helper text (e.g. "Calculated from height and weight") */
.field-help-text {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

/* ─── §22.20  CRF Review — field-review trigger (traffic-light dot) ─────────── */

.field-review-trigger {
  width: 36px;
  height: 36px;
  min-width: 36px;          /* prevents flex crush */
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  flex-shrink: 0;
  position: relative;       /* needed for ::after tooltip */
  border: 1px solid var(--border-color);
  background-color: var(--bg-sub-surface);
  color: var(--text-muted);
}

.field-review-trigger:hover { border-color: var(--border-hover); color: var(--text-primary); }

/* Status variants — colour-coded but via variables */
.field-review-trigger.status-green  { background-color: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.field-review-trigger.status-yellow { background-color: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); animation: pulse-dot 2s infinite; }
.field-review-trigger.status-red    { background-color: var(--color-error-bg);   border-color: var(--color-error);   color: var(--color-error); }
.field-review-trigger.status-blue   { background-color: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info);  animation: pulse-dot-blue 2s infinite; }

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0   var(--color-warning-bg); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0   transparent; }
}

@keyframes pulse-dot-blue {
  0%   { box-shadow: 0 0 0 0   var(--color-info-bg); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0   transparent; }
}

/* Tooltip */
.field-review-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -36px;
  right: 0;
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--z-dropdown);
}

.field-review-trigger:hover::after { opacity: 1; visibility: visible; top: -42px; }

/* ─── §22.21  CRF Review — review side panel (slide-in) ────────────────────── */

/*
  FIX 2: SIDE PANEL OVERFLOW
  Changed overflow from 'hidden' to 'visible' on the outer shell so
  absolutely-positioned sub-menus (Field Attributes selector dropdown)
  are not clipped. The panel itself is clipped only horizontally during
  its off-screen slide by using clip-path on the slide axis; the inner
  .review-panel-body handles vertical overflow via overflow-y: auto.
*/
.review-side-panel {
  position: fixed;
  top: 0;
  right: -500px;
  width: 480px;
  max-width: 90vw;
  height: 100vh;
  background-color: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* overflow: hidden removed — replaced with scroll-only on the body */
  overflow-x: hidden;   /* keeps the horizontal slide clean           */
  overflow-y: visible;  /* allows dropdown selectors to escape the box */
}

.review-side-panel.active { right: 0; }

.review-side-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-overlay, rgba(0,0,0,0.5));
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.review-side-panel-overlay.active { opacity: 1; visibility: visible; }

.review-panel-header-bar {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-sub-surface);
  flex-shrink: 0;
}

.review-panel-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.review-panel-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.review-panel-close:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.review-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ─── §22.22  CRF Review — status dropdown ──────────────────────────────────── */

.review-status-dropdown { position: relative; display: inline-block; }

.review-status-options {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  z-index: var(--z-dropdown);
  min-width: 140px;
  overflow: hidden;
  display: none;
}

.review-status-options.active { display: block; }

/* ─── §22.23  CRF Review — attribute pills ──────────────────────────────────── */

.review-attr-pill {
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.review-field-attrs-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.review-field-attrs-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

/* ─── §22.24  CRF Review — comment cards ────────────────────────────────────── */

.review-comment-card {
  overflow: hidden;
  transition: border-color 0.2s ease;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
}

/* Status left-border accents */
.review-comment-card.status-resolved { border-left: 3px solid var(--color-success); }
.review-comment-card.status-closed   { border-left: 3px solid var(--text-muted);    opacity: 0.8; }
.review-comment-card.status-updated  { border-left: 3px solid var(--color-info); }
.review-comment-card.status-open     { border-left: 3px solid var(--color-warning); }

.review-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.review-comment-toolbar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color);
}

.review-replies-list {
  padding: 0 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.review-reply-card {
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  border-left: 2px solid var(--border-color);
  background-color: var(--bg-sub-surface);
}

.review-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ─── §22.25  Responsive adjustments ────────────────────────────────────────── */

@media (max-width: 768px) {
  .status-cards-grid { grid-template-columns: 1fr; }
  .checklist-grid    { grid-template-columns: 1fr; gap: var(--spacing-lg); }

  .mapped-domains-container {
    flex-direction: column;
    max-height: none;
  }

  .mapping-domain-card {
    width: 100% !important;
    height: auto !important;
    min-height: 64px;
  }

  .review-side-panel {
    width: 100%;
    max-width: 100vw;
  }

  .do-pillar-grid  { grid-template-columns: 1fr; }
  .do-surface-grid { grid-template-columns: 1fr; }

  .section-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
  .section-controls { width: 100%; }
  .section-controls .btn { flex: 1; justify-content: center; }

  .checklist-tile { min-height: 100px; padding: var(--spacing-lg); }
  .checklist-tile .checklist-checkbox { width: 16px; height: 16px; }
}

/* ─── §22.26  Accessibility ──────────────────────────────────────────────────── */

.checklist-tile .checklist-checkbox:focus,
.field-review-trigger:focus,
.review-panel-close:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .checklist-tile { border-width: 1px; }
  .checklist-tile .checklist-checkbox { border-width: 3px; }
}

/* ─── END §22 ─────────────────────────────────────────────────────────────────── */


/* ============================================================
   §24  GLOBAL UI DESIGN SYSTEM  —  .ui-* namespace
   ============================================================
   PURPOSE
   ───────
   A portable, conflict-free component library.  Every class is
   prefixed ".ui-" so it never clashes with existing selectors in
   main.css (section, h2, .section-title, .compliance, …).

   Add any .ui-* class directly to an HTML element to instantly
   inherit the enterprise design system — no parent chains, no
   !important, no specificity tricks.

   CURRENTLY USED ON
   ─────────────────
   • config.html   (all three config sections + actions card)

   READY TO EXTEND TO
   ──────────────────
   • dashboard_new.html, admin-registrations.html, any future page

   TOKENS (all from theme.css — zero hardcoded values)
   ────────────────────────────────────────────────────
   spacing  : --spacing-xs/sm/md/lg/xl/2xl/3xl
   radius   : --radius-md (6 px)  --radius-lg (8 px)
   shadow   : --shadow-sm / custom rgba via tokens
   colour   : --bg-surface / --bg-primary / --border-color /
              --text-primary / --text-secondary / --text-muted
   ============================================================ */


/* ── §24.1  ui-page-shell ─────────────────────────────────────
   Wrap a <main> or inner <div> with this to get a centred,
   padded, breathing canvas for any app page.
   ─────────────────────────────────────────────────────────── */

.ui-page-shell {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);         /* 24 px between direct children   */
  max-width: 1000px;
  margin-inline: auto;            /* logical-property centering       */
  padding-block: var(--spacing-xl) var(--spacing-3xl);
  padding-inline: 0;
  width: 100%;
}

/* ── §24.2  ui-page-header ────────────────────────────────────
   Applied to the <header> that sits above the form.
   Keeps it on the same 1000 px track as the cards.
   ─────────────────────────────────────────────────────────── */

.ui-page-header {
  max-width: 1000px;
  margin-inline: auto;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

/* ── §24.3  ui-card ───────────────────────────────────────────
   THE core surface.  Apply to any container that should look
   like an elevated panel — card, section, sidebar widget, etc.

   Design tokens expressed:
     padding      2 rem  (32 px)   — generous, text never touches edge
     border-radius 8 px            — professional, not pill-shaped
     box-shadow   4/6 px soft      — lifts off bg without being heavy
     background   --bg-surface     — respects light / dark theme
     border       1 px solid       — subtle edge definition
   ─────────────────────────────────────────────────────────── */

.ui-card {
  background-color:  var(--bg-surface);
  border:            1px solid var(--border-color);
  border-radius:     var(--radius-lg);              /* 8 px */
  padding:           var(--spacing-2xl);             /* 32 px */
  box-shadow:        0 4px 6px -1px rgba(0, 0, 0, 0.08),
                     0 2px 4px -2px rgba(0, 0, 0, 0.05);
  transition:        box-shadow 0.2s ease,
                     border-color 0.2s ease,
                     background-color 0.2s ease;
  /* Explicit non-inherited values to resist any parent padding */
  box-sizing:        border-box;
}

/* Dark-mode: deepen shadows so the card still reads as elevated */
body[data-theme="dark"] .ui-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.30),
              0 2px 4px -2px rgba(0, 0, 0, 0.20);
}

/* Hover lift — isolated: backs off when a child is hovered */
.ui-card:hover:not(:has(
    button:hover, a:hover, select:hover, input:hover,
    [role="button"]:hover, .upload-zone:hover,
    .ui-card:hover, .selection-tile:hover,
    .expandable-toggle:hover)) {
  box-shadow:   0 8px 12px -2px rgba(0, 0, 0, 0.10),
                0 4px 6px  -2px rgba(0, 0, 0, 0.07);
  border-color: var(--border-hover);
}

body[data-theme="dark"] .ui-card:hover:not(:has(
    button:hover, a:hover, select:hover, input:hover,
    [role="button"]:hover, .upload-zone:hover,
    .ui-card:hover, .selection-tile:hover,
    .expandable-toggle:hover)) {
  box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.40),
              0 4px 6px  -2px rgba(0, 0, 0, 0.30);
}

/* ── §24.4  ui-card--flat ─────────────────────────────────────
   Variant: inset / nested card (e.g. "Selected Library Details").
   Same border, no shadow, tighter padding.
   ─────────────────────────────────────────────────────────── */

.ui-card--flat {
  background-color: var(--bg-sub-surface);
  border:           1px solid var(--border-color);
  border-radius:    var(--radius-md);              /* 6 px */
  padding:          var(--spacing-lg);             /* 24 px */
  box-shadow:       none;
  box-sizing:       border-box;
}

.ui-card--flat:hover {
  background-color: var(--bg-hover);
  border-color:     var(--border-hover);
}

/* ── §24.5  ui-section-header ────────────────────────────────
   The title + description block at the top of every card.
   Resets any global animation / transform from main.css and
   applies a clean typographic hierarchy.
   ─────────────────────────────────────────────────────────── */

.ui-section-header {
  /* Hard resets — neutralise whatever main.css injects on
     .section-header (opacity:0, translateY, animation)       */
  opacity:       1!important;
  transform:     none!important;
  animation:     none!important;
  /* Layout */
  margin-top:    0;
  margin-bottom: var(--spacing-xl);    /* 8 px below before content */
  max-width:     none;
  padding:       var(--spacing-md) 0;
  border:        none;
}

/* ── §24.6  ui-section-title ─────────────────────────────────
   Standalone class for a card's <h2> / <h3>.
   Deliberately NOT redefining the h2 element — that lives in
   main.css.  This class wins because it is (0,1,0) applied via
   the HTML attribute and app-components.css loads last.
   ─────────────────────────────────────────────────────────── */

.ui-section-title {
  font-size:      var(--font-size-xl);   /* 20 px — card-scale heading */
  font-weight:    600;
  line-height:    1.3;
  letter-spacing: -0.01em;
  color:          var(--text-primary);
  margin:         0;
  display:        flex;
  align-items:    center;
  gap:            var(--spacing-sm);
}

.ui-section-title i,
.ui-section-title svg {
  font-size:   var(--font-size-lg);   /* 18 px icon */
  color:       var(--text-secondary);
  flex-shrink: 0;
}

/* ── §24.7  ui-section-desc ──────────────────────────────────
   Descriptive paragraph beneath the section title.
   ─────────────────────────────────────────────────────────── */

.ui-section-desc {
  font-size:   var(--font-size-sm);    /* 14 px */
  color:       var(--text-secondary);
  line-height: 1.6;
  margin:      var(--spacing-xs) 0 0;  /* 4 px gap below title */
}

/* ── §24.8  ui-section-content ───────────────────────────────
   Content area inside a card, separated from the header.
   ─────────────────────────────────────────────────────────── */

.ui-section-content {
  margin-top: var(--spacing-lg);       /* 24 px breathe from header */
  display:    flex;
  flex-direction: column;
  gap:        var(--spacing-md);       /* 16 px between child groups */
}

/* ── §24.9  ui-form-group ────────────────────────────────────
   Wraps one label + one input (or set of inputs).
   Standardised vertical rhythm — no per-page overrides needed.
   ─────────────────────────────────────────────────────────── */

.ui-form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-xs);   /* 4 px between label and field */
}

/* Last child: suppress bottom margin so section-content gap rules */
.ui-form-group:last-child { margin-bottom: 0; }

/* ── §24.10  ui-form-label ───────────────────────────────────
   The <label> or <legend> inside a .ui-form-group.
   ─────────────────────────────────────────────────────────── */

.ui-form-label {
  font-size:   var(--font-size-sm);   /* 14 px */
  font-weight: 500;
  color:       var(--text-primary);
  line-height: 1.4;
  display:     block;
  margin-bottom: var(--spacing-sm);  /* 8 px separation from input */
}

/* ── §24.11  ui-divider ──────────────────────────────────────
   Horizontal rule for sub-sections within a card.
   ─────────────────────────────────────────────────────────── */

.ui-divider {
  border:     none;
  border-top: 1px solid var(--border-color);
  margin:     var(--spacing-lg) 0 0;
}

/* ── §24.12  ui-actions-row ──────────────────────────────────
   Flexible row of buttons — centred by default, wraps on mobile.
   ─────────────────────────────────────────────────────────── */

.ui-actions-row {
  display:         flex;
  gap:             var(--spacing-md);   /* 16 px */
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     center;
}

.ui-actions-row--start { justify-content: flex-start; }
.ui-actions-row--end   { justify-content: flex-end;   }

/* ── §24.13  ui-hero-block ───────────────────────────────────
   Centred call-to-action panel inside a card.
   (Used for "Generate Specifications" in config.html)
   ─────────────────────────────────────────────────────────── */

.ui-hero-block {
  text-align:    center;
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--spacing-lg);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--spacing-sm);
}

.ui-hero-block__icon {
  font-size:    var(--font-size-2xl);  /* 24 px */
  color:        var(--text-secondary);
  line-height:  1;
}

.ui-hero-block__title {
  font-size:   var(--font-size-2xl);  /* 24 px */
  font-weight: 700;
  line-height: 1.25;
  color:       var(--text-primary);
  margin:      0;
}

.ui-hero-block__desc {
  font-size:   var(--font-size-sm);
  color:       var(--text-secondary);
  line-height: 1.6;
  margin:      0;
  max-width:   520px;
}

.ui-hero-block__cta {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--spacing-sm);
  margin-top:     var(--spacing-xs);
}

.ui-hero-block__help {
  font-size:  var(--font-size-xs);
  color:      var(--text-muted);
  line-height: 1.5;
}

/* ── §24.14  ui-inline-row ───────────────────────────────────
   Horizontal group of buttons / controls that wraps.
   Used for library download/upload button pairs.
   ─────────────────────────────────────────────────────────── */

.ui-inline-row {
  display:     flex;
  gap:         var(--spacing-md);
  flex-wrap:   wrap;
  align-items: center;
}

/* ── §24.15  ui-meta-list ────────────────────────────────────
   Definition-list layout (key → value pairs).
   Used in "Selected Library Details" / "Uploaded Protocol" cards.
   ─────────────────────────────────────────────────────────── */

.ui-meta-list {
  display:               grid;
  grid-template-columns: max-content 1fr;
  gap:                   var(--spacing-xs) var(--spacing-md);
  margin:                0;
  padding:               0;
  list-style:            none;
}

.ui-meta-list dt {
  font-size:   var(--font-size-sm);
  font-weight: 500;
  color:       var(--text-muted);
  padding:     0;
}

.ui-meta-list dd {
  font-size:   var(--font-size-sm);
  color:       var(--text-secondary);
  margin:      0;
  line-height: 1.5;
}

/* ── §24.16  ui-card-header-row ─────────────────────────────
   Flex row for a card's inner title + action button side-by-side.
   ─────────────────────────────────────────────────────────── */

.ui-card-header-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--spacing-md);
  margin-bottom:   var(--spacing-md);
}

.ui-card-header-row__title {
  font-size:   var(--font-size-base);
  font-weight: 600;
  color:       var(--text-primary);
  margin:      0;
}

/* ── §24.17  ui-sub-section ──────────────────────────────────
   A titled sub-group within a card (e.g. "Page Range Selection").
   Uses a top border to create visual separation.
   ─────────────────────────────────────────────────────────── */

.ui-sub-section {
  margin-top:  var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top:  1px solid var(--border-color);
}

.ui-sub-section__title {
  font-size:     var(--font-size-sm);
  font-weight:   500;
  color:         var(--text-secondary);
  margin:        0 0 var(--spacing-md);
  letter-spacing: 0.01em;
}

/* ── §24.18  ui-expandable ───────────────────────────────────
   Collapsible options block with a header toggle row.
   ─────────────────────────────────────────────────────────── */

.ui-expandable {
  border-top:  1px solid var(--border-color);
  margin-top:  var(--spacing-md);
  padding-top: var(--spacing-md);
}

.ui-expandable__header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.ui-expandable__label {
  font-size:   var(--font-size-sm);
  font-weight: 500;
  color:       var(--text-secondary);
  margin:      0;
}

.ui-expandable__body {
  margin-top: var(--spacing-md);
  display:    flex;
  flex-direction: column;
  gap:        var(--spacing-sm);
}

/* ── §24.19  ui-tile-stack ───────────────────────────────────
   Vertical stack of selection-tiles / checkboxes.
   ─────────────────────────────────────────────────────────── */

.ui-tile-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-sm);   /* 8 px between tiles */
}

/* ── §24.20  ui-help-text ────────────────────────────────────
   Muted helper caption below an input.
   ─────────────────────────────────────────────────────────── */

.ui-help-text {
  font-size:   var(--font-size-xs);
  color:       var(--text-muted);
  line-height: 1.6;
  margin-top:  var(--spacing-xs);
}

/* ── §24.21  Responsive overrides ────────────────────────────
   All .ui-* classes adapt gracefully at narrow widths.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .ui-page-shell {
    gap:           var(--spacing-md);
    padding-block: var(--spacing-lg) var(--spacing-2xl);
  }

  .ui-card {
    padding: var(--spacing-lg);       /* 24 px on mobile */
  }

  .ui-card--flat {
    padding: var(--spacing-md);       /* 16 px on mobile */
  }

  .ui-actions-row,
  .ui-inline-row {
    flex-direction: column;
    align-items:    stretch;
  }

  .ui-actions-row .btn,
  .ui-inline-row  .btn {
    width:           100%;
    justify-content: center;
  }

  .ui-meta-list {
    grid-template-columns: 1fr;       /* stack key above value */
  }
}

/* ─── END §24 ──────────────────────────────────────────────────────────────────── */


/* ============================================================
   §25  PROJECTS PAGE — MOBILE UX REFACTOR
   ─────────────────────────────────────────────────────────
   Scope: projects.html — cascading flyout + RBAC dev panel
   Breakpoint: ≤768 px (touch / tablet portrait)

   Changes:
     A. Flyout → full-height side-drawer on mobile
        (.cascading-flyout converts from absolute dropdown
         to a fixed right-edge drawer; toggled via .is-open)
     B. Flyout backdrop (semi-transparent overlay injected
        by JS) closes the drawer when tapped outside
     C. RBAC dev panel → relocated from bottom-right to
        top-right so it never obscures page content on
        smaller screens
   ============================================================ */


/* ── §25.1  RBAC Dev Panel — bottom-left placement ──────────
   Pinned bottom-left so the entire right edge stays clear for
   the flyout drawer and scrollbars on every screen size.
   z-index 1500: above sticky header, below mobile drawer (2000).
   iOS Safari safe-area padding applied on mobile to clear the
   home-indicator bar.
   ─────────────────────────────────────────────────────────── */

.rbac-dev-panel {
  top: auto !important;
  right: auto !important;
  bottom: var(--spacing-lg, 1.5rem) !important;
  left: var(--spacing-lg, 1.5rem) !important;
  z-index: 1500 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 768px) {
  .rbac-dev-panel {
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    left: 1rem !important;
    transform: scale(0.9);
    transform-origin: bottom left;
  }
}


/* ── §25.2  Cascading Flyout — mobile full-height drawer ─────
   On ≤768 px the dropdown becomes a fixed right-edge drawer.
   The existing .is-open class (toggled by JS) slides it in.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* 1. Override the absolute positioned dropdown to a fixed drawer */
  .cascading-flyout {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 85vw !important;
    max-width: 360px !important;
    height: 100vh !important;
    min-width: unset !important;
    max-height: unset !important;
    z-index: 2000 !important;
    background: var(--bg-surface) !important;
    border: none !important;
    border-left: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5) !important;

    /* Reset desktop animation; use slide-in instead */
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease-in-out !important;
  }

  /* 2. Slide-in when .is-open is applied */
  .cascading-flyout.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 3. Stack children vertically: search bar → two-col body */
  .cascading-flyout {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* 4. Search wrapper stays fixed at top, never scrolls */
  .flyout-search-wrapper {
    flex-shrink: 0 !important;
  }

  /* 5. Flyout body: stack columns vertically on mobile */
  .flyout-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-direction: column !important;
  }

  /* 6. Sponsor column — full width, no fixed height, bottom border instead of right */
  .flyout-col--sponsors {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    overflow-y: unset !important;
    flex-shrink: 0 !important;
  }

  /* 7. Projects column — full width, scroll independently */
  .flyout-col--projects {
    width: 100% !important;
    max-height: unset !important;
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 8. Large, touch-friendly tap targets for sponsor + project items */
  .flyout-sponsor-item,
  .flyout-item--master-all {
    padding: 14px var(--spacing-md) !important;
    font-size: 15px !important;
  }

  .project-link-item {
    padding: 14px var(--spacing-md) !important;
    font-size: 15px !important;
    white-space: normal !important;   /* allow wrapping on small screens */
  }

  /* 9. Search input — 16 px prevents iOS auto-zoom */
  .flyout-search-wrapper input {
    font-size: 16px !important;
  }
}


/* ── §25.3  Flyout backdrop (mobile only) ────────────────────
   A semi-transparent overlay injected by JS behind the drawer.
   Tapping it closes the flyout.
   ─────────────────────────────────────────────────────────── */

.flyout-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1999;             /* just below the drawer (2000) */
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  transition: opacity 0.25s ease;
  opacity: 0;
}

.flyout-backdrop.is-visible {
  display: block;
  opacity: 1;
}


/* ─── END §25 ──────────────────────────────────────────────────────────────────── */


/* ============================================================
   §21  RECOVERED TABLE & INTERACTIVE ROW LAYOUTS
   Recovery Pass — structural rules rebuilt from _archive_css:
   domain-mapping.css, visit-timepoint-mapping.css,
   crf-config.css, crf-preview.css
   
   Rule: STRUCTURE ONLY. All colors inherit from theme.css vars.
   No hardcoded hex values permitted in this section.
   ============================================================ */


/* ── §21.1  Page Layout Containers ─────────────────────────── */

.domain-mapping-main,
.visit-mapping-main {
  padding-top: var(--nav-height);
  min-height: 100vh;
  background-color: var(--bg-primary);
}

.domain-mapping-container,
.visit-mapping-container {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--spacing-xl);
  width: 100%;
}

/* ── §21.2  Page Header (shared across mapping pages) ────────── */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.page-title-section {
  flex: 1;
}

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

/* ── §21.3  Control Section (filters / toolbar above tables) ─── */

.control-section {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 200px;
}

.control-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
  font-family: var(--font-family-primary);
}

/* ── §21.4  Content Area / Mapping Table Section ─────────────── */

.content-area {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
  position: relative;
}

.mapping-table-section {
  flex: 1;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
  width: 100%;
  max-width: 100%;
  display: block;        /* escape flex-item shrink that collapses table width */
  box-sizing: border-box;
}

/* ── §21.5  Table Container (scroll wrapper) ─────────────────── */

.table-container {
  overflow-x: auto;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  display: block;        /* ensure the scroll wrapper is block, not squished flex item */
  width: 100%;
  box-sizing: border-box;
}

/* ── §21.6  Mapping Table (core grid) ───────────────────────── */

.mapping-table,
.visit-mapping-table {
  width: 100%;             /* fill the scroll container */
  /* ── min-width guards against over-squishing on very narrow viewports ─────
     Uses fr-equivalent % ratios (see §21.10). Table never scrolls unless
     the viewport is narrower than this floor. */
  min-width: 1200px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
  background-color: var(--bg-surface);
  display: table;          /* guard against parent flexbox collapsing the table */
  table-layout: fixed;     /* % widths are honoured under fixed layout */
}

/* ── §21.7  Sticky Table Header Row ─────────────────────────── */

.table-header-row {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  background-color: var(--bg-sub-surface);
}

.table-header-row th {
  position: sticky;
  top: 0;
  background-color: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  padding: 8px 6px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
  z-index: var(--z-raised);
  /* Allow long header text to wrap — row height expands automatically */
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  /* No fixed height — let padding define the minimum, content expands the rest */
  vertical-align: middle;
  font-family: var(--font-family-primary);
  user-select: none;
  line-height: 1.25;
}

/* Fallback for <th> directly inside mapping-table when no .table-header-row is used */
.mapping-table thead th,
.visit-mapping-table thead th {
  position: sticky;
  top: 0;
  background-color: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  padding: 8px 6px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
  z-index: var(--z-raised);
  /* Allow long header text to wrap — row height expands automatically */
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  vertical-align: middle;
  font-family: var(--font-family-primary);
  user-select: none;
  line-height: 1.25;
}

.mapping-table thead th:last-child,
.visit-mapping-table thead th:last-child {
  border-right: none;
}

.table-header-row th:last-child {
  border-right: none;
}

.table-header-row th.sortable {
  cursor: pointer;
}

.table-header-row th.sortable:hover {
  background-color: var(--bg-hover);
}

/* ── §21.8  Reorder Column (drag handle / move buttons) ─────── */

.col-reorder {
  width: 2.54%;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
  background-color: var(--bg-sub-surface);
  position: relative;
  border-right: 1px solid var(--border-color);
  display: table-cell;
}

.col-reorder .fa-arrows-alt-v {
  color: var(--text-muted);
  font-size: 12px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* Row move-button cluster — vertically stacked inside the reorder cell */
.row-move-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  height: 100%;
  justify-content: center;
}

/* Individual up/down arrow buttons */
.move-btn {
  width: 24px;
  height: 18px;
  padding: 2px;
  margin: 0;
  border: 1px solid var(--border-color);
  background-color: var(--bg-sub-surface);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-surface), transform var(--transition-fast);
  font-size: 10px;
  line-height: 1;
}

.move-btn:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.move-btn:active {
  transform: var(--active-scale);
}

.move-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

.move-btn .fa-chevron-up,
.move-btn .fa-chevron-down {
  font-size: 7px;
  line-height: 1;
}

/* ── §21.9  Select / Checkbox Column ────────────────────────── */

.col-select {
  width: 2.25%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

.table-header-row th.col-select,
.table-body td.col-select {
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
}

/* Checkbox sizing — pinned to 16x16, never stretched by form control reset */
.select-all-checkbox,
.row-checkbox {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  accent-color: var(--text-primary);
  cursor: pointer;
  margin: 0 auto;
  display: block;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  vertical-align: middle;
}

/* ── §21.10  Column Width Definitions — Dynamic Fractional Ratios ──────────

   APPROACH: All content columns use percentage (%) widths under
   table-layout:fixed. Percentages are the HTML-table equivalent of CSS
   Grid's 'fr' units — the browser resolves them as fractions of the
   available table width, so the layout stays fully fluid and responsive
   with no horizontal scroll on normal viewports.

   Ratio shift applied (per spec):
     • MAPPED DOMAIN  and DATASET ID  → ×0.8  (narrowed, less visual weight)
     • ASSESSMENT     and SEQUENCE #  → ×1.2  (expanded, more reading room)
     • All other columns keep their relative proportion.

   Column order in visit-timepoint-mapping.html:
   1  .col-reorder        2.54%   (drag handle — utility column, kept compact)
   2  .col-select         2.25%   (checkbox)
   3  .col-mapped-domain  4.96%   (domain badge    — NARROWED ×0.8)
   4  .col-dataset-id-tbl 4.96%   (dataset ID      — NARROWED ×0.8)
   5  .col-assessment    12.18%   (assessment name — WIDENED  ×1.2)
   6  .col-sequence       4.87%   (sequence #      — WIDENED  ×1.2)
   7  .col-variable-id    6.20%   (variable ID code)
   8  .col-question-label18.05%   (★ main label — widest content column)
   9  .col-data-type      7.33%   (type select)
  10  .col-response       8.46%   (response / options)
  11  .col-format         6.20%   (display format)
  12  .col-attributes    10.72%   (field attribute pills)
  13  .col-logic          6.20%   (logic indicator pill)
  14  .col-actions        5.41%   (★ compact icon buttons)
                         ──────
   Total                ~100.35% (browser normalises to 100%)
   ────────────────────────────────────────────────────────────────────────── */

/* Reorder & select — already defined in §21.8 / §21.9, reproduced here
   for clarity; values must stay in sync with those sections.              */
/* .col-reorder  → 2.54%  (see §21.8) */
/* .col-select   → 2.25%  (see §21.9) */

.col-mapped-domain    { width: 4.96%;   text-align: center; overflow: hidden; }   /* ×0.8 narrowed */
.col-dataset-id-tbl   { width: 4.96%;   text-align: center; overflow: hidden; }   /* ×0.8 narrowed */
.col-assessment       { width: 12.18%;  font-weight: 500;   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ×1.2 widened */
.col-sequence         { width: 4.87%;   text-align: center; overflow: hidden; }   /* ×1.2 widened */
.col-variable-id      { width: 6.20%;   font-family: var(--font-family-primary); font-size: var(--font-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ★ Question Label — absorbs remaining space proportionally on large monitors. */
.col-question-label   { width: 18.05%;  overflow: hidden; }
.col-data-type        { width: 7.33%;   overflow: hidden; }
.col-response         { width: 8.46%;   overflow: hidden; }
.col-format           { width: 6.20%;   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-attributes       { width: 10.72%;  overflow: hidden; }
.col-logic            { width: 6.20%;   text-align: center; overflow: hidden; }
.col-confidence       { width: 7.33%;   text-align: center; overflow: hidden; }
.col-status           { width: 7.90%;   overflow: hidden; }
/* ★ Actions — compact utility column */
.col-actions          { width: 5.41%;   text-align: center; overflow: hidden; }

/* Domain-mapping table uses .col-domain (not in visit table) */
.col-domain           { width: 150px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sort icon */
.sort-icon {
  margin-left: var(--spacing-xs);
  font-size: 10px;
  color: var(--text-muted);
}

/* ── §21.11  Table Body Rows ─────────────────────────────────── */

.table-body tr {
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-fast);
  height: 32px;
}

.table-body tr:hover {
  background-color: var(--bg-hover);
}

.table-body tr.selected {
  background-color: var(--bg-sub-surface);
  border-left: 3px solid var(--text-primary);
}

.table-body td {
  padding: 6px 8px;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: var(--text-primary);
}

.table-body td.col-reorder { border-right: none; }
.table-body td:last-child   { border-right: none; }

/* ── §21.12  Form Inputs Inside Table Cells ──────────────────── */

/* Override the global form-control reset for table-embedded controls:
   they must be width:100% but NOT inherit the full reset min-height
   which would break compact row height. */
.table-body select,
.table-body input[type="text"],
.table-body input[type="number"],
.table-body input[type="search"] {
  background-color: var(--bg-sub-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-primary);
  width: 100%;
  min-height: 24px;
  /* Override global min-height:40px from §2 for table rows */
  transition: var(--transition-surface);
}

.table-body select:focus,
.table-body input:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* Inline editable text wrappers */
.question-text,
.assessment-text,
.domain-text {
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: var(--transition-surface);
  min-height: 24px;
  display: flex;
  align-items: center;
}

.question-text:hover,
.assessment-text:hover,
.domain-text:hover {
  background-color: var(--bg-hover);
  box-shadow: 0 0 0 1px var(--border-hover);
}

/* Edit-mode inputs replacing inline text */
.question-input,
.assessment-input,
.domain-input,
.response-input,
.format-input {
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 4px 6px;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-primary);
  width: 100%;
  min-height: 24px;
  transition: var(--transition-surface);
}

.question-input:focus,
.assessment-input:focus,
.domain-input:focus,
.response-input:focus,
.format-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* Data-type select inside table cells */
.data-type-select {
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 3px 6px;
  font-size: var(--font-size-xs);
  width: 100%;
  min-height: 24px;
}

.data-type-select:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* ── §21.13  Action Buttons (per-row icon controls) ──────────── */

/* Cluster wrapper — keeps buttons inline, never wraps, clips inside cell */
.action-buttons {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;         /* prevents flex children from pushing container out */
}

/* Single icon button */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-surface), transform var(--transition-fast);
  font-size: 12px;
  flex-shrink: 0;
}

.action-btn:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.action-btn:active {
  transform: var(--active-scale);
}

.action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Semantic hover tints — color only on hover, not at rest */
.action-btn.copy:hover   { background-color: var(--color-info-bg);    color: var(--color-info);    border-color: var(--color-info-border); }
.action-btn.edit:hover   { background-color: var(--color-warning-bg);  color: var(--color-warning);  border-color: var(--color-warning-border); }
.action-btn.delete:hover { background-color: var(--color-error-bg);    color: var(--color-error);    border-color: var(--color-error-border); }
.action-btn.save:hover   { background-color: var(--color-success-bg);  color: var(--color-success);  border-color: var(--color-success-border); }
.action-btn.cancel:hover { background-color: var(--bg-hover);          color: var(--text-primary);   border-color: var(--border-hover); }
.action-btn.logic:hover  { background-color: var(--color-info-bg);     color: var(--color-info);     border-color: var(--color-info-border); }

/* ── §21.14  Table Footer / Bulk-action Bar ─────────────────── */

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--bg-sub-surface);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.selection-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  transition: var(--transition-surface);
}

.selection-info.active {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
}

.table-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.table-actions .btn {
  position: relative;
  overflow: hidden;
  min-height: 36px;
  font-size: var(--font-size-sm);
}

.table-actions .btn i { margin-right: 4px; }

/* ── §21.15  Table Header Bar (above the table, title + controls) */

/* NOTE: .table-header is reused as both the <thead> element class and a toolbar
   div above the table. The thead usage is guarded by display:table-header-group
   so the flex rule only fires on the toolbar wrapper. */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  background-color: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
}

/* When .table-header IS the <thead>, restore native table display */
thead.table-header {
  display: table-header-group;
  padding: 0;
}

.table-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  font-family: var(--font-family-primary);
}

/* ── §21.16  Attribute Pills (field-attribute tags inside cells) */

/* Pill container — wraps inside its cell, never overflows row */
.attribute-pills,
.field-attributes-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  min-height: 24px;
  align-items: flex-start;
}

/* Individual pill */
.attribute-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: default;
  transition: var(--transition-surface), transform var(--transition-fast);
}

.attribute-pill:hover { transform: translateY(-1px); }

/* Semantic color variants — tinted backgrounds only, no raw hex */
.pill-required,
.attribute-required   { background-color: var(--color-error-bg);   color: var(--color-error);   border-color: var(--color-error-border); }
.pill-optional,
.attribute-optional   { background-color: var(--bg-sub-surface);   color: var(--text-muted);    border-color: var(--border-color); }
.pill-log,
.attribute-log,
.attribute-log-line   { background-color: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }

/* Remove button inside a pill */
.pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background-color: var(--item-hover-bg);
  color: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  margin-left: 2px;
}

.pill-remove:hover  { background-color: var(--bg-hover); }
.pill-remove:active { transform: var(--active-scale); }

/* Field-attribute dropdown select — sits above the pills */
.field-attributes-container {
  position: relative;
  min-height: 60px;
  padding: 4px;
}

.field-attributes-dropdown {
  width: 100%;
  background-color: var(--bg-sub-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: var(--transition-surface);
  margin-bottom: 8px;
  min-height: 24px;
}

.field-attributes-dropdown:focus {
  outline: none;
  border-color: var(--border-focus);
}

.field-attributes-dropdown:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Empty-state hint inside the pills container */
.field-attributes-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--font-size-xs);
  text-align: center;
  padding: 8px 4px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
}

/* ── §21.17  Logic Indicator (in-row toggle for skip-logic) ────── */

.logic-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background-color: var(--bg-sub-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-surface), transform var(--transition-fast);
  /* Overflow containment — must not push beyond col-logic cell */
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.logic-indicator i {
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.logic-indicator .logic-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.logic-indicator .logic-count-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-info);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.logic-indicator.logic-active {
  border-color: var(--color-info-border);
  background-color: var(--color-info-bg);
  color: var(--color-info);
}

.logic-indicator.logic-active i           { color: var(--color-info); }
.logic-indicator.logic-active .logic-count-badge { display: inline-flex; }
.logic-indicator.logic-inactive           { color: var(--text-muted); }

.logic-indicator:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

/* Row-level active/pulse state driven by JS */
.table-body tr.logic-row-active {
  box-shadow: inset 0 0 0 2px var(--color-info-border);
}

@keyframes logicRowPulse {
  0%   { box-shadow: inset 0 0 0 0   var(--color-info-border); }
  50%  { box-shadow: inset 0 0 0 4px var(--color-info-bg); }
  100% { box-shadow: inset 0 0 0 0   transparent; }
}

.table-body tr.logic-row-pulse {
  animation: logicRowPulse 0.6s ease;
}

/* ── §21.18  Visit Dropdown (multi-select custom control) ───────── */

.visit-dropdown-container {
  position: relative;
  width: 100%;
}

.visit-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-surface);
  user-select: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-family: var(--font-family-primary);
  gap: var(--spacing-sm);
}

.visit-dropdown-toggle:hover {
  border-color: var(--border-hover);
  background-color: var(--bg-hover);
}

.visit-dropdown-toggle.active {
  border-color: var(--border-focus);
}

.visit-dropdown-placeholder { color: var(--text-muted); }

.visit-dropdown-count {
  background-color: var(--text-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.visit-dropdown-icon {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.visit-dropdown-toggle.active .visit-dropdown-icon {
  transform: rotate(180deg);
  color: var(--text-primary);
}

/* Dropdown panel */
.visit-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  margin-top: 4px;
  max-height: 320px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.visit-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Search inside dropdown */
.visit-dropdown-search {
  position: relative;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.visit-search-input {
  width: 100%;
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  padding-right: 30px;
  min-height: unset;
}

.visit-search-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.visit-dropdown-search .fa-search {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  pointer-events: none;
}

/* Option list */
.visit-dropdown-options {
  max-height: 200px;
  overflow-y: auto;
  padding: var(--spacing-xs) 0;
}

.visit-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: var(--transition-surface);
  border-left: 2px solid transparent;
}

.visit-option:hover {
  background-color: var(--bg-hover);
  border-left-color: var(--border-hover);
}

.visit-option.selected {
  background-color: var(--bg-sub-surface);
  border-left-color: var(--text-primary);
}

.visit-option-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.visit-option.selected .visit-option-name { font-weight: 600; }

.visit-option-sequence {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-left: var(--spacing-xs);
}

.visit-option-icon {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.visit-option.selected .visit-option-icon {
  color: var(--text-primary);
}

/* Dropdown footer actions */
.visit-dropdown-actions,
.visit-management-actions {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-sub-surface);
}

/* Scrollbar styling */
.visit-dropdown-options::-webkit-scrollbar { width: 6px; }
.visit-dropdown-options::-webkit-scrollbar-track { background: var(--bg-sub-surface); }
.visit-dropdown-options::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
.visit-dropdown-options::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* Selected visit pills strip below the dropdown toggle */
.selected-visits-container {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  min-height: 40px;
}

.selected-visits-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: flex-start;
}

/* Individual visit pill */
.visit-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--text-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition-surface);
  cursor: default;
}

.visit-pill .remove-visit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--item-hover-bg);
  color: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  margin-left: 2px;
}

.visit-pill .remove-visit:hover  { background-color: var(--bg-hover); }
.visit-pill .remove-visit:active { transform: var(--active-scale); }

.no-visits-message {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) 0;
}

/* Visit control group widths */
.visit-control-group {
  min-width: 400px;
  max-width: 600px;
  flex: 1;
}

.visit-actions-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: auto;
  margin-top: auto;
}

/* ── §21.19  CRF / Form Field Layout (crf-preview) ─────────── */

/* Field row — auto-fit grid, never breaks container */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.field-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Scale control — numbered option grid */
.scale-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.scale-options {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.scale-option {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-surface);
  background-color: var(--bg-surface);
}

.scale-option:hover   { background-color: var(--bg-hover); border-color: var(--border-hover); }
.scale-option.selected { background-color: var(--text-primary); color: var(--text-inverse); border-color: var(--text-primary); }

/* Controlled-field list (logic panel) */
.controlled-fields-list {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-sub-surface);
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.controlled-field-item {
  display: grid;
  grid-template-columns: auto 70px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--bg-surface);
  cursor: pointer;
  transition: var(--transition-surface);
}

.controlled-field-item:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.controlled-field-checkbox {
  accent-color: var(--text-primary);
  width: 16px;
  height: 16px;
}

.controlled-field-sequence {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.controlled-field-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.controlled-field-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ── §21.20  Logic Panel (slide-in side panel) ──────────────── */

.logic-panel {
  position: fixed;
  top: var(--nav-height);
  right: -450px;
  width: 450px;
  height: calc(100vh - var(--nav-height));
  background-color: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  transition: right var(--transition-slow);
  z-index: var(--z-overlay);
  overflow-y: auto;
}

.logic-panel.open { right: 0; }

.logic-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  background-color: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}

.logic-panel-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.logic-panel-content {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.logic-input-group {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

.logic-input-group select,
.logic-input-group input {
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.logic-input-group select:focus,
.logic-input-group input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.logic-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* Logic rule card */
.logic-rule-card {
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--transition-surface);
}

.logic-rule-card.active {
  border-color: var(--color-info-border);
}

.logic-rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

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

.logic-rule-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-info-border);
}

.logic-rule-summary { font-size: var(--font-size-sm); color: var(--text-secondary); }

.logic-rule-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.logic-rule-target {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  font-size: var(--font-size-xs);
}

.logic-rule-actions {
  display: flex;
  gap: 12px;
}

/* Scope tip / context info box */
.logic-scope-tip {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}

.logic-panel-feedback {
  display: none;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  border: 1px solid transparent;
  margin-bottom: var(--spacing-md);
}

.logic-panel-feedback.visible { display: block; }

.logic-panel-feedback[data-state="success"] { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.logic-panel-feedback[data-state="warning"]  { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.logic-panel-feedback[data-state="info"]     { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info); }

/* ── §21.21  Mapping Statistics Grid ──────────────────────────── */

.mapping-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.stat-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  transition: var(--transition-surface);
}

.stat-card:hover {
  border-color: var(--border-hover);
  background-color: var(--bg-hover);
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs) 0;
  line-height: 1;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── §21.22  Bottom Actions Bar ──────────────────────────────── */

.bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-xl);
  background-color: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.bottom-actions .btn {
  min-width: 140px;
  font-weight: 600;
  font-size: var(--font-size-sm);
  height: 44px;
  transition: var(--transition-surface), transform var(--transition-fast);
}

.bottom-actions .btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

/* ── §21.23  Modal Overlay & Container ──────────────────────── */

/* Custom modal overlay — always position:fixed so it centres over the full
   viewport regardless of where it sits in the DOM tree. The high z-index
   ensures it floats above all page content and the navbar. */
.custom-modal-overlay {
  position: fixed !important;  /* viewport-anchored — immune to DOM nesting */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-overlay);
  display: none;               /* hidden by default; JS adds .show to reveal */
  align-items: center;
  justify-content: center;
  z-index: 9000;               /* above navbar (var(--z-modal)) and panels */
  padding: var(--spacing-md);
}

.custom-modal-overlay.show {
  display: flex;
}

/* Type variants — icon colour only; JS adds these classes alongside .active */
.custom-modal-overlay.success .custom-modal-icon { color: var(--color-success); }
.custom-modal-overlay.error   .custom-modal-icon { color: var(--color-error); }
.custom-modal-overlay.warning .custom-modal-icon { color: var(--color-warning); }
.custom-modal-overlay.info    .custom-modal-icon { color: var(--color-info); }

.custom-modal-content {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 460px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95);
  transition: transform var(--transition-base);
}

.custom-modal-overlay.show .custom-modal-content {
  transform: scale(1);
}

.custom-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  background-color: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
}

.custom-modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.custom-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: var(--transition-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.custom-modal-close:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.custom-modal-body {
  padding: var(--spacing-xl) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
}

.custom-modal-icon {
  font-size: 2rem;
  color: var(--color-warning);
}

.custom-modal-message {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.custom-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background-color: var(--bg-sub-surface);
  border-top: 1px solid var(--border-color);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transform: scale(0.92);
  transition: transform var(--transition-base);
}

.modal-overlay.show .modal-container { transform: scale(1); }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  background-color: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: var(--transition-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.modal-close:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.modal-body {
  padding: var(--spacing-lg);
  max-height: 60vh;
  overflow-y: auto;
}

.modal-body .form-group { margin-bottom: var(--spacing-lg); }

.modal-body .form-input {
  width: 100%;
  background-color: var(--bg-sub-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
  transition: var(--transition-surface);
  min-height: 36px;
}

.modal-body .form-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background-color: var(--bg-sub-surface);
  border-top: 1px solid var(--border-color);
}

/* ── §21.24  Editable Cell States ────────────────────────────── */

.editable {
  position: relative;
  cursor: pointer;
  transition: var(--transition-surface);
}

.editable:hover {
  background-color: var(--bg-hover);
  border-radius: var(--radius-sm);
}

.editable.editing {
  background-color: var(--bg-sub-surface);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-sm);
  padding: 2px !important;
}

/* ── §21.25  Mapping Summary Cards ───────────────────────────── */

.mapping-summary-section {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: var(--bg-sub-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

.mapping-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.mapping-summary-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.mapping-summary-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mapping-summary-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-surface), transform var(--transition-fast);
  position: relative;
  min-width: 120px;
}

.mapping-summary-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.mapping-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--text-primary);
  color: var(--text-inverse);
  font-size: 12px;
  flex-shrink: 0;
}

.mapping-card-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mapping-card-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.mapping-card-subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.mapping-card-version {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background: var(--bg-sub-surface);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── §21.26  Scrollbar Styling (table containers) ────────────── */

.table-container::-webkit-scrollbar,
.controlled-fields-list::-webkit-scrollbar,
.logic-panel::-webkit-scrollbar { width: 6px; height: 6px; }

.table-container::-webkit-scrollbar-track,
.controlled-fields-list::-webkit-scrollbar-track,
.logic-panel::-webkit-scrollbar-track { background: var(--bg-sub-surface); border-radius: 3px; }

.table-container::-webkit-scrollbar-thumb,
.controlled-fields-list::-webkit-scrollbar-thumb,
.logic-panel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

.table-container::-webkit-scrollbar-thumb:hover,
.controlled-fields-list::-webkit-scrollbar-thumb:hover,
.logic-panel::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }


/* ── §21.27  Responsive Breakpoints ──────────────────────────── */

@media (max-width: 1024px) {
  .domain-mapping-container,
  .visit-mapping-container { padding: var(--spacing-lg); }

  .control-section {
    flex-direction: column;
    align-items: stretch;
  }

  .control-group { min-width: auto; }

  .content-area { flex-direction: column; }

  .logic-panel { width: 100%; right: -100%; }
  .logic-panel.open { right: 0; }

  .page-header {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
  }

  .page-actions { justify-content: flex-end; }

  .mapping-stats { grid-template-columns: repeat(2, 1fr); }

  .visit-control-group { min-width: auto; max-width: none; }
}

@media (max-width: 768px) {
  .domain-mapping-container,
  .visit-mapping-container { padding: var(--spacing-md); }

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

  .col-reorder  { display: none; }
  .col-select   { width: 36px; }
  .col-actions  { min-width: 80px; }

  .col-variable-id,
  .col-sequence { display: none; }

  .action-btn { width: 20px; height: 20px; font-size: 10px; }

  .table-footer {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
    padding: var(--spacing-md);
  }

  .table-actions { justify-content: center; }

  .scale-options { grid-template-columns: repeat(6, 1fr); }

  .field-row { grid-template-columns: 1fr; }

  .bottom-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: var(--spacing-md);
  }

  .modal-footer { flex-direction: column; }
  .modal-footer .btn { width: 100%; }

  .mapping-stats { grid-template-columns: 1fr; }

  .logic-panel { width: 100%; right: -100%; }
  .logic-panel.open { right: 0; }
}

@media (max-width: 480px) {
  .scale-options { grid-template-columns: repeat(4, 1fr); }

  .logic-input-group {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .logic-input-group select,
  .logic-input-group input {
    width: 100%;
    min-width: auto;
  }

  .visit-control-group { min-width: auto; }
}

/* ── §21.28  Accessibility Utilities ─────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .table-body tr,
  .action-btn,
  .move-btn,
  .logic-indicator,
  .attribute-pill {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-contrast: high) {
  .mapping-table,
  .visit-mapping-table { border: 2px solid var(--text-primary); }

  .table-header-row th { border-bottom: 2px solid var(--text-primary); }

  .action-btn:focus,
  .move-btn:focus { outline: 2px solid var(--text-primary); outline-offset: 2px; }
}


/* ============================================================
   §23  CRF CONFIG — Structural & Component Styles
   Migrated from: css/crf-config-styles.css
   Rule: All colors use CSS variables from theme.css.
   Zero hardcoded hex values permitted.
   ============================================================ */

/* ── §23.1  Config Page Layout ──────────────────────────────── */

.config-section {
  max-width: 800px;
  margin: 0 auto var(--spacing-3xl) auto;
  padding: 0;
}

.page-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
  margin-top: var(--spacing-2xl);
}

.page-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  margin-top: var(--spacing-md);
}

.page-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  font-weight: 400;
}

/* ── §23.2  Section Header / Title / Description ─────────────── */

.section-title {
  display: flex;
  align-items: center;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.section-title i {
  margin-right: var(--spacing-sm);
  color: var(--accent-primary);
  font-size: var(--font-size-lg);
  width: 20px;
  text-align: center;
}

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

.section-content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* ── §23.3  Config Card ──────────────────────────────────────── */

.config-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: var(--transition-surface);
}

.config-card:hover {
  box-shadow: var(--shadow-lg);
}

.config-card .card-header {
  padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-lg);
  background: linear-gradient(135deg, var(--bg-secondary, var(--bg-sub-surface)) 0%, var(--bg-tertiary, var(--bg-surface)) 100%);
  border-bottom: 1px solid var(--border-color);
}

.config-card .card-content {
  padding: var(--spacing-xl);
}

/* ── §23.4  Form Controls (config-specific overrides) ────────── */

.form-select,
.form-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-sub-surface);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  transition: var(--transition-surface);
}

.form-select:focus,
.form-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: none;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  appearance: none;
  -webkit-appearance: none;
}

/* Form help text — hidden by default, shown on hover */
.form-help {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-surface);
}

.form-group:hover .form-help,
.tooltip-wrapper:hover .form-help {
  opacity: 1;
  visibility: visible;
}

.form-help.always-visible {
  opacity: 1;
  visibility: visible;
}

/* Form state messages */
.error-message {
  color: var(--color-error);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
}

.success-message {
  color: var(--color-success);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
}

/* Form group success/error states */
.form-group.success .form-select,
.form-group.success .form-input { border-color: var(--color-success); }

.form-group.error .form-select,
.form-group.error .form-input   { border-color: var(--color-error); }

/* ── §23.5  Library Info ─────────────────────────────────────── */

.library-info {
  margin-top: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--bg-sub-surface);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--accent-primary, var(--border-focus));
}

.library-version {
  font-weight: 600;
  color: var(--accent-primary, var(--text-primary));
}

.library-status {
  margin-left: var(--spacing-xs);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

/* ── §23.6  Action Section ───────────────────────────────────── */

.action-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-md);
  margin-top: var(--spacing-2xl);
}

.action-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}

.validation-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.validation-status i        { color: var(--color-warning); }
.validation-status.valid i  { color: var(--color-success); }

.status-text { font-weight: 500; }

/* ── §23.7  Expandable Section ───────────────────────────────── */

.expandable-section {
  margin-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-lg);
}

.expandable-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  color: var(--accent-primary, var(--text-primary));
  font-weight: 500;
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--spacing-xs) 0;
  transition: var(--transition-surface);
}

.expandable-toggle:hover { color: var(--border-focus); }

.expandable-toggle i { transition: var(--transition-surface); }
.expandable-toggle.expanded i { transform: rotate(90deg); }

.expandable-content        { margin-top: var(--spacing-md); display: none; }
.expandable-content.show   { display: block; }

/* ── §23.8  File Upload ──────────────────────────────────────── */

.file-upload-area {
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  text-align: center;
  transition: var(--transition-surface);
  cursor: pointer;
  position: relative;
}

.file-upload-area:hover,
.file-upload-area.dragover {
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.upload-placeholder { pointer-events: none; }

.upload-icon    { font-size: 3rem; color: var(--text-muted); margin-bottom: var(--spacing-md); }
.upload-text    { font-weight: 500; color: var(--text-primary); margin-bottom: var(--spacing-xs); }
.upload-subtext { color: var(--text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--spacing-xs); }
.upload-formats { color: var(--text-muted); font-size: var(--font-size-xs); }

.file-input {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  margin-top: var(--spacing-md);
}

.file-details {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.file-icon { color: var(--color-error); font-size: var(--font-size-lg); }
.file-name { font-weight: 500; color: var(--text-primary); }
.file-size { color: var(--text-secondary); font-size: var(--font-size-sm); }

/* ── §23.9  Page Range ───────────────────────────────────────── */

.page-range {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xs);
}

.page-input { flex: 1; }

.page-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.page-separator {
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: var(--spacing-lg);
}

/* ── §23.10  Selection Tiles (unified system) ────────────────── */

.selection-tile,
.radio-option,
.checkbox-tile,
.clinical-tile {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
  min-height: 60px;
  width: 100%;
  gap: var(--spacing-sm);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.selection-tile:hover,
.radio-option:hover,
.checkbox-tile:hover,
.clinical-tile:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
  box-shadow: 0 0 20px var(--shadow-color, rgba(0,0,0,0.1)), inset 0 0 10px var(--shadow-color, rgba(0,0,0,0.05));
  transform: translateY(-1px);
}

/* Active/checked state */
.selection-tile.active,
.radio-option.active,
.checkbox-tile.active,
.clinical-tile.active {
  border-color: var(--border-focus);
  background: var(--bg-hover);
  box-shadow: inset 0 0 15px var(--shadow-color, rgba(0,0,0,0.08));
}

/* Left accent bar on active tiles */
.selection-tile.active::before,
.radio-option.active::before,
.checkbox-tile.active::before,
.clinical-tile.active::before,
.radio-option:has(.radio-input:checked)::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--border-focus);
  box-shadow: 0 0 10px var(--shadow-color, rgba(0,0,0,0.15));
}

/* :has() — checked radio state */
.radio-option:has(.radio-input:checked) {
  border-color: var(--border-focus);
  background: var(--bg-hover);
  box-shadow: inset 0 0 10px var(--shadow-color, rgba(0,0,0,0.05));
}

/* :has() fallback via JS class */
.radio-option.checked {
  border-color: var(--border-focus);
  background: var(--bg-hover);
  box-shadow: inset 0 0 10px var(--shadow-color, rgba(0,0,0,0.05));
}

.radio-option.checked::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--border-focus);
}

/* Checkmark icon */
.tile-checkmark {
  opacity: 0;
  transform: scale(0.8) rotate(-10deg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--border-focus);
  font-size: var(--font-size-base);
  margin-left: var(--spacing-md);
  text-shadow: none;
}

.selection-tile.active .tile-checkmark,
.checkbox-tile.active .tile-checkmark,
.clinical-tile.active .tile-checkmark {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Tile content layout */
.tile-indicator {
  width: 4px;
  height: 100%;
  background: transparent;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  transition: var(--transition-surface);
}

.tile-content {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

.tile-label {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: var(--transition-surface);
}

.selection-tile.active .tile-label,
.checkbox-tile.active .tile-label,
.clinical-tile.active .tile-label {
  color: var(--text-primary);
  font-weight: 600;
}

.tile-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Hidden native inputs */
.radio-input,
.checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-custom,
.checkbox-custom { display: none; }

/* Radio label / description */
.radio-label {
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--font-size-sm);
  flex: 1;
  margin-right: var(--spacing-md);
}

.radio-option:has(.radio-input:checked) .radio-label,
.radio-option.checked .radio-label { color: var(--text-primary); }

.radio-description {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  display: block;
  margin-top: var(--spacing-xs);
  font-weight: 400;
}

/* Checkbox label */
.checkbox-label {
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--font-size-sm);
  flex: 1;
  margin-right: var(--spacing-md);
}

/* ── §23.11  Radio / Checkbox Group Containers ───────────────── */

.radio-group,
.checkbox-group,
.advanced-options-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--spacing-xs);
}

/* ── §23.12  Tooltip System ──────────────────────────────────── */

.tooltip-wrapper {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 12px;
}

.tooltip-wrapper:last-child { margin-bottom: 0; }

.tooltip-trigger {
  cursor: help;
  display: inline-block;
  width: 100%;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  z-index: var(--z-dropdown, 1000);
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  max-width: 300px;
  text-align: center;
  line-height: 1.4;
}

.tooltip-content::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-focus);
  margin-top: -1px;
  z-index: 1;
}

.tooltip-wrapper:hover .tooltip-content,
.selection-tile:hover .tooltip-content,
.radio-option:hover .tooltip-content,
.checkbox-tile:hover .tooltip-content,
.clinical-tile:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

/* Button tooltip via data-attribute */
.btn[data-tooltip] { position: relative; }

.btn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  z-index: var(--z-dropdown, 1000);
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}

.btn[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-focus);
  margin-bottom: -1px;
  z-index: var(--z-dropdown, 1001);
}

/* ── §23.13  Loading State ───────────────────────────────────── */

.loading {
  position: relative;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 1rem; height: 1rem;
  border: 1px solid var(--border-color);
  border-top: 1px solid var(--border-focus);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spin 1s linear infinite;
}

/* ── §23.14  Log-Line Pills ──────────────────────────────────── */

.log-line-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: var(--transition-surface);
  cursor: pointer;
  border: 1px solid transparent;
}

.log-line-pill.teal {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-color: var(--color-info-border);
}

.log-line-pill.teal:hover {
  background: var(--color-info-border);
  transform: translateY(-1px);
}

.log-line-pill.orange {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
}

.log-line-pill.orange:hover {
  background: var(--color-warning-border);
  transform: translateY(-1px);
}

.log-line-pill.yellow {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
}

.log-line-pill.yellow:hover {
  background: var(--color-warning-border);
  transform: translateY(-1px);
}

.log-line-pill .status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.log-line-pill .status-dot.active   { background: var(--color-success); }
.log-line-pill .status-dot.inactive { background: var(--text-muted); }
.log-line-pill .status-dot.warning  { background: var(--color-warning); }
.log-line-pill .status-dot.error    { background: var(--color-error); box-shadow: 0 0 0 2px var(--color-error-bg); }

.log-line-pill.small { padding: 0.25rem 0.5rem; font-size: 0.625rem; gap: 0.25rem; }
.log-line-pill.large { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-sm); gap: var(--spacing-sm); }
.log-line-pill.active { border-width: 2px; font-weight: 600; }
.log-line-pill:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── §23.15  Accessibility & Focus ──────────────────────────── */

.selection-tile:focus-within,
.radio-option:focus-within,
.checkbox-tile:focus-within,
.clinical-tile:focus-within {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ── §23.16  Responsive Adjustments ─────────────────────────── */

@media (max-width: 768px) {
  .action-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }

  .page-range {
    flex-direction: column;
    align-items: stretch;
  }

  .page-separator {
    margin: var(--spacing-xs) 0;
    text-align: center;
  }

  .selection-tile,
  .radio-option,
  .checkbox-tile,
  .clinical-tile {
    padding: 0.875rem var(--spacing-md);
    min-height: 56px;
    font-size: 0.8125rem;
  }

  .radio-group,
  .checkbox-group,
  .advanced-options-tiles {
    gap: 8px;
  }

  .tooltip-content {
    max-width: 250px;
    font-size: 0.6875rem;
    padding: 0.625rem 0.875rem;
  }
}

@media (max-width: 480px) {
  .file-upload-area { padding: var(--spacing-xl) var(--spacing-md); }
  .upload-icon      { font-size: 2rem; }
}

/* ── END §23 ──────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────
   §22  DORI CHAT PANEL — Off-canvas slide-in (fixed)
   ──────────────────────────────────────────────────────────── */

/* Panel container — removed from document flow, slides in from right */
.dori-chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 400px;
  max-width: 100vw;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Open states — both .is-open (new spec) and .active (legacy singleton.js) */
.dori-chat-panel.is-open,
.dori-chat-panel.active {
  transform: translateX(0);
}

/* Panel header */
.dori-panel-header {
  padding: 20px 24px;
  background: var(--bg-elevated, var(--bg-surface));
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  flex-shrink: 0;
}

.dori-panel-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dori-panel-title h3 {
  margin: 0;
  font-size: var(--font-size-lg, 18px);
  font-weight: 600;
  color: var(--text-primary);
}

.dori-panel-subtitle {
  font-size: var(--font-size-xs, 12px);
  color: var(--text-muted);
}

.dori-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm, 6px);
  transition: color var(--transition-fast), background var(--transition-fast);
  line-height: 1;
}

.dori-panel-close:hover {
  color: var(--text-primary);
  background: var(--item-hover-bg);
}

/* Chat messages scrollable area */
.dori-chat-messages {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.dori-chat-messages::-webkit-scrollbar { width: 5px; }
.dori-chat-messages::-webkit-scrollbar-track { background: transparent; }
.dori-chat-messages::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
.dori-chat-messages::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* Individual message */
.dori-message {
  display: flex;
  gap: 10px;
  max-width: 100%;
}

.dori-message.user { justify-content: flex-end; }

.dori-message-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-elevated, var(--bg-surface));
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.dori-message.user .dori-message-avatar {
  background: var(--color-info);
  border-color: var(--color-info);
}

.dori-message-avatar i { font-size: 13px; color: var(--text-muted); }
.dori-message.user .dori-message-avatar i { color: var(--text-inverse); }

.dori-avatar-svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.dori-message-content {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: var(--font-size-sm, 14px);
  line-height: 1.55;
}

.dori-message.assistant .dori-message-content {
  background: var(--bg-elevated, var(--bg-surface));
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.dori-message.user .dori-message-content {
  background: var(--color-info);
  color: var(--text-inverse);
  border: 1px solid var(--color-info);
}

.dori-message-time {
  font-size: 11px;
  color: var(--text-disabled);
  margin-top: 4px;
  text-align: right;
}

/* Welcome message */
.dori-welcome-message {
  background: var(--bg-elevated, var(--bg-surface));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  padding: 14px 16px;
  text-align: center;
}

.dori-welcome-message h4 {
  margin: 0 0 6px;
  font-size: var(--font-size-base, 15px);
  color: var(--text-primary);
  font-weight: 600;
}

.dori-welcome-message p {
  margin: 0;
  font-size: var(--font-size-sm, 13px);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Input area */
.dori-chat-input-area {
  padding: 16px 24px;
  background: var(--bg-elevated, var(--bg-surface));
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.dori-input-container {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.dori-message-input {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  font-size: var(--font-size-sm, 14px);
  color: var(--text-primary);
  resize: none;
  min-height: 42px;
  max-height: 120px;
  transition: border-color var(--transition-fast);
  font-family: var(--font-family-primary);
}

.dori-message-input:focus {
  outline: none;
  border-color: var(--color-info);
}

.dori-message-input::placeholder { color: var(--text-disabled); }

.dori-send-button {
  background: var(--color-info);
  border: none;
  border-radius: var(--radius-md, 8px);
  padding: 0 14px;
  color: var(--text-inverse);
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.dori-send-button:hover { opacity: 0.85; }
.dori-send-button:disabled {
  background: var(--item-hover-bg);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.dori-send-button i { font-size: 14px; }

/* Loading state */
.dori-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm, 13px);
}

.dori-loading i { animation: dori-spin 1s linear infinite; }

@keyframes dori-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Backdrop overlay */
.dori-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dori-chat-overlay.is-open,
.dori-chat-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile — full-width panel */
@media (max-width: 480px) {
  .dori-chat-panel {
    width: 100vw;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dori-chat-panel { transition: none; }
}


/* ────────────────────────────────────────────────────────────
   §22  DO-SECTION SHELL
   ──────────────────────────────────────────────────────────── */

/* ============================================================
   §25  CRF REVIEW — Structural Layout Recovery
   Source: _archive_css/crf-review.css + checklist-traffic-light.css
   Recovery Pass: Part 3 — 2026-07-12
   Rule: STRUCTURE & POSITIONING ONLY.
         All colours use active design tokens from theme.css.
         Zero hardcoded hex values in this section.
   ============================================================ */

/* ── §25.1  Review Page — Badge & Notice Row ────────────────── */

.review-badge {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--font-size-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
  animation: review-badge-pulse 2s infinite;
}

@keyframes review-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-warning-bg); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}

.review-notice {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.review-notice i { color: var(--color-warning); }

/* Hide preview-mode badges on the review page */
.preview-badge,
.preview-notice { display: none !important; }

/* ── §25.2  Field Container & Label Wrapper ─────────────────── */

/* Ensure field container never overflows its table-row parent */
.review-field-container {
  position: relative;
  width: 100%;
  min-width: 0;            /* critical: prevents flex-child overflow */
}

/* Label + review-trigger in one flex row */
.field-label-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.field-label-wrapper .field-label {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Input + trigger side-by-side, constrained inside cell */
.field-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  min-width: 0;            /* prevents overflow past parent */
  width: 100%;
}

/* ── §25.3  Field Review Trigger (traffic-light icon button) ── */

.field-review-trigger {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-sub-surface);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-surface), transform var(--transition-fast);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  position: relative;      /* needed for tooltip pseudo-element */
}

.field-review-trigger:hover {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
  transform: scale(1.1);
}

/* ── Traffic-light status variants — colour via tokens only ── */

/* Grey: no comments (default) */
.field-review-trigger.status-grey {
  background: var(--bg-sub-surface);
  color: var(--text-muted);
  border-color: var(--border-color);
  animation: none;
}

/* Yellow: open comments without replies */
.field-review-trigger.status-yellow,
.field-review-trigger.has-comments {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
  animation: traffic-pulse-warning 2s infinite;
}

.field-review-trigger.status-yellow:hover,
.field-review-trigger.has-comments:hover {
  background: var(--color-warning-border);
  color: var(--text-primary);
}

/* Green: all comments resolved */
.field-review-trigger.status-green {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
  animation: none;
}

.field-review-trigger.status-green:hover {
  background: var(--color-success-border);
  color: var(--text-primary);
}

/* Blue: open comments with at least one reply */
.field-review-trigger.status-blue {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-color: var(--color-info-border);
  animation: traffic-pulse-info 2s infinite;
}

.field-review-trigger.status-blue:hover {
  background: var(--color-info-border);
  color: var(--text-primary);
}

@keyframes traffic-pulse-warning {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-warning-bg); }
  50%       { box-shadow: 0 0 0 6px transparent; }
}

@keyframes traffic-pulse-info {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-info-bg); }
  50%       { box-shadow: 0 0 0 6px transparent; }
}

/* Trigger tooltip */
.field-review-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -42px;
  right: 0;
  background: var(--bg-sub-surface);
  color: var(--text-primary);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  border: 1px solid var(--border-color);
  pointer-events: none;
  z-index: var(--z-tooltip);
}

.field-review-trigger:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ── §25.4  Review Side Panel — Slide-in Shell ──────────────── */

/*
  FIX 2 (§25 duplicate): Keep this declaration consistent with §22.21
  above.  overflow-x: hidden clips the horizontal slide; overflow-y:
  visible lets the Field Attributes dropdown escape its container.
*/
.review-side-panel {
  position: fixed;
  top: 0;
  right: -500px;
  width: 480px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
  overflow-y: visible;
}

.review-side-panel.active { right: 0; }

.review-side-panel-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.review-side-panel-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Panel header bar */
.review-panel-header-bar {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-sub-surface);
  flex-shrink: 0;
}

.review-panel-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.review-panel-title i { color: var(--color-warning); }

.review-panel-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-surface);
}

.review-panel-close:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error-border);
}

/* Panel body — scrollable */
.review-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.review-panel-body::-webkit-scrollbar { width: 6px; }
.review-panel-body::-webkit-scrollbar-track { background: transparent; }
.review-panel-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

/* ── §25.5  Review Field Attributes Section ─────────────────── */

/*
  FIX 2: Remove overflow: hidden from the field-attributes container.
  It was clipping the native <select> dropdown for "Field Attributes".
  Border-radius is preserved via the border property; the rounded
  corners are achieved without a hard clip.
*/
.review-field-attributes {
  background: var(--bg-sub-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: visible;   /* was: overflow: hidden — prevented dropdown visibility */
}

.review-field-attributes-header {
  padding: 1rem 1.25rem;
  background: var(--color-info-bg);
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-md) var(--radius-md) 0 0; /* own top-radius since parent no longer clips */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-info);
}

.review-attributes-list { padding: 0.75rem 1.25rem; }

.review-attribute-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
}

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

/* Logic-block row — column layout */
.review-attribute-row-logic {
  flex-direction: column;
  gap: 0.5rem;
}

.review-attribute-row-logic .review-attribute-label { align-self: flex-start; }

.review-attribute-row-logic .review-attribute-textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  text-align: left;
}

/* Field-attribute pills row */
.review-attribute-row-field-attrs {
  flex-direction: column;
  gap: 0.5rem;
}

.review-attribute-row-field-attrs .review-attribute-label { align-self: flex-start; }

.review-attribute-label { color: var(--text-muted); }

.review-attribute-value {
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}

/* Editable fields in the attributes section */
.review-attribute-select,
.review-attribute-input,
.review-attribute-textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: var(--font-family-primary);
  transition: var(--transition-surface);
}

.review-attribute-select  { min-width: 120px; text-align: right; cursor: pointer; }
.review-attribute-input   { min-width: 60%; max-width: 60%; text-align: right; }
.review-attribute-textarea {
  min-width: 60%;
  max-width: 60%;
  resize: vertical;
  text-align: right;
}

.review-attribute-select:hover,
.review-attribute-input:hover,
.review-attribute-textarea:hover { border-color: var(--border-hover); }

.review-attribute-select:focus,
.review-attribute-input:focus,
.review-attribute-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* Field-attribute pills */
.review-field-attrs-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.review-field-attrs-wrapper .review-attribute-select {
  width: 100%;
  max-width: 100%;
  text-align: left;
}

.review-field-attrs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.review-attr-pill {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.review-attr-pill i {
  cursor: pointer;
  font-size: 0.7rem;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.review-attr-pill i:hover { opacity: 1; }

.review-attrs-empty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
}

/* ── §25.6  Comments Section ────────────────────────────────── */

.review-comments-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-comments-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.review-comments-title i { color: var(--color-warning); }

.review-comments-count {
  background: var(--bg-sub-surface);
  color: var(--text-secondary);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* Comment input area */
.review-comment-input-area {
  background: var(--bg-sub-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  padding: 1rem;
}

.review-comment-textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.review-comment-textarea:focus     { border-color: var(--border-focus); }
.review-comment-textarea::placeholder { color: var(--text-muted); }

.review-comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* ── §25.7  Comment Cards List ──────────────────────────────── */

.review-comments-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.review-comment-card {
  background: var(--bg-sub-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.review-comment-card:hover { border-color: var(--border-hover); }

/* Status-colour left accent */
.review-comment-card.status-open     { border-left: 3px solid var(--color-warning); }
.review-comment-card.status-updated  { border-left: 3px solid var(--color-info); }
.review-comment-card.status-resolved { border-left: 3px solid var(--color-success); }
.review-comment-card.status-closed   { border-left: 3px solid var(--border-color); opacity: 0.8; }

.review-comment-main { padding: 1rem 1.25rem; }

.review-comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.review-comment-author-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.review-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.review-comment-author-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.review-comment-time {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Status badge pill */
.review-comment-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: filter var(--transition-fast);
}

.review-comment-status-badge:hover { filter: brightness(1.25); }

.review-comment-status-badge.status-open     { background: var(--color-warning-bg); color: var(--color-warning); }
.review-comment-status-badge.status-updated  { background: var(--color-info-bg);    color: var(--color-info); }
.review-comment-status-badge.status-closed   { background: var(--bg-sub-surface);   color: var(--text-muted); }
.review-comment-status-badge.status-resolved { background: var(--color-success-bg); color: var(--color-success); }

.review-comment-text {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.review-comment-toolbar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.review-comment-toolbar button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0;
  transition: color var(--transition-fast);
}

.review-comment-toolbar button:hover { color: var(--color-info); }

/* Replies */
.review-replies-list {
  padding: 0 1.25rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.review-reply-card {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  border-left: 2px solid var(--border-color);
}

.review-reply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.review-reply-author {
  font-weight: 600;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.review-reply-time {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.review-reply-text {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Reply input area */
.review-reply-input-area { padding: 0 1.25rem 1rem 1.25rem; }

.review-reply-textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  resize: vertical;
  min-height: 60px;
  outline: none;
}

.review-reply-textarea:focus { border-color: var(--border-focus); }

.review-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ── §25.8  Comment Status Dropdown ─────────────────────────── */

.review-status-dropdown {
  position: relative;
  display: inline-block;
}

.review-status-options {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  min-width: 140px;
  overflow: hidden;
  display: none;
}

.review-status-options.active {
  display: block;
  animation: review-dropdown-in 0.15s ease;
}

@keyframes review-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.review-status-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.review-status-option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.review-status-option i { width: 16px; text-align: center; }

.review-status-option.status-open     i { color: var(--color-warning); }
.review-status-option.status-updated  i { color: var(--color-info); }
.review-status-option.status-closed   i { color: var(--text-muted); }
.review-status-option.status-resolved i { color: var(--color-success); }

/* ── §25.9  Empty State ──────────────────────────────────────── */

.review-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
}

.review-empty-state i {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: block;
  color: var(--border-color);
}

.review-empty-state p { font-size: var(--font-size-sm); }

/* ── §25.10  Traffic-light Checklist Grid ────────────────────── */

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

/* Checklist tile — structural shell */
.checklist-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl);
  transition: var(--transition-surface), transform var(--transition-fast);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-height: 120px;
  /* Left accent — recoloured by state classes below */
  border-left: 4px solid var(--border-color);
}

.checklist-tile:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Traffic-light state variants — tinted with semantic tokens */
.checklist-tile.completed {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  border-left-color: var(--color-success);
}

.checklist-tile.completed:hover {
  border-color: var(--color-success-border);
  box-shadow: var(--shadow-md);
}

.checklist-tile.current {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  border-left-color: var(--color-warning);
}

.checklist-tile.current:hover {
  border-color: var(--color-warning-border);
  box-shadow: var(--shadow-md);
}

.checklist-tile.pending {
  border-color: var(--border-color);
  background: var(--bg-sub-surface);
  border-left-color: var(--border-color);
  opacity: 0.8;
}

.checklist-tile.pending:hover {
  border-color: var(--border-hover);
  opacity: 1;
}

/* Tile header */
.checklist-tile-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  position: relative;
  flex: 1;
}

/* Checkbox wrapper — leftmost position */
.checklist-checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-sm);
}

/* Unified square checkbox */
.checklist-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.checklist-checkbox:hover {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.checklist-tile.completed .checklist-checkbox {
  background: var(--color-success);
  border-color: var(--color-success);
}

.checklist-tile.current .checklist-checkbox {
  border-color: var(--color-warning);
  background: transparent;
  animation: checklist-border-pulse 2s infinite;
}

.checklist-tile.pending .checklist-checkbox {
  border-color: var(--border-color);
  background: transparent;
  opacity: 0.6;
}

@keyframes checklist-border-pulse {
  0%   { box-shadow: 0 0 0 0 var(--color-warning-bg); }
  70%  { box-shadow: 0 0 0 4px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Thick checkmark for completed items */
.checklist-checkbox.checked::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 6px;
  border: solid var(--text-primary);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
  top: 2px;
  left: 3px;
}

/* Status icon — far right of header */
.checklist-status-icon {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.checklist-status-icon.completed { color: var(--color-success); }
.checklist-status-icon.current   { color: var(--color-warning); }
.checklist-status-icon.pending   { color: var(--text-muted); opacity: 0.6; }

/* Pulsing ring for "current" state */
.checklist-pulsing-ring {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-warning);
  border-radius: 50%;
  animation: checklist-ring-pulse 2s infinite;
}

@keyframes checklist-ring-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Tile content */
.checklist-tile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.checklist-tile-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.checklist-tile-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* State-specific text colours */
.checklist-tile.completed .checklist-tile-title { color: var(--color-success); }
.checklist-tile.current   .checklist-tile-title { color: var(--color-warning); font-weight: 700; }
.checklist-tile.pending   .checklist-tile-title { color: var(--text-muted); opacity: 0.8; }
.checklist-tile.pending   .checklist-tile-description { opacity: 0.7; }

/* ── §25.11  Review Responsive ──────────────────────────────── */

@media (max-width: 768px) {
  .review-side-panel { width: 100%; max-width: 100%; right: -100%; }

  .field-review-trigger {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .review-badge { font-size: var(--font-size-xs); padding: 0.375rem 0.75rem; }

  .checklist-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .checklist-tile { min-height: 100px; padding: var(--spacing-lg); }
  .checklist-checkbox { width: 16px; height: 16px; }
  .checklist-checkbox.checked::after { width: 8px; height: 5px; top: 2px; left: 3px; }
}

/* Checklist accessibility */
.checklist-checkbox:focus { outline: 2px solid var(--border-focus); outline-offset: 2px; }


/* ============================================================
   §26  APPROVAL WORKFLOW — Structural Layout Recovery
   Source: _archive_css/approval-workflow.css
   Recovery Pass: Part 3 — 2026-07-12
   Rule: STRUCTURE & POSITIONING ONLY.
         All colours use active design tokens from theme.css.
         Zero hardcoded hex values in this section.
   ============================================================ */

/* ── §26.1  Workflow Page Shell ──────────────────────────────── */

.approval-workflow-page {
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  line-height: 1.6;
}

/* ── §26.2  Sticky Workflow Header ──────────────────────────── */

.workflow-header {
  background: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
  padding: var(--spacing-md);
  position: sticky;
  top: var(--nav-height, 70px);
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}

.workflow-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xl);
  max-width: 1400px;
  margin: 0 auto;
}

.workflow-protocol-info { flex: 1; }

.workflow-protocol-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.workflow-protocol-title i { color: var(--color-info); }

.workflow-protocol-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.workflow-meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.workflow-meta-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.workflow-meta-value {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 600;
}

/* Status badge — authorization state pill */
.workflow-status-badge {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.workflow-status-badge.draft {
  background: var(--bg-sub-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.workflow-status-badge.in-review {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.workflow-status-badge.approved {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

/* Header right-side actions + comment stats */
.workflow-header-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: flex-end;
}

.workflow-comment-stats {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-surface);
}

.workflow-comment-stats:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

.workflow-stat-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.workflow-stat-label { color: var(--text-secondary); font-weight: 500; }
.workflow-stat-value { font-weight: 600; color: var(--text-primary); }
.workflow-stat-value.open-count     { color: var(--color-warning); }
.workflow-stat-value.resolved-count { color: var(--color-success); }

/* ── §26.3  Workflow Main Layout ─────────────────────────────── */

.workflow-main {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-lg);
  gap: var(--spacing-lg);
  min-height: calc(100vh - 140px);
  width: 100%;
  box-sizing: border-box;
}

/* ── §26.4  Action Section (grey bar below table) ────────────── */

.workflow-action-section {
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Top accent stripe */
.workflow-action-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-info) 0%, var(--color-success) 100%);
}

.workflow-action-section:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

.workflow-action-section-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: var(--spacing-sm);
}

.workflow-action-info { flex: 1; }

.workflow-action-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.workflow-action-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ── §26.5  Specifications Section & Table Container ─────────── */

.specifications-section {
  flex: 1;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: var(--shadow-sm);
}

.specifications-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-sub-surface);
  border-bottom: 2px solid var(--border-color);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.specifications-section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.specifications-section-title i { color: var(--color-info); }

.specifications-section-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Table scroll container */
.specifications-table-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
  min-height: 300px;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.specifications-table-container::-webkit-scrollbar { width: 6px; height: 6px; }
.specifications-table-container::-webkit-scrollbar-track { background: var(--bg-sub-surface); }
.specifications-table-container::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.specifications-table-container::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ── §26.6  Specifications Table ─────────────────────────────── */

.specifications-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  min-width: 1400px;
  table-layout: auto;
}

/* Sticky header */
.specifications-table thead {
  border: 1px solid var(--border-color);
  border-bottom: 3px solid var(--border-color);
}

.specifications-table th {
  background: var(--bg-sub-surface);
  color: var(--text-primary);
  font-weight: 600;
  padding: var(--spacing-sm) var(--spacing-xs);
  text-align: left;
  border-bottom: 2px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.specifications-table th:last-child { border-right: none; }

/* Column width definitions */
.specifications-table th.col-drag     { width: 40px;  text-align: center; border-right: 1px solid var(--border-color); }
.specifications-table th.col-select   { width: 40px;  text-align: center; border-right: 1px solid var(--border-color); }
.specifications-table th.col-seq      { width: 60px;  border-right: 1px solid var(--border-color); }
.specifications-table th.col-variable { width: 150px; border-right: 1px solid var(--border-color); }
.specifications-table th.col-datatype { width: 100px; border-right: 1px solid var(--border-color); }
.specifications-table th.col-response { width: 150px; border-right: 1px solid var(--border-color); }
.specifications-table th.col-question { width: 400px; border-right: 1px solid var(--border-color); }
.specifications-table th.col-display  { width: 120px; border-right: 1px solid var(--border-color); }
.specifications-table th.col-attrs    { width: 200px; border-right: 1px solid var(--border-color); }
.specifications-table th.col-logic    { width: 350px; border-right: 1px solid var(--border-color); }
.specifications-table th.col-actions  { width: 80px;  text-align: center; }

/* Table cells */
.specifications-table td {
  padding: var(--spacing-sm) var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  vertical-align: middle;
  background: var(--bg-surface);
  transition: background var(--transition-fast);
  position: relative;
}

.specifications-table td:last-child { border-right: none; }

/* Body row states */
.specifications-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
  border-left: 4px solid transparent;
}

.specifications-table tbody tr:hover {
  background: var(--bg-hover);
  border-left-color: var(--color-info);
  box-shadow: var(--shadow-sm);
}

.specifications-table tbody tr:hover td { border-bottom-color: var(--border-hover); }

.specifications-table tbody tr.selected {
  background: var(--bg-sub-surface);
  border-left-color: var(--border-focus);
}

/* Comment-state row markers */
.specifications-table tbody tr.has-comments         { border-left: 4px solid var(--color-warning); }
.specifications-table tbody tr.has-comments.resolved { border-left-color: var(--color-success); }

/* ── §26.7  Interactive Cells ────────────────────────────────── */

.specifications-table td.interactive-cell {
  cursor: pointer;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
}

.specifications-table td.interactive-cell:hover {
  background: var(--bg-hover);
  border-left-color: var(--color-info);
  box-shadow: inset 0 0 0 1px var(--border-hover);
}

.specifications-table td.interactive-cell.cell-active {
  background: var(--bg-sub-surface);
  border-left-color: var(--color-success);
  box-shadow: inset 0 0 0 2px var(--border-focus);
  font-weight: 500;
}

.specifications-table td.interactive-cell.cell-hover {
  background: var(--bg-hover);
  border-left-color: var(--color-info);
}

.specifications-table td.interactive-cell.has-comments         { border-left: 1px solid var(--color-warning); }
.specifications-table td.interactive-cell.has-comments.resolved { border-left-color: var(--color-success); }

.specifications-table td.interactive-cell.editing {
  background: var(--bg-sub-surface);
  border: 2px solid var(--border-focus);
}

.specifications-table td.interactive-cell.readonly          { cursor: default; }
.specifications-table td.interactive-cell.readonly:hover    { background: transparent; }

/* Cell click overlay + content z-layers */
.cell-click-area {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: var(--z-base);
}

.cell-content {
  position: relative;
  z-index: var(--z-raised);
  pointer-events: none;
}

/* ── §26.8  Workflow Drag-handle Column ─────────────────────── */

.specifications-table .drag-handle-col {
  cursor: move;
  color: var(--text-muted);
  width: 24px;
  padding: 0 !important;
  text-align: center;
}

.specifications-table .drag-handle-col:hover  { color: var(--text-secondary); }
.specifications-table .drag-handle-col:active { cursor: grabbing; }

/* ── §26.9  Datatype Badges ──────────────────────────────────── */

/* Base badge — coloured by data-type class */
.workflow-datatype-badge {
  display: inline-block;
  padding: 2px 6px;
  margin: 2px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  /* Default: info tint (integer/generic) */
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info);
}

/* Type-specific overrides — semantic token tints only */
.workflow-datatype-badge.integer  { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info); }
.workflow-datatype-badge.text     { background: var(--color-success-bg);  border-color: var(--color-success-border); color: var(--color-success); }
.workflow-datatype-badge.date     { background: var(--color-warning-bg);  border-color: var(--color-warning-border); color: var(--color-warning); }
.workflow-datatype-badge.datetime { background: var(--color-error-bg);    border-color: var(--color-error-border);   color: var(--color-error); }
.workflow-datatype-badge.boolean  { background: var(--bg-sub-surface);    border-color: var(--border-color);         color: var(--text-secondary); }
.workflow-datatype-badge.numeric  { background: var(--color-info-bg);     border-color: var(--color-info-border);    color: var(--color-info); }

/* ── §26.10  Response Column — Inline Expandable ────────────── */

.workflow-response-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: var(--transition-surface);
  min-height: 32px;
  position: relative;
}

.workflow-response-summary:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.workflow-response-summary.empty {
  color: var(--text-muted);
  font-style: italic;
  cursor: default;
}

.workflow-response-preview {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.workflow-response-count {
  font-weight: 600;
  color: var(--color-info);
  font-size: var(--font-size-sm);
  background: var(--bg-sub-surface);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.workflow-response-expanded {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  max-height: 300px;
  overflow-y: auto;
  margin-top: var(--spacing-xs);
  display: none;
}

.workflow-response-expanded.active { display: block; }

/* ── §26.11  Logic Column — Inline Expandable ───────────────── */

.workflow-logic-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-surface);
  min-height: 32px;
  position: relative;
}

.workflow-logic-summary:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.workflow-logic-summary.empty {
  background: transparent;
  border: 1px dashed var(--border-color);
  cursor: default;
  opacity: 0.7;
}

/* Logic dot indicator */
.workflow-logic-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  flex-shrink: 0;
}

.workflow-logic-dot.complex {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.workflow-logic-preview {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-family: 'Courier New', monospace;
}

.workflow-logic-expanded {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  max-height: 200px;
  overflow-y: auto;
  margin-top: var(--spacing-xs);
  display: none;
  padding: var(--spacing-sm);
}

.workflow-logic-expanded.active { display: block; }

.workflow-logic-text-block {
  background: var(--bg-sub-surface);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ── §26.12  Authorization / Approval Badges ─────────────────── */

/* Vertical-aligned badge strip — never breaks out of its cell */
.workflow-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 2px 8px;
  margin: 2px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.workflow-auth-badge.required {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
}

.workflow-auth-badge.approved {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
}

.workflow-auth-badge.pending {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
}

.workflow-auth-badge.info {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info);
}

/* ── §26.13  Workflow Status Indicators in Cells ─────────────── */

.workflow-cell-status-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 8px;
  cursor: pointer;
  line-height: 1;
}

.workflow-cell-status-dot.open     { color: var(--color-warning); }
.workflow-cell-status-dot.resolved { color: var(--color-success); }

.workflow-cell-status-dot:hover {
  transform: scale(1.2);
  transition: transform var(--transition-fast);
}

/* Comment indicator badge on action buttons */
.workflow-action-btn-comment {
  position: relative;
}

.workflow-action-btn-comment::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-warning);
  border: 2px solid var(--bg-surface);
  animation: workflow-comment-pulse 2s infinite;
}

.workflow-action-btn-comment.resolved::after {
  background: var(--color-success);
  animation: none;
}

@keyframes workflow-comment-pulse {
  0%   { box-shadow: 0 0 0 2px var(--color-warning-bg); }
  50%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 2px var(--color-warning-bg); }
}

/* ── §26.14  Workflow Comment Side Panel ─────────────────────── */

.workflow-comment-panel {
  width: 400px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--nav-height, 70px);
  right: -400px;
  height: calc(100vh - var(--nav-height, 70px));
  z-index: calc(var(--z-overlay) + 1);
  transition: right 0.3s ease;
  box-shadow: var(--shadow-lg);
}

.workflow-comment-panel.active { right: 0; }

.workflow-comment-panel-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.workflow-comment-panel-overlay.active { opacity: 1; visibility: visible; }

/* Panel header */
.workflow-panel-header {
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

.workflow-panel-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.workflow-panel-title-row i { color: var(--color-info); }

.workflow-panel-subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

.workflow-panel-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: var(--transition-surface);
}

.workflow-panel-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Panel content */
.workflow-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workflow-comment-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.workflow-comment-thread::-webkit-scrollbar { width: 5px; }
.workflow-comment-thread::-webkit-scrollbar-track { background: transparent; }
.workflow-comment-thread::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

/* Comment items in panel */
.workflow-comment-item {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  position: relative;
}

.workflow-comment-item.open     { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.workflow-comment-item.resolved { border-color: var(--color-success-border); background: var(--color-success-bg); }

.workflow-comment-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.workflow-comment-author    { font-weight: 600; color: var(--text-primary); font-size: var(--font-size-sm); }
.workflow-comment-date      { font-size: var(--font-size-xs); color: var(--text-muted); }
.workflow-comment-item-text { color: var(--text-primary); line-height: 1.5; margin-bottom: var(--spacing-sm); }

.workflow-comment-item-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.workflow-comment-item-status.open     { color: var(--color-warning); }
.workflow-comment-item-status.resolved { color: var(--color-success); }

/* Comment input form */
.workflow-comment-form {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  background: var(--bg-sub-surface);
  flex-shrink: 0;
}

.workflow-comment-input {
  width: 100%;
  min-height: 80px;
  padding: var(--spacing-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  resize: vertical;
  transition: border-color var(--transition-fast);
  outline: none;
}

.workflow-comment-input:focus       { border-color: var(--border-focus); }
.workflow-comment-input::placeholder { color: var(--text-muted); }

/* Panel footer */
.workflow-panel-footer {
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* ── §26.15  Approval Warning Block (modal context) ──────────── */

.workflow-approval-warning {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-warning-border);
  margin-bottom: var(--spacing-lg);
}

.workflow-warning-icon { flex-shrink: 0; }
.workflow-warning-icon i {
  font-size: var(--font-size-2xl);
  color: var(--color-warning);
}

.workflow-warning-content h4 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.workflow-warning-content p {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-secondary);
}

.workflow-warning-content ul {
  margin: var(--spacing-sm) 0;
  padding-left: var(--spacing-md);
  color: var(--text-secondary);
}

.workflow-warning-text {
  font-weight: 600;
  color: var(--color-warning);
}

/* External approval options */
.workflow-external-approvals { margin-top: var(--spacing-lg); }

.workflow-external-approvals h4 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.workflow-approval-options {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* External approval status strip */
.workflow-external-status {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.workflow-external-status .status-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
}

.workflow-external-status i { color: var(--color-info); }

/* ── §26.16  Editable Cell in Workflow Table ─────────────────── */

.workflow-editable-cell {
  cursor: pointer;
  position: relative;
  padding-right: var(--spacing-md);
  transition: background var(--transition-fast);
}

.workflow-editable-cell:hover {
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
}

.workflow-editable-cell::after {
  content: '\f040';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: var(--spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.workflow-editable-cell:hover::after  { opacity: 1; }

.workflow-editable-cell.editing {
  background: var(--bg-sub-surface);
  border: 2px solid var(--border-focus);
  border-radius: var(--radius-sm);
}

.workflow-editable-cell.readonly          { cursor: default; }
.workflow-editable-cell.readonly::after   { display: none; }

/* Inline edit input inside workflow table cells */
.workflow-cell-edit-input {
  width: 100%;
  padding: var(--spacing-xs);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: inherit;
  outline: none;
  min-height: unset;
}

.workflow-cell-edit-input:focus { box-shadow: 0 0 0 2px var(--color-info-bg); }

/* ── §26.17  Export Options (modal) ──────────────────────────── */

.workflow-export-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.workflow-export-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-surface);
}

.workflow-export-option:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.workflow-export-option input[type="radio"] { accent-color: var(--border-focus); }

.workflow-export-option label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  flex: 1;
}

.workflow-export-option i {
  font-size: var(--font-size-lg);
  color: var(--color-info);
}

.workflow-export-info {
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.workflow-export-filename      { font-size: var(--font-size-sm); color: var(--text-secondary); }
.workflow-export-filename strong { color: var(--text-primary); }

/* ── §26.18  Role Indicator Chip ─────────────────────────────── */

.workflow-role-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-sub-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.workflow-role-indicator i { color: var(--color-warning); }

/* ── §26.19  Workflow Responsive ─────────────────────────────── */

@media (max-width: 1200px) {
  .workflow-main { flex-direction: column; height: auto; padding: var(--spacing-sm); }
  .specifications-table-container { max-height: calc(100vh - 200px); }
  .specifications-table { min-width: 1000px; }
  .specifications-table th.col-question { width: 250px; }
  .specifications-table th.col-logic    { width: 250px; }
  .workflow-comment-panel { width: 100%; max-width: 600px; }
}

@media (max-width: 768px) {
  .workflow-header-content { flex-direction: column; gap: var(--spacing-md); }
  .workflow-protocol-meta  { flex-direction: column; gap: var(--spacing-sm); }
  .workflow-header-actions { align-items: center; width: 100%; }
  .workflow-comment-stats  { flex-direction: column; gap: var(--spacing-sm); width: 100%; }
  .workflow-main           { padding: var(--spacing-xs); height: auto; }
  .specifications-table-container { max-height: calc(100vh - 250px); margin: var(--spacing-xs); }
  .specifications-table    { min-width: 800px; font-size: var(--font-size-xs); }
  .specifications-table th.col-question { width: 200px; }
  .specifications-table th.col-logic    { width: 180px; }
  .specifications-section-header { flex-direction: column; gap: var(--spacing-md); align-items: flex-start; }
  .workflow-action-section-content { flex-direction: column; text-align: center; gap: var(--spacing-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .review-badge,
  .field-review-trigger,
  .checklist-pulsing-ring,
  .workflow-action-btn-comment::after,
  .workflow-comment-panel { animation: none !important; transition: none !important; }
}

@media (prefers-contrast: high) {
  .specifications-table,
  .review-side-panel { border-width: 2px; }
}

/* ── END §25 & §26 ────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────
   §22  DO-SECTION SHELL
   ──────────────────────────────────────────────────────────── */

.do-section {
  padding: var(--spacing-3xl) 0;
  position: relative;
}

.do-section__header {
  margin-bottom: var(--spacing-3xl);
}

.do-section__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.do-section__title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

.do-section__subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 600px;
}


/* ============================================================
   §27  APPROVAL WORKFLOW — Structural Recovery Pass 4
   ============================================================
   SOURCE: _archive_css/approval-workflow.css (structural,
           positional, and geometric rules only).
   TARGET: approval-workflow.html (actual class names as used
           in the DOM — all scoped under .approval-workflow
           to prevent bleed into other pages).

   STRATEGY
   ────────
   §26 defines workflow-* prefixed classes that differ from
   the raw class names used in the HTML (e.g. header-content,
   section-header, table-container, action-section, …).
   This §27 block bridges those gaps by:

   STEP 1 — Page containment: max-width sheet on .workflow-main
            and .header-content within .approval-workflow scope.
   STEP 2 — Row-level orphan containment: explicit position:
            relative + flex/grid on every structural row layer
            so no child connector or badge escapes its box.
   STEP 3 — Hex sanitization: every colour property uses a
            global design token. Zero hardcoded hex here.
   STEP 4 — DOM bridging: the real HTML class names are wired
            to their proper structural declarations.

   APPEND RULE: These rules are appended to the bottom of
   app-components.css and never modify theme.css or main.css.
   ============================================================ */


/* ── §27.1  STEP 1 — Workflow Page Shell & Containment ──────────────────────── */

/*
  .approval-workflow is the <body> class.  Every rule below is
  scoped inside it so it cannot conflict with dashboard, CRF,
  or any other page that shares generic class names like
  .section-header or .header-content.
*/

/* Body background / font baseline — token only */
body.approval-workflow {
  background: var(--bg-background, var(--bg-secondary));
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  line-height: 1.6;
  min-height: 100vh;
}

/* ──  Header shell: sticky below navbar, full-width background ── */
.approval-workflow .workflow-header {
  background: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
  padding: var(--spacing-md) var(--spacing-lg);
  position: sticky;
  top: var(--nav-height, 70px);
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}

/*
  STEP 1 FIX: .header-content is the inner centering wrapper.
  Source archive: max-width 1400px, margin: 0 auto.
  We scope under .approval-workflow so it doesn't override the
  nav bar's .header-content rule.
*/
.approval-workflow .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xl);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.approval-workflow .protocol-info  { flex: 1; }

.approval-workflow .protocol-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.approval-workflow .protocol-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.approval-workflow .meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.approval-workflow .meta-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.approval-workflow .meta-value {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 600;
}

/* Status badge pills — token colours only */
.approval-workflow .status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.approval-workflow .status-badge.draft {
  background: var(--bg-sub-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.approval-workflow .status-badge.in-review {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.approval-workflow .status-badge.approved {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

/* Header right-side actions */
.approval-workflow .header-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: flex-end;
}

/* Comment statistics strip */
.approval-workflow .comment-stats {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-surface);
}

.approval-workflow .comment-stats:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

.approval-workflow .stat-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.approval-workflow .stat-label   { color: var(--text-secondary); font-weight: 500; }
.approval-workflow .stat-value   { font-weight: 600; color: var(--text-primary); }
.approval-workflow .open-count   { color: var(--color-warning); }
.approval-workflow .resolved-count { color: var(--color-success); }


/* ── §27.2  STEP 1 — Main Layout Shell Containment ──────────────────────────── */

/*
  STEP 1 FIX: .workflow-main must not blow out to full viewport.
  Source archive gave it max-width: none (full width was intentional
  for the table), but the spec requires a centred 1200px sheet.
  We apply the 1200px ceiling here and let the table scroll
  internally via .table-container's overflow-x: auto.
*/
.approval-workflow .workflow-main {
  display: flex;
  flex-direction: column;
  max-width: 1200px;        /* STEP 1: central sheet limit            */
  margin: 0 auto;           /* STEP 1: auto-centred                   */
  width: 100%;
  padding: var(--spacing-xl) var(--spacing-lg);
  gap: var(--spacing-lg);
  min-height: calc(100vh - 140px);
  box-sizing: border-box;
}


/* ── §27.3  STEP 1 — Specifications Section Card ────────────────────────────── */

.approval-workflow .specifications-section {
  flex: 1;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;          /* clips card corners cleanly              */
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: var(--shadow-sm);
}

/*
  STEP 1 FIX: .section-header is a generic name shared across pages.
  Scoped here so only the workflow page gets these overrides.
*/
.approval-workflow .specifications-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-sub-surface);
  border-bottom: 2px solid var(--border-color);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  /* no overflow — children (dropdowns) must escape */
}

.approval-workflow .section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.approval-workflow .section-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.approval-workflow .role-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-sub-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.approval-workflow .view-controls { display: flex; align-items: center; gap: var(--spacing-sm); }


/* ── §27.4  STEP 2 — Table Container Orphan Containment ─────────────────────── */

/*
  STEP 2 FIX: .table-container inside the workflow page.
  Source archive: flex: 1, overflow-x + overflow-y auto,
  max-height viewport-relative, strict width: 100%.
  The generic .table-container rule (§23) is overridden here
  for the workflow scope.
*/
.approval-workflow .table-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 240px);
  position: relative;            /* STEP 2: positioning context           */
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
  min-height: 300px;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.approval-workflow .table-container::-webkit-scrollbar        { width: 6px; height: 6px; }
.approval-workflow .table-container::-webkit-scrollbar-track  { background: var(--bg-sub-surface); }
.approval-workflow .table-container::-webkit-scrollbar-thumb  { background: var(--border-color); border-radius: 3px; }
.approval-workflow .table-container::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }


/* ── §27.5  STEP 2 — Specifications Table Row-level Containment ─────────────── */

/*
  STEP 2 FIX: Every <tr> is a strict row container.
  position: relative ensures status-dot badges (::before, ::after)
  and absolute-positioned connectors stay inside the row boundary
  and never orphan to the viewport bottom.
*/
.approval-workflow .specifications-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  background: var(--bg-surface);
  min-width: 1400px;       /* horizontal scroll — table never collapses  */
  table-layout: auto;
}

.approval-workflow .specifications-table thead {
  border-bottom: 3px solid var(--border-color);
}

.approval-workflow .specifications-table th {
  background: var(--bg-sub-surface);
  color: var(--text-primary);
  font-weight: 600;
  padding: var(--spacing-sm) var(--spacing-xs);
  text-align: left;
  border-bottom: 2px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.approval-workflow .specifications-table th:last-child { border-right: none; }

/* Column widths — from archive source */
.approval-workflow .specifications-table th.drag-handle-col { width: 40px;  text-align: center; }
.approval-workflow .specifications-table th.selection-col   { width: 40px;  text-align: center; }
.approval-workflow .specifications-table th.sequence-col    { width: 60px; }
.approval-workflow .specifications-table th.variable-col    { width: 150px; }
.approval-workflow .specifications-table th.question-col    { width: 400px; }
.approval-workflow .specifications-table th.datatype-col    { width: 100px; }
.approval-workflow .specifications-table th.response-col    { width: 150px; }
.approval-workflow .specifications-table th.display-col     { width: 120px; }
.approval-workflow .specifications-table th.attributes-col  { width: 200px; }
.approval-workflow .specifications-table th.logic-col       { width: 350px; }
.approval-workflow .specifications-table th.actions-col     { width: 80px;  text-align: center; }

/*
  STEP 2 FIX: Table cells — position: relative so any absolute-
  positioned descendant (status dots, expand menus) is bounded
  to its own cell, never falling to the page baseline.
*/
.approval-workflow .specifications-table td {
  padding: var(--spacing-sm) var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  vertical-align: middle;
  background: var(--bg-surface);
  transition: background var(--transition-fast);
  position: relative;      /* STEP 2: containment context for child absolute elements */
}

.approval-workflow .specifications-table td:last-child { border-right: none; }

/*
  STEP 2 FIX: Body rows — border-left: 4px transparent creates
  the left-accent track without breaking layout; position:
  relative bounds the row-level connector lines.
*/
.approval-workflow .specifications-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
  border-left: 4px solid transparent;
  position: relative;       /* STEP 2: row-level containment             */
}

.approval-workflow .specifications-table tbody tr:hover {
  background: var(--bg-hover);
  border-left-color: var(--color-info);
}

.approval-workflow .specifications-table tbody tr:hover td {
  border-bottom-color: var(--border-hover);
}

.approval-workflow .specifications-table tbody tr.selected {
  background: var(--bg-sub-surface);
  border-left-color: var(--border-focus);
}

/* Comment state accent strips — token colours */
.approval-workflow .specifications-table tbody tr.has-comments         { border-left: 4px solid var(--color-warning); }
.approval-workflow .specifications-table tbody tr.has-comments.resolved { border-left-color: var(--color-success); }

/* Hide-comments mode — strip left borders */
.approval-workflow .specifications-table.hide-comments .has-comments { border-left: none; }


/* ── §27.6  STEP 2 — Interactive Cells (TD-level containment) ───────────────── */

.approval-workflow .specifications-table td.interactive-cell {
  cursor: pointer;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
}

.approval-workflow .specifications-table td.interactive-cell:hover {
  background: var(--bg-hover);
  border-left-color: var(--color-info);
  box-shadow: inset 0 0 0 1px var(--border-hover);
}

.approval-workflow .specifications-table td.interactive-cell.cell-active {
  background: var(--bg-sub-surface);
  border-left-color: var(--color-success);
  box-shadow: inset 0 0 0 2px var(--border-focus);
  font-weight: 500;
}

.approval-workflow .specifications-table td.interactive-cell.cell-hover {
  background: var(--bg-hover);
  border-left-color: var(--color-info);
}

.approval-workflow .specifications-table td.interactive-cell.has-comments         { border-left: 1px solid var(--color-warning); }
.approval-workflow .specifications-table td.interactive-cell.has-comments.resolved { border-left-color: var(--color-success); }

.approval-workflow .specifications-table td.interactive-cell.editing {
  background: var(--bg-sub-surface);
  border: 2px solid var(--border-focus);
}

.approval-workflow .specifications-table td.interactive-cell.readonly       { cursor: default; }
.approval-workflow .specifications-table td.interactive-cell.readonly:hover { background: transparent; }

/* STEP 2: Interactive-header column headers */
.approval-workflow .specifications-table th.interactive-header {
  cursor: pointer;
  user-select: none;
  transition: var(--transition-surface);
}

.approval-workflow .specifications-table th.interactive-header:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}


/* ── §27.7  STEP 2 — Drag Handle, Selection, Sequence Columns ───────────────── */

.approval-workflow .drag-handle-col {
  cursor: move;
  color: var(--text-muted);
  padding: 0 !important;
  text-align: center;
}

.approval-workflow .drag-handle-col:hover  { color: var(--text-secondary); }
.approval-workflow .drag-handle-col:active { cursor: grabbing; }

.approval-workflow .selection-col input[type="checkbox"] {
  margin: 0;
  accent-color: var(--border-focus);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.approval-workflow .sequence-col {
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.approval-workflow .variable-col {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-primary);
}

.approval-workflow .question-col  { min-width: 200px; }
.approval-workflow .question-text { font-weight: 500; color: var(--text-primary); }
.approval-workflow .question-description { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: var(--spacing-xs); }

.approval-workflow .datatype-col { font-size: var(--font-size-xs); font-weight: 500; }

.approval-workflow .response-col { font-size: var(--font-size-xs); position: relative; }

.approval-workflow .logic-col {
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-xs);
  position: relative;
}

.approval-workflow .actions-col { text-align: center; }


/* ── §27.8  STEP 3 — Datatype & Attribute Badges (sanitized) ────────────────── */

/*
  STEP 3: All type-specific colours use semantic tokens.
  The archive used literal hex values; they are replaced here.
*/
.approval-workflow .datatype-badge {
  display: inline-block;
  padding: 2px 6px;
  margin: 2px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info);
}

.approval-workflow .datatype-badge.integer  { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info); }
.approval-workflow .datatype-badge.text     { background: var(--color-success-bg);  border-color: var(--color-success-border); color: var(--color-success); }
.approval-workflow .datatype-badge.date     { background: var(--color-warning-bg);  border-color: var(--color-warning-border); color: var(--color-warning); }
.approval-workflow .datatype-badge.datetime { background: var(--color-error-bg);    border-color: var(--color-error-border);   color: var(--color-error); }
.approval-workflow .datatype-badge.boolean  { background: var(--bg-sub-surface);    border-color: var(--border-color);         color: var(--text-secondary); }
.approval-workflow .datatype-badge.numeric  { background: var(--color-info-bg);     border-color: var(--color-info-border);    color: var(--color-info); }

.approval-workflow .dataset-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

.approval-workflow .attribute-badge {
  display: inline-block;
  padding: 2px 6px;
  margin: 2px;
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

/* Required attribute — error token */
.approval-workflow .attribute-badge.required {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error);
}

.approval-workflow .attributes-list { display: flex; flex-wrap: wrap; gap: 2px; }


/* ── §27.9  STEP 2 — Response Column: Inline Expandable (contained) ─────────── */

/*
  STEP 2 FIX: .response-summary is position: relative so the
  .response-expanded dropdown is bounded to the cell, not the page.
*/
.approval-workflow .response-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-sub-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: var(--transition-surface);
  min-height: 32px;
  position: relative;       /* STEP 2: containment for .response-expanded */
}

.approval-workflow .response-summary:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.approval-workflow .response-summary.empty {
  color: var(--text-muted);
  font-style: italic;
  cursor: default;
}

.approval-workflow .response-preview {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.approval-workflow .response-count {
  font-weight: 600;
  color: var(--color-info);
  font-size: var(--font-size-sm);
  background: var(--bg-sub-surface);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* STEP 2: Expanded dropdown — absolute inside .response-summary */
.approval-workflow .response-expanded {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  max-height: 300px;
  overflow-y: auto;
  margin-top: var(--spacing-xs);
  display: none;
}

.approval-workflow .response-expanded.active { display: block; }

.approval-workflow .response-list-detailed { padding: var(--spacing-sm); }

.approval-workflow .response-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 2px 0;
  font-size: var(--font-size-sm);
  line-height: 1.3;
}

.approval-workflow .response-value {
  font-weight: 500;
  color: var(--color-info);
  background: var(--color-info-bg);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-info-border);
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-xs);
}

.approval-workflow .response-label { color: var(--text-secondary); flex: 1; font-size: var(--font-size-xs); }

.approval-workflow .response-item-detailed {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin: var(--spacing-xs) 0;
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: var(--transition-surface);
}

.approval-workflow .response-item-detailed:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.approval-workflow .response-value-detailed {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  min-width: 60px;
  text-align: center;
  font-family: 'Courier New', monospace;
}

.approval-workflow .response-label-detailed { color: var(--text-secondary); font-size: var(--font-size-sm); flex: 1; }

.approval-workflow .response-expand {
  display: inline-flex;
  align-items: center;
  color: var(--color-info);
  cursor: pointer;
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  user-select: none;
}

.approval-workflow .response-expand:hover { text-decoration: underline; }


/* ── §27.10  STEP 2 — Logic Column: Inline Expandable (contained) ───────────── */

.approval-workflow .logic-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-surface);
  min-height: 32px;
  position: relative;     /* STEP 2: containment for .logic-expanded */
}

.approval-workflow .logic-summary:hover:not(.empty) {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.approval-workflow .logic-summary.empty {
  background: transparent;
  border: 1px dashed var(--border-color);
  cursor: default;
  opacity: 0.7;
}

.approval-workflow .logic-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  flex-shrink: 0;
}

.approval-workflow .logic-indicator.complex {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.approval-workflow .logic-preview {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-family: 'Courier New', monospace;
  line-height: 1.4;
}

/* STEP 2: Expanded logic block — absolute inside .logic-summary */
.approval-workflow .logic-expanded {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  max-height: 200px;
  overflow-y: auto;
  margin-top: var(--spacing-xs);
  display: none;
  padding: var(--spacing-sm);
}

.approval-workflow .logic-expanded.active { display: block; }

.approval-workflow .logic-text-detailed {
  background: var(--bg-sub-surface);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--text-secondary);
}

.approval-workflow .expand-icon {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  margin-left: auto;
}

.approval-workflow .expand-icon.rotated  { transform: rotate(180deg); }
.approval-workflow .expand-icon:hover    { color: var(--text-primary); }

.approval-workflow .expand-indicator {
  color: var(--color-info);
  font-size: var(--font-size-xs);
  font-weight: 500;
  margin-left: var(--spacing-xs);
  cursor: pointer;
}

.approval-workflow .expand-indicator:hover { text-decoration: underline; }


/* ── §27.11  STEP 2 — Action Button (workflow table) ────────────────────────── */

/*
  STEP 2 FIX: .action-btn must be position: relative so the
  ripple ::before pseudo-element and any absolute badge don't
  escape the button boundary.
*/
.approval-workflow .action-btn {
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs);
  transition: var(--transition-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  position: relative;        /* STEP 2: contains ripple + badge absolute elements */
  overflow: hidden;
}

.approval-workflow .action-btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: var(--color-info-bg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: var(--transition-surface);
}

.approval-workflow .action-btn:hover::before { width: 100%; height: 100%; }

.approval-workflow .action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--color-info);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Comment-state variants — token only */
.approval-workflow .action-btn.has-comments {
  color: var(--color-warning);
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  animation: workflow-btn-pulse 3s infinite;
}

.approval-workflow .action-btn.has-comments.resolved {
  color: var(--color-success);
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  animation: none;
}

.approval-workflow .action-btn.has-comments:hover         { transform: translateY(-1px) scale(1.05); }
.approval-workflow .action-btn.has-comments.resolved:hover { transform: translateY(-1px) scale(1.05); }

@keyframes workflow-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-warning-bg); }
  50%       { box-shadow: 0 0 0 4px transparent; }
}

/* Status dot in top-right corner of a cell */
.approval-workflow .status-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 8px;
  cursor: pointer;
  line-height: 1;
}

.approval-workflow .status-indicator.open     { color: var(--color-warning); }
.approval-workflow .status-indicator.resolved { color: var(--color-success); }
.approval-workflow .status-indicator:hover    { transform: scale(1.2); transition: transform var(--transition-fast); }


/* ── §27.12  STEP 1 — Action Section (below table) ──────────────────────────── */

/*
  STEP 1 FIX: The HTML uses .action-section + .action-section-content.
  §23.6's .action-section rule is for a different page; override here.
*/
.approval-workflow .action-section {
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  margin-top: 0;            /* reset §23.6's margin-top: var(--spacing-2xl) */
}

/* Top accent stripe */
.approval-workflow .action-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-info) 0%, var(--color-success) 100%);
}

.approval-workflow .action-section:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

.approval-workflow .action-section-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: var(--spacing-sm);
}

.approval-workflow .action-info  { flex: 1; }

.approval-workflow .action-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
}

.approval-workflow .action-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.approval-workflow .action-buttons {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}


/* ── §27.13  STEP 2 — Comment Side Panel (orphan containment) ───────────────── */

/*
  STEP 2 FIX: .comment-panel-overlay and .comment-panel have no
  CSS rules in app-components.css. They need full structural
  declarations to stop the panel from orphaning.
*/
.approval-workflow .comment-panel-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.approval-workflow .comment-panel-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Side panel — slides in from right */
.approval-workflow .comment-panel {
  width: 400px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--nav-height, 70px);
  right: -400px;
  height: calc(100vh - var(--nav-height, 70px));
  z-index: calc(var(--z-overlay) + 1);
  transition: right 0.3s ease;
  box-shadow: var(--shadow-lg);
}

.approval-workflow .comment-panel.active { right: 0; }

.approval-workflow .panel-header {
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

.approval-workflow .panel-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.approval-workflow .panel-subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

.approval-workflow .panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: var(--transition-surface);
}

.approval-workflow .panel-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.approval-workflow .panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;            /* STEP 2: prevents panel body from overflowing */
}

.approval-workflow .comment-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.approval-workflow .comment-thread::-webkit-scrollbar       { width: 5px; }
.approval-workflow .comment-thread::-webkit-scrollbar-track { background: transparent; }
.approval-workflow .comment-thread::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

.approval-workflow .comment-item {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  position: relative;       /* STEP 2: contains child absolute elements */
}

.approval-workflow .comment-item.open     { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.approval-workflow .comment-item.resolved { border-color: var(--color-success-border); background: var(--color-success-bg); }

.approval-workflow .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.approval-workflow .comment-author { font-weight: 600; color: var(--text-primary); font-size: var(--font-size-sm); }
.approval-workflow .comment-date   { font-size: var(--font-size-xs); color: var(--text-muted); }

.approval-workflow .comment-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.approval-workflow .comment-status.open     { color: var(--color-warning); }
.approval-workflow .comment-status.resolved { color: var(--color-success); }

.approval-workflow .comment-text {
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
}

.approval-workflow .comment-form {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  background: var(--bg-sub-surface);
  flex-shrink: 0;
}

.approval-workflow .comment-input {
  width: 100%;
  min-height: 80px;
  padding: var(--spacing-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  resize: vertical;
  transition: border-color var(--transition-fast);
  outline: none;
  box-sizing: border-box;
}

.approval-workflow .comment-input:focus       { border-color: var(--border-focus); }
.approval-workflow .comment-input::placeholder { color: var(--text-muted); }

.approval-workflow .comment-actions {
  margin-top: var(--spacing-sm);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

.approval-workflow .panel-footer {
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.approval-workflow .no-comments {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--spacing-xl);
}


/* ── §27.14  STEP 2 — Review Panel Overlay (right side) ─────────────────────── */

/*
  STEP 2 FIX: .review-panel-overlay and .review-panel are used
  in approval-workflow.html but have no targeted CSS.
*/
.approval-workflow .review-panel-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay, rgba(0,0,0,0.5));
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.approval-workflow .review-panel-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* The review panel itself (scoped differently from crf-review's .review-side-panel) */
.approval-workflow .review-panel-overlay .review-panel {
  width: 420px;
  max-width: 90vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--nav-height, 70px);
  right: 0;
  height: calc(100vh - var(--nav-height, 70px));
  z-index: calc(var(--z-overlay) + 1);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.approval-workflow .review-panel-header {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.approval-workflow .review-panel-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.approval-workflow .review-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: var(--transition-surface);
}

.approval-workflow .review-panel-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.approval-workflow .review-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.approval-workflow .review-section { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.approval-workflow .review-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
}

.approval-workflow .review-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.approval-workflow .review-timestamp {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.approval-workflow .review-items { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.approval-workflow .review-item {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  position: relative;
}

.approval-workflow .review-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.approval-workflow .review-item-title    { font-weight: 500; color: var(--text-primary); font-size: var(--font-size-sm); }
.approval-workflow .review-item-description { font-size: var(--font-size-xs); color: var(--text-secondary); margin: 0; }

.approval-workflow .review-item-status {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.approval-workflow .review-item-status.pending  { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); }
.approval-workflow .review-item-status.approved { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }

.approval-workflow .review-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.approval-workflow .btn-full { width: 100%; justify-content: center; }


/* ── §27.15  STEP 1 — Modal Overlay (workflow context) ──────────────────────── */

/*
  The generic .modal rule (§— line 1489) provides the overlay base.
  Scope these overrides to the workflow page so modal-content
  uses the design token colours, not legacy archive values.
*/
.approval-workflow .modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.approval-workflow .modal-header {
  padding: var(--spacing-lg);
  background: var(--bg-sub-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.approval-workflow .modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.approval-workflow .modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: var(--transition-surface);
}

.approval-workflow .modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.approval-workflow .modal-body   { padding: var(--spacing-lg); }

.approval-workflow .modal-footer {
  padding: var(--spacing-lg);
  background: var(--bg-sub-surface);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* Approval warning block */
.approval-workflow .approval-warning {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-warning-border);
  margin-bottom: var(--spacing-lg);
}

.approval-workflow .warning-icon { flex-shrink: 0; }

.approval-workflow .warning-content h4 {
  margin: 0 0 var(--spacing-sm);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.approval-workflow .warning-content p {
  margin: 0 0 var(--spacing-sm);
  color: var(--text-secondary);
}

.approval-workflow .warning-content ul {
  margin: var(--spacing-sm) 0;
  padding-left: var(--spacing-md);
  color: var(--text-secondary);
}

.approval-workflow .warning-text { font-weight: 600; color: var(--color-warning); }

.approval-workflow .external-approvals { margin-top: var(--spacing-lg); }

.approval-workflow .external-approvals h4 {
  margin: 0 0 var(--spacing-md);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.approval-workflow .approval-options {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* Export options */
.approval-workflow .export-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.approval-workflow .export-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-surface);
}

.approval-workflow .export-option:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.approval-workflow .export-option input[type="radio"] { accent-color: var(--border-focus); }

.approval-workflow .export-option label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  flex: 1;
}

.approval-workflow .export-info {
  padding: var(--spacing-md);
  background: var(--bg-sub-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.approval-workflow .export-filename       { font-size: var(--font-size-sm); color: var(--text-secondary); }
.approval-workflow .export-filename strong { color: var(--text-primary); }


/* ── §27.16  STEP 3 — Editable Cell Input (sanitized) ───────────────────────── */

.approval-workflow .cell-edit-input {
  width: 100%;
  padding: var(--spacing-xs);
  background: var(--bg-sub-surface);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: inherit;
  outline: none;
  box-sizing: border-box;
}

.approval-workflow .cell-edit-input:focus { box-shadow: 0 0 0 2px var(--color-info-bg); }

/* Cell click overlay + content z-layers (re-stated for workflow scope) */
.approval-workflow .cell-click-area {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: var(--z-base);
}

.approval-workflow .cell-content {
  position: relative;
  z-index: var(--z-raised);
  pointer-events: none;
}

.approval-workflow .text-muted { color: var(--text-muted); font-style: italic; }


/* ── §27.17  STEP 2 — Responsive Layout Adjustments ─────────────────────────── */

@media (max-width: 1200px) {
  .approval-workflow .workflow-main {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .approval-workflow .table-container {
    max-height: calc(100vh - 200px);
  }

  .approval-workflow .specifications-table {
    min-width: 1000px;
  }

  .approval-workflow .specifications-table th.question-col { width: 250px; }
  .approval-workflow .specifications-table th.logic-col    { width: 250px; }

  .approval-workflow .comment-panel {
    width: 100%;
    max-width: 600px;
  }
}

@media (max-width: 768px) {
  .approval-workflow .workflow-main {
    padding: var(--spacing-xs);
  }

  .approval-workflow .header-content {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .approval-workflow .protocol-meta {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .approval-workflow .header-actions {
    align-items: center;
    width: 100%;
  }

  .approval-workflow .comment-stats {
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
  }

  .approval-workflow .table-container {
    max-height: calc(100vh - 250px);
  }

  .approval-workflow .specifications-table {
    min-width: 800px;
    font-size: var(--font-size-xs);
  }

  .approval-workflow .specifications-table th.question-col { width: 200px; }
  .approval-workflow .specifications-table th.logic-col    { width: 180px; }

  .approval-workflow .specifications-section .section-header {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
  }

  .approval-workflow .action-section-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }

  .approval-workflow .action-buttons {
    width: 100%;
    justify-content: center;
  }
}

/* ── §27.18  STEP 3 — Print & Accessibility Overrides ───────────────────────── */

@media print {
  .approval-workflow .workflow-header { position: static; }
  .approval-workflow .action-buttons  { display: none; }
  .approval-workflow .comment-panel   { display: none; }
  .approval-workflow .review-panel-overlay { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .approval-workflow .action-btn,
  .approval-workflow .action-btn.has-comments,
  .approval-workflow .comment-panel { animation: none !important; transition: none !important; }
}

@media (prefers-contrast: high) {
  .approval-workflow .specifications-table { border-width: 2px; }
  .approval-workflow .table-container      { border-width: 2px; }
}

/* ── END §27 ───────────────────────────────────────────────────────────────────── */


/* ============================================================
   §27B  APPROVAL WORKFLOW — Structural Recovery Pass 5
         (Addendum — appended after §27 close)
   ============================================================
   SOURCE: _archive_css/approval-workflow.css
   TARGET: css/app-components.css (append-only)

   GAPS RESOLVED IN THIS PASS
   ───────────────────────────
   §27B.1  overflow:hidden on .specifications-section was
           preventing position:sticky on <th> from working;
           changed to overflow:visible so sticky headers
           escape the card boundary naturally.

   §27B.2  .btn-success was absent from app-components.css
           (only existed in archive with raw hex values).
           Added scoped rule with design-token colours.

   §27B.3  .cell-comment-indicator pulse dot — existed only
           in §26 archive context with rgba() hex. Sanitized
           and scoped under .approval-workflow.

   §27B.4  .comment-status in .panel-footer context (the
           status strip at panel bottom) conflicts with the
           comment-thread's .comment-status. Scoped override
           for the footer variant added.

   §27B.5  .specifications-section .section-header must NOT
           have overflow:hidden so floating select/dropdown
           children inside section controls can escape.

   HARD CONSTRAINTS
   ────────────────
   • Zero hardcoded hex or rgba() values — all tokens
   • No JS, theme.css, or main.css modifications
   • All rules scoped under .approval-workflow
   ============================================================ */


/* ── §27B.1  overflow fix — sticky <th> headers inside card ──────────────────── */

/*
  STEP 2 FIX (addendum): .specifications-section had overflow:hidden
  which clips the sticky table headers.  The scroll boundary is
  already established by .table-container (overflow-x/y: auto),
  so the outer card wrapper can safely use overflow:visible to let
  sticky positioning work correctly.
*/
.approval-workflow .specifications-section {
  overflow: visible;   /* overrides the overflow:hidden set in §27.3  */
}

/*
  The .section-header inside the card also must not clip dropdown
  children (e.g. the "Show Comments" toggle could gain a dropdown).
*/
.approval-workflow .specifications-section .section-header {
  overflow: visible;   /* dropdowns in section controls escape the bar */
}


/* ── §27B.2  .btn-success — approval confirm button ──────────────────────────── */

/*
  STEP 3 FIX: .btn-success is used by #confirmApproval in the modal
  footer.  The class does not exist in app-components.css at all —
  only in _archive_css/approval-workflow.css with hardcoded hex.
  Declare here with token colours, scoped to workflow page.
*/
.approval-workflow .btn-success {
  background: var(--color-success-bg);
  color:      var(--color-success);
  border:     1px solid var(--color-success-border);
  display:    inline-flex;
  align-items: center;
  gap:        var(--spacing-xs);
  padding:    var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size:  var(--font-size-sm);
  font-weight: 600;
  cursor:     pointer;
  white-space: nowrap;
  transition: var(--transition-surface);
}

.approval-workflow .btn-success:hover:not(:disabled) {
  background:   var(--color-success);
  color:        var(--bg-primary);
  border-color: var(--color-success);
  box-shadow:   var(--shadow-sm);
}

.approval-workflow .btn-success:disabled {
  opacity:        0.5;
  cursor:         not-allowed;
  pointer-events: none;
}


/* ── §27B.3  .cell-comment-indicator — corner pulse dot ──────────────────────── */

/*
  STEP 2 FIX (addendum): The JS dynamically adds .cell-comment-indicator
  to <td> elements that have open comments.  The ::after creates a
  small status dot in the top-right of the cell.
  Archive version used rgba() hex — replaced with design tokens.
*/
.approval-workflow .cell-comment-indicator {
  position: relative; /* ensures the ::after dot stays inside the cell  */
}

.approval-workflow .cell-comment-indicator::after {
  content:       '';
  position:      absolute;
  top:           -2px;
  right:         -2px;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--color-warning);
  border:        2px solid var(--bg-surface);
  box-shadow:    0 0 0 2px var(--color-warning-bg);
  animation:     workflow-pulse-warning 2s infinite;
}

.approval-workflow .cell-comment-indicator.resolved::after {
  background:  var(--color-success);
  box-shadow:  0 0 0 2px var(--color-success-bg);
  animation:   workflow-pulse-success 2s infinite;
}

@keyframes workflow-pulse-warning {
  0%   { box-shadow: 0 0 0 2px var(--color-warning-bg); }
  50%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 2px var(--color-warning-bg); }
}

@keyframes workflow-pulse-success {
  0%   { box-shadow: 0 0 0 2px var(--color-success-bg); }
  50%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 2px var(--color-success-bg); }
}


/* ── §27B.4  .panel-footer .comment-status — status strip at panel base ──────── */

/*
  STEP 4 FIX: The comment panel footer uses .comment-status to show
  "No active selection" text.  This is a different element from the
  per-comment .comment-status badges inside .comment-item.
  Scoped to .panel-footer to keep specificity clean.
*/
.approval-workflow .panel-footer .comment-status {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-sm);
  font-size:   var(--font-size-sm);
  color:       var(--text-secondary);
}

.approval-workflow .panel-footer .comment-status .status-text {
  color: var(--text-muted);
  font-style: italic;
}


/* ── §27B.5  Row-level border-left containment fix ───────────────────────────── */

/*
  STEP 2 FIX (addendum): Table rows with border-left set on the <tr>
  element can cause the 4px accent bar to render outside the visual
  table boundary on some browsers.  Applying box-sizing: border-box
  and ensuring the border renders inside the row containment context.
*/
.approval-workflow .specifications-table tbody tr {
  box-sizing: border-box;
}

.approval-workflow .specifications-table td:first-child {
  /* The left accent is carried on the <tr> border-left.  The first
     <td> must not have a conflicting left border that creates a gap. */
  border-left: none;
}


/* ── §27B.6  Sticky header z-index isolation ──────────────────────────────────── */

/*
  STEP 2 FIX (addendum): With overflow:visible now set on
  .specifications-section (§27B.1), the sticky <th> cells need a
  higher z-index than any absolute-positioned cell content (status
  dots, response-expanded dropdowns) so headers stay above them
  when scrolling.
*/
.approval-workflow .specifications-table th {
  z-index: var(--z-sticky, 20);  /* higher than --z-raised used by cells */
}

/*
  Response/logic expanded dropdowns must sit ABOVE the table body but
  BELOW sticky headers.  --z-dropdown is typically 50+ which is fine
  since --z-sticky is at 20 in the default token stack — but for clarity:
*/
.approval-workflow .response-expanded,
.approval-workflow .logic-expanded {
  z-index: var(--z-dropdown);   /* already set in §27.9/§27.10 — restated for clarity */
}


/* ── §27B.7  View-controls button containment ────────────────────────────────── */

/*
  STEP 4 FIX: The "Show Comments" toggle button in .view-controls is
  inside .section-controls inside .section-header.  Verify the flex
  container doesn't let the button overflow its track.
*/
.approval-workflow .view-controls {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-sm);
  flex-shrink: 0;  /* STEP 2: never shrink below button natural width */
}


/* ── §27B.8  Accessibility: reduced-motion guard for new animations ───────────── */

@media (prefers-reduced-motion: reduce) {
  .approval-workflow .cell-comment-indicator::after,
  .approval-workflow .cell-comment-indicator.resolved::after {
    animation: none !important;
  }
}


/* ── END §27B ──────────────────────────────────────────────────────────────────── */