/* THE RIGHT COLUMN, ON EVERY PAGE (founder 25.09: «додати правий край до всіх сторінок … там повинен
   бути промо, щоб встановити застосунок, і 2 кнопки на стори»; «щоб праве меню було і для карти теж в
   десктопі, щоб завжди можна було бачити промо»; «починати нижче за тайтл»).

   Built into every page by build-tool.py: <main><article>…</article><aside class="side"><div
   class="side-in"> the app card, then the page's contents </div></aside></main>. On a wide screen the
   whole page becomes two columns from the title down — the calculator, the map and the article on the
   left, this column on the right, sticky, so the card is on screen whatever is being read. Narrower,
   the column sits beside the article only. On a phone it is not shown at all: there the same two
   store buttons stand straight under the calculator's button, and the contents list was never shown.

   Every page's own palette is used — the article pages, the calculator and the legal pages name their
   colours differently, so each value falls back to the legal pages' names (--fg, --mid, --faint,
   --accent), and each font to a system stack: `inherit` is not a value inside the font shorthand, and a
   fallback of it silently threw the whole rule away on the legal pages. ASCII only: a glyph in a stylesheet served without a charset turns into mojibake. */

/* --- the store buttons: always two equal halves, the line under both, close to what is above --- */
.stores{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:stretch}
.stores .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0;
  padding:11px 8px;border-radius:999px;border:1.5px solid var(--ink,var(--fg,#111));
  color:var(--ink,var(--fg,#111));background:transparent;font:600 15px/1 var(--body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Both stores alike (founder 25.09: «чому 2 кнопки різні»): the pages mark the iPhone link `btn primary`
   and the page's own .btn.primary filled it, so one store looked more important than the other. */
.stores .btn.primary{background:transparent;border-color:var(--ink,var(--fg,#111));color:var(--ink,var(--fg,#111))}
/* The store buttons are the page's ink, not coral (founder 25.09: «всі кнопки гугл і епл білими»): white
   on the dark theme, near-black on the light one. Coral stays for the one action that prices a drive. */
.stores .btn svg{flex:none}
.stores .hint{grid-column:1/-1;margin:0 2px;font-size:13px;line-height:1.45;color:var(--muted,var(--faint))}
.tool .actions + .stores{margin:2px 0 4px}

/* --- the app card --- */
.side-in{display:grid;gap:16px}
.promo{display:grid;gap:8px;padding:16px 16px 14px;border-radius:18px;
  background:var(--card,rgba(127,127,127,.06));border:1px solid var(--line,rgba(127,127,127,.2))}
.promo .k{font:700 11px/1 var(--body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--brand,var(--accent,#F4451C))}
.promo b{font:700 20px/1.15 var(--display,var(--body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif));color:var(--ink,var(--fg))}
.promo p{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2,var(--mid))}
.promo .stores{margin-top:4px}
.promo .stores .btn{padding:10px 6px;font-size:14px}

/* --- the contents, the same card on pages that had none of their own (the legal pages) --- */
.side .toc{position:static;padding:16px 18px;border-radius:18px;
  background:var(--card,rgba(127,127,127,.06));border:1px solid var(--line,rgba(127,127,127,.2))}
.side .toc b{display:block;margin-bottom:10px;font:700 12px/1 var(--body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--muted,var(--faint))}
.side .toc a{display:block;padding:5px 0;border-bottom:1px solid var(--line,rgba(127,127,127,.2));font-size:14px;color:var(--ink-2,var(--mid));text-decoration:none}
.side .toc a:last-child{border:0}
.side .toc a:hover{color:var(--brand,var(--accent,#F4451C))}
/* The section being read, marked by side.js as the page scrolls. */
.side .toc a{transition:color .15s ease}
.side .toc a.on{color:var(--ink,var(--fg));font-weight:700}
/* ...in the page's ink and heavier, not coral (founder 25.09: «секцію де ми зараз не кораловим а жирнішим
   просто білим»): the column already has coral on its buttons' page, and a second accent competed. */

/* --- the layout --- */
@media (max-width:900px){aside.side{display:none}}
@media (min-width:901px) and (max-width:1239px){
  main:has(> aside.side){display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:start}
  /* As tall as the article, or the card inside has nowhere to stick. */
  main > aside.side{align-self:stretch}
  .side-in{position:sticky;top:20px}
}
@media (min-width:1240px){
  /* The page's own blocks keep their order in the left column; the column starts under the title —
     beside the calculator, or the first thing after the heading — and runs to the end of the article. */
  .wrap:has(> main > aside.side){display:grid;grid-template-columns:minmax(0,1fr) 280px;column-gap:36px;align-items:start}
  .wrap:has(> main > aside.side) > *{grid-column:1;min-width:0}
  .wrap:has(> main > aside.side) > header,.wrap:has(> main > aside.side) > footer{grid-column:1 / -1}
  /* The title keeps the whole row — the column starts under it anyway (founder 25.09: «на всю строку
     заголовок, щоб його не било на 2 частини»). */
  .wrap:has(> main > aside.side) > .hero{grid-column:1 / -1}
  .wrap:has(> main > aside.side) > main{display:contents}
  main > aside.side{grid-column:2;grid-row:2 / span 40;align-self:stretch}
  .wrap:has(> .hero) > main > aside.side{grid-row:3 / span 40}
  .wrap:has(> .tool) > main > aside.side{margin-top:8px}
  /* The calculator needs the room the column takes from it. */
  body:has(.tool.shell) .wrap:has(> main > aside.side){max-width:1360px}
  .side-in{position:sticky;top:20px}
}
/* The title fills its row and wraps only what does not fit (founder 25.09: «щоб був не обрізаний, а не
   на одній строці»). The pages balance their h1 (text-wrap:balance), which cut a long title into two
   half-width lines that looked squeezed into the left half. */
@media (min-width:901px){.wrap:has(> main > aside.side) > .hero h1{text-wrap:wrap}}
/* ...and its size follows the row: the row's width over the title's own width in em (--fit, written
   into each page by build-tool.py from its title), never above the 62 px it was, never below 40 px -
   below that it wraps instead. Not where the hero splits into a title and an intro side by side. */
@media (min-width:901px){
  .wrap:has(> main > aside.side) > .hero{container-type:inline-size}
  .wrap:has(> main > aside.side) > .hero:not(:has(> .lede)) h1{font-size:clamp(40px, calc(100cqi / var(--fit, 1)), 62px)}
}
/* Every block runs to the end of its zone (founder 25.09: «вирівняй всі блоки по ширині, чому контент
   не йде до кінця своєї зони»). The pages cap the article at 70ch and the paragraph under the
   calculator at 68ch - a measure from before the column, which left a strip of nothing between the
   text and the column. Beside the column the article, and everything in it, takes the whole zone. */
@media (min-width:901px){
  main:has(> aside.side) > article,.wrap:has(> main > aside.side) > .lede.after{max-width:none}
  .wrap:has(> main > article.doc) > main > article.doc{max-width:none}
}
/* The legal pages are one narrow column of text: it keeps its measure, and the page widens by the
   width of the column rather than the text by the width of the page. */
.wrap:has(> main > article.doc){max-width:62rem}
article.doc{max-width:38rem}
/* The legal pages have no hero: their title opens the article, so the column steps down past it. */
@media (min-width:901px){.wrap > main > article.doc ~ aside.side{margin-top:4rem}}
@media (max-width:900px){.wrap:has(> main > article.doc){max-width:38rem}}

/* THE FOOTER'S SENTENCES AND ITS MENU (founder 25.09: «футер вирівняй правильно і тексти всередині»).
   The pages space their footer menu with `footer a{margin-right:14px}`, and the same rule hit the links
   inside the sources sentence: «Statens vegvesen   (NVDB   ), Entur   ,». Inside a sentence a link
   takes no margin; the menu - the footer's last block - gets its spacing from a gap instead. */
footer > :not(:last-child) a{margin-right:0}
footer > :last-child{display:flex;flex-wrap:wrap;gap:6px 18px}
footer > :last-child a{margin-right:0}
footer > div:not(.disc){flex:1 0 100%;line-height:1.6}

/* A PHONE'S TITLE BLOCK (founder 25.09: «блок з h1 і дописом згори має завеликі відступи»): 40 px above
   the eyebrow and 48 below the title on a 390 px screen was a third of the first view. */
@media (max-width:640px){
  .wrap > .hero{padding:18px 0 14px}
  .wrap > .hero h1{margin-bottom:0}
  .wrap > .hero .eyebrow{margin-bottom:8px}
}