/* Layout concept: an atlas and a reference. The home page is a full-width map with the next deadlines above it;
   inner pages are a reference column (section list on the left, text up to 720px, "On this page" on the right).
   Look since 31.10.2026 (Ivan: the new LinkedIn look): navy ink on white, LinkedIn blue for actions, active states and
   key words in headlines, light-blue panels, signal yellow for the retail layer of the map, near dates and labels.
   Inter Tight for headlines, Inter for text and numbers (tabular), IBM Plex Mono only for codes. Fonts from /fonts. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(fonts/inter-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(fonts/inter-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(fonts/inter-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(fonts/inter-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-display: swap; src: url(fonts/inter-tight-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-display: swap; src: url(fonts/inter-tight-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-display: swap; src: url(fonts/inter-tight-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter Tight"; font-weight: 800; font-display: swap; src: url(fonts/inter-tight-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter Tight"; font-weight: 800; font-display: swap; src: url(fonts/inter-tight-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-weight: 800; font-display: swap; src: url(fonts/inter-tight-cyrillic-800-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

:root {
  --paper: #ffffff;       /* page */
  --soft: #eef5fd;        /* light-blue panels, code boxes */
  --sky: #dcebfb;         /* stronger light-blue: callouts, chips, date pills */
  --ink: #0f1b2d;         /* navy text */
  --ink-2: #34445a;       /* secondary text */
  --ink-3: #5d6d82;       /* captions, labels */
  --line: #d5e3f3;        /* dividers */
  --line-2: #b9cde6;      /* borders of controls, link underlines */
  --blue: #0a66c2;        /* actions, active states, key words in headlines */
  --blue-2: #004182;      /* hover on blue */
  --on-blue: #ffffff;     /* text on blue */
  --accent: #ffd000;      /* yellow: retail layer of the map, near dates, labels */
  --accent-ink: #0f1b2d;  /* text on the accent */
  --accent-soft: #fff5c2; /* light marker behind text */
  /* map: the retail layer stays yellow (Ivan, 31.10.2026); the law layer in blue steps, the lightest also hatched */
  --m-broad: #2f6fbf; --m-pharma: #8db4e4; --m-stamps: #d3e3f6; --m-stripe: #8db4e4; --m-land: #e9eef4; --m-edge: #ffffff;
  --specimen: #ffffff;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --head: "Inter Tight", "Inter", system-ui, sans-serif;
  --mono: "Inter", system-ui, sans-serif; /* dates and numbers: Inter, tabular figures where .mono/.date set them */
  --code: "IBM Plex Mono", ui-monospace, Consolas, "Liberation Mono", monospace;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --top-h: 64px; --radius: 12px; --read: 720px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0d1623; --soft: #152234; --sky: #1b2c44; --ink: #eef3f9; --ink-2: #c3cfdd; --ink-3: #8fa0b5; --line: #24344a; --line-2: #36495f;
  --blue: #70b5f9; --blue-2: #9ccbfb; --on-blue: #0d1623;
  --accent: #ffd000; --accent-ink: #0f1b2d; --accent-soft: #3b3311;
  --m-broad: #70b5f9; --m-pharma: #3d6a9e; --m-stamps: #22364f; --m-stripe: #5d84b3; --m-land: #1a2738; --m-edge: #0d1623;
  --specimen: #f4f5f6; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #0d1623; --soft: #152234; --sky: #1b2c44; --ink: #eef3f9; --ink-2: #c3cfdd; --ink-3: #8fa0b5; --line: #24344a; --line-2: #36495f;
  --blue: #70b5f9; --blue-2: #9ccbfb; --on-blue: #0d1623;
  --accent: #ffd000; --accent-ink: #0f1b2d; --accent-soft: #3b3311;
  --m-broad: #70b5f9; --m-pharma: #3d6a9e; --m-stamps: #22364f; --m-stripe: #5d84b3; --m-land: #1a2738; --m-edge: #0d1623;
  --specimen: #f4f5f6; color-scheme: dark }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 24px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.65 var(--sans); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.025em; }
