/* ── MathJax overflow: long equations scroll horizontally on all platforms ── */
/* MathJax CHTML injects line-height:0 on mjx-container; override it so the
   full equation height is visible and not clipped to the top half. */
#preview mjx-container[jax="CHTML"] {
  line-height: normal;
}

/* Block / display math: cap at parent width, align left. */
#preview mjx-container[display="true"] {
  display: block !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Inline math: cap at line width. */
#preview mjx-container:not([display="true"]) {
  display: inline-block;
  max-width: 100% !important;
  vertical-align: middle;
}

/* Only equations whose content actually overflows get horizontal scrolling.
   The .math-overflow class is applied by JS after each render. */
#preview mjx-container.math-overflow {
  overflow-x: auto;
  overflow-y: hidden;
  /* iOS momentum scrolling */
  -webkit-overflow-scrolling: touch;
  /* Prevent page-level swipe-back/forward navigation while scrolling math. */
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  /* Suppress scrollbar track in legacy IE/Edge (Chrome/Firefox covered globally) */
  -ms-overflow-style: none;
}

/* Fallback for older MathJax CHTML class names */
#preview .MathJax_Display,
#preview .MathJax[display="true"] {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ── Plain (non-task) checkboxes ── */
/* [ ] checkbox items render as li.task-item elements inside a .plain-cb-list
   <ul>, identical to - [ ] task items. No extra CSS needed beyond task-item. */

/* ── Mermaid diagrams ── */
.mermaid-diagram {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.75em 0;
  text-align: left;
}

.mermaid-diagram svg {
  max-width: 100%;
  height: auto;
}

/* Pan/zoom toggle button — aligned with note text content (left: --gap matches
   the margin-left applied to regular preview elements). This stays correct even
   when the diagram is expanded to full-area, because the expanded wrapper is
   fixed to the editor-section's left edge and --gap pushes the button to the
   same visual column as all other content. */
.mermaid-panzoom-btn {
  position: absolute;
  top: 5px;
  left: var(--gap, 10px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--surface);
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.45;
  color: var(--text);
  transition: opacity 0.15s;
  line-height: 1;
}

.mermaid-panzoom-btn:hover,
.mermaid-panzoom-btn.active {
  opacity: 1;
}

/* Pan/zoom active state — sizing/position applied via JS; just set visual properties.
   Visually matches the editor/preview container: same background, same padding,
   toolbar and status bar remain visible above (lower z-index than UI chrome). */
.mermaid-diagram.mermaid-panzoom-active {
  background: var(--bg);
  user-select: none;
  touch-action: none;
  /* Top padding clears the toolbar pill; sides/bottom match --gap */
  padding: var(--toolbar-h, 48px) var(--gap, 10px) var(--gap, 10px);
  box-sizing: border-box;
}

.mermaid-diagram.mermaid-panzoom-active svg {
  max-width: none;
  display: block;
}

/* Keep the panzoom toggle button on top of the canvas content,
   and shift it below the floating toolbar when expanded. */
.mermaid-diagram.mermaid-panzoom-active .mermaid-panzoom-btn {
  z-index: 6;
  top: calc(var(--toolbar-h, 45px) + 8px);
}

/* ── Projects note — clickable emoji headings ── */
.project-emoji-btn {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
  transition: background 0.12s;
  display: inline-block;
  line-height: 1.2;
}

.project-emoji-btn:hover {
  background: var(--surface);
  outline: 1px solid var(--border);
}

/* ── Mermaid text legibility ──────────────────────────────────────────────
   Every diagram variant funnels its text into --mermaid-text (which falls
   back to --text).  Grouped here to avoid repeating the same declaration
   a dozen times. */

/* SVG <text> elements and tspans (sequence, gantt, pie, class, ER, journey,
   requirement, mindmap, timeline, quadrant). */
.mermaid-diagram svg text,
.mermaid-diagram .messageText,
.mermaid-diagram .loopText tspan,
.mermaid-diagram .labelText tspan,
.mermaid-diagram .section,
.mermaid-diagram .pieTitleText,
.mermaid-diagram .legend text,
.mermaid-diagram .classTitle,
.mermaid-diagram .classText,
.mermaid-diagram .er.entityLabel,
.mermaid-diagram .journey .taskText,
.mermaid-diagram .journey .taskTextOutsideRight,
.mermaid-diagram .journey .taskTextOutsideLeft,
.mermaid-diagram .journey .sectionTitle,
.mermaid-diagram .reqLabelBox text,
.mermaid-diagram .mindmap-node text,
.mermaid-diagram .timeline-text,
.mermaid-diagram .quadrant text {
  fill: var(--mermaid-text, var(--text));
}

/* HTML-in-SVG (foreignObject divs and edge-label spans) needs `color`,
   not `fill`.  Grouped for the same reason. */
.mermaid-diagram .node .label,
.mermaid-diagram .node foreignObject div,
.mermaid-diagram .edgeLabel span,
.mermaid-diagram .edgeLabel p,
.mermaid-diagram .stateLabel .nodeLabel,
.mermaid-diagram .statediagram-state .nodeLabel {
  color: var(--mermaid-text, var(--text));
}

/* Edge / arrow label backgrounds */
.mermaid-diagram .edgeLabel,
.mermaid-diagram .edgeLabel rect {
  fill: var(--surface) !important;
}

/* Accent strokes */
.mermaid-diagram .actor,
.mermaid-diagram .er.attributeBoxOdd,
.mermaid-diagram .er.attributeBoxEven,
.mermaid-diagram .reqBox {
  stroke: var(--accent);
}

/* Gantt — active tasks use amber (like done tasks but amber instead of green) */
.mermaid-diagram .task.active rect,
.mermaid-diagram rect.task.active {
  fill: var(--warning) !important;
  stroke: var(--warning) !important;
}

/* Ensure Mermaid lines/arrows use theme line colour */
.mermaid-diagram .flowchart-link,
.mermaid-diagram .relation,
.mermaid-diagram .transition {
  stroke: var(--mermaid-line, var(--border));
}
.mermaid-diagram marker path {
  fill: var(--mermaid-line, var(--border));
  stroke: var(--mermaid-line, var(--border));
}

/* ── Clickable Math Formulas ── */
.math-evaluable {
  cursor: pointer;
  border-bottom: 1px dashed var(--math-underline);
  transition: opacity 0.15s;
}

/* Block (display) formulas: shrink the clickable container to fit-content so
   the dashed underline only appears beneath the equation itself, not across
   the full line width. */
.math-evaluable[display="true"] {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.math-evaluable:hover {
  opacity: 0.7;
}

/* Inline result (e.g. $x + y =$) */
.math-result {
  color: var(--math-result);
  margin-left: 0.25em;
}

/* Block result (e.g. $$x + y =$$) */
.math-result-block {
  display: block;
  text-align: left;
  margin-top: 0.4em;
  font-size: 1em;
}