/* ============================================================================
   Teljes költséganalízis.
   Hierarchy is deliberate: the chart is the hero, the three cards are the
   evidence, the inputs are a thin bar, and the legal text is fine print.
   ========================================================================== */

/* ── page-local tokens ─────────────────────────────────────────────────────
   base.css names everything the site shares; these are the values only this
   page needs. Reach for a base token first — every name below exists because
   nothing in base.css means the same thing.

   The dark body is emitted TWICE on purpose. The media query means "follow the
   OS unless the reader forced light"; the attribute means "the reader chose
   dark, whatever the OS says". Neither implies the other, and the attribute
   block must stay LAST: the two selectors have equal specificity, so source
   order is what makes an explicit choice win. Edit one, edit the other. */
:root {
  /* Chart groups. The engine ships one hex per group, chosen for a bone
     ground; these are the same five identities lit for the ground they are
     actually drawn on. Light is byte-identical to the engine's values, so the
     picture is unchanged in light mode. */
  --g-illetek:      #A87C3F;
  --g-eljaras:      #C8964A;
  --g-kamat:        #8A5A3B;
  --g-biztositas:   #B4553C;
  --g-folyoszamla:  #7A96AA;
  --g-axis:         rgba(20, 23, 26, 0.14);
  --g-net:          var(--forest);
  /* Casing under the after-credit marker: the dashes cross whichever segment
     the credit lands on, so the line alone cannot be guaranteed to contrast
     with what is behind it. Light needs none — its ground and its bars are
     already far from the marker's ink — so it is drawn and paints nothing. */
  --g-net-casing:   transparent;

  /* Controls */
  --tka-track:      rgba(20, 23, 26, 0.12);   /* unfilled slider groove       */
  --tka-knob-1:     #FFFFFF;                  /* the knob stays light in dark */
  --tka-knob-2:     #F1ECE2;                  /* — as it does on iOS          */
  --tka-box-bg:     rgba(255, 255, 255, 0.90);/* drawn checkbox face          */
  --tka-box-line:   rgba(20, 23, 26, 0.24);   /* and its edge (>=3:1 on both) */
  --tka-chip-on:    rgba(200, 154, 78, 0.22);
  --tka-chip-on-fg: #5C4319;

  /* Panels and rules */
  --tka-pop-1:      rgba(255, 255, 255, 0.96);
  --tka-pop-2:      rgba(255, 255, 255, 0.90);
  --tka-tip-1:      rgba(255, 255, 255, 0.97);
  --tka-nub:        rgba(255, 255, 255, 0.93);
  --tka-rule:       rgba(20, 23, 26, 0.12);   /* total / grand-total divider  */
  --tka-ring:       rgba(168, 124, 63, 0.50); /* ring on the best scenario    */
  --tka-credit-bg:  rgba(36, 69, 59, 0.07);
  --tka-credit-fg:  var(--forest);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --g-illetek:      #D2A55C;
    --g-eljaras:      #EFD09A;
    --g-kamat:        #B4764A;
    --g-biztositas:   #D9765A;
    --g-folyoszamla:  #9DB9CE;
    --g-axis:         rgba(255, 255, 255, 0.18);
    --g-net:          #7FC0A6;
    --g-net-casing:   rgba(0, 0, 0, 0.55);

    --tka-track:      rgba(255, 255, 255, 0.16);
    --tka-knob-1:     #F2EFE7;
    --tka-knob-2:     #D9D5CB;
    --tka-box-bg:     rgba(255, 255, 255, 0.11);
    --tka-box-line:   rgba(255, 255, 255, 0.46);
    --tka-chip-on:    rgba(210, 165, 92, 0.22);
    --tka-chip-on-fg: #E8C583;

    /* Elevation in dark is a LIGHTER surface, not a bigger shadow: the popover
       sits above the card, so it is lighter than the card, which is lighter
       than the ground. */
    --tka-pop-1:      rgba(38, 42, 36, 0.97);
    --tka-pop-2:      rgba(29, 33, 30, 0.95);
    --tka-tip-1:      rgba(38, 42, 36, 0.97);
    --tka-nub:        rgba(38, 42, 36, 0.97);
    --tka-rule:       rgba(255, 255, 255, 0.15);
    --tka-ring:       rgba(210, 165, 92, 0.55);
    --tka-credit-bg:  rgba(94, 156, 134, 0.14);
    --tka-credit-fg:  #7FC0A6;
  }
}

