/* =============================================================================
   avtomaslo.info  -  site stylesheet
   -----------------------------------------------------------------------------
   Port of design/prototype/prototype.css (1:1, see the table of contents
   below). Load AFTER public/css/tokens.css, which is a byte-identical copy of
   design/tokens.css and is linked separately (no @import).

   Deltas against the prototype, all required by the view models of
   BUILD-PLAN.md section 7 and listed in section 8.3:
     - section 0 (new): self-hosted @font-face declarations;
     - list numerals come from the templates (rows can be unnumbered), so the
       CSS counters on .reading-list, .steps and .toc--numbered were replaced
       by real DOM text in .reading-list__num / .steps__num / .toc__num;
     - section 15 (new): .note, .reading-list--compact, .link-list current
       state and the handful of layout rules the non-prototyped page types
       (section hub, korotko, search, error) need.
   ============================================================================ */

/* =============================================================================
   0. Fonts (self-hosted, docs/DESIGN.md section 4)
   -----------------------------------------------------------------------------
   The @font-face rules live in public/css/fonts.css, which the head partial
   links only when public/fonts holds the three woff2 files. See that file and
   public/fonts/README.md.
   ============================================================================ */

/* =============================================================================
   avtomaslo.info  -  prototype stylesheet
   -----------------------------------------------------------------------------
   Hand-written, framework-free, mobile-first. Implementers port this 1:1 into
   public/css/ (suggested split: base.css, layout.css, components.css,
   prose.css, pages.css). Every colour/size comes from ../tokens.css.

   Table of contents
     0. Fonts (@font-face)
     1. Base & reset
     2. Layout primitives (.container, .page-grid)
     3. Site header, navigation, search, mobile menu
     4. Breadcrumbs
     5. Text utilities, links, buttons, chips
     6. Prose (article body: paragraphs, headings, lists, images, tables,
        callouts)
     7. Article page components (header, series nav, related, section banner)
     8. Sidebar modules
     9. Section hub page
    10. Home page
    11. Search results & 404 (classes used by templates, not prototyped)
    12. Footer
    13. Print
    14. Accessibility helpers
    15. Additions for page types with no prototype
   ============================================================================ */

/* =============================================================================
   1. Base & reset
   ============================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;               /* 16px on phones */
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}
@media (min-width: 768px) {
  html { font-size: 106.25%; }   /* 17px: reading size for long articles */
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;      /* long Ukrainian compounds on 360px       */
  text-wrap: balance;           /* progressive enhancement                  */
}
h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-base); }

p, ul, ol, figure, table { margin: 0; }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  transition: color var(--duration-fast) var(--ease),
              text-decoration-color var(--duration-fast) var(--ease),
              background-color var(--duration-fast) var(--ease);
}
a:hover { color: var(--color-accent-hover); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button, input {
  font: inherit;
  color: inherit;
}

::selection { background: var(--color-accent-tint); color: var(--color-text); }

/* =============================================================================
   2. Layout primitives
   ============================================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Main + reference sidebar. Single column until 1024px, then 1fr / 300px.
   The sidebar comes AFTER main in the DOM so screen readers and phones get
   content first; on desktop it sits to the right. */
.page-grid {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-5) var(--section-gap);
}
@media (min-width: 1024px) {
  .page-grid {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-col);
    gap: var(--space-8);
    padding-top: var(--space-6);
  }
}
.page-grid > main { min-width: 0; }

/* Prose measure: reading column never exceeds 70ch even without a sidebar */
.measure { max-width: var(--content-col); }

/* =============================================================================
   3. Site header, navigation, search, mobile menu
   ----------------------------------------------------------------------------
   Anatomy (mobile):   [brand]                        [Пошук] [Меню]
                       panel (hidden): search form + primary nav + reference
   Anatomy (desktop):  [brand]  [nav x5, short labels]        [search input]
   Height is 64px on every viewport; the nav is one line at >= 1024px.
   ============================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  box-shadow: var(--shadow-header);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
}

/* Brand: geometric "oil filler cap" mark + typographic wordmark.
   The wordmark keeps the old site's split: АВТО in maroon, МАСЛО in ink. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: auto;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.brand:hover { color: var(--color-text); }
.brand__mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-surface), inset 0 0 0 5px var(--color-accent);
  flex: none;
}
.brand__auto { color: var(--color-accent); }
.brand__tld  { font-weight: var(--weight-regular); color: var(--color-text-muted); }

/* Header buttons (mobile only). Text labels on purpose: no icon font, no
   hand-drawn SVG. Implementers may prefix a Phosphor icon; keep the text. */
