/* Answer block: ```sim - an equation explorer with a live picture.
   Tokens in blocks.css; nothing here names a raw colour, so a palette
   (body[data-ab-palette]) and both themes restyle it for free.

   One rounded card: the title and Reset on top, then the equation (typeset,
   then with the live numbers in), one row per variable (a "solve for" pick,
   a number box, a slider with a big round thumb) and the picture on an inset
   panel. Side by side when the card is 620px or wider (a container query,
   so the Lumi side panel and phones stack), stacked below that.

   The solved row is tinted calc blue; its box and slider follow the answer.
   Buttons and fields carry doubled classes: styles.css shapes every button
   at (0,3,1) !important and every text field's corner at (0,2,1) !important,
   and this block keeps its own shape. */

.ab-sim {
  /* the light and the dark end of the theme, from the tokens: thumbs are
     the light one, shadows the dark one */
  --abs-light: var(--ab-ink);
  --abs-dark: var(--ab-card);
  --abs-fill: 50%;
  container: ab-sim / inline-size;
  position: relative;
  margin: 18px 0;
  border: 1px solid var(--ab-hair);
  border-radius: 16px;
  background: var(--ab-card);
  color: var(--ab-ink);
  font-family: var(--ab-font-ui);
  font-size: 14px;
  line-height: 1.45;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
body[data-theme="light"] .ab-sim { --abs-light: var(--ab-card); --abs-dark: var(--ab-ink); }
.ab-sim *, .ab-sim *::before, .ab-sim *::after { box-sizing: border-box; }
.ab-sim [hidden] { display: none !important; }
.ab-sim-sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ── head: title, Reset ───────────────────────────────────────────────── */
.ab-sim-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px 12px;
  padding: 14px 16px 0;
}
.ab-sim-title {
  flex: 1 1 auto; min-width: 0;
  font: 600 15.5px/1.35 var(--ab-font-ui);
  color: var(--ab-ink);
  overflow-wrap: anywhere;
}
.ab-sim-title.is-quiet {
  font: 500 11.5px/1.3 var(--ab-font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ab-muted);
}
.ab-sim-tools { display: flex; gap: 6px; flex: 0 0 auto; }
.ab-sim .ab-sim-tools button.ab-sim-btn.ab-sim-btn {
  appearance: none;
  height: 30px; min-height: 0 !important; min-width: 0;
  padding: 0 13px !important;
  border: 1px solid var(--ab-hair) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ab-muted) !important;
  font: 500 12.5px/1 var(--ab-font-ui) !important;
  letter-spacing: 0 !important; text-transform: none !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.ab-sim .ab-sim-tools button.ab-sim-btn.ab-sim-btn:hover {
  color: var(--ab-ink) !important;
  border-color: var(--ab-rule) !important;
  background: var(--ab-paper) !important;
}
.ab-sim .ab-sim-tools button.ab-sim-btn.ab-sim-btn:focus-visible {
  outline: 2px solid var(--ab-accent) !important;
  outline-offset: 2px;
}

/* ── layout: stacked, then side by side from 620px ────────────────────── */
.ab-sim-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "eq" "stage" "vars" "outs";
  padding: 0 0 10px;
}
.ab-sim-eq { grid-area: eq; min-width: 0; padding: 10px 16px 4px; }
.ab-sim-stage { grid-area: stage; }
.ab-sim-vars { grid-area: vars; }
.ab-sim-outs { grid-area: outs; }
@container ab-sim (min-width: 620px) {
  .ab-sim-body {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "eq stage" "vars stage" "outs stage";
    column-gap: 4px;
    padding-bottom: 16px;
  }
  .ab-sim.is-bare .ab-sim-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eq" "vars" "outs"; }
  .ab-sim .ab-sim-stage { margin: 10px 16px 0 6px; align-self: stretch; }
  /* two pictures stack in the tall right column; three or four pair up */
  .ab-sim .ab-sim-stage[data-count="2"] { grid-template-columns: minmax(0, 1fr); }
  .ab-sim .ab-sim-stage[data-count="2"] .ab-sim-scene { max-height: 210px; }
  .ab-sim .ab-sim-stage[data-count="2"] .ab-sim-cap-vals { flex-direction: row; }
  .ab-sim .ab-sim-vars { padding-bottom: 0; }
}