/* Forced dark — keep in sync with the block above, and keep it below it. */
:root[data-theme='dark'] {
  --g-illetek:      #D2A55C;
  --g-eljaras:      #EFD09A;
  --g-kamat:        #B4764A;
  --g-biztositas:   #D9765A;
  --g-folyoszamla:  #9DB9CE;
  --g-axis:         rgba(255, 255, 255, 0.18);
  --g-net:          #7FC0A6;
  --g-net-casing:   rgba(0, 0, 0, 0.55);

  --tka-track:      rgba(255, 255, 255, 0.16);
  --tka-knob-1:     #F2EFE7;
  --tka-knob-2:     #D9D5CB;
  --tka-box-bg:     rgba(255, 255, 255, 0.11);
  --tka-box-line:   rgba(255, 255, 255, 0.46);
  --tka-chip-on:    rgba(210, 165, 92, 0.22);
  --tka-chip-on-fg: #E8C583;

  --tka-pop-1:      rgba(38, 42, 36, 0.97);
  --tka-pop-2:      rgba(29, 33, 30, 0.95);
  --tka-tip-1:      rgba(38, 42, 36, 0.97);
  --tka-nub:        rgba(38, 42, 36, 0.97);
  --tka-rule:       rgba(255, 255, 255, 0.15);
  --tka-ring:       rgba(210, 165, 92, 0.55);
  --tka-credit-bg:  rgba(94, 156, 134, 0.14);
  --tka-credit-fg:  #7FC0A6;
}

.tka-intro { max-width: 60ch; margin-bottom: clamp(18px, 2.4vw, 28px); }
.tka-intro h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0.18em 0 0.35em; }
.tka-intro .lede { font-size: clamp(1rem, 1.4vw, 1.14rem); }

/* ══ INPUT BAR ═════════════════════════════════════════════════════════════
   One horizontal strip so the controls never compete with the chart. */
.tka-bar { padding: 16px 18px; }
.tka-bar-fields {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.5fr 0.6fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) { .tka-bar-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tka-bar-fields { grid-template-columns: 1fr; } }

.tka-bar .field > label { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }

/* Money field: unit sits inside the control so the number stays dominant. */
.tka-money { position: relative; display: flex; align-items: center; }
.tka-money .input { padding-right: 2.6em; font-weight: 600; }
.tka-money > span {
  position: absolute; right: 0.95em;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-3); pointer-events: none;
}
.tka-money-sm .input { padding: 0.62em 2.4em 0.62em 0.8em; }

/* Slider + box together: drag for feel, type for precision.
   The 6px track is a *painted* pseudo-element, not the control's own box, so the
   control can be a 34/44px-tall finger target while the line stays hairline-thin.
   --fill is set from JS and inherits into the track pseudo-element. */
.tka-slider { display: grid; grid-template-columns: 1fr 96px; gap: 12px; align-items: center; }
.tka-slider input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; margin: 0; padding: 0;
  background: transparent; border-radius: 999px; outline: none; cursor: pointer;
}
.tka-slider input[type='range']::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brass) var(--fill, 55%), var(--tka-track) var(--fill, 55%), var(--tka-track) 100%);
}
.tka-slider input[type='range']::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brass) var(--fill, 55%), var(--tka-track) var(--fill, 55%), var(--tka-track) 100%);
}
.tka-slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 999px;
  margin-top: -8px; /* centres the 22px thumb on the 6px track */
  background: linear-gradient(168deg, var(--tka-knob-1), var(--tka-knob-2));
  box-shadow: 0 1px 0 var(--spec-strong) inset, 0 2px 7px rgba(var(--shadow-rgb),0.3);
  cursor: grab;
}
.tka-slider input[type='range']::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(0.95); }
.tka-slider input[type='range']::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 999px;
  background: linear-gradient(168deg, var(--tka-knob-1), var(--tka-knob-2));
  box-shadow: 0 2px 7px rgba(var(--shadow-rgb),0.3); cursor: grab;
}
/* Ring the track, not the (now much taller) invisible control box. */
.tka-slider input[type='range']:focus-visible::-webkit-slider-runnable-track { box-shadow: 0 0 0 3.5px var(--brass-glow); }
.tka-slider input[type='range']:focus-visible::-moz-range-track { box-shadow: 0 0 0 3.5px var(--brass-glow); }