.header-btn {
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.header-btn:hover { border-color: var(--color-text-muted); }
.header-btn:active { transform: translateY(1px); }
.header-btn[aria-expanded="true"] { background: var(--color-tint); }

/* Primary nav: hidden inside the panel on mobile, inline on desktop */
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.site-nav__link {
  display: block;
  padding: var(--space-3) 0;
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-medium);
  border-bottom: 1px solid var(--color-line);
}
.site-nav__link:hover { color: var(--color-accent); }
.site-nav__link[aria-current="page"],
.site-nav__link[aria-current="true"] { color: var(--color-accent); }

/* Search form (used in header panel, desktop header, 404, results page) */
.search-form {
  display: flex;
  gap: var(--space-2);
}
.search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.search-form__input::placeholder { color: var(--color-text-muted); opacity: 1; }
.search-form__input:focus { border-color: var(--color-accent); outline-offset: 0; }
.search-form__submit {
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-button);
  border-radius: var(--radius-sm);
  background: var(--color-button);
  color: var(--color-on-button);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
}
.search-form__submit:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.search-form__submit:active { transform: translateY(1px); }

/* Mobile panel: full-width sheet under the bar. Toggled by JS via .is-open. */
.site-panel {
  display: none;
  position: absolute;
  inset: var(--header-height) 0 auto 0;
  z-index: var(--z-menu);
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  padding: var(--space-4) var(--gutter) var(--space-6);
  background: var(--color-surface);
  box-shadow: var(--shadow-menu);
  border-top: 1px solid var(--color-line);
}
.site-panel.is-open { display: block; }
.site-panel .search-form { margin-bottom: var(--space-4); }
.site-panel__title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.site-panel__links {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Two columns only when a column is wide enough for a section name; at 360px
     "Класифікації API та ACEA" would wrap on every row. */
  columns: 1;
  column-gap: var(--space-5);
  font-size: var(--text-sm);
}
@media (min-width: 480px) {
  .site-panel__links { columns: 2; }
}
.site-panel__links li { break-inside: avoid; padding: var(--space-1) 0; }

@media (min-width: 1024px) {
  .header-btn { display: none; }
  .site-panel {
    display: contents;            /* desktop: children flow into the bar */
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0;
  }
  .site-panel__title,
  .site-panel__links { display: none; }
  .site-nav { order: 1; margin-inline: var(--space-5) auto; }
  .site-nav__list { flex-direction: row; gap: var(--space-5); }
  .site-nav__link {
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    white-space: nowrap;
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 transparent;
    transition: box-shadow var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
  }
  .site-nav__link:hover,
  .site-nav__link[aria-current="page"],
  .site-nav__link[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--color-accent); }
  .site-panel .search-form { order: 2; margin: 0; width: 220px; }
  .site-panel .search-form__input { min-height: 40px; }
  .site-panel .search-form__submit { min-height: 40px; padding-inline: var(--space-3); }
}
@media (min-width: 1200px) {
  .site-panel .search-form { width: 260px; }
}

/* =============================================================================
   4. Breadcrumbs
   ============================================================================ */
.breadcrumbs {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-line-strong);
}
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs [aria-current="page"] { color: var(--color-text); }

/* =============================================================================
   5. Text utilities, links, buttons, chips
   ============================================================================ */
.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text);
}
.meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.meta a { color: inherit; }
.meta a:hover { color: var(--color-accent); }
.meta__sep { margin-inline: var(--space-2); color: var(--color-line-strong); }

/* Section heading with an optional "all" link on the right */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-text);
}
.section-head__more { font-size: var(--text-sm); white-space: nowrap; }

/* Buttons. One primary (solid maroon) and one secondary (outlined). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-button);
  background: var(--color-button);
  color: var(--color-on-button);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-button); }
.btn:active { transform: translateY(1px); }
.btn--secondary {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-text);
}
.btn--secondary:hover { background: var(--color-tint); border-color: var(--color-text-muted); color: var(--color-text); }

/* Spec chip: SAE / API / OEM codes. Mono, tabular, slate tint.
   Used inline in prose, in the reference panel and in tables. */
