/* Dialogs, the calculation lab, the inquiry form and the shared @formulab/ui controls, in the page's system.
 * TemplateControls portals the dialogs to <body> and draws Radix parts from the --fl-* tokens, so those are set here. */
:root {
  --fl-font-family: var(--font-body);
  --fl-color-canvas: var(--color-paper); --fl-color-surface: var(--color-paper); --fl-color-surface-subtle: var(--color-paper-2); --fl-color-surface-raised: var(--color-paper);
  --fl-color-text-primary: var(--color-ink); --fl-color-text-secondary: var(--color-ink-2); --fl-color-text-tertiary: var(--color-ink); --fl-color-text-inverse: var(--color-on-ink);
  --fl-color-text-placeholder: var(--color-muted); --fl-color-text-disabled: var(--color-muted);
  --fl-color-border: var(--color-rule); --fl-color-border-strong: var(--color-muted);
  --fl-color-action: var(--color-ink); --fl-color-action-hover: var(--color-ink-2); --fl-color-action-soft: var(--color-accent-wash);
  --fl-color-focus: var(--color-focus); --fl-color-overlay: var(--color-overlay);
  --fl-radius-xs: var(--radius-inner); --fl-radius-sm: var(--radius-inner); --fl-radius-control: var(--radius-inner); --fl-radius-md: var(--radius-card); --fl-radius-lg: var(--radius-card);
  --fl-shadow-raised: var(--shadow-pop); --fl-shadow-inset: 0 0 0 1px var(--color-rule); --fl-shadow-dialog: none;
  --fl-focus-ring: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-focus);
  --fl-motion-duration: var(--dur-short); --fl-motion-ease: var(--ease-out);
}

/* Dialog frame */
dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; padding: 0; border: 1px solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink-2); overscroll-behavior: contain; }
dialog.lab-dialog { width: min(980px, calc(100% - 32px)); }
dialog::backdrop { background: var(--color-overlay); }
.dialog-core { padding: var(--space-md) var(--space-xl) var(--space-xl); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.dialog-header .eyebrow { color: var(--color-muted); font-size: var(--text-sm); }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-pill); color: var(--color-ink-2); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.icon-button:hover { background: var(--color-paper-2); color: var(--color-ink); }
.icon-button:active { background: var(--color-paper-3); }
.icon-button .icon { width: 20px; height: 20px; }
dialog h2 { max-width: none; font-size: var(--text-2xl); line-height: 1.3; }
.lab-intro, .inquiry-intro { margin-top: var(--space-xs); color: var(--color-ink-2); }

