/* Blink Fuel — restored/rebuilt infographic figures.
   Cole, 2026-09-02. Loaded on the 6 pages that carry a figure.

   TOKENS ONLY. Every colour below is one of the site's own custom properties:
   .elementor-kit-6      --e-global-color-primary  #F29E35 (accent, decorative mark ONLY)
                         --e-global-color-secondary #C56E01
   inline :root          --e-global-color-astglobalcolor1 #045cb4 (blue, 6.4:1 on white)
                         --e-global-color-astglobalcolor2 #1e293b (ink, 12.6:1)
                         --e-global-color-astglobalcolor3 #334155 (ink-2, 9.9:1)
                         --e-global-color-astglobalcolor4 #FFFFFF
                         --e-global-color-astglobalcolor5 #F0F5FA (tint)
                         --e-global-color-astglobalcolor7 #D1D5DB (hairline)
   Type duo already served sitewide: Roboto Slab (display) + Roboto (text).
   No gradients. No motion (Aria's direction: motion on Blink comes back through her).
   Accent never carries meaning on its own — it is a rule, never a label. */

.bf-fig {
  margin: 2.25rem auto;
  max-width: 1100px;
  width: 100%;
  padding: 0 clamp(0.75rem, 3vw, 1.25rem);
  box-sizing: border-box;
  color: var(--e-global-color-astglobalcolor2);
  font-family: "Roboto", system-ui, sans-serif;
}

.bf-fig__t {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.2vw + 0.95rem, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 0.25rem;
  color: var(--e-global-color-astglobalcolor2);
}

/* the one decorative use of the accent: a short rule under the figure title */
.bf-fig__t::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 0.6rem;
  background: var(--e-global-color-primary);
}

/* Deck slide 27: on 390-wide, let the heading use the full measure instead of
   a balanced short line with empty space to the right. */
@media (max-width: 700px) {
  .bf-fig__t { text-wrap: pretty; max-width: none; }
}

.bf-fig__lede {
  margin: 0.85rem 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--e-global-color-astglobalcolor3);
  max-width: 62ch;
}

/* ---------- comparison table ----------
   Geometry is chosen so NOTHING restyles between 390px and 1280px: the topic is a
   full-width band header (th colspan=2), the two answers sit beneath it. Real table
   semantics survive at every width — no display:block, no ARIA patch-up, no
   horizontal scroll, no squeezed third column. */

.bf-fig__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--e-global-color-astglobalcolor7);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.45;
  table-layout: fixed;
  /* explicit paper: several of these sections sit on a tinted band, and the
     Blink column's tint must read against the table, not against the section. */
  background: var(--e-global-color-astglobalcolor4);
}

.bf-fig__table caption {
  caption-side: top;
  text-align: left;
  /* the accessible full-sentence name; visible text lives in the figcaption */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bf-fig__table thead th {
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.7rem 0.9rem;
  vertical-align: bottom;
  border-bottom: 2px solid var(--e-global-color-astglobalcolor7);
  color: var(--e-global-color-astglobalcolor3);
  width: 50%;
}

/* Blink column: identified by its heading text AND a tint fill, never by colour alone. */
.bf-fig__table thead th.is-ours {
  color: var(--e-global-color-astglobalcolor1);
  border-bottom-color: var(--e-global-color-primary);
}

.bf-fig__table td.is-ours,
.bf-fig__table thead th.is-ours {
  background: var(--e-global-color-astglobalcolor5);
}

.bf-fig__table th.bf-band {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-align: left;
  padding: 0.85rem 0.9rem 0.3rem;
  color: var(--e-global-color-astglobalcolor2);
  border-top: 1px solid var(--e-global-color-astglobalcolor7);
  background: var(--e-global-color-astglobalcolor4);
}

.bf-fig__table td {
  padding: 0.2rem 0.9rem 0.95rem;
  vertical-align: top;
  color: var(--e-global-color-astglobalcolor3);
}

.bf-fig__table td b {
  font-weight: 600;
  color: var(--e-global-color-astglobalcolor2);
}

/* Immunity: the franchise pages carry an UNSCOPED legacy rule
   `.fPage th, td { padding:15px; border-bottom:1px solid #ddd }` — the bare `td`
   leaks into every table on the page, including ours. Neutralised explicitly rather
   than left to specificity luck. */
.bf-fig__table th,
.bf-fig__table td { border-left: 0; border-right: 0; }
.bf-fig__table tbody td { border-bottom: 0; }

/* Pre-existing defect on the same pages, fixed because we are shipping to them:
   the legacy 3-column comparison tables overrun a narrow viewport (3 columns x 15px
   cell padding, auto layout). That is a real horizontal scroll on a phone, so it does
   not ship next to a figure built to avoid one.
   Perta 2026-09-02, WCAG 1.4.10 Reflow: the original rule was scoped to `.fPage table`,
   which only covers /quick-start-guide/blinkfuel-vs-diy/. The same unclassed legacy
   table sits in `section.section-light` on two more of these six pages and still
   overran a 320px viewport by 54px (vs-the-giants) and 20px (own-your-fuel-delivery-
   business) — measured, and reproduced with this stylesheet disabled, so pre-existing.
   1.4.10 is tested at 320 CSS px, not 390. Scope stays these six pages (this sheet is
   loaded nowhere else) and the figure's own table is excluded. */
@media (max-width: 600px) {
  .fPage table,
  section table:not(.bf-fig__table) { table-layout: fixed; width: 100%; }
  .fPage table th,
  .fPage table td,
  section table:not(.bf-fig__table) th,
  section table:not(.bf-fig__table) td { padding: 10px 8px; overflow-wrap: break-word; }
}

/* every figure in the set: gallons, prices, weeks and phone numbers line up */
.bf-fig .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 1rem;
  font-weight: 600;
  color: var(--e-global-color-astglobalcolor2);
  white-space: nowrap;
}