.code {
  display: inline-block;
  padding: 0 0.4em;
  border-radius: var(--radius-sm);
  background: var(--color-tint);
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--color-text);
}
a.code { text-decoration: none; }
a.code:hover { background: var(--color-accent-tint); color: var(--color-accent-hover); }

/* =============================================================================
   6. Prose (article and hub body copy)
   ----------------------------------------------------------------------------
   Applied to the element that wraps rendered Markdown. Everything inside is
   styled by tag so translated content needs no classes. Only images get a
   class from the renderer (see DESIGN.md section 7).
   ============================================================================ */
.prose {
  /* The measure lives on the children, not on the box: data tables need the
     whole main column, everything else keeps the 70ch reading width. */
  max-width: none;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.prose > * { max-width: var(--content-col); }
.prose > .table-scroll { max-width: 100%; }
.prose > * + * { margin-top: var(--space-4); }
.prose > h2 { margin-top: var(--space-7); }
.prose > h3 { margin-top: var(--space-6); }
.prose > h4 { margin-top: var(--space-5); }
.prose h2 + *,
.prose h3 + *,
.prose h4 + * { margin-top: var(--space-3); }
.prose > :first-child { margin-top: 0; }

.prose h2 { padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-line); }

.prose p { hanging-punctuation: first; }
.prose strong { font-weight: var(--weight-semibold); }
.prose em { font-style: italic; }

/* Inline links: this is where the old site's dense interlinking lives.
   Always underlined; hover gets a maroon wash so the link is obviously a
   block you can tap. */
.prose a {
  font-weight: var(--weight-medium);
  border-radius: 2px;
}
.prose a:hover { background: var(--color-accent-tint); }
/* External links get a marker after the text (Unicode, not an icon). */
.prose a[rel~="external"]::after,
.prose a[target="_blank"]::after {
  content: "\2197";                /* north-east arrow */
  font-size: 0.75em;
  margin-left: 0.2em;
  text-decoration: none;
  display: inline-block;
}

.prose ul,
.prose ol { padding-left: 1.4em; }
.prose li { margin-top: var(--space-2); padding-left: 0.2em; }
.prose li::marker { color: var(--color-accent); font-weight: var(--weight-semibold); }

.prose blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text);
  font-style: italic;
}

.prose hr { border: 0; border-top: 1px solid var(--color-line); margin: var(--space-6) 0; }

/* ---- Images -----------------------------------------------------------------
   The archive has 248 small GIF/JPGs (median 320px wide). Rules:
   - never upscale: width attribute = intrinsic width, max-width 100%;
   - a 1px plate + radius so soft JPEG edges read as intentional;
   - narrow images (<= 360px) float right from 768px, like the old site;
   - width/height attributes are mandatory (CLS). */
.prose img {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 2px;
}
.prose .img-float {
  margin: var(--space-2) auto var(--space-4);
}
@media (min-width: 768px) {
  .prose .img-float {
    float: right;
    margin: var(--space-1) 0 var(--space-4) var(--space-5);
    max-width: min(50%, 360px);
  }
  .prose h2, .prose h3, .prose table, .prose .table-scroll { clear: both; }
}
.prose figure { margin: var(--space-5) 0; }
.prose figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
/* Tiny logos (50-80px) in brand articles sit inline, no plate */
.prose .img-logo {
  display: inline-block;
  vertical-align: middle;
  border: 0;
  padding: 0;
  margin-right: var(--space-3);
}

