/* Modelling lab — uses the site's theme tokens (kh.css), so light and
   dark themes follow the header toggle. */
.ml { padding-bottom: 4rem; }
.ml-meta, .ml-note { color: var(--text-2); font-size: var(--fs-small, .875rem); }
.ml-note { margin: .5rem 0; }
.ml-messages { margin: 1rem 0; }
.ml-section, .ml .kh-tool__section { margin-top: 2.25rem; }
.ml-h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.ml-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
.ml-inline { display: inline; margin: 0; }
.ml-form { display: grid; gap: 1rem; max-width: 100%; }
.ml-form--inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; max-width: 40rem; }
@media (max-width: 600px) { .ml-form--inline { grid-template-columns: 1fr; } }
.ml-fieldset { border: 1px solid var(--border); border-radius: var(--radius, 10px); padding: 1rem 1.1rem; margin: 0; display: grid; gap: .6rem; min-width: 0; }
.ml-fieldset legend { font-weight: 700; padding: 0 .4rem; }
.ml-features, .ml-algos { display: grid; gap: .4rem; }
.ml-algos[hidden] { display: none; }
.ml-table th, .ml-table td { vertical-align: top; }
.ml-table .is-chosen { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ml-table--raw .is-header { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ml-raw { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: var(--fs-caption, .8125rem); }
.ml-raw span { border-inline-start: 1px solid var(--border-soft); padding-inline-start: .5rem; }
.ml-reason { font-size: var(--fs-caption, .8125rem); max-width: 22rem; }
.ml-locked { white-space: nowrap; }
.ml-status { display: inline-block; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--border); font-size: var(--fs-caption, .8125rem); }
.ml-status--complete { border-color: var(--pos); color: var(--pos); }
.ml-status--failed { border-color: var(--neg); color: var(--neg); }
.ml-status--queued, .ml-status--preparing, .ml-status--training, .ml-status--evaluating { border-color: var(--accent); color: var(--accent); }
.ml-progressbar { height: .6rem; border-radius: 999px; background: var(--border-soft); overflow: hidden; max-width: 36rem; }
.ml-progressbar span { display: block; height: 100%; background: var(--accent); transition: width var(--dur, .3s) var(--ease, ease); }
.ml-progress { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; margin: 1rem 0; counter-reset: step; font-size: var(--fs-small, .875rem); }
.ml-progress li { counter-increment: step; opacity: .6; }
.ml-progress li::before { content: counter(step, persian) ". "; }
.ml-progress .is-done { opacity: .85; }
.ml-progress .is-current { opacity: 1; font-weight: 700; color: var(--accent); }
.ml-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; padding-inline-start: 1.2rem; }
.ml-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin: .75rem 0 1rem; }
.ml-kpi { border: 1px solid var(--border); border-radius: var(--radius, 10px); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .15rem; background: var(--surface); }
.ml-kpi__label { font-size: var(--fs-caption, .8125rem); }
.ml-kpi__value { font-size: 1.5rem; font-weight: 700; }
.ml-kpi__note { font-size: var(--fs-caption, .8125rem); opacity: .8; }
.ml-narrative { padding-inline-start: 1.2rem; display: grid; gap: .35rem; }
.ml-figure { margin: 1.25rem 0; }
.ml-figure figcaption { font-size: var(--fs-small, .875rem); opacity: .85; margin-top: .3rem; }
.ml-chart { width: 100%; max-width: 640px; height: auto; display: block; color: var(--text); }
.ml-warnings li { color: var(--text); }
.ml-threshold { border: 1px solid var(--border); border-radius: var(--radius, 10px); padding: 1rem; margin: 1rem 0; }
.ml-threshold input[type=range] { width: 100%; max-width: 28rem; }
.ml-glossary dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .3rem 1rem; }
.ml-glossary dt { font-weight: 700; }
.ml-glossary dd { margin: 0; }
@media (max-width: 600px) { .ml-glossary dl { grid-template-columns: 1fr; } .ml-glossary dd { margin-bottom: .5rem; } }
.ml-danger { border-top: 1px solid var(--border); padding-top: 1rem; }
.ml-danger-link { margin-top: 2.5rem; font-size: var(--fs-small, .875rem); }
.ml-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ml-auth { max-width: 28rem; padding-bottom: 4rem; }
.ml-logout { margin-top: 1rem; }
.ml-before { margin-bottom: 1rem; }