/* .hint is --ink-4 in base.css, which is 2.4:1 light / 3.6:1 dark — under
   4.5:1 in both. Lifted here rather than in base.css, which is not ours. */
.tka-bar .hint { font-size: 0.76rem; color: var(--ink-3); }

/* ── chips row ─────────────────────────────────────────────────────────── */
.tka-bar-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hairline);
}
.tka-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0.46em 0.9em; border-radius: 999px; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-2);
  background: var(--surface-1);
  box-shadow: inset 0 1px 0 var(--surface-2);
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}
.tka-chip:hover { background: var(--surface-2); }
.tka-chip input { width: 15px; height: 15px; accent-color: var(--brass); margin: 0; }
.tka-chip:has(input:checked) { background: var(--tka-chip-on); color: var(--tka-chip-on-fg); }
.tka-age { width: 84px; padding: 0.46em 0.7em; font-size: 0.85rem; }
.tka-agewrap { display: inline-flex; }

.tka-adv { margin-left: auto; }
.tka-adv summary {
  cursor: pointer; font-size: 0.82rem; font-weight: 650; color: var(--ink-3);
  list-style: none; padding: 0.46em 0.2em;
}
.tka-adv summary::-webkit-details-marker { display: none; }
.tka-adv summary::before { content: '⚙ '; color: var(--brass); }
.tka-adv-body {
  position: absolute; right: var(--gut); z-index: 30; width: min(520px, calc(100vw - 2 * var(--gut)));
  display: grid; gap: 12px; margin-top: 10px; padding: 18px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--tka-pop-1), var(--tka-pop-2));
  -webkit-backdrop-filter: saturate(200%) blur(30px); backdrop-filter: saturate(200%) blur(30px);
  box-shadow: var(--glass-rim), 0 20px 50px -18px rgba(var(--shadow-rgb),0.34);
}
.tka-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .tka-two { grid-template-columns: 1fr; } .tka-adv-body { position: static; width: auto; } }

/* ══ CHART HERO ════════════════════════════════════════════════════════════ */
.tka-hero { padding: clamp(20px, 2.6vw, 30px); margin-top: clamp(14px, 1.8vw, 20px); }
.tka-hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: clamp(14px, 2vw, 22px);
}
.tka-save {
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; margin-top: 4px;
  font-variation-settings: 'opsz' 60, 'SOFT' 10, 'WONK' 0;
  color: var(--forest);
}
.tka-hero-top p { font-size: 0.88rem; margin-top: 7px; max-width: 34ch; }

/* Cap the plot width so three bars stay taller than they are wide — full-bleed
   bars on a 1150px card read squat and lose the comparison. */
#tkaChart { max-width: 760px; margin-inline: auto; position: relative; }
.tka-svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Focus state is driven by a JS class, not :hover — a touch device has no hover,
   and :hover would also leave a band stuck lit after a tap. */
.tka-svg rect { transition: opacity 0.2s var(--ease); cursor: pointer; }
.tka-svg.is-focus rect { opacity: 0.55; }
.tka-svg rect.on { opacity: 1; }
.tka-bx { font-family: var(--sans); font-size: 12px; font-weight: 650; fill: var(--ink-3); }
.tka-bv { font-family: var(--display); font-size: 19px; font-weight: 600; fill: var(--ink); letter-spacing: -0.02em; }
/* Axis type never takes the pointer — the bands own it, so the tooltip cannot
   be dismissed by drifting onto a label. */
.tka-bx, .tka-bv { pointer-events: none; }
/* Off-stage twin used to measure a label before the axis is laid out: it must
   render (visibility, not display:none) or getComputedTextLength returns 0. */
.tka-meas {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  overflow: visible; visibility: hidden; pointer-events: none;
}

/* ── floating tooltip ──────────────────────────────────────────────────────
   Absolutely positioned inside #tkaChart so it travels with the card on scroll
   and needs no repositioning. pointer-events:none so it can never eat the
   pointer and flicker itself off. */