/* ---- Tables -----------------------------------------------------------------
   Real data tables (SAE J300, API classes, approvals). Wrapper scrolls
   horizontally on phones, first column stays put. Numbers are tabular. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  scrollbar-width: thin;
}
.prose table,
.table-scroll table {
  /* Natural column widths: the wrapper scrolls instead of squeezing six
     columns of the SAE J-300 table into the reading measure. */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-variant-numeric: tabular-nums;
}
.prose caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.prose th,
.prose td {
  /* A single very long cell wraps here instead of stretching the table; on a
     phone no cell may eat the whole viewport, sticky first column included. */
  max-width: min(24em, 50vw);
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
}
.prose th {
  background: var(--color-tint);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.prose thead th { border-bottom: 1px solid var(--color-line-strong); white-space: nowrap; }
.prose td.num { white-space: nowrap; }
.prose tbody tr:last-child td,
.prose tbody tr:last-child th { border-bottom: 0; }
.prose tbody th { background: var(--color-surface); font-family: var(--font-mono); font-weight: var(--weight-medium); }
.prose td.num, .prose th.num { text-align: right; }
/* Placeholder cells ("-", "н/н"): centred and dimmed, so an empty row does not
   read as a number hugging the right edge of a wide column. */
.prose td.na { text-align: center; color: var(--color-text-muted); }
.prose tbody th[scope="row"],
.prose td:first-child {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  box-shadow: inset -1px 0 0 var(--color-line);
}
.prose .table-note { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- Callout ----------------------------------------------------------------
   Replaces the old "this page is part of a bigger article" paragraph. */
.callout {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--color-accent-tint);
}
.callout p { margin: 0; }
.callout p + p { margin-top: var(--space-2); }
.callout__title { font-weight: var(--weight-semibold); }

/* =============================================================================
   7. Article page components
   ============================================================================ */
.article-header { margin-bottom: var(--space-6); max-width: var(--content-col); }
.article-header h1 { margin-bottom: var(--space-3); }
.article-header .lede { margin-top: var(--space-3); color: var(--color-text-muted); }

/* Mobile-only table of contents for the current section (native disclosure) */
.toc-disclosure {
  margin: 0 0 var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.toc-disclosure summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--weight-semibold);
  list-style: none;
}
.toc-disclosure summary::-webkit-details-marker { display: none; }
.toc-disclosure summary::after { content: "+"; float: right; color: var(--color-text-muted); }
.toc-disclosure[open] summary::after { content: "\2212"; }
.toc-disclosure .toc { padding: 0 var(--space-4) var(--space-3); }
@media (min-width: 1024px) { .toc-disclosure { display: none; } }

/* Section TOC list (shared by the disclosure and the sidebar) */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { border-top: 1px solid var(--color-line); }
.toc li:first-child { border-top: 0; }
.toc a {
  display: block;
  padding: var(--space-3) 0;   /* 12+20+12 = 44px, the tap-target token */
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.toc a:hover { color: var(--color-accent); }
.toc a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-accent);
}
.toc--numbered a { display: flex; gap: var(--space-2); }

/* Series prev/next: two cells, stacked on phones, side by side from 640px */
.series-nav {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  max-width: var(--content-col);
}
@media (min-width: 640px) {
  .series-nav { grid-template-columns: 1fr 1fr; }
  /* A first or last article has only one card. Pin it to its own column so
     the right-aligned "next" never sits in the "previous" cell. */
  .series-nav__link--prev { grid-column: 1; }
  .series-nav__link--next { grid-column: 2; }
}
.series-nav__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease);
}
.series-nav__link:hover { border-color: var(--color-accent); color: var(--color-text); }
.series-nav__link--next { text-align: right; }
.series-nav__label { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.series-nav__title { font-weight: var(--weight-semibold); line-height: var(--leading-snug); }

/* Related articles: grouped by section, hairline rows, no cards */
.related { margin-top: var(--space-7); max-width: var(--content-col); }
.related__list { list-style: none; margin: 0; padding: 0; }
.related__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}
@media (min-width: 640px) { .related__item { grid-template-columns: 9rem 1fr; } }
.related__section { font-size: var(--text-sm); color: var(--color-text-muted); }
.related__title { font-weight: var(--weight-medium); }

/* =============================================================================
   8. Sidebar modules ("Довідник")
   ----------------------------------------------------------------------------
   The old site lived in its sidebars. Kept, but as plain grouped lists with
   one heading each. Sticky on desktop so the reference stays in view.
   ============================================================================ */
.sidebar { display: grid; gap: var(--space-6); align-content: start; }
@media (min-width: 1024px) {
  .sidebar { position: sticky; top: calc(var(--header-height) + var(--space-5)); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .sidebar { grid-template-columns: 1fr 1fr; }
}
.aside-block h2 {
  font-size: var(--text-base);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-text);
}
.aside-block .toc a { padding: var(--space-3) 0; }

/* Ru-fallback notice on untranslated articles and other one-paragraph notices */
.notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-tint);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
.badge {
  display: inline-block;
  padding: 0 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line-strong);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  vertical-align: middle;
}

/* Reference chips in the sidebar */
.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* =============================================================================
   9. Section hub page
   ============================================================================ */
