/* ═══════════════════════════════════════════════════════════════
   Визуальный язык документации Тренерграм.

   Дизайн-система перенесена из lovix-docs (DOCS_RULES.md, п. 1.1
   «Документация и спеки — белая, чистая»): трёхколоночный каркас
   264 / 1fr / 252, липкая белая шапка 56px с поиском по центру,
   меню группами слева, «На этой странице» справа, карточки
   «Назад / Далее» внизу.

   Отличие одно и намеренное: акцент — фирменный оранжевый Тренерграм
   #FC5200, а не розовый Lovix #db2777. Токены совпадают с прототипом
   (assets/theme-01-strava.css), чтобы документация, заглавная и
   прототип читались как один продукт.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --text:#1c2330; --muted:#5b6474; --dim:#8b93a5;
  --line:#e3e6ec; --line2:#c9cedb;
  --band:#f6f7fa;
  --acc:#FC5200; --acc-bg:#FFF1EA; --acc-br:#FFD6C2;
  --uih:60px;

  /* Проброс в переменные Material — продублирован ниже на
     [data-md-color-scheme], иначе палитра темы перебивает по специфичности. */
  --md-primary-fg-color:#ffffff;
  --md-primary-fg-color--dark:#ffffff;
  --md-primary-bg-color:var(--text);
  --md-primary-bg-color--light:var(--muted);
  --md-accent-fg-color:var(--acc);
  --md-default-fg-color:var(--text);
  --md-default-fg-color--light:var(--muted);
  --md-default-fg-color--lighter:var(--dim);
  --md-typeset-a-color:var(--acc);
  --md-code-bg-color:var(--band);
  --md-code-fg-color:#333;
}

/* Material объявляет часть переменных на [data-md-color-primary] и
   [data-md-color-scheme] — специфичность (0,1,0) против (0,0,0) у :root.
   Повторяем ключевые здесь, иначе побеждает индиго темы. */
[data-md-color-scheme="default"]{
  --md-primary-fg-color:#ffffff;
  --md-primary-bg-color:var(--text);
  --md-accent-fg-color:var(--acc);
  --md-default-fg-color:var(--text);
  --md-default-fg-color--light:var(--muted);
  --md-default-fg-color--lighter:var(--dim);
  --md-typeset-a-color:var(--acc);
  --md-code-bg-color:var(--band);
}

/* ── Каркас: во всю ширину, как GitBook ──────────────────────
   Меню прижато к левому краю, оглавление — к правому, текст —
   в колонке до 920px посередине. Ничего не центрируется «в целом»:
   на 1920 пустых полей по бокам нет, на ноутбуке ничего не теснится. */
.md-grid{max-width:none}
.md-main__inner{margin:0;display:flex}
/* Три колонки во всю ширину: меню 300 / текст — всё остальное / оглавление 300.
   Текст не центрируется и не ограничен по ширине: таблицы требований
   занимают всю среднюю колонку. */
.md-sidebar{width:300px;padding:0;top:var(--uih)}
.md-sidebar--secondary{width:300px}
.md-sidebar__scrollwrap{max-height:calc(100vh - var(--uih))}
.md-content{max-width:none;flex:1;min-width:0}
.md-content__inner,
[dir=ltr] .md-sidebar--primary:not([hidden])~.md-content>.md-content__inner,
[dir=ltr] .md-sidebar--secondary:not([hidden])~.md-content>.md-content__inner{
  max-width:none;margin:0;padding:6px 40px 56px 36px}
.md-content__inner::before{display:none}

/* ── Шапка ────────────────────────────────────────────────── */
.md-header{height:var(--uih);background:#fff;color:var(--text);
  border-bottom:1px solid var(--line);box-shadow:none!important}
