/* --------------------------------------------------------------------------
   22. TOOLS & CALCULATORS
   Violet --accent is the tools accent (DNA rule 8); orange stays the brand CTA.
   Everything here is border-elevated and 5px-stepped like the rest of the kit.
   -------------------------------------------------------------------------- */

/* .eyebrow-accent lives in main.css — it is sitewide (every FAQ header, the
   related-articles and author back-catalogue headers), not a tool-page style. */

/* ---- tool directory card ---- */
/* Tool-hub groups. The gap between groups is a relationship between siblings, so CSS
   owns it — the renderer used to compute `padding-top: n ? 56px : 0` from the map index,
   which meant reordering or filtering the groups could silently produce two "first"
   groups or none. */
/* .section.tool-group, not .tool-group: the base `.section:first-child` rule is (0,1,1)
   and would otherwise keep its 40px on the first group. */
.section.tool-group { padding-top: 0; }
.section.tool-group + .tool-group { padding-top: 56px; }

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  transition:
    border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}
.tool-card:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.tool-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent);
}
.tool-ico svg { width: 22px; height: 22px; }
.tool-card h3 { font-size: var(--text-lg); }
/* whole-card click target without nesting interactive elements */
.tool-card h3 a::after { content: ""; position: absolute; inset: 0; }
.tool-card p {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--foreground-light);
}
.tool-card .go {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent);
}
.tool-card .go .arrow {
  display: inline-block;
  transition: transform var(--duration) var(--ease);
}
.tool-card:hover .go .arrow { transform: translateX(3px); }

/* The directory is a scan surface, not a reading surface. Four compact cards
   fit across the desktop container, with the icon beside a short text stack.
   Related-tool cards intentionally keep the roomier treatment above. */
.tool-card-compact {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
}
.tool-card-compact .tool-ico {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin-bottom: 0;
}
.tool-card-compact .tool-ico svg { width: 19px; height: 19px; }
.tool-card-compact .tool-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tool-card-compact h3 {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}
.tool-card-compact p {
  flex: none;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--foreground-muted);
}

/* ---- calculator shell: sticky inputs left, results right ---- */
.calc {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.calc-inputs {
  position: sticky;
  top: calc(var(--header-h-desktop) + 20px);
}
/* simulator variant: inputs as a wide band on top, results full-width below */
.calc-stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.calc-stacked .calc-inputs { position: static; }
/* Fixed 6-up rather than auto-fit: auto-fit orphaned the 6th field onto its own row at
   common widths. Six 1-wide fields fill a row; three 2-wide ones line up under them. */
.band-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px 16px;
}
.band-grid > .field + .field { margin-top: 0; }
.band-grid > .band-wide { grid-column: span 2; }
.band-grid > .band-wide > .field { margin-top: 0; }

@media (max-width: 1080px) {
  .band-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band-grid > .band-wide { grid-column: span 1; }
}
@media (max-width: 760px) {
  .band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .band-grid { grid-template-columns: minmax(0, 1fr); }
}
.band-order {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.band-order .field { flex: 1; min-width: 260px; }
.band-order .field + .field { margin-top: 0; }
.band-order .btn { flex-shrink: 0; }
/* minmax(0,1fr), not the implicit `auto` track — an auto track sizes to
   max-content, which lets a long unbroken sentence widen the whole column */
.calc-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.calc-panel {
  padding: 22px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
}
.panel-head h2 { font-size: var(--text-lg); }
.panel-head .note {
  font-size: var(--text-xs);
  color: var(--foreground-muted);
}

/* ---- fields ---- */
/* one rhythm whether the neighbour is a single field or a two-up pair */
.field + .field,
.field + .field-pair,
.field-pair + .field,
.field-pair + .field-pair { margin-top: 16px; }
.field-hint { display: block; }
.field-input {
  position: relative;
  display: flex;
  align-items: center;
}
.calc .input,
.calc .select {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.calc .select { font-family: var(--font-sans); }
/* spinners fight the mono digits and the affix — drop them */
.field-input .input::-webkit-outer-spin-button,
.field-input .input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field-input .input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field-input .input { padding-right: 48px; }
.field-input .affix {
  position: absolute;
  right: 14px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--foreground-muted);
  pointer-events: none;
}
.field-input.affix-lead .input { padding-left: 30px; padding-right: 16px; }
.field-input.affix-lead .affix { left: 14px; right: auto; }
.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* the grid gap is the spacing inside a pair — the sibling rule must not stack on it */
.field-pair > .field + .field { margin-top: 0; }

/* ---- repeating entry rows (average-entry calculator) ---- */
.avg-head,
.avg-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}
.avg-head {
  margin-bottom: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--foreground-muted);
}
.avg-row + .avg-row { margin-top: 8px; }
.avg-n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--foreground-muted);
  text-align: center;
}
.avg-row .input { padding-left: 26px; padding-right: 10px; }
.avg-row .affix { left: 9px; right: auto; font-size: var(--text-xs); }
.avg-row .icon-btn { width: 34px; height: 34px; }
.avg-row .icon-btn:hover {
  border-color: var(--negative-border);
  color: var(--negative-strong);
}

