/* ============================================================================
   RF-FLOW — the homepage's grammar, made available to every page.
   21 September 2026.
   ============================================================================
   The owner, after the homepage was rebuilt: "вот такой стиль нужно сделать по
   всему сайту во всех вкладках" — then listed twenty-four of them.

   WHAT WAS MEASURED FIRST, across those pages:

       guides            76 cards        account   12
       map               10              how-it-works 7
       how-to-use         7              about      6
       chat               6              rewards    5
       drivers            4
       privacy, cookies, terms, disclaimer, data-accuracy,
       community-guidelines, editorial-policy      0 cards each

   Two different problems wearing one complaint. Nine pages have the card wall
   the homepage just lost. Seven have the opposite: an unbroken slab of legal
   prose with no scale, no rhythm and nothing to hold the eye. "Make it like the
   homepage" means removing boxes on the first group and giving type and space
   to the second.

   WHY A NEW FILE. The homepage's version of this lives in home.css, which only
   the homepage loads. Copying it into core-pages.css and site.css would be the
   fourth time this project has solved one problem in three places — the six
   navs, the thirteen footers, the three tab bars, the two Google blocks. One
   source, loaded everywhere, is the only arrangement that has ever held.

   WHAT THIS FILE MAY NOT DO. Same restriction shell.css took, for the same
   reason: it must be safe to load onto 537 pages that were laid out by
   site.css. So it styles ITS OWN classes and nothing else. No bare `h2`, no
   `section`, no `p`. A page adopts the grammar by using the classes; until it
   does, this file changes nothing about it.
   ========================================================================= */

/* ---- 1. the measures a flowing page is built from ------------------------ */
:root{
  /* The homepage's section rhythm, named so a page does not invent its own.
     Clamped, not fixed: 72px on a phone is a pause, 132px on a 2560 monitor is
     the same pause at that scale. */
  --rf-flow-gap:     clamp(72px, 9vw, 132px);
  --rf-flow-gap-sm:  clamp(48px, 6vw, 88px);
  /* Display sizes. These are deliberately larger than --rf-t-h1/h2 in
     shell.css, which size a page HEADER; these size a section that has to hold
     a whole idea on its own. */
  --rf-flow-h:       clamp(30px, 3.6vw, 54px);
  --rf-flow-h2:      clamp(26px, 2.8vw, 42px);
  --rf-flow-h3:      clamp(18px, 1.5vw, 23px);
}

/* ---- 2. a section that flows -------------------------------------------- */
/* No background change, no rule top and bottom. Separation is space and a
   change of composition — which is what made the homepage stop reading as
   rectangle / rectangle / rectangle. */
.rf-flow-sec{ padding-block:var(--rf-flow-gap); position:relative; }
.rf-flow-sec--tight{ padding-block:var(--rf-flow-gap-sm); }

.rf-flow-head{ max-width:24ch; margin-bottom:clamp(32px, 3.6vw, 56px); }
.rf-flow-head--wide{ max-width:34ch; }
.rf-flow-h{
  font-size:var(--rf-flow-h); line-height:1.06; letter-spacing:-.02em;
  margin:var(--rf-2) 0 0; text-wrap:balance; color:var(--rf-ink);
}
.rf-flow-h--sm{ font-size:var(--rf-flow-h2); line-height:1.1; }
.rf-flow-lead{
  margin:var(--rf-4) 0 0; color:var(--rf-ink-2); line-height:1.6;
  font-size:var(--rf-t-lead); max-width:52ch;
}

/* ---- 3. rows, which is what most "cards" should have been ---------------- */
/* A hairline ABOVE each row: it separates without enclosing, costs one line
   instead of four, and lets two rows sit side by side without either of them
   becoming a box. This is the shape the homepage's capabilities took. */