.md-header__inner{height:var(--uih);padding:0 22px;gap:12px}
.md-header__button{color:var(--muted)}
.md-source__facts,.md-source__repository{display:none}
.md-source{font-size:0}
.md-header__source{width:auto;max-width:none;margin-left:4px}
.md-header__source .md-source__icon svg{width:20px;height:20px}
.md-header__button:hover{color:#000;opacity:1}
/* Логотип — wordmark со срезом 45°, Т и М акцентом; название сайта —
   тихая подпись «Документация» рядом. Заголовок страницы в шапку не
   переезжает: он и так первый на экране. */
.md-header__button.md-logo{padding:0;margin:0 2px 0 0;display:flex;align-items:center}
.md-header__button.md-logo:hover{opacity:1}
.tg-wm{display:inline-block;font:900 19px/1 "Montserrat",var(--md-text-font-family,sans-serif);
  letter-spacing:-.035em;color:#141414;text-transform:uppercase;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.tg-wm b{color:var(--acc);font-weight:inherit}
.md-header__title{font-size:.65rem;color:var(--dim);font-weight:600;margin-left:0;flex:0 0 auto;width:auto;height:auto;line-height:1}
.md-header__ellipsis{position:static;height:auto}
.md-header__topic{position:static;transform:none!important;opacity:1!important;font-weight:600;transition:none}
.md-header__topic[data-md-component=header-topic]{display:none}

/* Поиск — по центру шапки */
.md-search{margin:0 auto;flex:0 1 480px}
.md-search__form{height:36px;border-radius:10px;background:var(--band);
  border:1px solid var(--line);color:var(--dim)}
.md-search__form:hover{background:var(--band);border-color:var(--line2)}
.md-search__input{font-size:.65rem}
.md-search__input::placeholder{color:var(--dim)}
.md-search__icon{color:var(--dim)}
[data-md-toggle=search]:checked~.md-header .md-search__form{border-color:var(--acc);background:#fff}
.md-search__output{border-radius:12px;box-shadow:0 24px 70px rgba(28,35,48,.28)}
.md-search-result__meta{background:var(--band);color:var(--dim);font-size:.525rem;
  font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.md-search-result mark{background:none;color:var(--acc);font-weight:700}
.md-search-result__link:focus,.md-search-result__link:hover{background:var(--acc-bg)}

/* ── Левое меню ───────────────────────────────────────────── */
.md-sidebar--primary .md-sidebar__scrollwrap{border-right:1px solid var(--line);
  margin:0;padding:18px 18px 30px 22px}
.md-nav{font-size:.675rem}
.md-nav__title{display:none}
.md-nav__list{padding:0}
.md-nav__item{padding:0}
.md-nav__link{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;
  color:var(--muted);font-size:.7rem;line-height:1.4;font-weight:500;margin:1px 0}
.md-nav__link:hover,.md-nav__link:focus{color:#000;background:var(--band)}
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active:hover,
.md-nav__link--active,.md-nav__link[href].md-nav__link--active{
  color:var(--acc);background:var(--acc-bg);font-weight:600}
/* Заголовки групп — .sn-grp */
.md-nav--primary>.md-nav__list>.md-nav__item--section>.md-nav__link,
.md-nav__item--section>label.md-nav__link{
  font-size:.525rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--dim);margin:20px 10px 6px;padding:0;background:none;pointer-events:none}

/* ── Оглавление справа ────────────────────────────────────── */
.md-sidebar--secondary .md-sidebar__scrollwrap{border-left:1px solid var(--line);
  margin:0;padding:24px 22px 26px 14px}
/* Material переводит заголовок TOC как «Содержание»; в lovix-docs он
   называется «На этой странице» — отдельной настройки для строки нет,
   поэтому подменяем текст. */
.md-nav--secondary .md-nav__title{display:block;font-size:0;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;color:var(--dim);
  margin:0 0 10px 10px;padding:0;background:none;box-shadow:none}
.md-nav--secondary .md-nav__title::after{content:"На этой странице";font-size:11px}
.md-nav--secondary .md-nav__title .md-nav__button{display:none}
.md-nav--secondary .md-nav__link{font-size:.625rem;padding:5px 10px;border-radius:7px}
.md-nav--secondary .md-nav__item .md-nav__item .md-nav__link,
[dir=ltr] .md-nav--secondary .md-nav__item .md-nav__item .md-nav__link{
  padding-left:26px;color:var(--dim)}
.md-nav--secondary .md-nav__link--active{color:var(--acc);background:var(--acc-bg);font-weight:600}

/* ── Типографика контента ─────────────────────────────────── */
.md-typeset{font-size:.8rem;line-height:1.65;color:var(--text)}
.md-typeset h1{font-size:1.75rem;letter-spacing:-.5px;margin:28px 0 8px;
  color:var(--text);font-weight:700;line-height:1.2}
/* Линия над h2 — главный разделитель разделов в lovix-docs */
.md-typeset h2{font-size:1.1rem;margin:46px 0 12px;padding-top:22px;
  border-top:1px solid var(--line);letter-spacing:-.2px;font-weight:700;line-height:1.3}
.md-typeset h3{font-size:.825rem;margin:28px 0 8px;font-weight:700}
.md-typeset h4{font-size:.775rem;margin:20px 0 6px;font-weight:700}
.md-typeset p{margin:10px 0}
.md-typeset strong{color:#000;font-weight:700}
.md-typeset ul,.md-typeset ol{padding-left:24px;margin:10px 0}
.md-typeset li{margin-bottom:4px}
.md-typeset a{color:var(--acc)}
.md-typeset a:hover{text-decoration:underline}
.md-typeset hr{border-bottom:1px solid var(--line);margin:32px 0}

/* Таблицы — плотные, шапка на подложке, чётные строки чуть серые */
.md-typeset table:not([class]){font-size:.675rem;border:0;border-radius:0;
  box-shadow:none;display:block;overflow-x:auto}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td{border:1px solid var(--line);padding:7px 10px;
  text-align:left;vertical-align:top}
.md-typeset table:not([class]) th{background:var(--band);font-weight:700;color:var(--text);
  white-space:normal}
.md-typeset table:not([class]) tr:nth-child(even) td{background:#fafbfc}
.md-typeset table:not([class]) tr:hover{background:none}
@media(min-width:1081px){.md-typeset table:not([class]){display:table;width:100%}}
.md-typeset table:not([class]) td{white-space:normal}

/* Код */
.md-typeset code{background:var(--band);border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:.625rem;color:#8a3ffc}
.md-typeset pre>code{border:0;padding:16px;color:#333}
.md-typeset .highlight{border:1px solid var(--line);border-radius:10px;overflow:hidden}
/* ID требований в таблицах — чипы акцентом, как .md table code в lovix */
.md-typeset table:not([class]) code{background:var(--acc-bg);color:var(--acc);
  border:1px solid var(--acc-br);border-radius:6px;padding:2px 7px;font-size:.575rem;
  white-space:nowrap;display:inline-block;margin:1px 2px}

/* Цитата — акцентная полоса слева.
   Селектор с [dir=ltr]: у Material правила границ направление-зависимые
   ([dir=ltr] .md-typeset blockquote), специфичность выше простого. */
.md-typeset blockquote,[dir=ltr] .md-typeset blockquote{
  margin:14px 0;padding:12px 18px;border-left:3px solid var(--acc);
  background:var(--acc-bg);border-radius:0 8px 8px 0;color:#37415a}
.md-typeset blockquote>:first-child{margin-top:0}
.md-typeset blockquote>:last-child{margin-bottom:0}

/* Кнопка-ссылка (на прототип с главной) */
.md-typeset .md-button{border-radius:9px;border:1px solid var(--acc);color:var(--acc);
  font-size:.7rem;font-weight:600;padding:9px 18px}
.md-typeset .md-button:hover{background:var(--acc);color:#fff;border-color:var(--acc)}

/* ── Карточки «Назад / Далее» ─────────────────────────────── */
.md-footer{background:none;color:var(--text)}
.md-footer__inner{margin:44px auto 0;padding-top:26px;border-top:1px solid var(--line);
  gap:14px;opacity:1}
.md-footer__link{border:1px solid var(--line);border-radius:10px;padding:12px 16px;
  margin:0;opacity:1}
.md-footer__link:hover{border-color:var(--acc);opacity:1}
.md-footer__link:hover .md-footer__title{color:var(--acc)}
.md-footer__direction{font-size:.575rem;color:var(--dim);opacity:1}
.md-footer__title{font-size:.7rem;color:var(--text);font-weight:600;line-height:1.4;margin:0}
.md-footer__button{display:none}
.md-footer-meta{background:#fff;border-top:1px solid var(--line);color:var(--dim)}
.md-footer-meta .md-copyright{font-size:.6rem;color:var(--dim)}
.md-footer-meta a{color:var(--muted)}

/* ── Адаптив: как в lovix — TOC уходит первым, потом меню ─── */
@media(max-width:1160px){.md-sidebar--secondary{display:none}}
@media(max-width:1000px){
  .md-sidebar--primary{width:264px}
  .md-sidebar--primary .md-sidebar__scrollwrap{border-right:0}
  .md-nav--primary .md-nav__title{display:block;background:#fff;color:var(--text);
    box-shadow:none;border-bottom:1px solid var(--line)}
}
@media(max-width:600px){.md-header__title{display:none}}