/* ═══════════════════════════════════════════════════════════════════════
   ОБЩАЯ ОСНОВА ВНУТРЕННИХ СТРАНИЦ (каталог курсов, страница курса).

   Токены, шрифты, тени и плавная шкала перенесены из css/home.css
   и css/login.css дословно: внутренние страницы обязаны читаться
   продолжением главной и входа, а не отдельным сайтом.

   Новое здесь — только то, чего на главной не было: рабочая шапка,
   обложки курсов, полосы прогресса, карточки.

   Подключается ТОЛЬКО на наших страницах (inc/page-chrome.php); там же
   снимаются стили Astra и общий style.css темы.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#F3F6FA; --surface:#FFFFFF; --surface-2:#EAEFF6; --surface-3:#FBFCFE;
  --ink:#101A2B; --ink-2:#3C4A60; --muted:#69778C; --faint:#9AA7B8;
  --accent:#1F4FA3; --accent-2:#2C6FD8; --accent-soft:#E6EDF9;
  --gold:#B07C22; --gold-soft:#FBF2E2; --gold-line:#F0E2C6;
  --line:#DDE5EF; --line-2:#EBF0F7;
  --ok:#2E7D5B; --ok-soft:#EAF6F0; --ok-line:#CBE5D8;
  --bad:#C0392B; --bad-soft:#FCEFEC; --bad-line:#F2D6D0;
  --shadow:0 1px 2px rgba(16,26,43,.04), 0 14px 32px -20px rgba(16,26,43,.28);
  --shadow-lg:0 2px 4px rgba(16,26,43,.05), 0 22px 44px -24px rgba(31,79,163,.3);

  /* плавная шкала: слева значение на 1280px, справа на 1920px */
  --rad:     clamp(12px, calc(0.31vw + 10px), 16px);
  --btn-h:   clamp(44px, calc(1.25vw + 28px), 54px);
  --btn-f:   clamp(14.5px, calc(0.23vw + 12px), 16.5px);
  --top-h:   clamp(62px, calc(0.78vw + 62px), 78px);
  --h-pg:    clamp(26px, calc(1.25vw + 10px), 42px);
  --h-sec:   clamp(19px, calc(0.47vw + 13px), 25px);
  --pad-c:   clamp(16px, calc(0.62vw + 12px), 26px);
  --gutter:  clamp(20px, 2.2vw, 40px);
  /* Ширина колонки. Три значения, и каждое стоит по своей причине.

     ВЕРХ 1520. 1520 - 2*40 = РОВНО 1440 — та же ШИРИНА, что у набора задач
     (`.astra-learn-quiz .content-item-wrap` в css/learn.css). Именно ширина,
     не положение: у учебной страницы слева колонка плана, и её левый край
     свой (замер при 1920: курс 240..1680, набор задач 395..1835). Значение
     в том, что строка на курсе и строка в задании одной длины; до 2026-08-11
     здесь было 1240, и они расходились на 280px. Ниже — КАНДИДАТЫ НА ЭТОТ ВЕРХ,
     а НЕ ширины окна: окно во всех четырёх строках одно и то же, 1920, меняется
     только верх клампа. Все сетки страниц — auto-fill, то есть отвечают
     на ширину не плавно, а СКАЧКОМ на лишнюю колонку:
       1360 — лишнюю колонку получают только «мои курсы» (2 -> 3) и «повторить»
              (3 -> 4), каталог и «мои темы» остаются как были; содержимое
              выходит 1280, а не 1440, поля 14,6%;
       1440 — колонку получают и эти двое, но карточки сжимаются сильнее всего
              (каталог 372 -> 324, «мои темы» 280 -> 261) — худший вариант;
       1520 — против прежних 1240 лишняя колонка есть у ВСЕХ четырёх сеток,
              и карточки при этом почти не жмутся (каталог 344, темы 277,
              «повторить» 348), поля 10,4%;
       1600 — «что стоит повторить» дробится на пять колонок по 291px.
     Менять только вместе с повторным замером сеток.

     ПРО 291px: это сравнение КАНДИДАТОВ при одном окне, а не приговор ширине.
     Смысл строки — «раз при 1520 карточка выходит 348px, дробить её до 291px
     незачем», и только это. На узком окне тех же 291px не избежать ничем,
     и код их правда даёт: при окне 1228..1413 колонка «повторить» выходит
     285..300px (на 1372 ровно 291). Дефекта тут нет, и это ЗАМЕРЕНО на живом
     корпусе, а не оценено на глаз: из 151 формулы сайта в колонке 287px ни одна
     не вылезает за две строки, на которые `.qq` и без того обрезана, а
     неразрывный кусок шире колонки есть РОВНО у одной (297px, `\left(...\right)`).
     KaTeX переносит формулу по знакам отношения и бинарным операциям — «узко»
     начинается заметно ниже этой ширины. Не переписывать сетку `.rev` под эту
     полосу: три колонки вместо четырёх ради одной формулы из 151.

     СЕРЕДИНА 92vw действует НЕ на всякой ширине, а на окнах 1348..1652: ниже её
     перебивает низ 1240, выше — верх 1520 (границы — 1240/0.92 и 1520/0.92).
     Нужна она там, где иначе колонка легла бы ВО ВСЮ ШИРИНУ: поля 0, от края
     остаётся только `--gutter` (на 1366 это 30px против сегодняшних 85px).
     Замерено и посмотрено глазами — ноутбук выглядит зажатым. 92vw держит
     по 4% воздуха с каждой стороны.

     НИЗ 1240 ОБЯЗАТЕЛЕН, и это не «на всякий случай». Голое min(1520px,92vw)
     сузило бы колонку и на ТЕЛЕФОНЕ (92% от 390 = 359px), то есть отняло бы
     31px у экрана, где их и так нет. Нижняя граница 1240 гарантирует, что
     при окне уже 1240 значение max-width заведомо БОЛЬШЕ окна и потому
     не действует вовсе: телефон и планшет не меняются ни на пиксель
     (проверено побайтным сравнением снимков до/после на четырёх страницах). */
  --maxw:    clamp(1240px, 92vw, 1520px);
  --ctl-h:   clamp(42px, calc(0.62vw + 34px), 50px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);position:relative;min-height:100vh;
  font:400 16px/1.6 "Golos Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* Тот же фон, но селектором потяжелее — иначе его перебивает ЧУЖАЯ таблица.
   В `learnpress.min.css` есть `body{background:#fff}`, и она подключается
   ПОСЛЕ нашей на каждой странице LearnPress. Замер 2026-08-06: на каталоге,
   странице курса, в кабинете и на 404 по адресу оплаты фон документа был
   белый, а не #F3F6FA, — то есть заявленный токен там не действовал вообще
   ни разу. Заметно это там, где не достаёт слой `.bg` (он высотой
   min(1100px,100%)) и в промежутках между размытыми пятнами.
   `html body` — вес 0,0,2 против 0,0,1 у плагина; `!important` не нужен. */
