/* Midas landing — "Parameters" block, embedded in the "How the bot works"
   modal (js/how-modals.js, js/params-block.js). Ported from the research
   prototype at research/params_block/ (SPEC.md there has the math and the
   design rationale). Additive rules only: fonts, --gold/--surface/--line
   tokens, .container, .chip/.chip-group and input[type=range] all come from
   style.css, loaded before this file. --warn matches panel-demo.js's
   C.WARN (#D9A441) so the risk badge uses the same amber as the live panel. */

:root{
  --warn:#D9A441;
  --warn-glow:rgba(217,164,65,.16);
}

.how-modal-params{max-width:980px;}

.how-modal-lede{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:14px 0 0;}
.how-modal-lede + .how-modal-lede{margin-top:2px;}

.params-layout{
  display:grid;grid-template-columns:1.15fr 0.85fr;gap:28px;align-items:start;margin-top:22px;
}
@media(max-width:860px){
  .params-layout{grid-template-columns:1fr;gap:24px;}
}

/* ---------- cards (accordion, same <details>/summary pattern as .faq-item) ---------- */
.params-cards{display:flex;flex-direction:column;gap:14px;}

.param-card{
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:16px;
  overflow:hidden;transition:border-color .2s ease;
}
.param-card summary{list-style:none;cursor:pointer;}
.param-card summary::-webkit-details-marker{display:none;}

.param-card-head{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
}
.param-card-headline{flex:1 1 auto;min-width:0;}
.param-card-headline h4{font-size:16px;font-weight:600;margin:0;}
.param-card-summary{display:block;margin-top:3px;font-size:12.5px;color:var(--text-faint);}
.param-card-head .chev{
  color:var(--text-faint);transition:transform .2s ease;flex-shrink:0;
}
.param-card[open] .param-card-head .chev{transform:rotate(180deg);color:var(--gold);}

.param-risk-badge{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:5px 10px 5px 8px;border-radius:999px;font-size:11.5px;font-weight:600;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.02);color:var(--text-dim);
  white-space:nowrap;
}
.param-risk-badge .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.param-risk-badge.risk-low{border-color:rgba(79,197,134,.4);background:rgba(79,197,134,.08);color:var(--green);}
.param-risk-badge.risk-low .dot{background:var(--green);box-shadow:0 0 6px rgba(79,197,134,.6);}
.param-risk-badge.risk-medium{border-color:rgba(217,164,65,.4);background:var(--warn-glow);color:var(--warn);}
.param-risk-badge.risk-medium .dot{background:var(--warn);box-shadow:0 0 6px rgba(217,164,65,.5);}
.param-risk-badge.risk-high{border-color:rgba(229,96,90,.4);background:rgba(229,96,90,.08);color:var(--red);}
.param-risk-badge.risk-high .dot{background:var(--red);box-shadow:0 0 6px rgba(229,96,90,.55);}

.param-card-body{padding:0 18px 20px;border-top:1px solid var(--line);padding-top:16px;}

/* "Simply put: …" gloss — first line of every card body (v3, 27.09 third
   pass), one plain-language sentence before the control itself. */
.param-simple{
  margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--text);
  padding:10px 12px;background:rgba(224,178,90,.06);border:1px solid rgba(224,178,90,.22);border-radius:10px;
}

/* controls */
.param-control{margin-bottom:16px;}
.param-control-label{display:block;font-size:12.5px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;}
.param-control-label b{color:var(--gold);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;text-transform:none;letter-spacing:0;}

.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.02);}
.stepper-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text);font-size:18px;font-weight:500;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.stepper-btn:hover:not(:disabled){background:rgba(224,178,90,.1);color:var(--gold);}
.stepper-btn:disabled{opacity:.35;cursor:not-allowed;}
.stepper-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.stepper-val{
  min-width:52px;text-align:center;font-size:16px;font-weight:600;color:var(--text);
  border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 4px;
  transition:color .2s ease;
}

.param-control-slider input[type="range"]{width:100%;display:block;min-height:44px;}

/* ---------- redesigned grid-step slider (v3, 27.09 third pass) — a track
   you can obviously drag: a visible filled/unfilled track, a big gold round
   thumb (≥28px desktop, ≥36px on narrow viewports), tick marks with $
   labels at every quarter-step, a value bubble that tracks the thumb, and a
   translated "drag" hint. Overrides the plain range styling above (loaded
   after css/style.css, so identical-specificity rules here win) — that
   base rule stays as a harmless fallback for any range input that doesn't
   use this wrapper markup. ---------- */
