/* Wattsoever website — layout only (UI alignment 1c "Startnummer",
   design/ui-alignment-1c/README.md § 2.13 + styleguide § 7).
   "The website is the same app, just set larger": tokens and fonts come from
   tokens.css (identical copy of design/ui-alignment-1c/tokens.css), every
   component from components.css (mirror of the app's base.css). This file adds
   page layout, the website type scale allowed by styleguide § 7 (Display XL up
   to 96px, body 16–17px, 48px hero buttons) and the illustration panels of the
   home page. No own colors, radii, fonts or button looks. */

@import "tokens.css";
@import "components.css";

html { scroll-padding-top: 72px; }
body { min-height: 100vh; }
img { max-width: 100%; }
p { margin: 0; }
a:hover { text-decoration: none; }

.wrap { max-width: 1160px; margin: 0 auto; padding-left: var(--s-5); padding-right: var(--s-5); }
.sec { padding-top: clamp(56px, 8vw, 88px); padding-bottom: clamp(56px, 8vw, 88px); }
.sec-top { padding-top: clamp(48px, 7vw, 72px); }
.band { background: var(--sf); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.head { display: flex; flex-direction: column; gap: var(--s-3); }
.head .t-s { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.head .t-l, .head .t-xl { margin: 0; }
.t-l { line-height: 1.05; }
.muted-head { color: var(--ink-3); }
.ink-2 { color: var(--ink-2); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6) var(--s-7); }
.split.center { align-items: center; }
.measure { max-width: 700px; }

/* ---- website type scale (styleguide § 7: body 16–17, data 11–12, hero up to 96) ---- */
.t-body { font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.lede { font: 500 17px/1.55 var(--font-body); color: var(--ink-2); text-wrap: pretty; }
.t-hint { text-wrap: pretty; }
.t-body strong, .t-hint strong, .lede strong { color: var(--ink); font-weight: 600; }
.page-title { font-size: clamp(44px, 7vw, 72px); line-height: .95; margin: 0; text-transform: uppercase; }
.closing-title { font-size: clamp(48px, 7vw, 72px); line-height: .92; margin: 0; text-transform: uppercase; }
.closing-title em, .page-title em { font-style: italic; color: var(--acc); }
/* website primary button: 48px (styleguide § 7 table) */
.btn.lg { height: 48px; padding: 0 26px; font-size: 20px; }
.btn.lg svg { width: 18px; height: 18px; }

code.inline {
  font-family: var(--font-data); font-size: 12px; color: var(--ink);
  background: var(--sf-2); border: 1px solid var(--bd); padding: 1px 6px; border-radius: var(--r-1);
}

/* ---- topbar: identical to the app; the website only adds the narrow-screen fallback ---- */
.topbar nav a:hover { text-decoration: none; }
@media (max-width: 760px) {
  .topbar { gap: var(--s-3); padding: 0 var(--s-3); }
  .topbar .right { display: none; }            /* DOWNLOAD stays reachable as a tab */
  .topbar nav { justify-content: flex-end; gap: 0; }
  .topbar nav a { padding: 0 8px; }
}
@media (max-width: 480px) {
  .topbar .wordmark { display: none; }
  .topbar nav a svg { display: none; }
}

/* ---- lists with icon bullets (feature lists, anti-features) ---- */
.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bullets > li {
  display: flex; gap: var(--s-3); padding: 14px 0; border-bottom: 1px dashed var(--bd-row);
  font: 500 15px/1.5 var(--font-body); color: var(--ink-2);
}
.bullets > li:last-child { border-bottom: 0; }
.bullets > li > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ink-2); }
.bullets.out > li > svg { color: var(--ink-3); }
.bullets.out > li { color: var(--ink-3); }
.bullets strong { color: var(--ink); font-weight: 600; }
.bullets.out strong { color: var(--ink-2); }
.bullets .tag { margin: 0 4px; vertical-align: 1px; }

/* ---- hero (home): live 3D flyover backdrop + scrims ---- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--bd); background: var(--bg); }
.hero .hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* legibility scrims over the map — overlays, not surfaces */
  background: linear-gradient(100deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 82%, transparent) 42%, color-mix(in oklab, var(--bg) 25%, transparent) 78%),
              linear-gradient(180deg, color-mix(in oklab, var(--bg) 92%, transparent) 0%, transparent 30%);
}
.hero .hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px; pointer-events: none;
  background: linear-gradient(0deg, var(--bg), transparent);
}
.hero .hero-inner { position: relative; max-width: 1160px; margin: 0 auto; padding: clamp(48px, 8vw, 84px) var(--s-5) 0; }
.hero .hero-meta { color: var(--ink-2); margin-bottom: var(--s-5); }
.hero .lede { margin-top: var(--s-5); max-width: 560px; }
.hero .actions { margin-top: 28px; gap: var(--s-4); }
.hero .hero-platforms { margin-top: var(--s-4); }

