/* regularization.css - migrated (.ui) page. Typography, sections, callouts, links, math, and the
 * demo control system come from the archetype (system/components/article-ui). This file keeps the
 * D3 chart styling and adds the integrated Models table, the regularization slider, and the
 * table + tabbed-controls layout for the visualization demo. */

/* --- Overview: the five methods as a compact table (method name + formula, row hairlines) --- */
.ui.regularization .fn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; }
.ui.regularization table.fn-table { width: 100%; border-collapse: collapse; }
.ui.regularization table.fn-table td { border-top: 1px solid var(--hairline); padding: 13px 0; vertical-align: middle; }
.ui.regularization table.fn-table tr:first-child td { border-top: 0; }
.ui.regularization table.fn-table td.fn-method { width: 1%; white-space: nowrap; padding-right: 30px; font: 600 13px/1.2 var(--font-sans); color: var(--text-2); }

/* --- Charts (D3 stays mostly data-driven; these set typography/axis colors) --- */
.ui.regularization .reg-svg,
.ui.regularization .coef-svg,
.ui.regularization .bv-svg { display: block; width: 100%; height: auto; }
.ui.regularization .coef-viz,
.ui.regularization .bv-viz { min-height: 220px; }
.ui.regularization .coef-info { font: 400 11.5px/1.5 var(--font-sans); color: var(--text-muted); margin-top: 8px; max-width: 60ch; }

.ui.regularization .reg-svg .tick text,
.ui.regularization .coef-svg .tick text,
.ui.regularization .bv-svg .tick text { fill: rgba(255, 255, 255, 0.62); }
.ui.regularization .coef-svg .tick text { font-size: 10px; }
.ui.regularization svg .domain,
.ui.regularization svg .tick line { stroke: rgba(255, 255, 255, 0.18); }
.ui.regularization .legend-text { font-size: 12px; fill: rgba(255, 255, 255, 0.8); }
.ui.regularization .axis-label { font-size: 12px; fill: rgba(255, 255, 255, 0.6); }
.ui.regularization .bv-placeholder,
.ui.regularization .plot-warning { font-size: 12px; fill: var(--text-muted); }
.ui.regularization .bv-overlay { pointer-events: all; }
.ui.regularization .bv-tooltip {
  position: absolute; pointer-events: none; left: 0; top: 0;
  background: var(--surface-strong, #141418); border: 1px solid var(--hairline-strong); border-radius: 8px;
  padding: 8px 10px; font: 400 12px/1.4 var(--font-sans); color: var(--text-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(2px);
  transition: opacity 80ms ease, transform 80ms ease; max-width: 260px; z-index: 5;
}
.ui.regularization .bv-tooltip.visible { opacity: 1; transform: translateY(0); }

/* --- Visualization demo lower section: Models table (left) + tabbed controls (right) --- */
.ui.regularization .demo-controls.reg-lower { grid-template-columns: 1.6fr 1fr; }
@container (max-width: 840px) { .ui.regularization .demo-controls.reg-lower { grid-template-columns: 1fr; } }
.ui.regularization .reg-models,
.ui.regularization .reg-controls-col { min-width: 0; }
.ui.regularization .metric-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Metric tables (Models + bias-variance summary). The Models table also carries a checkbox
   per row that toggles the curve; clicking a row selects the method (highlight). --- */
.ui.regularization table.metric-table { width: 100%; border-collapse: collapse; font: 500 11.5px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.ui.regularization table.metric-table th { text-align: right; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 9px; padding: 0 8px 9px; white-space: nowrap; }
.ui.regularization table.metric-table th:first-child { text-align: left; padding-left: 10px; }
.ui.regularization table.metric-table td { text-align: right; color: var(--text-2); padding: 7px 8px; border-top: 1px solid var(--hairline); white-space: nowrap; }
.ui.regularization table.metric-table td:first-child { text-align: left; }
.ui.regularization table.metric-table tbody tr { cursor: pointer; }
.ui.regularization .m-wrap { display: flex; align-items: center; gap: 9px; padding-left: 10px; }
.ui.regularization .m-check { accent-color: var(--accent); width: 14px; height: 14px; flex: none; cursor: pointer; }
.ui.regularization .m-sw { width: 15px; height: 3px; border-radius: 2px; flex: none; }
.ui.regularization table.metric-table tr.off .m-sw { opacity: 0.3; }
.ui.regularization table.metric-table tr.off .m-label { color: var(--text-muted); }
.ui.regularization table.metric-table tr.selected td { background: var(--accent-muted); }
.ui.regularization table.metric-table tr.selected td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.ui.regularization table.metric-table tr.selected .m-label { color: #fff; }

/* --- Regularization slider + readout (Function params tab) --- */
.ui.regularization .reg-range { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: var(--hairline-strong); margin: 12px 0 8px; cursor: pointer; }
.ui.regularization .reg-range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.ui.regularization .reg-range::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }
.ui.regularization .reg-readout { font: 500 12.5px/1 var(--font-mono); color: var(--text-2); }