.slider-wrap{position:relative;padding-top:22px;}
.slider-hint{
  position:absolute;top:0;left:0;font-size:11px;font-weight:600;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:5px;
}
.slider-hint::before{content:"\21c4";font-size:12px;color:var(--gold);} /* ⇄ */
.slider-track-shell{position:relative;padding-top:30px;padding-bottom:22px;}
.slider-bubble{
  position:absolute;top:0;transform:translateX(-50%);
  background:var(--gold);color:#1A1406;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;font-weight:700;padding:3px 8px;border-radius:7px;white-space:nowrap;
  transition:left .05s linear;pointer-events:none;
}
.slider-bubble::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--gold);
}
.slider-track-shell input[type="range"]{
  --range-pct:34%;
  -webkit-appearance:none;appearance:none;width:100%;display:block;height:8px;min-height:44px;
  border-radius:999px;cursor:pointer;background:var(--surface);border:1px solid var(--line-strong);
  background-image:linear-gradient(to right,var(--gold) 0%,var(--gold) var(--range-pct),transparent var(--range-pct),transparent 100%);
  background-origin:content-box;background-clip:content-box;padding:0;margin:14px 0 0;
}
.slider-track-shell input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--gold);border:3px solid #1A1406;box-shadow:0 0 0 1px rgba(224,178,90,.5),0 2px 8px rgba(0,0,0,.4);
  cursor:pointer;margin-top:0;
}
.slider-track-shell input[type="range"]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;background:var(--gold);border:3px solid #1A1406;
  box-shadow:0 0 0 1px rgba(224,178,90,.5),0 2px 8px rgba(0,0,0,.4);cursor:pointer;
}
.slider-track-shell input[type="range"]::-moz-range-track{background:transparent;border:none;height:8px;}
.slider-track-shell input[type="range"]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.slider-ticks{
  position:absolute;left:0;right:0;bottom:0;height:18px;
}
.slider-ticks span{
  position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;color:var(--text-faint);
  font-family:'JetBrains Mono',ui-monospace,monospace;white-space:nowrap;
}
.slider-ticks span::before{
  content:"";position:absolute;left:50%;top:-8px;width:1px;height:5px;background:var(--line-strong);
}
@media(max-width:600px){
  .slider-track-shell input[type="range"]::-webkit-slider-thumb{width:36px;height:36px;}
  .slider-track-shell input[type="range"]::-moz-range-thumb{width:36px;height:36px;}
}

/* pro/con lists */
.param-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px;}
.param-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.55;color:var(--text-dim);}
.param-ico{
  flex-shrink:0;width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;margin-top:1px;
}
.param-ico-pro{background:rgba(79,197,134,.12);color:var(--green);}
.param-ico-con{background:rgba(229,96,90,.12);color:var(--red);}

.param-note-danger{
  display:flex;gap:9px;align-items:flex-start;margin:0 0 16px;padding:11px 13px;
  border:1px solid rgba(229,96,90,.35);background:rgba(229,96,90,.07);border-radius:10px;
  font-size:12.5px;line-height:1.5;color:var(--text);
}
.param-note-danger[hidden]{display:none;}
.param-note-danger::before{content:"⚠";flex-shrink:0;color:var(--red);font-size:13px;}

/* neutral informational note — base-lot card's "doubled the lot, doubled
   the deposit" line (v3): same shape as .param-note-danger, gold ⓘ instead
   of a red ⚠, since this is a mechanical fact, not a warning. */
.param-note-info{
  display:flex;gap:9px;align-items:flex-start;margin:0 0 16px;padding:11px 13px;
  border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;
  font-size:12.5px;line-height:1.5;color:var(--text-dim);
}
.param-note-info::before{
  content:"i";flex-shrink:0;color:var(--gold);font-size:11px;font-weight:700;font-family:'JetBrains Mono',ui-monospace,monospace;
  width:16px;height:16px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;margin-top:1px;
}

/* two risk reads per card — "burn" (deposit load) and "stuck" (pullback may
   not come in time) — replacing the single U-shaped badge that used to sit
   in the card header. Placed right under the control, before the pro/con
   lists, so the reaction to the number you just changed is the first thing
   you see. */
