/* =============================================================================
   Get Causality — Landing Refresh (Instrument direction)
   Light scientific-HUD surface. Mirrors Model Builder canvas chrome verbatim.
   ============================================================================= */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:root {
  --lr-ink: #0b1220;
  --lr-ink-muted: #5b6878;
  --lr-surface: #f4f6f9;
  --lr-card: #ffffff;
  --lr-line: rgba(11,18,32,0.08);
  --lr-line-soft: rgba(11,18,32,0.05);
  --lr-accent: #6d4dff;        /* blue-violet — Instrument source */
  --lr-accent-2: #8b5cf6;      /* secondary accent for gradients */
  --lr-grad-from: #3b82f6;     /* logo gradient: blue */
  --lr-grad-to: #8b5cf6;       /* logo gradient: violet */
  --lr-blue: #007bff;          /* platform blue (.builder-collab-btn, .count) */
  --lr-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lr-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lr-r-sm: 4px;
  --lr-r-md: 6px;
  --lr-r-lg: 8px;
  --lr-r-xl: 12px;
}

* { box-sizing: border-box; }

/* Honor [hidden] even on elements with explicit display: grid/flex */
[hidden] { display: none !important; }

body.lr-page {
  margin: 0;
  background: var(--lr-surface);
  color: var(--lr-ink);
  font-family: var(--lr-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Nav =================================================================== */
/* Anchor offset: when a user clicks a hash link in the sticky nav (e.g. #pricing,
   #faq) the browser scrolls so the section's top sits at scroll-padding-top,
   not at viewport y=0 — otherwise the nav covers the section heading. ~76px
   is the sticky-nav height (padding 20+20 + ~36 of content). */
html { scroll-padding-top: 76px; scroll-behavior: smooth; }

.lr-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  border-bottom: 1px solid var(--lr-line);
  background: var(--lr-card);
  /* Sticky so the user can jump between sections from any scroll position
     without having to scroll back to the top to access the nav. z-index 50
     stays above section chrome but below modals (which use 1000+). */
  position: sticky;
  top: 0;
  z-index: 50;
}

.lr-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;          /* gap between "Get" text node and .lr-logo-accent span — flex strips literal whitespace */
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--lr-ink);
  text-decoration: none;
  cursor: pointer;
}

/* Back-link breadcrumb — used on survey sub-pages (responses, contacts,
   builder-poll, builder-scheduling, results-poll, results-scheduling,
   studies) where the top-left position carries a "go up one level"
   breadcrumb instead of the platform brand. Style is intentional design-
   system idiom: mono uppercase eyebrow, surface-tonal pill, accent on
   hover. Reads as a deliberate navigation aid, not unstyled placeholder
   text. The platform brand wordmark stays on the parent (surveys.html)
   following the GitHub/Linear/Stripe Dashboard pattern of brand-on-parent
   + breadcrumb-on-children.  */