/* ── the equation ─────────────────────────────────────────────────────── */
.ab-sim-eq-main {
  min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 0 8px;
  font-size: 15px;
  color: var(--ab-ink);
  scrollbar-width: thin;
}
.ab-sim-eq-main .katex { font-size: 1.42em; }
.ab-sim-eq-live {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 12px;
  min-width: 0;
  padding: 8px 0 2px;
  border-top: 1px dashed var(--ab-hair);
  color: var(--ab-muted);
}
.ab-sim-eq-nums {
  min-width: 0; max-width: 100%;
  overflow-x: auto; overflow-y: hidden;
  font-size: 14px;
  scrollbar-width: thin;
}
.ab-sim-eq-nums .katex { font-size: 1.12em; color: var(--ab-ink); }
.ab-sim .ab-sim-hl { color: var(--ab-calc); }
.ab-sim-eq-nums .ab-sim-hl { font-weight: 700; }
.ab-sim-eq-main.is-plain, .ab-sim-eq-nums.is-plain { font: italic 17px/1.4 var(--ab-font-math); color: var(--ab-ink); }
.ab-sim-eq-nums.is-plain { font-size: 15px; font-style: normal; }
.ab-sim-eq-side {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--ab-paper);
  font: 500 11.5px/1.5 var(--ab-font-ui);
  color: var(--ab-muted);
  white-space: nowrap;
}
.ab-sim p.ab-sim-why {
  margin: 8px 0 0 !important;
  padding: 7px 11px;
  border-radius: 10px;
  background: var(--ab-warn-soft);
  color: var(--ab-warn);
  font: 500 13px/1.4 var(--ab-font-ui);
}

/* ── the rows ─────────────────────────────────────────────────────────── */
.ab-sim fieldset.ab-sim-vars {
  min-width: 0;
  margin: 0; padding: 8px 10px 0;
  border: 0;
}
.ab-sim legend.ab-sim-legend {
  float: left; width: 100%;
  margin: 0 0 2px; padding: 0 8px;
  font: 600 10.5px/1.4 var(--ab-font-ui);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ab-muted);
}
.ab-sim-legend + * { clear: left; }
.ab-sim-row {
  display: grid;
  grid-template-columns: 22px minmax(2.2em, 1fr) auto auto;
  grid-template-areas: "pick name chip box" ". range range range" ". msg msg msg";
  align-items: center;
  column-gap: 10px;
  margin: 2px 0;
  padding: 7px 8px 3px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}