.param-risk-lines{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;}
.param-risk-line{
  display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;
  padding:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;
}
.param-risk-line-label{flex:1 1 140px;font-size:12.5px;color:var(--text-dim);line-height:1.4;}

/* burn-risk rows also print the dollar figure the badge is classifying
   ("need ≈ $X · at a $1,000 deposit") right under the badge, so Low/Medium/
   High is never divorced from a number on screen — the fix for the "always
   High" burn badge bug. Wraps onto its own full-width line on narrow cards
   instead of squeezing the label into a tall, narrow column. */
.param-risk-badge-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;margin-left:auto;}
.param-risk-need{font-size:10.5px;color:var(--text-faint);text-align:right;white-space:normal;max-width:220px;}
@media(max-width:420px){
  .param-risk-badge-wrap{flex-basis:100%;align-items:flex-end;}
  .param-risk-need{max-width:none;}
}

/* live metrics footer */
.param-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px;}
.param-metric{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 12px;}
.param-metric-label{display:block;font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.param-metric-val{display:block;font-size:15.5px;font-weight:600;color:var(--text);transition:color .2s ease;}
.param-metric-note{display:block;font-size:10.5px;color:var(--text-faint);margin-top:2px;}

/* ---------- scheme (right column) ---------- */
.params-scheme-title{font-size:15px;font-weight:600;margin:0 0 12px;}

/* the diagram now fills the card — no scenario toggle above it any more
   (v4: one fixed price path, no scenario to pick), and padding is trimmed
   so the SVG itself gets as much of the card's box as possible.
   v6 (27.09, customer: "match the hero chart's style"): background/border
   now the exact pair js/hero-scene.js's own chart box uses (css/style.css's
   .hw-chart: background:#050607;border:1px solid var(--line)) instead of
   the card-shell tokens (--surface-2/--line-strong) every OTHER card on this
   page uses — this one card is styled to look like the hero window, not
   like a settings card. */
.scheme-card{background:#050607;border:1px solid var(--line);border-radius:16px;padding:10px;}
.scheme-card svg{width:100%;height:400px;display:block;}
@media(max-width:600px){
  /* v4b: was 270px with the same 10px card padding — that made the fixed
     pixel margins the SVG needs for legible level-number/BE/Take text (see
     js/params-block.js's PAD_L/PAD_R/PAD_T/PAD_B) eat a much bigger share of
     a short box, which is most of why the diagram read as mostly empty on
     mobile. Taller box + slightly tighter card padding gives the same
     legible margins more room to disappear into. */
  .scheme-card{padding:7px;}
  .scheme-card svg{height:330px;}
}

/* the price line is "drawn in" on every redraw via stroke-dashoffset (set in
   JS, see js/params-block.js's animateDraw) — the transition below is what
   actually animates that; disabled under reduced motion, where the JS also
   skips setting up the dash array in the first place, so nothing is lost.
   Color still tracks the basket's own state — but v6 (27.09, hero-style
   pass) recolors the "floating loss" segment from red to gold (the
   customer's ask: "loss" here just means "no profit yet", not danger, and
   hero's own price line is gold throughout) while the crossed-into-profit
   segment stays a soft green, same alpha as hero's own TAKE_COLOR
   (rgba(79,197,134,.9)) — two separate <path> elements, see
   js/params-block.js's splitFallAtBE(). */
.scheme-price-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset .7s ease;}
.scheme-price-line.is-loss{stroke:var(--gold);}
.scheme-price-line.is-profit{stroke:var(--green);opacity:.9;}
@media(prefers-reduced-motion:reduce){.scheme-price-line{transition:none;}}

/* v6: soft gold->transparent wash under the WHOLE curve (rise+fall+drift),
   identical alpha to js/explain-charts.js's own areaGradientDefs() (0.30->0)
   which itself matches hero's own area fill under its price line — one
   continuous fill regardless of the loss/profit stroke split above it, only
   the stroke color changes with the basket's state. Gradient stops are
   appended in JS (js/params-block.js's appendAreaGradientDefs) since a
   <linearGradient>'s stop-color needs a literal color, not a var(). */
.scheme-area-fill{stroke:none;}

/* coverage band — translucent gold from the start up to the grid's own
   depth D, and, only when the fixed path's peak is higher than that, a
   translucent red band above it ("grid ran out"); plus a translucent green
   "profit zone" between BE and the illustrative Take once the basket is
   able to reach it. Drawn before the level lines/curve/dots so everything
   else stays legible on top. */
.scheme-coverage-zone{fill:rgba(224,178,90,.14);stroke:none;}
.scheme-shortfall-zone{fill:rgba(229,96,90,.14);stroke:none;}
.scheme-profit-zone{fill:rgba(79,197,134,.14);stroke:none;}
/* v7: the same "levels 1..n stop short of the fixed 12-slot frame" band, but
   for when the basket closed anyway (took profit) — nothing actually "ran
   out" here, it's just headroom the ladder didn't need this time, so it's
   a faint neutral haze instead of red, and — unlike .scheme-shortfall-zone —
   never gets a label (see js/params-block.js's drawScheme(), which now
   picks between the two by the SAME `closed` flag the status line/curve
   color already use, instead of showing the red "ran out" zone+label
   regardless of outcome, a real bug the customer caught on the default
   n=9-and-closed view). */
.scheme-headroom-zone{fill:rgba(255,255,255,.035);stroke:none;}
/* one short label inside the (still-open) shortfall zone only — same
   font/weight/size as hero's own "loss frozen" zone label (Onest sans-serif,
   not the monospace every NUMBER on this diagram uses, since this is a
   phrase, not a figure) and the same right-aligned-inside-the-zone
   placement (js/params-block.js's drawScheme()). v7 dropped the matching
   "in profit" zone label entirely (green line + the "+$10" pill already say
   that) — .scheme-profit-label is unused now but left defined in case a
   future zone needs the same green zone-label treatment. */
.scheme-zone-label{font-family:'Onest',sans-serif;font-weight:600;font-size:11px;}
.scheme-coverage-label{fill:var(--gold);}
.scheme-shortfall-label{fill:var(--red);}
.scheme-profit-label{fill:var(--green);}

/* background pill behind a diagram label (js/params-block.js's
   appendPillLabel) — keeps text legible no matter which line or zone it
   ends up sitting over, instead of relying on placement alone. */
.scheme-label-pill{fill:rgba(15,15,15,.72);}

/* full-width level lines + big left-margin numbers — the reference look:
   the price line crosses a ruler of numbered levels rather than dragging its
   own little labels along with it. Fixed dollar axis (v4) keeps the on-screen
   gap between levels comfortably above crowding range for the whole 3–30
   order / $1–3 step space, so these numbers no longer need to thin out. */
/* v6: exact color/alpha twin of js/hero-scene.js's own grid — GRID_LINE in
   js/explain-charts.js is the literal rgba(255,255,255,.07) === var(--line),
   so this rule now just points at that token directly instead of a
   different token (--line-strong) diluted by a local opacity to land
   near the same number by coincidence. */
.scheme-level-line{stroke:var(--line);stroke-width:1;}
.scheme-level-num{fill:var(--text);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:14px;}
/* v6: gold fill + the same dark stroke hero/js/explain-charts.js's own order
   dots use (#1A1406 — already this file's own slider-thumb border color, so
   no new token) — was red, a leftover from the pre-hero-style palette. */
.scheme-level-dot{fill:var(--gold);stroke:#1A1406;stroke-width:1.5;}

/* small lot-size labels next to each entry dot — 0.01, 0.02, 0.04 … so the
   doubling reads directly off the diagram, same as hero's own order labels.
   v6: gold (was a muted gray-fill leftover from before the lot labels were
   reactivated), matching the dots they sit next to. */
.scheme-lot-label{fill:var(--gold);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;font-size:10.5px;}

/* Lavender BE / green Take — already the "Lock 4273.06" hero style (var(--lock)
   is the same lavender token hero's own lock scene uses); v6 only moves the
   labels to sit ABOVE their line (see js/params-block.js's drawScheme()),
   matching hero's own refLabel placement, and gives Take the same dash
   rhythm hero/js/explain-charts.js use for it ("2 3" vs BE's "4 4"). */
.scheme-be-line{stroke:var(--lock);stroke-width:1.3;stroke-dasharray:4 4;}
.scheme-take-line{stroke:var(--green);stroke-width:1.3;stroke-dasharray:2 3;}
.scheme-be-label{fill:var(--lock);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:13px;}
.scheme-take-label{fill:var(--green);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:13px;}

/* ⓘ hover/focus icon next to "BE"/"Take" (v3) — a native SVG <title> child
   gives the browser's own tooltip plus an accessible name, no extra JS
   state. cursor:help signals it is informational, not clickable. */
.scheme-info-ico{cursor:help;}
.scheme-info-ico circle{fill:var(--surface);stroke:var(--text-faint);stroke-width:1;}
.scheme-info-ico text{fill:var(--text-dim);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:8px;}
.scheme-info-ico:hover circle,.scheme-info-ico:focus circle{stroke:var(--gold);}
.scheme-info-ico:hover text,.scheme-info-ico:focus text{fill:var(--gold);}
.scheme-info-ico:focus{outline:none;}

/* v6: the outcome ring is replaced by a small filled triangle + one short
   label above it — the same shape/placement as hero's own close-cue marker
   (js/hero-scene.js's SELL/lock arrow, js/explain-charts.js's "SELL lock
   1:1"): "good" at the take (label "TAKE"), "warn" at the last level when
   the grid ran out before the retrace got there (js/params-block.js's
   appendEventMarker()). */
.scheme-event-marker.good{fill:var(--green);}
.scheme-event-marker.warn{fill:var(--warn);}
.scheme-event-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:10px;text-anchor:middle;}
.scheme-event-label.good{fill:var(--green);}
.scheme-event-label.warn{fill:var(--warn);}

/* small marker right where the retrace crosses BE downward ("in profit") —
   a light ring, distinct from the bigger, solid Take dot further along. */
.scheme-inprofit-dot{fill:var(--bg);stroke:var(--green);stroke-width:2;}

/* v6: result pill at the curve's right end — same rounded rect + centered
   monospace text as hero's own end-of-line price tag (js/explain-charts.js's
   priceTag/priceTagUsd), but showing the basket's $ RESULT ("+$10") instead
   of a raw price, or a short "waiting" word while the basket hasn't closed
   (js/params-block.js's appendPricePill()). */
.scheme-price-pill{fill:var(--bg);stroke-width:1;}
.scheme-price-pill.good{stroke:var(--green);}
.scheme-price-pill.warn{stroke:var(--warn);}
.scheme-price-pill-text{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;font-size:11px;text-anchor:middle;}
.scheme-price-pill-text.good{fill:var(--green);}
.scheme-price-pill-text.warn{fill:var(--warn);}

.scheme-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:11.5px;color:var(--text-faint);}
.scheme-legend span{display:inline-flex;align-items:center;gap:6px;}
/* v5: the fuller BE/Take explanations that used to live on in-graph ⓘ icons
   now sit as a native title= tooltip on these two legend entries instead
   (js/params-block.js's updateLegendTooltips()) — cursor:help matches the
   same "hover for more" signal the old .scheme-info-ico used. */
