/*
 * Quanta Model Configuration (js/views/views_model_config.js, #quanta-models).
 * Theme tokens and the canonical breakpoints only; buttons, fields, tables and dialogs come from HX.ui.
 */
[data-view="quanta-models"] .mc-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cds-spacing-04); margin: 0 0 var(--cds-spacing-05); }
[data-view="quanta-models"] .mc-notes .ct-note { margin: 0; }
[data-view="quanta-models"] .mc-sec { margin-top: var(--cds-spacing-06); min-width: 0; }
[data-view="quanta-models"] .mc-sec > .hx-h3:first-child { margin-top: 0; }
[data-view="quanta-models"] .mc-gap { margin-top: var(--cds-spacing-05); }
[data-view="quanta-models"] .mc-acts { margin-top: var(--cds-spacing-05); }
[data-view="quanta-models"] .mc-blocked { display: block; margin-top: var(--cds-spacing-02); }

/* the chain of targets, in order */
.mc-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cds-spacing-02) var(--cds-spacing-03); counter-reset: mc-step; }
.mc-chain__step { counter-increment: mc-step; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-02); padding: var(--cds-spacing-01) var(--cds-spacing-03); border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); color: var(--cds-text-primary); font-size: var(--f-ms); min-width: 0; overflow-wrap: anywhere; }
.mc-chain__step::before { content: counter(mc-step) "."; color: var(--cds-text-secondary); }
.mc-chain__step.is-off { color: var(--cds-text-secondary); border-style: dashed; }

/* the routing dialog's steps */
.mc-steps { list-style: none; margin: 0 0 var(--cds-spacing-04); padding: 0; display: flex; flex-direction: column; gap: var(--cds-spacing-04); }
.mc-step { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; gap: var(--cds-spacing-04); align-items: end; padding: var(--cds-spacing-04); border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); }
.mc-step .hx-field { margin: 0; }
.mc-step__acts { display: flex; gap: var(--cds-spacing-02); }

/* the connection dialog's custom headers */
.mc-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--cds-spacing-04); align-items: end; margin: 0 0 var(--cds-spacing-04); }
.mc-header .hx-field { margin: 0; }

/* tuning: each setting with the value in force under it */
.mc-tune__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--cds-spacing-04) var(--cds-spacing-05); }
.mc-tune__item { min-width: 0; }
.mc-tune__item .hx-field { margin-bottom: var(--cds-spacing-02); }
.mc-tune__item[data-key="preamble"] { grid-column: 1 / -1; }
.mc-eff { display: block; font-size: var(--f-sm); color: var(--cds-text-secondary); overflow-wrap: anywhere; }
.mc-eff strong { color: var(--cds-text-primary); font-weight: 600; }
.mc-dl { margin-top: var(--cds-spacing-04); }
.mc-dl dd { overflow-wrap: anywhere; }

/* budgets */
.mc-meter { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); white-space: nowrap; }
.mc-meter__bar { width: 6rem; height: var(--cds-spacing-03); appearance: none; border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-accent-01, var(--cds-layer-02)); }
.mc-meter__bar::-webkit-progress-bar { background: var(--cds-layer-accent-01, var(--cds-layer-02)); }
.mc-meter__bar::-webkit-progress-value { background: var(--cds-support-success); }
.mc-meter__bar::-moz-progress-bar { background: var(--cds-support-success); }
.mc-meter__bar.is-warning::-webkit-progress-value { background: var(--cds-support-warning); }
.mc-meter__bar.is-warning::-moz-progress-bar { background: var(--cds-support-warning); }
.mc-meter__bar.is-exhausted::-webkit-progress-value { background: var(--cds-support-error); }
.mc-meter__bar.is-exhausted::-moz-progress-bar { background: var(--cds-support-error); }

/* evaluation */
.mc-evhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-03); margin: 0 0 var(--cds-spacing-04); }
.mc-evhead .hx-h3 { margin: 0; }
.mc-evside { margin: 0; }
.mc-sample { font-family: var(--cds-font-mono); overflow-wrap: anywhere; }

/* the gateway: policy form, rules, dry-run output */
.mc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--cds-spacing-03) var(--cds-spacing-05); margin-block-start: var(--cds-spacing-04); }
.mc-rule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) auto; gap: var(--cds-spacing-04); align-items: end; margin-block-end: var(--cds-spacing-04); }
.mc-rule .hx-field { margin: 0; }
.mc-pre { margin: 0; padding: var(--cds-spacing-04); border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); color: var(--cds-text-primary); font-family: var(--cds-font-mono); font-size: var(--f-sm); white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 20rem; overflow: auto; }

/* the usage tab's totals: Model Configuration loads on its own, without the studios' nx base (network.css), so the
   tile is drawn here from tokens: a bordered grid, label over figure over note */
[data-view="quanta-models"] .nx-kpis.mc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-block: var(--cds-spacing-05); border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); }
[data-view="quanta-models"] .mc-kpis .nx-kpi { display: flex; flex-direction: column; gap: var(--cds-spacing-01); min-width: 0; padding: var(--cds-spacing-04) var(--cds-spacing-05); border-inline-end: 1px solid var(--cds-border-subtle-01); }
[data-view="quanta-models"] .mc-kpis .nx-kpi:last-child { border-inline-end: 0; }
[data-view="quanta-models"] .mc-kpis .nx-kpi-label { font-size: var(--cds-label-01); color: var(--cds-text-secondary); }
[data-view="quanta-models"] .mc-kpis .nx-kpi-value { font-size: var(--f-figure); line-height: 30px; font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
[data-view="quanta-models"] .mc-kpis .nx-kpi-sub { font-size: var(--f-xs); line-height: 16px; color: var(--cds-text-helper); }
[data-view="quanta-models"] .mc-kpis .nx-kpi[data-tone="warn"] { box-shadow: inset 0 var(--cds-spacing-02) 0 var(--cds-support-warning); }   /* the accent, not the figure: yellow text fails contrast on the light layer */

@media (max-width: 1055px) {
  [data-view="quanta-models"] .mc-notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 671px) {
  [data-view="quanta-models"] .mc-col-main { min-width: 11rem; }
  [data-view="quanta-models"] .nx-kpis.mc-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-step, .mc-header, .mc-rule { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .mc-step__acts { justify-content: flex-start; }
  .mc-tune__grid { grid-template-columns: minmax(0, 1fr); }
}

/* a long unbroken name or model id wraps inside a capped cell instead of widening the table past the page */
[data-view="quanta-models"] .hx-table td, [data-view="quanta-models"] .hx-table tbody th { overflow-wrap: anywhere; }
[data-view="quanta-models"] .hx-table tbody th strong,
[data-view="quanta-models"] .hx-table td strong,
[data-view="quanta-models"] .hx-table td code { display: inline-block; max-inline-size: 16rem; overflow-wrap: anywhere; white-space: normal; vertical-align: top; }

/* the key cell stays on one line, and the row's actions sit in a grid of three (a ragged second line otherwise) */
.mc-nowrap { white-space: nowrap; }
[data-view="quanta-models"] .mc-col-main { min-width: 11rem; }
[data-view="quanta-models"] .hx-table td.hx-actions .hx-row { display: grid; grid-template-columns: repeat(3, max-content); justify-content: end; gap: var(--cds-spacing-02) var(--cds-spacing-03); margin-block-start: 0; }