/* ---- segmented control ---- */
.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-well);
}
.seg-btn {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--foreground-muted);
  white-space: nowrap;
  transition:
    color var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}
.seg-btn small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--foreground-muted);
  text-transform: lowercase;
}
.seg-btn:hover { color: var(--foreground-default); }
.seg-btn[aria-pressed="true"] {
  background: var(--surface-raised);
  border-color: var(--border-default);
  color: var(--foreground-default);
}
.seg-btn[aria-pressed="true"][data-tone="long"] { color: var(--positive-strong); }
.seg-btn[aria-pressed="true"][data-tone="short"] { color: var(--negative-strong); }

/* ---- advanced-settings disclosure ---- */
.calc-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-default);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--foreground-light);
  transition: color var(--duration) var(--ease);
}
.calc-more:hover { color: var(--foreground-default); }
.calc-more .chev {
  display: inline-flex;
  color: var(--foreground-muted);
  transition: transform var(--duration) var(--ease);
}
.calc-more .chev-down { width: 12px; height: 8px; }
.calc-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
.calc-more-panel { display: none; margin-top: 16px; }
.calc-more-panel[data-open="true"] { display: block; }

/* Tool-page sidebar: the risk note rides inside the sticky, under the TOC. The
   FAQ is the article's LAST element here, so .faq-section's 36px trailing
   padding is dead space that made the sticky bottom out below the visible
   accordion border — stripping it is what makes the bundle land flush. */
[data-tool] .article-layout article .faq-section:last-child { padding-bottom: 0; }

.calc-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.calc-actions .btn { flex: 1; }
/* THE reset control's band (owner 2026-08-05): one pill, centered, natural width */
.calc-actions-center {
  justify-content: center;
  padding-top: 18px;
  border-top: 1px solid var(--border-default);
}
.calc-actions-center .btn { flex: 0 0 auto; }
.calc-actions-center .btn svg { margin-right: -2px; }