/* Rotating claim (index.html inline script): rows are absolutely positioned at
   1.06em steps; the inline font-size clamp is read by the fit-to-width code. */
.hero-claims {
  margin: 0; line-height: 1.06; height: 2.12em; overflow: hidden; position: relative;
  white-space: nowrap; text-transform: uppercase;
}
.hero-claims .claim-acc { color: var(--acc); font-style: italic; }

/* v7 flyover loop (hero-loop.js). Two classes on purpose: the lazily injected
   maplibre-gl css declares .maplibregl-map { position: relative } and loads
   after site.css — at equal specificity it won and the map collapsed to 0 px
   (live-site bug, 2026-09-01). */
.hero .hero-loop { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }  /* dark vector map: no dimming filter (it was for satellite imagery) */
.hero .hero-loop.on { opacity: 1; }
.hero .hero-loop-map { position: absolute; inset: 0; background: var(--bg); }
.hero .hero-loop-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, color-mix(in oklab, var(--bg) 85%, transparent) 100%);
}
.hero .hero-attr { position: absolute; right: 12px; bottom: 8px; z-index: 3; font-size: 10px; letter-spacing: .04em; color: var(--ink-3); }
.hero .hero-attr a { color: inherit; text-decoration: none; }
.hero .hero-attr a:hover { color: var(--ink); }
.hero .hero-loop-seam { position: absolute; inset: 0; background: var(--bg); opacity: 1; pointer-events: none; }

/* Live-simulated cockpit band (hero-loop.js drives the values) */
.hero-band {
  position: relative; margin: clamp(36px, 5vw, 56px) 0 28px;
  background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) 34px; padding: var(--s-4) 26px;
}
.hero-band .hb-row { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
/* big live numbers: Display XL scaled down (tokens.css allows scaling the role) */
.hero-band .hb-val { font: 900 26px/1 var(--font-display); font-variant-numeric: tabular-nums; display: inline-block; min-width: 3ch; }
.hero-band .hb-watts { font-size: 40px; }
.hero-band .hb-prog { flex: 1; min-width: 120px; height: 5px; background: var(--bd); border-radius: var(--r-0); overflow: hidden; }
.hero-band .hb-prog > div { width: 28%; height: 100%; background: var(--acc); transition: width 1s linear; }
/* fixed-width value slots (hero-loop.js v5.1): a value dropping a digit must not shift its neighbours */
#hbCad { min-width: 2ch; }
#hbSpd { min-width: 4ch; }
#hbIvVal { min-width: 5ch; }

@media (max-width: 640px) {
  .hero .hero-scrim {
    background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 94%, transparent) 0%, color-mix(in oklab, var(--bg) 72%, transparent) 45%, color-mix(in oklab, var(--bg) 35%, transparent) 100%);
  }
  .hero-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: var(--s-4) 18px; }
  .hero-band .hb-prog { grid-column: 1 / -1; }
  .hero-band .hb-tail { display: none; }
}

/* ---- card grids ---- */
.grid { display: grid; gap: var(--s-5); }
.cols-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cols-290 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.cols-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card.pad { padding: 24px; }
.card.stack { gap: var(--s-3); }
.step-head { display: flex; align-items: center; gap: var(--s-3); }

/* workout-selection flow (home) */
.ride-flow { display: flex; align-items: stretch; gap: 14px; margin-top: 32px; }
.ride-flow > .card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.ride-flow-arrow { align-self: center; color: var(--ink-3); display: flex; }
.ride-flow-arrow svg { width: 22px; height: 22px; }
@media (max-width: 700px) { .ride-flow { flex-direction: column; gap: 8px; } .ride-flow-arrow { transform: rotate(90deg); } }

