/*
 * An ECU file page built from the file's facts (v3/parts/product-sheet.php; spec
 * docs/superpowers/specs/2026-10-22-ecu-file-product-page-design.md). Printed after the theme's sheets for the
 * product type (as tdb-v3-page); the layout, the buy box and the identity panel are shop.css's. Tokens only, so the
 * light and the dark scene come from tokens.css; nothing here sets a colour of its own.
 */

/* The page's own long numbers wrap rather than push a phone sideways. */
.pf-sheet h1,
.pf-sheet .mono,
.pf-sheet td,
.pf-sheet th,
.pf-sheet .prose p {
  overflow-wrap: anywhere;
}

/* 1. the title area ------------------------------------------------------------ */

.pf-sheet .product-file__stage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pf-chip--quiet {
  border-color: var(--line);
  color: var(--ink-3);
}

.pf-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5);
}

/* 2. every file for this software ------------------------------------------------ */

.pf-family__table th[scope="row"] {
  font-weight: 600;
  text-align: left;
}

.pf-family__table tr.is-current th,
.pf-family__table tr.is-current td {
  background: var(--bg-raised);
}

.pf-family__table tr.is-current th {
  box-shadow: inset 3px 0 0 var(--accent);
}

.pf-family__buy {
  text-align: right;
  white-space: nowrap;
}

.pf-family__buy .btn {
  min-height: 44px;
  padding-inline: var(--sp-4);
  font-size: var(--step--1);
}

/* 3. power and torque ------------------------------------------------------------- */

.pf-sheet .pf-dyno__chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.pf-dyno__frame {
  fill: var(--bg-raised);
  stroke: var(--line);
}

.pf-dyno__grid {
  stroke: var(--line);
  stroke-dasharray: 2 4;
}

.pf-dyno__tick,
.pf-dyno__axis {
  fill: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
}

.pf-dyno__curve {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Power solid, torque dashed; each stage its own token, stock the quietest ink. */
.pf-dyno__nm {
  stroke-dasharray: 7 5;
}

.pf-dyno__stock { stroke: var(--ink-3); }
.pf-dyno__s1 { stroke: var(--accent); }
.pf-dyno__s2 { stroke: var(--warn); }
.pf-dyno__s3 { stroke: var(--ok); }
.pf-dyno__s4 { stroke: var(--bad); }

.pf-dyno__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  color: var(--ink-2);
}

.pf-dyno__key::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: var(--sp-2);
  vertical-align: middle;
  border-radius: var(--radius-pill);
  background: var(--ink-3);
}

.pf-dyno__key--s1::before { background: var(--accent); }
.pf-dyno__key--s2::before { background: var(--warn); }
.pf-dyno__key--s3::before { background: var(--ok); }
.pf-dyno__key--s4::before { background: var(--bad); }

.pf-dyno__table {
  margin-top: var(--sp-4);
}

.pf-dyno__table th[scope="row"] {
  font-weight: 600;
  text-align: left;
}

.pf-dyno__table .num {
  font-variant-numeric: tabular-nums;
}

.pf-dyno .small {
  margin-top: var(--sp-3);
}

/* 4. about, how it is read --------------------------------------------------------- */

.pf-about .prose p {
  max-width: 68ch;
}

.pf-read__ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.pf-read__steps {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding-left: 1.4em;
  color: var(--ink-2);
}

.pf-read__steps b {
  color: var(--ink);
}

.pf-read__h {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--step-0);
}

/* 5. options on request --------------------------------------------------------------- */

.pf-options__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.pf-options__list .chip {
  color: var(--ink);
  white-space: normal;
}

.pf-options__note {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-1);
  background: var(--bg-raised);
  color: var(--ink-2);
}

/* 6. the same engine in other cars ----------------------------------------------------- */

.pf-cars__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.pf-cars__list li {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}

/* 7. questions ---------------------------------------------------------------------- */

.pf-faq summary h3 {
  display: inline;
  font-size: var(--step-0);
}