/* ---- headline result ---- */
.result-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-well);
}
.result-hero[data-band="positive"] {
  background: var(--positive-tint-faint);
  border-color: var(--positive-border);
}
.result-hero[data-band="negative"] {
  background: var(--negative-tint-faint);
  border-color: var(--negative-border);
}
.result-hero[data-band="neutral"] {
  background: var(--brand-tint-faint);
  border-color: var(--brand-border);
}
.result-hero .k {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--foreground-muted);
}
.result-hero .num {
  font-size: 48px;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.result-hero .sub {
  font-size: var(--text-sm);
  color: var(--foreground-light);
  line-height: var(--leading-snug);
}
.result-hero .sub strong { color: var(--foreground-default); }

/* ---- stat tiles ----
   auto-fit packs as many 150px tiles per row as fit, which orphans the remainder: eight
   tiles at desktop width came out 6 + 2. Tile count is known at render time, so pick a
   column count that splits the tiles into even rows instead (8 -> 4+4, 6 -> 3+3). The
   quantity query reads "the last child is also the Nth child", i.e. there are N tiles. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  gap: 12px;
}
.stat-grid:has(> :last-child:nth-child(1)) { --stat-cols: 1; }
.stat-grid:has(> :last-child:nth-child(2)) { --stat-cols: 2; }
.stat-grid:has(> :last-child:nth-child(3)) { --stat-cols: 3; }
.stat-grid:has(> :last-child:nth-child(4)) { --stat-cols: 4; }
/* 5 across would be ~126px in the narrower results columns and wrap the values — 3 + 2 */
.stat-grid:has(> :last-child:nth-child(5)) { --stat-cols: 3; }
.stat-grid:has(> :last-child:nth-child(6)) { --stat-cols: 3; }
.stat-grid:has(> :last-child:nth-child(7)) { --stat-cols: 4; }
.stat-grid:has(> :last-child:nth-child(8)) { --stat-cols: 4; }
.stat-grid:has(> :last-child:nth-child(9)) { --stat-cols: 3; }
.stat-grid:has(> :last-child:nth-child(10)) { --stat-cols: 5; }
.stat {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.stat .k {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--foreground-muted);
}

/* ---- info tooltips on stat tiles ---- */
.stat-help {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.stat-info {
  display: inline-flex;
  color: var(--foreground-muted);
  opacity: 0.65;
  transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease);
}
.stat-info svg { width: 13px; height: 13px; display: block; }
.stat-info:hover,
.stat-info[aria-expanded="true"] {
  opacity: 1;
  color: var(--accent);
}
.stat-info:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 50%;
  opacity: 1;
}
.stat-tip {
  position: absolute;
  top: calc(100% + 7px);
  right: -9px;
  z-index: 5;
  width: 232px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-menu);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--foreground-default);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration) var(--ease),
    visibility var(--duration) var(--ease);
}
.stat-tip code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--foreground-light);
}
.stat-info:hover + .stat-tip,
.stat-info:focus-visible + .stat-tip,
.stat-info[aria-expanded="true"] + .stat-tip {
  opacity: 1;
  visibility: visible;
}

/* Narrow screens: drop the .stat-help anchor so the tip positions against the tile and
   spans its width. A 232px popover hung off an icon in a two-column grid runs off the
   left edge of the viewport — this cannot. */
@media (max-width: 760px) {
  .stat-help { position: static; }
  .stat-tip {
    top: calc(100% - 6px);
    left: 8px;
    right: 8px;
    width: auto;
  }
}
/* the tile has to sit above its neighbours while a tip is showing — :focus-within covers
   both keyboard focus and the click-latched state, since the button keeps focus */
.stat:hover,
.stat:focus-within { z-index: 3; }
/* Flex, not block: the value and its <small> unit are adjacent inline runs with
   no whitespace between them, so they could never soft-wrap — "$1,050.00/unit"
   ran straight past the tile border on narrow grids. As flex items the unit
   wraps onto its own line the moment the tile is too tight. */
.stat .v {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.stat .v small {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--foreground-muted);
}
.stat[data-tone="positive"] .v { color: var(--positive-strong); }
.stat[data-tone="negative"] .v { color: var(--negative-strong); }
.stat[data-tone="brand"] .v { color: var(--neutral-score); }

/* ---- stacked proportion meter ---- */
.meter {
  display: flex;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-well);
  overflow: hidden;
}
.meter span {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--on-accent);
  transition: width 0.5s var(--ease-out);
}
.meter span[data-k="win"] { background: var(--positive-strong); }
.meter span[data-k="draw"] {
  background: var(--border-strong);
  color: var(--foreground-default);
}
.meter span[data-k="loss"] { background: var(--negative-strong); }
.meter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  font-size: var(--text-sm);
  color: var(--foreground-light);
}
.meter-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.meter-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--border-strong);
}
.meter-legend .win i { background: var(--positive-strong); }
.meter-legend .loss i { background: var(--negative-strong); }
.meter-legend strong {
  font-family: var(--font-mono);
  color: var(--foreground-default);
}