/* ---------- two-panel mechanism chart (RD-3) ----------
   Small multiples, not a dual-series overlay: each panel shows the SHAPE of one
   fee structure on the same x scale. Nothing is claimed about relative magnitude,
   there is no y axis and there are no numerals — which is the whole reason this
   figure can carry the "success tax" idea that the pulled raster carried with an
   unsourced dollar label on it. Series palette #045cb4 / #C56E01 validated: CVD dE 26.5
   (protan), normal-vision dE 33.2, both >=3:1 on white. Identity is also carried
   by each panel's own heading, never by colour alone. */

.bf-fig__panels {
  display: grid;
  gap: 1px;
  background: var(--e-global-color-astglobalcolor7);
  border: 1px solid var(--e-global-color-astglobalcolor7);
}

@media (min-width: 700px) {
  .bf-fig__panels { grid-template-columns: 1fr 1fr; }
}

.bf-panel {
  background: var(--e-global-color-astglobalcolor4);
  padding: 1rem 1.1rem 1.15rem;
}

.bf-panel :is(h2, h3, h4, h5) {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.6rem;
  color: var(--e-global-color-astglobalcolor2);
}

.bf-panel svg { display: block; width: 100%; height: auto; }

.bf-panel p {
  margin: 0.55rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--e-global-color-astglobalcolor3);
}

.bf-bar--them { fill: var(--e-global-color-secondary); }
.bf-bar--us { fill: var(--e-global-color-astglobalcolor1); }
.bf-axis { stroke: var(--e-global-color-astglobalcolor7); stroke-width: 1; }
/* Scale labels are HTML, not <text> inside the SVG: text in a fixed viewBox scales
   with the panel, so it would render ~22px on desktop and ~12px at 390px — the wrong
   size at both ends. As HTML they hold one size everywhere, and stay selectable. */
.bf-scale {
  display: flex;
  justify-content: space-between;
  margin: 0.35rem 0 0;
  padding: 0 2px;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--e-global-color-astglobalcolor3);
}

/* ---------- stacked explainer cards (RD-4) ---------- */
/* ol.<class> beats the theme's `.entry-content ol { padding-left: 40px }`, which
   otherwise leaves a grey gutter where the marker column used to be. */
ol.bf-fig__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  display: grid;
  gap: 1px;
  background: var(--e-global-color-astglobalcolor7);
  border: 1px solid var(--e-global-color-astglobalcolor7);
}

@media (min-width: 820px) {
  ol.bf-fig__cards { grid-template-columns: 1fr 1fr; }
}

ol.bf-fig__cards li {
  background: var(--e-global-color-astglobalcolor4);
  padding: 1.05rem 1.1rem 1.15rem;
  display: grid;
  grid-template-columns: 34px 1fr;
  /* row 1 hugs the heading, so the heading-to-body gap is identical in every card
     regardless of how many lines the body runs to */
  grid-template-rows: auto 1fr;
  column-gap: 0.85rem;
  align-items: start;
  margin: 0;
}

.bf-fig__cards :is(h2, h3, h4, h5) {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.3rem;
  color: var(--e-global-color-astglobalcolor2);
}

.bf-fig__cards li > p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--e-global-color-astglobalcolor3);
}

/* A numeral, not a stock icon: it is honest ordinal information, it sets in the
   display face, and it gives the set a real tabular-figures surface. */