.lr-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--lr-r-md, 6px);
  font-family: var(--lr-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.lr-back-link:hover {
  color: var(--lr-accent);
  background: var(--lr-line-soft);
  border-color: var(--lr-line);
}
.lr-back-link i {
  font-size: 11px;
  color: inherit;
}

.lr-logo-accent {
  background-image: linear-gradient(135deg, var(--lr-grad-from), var(--lr-grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lr-nav-links {
  display: flex;
  gap: 28px;
  font-size: 13px;
  color: var(--lr-ink-muted);
  font-weight: 500;
}

.lr-nav-links a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.lr-nav-links a:hover {
  color: var(--lr-ink);
}

.lr-nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.lr-nav-actions .lr-link {
  color: var(--lr-ink-muted);
  font-weight: 500;
  text-decoration: none;
}

.lr-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--lr-ink);
  color: #fff;
  border: none;
  border-radius: var(--lr-r-md, 6px);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.lr-btn-dark:hover { background: #1a2536; }

/* ===== Hero ================================================================== */
.lr-hero {
  position: relative;
  padding: 72px 40px 48px;
  background: var(--lr-surface);
  z-index: 1;
}

.lr-hero-grid {
  display: grid;
  /* minmax(0, ...) instead of bare `1fr` — without it each column's intrinsic
     minimum is min-content, and the canvas card's Cytoscape inner div (which
     gets an inline `width: <px>` from cy.resize() during fullscreen) forces
     the right column to stay at that fullscreen pixel width even after the
     user exits fullscreen, breaking the page layout. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
}

.lr-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--lr-line);
  border-radius: 999px;
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  background: var(--lr-card);
  margin-bottom: 28px;
}

.lr-hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lr-accent);
}

.lr-headline {
  font-size: 60px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 24px;
  text-wrap: balance;
}

.lr-headline-em {
  color: var(--lr-ink-muted);
  font-style: italic;
  font-weight: 400;
}

.lr-headline-hi {
  background-image: linear-gradient(transparent 60%, rgba(109,77,255,0.20) 60%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.lr-subhead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--lr-ink-muted);
  max-width: 520px;
  margin: 0 0 36px;
  text-wrap: pretty;
}

.lr-cta-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.lr-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  background: var(--lr-ink);
  color: #fff;
  border: none;
  border-radius: var(--lr-r-md, 6px);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.lr-btn-primary:hover { background: #1a2536; color: #fff; }

.lr-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  background: var(--lr-card);
  color: var(--lr-ink);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.lr-btn-outline:hover { color: var(--lr-ink); }

.lr-btn-outline:hover { background: #f4f6f9; }

/* ===== Canvas card (mirrors Model Builder UI) =================================
   Real values pulled from website/frontend/src/modules/builder/css/
     builder-styles.css   .builder-toolbar / .builder-top-right /
                          .builder-bottom-right / .builder-menu-bar /
                          .builder-menu-btn / .builder-collab-btn /
                          .builder-icon-btn / .toolbar-btn / .toolbar-divider /
                          .builder-stats-display
     builder-matrix.css   .builder-view-tabs / .builder-view-tab
   ============================================================================= */

.lr-canvas-card {
  position: relative;
  /* Grid items have an implicit `min-width: auto` (= min-content), which lets
     a wide child (Cytoscape's inner <div> with inline `width: 1707px` set by
     cy.resize() during fullscreen) keep the grid column stuck at fullscreen
     width after fullscreen exits. Explicit zero unsticks it. */
  min-width: 0;
  min-height: 0;
}

/* Fullscreen mode — when the canvas-card itself is the fullscreen element,
   stretch its inner Graph and Matrix views to fill the viewport. Without
   these rules the children retain their fixed 640px height and the canvas
   only fills a strip at the top of the fullscreen rectangle. The vendor
   prefix branch covers Safari/older WebKit. */
.lr-canvas-card:fullscreen,
.lr-canvas-card:-webkit-full-screen {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.lr-canvas-card:fullscreen .lr-view-tabs,
.lr-canvas-card:-webkit-full-screen .lr-view-tabs {
  flex: 0 0 auto;
}
.lr-canvas-card:fullscreen .lr-cy-canvas,
.lr-canvas-card:-webkit-full-screen .lr-cy-canvas,
.lr-canvas-card:fullscreen .lr-cy-matrix,
.lr-canvas-card:-webkit-full-screen .lr-cy-matrix {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

/* Inside the fullscreen matrix view, the inner flex column (toolbar →
   hint → scroll table) needs to fill the card too — otherwise the table
   only takes its content height and leaves whitespace below it. */
.lr-canvas-card:fullscreen .lr-cy-matrix .lr-cy-matrix-scroll,
.lr-canvas-card:-webkit-full-screen .lr-cy-matrix .lr-cy-matrix-scroll {
  flex: 1 1 auto;
  min-height: 0;
}

/* Manila view tabs — sit ABOVE canvas in normal flow */
.lr-view-tabs {
  display: flex;
  gap: 2px;
  padding-left: 10px;
  position: relative;
  z-index: 2;
}

.lr-view-tab {
  padding: 7px 18px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #e8e8e8;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  outline: none;
  font-family: inherit;
  user-select: none;
  margin-bottom: -1px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lr-view-tab:hover { background: #f0f0f0; color: #555; }
.lr-view-tab:focus-visible { outline: 2px solid var(--lr-accent); outline-offset: -2px; }

.lr-view-tab.active {
  background: #ffffff;
  color: #333;
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  z-index: 2;
  cursor: default;
}

/* The canvas container itself (.cy-canvas) — border 1px #ccc, radius 0/4/4/4 */
.lr-cy-canvas {
  width: 100%;
  height: 640px;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 4px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* ── Adjacency-matrix view ────────────────────────────────────────────────
   Mirrors the platform's frontend/src/modules/builder/css/builder-matrix.css
   verbatim (same class names: bm-matrix-table, bm-matrix-rotated-header,
   bm-positive/bm-negative/bm-zero, etc.). Toggling Matrix tab in the demo
   shows the SAME matrix UI a logged-in user sees in the model builder. */
.lr-cy-matrix {
  width: 100%;
  height: 640px;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 4px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.lr-cy-matrix-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--lr-line);
  background: #f8f9fa;
  flex: 0 0 auto;
}

.lr-cy-matrix-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #495057;
}
.lr-cy-matrix-stats strong {
  color: var(--lr-blue);
  font-weight: 700;
  font-family: var(--lr-mono);
}
.lr-cy-matrix-stats-sep { color: #ced4da; margin: 0 6px; }

.lr-cy-matrix-actions {
  display: flex;
  gap: 6px;
}

.lr-cy-matrix-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--lr-r-sm, 4px);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid;
  background: #fff;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.lr-cy-matrix-btn i { font-size: 11px; }
.lr-cy-matrix-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lr-cy-matrix-btn-primary { color: #0d6efd; border-color: #0d6efd; }
.lr-cy-matrix-btn-primary:not(:disabled):hover { background: #0d6efd; color: #fff; }
.lr-cy-matrix-btn-danger  { color: #dc3545; border-color: #dc3545; }
.lr-cy-matrix-btn-danger:not(:disabled):hover  { background: #dc3545; color: #fff; }
.lr-cy-matrix-btn-info    { color: #0dcaf0; border-color: #0dcaf0; }
.lr-cy-matrix-btn-info:not(:disabled):hover    { background: #0dcaf0; color: #fff; }

.lr-cy-matrix-hint {
  flex: 0 0 auto;
  padding: 6px 16px;
  background: #fffbea;
  border-bottom: 1px solid #ffeaa7;
  color: #6c757d;
  font-size: 11px;
  font-style: italic;
}

.lr-cy-matrix-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Selected-row styling — matches platform builder-matrix.css. */
.bm-matrix-table tbody tr.bm-row-selected {
  background-color: rgba(13, 110, 253, 0.06);
}
.bm-matrix-table tbody tr.bm-row-selected .bm-matrix-checkbox-cell,
.bm-matrix-table tbody tr.bm-row-selected .bm-matrix-concept-cell {
  background-color: rgba(13, 110, 253, 0.08) !important;
}

.bm-matrix-row-check {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* === Platform builder-matrix.css ports (verbatim) ======================= */
.bm-matrix-table {
  font-size: 12px;
  border-collapse: collapse;
  margin: 0;
  white-space: nowrap;
}

.bm-matrix-table th,
.bm-matrix-table td {
  border: 1px solid #dee2e6;
  text-align: center;
  vertical-align: middle;
}

.bm-matrix-sticky-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8f9fa;
}

.bm-matrix-sticky-head th {
  background: #f8f9fa;
  font-weight: 600;
  padding: 4px 6px;
}

.bm-matrix-corner-cell {
  width: 36px;
  min-width: 36px;
  position: sticky;
  left: 0;
  z-index: 12;
  background: #f8f9fa !important;
}

.bm-matrix-concept-header {
  min-width: 120px;
  max-width: 200px;
  text-align: left !important;
  padding-left: 8px !important;
  position: sticky;
  left: 36px;
  z-index: 12;
  background: #f8f9fa !important;
}

/* Mirror of builder-matrix.css rotated-header rules — keep these two in sync.
   Headers rotated to FULL VERTICAL (-90°) per design feedback — easier to
   read than the previous -45° diagonal, and labels stay strictly within
   their column boundary (no diagonal overlap into adjacent columns).
   Header row height bumped to 180px to give the longest 25-char truncated
   names room to extend straight up from the bottom edge. */
.bm-matrix-rotated-header {
  height: 180px;
  min-width: 50px;
  max-width: 50px;
  padding: 0 !important;
  vertical-align: bottom !important;
  overflow: visible;
  position: relative;
}

.bm-matrix-rotated-text {
  position: absolute;
  bottom: 6px;
  left: 50%;
  /* Vertical labels: writing-mode: vertical-rl turns the text into a
     vertical column where each glyph reads top-to-bottom by default.
     transform: rotate(180deg) flips it so reading goes bottom-to-top —
     the standard adjacency-matrix convention. translateX(-50%) centers
     the (now narrow) column on the column's horizontal axis. This
     approach is cleaner than rotate(-90deg) + transform-origin math
     because the browser handles glyph kerning and font metrics natively
     in vertical writing mode. */
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
  /* max-height caps how far the label can extend upward (vertical text
     is bounded by max-height, not max-width). 165px keeps the longest
     names within the 180px header row; anything beyond gets ellipsised.
     The full label stays in the cell's title attribute
     (landing-refresh.js sets this) for hover lookup. */
  max-height: 165px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--lr-sans, inherit);
  font-size: 11px;
  font-weight: 500;
  color: var(--lr-ink);
  pointer-events: none;
}

.bm-matrix-checkbox-cell {
  width: 36px;
  min-width: 36px;
  padding: 2px !important;
  position: sticky;
  left: 0;
  z-index: 5;
  background: #fff;
}

.bm-matrix-checkbox {
  width: 14px;
  height: 14px;
  cursor: not-allowed;
  opacity: 0.4;
}

.bm-matrix-concept-cell {
  min-width: 120px;
  max-width: 200px;
  text-align: left !important;
  padding: 4px 8px !important;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  left: 36px;
  z-index: 5;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.1s;
}

.bm-matrix-concept-cell:hover {
  background-color: #e3f2fd !important;
}

.bm-matrix-concept-cell.editing {
  padding: 2px 4px !important;
}

.bm-matrix-concept-cell .bm-concept-input {
  width: 100%;
  border: 1px solid #80bdff;
  border-radius: var(--lr-r-sm, 4px);
  padding: 2px 4px;
  font-size: 12px;
  font-weight: 500;
  outline: none;
  box-shadow: 0 0 3px rgba(109, 77, 255, 0.25);
}

.bm-matrix-value-cell {
  min-width: 50px;
  max-width: 60px;
  padding: 3px 4px !important;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  font-size: 11px;
  cursor: text;
  transition: background-color 0.1s;
}

.bm-matrix-editable-cell:focus {
  background-color: #e3f2fd !important;
  outline: 2px solid #80bdff;
  outline-offset: -2px;
}

.bm-matrix-diagonal-cell {
  background-color: #f0f0f0 !important;
  color: #999;
  cursor: default;
}

.bm-positive { background-color: rgba(40, 167, 69, 0.08); color: #1e7e34; }
.bm-negative { background-color: rgba(220, 53, 69, 0.08); color: #bd2130; }
.bm-zero { color: #bbb; }

.bm-matrix-empty {
  padding: 24px;
  color: #6c757d;
  text-align: center;
  font-style: italic;
}

/* Floating zone shared chrome */
.lr-floating-panel {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* ZONE 4 — top-left menu bar (File / View / Analyze) */
.lr-zone-menu {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1000;
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  border-radius: var(--lr-r-lg, 8px);
}

.lr-menu-btn {
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: var(--lr-r-md, 6px);
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: inherit;
}

.lr-menu-btn:hover { background-color: rgba(0,0,0,0.05); }

.lr-menu-btn i { font-size: 13px; color: #666; }

/* Dropdown menus (View / Analyze / Edge Style) — mirrors builder pattern */
.lr-menu-wrap {
  position: relative;
  display: inline-block;
}

.lr-menu-chevron {
  font-size: 9px !important;
  margin-left: 2px;
  opacity: 0.6;
  transition: transform 0.15s ease;
}

.lr-menu-wrap.open .lr-menu-chevron { transform: rotate(180deg); }

.lr-menu-btn[aria-expanded="true"] {
  background-color: rgba(109, 77, 255, 0.1);
  color: var(--lr-accent, #6d4dff);
}

.lr-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--lr-r-lg, 8px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 1100;
  display: none;
  font-size: 13px;
}

.lr-menu-wrap.open > .lr-menu-dropdown { display: block; }

/* Right-rail edge-style dropdown opens to the LEFT of the button */
.lr-menu-wrap-left .lr-menu-dropdown-left {
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  min-width: 200px;
}

.lr-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: var(--lr-r-md, 6px);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: #333;
  text-align: left;
}

.lr-menu-item:hover { background-color: rgba(109, 77, 255, 0.08); }
.lr-menu-item i { color: #666; margin-right: 8px; flex-shrink: 0; }
.lr-menu-item:hover i { color: var(--lr-accent, #6d4dff); }

/* Stats display — separate pill anchored just below the File menu.
   Menu bar pill sits at top:16px and is ~32px tall, so top:54px puts
   the stats pill 6px below the menu — close enough to read as a unit
   without overlapping. Original "Nodes: N | Edges: N" format with
   cyan counts (matches reference design). z-index: 50 so the View /
   Analyze dropdown menus (z-index 1000) render ABOVE this pill when
   expanded — same with notification popups. */
.lr-stats-display {
  position: absolute;
  top: 54px;
  left: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--lr-r-md, 6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  /* Match the View / Analyze menu font (inherits system sans-serif) */
  font-family: inherit;
  font-weight: 500;
  color: #333;
  letter-spacing: normal;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.lr-stats-display .lr-count {
  color: #2196f3;          /* cyan/blue, matches reference screenshot */
  font-weight: 700;
}
.lr-stats-display .lr-sep {
  color: var(--lr-muted-2, #94a3b8);
  margin: 0 2px;
}

/* ZONE 2 — top-right cluster */
.lr-zone-top-right {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--lr-r-lg, 8px);
}

.lr-collab-btn {
  background: var(--lr-blue);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: var(--lr-r-md, 6px);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: inherit;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.lr-collab-btn:hover { filter: brightness(1.08); }
.lr-collab-btn:active { transform: scale(0.97); }

.lr-icon-btn {
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: var(--lr-r-md, 6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 14px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lr-icon-btn:hover { background-color: rgba(0,0,0,0.06); color: #222; }
.lr-icon-btn.active { background-color: rgba(109, 77, 255, 0.12); color: var(--lr-accent, #6d4dff); }

.lr-icon-btn.zoom-btn { font-size: 13px; }

/* ZONE 1 — right pill (BUILDING tools) */
.lr-zone-rail {
  position: absolute;
  top: 84px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border-radius: var(--lr-r-lg, 8px);
  gap: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

/* Focus Mode: Minimal — collapses the rail to just the focus button.
   Mirrors the platform Model Builder's `.builder-toolbar.collapsed`
   rule at builder-styles.css:378-390. JS toggles .lr-rail-collapsed at
   focus state 5 (landing-refresh.js toggleFocusMode). Without this
   rule the JS class was a no-op — the rail stayed fully visible at
   "Minimal" state, breaking parity with the live builder. */
.lr-zone-rail.lr-rail-collapsed > .lr-toolbar-btn:not([data-action="lr-focus-mode"]),
.lr-zone-rail.lr-rail-collapsed > .lr-toolbar-divider,
.lr-zone-rail.lr-rail-collapsed > hr,
.lr-zone-rail.lr-rail-collapsed > .lr-menu-wrap {
  display: none;
}
.lr-zone-rail.lr-rail-collapsed {
  padding: 5px;
  gap: 0;
}

.lr-toolbar-btn {
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 8px;
  margin: 2px 0;
  border-radius: var(--lr-r-md, 6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #333;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.lr-toolbar-btn:hover { background-color: rgba(109, 77, 255, 0.1); }
.lr-toolbar-btn:active { transform: scale(0.95); }

.lr-toolbar-btn.active {
  background-color: rgba(109, 77, 255, 0.2);
  border: 2px solid var(--lr-accent, #6d4dff);
  color: var(--lr-accent, #6d4dff);
  padding: 6px;
}

.lr-toolbar-btn[disabled] { color: #bbb; cursor: not-allowed; }
.lr-toolbar-btn[disabled]:hover { background-color: transparent; }

.lr-toolbar-divider {
  width: 30px;
  height: 1px;
  background-color: #ddd;
  margin: 8px 0;
  border: none;
}

/* ZONE 3 — bottom-right cluster */
.lr-zone-bottom-right {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  gap: 2px;
  align-items: center;
  padding: 4px 6px;
  border-radius: var(--lr-r-lg, 8px);
}

/* Reduced-motion: respect user preference for graph animation */
@media (prefers-reduced-motion: reduce) {
  .lr-cy-canvas { /* CausalGraph init checks media query and renders static */ }
}

/* ===== Stat strip (between hero and §02) ====================================== */
.lr-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--lr-line);
  border-bottom: 1px solid var(--lr-line);
  background: var(--lr-card);
  max-width: 1280px;
  margin: 0 auto;
}

.lr-stat {
  padding: 28px 32px;
  border-right: 1px solid var(--lr-line);
}

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

.lr-stat-num {
  font-family: var(--lr-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--lr-ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.lr-stat-lbl {
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
}

/* ===== Section base =========================================================== */
.lr-section {
  padding: 80px 40px;
  max-width: 1280px;
  margin: 0 auto;
}

.lr-section-alt {
  background: var(--lr-card);
  max-width: none;
  margin: 0;
}

.lr-section-alt > * { max-width: 1280px; margin-left: auto; margin-right: auto; }

.lr-section-eyebrow {
  font-family: var(--lr-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  margin-bottom: 18px;
}

.lr-section-title {
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 16px;
  text-wrap: balance;
}

.lr-section-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--lr-ink-muted);
  max-width: 760px;
  margin: 0 0 48px;
}

/* Pricing (§06) is an acquisition moment — center its eyebrow / title / sub
   to match the hero pattern and visually separate it from the left-aligned
   information sections (02, 03, 04, 05, 07, 08). The 760px max-width on
   .lr-section-sub combined with auto horizontal margin centers the sub
   block under the title. The pricing-toggle and pricing-grid below this
   header have their own centering and are unaffected. */
#pricing.lr-section .lr-section-eyebrow,
#pricing.lr-section .lr-section-title {
  text-align: center;
}
#pricing.lr-section .lr-section-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Card grids ============================================================= */
.lr-card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.lr-card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lr-card {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  padding: 28px 24px;
  background: var(--lr-card);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.lr-card:hover { border-color: rgba(11,18,32,0.20); transform: translateY(-2px); }

.lr-card-num {
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-accent);
  margin-bottom: 16px;
}

/* Font Awesome icon variant — used on use-case cards. Mirrors the platform
   model builder's `.demo-icon` (builder.html: fa-briefcase, fa-heart-pulse,
   fa-graduation-cap, etc.). Circular tinted background lifts the icon
   visually without competing with the card content. */
.lr-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--lr-r-lg, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59,130,246,0.10) 0%, rgba(139,92,246,0.10) 100%);
  color: var(--lr-blue);
  font-size: 22px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

/* Eyebrow tag above the use-case heading — small mono uppercase tag like
   "Hypothetical case study" or "Real research". */
.lr-card-eyebrow {
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-accent);
  margin: 0 0 6px !important;       /* override .lr-card p baseline */
  font-weight: 600;
}

/* Emoji icon variant — left in place for any non-use-case card that still
   uses the emoji glyph approach. Use-case cards use .lr-card-icon now. */
.lr-card-emoji {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 14px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.lr-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.lr-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lr-ink-muted);
  margin: 0;
}

/* Case-study stats panel — Sample / Methods / Finding rows. Two-column
   inside each row: small mono term on the left, definition on the right.
   Borders + subdued background match the platform's `.demo-stats` chrome. */
.lr-card-stats {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--lr-line-soft);
  border-radius: var(--lr-r-md, 6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lr-card-stats > div {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: baseline;
}

.lr-card-stats dt {
  font-family: var(--lr-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  font-weight: 600;
}

.lr-card-stats dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--lr-ink);
}

/* Use-case card variant — clickable button */
.lr-use-case {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: inherit;
}

.lr-use-case .lr-card-num { color: var(--lr-blue); }

.lr-card-cta {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lr-blue);
}

.lr-use-case:hover .lr-card-cta { text-decoration: underline; }

/* Use-case dialog.
   Force position: fixed + viewport-centered placement. The default
   <dialog> position is `absolute` (relative to the nearest positioned
   ancestor), so opening the dialog inside <section class="lr-section">
   was anchoring the centering math to that section — making the popup
   appear in the middle of the section's content rather than the viewport.
   With `position: fixed; inset: 0; margin: auto` the dialog always
   centers on the viewport regardless of which section the user clicked
   from. */
.lr-usecase-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  border-radius: var(--lr-r-md, 6px);
  padding: 0;
  background: var(--lr-card);
  box-shadow: 0 24px 64px rgba(11,18,32,0.30);
  max-width: 880px;
  width: calc(100% - 40px);
  max-height: 88vh;
  overflow: hidden;
  z-index: 1000;
}

.lr-usecase-dialog::backdrop {
  background: rgba(11,18,32,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lr-usecase-dialog-card {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}

.lr-usecase-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--lr-line);
}

.lr-usecase-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 4px 0 6px;
}

.lr-usecase-sub {
  font-size: 14px;
  color: var(--lr-ink-muted);
  margin: 0;
  max-width: 640px;
  line-height: 1.5;
}

.lr-usecase-body {
  padding: 24px 32px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lr-ink);
}

/* ── Live platform chart slot in the use-case dialog ────────────────────── */
.lr-uc-chart-wrap {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  background: var(--lr-line-soft);
}

.lr-uc-chart-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 12px;
}

.lr-uc-chart-tag {
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--lr-blue);
}

.lr-uc-chart-tag i { margin-right: 6px; }

.lr-uc-chart-source {
  font-family: var(--lr-mono);
  font-size: 10px;
  color: var(--lr-ink-muted);
  text-align: right;
}

/* Plotly mounts here — height keeps the layout stable while loading. */
.lr-uc-chart-slot {
  width: 100%;
  min-height: 320px;
}

/* Honest "chart pack pending" fallback. Shown when no JSON has been captured
   from the platform yet for this use case. */
.lr-uc-chart-fallback {
  text-align: center;
  padding: 36px 20px;
  color: var(--lr-ink-muted);
}

.lr-uc-chart-fallback i {
  font-size: 28px;
  color: var(--lr-line);
  margin-bottom: 10px;
  display: block;
}

.lr-uc-chart-fallback p {
  margin: 4px 0 !important;       /* override .lr-usecase-body p */
  font-size: 13px;
}

.lr-uc-chart-fallback-sub {
  font-size: 12px !important;
  max-width: 460px;
  margin: 6px auto 0 !important;
  line-height: 1.5;
}

.lr-usecase-body h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  margin: 24px 0 10px;
  border-bottom: 1px solid var(--lr-line-soft);
  padding-bottom: 6px;
}

.lr-usecase-body h3:first-child { margin-top: 0; }

.lr-usecase-body ul { padding-left: 22px; margin: 0 0 12px; }
.lr-usecase-body li { margin: 4px 0; }
.lr-usecase-body p { margin: 0 0 12px; }

.lr-uc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 8px 0;
}

.lr-uc-card {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  padding: 16px 18px;
  background: var(--lr-surface);
}

.lr-uc-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--lr-ink);
}

.lr-uc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
  font-size: 12px;
  color: var(--lr-ink-muted);
}

.lr-uc-stats div { padding: 6px 8px; background: #fff; border: 1px solid var(--lr-line-soft); border-radius: var(--lr-r-sm, 4px); text-align: center; }
.lr-uc-stats strong { display: block; font-size: 16px; color: var(--lr-blue); margin-bottom: 2px; }

.lr-uc-checks {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.lr-uc-checks li {
  padding: 8px 12px;
  background: var(--lr-surface);
  border: 1px solid var(--lr-line-soft);
  border-radius: var(--lr-r-sm, 4px);
  font-size: 13px;
  text-align: center;
}

.lr-usecase-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 32px 24px;
  border-top: 1px solid var(--lr-line);
}

body.lr-modal-open { overflow: hidden; }

/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 720px) {
  .lr-uc-grid-2 { grid-template-columns: 1fr; }
  .lr-usecase-head, .lr-usecase-body, .lr-usecase-foot { padding-left: 20px; padding-right: 20px; }
}

/* Info tip on pricing comparison features */
.feature-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  color: var(--lr-ink-muted);
  cursor: help;
  vertical-align: baseline;
  position: relative;
}

.feature-tip i { font-size: 12px; }

.feature-tip:hover, .feature-tip:focus { color: var(--lr-accent); }
.feature-tip:focus:not(:focus-visible) { outline: none; }
.feature-tip:focus-visible { outline: 2px solid var(--lr-accent); outline-offset: 2px; }

/* Tooltip portal styling (matches feature-tip-portal.js) */
.feature-tip-portal {
  position: fixed;
  z-index: 2000;
  max-width: 280px;
  padding: 8px 12px;
  background: var(--lr-ink);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  border-radius: var(--lr-r-md, 6px);
  box-shadow: 0 8px 24px rgba(11,18,32,0.20);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.feature-tip-portal.visible {
  opacity: 1;
  transform: translateY(0);
}

.feature-tip-portal-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--lr-ink);
  transform: rotate(45deg);
}

.feature-tip-portal.open-below .feature-tip-portal-arrow { top: -4px; left: 50%; margin-left: -4px; }
.feature-tip-portal.open-above .feature-tip-portal-arrow { bottom: -4px; left: 50%; margin-left: -4px; }

/* Toast notifications (canvas demo + locked features) */
.lr-toast-host {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.lr-toast {
  pointer-events: auto;
  padding: 10px 18px;
  border-radius: var(--lr-r-md, 6px);
  background: var(--lr-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(11,18,32,0.30);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 360px;
  text-align: center;
}

.lr-toast-in { opacity: 1; transform: translateY(0); }

.lr-toast-success { background: #166534; }
.lr-toast-warn    { background: #b45309; }
.lr-toast-info    { background: var(--lr-ink); }

@media (prefers-reduced-motion: reduce) {
  .lr-toast { transition: none; }
}

/* ===== Stage grid (§03 Live Demo) ============================================= */
.lr-stage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-card);
  overflow: hidden;
}

.lr-stage {
  padding: 32px 28px;
  border-right: 1px solid var(--lr-line);
  /* Now a <button> — neutralise default chrome and make the whole tile
     clickable so the dialog opens regardless of where the user clicks. */
  background: transparent;
  border-top: none;
  border-bottom: none;
  border-left: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  color: inherit;
  width: 100%;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.lr-stage:hover { background-color: rgba(124, 58, 237, 0.04); }
.lr-stage:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: -4px;
}

.lr-stage:last-child { border-right: none; }

/* CTA inside stage tiles — same treatment as use-case CTAs. */
.lr-stage-cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lr-blue);
}

/* ── Stage showcase shell ─────────────────────────────────────────────────── */
.lr-stage-showcase {
  margin: 0 0 24px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  background: #fff;
  overflow: hidden;
  min-height: 400px;
}
.lr-stage-pending {
  padding: 60px 32px;
  text-align: center;
  color: var(--lr-ink-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lr-stage-pending > i {
  font-size: 32px;
  color: var(--lr-accent, #2563eb);
  opacity: 0.55;
}
.lr-stage-pending p { margin: 0; max-width: 56ch; }
.lr-stage-pending-sub { font-size: 13px; }
.lr-stage-pending .lr-btn-primary { margin-top: 6px; }
.lr-stage-pending-wrap {
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  color: var(--lr-ink-muted);
  font-size: 13px;
}
.lr-stage-pending-wrap::before {
  content: 'Loading…';
}

/* === Stage 01 — Concept Design (FCM Wizard interaction-matrix mirror) ===== */
.lr-cd-wrap {
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 14px;
  background: #fff;
}
.lr-cd-stem {
  font-size: 14px;
  line-height: 1.45;
  color: var(--lr-ink);
  background: #f8f9fa;
  border-left: 3px solid var(--lr-blue, #007bff);
  padding: 10px 14px;
  border-radius: var(--lr-r-sm, 4px);
}
.lr-cd-table-wrap { overflow-x: auto; }
.lr-cd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--lr-sans);
}
.lr-cd-table th, .lr-cd-table td {
  border: 1px solid var(--lr-line);
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
}
.lr-cd-th, .lr-cd-th-row {
  background: #f1f3f5;
  font-weight: 600;
  font-size: 11px;
  color: var(--lr-ink-muted);
  white-space: nowrap;
}
.lr-cd-th-row { text-align: left; padding-left: 10px; min-width: 200px; }
.lr-cd-th-mid { background: #e9ecef; }
.lr-cd-td-row {
  text-align: left;
  padding-left: 10px;
  font-weight: 500;
  background: #fafbfc;
}
.lr-cd-td-mid { background: #fafbfc; }
.lr-cd-radio {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid #adb5bd;
  background: #fff;
}
.lr-cd-radio-on {
  border-color: var(--lr-blue, #007bff);
  background: var(--lr-blue, #007bff);
  box-shadow: inset 0 0 0 3px #fff;
}
.lr-cd-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--lr-ink-muted);
  padding-top: 6px;
}

/* === Stage 02 — Survey & Collection (response monitor mirror) ============== */
.lr-sc-wrap {
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 18px;
  background: #fff;
}
.lr-sc-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.lr-sc-tile {
  background: #f8f9fa;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.lr-sc-tile-v {
  font-size: 22px; font-weight: 700;
  color: var(--lr-ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.lr-sc-tile-l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lr-ink-muted);
  font-weight: 600;
}
.lr-sc-tile-sub {
  font-size: 12px;
  color: var(--lr-ink-muted);
}
.lr-sc-strata-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--lr-ink-muted);
  border-bottom: 1px solid var(--lr-line);
  padding-bottom: 6px;
}
.lr-sc-bars {
  display: flex; flex-direction: column;
  gap: 10px;
}
.lr-sc-bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 130px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.lr-sc-bar-label {
  color: var(--lr-ink);
  font-weight: 500;
}
.lr-sc-bar-track {
  height: 12px;
  background: #e9ecef;
  border-radius: var(--lr-r-md, 6px);
  overflow: hidden;
}
.lr-sc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lr-grad-from, #3b82f6), var(--lr-grad-to, #8b5cf6));
  border-radius: var(--lr-r-md, 6px);
}
.lr-sc-bar-amber { background: linear-gradient(90deg, #d97706, #f59e0b); }
.lr-sc-bar-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--lr-ink-muted);
}
.lr-sc-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--lr-ink-muted);
  padding-top: 6px;
  border-top: 1px solid var(--lr-line);
}
.lr-sc-foot i { color: #059669; }

/* ===== Intervention Optimizer (live-demo simulator) ========================== */
.lr-optimizer {
  margin-top: 32px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  background: var(--lr-card);
  overflow: hidden;
}

.lr-optimizer-head {
  padding: 24px 32px 20px;
  border-bottom: 1px solid var(--lr-line);
  background: var(--lr-surface);
}

.lr-optimizer-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 4px 0 6px;
}

.lr-optimizer-sub {
  font-size: 14px;
  color: var(--lr-ink-muted);
  margin: 0;
  max-width: 720px;
  line-height: 1.5;
}

.lr-optimizer-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
  padding: 28px 32px;
}

/* Sliders */
.lr-intervention-sliders { display: flex; flex-direction: column; gap: 22px; }

.lr-intervention-group { display: flex; flex-direction: column; gap: 8px; }

.lr-intervention-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.lr-intervention-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--lr-ink);
}

.lr-intervention-value {
  font-family: var(--lr-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--lr-accent);
}

.lr-intervention-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--lr-mono);
  font-size: 10px;
  color: var(--lr-ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Range slider — webkit + firefox */
.lr-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--lr-line);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  margin: 4px 0;
}
.lr-range:focus-visible { outline: 2px solid var(--lr-accent); outline-offset: 2px; }

.lr-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--lr-accent);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(11,18,32,0.20);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.lr-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.lr-range::-webkit-slider-thumb:active { transform: scale(0.95); }

.lr-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--lr-accent);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(11,18,32,0.20);
  cursor: pointer;
}

.lr-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(109,77,255,0.20);
}

/* Impact readout */
.lr-impact-readout {
  background: var(--lr-surface);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  padding: 20px;
  align-self: start;
}

.lr-impact-readout-title {
  font-family: var(--lr-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  margin: 0 0 14px;
  font-weight: 600;
}

/* Subtitle on the readout title — "translated to 7-point Likert shift". */
.lr-impact-readout-sub {
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--lr-ink-muted);
  margin-left: 4px;
  opacity: 0.8;
}

.lr-impact-row {
  display: grid;
  /* Wider value column (160px, was 130px) to fit the longest shift text the
     readout can produce — "Baseline → Str. Incr." renders ~150px at 11px
     mono. Previously the JS-injected shift overflowed leftward into the bar
     because the column was too narrow and the value was text-align: right
     with no overflow clip. */
  grid-template-columns: 130px 1fr 160px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.lr-impact-row:last-child { margin-bottom: 0; }

.lr-impact-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--lr-ink);
}

.lr-impact-track {
  height: 8px;
  background: var(--lr-line);
  border-radius: 999px;
  overflow: hidden;
}

.lr-impact-fill {
  height: 100%;
  width: 50%;
  border-radius: 999px;
  transition: width 0.18s ease, background 0.18s ease;
}

.lr-impact-fill-pos { background: var(--lr-ok, #22c55e); }
.lr-impact-fill-neg { background: var(--lr-neg, #ef4444); }

.lr-impact-value {
  font-family: var(--lr-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--lr-ink);
  text-align: right;
  /* Clip any shift text that's still too wide for the column instead of
     letting it overflow leftward into the bar. The two children stack
     vertically; each can ellipsize independently. */
  overflow: hidden;
  min-width: 0;
  /* Stack the raw FCM value (muted, top) over the survey-scale shift (bold,
     bottom). Mirrors how the platform's Intervention Optimizer surfaces the
     scale translation right beneath the raw activation. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  gap: 3px;
}

.lr-impact-value .lr-impact-raw {
  font-size: 11px;
  font-weight: 600;
  color: var(--lr-ink-muted);
  font-variant-numeric: tabular-nums;
}

.lr-impact-value .lr-impact-shift {
  font-family: var(--lr-sans);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.lr-impact-value .lr-impact-before {
  color: var(--lr-ink-muted);
}

.lr-impact-value .lr-impact-after {
  color: var(--lr-ink);
  font-weight: 700;
}

.lr-impact-value .lr-impact-arrow {
  font-size: 9px;
  color: var(--lr-blue);
}

.lr-impact-value .lr-impact-no-shift {
  font-family: var(--lr-sans);
  font-size: 11px;
  color: var(--lr-ink-muted);
  font-style: italic;
}

/* AI recommendation card */
.lr-ai-recommendation {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 32px 24px;
  border-top: 1px solid var(--lr-line);
  background: linear-gradient(180deg, rgba(109,77,255,0.04) 0%, rgba(124,58,237,0.00) 100%);
}

.lr-ai-recommendation-label {
  font-family: var(--lr-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-accent);
  margin-bottom: 6px;
  font-weight: 600;
}

.lr-ai-recommendation-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lr-ink);
  margin: 0;
}

/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 900px) {
  .lr-optimizer-grid { grid-template-columns: 1fr; gap: 24px; }
  .lr-ai-recommendation { grid-template-columns: 1fr; }
  /* Keep the value column wide enough for the shift text even on narrower
     viewports — the bar shrinks instead. 50px was way too narrow and made
     "Baseline → Str. Incr." overlap the bar. */
  .lr-impact-row { grid-template-columns: 100px 1fr 150px; }
}

/* ===== Pricing ================================================================ */
.lr-pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--lr-line);
  border-radius: 999px;
  background: var(--lr-card);
  margin-bottom: 32px;
}

.lr-pt-btn {
  padding: 8px 18px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lr-ink-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}

.lr-pt-btn:hover { color: var(--lr-ink); }

.lr-pt-btn.active {
  background: var(--lr-ink);
  color: #fff;
}

.lr-pt-save {
  font-family: var(--lr-mono);
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.7;
}

.lr-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Dashboard variant — feedback panel is narrower than the landing page,
   so use auto-fit instead of fixed 4 columns. Falls to 3 / 2 / 1 cols as
   the available width shrinks, no horizontal scroll. */
.lr-pricing-grid-dashboard {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 16px;
  margin-bottom: 24px;
}

.lr-pricing-card {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  padding: 24px 20px;
  background: var(--lr-card);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.lr-pricing-card:hover { border-color: rgba(11,18,32,0.20); transform: translateY(-2px); }

.lr-pricing-card-featured {
  border-color: var(--lr-accent);
  border-width: 1.5px;
  box-shadow: 0 8px 32px rgba(109,77,255,0.10);
}

.lr-tier-tag {
  font-family: var(--lr-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  margin-bottom: 14px;
}

.lr-pricing-card-featured .lr-tier-tag { color: var(--lr-accent); }

.lr-pricing-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.lr-price {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 8px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.lr-price-monthly { display: inline; }
.lr-price-annual { display: none; }
.lr-pricing-grid.is-annual .lr-price-monthly { display: none; }
.lr-pricing-grid.is-annual .lr-price-annual { display: inline; }

.lr-price-period {
  font-size: 13px;
  font-weight: 400;
  color: var(--lr-ink-muted);
}

.lr-tier-desc {
  font-size: 13px;
  color: var(--lr-ink-muted);
  margin: 0 0 16px;
  min-height: 36px;
}

.lr-tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.55;
  flex: 1;
}

.lr-tier-features li {
  padding: 4px 0;
  color: var(--lr-ink);
  border-bottom: 1px solid var(--lr-line-soft);
}

.lr-tier-features li:last-child { border-bottom: none; }

.lr-tier-features li.lr-tier-mute {
  color: rgba(11,18,32,0.30);
  text-decoration: line-through;
  text-decoration-color: rgba(11,18,32,0.20);
}

.lr-tier-cta {
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: block;
}

/* Comparison table */
.lr-comparison-wrap { margin-top: 24px; }

.lr-comparison-note {
  font-size: 13px;
  color: var(--lr-ink-muted);
  margin: 0 0 16px;
}

.lr-comparison-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-card);
}

.lr-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lr-comparison-table th,
.lr-comparison-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--lr-line-soft);
  vertical-align: top;
}

.lr-comparison-table thead tr:not(.lr-tier-group-row) th {
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  font-weight: 500;
  background: var(--lr-surface);
}

.lr-tier-group-row th {
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--lr-line);
}

.lr-tg-academic { background: #eef4ff; color: #1e40af; }
.lr-tg-commercial { background: #f0fdf4; color: #166534; }
.lr-tg-enterprise { background: #fef3c7; color: #854d0e; }

.lr-comparison-table tbody td:first-child { font-weight: 500; color: var(--lr-ink); }
.lr-comparison-table tbody td { color: var(--lr-ink-muted); }
.lr-comparison-table tbody tr:hover { background: var(--lr-surface); }

/* ===== Why FCM — method comparison (§05) ===================================
   Replaces the old "What is Causal Modeling?" §06. Four comparison cards in
   a 2×2 grid with a closing thesis line. Each card pairs a methodology the
   audience already knows with a one-paragraph framing of what FCM adds. */
.lr-method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 32px 0;
}

.lr-method-card {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  padding: 24px 28px;
  background: var(--lr-card);
  transition: border-color 0.2s ease;
}

.lr-method-card:hover { border-color: rgba(11,18,32,0.18); }

.lr-method-tag {
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-accent);
  margin-bottom: 6px;
}

.lr-method-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--lr-ink);
}

.lr-method-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lr-ink-muted);
  margin: 0;
}

.lr-method-thesis {
  max-width: 760px;
  margin: 32px auto 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--lr-ink);
  text-align: center;
  padding: 24px 28px;
  border-top: 1px solid var(--lr-line);
  border-bottom: 1px solid var(--lr-line);
}