html body{background:var(--bg)}
h1,h2,h3,h4{font-family:Rubik,sans-serif;font-weight:600;letter-spacing:-.025em;margin:0;line-height:1.15}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ── фон ──
   Те же пятна, что на главной, но СТАТИЧНЫЕ и слабее: рабочие страницы читают
   и прокручивают подолгу, движущийся фон под длинным учебным планом отвлекает.
   Родство с главной сохраняется, шум — нет.

   body{position:relative} обязателен: без него inset:0 у .bg считается
   от окна, а не от документа, и на длинной странице пятна обрываются
   на первой высоте экрана. */
.bg{position:absolute;left:0;right:0;top:0;height:min(1100px,100%);pointer-events:none;overflow:hidden;z-index:0}
.bg i{position:absolute;border-radius:50%;filter:blur(110px);display:block}
.bg .b1{width:44vw;height:44vw;min-width:520px;min-height:520px;background:#2C6FD8;opacity:.13;left:-14vw;top:-16vw}
.bg .b2{width:30vw;height:30vw;min-width:380px;min-height:380px;background:#B07C22;opacity:.09;right:-6vw;top:-6vw}
.bg .b3{width:34vw;height:34vw;min-width:420px;min-height:420px;background:#2C6FD8;opacity:.07;right:18%;top:38%}

/* ═══ ШАПКА ═══ */
.site{position:sticky;top:0;z-index:30;
  background:rgba(243,246,250,.82);backdrop-filter:saturate(1.5) blur(12px);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--line)}
/* Шапка идёт ВО ВСЮ ШИРИНУ окна, а не по колонке содержимого: ограничения
   и центрирования у неё намеренно нет (2026-08-11, просьба пользователя).
   Это ровно поведение главной — там у `.top` тоже только боковой отступ
   (`padding:0 clamp(20px,2.2vw,40px)` в css/home.css), и это то же самое
   выражение, что здесь зовётся `--gutter`. Два экрана обязаны совпадать:
   посетитель приходит с главной, и шапка не должна на его глазах прыгать.

   Следствие, которое НЕ надо считать ошибкой: логотип и правая кнопка
   стоят по краям ОКНА, а карточки под ними — по краям колонки, поэтому
   на широком мониторе шапка шире содержимого (замер при 1920: логотип
   от 40px, карточки от 240px). Так сделано осознанно — иначе белая полоса
   во всю ширину с прижатым к центру содержимым читается как пустая рамка.
   Внутренний `gap` оставлен СВОЙ, теснее главной: пунктов здесь больше. */
.top{display:flex;align-items:center;height:var(--top-h);gap:clamp(14px,1.4vw,28px);
  padding-left:var(--gutter);padding-right:var(--gutter)}
.logo{font-family:Rubik,sans-serif;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(17px,calc(0.31vw + 15px),21px);white-space:nowrap}
.logo i{color:var(--gold);font-style:normal}
.tabs{display:flex;gap:2px;font-size:clamp(14px,calc(0.16vw + 13px),15.5px);color:var(--ink-2)}
.tabs a{padding:8px 14px;border-radius:9px;white-space:nowrap;transition:background-color .16s,color .16s}
.tabs a:hover{background:var(--surface-2);color:var(--accent)}
.tabs a.on{background:var(--accent-soft);color:var(--accent);font-weight:500}
.top .act{margin-left:auto;display:flex;gap:10px;align-items:center}

/* значок ученика в шапке — инициал в круге, без серого силуэта */
.me{display:inline-flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);transition:border-color .18s}
.me:hover{border-color:#C4D2E4}
.ava{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:Rubik,sans-serif;font-weight:600;font-size:14px;color:#fff;letter-spacing:-.02em}
.me b{font-weight:500;font-size:14.5px;color:var(--ink-2);max-width:14ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* Поправка на панель администратора: она фиксированная и сдвигает документ
   на свою высоту, поэтому липкую шапку опускаем ровно на столько же.
   Ниже 600px WordPress делает панель непозиционированной — сдвиг снимается. */
body.admin-bar .site{top:32px}
@media screen and (max-width:782px){body.admin-bar .site{top:46px}}
@media screen and (max-width:600px){body.admin-bar .site{top:0}}

/* ═══ КАРКАС СТРАНИЦЫ ═══ */
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:clamp(24px,2.4vw,44px) var(--gutter) clamp(60px,5vw,90px)}
.pgh{margin-bottom:clamp(20px,1.8vw,32px)}
.pgh h1{font-size:var(--h-pg)}
.pgh .sub{margin-top:9px;color:var(--muted);font-size:clamp(14.5px,calc(0.23vw + 12px),16.5px);max-width:62ch}
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:14px}
.crumb a:hover{color:var(--accent)}
.crumb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ═══ ШАПКА ПРОФИЛЯ ═══
   Общая часть обеих вкладок личного кабинета — «Мои курсы» (css/cabinet.css)
   и «Моя статистика» (css/mystats.css): один и тот же ученик не должен
   встречать на соседних вкладках разное имя, разный кружок и разный отступ.

   Вертикального меню профиля здесь нет: в колонке было три пункта, а высоту
   она держала на всю страницу — отсюда и пустое поле слева. Строки вкладок
   тоже нет: те же два пункта стоят в шапке сайта.

   Отступ снизу задан здесь и только здесь: под шапкой сразу идёт содержимое
   вкладки, и между ними должен остаться воздух одной строки, а не провал
   от снятых вкладок. */
.phead{display:flex;align-items:center;gap:clamp(14px,1.4vw,24px);
  margin-bottom:clamp(20px,1.8vw,30px)}
.pava{width:clamp(56px,3.8vw,72px);height:clamp(56px,3.8vw,72px);flex:none;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-family:Rubik,sans-serif;font-weight:600;
  font-size:clamp(23px,1.4vw,30px);letter-spacing:-.02em;
  box-shadow:0 8px 20px -10px rgba(31,79,163,.7)}
.pn{flex:1;min-width:0}
/* На фронте показывается логин (WHY #26), но длину его не угадать —
   переносим, а не растягиваем строку. */
.pn h1{font-size:clamp(24px,calc(1.09vw + 10px),34px);overflow-wrap:anywhere}
.pm{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pout{display:inline-flex;align-items:center;gap:8px;flex:none;height:38px;padding:0 15px;
  border-radius:10px;font-size:14px;font-weight:500;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);transition:color .18s,border-color .18s}
.pout:hover{color:var(--bad);border-color:var(--bad-line)}
.pout svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

@media(max-width:560px){
  .phead{gap:14px}
  .pout{padding:0 11px}
  .pout > span{display:none}
  .pn h1{font-size:24px}
}

/* ═══ КНОПКИ ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--btn-h);padding:0 clamp(18px,1.3vw,28px);border-radius:calc(var(--rad) - 4px);
  font-family:"Golos Text",sans-serif;font-weight:600;font-size:var(--btn-f);line-height:1;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background-color .18s,border-color .18s}
.btn svg{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.btn-p{background:var(--accent);color:#fff;box-shadow:0 10px 22px -12px rgba(31,79,163,.75)}
.btn-p:hover{background:#173F86;transform:translateY(-2px)}
.btn-g{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-g:hover{border-color:#C4D2E4;transform:translateY(-2px)}
.btn-s{height:clamp(36px,calc(0.31vw + 34px),42px);padding:0 clamp(13px,0.9vw,18px);
  font-size:clamp(13px,calc(0.16vw + 12px),14.5px);border-radius:9px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ═══ ОБЩИЕ ЧАСТИ ═══ */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;
  color:var(--ink-2);background:var(--surface-2);padding:5px 11px;border-radius:8px;white-space:nowrap}
.chip svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.chip--ok{background:var(--ok-soft);color:var(--ok)}
.chip--lock{background:var(--surface-2);color:var(--muted)}

/* полоса прогресса.
   display:block обязателен: полоса встречается и как <div>, и как <span> внутри
   ссылок-карточек, а у строчного элемента height не работает вовсе. */
.prog{display:block;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.prog--ok i{background:var(--ok)}

/* обложка курса — рисуем сами: у курсов может не быть картинки,
   а каталог обязан выглядеть одинаково опрятно в любом случае */
.cover{position:relative;aspect-ratio:16/9;border-radius:calc(var(--rad) - 2px);overflow:hidden;
  display:grid;place-items:center;background:linear-gradient(135deg,#20488F,#2C6FD8 55%,#4B8AE8)}
.cover--gold{background:linear-gradient(135deg,#8A5E13,#B07C22 55%,#D3A24A)}
.cover .no{position:relative;z-index:2;font-family:Rubik,sans-serif;font-weight:700;color:#fff;
  letter-spacing:-.04em;line-height:1;text-align:center;padding:0 12px}
/* Знак можно переписать руками в настройках курса (до 8 знаков). Чем он
   длиннее, тем мельче печатаем: иначе слово рвётся посреди буквы («Стере/о»).
   Класс считает astra_child_cd_badge_class(); перенос оставлен последней
   страховкой на случай очень широких букв. */
.cover .no b{display:block;font-size:clamp(30px,3.4vw,52px);overflow-wrap:anywhere}
.cover .no--mid b{font-size:clamp(24px,2.6vw,40px)}
.cover .no--long b{font-size:clamp(18px,2vw,30px)}
.cover .no > span{display:block;font-weight:500;font-size:clamp(11px,0.9vw,14px);letter-spacing:.14em;
  text-transform:uppercase;opacity:.82;margin-top:8px}
.cover .grid{position:absolute;inset:0;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:34px 34px}
.cover .curve{position:absolute;inset:0;z-index:1;opacity:.5}
.cover .curve path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
/* Картинка курса, если её загрузили, заменяет рисованную обложку целиком.
   Фон нейтральный, а не фирменный градиент: рисунок с прозрачностью иначе
   подкрашивается синим — а рисунки положено показывать как загружены.
   contain, а не cover: у школьных обложек это чертежи и формулы, обрезка
   срезала бы подписи. Картинка целиком видна при любых пропорциях. */
.cover--img{background:var(--surface-2)}
.cover img{width:100%;height:100%;object-fit:contain}

/* ── телефон ──
   Шапка не влезает в 390px: логотип, пункты меню и ученик в одну строку
   дают лишние пиксели и всю страницу можно утащить вбок. Пускаем меню
   на вторую строку и делаем её прокручиваемой вбок — так пункты можно будет
   добавлять и дальше, ничего не ломая. Гамбургер с главной сюда не годится:
   на рабочих страницах в меню лезут каждый день, прятать его за кнопку незачем. */
@media(max-width:720px){
  .top{height:auto;min-height:var(--top-h);flex-wrap:wrap;
    padding-top:10px;padding-bottom:10px;row-gap:9px;column-gap:12px}
  .logo{order:1}
  .top .act{order:2;margin-left:auto}
  .tabs{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .me{padding:4px}
  .me b{display:none}
  .wrap{padding-top:20px}
  .pgh .sub{font-size:15px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}