/* ==========================================================================
   road.css — the content pages as one drive.            RF-ROAD, 22 Sep 2026

   /about, /guides, /how-it-works and /fuel-prices were rebuilt on the owner's
   brief: "a living journey, not a collection of blocks". Four pages, one
   composition language, and every part of it comes from the product rather
   than from a landing-page kit:

     the road line    a routed rule that joins the sections of a page into one
                      path and draws once, from the top, when it scrolls in
                      (REFUELIA-GUIDELINES H4.2, H6.B)
     the stamp        the freshness stamp, mono, same shape everywhere:
                      "official feed · read hourly"  (H4.1)
     the grid rule    faint coordinate ticks at a section boundary (H4.3)

   Nothing here defines a colour. Every value is a shell.css token, so the
   paper band (.rfs-paper) remaps this whole sheet without a second rule, and
   the light theme does the same. No second button system either: buttons are
   .rfs-btn from shell.css, and the one card style is .rd-card below.

   Section rhythm follows §12: 72px desktop, 40px phone, never less than 32.
   ========================================================================== */

.rd{--rd-rail:44px; --rd-node:14px}
.rd *,.rd *::before,.rd *::after{box-sizing:border-box}
.rd figure{margin:0}

/* ---- sections ---------------------------------------------------------- */
.rd-sec{position:relative; padding-block:var(--rf-10)}
.rd-sec--tight{padding-block:var(--rf-9)}
.rd-sec--flush-top{padding-top:0}
/* Where one product section hands over to the next: a plain hairline. It
   used to carry coordinate ticks every 96px; with the squared grounds gone
   (RF-2.0) the ticks were the last piece of graph paper on the site. Only
   between two product sections - a paper band already has its own edge. */
.rd-sec:not(.rfs-paper) + .rd-sec:not(.rfs-paper)::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background:var(--rf-line-faint);
}
@media (max-width:760px){
  .rd-sec{padding-block:var(--rf-8)}
  .rd-sec--tight{padding-block:var(--rf-7)}
}

/* ---- type -------------------------------------------------------------- */
:where(.rd) h1,:where(.rd) h2,:where(.rd) h3,:where(.rd) p{margin:0}
.rd h1,.rd h2{font-family:var(--rf-display); font-weight:600; letter-spacing:-.012em;
  color:var(--rf-ink); text-wrap:balance}
.rd h1{font-size:var(--rf-t-h1); line-height:1.08; letter-spacing:-.012em}  /* RF-NOT-GENERATED: was clamp(36,4.4vw,60) */
.rd h2{font-size:var(--rf-t-h2); line-height:1.12}
.rd h3{font-family:var(--rf-text); font-size:var(--rf-t-h3); line-height:1.3; font-weight:650;
  color:var(--rf-ink); text-wrap:balance}
.rd-lead{font-size:var(--rf-t-lead); line-height:1.6; color:var(--rf-ink-2); max-width:58ch; text-wrap:pretty}
.rd-body{font-size:var(--rf-t-body); line-height:1.65; color:var(--rf-ink-2); text-wrap:pretty}
.rd-body + .rd-body{margin-top:var(--rf-3)}
.rd-head{display:grid; gap:var(--rf-3); max-width:62ch; margin-bottom:var(--rf-8)}
.rd-kicker{font-family:var(--rf-mono); font-size:var(--rf-t-label); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rf-ink-3)}
/* Links in running text are underlined; a link that IS a block (a row, a
   tile, a guide card, a stop) says so by its shape and is not. */
.rd :is(p,dd,figcaption,span.rd-body) a:not(.rfs-btn), .rd a.rd-more{color:var(--rf-brand); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px}
.rd :is(p,dd,figcaption,span.rd-body) a:not(.rfs-btn):hover, .rd a.rd-more:hover{text-decoration-thickness:2px}
.rd a.rd-row,.rd a.rd-tile,.rd a.cp-guide,.rd a.gd-stop{text-decoration:none}
.rd-more{font-weight:600; font-size:var(--rf-t-sm)}
/* RF-OWNER-NAMED: several links in one row (/about "Who runs Refuelia") need air between them. */
.rd-links{display:flex; flex-wrap:wrap; gap:8px 22px}
.rd-note{font-size:var(--rf-t-xs); line-height:1.55; color:var(--rf-ink-3)}
.rd-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---- the freshness stamp ----------------------------------------------- */
.rd-stamp{display:inline-flex; align-items:center; gap:8px; font-family:var(--rf-mono);
  font-size:12px; line-height:1.4; color:var(--rf-ink-2); letter-spacing:.01em}
.rd-next{display:block; margin-top:2px; font-family:var(--rf-mono); font-size:12px; line-height:1.4; color:var(--rf-ink-3); letter-spacing:.01em}
.rd-stamp::before{content:""; flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:var(--rf-unknown)}
.rd-stamp--ok::before{background:var(--rf-ok)}
.rd-stamp--limited::before{background:var(--rf-limited)}
.rd-stamp--out::before{background:var(--rf-out)}
.rd-stamp--ev::before{background:var(--rf-ev)}
.rd-stamp--feed::before{background:transparent; border:2px solid var(--rf-ink-2)}
/* RF-DRIVERS-DOT (1 October 2026): "from drivers" is a real source, not an absence - the brand
   yellow, with a hairline so it still reads on white. Grey stays for "unknown". */
.rd-stamp--drivers::before{background:var(--rf-mark,var(--rf-brand)); box-shadow:0 0 0 1px var(--rf-line-strong)}
.rd-stamp--sched::before{background:transparent; border:1.5px dashed var(--rf-unknown)}

/* ---- layouts ----------------------------------------------------------- */
.rd-split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--rf-9); align-items:start}
.rd-split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rd-split--wide{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.rd-split--hero{grid-template-columns:minmax(0,6fr) minmax(0,6fr); align-items:center}
.rd-sticky{position:sticky; top:calc(var(--rf-header) + var(--rf-6))}
@media (max-width:960px){
  .rd-split,.rd-split--even,.rd-split--wide,.rd-split--hero{grid-template-columns:minmax(0,1fr); gap:var(--rf-7)}
  .rd-sticky{position:static}
}
.rd-prose{max-width:var(--rf-wrap-rd)}
.rd-prose p{font-size:17px; line-height:1.72; color:var(--rf-ink-2); text-wrap:pretty}
.rd-prose p + p{margin-top:var(--rf-4)}
.rd-prose p:first-child{font-size:clamp(19px,1.6vw,22px); line-height:1.5; color:var(--rf-ink)}
.rd-prose em{font-style:italic; color:var(--rf-ink)}

.rd-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--rf-3) var(--rf-5); margin-top:var(--rf-7)}

/* ---- hero -------------------------------------------------------------- */
.rd-hero{padding-block:var(--rf-9) var(--rf-10)}
.rd-hero .rfs-crumbs{margin-bottom:var(--rf-6)}
.rd-hero h1{margin-top:var(--rf-3)}
.rd-hero .rd-lead{margin-top:var(--rf-5)}
@media (max-width:760px){ .rd-hero{padding-block:var(--rf-6) var(--rf-8)} }

/* A photograph with a small panel over it (H3). The scrim sits under the
   text only; the picture keeps its own contrast everywhere else (§26). */
.rd-photo{position:relative; margin:0; border-radius:var(--rf-r-panel); overflow:hidden;
  background:var(--rf-surface); aspect-ratio:2/1; isolation:isolate}
.rd-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.rd-photo::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,var(--rf-bg) 0%,transparent 62%)}
.rd-photo figcaption{position:absolute; z-index:2; left:var(--rf-6); bottom:var(--rf-6);
  max-width:360px}
/* On a phone the panel cannot sit on the picture without covering it, so the
   two stack: the photograph, cropped 4:3, then the words under it (§25). */
@media (max-width:860px){
  .rd-photo{aspect-ratio:auto; overflow:visible; border-radius:0; background:none; display:grid; gap:var(--rf-6)}
  .rd-photo img{position:static; aspect-ratio:4/3; height:auto; border-radius:var(--rf-r-card); object-position:70% 50%}
  .rd-photo::after{display:none}
  .rd-photo figcaption{position:static; max-width:none}
}

/* RF-ABOUT-ART (25 September 2026): the /about hero is a drawn scene beside the
   words, in the RF-TRIP palette (so it has the same dark theme). It replaced a
   photograph that was pixelated at desktop width. */
.rd-split--art{align-items:center}
.rd-art{position:relative; aspect-ratio:720/520; border-radius:var(--rf-r-card); overflow:hidden;
  border:1px solid var(--rf-line-faint); background:var(--tp-sky)}
.rd-art-svg{display:block; width:100%; height:100%}
.tp-lit{fill:var(--tp-y)}
@media (max-width:960px){ .rd-art{aspect-ratio:4/3} }

/* ---- the one card ------------------------------------------------------ */
.rd-card{background:var(--rf-surface); border:1px solid var(--rf-line); border-radius:var(--rf-r-card);
  box-shadow:var(--rf-sh-1); padding:var(--rf-5)}
.rfs-paper .rd-card{background:transparent; box-shadow:none; border-color:var(--rf-paper-line)}
.rd-card--panel{border-radius:var(--rf-r-panel); box-shadow:var(--rf-sh-2); padding:0; overflow:hidden}
a.rd-card{display:block; color:inherit; text-decoration:none;
  transition:transform var(--rf-fast), border-color var(--rf-fast), box-shadow var(--rf-fast)}
a.rd-card:hover{transform:translateY(-2px); border-color:var(--rf-brand-edge); box-shadow:var(--rf-sh-2)}
a.rd-card:focus-visible{outline:2px solid var(--rf-brand); outline-offset:3px}
.rd-illus{font-family:var(--rf-mono); font-size:var(--rf-t-label); letter-spacing:.08em;
  text-transform:uppercase; color:var(--rf-ink-3); margin-top:var(--rf-3)}

/* ---- the road line ----------------------------------------------------- */
/* A vertical route. Each stop is a node on it; the line draws once from the
   top when the list scrolls in (road.js adds .is-drawn), 380ms, never again.
   Without script, or with reduced motion, it is simply there. */
.rd-route{position:relative; list-style:none; margin:0; padding:0 0 0 var(--rd-rail); --rd-draw:1}
.rd-route::before{content:""; position:absolute; left:calc(var(--rd-node) / 2 - 1px); top:10px; bottom:10px; width:2px;
  border-radius:2px; background:linear-gradient(180deg,var(--rf-brand) 0%,var(--rf-brand-edge) 100%);
  transform:scaleY(var(--rd-draw)); transform-origin:top center;
  transition:transform var(--rf-motion-slow) var(--rf-ease-route)}
html.rd-js .rd-route:not(.is-drawn){--rd-draw:0}
.rd-stop{position:relative; padding-bottom:var(--rf-8)}
.rd-stop:last-of-type{padding-bottom:0}
.rd-stop::before{content:""; position:absolute; left:calc(-1 * var(--rd-rail)); top:5px;
  width:var(--rd-node); height:var(--rd-node); border-radius:50%;
  background:var(--rf-bg); border:2px solid var(--rf-brand); box-sizing:border-box}
.rd-stop--end::before{background:var(--rf-brand)}
.rd-stop--open::before{border-style:dashed; border-color:var(--rf-ink-3)}
.rd-stop h3{margin-bottom:var(--rf-2)}
.rd-stop .rd-stamp{margin-bottom:var(--rf-2)}
.rd-stop > .rd-body{max-width:60ch}
.rd-stop-aside{margin-top:var(--rf-4)}

/* The same road laid across the page — four stops in the order they happen.
   On a phone it turns back into the vertical route. */
.rd-route--h{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--rf-6);
  padding:calc(var(--rd-node) + var(--rf-5)) 0 0 0}
.rd-route--h::before{left:0; right:0; top:calc(var(--rd-node) / 2 - 1px); bottom:auto; width:auto; height:2px;
  background:linear-gradient(90deg,var(--rf-brand) 0%,var(--rf-brand-edge) 100%);
  transform:scaleX(var(--rd-draw)); transform-origin:left center}
.rd-route--h .rd-stop{padding:0}
.rd-route--h .rd-stop::before{left:0; top:calc(-1 * (var(--rd-node) + var(--rf-5)))}
@media (max-width:860px){
  .rd-route--h{grid-template-columns:minmax(0,1fr); gap:0; padding:0 0 0 var(--rd-rail)}
  .rd-route--h::before{left:calc(var(--rd-node) / 2 - 1px); right:auto; top:10px; bottom:10px; width:2px; height:auto;
    background:linear-gradient(180deg,var(--rf-brand) 0%,var(--rf-brand-edge) 100%);
    transform:scaleY(var(--rd-draw)); transform-origin:top center}
  .rd-route--h .rd-stop{padding-bottom:var(--rf-6)}
  .rd-route--h .rd-stop:last-of-type{padding-bottom:0}
  .rd-route--h .rd-stop::before{left:calc(-1 * var(--rd-rail)); top:5px}
}