.lr-method-thesis strong {
  color: var(--lr-ink);
}

/* ===== What is Causal Modeling (§06) — DEPRECATED ============================
   Section was repurposed; styles kept for now in case any other section
   reuses these classes. Safe to remove on next CSS sweep. */
.lr-cm-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: start;
}

.lr-cm-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--lr-ink);
  margin: 0 0 18px;
}

.lr-cm-copy p:last-of-type { margin-bottom: 28px; }

.lr-mini-fcm-card {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-card);
  overflow: hidden;
}

.lr-mini-fcm-tabs {
  padding: 10px 14px;
  border-bottom: 1px solid var(--lr-line);
  background: var(--lr-card);
  font-family: var(--lr-mono);
  font-size: 11px;
  color: var(--lr-ink-muted);
  letter-spacing: 0.06em;
}

.lr-mini-fcm-tab.active { color: var(--lr-ink); font-weight: 600; }

.lr-mini-fcm-canvas {
  width: 100%;
  height: 360px;
  background: #fff;
}

.lr-mini-fcm-legend {
  display: flex;
  gap: 18px;
  padding: 10px 14px;
  border-top: 1px solid var(--lr-line);
  background: var(--lr-card);
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
}

.lr-leg-dot {
  display: inline-block;
  width: 14px;
  height: 2px;
  vertical-align: middle;
  margin-right: 4px;
}

.lr-leg-pos { background: var(--lr-pos, #3498db); }
.lr-leg-neg { background: var(--lr-neg, #ff6961); }

/* ===== FAQ accordion ========================================================== */
.lr-faq {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-card);
  overflow: hidden;
}

.lr-faq-item {
  border-bottom: 1px solid var(--lr-line);
}

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

.lr-faq-item summary {
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--lr-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s ease;
}

.lr-faq-item summary::-webkit-details-marker { display: none; }

.lr-faq-item summary:hover { background: rgba(11,18,32,0.02); }

.lr-faq-item summary::after {
  content: "+";
  font-family: var(--lr-mono);
  font-size: 18px;
  color: var(--lr-accent);
  font-weight: 400;
  transition: transform 0.2s ease;
}

.lr-faq-item[open] summary::after {
  content: "−";
}

.lr-faq-item[open] summary {
  background: rgba(109,77,255,0.04);
}

.lr-faq-item p {
  padding: 0 22px 20px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lr-ink-muted);
}

.lr-faq-item a { color: var(--lr-accent); text-decoration: none; }
.lr-faq-item a:hover { text-decoration: underline; }

/* ===== Waitlist form ========================================================== */
.lr-waitlist-card {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  padding: 36px;
  background: var(--lr-card);
}

.lr-waitlist-form { display: flex; flex-direction: column; gap: 16px; }

.lr-form-row { display: flex; flex-direction: column; gap: 6px; }

.lr-form-label {
  font-family: var(--lr-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
}

.lr-form-optional {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  font-size: 11px;
}

.lr-form-input {
  /* Width 100% so the input fills its row regardless of how many wrapper
     elements sit between it and the .lr-form-row flex container. Without
     this, an <input> inside .password-wrapper (or any non-flex wrapper)
     defaults to its UA size, making the password field visibly shorter
     than the email field above it. */
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  color: var(--lr-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lr-form-input:focus {
  outline: none;
  border-color: var(--lr-accent);
  box-shadow: 0 0 0 3px rgba(109,77,255,0.15);
}

textarea.lr-form-input { resize: vertical; min-height: 80px; }

.lr-form-submit {
  margin-top: 8px;
  padding: 14px 24px;
  font-size: 14px;
}

/* ===== Footer ================================================================= */
.lr-footer {
  border-top: 1px solid var(--lr-line);
  padding: 64px 40px 32px;
  background: var(--lr-card);
  max-width: none;
}

.lr-footer > .lr-section-eyebrow {
  max-width: 1280px;
  margin: 0 auto 24px;
}

.lr-contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto 48px;
}

/* 3-card variant — for pages where we don't show Investor contact (enterprise.html) */
.lr-contact-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.lr-contact-card {
  display: block;
  padding: 24px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  text-decoration: none;
  color: inherit;
  background: var(--lr-card);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.lr-contact-card:hover { border-color: var(--lr-accent); transform: translateY(-2px); }

.lr-contact-label {
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  margin-bottom: 8px;
}

.lr-contact-addr {
  font-size: 16px;
  font-weight: 600;
  color: var(--lr-ink);
  margin-bottom: 8px;
}

.lr-contact-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lr-ink-muted);
  margin: 0;
}

.lr-footer-fineprint {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--lr-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--lr-mono);
  font-size: 11px;
  color: var(--lr-ink-muted);
  letter-spacing: 0.04em;
}

.lr-footer-fineprint a {
  color: inherit;
  text-decoration: none;
}

.lr-footer-fineprint a:hover { color: var(--lr-ink); }

/* ===== Page-level patterns (shared across non-landing pages) ================= */

/* Compact hero for inner pages — about, enterprise, etc. */
.lr-page-hero {
  padding: 56px 40px;
  border-bottom: 1px solid var(--lr-line);
  background: var(--lr-card);
  position: relative;
  z-index: 1;
}

/* Compact page header — used on admin, account, surveys pages where the
   nav already tells the user which page they're on, so a giant hero block
   is redundant. Keeps the H1 for a11y/SEO at 24px (vs the hero's 48px),
   plus a small ? help tooltip for the descriptive blurb. Saves ~100px
   of vertical space per page. Optional .lr-page-actions slot on the right
   for primary CTA buttons (e.g. "+ Create survey"). */
.lr-page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lr-line);
}

/* Narrow variant — used on respondent-rights.html for centered single-card pages */
.lr-page-header-narrow {
  max-width: 540px;
  margin: 0 auto 24px;
}

/* Sub-copy under a page-header H1 (used on Figure Editor, etc.) */
.lr-page-sub {
  font-size: 13px;
  color: var(--lr-ink-muted);
  margin: 6px 0 0;
  line-height: 1.5;
  max-width: 720px;
}

/* ===== Page / Row eyebrow (mono uppercase muted label) =====================
   Reusable label pattern for module page headers ("MODULE · MULTI-MODEL"),
   side-panel step headers ("STEP 01"), filter rows ("VIEW MODEL"), etc.
   Aliased to .mm-page-eyebrow / .mm-row-eyebrow / .mm-step-header for the
   multimodel module's local copies — keeps both class names working. */
.lr-page-eyebrow,
.mm-page-eyebrow {
  font-family: var(--lr-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-muted-2);
  margin-bottom: 6px;
  display: block;
}

.lr-row-eyebrow,
.mm-row-eyebrow {
  font-family: var(--lr-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-muted-2);
  white-space: nowrap;
  margin-right: 4px;
}

/* Right-aligned mono counter — "0 MODELS LOADED", "12 ROWS", etc. */
.lr-meta-counter,
.mm-models-loaded-counter {
  font-family: var(--lr-mono);
  font-size: 10px;
  color: var(--lr-muted-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: auto;
  white-space: nowrap;
}

/* Tonal button — secondary action (Tour, Export, Visual settings).
   Use inside .lr-page-actions or any control row. */
.lr-btn-tonal,
.mm-btn-tonal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 5px);
  background: var(--lr-card);
  font-family: var(--lr-sans);
  font-size: 13px;
  color: var(--lr-ink);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.lr-btn-tonal:hover,
.mm-btn-tonal:hover {
  background: #fff;
  border-color: rgba(11, 18, 32, 0.20);
  color: var(--lr-ink);
}
.lr-btn-tonal i,
.mm-btn-tonal i {
  color: var(--lr-muted-2);
  font-size: 12px;
}

/* ===== Empty-state frame (refresh pattern) ================================
   The full empty-state used inside an analysis tab pane: framed card with
   neutral gray-circle glyph + ink heading + sub-copy + action list with
   bolded keywords. Distinct from the simpler .lr-empty-state above (which
   is the centered single-card pattern used by the LLM tab placeholder). */
.lr-empty-frame,
.mm-empty-frame {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-lg, 8px);
  background: var(--lr-card);
  padding: 56px 32px;
  margin-top: 8px;
}

.lr-empty-stack,
.mm-empty-stack {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lr-empty-glyph,
.mm-empty-glyph {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lr-line-soft, rgba(11, 18, 32, 0.04));
  color: var(--lr-muted-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.lr-empty-stack h3,
.mm-empty-stack h3 {
  font-family: var(--lr-display, var(--lr-sans));
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.012em;
  color: var(--lr-ink);
}

.lr-empty-stack > p,
.mm-empty-stack > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lr-ink-muted);
}

.lr-empty-actions,
.mm-empty-actions {
  list-style: none;
  margin: 8px 0 0;
  padding: 14px 16px;
  background: var(--lr-surface);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 380px;
}

.lr-empty-actions li,
.mm-empty-actions li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  font-size: 13px;
  color: var(--lr-ink-muted);
  line-height: 1.5;
  align-items: start;
}

.lr-empty-actions li i,
.mm-empty-actions li i {
  color: var(--lr-accent);
  font-size: 11px;
  margin-top: 4px;
}

.lr-empty-actions li b,
.mm-empty-actions li b {
  color: var(--lr-ink);
  font-weight: 600;
}

/* Dark-mode for the empty-frame component */
body.dark-mode .lr-empty-frame,
html.dark-mode .lr-empty-frame,
body.dark-mode .mm-empty-frame,
html.dark-mode .mm-empty-frame {
  background: var(--lr-surface-2);
}
body.dark-mode .lr-empty-glyph,
html.dark-mode .lr-empty-glyph,
body.dark-mode .mm-empty-glyph,
html.dark-mode .mm-empty-glyph {
  background: rgba(255, 255, 255, 0.06);
  color: var(--lr-muted-2);
}
body.dark-mode .lr-empty-actions,
html.dark-mode .lr-empty-actions,
body.dark-mode .mm-empty-actions,
html.dark-mode .mm-empty-actions {
  background: var(--lr-surface-0);
}

/* ===== Empty state ========================================================== */
/* Used by dashboard tabs that haven't loaded a module yet (e.g. LLM FCM Builder
   coming-soon placeholder). Centered icon + title + subcopy. */
.lr-empty-state {
  max-width: 480px;
  margin: 64px auto;
  padding: 40px 24px;
  text-align: center;
  background: var(--lr-card);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-xl, 12px);
  box-shadow: var(--lr-shadow-card);
}

.lr-empty-state-icon {
  font-size: 2.5rem;
  color: var(--lr-accent);
  margin-bottom: 16px;
  display: inline-block;
}

.lr-empty-state-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--lr-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.lr-empty-state-sub {
  font-size: 14px;
  color: var(--lr-ink-muted);
  margin: 0 0 12px;
  line-height: 1.55;
}

.lr-empty-state-meta {
  font-size: 13px;
  color: var(--lr-muted-2);
  margin: 16px 0 0;
}

.lr-empty-state-meta a {
  color: var(--lr-accent);
  text-decoration: none;
  font-weight: 500;
}

.lr-empty-state-meta a:hover {
  text-decoration: underline;
}

.lr-page-header h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--lr-ink);
  margin: 0;
  line-height: 1.2;
}

.lr-page-header-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Page-level lead paragraph that follows .lr-page-header. Slightly larger
   than body text, muted color — gives readers a one-paragraph summary of
   what this tab does without dominating the layout. */
.lr-page-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--lr-ink-muted);
  margin: 0 0 24px;
  max-width: 720px;
}

/* Section heading inside a tab — sits BELOW the page header (h1) but ABOVE
   a group of cards. Smaller than h1 (page title), larger than h3 (card
   title). Provides clear hierarchy: page → section → card. */
.lr-section-heading {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lr-ink);
  margin: 12px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Step-card variant — used for "1. Do this" / "2. Then that" walkthroughs
   on Beta Resources / onboarding pages. Centered text, looser padding,
   the .lr-card-num "STEP 01" eyebrow stays in accent color. */
.lr-card-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lr-card-step .lr-card-num { margin-bottom: 12px; }
.lr-card-step h3 { margin-top: 4px; }

/* Bullet list inside .lr-card — strips browser default list padding and
   tightens bullet spacing so it sits flush with the card body. */
.lr-card-list {
  margin: 8px 0 0;
  padding-left: 18px;
}
.lr-card-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lr-ink-muted);
  margin-bottom: 6px;
}
.lr-card-list li:last-child { margin-bottom: 0; }

/* ============================================================================
   FEEDBACK PANEL — Help & Support tab outer chrome
   Replaces the old AdminLTE .card.card-primary.card-outline.card-tabs wrapper
   with platform-aligned chrome (light border, rounded corners, no thick top
   accent stripe). The Bootstrap nav-tabs INSIDE keep their existing classes
   so sub-tab switching behavior is unchanged — only visual chrome differs.
   ============================================================================ */
.lr-feedback-panel {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  background: var(--lr-card, #fff);
  overflow: hidden;
}

.lr-feedback-tabs-header {
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--lr-line);
  background: var(--lr-bg-soft, #f4f6f9);
}

.lr-feedback-tabs-header .nav-tabs {
  border-bottom: none;
  margin: 0;
}

.lr-feedback-tabs-header .nav-link {
  color: var(--lr-ink-muted);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--lr-r-sm, 4px) var(--lr-r-sm, 4px) 0 0;
  padding: 8px 14px;
  background: transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.lr-feedback-tabs-header .nav-link:hover {
  color: var(--lr-ink);
  background: rgba(11, 18, 32, 0.03);
}

/* Higher specificity (.lr-feedback-panel + .nav-tabs + .nav-link.active = 4
   classes) so this beats the leaky .nav-tabs .nav-link.active rule in
   multimodel-module.css that hard-codes rgb(25, 118, 210) blue. */
.lr-feedback-panel .nav-tabs .nav-link.active,
.lr-feedback-tabs-header .nav-link.active {
  color: var(--lr-ink);
  background: var(--lr-card, #fff);
  border-color: var(--lr-line) var(--lr-line) var(--lr-card, #fff);
  margin-bottom: -1px;
}

.lr-feedback-tabs-body {
  padding: 24px;
}

/* Style the inner .card.shadow-sm cards inside the feedback panel to match
   .lr-card chrome (instead of the AdminLTE shadow-sm look). */
#shiny-tab-feedback .card.shadow-sm {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-card, #fff);
  box-shadow: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

#shiny-tab-feedback .card.shadow-sm:hover {
  border-color: rgba(11, 18, 32, 0.20);
  transform: translateY(-2px);
}

#shiny-tab-feedback .card.shadow-sm .card-body {
  padding: 24px 22px;
}

#shiny-tab-feedback .card.shadow-sm .card-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lr-ink);
  margin-bottom: 10px;
}

#shiny-tab-feedback .card.shadow-sm h6.card-title {
  font-size: 15px;
}

/* FAQ accordion — use platform tokens instead of Bootstrap defaults */
#shiny-tab-feedback .accordion-item {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  margin-bottom: 8px;
  background: var(--lr-card, #fff);
  overflow: hidden;
}

#shiny-tab-feedback .accordion-button {
  background: var(--lr-card, #fff);
  color: var(--lr-ink);
  font-weight: 500;
  font-size: 14px;
  padding: 14px 16px;
  box-shadow: none;
}

#shiny-tab-feedback .accordion-button:not(.collapsed) {
  background: rgba(109, 77, 255, 0.05);
  color: var(--lr-accent, #6d4dff);
}

#shiny-tab-feedback .accordion-button:focus {
  border-color: var(--lr-line);
  box-shadow: 0 0 0 0.15rem rgba(109, 77, 255, 0.15);
}

#shiny-tab-feedback .accordion-body {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lr-ink-muted);
}

.lr-page-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--lr-line);
  color: var(--lr-ink-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: help;
  background: var(--lr-card);
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
  top: -2px;
}

.lr-page-help:hover {
  border-color: var(--lr-ink);
  color: var(--lr-ink);
  text-decoration: none;
}

/* Optional inline timestamp for legal / docs pages — e.g. "Updated March 14".
   Sits to the right of the title in the same row, muted and smaller. */
.lr-page-header-meta {
  font-size: 12px;
  font-family: var(--lr-mono);
  color: var(--lr-muted-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  top: -2px;
}

.lr-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .lr-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.lr-page-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.lr-page-hero-eyebrow {
  font-family: var(--lr-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  margin-bottom: 14px;
}

.lr-page-hero-title {
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 14px;
  text-wrap: balance;
}

.lr-page-hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--lr-ink-muted);
  max-width: 720px;
  margin: 0;
}

/* Centered hero variant — used by the dashboard Home module so the
   logged-in user's greeting visually mirrors the marketing landing page's
   centered Get/Causality wordmark. Centers all children, gives the
   sub-paragraph an auto-centered max-width so it doesn't stretch the
   full row, and tints the action buttons with the platform's violet
   accent (Quick start = solid violet primary; Load demo / Tutorial =
   accent-bordered outline). */
.lr-page-hero--centered {
  text-align: center;
}
.lr-page-hero--centered .lr-page-hero-sub {
  margin-left: auto;
  margin-right: auto;
}
.lr-page-hero--centered .home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.lr-page-hero--centered .lr-btn-primary {
  background: var(--lr-accent);
  border-color: var(--lr-accent);
  color: #fff;
}
.lr-page-hero--centered .lr-btn-primary:hover:not(:disabled) {
  background: var(--lr-accent-2, #8b5cf6);
  border-color: var(--lr-accent-2, #8b5cf6);
}
.lr-page-hero--centered .lr-btn-outline {
  border-color: var(--lr-accent);
  color: var(--lr-accent);
  background: transparent;
}
.lr-page-hero--centered .lr-btn-outline:hover:not(:disabled) {
  background: var(--lr-accent-tint, rgba(109,77,255,0.06));
  border-color: var(--lr-accent);
  color: var(--lr-accent);
}

/* Prose container for long-form content (legal, help, about story sections) */
.lr-prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 40px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--lr-ink);
}

.lr-prose h2 {
  font-size: 28px;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 56px 0 16px;
  scroll-margin-top: 80px;
}

.lr-prose h3 {
  font-size: 18px;
  letter-spacing: -0.005em;
  font-weight: 600;
  margin: 32px 0 10px;
}

.lr-prose p { margin: 0 0 16px; }

.lr-prose ul, .lr-prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.lr-prose li { margin: 6px 0; }

.lr-prose a { color: var(--lr-accent); text-decoration: underline; text-underline-offset: 2px; }
.lr-prose a:hover { color: #5b21b6; }

.lr-prose strong { font-weight: 600; color: var(--lr-ink); }

.lr-prose hr {
  border: none;
  border-top: 1px solid var(--lr-line);
  margin: 40px 0;
}

/* Two-column hero variant used by About — photo + bio */
.lr-bio-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
  margin: 0 auto;
  padding: 0;
}

/* Card-internal list (Publications / Workshops / Education on About page).
   Mono uppercase title is delivered via .lr-card-num; this list sits below. */
.lr-prose-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lr-ink-muted);
}
.lr-prose-ul li { margin: 0; }
.lr-prose-ul li strong { color: var(--lr-ink); font-weight: 600; }
.lr-prose-ul li em { color: var(--lr-ink); }
.lr-prose-ul a { color: var(--lr-accent); text-decoration: underline; text-underline-offset: 2px; }
.lr-prose-ul a:hover { color: #5b21b6; }

@media (max-width: 768px) {
  .lr-bio-grid { grid-template-columns: 1fr; gap: 24px; }
}

.lr-bio-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-line-soft);
  border: 1px solid var(--lr-line);
  object-fit: cover;
  display: block;
}

.lr-bio-photo-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--lr-r-sm, 4px);
  background: linear-gradient(135deg, #eef4ff 0%, #ede9fe 100%);
  border: 1px solid var(--lr-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lr-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
}

.lr-bio-name {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.lr-bio-title {
  font-family: var(--lr-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  margin: 0 0 18px;
}

.lr-credential-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.lr-credential-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--lr-line);
  border-radius: 999px;
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
}

.lr-credential-badge i { color: var(--lr-accent); }

.lr-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.lr-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  font-size: 12px;
  font-weight: 500;
  color: var(--lr-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lr-social-link:hover { border-color: var(--lr-accent); color: var(--lr-accent); }

/* Auth card layout (login / signup / reset / verify) */
.lr-auth-shell {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  background: var(--lr-surface);
}

.lr-auth-card {
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-card);
  padding: 36px 32px;
}

.lr-auth-eyebrow {
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  margin-bottom: 8px;
}

.lr-auth-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

.lr-auth-sub {
  font-size: 14px;
  color: var(--lr-ink-muted);
  margin: 0 0 24px;
}

.lr-auth-foot {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--lr-line);
  font-size: 13px;
  color: var(--lr-ink-muted);
  text-align: center;
}

.lr-auth-foot a { color: var(--lr-accent); text-decoration: none; font-weight: 500; }
.lr-auth-foot a:hover { text-decoration: underline; }

/* Auth-page extras (login, signup, reset-password) */
.lr-form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--lr-ink);
  cursor: pointer;
  user-select: none;
  margin: 4px 0;
}

.lr-form-checkbox input { margin: 0; }

.lr-form-hint { font-size: 12px; color: var(--lr-ink-muted); margin: 6px 0 0; }

.lr-info-box {
  border: 1px solid var(--lr-line);
  border-left: 3px solid var(--lr-accent);
  border-radius: var(--lr-r-sm, 4px);
  padding: 12px 14px;
  background: rgba(109,77,255,0.04);
  font-size: 13px;
  color: var(--lr-ink);
  margin: 8px 0;
}

.lr-info-box p { margin: 6px 0 0; color: var(--lr-ink-muted); }

.lr-link-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--lr-accent);
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: none;
}

.lr-link-btn:hover { text-decoration: underline; }

.lr-twofa-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.lr-auth-forgot {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
}

.lr-auth-forgot a {
  color: var(--lr-accent);
  text-decoration: none;
  font-weight: 500;
}

.lr-auth-forgot a:hover { text-decoration: underline; }

.lr-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
}

.lr-auth-divider::before,
.lr-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lr-line);
}

