/* lolpickem.com — main.css
   Hand-written, no build step, no external requests, no JS.
   Order: tokens → base → layout → header → page furniture → prose → related → footer → a11y */

/* ---------- 1. Tokens ---------- */
:root {
  /* Colour — dark is the default theme */
  --bg:            #0B0E12;
  --surface:       #12161C;
  --surface-2:     #1A2129;
  --line:          #2A323C;
  --line-soft:     #1E252E;
  --text:          #E6E9EE;
  --text-body:     #C9D1DB;   /* long-form body copy: 11.9:1 on --bg */
  --text-dim:      #9AA4B2;   /* meta, captions: 7.6:1 on --bg */
  --accent:        #35E0A1;   /* links, CTA, active state */
  --accent-strong: #7BEDC2;   /* link hover */
  --accent-ink:    #08120D;   /* text on an accent fill */
  --violet:        #B15CF5;   /* editorial labels, section eyebrows */
  --violet-pale:   #D6BEF0;
  --violet-tint:   #1B1426;
  --violet-line:   #3A2A52;
  --ember:         #FF7A59;   /* live state, upsets, warnings */
  --ember-tint:    #1C1512;
  --ember-line:    #4A2A20;
  --focus:         #7BEDC2;

  /* Type */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-ui);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-h1:    2rem;      /* 32px mobile */
  --fs-h2:    1.5rem;
  --fs-h3:    1.1875rem;
  --fs-body:  1.0625rem; /* 17px */
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.1;
  --lh-head:  1.25;
  --lh-body:  1.75;

  /* Spacing — 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Geometry */
  --measure: 68ch;
  --page-max: 1120px;
  --gutter: var(--s4);
  --radius: 10px;
  --radius-sm: 6px;
  --border: 1px solid var(--line);
}

@media (min-width: 600px) {
  :root { --gutter: var(--s5); --fs-h1: 2.5rem; --fs-h2: 1.75rem; --fs-h3: 1.3125rem; --fs-body: 1.125rem; }
}
@media (min-width: 1024px) {
  :root { --gutter: var(--s6); --fs-h1: 3.25rem; --fs-h2: 2rem; --fs-h3: 1.375rem; }
}

/* Dark only. No light theme — the site is dark in every OS setting.
   `color-scheme: dark` below makes scrollbars and form controls follow. */
:root { color-scheme: dark; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden; /* table overflow is handled by .scroll-x, never the page */
}

h1, h2, h3 {
  color: var(--text);
  font-family: var(--font-ui);
  line-height: var(--lh-head);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  margin: var(--s5) 0 var(--s3);
  max-width: 22ch;
}

p { text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
a:active { opacity: 0.8; }

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

/* ---------- 3. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main.wrap {
  padding-bottom: var(--s9);
}

/* Everything in the article column keeps a reading measure. */
main.wrap > * {
  max-width: var(--measure);
}

/* ---------- 4. Header ---------- */
header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 56px;
}

.brand {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 0;
}
.brand::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  flex: none;
}
.brand:hover { color: var(--text); text-decoration: none; }
.brand:hover::before { background: var(--accent-strong); }

header.site nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
header.site nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-dim);
}
header.site nav a:hover { color: var(--accent); text-decoration: none; }
header.site nav a[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---------- 5. Breadcrumb ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-dim);
  padding: var(--s4) 0 0;
}
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden="true"] { color: var(--line); }
.crumbs [aria-current="page"] { color: var(--text); }

/* ---------- 6. Updated line ---------- */
.updated {
  margin: 0 0 var(--s5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-dim);
}
.updated time { color: var(--text); font-weight: 600; }

/* ---------- 7. Table of contents ---------- */
.toc {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  margin: 0 0 var(--s6);
}
.toc-title {
  margin: 0 0 var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.toc li { counter-increment: toc; }
.toc a {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s2) 0 var(--s2) var(--s3);
  border-left: 2px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-body);
  min-height: 40px;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-dim);
}
.toc a:hover {
  border-left-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.toc a:hover::before { color: var(--accent); }

/* ---------- 8. Prose ---------- */
.prose {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.prose > * { margin-block: 0 var(--s5); }
.prose > *:last-child { margin-bottom: 0; }

.prose h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-block: var(--s7) var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 72px; /* sticky header clearance for #anchor jumps */
}
.prose h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-block: var(--s6) var(--s2);
  scroll-margin-top: 72px;
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.prose p { margin-block: 0 var(--s5); }
.prose strong { color: var(--text); font-weight: 700; }

.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }

.prose ul, .prose ol { padding-left: var(--s5); margin-block: 0 var(--s5); }
.prose li { margin-bottom: var(--s2); padding-left: var(--s1); }
.prose li::marker { color: var(--accent); }
.prose ol li::marker { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.9em; }
.prose li > ul, .prose li > ol { margin-top: var(--s2); }

.prose img {
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  margin-block: var(--s6);
}

.prose blockquote {
  margin: var(--s6) 0;
  padding: var(--s4) var(--s5);
  background: var(--violet-tint);
  border: 1px solid var(--violet-line);
  border-radius: var(--radius);
  color: var(--text-body);
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: var(--s3); }
.prose blockquote::before {
  content: "Note";
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
}