/* The lab: the chart beside its readings, one rule between them. */
.experiment { margin-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.experiment-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.experiment-id { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.experiment-top h3 { margin-top: var(--space-3xs); font-size: var(--text-title); }
.experiment-status .small-dot { display: none; }
.experiment-body { display: grid; grid-template-columns: minmax(0, 1fr) 288px; }
.chart-panel { min-width: 0; padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-right: 1px solid var(--color-rule); }
.chart-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.metric-label { display: block; color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; }
.chart-heading p { margin-top: var(--space-3xs); color: var(--color-muted); font-size: var(--text-xs); }
.chart-heading .text-button { font-size: var(--text-sm); }
.chart-container { margin-top: var(--space-sm); }
.chart-container > svg { display: block; width: 100%; height: auto; min-height: 180px; overflow: visible; }
.chart-grid-line { stroke: var(--color-rule); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-label { fill: var(--color-muted); font-family: var(--font-outlier); font-size: 12px; }
.chart-series-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.series-leibniz { stroke: var(--color-accent); }
.series-nilakantha { stroke: var(--color-series-b); stroke-dasharray: 5 3; }
.series-point { stroke: var(--color-paper); stroke-width: 2; }
.point-leibniz { fill: var(--color-accent); }
.point-nilakantha { fill: var(--color-series-b); }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.chart-legend > span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legend-line { display: inline-block; width: 16px; height: 2px; }
.blue-line { background: var(--color-accent); }
.teal-line { background: var(--color-series-b); }
.axis-caption { margin-left: auto; }
.experiment-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.experiment-controls > label { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.run-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.button.run-button { min-height: 44px; gap: var(--space-xs); padding: 0 var(--space-lg); }
.run-button .icon { width: 16px; height: 16px; }
.results-panel { min-width: 0; padding: var(--space-md) 0 var(--space-md) var(--space-lg); }
.reference-value { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.reference-value .metric-label { color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; }
.reference-value > strong { display: block; margin-top: var(--space-3xs); font: 500 var(--text-lg)/1.4 var(--font-outlier); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result-card { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.result-card-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; }
.result-card-label > span:first-child { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill); }
.blue-dot { background: var(--color-accent); }
.teal-dot { background: var(--color-series-b); }
.result-term { color: var(--color-muted); font: 400 var(--text-xs)/1.4 var(--font-outlier); }
.result-card > strong { display: block; margin-top: var(--space-2xs); font: 500 var(--text-lg)/1.3 var(--font-outlier); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result-card[data-method="leibniz"] > strong { color: var(--color-accent-text); }
.result-card[data-method="nilakantha"] > strong { color: var(--color-series-b); }
.error-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs); margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.error-row code { color: var(--color-ink-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.progress-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); margin: var(--space-sm) 0 var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.progress-meta > span:last-child { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
progress { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--color-rule); accent-color: var(--color-accent); appearance: none; }
progress::-webkit-progress-bar { border-radius: 2px; background: var(--color-rule); }
progress::-webkit-progress-value { border-radius: 2px; background: var(--color-accent); }
progress::-moz-progress-bar { border-radius: 2px; background: var(--color-accent); }
.result-note { margin-block: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; }
.download-button { display: flex; align-items: center; gap: var(--space-xs); width: 100%; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.download-button:hover:enabled { border-color: var(--color-ink); }
.download-button:active:enabled { background: var(--color-paper-2); }
.download-button .icon { width: 16px; height: 16px; }
.download-button > span { margin-left: auto; color: var(--color-muted); font: 400 var(--text-xs) var(--font-outlier); }
.history-explorer { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.history-explorer label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; }
.history-explorer output { color: var(--color-muted); font: 400 var(--text-xs) var(--font-outlier); font-variant-numeric: tabular-nums; }
.history-explorer input { display: block; width: 100%; margin: var(--space-xs) 0 0; accent-color: var(--color-accent); }
.history-explorer .ui-control-mount { display: flex; width: 100%; margin-top: var(--space-2xs); }
.history-explorer p { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.history-reading { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-top: var(--space-xs); color: var(--color-ink-2); font: 400 var(--text-xs)/1.6 var(--font-outlier); font-variant-numeric: tabular-nums; }
.experiment-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-lg); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); }
.lab-disclaimer { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-xs); }

/* The inquiry form */
#inquiry-form { margin-top: var(--space-lg); }
.field-label { display: block; margin-bottom: var(--space-md); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; }
.field-label :is(input, textarea, select) { --ui-ring: var(--color-muted); display: block; width: 100%; min-height: 48px; margin-top: var(--space-xs); padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-inner); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); font-weight: 400; transition: border-color var(--dur-short) var(--ease-out); }
.field-label textarea { min-height: 144px; padding-block: var(--space-sm); line-height: 1.6; resize: vertical; }
.field-label :is(input, textarea)::placeholder { color: var(--color-muted); }
.field-label :is(input, textarea):hover { border-color: var(--color-ink-2); }
.field-label :is(input, textarea):disabled { opacity: 0.55; cursor: not-allowed; }
.field-label :is(input, textarea)[aria-invalid="true"] { border-color: var(--color-error); }
.field-label .ui-control-mount { display: flex; width: 100%; margin-top: var(--space-xs); }
.field-label .ui-select-trigger { width: 100%; }
.field-help { margin: calc(-1 * var(--space-xs)) 0 var(--space-md); color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; }
.char-counter { margin: calc(-1 * var(--space-sm)) 0 var(--space-md); color: var(--color-muted); font-size: var(--text-xs); text-align: right; font-variant-numeric: tabular-nums; }
.inquiry-mode { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-inner); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; }
.inquiry-consent { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin: 0 0 var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; }
.inquiry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.inquiry-actions .button { min-height: 48px; }
.inquiry-actions .text-button { margin-left: auto; }
.button.button-plain { border-color: var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); }
.button.button-plain:hover { border-color: var(--color-ink); background: var(--color-paper-2); color: var(--color-ink); }
.inquiry-result { min-height: 1lh; margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.copy-fallback { display: block; width: 100%; height: 160px; margin-top: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-inner); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); }

/* The information note */
#dialog-content { margin-top: var(--space-sm); color: var(--color-ink-2); line-height: 1.7; }
#dialog-content > * + * { margin-top: var(--space-sm); }
#dialog-content h3 { margin-top: var(--space-lg); font-size: var(--text-md); }
#dialog-content code { display: block; padding: var(--space-sm); border-radius: var(--radius-inner); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-xs); line-height: 1.6; overflow-wrap: anywhere; white-space: normal; }
.dialog-notice { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-inner); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); }
.button.dialog-confirm { width: 100%; margin-top: var(--space-lg); }

/* Shared Radix parts from @formulab/ui, sized to the page's controls */
.ui-select-trigger { height: 48px; min-height: 48px; padding: 0 var(--space-md); border-color: var(--color-muted); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.2 var(--font-body); }
.ui-select-trigger:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.experiment-controls .ui-select-trigger { height: 44px; min-height: 44px; min-width: 9rem; }
.ui-select-item { min-height: 44px; font-size: var(--text-md); }
.ui-slider:not(.ui-native-control) { height: 44px; }
.ui-slider-track { height: 4px; background: var(--color-rule); }
.ui-slider-range { background: var(--color-accent); }
.ui-slider-thumb { width: 22px; height: 22px; border-color: var(--color-accent); background: var(--color-paper); }
.ui-checkbox:not(.ui-native-control) { width: 20px; height: 20px; border-color: var(--color-muted); }

@media (max-width: 40rem) {
  dialog, dialog.lab-dialog { width: calc(100% - 24px); max-height: calc(100% - 24px); }
  .dialog-core { padding: var(--space-xs) var(--space-md) var(--space-lg); }
  .experiment-body { grid-template-columns: minmax(0, 1fr); }
  .chart-panel { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--color-rule); }
  .results-panel { padding-left: 0; }
  .inquiry-actions .text-button { margin-left: 0; }
}