/* Tools — only what is specific to the calculators.
 *
 * Everything general (grid, buttons, cards, fields, tables, tags, type) comes
 * from /assets/site.css. If something here starts looking general, it belongs
 * there instead. See STYLE.md.
 */

/* The one-line answer under the headline figure. */
.tl-verdict { font-size: 15px; font-weight: 700; margin: 0; }
.tl-verdict.ok { color: var(--good); }
.tl-verdict.no { color: var(--warn); }

.tl-out { display: flex; flex-direction: column; gap: .7rem; }

/* Strategy rows: the winner, and the ones the fuel or tyres rule out. Shown
   rather than filtered, so the greying is doing real work. */
.tr-table tr.is-best td { background: rgba(74, 222, 128, .07); color: #fff; }
.tr-table tr.is-out td { opacity: .5; }

.tl-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: 1rem;
}
.tl-back:hover { color: #fff; }

/* ── Strategy planner ──────────────────────────────────────────────────────
   The switch that turns a fuel calculator into a race plan, and the tabs it
   opens. Kept here rather than in site.css because this is the only page
   with either; the moment a second one wants them, they move (see STYLE.md).
   -------------------------------------------------------------------------- */

/* Everything the planner adds. Hidden until the switch is on, so the page
   opens as the one-question tool most visits want. */
.tl-planonly { display: none; }
body.tl-planning .tl-planonly { display: block; }

.tl-switch {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.tl-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tl-switch__track {
  flex: 0 0 auto; width: 38px; height: 22px; margin-top: 1px; border-radius: 999px;
  background: rgba(255, 255, 255, .10); border: 1px solid var(--line);
  transition: background .15s, border-color .15s;
}
.tl-switch__knob {
  display: block; width: 16px; height: 16px; margin: 2px; border-radius: 50%;
  background: var(--ink-3); transition: transform .15s, background .15s;
}
.tl-switch input:checked + .tl-switch__track {
  background: rgba(var(--primary-rgb), .30); border-color: rgba(var(--primary-rgb), .55);
}
.tl-switch input:checked + .tl-switch__track .tl-switch__knob {
  transform: translateX(16px); background: #fff;
}
/* Keyboard users get the same ring the inputs get; the real checkbox is
   off-screen, so the track has to wear it. */
.tl-switch input:focus-visible + .tl-switch__track { outline: 2px solid var(--primary-light); outline-offset: 2px; }
.tl-switch__text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.tl-switch__text strong { color: #fff; font-weight: 700; }

.tl-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
/* A tab IS a button here - .btn .btn-sm .btn-ghost - so this only adds the
   two states a button has no opinion about: the one being read, and the one
   your fuel or tyres rule out. */
.tl-tab { gap: .4rem; }
.tl-tab.on {
  color: #fff; border-color: rgba(var(--primary-rgb), .55);
  background: rgba(var(--primary-rgb), .16);
}
/* An option the fuel or tyres rule out is dimmed, not removed: you can still
   open it and read exactly why it is out. */
.tl-tab.out { opacity: .55; }
.tl-tab__best {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--good); background: rgba(74, 222, 128, .14);
  border-radius: 4px; padding: 1px 5px;
}

/* ── Public, September 2026 ───────────────────────────────────────────────
   The calculators went into the site's navigation. Three things changed
   with that. The figures, stats and table cells drop the monospace face for
   the site's own with tabular numerals — the same numbers the leaderboard
   sets, so the page reads as one site rather than a terminal in it. The two
   columns are equal, so the inputs card is not a narrow aside beside a wide
   answer. And a phone gets a layout that fits: one column below 860px comes
   from site.css already; the headline figure, the stats row and the switch
   are sized for a 390px screen here.
   -------------------------------------------------------------------------- */
.tl-split { --aside: 1fr; }
.tr-figure__v, .tr-stats .v, .tr-table td.m, .tr-tag, .tl-tab__best {
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}
.tr-figure__v { font-size: 44px; letter-spacing: -0.02em; }
.tr-stats .v { font-size: 18px; font-weight: 700; }
.tr-stats .k, .tr-table th { font-family: var(--font-sans, 'Inter', system-ui, sans-serif); letter-spacing: .08em; }
.tr-table td.m { font-weight: 600; }

@media (max-width: 560px) {
  .tr-hero { padding: 2rem 0 1.6rem; }
  .tr-hero__sub { font-size: 14.5px; }
  .tr-card { padding: 1.1rem; }
  .tr-figure__v { font-size: 38px; }
  /* Four stats in one row do not fit a phone; two by two do. */
  .tr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
  .tr-table { font-size: 12.5px; }
  .tr-table th, .tr-table td { padding: .45rem .5rem; }
  .tl-tabs .btn { padding: .35rem .6rem; }
  .tl-switch__text { font-size: 13px; }
}