/* ============================================
   common.css - Shared styles for Side-by-Side Blueprint
   Used by: blueprint pages, paper page, dependency graph modals
   ============================================ */

/* ============================================
   Side-by-Side Blueprint Design System
   Unified color variables for consistent appearance
   ============================================ */

:root {
  /* Force light color scheme by default so browser never auto-darkens
     based on prefers-color-scheme. The SBS toggle manages dark mode
     via html[data-theme="dark"] instead. */
  color-scheme: light;

  /* ======================
     Simplified Color Palette
     ====================== */

  /* Grayscale (4 colors) */
  --sbs-black: #000000;
  --sbs-white: #ffffff;
  --sbs-gray-light: #ebebeb;
  --sbs-gray-dark: #333333;

  /* Blues (sidebar/topper) */
  --sbs-blue-steel: #396282;
  --sbs-blue-bright: #4a7a9e;

  /* Accents */
  --sbs-accent-blue: #0066cc;
  --sbs-accent-gold: #d4a000;

  /* ======================
     Semantic Mappings
     ====================== */

  /* Backgrounds */
  --sbs-bg-page: var(--sbs-gray-light);
  --sbs-bg-surface: var(--sbs-white);

  /* Text */
  --sbs-text: var(--sbs-black);
  --sbs-text-muted: var(--sbs-gray-dark);

  /* Borders */
  --sbs-border: var(--sbs-gray-dark);

  /* Links */
  --sbs-link: var(--sbs-accent-blue);
  --sbs-link-hover: #004c99;

  /* Accent (Sidebar/Header) */
  --sbs-accent: var(--sbs-blue-steel);

  /* Headings */
  --sbs-heading: var(--sbs-black);

  /* Selection */
  --sbs-selection-bg: var(--sbs-black);
  --sbs-selection-text: var(--sbs-white);

  /* ======================
     Unchanged: Tooltips, Graph, Status, Badges, Semantic
     ====================== */

  /* Tooltip Themes */
  --sbs-tooltip-warning-bg: #fff8e6;
  --sbs-tooltip-warning-text: #333333;
  --sbs-tooltip-warning-border: #f0ad4e;
  --sbs-tooltip-error-bg: #fff0f0;
  --sbs-tooltip-error-text: #333333;
  --sbs-tooltip-error-border: #d9534f;
  --sbs-tooltip-info-bg: #f0f8ff;
  --sbs-tooltip-info-text: #333333;
  --sbs-tooltip-info-border: #5bc0de;

  /* Graph & Legend */
  --sbs-graph-bg: var(--sbs-white);
  --sbs-graph-edge: #666666;
  --sbs-graph-edge-hover: var(--sbs-gray-dark);
  --sbs-legend-bg: var(--sbs-white);
  --sbs-legend-text: var(--sbs-gray-dark);
  --sbs-legend-separator: #cccccc;
  --sbs-legend-shape-border: var(--sbs-gray-dark);
  --sbs-legend-shape-bg: #f0f0f0;
  --sbs-graph-card-hover: #f0f4f8;

  /* Verification Badges */
  --sbs-badge-verified-bg: #d4edda;
  --sbs-badge-verified-text: #155724;
  --sbs-badge-verified-border: #c3e6cb;
  --sbs-badge-progress-bg: #fff3cd;
  --sbs-badge-progress-text: #856404;
  --sbs-badge-progress-border: #ffeeba;

  /* Status Colors (7-status model)
     IMPORTANT: These colors must match the Lean definitions in:
     - Dress/Dress/Graph/Svg.lean
     - Dress/Dress/Render/SideBySide.lean */
  --sbs-status-not-ready: #E8820C;      /* Vivid Orange */
  --sbs-status-wip: #0097A7;            /* Deep Teal/Cyan */
  --sbs-status-sorry: #C62828;          /* Vivid Red */
  --sbs-status-proven: #66BB6A;         /* Medium Green */
  --sbs-status-fully-proven: #1B5E20;   /* Deep Forest Green */
  --sbs-status-mathlib-ready: #42A5F5;  /* Vivid Blue */
  --sbs-status-axiom: #7E57C2;          /* Vivid Purple - axioms */

  /* Semantic Colors */
  --sbs-success: #198754;
  --sbs-warning: #ffc107;
  --sbs-danger: #dc3545;
  --sbs-info: #0dcaf0;

  /* Check Status Colors */
  --sbs-check-pass-bg: rgba(25, 135, 84, 0.15);
  --sbs-check-fail-bg: rgba(220, 53, 69, 0.15);
  --sbs-check-warn-bg: rgba(255, 193, 7, 0.15);

  /* Sidebar Active Item (light mode) - matches content area for tab-like effect */
  --sidebar-active-bg: var(--sbs-bg-page);
  --sidebar-active-text: #1a1a1a;

  /* Sidebar Text Colors (on accent background) */
  --sbs-sidebar-text: #ffffff;
  --sbs-sidebar-text-secondary: rgba(255, 255, 255, 0.8);
  --sbs-sidebar-text-dim: rgba(255, 255, 255, 0.7);
  --sbs-sidebar-section-header: rgba(255, 255, 255, 0.6);
  --sbs-sidebar-separator: rgba(255, 255, 255, 0.3);
  --sbs-sidebar-toggle-border: rgba(255, 255, 255, 0.2);

  /* Tactic indicator dot */
  --sbs-tactic-dot: #4271ae;

  /* Lean Token Colors (light mode) */
  --sbs-lean-keyword: #0000ff;
  --sbs-lean-const: #795e26;
  --sbs-lean-var: #001080;
  --sbs-lean-string: #a31515;
  --sbs-lean-option: #795e26;
  --sbs-lean-docstring: #008000;
  --sbs-lean-sort: #267f99;
  --sbs-lean-level: #098658;
  --sbs-lean-module: #795e26;
  --sbs-lean-number: #098658;
  --sbs-lean-operator: #000000;
  --sbs-lean-comment: #008000;
  --sbs-lean-line-comment: #008000;
  --sbs-lean-sorry: #ff0000;
  --sbs-lean-sorry-bg: #ffeaea;
  --sbs-lean-hypothesis: #811f3f;
  --sbs-lean-binding-hl: rgba(255, 255, 0, 0.3);
  --sbs-lean-docstring-code-bg: rgba(0, 0, 0, 0.05);
}