.hub-header { max-width: var(--content-col); margin-bottom: var(--space-5); }
.hub-header h1 { margin-bottom: var(--space-2); }
.hub-header .meta { margin-bottom: var(--space-4); }

/* Reading list: ordered for series (big numerals), plain for topics */
.reading-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  max-width: var(--content-col);
}
.reading-list__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
}
.reading-list__item:last-child { border-bottom: 1px solid var(--color-line); }
.reading-list__num {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-accent);
  line-height: 1.3;
}
.reading-list__title {
  grid-column: 2;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.reading-list__title a { text-decoration: none; color: var(--color-text); }
.reading-list__title a:hover { color: var(--color-accent); text-decoration: underline; }
.reading-list__desc { grid-column: 2; color: var(--color-text-muted); font-size: var(--text-sm); }
.reading-list__meta { grid-column: 2; font-size: var(--text-xs); color: var(--color-text-muted); }

/* "Додатково за темою" link list (kept from the old category intros) */
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { padding: var(--space-2) 0; border-top: 1px solid var(--color-line); }
.link-list li:first-child { border-top: 0; }

/* =============================================================================
   10. Home page
   ============================================================================ */
.home > section + section { margin-top: var(--section-gap); }

/* 10.1 Hero: asymmetric split, text left / archive photo right. */
.hero {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-6);
  align-items: center;
}
@media (min-width: 768px) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); padding-top: var(--space-7); }
}
.hero h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.hero .lede { max-width: 34em; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero__figure { margin: 0; }
.hero__figure img {
  width: 100%;
  /* The intrinsic width of content/images/maslo_p1.jpg: never upscale
     (DESIGN.md section 7). */
  max-width: 350px;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
}
.hero__figure figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }

/* 10.2 Seven steps: the signature guide as a numbered list.
   Two CSS columns from 768px so the reading order runs DOWN the first
   column, then down the second (intro + steps 1-3 | steps 4-7). */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) { .steps { columns: 2; column-gap: var(--space-6); } }
.steps__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
  break-inside: avoid;
}
.steps__num {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-accent);
}
.steps__item--intro .steps__num::before { content: "\2192"; }
.steps__title { grid-column: 2; font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.steps__title a { color: var(--color-text); text-decoration: none; }
.steps__title a:hover { color: var(--color-accent); text-decoration: underline; }
.steps__desc { grid-column: 2; font-size: var(--text-sm); color: var(--color-text-muted); }

/* 10.3 Section index: the old sidebar list, now a 2-column dictionary.
   CSS columns again, so items read down-then-across like a book index. */
.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .index-list { columns: 2; column-gap: var(--space-7); } }
.index-list__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
  break-inside: avoid;
}
.index-list__item a { color: var(--color-text); text-decoration: none; font-weight: var(--weight-medium); }
.index-list__item a:hover { color: var(--color-accent); text-decoration: underline; }
.index-list__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

/* 10.4 Reference panel: tinted slab with code chips, grouped by standard */
.ref-panel {
  padding: var(--space-5) var(--gutter) var(--space-6);
  margin-inline: calc(var(--gutter) * -1);
  background: var(--color-tint);
}
@media (min-width: 1200px) {
  .ref-panel { margin-inline: 0; border-radius: var(--radius); padding-inline: var(--space-6); }
}
.ref-panel .section-head { border-bottom-color: var(--color-line-strong); }
.ref-panel__groups {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 640px) { .ref-panel__groups { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ref-panel__groups { grid-template-columns: repeat(4, 1fr); } }
.ref-panel__group h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.ref-panel .code { background: var(--color-surface); }
.ref-panel .chip-list { gap: var(--space-2); }
.ref-panel__more { margin-top: var(--space-2); font-size: var(--text-sm); }

/* 10.5 Brands: four archive logos, each a link to its section */
.brands {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .brands { grid-template-columns: repeat(4, 1fr); } }
.brands li { display: flex; }   /* stretch the tile to the tallest name in the row */
.brands a {
  display: flex;
  flex: 1;
  height: 100%;               /* a wrapped name must not shorten its neighbours */
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease);
}
.brands a:hover { border-color: var(--color-accent); }
.brands img { width: 48px; height: 48px; border-radius: var(--radius-sm); flex: none; }
.brands__name { font-weight: var(--weight-semibold); }
.brands__count { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }

/* 10.6 Two lists side by side: short tips / archive news */
.two-lists { display: grid; gap: var(--space-7); }
@media (min-width: 768px) { .two-lists { grid-template-columns: 1fr 1fr; } }
.tip-list { list-style: none; margin: 0; padding: 0; }
.tip-list li { padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
.tip-list a { color: var(--color-text); text-decoration: none; font-weight: var(--weight-medium); }
.tip-list a:hover { color: var(--color-accent); text-decoration: underline; }
.tip-list .meta { display: block; margin-top: var(--space-1); }

/* 10.7 Author note: single column, quiet */
.author-note {
  max-width: var(--content-col);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-text);
}
.author-note p + p { margin-top: var(--space-3); }
.author-note__sig { margin-top: var(--space-4); font-weight: var(--weight-semibold); }

/* =============================================================================
   11. Search results & 404 (templates only; see DESIGN.md section 8)
   ============================================================================ */
.search-page { padding-top: var(--space-6); }
.search-page .search-form { max-width: 40rem; margin-bottom: var(--space-5); }
.results { list-style: none; margin: 0; padding: 0; max-width: var(--content-col); }
.result { padding: var(--space-4) 0; border-top: 1px solid var(--color-line); }
.result__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.result__snippet { margin-top: var(--space-1); }
.result mark { background: var(--color-mark); color: inherit; padding: 0 0.1em; border-radius: 2px; }
.pagination { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }
.pagination a, .pagination span {
  min-width: var(--tap-target); min-height: var(--tap-target);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  text-decoration: none;
}
.pagination [aria-current="page"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.empty-state { max-width: var(--content-col); padding: var(--space-5); border: 1px dashed var(--color-line-strong); border-radius: var(--radius); }
.empty-state h2 { margin-bottom: var(--space-2); }
.not-found { max-width: var(--content-col); padding-block: var(--space-7); }
.not-found h1 { margin-bottom: var(--space-3); }
.not-found .search-form { margin: var(--space-5) 0; max-width: 32rem; }

/* =============================================================================
   12. Footer
   ============================================================================ */
.site-footer {
  margin-top: var(--section-gap);
  padding: var(--space-7) 0 var(--space-6);
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.site-footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { font-size: var(--text-sm); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: var(--space-1) 0; }
.site-footer a { color: var(--color-text); }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__about p + p { margin-top: var(--space-2); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  color: var(--color-text-muted);
}

/* =============================================================================
   13. Print: the reference tables must print cleanly
   ============================================================================ */
@media print {
  .site-header, .site-panel, .sidebar, .series-nav, .site-footer, .toc-disclosure, .header-btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .table-scroll { overflow: visible; border: 0; }
  .prose table { min-width: 0; }
}

/* =============================================================================
   14. Accessibility helpers
   ============================================================================ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-skiplink);
  padding: var(--space-2) var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* =============================================================================
   15. Additions for page types with no prototype
   -----------------------------------------------------------------------------
   Everything below is listed in BUILD-PLAN.md section 8.3 or follows directly
   from a view-model field the prototype did not have to show. No new colours
   and no new sizes: every value is a token or a value already used above.
   ============================================================================ */

/* 15.1 List numerals ---------------------------------------------------------
   Numbers come from the model (ListItem.number, TocItem.number) because series
   prefaces, korotko groups and search results are deliberately unnumbered.
   The look is unchanged: mono, maroon in reading lists, muted in TOCs. */
.toc--numbered a { align-items: baseline; }
.toc__num {
  flex: none;
  min-width: 1.5em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.reading-list__num,
.steps__num { font-variant-numeric: tabular-nums; }

/* 15.2 Long lists: one-line descriptions (/korotko/, 404 tips, big archives).
   Compact rows are never numbered, so the numeral column is dropped and the
   title starts at the left edge of the list. */
.reading-list--compact .reading-list__item {
  grid-template-columns: 1fr;
  padding: var(--space-3) 0;
}
.reading-list--compact .reading-list__num { display: none; }
.reading-list--compact .reading-list__title,
.reading-list--compact .reading-list__desc,
.reading-list--compact .reading-list__meta { grid-column: 1; }
.reading-list--compact .reading-list__title { font-size: var(--text-base); }
.reading-list--compact .reading-list__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

/* 15.3 aside.note: the surviving "Звертаємо вашу увагу!" boilerplate inside
   rendered Markdown. Same plate as .notice, but it sits in the prose flow. */
.prose .note,
aside.note {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-tint);
  font-size: var(--text-sm);
}
.prose .note p { margin: 0; }
.prose .note p + p { margin-top: var(--space-2); }

/* 15.4 .link-list current state (sibling subsections, secondary sections) */
.link-list a { color: var(--color-text); text-decoration: none; }
.link-list a:hover { color: var(--color-accent); text-decoration: underline; }
.link-list a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

/* 15.5 Block rhythm on the page types the prototype does not show:
   section hub (subsections / articles / siblings), /korotko/ groups,
   search and error pages. Matches the .related spacing above. */
.page-grid > main > section { margin-top: var(--space-7); }
.page-search main > section,
.page-error main > section { margin-top: var(--section-gap); }

/* Section headings that are themselves links (korotko group headings) behave
   like reading-list titles: ink, underline on hover. */
.section-head h2 a { color: var(--color-text); text-decoration: none; }
.section-head h2 a:hover { color: var(--color-accent); text-decoration: underline; }

/* 15.15 /korotko/ jump list: 145 tips under 7 headings make a page ~17 000px
   tall and DESIGN.md rules out pagination, so the group headings get anchors.
   Reuses .chip-list and .code; the padding lifts the rows to the 44px target. */
.jump-nav { margin-top: var(--space-5); }
.jump-nav .code {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
}
.jump-nav__count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* Back to the jump list at the end of each group; 44px tap target. */
.jump-back { margin: var(--space-4) 0 0; }
.jump-back a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
.jump-back a:hover { color: var(--color-accent); text-decoration: underline; }

/* 15.6 Search results page */
.results { margin-top: var(--space-4); }
.result:last-child { border-bottom: 1px solid var(--color-line); }
.result .meta { margin-top: var(--space-1); }
.empty-state ul { margin: var(--space-3) 0 0; padding-left: 1.4em; }
.empty-state li { padding: var(--space-1) 0; }
.empty-state li::marker { color: var(--color-accent); }

/* 15.13 Hub sections keep the reading measure, so the .section-head hairline
   ends where the reading list below it ends (article pages already do this via
   .related). The 404 page has no .page-grid, but its index and tips lists are
   measure-capped the same way, so its section heads must be too. */
.page-grid main > section { max-width: var(--content-col); }
.page-error main > section { max-width: var(--content-col); }

/* 15.8 The ru-fallback notice and the archive notice sit above the content they
   qualify. .notice carries the plate and the space below it; this is the space
   above it, so it does not stick to the header it follows. */
.hub-header + .notice,
.article-header + .notice,
.toc-disclosure + .notice { margin-top: var(--space-5); }

/* 15.10 The teaser call to action lives inside .prose and its label carries a
   section name ("Читати весь розділ «...»"). .btn is nowrap so the two short
   hero buttons keep their shape; inside prose the label must wrap instead of
   pushing a 360px page sideways. */
.prose .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  padding-block: var(--space-2);
}

/* 15.9 Badges never wrap away from the meta line they belong to */
.reading-list__meta .badge,
.related__title .badge,
.article-header .badge { margin-left: var(--space-2); }

/* 15.11 Footer navigation reaches the 44px tap target while the footer is one
   stacked column (BUILD-PLAN section 11.10). The prototype's 31px rows stay as
   drawn from 768px up, where the footer splits into three columns and pointer
   input takes over. The comma-separated links in .site-footer__bottom are
   inline text links and keep their inline box (WCAG 2.5.8 inline exception). */
@media (max-width: 767px) {
  .site-footer li { padding: 0; }
  .site-footer li a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* 15.12 The wordmark is 28px tall (the size of .brand__mark); below the desktop
   header it is a primary tap target, so its box grows to 44px without moving
   the mark or the text, which stay vertically centred. */
@media (max-width: 1023px) {
  .brand { min-height: 44px; }
}

/* 15.14 The panel is the whole navigation below 1024px and is operated by
   touch, so its links reach the 44px target (BUILD-PLAN section 11.10, same
   trade as 15.11 in the footer). The prototype's 31px rows stay on the desktop
   bar, where .site-panel__links is display:none. */
@media (max-width: 1023px) {
  .site-panel__links li { padding: 0; }
  .site-panel__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}