/*
  Deterministic beautiful-site shell chrome (header burger, drawer, breadcrumbs, footer).
  Loaded after main.css; uses theme CSS variables from the LLM-generated palette.
*/

/* Reference logo ratio (mostbeteg.app: width="800" height="128") */
body.mb-site {
  margin: 0;
  --mb-logo-ratio: 800 / 128;
  --mb-logo-header-height: 40px;
  --mb-logo-footer-max-width: 24%;
  --mb-logo-footer-max-cap: 30%;
}

/* Shell chrome typography — header/footer live outside .mb-article after convert. */
body.mb-site {
  --mb-font: var(
    --mb-font,
    "Inter",
    "Noto Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif
  );
}

body.mb-site,
body.mb-site .mb-site-header,
body.mb-site .mb-page-strip,
body.mb-site .mb-site-footer,
body.mb-site .mb-site-drawer,
body.mb-site .mb-site-drawer__panel {
  font-family: var(--mb-font);
}

/* Burger toggle */
body.mb-site .mb-site-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mb-border, rgba(227, 178, 87, 0.28));
  border-radius: var(--mb-radius-sm, 12px);
  background: rgba(0, 0, 0, 0.22);
  color: var(--mb-text, #fff6dc);
  cursor: pointer;
}

body.mb-site .mb-site-burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.mb-site.mb-site-nav-open .mb-site-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.mb-site.mb-site-nav-open .mb-site-burger__bar:nth-child(2) {
  opacity: 0;
}