/* ======================
   Background Hierarchy (light mode default)
   page    (#ebebeb) -- outermost page background
   surface (#ffffff) -- cards, panels, modals, code blocks
   card    (var(--sbs-bg-surface)) -- same as surface for now
   inset   (transparent or slightly tinted) -- code blocks inside cards
   ====================== */

/* ============================================
   Status Indicator Dots
   Colored dots indicating node status (7 states)
   Used in: headers, lists, modals, dashboard
   ============================================ */

/* Base status dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Header status dot as clickable button (blueprint theorem headers) */
.status-dot-btn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  vertical-align: middle;
}

.status-dot-btn:hover {
  transform: scale(1.3);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.status-dot-btn:focus-visible {
  outline: 2px solid var(--sbs-link);
  outline-offset: 2px;
}

/* Legacy header status dot (kept for dep-graph modals) */
.header-status-dot {
  width: 10px;
  height: 10px;
}

/* Paper status dot (paper theorem headers) */
.paper-status-dot {
  width: 10px;
  height: 10px;
  vertical-align: middle;
  margin-right: 0.25rem;
}

/* Modal status dot (dependency graph modals) */
.modal-status-dot {
  width: 12px;
  height: 12px;
}

/* Node list items (sidebar/TOC) */
.node-list-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.node-list-item .status-dot {
  flex-shrink: 0;
}

/* Note items with status dots (dashboard) */
.note-item-with-dot {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.note-item-with-dot .status-dot {
  margin-top: 0.35rem;
}

.note-item-content {
  flex: 1;
  min-width: 0;
}

/* ============================================
   Dashboard List Styling
   Uniform background for clean appearance
   ============================================ */

.dashboard-list > li,
.notes-list > li {
  padding: 0.5rem 0.75rem;
  margin: 0;
  border-radius: 4px;
  background-color: var(--sbs-bg-surface);
}

/* Modal header bar (dependency graph) - close button only */
.dep-modal-header-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0;
  position: relative;
  z-index: 10;
}

/* Close button inside header bar uses flex positioning, not absolute */
.dep-modal-header-bar .dep-closebtn {
  position: static;
  font-size: 28px;
  padding: 0 0.25rem;
  line-height: 1;
}

/* Modal body wrapper */
.dep-modal-body-wrapper {
  position: relative;
}

/* Hide the original blueprint link (JS will clone it into thm_header_extras) */
.dep-modal-body-wrapper > .modal-blueprint-link {
  display: none;
}

/* In modals, make thm_header_extras always visible */
.dep-modal-body-wrapper .thm_header_extras {
  display: inline-flex !important;
  align-items: center;
}

/* Style the blueprint link when inside thm_header_extras (after status dot) */
.thm_header_extras .modal-blueprint-link {
  color: var(--sbs-link);
  text-decoration: none;
  font-style: italic;
  font-weight: normal;
  margin-left: 0.75rem;
  white-space: nowrap;
}

.thm_header_extras .modal-blueprint-link:hover {
  text-decoration: underline;
}

/* Dark Mode (JavaScript-controlled via toggle) */
html[data-theme="dark"] {
  /* Tell the browser we're in dark mode (for form controls, scrollbars, etc.) */
  color-scheme: dark;

  /* Backgrounds */
  --sbs-bg-page: #252525;

  --sbs-bg-surface: #1a1a1a;  /* Base dark background */

  /* Text */
  --sbs-text: var(--sbs-white);
  --sbs-text-muted: #cccccc;

  /* Borders */
  --sbs-border: #cccccc;

  /* Links */
  --sbs-link: #60a5fa;
  --sbs-link-hover: #93c5fd;

  /* Accent (Sidebar/Header) */
  --sbs-accent: var(--sbs-blue-bright);

  /* Headings */
  --sbs-heading: var(--sbs-white);

  /* Selection */
  --sbs-selection-bg: #60a5fa;
  --sbs-selection-text: var(--sbs-black);

  /* Tooltip Themes - dark versions */
  --sbs-tooltip-warning-bg: #422006;
  --sbs-tooltip-warning-text: #fef3c7;
  --sbs-tooltip-warning-border: #f59e0b;
  --sbs-tooltip-error-bg: #450a0a;
  --sbs-tooltip-error-text: #fecaca;
  --sbs-tooltip-error-border: #ef4444;
  --sbs-tooltip-info-bg: #0c2744;
  --sbs-tooltip-info-text: #bfdbfe;
  --sbs-tooltip-info-border: #3b82f6;

  /* Graph & Legend */
  --sbs-graph-bg: #1a1a1a;
  --sbs-graph-edge: #9ca3af;
  --sbs-graph-edge-hover: #e5e7eb;
  --sbs-legend-bg: #1f2937;
  --sbs-legend-text: #e5e7eb;
  --sbs-legend-separator: #4b5563;
  --sbs-legend-shape-border: #9ca3af;
  --sbs-legend-shape-bg: #374151;
  --sbs-graph-card-hover: #374151;

  /* Verification Badges - dark versions */
  --sbs-badge-verified-bg: #064e3b;
  --sbs-badge-verified-text: #a7f3d0;
  --sbs-badge-verified-border: #059669;
  --sbs-badge-progress-bg: #451a03;
  --sbs-badge-progress-text: #fde68a;
  --sbs-badge-progress-border: #d97706;

  /* Sidebar Active Item (dark mode) - matches content area for tab-like effect */
  --sidebar-active-bg: var(--sbs-bg-page);
  --sidebar-active-text: #ffffff;

  /* Status color overrides (dark mode) */
  --sbs-status-wip: #4DD0E1;            /* Lighter teal for dark mode */
  --sbs-status-axiom: #B088E8;          /* Lighter purple for dark mode */

  /* Check Status Colors (dark mode) */
  --sbs-check-pass-bg: rgba(25, 135, 84, 0.2);
  --sbs-check-fail-bg: rgba(220, 53, 69, 0.2);
  --sbs-check-warn-bg: rgba(255, 193, 7, 0.2);

  /* Tactic indicator dot (brighter for dark backgrounds) */
  --sbs-tactic-dot: #60a5fa;

  /* Lean Token Colors (dark mode) */
  --sbs-lean-keyword: #569cd6;
  --sbs-lean-const: #dcdcaa;
  --sbs-lean-var: #9cdcfe;
  --sbs-lean-string: #ce9178;
  --sbs-lean-option: #d7ba7d;
  --sbs-lean-docstring: #6a9955;
  --sbs-lean-sort: #4ec9b0;
  --sbs-lean-level: #b5cea8;
  --sbs-lean-module: #d7ba7d;
  --sbs-lean-number: #b5cea8;
  --sbs-lean-operator: #d4d4d4;
  --sbs-lean-comment: #6a9955;
  --sbs-lean-line-comment: #6a9955;
  --sbs-lean-sorry: #ff6b6b;
  --sbs-lean-sorry-bg: #4a1515;
  --sbs-lean-hypothesis: #ff7b72;
  --sbs-lean-binding-hl: rgba(255, 255, 0, 0.15);
  --sbs-lean-docstring-code-bg: rgba(255, 255, 255, 0.1);
}

/* ---------------------------------------------
   1. Side-by-Side Layout (2-column x 5-row grid)
   Row 1: above (LaTeX narrative, left col only)
   Row 2: heading | spacer
   Row 3: statement | signature
   Row 4: proof (LaTeX) | proof (Lean)
   Row 5: below (LaTeX narrative, left col only)
   Rows 1 and 5 collapse when above/below are absent.
   --------------------------------------------- */

.sbs-container {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.2fr);
  grid-template-rows: auto auto auto auto auto;
  gap: 0.5rem 1rem;
  align-items: start;
  background: var(--sbs-bg-surface);
  padding: 1rem;
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
}