h2 { font-size: clamp(24px, 2.4vw, 30px); }
h3 { font-size: 20px; letter-spacing: -.01em; }
p { margin: 0; max-width: 68ch; }
ul, ol { margin: 0; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.eyebrow { font: 500 13px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.lead { font-size: 21px; line-height: 1.5; color: var(--ink-2); }
.meta { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.mono, code, .date { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-size: .88em; background: var(--soft); padding: 1px 5px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { body { font-size: 17px; } .lead { font-size: 19px; } }

/* language: all versions sit in the page, the inactive ones are hidden */
div.l-en, div.l-ru, div.l-de, span.l-en, span.l-ru, span.l-de { display: contents; }
html[data-lang="ru"] .l-en, html[data-lang="de"] .l-en, html:not([data-lang="ru"]) .l-ru, html:not([data-lang="de"]) .l-de { display: none !important; }

/* ---------- header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: var(--s-6); height: var(--top-h); }
.logo { display: flex; align-items: center; gap: 10px; font: 600 20px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); text-decoration: none; flex: none; }
.logo:hover { text-decoration: none; }
.logo svg { width: 30px; height: 30px; flex: none; color: var(--ink); }
.mainnav { display: flex; gap: var(--s-5); height: 100%; }
.mainnav a { display: flex; align-items: center; padding-top: 3px; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.mainnav a:hover { color: var(--ink); }
.mainnav a.on { color: var(--ink); border-bottom-color: var(--accent); }
.tools { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.search { position: relative; width: 230px; }
.search input { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); color: var(--ink); font: 15px var(--sans); padding: 0 12px 0 36px; }
.search input:focus { border-color: var(--ink); background: var(--paper); outline: none; }
.search input::placeholder { color: var(--ink-3); }
.search svg { position: absolute; left: 11px; top: 11px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.sugg { position: absolute; right: 0; top: 46px; width: min(420px, calc(100vw - 32px)); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px 0; z-index: 40; max-height: 70vh; overflow-y: auto; }
.sugg a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 16px; }
.sugg a:hover, .sugg a.on { background: var(--soft); }
.sugg a small { margin-left: auto; color: var(--ink-3); font: 12px var(--mono); white-space: nowrap; }
.sugg .dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.sugg .none { padding: 10px 14px; color: var(--ink-3); font-size: 15px; }
.iconbtn { border: 0; background: transparent; color: var(--ink-2); border-radius: var(--radius); min-width: 40px; height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font: 500 13px var(--mono); flex: none; }
.iconbtn:hover { background: var(--soft); color: var(--ink); }
.iconbtn svg { width: 20px; height: 20px; }
/* EN / DE / RU: a native list styled as a header button, with a small caret */
select.langbtn, select.langbtn:hover { appearance: none; -webkit-appearance: none; padding: 0 22px 0 10px; color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select.langbtn option { color: #121417; background: #fff; }
.menubtn { display: none; }
nav.sheet { position: fixed; inset: calc(var(--top-h) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 19; background: var(--paper); overflow-y: auto;
  padding: var(--s-4) max(16px, env(safe-area-inset-right, 0px)) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
nav.sheet a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 500; text-decoration: none; }
nav.sheet a.on::after { content: ""; width: 12px; height: 12px; background: var(--accent); border-radius: 2px; }
nav.sheet .small a { font-size: 17px; min-height: 48px; color: var(--ink-2); }
@media (max-width: 1240px) { header.top .wrap { gap: var(--s-5); } .mainnav { gap: var(--s-4); } .search { width: 190px; } }
@media (max-width: 1100px) {
  .mainnav { display: none; }
  .menubtn { display: inline-flex; }
  .search { width: auto; flex: 1 1 auto; }
  .tools { flex: 1 1 auto; justify-content: flex-end; }
  .iconbtn { min-width: 44px; height: 44px; }
}
@media (max-width: 420px) { .logo b { display: none; } }

/* ---------- buttons, chips, filters ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; background: var(--ink-2); border-color: var(--ink-2); }
.btn.ghost, .btn.grey { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover, .btn.grey:hover { border-color: var(--ink); background: var(--soft); }
.btn svg { width: 18px; height: 18px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: 500 13px/1.2 var(--mono); white-space: nowrap; text-decoration: none; }
.chip i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.chip.check { background: var(--accent-soft); border-color: transparent; color: var(--ink); }
a.chip { min-height: 36px; }
a.chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.fchips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.fchips button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: 500 14px var(--sans); cursor: pointer; }
.fchips button:hover { border-color: var(--ink); color: var(--ink); }
.fchips button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.field, .filters select, .filters input { height: 48px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: 17px var(--sans); padding: 0 14px; min-width: 0; }
.field { width: 100%; }
.field:focus, .filters select:focus, .filters input:focus { border-color: var(--ink); outline: none; }
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filters input[type="search"] { flex: 1 1 220px; }
.more-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; font-size: 16px; text-decoration: none; }
.more-link:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.showmore { align-self: flex-start; }
.seemore { background: none; border: 0; padding: 0; min-height: 32px; font: 500 15px var(--sans); color: var(--ink-3); cursor: pointer; align-self: flex-start; }
.seemore:hover { color: var(--ink); text-decoration: underline; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp.open { display: block; }

/* dates: the accent marks what is close */
.days { display: inline-block; padding: 3px 8px; border-radius: 3px; background: var(--soft); color: var(--ink-2); font: 500 13px/1.3 var(--mono); white-space: nowrap; }
.days.soon { background: var(--accent); color: var(--accent-ink); }
.mark { background: linear-gradient(transparent 60%, var(--accent) 60% 92%, transparent 92%); }

/* ---------- page shells ---------- */
main { padding-block: var(--s-7) var(--s-8); }
main.pg { display: flex; flex-direction: column; gap: var(--s-7); }
section.hero, section.block { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
section.hero { gap: var(--s-4); }
section.block { padding-top: var(--s-6); border-top: 1px solid var(--line); }
section.block > h2 + p, section.block > .eyebrow + h2 { margin-top: -4px; }
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid > .card { background: var(--soft); border: 0; border-radius: var(--radius); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.callout { background: var(--soft); border-radius: var(--radius); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.callout b { font-weight: 600; }

/* reference layout, built by site.js on pages with <main data-toc>: sections | text | on this page */
main.ref { display: grid; grid-template-columns: 200px minmax(0, var(--read)) 210px; justify-content: space-between; gap: var(--s-7); align-items: start; }
main.ref > .ref-body { display: flex; flex-direction: column; gap: var(--s-7); min-width: 0; }
.sidenav, .toc { position: sticky; top: calc(var(--top-h) + 32px); display: flex; flex-direction: column; font-size: 15px; max-height: calc(100vh - var(--top-h) - 64px); overflow-y: auto; }
.sidenav b, .toc b { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-bottom: var(--s-3); }
.sidenav a, .toc a { padding: 6px 0 6px 12px; border-left: 2px solid var(--line); color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.sidenav a:hover, .toc a:hover { color: var(--ink); border-left-color: var(--ink-3); }
.sidenav a.on, .toc a.on { color: var(--ink); border-left-color: var(--accent); font-weight: 500; }
.sidenav .gap { height: var(--s-4); }
@media (max-width: 1240px) { main.ref { grid-template-columns: minmax(0, 1fr) 210px; } main.ref > .sidenav { display: none; } }
@media (max-width: 960px) { main.ref { grid-template-columns: minmax(0, 1fr); } main.ref > .toc { display: none; } }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { border-bottom: 1px solid var(--ink); font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
td.date { font-family: var(--mono); font-size: 15px; white-space: nowrap; }
tr.past td { color: var(--ink-3); }
tr.future td.date { color: var(--ink); font-weight: 500; }
tr.today td { padding: 6px 10px; background: var(--accent); color: var(--accent-ink); font: 500 13px var(--mono); border: 0; }
@media (max-width: 640px) {
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.cards td { padding: 0; border: 0; }
  table.cards td:first-child { font-size: 14px; color: var(--ink-3); font-family: var(--mono); }
  table.cards td[data-label]::before { content: attr(data-label) ": "; font-size: 14px; color: var(--ink-3); }
  table.cards.nolabel td[data-label]::before { content: none; }
  table.cards td.date { white-space: normal; }
  .tablewrap { overflow-x: visible; }
}

/* ---------- lists of rows (countries, deadlines, news, tracker) ---------- */
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.rows > a, .rows > div { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(150px, 1fr); gap: var(--s-4); align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.rows > a:hover { background: var(--soft); }
.rows .nm { font-weight: 600; }
.rows .sys { color: var(--ink-2); font-size: 15px; }
.rows .nx { font-size: 15px; }
.rows .nx b { display: block; font: 500 14px var(--mono); }
@media (max-width: 760px) {
  .rows > a, .rows > div { grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-3); }
  .rows .sys { grid-column: 1 / -1; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .rows .nx { grid-column: 1 / -1; }
}
/* dated list: date | what | actions */
.dlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.dlist li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--s-2) var(--s-5); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.dlist .d { font: 500 15px/1.4 var(--mono); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dlist .w { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dlist .w a.c { font-weight: 600; font-size: 19px; text-decoration: none; }
.dlist .w a.c:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.dlist .w span { color: var(--ink-2); }
.dlist .acts { display: flex; gap: var(--s-2); }
@media (max-width: 640px) { .dlist li { grid-template-columns: minmax(0, 1fr) auto; } .dlist .d { grid-column: 1 / -1; flex-direction: row; align-items: center; } .dlist .w { grid-column: 1; } }
.month { font: 500 13px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: var(--s-6) 0 var(--s-2); border-bottom: 1px solid var(--ink); }

/* news and tracker entries */
.feed { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.post { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-2) var(--s-5); padding: 20px 0; border-bottom: 1px solid var(--line); }
.post .pd { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font: 500 15px/1.4 var(--mono); }
.post .tag { font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.post .pb { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.post .ttl { font-weight: 600; font-size: 19px; line-height: 1.35; letter-spacing: -.005em; }
.post .sub { font: 14px/1.4 var(--mono); color: var(--ink-3); }
.post .chips { margin-top: 4px; }
@media (max-width: 640px) { .post { grid-template-columns: minmax(0, 1fr); } .post .pd { flex-direction: row; align-items: baseline; gap: 12px; } }

/* ---------- timeline, steps, FAQ, key facts ---------- */
.tl { list-style: none; padding: 0; margin: 0; }
.tl li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--line); }
.tl b { font: 500 15px/1.5 var(--mono); }
.tl:not(.next) li { color: var(--ink-2); }
@media (max-width: 560px) { .tl li { grid-template-columns: 1fr; gap: 2px; } }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); }
.steps li::before { content: counter(step); width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 500 15px var(--mono); }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 32px 16px 0; font-weight: 500; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font: 400 24px/1 var(--mono); color: var(--ink-3); }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 0 16px; color: var(--ink-2); }
.kv { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.kv > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv > div > span:first-child { font: 500 12px/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.kv b { font-weight: 600; }
@media (max-width: 560px) { .kv > div { grid-template-columns: 1fr; gap: 2px; } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); border-top: 1px solid var(--ink); padding-top: var(--s-4); }
.facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 16px; }
.facts .k { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }

/* ---------- code specimens, photos ---------- */
.specimen { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); align-items: start; padding-block: var(--s-5); border-top: 1px solid var(--line); }
.specimen:first-of-type { border-top: 0; padding-top: 0; }
.sym { background: var(--specimen); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; place-items: center; }
.sym svg, .sym img { width: 100%; max-width: 150px; height: auto; }
.parts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 16px; font-size: 16px; margin: 0; }
.parts dt { font: 14px/1.6 var(--mono); word-break: break-all; }
.parts dd { margin: 0; color: var(--ink-2); }
.stampmock { width: 150px; height: 96px; border: 3px double #23272e; border-radius: 4px; color: #23272e; display: grid; place-items: center; font: 500 11px/1.2 var(--mono); text-align: center; padding: 8px; background: repeating-linear-gradient(45deg, #f4f5f6, #f4f5f6 6px, #e3e5e8 6px, #e3e5e8 12px); }
.stampmock i { width: 30px; height: 30px; background: conic-gradient(#23272e 25%, #fff 0 50%, #23272e 0 75%, #fff 0); background-size: 7.5px 7.5px; }
@media (max-width: 640px) { .specimen { grid-template-columns: 1fr; gap: var(--s-3); } .sym { max-width: 200px; } }
.photos { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
figure { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--soft); border-radius: var(--radius); }
figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
figcaption small { font-size: 13px; color: var(--ink-3); }

/* ---------- learn pages ---------- */
.subnav { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.method { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--line); }
.method .side { display: flex; flex-direction: column; gap: var(--s-2); }
.method .body { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.method .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.method .tags span { font: 500 12px var(--mono); padding: 4px 8px; border-radius: 999px; background: var(--soft); color: var(--ink-2); }
.verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); }
.verdict div { font-size: 16px; }
.verdict b { display: block; font: 500 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 760px) { .method { grid-template-columns: 1fr; gap: var(--s-2); } }
.myths { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.myth { background: var(--soft); border-radius: var(--radius); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.myth b { font-size: 17px; font-weight: 600; }
.myth b::before { content: "Myth"; display: block; margin-bottom: 4px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.myth p::before { content: "In fact: "; font-weight: 600; color: var(--ink); }
html[data-lang="ru"] .myth b::before { content: "Миф"; }
html[data-lang="ru"] .myth p::before { content: "На деле: "; }
.uri { background: var(--soft); border-radius: var(--radius); padding: var(--s-4) var(--s-5); font: 500 16px/2 var(--mono); overflow-wrap: anywhere; }
.uri span { padding: 2px 3px; border-bottom: 3px solid currentColor; }
.u1 { color: var(--ink-3); } .u2 { color: var(--ink); } .u3 { color: var(--ink); border-bottom-style: dotted !important; } .u4 { color: var(--ink); border-bottom-color: var(--accent) !important; } .u5 { color: var(--ink-2); border-bottom-style: dashed !important; }

/* ---------- map ---------- */
#map { width: 100%; height: auto; display: block; }
#map path { fill: var(--m-land); stroke: var(--m-edge); stroke-width: .5; transition: opacity .15s; vector-effect: non-scaling-stroke; }
#map path.hit { cursor: pointer; }
#map path.hit:hover { opacity: .7; }
#map path.sel { stroke: var(--accent); stroke-width: 2; }
#map path:focus { outline: none; stroke: var(--ink); stroke-width: 2; }
.legend { display: flex; gap: var(--s-2) var(--s-5); flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }
.hatch { background: repeating-linear-gradient(45deg, var(--m-stamps) 0 3px, var(--m-stripe) 3px 4.5px) !important; }
.tip { position: fixed; pointer-events: none; background: var(--ink); color: var(--paper); font: 13px/1.4 var(--mono); padding: 6px 10px; border-radius: 4px; z-index: 50; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--radius); font-size: 15px; z-index: 60; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding-block: var(--s-7); color: var(--ink-2); font-size: 15px; }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-6); }
footer h4 { margin: 0 0 var(--s-2); font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
footer li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
footer li a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
footer .fine { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; max-width: none; }
@media (max-width: 860px) { footer .cols { grid-template-columns: 1fr 1fr; } footer .cols > div:first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { header.top, nav.sheet, footer, .sidenav, .toc, .tools { display: none !important; } body { font-size: 12pt; } }

/* headline numbers (Sunrise page) */
.stats { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); padding-top: var(--s-2); }
.stat { display: flex; flex-direction: column; gap: 2px; max-width: 220px; }
.stat b { font: 500 30px/1.1 var(--mono); }
.stat > span { font-size: 15px; line-height: 1.4; color: var(--ink-3); }

/* ---------- retailers: company cards, logo tiles, five-step stage bar ---------- */
.logo-tile { display: inline-flex; align-items: center; justify-content: center; width: 132px; height: 60px; flex: none; padding: 8px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: #121417; font: 600 15px/1.15 var(--sans); text-align: center; overflow: hidden; }
.logo-tile img { max-width: 100%; max-height: 42px; object-fit: contain; }
.logo-tile.txt { background: var(--soft); color: var(--ink); border-color: transparent; }
.stagebar { display: inline-flex; align-items: center; gap: 3px; font: 500 12px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.stagebar i { width: 14px; height: 6px; border-radius: 2px; background: var(--line); }
.stagebar i.on { background: var(--ink); }
.stagebar i.on:nth-child(5) { background: var(--accent); }
.stagebar b { font-weight: 500; margin-left: 6px; }
/* tracker list: one row per company, the whole row is the link */
.rlist { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.rrow { display: grid; grid-template-columns: 96px minmax(150px, 230px) minmax(0, 1fr) 200px; grid-template-areas: "logo name last meta"; gap: 4px var(--s-4); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.rrow:hover .rn b { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.rrow .logo-tile { grid-area: logo; width: 96px; height: 44px; padding: 4px 8px; font-size: 12px; text-align: center; }
.rrow .logo-tile img { max-height: 30px; }
.rrow .rn { grid-area: name; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rrow .rn b { font-size: 17px; font-weight: 600; }
.rrow .rn span { font: 13px/1.4 var(--mono); color: var(--ink-3); }
.rrow .rl { grid-area: last; font-size: 15px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rrow .rm { grid-area: meta; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rrow .rm .date { display: flex; align-items: center; gap: 8px; font: 13px var(--mono); color: var(--ink-3); }
.rrow .rm .chip { padding: 2px 8px; font-size: 12px; }
.rfilters .fmore { display: none; }
.rgroup { display: flex; flex-direction: column; gap: var(--s-4); }
.rgroup > h2 { font-size: 22px; padding-top: var(--s-4); border-top: 1px solid var(--ink); display: flex; gap: 10px; align-items: baseline; }
.rgroup > h2 small { font: 500 14px var(--mono); color: var(--ink-3); }
.rfilters { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--soft); border-radius: var(--radius); }
.rfilters .filters select, .rfilters .filters input { height: 44px; font-size: 16px; }
.rfilters .fchips button { min-height: 36px; font-size: 14px; }
.rfilters .row2 { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.rfilters label.tog { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); font: 500 14px var(--sans); color: var(--ink-2); cursor: pointer; }
.rfilters label.tog:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rfilters label.tog input { margin: 0; }
.rbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.rbar .sortby { display: inline-flex; gap: 0; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.rbar .sortby button { border: 0; background: var(--paper); color: var(--ink-2); font: 500 14px var(--sans); padding: 0 14px; min-height: 38px; cursor: pointer; border-right: 1px solid var(--line-2); }
.rbar .sortby button:last-child { border-right: 0; }
.rbar .sortby button.on { background: var(--ink); color: var(--paper); }
.linkbtn { background: none; border: 0; padding: 0; font: 500 15px var(--sans); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
@media (max-width: 640px) {
  .logo-tile { width: 112px; height: 52px; } .rfilters .filters select { flex: 1 1 45%; }
  .rrow { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "logo name" "logo meta"; gap: 6px var(--s-3); }
  .rrow .logo-tile { width: 72px; height: 40px; }
  .rrow .rl { display: none; }
  .rrow .rm { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .rfilters .fmore { display: inline-flex; } .rfilters .filters input[type="search"] { flex-basis: 150px; }
  .rfilters:not(.open) select, .rfilters:not(.open) .row2 { display: none; }
}

/* ---------- retail map (lib/retailmap.js): two tones and a card with logos ---------- */
.rmapsvg { width: 100%; height: auto; display: block; }
.rmapsvg path { fill: var(--m-land); stroke: var(--m-edge); stroke-width: .5; transition: opacity .15s; vector-effect: non-scaling-stroke; }
.mapzoom { position: absolute; left: 12px; top: 12px; z-index: 4; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
@media (max-width: 640px) { .mapzoom { position: static; margin-bottom: var(--s-3); } }
.rmapsvg path.r-hi { fill: var(--accent); }
.rmapsvg path.r-lo { fill: var(--accent-soft); stroke: var(--accent); stroke-width: .8; }
.rmapsvg path.hit { cursor: pointer; }
.rmapsvg path.hit:hover { opacity: .75; }
.rmapsvg path.sel { stroke: var(--ink); stroke-width: 1.6; }
.rmapsvg path:focus { outline: none; stroke: var(--ink); stroke-width: 2; }
/* retail map + its card in a column beside it (never over the map); one column under 1000px */
.rmapgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-4); align-items: start; }
.rpop { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); padding: var(--s-4); display: flex; flex-direction: column; gap: 10px; }
.rpop.idle { background: var(--soft); border-color: transparent; }
.rpop.idle > p { font-size: 15px; color: var(--ink-2); }
.rpop .rp-top { display: flex; flex-direction: column; }
.rpop .rp-top .eyebrow { padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.rpop .rp-top button { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; font-size: 15px; color: inherit; text-align: left; cursor: pointer; }
.rpop .rp-top button .mono { color: var(--ink-3); }
.rpop .rp-top button:hover span:first-child { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
@media (max-width: 1000px) { .rmapgrid { grid-template-columns: minmax(0, 1fr); } }
.rpop .rp-h { display: flex; align-items: baseline; gap: 10px; }
.rpop .rp-h b { font-size: 20px; font-weight: 600; }
.rpop .rp-h span { font: 13px var(--mono); color: var(--ink-3); }
.rpop .rp-h button { margin-left: auto; align-self: center; min-width: 32px; height: 32px; }
.rpop .rp-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rpop .rp-l a { text-decoration: none; }
.rpop .rp-l .logo-tile { width: 100%; height: 44px; padding: 4px 6px; font-size: 12px; }
.rpop .rp-l .logo-tile img { max-height: 30px; }
.rpop .rp-l a:hover .logo-tile { border-color: var(--ink); }
.rpop .rp-more { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--radius); background: var(--ink); color: var(--paper); font: 500 14px var(--mono); }
.rpop .meta { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rpop .more-link { min-height: 32px; font-size: 15px; }

/* code guides (codes/*.html): decoder, check digit steps, wide linear codes, guide cards */
.decoder { display: flex; flex-direction: column; gap: var(--s-3); background: var(--soft); border-radius: var(--radius); padding: var(--s-5); }
.decoder label { font-weight: 600; }
.decoder input { height: 52px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: 15px var(--mono); padding: 0 14px; width: 100%; min-width: 0; }
.decoder input:focus { border-color: var(--ink); outline: none; }
.decoder .chips button { cursor: pointer; font: inherit; }
.gs1out { display: flex; flex-direction: column; gap: var(--s-3); }
.gs1out table td { vertical-align: top; }
.gs1out .kv code { font: 14px/1.6 var(--mono); overflow-wrap: anywhere; }
.gs1bad { color: #b3261e; font-weight: 500; }
:root[data-theme="dark"] .gs1bad { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gs1bad { color: #ff8a80; } }
.cdgrid { display: grid; gap: 4px; }
.cdgrid span { display: flex; flex-direction: column; align-items: center; background: var(--paper); border-radius: 4px; padding: 6px 0; font: 14px/1.3 var(--mono); }
.cdgrid b { font-size: 18px; font-weight: 500; } .cdgrid i { font-style: normal; color: var(--ink-3); font-size: 12px; } .cdgrid small { color: var(--ink-2); }
@media (max-width: 560px) { .cdgrid span { font-size: 11px; } .cdgrid b { font-size: 14px; } }
.sym.wide img { max-width: 260px; }
.uri.es span { padding: 2px 1px; }
.codecards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.codecards a { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.codecards a:hover { border-color: var(--ink); }
.codecards img { width: 64px; height: 64px; object-fit: contain; background: var(--specimen); border-radius: 4px; padding: 6px; flex: none; }
.codecards b { display: block; font-size: 18px; font-weight: 600; }
.codecards span { color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.users { display: flex; flex-wrap: wrap; gap: 8px; }
.users .logo-tile { width: 112px; height: 52px; }

/* printing-method schemes (img/methods/*.svg) with a numbered legend */
.method .scheme { grid-column: 1 / -1; }
.scheme img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: initial; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.scheme ol { margin: var(--s-3) 0 0; padding: 0; list-style: none; counter-reset: n; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px var(--s-5); }
.scheme li { counter-increment: n; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.scheme li::before { content: counter(n); width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 600 12px var(--mono); margin-top: 1px; }
/* live schemes (methods.html, 23.10.2026): words and motion on the picture, the part list folded away and unnumbered */
.scheme details summary { cursor: pointer; font-weight: 600; margin-top: var(--s-3); }
.scheme details ol { margin-top: var(--s-2); }
.scheme details li { display: block; }
.scheme details li::before { content: none; }

/* Quick pick by packaging on methods.html (28.10.2026): pack tiles and the answer panel */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--s-2); margin-top: var(--s-4); }
.picker button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: var(--s-3) var(--s-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: 500 14px/1.3 var(--sans); text-align: center; cursor: pointer; }
.picker button:hover { border-color: var(--ink-3); }
.picker button[aria-pressed="true"] { border-color: var(--ink); background: var(--soft); box-shadow: inset 0 0 0 1px var(--ink); }
.picker svg { width: 56px; height: 56px; }
.picker .spot, .pick-out .spot { fill: var(--accent); }
.pick-out { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-5); align-items: start; margin-top: var(--s-3); padding: var(--s-5); background: var(--soft); border-radius: var(--radius); }
.pick-out svg { width: 140px; height: 140px; color: var(--ink); }
.pick-out .k { font: 500 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--s-3); }
.pick-out .k:first-child { margin-top: 0; }
.pick-out .m { font-size: 22px; font-weight: 600; }
.pick-out p { margin: 2px 0 0; }
@media (max-width: 560px) { .pick-out { grid-template-columns: 1fr; } .pick-out svg { width: 96px; height: 96px; } }

/* ---------- LinkedIn-like look (31.10.2026): shapes and colours on top of the components above ---------- */
h1, h2, h3, .logo { font-family: var(--head); font-weight: 800; letter-spacing: -.02em; }
h3 { font-weight: 700; }
h1 .mark, h2 .mark { background: none; color: var(--blue); }
code, .uri, .cdgrid span { font-family: var(--code); }
.mono, .date { font-feature-settings: "tnum"; }
.eyebrow { display: inline-block; align-self: flex-start; width: fit-content; background: var(--accent); color: var(--accent-ink);
  border-radius: 8px; padding: 4px 10px; font: 700 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.logo svg { color: var(--blue); }
.mainnav a.on { border-bottom-color: var(--blue); color: var(--blue); }
a:hover { text-decoration-color: var(--blue); }
:focus-visible { outline-color: var(--blue); }
.btn { border-radius: 999px; background: var(--blue); border-color: var(--blue); color: var(--on-blue); font-weight: 600; }
.btn:hover { background: var(--blue-2); border-color: var(--blue-2); }
.btn.ghost, .btn.grey { background: var(--paper); color: var(--blue); border: 1.5px solid var(--blue); }
.btn.ghost:hover, .btn.grey:hover { background: var(--soft); border-color: var(--blue-2); color: var(--blue-2); }
.fchips button.on { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.chip { font-family: var(--sans); }
.chip.check { background: var(--sky); }
.field:focus, .filters select:focus, .filters input:focus { border-color: var(--blue); }
.card { border: 0; background: var(--soft); border-radius: 18px; }
.grid > .card { border-radius: 18px; }
.callout { background: var(--sky); border-radius: 18px; }
.logo-tile { background: #fff; border-color: var(--line); border-radius: 12px; }
.days { background: var(--sky); color: var(--ink); border-radius: 999px; padding: 3px 10px; }
.days.soon { background: var(--accent); color: var(--accent-ink); }
.sidenav a.on, .toc a.on { color: var(--blue); border-color: var(--blue); }
.codecards a:hover { border-color: var(--blue); }
.picker button[aria-pressed="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.scheme li::before { background: var(--blue); color: var(--on-blue); }

/* 31.10.2026 Ivan: solid blue map buttons pulled attention from the map; light blue and see-through instead */
.maptools .fchips button.on { background: color-mix(in srgb, var(--sky) 70%, transparent); border-color: color-mix(in srgb, var(--blue) 30%, transparent); color: var(--blue); }
.mapzoom { background: color-mix(in srgb, var(--sky) 65%, transparent); border-color: color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue); box-shadow: 0 2px 8px rgba(10, 102, 194, .10); backdrop-filter: blur(4px); }
.mapzoom:hover { background: var(--sky); border-color: color-mix(in srgb, var(--blue) 40%, transparent); color: var(--blue-2); }