/* Perta 2026-09-02, WCAG 1.4.3: this numeral is the only ordinal cue a sighted reader
   gets (the <ol> carries it for AT, but list-style is none), so it is informative text,
   not decoration, and it has to clear a contrast threshold. #C56E01 on white measures
   3.75:1 — under the 4.5:1 body floor. The theme's root font-size is 14.592px, not 16,
   so the authored 1.5rem rendered at 21.9px and missed the >=24px "large text" band by
   2px. max(26px, 1.8rem) holds it at or above 24px whatever the root does, which puts
   it in the 3:1 band: 3.75 >= 3.0 PASS. Colour token unchanged. */
.bf-fig__cards .n {
  grid-row: span 2;
  font-family: "Roboto Slab", Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: max(26px, 1.8rem);
  font-weight: 600;
  line-height: 1;
  color: var(--e-global-color-secondary);
  padding-top: 0.1rem;
}

/* ---------- restored raster figure ---------- */
.bf-fig__pic img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--e-global-color-astglobalcolor7);
  box-sizing: border-box;
}

/* Dex's binding note: these sheets are 1.79:1 landscape with ~5px cap height on a
   phone. The picture is a tap target that opens the 2400px master.
   Perta 2026-09-02, WCAG 2.2 SC 2.5.8 Target Size (Minimum): as an inline-block the
   link measured 189.7 x 19.6 CSS px at 390px — under the 24px floor. It cleared the
   criterion only through the spacing exception (nearest other target 464.6px away),
   which is a technicality, not a thumb. inline-flex + min-height puts the box at
   >=28px so it passes 2.5.8 directly. This is the ONE tap target the figure adds.
   Kassia 2026-09-03 (fix 3): this rule was `display:none` with the inline-flex hidden
   in a `max-width:767px` query, and the <img> is NOT inside the anchor — so a desktop
   reader of a 2,752px-wide poster rendered at ~1,060px had no enlarge affordance and
   no tab stop at all. The link now shows at every width; the min-height and the
   focus-visible ring Perta certified are unchanged. text-transform:uppercase is gone
   with it: at desktop measure this reads as a sentence-case link (which is what the
   markup already says), not a shouted label. */
.bf-fig__zoom {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--e-global-color-astglobalcolor1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bf-fig a:focus-visible {
  outline: 3px solid var(--e-global-color-astglobalcolor1);
  outline-offset: 2px;
}

/* ---------- caption + source ---------- */
/* Kassia 2026-09-02: this theme's root font-size is 14.592px, not 16, so an authored
   0.8125rem computed to 11.86px at 390px - under the 12-13px caption floor. max() holds
   the floor in px whatever the root does, and still scales up if the root grows.
   Deck 2026-09-13 slides 17-21 / 23-25: one step up (13px -> 15px) so the circled
   figure captions read as body, not fine print. */
.bf-fig figcaption {
  margin-top: 0.7rem;
  font-size: max(15px, 0.9375rem);
  line-height: 1.5;
  color: var(--e-global-color-astglobalcolor3);
  max-width: 68ch;
}

/* Kassia 2026-09-03 (fix 2): this span used to set in ui-monospace at the SAME colour as
   the 13px Roboto caption above it — differentiated by typeface, not by hierarchy, so it
   read as terminal output under a marketing poster. And where a second span carries the
   financing disclaimer, the two ran together on a 3.2px gap.
   Now: the figure's own body family (inherited from .bf-fig), one step down in size, one
   step down in ink, and a real gap. --bf-ink-4 is the one value in this sheet that is not
   already a site global — slate-500, computed 4.76:1 on #FFFFFF: AA PASS at the 12px it
   sets at. Verified against the paper it actually sits on, not assumed: all 19 .bf-fig__src
   spans across the six figure pages measured a used background of rgb(255,255,255) at both
   390 and 1280 (38 measurements, _figqa srcStyles). It does NOT clear 4.5:1 on the tints —
   #F0F5FA computes 4.34:1 and #eff6ff 4.37:1 — so if a figure is ever moved onto a tinted
   band this token has to darken with it. Declared as a named token, not sprayed as a hex,
   and the candidate to promote into Iris's SSOT as the subordinate-ink step (the existing
   ramp stops at #334155). */
.bf-fig { --bf-ink-4: #64748b; }

.bf-fig__src {
  display: block;
  margin-top: 7px;
  font-family: inherit;
  font-size: max(12px, 0.75rem);
  line-height: 1.45;
  color: var(--bf-ink-4);
}

/* the financing disclaimer is a second .bf-fig__src, and must not read as a run-on of
   the source note above it */
.bf-fig__src + .bf-fig__src { margin-top: 14px; }