.ab-sim-row.is-const {
  /* a given value: the name and a "given" chip, then the value where a
     slider would be, so a long unit has the whole row */
  grid-template-areas: "pick name chip chip" ". box box box";
  row-gap: 4px;
  padding-bottom: 8px;
}
.ab-sim-row.is-solved { background: var(--ab-calc-soft); }
.ab-sim-pick { grid-area: pick; display: flex; align-items: center; justify-content: center; }
.ab-sim-name {
  grid-area: name;
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  color: var(--ab-ink);
}
label.ab-sim-name { cursor: pointer; }
.ab-sim-sym {
  flex: 0 0 auto;
  font-family: var(--ab-font-math);
  font-style: italic;
  font-size: 19px;
  line-height: 1;
  color: var(--ab-given);
}
.ab-sim-sym.is-word { font-style: normal; }
.ab-sim-sym sub { font-size: 0.62em; font-style: normal; line-height: 0; vertical-align: -0.28em; }
.ab-sim-row.is-measure .ab-sim-sym { color: var(--ab-measure); }
.ab-sim-row.is-calc .ab-sim-sym, .ab-sim-row.is-solved .ab-sim-sym { color: var(--ab-calc); }
.ab-sim-row.is-ignore .ab-sim-sym { color: var(--ab-ignore); }
.ab-sim-label {
  min-width: 0;
  font-size: 12.5px; line-height: 1.3;
  color: var(--ab-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* the "solve for" pick: a ring, filled calc blue when chosen */
.ab-sim .ab-sim-pick input.ab-sim-radio {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0;
  border: 2px solid var(--ab-rule);
  border-radius: 50% !important;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.ab-sim .ab-sim-pick input.ab-sim-radio:hover { border-color: var(--ab-calc); }
.ab-sim .ab-sim-pick input.ab-sim-radio:checked {
  border-color: var(--ab-calc);
  background: var(--ab-calc);
  box-shadow: inset 0 0 0 3px var(--ab-card);
}
.ab-sim .ab-sim-pick input.ab-sim-radio:focus-visible {
  outline: 2px solid var(--ab-accent);
  outline-offset: 2px;
}

/* the number box */
.ab-sim-box {
  grid-area: box;
  display: flex; align-items: center;
  width: 124px; min-width: 0; height: 36px;
  overflow: hidden;
  padding: 0 11px;
  border: 1px solid var(--ab-rule);
  border-radius: 10px;
  background: var(--ab-paper);
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.ab-sim .ab-sim-box input.ab-sim-field.ab-sim-field {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 100%;
  margin: 0; padding: 0;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  outline: none !important;
  color: var(--ab-ink);
  /* 16px: iOS zooms the page into any field set smaller */
  font: 550 16px/1.2 var(--ab-font-ui);
  letter-spacing: 0;
  text-align: right;
}
.ab-sim-unit {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: 6px;
  max-width: 50%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
  color: var(--ab-muted);
}
.ab-sim-box:focus-within {
  border-color: var(--ab-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-accent) 22%, transparent);
}
.ab-sim-box.is-fixed {
  justify-self: start;
  width: auto; max-width: 100%; height: 32px;
  border-style: dashed;
  background: transparent;
  cursor: default;
}
.ab-sim-unit.is-tight { margin-left: 1px; }
.ab-sim-box.is-fixed .ab-sim-unit { flex: 0 1 auto; max-width: none; }
.ab-sim-fixed { flex: 0 0 auto; font: 550 15px/1.2 var(--ab-font-ui); color: var(--ab-ink); }
.ab-sim-row.is-solved .ab-sim-box {
  border-color: color-mix(in srgb, var(--ab-calc) 45%, transparent);
  background: var(--ab-card);
  cursor: default;
}
.ab-sim .ab-sim-row.is-solved .ab-sim-box input.ab-sim-field.ab-sim-field { color: var(--ab-calc); font-weight: 700; cursor: default; }
.ab-sim .ab-sim-row.is-none .ab-sim-box input.ab-sim-field.ab-sim-field { color: var(--ab-warn); font-weight: 600; font-size: 13px; }
.ab-sim-row.is-solved .ab-sim-box:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-calc) 24%, transparent); border-color: var(--ab-calc); }
.ab-sim-row.is-bad .ab-sim-box { border-color: var(--ab-warn); }
.ab-sim-msg { grid-area: msg; padding: 0 0 4px; font-size: 12px; line-height: 1.35; color: var(--ab-warn); }