/* ---- risk / reward ladder ---- */
.rr-bar {
  display: flex;
  height: 56px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  overflow: hidden;
}
.rr-seg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 2px;
  padding: 0 14px;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.4s var(--ease-out);
}
.rr-seg b {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.rr-seg span {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.rr-risk {
  background: var(--negative-tint-faint);
  border-right: 2px solid var(--negative-strong);
  color: var(--negative-strong);
}
.rr-reward {
  background: var(--positive-tint-faint);
  text-align: right;
  justify-items: end;
  color: var(--positive-strong);
}
.rr-labels {
  position: relative;
  height: 18px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--foreground-muted);
}
.rr-labels span { position: absolute; white-space: nowrap; }
.rr-labels .lo { left: 0; }
.rr-labels .hi { right: 0; }
.rr-labels .mid {
  transform: translateX(-50%);
  color: var(--foreground-default);
  font-weight: var(--weight-semibold);
}

/* ---- charts ---- */
.chart {
  padding: 18px 18px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.chart-head h4 { font-size: var(--text-sm); }
.chart-head .note {
  font-size: var(--text-xs);
  color: var(--foreground-muted);
}
.chart svg { display: block; width: 100%; height: auto; }
.chart .base-line {
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.chart .grid-line { stroke: var(--border-default); stroke-width: 1; }
.chart .series {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke: var(--brand-strong);
}
.chart .area { stroke: none; fill: var(--brand); opacity: 0.12; }
.chart[data-band="positive"] .series { stroke: var(--positive-strong); }
.chart[data-band="positive"] .area { fill: var(--positive); }
.chart[data-band="negative"] .series { stroke: var(--negative-strong); }
.chart[data-band="negative"] .area { fill: var(--negative); }
.chart-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--foreground-muted);
}

/* permanent peak / trough markers */
.chart-mark circle {
  stroke: var(--surface-raised);
  stroke-width: 2;
}
.chart-mark[data-kind="peak"] circle { fill: var(--positive-strong); }
.chart-mark[data-kind="trough"] circle { fill: var(--negative-strong); }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
  font-size: var(--text-xs);
  color: var(--foreground-muted);
}
.chart-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-legend .lg::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}
.chart-legend .lg-base::before {
  width: 12px;
  height: 0;
  border-radius: 0;
  border-top: 1px dashed var(--border-strong);
}
.chart-legend .lg-peak::before { background: var(--positive-strong); }
.chart-legend .lg-trough::before { background: var(--negative-strong); }

/* ---- value axis ---- */
.chart-y {
  position: absolute;
  inset: 0 auto 0 0;
  width: 52px;
  pointer-events: none;
}
.chart-y span {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--foreground-muted);
  white-space: nowrap;
}
.chart[data-yaxis] .chart-plot,
.chart[data-yaxis] .chart-foot { padding-left: 52px; }

/* reference series — "the same money without compounding" */
.chart .ghost {
  fill: none;
  stroke: var(--foreground-muted);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.75;
}
.chart-legend .lg-series::before { background: var(--positive-strong); }
.chart-legend .lg-ghost::before {
  width: 12px;
  height: 0;
  border-radius: 0;
  background: none;
  border-top: 1.5px dashed var(--foreground-muted);
}

/* ---- interactive chart: guide, dot, tooltip ---- */
.chart-plot { position: relative; }
.chart[data-hover] .chart-plot { cursor: crosshair; }
.chart-plot:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.chart-guide {
  stroke: var(--foreground-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease);
}
.chart-dot {
  fill: var(--surface-raised);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease);
}
.chart[data-band="positive"] .chart-dot { stroke: var(--positive-strong); }
.chart[data-band="negative"] .chart-dot { stroke: var(--negative-strong); }
.chart[data-band="neutral"] .chart-dot { stroke: var(--brand-strong); }
.chart[data-active="true"] .chart-guide,
.chart[data-active="true"] .chart-dot { opacity: 1; }

