@layer oris {
  /* Оболочка платформы: шапка, подвал, язык, кнопки, переход к содержанию.
     Здесь только то, что общее у сайта и кабинета. Палитра, гарнитуры и
     радиус берутся из токенов (src.css → landing.css), состав кабинета —
     из oris.css.

     Ширина полосы одна на всю платформу: 88rem. Прежде сайт жил в 1200
     пикселях, а каталог и ведомость — в своей ширине, и шапка не совпадала
     по краю с содержимым страницы. */

  /* ——— язык ——— */
  /* Язык приходит с сервера атрибутом data-lang, одно правило действует на
     всей платформе. */
  [data-lang="ru"] [data-l="kk"],
  [data-lang="kk"] [data-l="ru"]{display:none !important}
  [data-lang="kk"] [data-l="kk"]{display:inline}

  /* ——— переход к содержанию ——— */
  .skip{position:absolute;left:-9999px;top:0;z-index:200;
    background:var(--color-surface);color:var(--color-ink);
    padding:12px 18px;border-radius:var(--radius);
    font-family:var(--font-display);font-weight:600;font-size:15px}
  .skip:focus{left:16px;top:16px;outline:2px solid var(--color-brand);outline-offset:2px}

  /* ——— шапка ———
     Одна строка на широком экране и высота 64 пикселя. Прежняя шапка
     переносилась на четыре ряда и съедала треть первого экрана телефона. */
  .site-head{position:sticky;top:0;z-index:60;
    background:color-mix(in oklab, var(--color-canvas) 92%, transparent);
    border-bottom:1px solid var(--color-field)}
  @supports (backdrop-filter: blur(1px)){
    .site-head{backdrop-filter:blur(8px)}
  }
  .site-head-in{max-width:88rem;margin:0 auto;padding:0 20px;min-height:64px;
    display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
  @media (min-width:1280px){.site-head-in{padding:0 32px}}

  .site-brand{font-family:var(--font-display);font-weight:800;font-size:22px;
    letter-spacing:-.03em;line-height:1;color:var(--color-ink);
    text-decoration:none;padding:6px 0}

  .site-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:15px}
  /* Подчёркивание выезжает от левого края: это отклик на наведение,
     единственное движение в шапке. */
  .site-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;
    padding:0 12px;color:var(--color-dim);text-decoration:none;
    transition:color var(--dur-fast) var(--ease-oris)}
  .site-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:12px;height:1.5px;
    background:var(--color-brand);transform:scaleX(0);transform-origin:left;
    transition:transform var(--dur-base) var(--ease-oris)}
  .site-nav a:hover{color:var(--color-ink)}
  .site-nav a:hover::after{transform:scaleX(1)}
  .site-nav a[aria-current]{color:var(--color-ink);font-weight:600}
  .site-nav a[aria-current]::after{transform:scaleX(1)}

  .site-head-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  /* Разделы кабинета набраны мельче разделов сайта и стоят плотнее: у
     администратора их четыре, и в казахском они длиннее русских. Иначе правая
     группа уезжала на вторую строку, а двухрядная шапка на широком экране
     читается как поломка. */
  .site-nav-own{font-size:14px;gap:0}
  .site-nav-own a{min-height:44px;padding:0 8px}
  @media (min-width:1280px) and (max-width:1439px){
    .site-nav{font-size:14px}
    .site-nav a{padding:0 8px}
  }

  /* ——— «Кабинет» выпадающим списком ———
     Раскрывает нативный <details>, а не скрипт: без скриптов кнопка всё
     равно работает, состояние объявляет сам браузер, и клавиатура получает
     его бесплатно. Скрипт в header.html добавляет только закрытие щелчком
     мимо и по Esc.

     Список висит над содержимым (position:absolute), а не раздвигает шапку:
     раздвигающийся список сдвигал бы первый экран при каждом открытии. */
  .cab{position:relative}
  .cab > summary{list-style:none;cursor:pointer}
  .cab > summary::-webkit-details-marker{display:none}
  .cab-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;
    padding:0 14px;border:1px solid var(--color-field);border-radius:var(--radius-pill);
    background:var(--color-surface);color:var(--color-ink);
    font-family:var(--font-display);font-weight:600;font-size:14px;white-space:nowrap;
    transition:border-color var(--dur-fast) var(--ease-oris)}
  .cab-btn:hover{border-color:var(--color-dim)}
  .cab > summary:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
  /* Кружок с двумя буквами имени. Пустым он остаётся, если имени нет: пустой
     кружок честнее кружка с вопросительным знаком. */
  .cab-ava{display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:50%;background:var(--color-mint);
    color:var(--color-brand);font-size:11px;font-weight:700}
  .cab-caret{font-size:11px;color:var(--color-dim);
    transition:transform var(--dur-base) var(--ease-oris)}
  .cab[open] .cab-caret{transform:rotate(180deg)}

  .cab-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:50;
    width:250px;padding:8px;display:flex;flex-direction:column;gap:2px;
    background:var(--color-surface);border:1px solid var(--color-line);
    border-radius:1rem;box-shadow:0 16px 40px rgba(20,32,28,.14)}
  .cab-who{display:flex;flex-direction:column;gap:2px;padding:12px 12px 10px;
    margin-bottom:6px;border-bottom:1px solid var(--color-line-soft)}
  .cab-name{font-size:15px;font-weight:600}
  /* Почта усекается, а не переносится: адреса бывают длиннее списка, и
     перенос растягивал бы его на три строки. */
  .cab-mail{font-size:13px;color:var(--color-dim);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cab-menu a,.cab-out button{display:flex;align-items:center;min-height:44px;
    padding:0 12px;border:0;border-radius:10px;background:none;
    font-family:inherit;font-size:15px;font-weight:500;color:var(--color-ink);
    text-decoration:none;cursor:pointer;text-align:left;width:100%}
  .cab-menu a:hover,.cab-out button:hover{background:var(--color-sand)}
  .cab-menu a[aria-current]{font-weight:600;color:var(--color-brand)}
  .cab-out{margin-top:6px;padding-top:6px;border-top:1px solid var(--color-line-soft)}
  .cab-out button{color:var(--color-danger)}

  /* На узком экране список не всплывает, а раскрывается на месте: всплывающий
     на 250 пикселей уезжал за край экрана шириной 390. */
  @media (max-width:900px){
    .cab{width:100%}
    .cab-btn{width:100%;justify-content:flex-start}
    .cab-menu{position:static;width:100%;box-shadow:none;margin-top:8px}
  }

  /* Переключатель языка — группа из двух кнопок в одной рамке, активная
     залита цветом действия. */
  .site-lang{display:inline-flex;align-items:center;gap:2px;
    border:1px solid var(--color-field);border-radius:var(--radius-pill);padding:3px}
  .site-lang a{display:inline-flex;align-items:center;justify-content:center;
    min-height:38px;padding:0 12px;border-radius:var(--radius-pill);
    font-family:var(--font-display);font-weight:600;font-size:13px;
    color:var(--color-dim);text-decoration:none;
    transition:color var(--dur-fast) var(--ease-oris),
               background-color var(--dur-fast) var(--ease-oris)}
  .site-lang a:hover{color:var(--color-ink)}
  .site-lang a[aria-current]{background:var(--color-brand);color:var(--color-surface)}
  .site-out{display:inline}

  /* ——— кнопки ———
     Три вида на всю платформу: заливка цветом действия, рамка, тихая ссылка.
     Высота нажатия 44 пикселя везде, включая широкий экран. Нажатие
     отвечает сдвигом на пиксель вниз — отклик на действие, а не оживление. */
  /* Радиус у кнопки тот же, что у поля ввода (14), а не тот, что у карточки
     (22): кнопка стоит внутри карточки и повторять её форму не должна.
     Призыв набирается таблеткой — класс .pill. */
  .btn,.btn-solid,.btn-quiet{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:44px;padding:0 20px;border-radius:var(--radius-field);
    border:1px solid transparent;cursor:pointer;text-decoration:none;
    font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1;
    white-space:nowrap;
    transition:background-color var(--dur-fast) var(--ease-oris),
               border-color var(--dur-fast) var(--ease-oris),
               color var(--dur-fast) var(--ease-oris),
               transform var(--dur-fast) var(--ease-oris)}
  .btn,.btn-solid{background-color:var(--color-brand-solid);color:var(--color-surface);
    box-shadow:var(--shadow-cta)}
  .btn:hover,.btn-solid:hover{background-color:color-mix(in oklab, var(--color-brand-solid) 88%, var(--color-ink))}
  .btn:active,.btn-solid:active,.btn-quiet:active{transform:translateY(1px)}
  .btn-quiet{background:transparent;color:var(--color-ink);
    border-color:var(--color-field);box-shadow:none}
  .btn-quiet:hover{background:var(--color-surface-2);border-color:var(--color-dim)}
  .btn:focus-visible,.btn-solid:focus-visible,.btn-quiet:focus-visible,
  .site-nav a:focus-visible,.site-lang a:focus-visible{
    outline:2px solid var(--color-brand);outline-offset:2px}

  /* Большая кнопка первого экрана: та же форма, крупнее кегль и поля. */
  .btn.lg{min-height:52px;padding:0 26px;font-size:17px}
  .btn.sm{min-height:44px;padding:0 14px;font-size:14px}
  /* Призыв в макете набран таблеткой: первый экран, конец раздела, зелёная
     плашка. Кнопка формы таблеткой не набирается — она стоит в ряду с полями
     ввода и обязана держать их форму. */
  .btn.pill{border-radius:var(--radius-pill);padding:0 26px}
  .btn.lg.pill{padding:0 28px}
  /* Кнопка внутри карточки набора: прямоугольник во всю ширину, радиус 12 —
     мельче карточки, в которой она лежит. */
  .btn.in-card{width:100%;border-radius:var(--radius-sm);box-shadow:none}
  /* Кнопка карточки каталога: кегль и вес из макета — 15/600, а не 14/700.
     В сетке из четырёх карточек жирная надпись читалась как заголовок. */
  .btn.set-cta{min-height:0;padding:13px 18px;font-size:15px;font-weight:600}
  .btn.ghost{background-color:transparent;color:var(--color-ink);
    border-color:var(--color-field);box-shadow:none}
  .btn.ghost:hover{background-color:var(--color-surface-2);border-color:var(--color-dim)}
  .btn:disabled,.btn[aria-disabled="true"]{background-color:var(--color-surface-2);
    color:var(--color-dim);border-color:var(--color-line);cursor:not-allowed;
    transform:none;box-shadow:none}
  .on-dark .btn{background-color:var(--color-accent-on-dark);color:var(--color-ink)}
  .on-dark .btn:hover{background-color:var(--color-on-dark)}

  /* ——— общая типографика ——— */
  .num{font-variant-numeric:tabular-nums}

  /* Подвал прижат к низу окна: на короткой странице — «Мои курсы» с одной
     программой, пустой каталог, страница входа — он вставал посреди экрана,
     и под ним оставалась голая полоса холста. Ростом занимается main, а не
     отступ у подвала: отступ пришлось бы подбирать под каждую страницу. */
  body{min-height:100dvh;display:flex;flex-direction:column}
  body > main{flex:1 0 auto}
  .site-foot{flex:0 0 auto}

  /* ——— подвал ———
     Подвал светлый и стоит на поверхности: тёмная плита в конце страницы
     читалась как ещё одна секция и спорила с тёмной секцией оценки. */
  .site-foot{margin-top:0;background:var(--color-surface);
    border-top:1px solid var(--color-field);color:var(--color-ink)}
  .site-foot-in{max-width:88rem;margin:0 auto;padding:48px 20px 56px;
    display:flex;flex-direction:column;gap:36px}
  @media (min-width:1280px){.site-foot-in{padding-left:32px;padding-right:32px}}
  /* Первый столбец шире: в нём имя и фраза о платформе, а не список ссылок. */
  .site-map{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  @media (min-width:1024px){
    .site-map{grid-template-columns:1.6fr repeat(4,1fr);gap:40px}
  }
  .site-say{max-width:34ch}
  .site-say .site-brand{padding:0}
  .site-say p{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--color-dim)}
  .site-map h2{font-family:var(--font-display);font-weight:700;font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink);margin:0 0 10px}
  .site-map ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .site-map a{display:inline-flex;align-items:center;min-height:44px;
    color:var(--color-dim);text-decoration:none;font-size:15px;
    transition:color var(--dur-fast) var(--ease-oris)}
  .site-map a:hover{color:var(--color-ink)}
  .site-map a:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
  .site-legal{margin:0;font-size:14px;line-height:1.6;color:var(--color-dim);max-width:76ch}

  /* ——— страница раздела ———
     Нижнее поле у заголовка своё: следующая секция может начинаться сразу
     под ним (как на «Студентам»), и без него лид склеивается с заголовком
     следующего блока. */
  .page-top{padding:56px 20px 24px}
  @media (min-width:1280px){.page-top{padding-left:32px;padding-right:32px}}
  /* Шапка раздела уже полосы витрины: внутренние страницы идут колонкой той
     же ширины, что и каталог программ, и заголовок обязан стоять над той же
     колонкой, что и блоки под ним. */
  .page-top-in{max-width:1180px;margin:0 auto}
  .page-top h1{margin:0}
  .page-top .lede{margin:16px 0 0}

  /* Кабинет внутри общей оболочки: главный контейнер тот же, что на сайте. */
  main > .wrap{padding-top:40px;padding-bottom:72px}

  /* ——— документы в подвале ——— */
  .site-docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}

  /* ——— правовые документы ———
     Длинный текст, который читают выборочно: слева оглавление, строка держится
     в 68 знаках, нумерацию разделов ведёт счётчик CSS. */
  .legal{
    /* Якорь не должен уезжать под липкую шапку: 64 пикселя её высоты плюс воздух. */
    --legal-offset:84px;
  }
  .legal-meta{margin:16px 0 0;font-size:14px;line-height:1.55;
    color:var(--color-dim);max-width:60ch}

  .legal-toc{align-self:start;font-size:14px;line-height:1.4}
  .legal-toc-title{font-family:var(--font-display);font-weight:700;font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink);margin:0 0 8px}
  .legal-toc ol{list-style:none;counter-reset:toc;margin:0;padding:0}
  .legal-toc li{counter-increment:toc}
  .legal-toc a{display:flex;gap:10px;align-items:center;min-height:44px;
    color:var(--color-dim);text-decoration:none}
  .legal-toc a::before{content:counter(toc);font-variant-numeric:tabular-nums;min-width:1.4em}
  .legal-toc a:hover{color:var(--color-ink)}

  .legal-body{counter-reset:sec;max-width:68ch}
  .legal-body > section{scroll-margin-top:var(--legal-offset,84px)}
  .legal-body > section + section{margin-top:40px}
  .legal-body h2{counter-increment:sec;font-family:var(--font-display);font-weight:700;
    font-size:20px;margin:0 0 12px;display:flex;gap:12px;align-items:baseline}
  .legal-body h2::before{content:counter(sec);font-size:15px;color:var(--color-brand);
    font-variant-numeric:tabular-nums;min-width:1.4em}
  .legal-body p{margin:0 0 14px;color:var(--color-dim)}
  .legal-body ul{margin:0 0 14px;padding-left:20px;color:var(--color-dim);list-style:disc}
  .legal-body li{margin:0 0 8px}
  .legal-body > section > :last-child{margin-bottom:0}

  @media (min-width:1024px){
    .legal-toc{position:sticky;top:var(--legal-offset,84px)}
  }

  @media print{
    .legal-toc{display:none}
    .legal-body{max-width:none}
  }

  /* ——— шапка на узком экране ———
     Разделы и кнопки уходят за одну кнопку «Меню»: девять пунктов в три ряда
     занимали первый экран телефона. Липкой шапка на телефоне не остаётся. */
  .site-menu{display:contents}
  .site-menu-btn{display:none}
  /* Порог 1280, а не 1024: у гостя в шапке четыре раздела сайта и две кнопки,
     и до 1280 они складывались в два ряда, то есть шапка съедала сотню
     пикселей первого экрана. Ниже порога всё уходит за одну кнопку «Меню».
     Шапка с кабинетом (site-head-own) уходит туда же раньше — до 1440. */
  @media (max-width:1279px){
    .site-head{position:static}
    .site-head-in{padding:8px 16px;gap:8px 10px;min-height:56px}
    .site-menu-btn{display:inline-flex;align-items:center;justify-content:center;
      margin-left:auto;min-height:44px;padding:0 14px;border-radius:var(--radius);cursor:pointer;
      font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1;
      color:var(--color-ink);background:transparent;border:1px solid var(--color-line)}
    .site-menu-btn[aria-expanded="true"]{background:var(--color-surface-2)}
    .site-menu-btn:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
    .site-menu{display:none;flex:1 0 100%;flex-direction:column;gap:4px;
      padding:8px 0 12px;border-top:1px solid var(--color-line)}
    .site-menu.is-open{display:flex}
    .site-nav{flex-direction:column;align-items:stretch;gap:0}
    .site-nav a{min-height:48px;padding:0 8px;font-size:16px;border-radius:var(--radius-sm)}
    .site-nav a::after{display:none}
    .site-nav a[aria-current]{background:var(--color-surface-2)}
    .site-nav-own a{min-height:48px;padding:0 8px;font-size:16px}
    .site-head-right{margin-left:0;flex-direction:column;align-items:stretch;gap:6px}
    .site-head-right .site-lang{margin:4px 0;display:flex}
    .site-head-right .site-lang a{flex:1 1 50%}
    .site-out,.site-out .btn-quiet,.site-head-right .btn-quiet,.site-head-right .btn-solid{width:100%}
  }

  /* Шапка с разделами кабинета до 1440: тот же компактный вид, что и на
     узком экране. Правила повторены намеренно и только те, что переключают
     раскладку: медиазапрос нельзя объединить с условием на классе. */
  @media (min-width:1280px) and (max-width:1439px){
    .site-head-own{position:static}
    .site-head-own .site-head-in{padding:8px 20px;gap:8px 10px;min-height:56px}
    .site-head-own .site-menu-btn{display:inline-flex;align-items:center;justify-content:center;
      margin-left:auto;min-height:44px;padding:0 14px;border-radius:var(--radius);cursor:pointer;
      font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1;
      color:var(--color-ink);background:transparent;border:1px solid var(--color-line)}
    .site-head-own .site-menu-btn[aria-expanded="true"]{background:var(--color-surface-2)}
    .site-head-own .site-menu{display:none;flex:1 0 100%;flex-direction:column;gap:4px;
      padding:8px 0 12px;border-top:1px solid var(--color-line)}
    .site-head-own .site-menu.is-open{display:flex}
    .site-head-own .site-nav{flex-direction:column;align-items:stretch;gap:0}
    .site-head-own .site-nav a{min-height:48px;padding:0 8px;font-size:16px;border-radius:var(--radius-sm)}
    .site-head-own .site-nav a::after{display:none}
    .site-head-own .site-nav a[aria-current]{background:var(--color-surface-2)}
    .site-head-own .site-head-right{margin-left:0;flex-direction:column;align-items:stretch;gap:6px}
    .site-head-own .site-head-right .site-lang{margin:4px 0;display:flex}
    .site-head-own .site-head-right .site-lang a{flex:1 1 50%}
    .site-head-own .site-out,
    .site-head-own .site-head-right .btn-quiet,
    .site-head-own .site-head-right .btn-solid{width:100%}
  }

}