/* ---- rows: an index, not a wall ---------------------------------------- */
.rd-rows{display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--rf-line)}
.rd-row{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:4px var(--rf-6);
  padding:var(--rf-4) 0; border-bottom:1px solid var(--rf-line); color:inherit; text-decoration:none;
  transition:background-color var(--rf-fast)}
.rd-row-t{font-size:16.5px; font-weight:600; line-height:1.4; color:var(--rf-ink); text-wrap:pretty}
.rd-row-d{grid-column:1; font-size:var(--rf-t-sm); line-height:1.5; color:var(--rf-ink-2);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.rd-row-m{grid-column:2; grid-row:1; font-family:var(--rf-mono); font-size:12px; color:var(--rf-ink-3); white-space:nowrap}
a.rd-row:hover .rd-row-t{color:var(--rf-brand); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
a.rd-row:focus-visible{outline:2px solid var(--rf-brand); outline-offset:2px; border-radius:4px}
@media (max-width:600px){
  .rd-row{grid-template-columns:minmax(0,1fr)}
  .rd-row-m{grid-column:1; grid-row:auto}
  .rd-row-d{-webkit-line-clamp:2}
}

/* A definition list laid out as a ruled table: term left, meaning right. */
.rd-defs{display:grid; grid-template-columns:minmax(0,1fr); margin:0; border-top:1px solid var(--rf-line)}
.rd-defs > div{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--rf-2) var(--rf-7);
  padding:var(--rf-5) 0; border-bottom:1px solid var(--rf-line)}
.rd-defs dt{font-weight:650; font-size:17px; line-height:1.35; color:var(--rf-ink)}
.rd-defs dd{margin:0; font-size:var(--rf-t-body); line-height:1.65; color:var(--rf-ink-2)}
@media (max-width:700px){ .rd-defs > div{grid-template-columns:minmax(0,1fr)} }

/* ---- the data board ---------------------------------------------------- */
.rd-board{background:var(--rf-surface); border:1px solid var(--rf-line); border-radius:var(--rf-r-panel);
  box-shadow:var(--rf-sh-2); overflow:hidden}
.rd-board-h{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--rf-2) var(--rf-4);
  padding:var(--rf-4) var(--rf-5); border-bottom:1px solid var(--rf-line); background:var(--rf-raised)}
.rd-board-h h2,.rd-board-h h3{font-family:var(--rf-text); font-size:var(--rf-t-sm); font-weight:650; letter-spacing:0}
.rd-board-f{padding:var(--rf-4) var(--rf-5); border-top:1px solid var(--rf-line)}
.rd-table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.rd-table caption{text-align:left}
.rd-table th{font-family:var(--rf-mono); font-size:var(--rf-t-label); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rf-ink-3); text-align:left; padding:var(--rf-3) var(--rf-4); white-space:nowrap}
.rd-table th:first-child,.rd-table td:first-child{padding-left:var(--rf-5)}
.rd-table th:last-child,.rd-table td:last-child{padding-right:var(--rf-5)}
.rd-table thead th{border-bottom:1px solid var(--rf-line)}
.rd-table td,.rd-table tbody th{padding:var(--rf-4) var(--rf-4); border-top:1px solid var(--rf-line-faint); vertical-align:top}
.rd-table tbody tr:first-child td,.rd-table tbody tr:first-child th{border-top:0}
.rd-table tbody th{width:34%; font-family:var(--rf-text); font-size:var(--rf-t-body); font-weight:650; letter-spacing:0;
  text-transform:none; color:var(--rf-ink); white-space:normal}
.rd-table .rd-stamp{margin-top:6px; display:flex; font-weight:400}
.rd-num{font-family:var(--rf-mono); font-size:18px; font-weight:600; color:var(--rf-ink); white-space:nowrap}
.rd-num small{font-size:12px; font-weight:500; color:var(--rf-ink-3); margin-left:3px}
.rd-dash{font-family:var(--rf-mono); font-size:13px; color:var(--rf-ink-3)}
/* A skeleton is a box, not a spinner, and it does not shimmer forever: a
   loop would claim something is happening when a feed has simply not answered
   yet (§H11, and tests/motion.test.js on infinite animation). */
.rd-sk{display:inline-block; width:64px; height:18px; border-radius:6px; background:var(--rf-raised-2); vertical-align:middle}
@media (max-width:640px){
  .rd-table--stack thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .rd-table--stack tr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--rf-2) var(--rf-3);
    padding:var(--rf-4) var(--rf-4); border-top:1px solid var(--rf-line)}
  .rd-table--stack tbody tr:first-child{border-top:0}
  .rd-table--stack tbody th{grid-column:1 / -1; width:auto; padding:0 0 var(--rf-2); border:0}
  .rd-table--stack .rd-stamp{white-space:normal}
  .rd-table--stack tbody th:first-child,.rd-table--stack td:first-child{padding-left:0}
  .rd-table--stack td{padding:0; border:0}
  .rd-table--stack td::before{content:attr(data-label); display:block; font-family:var(--rf-mono); font-size:var(--rf-t-label);
    letter-spacing:.1em; text-transform:uppercase; color:var(--rf-ink-3); margin-bottom:2px}
  .rd-num{font-size:17px}
}

/* RF-EU-WOB: the 27-country board. Tighter rows than the five-country one
   (it is a reference list), ten shown until the driver asks for the rest, and
   the EU average set apart at the bottom. */
.rd-board--eu{margin-top:var(--rf-5)}
.rd-board--eu .rd-board-h h3{display:flex; align-items:center; gap:9px}
.rd-table--eu td,.rd-table--eu tbody th{padding-top:10px; padding-bottom:10px}
.rd-table--eu tbody th{font-size:var(--rf-t-xs)}
.rd-table--eu .rd-num{font-size:15px}
.rd-board--eu:not(.is-open) .rd-eu-more{display:none}
.rd-table--eu tr.rd-eu-avg th,.rd-table--eu tr.rd-eu-avg td{border-top:1px solid var(--rf-line-strong, var(--rf-line))}
.rd-table--eu tr.rd-eu-avg th{font-weight:700}
.rd-eu-toggle{display:inline-block; margin:-12px 0 calc(var(--rf-3) - 12px); background:none; border:0; padding:12px 0; cursor:pointer;
  font:600 var(--rf-t-xs)/1.4 var(--rf-sans); color:var(--rf-ink); text-decoration:underline; text-decoration-color:var(--rf-mark, #FFC928);
  text-decoration-thickness:2px; text-underline-offset:4px}
@media (max-width:640px){
  .rd-table--eu .rd-num{font-size:15px}
  .rd-table--eu.rd-table--stack tr.rd-eu-avg{border-top:1px solid var(--rf-line-strong, var(--rf-line))}
  .rd-table--eu.rd-table--stack tr.rd-eu-avg th,.rd-table--eu.rd-table--stack tr.rd-eu-avg td{border:0}
}

/* ---- station-card anatomy (an illustration, labelled as one) ----------- */
.rd-anat{display:grid; gap:0}
.rd-anat-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--rf-2) var(--rf-5); align-items:center;
  padding:var(--rf-4) var(--rf-5); border-top:1px solid var(--rf-line-faint)}
.rd-anat-row:first-child{border-top:0}
.rd-anat-v{font-size:var(--rf-t-body); color:var(--rf-ink); line-height:1.4}
.rd-anat-v strong{font-weight:600}
.rd-anat-v .rd-num{font-size:17px}
.rd-src{font-family:var(--rf-mono); font-size:var(--rf-t-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 8px; border-radius:var(--rf-r-chip); border:1px solid var(--rf-line-strong); color:var(--rf-ink-2); white-space:nowrap}
.rd-src--driver{border-color:var(--rf-brand-edge); color:var(--rf-brand)}
.rd-src--feed{border-style:dashed}
.rd-anat-top{display:flex; align-items:center; gap:var(--rf-3); padding:var(--rf-5); border-bottom:1px solid var(--rf-line); background:var(--rf-raised)}
.rd-anat-top .rd-anat-name{font-weight:600; font-size:17px; color:var(--rf-ink)}
.rd-anat-top .rd-anat-sub{font-size:var(--rf-t-xs); color:var(--rf-ink-3)}
.rd-anat-foot{display:flex; gap:var(--rf-3); padding:var(--rf-4) var(--rf-5); border-top:1px solid var(--rf-line); flex-wrap:wrap}

/* ---- pins, drawn by the map's own marker.js ---------------------------- */
.rd-pin{display:inline-flex; width:34px; height:40px; flex:0 0 auto; align-items:flex-start; justify-content:center}
.rd-pin .rf-mk{position:static}
.rd-states{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--rf-line)}
.rd-states li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--rf-4); align-items:start;
  padding:var(--rf-4) 0; border-bottom:1px solid var(--rf-line)}
.rd-states strong{display:block; font-size:16px; color:var(--rf-ink); margin-bottom:2px}
.rd-states span.rd-body{display:block; font-size:var(--rf-t-sm)}

/* ---- the freshness clock ----------------------------------------------- */
/* Six hours fresh, eighteen stale: the code's clock, drawn to scale. */
.rd-clock{margin-top:var(--rf-7)}
.rd-clock-bar{position:relative; height:10px; border-radius:var(--rf-r-pill); overflow:hidden; display:grid;
  grid-template-columns:6fr 12fr 6fr; background:var(--rf-raised)}
/* Age is fade, not hue: the status colours stay for status (no-traffic-light). */
.rd-clock-bar > i:nth-child(1){background:var(--rf-ink-2)}
.rd-clock-bar > i:nth-child(2){background:linear-gradient(90deg,var(--rf-ink-2),var(--rf-line))}
.rd-clock-bar > i:nth-child(3){background:var(--rf-line-faint)}
.rd-clock-marks{display:grid; grid-template-columns:6fr 12fr 6fr; margin-top:var(--rf-3)}
.rd-clock-marks > div{border-left:1px solid var(--rf-line-strong); padding-left:var(--rf-3)}
.rd-clock-marks b{display:block; font-family:var(--rf-mono); font-size:12px; font-weight:600; color:var(--rf-ink)}
.rd-clock-marks span{display:block; font-size:var(--rf-t-xs); line-height:1.45; color:var(--rf-ink-2); margin-top:2px; padding-right:var(--rf-3)}
@media (max-width:640px){
  .rd-clock-bar,.rd-clock-marks{grid-template-columns:1fr 1fr 1fr}
}

/* ---- tiles: a compact index of destinations (not feature cards) -------- */
.rd-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--rf-line)}
.rd-tile{display:grid; gap:6px; padding:var(--rf-5) var(--rf-5) var(--rf-5) 0; border-bottom:1px solid var(--rf-line);
  color:inherit; text-decoration:none}
.rd-tile + .rd-tile{padding-left:var(--rf-5); border-left:1px solid var(--rf-line)}
.rd-tiles > .rd-tile:nth-child(3n+1){padding-left:0; border-left:0}
.rd-tile-t{font-weight:650; font-size:16px; color:var(--rf-ink)}
.rd-tile-d{font-size:var(--rf-t-sm); line-height:1.5; color:var(--rf-ink-2)}
a.rd-tile:hover .rd-tile-t{color:var(--rf-brand); text-decoration:underline; text-underline-offset:3px}
a.rd-tile:focus-visible{outline:2px solid var(--rf-brand); outline-offset:2px}
@media (max-width:860px){
  .rd-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rd-tiles > .rd-tile:nth-child(n){padding-left:var(--rf-4); border-left:1px solid var(--rf-line)}
  .rd-tiles > .rd-tile:nth-child(2n+1){padding-left:0; border-left:0}
}
@media (max-width:520px){
  .rd-tiles{grid-template-columns:minmax(0,1fr)}
  .rd-tiles > .rd-tile:nth-child(n){padding-left:0; border-left:0}
}

/* ---- /guides ------------------------------------------------------------ */
/* The markup is generated by build-core-pages.py and keeps the class names the
   hub's tests read (gd-chip, gd-start, gd-group, cp-guide, cp-meta, gd-row-h,
   gd-row-p). road.css gives them the road language; core-pages.css is no
   longer loaded on this page. */
.rd-search{display:block; max-width:560px}
.rd-search-f{position:relative; display:flex; align-items:center}
.rd-search-f svg{position:absolute; left:16px; width:20px; height:20px; color:var(--rf-ink-3); pointer-events:none}
.rd-search input{width:100%; min-height:54px; padding:0 18px 0 48px; border-radius:var(--rf-r-ctl);
  border:1px solid var(--rf-line-strong); background:var(--rf-surface); color:var(--rf-ink);
  font:500 16px/1.2 var(--rf-text); transition:border-color var(--rf-fast), box-shadow var(--rf-fast)}
