/* visualizer.css - Distribution Visualizer tool, migrated to the dark flat (.ui) aesthetic.
 * A plots-led tool layout (plots -> controls -> details), not the article archetype. */

/* container width + rail positioning come from article-ui.css (.ui.has-section-outline), matching
   the other pages. */
.ui.distributions .page-head { margin-bottom: var(--sp-5); }

/* ---------- Plots ---------- */
.ui.distributions .dv-plots { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.ui.distributions .dv-plot { border: 1px solid var(--hairline); border-radius: var(--radius-md); background: #080809; padding: 12px 14px 6px; min-width: 0; }
.ui.distributions .dv-plot-title { font: 600 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.ui.distributions .dv-plot-host { width: 100%; }
.ui.distributions .dv-plot-host svg { display: block; width: 100%; }
/* d3 axes, dark */
.ui.distributions .axis path.domain,
.ui.distributions .axis line { stroke: var(--hairline-strong); shape-rendering: crispEdges; }
.ui.distributions .axis text { fill: var(--text-muted); font: 500 10px var(--font-mono); font-variant-numeric: tabular-nums; }
.ui.distributions .series-pdf path.line,
.ui.distributions .series-cdf path.line { stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Toolbar ---------- */
.ui.distributions .dv-toolbar { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; margin-bottom: 4px; }
.ui.distributions .dv-field { display: flex; flex-direction: column; gap: 7px; }
.ui.distributions .dv-flabel { font: 600 9.5px/1.2 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); }
.ui.distributions .dv-xrange { display: flex; align-items: center; gap: 9px; }
.ui.distributions .dv-to { color: var(--text-muted); font-size: 12px; }
.ui.distributions .dv-num { width: 60px; text-align: center; background: none; border: 0; border-bottom: 1px solid var(--hairline-strong); color: #e7e8ec; font: 500 13px/1.2 var(--font-mono); padding: 4px 2px; }
.ui.distributions .dv-num:focus { outline: none; border-bottom-color: var(--accent); }
.ui.distributions input[type=number].dv-num { -moz-appearance: textfield; appearance: textfield; }
.ui.distributions .dv-num::-webkit-outer-spin-button,
.ui.distributions .dv-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ui.distributions .dv-toolbar-actions { margin-left: auto; display: flex; gap: 10px; align-items: flex-end; }

/* tool buttons (chips), overriding the archetype text-button look */
.ui.distributions .btn { font: 500 12px/1 var(--font-sans); color: var(--text-2); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 7px; padding: 9px 14px; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.ui.distributions .btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); }
.ui.distributions .btn.btn-acc { color: #fff; background: var(--accent); border-color: var(--accent); }
.ui.distributions .btn.btn-acc:hover { background: #5968f0; }

/* ---------- Distribution rows ---------- */
.ui.distributions .forms { margin: 16px 0 30px; }
.ui.distributions .form-card { display: flex; align-items: flex-end; gap: 18px; padding: 13px 0; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.ui.distributions .form-card:first-child { border-top: 0; }
.ui.distributions .form-swatch { width: 14px; height: 14px; padding: 0; border: 0; border-radius: 3px; background: none; cursor: pointer; flex: none; margin-bottom: 7px; }
.ui.distributions .form-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.ui.distributions .form-swatch::-webkit-color-swatch { border: 0; border-radius: 3px; }
.ui.distributions .form-swatch::-moz-color-swatch { border: 0; border-radius: 3px; }
.ui.distributions .form-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui.distributions .form-col.params { flex-direction: row; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.ui.distributions .form-col.actions { margin-left: auto; }
/* natural case: param labels carry Greek symbols (mu/sigma/lambda) that text-transform:uppercase
   would turn into Latin-looking capitals (M / E / A). */
.ui.distributions .form-col label,
.ui.distributions .param-item label { font: 600 10px/1.2 var(--font-sans); letter-spacing: .02em; text-transform: none; color: var(--text-muted); }
.ui.distributions .form-card select,
.ui.distributions .form-card input[type=number],
.ui.distributions .form-card input[type=text] { appearance: none; background: none; color: #e7e8ec; border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; padding: 5px 2px; font: 500 13px/1.2 var(--font-sans); }
.ui.distributions .form-card select { padding-right: 20px; cursor: pointer; min-width: 120px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%237a7c84' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 9px; }
.ui.distributions .form-card input[type=number] { width: 72px; font-family: var(--font-mono); }
.ui.distributions .form-card input:focus,
.ui.distributions .form-card select:focus { outline: none; border-bottom-color: var(--accent); }
.ui.distributions .form-card input[type=number]::-webkit-outer-spin-button,
.ui.distributions .form-card input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ui.distributions .form-card input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ui.distributions .param-item { display: flex; flex-direction: column; gap: 6px; }
.ui.distributions .form-col.actions button { background: none; border: 0; color: var(--text-muted); font: 500 12px/1 var(--font-sans); cursor: pointer; padding: 7px 0; }
.ui.distributions .form-col.actions button:hover { color: #ff8f8f; }

/* ---------- Mixture (nested components) ---------- */
.ui.distributions .form-card .add-component-button { background: none; border: 0; color: var(--accent-link); font: 500 12px/1 var(--font-sans); cursor: pointer; padding: 6px 0; }
.ui.distributions .mixture-empty-message { color: var(--text-muted); font: 400 12.5px/1.5 var(--font-sans); font-style: italic; }
.ui.distributions .mixture-components { flex-basis: 100%; margin: 8px 0 2px; padding-left: 16px; border-left: 2px solid var(--hairline-strong); }
/* compact single-row component: type, weight (+ inline share), params, remove */
.ui.distributions .mixture-component { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--hairline); }
.ui.distributions .mixture-component:first-child { border-top: 0; }
.ui.distributions .mixture-input { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ui.distributions .mixture-input label { font: 600 10px/1.2 var(--font-sans); letter-spacing: .02em; text-transform: none; color: var(--text-muted); }
.ui.distributions .mixture-input input { background: none; color: #e7e8ec; border: 0; border-bottom: 1px solid var(--hairline-strong); padding: 5px 2px; font: 500 13px/1.2 var(--font-mono); width: 60px; }
.ui.distributions .mixture-input input:focus { outline: none; border-bottom-color: var(--accent); }
.ui.distributions .mixture-input input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ui.distributions .mixture-input input[type=number]::-webkit-outer-spin-button,
.ui.distributions .mixture-input input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ui.distributions .component-type-select { appearance: none; background: none; color: #e7e8ec; border: 0; border-bottom: 1px solid var(--hairline-strong); padding: 5px 18px 5px 2px; font: 500 13px/1.2 var(--font-sans); cursor: pointer; min-width: 110px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%237a7c84' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 9px; }
.ui.distributions .component-type-select:focus { outline: none; border-bottom-color: var(--accent); }
/* weight field: input + inline share bar/percentage on one row */
.ui.distributions .mc-weight-row { display: flex; align-items: center; gap: 12px; }
.ui.distributions .mc-weight-row input { width: 54px; }
.ui.distributions .mix-share { display: flex; align-items: center; gap: 8px; }
.ui.distributions .mix-wbar { position: relative; height: 3px; width: 46px; background: var(--hairline-strong); border-radius: 2px; }
.ui.distributions .mix-wbar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); }
.ui.distributions .mix-wpct { font: 500 11px/1 var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 30px; }
/* remove (x), aligned to the end of the row */
.ui.distributions .mixture-remove-btn { margin-left: auto; align-self: flex-end; background: none; border: 0; color: var(--text-muted); font: 400 19px/1 var(--font-sans); cursor: pointer; padding: 0 2px 4px; }
.ui.distributions .mixture-remove-btn:hover { color: #ff8f8f; }

/* ---------- Active distribution details ---------- */
.ui.distributions .dv-seclbl { font: 600 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.ui.distributions #distributions-details { display: flex; flex-direction: column; }
.ui.distributions .no-distributions { color: var(--text-muted); font: 400 13px/1.6 var(--font-sans); font-style: italic; }
/* each active distribution sits behind a left rail in its own plot color (--indicator-color),
   which separates the blocks and ties each to its curve in the charts. */
.ui.distributions .distribution-detail { border-left: 2px solid var(--indicator-color, var(--accent)); padding: 2px 0 4px 20px; margin-top: 34px; }
.ui.distributions .distribution-detail:first-child { margin-top: 0; }
.ui.distributions .distribution-detail h3 { font: 600 14px/1 var(--font-sans); color: #e7e8ec; margin: 0 0 14px; }
/* the rail carries the color, so the header swatch is redundant */
.ui.distributions .distribution-detail h3 .color-indicator { display: none; }
.ui.distributions .color-indicator { width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block; background: var(--indicator-color, var(--accent)); }
/* per-distribution property table: label column + math value column */
.ui.distributions .dv-ptable { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.ui.distributions .dv-ptable td { border-top: 1px solid var(--hairline); padding: 11px 16px 11px 0; vertical-align: middle; }
.ui.distributions .dv-ptable tr:first-child td { border-top: 0; }
.ui.distributions .dv-ptable .dv-pk { width: 150px; white-space: nowrap; vertical-align: top; padding-top: 14px; }
.ui.distributions .dv-plabel { font: 600 9.5px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ui.distributions .dv-pv { color: var(--text-2); }
/* flat math display: keep the .formula component but drop its left accent wall */
.ui.distributions .dv-pv .formula { margin: 0; border-left: 0; padding-left: 0; }
.ui.distributions .dv-pv mjx-container { text-align: left !important; margin: 0 !important; color: #eceef3; }
.ui.distributions .dv-uc-lbl { font: 600 9.5px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.ui.distributions .distribution-detail .properties { display: flex; gap: 34px; flex-wrap: wrap; margin: 0 0 12px; }
.ui.distributions .distribution-detail .property { display: flex; flex-direction: column; gap: 4px; }
.ui.distributions .distribution-detail .property strong { font: 600 9.5px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ui.distributions .distribution-detail .property .prop-value,
.ui.distributions .distribution-detail .property span { color: var(--text-2); font-size: 13px; }
.ui.distributions .distribution-detail .use-cases { margin: 6px 0 0; }
.ui.distributions .distribution-detail .use-cases strong { display: block; font: 600 9.5px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
.ui.distributions .distribution-detail .use-case { font: 400 12.5px/1.6 var(--font-sans); color: var(--text-body); }
.ui.distributions .distribution-detail ul { margin: 0; padding-left: 18px; }
.ui.distributions .distribution-detail li { font: 400 12.5px/1.7 var(--font-sans); color: var(--text-body); }
/* mixture component list inside a detail */
.ui.distributions .mixture-detail-list { display: flex; flex-direction: column; gap: 7px; }
.ui.distributions .mixture-detail-item { display: flex; align-items: center; gap: 10px; font: 500 12.5px/1.3 var(--font-sans); color: var(--text-2); }
.ui.distributions .mixture-detail-item .w { font-family: var(--font-mono); color: var(--accent-link); width: 44px; }

@media (max-width: 760px) {
  .ui.distributions .dv-plots { grid-template-columns: 1fr; }
  .ui.distributions .dv-toolbar-actions { margin-left: 0; }
}