.lr-oauth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lr-oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  background: var(--lr-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--lr-ink);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.lr-oauth-btn:hover { border-color: var(--lr-ink); }

.lr-sso-section {
  margin-top: 8px;
  /* Stretch the SSO button to match the width of the OAuth grid above and
     the Sign-in button below — keeps the auth card visually balanced. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lr-sso-section .lr-btn-outline { width: 100%; }

.password-wrapper { position: relative; }

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--lr-ink-muted);
  padding: 4px 6px;
  border-radius: var(--lr-r-sm, 4px);
}

.password-toggle:hover { color: var(--lr-ink); background: rgba(0,0,0,0.04); }

/* Native <dialog> styling */
.lr-dialog {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  padding: 0;
  background: var(--lr-card);
  box-shadow: 0 24px 48px rgba(11,18,32,0.20);
  max-width: 440px;
  width: calc(100% - 32px);
}

.lr-dialog::backdrop { background: rgba(11,18,32,0.45); }

.lr-dialog-card { padding: 32px 28px; }

.lr-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
}

.lr-fineprint-min {
  padding: 24px 40px;
  border-top: 1px solid var(--lr-line);
}

/* Password strength meter (signup) */
.password-strength {
  height: 4px;
  background: var(--lr-line-soft);
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}

.password-strength-bar {
  height: 100%;
  width: 0%;
  background: var(--lr-neg, #ef4444);
  transition: width 0.2s ease, background 0.2s ease;
}

.password-strength-bar.weak     { width: 25%;  background: var(--lr-neg, #ef4444); }
.password-strength-bar.fair     { width: 50%;  background: var(--lr-warn, #f59e0b); }
.password-strength-bar.good     { width: 75%;  background: #84cc16; } /* lime — no token; password-meter only */
.password-strength-bar.strong   { width: 100%; background: var(--lr-ok, #22c55e); }

.lr-password-req {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 11px;
  color: var(--lr-ink-muted);
}

.lr-password-req li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-req-dot {
  font-size: 6px;
  color: var(--lr-line, #cbd5e1);
}

.auth-req-dot.met { color: var(--lr-ok, #22c55e); }

/* Inline stat strip (used inside page hero — enterprise) */
.lr-stat-strip-inline {
  margin-top: 28px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-card);
  max-width: none;
}

/* Generic bullet list inside cards */
.lr-bullet-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lr-ink);
}

.lr-bullet-list li {
  position: relative;
  padding: 4px 0 4px 16px;
  border-bottom: 1px solid var(--lr-line-soft);
}

.lr-bullet-list li:last-child { border-bottom: none; }

.lr-bullet-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--lr-accent);
  font-weight: 700;
}

/* Respondent Rights tabbed card */
.lr-rights-card { max-width: 540px; }

/* The respondent-rights page places a page-header AND the card inside the auth
   shell. That shell is a centered flex ROW (designed for single-card auth pages
   like login/signup), which would render the "Your data rights" header beside
   the card and squeeze the content. Stack them vertically so the header sits
   ABOVE the card, and give the header the same width as the card so they align. */
.lr-auth-shell.lr-rights-shell,
.lr-auth-shell:has(.lr-rights-card) {
  flex-direction: column;
  justify-content: flex-start;
}
.lr-auth-shell.lr-rights-shell .lr-page-header-narrow,
.lr-auth-shell:has(.lr-rights-card) .lr-page-header-narrow {
  width: 100%;
  max-width: 540px;
}

.lr-rights-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.lr-rights-tab {
  flex: 1;
  padding: 12px;
  border: 1.5px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  background: var(--lr-card);
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  text-align: center;
  font-family: inherit;
  color: var(--lr-ink);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.lr-rights-tab:hover { border-color: #93c5fd; }
.lr-rights-tab.active { border-color: var(--lr-blue); background: #eff6ff; color: var(--lr-blue); }

.lr-rights-tab-danger:hover { border-color: #fca5a5; }
.lr-rights-tab-danger.active { border-color: #dc2626; background: #fef2f2; color: #dc2626; }

.lr-info-box-warn {
  border-left-color: #dc2626;
  background: rgba(239,68,68,0.04);
}

.lr-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: var(--lr-r-md, 6px);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.lr-btn-danger:hover { background: #b91c1c; }

.result-msg {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--lr-r-md, 6px);
  display: none;
  font-size: 13px;
}

.result-msg.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; display: block; }
.result-msg.error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; display: block; }

.lr-rights-sep { border: none; border-top: 1px solid var(--lr-line); margin: 24px 0 16px; }
.lr-rights-help { font-size: 13px; color: var(--lr-ink-muted); }
.lr-rights-help strong { color: var(--lr-ink); display: block; margin-bottom: 6px; }
.lr-rights-help p { margin: 0; line-height: 1.55; }
.lr-rights-help a { color: var(--lr-accent); text-decoration: none; }
.lr-rights-help a:hover { text-decoration: underline; }

#do-not-sell { scroll-margin-top: 80px; }

.lr-rights-tabs { flex-wrap: wrap; }

@media (max-width: 480px) {
  .lr-auth-shell:has(.lr-rights-card) { flex-direction: column; }
  .lr-rights-tabs { flex-direction: column; gap: 6px; }
  .lr-rights-tab { flex: 1 1 100%; }
  .lr-rights-card .lr-form-submit { width: 100%; }
}

/* Auth status icons (verify-email, etc.) */
.lr-auth-centered { text-align: center; }

.lr-status-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 16px;
  font-weight: 600;
}

.lr-status-success {
  background: #dcfce7;
  color: #166534;
}

.lr-status-error {
  background: #fee2e2;
  color: #991b1b;
}

.lr-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--lr-line);
  border-top-color: var(--lr-accent);
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: lr-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .lr-spinner { animation: none; }
}

/* Code blocks inside prose */
.lr-prose pre {
  background: #0b1220;
  color: #e2e8f0;
  padding: 16px 20px;
  border-radius: var(--lr-r-sm, 4px);
  overflow-x: auto;
  font-family: var(--lr-mono);
  font-size: 13px;
  line-height: 1.5;
  margin: 16px 0;
}

.lr-prose pre code { background: transparent; padding: 0; color: inherit; }

.lr-prose code {
  background: var(--lr-line-soft);
  padding: 2px 6px;
  border-radius: var(--lr-r-sm, 4px);
  font-family: var(--lr-mono);
  font-size: 0.92em;
  color: var(--lr-ink);
}

/* Help center sidebar layout */
.lr-help-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 40px;
}

/* Page-header on help layout — span both columns of the help grid.
   Replaces the previous inline style="grid-column: 1 / -1; margin-top: 24px"
   on help.html. */
.lr-help-layout > .lr-help-header-row {
  grid-column: 1 / -1;
  margin-top: 24px;
}

.lr-help-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-card);
  padding: 16px;
}

.lr-help-search {
  margin-bottom: 16px;
  font-size: 13px;
}

.lr-help-sidebar-title {
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  margin: 14px 4px 6px;
  font-weight: 600;
}

.lr-help-sidebar-title:first-of-type { margin-top: 0; }

.lr-help-link {
  display: block;
  padding: 7px 10px;
  border-radius: var(--lr-r-sm, 4px);
  color: var(--lr-ink);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 2px;
}

.lr-help-link:hover {
  background: rgba(109,77,255,0.06);
  color: var(--lr-accent);
}

.lr-help-link.active {
  background: rgba(109,77,255,0.10);
  color: var(--lr-accent);
  font-weight: 500;
}

.lr-help-main { min-width: 0; }

.lr-help-section {
  background: var(--lr-card);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  padding: 32px;
  margin-bottom: 16px;
}

.lr-help-section h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lr-line);
}

.lr-help-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 22px 0 8px;
}

.lr-help-section p, .lr-help-section ul, .lr-help-section ol {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lr-ink);
  margin: 0 0 12px;
}

.lr-help-section ul, .lr-help-section ol { padding-left: 22px; }
.lr-help-section li { margin: 4px 0; }

.lr-help-section code {
  background: rgba(109,77,255,0.08);
  padding: 2px 6px;
  border-radius: var(--lr-r-sm, 4px);
  font-family: var(--lr-mono);
  font-size: 0.9em;
  color: var(--lr-ink);
}

.lr-help-section a { color: var(--lr-accent); text-decoration: none; }
.lr-help-section a:hover { text-decoration: underline; }

/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 980px) {
  .lr-help-layout { grid-template-columns: 1fr; }
  .lr-help-sidebar { position: static; max-height: none; }
}

/* Error / status pages (404, 500, 503) */
.lr-error-shell {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  background: var(--lr-surface);
  text-align: center;
}

.lr-error-card {
  max-width: 540px;
}

.lr-error-code {
  font-family: var(--lr-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lr-accent);
  margin-bottom: 16px;
}

.lr-error-num {
  font-family: var(--lr-mono);
  font-size: 96px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--lr-ink);
  line-height: 1;
  margin: 0 0 12px;
}

.lr-error-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

.lr-error-sub {
  font-size: 16px;
  color: var(--lr-ink-muted);
  margin: 0 0 28px;
  line-height: 1.55;
}

.lr-error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Responsive ============================================================= */
/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 1080px) {
  .lr-card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lr-card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .lr-stage-grid { grid-template-columns: repeat(2, 1fr); }
  .lr-stage:nth-child(2) { border-right: none; }
  .lr-stage:nth-child(1), .lr-stage:nth-child(2) { border-bottom: 1px solid var(--lr-line); }
  .lr-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .lr-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .lr-stat:nth-child(2) { border-right: none; }
  .lr-cm-grid { grid-template-columns: 1fr; gap: 32px; }
  .lr-contact-grid { grid-template-columns: 1fr; }
}

/* LAYOUT-SPECIFIC — not in source */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 4-col contact grid stacks 2x2 on tablets so the cards don't crowd. */
  .lr-contact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hamburger / nav-links breakpoint raised from 980 -> 1100 (2026-05) so
   the hamburger kicks in before the 7 nav-links wrap onto a second row
   at half-browser widths. The 980px boundary left a "dead zone" at
   ~1000-1080px where links were visible but cramped, and the dropdown
   wasn't yet active. The other narrow-viewport adjustments (font sizes,
   hero stacking, section padding) stay at the 980px breakpoint below
   since they're about content density rather than nav layout. */
@media (max-width: 1100px) {
  .lr-nav-links { display: none; }
  .lr-hamburger { display: inline-flex; }
  .lr-nav-links { flex-basis: 100%; flex-direction: column; gap: 0; padding: 8px 0 12px; border-top: 1px solid var(--lr-line); margin-top: 12px; order: 99; }
  .lr-nav.open .lr-nav-links { display: flex; }
  .lr-nav-links a { padding: 12px 4px; font-size: 15px; color: var(--lr-ink); border-bottom: 1px solid var(--lr-line-soft); }
  .lr-nav-links a:last-child { border-bottom: none; }
  /* flex-wrap is needed for the dropdown to wrap below the brand row.
     sticky + flex-wrap coexist fine. */
  .lr-nav { flex-wrap: wrap; position: sticky; top: 0; z-index: 50; }
}

/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 980px) {
  .lr-hero-grid { grid-template-columns: 1fr; }
  .lr-canvas-card { margin-top: 32px; }
  .lr-headline { font-size: 44px; }
  .lr-section-title { font-size: 32px; }
  .lr-nav { padding: 16px 20px; }
  .lr-hero { padding: 40px 20px; }
  .lr-section { padding: 56px 20px; }
}

/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 600px) {
  .lr-card-grid-4, .lr-card-grid-3, .lr-stage-grid, .lr-pricing-grid, .lr-stat-strip {
    grid-template-columns: 1fr;
  }
  .lr-stat, .lr-stage { border-right: none; border-bottom: 1px solid var(--lr-line); }
  .lr-stat:last-child, .lr-stage:last-child { border-bottom: none; }
  .lr-headline { font-size: 36px; }
  .lr-section-title { font-size: 28px; }
}

/* ===== Mobile polish ========================================================= */

/* Hamburger button — desktop hides it, mobile shows it */
.lr-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--lr-line);
  background: var(--lr-card);
  border-radius: var(--lr-r-md, 6px);
  cursor: pointer;
  padding: 8px 7px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.lr-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--lr-ink);
  border-radius: var(--lr-r-sm, 4px);
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.lr-nav.open .lr-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lr-nav.open .lr-hamburger span:nth-child(2) { opacity: 0; }
.lr-nav.open .lr-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .lr-hamburger span { transition: none; }
}

/* Tablet/mobile nav: hide "Beta sign in" text link, keep wordmark + primary CTA */
/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 720px) {
  .lr-nav {
    padding: 14px 18px;
    flex-wrap: wrap;
    position: relative;
  }
  .lr-logo { font-size: 18px; }
  .lr-nav-actions .lr-link { display: none; }
  .lr-btn-dark { padding: 7px 12px; font-size: 12px; }

  /* Hamburger replaces the inline nav-links */
  .lr-hamburger { display: inline-flex; }
  .lr-nav-actions { order: 2; }
  .lr-hamburger { order: 3; margin-left: 8px; }

  /* Mobile sheet: nav-links collapse to a full-width drawer below nav */
  .lr-nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 12px;
    border-top: 1px solid var(--lr-line);
    margin-top: 12px;
    order: 99;
  }
  .lr-nav.open .lr-nav-links { display: flex; }
  .lr-nav-links a {
    padding: 12px 4px;
    font-size: 15px;
    color: var(--lr-ink);
    border-bottom: 1px solid var(--lr-line-soft);
  }
  .lr-nav-links a:last-child { border-bottom: none; }

  .lr-page-hero { padding: 36px 20px; }
  .lr-page-hero-title { font-size: 32px; }
  .lr-page-hero-sub { font-size: 15px; }
  .lr-section-eyebrow { font-size: 10px; }
  .lr-headline { font-size: 38px; }
}

/* Hero CTAs stack vertically on phones */
/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 480px) {
  .lr-cta-row { flex-direction: column; gap: 10px; }
  .lr-cta-row .lr-btn-primary,
  .lr-cta-row .lr-btn-outline { width: 100%; }
  .lr-headline { font-size: 32px; }
}

/* ===== Canvas card on mobile ================================================= */
/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 720px) {
  /* Shorter canvas keeps right rail + bottom toolbar from running into each other */
  .lr-cy-canvas { height: 480px; }

  /* Compact menu bar — drop chevrons on very small screens */
  .lr-zone-menu {
    top: 10px; left: 10px; padding: 3px 4px; gap: 1px; border-radius: var(--lr-r-md, 6px);
  }
  .lr-menu-btn { padding: 5px 10px; font-size: 12px; gap: 4px; }
  .lr-menu-btn span { display: none; }      /* icons only */
  .lr-menu-chevron { display: none; }

  /* Stats display sits closer */
  .lr-stats-display { top: 50px; left: 10px; padding: 5px 10px; font-size: 11px; }
  .lr-stats-display .lr-sep { margin: 0 2px; }

  /* Top-right cluster: collapse Collaborate to icon-only, smaller help */
  .lr-zone-top-right {
    top: 10px; right: 10px; gap: 4px; padding: 4px 6px; border-radius: var(--lr-r-md, 6px);
  }
  .lr-collab-btn { padding: 6px 10px; font-size: 12px; }
  .lr-collab-btn .collab-label, .lr-collab-btn span { display: none; }
  .lr-icon-btn { width: 30px; height: 30px; font-size: 13px; }

  /* Right pill — tighter, smaller buttons */
  .lr-zone-rail {
    top: 70px; right: 10px; padding: 5px 4px; gap: 1px; border-radius: var(--lr-r-lg, 8px);
  }
  .lr-toolbar-btn { width: 32px; height: 32px; padding: 6px; font-size: 13px; }
  .lr-toolbar-btn.active { padding: 4px; }
  .lr-toolbar-divider { width: 22px; margin: 5px 0; }

  /* Bottom-right cluster — keep zoom + fit, hide minimap to save space */
  .lr-zone-bottom-right {
    bottom: 10px; right: 10px; padding: 3px 5px; gap: 1px; border-radius: var(--lr-r-md, 6px);
  }
  .lr-zone-bottom-right .lr-icon-btn { width: 30px; height: 30px; font-size: 12px; }

  /* Edge-style dropdown on the right rail: flip to open BELOW the button on
     phones so it doesn't push off the left edge of the canvas */
  .lr-menu-wrap-left .lr-menu-dropdown-left {
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    transform: none;
    min-width: 180px;
  }
}

/* Very narrow phones — hide minimap to keep bottom toolbar visible */
/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 420px) {
  .lr-zone-bottom-right [data-action="lr-minimap"],
  .lr-zone-bottom-right [data-action="lr-fullscreen"] { display: none; }

  /* Drop one of the less-critical rail buttons to keep the rail short */
  .lr-zone-rail [data-action="lr-move-labels"] { display: none; }

  /* Help button optional */
  .lr-zone-top-right [data-action="lr-help"] { display: none; }
}

/* ===== Pricing toggle / sections on mobile =================================== */
/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 600px) {
  .lr-pricing-toggle { width: 100%; justify-content: center; flex-wrap: wrap; }
  .lr-pt-btn { padding: 7px 14px; font-size: 12px; }

  /* Optimizer: tighter inner padding */
  .lr-optimizer-head, .lr-optimizer-grid, .lr-ai-recommendation { padding-left: 18px; padding-right: 18px; }
  .lr-optimizer-grid { padding-top: 20px; padding-bottom: 20px; }
  .lr-optimizer-title { font-size: 18px; }
  /* On true mobile widths, give the row two stacked rows — label on top
     spanning full width, then bar + value side by side. Gives the shift
     text room without sacrificing readability of the label. */
  .lr-impact-row {
    grid-template-columns: 1fr 130px;
    grid-template-areas: "label label" "track value";
    gap: 4px 8px;
  }
  .lr-impact-label { font-size: 12px; grid-area: label; }
  .lr-impact-track { grid-area: track; }
  .lr-impact-value { font-size: 12px; grid-area: value; }

  /* Use-case dialog fills the screen on mobile */
  .lr-usecase-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  .lr-usecase-dialog-card { max-height: 100vh; }
  .lr-usecase-head { padding: 18px 18px 14px; }
  .lr-usecase-title { font-size: 22px; }
  .lr-usecase-body { padding: 18px; }
  .lr-usecase-foot { padding: 14px 18px 18px; }

  /* FAQ shrinks padding */
  .lr-faq-item summary { padding: 14px 16px; font-size: 14px; }
  .lr-faq-item p { padding: 0 16px 16px; }

  /* Footer fineprint wraps tightly */
  .lr-footer { padding: 40px 20px 24px; }
  .lr-footer-fineprint { gap: 6px; font-size: 10px; }
}

/* Toasts: full-width feel on phones */
/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 480px) {
  .lr-toast-host { left: 12px; right: 12px; transform: none; bottom: 16px; }
  .lr-toast { max-width: none; width: 100%; padding: 9px 14px; font-size: 12px; }
}

/* ===== Mobile: auth, prose, fineprint, error — 320px / 375px safe ============ */
@media (max-width: 480px) {
  .lr-auth-shell { padding: 24px 12px; }
  .lr-auth-card { padding: 28px 20px; }
  .lr-prose { padding: 32px 16px; }
  .lr-fineprint-min { padding: 16px 16px; }
  .lr-error-num { font-size: 64px; }
  .lr-error-title { font-size: 22px; }
}

/* Multi-line checkbox labels: align checkbox with first line of text */
.lr-form-checkbox { align-items: flex-start; }
.lr-form-checkbox input[type="checkbox"] { margin-top: 3px; min-width: 16px; min-height: 16px; }

/* Password toggle: 44×44 min tap target (WCAG 2.5.5 / 2.5.8) */
.password-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ===== Auth wordmark — centered "Get Causality" with gradient on Causality ===== */
.lr-page .lr-auth-card .lr-auth-brand {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lr-ink);
  margin: 0 0 12px;
  line-height: 1.1;
}