.tka-tip {
  position: absolute; left: 50%; top: 0; z-index: 20;
  pointer-events: none; opacity: 0; visibility: hidden;
  min-width: 150px; max-width: min(300px, 100%); padding: 11px 13px 10px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--tka-tip-1), var(--tka-pop-2));
  -webkit-backdrop-filter: saturate(200%) blur(26px); backdrop-filter: saturate(200%) blur(26px);
  box-shadow: var(--glass-rim), 0 18px 44px -16px rgba(var(--shadow-rgb),0.42);
  transform: translate(-50%, -100%) scale(0.96);
  transform-origin: 50% 100%;
  /* visibility flips only once the fade has finished, so the resting panel is
     truly out of the layout probe's and the screen reader's way. */
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0.16s;
}
.tka-tip.on {
  opacity: 1; visibility: visible; transform: translate(-50%, -100%) scale(1);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s;
}
.tka-tip.below { transform: translate(-50%, 0) scale(0.96); transform-origin: 50% 0; }
.tka-tip.below.on { transform: translate(-50%, 0) scale(1); }
/* The pointer nub. Sits behind the panel body so its own edge never shows. */
.tka-tip::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: var(--tka-nub); border-radius: 3px; z-index: -1;
}
.tka-tip.below::after { bottom: auto; top: -5px; }

.tka-tip-h { display: flex; align-items: center; gap: 7px; }
.tka-tip-h i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.tka-tip-h span {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-3);
}
.tka-tip-v {
  font-family: var(--display); font-size: 1.24rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); margin-top: 5px; white-space: nowrap;
}
/* Wraps rather than forcing the panel wider than the screen — the money line
   above is the one that must never break. */
.tka-tip-s { font-size: 0.76rem; color: var(--ink-3); margin-top: 3px; }

.tka-legend { display: flex; flex-wrap: wrap; gap: 5px 14px; align-content: flex-start; }
.tka-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: var(--ink-3); }
.tka-lg i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.tka-lg-net { background: none !important; border-top: 2px dashed var(--forest); border-radius: 0 !important; height: 0 !important; width: 14px !important; }

/* ══ SCENARIO CARDS ════════════════════════════════════════════════════════ */
.tka-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(14px, 1.8vw, 20px);
  align-items: start;
}
@media (max-width: 1040px) { .tka-cols { grid-template-columns: 1fr; } }

.tka-col { padding: 20px; position: relative; transition-delay: calc(var(--i, 0) * 70ms); }
.tka-col.best { box-shadow: var(--glass-rim), 0 0 0 1.5px var(--tka-ring), var(--glass-depth-lift); }
.tka-badge {
  position: absolute; top: -11px; left: 20px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase;
  /* Ink ON the brass fill, which is light in BOTH themes — this one stays a
     literal on purpose; theming it would put dark ink on dark ink. */
  background: linear-gradient(168deg, var(--brass-lit), var(--brass)); color: #23180A;
  box-shadow: 0 4px 12px -5px var(--brass-glow);
}
.tka-col-head h3 { font-size: 1.08rem; font-variation-settings: 'opsz' 24, 'SOFT' 14; }
.tka-col-head p { font-size: 0.8rem; color: var(--ink-3); margin-top: 3px; }

/* The verdict block. On the planned card it is the loudest thing on the card —
   it is the entire argument of the page in one number. On the other two it is a
   quiet surcharge, so the three still read as one comparison rather than one
   advert and two also-rans. */
.tka-verdict {
  margin: 14px 0; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-1); box-shadow: inset 0 1px 0 var(--surface-2);
}
.tka-verdict.is-best {
  background: var(--tka-credit-bg);
  box-shadow: inset 0 1px 0 var(--spec-soft), 0 6px 20px -14px var(--forest);
}
.tka-vd-k {
  display: block; font-size: 0.7rem; font-weight: 750;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--tka-credit-fg);
}
.tka-vd-v {
  display: block; margin-top: 3px;
  font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.15rem); font-weight: 640;
  line-height: 1.02; letter-spacing: -0.03em; color: var(--tka-credit-fg);
  font-variation-settings: 'opsz' 44, 'SOFT' 12;
}
.tka-vd-more {
  display: block;
  font-family: var(--display); font-size: 1.3rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink-2);
}
.tka-vd-n { display: block; font-size: 0.76rem; line-height: 1.4; color: var(--ink-3); margin-top: 4px; }
.tka-verdict.is-best .tka-vd-n { color: var(--tka-credit-fg); opacity: 0.82; }

