/* ============================================================================
   fuel.css — FuelFacts signature layer (AAA spec, per-site set piece)
   Loads AFTER data.css. Everything here is namespaced .fx-* so it can never
   collide with the shared component layer, which another session owns.

   Voice: ENCYCLOPEDIC ARCHIVE. A reference volume, not an app. Hairline
   engraving, running heads in small caps, a marginalia rule down the left of
   the set piece, en-dashes and specimen numbering. Nothing bounces.
   ========================================================================== */

/* --------------------------------------------------- 0. ACCENT REPAIR (local)
   data.css declares  --accent: var(--site-accent, #3C4A55)  on :root, but
   shell() writes --site-accent on <body>. A custom property is substituted
   where it is DECLARED, so --accent resolves to the neutral fallback on every
   page of every ring site and the per-site hue never reaches the CSS. Repaired
   here rather than in the master because _shared is owned by another session
   mid-rollout — flag raised; the master fix is one line.

   Dark values are lightened deliberately: the published light-paper accents sit
   at 2.4–3.3:1 on the dark ground and would fail AA if reused unchanged.
   fuel light #2F6B3F = 6.06:1 on paper · dark #6FBF86 = 8.33:1 on dark paper
   (both values are the ring's own, from _shared/contrast-check.mjs). */
:root {
  --accent: #2F6B3F; --accent-2: #2F6B3F; --accent-3: #2F6B3F;
  --accent-soft: color-mix(in srgb, #2F6B3F 9%, var(--paper));
}
:root[data-theme="dark"] {
  --accent: #6FBF86; --accent-2: #6FBF86; --accent-3: #6FBF86;
  --accent-soft: color-mix(in srgb, #6FBF86 13%, var(--paper));
}
/* anything that paints #fff on a solid accent needs dark ink once the accent
   itself is light */
:root[data-theme="dark"] .az a:hover,
:root[data-theme="dark"] .pager .on,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .dial-choices button[aria-pressed="true"] { color: #101311; }

/* ------------------------------------------------- 1. micro-iconography
   fuel's drawing language: 1.4px hairline, round caps, NO fill, 24-box.
   (burn draws with a 2.2px notebook nib; fly with 1px atlas rules and solid
   survey marks; cook with solid butcher silhouettes. Four different hands.) */
.fx-i {
  width: 1em; height: 1em; flex: none; vertical-align: -.12em;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.fx-i-lg { width: 1.15em; height: 1.15em; }

/* ------------------------------------------------------ 2. THE SET PIECE
   "Energy anatomy" — one food's calories dissected into the three fuels that
   supply them, with the per-gram arithmetic shown and reconciled against the
   USDA figure printed at the top of the page. */
.fx-anat {
  margin: var(--s5) 0 0;
  padding-left: var(--s4);
  border-left: 1px solid var(--line-2);   /* the marginalia rule */
  max-width: 760px;
}
@media (max-width: 640px) { .fx-anat { padding-left: var(--s3); } }

.fx-anat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: 14px;
}
.fx-anat-title {
  font-family: var(--sans); font-size: .7rem; font-weight: 650;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
}
/* AAA+++ §3.4 — the plate number is a specimen CODE, so it belongs to the mono
   spec voice, not the UI sans. Same type, same size: no reflow, CLS unchanged. */
.fx-anat-plate {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}

/* the drawn bar */
.fx-bar { display: block; width: 100%; height: auto; }
.fx-bar .seg { stroke: var(--ink); stroke-width: 1; }
.fx-bar .seg-p { fill: var(--accent); fill-opacity: .82; }
.fx-bar .seg-c { fill: url(#fxHatchC); }
.fx-bar .seg-f { fill: url(#fxHatchF); }
/* the hatch patterns live in a separate <defs> svg, so they are scoped to the
   figure, not to .fx-bar */
.fx-anat .hatch-line { stroke: var(--ink-2); stroke-width: 1; fill: none; }
.fx-bar .frame { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.fx-bar .segdiv { stroke: var(--ink); stroke-width: 1.1; }
.fx-bar .inlab {
  font-family: var(--sans); font-size: 11px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.fx-bar .inlab-on { fill: #FFFFFF; }
.fx-bar .inlab-off { fill: var(--ink); }
.fx-bar .rule { stroke: var(--line-2); stroke-width: 1; }
.fx-bar .rtick { stroke: var(--line-2); stroke-width: 1; }
.fx-bar .rlab {
  font-family: var(--sans); font-size: 10px; fill: var(--faint);
  letter-spacing: .05em; font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .fx-bar .inlab-on { fill: #0E1211; }

/* ---- the drawing hand at night (AAA+++ §5, "already-bespoke 7") -------------
   The geometry is UNTOUCHED — same 720-unit bar, same 1.4px round-cap hand, the
   same ruler scaled to the kcal figure this page publishes. The only change is
   ink: on warm basalt paper, --ink resolves to #EDE9DF, which draws these
   hairlines at very nearly pure white. A pure-white engraving on a dark ground
   glares and reads as a screenshot inverted, not as a plate printed at night,
   so every stroke drops one step to --ink-2 (#C7C1B4) — still 9.6:1, still
   unmistakably the same hand. Fills are untouched: the carb/fat segments are
   drawn with TEXTURE (hatch patterns), never colour, which is exactly why this
   set piece survives a mode flip at all. */
:root[data-theme="dark"] .fx-bar .seg,
:root[data-theme="dark"] .fx-bar .frame,
:root[data-theme="dark"] .fx-bar .segdiv { stroke: var(--ink-2); }
:root[data-theme="dark"] .fx-bar .inlab-off { fill: var(--ink-2); }
:root[data-theme="dark"] .fx-anat .hatch-line { stroke: var(--ink-2); }

/* the working — where the arithmetic is shown, not hidden */
.fx-work { margin-top: 18px; border-top: 1px solid var(--line); }
.fx-work-row {
  display: grid; grid-template-columns: 1.3fr 1fr auto;
  gap: var(--s3); align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
/* Narrow: the name and its result stay on one line, the working drops beneath
   them as the sub-line — the arithmetic reads as an annotation, not a column. */
@media (max-width: 560px) {
  .fx-work-row { grid-template-columns: 1fr auto; row-gap: 3px; }
  .fx-work-name { grid-column: 1; grid-row: 1; }
  .fx-work-out  { grid-column: 2; grid-row: 1; }
  .fx-work-sum  { grid-column: 1 / -1; grid-row: 2; }
}
.fx-work-name {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .93rem; font-weight: 600; color: var(--ink);
}
.fx-work-sum {
  font-size: .87rem; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: -.005em;
}
.fx-work-sum b { color: var(--ink-2); font-weight: 600; }
.fx-work-out {
  text-align: right; font-variant-numeric: tabular-nums;
  font-size: .95rem; font-weight: 650; color: var(--ink); white-space: nowrap;
}
.fx-work-out span { color: var(--muted); font-weight: 500; font-size: .84rem; }

/* the reconciliation — the whole reason this set piece earns its space */
.fx-recon {
  margin-top: 14px; padding: 12px 0 0;
  font-size: .84rem; line-height: 1.6; color: var(--muted);
  display: flex; gap: 10px; align-items: flex-start;
}
.fx-recon .fx-i { margin-top: .25em; color: var(--faint); }
.fx-recon b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* provenance as ornament — a dated colophon, not a footnote */
.fx-prov {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
}
.fx-prov b { color: var(--muted); font-weight: 600; letter-spacing: .1em; }
.fx-prov .fx-sep { color: var(--line-2); }

/* ------------------------------------------- 3. the running head (layout move)
   Category + specimen number set as a running head above the H1, the way a
   reference volume numbers its plates. */
.fx-runhead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.fx-runhead a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.fx-runhead a:hover { color: var(--accent); border-color: var(--accent); }
.fx-runhead .fx-rule { flex: 1 1 40px; height: 1px; background: var(--line-2); min-width: 24px; }
.fx-runhead .fx-plate { color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: .1em; }

/* ------------------------------------------------- 4. confident emptiness
   One full-width near-empty moment per food page. It is not decoration: it is
   the page admitting the limits of its own numbers. */
.fx-caveat { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fx-caveat .wrap { padding-top: var(--s8); padding-bottom: var(--s8); }
.fx-caveat p {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 400; line-height: 1.45; letter-spacing: -.02em;
  color: var(--ink-2); max-width: 26ch; margin: 0 auto; text-align: center;
}
.fx-caveat p em { color: var(--ink); font-style: italic; }
@media (max-width: 640px) { .fx-caveat .wrap { padding-top: var(--s6); padding-bottom: var(--s6); } }

@media (prefers-reduced-motion: reduce) {
  .fx-anat *, .fx-bar * { transition: none !important; animation: none !important; }
}

/* ============================================================================
   5. AAA+++ ADOPTION (site-local half of _plans/AAA-PLUS-STUDIO-PREMIUM.md)
   The mechanics themselves live in the shared data.css §20. What is left for a
   site to do is (a) reach the figures whose markup is pinned by verify.mjs's
   arithmetic regexes and therefore cannot carry a class, and (b) choreograph
   the two hero elements the shared shell emits without a hook.
   ========================================================================== */

/* ---- 5.1 tabular figures the markup cannot be given a class ---------------
   §3.4: anything a reader COMPARES gets tabular numerals. table.data cells are
   already covered by data.css §20.4. These are the rest — and each one of them
   is matched literally by verify.mjs (`<span class="v">…`, `<td class="hi">…`),
   which re-derives every figure on 1,799 pages from the raw USDA row. Adding a
   class to that markup would silently disable an arithmetic check, so the
   retint is done here where it costs nothing. */
.stat .v,
.vs-side .v,
.calc .out .v,
.fx-work-out, .fx-work-sum,
.grid small, .chip b {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- 5.2 entrance choreography for the hero stack (§3.7) ------------------
   Only the above-the-fold kicker -> h1 -> answer stack, once, on load, 60ms
   apart. The answer block carries .reveal-3 in the markup; the eyebrow and the
   h1 are emitted by the shared shell with no class of their own, so they are
   reached by position instead. Gated behind no-preference exactly as §20.8 is:
   a reduced-motion or no-JS reader gets the finished page, never content
   stranded at opacity 0. Opacity + 12px translate only — CLS stays 0.00. */
@media (prefers-reduced-motion: no-preference) {
  .hero > .wrap > .eyebrow { animation: aaa-rise var(--t-slow) var(--ease-out) both; }
  .hero > .wrap > h1       { animation: aaa-rise var(--t-slow) var(--ease-out) both; animation-delay: 60ms; }
}

/* ---- 5.3 the answer block, unboxed (§20.10 continued) ---------------------
   data.css strips the card; the numeral it leaves behind is set in Fraunces at
   --fs-stat. On this site the numeral is a MEASUREMENT, so it keeps the ring's
   accent and the unit stays in the mono voice — the split-second read is
   "figure, then unit", which is how a spec sheet is laid out. */
.answer.aaa { max-width: var(--measure); }
.answer.aaa .big > span { font-family: var(--mono); letter-spacing: .04em; }
.answer.aaa > .srcline { max-width: var(--measure); }

/* ---- 5.4 the method mini-spec, in this site's register (§4) --------------- */
.method .formula { line-height: 1.55; }
.method li b { color: var(--ink); font-weight: 600; }

/* ---- 5.5 confident emptiness (§20.16) ------------------------------------
   The caveat band IS this site's breathe moment, so the shared min-height has
   to add to the band's own padding rather than fight it. */
.fx-caveat.breathe { min-height: 0; }
.fx-caveat.breathe .wrap { min-height: 18vh; display: flex; align-items: center; }
@media (max-width: 640px) { .fx-caveat.breathe .wrap { min-height: 10vh; } }