.lr-page .lr-auth-card .lr-auth-brand-accent {
  background-image: linear-gradient(135deg, var(--lr-grad-from), var(--lr-grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-left: 0.25em;
}

/* Center the eyebrow when it sits under the wordmark (login/signup/reset/verify pages) */
.lr-page .lr-auth-card .lr-auth-brand + .lr-auth-eyebrow {
  text-align: center;
  display: block;
  margin-bottom: 24px;
}

/* =============================================================================
   ===== Dashboard / owner-surface primitives ==================================
   Visually equivalent to their .ix-* counterparts in instrument-primitives.css
   but expressed with --lr-* tokens and scoped to .lr-* class names.
   Phase-2 migrations drop .ix-* once each surface uses these classes instead.
   ============================================================================= */

/* ── New :root tokens (missing from the landing token block above) ─────────── */
:root {
  /* Accent tints — active state washes (matched to --lr-accent #6d4dff) */
  --lr-accent-tint: rgba(109,77,255,0.05);
  --lr-accent-soft: rgba(109,77,255,0.10);

  /* Status colors — reserved for actual status indicators ONLY.
     Never use on stat values or category labels (color does not categorize). */
  --lr-pos:  #3498db;
  --lr-neg:  #ff6961;
  --lr-warn: #f59e0b;
  --lr-ok:   #10b981;

  /* Stat-card categorical slots — three distinguishable hues for analysis-result
     cards' .ar-stat--primary / --secondary / --accent variants.
     Named by ROLE (1/2/3) so dark-mode flip can remap without touching consumers.
     Replaces the old --primary / --secondary / --accent triplet from main.css. */
  --lr-stat-1: var(--lr-accent);          /* primary stat — brand violet */
  --lr-stat-2: var(--lr-accent-2);        /* secondary stat — lighter violet */
  --lr-stat-3: var(--lr-grad-from);       /* tertiary stat — cool blue */
  --lr-stat-success: var(--lr-ok);
  --lr-stat-warning: var(--lr-warn);
  --lr-stat-error:   var(--lr-neg);

  /* Card + button shadow stack — opacity raised so cards stand off the
     white --lr-surface-2 surface visibly. Previous 0.04/0.03 was
     mathematically present but perceptually invisible on white. */
  --lr-shadow-card:   0 1px 2px rgba(11,18,32,0.06), 0 4px 14px rgba(11,18,32,0.08);
  --lr-shadow-card-h: 0 2px 6px rgba(11,18,32,0.08), 0 16px 32px rgba(11,18,32,0.12);
  --lr-shadow-btn:    0 1px 2px rgba(11,18,32,0.06);
  --lr-shadow-btn-h:  0 2px 4px rgba(11,18,32,0.10);
  --lr-shadow-nav:    0 1px 2px rgba(11,18,32,0.04);

  /* Deeper background tier for the dashboard wrapper */
  --lr-surface-0: #eef1f5;

  /* Pure-white card surface (matches source --surface-2) */
  --lr-surface-2: #ffffff;

  /* Ink steps for text hierarchy */
  --lr-ink-2: #1f2937;

  /* Extra-muted for de-emphasised labels */
  --lr-muted-2: #94a3b8;

  /* Hero gradient tint — soft brand-gradient wash behind hero blocks */
  --lr-hero-tint: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%);
}

/* ── Dark-mode token flip ─────────────────────────────────────────────────────
   Comprehensive flip of every color / surface / line token used by the lr-*
   design system. Aligned with dark-mode-variables.css navy palette so the
   dashboard's existing dark mode (--dm-* tokens) and the lr-* surfaces flip
   to the same colors and don't fight each other.

   Only color/surface/line tokens flip — gradients (--lr-grad-from/to),
   accents (--lr-accent), font stacks, and radii stay identical.
   Brand purple stays purple in dark mode (it IS the brand); only surfaces
   underneath go dark.
   ============================================================================ */
body.dark-mode,
html.dark-mode {
  /* Text */
  --lr-ink:        #e2e8f0;     /* was #0b1220 — primary text on dark surface */
  --lr-ink-2:      #c4cdd8;     /* body copy */
  --lr-ink-muted:  #a0aec0;     /* was #5b6878 — secondary text */
  --lr-muted-2:    #718096;     /* tertiary captions */

  /* Surfaces — three-layer navy stack matching --dm-bg-* */
  --lr-surface:    #1a1a2e;     /* was #f4f6f9 — page background */
  --lr-surface-0:  #0f1426;     /* deepest layer */
  --lr-surface-2:  #1e2a4a;     /* elevated card / inner surfaces */
  --lr-card:       #16213e;     /* was #ffffff — main card surface */

  /* Lines */
  --lr-line:       #2d3748;                       /* borders — visible but quiet */
  --lr-line-soft:  rgba(255, 255, 255, 0.06);     /* hairlines inside cards */
}

/* Page background in dark mode — body itself uses the deepest surface so the
   .lr-card / .lr-auth-card paper stands a step above. */
body.dark-mode.lr-page,
html.dark-mode body.lr-page {
  background: var(--lr-surface);
  color: var(--lr-ink-2);
}

/* Top nav (.lr-nav) needs an explicit dark surface; default rule uses --lr-card
   which is now correctly dark, but the white border-bottom would be invisible. */
body.dark-mode .lr-nav,
html.dark-mode .lr-nav {
  background: var(--lr-card);
  border-bottom-color: var(--lr-line);
}

body.dark-mode .lr-nav .lr-logo,
html.dark-mode .lr-nav .lr-logo {
  color: var(--lr-ink);
}

body.dark-mode .lr-nav-links a,
body.dark-mode .lr-nav-actions .lr-link,
html.dark-mode .lr-nav-links a,
html.dark-mode .lr-nav-actions .lr-link {
  color: var(--lr-ink-muted);
}

body.dark-mode .lr-nav-links a:hover,
html.dark-mode .lr-nav-links a:hover {
  color: var(--lr-ink);
}

/* Auth shell + card — dark navy paper-card on the deeper surface beneath. */
body.dark-mode .lr-auth-card,
html.dark-mode .lr-auth-card {
  background: var(--lr-card);
  border-color: var(--lr-line);
}

body.dark-mode .lr-auth-brand,
html.dark-mode .lr-auth-brand {
  color: var(--lr-ink);
}

body.dark-mode .lr-auth-eyebrow,
html.dark-mode .lr-auth-eyebrow {
  color: var(--lr-muted-2);
}

body.dark-mode .lr-auth-foot,
html.dark-mode .lr-auth-foot {
  color: var(--lr-ink-muted);
}

body.dark-mode .lr-auth-foot a,
html.dark-mode .lr-auth-foot a {
  color: var(--lr-ink);
}

/* Form inputs — dark surface with light text + visible focus ring. */
body.dark-mode .lr-form-input,
body.dark-mode .lr-form-input.form-control,
html.dark-mode .lr-form-input,
html.dark-mode .lr-form-input.form-control {
  background: var(--lr-surface-2);
  color: var(--lr-ink);
  border-color: var(--lr-line);
}

body.dark-mode .lr-form-input::placeholder,
html.dark-mode .lr-form-input::placeholder {
  color: var(--lr-muted-2);
}

body.dark-mode .lr-form-input:focus,
html.dark-mode .lr-form-input:focus {
  border-color: var(--lr-accent);
  box-shadow: 0 0 0 3px rgba(109, 77, 255, 0.25);
}

body.dark-mode .lr-form-label,
html.dark-mode .lr-form-label {
  color: var(--lr-muted-2);
}

body.dark-mode .lr-form-checkbox,
html.dark-mode .lr-form-checkbox {
  color: var(--lr-ink-muted);
}

body.dark-mode .lr-form-divider,
html.dark-mode .lr-form-divider {
  color: var(--lr-muted-2);
}

body.dark-mode .lr-form-divider span,
html.dark-mode .lr-form-divider span {
  color: var(--lr-muted-2);
  background: var(--lr-card);
}

body.dark-mode .lr-form-divider::before,
body.dark-mode .lr-form-divider::after,
body.dark-mode .lr-auth-divider::before,
body.dark-mode .lr-auth-divider::after,
html.dark-mode .lr-form-divider::before,
html.dark-mode .lr-form-divider::after,
html.dark-mode .lr-auth-divider::before,
html.dark-mode .lr-auth-divider::after {
  background: var(--lr-line);
}

/* Buttons.
   Primary CTAs in dark mode use the accent (violet) on white text — not
   the inverted ink/surface flip. The flip turned every "black" CTA into a
   white-grey block on the dark page, which both broke the design system's
   primary-action signal AND looked like an unreadable washed-out button
   against the dark background. Accent-on-white-text mirrors `.lr-btn-dark`'s
   dark-mode rule (line 4329 below) so the primary-button family stays
   visually consistent. */
body.dark-mode .lr-btn-primary,
html.dark-mode .lr-btn-primary {
  background: var(--lr-accent);
  color: #ffffff;
  border-color: var(--lr-accent);
}

body.dark-mode .lr-btn-primary:hover:not(:disabled),
html.dark-mode .lr-btn-primary:hover:not(:disabled) {
  background: var(--lr-accent-2);
  border-color: var(--lr-accent-2);
  color: #ffffff;
}

body.dark-mode .lr-btn-outline,
body.dark-mode .lr-oauth-btn,
html.dark-mode .lr-btn-outline,
html.dark-mode .lr-oauth-btn {
  background: var(--lr-surface-2);
  color: var(--lr-ink);
  border-color: var(--lr-line);
}

body.dark-mode .lr-btn-outline:hover:not(:disabled),
body.dark-mode .lr-oauth-btn:hover:not(:disabled),
html.dark-mode .lr-btn-outline:hover:not(:disabled),
html.dark-mode .lr-oauth-btn:hover:not(:disabled) {
  border-color: var(--lr-ink);
  color: var(--lr-ink);
}

body.dark-mode .lr-btn-dark,
html.dark-mode .lr-btn-dark {
  background: var(--lr-accent);
  color: #ffffff;
  border-color: var(--lr-accent);
}

/* Info / status boxes */
body.dark-mode .lr-info-box,
html.dark-mode .lr-info-box {
  background: rgba(109, 77, 255, 0.12);
  border-color: rgba(109, 77, 255, 0.30);
  color: var(--lr-ink-2);
}

body.dark-mode .lr-info-box strong,
html.dark-mode .lr-info-box strong {
  color: var(--lr-ink);
}

/* Footer fineprint */
body.dark-mode .lr-footer-fineprint,
html.dark-mode .lr-footer-fineprint {
  color: var(--lr-muted-2);
  background: transparent;
}

body.dark-mode .lr-footer-fineprint a,
html.dark-mode .lr-footer-fineprint a {
  color: var(--lr-ink-muted);
}

/* Sidebar — paint over AdminLTE dark surface, but keep our own variables */
body.dark-mode .main-sidebar.lr-sidebar-host,
html.dark-mode .main-sidebar.lr-sidebar-host {
  background-color: var(--lr-card) !important;
  color: var(--lr-ink);
  border-right-color: var(--lr-line);
}

body.dark-mode .main-sidebar.lr-sidebar-host .brand-link,
html.dark-mode .main-sidebar.lr-sidebar-host .brand-link {
  background: var(--lr-card) !important;
  border-bottom-color: var(--lr-line);
}

body.dark-mode .main-sidebar.lr-sidebar-host .sidebar,
html.dark-mode .main-sidebar.lr-sidebar-host .sidebar {
  background: var(--lr-card);
}

body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link {
  color: var(--lr-ink-muted) !important;
}

body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link .nav-icon,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link .nav-icon {
  color: var(--lr-muted-2);
}

body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link:hover,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link:hover {
  background: var(--lr-surface-2) !important;
  color: var(--lr-ink) !important;
}

body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link:hover .nav-icon,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link:hover .nav-icon {
  color: var(--lr-ink);
}

body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link.active,
body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-item.active > .nav-link,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link.active,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-item.active > .nav-link {
  background: var(--lr-surface-2) !important;
  color: var(--lr-ink) !important;
  box-shadow: inset 2px 0 0 var(--lr-accent);
}

body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link.active .nav-icon,
body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-item.active > .nav-link .nav-icon,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link.active .nav-icon,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-item.active > .nav-link .nav-icon {
  color: var(--lr-accent) !important;
}

body.dark-mode .main-sidebar.lr-sidebar-host .lr-nav-heading,
html.dark-mode .main-sidebar.lr-sidebar-host .lr-nav-heading {
  color: var(--lr-muted-2);
}

/* Sidebar search button */
body.dark-mode .main-sidebar.lr-sidebar-host .lr-cmdk-sidebar,
html.dark-mode .main-sidebar.lr-sidebar-host .lr-cmdk-sidebar {
  background: var(--lr-surface-2);
  color: var(--lr-ink-muted);
  border-color: var(--lr-line);
}

body.dark-mode .main-sidebar.lr-sidebar-host .lr-cmdk-sidebar:hover,
html.dark-mode .main-sidebar.lr-sidebar-host .lr-cmdk-sidebar:hover {
  border-color: var(--lr-ink);
  color: var(--lr-ink);
}

body.dark-mode .main-sidebar.lr-sidebar-host .lr-cmdk-hint,
html.dark-mode .main-sidebar.lr-sidebar-host .lr-cmdk-hint {
  background: var(--lr-card);
  border-color: var(--lr-line);
  color: var(--lr-muted-2);
}

/* Tier badge */
body.dark-mode .main-sidebar.lr-sidebar-host .sidebar-tier-badge,
html.dark-mode .main-sidebar.lr-sidebar-host .sidebar-tier-badge {
  border-color: var(--lr-line);
  color: var(--lr-muted-2) !important;
}

/* Treeview submenu */
body.dark-mode .main-sidebar.lr-sidebar-host .nav-treeview .nav-link,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-treeview .nav-link {
  color: var(--lr-ink-muted) !important;
}

body.dark-mode .main-sidebar.lr-sidebar-host .nav-treeview .nav-link:hover,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-treeview .nav-link:hover {
  background: var(--lr-surface-2) !important;
  color: var(--lr-ink) !important;
}

/* Modal dialogs (forgot-password, etc.) */
body.dark-mode .lr-dialog-card,
html.dark-mode .lr-dialog-card {
  background: var(--lr-card);
  border-color: var(--lr-line);
  color: var(--lr-ink-2);
}

body.dark-mode .lr-dialog-card .lr-auth-title,
html.dark-mode .lr-dialog-card .lr-auth-title {
  color: var(--lr-ink);
}

body.dark-mode .lr-dialog-card .lr-auth-sub,
html.dark-mode .lr-dialog-card .lr-auth-sub {
  color: var(--lr-ink-muted);
}

body.dark-mode .lr-dialog::backdrop,
html.dark-mode .lr-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* Native dialogs — ensure backdrop blur stays usable */
body.dark-mode dialog::backdrop,
html.dark-mode dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* === End comprehensive dark-mode flip ============================ */

/* ═══════════════════════════════════════════════════════════════════
   PUBLIC PAGE DARK MODE — 2026-05-28
   Covers marketing, legal, auth, error, help, respondent-rights.
   Uses the same navy palette as the auth card dark mode above.
   ═══════════════════════════════════════════════════════════════════ */

/* --- Dark mode toggle button in .lr-nav ----------------------------------- */
.dark-mode-toggle {
  background: none;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--lr-ink-muted);
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.dark-mode-toggle:hover {
  color: var(--lr-ink);
  border-color: var(--lr-ink-muted);
  background: rgba(0,0,0,0.03);
}
body.dark-mode .dark-mode-toggle,
html.dark-mode .dark-mode-toggle {
  color: #e2e8f0;
  border-color: #4a5568;
}
body.dark-mode .dark-mode-toggle:hover,
html.dark-mode .dark-mode-toggle:hover {
  color: #fff;
  border-color: #63b3ed;
  background: rgba(255,255,255,0.06);
}

/* --- 1. Hero section (index.html) ----------------------------------------- */
body.dark-mode .lr-hero,
html.dark-mode .lr-hero {
  background: var(--lr-surface);
}
body.dark-mode .lr-headline,
html.dark-mode .lr-headline {
  color: #e2e8f0;
}
body.dark-mode .lr-headline-em,
html.dark-mode .lr-headline-em {
  color: #cbd5e0;
}
body.dark-mode .lr-subhead,
html.dark-mode .lr-subhead {
  color: #a0aec0;
}
body.dark-mode .lr-hero-eyebrow,
html.dark-mode .lr-hero-eyebrow {
  color: #a0aec0;
}
body.dark-mode .lr-canvas-card,
html.dark-mode .lr-canvas-card {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-cy-canvas,
html.dark-mode .lr-cy-canvas {
  background: #0f1426;
}
body.dark-mode .lr-toolbar-btn,
html.dark-mode .lr-toolbar-btn {
  color: #a0aec0;
}
body.dark-mode .lr-toolbar-btn:hover,
html.dark-mode .lr-toolbar-btn:hover {
  background-color: rgba(99, 179, 237, 0.12);
  color: #e2e8f0;
}
body.dark-mode .lr-toolbar-btn.active,
html.dark-mode .lr-toolbar-btn.active {
  color: #63b3ed;
  background: rgba(99, 179, 237, 0.15);
}
body.dark-mode .lr-toolbar-divider,
html.dark-mode .lr-toolbar-divider {
  background: #2d3748;
}
body.dark-mode .lr-zone-menu,
html.dark-mode .lr-zone-menu {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-zone-top-right,
html.dark-mode .lr-zone-top-right {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-zone-rail,
html.dark-mode .lr-zone-rail {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-zone-bottom-right,
html.dark-mode .lr-zone-bottom-right {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-stat-strip,
html.dark-mode .lr-stat-strip {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-stat-num,
html.dark-mode .lr-stat-num {
  color: #e2e8f0;
}
body.dark-mode .lr-stat-lbl,
html.dark-mode .lr-stat-lbl {
  color: #a0aec0;
}
body.dark-mode .lr-stat,
html.dark-mode .lr-stat {
  border-color: var(--lr-line);
}

/* --- 2. Section blocks (all marketing pages) ------------------------------ */
body.dark-mode .lr-section,
html.dark-mode .lr-section {
  background: var(--lr-surface);
}
body.dark-mode .lr-section-alt,
html.dark-mode .lr-section-alt {
  background: var(--lr-card);
}
body.dark-mode .lr-section-eyebrow,
html.dark-mode .lr-section-eyebrow {
  color: var(--lr-accent);
}
body.dark-mode .lr-section-title,
html.dark-mode .lr-section-title {
  color: #e2e8f0;
}
body.dark-mode .lr-section-sub,
html.dark-mode .lr-section-sub {
  color: #a0aec0;
}

/* --- 3. Cards (index, enterprise) ----------------------------------------- */
body.dark-mode .lr-card,
html.dark-mode .lr-card {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-card:hover,
html.dark-mode .lr-card:hover {
  border-color: #4a5568;
}
body.dark-mode .lr-card-num,
html.dark-mode .lr-card-num {
  color: var(--lr-accent);
}
body.dark-mode .lr-card h3,
html.dark-mode .lr-card h3 {
  color: #e2e8f0;
}
body.dark-mode .lr-card p,
html.dark-mode .lr-card p {
  color: #a0aec0;
}
body.dark-mode .lr-card-icon,
html.dark-mode .lr-card-icon {
  color: var(--lr-accent);
}
body.dark-mode .lr-card-eyebrow,
html.dark-mode .lr-card-eyebrow {
  color: #a0aec0;
}
body.dark-mode .lr-card-stats,
html.dark-mode .lr-card-stats {
  border-top-color: var(--lr-line);
}
body.dark-mode .lr-card-stats dt,
html.dark-mode .lr-card-stats dt {
  color: #a0aec0;
}
body.dark-mode .lr-card-stats dd,
html.dark-mode .lr-card-stats dd {
  color: #e2e8f0;
}
body.dark-mode .lr-card-step,
html.dark-mode .lr-card-step {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-card-list li,
html.dark-mode .lr-card-list li {
  color: #a0aec0;
}

/* --- 4. FAQ (index) ------------------------------------------------------- */
body.dark-mode .lr-faq,
html.dark-mode .lr-faq {
  background: var(--lr-surface);
}
body.dark-mode .lr-faq-item,
html.dark-mode .lr-faq-item {
  border-bottom-color: var(--lr-line);
}
body.dark-mode .lr-faq-item summary,
html.dark-mode .lr-faq-item summary {
  color: #e2e8f0;
}
body.dark-mode .lr-faq-item summary:hover,
html.dark-mode .lr-faq-item summary:hover {
  background: rgba(255,255,255,0.03);
}
body.dark-mode .lr-faq-item[open] summary,
html.dark-mode .lr-faq-item[open] summary {
  background: rgba(255,255,255,0.04);
}
body.dark-mode .lr-faq-item p,
html.dark-mode .lr-faq-item p {
  color: #a0aec0;
}

/* --- 5. Pricing (index) --------------------------------------------------- */
body.dark-mode .lr-pricing-toggle,
html.dark-mode .lr-pricing-toggle {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-pricing-card,
html.dark-mode .lr-pricing-card {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-pricing-card:hover,
html.dark-mode .lr-pricing-card:hover {
  border-color: #4a5568;
}
body.dark-mode .lr-pricing-card-featured,
html.dark-mode .lr-pricing-card-featured {
  border-color: var(--lr-accent);
}
body.dark-mode .lr-tier-tag,
html.dark-mode .lr-tier-tag {
  color: #a0aec0;
}
body.dark-mode .lr-pricing-card h3,
html.dark-mode .lr-pricing-card h3 {
  color: #e2e8f0;
}
body.dark-mode .lr-tier-desc,
html.dark-mode .lr-tier-desc {
  color: #a0aec0;
}
body.dark-mode .lr-tier-features li,
html.dark-mode .lr-tier-features li {
  color: #a0aec0;
  border-bottom-color: var(--lr-line);
}
body.dark-mode .lr-tier-features li.lr-tier-mute,
html.dark-mode .lr-tier-features li.lr-tier-mute {
  color: #4a5568;
}
body.dark-mode .lr-comparison-note,
html.dark-mode .lr-comparison-note {
  color: #a0aec0;
}
body.dark-mode .lr-comparison-table,
html.dark-mode .lr-comparison-table {
  background: var(--lr-card);
}
body.dark-mode .lr-comparison-table th,
body.dark-mode .lr-comparison-table td,
html.dark-mode .lr-comparison-table th,
html.dark-mode .lr-comparison-table td {
  border-color: var(--lr-line);
}
body.dark-mode .lr-comparison-table thead th,
html.dark-mode .lr-comparison-table thead th {
  background: #1e2a4a;
  color: #e2e8f0;
}
body.dark-mode .lr-tier-group-row th,
html.dark-mode .lr-tier-group-row th {
  background: #0f1426;
  color: #a0aec0;
}
body.dark-mode .lr-comparison-table tbody td:first-child,
html.dark-mode .lr-comparison-table tbody td:first-child {
  color: #e2e8f0;
}
body.dark-mode .lr-comparison-table tbody td,
html.dark-mode .lr-comparison-table tbody td {
  color: #a0aec0;
}
body.dark-mode .lr-comparison-table tbody tr:hover,
html.dark-mode .lr-comparison-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

/* --- 6. Legal prose (cookie-policy, privacy, terms, subprocessors) --------- */
body.dark-mode .lr-prose,
html.dark-mode .lr-prose {
  color: #c4cdd8;
}
body.dark-mode .lr-prose h1,
body.dark-mode .lr-prose h2,
body.dark-mode .lr-prose h3,
body.dark-mode .lr-prose h4,
html.dark-mode .lr-prose h1,
html.dark-mode .lr-prose h2,
html.dark-mode .lr-prose h3,
html.dark-mode .lr-prose h4 {
  color: #e2e8f0;
}
body.dark-mode .lr-prose strong,
html.dark-mode .lr-prose strong {
  color: #e2e8f0;
}
body.dark-mode .lr-prose a,
html.dark-mode .lr-prose a {
  color: #a78bfa;
}
body.dark-mode .lr-prose a:hover,
html.dark-mode .lr-prose a:hover {
  color: #c4b5fd;
}
body.dark-mode .lr-prose hr,
html.dark-mode .lr-prose hr {
  border-color: var(--lr-line);
}
body.dark-mode .lr-prose pre,
html.dark-mode .lr-prose pre {
  background: #0f1426;
  border-color: var(--lr-line);
}
body.dark-mode .lr-prose code,
html.dark-mode .lr-prose code {
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
}
body.dark-mode .lr-page-header,
html.dark-mode .lr-page-header {
  border-bottom-color: var(--lr-line);
}
body.dark-mode .lr-page-header h1,
html.dark-mode .lr-page-header h1 {
  color: #e2e8f0;
}
body.dark-mode .lr-page-header-meta,
html.dark-mode .lr-page-header-meta {
  color: #a0aec0;
}

/* --- 7. Page hero (enterprise, about) ------------------------------------- */
body.dark-mode .lr-page-hero,
html.dark-mode .lr-page-hero {
  background: var(--lr-card);
}
body.dark-mode .lr-page-hero-inner,
html.dark-mode .lr-page-hero-inner {
  color: #c4cdd8;
}
body.dark-mode .lr-page-hero-eyebrow,
html.dark-mode .lr-page-hero-eyebrow {
  color: #a0aec0;
}
body.dark-mode .lr-page-hero-title,
html.dark-mode .lr-page-hero-title {
  color: #e2e8f0;
}
body.dark-mode .lr-page-hero-sub,
html.dark-mode .lr-page-hero-sub {
  color: #a0aec0;
}

/* --- 8. About page (bio grid, credentials) -------------------------------- */
body.dark-mode .lr-bio-grid,
html.dark-mode .lr-bio-grid {
  color: #c4cdd8;
}
body.dark-mode .lr-bio-name,
html.dark-mode .lr-bio-name {
  color: #e2e8f0;
}
body.dark-mode .lr-bio-title,
html.dark-mode .lr-bio-title {
  color: #a0aec0;
}
body.dark-mode .lr-credential-badge,
html.dark-mode .lr-credential-badge {
  background: rgba(255,255,255,0.06);
  border-color: var(--lr-line);
  color: #e2e8f0;
}
body.dark-mode .lr-credential-badge i,
html.dark-mode .lr-credential-badge i {
  color: #a78bfa;
}

/* --- 9. Respondent rights ------------------------------------------------- */
body.dark-mode .lr-rights-card,
html.dark-mode .lr-rights-card {
  background: var(--lr-card);
}
body.dark-mode .lr-rights-tab,
html.dark-mode .lr-rights-tab {
  background: var(--lr-card);
  border-color: var(--lr-line);
  color: #a0aec0;
}
body.dark-mode .lr-rights-tab:hover,
html.dark-mode .lr-rights-tab:hover {
  border-color: #4a5568;
  color: #e2e8f0;
}
body.dark-mode .lr-rights-tab.active,
html.dark-mode .lr-rights-tab.active {
  border-color: #63b3ed;
  background: rgba(99, 179, 237, 0.1);
  color: #63b3ed;
}
body.dark-mode .lr-rights-tab-danger:hover,
html.dark-mode .lr-rights-tab-danger:hover {
  border-color: #fc8181;
}
body.dark-mode .lr-rights-tab-danger.active,
html.dark-mode .lr-rights-tab-danger.active {
  border-color: #fc8181;
  background: rgba(252, 129, 129, 0.1);
  color: #fc8181;
}
body.dark-mode .lr-rights-sep,
html.dark-mode .lr-rights-sep {
  border-top-color: var(--lr-line);
}
body.dark-mode .lr-rights-help,
html.dark-mode .lr-rights-help {
  color: #a0aec0;
}
body.dark-mode .lr-rights-help strong,
html.dark-mode .lr-rights-help strong {
  color: #e2e8f0;
}

/* --- 10. Help center ------------------------------------------------------ */
body.dark-mode .lr-help-layout,
html.dark-mode .lr-help-layout {
  color: #c4cdd8;
}
body.dark-mode .lr-help-sidebar,
html.dark-mode .lr-help-sidebar {
  background: var(--lr-card);
  border-color: var(--lr-line);
}
body.dark-mode .lr-help-sidebar-title,
html.dark-mode .lr-help-sidebar-title {
  color: #a0aec0;
}
body.dark-mode .lr-help-link,
html.dark-mode .lr-help-link {
  color: #c4cdd8;
}
body.dark-mode .lr-help-link:hover,
html.dark-mode .lr-help-link:hover {
  color: #e2e8f0;
  background: rgba(255,255,255,0.04);
}
body.dark-mode .lr-help-link.active,
html.dark-mode .lr-help-link.active {
  color: var(--lr-accent);
  background: rgba(109, 77, 255, 0.08);
}
body.dark-mode .lr-help-search,
html.dark-mode .lr-help-search {
  background: #0f1426;
  border-color: var(--lr-line);
  color: #e2e8f0;
}

/* --- 11. Error pages (404/500/503) ---------------------------------------- */
body.dark-mode .lr-error-shell,
html.dark-mode .lr-error-shell {
  background: var(--lr-surface);
}
body.dark-mode .lr-error-card,
html.dark-mode .lr-error-card {
  color: #c4cdd8;
}
body.dark-mode .lr-error-code,
html.dark-mode .lr-error-code {
  color: #a0aec0;
}
body.dark-mode .lr-error-num,
html.dark-mode .lr-error-num {
  color: #e2e8f0;
}
body.dark-mode .lr-error-title,
html.dark-mode .lr-error-title {
  color: #e2e8f0;
}
body.dark-mode .lr-error-sub,
html.dark-mode .lr-error-sub {
  color: #a0aec0;
}

/* --- Stat strip inline (enterprise) --------------------------------------- */
body.dark-mode .lr-stat-strip-inline .lr-stat,
html.dark-mode .lr-stat-strip-inline .lr-stat {
  border-color: var(--lr-line);
}

/* ═══════════════════════════════════════════════════════════════════
   END PUBLIC PAGE DARK MODE
   ═══════════════════════════════════════════════════════════════════ */


/* ===== lr-tabs — module tab strip =========================================
   Bootstrap compat: <ul class="nav nav-tabs lr-tabs"> + <a class="nav-link">
   =========================================================================== */

.lr-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--lr-line);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  font-size: 13px;
  font-family: var(--lr-sans);
  scrollbar-width: thin;
}

.lr-tabs li {
  padding: 10px 14px;
  color: var(--lr-ink-muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: -1px;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lr-tabs li:hover {
  color: var(--lr-ink-2);
}

.lr-tabs li:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: -2px;
  border-radius: var(--lr-r-sm, 4px);
}

/* Ordinal / group labels inside tabs — mono micro-caps */
.lr-tabs li .num {
  font-family: var(--lr-mono);
  font-size: 9px;
  color: var(--lr-muted-2);
  letter-spacing: 0.1em;
}

/* Active state: 3px underline + 10% accent tint wash from 60% down */
.lr-tabs li[aria-selected="true"],
.lr-tabs li.active {
  color: var(--lr-ink);
  border-bottom-color: var(--lr-accent);
  border-bottom-width: 3px;
  background: linear-gradient(180deg, transparent 60%, var(--lr-accent-tint) 100%);
}

.lr-tabs li[aria-selected="true"] .num,
.lr-tabs li.active .num {
  color: var(--lr-accent);
}

/* Vertical separator between logical tab groups */
.lr-tabs .group-rule {
  width: 1px;
  align-self: stretch;
  background: var(--lr-line);
  margin: 6px 4px;
  flex-shrink: 0;
  cursor: default;
  padding: 0;
}

/* Bootstrap compat — <ul class="nav nav-tabs lr-tabs"> */
.lr-tabs.nav-tabs {
  border-bottom: 1px solid var(--lr-line);
}

.lr-tabs.nav-tabs .nav-item {
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: default;
}

.lr-tabs.nav-tabs .nav-link {
  padding: 10px 14px;
  color: var(--lr-ink-muted);
  font-weight: 500;
  font-size: 13px;
  font-family: var(--lr-sans);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lr-tabs.nav-tabs .nav-link:hover {
  background: transparent;
  color: var(--lr-ink-2);
  border-color: transparent;
}

.lr-tabs.nav-tabs .nav-link:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: -2px;
  border-radius: var(--lr-r-sm, 4px);
}

.lr-tabs.nav-tabs .nav-link.active,
.lr-tabs.nav-tabs .nav-link[aria-selected="true"] {
  color: var(--lr-ink);
  background: linear-gradient(180deg, transparent 60%, var(--lr-accent-tint) 100%);
  border-color: transparent transparent var(--lr-accent);
  border-bottom-width: 3px;
}

.lr-tabs.nav-tabs .nav-link .num {
  font-family: var(--lr-mono);
  font-size: 9px;
  color: var(--lr-muted-2);
  letter-spacing: 0.1em;
}

.lr-tabs.nav-tabs .nav-link.active .num,
.lr-tabs.nav-tabs .nav-link[aria-selected="true"] .num {
  color: var(--lr-accent);
}


/* ===== lr-stats / lr-statc — stat rail =====================================
   Variants: .lr-stats--2 / --4 / --5
   Cell children: .label (mono caps), .val (ink 28px 600), .sub (mono, .action)
   =========================================================================== */

.lr-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-lg, 8px);
  background: var(--lr-surface-2);
  box-shadow: var(--lr-shadow-card);
  overflow: hidden;
  min-width: 0;
}

.lr-stats--2 { grid-template-columns: repeat(2, 1fr); }
.lr-stats--3 { grid-template-columns: repeat(3, 1fr); }
.lr-stats--4 { grid-template-columns: repeat(4, 1fr); }
.lr-stats--5 { grid-template-columns: repeat(5, 1fr); }
.lr-stats--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1100px) {
  .lr-stats--5,
  .lr-stats--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .lr-stats,
  .lr-stats--2,
  .lr-stats--3,
  .lr-stats--4,
  .lr-stats--5,
  .lr-stats--6 {
    grid-template-columns: 1fr;
  }
  .lr-statc {
    border-right: none !important;
    border-bottom: 1px solid var(--lr-line);
  }
  .lr-statc:last-child {
    border-bottom: none;
  }
}

.lr-statc {
  padding: 16px 18px;
  border-right: 1px solid var(--lr-line);
  background: transparent;
  min-width: 0;
  overflow: hidden;
}

.lr-statc:last-child {
  border-right: none;
}

.lr-statc .label {
  font-family: var(--lr-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lr-ink-muted);
  margin-bottom: 6px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Stat value: --lr-ink always. NEVER color-code with --lr-accent or status colors. */
.lr-statc .val {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lr-ink);
  font-feature-settings: "tnum";
  line-height: 1.1;
  overflow-wrap: break-word;
  word-break: break-word;
}

.lr-statc .sub {
  font-family: var(--lr-mono);
  font-size: 10px;
  color: var(--lr-muted-2);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* .action on .sub = accent color, used for clickable change links */
.lr-statc .sub.action {
  color: var(--lr-accent);
}


/* ===== lr-icard / lr-icard-head / lr-icard-body — inner card ================
   Bootstrap compat: pill-tabs inside head can be <ul class="nav nav-pills pill-tabs">
   =========================================================================== */

.lr-icard {
  background: var(--lr-surface-2);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-lg, 8px);
  overflow: hidden;
  box-shadow: var(--lr-shadow-card);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lr-icard:hover {
  box-shadow: var(--lr-shadow-card-h);
  border-color: rgba(11,18,32,0.14);
  transform: translateY(-1px);
}

.lr-icard + .lr-icard {
  margin-top: 16px;
}

.lr-icard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--lr-line);
  background: linear-gradient(180deg, var(--lr-surface) 0%, var(--lr-surface-2) 100%);
}

/* Text containment — flex children wrap instead of pushing siblings out */
.lr-icard-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

.lr-icard-head > div > .ttl,
.lr-icard-head > div > .lbl,
.lr-icard-head > div > .sub {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.lr-icard-head .lbl {
  font-family: var(--lr-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lr-ink-muted);
  margin-bottom: 2px;
}

.lr-icard-head .ttl {
  font-size: 14px;
  font-weight: 600;
  color: var(--lr-ink);
  margin: 0;
  font-family: var(--lr-sans);
  text-wrap: pretty;
}

/* Pill-tabs container inside the card head */
.lr-icard-head .pill-tabs {
  display: flex;
  gap: 4px;
  padding: 2px;
  background: var(--lr-surface);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  font-family: var(--lr-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.lr-icard-head .pill-tabs span,
.lr-icard-head .pill-tabs button {
  padding: 4px 10px;
  border-radius: var(--lr-r-sm, 4px);
  color: var(--lr-ink-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.lr-icard-head .pill-tabs span.active,
.lr-icard-head .pill-tabs button.active,
.lr-icard-head .pill-tabs span[aria-selected="true"],
.lr-icard-head .pill-tabs button[aria-selected="true"] {
  background: var(--lr-surface-2);
  color: var(--lr-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Bootstrap nav-pills compat inside lr-icard-head */
.lr-icard-head .pill-tabs.nav-pills {
  list-style: none;
  margin: 0;
}

.lr-icard-head .pill-tabs.nav-pills .nav-item {
  background: transparent;
  margin: 0;
}

.lr-icard-head .pill-tabs.nav-pills .nav-link {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--lr-r-sm, 4px);
  color: var(--lr-ink-muted);
  background: transparent;
  font-family: var(--lr-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  font-weight: 500;
}

.lr-icard-head .pill-tabs.nav-pills .nav-link.active,
.lr-icard-head .pill-tabs.nav-pills .nav-link[aria-selected="true"] {
  background: var(--lr-surface-2);
  color: var(--lr-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

@media (max-width: 480px) {
  .lr-icard-head {
    flex-wrap: wrap;
  }
}

.lr-icard-body {
  padding: 16px;
  overflow-wrap: break-word;
}

.lr-icard-body--flush {
  padding: 0;
}

/* Media containment inside lr-icard-body */
.lr-icard-body img,
.lr-icard-body video,
.lr-icard-body canvas,
.lr-icard-body svg {
  max-width: 100%;
  height: auto;
}

.lr-icard-body table {
  max-width: 100%;
}

/* Overflowing tables scroll horizontally inside the body */
.lr-icard-body > table.lr-table,
.lr-icard-body > table.table {
  display: block;
  overflow-x: auto;
}

/* Standalone pill-tabs outside icard-head (in-card sub-tab toggles) */
.pill-tabs.nav-pills {
  display: inline-flex;
  list-style: none;
  margin: 0 0 12px;
  padding: 2px;
  background: var(--lr-surface);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  font-family: var(--lr-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  gap: 0;
  flex-wrap: wrap;
}

.pill-tabs.nav-pills .nav-item {
  background: transparent;
  margin: 0;
  border: none;
}

.pill-tabs.nav-pills .nav-link {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--lr-r-sm, 4px);
  color: var(--lr-ink-muted);
  background: transparent;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  border: none;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.pill-tabs.nav-pills .nav-link:hover {
  color: var(--lr-ink-2);
  background: transparent;
}

.pill-tabs.nav-pills .nav-link.active,
.pill-tabs.nav-pills .nav-link[aria-selected="true"] {
  background: var(--lr-surface-2);
  color: var(--lr-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.pill-tabs.nav-pills .nav-link:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: -1px;
  border-radius: var(--lr-r-sm, 4px);
}


/* ===== lr-table — ranking table with inline bars ============================
   <table class="lr-table"> — mono headers, .num cells, .bar fill via --w
   =========================================================================== */

.lr-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  font-family: var(--lr-sans);
}

.lr-table th,
.lr-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--lr-line-soft);
  vertical-align: middle;
}

.lr-table th {
  font-family: var(--lr-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lr-ink-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--lr-line);
}

/* Numeric column — mono tabular figures, right-aligned */
.lr-table td.num {
  font-family: var(--lr-mono);
  font-feature-settings: "tnum";
  color: var(--lr-ink-2);
  text-align: right;
}

/* Inline bar — background track, fill width set via CSS custom prop --w */
.lr-table .bar {
  height: 4px;
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-accent-soft);
  position: relative;
  overflow: hidden;
}

.lr-table .bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--lr-accent);
  width: var(--w, 0%);
}


/* ===== lr-btn-ghost / lr-btn-destructive / lr-btn-sm / lr-btn-lg ============
   Complements the existing lr-btn-primary / lr-btn-outline / lr-btn-dark.
   Also adds a shared base class .lr-btn for consistent focus / disabled states.
   =========================================================================== */

.lr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--lr-r-md, 6px);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--lr-sans);
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.lr-btn:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: 2px;
}

.lr-btn:disabled,
.lr-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Ghost — transparent background, muted text; fills surface on hover */
.lr-btn-ghost {
  background: transparent;
  color: var(--lr-ink-muted);
  border-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--lr-r-md, 6px);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--lr-sans);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.lr-btn-ghost:hover:not(:disabled) {
  background: var(--lr-surface);
  color: var(--lr-ink);
}

.lr-btn-ghost:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: 2px;
}

.lr-btn-ghost:disabled,
.lr-btn-ghost[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Destructive — --lr-neg fill; used for delete / remove actions only */
.lr-btn-destructive {
  background: var(--lr-neg);
  color: #fff;
  border-color: var(--lr-neg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--lr-r-md, 6px);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--lr-sans);
  cursor: pointer;
  border: 1px solid;
  text-decoration: none;
  transition: filter 0.15s ease;
  white-space: nowrap;
}

.lr-btn-destructive:hover:not(:disabled) {
  filter: brightness(0.92);
}

.lr-btn-destructive:focus-visible {
  outline: 2px solid var(--lr-neg);
  outline-offset: 2px;
}

.lr-btn-destructive:disabled,
.lr-btn-destructive[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Size modifiers — apply to any lr-btn-* */
.lr-btn-sm {
  padding: 5px 10px !important;
  font-size: 12px !important;
}

.lr-btn-lg {
  padding: 11px 18px !important;
  font-size: 14px !important;
}


/* ===== lr-card-grid-2 — two-column variant (complements 3 / 4) ============= */

.lr-card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* LAYOUT-SPECIFIC — not in source */
@media (max-width: 600px) {
  .lr-card-grid-2 { grid-template-columns: 1fr; }
}


/* ===== lr-sidebar-host — AdminLTE light sidebar overlay ====================
   Target: <aside class="main-sidebar sidebar-dark-primary lr-sidebar-host">
   Paints over the dark AdminLTE default without restructuring layout.
   =========================================================================== */

.main-sidebar.lr-sidebar-host {
  background-color: var(--lr-surface) !important;
  border-right: 1px solid var(--lr-line);
  color: var(--lr-ink);
  font-family: var(--lr-sans);
  box-shadow: inset -1px 0 0 var(--lr-line);
}

/* Brand link row at the top of the sidebar */
.main-sidebar.lr-sidebar-host .brand-link {
  background: var(--lr-surface-2) !important;
  border-bottom: 1px solid var(--lr-line);
  color: var(--lr-ink) !important;
  display: flex;
  align-items: center;
  padding: 14px 18px;
}

.main-sidebar.lr-sidebar-host .brand-text {
  color: var(--lr-ink) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 18px;
  font-family: var(--lr-sans);
  display: inline-flex;
  align-items: center;
  gap: 0.25em;          /* gap between "Get" text node and .lr-brand-accent span — inline-flex strips literal whitespace */
}

/* Gradient wordmark — "Get" stays ink, "Causality" gets the brand gradient */
.lr-brand-accent {
  background-image: linear-gradient(135deg, var(--lr-grad-from), var(--lr-grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}

/* Sidebar scrollable body */
.main-sidebar.lr-sidebar-host .sidebar {
  background: var(--lr-surface-2);
}

/* Nav links */
/* Kill the parent UL's default padding-inline-start (browsers apply 40px
   by default) and any Bootstrap .nav residual. Without this, every nav
   item appears indented 40px from the sidebar edge regardless of what
   we set on .nav-link itself. */
.main-sidebar.lr-sidebar-host .nav-sidebar,
.main-sidebar.lr-sidebar-host .sidebar > nav > .nav-sidebar,
.main-sidebar.lr-sidebar-host ul.nav.nav-pills.nav-sidebar {
  padding: 0 !important;
  padding-inline-start: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  /* Bootstrap's .nav-pills sets align-items:center, which (combined with
     .flex-column) horizontally CENTERS each <li> as a flex child instead of
     letting it stretch to full sidebar width. That made every nav-link look
     centered with massive left/right whitespace. Force stretch so items
     fill the full 250px gutter and our paddingLeft:8px puts the icon flush
     to the left edge as intended. */
  align-items: stretch !important;
}

.main-sidebar.lr-sidebar-host .nav-sidebar .nav-item {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  /* Ensure the <li> itself spans full width even if a parent flex rule
     tries to shrink it (defense in depth — pairs with align-items:stretch
     on the UL). */
  width: 100% !important;
}

.main-sidebar.lr-sidebar-host .nav-sidebar .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px;
  color: var(--lr-ink-2) !important;
  background: transparent !important;
  font-size: 13px;
  border-radius: 0;
  padding: 8px 14px !important;              /* 14px left gutter — aligns icon with .lr-nav-heading text above */
  margin: 0 !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Override layout.css's icon-centered-in-1.6rem-box layout. We want the
   icon glyph itself flush-left, not centered inside a wide box. */
.main-sidebar.lr-sidebar-host .nav-sidebar .nav-link .nav-icon {
  color: var(--lr-ink-muted);
  font-size: 14px !important;
  width: 16px !important;          /* tight glyph-sized box (was 1.6rem ≈ 26px) */
  text-align: left !important;     /* glyph starts at column 0 of its box */
  margin-right: 0 !important;       /* parent's gap: 10px handles spacing */
  flex-shrink: 0;
}

/* Treeview submenu icons (admin sub-bullets) — same flush-left treatment */
.main-sidebar.lr-sidebar-host .nav-treeview .nav-link .nav-icon,
.main-sidebar.lr-sidebar-host .nav-treeview .nav-link .far {
  text-align: left !important;
  margin-right: 0 !important;
}

.main-sidebar.lr-sidebar-host .nav-sidebar .nav-link p {
  color: inherit;
  font-size: 13px;
}

.main-sidebar.lr-sidebar-host .nav-sidebar .nav-link:hover {
  background: var(--lr-surface) !important;
  color: var(--lr-ink) !important;
}

.main-sidebar.lr-sidebar-host .nav-sidebar .nav-link:hover .nav-icon {
  color: var(--lr-ink);
}

/* Active nav link: inset left accent rail */
.main-sidebar.lr-sidebar-host .nav-sidebar .nav-link.active,
.main-sidebar.lr-sidebar-host .nav-sidebar .nav-item.active > .nav-link {
  background: var(--lr-surface) !important;
  color: var(--lr-ink) !important;
  box-shadow: inset 2px 0 0 var(--lr-accent);
  font-weight: 500;
}

.main-sidebar.lr-sidebar-host .nav-sidebar .nav-link.active .nav-icon,
.main-sidebar.lr-sidebar-host .nav-sidebar .nav-item.active > .nav-link .nav-icon {
  color: var(--lr-accent) !important;
}

/* Section heading — mono-caps injected as <li class="nav-header lr-nav-heading"> */
.main-sidebar.lr-sidebar-host .lr-nav-heading {
  padding: 14px 8px 6px 8px !important;     /* aligned with nav-link 8px left */
  font-family: var(--lr-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lr-muted-2);
  background: transparent;
  margin: 0 !important;
  list-style: none !important;
  text-align: left !important;
  pointer-events: none;
  user-select: none;
}

.main-sidebar.lr-sidebar-host .lr-nav-heading:first-child {
  padding-top: 6px;
}

/* Tier badge — mono-cap pill */
.main-sidebar.lr-sidebar-host .sidebar-tier-badge {
  margin: 12px 12px 4px;
  padding: 6px 10px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  background: transparent;
  font-family: var(--lr-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lr-ink-muted) !important;
}

/* Treeview (admin submenu).
   Bug: <ul class="nav nav-treeview"> inherits Bootstrap's
   `.nav { display: flex; flex-wrap: wrap }` so items wrap into rows
   (Audit Logs appearing right of Analytics). The parent .nav-sidebar
   has .flex-column but .nav-treeview doesn't — force vertical here. */
.main-sidebar.lr-sidebar-host .nav-treeview {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.main-sidebar.lr-sidebar-host .nav-treeview .nav-item {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.main-sidebar.lr-sidebar-host .nav-treeview .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  font-size: 12px;
  padding: 6px 8px 6px 28px !important;    /* aligned + 20px child indent */
  margin: 0 !important;
}

/* ============================================================
   NUCLEAR FLUSH-LEFT — body-prefix selectors for max specificity.
   The earlier rules weren't winning over something. These body-scoped
   variants override everything cleanly. */
body .main-sidebar.lr-sidebar-host .sidebar,
body .main-sidebar.lr-sidebar-host .sidebar > nav,
body .main-sidebar.lr-sidebar-host .sidebar > nav.mt-2 {
  padding: 0 !important;
  padding-inline-start: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body .main-sidebar.lr-sidebar-host ul.nav-sidebar,
body .main-sidebar.lr-sidebar-host ul.nav.nav-pills.nav-sidebar {
  padding: 0 !important;
  padding-inline-start: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Sidebar gutter: keep <li> elements (nav-item, nav-header) margin-flush
   to the UL — left padding is owned by the inner element (.nav-link gets
   its own paddingLeft, .lr-nav-heading gets its own). */
body .main-sidebar.lr-sidebar-host .nav-sidebar > .nav-item,
body .main-sidebar.lr-sidebar-host .nav-sidebar > .nav-header {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Heading text needs the same left inset as the nav-link icon below it so
   "WORKSPACE" lines up with the wrench / chart / etc. icon column.
   Higher specificity than the rule above (adds an extra .nav-sidebar) so
   it wins for headings only — nav-items keep padding:0 because their
   .nav-link handles its own padding. */
body .main-sidebar.lr-sidebar-host .nav-sidebar > .nav-header.lr-nav-heading {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Treeview UL itself — kill default padding too */
.main-sidebar.lr-sidebar-host .nav-treeview {
  padding: 0 !important;
  padding-inline-start: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Hide treeview submenu unless its parent .has-treeview has .menu-open.
   Without this rule the earlier `display: flex !important` on .nav-treeview
   wins unconditionally — submenu stays open even after the toggle removes
   .menu-open from the parent. AdminLTE's stock CSS toggles via
   .has-treeview.menu-open > .nav-treeview { display: block }, which our
   `display: flex !important` overrode. Putting both states inside the
   .lr-sidebar-host scope keeps specificity even and the toggle visible. */
.main-sidebar.lr-sidebar-host .has-treeview:not(.menu-open) > .nav-treeview {
  display: none !important;
}

.main-sidebar.lr-sidebar-host .nav-treeview .nav-link .nav-icon,
.main-sidebar.lr-sidebar-host .nav-treeview .nav-link .far {
  font-size: 8px;
}

/* Command palette / search button when placed inside the sidebar
   (instead of the topnav). Full-width within the sidebar gutter,
   tightens to the same 12px left/right padding as nav-links so it
   visually anchors at column 0. */
.main-sidebar.lr-sidebar-host .lr-cmdk-sidebar,
.lr-cmdk.lr-cmdk-sidebar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 7px 10px;
  background: var(--lr-card, #ffffff);
  border: 1px solid var(--lr-line, rgba(11,18,32,0.08));
  border-radius: var(--lr-r-md, 6px);
  font-size: 12px;
  color: var(--lr-ink-muted, #5b6878);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  font-family: var(--lr-sans);
  text-align: left;
}

.main-sidebar.lr-sidebar-host .lr-cmdk-sidebar:hover,
.lr-cmdk.lr-cmdk-sidebar:hover {
  border-color: var(--lr-ink, #0b1220);
  color: var(--lr-ink-2, #1f2937);
}

.main-sidebar.lr-sidebar-host .lr-cmdk-sidebar > i {
  font-size: 12px;
  color: var(--lr-ink-muted, #5b6878);
  flex-shrink: 0;
}

.main-sidebar.lr-sidebar-host .lr-cmdk-sidebar > span:not(.lr-cmdk-hint) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-sidebar.lr-sidebar-host .lr-cmdk-sidebar .lr-cmdk-hint {
  font-family: var(--lr-mono);
  font-size: 10px;
  color: var(--lr-muted-2, #94a3b8);
  padding: 1px 5px;
  border: 1px solid var(--lr-line, rgba(11,18,32,0.08));
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-surface, #f4f6f9);
  flex-shrink: 0;
}

body.dark-mode .main-sidebar.lr-sidebar-host .lr-cmdk-sidebar,
html.dark-mode .main-sidebar.lr-sidebar-host .lr-cmdk-sidebar {
  background: var(--lr-surface-2);
  border-color: var(--lr-line);
  color: var(--lr-ink-muted);
}

/* .lr-brand-link — same as brand-link but usable outside AdminLTE context */
.lr-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--lr-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--lr-ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}


/* ===== lr-topnav-host — AdminLTE top nav overlay ===========================
   Target: <nav class="main-header navbar lr-topnav-host">
   56px height; .lr-crumbs for breadcrumb; .lr-cmdk for search stub;
   .lr-iconbtn for action icons; .lr-avatar for user chip.
   =========================================================================== */

.main-header.lr-topnav-host {
  height: 56px;
  min-height: 56px;
  background: var(--lr-surface-2) !important;
  border-bottom: 1px solid var(--lr-line) !important;
  box-shadow: var(--lr-shadow-nav) !important;
}

/* Breadcrumb — mono micro-caps */
.main-header.lr-topnav-host .lr-crumbs {
  font-family: var(--lr-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lr-ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.main-header.lr-topnav-host .lr-crumbs .sep {
  color: var(--lr-muted-2);
}

.main-header.lr-topnav-host .lr-crumbs .last {
  color: var(--lr-ink-2);
}

/* Hide breadcrumbs on phones — long tab names ("MULTI-MODEL ANALYSIS")
   push right-side icons off the viewport at ≤480px. The page header
   already shows the active tab name; sidebar is toggled via hamburger. */
@media (max-width: 480px) {
  .main-header.lr-topnav-host .lr-crumbs {
    display: none;
  }
}

/* ⌘K stub — centered search bar */
.main-header.lr-topnav-host .lr-cmdk {
  flex: 1;
  max-width: 480px;
  min-width: 200px;
  margin: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--lr-surface);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  font-size: 13px;
  color: var(--lr-ink-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  font-family: var(--lr-sans);
}

.main-header.lr-topnav-host .lr-cmdk:hover {
  border-color: var(--lr-ink);
  color: var(--lr-ink-2);
}

.main-header.lr-topnav-host .lr-cmdk:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: 2px;
}

.main-header.lr-topnav-host .lr-cmdk .lr-cmdk-hint {
  margin-left: auto;
  font-family: var(--lr-mono);
  font-size: 11px;
  color: var(--lr-muted-2);
  padding: 1px 5px;
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background: var(--lr-surface-2);
}

/* Hide cmdk on small viewports */
@media (max-width: 768px) {
  .main-header.lr-topnav-host .lr-cmdk {
    display: none;
  }
}

/* Action icon button — 32×32 bordered chip */
.main-header.lr-topnav-host .lr-iconbtn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--lr-line);
  background: var(--lr-surface-2);
  border-radius: var(--lr-r-md, 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lr-ink-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.main-header.lr-topnav-host .lr-iconbtn:hover {
  border-color: var(--lr-ink);
  color: var(--lr-ink);
}

/* Avatar chip — accent-filled circle with initials */
.main-header.lr-topnav-host .lr-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lr-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}

/* Standalone .lr-crumbs / .lr-cmdk / .lr-iconbtn / .lr-avatar —
   usable outside AdminLTE (e.g. standalone topnav component) */
.lr-crumbs {
  font-family: var(--lr-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lr-ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.lr-crumbs .sep { color: var(--lr-muted-2); }
.lr-crumbs .last { color: var(--lr-ink-2); }

.lr-cmdk {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--lr-surface);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  font-size: 13px;
  color: var(--lr-ink-muted);
  cursor: pointer;
  font-family: var(--lr-sans);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lr-cmdk:hover { border-color: var(--lr-ink); color: var(--lr-ink-2); }
.lr-cmdk:focus-visible { outline: 2px solid var(--lr-accent); outline-offset: 2px; }

.lr-iconbtn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--lr-line);
  background: var(--lr-surface-2);
  border-radius: var(--lr-r-md, 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lr-ink-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.lr-iconbtn:hover { border-color: var(--lr-ink); color: var(--lr-ink); }

.lr-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lr-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}


/* ===== lr-page-hero-section — dashboard inner page hero ====================
   Extends the existing .lr-page-hero with eyebrow + title + sub.
   The existing class already covers the wrapper; these are additive variants.
   =========================================================================== */

/* Inner-page hero (compact, used by dashboard modules and admin pages) */
.lr-page-hero-section {
  padding: 40px 24px 28px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

/* Atmospheric tint behind the hero area */
.lr-page-hero-section::before {
  content: "";
  position: absolute;
  inset: -8px -24px 0;
  background: var(--lr-hero-tint);
  border-radius: var(--lr-r-xl, 12px);
  z-index: 0;
  pointer-events: none;
}

.lr-page-hero-section > * {
  position: relative;
  z-index: 1;
}

/* Eyebrow pill — for use inside lr-page-hero-section
   (the existing .lr-page-hero-eyebrow on .lr-page is a flat line;
   this variant matches ix-page-hero-eyebrow with pill + dot) */
.lr-page-hero-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--lr-line);
  border-radius: 999px;
  background: var(--lr-surface-2);
  box-shadow: var(--lr-shadow-btn);
  font-family: var(--lr-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-ink-muted);
  margin-bottom: 16px;
}

.lr-page-hero-eyebrow-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lr-accent);
  flex-shrink: 0;
}

/* Dashboard page hero title — 28px, tighter than landing 48px */
.lr-page-hero-title-sm {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--lr-ink);
  margin: 0 0 10px;
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-family: var(--lr-sans);
}

/* Dashboard page hero subtitle */
.lr-page-hero-sub-sm {
  font-size: 15px;
  line-height: 1.55;
  color: var(--lr-ink-muted);
  max-width: 640px;
  margin: 0;
  text-wrap: pretty;
  font-family: var(--lr-sans);
}


/* ===== lr-prose — long-form content ========================================
   Used by help pages, DPIA, respondent rights. Dashboard variant is narrower
   than the landing .lr-prose (65ch vs 760px) and uses the ink-2 body color.
   Adds code blocks, blockquotes, and alert overlay patterns from ix-prose.
   =========================================================================== */

.lr-prose-dashboard {
  font-family: var(--lr-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--lr-ink-2);
  /* No container max-width — let cards/grids inside use the full column.
     The 65ch readability cap applies per-paragraph below so prose stays
     comfortable to read but card layouts can span full width. */
}

/* Per-paragraph + heading readability cap (was on the container). Constrains
   only flowing prose to ~65ch; card grids and structured layouts within the
   same .lr-prose-dashboard container expand to fill. */
.lr-prose-dashboard > p,
.lr-prose-dashboard > ul,
.lr-prose-dashboard > ol,
.lr-prose-dashboard > h1,
.lr-prose-dashboard > h2,
.lr-prose-dashboard > h3,
.lr-prose-dashboard > h4,
.lr-prose-dashboard > h5,
.lr-prose-dashboard > h6,
.lr-prose-dashboard > blockquote {
  max-width: 65ch;
}

.lr-prose-dashboard > :first-child {
  margin-top: 0;
}

.lr-prose-dashboard h1,
.lr-prose-dashboard h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--lr-ink);
  margin: 28px 0 12px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.lr-prose-dashboard h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--lr-ink);
  margin: 22px 0 10px;
  letter-spacing: -0.01em;
}

.lr-prose-dashboard h4,
.lr-prose-dashboard h5,
.lr-prose-dashboard h6 {
  font-size: 14px;
  font-weight: 600;
  color: var(--lr-ink);
  margin: 18px 0 8px;
}

.lr-prose-dashboard p {
  margin: 0 0 14px;
}

.lr-prose-dashboard ul,
.lr-prose-dashboard ol {
  margin: 0 0 14px;
  padding-left: 1.5em;
}

.lr-prose-dashboard li {
  margin-bottom: 4px;
}

.lr-prose-dashboard strong {
  font-weight: 600;
  color: var(--lr-ink);
}

.lr-prose-dashboard code {
  font-family: var(--lr-mono);
  font-size: 0.92em;
  background: var(--lr-surface);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  padding: 1px 5px;
  color: var(--lr-ink);
}

.lr-prose-dashboard pre {
  font-family: var(--lr-mono);
  font-size: 12px;
  background: var(--lr-surface);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-md, 6px);
  padding: 12px 14px;
  overflow-x: auto;
  line-height: 1.5;
  margin: 0 0 14px;
}

.lr-prose-dashboard pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
}

.lr-prose-dashboard a {
  color: var(--lr-accent);
  text-decoration: underline;
  text-decoration-color: var(--lr-line);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}

.lr-prose-dashboard a:hover {
  text-decoration-color: var(--lr-accent);
}

.lr-prose-dashboard hr {
  border: none;
  border-top: 1px solid var(--lr-line);
  margin: 24px 0;
}

.lr-prose-dashboard blockquote {
  border-left: 3px solid var(--lr-accent);
  margin: 16px 0;
  padding: 4px 16px;
  color: var(--lr-ink-muted);
  font-style: italic;
}

/* Auth shell tweak when hosting long-form prose: align to flex-start */
.lr-auth-shell:has(.lr-prose-dashboard) {
  align-items: flex-start;
  padding-top: 0;
}


/* ===== Bootstrap compatibility overlays =====================================
   Scoped to .wrapper (dashboard wrapper) so these never reach
   landing / respondent / survey pages.
   =========================================================================== */

/* ── Form components: .form-control / .form-select / .form-label / .form-check
   Bootstrap 5 ships defaults that don't match the lr-* design system
   (different border colors, focus ring, corner radius, padding, label
   typography). Without these overrides, dashboard inputs render in pure
   Bootstrap blue-focus-ring + #ced4da borders, breaking the design. */
.wrapper .form-control,
.wrapper .form-select,
.tab-pane .form-control,
.tab-pane .form-select {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-sm, 4px);
  background-color: var(--lr-card);
  color: var(--lr-ink);
  font-family: var(--lr-sans);
  font-size: 14px;
  padding: 9px 12px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Bootstrap's default form-select reserves ~16px right padding for the
   chevron arrow, which collides with select text on narrow dropdowns
   (e.g. Scenario tab "scenario-target-model", Validation tab
   "validation-target-model" etc.). Reserve 36px so the chevron has
   breathing room regardless of selected option length.

   No min-width here — Bootstrap grid cells (col-3 etc.) sometimes get
   narrower than 180px when nested inside another narrow column. The
   padding-right alone is what prevents chevron-text overlap; min-width
   was forcing dropdowns to overflow their container. */
.wrapper .form-select,
.tab-pane .form-select {
  padding-right: 36px;
  background-position: right 12px center;
}

.wrapper .form-control:focus,
.wrapper .form-select:focus,
.tab-pane .form-control:focus,
.tab-pane .form-select:focus {
  outline: none;
  border-color: var(--lr-accent);
  box-shadow: 0 0 0 3px rgba(109, 77, 255, 0.15);
}

.wrapper .form-control::placeholder,
.tab-pane .form-control::placeholder {
  color: var(--lr-muted-2);
}

/* Bootstrap form-control-sm / form-select-sm — preserve the smaller size */
.wrapper .form-control-sm,
.wrapper .form-select-sm,
.tab-pane .form-control-sm,
.tab-pane .form-select-sm {
  font-size: 13px;
  padding: 6px 10px;
}

/* form-select-sm needs the same chevron-clearance treatment. Right-
   padding 32px (a touch tighter than the 36px on regular size) so the
   small dropdown still fits compact filter rows but doesn't truncate
   text behind the arrow. No min-width — small selects are often
   placed in tight col-3 / col-2 grid cells (Scenario Analysis
   intervention row uses col-6/col-3/col-3) and forcing a min-width
   pushes them into adjacent columns. */
.wrapper .form-select-sm,
.tab-pane .form-select-sm {
  padding-right: 32px;
  background-position: right 10px center;
}

.wrapper .form-label,
.tab-pane .form-label {
  font-family: var(--lr-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--lr-ink);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

/* form-check (checkbox + radio) accent — Bootstrap ships `--bs-form-check-bg`
   #0d6efd. Map to lr-accent so checked states match brand. */
.wrapper .form-check-input,
.tab-pane .form-check-input {
  accent-color: var(--lr-accent);
  border-color: var(--lr-line);
}

.wrapper .form-check-input:checked,
.tab-pane .form-check-input:checked {
  background-color: var(--lr-accent);
  border-color: var(--lr-accent);
}

.wrapper .form-check-input:focus,
.tab-pane .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(109, 77, 255, 0.15);
  border-color: var(--lr-accent);
}

.wrapper .form-check-label,
.tab-pane .form-check-label {
  font-size: 13px;
  color: var(--lr-ink-2);
}

/* form-text helper text */
.wrapper .form-text,
.tab-pane .form-text {
  font-size: 12px;
  color: var(--lr-ink-muted);
  margin-top: 4px;
}

/* ── Alert components — map Bootstrap .alert-* to lr-info-box variants.
   These are heavily used in legacy module HTML (export.html, builder.html,
   analysis result panels) where rewriting to lr-info-box would touch dozens
   of files. */
.wrapper .alert,
.tab-pane .alert {
  padding: 12px 16px;
  border-radius: var(--lr-r-md, 6px);
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid var(--lr-line);
  background: var(--lr-surface);
  color: var(--lr-ink-2);
  margin-bottom: 16px;
}

.wrapper .alert.alert-info,
.tab-pane .alert.alert-info {
  background: var(--lr-accent-tint);
  border-color: rgba(109, 77, 255, 0.20);
  color: var(--lr-ink);
  border-left: 3px solid var(--lr-accent);
}

.wrapper .alert.alert-success,
.tab-pane .alert.alert-success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: var(--lr-ink);
  border-left: 3px solid var(--lr-ok);
}

.wrapper .alert.alert-warning,
.tab-pane .alert.alert-warning {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.30);
  color: var(--lr-ink);
  border-left: 3px solid var(--lr-warn);
}

.wrapper .alert.alert-danger,
.tab-pane .alert.alert-danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
  color: var(--lr-ink);
  border-left: 3px solid var(--lr-neg, #dc2626);
}

.wrapper .alert strong,
.tab-pane .alert strong {
  color: var(--lr-ink);
  font-weight: 600;
}

/* Bootstrap dismissible alert close button */
.wrapper .alert .btn-close,
.tab-pane .alert .btn-close {
  filter: none;
  opacity: 0.5;
}

.wrapper .alert .btn-close:hover,
.tab-pane .alert .btn-close:hover {
  opacity: 1;
}

/* ── Bootstrap .badge variants — Bootstrap 5 default badge is text-bg-primary
   blue. Map text-bg-* to lr-* status tints with text-bg behavior intact. */
.wrapper .badge.text-bg-info,
.tab-pane .badge.text-bg-info {
  background: var(--lr-accent-tint) !important;
  color: var(--lr-accent) !important;
}

.wrapper .badge.text-bg-success,
.tab-pane .badge.text-bg-success {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--lr-ok) !important;
}

.wrapper .badge.text-bg-warning,
.tab-pane .badge.text-bg-warning {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #b45309 !important;
}

.wrapper .badge.text-bg-danger,
.tab-pane .badge.text-bg-danger {
  background: rgba(220, 38, 38, 0.10) !important;
  color: var(--lr-neg, #dc2626) !important;
}

.wrapper .badge.text-bg-primary,
.tab-pane .badge.text-bg-primary {
  background: var(--lr-accent-soft) !important;
  color: var(--lr-accent) !important;
}

/* ── Bootstrap input-group — used in builder/admin filter rows.
   Defaults to a 1px solid #ced4da border that breaks the lr-line look. */
.wrapper .input-group-text,
.tab-pane .input-group-text {
  background: var(--lr-surface);
  border-color: var(--lr-line);
  color: var(--lr-ink-muted);
  font-size: 13px;
}

/* ── Bootstrap dropdown-menu — pin to lr-card surface */
.wrapper .dropdown-menu,
.tab-pane .dropdown-menu {
  background: var(--lr-card);
  border: 1px solid var(--lr-line);
  box-shadow: var(--lr-shadow-card);
  border-radius: var(--lr-r-md, 6px);
}

.wrapper .dropdown-item,
.tab-pane .dropdown-item {
  color: var(--lr-ink);
  font-size: 13px;
  padding: 8px 14px;
}

.wrapper .dropdown-item:hover,
.wrapper .dropdown-item:focus,
.tab-pane .dropdown-item:hover,
.tab-pane .dropdown-item:focus {
  background: var(--lr-accent-tint);
  color: var(--lr-ink);
}

.wrapper .dropdown-item.active,
.tab-pane .dropdown-item.active {
  background: var(--lr-accent);
  color: #fff;
}

/* ── Bootstrap modal — already styled in many places, but ensure header /
   footer / body all use lr-* tokens, not Bootstrap defaults. */
.wrapper .modal-content,
.tab-pane .modal-content {
  background: var(--lr-card);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-lg, 8px);
  box-shadow: var(--lr-shadow-card-h);
}

.wrapper .modal-header,
.tab-pane .modal-header {
  background: transparent;
  border-bottom: 1px solid var(--lr-line);
  padding: 14px 18px;
}

.wrapper .modal-footer,
.tab-pane .modal-footer {
  border-top: 1px solid var(--lr-line);
  padding: 14px 18px;
}

.wrapper .modal-title,
.tab-pane .modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--lr-ink);
}

/* ── Bootstrap progress bar — match accent palette */
.wrapper .progress,
.tab-pane .progress {
  background: var(--lr-line-soft, var(--lr-line));
  border-radius: var(--lr-r-sm, 4px);
  height: 8px;
  overflow: hidden;
}

.wrapper .progress-bar,
.tab-pane .progress-bar {
  background: var(--lr-accent);
}

/* ── Bootstrap text-* utility colors — many tabs use .text-info / .text-success
   etc. Map to lr-* tokens so colors track the design system, not Bootstrap. */
.wrapper .text-info,
.tab-pane .text-info { color: var(--lr-pos) !important; }
.wrapper .text-success,
.tab-pane .text-success { color: var(--lr-ok) !important; }
.wrapper .text-warning,
.tab-pane .text-warning { color: var(--lr-warn) !important; }
.wrapper .text-danger,
.tab-pane .text-danger { color: var(--lr-neg, #dc2626) !important; }

/* ── Bootstrap bg-* utility colors */
.wrapper .bg-info,
.tab-pane .bg-info { background-color: var(--lr-accent-tint) !important; }
.wrapper .bg-success,
.tab-pane .bg-success { background-color: rgba(16, 185, 129, 0.08) !important; }
.wrapper .bg-warning,
.tab-pane .bg-warning { background-color: rgba(245, 158, 11, 0.08) !important; }
.wrapper .bg-danger,
.tab-pane .bg-danger { background-color: rgba(220, 38, 38, 0.08) !important; }

/* Flatten btn-info / btn-success / btn-warning to secondary look.
   Color does not categorize — these Bootstrap variants are disallowed in
   new code. .btn-danger stays as destructive. */
.wrapper .btn.btn-info,
.wrapper .btn.btn-success,
.wrapper .btn.btn-warning,
.wrapper .btn.btn-outline-info,
.wrapper .btn.btn-outline-success,
.wrapper .btn.btn-outline-warning {
  background: var(--lr-surface-2);
  color: var(--lr-ink);
  border: 1px solid var(--lr-line);
  box-shadow: none;
}

.wrapper .btn.btn-info:hover,
.wrapper .btn.btn-success:hover,
.wrapper .btn.btn-warning:hover,
.wrapper .btn.btn-outline-info:hover,
.wrapper .btn.btn-outline-success:hover,
.wrapper .btn.btn-outline-warning:hover {
  background: var(--lr-surface);
  color: var(--lr-ink);
  border-color: var(--lr-ink);
}

.wrapper .btn.btn-info:focus-visible,
.wrapper .btn.btn-success:focus-visible,
.wrapper .btn.btn-warning:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* Map Bootstrap .btn-primary inside .wrapper to brand violet --lr-accent.
   Without this, every CTA renders Bootstrap blue (#0d6efd) — visually
   disconnected from the lr-* design system. */
.wrapper .btn.btn-primary {
  background: var(--lr-accent);
  border: 1px solid var(--lr-accent);
  color: #fff;
  box-shadow: var(--lr-shadow-btn);
  font-weight: 600;
}

.wrapper .btn.btn-primary:hover {
  background: var(--lr-accent-2, #8b5cf6);
  border-color: var(--lr-accent-2, #8b5cf6);
  box-shadow: var(--lr-shadow-btn-h);
  color: #fff;
}

.wrapper .btn.btn-primary:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(109,77,255,0.2);
}

.wrapper .btn.btn-primary:active,
.wrapper .btn.btn-primary.active {
  background: var(--lr-accent);
  border-color: var(--lr-accent);
  filter: brightness(0.92);
}

.wrapper .btn.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--lr-accent);
  color: var(--lr-accent);
  font-weight: 600;
}

.wrapper .btn.btn-outline-primary:hover {
  background: var(--lr-accent-tint, rgba(109,77,255,0.08));
  border-color: var(--lr-accent);
  color: var(--lr-accent);
}

/* Bootstrap .btn-secondary inside .wrapper — neutral surface */
.wrapper .btn.btn-secondary,
.wrapper .btn.btn-outline-secondary {
  background: var(--lr-surface-2);
  border: 1px solid var(--lr-line);
  color: var(--lr-ink);
  font-weight: 500;
}

.wrapper .btn.btn-secondary:hover,
.wrapper .btn.btn-outline-secondary:hover {
  background: var(--lr-surface);
  border-color: var(--lr-ink);
  color: var(--lr-ink);
}

/* WCAG 2.4.11 fix (Stage 27c): explicit focus-visible ring for all
   outline button variants inside .wrapper. Without this, keyboard
   navigation has no visible indicator on these buttons (Bootstrap's
   default focus-visible is overridden by the .wrapper btn rules but
   no replacement was defined for outline variants). */
.wrapper .btn.btn-outline-primary:focus-visible,
.wrapper .btn.btn-outline-secondary:focus-visible,
.wrapper .btn.btn-outline-success:focus-visible,
.wrapper .btn.btn-outline-info:focus-visible,
.wrapper .btn.btn-outline-warning:focus-visible,
.wrapper .btn.btn-outline-danger:focus-visible,
.wrapper .btn.btn-secondary:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(109, 77, 255, 0.18);
}

/* Bootstrap text-primary — map to accent */
.wrapper .text-primary { color: var(--lr-accent) !important; }

/* AdminLTE legacy .box / .info-box compatibility — map to lr-card surface.
   Many analysis-module components still use these AdminLTE classes; rather
   than touching every module, map the legacy chrome to the design system. */
.wrapper .box,
.tab-pane .box {
  background: var(--lr-surface-2);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-lg, 8px);
  box-shadow: var(--lr-shadow-card);
  margin-bottom: 16px;
}

.wrapper .box.box-primary,
.tab-pane .box.box-primary {
  border-top: 3px solid var(--lr-accent);
}

.wrapper .box.box-info,
.tab-pane .box.box-info {
  border-top: 3px solid var(--lr-grad-from, #3b82f6);
}

.wrapper .box.box-success,
.tab-pane .box.box-success {
  border-top: 3px solid var(--lr-ok, #10b981);
}

.wrapper .box.box-warning,
.tab-pane .box.box-warning {
  border-top: 3px solid var(--lr-warn, #f59e0b);
}

.wrapper .box-header,
.tab-pane .box-header {
  background: transparent;
  border-bottom: 1px solid var(--lr-line);
  padding: 14px 18px;
  font-weight: 600;
  color: var(--lr-ink);
}

.wrapper .box-body,
.tab-pane .box-body {
  background: transparent;
  padding: 16px 18px;
  color: var(--lr-ink-2);
}

.wrapper .info-box,
.tab-pane .info-box {
  background: var(--lr-surface-2);
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-r-lg, 8px);
  box-shadow: var(--lr-shadow-card);
  color: var(--lr-ink-2);
}

.wrapper .info-box-icon,
.tab-pane .info-box-icon {
  background: linear-gradient(135deg, var(--lr-grad-from, #3b82f6), var(--lr-grad-to, #8b5cf6));
  color: #fff;
}

/* AdminLTE blue (#3c8dbc) clashes with lr-accent. Override .nav-pills
   .nav-link.active.btn-primary used in analysis-module.css. */
.wrapper .nav-pills .nav-link.active,
.wrapper .nav-pills .nav-link.active.btn-primary,
.tab-pane .nav-pills .nav-link.active {
  background: var(--lr-accent) !important;
  color: #fff !important;
  border-color: var(--lr-accent) !important;
}

/* Kill .text-info / .text-success / .text-warning on stat values.
   Stat values always use --lr-ink. */
.wrapper .stat-value.text-info,
.wrapper .stat-value.text-success,
.wrapper .stat-value.text-warning,
.wrapper .stat-value.analysis-stat-value-info,
.wrapper .stat-value.analysis-stat-value-success,
.wrapper .stat-value.analysis-stat-value-warning,
.wrapper .lr-statc .val.text-info,
.wrapper .lr-statc .val.text-success,
.wrapper .lr-statc .val.text-warning {
  color: var(--lr-ink) !important;
}

/* Flatten stat-box border-top categorization to a hairline */
.wrapper .stat-box.analysis-stat-border-info,
.wrapper .stat-box.analysis-stat-border-success,
.wrapper .stat-box.analysis-stat-border-warning {
  border-top: 1px solid var(--lr-line) !important;
  border-left: 1px solid var(--lr-line);
  border-right: 1px solid var(--lr-line);
  border-bottom: 1px solid var(--lr-line);
  background: var(--lr-surface-2);
  border-radius: var(--lr-r-md, 6px);
}

/* Kill colored card borders and header backgrounds */
.wrapper .card.border-info,
.wrapper .card.border-success,
.wrapper .card.border-warning,
.wrapper .card.border-primary {
  border-color: var(--lr-line) !important;
}

.wrapper .card-header.bg-info,
.wrapper .card-header.bg-success,
.wrapper .card-header.bg-warning,
.wrapper .card-header.bg-primary {
  background: transparent !important;
  color: var(--lr-ink) !important;
  border-bottom: 1px solid var(--lr-line);
}

/* Bootstrap .card inside .wrapper — Instrument aesthetic */
.wrapper .card,
.tab-pane .card,
.lr-icard-body .card {
  background: var(--lr-surface-2);
  border: 1px solid var(--lr-line);
  box-shadow: var(--lr-shadow-card);
  border-radius: var(--lr-r-lg, 8px);
  color: var(--lr-ink-2);
}

.wrapper .card-header:not(.card-header-legacy),
.tab-pane .card-header:not(.card-header-legacy),
.lr-icard-body .card-header:not(.card-header-legacy) {
  background: transparent;
  border-bottom: 1px solid var(--lr-line);
  color: var(--lr-ink);
  padding: 14px 18px;
  font-weight: 600;
  font-size: 14px;
}

.wrapper .card-header h4:not(.card-header-legacy h4),
.wrapper .card-header h5:not(.card-header-legacy h5),
.wrapper .card-header h6:not(.card-header-legacy h6),
.tab-pane .card-header h4,
.tab-pane .card-header h5,
.tab-pane .card-header h6 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--lr-ink);
  letter-spacing: -0.01em;
}

.wrapper .card-body,
.tab-pane .card-body,
.lr-icard-body .card-body {
  background: transparent;
  color: var(--lr-ink-2);
  padding: 16px 18px;
}

/* Dashboard wrapper background — deepest surface tier */
.wrapper {
  background:
    radial-gradient(1200px 600px at 20% -20%, rgba(59,130,246,0.05), transparent 60%),
    radial-gradient(1000px 500px at 80% -10%, rgba(139,92,246,0.04), transparent 55%),
    var(--lr-surface-0);
  min-height: 100vh;
}

.wrapper .content-wrapper {
  background: transparent;
}

/* Bootstrap text-* utilities don't flip with our tokens — override on wrapper */
.wrapper .text-muted { color: var(--lr-ink-muted) !important; }
.wrapper .text-dark   { color: var(--lr-ink) !important; }
.wrapper .bg-light,
.wrapper .bg-white    { background-color: var(--lr-surface) !important; }

.wrapper .border,
.wrapper .border-top,
.wrapper .border-bottom,
.wrapper .border-left,
.wrapper .border-right {
  border-color: var(--lr-line) !important;
}


/* ===== Dark-mode overrides for dashboard primitives ========================= */

/* lr-icard + lr-stats */
body.dark-mode .lr-icard,
body.dark-mode .lr-stats,
html.dark-mode .lr-icard,
html.dark-mode .lr-stats {
  background: var(--lr-surface-2);
  border-color: var(--lr-line);
}

body.dark-mode .lr-icard-head,
html.dark-mode .lr-icard-head {
  border-bottom-color: var(--lr-line);
  background: var(--lr-surface-2);
}

body.dark-mode .lr-icard-head .ttl,
html.dark-mode .lr-icard-head .ttl {
  color: var(--lr-ink);
}

body.dark-mode .lr-icard-head .lbl,
body.dark-mode .lr-icard-head .sub,
html.dark-mode .lr-icard-head .lbl,
html.dark-mode .lr-icard-head .sub {
  color: var(--lr-ink-muted);
}

body.dark-mode .lr-statc .val,
html.dark-mode .lr-statc .val {
  color: var(--lr-ink);
}

body.dark-mode .lr-statc .label,
html.dark-mode .lr-statc .label {
  color: var(--lr-ink-muted);
}

/* lr-table in dark mode */
body.dark-mode .lr-table,
html.dark-mode .lr-table {
  color: var(--lr-ink-2);
}

body.dark-mode .lr-table th,
html.dark-mode .lr-table th {
  color: var(--lr-ink-muted);
  border-bottom-color: var(--lr-line);
}

body.dark-mode .lr-table td,
html.dark-mode .lr-table td {
  border-bottom-color: var(--lr-line-soft);
}

body.dark-mode .lr-table td.num,
html.dark-mode .lr-table td.num {
  color: var(--lr-ink-2);
}

/* lr-tabs in dark mode */
body.dark-mode .lr-tabs li,
body.dark-mode .lr-tabs.nav-tabs .nav-link,
html.dark-mode .lr-tabs li,
html.dark-mode .lr-tabs.nav-tabs .nav-link {
  color: var(--lr-ink-muted);
  background: transparent;
}

body.dark-mode .lr-tabs li[aria-selected="true"],
body.dark-mode .lr-tabs li.active,
body.dark-mode .lr-tabs.nav-tabs .nav-link.active,
body.dark-mode .lr-tabs.nav-tabs .nav-link[aria-selected="true"],
html.dark-mode .lr-tabs li[aria-selected="true"],
html.dark-mode .lr-tabs li.active,
html.dark-mode .lr-tabs.nav-tabs .nav-link.active,
html.dark-mode .lr-tabs.nav-tabs .nav-link[aria-selected="true"] {
  color: var(--lr-ink);
}

/* pill-tabs in dark mode */
body.dark-mode .pill-tabs.nav-pills,
html.dark-mode .pill-tabs.nav-pills {
  background: var(--lr-surface);
  border-color: var(--lr-line);
}

body.dark-mode .pill-tabs.nav-pills .nav-link.active,
body.dark-mode .pill-tabs.nav-pills .nav-link[aria-selected="true"],
html.dark-mode .pill-tabs.nav-pills .nav-link.active,
html.dark-mode .pill-tabs.nav-pills .nav-link[aria-selected="true"] {
  background: var(--lr-surface-2);
  color: var(--lr-ink);
}

/* Buttons in dark mode */
body.dark-mode .lr-btn-ghost:hover:not(:disabled),
html.dark-mode .lr-btn-ghost:hover:not(:disabled) {
  background: var(--lr-surface);
  color: var(--lr-ink);
}

/* lr-sidebar-host in dark mode */
body.dark-mode .main-sidebar.lr-sidebar-host,
html.dark-mode .main-sidebar.lr-sidebar-host {
  background-color: var(--lr-surface-2) !important;
  color: var(--lr-ink);
  border-right-color: var(--lr-line);
}

body.dark-mode .main-sidebar.lr-sidebar-host .brand-link,
html.dark-mode .main-sidebar.lr-sidebar-host .brand-link {
  background: var(--lr-surface-2) !important;
  border-bottom-color: var(--lr-line);
}

body.dark-mode .main-sidebar.lr-sidebar-host .brand-text,
html.dark-mode .main-sidebar.lr-sidebar-host .brand-text {
  color: var(--lr-ink) !important;
}

body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link {
  color: var(--lr-ink-2) !important;
}

body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link:hover,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link:hover {
  background: var(--lr-surface) !important;
  color: var(--lr-ink) !important;
}

body.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link.active,
html.dark-mode .main-sidebar.lr-sidebar-host .nav-sidebar .nav-link.active {
  background: var(--lr-surface) !important;
  color: var(--lr-ink) !important;
}

body.dark-mode .main-sidebar.lr-sidebar-host .lr-nav-heading,
html.dark-mode .main-sidebar.lr-sidebar-host .lr-nav-heading {
  color: var(--lr-muted-2);
}

/* lr-topnav-host in dark mode */
body.dark-mode .main-header.lr-topnav-host,
html.dark-mode .main-header.lr-topnav-host {
  background: var(--lr-surface-2) !important;
  border-bottom-color: var(--lr-line) !important;
}

body.dark-mode .main-header.lr-topnav-host .lr-crumbs,
html.dark-mode .main-header.lr-topnav-host .lr-crumbs {
  color: var(--lr-ink-muted);
}

body.dark-mode .main-header.lr-topnav-host .lr-crumbs .last,
html.dark-mode .main-header.lr-topnav-host .lr-crumbs .last {
  color: var(--lr-ink-2);
}

body.dark-mode .main-header.lr-topnav-host .lr-cmdk,
html.dark-mode .main-header.lr-topnav-host .lr-cmdk {
  background: var(--lr-surface);
  border-color: var(--lr-line);
  color: var(--lr-ink-muted);
}

body.dark-mode .main-header.lr-topnav-host .lr-iconbtn,
html.dark-mode .main-header.lr-topnav-host .lr-iconbtn {
  background: var(--lr-surface-2);
  border-color: var(--lr-line);
  color: var(--lr-ink-muted);
}

body.dark-mode .main-header.lr-topnav-host .lr-iconbtn:hover,
html.dark-mode .main-header.lr-topnav-host .lr-iconbtn:hover {
  border-color: var(--lr-ink);
  color: var(--lr-ink);
}

/* lr-prose-dashboard in dark mode */
body.dark-mode .lr-prose-dashboard,
html.dark-mode .lr-prose-dashboard {
  color: var(--lr-ink-2);
}

body.dark-mode .lr-prose-dashboard h1,
body.dark-mode .lr-prose-dashboard h2,
body.dark-mode .lr-prose-dashboard h3,
body.dark-mode .lr-prose-dashboard h4,
body.dark-mode .lr-prose-dashboard strong,
html.dark-mode .lr-prose-dashboard h1,
html.dark-mode .lr-prose-dashboard h2,
html.dark-mode .lr-prose-dashboard h3,
html.dark-mode .lr-prose-dashboard h4,
html.dark-mode .lr-prose-dashboard strong {
  color: var(--lr-ink);
}

body.dark-mode .lr-prose-dashboard code,
html.dark-mode .lr-prose-dashboard code {
  background: var(--lr-surface);
  border-color: var(--lr-line);
  color: var(--lr-ink-2);
}

/* Page-hero section in dark mode */
body.dark-mode .lr-page-hero-title-sm,
html.dark-mode .lr-page-hero-title-sm {
  color: var(--lr-ink);
}

body.dark-mode .lr-page-hero-eyebrow-pill,
html.dark-mode .lr-page-hero-eyebrow-pill {
  background: var(--lr-surface-2);
  border-color: var(--lr-line);
  color: var(--lr-ink-muted);
}

body.dark-mode .lr-page-hero-sub-sm,
html.dark-mode .lr-page-hero-sub-sm {
  color: var(--lr-ink-muted);
}

/* Bootstrap leaf compat for dark mode on the wrapper */
body.dark-mode .wrapper .text-muted,
html.dark-mode .wrapper .text-muted {
  color: var(--lr-ink-muted) !important;
}

body.dark-mode .wrapper .text-dark,
html.dark-mode .wrapper .text-dark {
  color: var(--lr-ink) !important;
}

body.dark-mode .wrapper .bg-light,
body.dark-mode .wrapper .bg-white,
html.dark-mode .wrapper .bg-light,
html.dark-mode .wrapper .bg-white {
  background-color: var(--lr-surface) !important;
}

body.dark-mode .wrapper .border,
body.dark-mode .wrapper .border-top,
body.dark-mode .wrapper .border-bottom,
body.dark-mode .wrapper .border-left,
body.dark-mode .wrapper .border-right,
html.dark-mode .wrapper .border,
html.dark-mode .wrapper .border-top,
html.dark-mode .wrapper .border-bottom,
html.dark-mode .wrapper .border-left,
html.dark-mode .wrapper .border-right {
  border-color: var(--lr-line) !important;
}

body.dark-mode .wrapper .card,
body.dark-mode .tab-pane .card,
html.dark-mode .wrapper .card,
html.dark-mode .tab-pane .card {
  background: var(--lr-surface-2);
  border-color: var(--lr-line);
}

body.dark-mode .wrapper .card-header:not(.card-header-legacy),
body.dark-mode .tab-pane .card-header:not(.card-header-legacy),
html.dark-mode .wrapper .card-header:not(.card-header-legacy),
html.dark-mode .tab-pane .card-header:not(.card-header-legacy) {
  border-bottom-color: var(--lr-line);
  color: var(--lr-ink);
}

/* Mobile responsive breakpoints for new dashboard primitives */
@media (max-width: 640px) {
  .lr-page-hero-section {
    padding: 20px 16px 12px;
  }
  .lr-page-hero-title-sm {
    font-size: 24px;
  }
}

/* ===== End Dashboard / owner-surface primitives ============================= */