.rf-rows{ display:grid; }
.rf-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start;
  column-gap:var(--rf-5); row-gap:6px;
  padding:clamp(18px, 2vw, 28px) 0;
  border-top:1px solid var(--rf-line);
  text-decoration:none; color:inherit;
  transition:border-color var(--rf-fast);
}
.rf-rows > .rf-row:last-child{ border-bottom:1px solid var(--rf-line); }
.rf-row-k{
  grid-column:1; font-family:var(--rf-mono); font-size:var(--rf-t-label);
  letter-spacing:.08em; text-transform:uppercase; color:var(--rf-brand);
}
.rf-row-t{
  grid-column:1; font-size:var(--rf-flow-h3); line-height:1.26;
  font-weight:650; color:var(--rf-ink); letter-spacing:-.01em; text-wrap:balance;
}
.rf-row-p{
  grid-column:1; color:var(--rf-ink-2); font-size:var(--rf-t-sm);
  line-height:1.6; max-width:62ch;
}
/* The arrow spans both rows EXPLICITLY. An auto-placed child in a two-track
   grid lands wherever the previous item left off, which is how a homepage row
   sheared sideways earlier today. */
.rf-row-go{
  grid-column:2; grid-row:1 / -1; align-self:center;
  width:22px; height:22px; color:var(--rf-ink-3); flex:0 0 auto;
  transition:transform var(--rf-fast), color var(--rf-fast);
}
a.rf-row:hover{ border-top-color:var(--rf-brand-edge); }
a.rf-row:hover .rf-row-t{ color:var(--rf-brand); }
a.rf-row:hover .rf-row-go{ color:var(--rf-brand); transform:translateX(4px); }
a.rf-row:focus-visible{ outline:2px solid var(--rf-brand); outline-offset:4px; border-radius:4px; }
/* Two abreast where there is room, still without becoming tiles. */
@media (min-width:860px){
  .rf-rows--pair{ grid-template-columns:1fr 1fr; column-gap:clamp(32px,4vw,80px); }
  /* A paired row is half as wide, so its sentence wraps to three or four lines
     where a full-width row takes two. Measured on /map: four rows at the
     full-width padding came to 190px each and the section grew from 377px to
     731px — more than the readability was worth. Tighter block padding and a
     measure that suits the narrower column bring it back without putting the
     text in a box again. */
  .rf-rows--pair > .rf-row{ padding-block:clamp(14px, 1.5vw, 20px); }
  .rf-rows--pair .rf-row-p{ max-width:46ch; }
  /* In one column the last row closes the list with a bottom rule. In TWO
     columns the bottom row is two cells, so closing only :last-child leaves the
     left one open and the right one ruled — a lopsided finish that reads as a
     mistake. Both cells of the final row close it. */
  .rf-rows--pair > .rf-row:last-child{ border-bottom:0 }
  .rf-rows--pair > .rf-row:nth-last-child(-n+2){ border-bottom:1px solid var(--rf-line) }
}

/* ---- 4. reading: the legal and policy pages ------------------------------ */
/* These had no cards to remove. What they had was 2,000 words at one size with
   nothing to breathe against, which is its own kind of unreadable. Scale,
   measure and spacing — the same three tools, used the other way round. */
.rf-read{ max-width:var(--rf-wrap-rd); }
.rf-read > * + *{ margin-top:var(--rf-4); }
.rf-read h2{
  font-size:var(--rf-flow-h2); line-height:1.12; letter-spacing:-.015em;
  margin-top:var(--rf-flow-gap-sm); margin-bottom:var(--rf-3); color:var(--rf-ink);
  text-wrap:balance;
}
.rf-read h2:first-child{ margin-top:0 }
.rf-read h3{
  font-size:var(--rf-flow-h3); font-weight:600; color:var(--rf-ink);
  margin-top:var(--rf-7); margin-bottom:var(--rf-2);
}
.rf-read p, .rf-read li{ font-size:var(--rf-t-body); line-height:1.7; color:var(--rf-ink-2); }
.rf-read strong{ color:var(--rf-ink); font-weight:650 }
.rf-read a{ color:var(--rf-brand) }
.rf-read ul, .rf-read ol{ padding-left:var(--rf-5); display:grid; gap:var(--rf-2) }
/* A lead paragraph, which on a policy page is the one-sentence summary that
   tells a reader whether the next 2,000 words are for them. */