/* Grid placement for 5-row layout */
.sbs-above-content   { grid-row: 1; grid-column: 1; }
.sbs-above-spacer    { grid-row: 1; grid-column: 2; }
.sbs-heading         { grid-row: 2; grid-column: 1; }
.sbs-heading-spacer  { grid-row: 2; grid-column: 2; }
.sbs-statement       { grid-row: 3; grid-column: 1; align-self: start; min-width: 0; overflow-wrap: break-word; }
.sbs-signature       { grid-row: 3; grid-column: 2; align-self: start; min-width: 0; max-width: 100%; overflow-x: auto; }
.sbs-proof-latex     { grid-row: 4; grid-column: 1; min-width: 0; overflow-wrap: break-word; }
.sbs-proof-lean      { grid-row: 4; grid-column: 2; min-width: 0; max-width: 100%; overflow-x: auto; }
.sbs-below-content   { grid-row: 5; grid-column: 1; }
.sbs-below-spacer    { grid-row: 5; grid-column: 2; }

/* Above/below narrative content styling */
.sbs-above-content,
.sbs-below-content {
  font-style: normal;
  line-height: 1.6;
  color: var(--sbs-text);
  overflow-wrap: break-word;
}

.sbs-above-content {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--sbs-border);
  margin-bottom: 0.25rem;
}