.rd-search input::placeholder{color:var(--rf-ink-3)}
.rd-search input:focus{outline:none; border-color:var(--rf-brand); box-shadow:0 0 0 3px var(--rf-brand-dim)}
.rd-label{display:block; font-size:var(--rf-t-sm); font-weight:600; color:var(--rf-ink-2); margin-bottom:var(--rf-2)}
.gd-find{align-self:end}
.rd .gd-chips{display:flex; flex-wrap:wrap; gap:var(--rf-2); margin-top:var(--rf-4); padding:0}
.rd .gd-chip{min-height:40px; padding:0 14px; border-radius:var(--rf-r-chip); border:1px solid var(--rf-line-strong);
  background:transparent; color:var(--rf-ink-2); font:600 14px/1 var(--rf-text); cursor:pointer;
  transition:background-color var(--rf-fast), border-color var(--rf-fast), color var(--rf-fast)}
.rd .gd-chip:hover{color:var(--rf-ink); border-color:var(--rf-brand-edge)}
.rd .gd-chip.is-on{background:var(--rf-brand-dim); border-color:var(--rf-brand); color:var(--rf-ink)}
.rd .gd-chip:focus-visible{outline:2px solid var(--rf-brand); outline-offset:2px}
@media (pointer:coarse){ .rd .gd-chip{min-height:44px} }

/* the four starters: the road line, laid across the page */
.rd .gd-start{position:relative; list-style:none; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--rf-6); padding:calc(var(--rd-node) + var(--rf-5)) 0 0; --rd-draw:1}
.rd .gd-start::before{content:""; position:absolute; left:0; right:0; top:calc(var(--rd-node) / 2 - 1px); height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--rf-brand) 0%,var(--rf-brand-edge) 100%);
  transform:scaleX(var(--rd-draw)); transform-origin:left center; transition:transform var(--rf-motion-slow) var(--rf-ease-route)}
html.rd-js .rd .gd-start:not(.is-drawn){--rd-draw:0}
.rd .gd-start > li{position:relative; margin:0; min-width:0}
.rd .gd-start > li::before{content:""; position:absolute; left:0; top:calc(-1 * (var(--rd-node) + var(--rf-5)));
  width:var(--rd-node); height:var(--rd-node); border-radius:50%; background:var(--rf-bg); border:2px solid var(--rf-brand)}
.rd .gd-start > li:last-of-type::before{background:var(--rf-brand)}
.gd-stop{display:grid; gap:var(--rf-2); color:inherit; text-decoration:none}
.gd-stop .gd-row-h{font-size:var(--rf-t-h3); font-weight:650; line-height:1.3; color:var(--rf-ink); text-wrap:pretty}
.gd-stop .gd-row-p{font-size:var(--rf-t-sm); line-height:1.55; color:var(--rf-ink-2)}
.gd-stop-m{font-family:var(--rf-mono); font-size:12px; color:var(--rf-ink-3)}
.gd-stop:hover .gd-row-h{color:var(--rf-brand); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.gd-stop:focus-visible{outline:2px solid var(--rf-brand); outline-offset:4px; border-radius:4px}
@media (max-width:860px){
  .rd .gd-start{grid-template-columns:minmax(0,1fr); gap:var(--rf-6); padding:0 0 0 var(--rd-rail)}
  .rd .gd-start::before{left:calc(var(--rd-node) / 2 - 1px); right:auto; top:10px; bottom:10px; width:2px; height:auto;
    background:linear-gradient(180deg,var(--rf-brand) 0%,var(--rf-brand-edge) 100%); transform:scaleY(var(--rd-draw)); transform-origin:top center}
  .rd .gd-start > li::before{left:calc(-1 * var(--rd-rail)); top:5px}
}

/* a guide, wherever it appears */
.rd .cp-guide{display:grid; gap:var(--rf-2); color:inherit; text-decoration:none}
.rd .cp-meta{display:flex; flex-wrap:wrap; gap:4px 12px; font-family:var(--rf-mono); font-size:12px; color:var(--rf-ink-3)}
.rd .cp-meta .cat{color:var(--rf-brand); font-weight:600}
.rd .gd-row-h{display:block; font-size:17px; font-weight:650; line-height:1.35; color:var(--rf-ink); text-wrap:pretty}
.rd .gd-row-p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:var(--rf-t-sm); line-height:1.55; color:var(--rf-ink-2)}
.rd a.cp-guide:hover .gd-row-h{color:var(--rf-brand); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.rd a.cp-guide:focus-visible{outline:2px solid var(--rf-brand); outline-offset:3px; border-radius:6px}

/* the three to read first: one lead, two beside it */
.rd-feature{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--rf-6)}
.rd-feature-side{display:grid; gap:var(--rf-6); align-content:stretch}
.rd-feature .cp-guide{background:var(--rf-surface); border:1px solid var(--rf-line); border-radius:var(--rf-r-card);
  box-shadow:var(--rf-sh-1); padding:var(--rf-6); align-content:start;
  transition:transform var(--rf-fast), border-color var(--rf-fast), box-shadow var(--rf-fast)}
.rd-feature .cp-guide:hover{transform:translateY(-2px); border-color:var(--rf-brand-edge); box-shadow:var(--rf-sh-2)}
.rd-feature .cp-meta.foot{margin-top:auto}
/* RF-2.0 (owner, 22 September 2026: "квадратики лучше убрать по всему сайту
   а то сразу ии похоже"). The squared-paper ground under the lead guide is
   gone, and so is the empty band it filled: the card starts with its words. */
.rd-feature .cp-lead{align-content:start; padding:var(--rf-7); background:var(--rf-surface)}
.rd-feature .cp-lead .gd-row-h{font-family:var(--rf-display); font-size:clamp(28px,2.6vw,40px); line-height:1.1; font-weight:600}
.rd-feature .cp-lead .gd-row-p{font-size:var(--rf-t-body); -webkit-line-clamp:3; max-width:52ch}
@media (max-width:960px){ .rd-feature{grid-template-columns:minmax(0,1fr)} .rd-feature .cp-lead{padding:var(--rf-6)} }

/* what is new: a dated list on one fuel hose (RF-FUEL-KIT, 25 September
   2026). Each row: a sight glass on the hose at the date line, the date and
   the topic on one line, then the title and two lines of summary. The hose
   is drawn a segment per row (::after, node to next node), so it fits rows of
   any height without script; the fuel in a segment is --f of it (1 without
   script). The rows used to be bordered boxes in two columns, which read as
   a grid of cut-off cards. */
.rd .gd-latest{--gl-rail:48px; position:relative; display:block}
.rd .gd-latest > .cp-guide{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline;
  gap:6px var(--rf-4); padding:20px 0 20px var(--gl-rail); border:0; border-radius:0; box-shadow:none; --f:1;
  background:linear-gradient(var(--rf-line),var(--rf-line)) var(--gl-rail) 100%/calc(100% - var(--gl-rail)) 1px no-repeat}
.rd .gd-latest > .cp-guide:last-of-type{background:none}
.rd .gd-latest > .cp-guide:hover{background-color:transparent}
.rd .gd-latest .cp-meta.foot{order:-1; grid-column:1; margin:0; padding:0; font-size:12px; line-height:20px; font-weight:600; color:var(--rf-ink)}
.rd .gd-latest .cp-meta:not(.foot){grid-column:2; line-height:20px}
.rd .gd-latest .gd-row-h{grid-column:1 / -1; font-size:var(--rf-t-h3); font-weight:650; line-height:1.3; margin-top:2px}
.rd .gd-latest .gd-row-p{grid-column:1 / -1; font-size:var(--rf-t-sm); line-height:1.55; color:var(--rf-ink-2); max-width:68ch}
/* the sight glass, on the date line */
.rd .gd-latest > .cp-guide::before{content:""; position:absolute; left:1px; top:20px; z-index:2; box-sizing:border-box;
  width:20px; height:20px; border-radius:50%; border:3px solid var(--rk-rim);
  background:linear-gradient(var(--rk-lane),var(--rk-lane)) 50% 100%/100% 100% no-repeat, var(--rk-face);
  transition:background-size .45s var(--rf-ease-enter,ease), border-color .2s ease}
/* the hose from this glass to the next one */
.rd .gd-latest > .cp-guide:not(:last-of-type)::after{content:""; position:absolute; left:4px; top:30px; height:100%; width:14px;
  z-index:1; box-sizing:border-box; border:2px solid var(--rk-rim); border-radius:8px;
  background:linear-gradient(var(--rk-lane),var(--rk-lane)) 50% 0/6px calc(var(--f) * 100%) no-repeat, var(--rk-tube)}
html.rd-js .rd .gd-latest.rk-hose > .cp-guide{--f:0}
html.rd-js .rd .gd-latest.rk-hose > .cp-guide:not(.is-reached)::before{background-size:100% 0%, auto}
.rd .gd-latest > .cp-guide:hover::before{border-color:var(--rf-brand)}
.rd .gd-latest .rk-drop{left:11px; top:0; margin:-12px 0 0 -11px}

/* beside it: the heading stays with the list, and a pump display counts the
   guides as the fuel reaches them (the static number without script) */