.rf-read-lead{
  font-size:var(--rf-t-lead) !important; color:var(--rf-ink) !important;
  line-height:1.55 !important; max-width:46ch;
}
/* The date a policy last changed is the single most load-bearing fact on it. */
.rf-read-stamp{
  font-family:var(--rf-mono); font-size:var(--rf-t-xs); color:var(--rf-ink-3);
  letter-spacing:.04em;
}

/* ---- 4b. the policy pages as documents (RF-2.0, 22 September 2026) --------
   The title sat at the page edge and the text in a centred 720px column, so
   every policy opened with two left edges. Now one grid: a rail that is the
   document's own table of contents, and the reading column beside it, with
   the title on the column's edge. A contract layout, not a landing page. */
.rf-legal-head .wrap, .rf-legal-grid{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,var(--rf-wrap-rd)); column-gap:var(--rf-9); justify-content:start }
.rf-legal-head .wrap > *{ grid-column:2 }
.rf-legal-head h1{ max-width:22ch; font-size:var(--rf-t-h1); text-wrap:balance }
.rf-legal-head .rf-read-stamp{ margin-top:var(--rf-3); font-size:var(--rf-t-xs) !important; font-family:var(--rf-mono) }
.rf-legal-toc{ grid-column:1; position:sticky; top:calc(var(--rf-nav-h,64px) + var(--rf-6)); align-self:start;
  border-top:1px solid var(--rf-line); padding-top:var(--rf-3) }
.rf-legal-toc-h{ font:600 11px/1 var(--rf-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--rf-ink-3); margin:0 0 var(--rf-3) }
.rf-legal-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:rfl }
.rf-legal-toc li{ counter-increment:rfl }
.rf-legal-toc a{ display:grid; grid-template-columns:22px 1fr; gap:6px; padding:5px 0; font-size:var(--rf-t-sm); line-height:1.35;
  color:var(--rf-ink-2); text-decoration:none }
.rf-legal-toc a::before{ content:counter(rfl, decimal-leading-zero); font:500 11px/1.6 var(--rf-mono); color:var(--rf-ink-3) }
.rf-legal-toc a:hover{ color:var(--rf-ink) }
.rf-legal-text{ grid-column:2; max-width:none }
.rf-legal-text h2{ scroll-margin-top:calc(var(--rf-nav-h,64px) + var(--rf-5)); font-size:var(--rf-flow-h3); margin-top:var(--rf-8); padding-top:var(--rf-5); border-top:1px solid var(--rf-line) }
.rf-legal-text h2:first-child{ border-top:0; padding-top:0 }
@media (max-width:960px){
  .rf-legal-head .wrap, .rf-legal-grid{ display:block }
  .rf-legal-toc{ position:static; margin-bottom:var(--rf-7) }
  .rf-legal-toc ol{ grid-template-columns:1fr }
}

/* ---- 5. editorial preview: one lead, then a short list ------------------- */
/* The shape the homepage's guides took. Four equal cards said four equal
   things; a lead plus a list says which one to read first. */
