/* ============================================================
   Shared theme for interactive widgets
   Applied globally via conf.py html_css_files
   ============================================================ */

/* --- Container --- */
.widget-container {
  margin: 1.2em 0;
  font-family: system-ui, -apple-system, sans-serif;
}

/* --- Canvas --- */
.widget-canvas {
  display: block;
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #fafafa;
}
.widget-canvas-dark {
  display: block;
  width: 100%;
  border: 1px solid #555;
  border-radius: 6px;
  background: #1a1a2e;
}

/* --- Controls row --- */
.widget-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
  font-size: 15px;
  font-family: system-ui, -apple-system, sans-serif;
}

/* --- Buttons --- */
.widget-btn {
  padding: 8px 18px;
  min-height: 36px;
  cursor: pointer;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: #f0f0f0;
  font-size: 14px;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.widget-btn:hover {
  background: #e4e4e4;
}
.widget-btn-active {
  background: #e0f0fa;
  border-color: #2E86AB;
  color: #1a5276;
  font-weight: 600;
}
.widget-btn-primary {
  background: #2E86AB;
  color: #fff;
  border: none;
  font-weight: 600;
}
.widget-btn-primary:hover {
  background: #256d8a;
}
.widget-btn-danger {
  background: #C73E1D;
  color: #fff;
  border: none;
  font-weight: 600;
}

/* --- Sliders --- */
.widget-slider {
  width: 180px;
  accent-color: #2E86AB;
}

/* --- Labels --- */
.widget-label {
  font-weight: 500;
  font-size: 15px;
}
.widget-value {
  font-weight: 700;
  color: #2E86AB;
  min-width: 36px;
  display: inline-block;
}
.widget-value-red {
  font-weight: 700;
  color: #C73E1D;
  min-width: 36px;
  display: inline-block;
}
.widget-unit {
  color: #888;
}

/* --- Hint text --- */
.widget-hint {
  color: #777;
  font-size: 13px;
  margin-top: 6px;
  font-family: system-ui, -apple-system, sans-serif;
}

/* --- Matrix display --- */
.widget-matrix {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 14px;
  background: #f4f4f4;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 8px;
  line-height: 1.6;
  color: #333;
  white-space: pre;
}

/* --- Formula display (monospace, centered, larger than hint) --- */
.widget-formula {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 15px;
  text-align: center;
  margin-top: 8px;
  color: #444;
}

/* --- Step indicator (prominent hint) --- */
.widget-step-indicator {
  font-weight: 600;
  font-size: 15px;
  color: #333;
  margin-top: 6px;
  font-family: system-ui, -apple-system, sans-serif;
}

/* --- Bold label variant --- */
.widget-label-bold {
  font-weight: 700;
  font-size: 15px;
}

/* --- Operator button variant (bold, larger text) --- */
.widget-btn-op {
  font-weight: 700;
  font-size: 16px;
}

/* --- Code block with smaller font --- */
.widget-matrix-sm {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  background: #f4f4f4;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 12px;
  line-height: 1.5;
  color: #333;
  white-space: pre;
  overflow-x: auto;
}

/* --- Stats display (slightly smaller than controls) --- */
.widget-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 10px;
  font-size: 14px;
  font-family: system-ui, -apple-system, sans-serif;
}

/* --- Formula line inside matrix (centered, slightly larger) --- */
.widget-matrix-formula {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 15px;
  background: #f4f4f4;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 8px;
  line-height: 1.6;
  color: #333;
  white-space: pre;
  min-height: 24px;
  text-align: center;
}

/* --- Caption below canvas (small, muted) --- */
.widget-caption {
  font-size: 14px;
  color: #aaa;
  margin-top: 4px;
}

/* --- Dark-theme button variants (for image-display widgets) --- */
.widget-btn-dark {
  padding: 8px 18px;
  min-height: 36px;
  cursor: pointer;
  border: 2px solid #444;
  border-radius: 6px;
  background: #2a2a3e;
  color: #ddd;
  font-size: 14px;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.widget-btn-dark:hover {
  background: #3a3a5e;
}
.widget-btn-dark-active {
  background: #2E86AB;
  border-color: #2E86AB;
  color: #fff;
  font-weight: 600;
}

/* --- Consistent canvas font sizes (drawn via JS) ---
   Reference for JS authors:
   - Panel titles:    bold 15px system-ui
   - Axis tick labels: 14px system-ui
   - Axis labels:     bold 15px system-ui
   - Legend text:      14px system-ui
   - Info/stats text:  14px system-ui
   - Empty state:      16px system-ui
   -------------------------------------------------- */