/* chips beside the box */
.ab-sim-chip, .ab-sim-given {
  grid-area: chip;
  justify-self: end;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 10.5px/1.5 var(--ab-font-ui);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ab-sim-chip { background: var(--ab-warn-soft); color: var(--ab-warn); }
.ab-sim-given { color: var(--ab-muted); border: 1px solid var(--ab-hair); font-weight: 500; }

/* the slider: a soft track that fills blue up to a big round thumb */
.ab-sim .ab-sim-range {
  grid-area: range;
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0;
  height: 30px; margin: 0; padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.ab-sim .ab-sim-range:focus { outline: none; }
.ab-sim .ab-sim-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--ab-calc) var(--abs-fill), var(--ab-rule) var(--abs-fill));
}
.ab-sim .ab-sim-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ab-rule); }
.ab-sim .ab-sim-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ab-calc); }
.ab-sim .ab-sim-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: var(--abs-light);
  box-shadow:
    0 0 0 0.5px color-mix(in srgb, var(--abs-dark) 18%, transparent),
    0 1px 2px color-mix(in srgb, var(--abs-dark) 30%, transparent),
    0 3px 10px color-mix(in srgb, var(--abs-dark) 22%, transparent);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.ab-sim .ab-sim-range::-moz-range-thumb {
  width: 24px; height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--abs-light);
  box-shadow:
    0 0 0 0.5px color-mix(in srgb, var(--abs-dark) 18%, transparent),
    0 1px 2px color-mix(in srgb, var(--abs-dark) 30%, transparent),
    0 3px 10px color-mix(in srgb, var(--abs-dark) 22%, transparent);
}
.ab-sim .ab-sim-range:active::-webkit-slider-thumb { transform: scale(1.08); }
.ab-sim .ab-sim-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ab-calc) 35%, transparent), 0 1px 2px color-mix(in srgb, var(--abs-dark) 30%, transparent); }
.ab-sim .ab-sim-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ab-calc) 35%, transparent); }
/* the solved slider follows the answer: a blue ring, no grab */
.ab-sim .ab-sim-range:disabled { cursor: default; opacity: 1; }
.ab-sim .ab-sim-range:disabled::-webkit-slider-thumb {
  background: var(--abs-light);
  box-shadow: inset 0 0 0 6px var(--ab-calc), 0 1px 3px color-mix(in srgb, var(--abs-dark) 30%, transparent);
}
.ab-sim .ab-sim-range:disabled::-moz-range-thumb { background: var(--abs-light); box-shadow: inset 0 0 0 6px var(--ab-calc); }
.ab-sim-row.is-off .ab-sim-range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--ab-calc) var(--abs-fill), var(--ab-rule) var(--abs-fill)); }
.ab-sim-row.is-none .ab-sim-range { opacity: 0.45; }