.chart-tip {
  position: absolute;
  top: 8px;
  z-index: 2;
  min-width: 186px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-menu);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease);
}
.chart[data-active="true"] .chart-tip { opacity: 1; }
.chart-tip[data-flip="right"] { transform: translateX(14px); }
.chart-tip[data-flip="left"] { transform: translateX(calc(-100% - 14px)); }
.chart-tip .tip-head {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--foreground-muted);
}
.chart-tip .tip-outcome,
.chart-tip .tip-open {
  display: block;
  margin-top: 3px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.chart-tip .tip-outcome[data-win="true"] { color: var(--positive-strong); }
.chart-tip .tip-outcome[data-win="false"] { color: var(--negative-strong); }
.chart-tip .tip-open { color: var(--foreground-muted); font-weight: var(--weight-medium); }
.chart-tip dl {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border-default);
}
.chart-tip dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--text-xs);
}
.chart-tip dt { color: var(--foreground-muted); }
.chart-tip dd {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  /* the global `dd { overflow-wrap: anywhere }` may not break tip VALUES mid-
     number ($11,916.6⏎7) — a squeezed tip wraps its label, never its digits */
  overflow-wrap: normal;
  white-space: nowrap;
}

/* the fee-comparison row the user actually picked */
tbody tr[data-current] { background: var(--brand-tint-faint); }
tbody tr[data-current]:hover { background: var(--brand-tint); }

/* ---- formula strip ---- */
.formula {
  padding: 12px 16px;
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-well);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: nowrap;
  color: var(--foreground-light);
}
.formula b { color: var(--foreground-default); font-weight: var(--weight-semibold); }

/* row of assumption pills under a result */
.assumptions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.assumptions span {
  padding: 4px 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-well);
  font-size: var(--text-xs);
  color: var(--foreground-light);
}
.assumptions span strong {
  font-family: var(--font-mono);
  color: var(--foreground-default);
}


/* --------------------------------------------------------------------------
   TOOLS RESPONSIVE (ported with the tools section from the coinsider template)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-inputs { position: static; }
}
/* stacked standard shell: fields flow two-up like the simulator band instead of
   ~985px single-column inputs; structural rows (head, dividers, advanced toggle,
   actions, pairs) keep the full width. Gap replaces the field rhythm margins. */
@media (max-width: 1024px) and (min-width: 641px) {
  .calc:not(.calc-stacked) .calc-inputs .calc-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  .calc:not(.calc-stacked) .calc-inputs .calc-panel > * {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .calc:not(.calc-stacked) .calc-inputs .calc-panel > .field { grid-column: auto; }
}

/* Narrower viewports: step the column count down, still in even rows. These must repeat the
   :has() selector — a bare .stat-grid rule loses to the quantity queries on specificity. */
@media (max-width: 860px) {
  .stat-grid:has(> :last-child:nth-child(4)) { --stat-cols: 2; }
  .stat-grid:has(> :last-child:nth-child(10)) { --stat-cols: 2; }
}

@media (max-width: 640px) {
  .field-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .result-hero .num { font-size: 38px; }
  /* the right-side note otherwise squeezes into a word-per-line stack beside the h2 */
  .panel-head { flex-wrap: wrap; }
  .panel-head .note { flex-basis: 100%; }
  /* four ~140px columns would clip the values — halve it, 8 tiles become 4 + 4 */
  .stat-grid:has(> :last-child:nth-child(7)) { --stat-cols: 2; }
  .stat-grid:has(> :last-child:nth-child(8)) { --stat-cols: 2; }
  .rr-seg { padding: 0 10px; }
  /* three absolute price labels collide on narrow rows — flow them instead
     (static position also neutralises the renderer's inline left:% on .mid) */
  .rr-labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 14px;
    height: auto;
  }
  .rr-labels span { position: static; }
  .rr-labels .mid { transform: none; }
  .calc-actions { flex-direction: column; }
  .band-order .field { min-width: 0; }
  .band-order .btn { width: 100%; }
  .calc-actions-center .btn { flex: 1; }
  /* no hover on touch — the tooltip would cover the curve it describes */
  .chart-tip { display: none; }
}

