/* The Cost optimization panel (home page, 25 Oct 2026; Dom: "we use the
   best, least-cost model to do the work", cost optimization at the core,
   in the background).
   ------------------------------------------------------------------
   One run on the left: five tasks of a lead qualification, each run on
   the model that does it well for the least (a fast or open model to
   read and look up, stronger ones to research, write and decide). A chip
   on each task lands on its model, with dots for what the task costs. On
   the right, the cost of 1,000 runs like it builds up twice as the tasks
   finish: the strongest model on every task, and cost-optimized by Askpilot. No
   figures: a shape, not a promise (as the cost box in How Askpilot
   executes). Every word is in the markup, so the panel is complete with
   CSS and JS off; js/model-routing.js only steps the beats. */

.mr-stage {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: center;   /* the cost card in the middle of the run (Dom) */
    max-width: 940px; margin: 0 auto;
}
/* one grey line joins the run to its cost (Dom): across the gap, at the
   middle of the cost card; down the gap when the cards stack */
.mr-sum::before {
    content: ""; position: absolute; top: 50%; left: -57.5px; width: 56px; height: 1.5px; background: #D9D0CD;
}

/* ---------- the run ---------- */
.mr-run {
    background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(22, 18, 26, .04), 0 18px 40px -28px rgba(22, 18, 26, .3);
}
.mr-run-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mr-run-h img { display: block; width: 18px; height: 18px; }
.mr-run-h b { font-size: .9375rem; font-weight: 750; color: var(--ink); }
.mr-run-h span { margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--muted); }
.mr-steps { list-style: none; margin: 0; padding: 6px 0; }
.mr-step {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 11px 18px; transition: background-color .3s ease;
}
.mr-step + .mr-step { border-top: 1px solid #F3EEEC; }
.mr-step.is-doing { background: var(--pink-wash, #FFF3FF); }
.mr-n {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: #F4EFED; color: var(--muted); font-size: .6875rem; font-weight: 800;
    transition: background-color .3s ease, color .3s ease;
}
.mr-step.is-doing .mr-n { background: var(--brand-magenta, #D53BD5); color: #fff; }
.mr-step.is-done .mr-n { background: var(--ink); color: #fff; }
.mr-t { min-width: 0; font-size: .9063rem; font-weight: 600; line-height: 1.35; color: var(--ink); }

/* the chip: the model the task ran on, and what the task cost */
.mr-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); white-space: nowrap;
    font-size: .75rem; font-weight: 700; color: var(--ink);
    transition: opacity .3s ease, transform .3s ease;
}
.mr-chip i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F7F3F1; }
.mr-chip i img, .mr-chip i svg { display: block; width: 13px; height: 13px; }
.mr-chip i svg { color: var(--body); }
.mr-chip small { font-size: .6875rem; font-weight: 650; color: var(--muted); }
.mr-cost { display: inline-flex; gap: 2px; margin-left: 2px; }
.mr-cost u { width: 5px; height: 5px; border-radius: 50%; background: #E6DFDC; text-decoration: none; }
.mr-cost u.on { background: var(--brand-magenta, #D53BD5); }

/* open models: three round marks in a row, overlapping (MiniMax, Z.ai and
   the code mark for any other open model), as the integration logo stacks */
.mr-stack { display: inline-flex; align-items: center; flex: none; }
.mr-stack i {
    display: grid; place-items: center; width: 20px; height: 20px; margin-left: -6px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--line, #EAE3E1);
}
.mr-stack i:first-child { margin-left: 0; }
.mr-stack img, .mr-stack svg { display: block; width: 12px; height: 12px; }
.mr-stack svg { color: var(--body); }
.mr-logos .mr-stack i, .mr-models .mr-stack i { width: 24px; height: 24px; }
.mr-logos .mr-stack img, .mr-logos .mr-stack svg, .mr-models .mr-stack img, .mr-models .mr-stack svg { width: 14px; height: 14px; }

/* ---------- the cost of the run ---------- */
.mr-sum {
    position: relative; padding: 20px; border-radius: 18px; background: var(--surface, #fff); border: 1.5px solid var(--ink);   /* the black outline (Dom) */
    box-shadow: 0 1px 2px rgba(22, 18, 26, .04), 0 18px 40px -28px rgba(22, 18, 26, .3);
}
.mr-sum-k { margin: 0; font-size: 1.375rem; font-weight: 780; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }   /* a title, not a label (Dom) */
.mr-bar { margin-top: 16px; }
.mr-bar p { display: flex; justify-content: space-between; margin: 0 0 7px; font-size: .8125rem; font-weight: 650; color: var(--body); }
.mr-bar b { font-weight: 750; color: var(--ink); }
.mr-track { height: 10px; border-radius: 999px; background: #F4EFED; overflow: hidden; }
.mr-fill { display: block; height: 100%; width: var(--w, 100%); border-radius: inherit; transition: width .6s cubic-bezier(.3, .7, .3, 1); }
.mr-bar--big .mr-fill { background: #CFC6C3; }
.mr-bar--best .mr-fill { background: linear-gradient(90deg, var(--brand-magenta, #D53BD5), #F27BE6 60%, var(--brand-blue, #4C6BEE)); }
.mr-note { display: flex; gap: 8px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.45; font-weight: 600; color: var(--body); text-wrap: pretty; }
.mr-note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--brand-magenta, #D53BD5); }
.mr-logos { display: flex; gap: 6px; margin-top: 14px; }
.mr-logos span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid var(--line); }
.mr-logos img, .mr-logos svg { display: block; width: 16px; height: 16px; }
.mr-logos svg { color: var(--body); }

/* ---------- playing (js/model-routing.js adds .is-play) ---------- */
.mr.is-play .mr-step:not(.is-doing):not(.is-done) .mr-chip { opacity: 0; transform: translateY(4px); }
.mr.is-play .mr-step.is-doing .mr-chip.is-picking { opacity: .55; }

@media (max-width: 860px) {
    .mr-stage { grid-template-columns: 1fr; gap: 32px; }
    .mr-sum::before { top: -33.5px; left: 50%; width: 1.5px; height: 32px; }
}
@media (max-width: 520px) {
    .mr-step { grid-template-columns: 22px minmax(0, 1fr); row-gap: 8px; }
    .mr-chip { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .mr-fill, .mr-chip, .mr-step, .mr-n { transition: none; }
}