/* Единый облик портала — по главной странице (дизайн v6).
 *
 * Страницы портала писались в разное время и живут на четырёх наборах стилей:
 * v6 (главная), hs.css (кабинеты и разделы), legal.css (документы) и
 * собственные стили внутри страниц. Переписывать их разметку опасно: в ней
 * работают тренажёр, кабинеты и урок. Поэтому единство даём слоем поверх —
 * он меняет только палитру, шрифт и облик общих деталей, не трогая ни одной
 * строки разметки и ни одного скрипта.
 *
 * Файл подключается последним, после собственных стилей страницы.
 */

/* ── палитра главной ── */
:root{
  /* v6 */
  --paper:#f5f5f7; --ink:#1d1d1f; --muted:#6e6e73; --line:#d2d2d7;

  /* имена из hs.css */
  --background:#f5f5f7;
  --surface:#ffffff;
  --surface-secondary:#ececee;
  --text-primary:#1d1d1f;
  --text-secondary:#6e6e73;
  --brand-dark:#1d1d1f;
  --brand-green:#2c2c2e;
  --accent-warm:#1d1d1f;
  --border:#e3e3e6;
  --border-strong:#d2d2d7;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  /* имена из собственных стилей страниц */
  --bg:#f5f5f7;
  --card:#ffffff;
  --accent:#1d1d1f;
  --accent-ink:#ffffff;      /* текст на акцентной заливке */
  --accent-text:#1d1d1f;
  --ink-2:#6e6e73;
  --sky:#1d1d1f; --sky-soft:#f0f0f2;
  --green:#1d1d1f; --green-soft:#f0f0f2;
  --warn:#8a6100; --warn-soft:#f6efe1;
  --bad:#9b2c22; --bad-soft:#f7ece9;

  /* тренажёр: акцент и подсветки. --red не трогаем — им помечены ошибки */
  --green2:#ececee; --lime:#d2d2d7;
}

