/* ============================================================================
   RunCost (mpg.amit.marketing) — SITE-LOCAL AAA+++ layer.
   Spec: _plans/AAA-PLUS-STUDIO-PREMIUM.md §5, row "mpg".

   The shared mechanics (mono spec voice, keel rules, grain, warm basalt dark,
   promoted source line, related cards) arrive in data.css §20. Nothing here
   duplicates them. What lives here is the one thing that is this site and no
   other: the WORKSHOP LOGBOOK — a ledger stub torn from a service book, with
   the fuel-gauge arc drawn in this site's hand.

   The hand: a THICK BUTT-CAP band. Every terminal on this site is cut square.
   Round caps belong to FuelFacts, dashed hairlines belong to LuxPlan; a
   mechanic's gauge is a printed band with a square end, so that is what is
   drawn here and it is never softened.

   Loaded after styles.css and data.css, so every var() below resolves and no
   rule here needs !important. Zero external requests: CSS + inline SVG only,
   no layout animation, so CLS stays 0.00.
   ========================================================================== */

:root {
  --led-edge: 15px;                                   /* the perforated stub */
  --gauge-track: color-mix(in srgb, var(--ink) 9%, var(--paper-2));
}
:root[data-theme="dark"] {
  --gauge-track: color-mix(in srgb, var(--ink) 12%, var(--surface));
}

/* ---- 1. the ledger stub ------------------------------------------------ */
/* A page torn out of a service book: perforation down the left edge, ruled
   money rows, and the gauge printed in the margin. It is deliberately NOT a
   rounded card — a card is a component, and this is a document. */
.ledger {
  position: relative;
  margin: var(--s4) 0 0;
  padding-left: var(--led-edge);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ledger::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--led-edge);
  background:
    radial-gradient(circle at 7.5px 6px, var(--paper) 2.4px, transparent 2.6px) 0 0 / 15px 12px repeat-y,
    var(--paper-2);
  border-right: 1px dashed var(--line-2);
}

.led-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 0 var(--radius) 0 0;
}
.led-head .led-ref { color: var(--faint); }

.led-body { display: grid; grid-template-columns: 252px 1fr; }
.led-gauge { padding: 14px 14px 12px; border-right: 1px solid var(--line); }
.led-gauge svg { display: block; width: 100%; height: auto; }
.g-cap {
  margin: 8px 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.g-cap b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }

/* the gauge's own type: everything on the drawing is spec voice, never body */
.g-val {
  font-family: var(--mono);
  font-size: 29px;
  font-weight: 600;
  fill: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.g-unit { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; fill: var(--muted); }
.g-end  { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; fill: var(--faint); }

/* ---- 2. the money rows ------------------------------------------------- */
/* Itemised the way a service invoice is itemised: label left in the spec
   voice, figure right and tabular, one hairline per line. */
.led-rows {
  margin: 0;
  padding: 4px 16px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
}
.led-rows dt,
.led-rows dd {
  border-top: 1px solid var(--line);
  padding: 9px 0;
  margin: 0;
}
.led-rows dt {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 18px;
}
.led-rows dd {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.led-rows dd .of { font-weight: 400; color: var(--muted); font-size: .86em; }
.led-rows dt:first-of-type, .led-rows dd:first-of-type { border-top: 0; }

/* ---- 3. the stamp ----------------------------------------------------- */
/* The site's editorial position, rendered as the thing a workshop actually
   does to a test sheet: stamp it. mpg's whole argument is that a laboratory
   test cycle is not your driving, and the stamp says so on every entry. */
.led-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
}
.led-note {
  margin: 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint);
}
.stamp {
  flex: none;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 3px;
  padding: 5px 9px;
  transform: rotate(-3.5deg);
}
.ledger .srcline {
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
  .led-body { grid-template-columns: 1fr; }
  .led-gauge { border-right: 0; border-bottom: 1px solid var(--line); }
  .stamp { transform: rotate(-2deg); }
}

/* ---- 4. the answer block, in this site's register ---------------------- */
.answer.aaa .kicker { display: block; margin: 0 0 12px; }
/* `.answer p` in data.css sets a 1.02rem body size and outranks .stat-display
   on specificity, which silently shrank the hero numeral to body copy. This
   selector is the narrowest thing that beats it. */
.answer.aaa p.stat-display {
  display: block;
  margin: 0 0 16px;
  color: var(--ink);
  font-size: var(--fs-stat);
  line-height: .92;
}
.answer.aaa .stat-display .u { color: var(--muted); }

/* ---- 5. entrance choreography (§3.7) ---------------------------------- */
/* Above the fold only, once, on load: eyebrow -> h1 -> answer. The .reveal
   classes in data.css cover elements this build owns; the hero eyebrow and h1
   are emitted by the shared shell, so they are choreographed from here. Gated
   behind no-preference, so a reduced-motion reader gets the finished page. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mpg-rise { from { opacity: 0; transform: translateY(12px); } }
  .hero .eyebrow,
  .hero h1 { animation: mpg-rise var(--t-slow) var(--ease-out) both; }
  .hero h1 { animation-delay: 60ms; }
}

/* ---- 6. small local corrections --------------------------------------- */
.led-rows + .led-foot { border-top: 1px solid var(--line); }
.hero .eyebrow { display: inline-block; margin-bottom: 10px; }
table.data caption .vintage { vertical-align: 2px; }