.gd-latest-side{display:grid; justify-items:start; align-content:start}
.gd-latest-note{margin-top:var(--rf-3); color:var(--rf-ink-2); font-size:var(--rf-t-sm); line-height:1.55; max-width:34ch}
.gd-pump{display:inline-flex; align-items:center; gap:12px; margin:var(--rf-6) 0 var(--rf-5); padding:8px 14px 8px 8px;
  border-radius:10px; background:#16181D; color:#fff}
.gd-pump::before{content:""; width:22px; height:22px; margin-left:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC928' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16M3.5 21h13M5 10h10M15 8l3 2.5v7a1.5 1.5 0 0 0 3 0V9l-2.5-3'/%3E%3C/svg%3E") 50% 50%/22px 22px no-repeat}
.gd-pump-n{display:inline-block; min-width:2.4ch; padding:6px 10px; border-radius:6px; background:#0B0C0F; color:#FFC928;
  font:600 32px/1 var(--rf-mono); letter-spacing:.04em; font-variant-numeric:tabular-nums; text-align:center; overflow:hidden}
.gd-pump-n.is-tick{animation:gdTick .28s var(--rf-ease-enter,ease-out) 1}
@keyframes gdTick{from{transform:translateY(-35%); opacity:.2} to{transform:none; opacity:1}}
.gd-pump-l{font:600 11px/1.35 var(--rf-mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.78); max-width:9ch}
:root[data-theme="dark"] .gd-pump{box-shadow:inset 0 0 0 1px #2A2B30}
@media (min-width:861px){ .gd-latest-side{position:sticky; top:96px} }
@media (max-width:860px){
  .gd-pump{margin:var(--rf-5) 0 var(--rf-4)}
  .rd .gd-latest{--gl-rail:40px}
  .rd .gd-latest > .cp-guide{grid-template-columns:minmax(0,1fr)}
  .rd .gd-latest .cp-meta:not(.foot){grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .rd .gd-latest > .cp-guide::before{transition:none}
  .gd-pump-n.is-tick{animation:none}
}

/* the contents: seven topics, two columns, one row per guide */
.rd-topics{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--rf-9) var(--rf-9); align-items:start}
.rd .gd-group[hidden]{display:none}
.rd .cp-group-h{display:flex; justify-content:space-between; align-items:baseline; gap:var(--rf-4); padding-bottom:var(--rf-3);
  border-bottom:2px solid var(--rf-ink)}
.rd .cp-group-h h2{font-size:clamp(24px,2vw,30px)}
.rd .gd-count{font-family:var(--rf-mono); font-size:12px; color:var(--rf-ink-3); white-space:nowrap}
.rd .gd-rows{display:grid; grid-template-columns:minmax(0,1fr)}
.rd .gd-rows > .cp-guide{grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:4px var(--rf-5);
  padding:var(--rf-4) 0; border-bottom:1px solid var(--rf-line)}
.rd .gd-rows > .cp-guide[hidden]{display:none}
.rd .gd-rows > .cp-guide .gd-row-h{grid-column:1; font-size:16px}
.rd .gd-rows > .cp-guide .gd-row-p{grid-column:1; -webkit-line-clamp:1}
.rd .gd-rows > .cp-guide .cp-meta{grid-column:2; grid-row:1; justify-self:end; white-space:nowrap}
.rd .gd-rows > .cp-guide .cp-meta .cat,.rd .gd-rows > .cp-guide .cp-meta.foot{display:none}
@media (max-width:960px){ .rd-topics{grid-template-columns:minmax(0,1fr); gap:var(--rf-8)} }
@media (max-width:560px){
  .rd .gd-rows > .cp-guide{grid-template-columns:minmax(0,1fr)}
  .rd .gd-rows > .cp-guide .cp-meta{grid-column:1; grid-row:auto; justify-self:start}
}
.rd-empty{padding:var(--rf-6) 0; color:var(--rf-ink-2)}
.rd-linklike{background:none; border:0; padding:0 4px; font:inherit; color:var(--rf-brand); text-decoration:underline; cursor:pointer; min-height:44px}

/* ---- the end of the road: every page arrives at the map ----------------- */
.rd-end{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--rf-6); align-items:start}
.rd-end-mark{position:relative; width:var(--rd-node); align-self:stretch; min-height:120px}
.rd-end-mark::before{content:""; position:absolute; left:calc(var(--rd-node) / 2 - 1px); top:0; bottom:22px; width:2px;
  background:linear-gradient(180deg,transparent 0%,var(--rf-brand) 100%)}
.rd-end-mark::after{content:""; position:absolute; left:-3px; bottom:0; width:20px; height:20px; border-radius:50%;
  background:var(--rf-brand); box-shadow:0 0 0 6px var(--rf-brand-dim)}
.rd-end h2{max-width:22ch}
.rd-end .rd-lead{margin-top:var(--rf-3)}

/* ---- motion: one reveal, once ------------------------------------------ */
html.rd-js .rd-rv{opacity:0; transform:translateY(12px);
  transition:opacity var(--rf-motion-slow) var(--rf-ease-enter), transform var(--rf-motion-slow) var(--rf-ease-enter)}
html.rd-js .rd-rv.is-in{opacity:1; transform:none}
/* A phone never waits for a reveal: the content is simply there (the
   RF-REVEAL-NEEDS-A-FAILSAFE rule, as core-pages.css keeps it). */
@media (max-width:760px){
  html.rd-js .rd-rv{opacity:1; transform:none; transition:none}
}
@media (prefers-reduced-motion:reduce){
  html.rd-js .rd-rv{opacity:1; transform:none; transition:none}
  .rd-route::before,.rd-route--h::before{transition:none}
  html.rd-js .rd-route:not(.is-drawn){--rd-draw:1}
  a.rd-card,.rd-row,.rd-chip,.rd-search input{transition:none}
  a.rd-card:hover{transform:none}
}

/* ---- spacing helpers, on the §12 scale and nowhere else ---------------- */
.rd-mt2{margin-top:var(--rf-2)} .rd-mt3{margin-top:var(--rf-3)} .rd-mt4{margin-top:var(--rf-4)}
.rd-mt5{margin-top:var(--rf-5)} .rd-mt6{margin-top:var(--rf-6)} .rd-mt7{margin-top:var(--rf-7)}
.rd-mt9{margin-top:var(--rf-9)} .rd-mb3{margin-bottom:var(--rf-3)}

/* ---- RF-SOURCES-TABLE (25 September 2026): one row per country, the same
   four answers in the same four columns. On a phone each row becomes a block:
   the country with its kind, then the three answers under small labels. ---- */
.rd-srch h2{margin:0}
.rd-srch .rd-lead{margin-top:var(--rf-4); max-width:68ch}
.rd-srct{width:100%; border-collapse:collapse; margin-top:var(--rf-7); font-size:15px; line-height:1.5}
.rd-srct thead th{font-family:var(--rf-mono); font-size:var(--rf-t-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rf-ink-3); text-align:left; padding:0 var(--rf-4) var(--rf-3) 0; border-bottom:1px solid var(--rf-line-strong)}
.rd-srct tbody th,.rd-srct td{padding:var(--rf-4) var(--rf-4) var(--rf-4) 0; border-bottom:1px solid var(--rf-line); text-align:left; vertical-align:top}
.rd-srct tbody tr:hover td,.rd-srct tbody tr:hover th{background:transparent}
.rd-srct tbody tr:last-child td,.rd-srct tbody tr:last-child th{border-bottom:1px solid var(--rf-line)}
.rd-srct tbody th{width:19%; font-size:17px; font-weight:650; color:var(--rf-ink)}
.rd-srct td{color:var(--rf-ink-2)}
.rd-srct td:nth-of-type(1){width:31%}
.rd-srct td:nth-of-type(2){width:18%}
.rd-srct td > span{display:block; margin-top:2px; font-size:13.5px; color:var(--rf-ink-3)}
.rd-srct a{color:var(--rf-ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--rf-line-strong); text-underline-offset:3px}
.rd-srct a:hover{text-decoration-color:var(--rf-ink)}
.rd-srct-f{font-size:14px; color:var(--rf-ink-2)}
.rd-srct tbody th .rd-stamp{display:flex; margin-top:8px; font-size:11.5px; font-weight:400}
@media (max-width:760px){
  .rd-srct thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .rd-srct,.rd-srct tbody,.rd-srct tr,.rd-srct tbody th,.rd-srct td,.rd-srct td:nth-of-type(n){display:block; width:auto}
  .rd-srct tr{padding:var(--rf-5) 0; border-bottom:1px solid var(--rf-line)}
  .rd-srct tbody th,.rd-srct td{border:0; padding:0}
  .rd-srct tbody th{display:flex; align-items:center; justify-content:space-between; gap:var(--rf-3)}
  .rd-srct tbody th .rd-stamp{margin-top:0}
  .rd-srct td{margin-top:var(--rf-3)}
  .rd-srct td::before{content:attr(data-label); display:block; font-family:var(--rf-mono); font-size:10.5px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--rf-ink-3); margin-bottom:2px}
}
.rd-quotes .rd-chg{font-family:var(--rf-mono); font-size:12.5px; font-weight:500; margin-left:6px; color:var(--rf-ink-3)}
.rd-quotes .rd-chg.up{color:var(--rf-out)}
/* RF-TEXT-GREEN (26 Sep 2026): the status green is 4.1:1 on white, under the 4.5 that 12px text needs (PageSpeed, /fuel-prices). Small text takes the same green, 18% darker: 5.5:1 light, still 7:1 on the dark page. */
.rd-quotes .rd-chg.dn{color:var(--rf-ok); color:color-mix(in srgb, var(--rf-ok) 82%, #000)}

/* ---- quotes: the numbers behind the pump price -------------------------- */
.rd-quotes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rf-line); border-bottom:1px solid var(--rf-line)}
.rd-quotes li{display:grid; gap:6px; padding:var(--rf-4) var(--rf-4) var(--rf-4) 0}
.rd-quotes li + li{padding-left:var(--rf-4); border-left:1px solid var(--rf-line)}
.rd-quotes b{font-family:var(--rf-mono); font-size:16px; font-weight:600; color:var(--rf-ink)}
@media (max-width:760px){
  .rd-quotes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rd-quotes li:nth-child(odd){padding-left:0; border-left:0}
  .rd-quotes li:nth-child(n+3){border-top:1px solid var(--rf-line)}
}
.rd-pins{display:flex; gap:var(--rf-4); align-items:flex-end}
/* The lg pin's geometry against site.css's legacy .pin-badge rule is stated
   once, in shell.css (RF-RING-IS-NOT-THE-BODY). */

/* ---- the coverage map (coverage-map.js draws it; these are its colours) - */
.rd .rf-world{--rf-wc-city:var(--rf-brand); --rf-wc-tiles:rgba(255,201,40,.62); --rf-wc-national:rgba(146,175,215,.34);
  --rf-wc-none:var(--rf-unknown-dim); --rf-wc-line:var(--rf-line-strong); --rf-wc-hover:var(--rf-mark,var(--rf-brand))}
/* RF-NOT-GENERATED: one coverage map everywhere — graphite countries, white
   borders, yellow on hover (the hover was the amber "Limited" status colour:
   a data colour used as decoration). */
:root[data-theme="light"] .rd .rf-world{--rf-wc-city:#16181D; --rf-wc-tiles:#FFC928; --rf-wc-national:rgba(22,24,29,.34);
  --rf-wc-none:rgba(22,24,29,.08); --rf-wc-line:rgba(255,255,255,.75)}
.rd .rf-world-stage{position:relative}
.rd-legend{list-style:none; margin:var(--rf-3) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--rf-2) var(--rf-5);
  font-size:var(--rf-t-xs); color:var(--rf-ink-2)}
.rd-legend li{display:inline-flex; align-items:center; gap:8px}
.rd-legend .rf-wl{display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid var(--rf-line-strong)}
.rd-legend .rf-wl-city{background:var(--rf-wc-city)}
.rd-legend .rf-wl-tiles{background:var(--rf-wc-tiles)}
.rd-legend .rf-wl-nat{background:var(--rf-wc-national)}
.rd-legend .rf-wl-none{background:var(--rf-wc-none)}

/* ==========================================================================
   THE HOMEPAGE                                        RF-ROAD-HOME, 22 Sep 2026
   The first screen is the product: the live map is the stage, edge to edge,
   and the search panel and the nearby list sit on it the way they sit on
   /map. Below it, one road runs down the page through every chapter.
   home.css still styles the machinery inside (pins, popups, station cards,
   legend swatches, the route drawer); this block owns the composition. It is
   scoped under .rd-home so it outranks home.css's layout rules and nothing
   else.
   ========================================================================== */
/* RF-HOME-IS-THE-MAP (23 September 2026). The owner: the homepage IS the map,
   as on his reference (gdebenz.ru). The stage fills the first screen, the map
   runs edge to edge under it, and ONE column sits on it — what this is, the
   search, the nearest stations — the way /map has one column. No second
   panel on the right, no white wash over the map's edges. */
.rd-home{--rd-panel-w:400px; --rd-edge:calc(max(0px, (100% - var(--rf-wrap)) / 2) + var(--rf-gutter));
  --rd-stage-h:max(560px, calc(100vh - var(--rf-header)))}
@supports (height:100svh){ .rd-home{--rd-stage-h:max(560px, calc(100svh - var(--rf-header)))} }

/* ---- the stage -------------------------------------------------------- */
.rd-home .rd-stage{position:relative; padding:0; height:var(--rd-stage-h); min-height:0; overflow:hidden; background:var(--rf-bg-2); isolation:isolate}
.rd-home .rd-stage-map{position:absolute; inset:0; border-radius:0; border:0; box-shadow:none; min-height:0; height:auto; z-index:0}
.rd-home .rd-stage-map::after{content:none}
.rd-home .rd-stage-ui{position:relative; z-index:2; display:grid; grid-template-columns:var(--rd-panel-w) minmax(0,1fr);
  align-items:start; gap:var(--rf-6); padding-block:var(--rf-4); height:100%; pointer-events:none}
.rd-home .rd-stage-ui > *{pointer-events:auto}
.rd-home .rd-stage-side{grid-column:1; display:flex; flex-direction:column; gap:var(--rf-4);
  max-height:calc(var(--rd-stage-h) - 2 * var(--rf-4)); overflow-y:auto; overscroll-behavior:contain;
  background:var(--rf-surface); border:1px solid var(--rf-line); border-radius:var(--rf-r-panel);
  box-shadow:var(--rf-sh-3); padding:var(--rf-5)}
/* children keep their height: in a scrolling flex column the default
   flex-shrink squeezed the list under its own footnote */
.rd-home .rd-stage-side > *{flex:none; min-height:auto}
.rd-home .rd-stage-intro h1{font-family:var(--rf-text); font-size:clamp(24px,1.9vw,30px); line-height:1.12; letter-spacing:-.012em;
  font-weight:600; margin:var(--rf-2) 0 0}
.rd-home .rd-stage-intro h1 em{font-style:normal; color:var(--rf-brand)}
:root[data-theme="light"] .rd-home .rd-stage-intro h1 em{color:var(--rf-ink)}
.rd-stage-sub{margin-top:var(--rf-2); font-size:var(--rf-t-sm); line-height:1.5; color:var(--rf-ink-2)}
.rd-home .rd-stage-panel{background:none; border:0; box-shadow:none; padding:0}
.rd-home .rfh-search{margin-top:0}
.rd-stage-row{display:flex; flex-wrap:wrap; gap:var(--rf-2); margin-top:var(--rf-3)}
.rd-home .rfh-quick{margin-top:var(--rf-3)}
.rd-stamps{list-style:none; margin:0; padding:var(--rf-3) 0 0; border-top:1px solid var(--rf-line); display:grid; gap:var(--rf-2)}
.rd-home .rd-stamps li{display:flex; font-size:12px; line-height:1.45}
.rd-home .rd-stamps li::before{margin-top:4px; align-self:flex-start}
.rd-home .rd-stamps svg{display:none}
/* the nearest stations: the same column, a list on rules (not a second card) */
.rd-home .rd-stage-near{background:none; border:0; border-top:1px solid var(--rf-line); border-radius:0; box-shadow:none;
  padding:var(--rf-3) 0 0; max-height:none; display:flex; flex-direction:column}