/* Phones. Must sit after the 640px block. Two columns, not full-width (owner
   2026-08-05): the original objections are both gone — .stat .v now flex-wraps
   its unit instead of forcing three-line values, and the 760px block already
   repositions the info tip to span the tile. */
@media (max-width: 520px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 12px 12px; }
}

/* The coins-box logo pills and search empty-state live in main.css — the coins
   box renders on REVIEW pages, which never enqueue this stylesheet. They only
   sat under this section's comment in the mockup's single-file stylesheet. */

/* ---- gas tracker (server-rendered tool, /tools/ethereum-gas-price/) ----
   Reuses .calc-panel, .panel-head, .stat-grid/.stat and .table-wrap; only the
   tool's own emphasis and states live here. */
/* minmax(0, 1fr): the cost table scrolls inside .table-wrap instead of widening the page. */
.gas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gas-tier .v { font-size: var(--text-2xl); }
.gas-tier .v small { flex-basis: 100%; font-size: var(--text-sm); }
.gas-unit { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--foreground-muted); }
.gas-tiers .stat[data-tone="brand"] { border-color: var(--brand-border); background: var(--brand-tint-faint); }
/* --negative-deep, not --negative-strong: --negative-strong is 3.57:1 in light
   mode against .calc-panel's --surface-raised — under WCAG AA's 4.5:1 for this
   text. See the commit message for the full light/dark WCAG and APCA numbers. */
.gas[data-gas-state="delayed"] .gas-status { color: var(--negative-deep); font-weight: var(--weight-semibold); }
.gas-unavailable {
  margin: 0;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface-well);
  color: var(--foreground-muted);
}
.gas-meta { margin: 14px 0 0; }
/* text-align/font-family/font-variant-numeric already come from main.css's
   td[data-num], th[data-num] contract (~line 1250) — only nowrap is ours. */
.gas-costs [data-num] { white-space: nowrap; }
.gas-note { margin: 12px 0 0; }
/* Row headers (th, scope="row") default to centered, normal-weight text with
   no cell border — only tbody td gets those from main.css. Mirror tbody td's
   own geometry (padding/border-bottom/vertical-align) and add the left
   alignment and semibold weight a td never needed. */
.gas-costs tbody th {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
  text-align: left;
  font-weight: var(--weight-semibold);
}
.gas-costs tbody tr:last-child th { border-bottom: 0; }
@media (max-width: 640px) {
  /* Two- and three-column tiles (theme "Phones" rule kicks in at 520px, so
     521–640px is still 3 columns): --text-2xl wraps "gwei" onto a second
     line at both widths; --text-xl keeps value and unit on one line. */
  .gas-tier .v { font-size: var(--text-xl); }
}
@media (max-width: 520px) {
  /* The "to send ETH" note falls back to the theme's smallest stat size so it
     doesn't compete with the now-relatively-larger value for tile width. */
  .gas-tier .v small { font-size: var(--text-xs); }
  /* The note under the table already says the figures are medians; dropping
     the Gas-used column (desktop keeps it) is what lets Action/Slow/Standard/
     Fast fit a 390px viewport without .table-wrap needing to scroll. */
  .gas-col-gas { display: none; }
  .gas-costs table { font-size: var(--text-xs); }
  /* .gas-costs .table-wrap, not .gas-costs: needs to out-specificity our own
     .gas-costs tbody th above (0,1,2), not just main.css's thead th/tbody td.
     Longhand padding, not the shorthand, so the 12/13px vertical padding
     those rules already set is untouched — only the horizontal value changes. */
  .gas-costs .table-wrap th,
  .gas-costs .table-wrap td {
    padding-left: 4px;
    padding-right: 4px;
  }
}
@media (max-width: 360px) {
  /* Narrowest supported width: --text-xl (24px) still doesn't fit a value
     like "0.0411" in a two-up 137px tile here — one step smaller. Must sit
     after the 640px block above: same selector, same specificity, later
     source wins. */
  .gas-tier .v { font-size: var(--text-lg); }
}