body.mb-site.mb-site-nav-open .mb-site-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Off-canvas drawer — viewport-sized overlay (header backdrop-filter creates a fixed containing block). */
body.mb-site .mb-site-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  /* Clip the closed panel: it rests at translateX(100%), i.e. one panel-width past
     the right edge. The header's backdrop-filter makes this "fixed" box a containing
     block, so that offset counted toward document scroll width and every page had a
     horizontal scrollbar with a strip of empty space beside the content. */
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  background: color-mix(in srgb, var(--mb-panel, #040201) 55%, transparent);
  opacity: 0;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

body.mb-site.mb-site-nav-open .mb-site-drawer {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

body.mb-site .mb-site-drawer__panel {
  width: min(100%, 320px);
  max-width: 100%;
  height: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
  overflow: auto;
  padding: clamp(18px, 4vw, 28px);
  color: var(--mb-text, #fff6dc);
  /* Opaque base under the gradient: theme panels carry alpha (KZ ships
     --mb-panel: rgba(45,13,8,.92) / --mb-panel-2: .86), so the open menu let the
     hero art and the header CTA show through it. */
  background-color: var(--mb-bg, #120a08);
  background-image:
    linear-gradient(
      180deg,
      var(--mb-panel, var(--mb-panel-2, rgba(20, 16, 24, 0.98))),
      var(--mb-panel-2, var(--mb-panel, rgba(12, 10, 16, 0.88)))
    );
  border-inline-start: 1px solid var(--mb-border, rgba(227, 178, 87, 0.28));
  box-shadow: var(--mb-shadow, 0 22px 70px rgba(0, 0, 0, 0.42));
  transform: translateX(100%);
  transition: transform 0.22s ease;
}

body.mb-site[dir="rtl"] .mb-site-drawer__panel {
  transform: translateX(-100%);
}

body.mb-site.mb-site-nav-open .mb-site-drawer__panel {
  transform: translateX(0);
}

/* Reset inline dropdown rules from main.css — shell owns off-canvas layout */
body.mb-site .mb-site-drawer {
  inset: unset !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100vw !important;
  height: 100dvh !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  /* Was `visible !important`, which let the closed panel (translateX(100%))
     stick out one panel-width past the right edge and stretch document scroll
     width — a horizontal scrollbar on every page. The panel scrolls itself. */
  overflow: hidden !important;
  /* The open menu must outrank anything the theme paints. main.css is generated
     per site, so its stacking values vary (this run alone ships 50, 999, 1000,
     1200 and 9999) — the shell's plain `z-index: 1200` only held by luck, and a
     theme rule at 1200 wins on DOM order alone. Pin it above every theme value. */
  z-index: 999999 !important;
}

body.mb-site .mb-site-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.mb-site .mb-site-drawer__nav a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--mb-radius-sm, 12px);
  color: var(--mb-text-soft, #ead8b1);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

body.mb-site .mb-site-drawer__nav a:hover,
body.mb-site .mb-site-drawer__nav a:focus-visible {
  color: var(--mb-gold-2, #ffd985);
  border-color: var(--mb-border, rgba(227, 178, 87, 0.28));
  background: color-mix(
    in srgb,
    var(--mb-gold-2, var(--mb-gold, var(--mb-primary, #ffd985))) 8%,
    transparent
  );
}

body.mb-site .mb-site-drawer__nav a[aria-current="page"] {
  color: var(--mb-teal, var(--mb-primary, var(--mb-red, #63ded2)));
  border-color: color-mix(
    in srgb,
    var(--mb-teal, var(--mb-primary, var(--mb-red, #63ded2))) 35%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--mb-teal, var(--mb-primary, var(--mb-red, #63ded2))) 10%,
    transparent
  );
}

/* Header layout: logo left, actions right (override theme mobile column stack) */
body.mb-site .mb-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 18px);

  /* Same container geometry as .mb-page-strip__inner below, and for one reason:
     the logo's left edge and the breadcrumbs' left edge must land on one line.
     The strip is pinned here in shell.css, but main.css is LLM-authored per site
     and drifts — it wrote `width: min(100%, 1120px)` + `padding-inline:
     clamp(1rem, 4vw, 1.5rem)` for the header, which puts the logo 24px to the
     right of the crumbs at desktop. Pinning only one of the two containers is
     what created the gap, so both are pinned. padding-block is deliberately
     left to the theme. */
  width: 100%;
  max-width: calc(
    var(--mb-container, 1120px) + var(--mb-page-pad, 28px) + var(--mb-page-pad, 28px)
  );
  margin-inline: auto;
  padding-inline: var(--mb-page-pad, clamp(16px, 3.4vw, 28px));
}

body.mb-site .mb-site-brand {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

body.mb-site .mb-site-header .mb-site-brand__logo {
  display: block;
  max-height: var(--mb-logo-header-height);
  max-width: 100%;
  width: auto;
  height: auto;
  aspect-ratio: var(--mb-logo-ratio);
  object-fit: contain;

  /* Логотип-PNG несёт собственную прозрачную кайму, поэтому его коробка
     выравнена по контейнеру, а видимая надпись — нет. Кайма пропорциональна
     размеру отрисовки: на мобильной (82px) это 2px и незаметно, на десктопе
     (250px) — 7px, и это видно.

     Проценты в `transform` считаются от собственной коробки элемента, а не от
     родителя, поэтому одно значение верно на любом размере. Величину измеряет
     `sitegen/logo_bleed.py` из самого файла и дописывает переменную к копии
     этого файла при сборке — поменяется логотип, поменяется и компенсация.
     Запасное значение 0% означает «не сдвигать». */
  transform: translateX(calc(-1 * var(--mb-logo-bleed-inline, 0%)));
}

body.mb-site .mb-site-footer__brand {
  display: block;
  flex-shrink: 0;
  width: min(var(--mb-logo-footer-max-width, 24%), var(--mb-logo-footer-max-cap, 30%));
  max-width: min(var(--mb-logo-footer-max-width, 24%), var(--mb-logo-footer-max-cap, 30%));
}

body.mb-site .mb-site-footer .mb-site-brand__logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--mb-logo-ratio);
  max-width: none;
  object-fit: contain;
}

body.mb-site .mb-site-header__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* Header CTA — deterministic pill button (LLM main.css may omit .mb-site-btn). */
body.mb-site .mb-site-btn,
body.mb-site .mb-site-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(
    in srgb,
    var(--mb-teal, var(--mb-primary, var(--mb-red, #63ded2))) 45%,
    transparent
  );
  color: var(--mb-on-accent, var(--mb-btn-text, #09100f));
  background: linear-gradient(
    135deg,
    var(--mb-teal, var(--mb-primary, var(--mb-red, var(--mb-pink, #63ded2)))),
    var(--mb-teal-2, var(--mb-primary-2, var(--mb-red-2, var(--mb-pink-2, #45cfc2))))
  );
  text-decoration: none;
  font-weight: 800;
  font-size: 0.94rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 0 24px color-mix(
    in srgb,
    var(--mb-teal, var(--mb-primary, var(--mb-red, #63ded2))) 22%,
    transparent
  );
  overflow-wrap: anywhere;
}

/* APK CTA — secondary outline style so it differs from Register. */
body.mb-site .mb-site-btn--apk,
body.mb-site .mb-site-drawer__cta--apk {
  color: var(--mb-text, #fff6dc);
  background: transparent;
  border: 1px solid color-mix(
    in srgb,
    var(--mb-gold, var(--mb-primary, var(--mb-teal, #e3b257))) 70%,
    transparent
  );
  box-shadow: none;
}

body.mb-site .mb-site-btn--apk:hover,
body.mb-site .mb-site-btn--apk:focus-visible,
body.mb-site .mb-site-drawer__cta--apk:hover,
body.mb-site .mb-site-drawer__cta--apk:focus-visible {
  filter: brightness(1.08);
  background: color-mix(
    in srgb,
    var(--mb-gold, var(--mb-primary, var(--mb-teal, #e3b257))) 16%,
    transparent
  );
  outline: none;
  text-decoration: none;
}

body.mb-site .mb-site-btn:hover,
body.mb-site .mb-site-btn:focus-visible,
body.mb-site .mb-site-drawer__cta:hover,
body.mb-site .mb-site-drawer__cta:focus-visible {
  filter: brightness(1.06);
  outline: none;
  text-decoration: none;
}

body.mb-site .mb-site-drawer__cta {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

body.mb-site .mb-site-drawer__cta + .mb-site-drawer__cta {
  margin-top: 10px;
}

/* Main content spacing below header chrome (override per-site main.css gaps). */
body.mb-site .mb-site-main {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0;
  padding-block: clamp(18px, 3vw, 34px) clamp(34px, 5vw, 64px);
  padding-inline: var(--mb-page-pad, var(--mb-site-gutter, clamp(16px, 3.4vw, 28px)));
}

body.mb-site .mb-site-main .mb-article,
body.mb-site main .mb-article {
  width: 100%;
  max-width: min(100%, var(--mb-container, 1120px));
  box-sizing: border-box;
}

body.mb-site {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body.mb-site {
    overflow-x: hidden;
  }
}

/* Drawer nav: normalize ul/li from LLM headers (avoid phantom scrollbars). */
body.mb-site .mb-site-drawer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.mb-site .mb-site-drawer__nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.mb-site .mb-site-drawer__panel {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.mb-site .mb-site-drawer__panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Hide legacy horizontal nav when drawer chrome is used */
body.mb-site .mb-site-header__inner > .mb-site-nav,
body.mb-site .mb-site-header__inner > .mb-main-nav {
  display: none;
}

/* Breadcrumbs inside header — compact strip, left-aligned */
body.mb-site .mb-site-header .mb-page-strip {
  border-block: none;
  border-top: 1px solid color-mix(
    in srgb,
    var(--mb-border, var(--mb-line, rgba(255, 255, 255, 0.12))) 60%,
    transparent
  );
  background: transparent;
  margin-block-end: 0;
}

body.mb-site .mb-site-header .mb-page-strip__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  width: 100%;
  max-width: calc(var(--mb-container, 1120px) + var(--mb-page-pad, 28px) + var(--mb-page-pad, 28px));
  margin-inline: auto;
  padding-inline: var(--mb-page-pad, clamp(16px, 3.4vw, 28px));
  padding-block: 8px;
}

body.mb-site .mb-site-header .mb-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--mb-muted, #c7ad7d);
  font-size: 0.93rem;
  line-height: 1.5;
}

body.mb-site .mb-breadcrumbs li + li::before {
  content: "/";
  margin-inline-end: 8px;
  color: var(--mb-muted-2, #9f8557);
}

body.mb-site .mb-breadcrumbs a {
  color: var(--mb-gold-2, #ffd985);
  text-decoration: none;
}

body.mb-site .mb-breadcrumbs a:hover,
body.mb-site .mb-breadcrumbs a:focus-visible {
  color: var(--mb-teal, #63ded2);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Footer: logo + wrapping inline nav links (reference: flex row, not columns) */
body.mb-site .mb-site-footer__top {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}

body.mb-site .mb-footer-nav {
  display: block !important;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0 !important;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow: visible !important;
}

/* Reference (mostbeteg.app/info): flex-wrap rows, each item grows to fill row width */
body.mb-site .mb-footer-nav__list {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  overflow: visible !important;
}

body.mb-site .mb-footer-nav__list > li {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 0;
}

body.mb-site .mb-footer-nav a,
body.mb-site .mb-footer-nav__link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  padding: 10px clamp(16px, 3vw, 30px) !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--mb-text-soft, #ead8b1);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.94rem, 1.7vw, 1rem);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transform: none !important;
  overflow-wrap: anywhere;
}

body.mb-site .mb-footer-nav a:hover,
body.mb-site .mb-footer-nav a:focus-visible,
body.mb-site .mb-footer-nav__link:hover,
body.mb-site .mb-footer-nav__link:focus-visible {
  color: var(--mb-gold-2, #ffd985);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transform: none;
  background: none;
}

body.mb-site .mb-footer-nav a[aria-current="page"],
body.mb-site .mb-footer-nav__link[aria-current="page"] {
  color: var(--mb-teal, #63ded2);
  background: none;
  border: none;
}

body.mb-site .mb-site-footer__copy {
  margin: 0;
  color: var(--mb-muted, #c7ad7d);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

body.mb-site .mb-site-footer__inner {
  display: grid;
  gap: clamp(16px, 3vw, 24px);
}

@media (min-width: 768px) {
  body.mb-site .mb-site-footer__top {
    grid-template-columns: min(var(--mb-logo-footer-max-width, 24%), var(--mb-logo-footer-max-cap, 30%)) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
  }

  body.mb-site .mb-site-footer__brand {
    width: 100%;
    max-width: none;
  }

  body.mb-site .mb-site-footer__top > .mb-footer-nav {
    justify-self: stretch;
    align-self: center;
  }
}

/* Compact one-row header on phone + tablet (incl. iPad landscape < 1024). */
@media (max-width: 1023px) {
  body.mb-site .mb-site-header__inner {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px;
  }

  body.mb-site .mb-site-header .mb-site-brand {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 24%;
    overflow: hidden;
    justify-content: flex-start !important;
  }

  body.mb-site .mb-site-header .mb-site-brand__logo {
    max-height: 20px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  body.mb-site .mb-site-header__actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 3px;
    min-width: 0;
  }

  body.mb-site .mb-site-btn {
    height: 30px;
    padding: 0 5px;
    font-size: clamp(0.54rem, 2.4vw, 0.64rem);
    width: auto;
    box-sizing: border-box;
  }

  body.mb-site .mb-site-burger {
    width: 30px;
    height: 30px;
    gap: 4px;
  }

  body.mb-site .mb-site-burger__bar {
    width: 14px;
  }

  body.mb-site .mb-site-drawer__cta {
    display: flex;
    margin-top: 14px;
  }

  body.mb-site .mb-site-drawer__cta + .mb-site-drawer__cta {
    margin-top: 10px;
  }

  body.mb-site .mb-site-header .mb-page-strip__inner {
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Stacked footer: logo spans full row width (reference mobile layout) */
  body.mb-site .mb-site-footer__top {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vw, 28px);
  }

  body.mb-site .mb-site-footer__brand {
    display: block;
    width: 100%;
    max-width: none;
  }

  body.mb-site .mb-site-footer .mb-site-brand__logo {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: var(--mb-logo-ratio);
    object-fit: contain;
  }
}

/* main.css stacks header nav pills at 380px; footer keeps reference row grow layout */
@media (max-width: 380px) {
  body.mb-site .mb-footer-nav a,
  body.mb-site .mb-footer-nav__link {
    flex-basis: auto !important;
  }
}

/* Drawer CTAs only needed when burger is the nav path (phone/tablet). */
@media (min-width: 1024px) {
  body.mb-site .mb-site-btn--apk,
  body.mb-site .mb-site-drawer__cta--apk {
    display: none !important;
  }

  body.mb-site .mb-site-drawer__cta {
    display: none;
  }
}

/* Article TOC (fair-pages-kit / pipeline-injected after hero) */
.mb-article .mb-toc,
.mbpk-article .mb-toc,
.mbpk-page .mb-article .mb-toc {
  width: 100%;
  max-width: var(--mb-container);
  margin-inline: auto;
  margin-block-end: var(--mb-stack-gap, var(--mb-section-gap, clamp(34px, 6vw, 64px)));
  padding: clamp(20px, 4vw, 36px) var(--mb-page-pad, var(--mb-gutter, clamp(16px, 3.4vw, 28px)));
  border: 1px solid var(--mb-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--mb-radius-lg, 22px);
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--mb-gold, var(--mb-primary, #e3b257)) 14%, transparent), transparent 16rem),
    linear-gradient(180deg, var(--mb-panel, var(--mb-panel-2, rgba(20, 16, 24, 0.94))), var(--mb-panel-2, rgba(12, 10, 16, 0.88)));
  box-shadow: var(--mb-shadow, 0 22px 70px rgba(0, 0, 0, 0.42));
}

.mb-article .mb-toc__summary,
.mbpk-article .mb-toc__summary,
.mbpk-page .mb-article .mb-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mb-article .mb-toc__summary::-webkit-details-marker,
.mbpk-article .mb-toc__summary::-webkit-details-marker,
.mbpk-page .mb-article .mb-toc__summary::-webkit-details-marker {
  display: none;
}

.mb-article .mb-toc__summary::after,
.mbpk-article .mb-toc__summary::after,
.mbpk-page .mb-article .mb-toc__summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--mb-border-strong, rgba(255, 255, 255, 0.24));
  border-radius: var(--mb-radius-sm, 12px);
  color: var(--mb-gold-2, #ffd985);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}

.mb-article .mb-toc[open] .mb-toc__summary::after,
.mbpk-article .mb-toc[open] .mb-toc__summary::after,
.mbpk-page .mb-article .mb-toc[open] .mb-toc__summary::after {
  content: "−";
}

.mb-article .mb-toc__title,
.mbpk-article .mb-toc__title,
.mbpk-page .mb-article .mb-toc__title {
  margin: 0;
  color: var(--mb-gold-2, #ffd985);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.25;
}

.mb-article .mb-toc__list,
.mbpk-article .mb-toc__list,
.mbpk-page .mb-article .mb-toc__list {
  margin: clamp(14px, 2.5vw, 20px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(8px, 1.5vw, 12px);
}

.mb-article .mb-toc__list--sub,
.mbpk-article .mb-toc__list--sub,
.mbpk-page .mb-article .mb-toc__list--sub {
  margin: clamp(8px, 1.5vw, 10px) 0 0;
  padding-left: clamp(12px, 2vw, 18px);
  border-left: 1px solid var(--mb-border, rgba(255, 255, 255, 0.12));
}

.mb-article .mb-toc__item,
.mbpk-article .mb-toc__item,
.mbpk-page .mb-article .mb-toc__item {
  margin: 0;
}

.mb-article .mb-toc__link,
.mbpk-article .mb-toc__link,
.mbpk-page .mb-article .mb-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--mb-radius-sm, 12px);
  color: var(--mb-text, var(--mb-ink, #f2f2ee));
  text-decoration: none;
  background: color-mix(in srgb, var(--mb-text, var(--mb-ink, #f2f2ee)) 3%, transparent);
  border: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.mb-article .mb-toc__num,
.mbpk-article .mb-toc__num,
.mbpk-page .mb-article .mb-toc__num {
  flex: 0 0 auto;
  min-width: 2.2rem;
  color: var(--mb-gold, #e3b257);
  font-variant-numeric: tabular-nums;
}

.mb-article .mb-toc__text,
.mbpk-article .mb-toc__text,
.mbpk-page .mb-article .mb-toc__text {
  flex: 1 1 auto;
}

.mb-article .mb-toc__link:hover,
.mbpk-article .mb-toc__link:hover,
.mbpk-page .mb-article .mb-toc__link:hover,
.mb-article .mb-toc__link:focus-visible,
.mbpk-article .mb-toc__link:focus-visible,
.mbpk-page .mb-article .mb-toc__link:focus-visible {
  color: var(--mb-gold-2, #ffd985);
  border-color: var(--mb-border-strong, rgba(255, 255, 255, 0.24));
  background: color-mix(
    in srgb,
    var(--mb-gold, var(--mb-primary, #e3b257)) 8%,
    transparent
  );
}

@media (max-width: 640px) {
  .mb-article .mb-toc,
  .mbpk-article .mb-toc,
  .mbpk-page .mb-article .mb-toc {
    max-width: 100%;
  }
}

/* Hero: single-column stack at every breakpoint (media → CTA → copy share one column). */
body.mb-site .mb-hero,
body.mb-site .mb-hero.mb-row--stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "media"
    "cta"
    "copy";
}

/* Измерено из самого файла логотипа при сборке (mostbet-logo.png): прозрачная кайма слева. */
:root { --mb-logo-bleed-inline: 2.5391%; }

/* Locale switcher — top of mb-site drawer */
body.mb-site .mb-site-drawer__panel .mb-lang-switch {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}
body.mb-site .mb-lang-switch__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.95);
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	white-space: nowrap;
	line-height: 1.15;
}
body.mb-site .mb-lang-switch__link:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}
body.mb-site .mb-lang-switch__link.is-active {
	background: rgba(255, 179, 0, 0.22);
	border-color: rgba(255, 179, 0, 0.65);
	color: #fff;
}

/* Override main.css: keep copyright below logo+nav, not beside them */
body.mb-site .mb-site-footer__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(16px, 3vw, 24px);
  align-items: stretch;
}
body.mb-site .mb-footer-nav__list > li {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
@media (max-width: 639px) {
  body.mb-site .mb-footer-nav__list > li {
    flex-basis: auto !important;
  }
}

/* Prevent horizontal document scroll (drawer 100vw + wide tables) */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #050505;
}
@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}
body.mb-site {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  box-sizing: border-box;
}
@supports not (overflow: clip) {
  body.mb-site {
    overflow-x: hidden !important;
  }
}
/* Closed drawer must not expand document scrollWidth via translateX(100%) */
body.mb-site .mb-site-drawer,
.mb-site-drawer {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
  contain: paint;
}
body.mb-site .mb-site-main,
body.mb-site .mb-article {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Wide data tables scroll inside their box instead of the page */
body.mb-site .mb-table,
body.mb-site table.mb-table {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.mb-site .mb-table thead,
body.mb-site .mb-table tbody,
body.mb-site .mb-table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* Header APK/download CTA — accent pill beside registration.
   Use a.mb-site-btn.mb-site-btn--apk so we beat body.mb-site a.mb-site-btn in main.css. */
body.mb-site a.mb-site-btn.mb-site-btn--apk,
body.mb-site .mb-site-drawer__cta.mb-site-drawer__cta--apk {
  border-color: color-mix(in srgb, var(--mb-accent, #ffb300) 55%, transparent);
  color: var(--mb-on-accent-2, #1a0f08);
  background: linear-gradient(
    135deg,
    var(--mb-accent, #ffb300),
    var(--mb-accent-2, #e6a200)
  );
  box-shadow: 0 0 20px color-mix(in srgb, var(--mb-accent, #ffb300) 24%, transparent);
}

body.mb-site a.mb-site-btn.mb-site-btn--apk:hover,
body.mb-site a.mb-site-btn.mb-site-btn--apk:focus-visible,
body.mb-site .mb-site-drawer__cta.mb-site-drawer__cta--apk:hover,
body.mb-site .mb-site-drawer__cta.mb-site-drawer__cta--apk:focus-visible {
  color: var(--mb-on-accent-2, #1a0f08);
  background: linear-gradient(
    135deg,
    var(--mb-accent, #ffb300),
    var(--mb-accent-2, #e6a200)
  );
  filter: brightness(1.05);
}

body.mb-site .mb-site-header__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}

@media (min-width: 1024px) {
  /* APK/download CTA is mobile+tablet only; desktop keeps registration only. */
  body.mb-site .mb-site-btn--apk,
  body.mb-site .mb-site-drawer__cta--apk {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.mb-site .mb-site-header {
    overflow-x: clip;
  }

  body.mb-site .mb-site-header__inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    padding: 8px 6px;
    box-sizing: border-box;
  }

  body.mb-site .mb-site-header .mb-site-brand {
    flex: 0 1 24%;
    min-width: 0;
    max-width: 24%;
  }

  body.mb-site .mb-site-header .mb-site-brand__logo {
    max-height: 20px;
    max-width: 100%;
    width: auto;
    height: auto;
  }

  body.mb-site .mb-site-header__actions {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    max-width: none;
    min-width: 0;
  }

  body.mb-site .mb-site-btn,
  body.mb-site .mb-site-btn--apk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 0 5px;
    font-size: clamp(0.54rem, 2.4vw, 0.64rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    flex-shrink: 1;
    min-width: 0;
  }

  body.mb-site .mb-site-burger {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }

  body.mb-site .mb-site-burger__bar {
    width: 14px;
  }
}

body.mb-site .mb-site-drawer__cta--apk {
  margin-top: 8px;
}

/* Drawer CTA fit — avoid clipping long register/download labels */
body.mb-site a.mb-site-drawer__cta,
body.mb-site .mb-site-drawer__cta {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.15;
}