/* ── results worked out after solving ─────────────────────────────────── */
.ab-sim-outs {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  margin: 6px 18px 0;
  padding-top: 10px;
  border-top: 1px solid var(--ab-hair);
}
.ab-sim-out {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  min-width: 0;
  padding: 5px 11px;
  border-radius: 10px;
  background: var(--ab-paper);
}
.ab-sim-out-name { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.ab-sim-out .ab-sim-sym { font-size: 16px; color: var(--ab-calc); }
.ab-sim-out-res { display: inline-flex; align-items: baseline; gap: 5px; }
.ab-sim-eqsign { font: 400 16px/1 var(--ab-font-math); color: var(--ab-muted); }
.ab-sim-out-val {
  font: 650 16px/1.2 var(--ab-font-ui);
  color: var(--ab-calc);
}
.ab-sim-out .ab-sim-unit { margin-left: 0; }
.ab-sim-out.is-unknown .ab-sim-out-val { color: var(--ab-muted); font-weight: 500; }
.ab-sim-out-why { flex-basis: 100%; font-size: 12px; color: var(--ab-muted); }

/* ── the stage ────────────────────────────────────────────────────────── */
.ab-sim-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 14px 10px;
  min-width: 0;
  margin: 8px 16px 2px;
  padding: 14px 12px 12px;
  border: 1px solid var(--ab-hair);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--ab-calc) 7%, transparent), transparent 70%),
    var(--ab-paper);
  contain: layout paint;
}
.ab-sim-stage[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.ab-sim-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.ab-sim-cap {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-height: 18px;
  text-align: center;
  font: 500 12px/1.35 var(--ab-font-ui);
  color: var(--ab-muted);
}
.ab-sim-cap-name {
  font: 650 10.5px/1.3 var(--ab-font-ui);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ab-ink);
}
.ab-sim-cap-vals { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 12px; }
.ab-sim-cap-v { white-space: nowrap; }
/* two pictures to a row: one value per line, so both captions match */
.ab-sim-stage:not([data-count="1"]) .ab-sim-cap-vals { flex-direction: column; align-items: center; }
.ab-sim-cap .ab-sim-sym { font-size: 14px; color: var(--ab-ink); }
.ab-sim-cap-v.is-solved, .ab-sim-cap-v.is-solved .ab-sim-sym { color: var(--ab-calc); font-weight: 650; }
.ab-sim-scene { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 250px; min-width: 0; overflow: hidden; }
.ab-sim-scene[data-kind="graph"] { aspect-ratio: 4 / 3; max-height: 280px; }
.ab-sim-scene > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* the built-in scenes: graph and bars */
.ab-sim-svg { font-family: var(--ab-font-ui); }
.ab-sim-grid line { stroke: var(--ab-hair); stroke-width: 1; }
.ab-sim-axis { fill: none; stroke: var(--ab-rule); stroke-width: 1.2; stroke-linecap: round; }
.ab-sim-curve { fill: none; stroke: var(--ab-calc); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-sim-area { fill: var(--ab-calc); opacity: 0.1; }
.ab-sim-guide { fill: none; stroke: var(--ab-calc); stroke-width: 1; stroke-dasharray: 2.5 3; opacity: 0.6; }
.ab-sim-halo { fill: var(--ab-calc); opacity: 0.2; }
.ab-sim-dot { fill: var(--ab-calc); stroke: var(--abs-light); stroke-width: 2; }
.ab-sim-graph.is-out .ab-sim-dot { fill: var(--ab-warn); }
.ab-sim-graph.is-out .ab-sim-halo { fill: var(--ab-warn); }
.ab-sim-graph.is-none .ab-sim-dot, .ab-sim-graph.is-none .ab-sim-halo { display: none; }
.ab-sim-tick { font-size: 9.5px; fill: var(--ab-muted); font-variant-numeric: tabular-nums lining-nums; }
.ab-sim-tick.is-title { fill: var(--ab-ink); font-weight: 600; font-size: 10px; }
.ab-sim-tick.is-value { fill: var(--ab-ink); font-weight: 650; font-size: 12px; }
.ab-sim-base { stroke: var(--ab-rule); stroke-width: 1.2; stroke-linecap: round; }
.ab-sim-track { fill: var(--ab-hair); }
.ab-sim-fill { fill: var(--ab-muted); opacity: 0.6; }
.ab-sim-bar.is-solved .ab-sim-fill { fill: var(--ab-calc); opacity: 1; }
.ab-sim-bar.is-solved .ab-sim-tick.is-value { fill: var(--ab-calc); }
.ab-sim-bar.is-none .ab-sim-tick.is-value { fill: var(--ab-muted); }
.ab-sim-more { fill: none; stroke: var(--ab-card); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ab-sim-bar.is-over .ab-sim-fill { opacity: 0.85; }

/* ── notes ────────────────────────────────────────────────────────────── */
.ab-sim p.ab-sim-note {
  margin: 0 !important;
  padding: 0 18px 10px;
  font: 400 12.5px/1.5 var(--ab-font-ui);
  color: var(--ab-muted);
  overflow-wrap: anywhere;
}
.ab-sim-body + p.ab-sim-note { padding-top: 2px; }
.ab-sim p.ab-sim-note.is-skipped { font-style: italic; }
.ab-sim p.ab-sim-note:last-of-type { padding-bottom: 14px; }

/* ── phones ───────────────────────────────────────────────────────────── */
@container ab-sim (max-width: 420px) {
  .ab-sim-head { padding: 12px 12px 0; }
  .ab-sim-eq { padding: 8px 12px 2px; }
  .ab-sim .ab-sim-stage { margin: 8px 12px 2px; padding: 12px 8px 10px; }
  .ab-sim fieldset.ab-sim-vars { padding: 8px 6px 0; }
  .ab-sim-row { column-gap: 8px; }
  .ab-sim-box { width: 112px; }
  .ab-sim-outs { margin: 6px 12px 0; }
  .ab-sim p.ab-sim-note { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-sim .ab-sim-tools button.ab-sim-btn.ab-sim-btn,
  .ab-sim-row, .ab-sim-box, .ab-sim .ab-sim-pick input.ab-sim-radio,
  .ab-sim .ab-sim-range::-webkit-slider-thumb { transition: none !important; }
}

/* Figures line up in every readout. Its own rule: a font shorthand that holds
   a var() resets font-variant-numeric when it resolves, so the longhand can
   never sit beside one (tests/answer_blocks_page_dom_checks.mjs). */
.ab-sim-eq-side,
.ab-sim .ab-sim-box input.ab-sim-field.ab-sim-field,
.ab-sim-fixed,
.ab-sim-out-val,
.ab-sim-cap { font-variant-numeric: tabular-nums lining-nums; }