.legend-tip{cursor:help;border-bottom:1px dotted var(--text-faint);}
/* v6: gold, matching the diagram's own entry dots (was red, a leftover from
   before the hero-style pass recolored both the dots and the "in loss"
   line segment gold — see .scheme-level-dot / .scheme-price-line.is-loss). */
.legend-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.legend-line{width:16px;height:0;border-top:2px dashed var(--lock);flex-shrink:0;}
.legend-line-take{border-top-color:var(--green);}
/* coverage/shortfall/profit zone swatches — small filled squares matching
   the translucent bands drawn on the diagram itself. */
.legend-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0;}
.legend-swatch-coverage{background:rgba(224,178,90,.35);border:1px solid rgba(224,178,90,.6);}
.legend-swatch-shortfall{background:rgba(229,96,90,.35);border:1px solid rgba(229,96,90,.6);}
.legend-swatch-profit{background:rgba(79,197,134,.28);border:1px solid rgba(79,197,134,.55);}
/* basket-state line swatches — gold = no profit yet, green = in profit; the
   same two colors the price line itself switches between (v6: gold replaces
   red for "in loss" — see .scheme-price-line.is-loss). */
.legend-line-loss{border-top-style:solid;border-top-color:var(--gold);border-top-width:2.5px;}
.legend-line-profit{border-top-style:solid;border-top-color:var(--green);border-top-width:2.5px;}

.scheme-outcome{
  margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600;
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-dim);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.scheme-outcome.is-good{border-color:rgba(79,197,134,.4);background:rgba(79,197,134,.08);color:var(--green);}
.scheme-outcome.is-warn{border-color:rgba(217,164,65,.4);background:var(--warn-glow);color:var(--warn);}

.scheme-caption{margin-top:10px;font-size:12px;color:var(--text-faint);}

@media(max-width:560px){
  .param-metrics{grid-template-columns:1fr 1fr;}
}