/* ---- TWO MODES: MacBook flip with live schematic faces (live-panels.js) ---- */
.mb-stage { position: relative; min-width: 0; aspect-ratio: 4523/2520; }
.mb-frame { width: 100%; height: 100%; display: block; position: relative; z-index: 2; pointer-events: none; }
.mb-screen {
  position: absolute; left: 12.28%; top: 11.9%; width: 75.42%; height: 76.15%;
  background: var(--bg-ck); overflow: hidden; perspective: 1600px; z-index: 1;
}
.mb-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,.7,.2,1); }
.mb-face { position: absolute; inset: 0; background: var(--bg-ck); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* the two bullet rows carry the mode state — filled dot = face currently on screen */
.mode-rows { display: flex; flex-direction: column; margin-top: 22px; }
.mode-row { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px dashed var(--bd-row); cursor: pointer; font: 500 15px/1.5 var(--font-body); color: var(--ink-2); }
.mode-row:last-child { border-bottom: 0; }
.mode-row strong { color: var(--ink); font-weight: 600; }
.mode-row .dot {
  width: 8px; height: 8px; flex: none; margin-top: 8px; border-radius: 50%;
  border: 1.5px solid var(--ink-3); transition: background .4s, border-color .4s;
}
.mode-row.on .dot { background: var(--acc); border-color: var(--acc); }

/* Schematic faces: an illustration of the cockpit, scaled with the laptop —
   internal labels follow the SVG-internal rule (>= 10px data type). */
.mb-face.tm { display: flex; flex-direction: column; padding: 3.5% 4.5%; }
.tm-head, .tm-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font: 500 10px/1.2 var(--font-data); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}
.tm-head .lime { color: var(--acc); }
.tm-num { font-variant-numeric: tabular-nums; }
.tm-target { display: flex; align-items: baseline; gap: 8px; margin: 2.5% 0 2%; }
.tm-target .v { font: 900 clamp(26px, 3.2vw, 40px)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tm-target .u { font: 500 10px/1.2 var(--font-data); letter-spacing: .04em; color: var(--ink-3); }
.tm-svg { width: 100%; flex: 1; min-height: 0; display: block; }
.tm-sim { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 4%; flex: 1; min-height: 0; margin-top: 2.5%; }
.tm-prof { display: flex; flex-direction: column; min-height: 0; }
.tm-sat { position: relative; background: var(--rv-map-bg); border: 1px solid var(--bd); min-height: 0; overflow: hidden; }
.tm-sat svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tm-sat .attr {
  position: absolute; left: 4px; bottom: 3px; pointer-events: none;
  font: 500 10px/1 var(--font-data); letter-spacing: .04em; color: var(--ink-2);
  background: color-mix(in oklab, var(--bg) 70%, transparent); padding: 1px 3px;
}
.tm-foot { margin-top: 2%; border-top: 1px solid var(--bd); padding-top: 1.5%; }
@media (max-width: 480px) { .tm-foot, .tm-sat .attr { display: none; } }

/* ---- THE COCKPIT: scroll-snap slider ---- */
.ck-wrap { position: relative; margin-top: 44px; }
.ck-scroller {
  display: flex; gap: var(--s-4); overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 4px max(0px, calc((100% - min(86%, 640px)) / 2));
}
.ck-scroller::-webkit-scrollbar { display: none; }
.ck-card {
  flex: 0 0 min(86%, 640px); scroll-snap-align: center; aspect-ratio: 1602/902;
  background-size: cover; border-radius: var(--r-2); border: 1px solid var(--bd);
  opacity: .35; filter: grayscale(1) brightness(.75); transform: scale(.92);
  transition: opacity .4s, border-color .4s, filter .4s, transform .4s; cursor: pointer;
}
.ck-card.on { border-color: var(--bd-hi); opacity: 1; filter: none; transform: scale(1); }
.ck-arrow.btn.icon { position: absolute; top: 50%; transform: translateY(-50%); background: var(--sf-2); }
.ck-arrow.prev { left: 8px; }
.ck-arrow.next { right: 8px; }
.ck-info { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; margin-top: 2px; border-top: 1px solid var(--bd); padding-top: 14px; }
.ck-info .ck-title-row { display: flex; align-items: center; gap: 10px; flex: none; }
.ck-info .ck-desc { flex: 1 1 320px; max-width: 560px; min-height: 3.2em; }
.ck-dots { display: flex; gap: 6px; padding-top: 2px; }
.ck-dot { border: 0; background: transparent; padding: 8px 4px; cursor: pointer; display: flex; align-items: center; }
.ck-dot span { display: block; width: 22px; height: 6px; border-radius: var(--r-0); background: var(--bd-row); transition: background .4s; }
.ck-dot.on span { background: var(--acc); }
.ck-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: var(--s-4); }