.rf-lead-read{ display:block; text-decoration:none; color:inherit; }
.rf-lead-read h3{
  font-size:clamp(23px, 2.5vw, 36px); line-height:1.12; letter-spacing:-.015em;
  margin:var(--rf-2) 0 var(--rf-3); color:var(--rf-ink); text-wrap:balance;
}
.rf-lead-read p{ margin:0 0 var(--rf-4); color:var(--rf-ink-2); line-height:1.6; max-width:46ch; }
.rf-kicker{
  display:block; font-family:var(--rf-mono); font-size:var(--rf-t-label);
  letter-spacing:.08em; text-transform:uppercase; color:var(--rf-ink-3);
}
.rf-lead-read:hover h3{ color:var(--rf-brand) }
.rf-more-reads{ list-style:none; margin:0; padding:0 }
.rf-more-reads li{ border-top:1px solid var(--rf-line) }
.rf-more-reads li:last-child{ border-bottom:1px solid var(--rf-line) }
.rf-more-reads a{ display:block; padding:var(--rf-4) 0; text-decoration:none; color:inherit }
.rf-more-reads h3{ margin:0 0 4px; font-size:clamp(16px,1.25vw,19px); font-weight:600; color:var(--rf-ink); line-height:1.3 }
.rf-more-reads a:hover h3{ color:var(--rf-brand) }
.rf-read-all a{ color:var(--rf-brand); font-weight:650; font-size:var(--rf-t-sm) }
/* The lead-plus-list split. Asymmetric on purpose: equal halves would make the
   lead story a peer of the list beside it, which is the thing the shape exists
   to deny. */
.rf-reads-split{ display:grid; gap:clamp(28px, 3.2vw, 56px); align-items:start; }
@media (min-width:900px){
  .rf-reads-split{ grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr); gap:clamp(40px,5vw,88px); }
}

/* ---- 6. motion, the same two signatures and no others ------------------- */
/* Drawn at rest by default. Nothing here is required for a page to look
   finished: if the observer never fires, the reader still sees everything. */
@media (prefers-reduced-motion:no-preference){
  .rf-flow-sec.is-drawn .rf-row{ animation:rfFlowIn var(--rf-mid) var(--rf-ease) both }
  @keyframes rfFlowIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
}
@media (prefers-reduced-motion:reduce){
  .rf-row,.rf-row-go{ transition:none }
  a.rf-row:hover .rf-row-go{ transform:none }
}

/* ---- the pin key, identical on both maps --------------------------------
   RF-ONE-PIN-LANGUAGE (21 September 2026). The swatch SHAPE carries the axis,
   which is what stops ten colours in one box from being ten equal facts:

       a filled disc  = the body of the pin  = what the station sells
       a hollow ring  = the ring on the pin  = what a driver last confirmed

   Same two shapes the homepage key uses. Written here rather than in map.html
   so the two keys cannot drift — which is the failure this whole day has been
   about. */
.legend-fill{
  width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.28);
}
.legend-ring{
  width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  background:transparent; border:2.5px solid currentColor;
}

/* RF-2.0: the source table on /data-accuracy-policy. Four columns on a desktop,
   a labelled stack on a phone; hairlines, no boxes. */
.rf-src-table{ display:grid; border-top:1px solid var(--rf-line); margin-top:var(--rf-4) }
.rf-src-row{ display:grid; grid-template-columns:1.3fr 1.3fr 1fr 1.2fr; gap:var(--rf-4); padding:var(--rf-4) 0; border-bottom:1px solid var(--rf-line) }
.rf-src-row span{ font-size:var(--rf-t-sm); line-height:1.5; color:var(--rf-ink-2) }
.rf-src-row b{ color:var(--rf-ink); font-weight:600 }
.rf-src-head span{ font:600 11px/1.3 var(--rf-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--rf-ink-3) }
@media (max-width:760px){
  .rf-src-row{ grid-template-columns:1fr; gap:var(--rf-1) }
  .rf-src-head{ display:none }
  .rf-src-row span:nth-child(n+2)::before{ display:block; font:600 10.5px/1.6 var(--rf-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--rf-ink-3) }
  .rf-src-row span:nth-child(2)::before{ content:"Source" }
  .rf-src-row span:nth-child(3)::before{ content:"How current" }
  .rf-src-row span:nth-child(4)::before{ content:"Cannot tell you" }
}