/* Rows are a scannable ledger: one short label, one number. Nothing else. */
.tka-rows { list-style: none; padding: 0; margin: 0; }
.tka-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--hairline-2);
  font-size: 0.88rem;
}
.tka-row:last-child { border-bottom: 0; }
.tka-k { color: var(--ink-2); white-space: nowrap; }
.tka-v { font-weight: 650; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tka-na { font-style: normal; font-size: 0.78rem; color: var(--brass); font-weight: 650; }

.tka-row.is-credit { background: var(--tka-credit-bg); margin-inline: -8px; padding-inline: 8px; border-radius: 9px; border-bottom: 0; }
.tka-row.is-credit .tka-k { color: var(--tka-credit-fg); font-weight: 650; }
.tka-row.is-credit .tka-v { color: var(--tka-credit-fg); }

.tka-total, .tka-grand {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--tka-rule);
  font-size: 0.84rem; color: var(--ink-3);
}
.tka-total strong { font-size: 1.04rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.tka-grand { margin-top: 5px; padding-top: 7px; border-top-style: dashed; }
.tka-grand strong { font-family: var(--display); font-size: 1.22rem; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tka-col.best .tka-grand strong { color: var(--forest); }

/* ══ FINE PRINT ════════════════════════════════════════════════════════════
   Deliberately small: it is the legally required detail, not the message. */
.tka-fine {
  font-size: 0.68rem; line-height: 1.5; color: var(--ink-3);
  margin-top: 18px; max-width: 118ch;
}

/* ══ TOUCH ═════════════════════════════════════════════════════════════════
   Everything below is phone-only: it grows finger targets and buys the chart
   a little more width. The desktop layout above is untouched. */
@media (max-width: 720px) {
  /* 34 → 44: the full Apple HIG target. The painted track stays 6px. */
  .tka-slider input[type='range'] { height: 44px; }

  /* The chip IS the target. The native box is replaced by a drawn one and the
     input is stretched invisibly over the whole pill, so anywhere on the label
     is a 44px-tall hit — no ::after overlay needed, and the control the browser
     reports as the target is the one the finger actually gets. */
  .tka-chip {
    position: relative;
    min-height: 44px; padding: 0.5em 1em; gap: 9px;
  }
  .tka-chip input {
    position: absolute; inset: 0;
    width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer;
  }
  .tka-chip::before {
    content: ''; flex: 0 0 auto;
    width: 20px; height: 20px; border-radius: 7px;
    background: var(--tka-box-bg);
    box-shadow: inset 0 0 0 1.5px var(--tka-box-line), inset 0 1px 0 var(--spec-strong);
    transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }
  .tka-chip:has(input:checked)::before {
    background: var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.7 6.3 4.5 9 10.3 3.1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
    box-shadow: inset 0 0 0 1.5px rgba(120,88,38,0.55);
  }
  /* The real input is invisible, so the focus ring has to live on the drawn box. */
  .tka-chip:has(input:focus-visible)::before {
    box-shadow: 0 0 0 3.5px var(--brass-glow), inset 0 0 0 1.5px var(--tka-box-line);
  }

  .tka-age { min-height: 44px; width: 92px; }
  .tka-agewrap { align-items: center; }

  .tka-adv summary {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0.4em 0.5em;
  }

  /* Legal small print is still small print, but not sub-12px on a phone. */
  .tka-fine { font-size: 0.76rem; }
}

/* The narrowest phones: give the plot back the width the card padding takes,
   so three Hungarian scenario names still have air between them. */
@media (max-width: 360px) {
  .tka-hero { padding-inline: 15px; }
  .tka-col { padding: 18px 16px; }
  .tka-badge { left: 16px; }
  /* One step down so the three totals sit side by side without being squeezed.
     JS measures against the live class, so the fitting follows automatically. */
  .tka-bv { font-size: 17px; }
}