.rd-home .rd-stage-near .rfh-nearby-list{flex-direction:column; overflow:visible}
.rd-home .rd-stage-near .rfh-nearby-list > *{flex:none}
.rd-home .rfh-nearby-head h2{font-family:var(--rf-text); font-size:var(--rf-t-h3); font-weight:600; letter-spacing:-.01em}
.rd-home .rfh-hero-go{display:none}
/* the map's own controls live in the open part of the stage */
.rd-home .rd-stage-map .rfh-map-note{left:calc(var(--rd-edge) + var(--rd-panel-w) + var(--rf-6)); top:var(--rf-4);
  max-width:calc(100% - 2 * var(--rd-edge) - var(--rd-panel-w) - var(--rf-6) - 200px)}  /* RF-MAP-FAILED: 56px let a long error line run under the controls (measured at 1440: it did) */
.rd-home .rd-stage-map .rfh-map-tools{top:var(--rf-4); right:var(--rd-edge)}
.rd-home .rd-stage-map .rfh-map-zoom{bottom:var(--rf-4); right:var(--rd-edge)}
.rd-home .rd-stage-map .rfh-legend{left:calc(var(--rd-edge) + var(--rd-panel-w) + var(--rf-6)); bottom:var(--rf-4);
  max-width:calc(100% - 2 * var(--rd-edge) - var(--rd-panel-w) - var(--rf-6) - 60px)}

@media (max-width:1199px){
  .rd-home{--rd-panel-w:360px}
}
/* A phone: the map is the first screen. The search and the fuel chips float on
   it (as on the owner's reference); the one way on to the full map sits right
   under it; what this is, the nearest stations and the rest follow. */
@media (max-width:767px){
  .rd-home{--rd-map-h:calc(100svh - var(--rf-header) - var(--rf-tabbar-h, 56px) - 76px)}
  .rd-home .rd-stage{height:auto; min-height:0; overflow:visible; background:var(--rf-bg)}
  .rd-home .rd-stage-map{position:absolute; inset:0 0 auto 0; height:max(380px, var(--rd-map-h))}
  .rd-home .rd-stage-ui{position:static; display:flex; flex-direction:column; gap:var(--rf-5); height:auto;
    padding-block:calc(max(380px, var(--rd-map-h)) + var(--rf-3)) var(--rf-7)}
  .rd-home .rd-stage-side{display:contents}
  .rd-home .rd-stage-ui > *, .rd-home .rd-stage-side > *{min-width:0; max-width:100%}
  .rd-home .rd-stage-panel{position:absolute; top:10px; left:10px; right:10px; z-index:3;
    background:var(--rf-surface); border:1px solid var(--rf-line); border-radius:var(--rf-r-panel);
    box-shadow:var(--rf-sh-3); padding:8px}
  .rd-home .rd-stage-panel .rd-stage-row{display:none}
  /* RF-FUEL-PICK: the chips live behind one button now (home.css); the
     swipeable row only remains for a browser without script. */
  .rd-home .rd-stage-panel .rfh-fuelpick{margin-top:8px}
  .rd-home .rd-stage-panel .rfh-fuelpick:not(.is-ready) .rfh-quick{flex-wrap:nowrap; overflow-x:auto; margin-top:0; scrollbar-width:none}
  .rd-home .rd-stage-panel .rfh-fuelpick:not(.is-ready) .rfh-quick > *{flex:none}
  .rd-home .rfh-hero-go{display:flex; order:-1}
  .rd-home .rfh-hero-go .rfh-btn{width:100%; justify-content:center}
  .rd-home .rd-stage-intro h1{font-size:clamp(26px,7.4vw,32px)}
  .rd-home .rd-stage-near{border-top:0; padding-top:0}
  .rd-home .rd-stage-map .rfh-map-note{left:12px; top:136px; max-width:calc(100% - 24px)}
  /* RF-LOCATE-B (24 September 2026): "Near me" is wider than the old 36px
     square, so on a phone it stands on the legend's shoulder at the right
     edge (home-map.js keeps --rfh-legend-h equal to the legend's real height,
     which differs per language) and the legend gets the full width back. */
  .rd-home .rd-stage-map .rfh-map-tools{top:auto; bottom:calc(var(--rfh-legend-h, 82px) + 20px); right:10px}
  .rd-home .rd-stage-map .rfh-map-zoom{display:none}
  .rd-home .rd-stage-map .rfh-legend{left:12px; bottom:12px; max-width:calc(100% - 24px)}
  .rd-home .rd-stamps{display:grid}
}

/* ---- one road through every chapter ------------------------------------ */
.rd-journey{position:relative; --rd-spine:calc(var(--rd-edge) + 15px)}
/* RF-2.0: the road is travelled, not printed. The bed is a faint line the
   whole way down; the emerald is how far the reader has driven, set by
   road.js from the scroll position (--rd-prog, 0 to 1), and a chapter's
   marker fills when the road reaches it. Without script, or with reduced
   motion, the road is simply drawn in full. */
.rd-journey{--rd-prog:1}
html.rd-js .rd-journey{--rd-prog:0}
.rd-journey::before{content:""; position:absolute; z-index:3; top:0; bottom:0; left:var(--rd-spine); width:2px; pointer-events:none;
  background:var(--rf-line-strong)}
.rd-journey::after{content:""; position:absolute; z-index:3; top:0; bottom:0; left:var(--rd-spine); width:2px; pointer-events:none;
  background:var(--rf-brand); transform-origin:50% 0; transform:scaleY(var(--rd-prog)); will-change:transform}
.rd-ch-n span{transition:background-color .24s var(--rf-ease-standard), color .24s var(--rf-ease-standard)}
html.rd-js .rd-ch.is-reached .rd-ch-n span{background:var(--rf-brand); color:var(--rf-brand-ink)}
@media (prefers-reduced-motion:reduce){ html.rd-js .rd-journey{--rd-prog:1} .rd-ch-n span{transition:none} }
.rd-ch{position:relative}
.rd-ch-in{position:relative; padding-left:var(--rf-10)}
.rd-ch-n{position:relative; display:flex; align-items:center; gap:var(--rf-3); margin-bottom:var(--rf-6); margin-left:calc(-1 * var(--rf-10));
  font-family:var(--rf-mono); font-size:var(--rf-t-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--rf-ink-3)}
.rd-ch-n span{position:relative; z-index:4; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--rf-bg); border:2px solid var(--rf-brand); color:var(--rf-ink); font-size:13px; letter-spacing:0;
  margin-right:calc(var(--rf-10) - 32px - var(--rf-3))}
.rfs-paper .rd-ch-n span{background:var(--rf-paper)}
.rd-ch-n--end span{background:var(--rf-brand); box-shadow:0 0 0 6px var(--rf-brand-dim)}
.rd-ch--end{padding-bottom:var(--rf-11)}
.rd-journey > .rd-ch--end::after{content:""; position:absolute; left:0; right:0; bottom:0; height:var(--rf-11); background:var(--rf-bg); z-index:3}
@media (max-width:760px){
  .rd-ch-in{padding-left:var(--rf-8)}
  .rd-ch-n{margin-left:calc(-1 * var(--rf-8))}
  .rd-ch-n span{margin-right:calc(var(--rf-8) - 32px - var(--rf-3))}
}

/* the capabilities: seven destinations, as a line of links, not seven boxes */
.rd-caps{list-style:none; margin:var(--rf-7) 0 0; padding:var(--rf-4) 0 0; border-top:1px solid var(--rf-line);
  display:flex; flex-wrap:wrap; gap:var(--rf-2) var(--rf-5)}
.rd-caps a{font-size:var(--rf-t-sm); font-weight:600; color:var(--rf-ink); text-decoration:none; min-height:32px; display:inline-flex; align-items:center}
.rd-caps a:hover{color:var(--rf-brand); text-decoration:underline; text-underline-offset:3px}
.rd-caps li:last-child a{color:var(--rf-brand)}
@media (pointer:coarse){ .rd-caps a{min-height:44px} }

/* the specimen: three real pins, drawn by marker.js, labelled as an illustration */
.rd-specimen .rd-states{border-top:0}
.rd-specimen .rd-states li{padding:var(--rf-5); gap:var(--rf-4)}
.rd-specimen .rd-states li:last-child{border-bottom:0}
.rd-specimen .rd-states .rd-stamp{margin-top:4px}

/* RF-TRIP (25 September 2026): the "Plan the stop" picture. A road from a
   city (A) through the hills to a town (B), three stops on it, a car, and the
   planner's card on the sky. The owner asked for the car back; it is graphite,
   not yellow, so it never reads as the taxi that was dropped on 24 September.
   Colours are tokens so the picture has a dark theme of its own. */