/* ---- AFTER THE RIDE: looping demo card, training log -> report (live-panels.js).
   The height is FIXED: live-panels.js positions the hand cursor against exactly
   this box (420 px - 2 px border, padding 6/20/10, content centered, 42 px
   header + 5 x 52 px rows => row 1 spans 98..150 px, cursor top 120 px). */
.rp-card {
  position: relative; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r-2);
  padding: 6px 20px 10px; height: 420px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.rp-log, .rp-report { display: none; }
.rp-log.on { display: block; }
.rp-report.on { display: flex; flex-direction: column; gap: 18px; }
.rp-head, .rp-row { display: grid; grid-template-columns: 86px minmax(0,1.4fr) 58px 36px 92px; gap: 10px; align-items: center; }
.rp-head { font: 500 10px/1.2 var(--font-data); letter-spacing: .04em; color: var(--ink-3); height: 42px; border-bottom: 1px solid var(--bd); }
.rp-row {
  font: 500 11px/1.2 var(--font-data); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  height: 52px; border-bottom: 1px dashed var(--bd-row); transition: background .25s;
}
.rp-row .date { color: var(--ink-3); }
.rp-row .name { font: 800 15px/1 var(--font-display); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-row .zones { display: flex; height: 10px; overflow: hidden; }
.rp-cursor {
  position: absolute; transform-origin: 40% 20%; pointer-events: none; z-index: 3;
  transition: top 1s cubic-bezier(.3,.7,.3,1), left 1s cubic-bezier(.3,.7,.3,1), transform .12s;
}
.rp-cursor svg { width: 26px; height: 28px; display: block; }
.rp-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rp-title-line { display: flex; align-items: center; gap: 10px; }
.rp-title-line svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.rp-name { font-size: 22px; }
.rp-mets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 0; }
.rp-mets > div { border-left: 1px solid var(--bd); padding: 2px 8px 2px 12px; }
.rp-mets .l { font: 500 10px/1.2 var(--font-data); letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; }
.rp-mets .v { font: 800 20px/1 var(--font-display); font-variant-numeric: tabular-nums; margin-top: 4px; white-space: nowrap; }
.rp-lower { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 24px; }
.rp-lbl { font: 500 10px/1.2 var(--font-data); letter-spacing: .04em; color: var(--ink-3); margin-bottom: 8px; }
.rp-bars { display: flex; align-items: flex-end; gap: 6px; }
.rp-bars > div { flex: 1; min-height: 2px; height: 2px; }
.rp-zlbl { display: flex; gap: 6px; margin-top: 5px; border-top: 1px solid var(--bd); padding-top: 5px; }
.rp-zlbl > span { flex: 1; text-align: center; font: 500 10px/1.2 var(--font-data); }
.rp-track { flex: 1; background: var(--bg); border: 1px solid var(--bd); min-height: 60px; }
.rp-track svg { width: 100%; height: 100%; display: block; }
.rp-foot {
  display: flex; justify-content: space-between; margin-top: 5px; border-top: 1px solid var(--bd); padding-top: 5px;
  font: 500 10px/1.2 var(--font-data); letter-spacing: .04em; color: var(--ink-3);
}
/* Phones: the card height stays 420 px (cursor calibration), so the two states
   fit a ~335 px box — narrower columns, smaller ride name. */
@media (max-width: 640px) {
  .rp-card { padding-left: 12px; padding-right: 12px; }
  .rp-head, .rp-row { grid-template-columns: 72px minmax(0,1fr) 50px 28px 64px; gap: 8px; }
  .rp-report.on { gap: 14px; }
  .rp-name { font-size: 17px; }
  .rp-mets .v { font-size: 17px; }
}

/* ---- UNDER THE HOOD: stat cards ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 36px; }
.stats > .card { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.stats .t-xl { font-size: 40px; }
.stats > .card.lime { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.stats > .card.lime .t-hint { color: var(--on-acc); }

/* ---- closing banner ---- */
.closing .actions { margin-top: 32px; gap: 20px; }