/* Tables — scroll inside the box, never the page */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
  margin-block: var(--s6);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.scroll-x table { margin: 0; border: 0; }
.prose table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.prose caption {
  caption-side: top;
  text-align: left;
  padding: var(--s3) var(--s4);
  font-size: var(--fs-small);
  color: var(--text-dim);
}
.prose th, .prose td {
  padding: var(--s3) var(--s4);
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.prose thead th {
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td:first-child { color: var(--text); font-weight: 600; }

/* FAQ — native <details>, no JS */
.prose details {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 0;
}
.prose details + details { margin-top: 0; }
.prose details:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
.prose summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text);
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--accent);
  transition: transform 0.15s ease;
}
.prose details[open] > summary::after { content: "\2212"; }
.prose summary:hover { color: var(--accent); }
.prose details > *:not(summary) { margin-block: 0 var(--s4); }
.prose details > p { color: var(--text-body); }

/* Card grid */
.prose ul.cards {
  list-style: none;
  padding: 0;
  margin-block: var(--s6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 560px) {
  .prose ul.cards { grid-template-columns: 1fr 1fr; }
}
.prose ul.cards li { margin: 0; padding: 0; }
.prose ul.cards li::marker { content: ""; }
.prose ul.cards a {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  height: 100%;
  padding: var(--s4);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  color: var(--text-body);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.prose ul.cards a strong {
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.35;
}
.prose ul.cards a span {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-dim);
}
.prose ul.cards a:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  text-decoration: none;
}
.prose ul.cards a:hover strong { color: var(--accent); }

/* ---------- 9. Related ---------- */
.related {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 2px solid var(--line);
}
.related-title {
  margin: 0 0 var(--s4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
}
.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}
.related li {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.related li:last-child { border-bottom: 0; }
.related a {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  min-height: 32px;
}
.rel-desc {
  display: block;
  margin-top: var(--s1);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-dim);
}

/* ---------- 10. Footer ---------- */
footer.site {
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  padding-block: var(--s7);
  margin-top: var(--s8);
}
footer.site p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-dim);
}
footer.site a { color: var(--text-dim); text-decoration: underline; }
footer.site a:hover { color: var(--accent); }

/* ---------- 11. Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
summary:focus-visible { outline-offset: -3px; }

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

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 20;
  padding: var(--s3) var(--s4);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--s2); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  header.site, .toc, .related { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- 13. Diagrams ---------- */
/* Схемы вставляются шорткодом {{diagram:name}} и приходят как <figure class="diagram">. */

.prose .diagram {
  margin: var(--s7) 0;
  padding: 0;
  max-width: 100%;
}

.prose .diagram img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg);
}

.prose .diagram figcaption {
  margin-top: var(--s3);
  padding-left: var(--s3);
  border-left: 2px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-dim);
  text-wrap: pretty;
}
/* ---------- 14. Header, navigation, footer ---------- */
/* Шапка и подвал на фиолетовой подложке: отделяет обвязку от полотна статьи,
   не выламываясь из тёмной темы. --violet-tint из токенов, не новый цвет. */

header.site,
footer.site {
  background: var(--violet-tint);
  border-color: var(--violet-line);
}

header.site { border-bottom: 1px solid var(--violet-line); }

/* Знак бренда рисуется инлайновым SVG, квадрат из базовых стилей не нужен */
.brand::before { content: none; }
.brand { gap: var(--s3); }
.brand-mark { flex: none; display: block; border-radius: var(--radius-sm); }

/* ---- меню ---- */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.site-nav .nav-link,
.nav-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.site-nav .nav-link:hover,
.nav-menu > summary:hover { color: var(--accent); text-decoration: none; }

.site-nav .nav-link[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Выпадающий список на <details> — без единой строки JS */
.nav-menu { position: relative; }
.nav-menu > summary {
  cursor: pointer;
  list-style: none;
  gap: var(--s2);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-menu[open] > summary { color: var(--accent); }
.nav-menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

.nav-panel {
  position: absolute;
  top: calc(100% + var(--s2));
  right: 0;
  z-index: 20;
  min-width: 17rem;
  padding: var(--s2);
  background: var(--surface-2);
  border: 1px solid var(--violet-line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
}
.nav-panel a {
  display: block;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  line-height: 1.4;
}
.nav-panel a:hover { background: var(--bg); text-decoration: none; }
.nav-panel a[aria-current="page"] { background: var(--bg); }
.nav-panel strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}
.nav-panel a[aria-current="page"] strong { color: var(--accent); }
.nav-panel span {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--text-dim);
}

/* На узких экранах панель раскрывается на всю ширину шапки */
@media (max-width: 560px) {
  .nav-panel {
    position: fixed;
    top: 56px;
    left: var(--gutter);
    right: var(--gutter);
    min-width: 0;
  }
  .site-nav { gap: 0; }
  .site-nav .nav-link, .nav-menu > summary { padding: 0 var(--s2); }
}

/* ---- подвал ---- */

footer.site {
  margin-top: var(--s9);
  padding-block: var(--s7) var(--s5);
  border-top: 1px solid var(--violet-line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s6) var(--s5);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s5); } }