/* ── типографика ── */
body{
  background:#f5f5f7;
  color:#1d1d1f;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:inherit;letter-spacing:-.02em;color:#1d1d1f}
h1{letter-spacing:-.03em}
p,li,td,th{font-family:inherit}
p{color:#6e6e73;line-height:1.62}
/* внутри тёмных плашек текст остаётся светлым */
.school p,.school h3,.school b,footer.dark p{color:inherit}

/* ── поверхности ── */
.card,.panel,.box,.tile,.grp,.note,.info .box{
  background:#fff;
  border-color:#e3e3e6;
}
.card,.panel,.grp{border-radius:18px}

/* ── кнопки как на главной ── */
.btn,.btn-sec,button.btn{
  font-family:inherit;
  border-radius:30px;
  letter-spacing:0;
}
.btn{
  background:linear-gradient(180deg,#505052 0%,#2c2c2e 48%,#171719 100%);
  border:1px solid #252527;
  color:#fff;
  box-shadow:inset 0 1px 1px #ffffff65,inset 0 -2px 2px #0008,0 4px 0 #09090a,0 9px 15px #0002;
}
.btn:hover{box-shadow:inset 0 1px 1px #ffffff65,inset 0 -2px 2px #0008,0 6px 0 #09090a,0 13px 20px #0002}
.btn-sec,.btn.sec,.btn.light{
  background:linear-gradient(180deg,#fff,#f0f0ed);
  border:1px solid #deded9;
  color:#1d1d1f;
  box-shadow:inset 0 1px 2px #fff,0 3px 0 #d0d0ca,0 6px 12px #00000014;
}

/* текст на тёмных заливках остаётся белым, как бы страница его ни называла */
.my-save,.btn-accent,button.accent{color:#fff}

/* цветные варианты кнопок на отдельных страницах: тот же вес селектора,
   иначе зелёная и оранжевая заливки переживают единый слой */
.btn.gr,.btn.green,.btn.primary{
  background:linear-gradient(180deg,#505052 0%,#2c2c2e 48%,#171719 100%)!important;
  color:#fff!important;border-color:#252527}
.btn.sec,.btn.light,.btn-sec{
  background:linear-gradient(180deg,#fff,#f0f0ed)!important;color:#1d1d1f!important;border-color:#deded9}

/* тренажёр: оранжевые заливки заданы прямыми значениями, переменными их не снять */
.room-btn{background:linear-gradient(180deg,#505052,#1d1d1f)!important;color:#fff!important;
  box-shadow:0 8px 18px -10px #0009,inset 0 1px 0 #ffffff33}
.guide-btn:hover{border-color:#1d1d1f!important}
.legal-links a:hover{color:#1d1d1f!important;border-color:#1d1d1f!important}
.v4photoHint{background:#f0f0f2!important;border-color:#e3e3e6!important}

/* ── шапка и подвал ── */
header.top,header.topbar,header.brandbar{
  background:#fffffff5;
  border-bottom:1px solid #e3e3e6;
  box-shadow:0 3px 6px #00000002,0 12px 30px #00000005;
}
.brand .logo-tx strong,.brand strong{letter-spacing:.07em}
footer,footer.foot{background:#fdfdfd;border-top:1px solid #e3e3e6}
footer a,footer.foot a{color:#6e6e73}

/* ── ссылки ── */
a{color:#1d1d1f}
main a:not(.btn):not(.chip):not(.pill):not(.brand){text-decoration-color:#c7c7cc}

/* тёмная тема на отдельных страницах спорит с единым светлым обликом */
@media (prefers-color-scheme:dark){
  :root{color-scheme:light}
}

/* ── единая шапка ──
 * Правила самодостаточные: на страницах со своими стилями классов .top и
 * .brand может не быть вовсе, и шапка осталась бы голой. Работает и с
 * обёрткой .wrap внутри, и без неё.
 */
header.top{
  position:sticky; top:0; z-index:20;
  background:#fffffff5; backdrop-filter:blur(20px);
  border-bottom:1px solid #e3e3e6;
  box-shadow:0 3px 6px #00000002,0 12px 30px #00000005;
  display:block; padding:0;
}
header.top>.wrap,header.top>.in,header.top{--edin-h:83px}
header.top>.wrap{max-width:1200px;margin:auto;padding:0 clamp(16px,4vw,36px);
  min-height:var(--edin-h);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
header.top>a.brand:first-child{margin-left:clamp(16px,4vw,36px)}
header.top:not(:has(>.wrap)){padding:0 clamp(16px,4vw,36px);min-height:var(--edin-h);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}

header.top .brand{display:flex;align-items:center;gap:10px;min-width:max-content;text-decoration:none}
header.top .logo-mark{display:block;flex:0 0 auto}
header.top .logo-mark img{display:block;width:52px;height:auto}
header.top .logo-tx{display:flex;flex-direction:column;gap:5px;line-height:1}
header.top .logo-tx small{font-family:inherit;font-weight:500;font-size:12px;line-height:1;letter-spacing:.26em;text-transform:uppercase;color:#57575c;white-space:nowrap}
header.top .logo-tx strong{font-family:inherit;font-weight:400;font-size:24px;line-height:1;letter-spacing:.07em;color:#1d1d1f;white-space:nowrap}

header.top nav{display:flex;gap:20px;font-size:14px;flex-wrap:wrap}
header.top nav a{color:#1d1d1f;text-decoration:none}
header.top nav a:hover{text-decoration:underline}
header.top .topright,header.top .acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
header.top>.wrap>.btn:last-child,header.top>.btn:last-child{margin-left:auto}
header.top .btn{padding:11px 20px;font-size:14px}

header.top .logo-tx small{display:block}
header.top .btn{flex:0 0 auto;width:auto;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:900px){
  header.top nav{display:none}
  header.top .logo-tx strong{font-size:21px}
}
@media (max-width:620px){
  header.top>.wrap,header.top:not(:has(>.wrap)){gap:8px;--edin-h:auto;padding-top:10px;padding-bottom:10px}
  header.top .acts{gap:6px}
  header.top .btn{padding:9px 13px;font-size:13px}
}
@media (max-width:420px){
  header.top .logo-mark img{width:38px}
  header.top .logo-tx small{display:none}     /* как на главной: на узком экране только название */
  header.top .logo-tx strong{font-size:19px}
}

/* ── единый подвал ──
 * Содержимое подвалов разное: в них живёт перелинковка, её мы не трогаем.
 * Приводим только облик.
 */
footer,footer.foot,footer.wrap,footer.credit{
  background:#fdfdfd; border-top:1px solid #e3e3e6; color:#6e6e73;
}
footer a{color:#6e6e73;text-decoration:none}
footer a:hover{text-decoration:underline}

/* ═════════ Правки по UI-аудиту 04.10.2026 ═════════
 * Каждое правило ниже подтверждено замером на живом сайте до правки.
 * Рискованное (единая шапка вместо восьми, шкалы отступов и радиусов, смена шрифта на веб-шрифт)
 * сюда не вошло: это отдельная работа с проверкой каждой страницы.
 */

/* 1. Один шрифт текста и логотипа. Раньше: системный (главная, предметы), Manrope (статьи — он
 *    приходил из tokens.css) и PT Serif в логотипе «Репетиторам». Для пользователя это выглядело
 *    как несколько разных сайтов. Переопределяем переменные шрифта: все страницы на токенах
 *    переходят на системный стек, как остальные. */
:root{
  --edin-sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-sans:var(--edin-sans);
  --font-head:var(--edin-sans);
}
header.top .brand,header.top .logo-tx small,header.top .logo-tx strong{font-family:var(--edin-sans)}

/* 2. Шапка не выталкивает страницу за край телефона. Блок кнопок был «не сжимать и не переносить»
 *    (flex:0 0 auto из hs.css) и на 390 px оказывался шире экрана: так страдали 12 страниц —
 *    каталог, психолог и десять страниц ЕГЭ. Теперь он сжимается, а на узком экране лишние
 *    второстепенные кнопки прячутся, если рядом есть главная. */
header.top .acts{flex:0 1 auto;min-width:0;justify-content:flex-end}
@media (max-width:600px){
  header.top .acts:has(>.btn:not(.btn-sec):not(.sec))>:is(.btn-sec,.sec){display:none}
}

/* 3. Статьи (шаблон с меню «Домашка · К школе · Каталог»): колонка для чтения по центру.
 *    Раньше текст был прижат к левому краю, а карточки растягивались на весь экран, и половина
 *    карточки пустовала. */
body:has(header.top nav.mainnav) main>.wrap{
  max-width:780px;margin-inline:auto;padding-inline:clamp(16px,4vw,24px);
}

/* 4. Главная: заголовки секций в одну шкалу. Было 30/34/48/59 px и трекинг от −2% до −4,6%:
 *    в «Всё. В одном месте.» буквы касались друг друга. */
.account h2{font-size:48px;letter-spacing:-.02em}
.stagehead h2{font-size:40px;letter-spacing:-.02em}
@media (max-width:760px){
  .account h2{font-size:37px}
  .stagehead h2{font-size:34px}
}
/* рукописный заголовок: пробел в шрифте слишком широкий, слова разъезжаются */
.hero h1.handwritten{word-spacing:-.12em}

/* 5. Контраст мелкого серого текста: номера «01–05» были #888 (3,5:1), подписи демо-кабинета #777.
 *    Нужно не меньше 4,5:1. */
.journey small,.mocktop,.mockstats span,.course small,.mock>p{color:#6e6e73}

/* 6. Цели нажатия не меньше 44×44 px: иконка поиска и бургер были около 26×30. */
.iconbtn,.mobilemenu summary{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
}

/* 7. Пояснение под кнопкой не вплотную к ней. */
.account .footnote{margin:16px 0 0}

/* 8. Таблицы внутри карточек (перевод баллов в оценку на страницах предметов) занимали треть
 *    ширины, а справа оставалась пустота. Теперь — на всю карточку. */
.card table{width:100%}

/* 9. Списки карточек предметов (каталог и 10 страниц ЕГЭ) имели в разметке зашитое число колонок,
 *    а встроенный стиль перебивает адаптивные правила hs.css: на телефоне оставалось 3–4 колонки,
 *    названия рвались по буквам («Ма-те-ма-ти-ка»), а страница уезжала за край экрана.
 *    Возвращаем задуманное: три колонки на планшете, одна на телефоне. */
@media (max-width:1199px){.stages[style*="grid-template-columns"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:719px){.stages[style*="grid-template-columns"]{grid-template-columns:1fr!important}}