/* ---- docs ---- */
.toc { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 28px; }
.doc-list > div { padding: 14px 0; border-bottom: 1px dashed var(--bd-row); }
.doc-list > div:last-child { border-bottom: 0; }
.note { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.note .note-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note details > summary { list-style: none; align-self: flex-start; }
.note details > summary::-webkit-details-marker { display: none; }
.note details > summary svg { transition: transform .2s; }
.note details[open] > summary svg { transform: rotate(180deg); }
.note details > p { margin-top: 10px; }
.pipe-step { border: 1px solid var(--bd); border-radius: var(--r-2); overflow: hidden; background: var(--bg); }
.pipe-step svg { display: block; width: 100%; border-bottom: 1px solid var(--bd); }
.pipe-step .pipe-text { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.pipe-step .t-body { font-size: 14px; }
ol.steps { margin: 0; padding-left: 20px; font: 500 15px/1.8 var(--font-body); color: var(--ink-2); }
ol.steps strong { color: var(--ink); font-weight: 600; }
.qa { padding: 18px 0; border-bottom: 1px dashed var(--bd-row); display: flex; flex-direction: column; gap: 10px; }
.qa:last-child { border-bottom: 0; }

/* ---- download ---- */
.platform { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.platform .file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 0; border-top: 1px dashed var(--bd-row); border-bottom: 1px dashed var(--bd-row); }

/* ---- FAQ accordions ---- */
.faq details { border-bottom: 1px dashed var(--bd-row); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  font: 600 17px/1.4 var(--font-body); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--acc); }
.faq summary .ind { display: flex; flex: none; color: var(--ink-3); transition: transform .2s, color .2s; }
.faq summary .ind svg { width: 20px; height: 20px; }
.faq details[open] summary .ind { transform: rotate(45deg); color: var(--acc); } /* add-line turned 45° = close-line */
.faq details > p { margin: 0 0 20px; max-width: 720px; }

/* ---- legal ---- */
.legal { max-width: 860px; margin: 0 auto; padding-left: var(--s-5); padding-right: var(--s-5); }
.legal .t-l { margin: 0; }
.legal .t-body { font-size: 15px; line-height: 1.75; }
.legal .clauses { margin-top: 24px; display: flex; flex-direction: column; gap: 22px; }
.legal ul { margin: 14px 0 0; padding-left: 20px; }
.legal li { margin: 6px 0; }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--bd); background: var(--bg); }
.footer-cols { max-width: 1160px; margin: 0 auto; padding: 48px var(--s-5) 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.footer-links { max-width: 1160px; margin: 0 auto; padding: 40px var(--s-5) 32px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer a.t-data { color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.footer a.t-data:hover { color: var(--ink); }
.footer a.t-data svg { width: 13px; height: 13px; }
.footer .wordmark { font-size: 20px; }
.footer-attr { max-width: 1160px; margin: 0 auto; padding: 0 var(--s-5) 32px; }
.footer-links .spacer { flex: 1; }

/* cards on a band surface step back to the page ground so they stay visible */
.band .card:not(.lime) { background: var(--bg); }

/* docs: GPX pipeline illustrations (inline SVG, SVG-internal labels 10px) */
.pipe-step svg text { font: 500 10px var(--font-data); letter-spacing: .04em; fill: var(--ink-3); }
.pipe-step svg .acc { fill: var(--acc); }
.pipe-step svg .g0 { fill: var(--rv-grade-0); } .pipe-step svg .g1 { fill: var(--rv-grade-1); }
.pipe-step svg .g2 { fill: var(--rv-grade-2); } .pipe-step svg .g3 { fill: var(--rv-grade-3); }
.pipe-step svg .f-acc { fill: var(--acc); } .pipe-step svg .f-mut { fill: var(--ink-3); } .pipe-step svg .f-ink { fill: var(--ink); }
.pipe-step svg .s-acc { stroke: var(--acc); } .pipe-step svg .s-mut { stroke: var(--ink-3); } .pipe-step svg .s-danger { stroke: var(--danger); }
.pipe-step svg .s-g0 { stroke: var(--rv-grade-0); } .pipe-step svg .s-g1 { stroke: var(--rv-grade-1); }
.pipe-step svg .s-g2 { stroke: var(--rv-grade-2); } .pipe-step svg .s-g3 { stroke: var(--rv-grade-3); }
.pipe-step svg .f-acc-soft { fill: color-mix(in oklab, var(--acc) 18%, transparent); }
.pipe-step svg .f-mut-soft { fill: color-mix(in oklab, var(--ink-3) 12%, transparent); }
/* body copy inside cards: one step tighter than free-standing website paragraphs */
.card .t-body { font-size: 15px; }
code.inline { -webkit-box-decoration-break: clone; box-decoration-break: clone; }