.sbs-below-content {
  padding-top: 0.5rem;
  border-top: 1px solid var(--sbs-border);
  margin-top: 0.25rem;
}

/* Lean code blocks within grid cells */
.sbs-signature pre.lean-code,
.sbs-proof-lean pre.lean-code {
  margin: 0;
  background-color: inherit;
  max-width: 100%;
  overflow-x: auto;
}

/* Legacy column classes (kept as fallbacks for dep graph modals and Verso) */
.sbs-latex-column {
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.sbs-lean-column {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: break-word;
}

.sbs-lean-column pre.lean-code {
  margin: 0;
  background-color: inherit;
  max-width: 100%;
  overflow-x: auto;
}

/* ---------------------------------------------
   2. Proof Toggle Mechanism
   --------------------------------------------- */

.proof_wrapper {
  margin-top: 0.75rem;
}

.proof_heading {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  background-color: rgba(57, 98, 130, 0.08);
  border: 1px solid rgba(57, 98, 130, 0.15);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.proof_heading:hover {
  background-color: rgba(57, 98, 130, 0.14);
  border-color: rgba(57, 98, 130, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.proof_heading:active {
  background-color: rgba(57, 98, 130, 0.18);
}

.proof_caption {
  font-style: italic;
}

/* Chevron indicator replacing [show]/[hide] text */
.expand-proof {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--sbs-link);
  font-weight: normal;
  transition: transform 0.2s ease;
}

/* Rotate chevron when expanded */
.proof_wrapper.expanded .expand-proof {
  transform: rotate(180deg);
}

.proof_content {
  display: none;
  margin-top: 0.25rem;
  padding-left: 1rem;
}

/* Dark mode adjustments for proof toggle */
html[data-theme="dark"] .proof_heading {
  background-color: rgba(100, 150, 200, 0.12);
  border-color: rgba(100, 150, 200, 0.2);
}

html[data-theme="dark"] .proof_heading:hover {
  background-color: rgba(100, 150, 200, 0.18);
  border-color: rgba(100, 150, 200, 0.3);
}

/* Lean proof body - synced with LaTeX proof toggle via JavaScript (plastex.js)
   Uses slideToggle() like LaTeX proof_content */
.lean-proof-body {
  display: none;
}


/* ---------------------------------------------
   3. Lean Syntax Highlighting
   --------------------------------------------- */

/* Base token styles */
.lean-keyword, .hl.lean .keyword, .keyword.token { color: var(--sbs-lean-keyword); }
.lean-const, .hl.lean .const, .const.token { color: var(--sbs-lean-const); }
.lean-const.lean-def, .hl.lean .const[data-defining="true"], .const.token[data-defining="true"] {
  font-weight: bold;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.lean-var, .hl.lean .var, .var.token { color: var(--sbs-lean-var); }
.lean-string, .hl.lean .literal.string, .literal.string.token { color: var(--sbs-lean-string); }
.lean-option, .hl.lean .option, .option.token { color: var(--sbs-lean-option); }
.lean-docstring, .hl.lean .doc-comment, .doc-comment.token { color: var(--sbs-lean-docstring); font-style: italic; }
.lean-sort, .hl.lean .sort, .sort.token { color: var(--sbs-lean-sort); }
.lean-level, .hl.lean .level-var, .hl.lean .level-const, .hl.lean .level-op,
.level-var.token, .level-const.token, .level-op.token { color: var(--sbs-lean-level); }
.lean-module, .hl.lean .module-name, .module-name.token { color: var(--sbs-lean-module); }
.lean-expr, .hl.lean .typed, .typed.token { color: inherit; }
.lean-text, .hl.lean .unknown, .hl.lean .inter-text, .unknown.token, .inter-text { color: inherit; }
.lean-sorry, .sorry.token,
.hl.lean .keyword.token[data-binding^="kw-occ-Lean.Parser.Tactic.tacticSorry"],
.hl.lean .keyword.token[data-binding^="kw-occ-Lean.Parser.Term.sorry"] {
  color: var(--sbs-lean-sorry);
  background-color: var(--sbs-lean-sorry-bg);
  font-weight: bold;
}

.lean-number { color: var(--sbs-lean-number); }
.lean-operator { color: var(--sbs-lean-operator); }
.lean-comment { color: var(--sbs-lean-comment); font-style: italic; }

/* Rainbow brackets */
.lean-bracket-1 { color: #d000ff; }
.lean-bracket-2 { color: #5126ff; }
.lean-bracket-3 { color: #0184BC; }
.lean-bracket-4 { color: #4078F2; }
.lean-bracket-5 { color: #50A14F; }
.lean-bracket-6 { color: #E45649; }

/* Line comments */
.line-comment,
.hl.lean .line-comment {
  color: var(--sbs-lean-line-comment);
  font-style: italic;
}

/* Message spans */
.lean-span, .hl.lean .has-info { }
.lean-error, .hl.lean .has-info.error { text-decoration: wavy underline #c82829; }
.lean-warning, .hl.lean .has-info.warning { text-decoration: wavy underline #eab700; }
.lean-info, .hl.lean .has-info.information { text-decoration: underline dotted #4271ae; }

/* Token binding highlight */
.hl.lean .token.binding-hl {
  background-color: var(--sbs-lean-binding-hl);
  border-radius: 2px;
}

/* Hover info */
.hl.lean .hover-info {
  display: block;
  padding: 8px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
}

.hl.lean .hover-info code { font-family: inherit; }

.hl.lean .sep {
  display: block;
  height: 1px;
  background-color: var(--sbs-border);
  margin: 8px 0;
}

.hl.lean .docstring {
  color: var(--sbs-text-muted);
  font-style: italic;
  margin-top: 8px;
}

.hl.lean .docstring p { margin: 0.5em 0; }

.hl.lean .docstring code {
  background-color: var(--sbs-lean-docstring-code-bg);
  padding: 0 4px;
  border-radius: 2px;
}

/* Extra doc links */
.extra-doc-links {
  list-style-type: none;
  margin-left: 0;
  padding: 0;
  margin-top: 8px;
  border-top: 1px solid var(--sbs-border);
  padding-top: 8px;
}

.extra-doc-links > li { display: inline-block; }

.extra-doc-links > li:not(:last-child)::after {
  content: '|';
  display: inline-block;
  margin: 0 0.25em;
  color: var(--sbs-text-muted);
}

/* ---------------------------------------------
   4. Tippy.js Tooltip Themes
   --------------------------------------------- */

[data-tippy-root] { z-index: 99999 !important; }

.tippy-box {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 600px !important;
}

.tippy-box .tippy-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.tippy-box[data-theme~='lean'] {
  background-color: var(--sbs-bg-surface);
  color: var(--sbs-text);
  border: 1px solid var(--sbs-border);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tippy-box[data-theme~='lean'] .tippy-content {
  padding: 8px 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85em;
}

.tippy-box[data-theme~='lean'][data-placement^='top'] > .tippy-arrow::before { border-top-color: var(--sbs-bg-surface); }
.tippy-box[data-theme~='lean'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: var(--sbs-bg-surface); }
.tippy-box[data-theme~='lean'][data-placement^='left'] > .tippy-arrow::before { border-left-color: var(--sbs-bg-surface); }
.tippy-box[data-theme~='lean'][data-placement^='right'] > .tippy-arrow::before { border-right-color: var(--sbs-bg-surface); }

.tippy-box[data-theme~='warning'] {
  background-color: var(--sbs-tooltip-warning-bg);
  color: var(--sbs-tooltip-warning-text);
  border: 2px solid var(--sbs-tooltip-warning-border);
  border-radius: 4px;
}

.tippy-box[data-theme~='warning'][data-placement^='top'] > .tippy-arrow::before { border-top-color: var(--sbs-tooltip-warning-bg); }
.tippy-box[data-theme~='warning'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: var(--sbs-tooltip-warning-bg); }

.tippy-box[data-theme~='error'] {
  background-color: var(--sbs-tooltip-error-bg);
  color: var(--sbs-tooltip-error-text);
  border: 2px solid var(--sbs-tooltip-error-border);
  border-radius: 4px;
}

.tippy-box[data-theme~='error'][data-placement^='top'] > .tippy-arrow::before { border-top-color: var(--sbs-tooltip-error-bg); }
.tippy-box[data-theme~='error'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: var(--sbs-tooltip-error-bg); }

.tippy-box[data-theme~='info'] {
  background-color: var(--sbs-tooltip-info-bg);
  color: var(--sbs-tooltip-info-text);
  border: 2px solid var(--sbs-tooltip-info-border);
  border-radius: 4px;
}

.tippy-box[data-theme~='info'][data-placement^='top'] > .tippy-arrow::before { border-top-color: var(--sbs-tooltip-info-bg); }
.tippy-box[data-theme~='info'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: var(--sbs-tooltip-info-bg); }

.tippy-box[data-theme~='tactic'] {
  background-color: var(--sbs-bg-surface);
  color: var(--sbs-text);
  border: 1px solid var(--sbs-border);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.tippy-box[data-theme~='tactic'] .tippy-content { padding: 12px; }

.tippy-box[data-theme~='tactic'][data-placement^='top'] > .tippy-arrow::before { border-top-color: var(--sbs-bg-surface); }
.tippy-box[data-theme~='tactic'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: var(--sbs-bg-surface); }
.tippy-box[data-theme~='tactic'][data-placement^='left'] > .tippy-arrow::before { border-left-color: var(--sbs-bg-surface); }
.tippy-box[data-theme~='tactic'][data-placement^='right'] > .tippy-arrow::before { border-right-color: var(--sbs-bg-surface); }

/* ---------------------------------------------
   5. Modal Base Styles
   --------------------------------------------- */

.dep-modal-container {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}

.dep-modal-content {
  background: var(--sbs-bg-surface);
  padding: 20px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dep-closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: var(--sbs-text-muted);
}

.dep-closebtn:hover {
  color: var(--sbs-text);
}

/* ---------------------------------------------
   6. Tactic State Animation
   --------------------------------------------- */

/* Override Verso's display-based toggle with max-height animation */
.hl.lean input.tactic-toggle { display: none; }

.hl.lean .tactic-state {
  display: block !important;  /* Override Verso's display:none */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out, margin 0.3s ease-out;
  margin-top: 0;
  padding: 0 8px;
  background-color: var(--sbs-bg-surface);
  border: 1px solid var(--sbs-border);
  border-radius: 4px;
}

.hl.lean input.tactic-toggle:checked ~ .tactic-state {
  display: block !important;  /* Override Verso's display:inline-block */
  max-height: 500px;
  opacity: 1;
  margin-top: 8px;
  padding: 8px;
}

.hl.lean .tactic > label { cursor: pointer; }

.hl.lean .tactic::before {
  content: '\25CF';
  color: var(--sbs-tactic-dot);
  font-size: 0.6em;
  vertical-align: super;
  margin-right: 2px;
  opacity: 0.5;
}

.hl.lean .tactic:hover::before { opacity: 1; }

.hl.lean .goal {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sbs-border);
}

.hl.lean .goal:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.hl.lean .goal-name {
  color: var(--sbs-text-muted);
  font-style: italic;
  margin-bottom: 4px;
}

.hl.lean .hypotheses {
  display: table;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.hl.lean .hypotheses .hypothesis { display: table-row; }

.hl.lean .hypotheses .name {
  display: table-cell;
  padding-right: 8px;
  text-align: right;
  color: var(--sbs-lean-hypothesis);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.hl.lean .hypotheses .colon {
  display: table-cell;
  padding-right: 8px;
  color: var(--sbs-text-muted);
}

.hl.lean .hypotheses .type {
  display: table-cell;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.hl.lean .conclusion { margin-top: 8px; }

.hl.lean .conclusion .goal-prefix {
  color: var(--sbs-text-muted);
  margin-right: 4px;
}

.hl.lean .conclusion .type {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ---------------------------------------------
   7. Dark Mode Toggle
   --------------------------------------------- */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  margin-top: auto;
  border-top: 1px solid var(--sbs-sidebar-toggle-border);
  cursor: pointer;
  color: var(--sbs-sidebar-text);
  font-size: 0.875rem;
  transition: background-color 0.2s;
}

.theme-toggle:hover {
  background-color: var(--sbs-accent);
}

.theme-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--sbs-sidebar-toggle-border);
  border-radius: 12px;
  transition: background-color 0.2s;
}

.theme-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--sbs-sidebar-text);
  border-radius: 50%;
  transition: transform 0.2s;
}

html[data-theme="dark"] .theme-toggle-switch {
  background: var(--sbs-link);
}

html[data-theme="dark"] .theme-toggle-switch::after {
  transform: translateX(20px);
}

.theme-toggle-icon {
  font-size: 1rem;
}

/* Both icons always visible, opacity indicates active state */
.theme-toggle-icon.sun { display: inline; opacity: 1.0; }
.theme-toggle-icon.moon { display: inline; opacity: 0.5; }

html[data-theme="dark"] .theme-toggle-icon.sun { opacity: 0.5; }
html[data-theme="dark"] .theme-toggle-icon.moon { opacity: 1.0; }

/* Note: Dark mode graph edge styles moved to dep_graph.css */

/* ---------------------------------------------
   8. Sidebar Document Items
   --------------------------------------------- */

/* Disabled sidebar items (unavailable documents) */
.sidebar-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: inherit;
}

/* Active sidebar item (currently viewing) - uses pseudo-element for full-width highlight */
.toc .sidebar-item.active {
  color: var(--sidebar-active-text);
  font-weight: 400;  /* Remove bold - was 600 */
  position: relative;
  z-index: 1;
  /* Reset any inherited constraints */
  max-width: none;
}

/* Pseudo-element creates the full-width highlight background */
.toc .sidebar-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  /* Extend left: cancel .sub-toc-0 a padding-left (0.8rem) */
  left: -0.8rem;
  /* Extend right: into nav.toc padding-right (1rem) */
  right: -1rem;
  background-color: var(--sidebar-active-bg);
  z-index: -1;
}

/* Sidebar spacer (pushes theme toggle to bottom) */
.sidebar-spacer {
  flex-grow: 1;
}

/* Make sidebar ul a flex container for spacer to work */
.toc .sub-toc-0 {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Section headers in sidebar navigation */
.nav-section-header {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sbs-sidebar-section-header);
  padding: 0.75rem 1rem 0.25rem 1rem;
  margin-top: 0.5rem;
  pointer-events: none;
}

/* First section header doesn't need top margin */
.nav-separator + .nav-section-header {
  margin-top: 0;
}

/* Top spacer for breathing room in sidebar */
.sidebar-top-spacer {
  height: 0.5rem;
  pointer-events: none;
  list-style: none;
}

/* Paper inline links row */
.toc ul li.sidebar-doc-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0.35rem 0.8rem;
  gap: 0.35rem;
  list-style: none;
}

.sidebar-item-label {
  color: var(--sbs-sidebar-text);
  font-size: 0.875rem;
  line-height: 1.5;
}

.sidebar-doc-link {
  color: var(--sbs-sidebar-text-secondary);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sidebar-doc-link:hover {
  color: var(--sbs-sidebar-text);
}

.sidebar-doc-link.active {
  color: var(--sidebar-active-text);
  font-weight: 500;
}

.sidebar-doc-link.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* External links row (bottom of sidebar) */
.sidebar-external-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--sbs-sidebar-toggle-border);
}

.sidebar-external-links a {
  color: var(--sbs-sidebar-text-dim);
  font-size: 0.75rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sidebar-external-links a:hover {
  color: var(--sbs-sidebar-text);
}

/* ---------------------------------------------
   11. Sidebar Blueprint Chapter Toggle
   --------------------------------------------- */

/* Blueprint chapter toggle */
.sidebar-blueprint-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.sidebar-blueprint-toggle {
  cursor: pointer;
  user-select: none;
  font-size: 0.875rem;
  display: block;
  white-space: nowrap;
  padding: 0.35rem 0.8rem;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
}

/* Ensure no nested overrides */
.sub-toc-0 .sidebar-blueprint-toggle,
.sub-toc-1 .sidebar-blueprint-toggle,
.sub-toc-2 .sidebar-blueprint-toggle,
.sub-toc-3 .sidebar-blueprint-toggle,
.sub-toc-4 .sidebar-blueprint-toggle {
  padding-left: 0.8rem !important;
}

.sidebar-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 0.7em;
  margin-right: 0.2rem;
}

.sidebar-blueprint-group.expanded .sidebar-chevron {
  transform: rotate(90deg);
}

.sidebar-chapter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.sidebar-blueprint-group.expanded .sidebar-chapter-list {
  max-height: 50vh;
}

.sidebar-chapter-item {
  display: block;
  padding: 0.35rem 0.8rem 0.35rem 1.8rem;
  font-size: 0.8rem;
  color: var(--sbs-sidebar-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}

.sidebar-chapter-item:hover {
  color: var(--sbs-sidebar-text);
}

.sidebar-chapter-item.active {
  color: var(--sidebar-active-text);
  font-weight: 500;
  position: relative;
}

.sidebar-chapter-item.active::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -0.8rem; right: -1rem;
  background-color: var(--sidebar-active-bg);
  z-index: -1;
}

/* On mobile, auto-expand chapters when sidebar is toggled visible */
@media (max-width: 1023px) {
  .sidebar-blueprint-group.expanded .sidebar-chapter-list {
    max-height: none;
  }
}

/* ---------------------------------------------
   12. Blueprint / Paper Inline Links
   --------------------------------------------- */

.blueprint-link,
.paper-link {
  font-style: italic;
  font-size: 0.85em;
  margin-left: 0.5em;
  color: var(--sbs-link);
  text-decoration: none;
}

.blueprint-link:hover,
.paper-link:hover {
  text-decoration: none;
  color: var(--sbs-link-hover);
}

/* ---------------------------------------------
   13. PDF Page Styles (fullpage embed)
   --------------------------------------------- */

/* PDF page body - prevent scrolling */
body.pdf-page {
  overflow: hidden;
}

/* PDF content area - fill available space */
.pdf-content {
  padding: 0 !important;
  overflow: hidden;
}

/* PDF viewer container - fill parent */
.pdf-viewer-fullpage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* PDF embed - maximize size */
.pdf-embed-fullpage {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
}