.rd-trip{margin:0; --tp-sky:#FFFFFF; --tp-cloud:#EEF1F4; --tp-mtn:#E4E8EC; --tp-snow:#FFFFFF; --tp-hill:#D3D8DE;
  --tp-ground:#F6F7F8; --tp-bld:#C2C8D0; --tp-win:#FFFFFF; --tp-house:#FFFFFF; --tp-roof:#4A5059; --tp-tree:#C9D3CC;
  --tp-trunk:#646B75; --tp-road:#2B2F36; --tp-lane:#FFFFFF; --tp-ink:#16181D; --tp-post:#4A5059; --tp-face:#FFFFFF;
  --tp-idle:#C2C8D0; --tp-car:#4A5059; --tp-glass:#DCE7F1; --tp-y:#FFC928}
:root:not([data-theme="light"]) .rd-trip{--tp-sky:#16181C; --tp-cloud:#1E2126; --tp-mtn:#22262C; --tp-snow:#3A3F47; --tp-hill:#2A2E35;
  --tp-ground:#1C1F23; --tp-bld:#343941; --tp-win:#4E545E; --tp-house:#2A2E35; --tp-roof:#8A929C; --tp-tree:#2F3934;
  --tp-trunk:#5A616B; --tp-road:#0C0D0F; --tp-lane:#9AA1AA; --tp-ink:#0C0D0F; --tp-post:#8A929C; --tp-face:#E6E8EB;
  --tp-idle:#4E545E; --tp-car:#B8BFC8; --tp-glass:#DCE7F1}
.rd-trip-scene{position:relative; --tp-crop:0; --tp-vh:440; --tyu:281}
.rd-trip-pic{position:relative; aspect-ratio:640/440; border-radius:var(--rf-r-card); overflow:hidden;
  border:1px solid var(--rf-line-faint); background:var(--tp-sky)}
.rd-trip-svg{display:block; width:100%; height:100%}
.rd-trip-svg text{font:600 12px var(--rf-mono); text-anchor:middle}
.tp-sky{fill:var(--tp-sky)} .tp-cloud{fill:var(--tp-cloud)} .tp-mtn{fill:var(--tp-mtn)} .tp-snow{fill:var(--tp-snow)}
.tp-hill{fill:var(--tp-hill)} .tp-ground{fill:var(--tp-ground)} .tp-bld{fill:var(--tp-bld)} .tp-win{fill:var(--tp-win)}
.tp-house{fill:var(--tp-house); stroke:var(--tp-post); stroke-width:1.8} .tp-roof{fill:var(--tp-roof)} .tp-door{fill:var(--tp-y)}
.tp-tree{fill:var(--tp-tree)} .tp-trunk{fill:var(--tp-trunk)}
.tp-road{fill:none; stroke:var(--tp-road); stroke-width:24; stroke-linecap:round; stroke-linejoin:round}
.tp-lane{fill:none; stroke:var(--tp-lane); stroke-width:2; stroke-dasharray:10 12; stroke-linecap:round}
.tp-canopy{fill:var(--tp-ink)} .tp-post{fill:var(--tp-post)}
.tp-pump{fill:var(--tp-face); stroke:var(--tp-ink); stroke-width:2}
.tp-hose{fill:none; stroke:var(--tp-ink); stroke-width:2; stroke-linecap:round}
.tp-mark{fill:var(--tp-ink)}
.tp-stripe, .tp-lamp{fill:var(--tp-idle); transition:fill .3s ease}
.tp-stop{opacity:.45; transition:opacity .3s ease}
.tp-stop.is-lit{opacity:1}
.tp-stop.is-lit .tp-stripe, .tp-stop.is-lit .tp-lamp{fill:var(--tp-y)}
html:not(.rd-js) .tp-stop[data-stop="fuel"]{opacity:1}
html:not(.rd-js) .tp-stop[data-stop="fuel"] :is(.tp-stripe,.tp-lamp){fill:var(--tp-y)}
.tp-body{fill:var(--tp-car); stroke:var(--tp-ink); stroke-width:2.2; stroke-linejoin:round}
:root:not([data-theme="light"]) .tp-body{stroke:#0C0D0F}
.tp-glass{fill:var(--tp-glass); stroke:var(--tp-ink); stroke-width:1.8; stroke-linejoin:round}
.tp-car{transition:opacity .18s ease}
.tp-tyre{fill:#16181D} .tp-hub{fill:#DCE0E5} .tp-light{fill:var(--tp-y)}
.tp-a circle{fill:#16181D; stroke:#fff; stroke-width:2} .tp-a text{fill:#fff}
.tp-b rect{fill:var(--tp-y); stroke:#16181D; stroke-width:2.2} .tp-b text{fill:#16181D}
/* the planner's card on the sky */
.rd-trip-card{position:absolute; z-index:1; left:3.2%; top:4.5%; width:min(372px,58%); padding:var(--rf-3) var(--rf-4);
  background:var(--rf-surface); border:1px solid var(--rf-line); border-radius:10px; box-shadow:var(--rf-sh-2)}
.rd-trip-row{position:relative; display:flex; align-items:center; gap:10px; margin:0; padding:6px 0;
  font-size:var(--rf-t-sm); color:var(--rf-ink)}
.rd-trip-row + .rd-trip-row::before{content:""; position:absolute; left:6px; top:-8px; height:14px; border-left:1.5px dotted var(--rf-ink-3)}
.rd-trip-a, .rd-trip-b{flex:none; width:13px; height:13px}
.rd-trip-a{border-radius:50%; background:var(--rf-ink)}
.rd-trip-b{border-radius:4px; background:#FFC928; box-shadow:inset 0 0 0 1.5px #16181D}
.rd-trip-fuels{display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--rf-2); padding-top:var(--rf-3); border-top:1px solid var(--rf-line-faint)}
/* the stop's label, over the stop that is lit */
.rd-trip-tag{position:absolute; top:calc((var(--tyu) - var(--tp-crop)) / var(--tp-vh) * 100%); left:var(--tx,56.25%); transform:translate(-50%,-100%); margin:0;
  padding:5px 10px; border-radius:8px; background:#16181D; color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap;
  pointer-events:none; transition:opacity .2s ease}
.rd-trip-tag::after{content:""; position:absolute; left:50%; top:100%; margin-left:-6px; border:6px solid transparent; border-top-color:#16181D}
:root:not([data-theme="light"]) .rd-trip-tag{background:#E6E8EB; color:#16181D}
:root:not([data-theme="light"]) .rd-trip-tag::after{border-top-color:#E6E8EB}
.rd-trip-tag.is-off{opacity:0}
.rd-trip-cap{margin-top:var(--rf-2); font-size:var(--rf-t-xs,12px); color:var(--rf-ink-3)}
@media (max-width:600px){
  .rd-trip-card{position:static; width:auto; box-shadow:none; border-radius:var(--rf-r-card) var(--rf-r-card) 0 0; border-color:var(--rf-line-faint)}
  .rd-trip-pic{border-top:0; border-radius:0 0 var(--rf-r-card) var(--rf-r-card)}
  /* the phone shows the land, not the sky the card sits on at desktop */
  .rd-trip-scene{--tp-crop:130; --tp-vh:310}
  .rd-trip-pic{aspect-ratio:640/310}
  .rd-trip-svg{position:absolute; left:0; bottom:0; height:auto; aspect-ratio:640/440}
  .rd-trip-tag{font-size:11.5px; padding:4px 8px}
}

/* the three layers of a pin, as the ordered list three-steps-journey guards;
   home.css lays .rfh-journey out as a wide horizontal road for the old scene,
   and inside a chapter column it is a short vertical one. */
.rd-home .rd-layers{list-style:none; margin:var(--rf-6) 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0; border:0}
.rd-home .rd-layers::before,.rd-home .rd-layers::after{display:none}
.rd-home .rd-layers .rfh-leg{position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--rf-3); padding:0 0 var(--rf-5); margin:0; border:0}
.rd-home .rd-layers .rfh-leg::before{content:""; position:absolute; left:13px; top:26px; bottom:2px; width:2px; background:var(--rf-line-strong); transform:none}
.rd-home .rd-layers .rfh-leg:last-child{padding-bottom:0}
.rd-home .rd-layers .rfh-leg:last-child::before{display:none}
.rd-home .rd-layers .rfh-leg-n{position:static; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--rf-line-strong); background:var(--rf-bg); font:600 12px/1 var(--rf-mono); color:var(--rf-ink-2); margin:0}
.rd-home .rd-layers h3{font-size:16px; margin:3px 0 4px}
.rd-home .rd-layers p{font-size:var(--rf-t-sm); line-height:1.55; color:var(--rf-ink-2); margin:0}
.rd-home .rd-layers b{color:var(--rf-ink); font-weight:650}

/* ---- RF-2.0 scene 1: the key, drawn with the map's own pins ----------------
   A list on hairlines, not tiles. Each row is the destination: the pin, what
   it means, and the map filtered to it. On arrival the pins land one after the
   other, the way pins land on the map; on hover a row's pin lifts and rings,
   the same is-hot the two maps use. */
.rd-kinds{list-style:none; margin:0; padding:0; border-top:1px solid var(--rf-line)}
.rd-kinds li{border-bottom:1px solid var(--rf-line)}
.rd-kinds a{display:grid; grid-template-columns:76px minmax(0,1fr) 20px; gap:var(--rf-4); align-items:center;
  padding:var(--rf-5) var(--rf-2) var(--rf-5) 0; color:inherit; text-decoration:none;
  transition:background var(--rf-motion-fast,.18s) var(--rf-ease-standard)}
.rd-kinds a::after{content:"\2192"; color:var(--rf-ink-3); font-size:16px; transition:transform var(--rf-motion-fast,.18s) var(--rf-ease-standard), color var(--rf-motion-fast,.18s)}
.rd-kinds a:hover::after, .rd-kinds a:focus-visible::after{color:var(--rf-brand); transform:translateX(3px)}
.rd-kinds .rd-pin{justify-content:center; width:76px}
.rd-kinds .rd-pin--pair{gap:0}
.rd-kinds .rd-pin--pair > span{display:inline-flex; width:34px; height:40px}
.rd-kinds .rd-pin--pair > span + span{margin-left:-8px}
.rd-kind-t strong{display:block; font-size:17px; font-weight:650; color:var(--rf-ink); letter-spacing:-.01em}
.rd-kind-t span{display:block; margin-top:3px; font-size:var(--rf-t-sm); line-height:1.5; color:var(--rf-ink-2); max-width:52ch}
.rd-kinds a:hover .rf-mk, .rd-kinds a:focus-visible .rf-mk{transform:translateY(-3px) scale(1.08)}
html.rd-js .rd-kinds .rd-pin .rf-mk{opacity:0; transform:translateY(-10px) scale(.8);
  transition:opacity .22s var(--rf-ease-enter), transform .28s cubic-bezier(.2,1.4,.4,1)}
html.rd-js .rd-kinds.is-in .rd-pin .rf-mk{opacity:1; transform:none}
html.rd-js .rd-kinds.is-in li:nth-child(2) .rf-mk{transition-delay:.07s}
html.rd-js .rd-kinds.is-in li:nth-child(3) .rf-mk{transition-delay:.14s}
html.rd-js .rd-kinds.is-in li:nth-child(4) .rf-mk{transition-delay:.21s}
html.rd-js .rd-kinds.is-in li:nth-child(5) .rf-mk{transition-delay:.28s}
html.rd-js .rd-kinds.is-in a:hover .rf-mk{transition-delay:0s; transform:translateY(-3px) scale(1.08)}
@media (prefers-reduced-motion:reduce){
  html.rd-js .rd-kinds .rd-pin .rf-mk{opacity:1; transform:none; transition:none}
  .rd-kinds a:hover .rf-mk{transform:none}
}
@media (max-width:767px){
  .rd-kinds a{grid-template-columns:64px minmax(0,1fr) 16px; gap:var(--rf-3)}
  .rd-kinds .rd-pin{width:64px}
}

/* ---- RF-2.0 the method as one line: source → kept apart → pin → you ------ */
.rd-flow, .rd .rd-flow{margin:0 0 var(--rf-10)}
.rd-flow-cols{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; gap:var(--rf-7)}
.rd-flow-col{position:relative; padding-top:var(--rf-6)}
.rd-flow-col::before{content:""; position:absolute; left:0; right:calc(-1 * var(--rf-7)); top:0; height:2px; background:var(--rf-line-strong)}
.rd-flow-col:last-child::before{right:0}
.rd-flow-col::after{content:""; position:absolute; left:0; right:calc(-1 * var(--rf-7)); top:0; height:2px; background:var(--rf-brand);
  transform-origin:0 50%; transform:scaleX(1)}
.rd-flow-col:last-child::after{right:0}
html.rd-js .rd-flow:not(.is-in) .rd-flow-col::after{transform:scaleX(0)}
html.rd-js .rd-flow .rd-flow-col::after{transition:transform .32s linear}
html.rd-js .rd-flow.is-in .rd-flow-col:nth-child(2)::after{transition-delay:.32s}
html.rd-js .rd-flow.is-in .rd-flow-col:nth-child(3)::after{transition-delay:.64s}
html.rd-js .rd-flow.is-in .rd-flow-col:nth-child(4)::after{transition-delay:.96s}
.rd-flow-h{display:flex; align-items:center; gap:var(--rf-2); margin:0 0 var(--rf-4); font:600 var(--rf-t-label)/1 var(--rf-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--rf-ink-3)}
.rd-flow-h span{position:absolute; top:-7px; left:0; width:16px; height:16px; border-radius:50%; background:var(--rf-bg); border:2px solid var(--rf-brand);
  font-size:0; z-index:1}
.rfs-paper .rd-flow-h span{background:var(--rf-paper)}
.rd-flow-src{list-style:none; margin:0; padding:0; display:grid; gap:var(--rf-3)}
.rd-flow-src b{display:block; font-size:16px; color:var(--rf-ink)}
.rd-flow-pin{display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--rf-3); align-items:start}
.rd-flow .rd-note{margin-top:var(--rf-5)}
@media (prefers-reduced-motion:reduce){ html.rd-js .rd-flow .rd-flow-col::after{transition:none; transform:none} }
@media (max-width:900px){
  .rd-flow-cols{grid-template-columns:1fr; gap:0}
  .rd-flow-col{padding:0 0 var(--rf-6) var(--rf-6)}
  .rd-flow-col::before, .rd-flow-col::after{left:0; right:auto; top:0; bottom:0; width:2px; height:auto}
  .rd-flow-col:last-child::before, .rd-flow-col:last-child::after{bottom:calc(100% - 10px)}
  .rd-flow-col::after{transform-origin:50% 0}
  html.rd-js .rd-flow:not(.is-in) .rd-flow-col::after{transform:scaleY(0)}
  .rd-flow-h span{left:-7px; top:0}
}

/* ---- RF-2.0 /how-to-use --------------------------------------------------
   The hero figure is the map's own top strip, drawn in the map's own tokens,
   with the labels a driver will actually see. No mock phone, no fake data. */
.hu-strip{margin:0; padding:var(--rf-5); background:var(--rf-surface); border:1px solid var(--rf-line); border-radius:var(--rf-r-panel)}
.hu-panel{display:grid; gap:var(--rf-3)}
.hu-tabs{display:grid; grid-template-columns:1fr 1fr; padding:4px; border:1px solid var(--rf-line); border-radius:var(--rf-r-chip)}
.hu-tabs span{display:grid; place-items:center; height:34px; border-radius:calc(var(--rf-r-chip) - 3px); font:600 var(--rf-t-sm)/1 var(--rf-sans); color:var(--rf-ink-2)}
.hu-tabs .is-on{background:rgba(127,127,127,.10); color:var(--rf-ink); box-shadow:inset 0 0 0 1px var(--rf-line-strong)}
.hu-bar{display:flex; gap:var(--rf-2)}
.hu-search{flex:1; display:flex; align-items:center; height:44px; padding:0 var(--rf-4); border:1px solid var(--rf-line-strong); border-radius:var(--rf-r-chip); color:var(--rf-ink-3); font-size:var(--rf-t-sm)}
.hu-go{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--rf-r-chip); background:var(--rf-brand); color:var(--rf-brand-ink)}
.hu-go .rf-i{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2}
.hu-loc{display:grid; place-items:center; height:40px; border:1px solid var(--rf-line-strong); border-radius:var(--rf-r-chip); font:600 var(--rf-t-sm)/1 var(--rf-sans); color:var(--rf-ink)}
.hu-acts{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px}
.hu-act{grid-column:span 2; display:grid; place-items:center; height:32px; border-radius:var(--rf-r-chip); font:500 12px/1 var(--rf-sans); color:var(--rf-ink-3)}
.hu-act--main{grid-column:span 3; height:38px; border:1px solid var(--rf-line-strong); font-weight:600; font-size:13px; color:var(--rf-ink)}
.hu-listh{margin:var(--rf-1) 0 0; font:500 11px/1 var(--rf-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--rf-ink-3)}
.hu-chips{display:flex; flex-wrap:wrap; gap:var(--rf-2)}
.hu-chip{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--rf-line); font:600 13px/1 var(--rf-sans); color:var(--rf-ink-2)}
.hu-chip.is-on{border-color:color-mix(in srgb, var(--rf-brand) 45%, transparent); background:var(--rf-brand-dim); color:var(--rf-ink)}
.hu-chip i{width:8px; height:8px; border-radius:50%}
.hu-chip .f-station{background:var(--pin-station)} .hu-chip .f-ev{background:var(--pin-ev)} .hu-chip .f-lpg{background:var(--pin-lpg)}
.hu-chip .f-cng{background:var(--pin-cng)} .hu-chip .f-lng{background:var(--pin-lng)}
.hu-callouts{list-style:none; margin:var(--rf-5) 0 0; padding:var(--rf-4) 0 0; border-top:1px solid var(--rf-line); display:grid; grid-template-columns:1fr 1fr; gap:var(--rf-3) var(--rf-5)}
.hu-callouts b{display:block; font-size:var(--rf-t-sm); color:var(--rf-ink)}
.hu-callouts span{font-size:var(--rf-t-sm); color:var(--rf-ink-2)}
.hu-strip .rd-note{margin-top:var(--rf-4)}

.hu-fills{list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--rf-2) var(--rf-5)}
.hu-fills li{display:flex; align-items:center; gap:var(--rf-3); font-size:var(--rf-t-sm); color:var(--rf-ink)}
.hu-rings b{display:block; font-size:16px; color:var(--rf-ink); margin-bottom:2px}
.hu-rings .hu-rings-foot{display:block; grid-template-columns:none; padding-top:var(--rf-4)}

.hu-form{margin:0}
.hu-form-in{padding:var(--rf-5); background:var(--rf-surface); border:1px solid var(--rf-line); border-radius:var(--rf-r-panel); max-width:420px}
.hu-form-h{font:600 11px/1 var(--rf-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--rf-ink-3); margin:0 0 var(--rf-2)}
.hu-form-h + .hu-seg + .hu-form-h{margin-top:var(--rf-4)}
.hu-seg{display:flex; gap:6px}
.hu-seg span{height:40px; min-width:64px; display:grid; place-items:center; padding:0 14px; border:1px solid var(--rf-line-strong); border-radius:var(--rf-r-chip); font-size:var(--rf-t-sm); color:var(--rf-ink-2)}
.hu-seg span.is-on{border-color:var(--rf-brand); color:var(--rf-ink); background:var(--rf-brand-dim)}
.hu-seg + .hu-form-h{margin-top:var(--rf-4)}
.hu-send{display:grid; place-items:center; height:44px; margin-top:var(--rf-5); border:1px solid color-mix(in srgb, var(--rf-brand) 50%, transparent); border-radius:var(--rf-r-chip); color:var(--rf-brand); font-weight:650; font-size:var(--rf-t-sm)}
.hu-after{display:flex; align-items:center; gap:8px; margin:var(--rf-4) 0 0; padding-top:var(--rf-3); border-top:1px dashed var(--rf-line); font:500 12px/1.3 var(--rf-mono); color:var(--rf-ink-2)}
.hu-after i{width:10px; height:10px; border-radius:50%; border:2px solid var(--rf-ok)}
.hu-form .rd-note{margin-top:var(--rf-3)}

.hu-acct{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--rf-line); max-width:760px}
.hu-acct > div{padding:var(--rf-5) var(--rf-6) var(--rf-5) 0}
.hu-acct > div + div{border-left:1px solid var(--rf-line); padding-left:var(--rf-6)}
.hu-acct-h{font:600 11px/1 var(--rf-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--rf-ink-3); margin:0 0 var(--rf-3)}
.hu-acct ul{margin:0; padding-left:18px; display:grid; gap:6px; color:var(--rf-ink-2); font-size:var(--rf-t-body)}
@media (max-width:760px){
  .hu-callouts, .hu-fills{grid-template-columns:1fr}
  .hu-acct{grid-template-columns:1fr}
  .hu-acct > div + div{border-left:0; border-top:1px solid var(--rf-line); padding-left:0}
}
.rd-htu .rd-hero .rd-lead{margin-top:var(--rf-5)}

/* ==========================================================================
   RF-FUEL-KIT (24 September 2026). Replaces RF-ROAD-KIT the same week: the
   yellow car and the chequered flag read as a TAXI, the owner said, and asked
   for a filling-station look instead. He chose "the best one"; so:

     steps       our logo's DROP hops from plate to plate; where it lands it
                 splashes and the plate fills with fuel, a small wave on top;
                 behind it the dotted line becomes a yellow fuel line; in the
                 last plate the drop settles and the plate becomes the logo
     chapters    the home page's spine is a FUEL HOSE that fills as you read;
                 each chapter marker is a sight glass that fills when the fuel
                 reaches it; the last one is the pump
     A to B      the route drawing is a hose from A to the pump at B, the stop
                 on it is a sight glass

   Nothing loops forever: every motion plays once, or follows the scroll, so a
   long page costs no paint while it is still. Reduced motion or no script:
   everything is drawn full and still. */
.rd{--rd-node:30px; --rk-lane:var(--rf-mark,#FFC928); --rk-rim:var(--rf-ink,#16181D); --rk-face:var(--rf-surface,#fff);
  --rk-tube:#EEF0F2;
  --rk-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='64' viewBox='0 0 24 64'%3E%3Cpath d='M0 5 Q6 0 12 5 T24 5 V64 H0Z' fill='%23FFC928'/%3E%3C/svg%3E");
  --rk-drop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' fill='%2316181D' d='M46.97 19.25A3.5 3.5 0 0 1 53.03 19.25L70.78 50A24 24 0 1 1 29.22 50ZM50 53a9 9 0 1 0 0 18 9 9 0 1 0 0-18Z'/%3E%3C/svg%3E");
  --rk-pump:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181D' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16M3.5 21h13M5 10h10M15 8l3 2.5v7a1.5 1.5 0 0 0 3 0V9l-2.5-3'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .rd{--rk-rim:#F2F1EC; --rk-face:#1B1C1F; --rk-tube:#2A2B30}

/* ---- steps: a dotted line, numbered plates ---------------------------- */
.rd .rd-route::before{left:calc(var(--rd-node) / 2 - 1px); width:2px; top:18px; bottom:18px; border-radius:2px;
  background:repeating-linear-gradient(180deg,var(--rk-rim) 0 3px,transparent 3px 9px); opacity:.4}
.rd .rd-route--h::before, .rd .gd-start::before{left:0; right:0; top:calc(var(--rd-node) / 2 - 1px); bottom:auto;
  width:auto; height:2px; background:repeating-linear-gradient(90deg,var(--rk-rim) 0 3px,transparent 3px 9px); opacity:.4}
@media (max-width:860px){
  .rd .rd-route--h::before, .rd .gd-start::before{left:calc(var(--rd-node) / 2 - 1px); right:auto; top:18px; bottom:18px;
    width:2px; height:auto; background:repeating-linear-gradient(180deg,var(--rk-rim) 0 3px,transparent 3px 9px)}
}
.rk-paint{position:absolute; pointer-events:none; z-index:1; background:var(--rk-lane); border-radius:3px}
.rk-paint.v{width:4px} .rk-paint.h{height:4px}

.rd .rd-route, .rd .gd-start{counter-reset:rk}
.rd .rd-stop, .rd .gd-start > li{counter-increment:rk}
/* the plate: a transparent frame with the number (::before) over the fuel (::after) */
.rd .rd-stop::before, .rd .gd-start > li::before{content:counter(rk); z-index:4; box-sizing:border-box;
  width:var(--rd-node); height:var(--rd-node); border-radius:8px; border:2px solid var(--rk-rim); background:transparent;
  color:var(--rk-rim); font:600 12px/calc(var(--rd-node) - 4px) var(--rf-mono); text-align:center; letter-spacing:0}
.rd .rd-stop--open::before{border-style:dashed}
.rd .rd-stop::after, .rd .gd-start > li::after{content:""; position:absolute; z-index:3; box-sizing:border-box;
  width:var(--rd-node); height:var(--rd-node); border-radius:8px; pointer-events:none;
  background:var(--rk-wave) 0 -8px/24px 64px repeat-x, var(--rk-face);
  transition:background-position-y .6s var(--rf-ease-enter,ease)}
.rd .rd-stop::after{left:calc(-1 * var(--rd-rail)); top:5px}
.rd .rd-route--h .rd-stop::after, .rd .gd-start > li::after{left:0; top:calc(-1 * (var(--rd-node) + var(--rf-5)))}
@media (max-width:860px){
  .rd .rd-route--h .rd-stop::after, .rd .gd-start > li::after{left:calc(-1 * var(--rd-rail)); top:5px}
}
/* with script: empty until the drop lands */
html.rd-js .rd .rk-on > li::after{background-position-y:34px}
html.rd-js .rd .rk-on > li.rk-lit::after{background-position-y:-8px; animation:rkWave .7s linear 1}
@keyframes rkWave{from{background-position-x:0} to{background-position-x:24px}}
/* the last plate is the logo: fuel all the way up, our drop in it */
.rd .rd-stop:last-of-type::before, .rd .gd-start > li:last-of-type::before{content:""; background:var(--rk-drop) 50% 52%/19px 19px no-repeat;
  border-color:#16181D}
html.rd-js .rd .rk-on > li:last-of-type:not(.rk-lit)::before{content:counter(rk); background:none; border-color:var(--rk-rim)}
.rd .rd-stop.rk-lit::before, .rd .gd-start > li.rk-lit::before{border-color:#16181D; color:#16181D}

/* the drop and its splash */
.rk-drop{position:absolute; left:0; top:0; width:22px; height:24px; margin:-12px 0 0 -11px; z-index:5; pointer-events:none;
  opacity:0; transition:opacity .2s ease; will-change:transform}
.rk-drop.is-on{opacity:1}
.rk-drop svg{display:block; width:100%; height:100%; overflow:visible}
.rk-splash{position:absolute; z-index:5; width:0; height:0; pointer-events:none}
.rk-splash i{position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--rk-lane);
  border:1.5px solid #16181D; animation:rkSplash .55s var(--rf-ease-enter,ease-out) forwards}
.rk-splash i:nth-child(1){--dx:-18px; --dy:-16px} .rk-splash i:nth-child(2){--dx:0px; --dy:-24px} .rk-splash i:nth-child(3){--dx:18px; --dy:-16px}
.rk-splash b{position:absolute; left:-10px; top:-3px; width:20px; height:6px; border-radius:50%; border:2px solid var(--rk-lane);
  animation:rkRipple .5s ease-out forwards}
@keyframes rkSplash{0%{transform:translate(0,0) scale(1); opacity:1} 60%{opacity:1} 100%{transform:translate(var(--dx),calc(var(--dy) + 14px)) scale(.4); opacity:0}}
@keyframes rkRipple{from{transform:scale(.5); opacity:1} to{transform:scale(2.6); opacity:0}}

/* ---- chapters: a fuel hose that fills as you read ---------------------- */
.rd-journey::before{left:calc(var(--rd-spine) - 6px); width:14px; box-sizing:border-box; border-radius:8px;
  background:var(--rk-tube); border:2px solid var(--rk-rim); transform:none}
.rd-journey::after{left:calc(var(--rd-spine) - 2px); width:6px; border-radius:3px; transform:none;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0 1.2px,transparent 1.6px) 50% 0/6px 26px,
             radial-gradient(circle,rgba(255,255,255,.7) 0 .9px,transparent 1.3px) 20% 11px/6px 37px,
             var(--rk-lane);
  clip-path:inset(0 0 calc(100% - var(--rd-prog) * 100%) 0)}
.rd .rd-ch-n span{border-radius:50%; border:3px solid var(--rk-rim); color:var(--rk-rim); font-family:var(--rf-mono);
  background:linear-gradient(var(--rk-lane),var(--rk-lane)) 50% 100%/100% 100% no-repeat, var(--rk-face);
  transition:background-size .5s var(--rf-ease-enter,ease)}
html.rd-js .rd .rd-ch:not(.is-reached) .rd-ch-n span{background-size:100% 0%, auto}
html.rd-js .rd .rd-ch.is-reached .rd-ch-n span{color:#16181D; border-color:#16181D;
  background:linear-gradient(var(--rk-lane),var(--rk-lane)) 50% 100%/100% 100% no-repeat, var(--rk-face)}
html.rd-js .rd .rd-ch.is-reached .rd-ch-n--end span{color:transparent;
  background:var(--rk-pump) 50% 50%/18px 18px no-repeat, linear-gradient(var(--rk-lane),var(--rk-lane)) 50% 100%/100% 100% no-repeat, var(--rk-face)}
.rd .rd-ch-n--end span{color:transparent; box-shadow:none; border-radius:8px;
  background:var(--rk-pump) 50% 50%/18px 18px no-repeat, linear-gradient(var(--rk-lane),var(--rk-lane)) 50% 100%/100% 100% no-repeat, var(--rk-face)}
html.rd-js .rd .rd-ch:not(.is-reached) .rd-ch-n--end span{background-size:18px 18px, 100% 0%, auto}
:root[data-theme="dark"] .rd{--rk-pump-idle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F1EC' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16M3.5 21h13M5 10h10M15 8l3 2.5v7a1.5 1.5 0 0 0 3 0V9l-2.5-3'/%3E%3C/svg%3E")}
html.rd-js .rd .rd-ch:not(.is-reached) .rd-ch-n--end span{background-image:var(--rk-pump-idle,var(--rk-pump)), linear-gradient(var(--rk-lane),var(--rk-lane))}

/* A paper band stays paper in the dark theme (RF-PAPER-IS-A-SURFACE-NOT-A-
   THEME), so the kit inside one keeps its daylight colours: the dark ones
   drew black plates and a black hose on white paper. */
:root[data-theme="dark"] .rd .rfs-paper{--rk-rim:#16181D; --rk-face:#fff; --rk-tube:#EEF0F2; --rk-pump-idle:var(--rk-pump)}

@media (prefers-reduced-motion:reduce){
  .rk-drop, .rk-splash{display:none}
  .tp-stop, .tp-stripe, .tp-lamp, .tp-car, .rd-trip-tag{transition:none}
  .rd .rd-stop::after, .rd .gd-start > li::after, .rd .rd-ch-n span{transition:none !important; animation:none !important}
}

/* the how-it-works diagram (rd-flow): the same fuel line — a tube that fills
   left to right, a sight glass per step that fills as the fuel reaches it */
.rd .rd-flow-col::before{top:-3px; height:8px; box-sizing:border-box; border:2px solid var(--rk-rim); border-radius:6px; background:var(--rk-tube)}
.rd .rd-flow-col::after{top:0; height:2px; background:var(--rk-lane); box-shadow:0 0 0 1px var(--rk-lane)}
.rd .rd-flow-h span{top:-11px; width:24px; height:24px; box-sizing:border-box; border-radius:50%; border:3px solid var(--rk-rim);
  background:linear-gradient(var(--rk-lane),var(--rk-lane)) 50% 100%/100% 100% no-repeat, var(--rk-face); z-index:2;
  font:600 11px/18px var(--rf-mono); text-align:center; color:#16181D; letter-spacing:0; display:block}
html.rd-js .rd .rd-flow:not(.is-in) .rd-flow-h span{background-size:100% 0%, auto}
html.rd-js .rd .rd-flow .rd-flow-h span{transition:background-size .35s var(--rf-ease-enter,ease)}
html.rd-js .rd .rd-flow.is-in .rd-flow-col:nth-child(2) .rd-flow-h span{transition-delay:.32s}
html.rd-js .rd .rd-flow.is-in .rd-flow-col:nth-child(3) .rd-flow-h span{transition-delay:.64s}
html.rd-js .rd .rd-flow.is-in .rd-flow-col:nth-child(4) .rd-flow-h span{transition-delay:.96s}
@media (max-width:900px){
  .rd .rd-flow-col::before{left:-3px; top:0; bottom:0; width:8px; height:auto}
  .rd .rd-flow-col::after{left:0; width:2px; top:0; bottom:0; height:auto}
  .rd .rd-flow-h span{left:-11px; top:-2px}
}
@media (prefers-reduced-motion:reduce){ .rd .rd-flow-h span{transition:none !important} }

/* ==========================================================================
   RF-RU-EXCHANGE (24 September 2026). Russia on /fuel-prices: the exchange
   today over the pumps, then every region. ru-board.js fills it. A price that
   rose is the "out" colour and one that fell the "ok" colour — a movement is
   data, never the brand yellow.
   ========================================================================== */
.ru-board{margin-top:var(--rf-7)}
.ru-regions{margin-top:var(--rf-6)}
.ru-mid{border-top:1px solid var(--rf-line)}
.ru-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.ru-tile{display:flex; flex-direction:column; gap:6px; min-width:0; padding:var(--rf-5); border-left:1px solid var(--rf-line)}
.ru-tile:first-child{border-left:0}
.ru-tn{font-family:var(--rf-mono); font-size:var(--rf-t-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--rf-ink-2)}
.ru-tp{display:flex; align-items:baseline; gap:6px; min-height:34px}
.ru-big{font-family:var(--rf-mono); font-size:28px; line-height:1.1; font-weight:600; color:var(--rf-ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.ru-tp small{font-family:var(--rf-mono); font-size:12px; color:var(--rf-ink-3)}
.ru-x{display:flex; flex-direction:column; gap:6px}
.ru-ch{font-family:var(--rf-mono); font-size:12px; font-weight:600; white-space:nowrap}
.ru-up{color:var(--rf-out)}
.ru-dn{color:var(--rf-ok); color:color-mix(in srgb, var(--rf-ok) 82%, #000)}   /* RF-TEXT-GREEN */
.ru-eq{color:var(--rf-ink-3)}
.ru-sp{display:block; width:100%; max-width:180px; height:30px}
.ru-sp polyline{fill:none; stroke:var(--rf-ink); stroke-width:1.75; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.ru-sub{font-size:var(--rf-t-sm); color:var(--rf-ink-2)}
.ru-also{display:block; margin-top:4px; font-family:var(--rf-mono); font-size:12px; color:var(--rf-ink-3)}
.ru-find{display:flex; flex-wrap:wrap; align-items:center; gap:var(--rf-3); padding:var(--rf-4) var(--rf-5); border-bottom:1px solid var(--rf-line)}
.ru-q{flex:1 1 260px; min-width:0; height:40px; padding:0 12px; border:1px solid var(--rf-line-strong); border-radius:8px;
  background:var(--rf-surface); color:var(--rf-ink); font:inherit; font-size:15px}
.ru-q:focus{outline:2px solid var(--rf-brand); outline-offset:1px}
.ru-sort{display:flex; flex-wrap:wrap; gap:8px}
.ru-table tbody th{width:auto; font-size:15px; font-weight:500}
.ru-table td.ru-n{white-space:nowrap}
.ru-table td.ru-n b{font-family:var(--rf-mono); font-size:15px; font-weight:600}
.ru-table td.ru-n .ru-ch{margin-left:8px; font-size:11px; font-weight:500}
.ru-table td, .ru-table tbody th{padding-top:12px; padding-bottom:12px}
@media (max-width:640px){ .ru-table td.ru-n .ru-ch{display:block; margin:2px 0 0} }
.ru-table tr.ru-dist th, .ru-table tr.ru-dist td{background:var(--rf-raised); font-weight:650}
.ru-table tr.ru-dist th{font-weight:650}
.ru-f{display:grid; gap:var(--rf-3); justify-items:start}
@media (max-width:860px){
  .ru-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ru-tile:nth-child(3){border-left:0}
  .ru-tile:nth-child(n+3){border-top:1px solid var(--rf-line)}
  .ru-big{font-size:24px}
}
@media (max-width:480px){
  .ru-tile{padding:var(--rf-4)}
  .ru-big{font-size:21px}
  .ru-table th, .ru-table td{padding-left:10px; padding-right:10px}
  .ru-table tbody th{font-size:14px}
  .ru-table td.ru-n b{font-size:14px}
}
.ru-scroll{overflow-x:auto}

/* RF-EU-WEEK (26 September 2026): /fuel-prices/europe. The week's EU averages,
   the country table with a 26-week sparkline, and a two-year chart. Series are
   told apart by weight and dash, not by colour: petrol is the ink line, diesel
   the dashed one, the EU average a wide faint band behind a picked country.
   Red and green are kept for what they mean on this site, a price that went up
   or down, and nothing else. */
.rd-ew{margin-top:var(--rf-6)}
.rd-ew-when{font-family:var(--rf-mono); font-size:var(--rf-t-label); letter-spacing:.08em; text-transform:uppercase; color:var(--rf-ink-3); margin:0 0 var(--rf-4)}
.rd-ew-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--rf-4)}
.rd-ew-stat{border:1px solid var(--rf-line); border-radius:var(--rf-r-card,10px); padding:var(--rf-5); background:var(--rf-surface)}
.rd-ew-stat p{margin:0}
.rd-ew-stat-l{font-size:var(--rf-t-sm); color:var(--rf-ink-2)}
.rd-ew-stat .rd-ew-stat-v{margin:6px 0 4px; font-size:clamp(28px,4vw,40px); font-weight:600; letter-spacing:-.02em; color:var(--rf-ink)}
.rd-ew-stat-v .rd-num{font-size:inherit; font-family:var(--rf-text)}
.rd-ew-stat-v small{font-size:.45em; font-weight:500; color:var(--rf-ink-3); margin-left:4px}
.rd-ew-stat-c{font-size:var(--rf-t-sm); color:var(--rf-ink-3)}
.rd-ew-chg{font-family:var(--rf-mono); font-size:12.5px; font-weight:500; white-space:nowrap; color:var(--rf-ink-3)}
.rd-ew-chg.up{color:var(--rf-out)}
.rd-ew-chg.dn{color:var(--rf-ok); color:color-mix(in srgb, var(--rf-ok) 82%, #000)}
html[data-theme="dark"] .rd-ew-chg.dn{color:var(--rf-ok)}
.rd-ew-sep{color:var(--rf-ink-3); margin:0 4px}
.rd-ew-says{margin:var(--rf-5) 0 var(--rf-7); max-width:72ch}
.rd-ew-says p{margin:0 0 var(--rf-3); color:var(--rf-ink-2)}
.rd-ew h2{margin-top:var(--rf-7)}
.rd-ew-table td{white-space:nowrap}
.rd-ew-table .rd-ew-chg{margin-left:6px}
.rd-ew-flag{display:inline-block; margin-left:6px; font-family:var(--rf-mono); font-size:11px; color:var(--rf-ink-3); font-weight:500}
.rd-ew-spark{display:block; overflow:visible}
.rd-ew-ln-p{fill:none; stroke:var(--rf-ink); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round}
.rd-ew-ln-d{fill:none; stroke:var(--rf-ink-3); stroke-width:1.6; stroke-dasharray:4 3; stroke-linejoin:round}
.rd-ew-ln-eu{fill:none; stroke:var(--rf-line); stroke-width:7; stroke-linejoin:round; stroke-linecap:round}
.rd-ew-chart .rd-ew-ln-p{stroke-width:2.2}
.rd-ew-chart .rd-ew-ln-d{stroke-width:2}
.rd-ew-chartbox{border:1px solid var(--rf-line); border-radius:var(--rf-r-card,10px); padding:var(--rf-4); background:var(--rf-surface)}
.rd-ew-chart{display:block; width:100%; height:auto}
.rd-ew-grid{stroke:var(--rf-line); stroke-width:1}
.rd-ew-ax{font-family:var(--rf-mono); font-size:11px; fill:var(--rf-ink-3)}
.rd-ew-legend{list-style:none; display:flex; flex-wrap:wrap; gap:6px 20px; margin:0 0 var(--rf-3); padding:0; font-size:var(--rf-t-sm); color:var(--rf-ink-2)}
.rd-ew-legend li{display:inline-flex; align-items:center; gap:8px}
.rd-ew-key{display:inline-block; width:22px; height:0; border-top:2px solid var(--rf-ink)}
.rd-ew-key.rd-ew-ln-d{border-top:2px dashed var(--rf-ink-3)}
.rd-ew-key.rd-ew-ln-eu{border-top:6px solid var(--rf-line)}
.rd-ew-pick{display:flex; align-items:center; gap:10px; margin:0 0 var(--rf-4)}
.rd-ew-pick label{font-size:var(--rf-t-sm); color:var(--rf-ink-2)}
.rd-ew-pick select{font:inherit; font-size:var(--rf-t-sm); padding:8px 12px; border:1px solid var(--rf-line); border-radius:8px; background:var(--rf-surface); color:var(--rf-ink); min-width:200px}
@media (max-width:640px){
  .rd-ew-stats{grid-template-columns:minmax(0,1fr)}
  .rd-ew-table td{white-space:normal}
  .rd-ew-sp{display:none}
  .rd-ew-chartbox{padding:var(--rf-2)}
}
.rd-ew-notes{list-style:none; margin:var(--rf-5) 0; padding:0; max-width:74ch; display:grid; gap:var(--rf-4)}
.rd-ew-notes li{color:var(--rf-ink-2); line-height:1.6}
.rd-ew-notes strong{color:var(--rf-ink)}
.rd-more-row{margin:var(--rf-3) 0 0}