.footer-brand p {
  margin: var(--s3) 0 0;
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-dim);
}

.footer-title {
  margin: 0 0 var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-pale);
}

.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin: 0 0 var(--s2); }
.footer-col a {
  font-size: var(--fs-small);
  color: var(--text-body);
}
.footer-col a:hover { color: var(--accent); }

.footer-note {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-dim);
}
.footer-note strong { color: var(--text); }

.footer-bottom {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--violet-line);
}
.footer-bottom p {
  margin: 0;
  max-width: 76ch;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.footer-meta { margin-top: var(--s2) !important; opacity: 0.85; }
/* ---------- 15. Desktop layout: sticky TOC sidebar ---------- */
/* Колонка текста держит меру чтения 68ch, а свободное поле справа занимает
   оглавление. До 1080px раскладка прежняя: оглавление в потоке над текстом. */

@media (min-width: 1080px) {
  main.wrap {
    display: grid;
    grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
    column-gap: var(--s8);
    align-items: start;
  }

  main.wrap > * {
    grid-column: 1;
    max-width: 100%;
  }

  main.wrap > .toc {
    grid-column: 2;
    grid-row: 1 / span 100;
    position: sticky;
    top: calc(56px + var(--s5));
    margin: var(--s5) 0 0;
    align-self: start;
    max-height: calc(100vh - 56px - var(--s7));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* ---------- 16. Light header and footer ---------- */
/* Обвязка на светлой фиолетовой подложке. Мятный акцент на светлом нечитаем
   (контраст ~1.7:1), поэтому у шапки и подвала своя палитра с тёмно-фиолетовым
   акцентом. Знак бренда остаётся тёмным квадратом — как фавикон. */

header.site,
footer.site {
  --hdr-bg:     #F3F0FA;
  --hdr-text:   #1D1730;
  --hdr-dim:    #574E6E;
  --hdr-accent: #6A31C9;
  --hdr-line:   #DCD3EF;

  background: var(--hdr-bg);
  color: var(--hdr-text);
  border-color: var(--hdr-line);
}

header.site { border-bottom: 1px solid var(--hdr-line); }
footer.site { border-top: 1px solid var(--hdr-line); }

header.site .brand,
footer.site .brand { color: var(--hdr-text); }
header.site .brand:hover,
footer.site .brand:hover { color: var(--hdr-accent); }

/* ---- меню на светлом ---- */

.site-nav .nav-link,
.nav-menu > summary { color: var(--hdr-dim); }

.site-nav .nav-link:hover,
.nav-menu > summary:hover,
.nav-menu[open] > summary { color: var(--hdr-accent); }

.site-nav .nav-link[aria-current="page"] {
  color: var(--hdr-accent);
  box-shadow: inset 0 -2px 0 var(--hdr-accent);
}

.nav-panel {
  background: #FFFFFF;
  border-color: var(--hdr-line);
  box-shadow: 0 12px 32px rgb(29 23 48 / 0.18);
  min-width: 14rem;
}
header.site .nav-panel a {
  display: block;
  color: var(--hdr-text);
  font-size: var(--fs-small);
  font-weight: 600;
}
.nav-panel a:hover,
.nav-panel a[aria-current="page"] { background: var(--hdr-bg); color: var(--hdr-accent); }

/* ---- подвал на светлом ---- */

.footer-brand p,
.footer-note,
.footer-bottom p { color: var(--hdr-dim); }

.footer-note strong { color: var(--hdr-text); }
.footer-title { color: var(--hdr-accent); }

.footer-col a { color: var(--hdr-text); }
.footer-col a:hover { color: var(--hdr-accent); }

.footer-bottom { border-top: 1px solid var(--hdr-line); }

/* Дисклеймер шёл в колонку на пол-экрана: его перебивал footer.site p с max-width 60ch.
   Селектор должен быть не слабее по специфичности, иначе правило игнорируется. */
footer.site .footer-bottom p { max-width: none; }
footer.site .footer-brand p { max-width: 34ch; }

/* Фокус на светлом фоне мятным кольцом не виден */
header.site :focus-visible,
footer.site :focus-visible { outline-color: var(--hdr-accent); }
/* Индикатор активного пункта: полоса под текстом, а не inset-тень —
   тень повторяла скругление кнопки и читалась как дуга. */
.site-nav .nav-link[aria-current="page"] {
  position: relative;
  box-shadow: none;
}
.site-nav .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--s3);
  right: var(--s3);
  bottom: 8px;
  height: 2px;
  background: var(--hdr-accent);
  border-radius: 2px;
}

/* Подсказка, что таблица прокручивается вбок: колонка текста узкая, и без неё
   обрезанная таблица выглядит сломанной. */
.prose .scroll-x {
  position: relative;
  background:
    linear-gradient(to right, var(--bg) 30%, transparent),
    linear-gradient(to left, var(--bg) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.4), transparent),
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.4), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}