/* Общие стили. Все значения — из tokens.css, своих цветов и «магических» px здесь нет.
   Страницы плана — plan.css, чтение темы — study.css. */

@layer reset, tokens, base, layout, components, utilities;
@import url("tokens.css") layer(tokens);

/* ─── Сброс ─── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; }
}

/* ─── База ─── */
@layer base {
  body {
    background: var(--kb-bg);
    color: var(--kb-text);
    font: var(--kb-weight-regular) var(--kb-t-base) / 1.55 var(--kb-font-body);
  }
  h1 { font: var(--kb-weight-bold) var(--kb-t-h2) / 1.15 var(--kb-font-head); margin-block-end: var(--space-4); }
  h2 { font: var(--kb-weight-bold) var(--kb-t-h4) / 1.25 var(--kb-font-head); margin-block-end: var(--space-3); }
  h3 { font: var(--kb-weight-medium) var(--kb-t-base) / 1.3 var(--kb-font-head); margin-block-end: var(--space-2); }
  a { color: var(--kb-brand); }
  :focus-visible { outline: 2px solid var(--kb-focus); outline-offset: 2px; }
  input, select, textarea, button { font: inherit; color: inherit; }
  input, select, textarea {
    background: var(--kb-surface-sunken); border: 1px solid var(--kb-border-strong);
    border-radius: var(--r-md); padding: var(--space-1) var(--space-2);
  }
  /* Переходы между страницами: многостраничный сайт, а ощущается цельным.
     Браузеры без поддержки просто перезагружают страницу. */
  @view-transition { navigation: auto; }
}

/* ─── Каркас ─── */
@layer layout {
  .topbar {
    display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: baseline;
    padding: var(--space-3) var(--space-4);
    background: var(--kb-surface); box-shadow: var(--kb-shadow-1);
    position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
    view-transition-name: topbar;
  }
  .topbar__brand { color: var(--kb-text); font-weight: var(--kb-weight-bold); text-decoration: none; }
  .topbar__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--kb-t-sm); }
  .topbar__nav a { text-decoration: none; padding-block-end: 2px; border-block-end: 2px solid transparent; }
  .topbar__nav a:hover { border-block-end-color: var(--kb-brand); }
  .topbar__dim { color: var(--kb-text-muted); }
  /* «Ещё»: настройка раз в неделю — не рядом с учёбой. Нативный <details>: клавиатура даром. */
  .topbar__more { position: relative; }
  .topbar__more summary { color: var(--kb-text-muted); list-style: none; }
  .topbar__more summary::-webkit-details-marker { display: none; }
  .topbar__more summary::after { content: " ▾"; font-size: var(--kb-t-2xs); }
  .topbar__menu {
    position: absolute; inset-block-start: calc(100% + var(--space-2)); inset-inline-start: 0; z-index: var(--z-dropdown);
    display: grid; gap: var(--space-1); min-inline-size: 12rem; padding: var(--space-2);
    background: var(--kb-surface-raise); border-radius: var(--r-md); box-shadow: var(--kb-shadow-2);
  }
  .topbar__menu a { padding: var(--space-1) var(--space-2); border-radius: var(--r-sm); }
  .topbar__menu a:hover { background: var(--kb-brand-soft); border-block-end-color: transparent; }
  /* на телефоне меню «Ещё» раскрывается от края шапки, а не от своей кнопки — иначе уходит за экран */
  @media (max-width: 47.99rem) {
    .topbar__more { position: static; }
    .topbar__menu { inset-inline: auto var(--space-3); }
  }
  .topbar__week { margin-inline-start: auto; color: var(--kb-text-muted); font-size: var(--kb-t-xs); }
  /* переключатель темы: три значка в одной кнопке, виден тот, что соответствует выбору */
  .theme-btn {
    display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; margin-block: -0.5rem;
    background: transparent; border: 0; border-radius: var(--r-pill); color: var(--kb-text-muted); cursor: pointer;
    margin-inline-start: auto;
  }
  .theme-btn:hover { background: var(--kb-surface-sunken); color: var(--kb-text); }
  .topbar__week + .theme-btn { margin-inline-start: 0; }
  .theme-btn svg { inline-size: 1.4rem; block-size: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .theme-btn g { display: none; }
  html:not([data-theme-pref="light"]):not([data-theme-pref="dark"]) .theme-btn__auto,
  html[data-theme-pref="light"] .theme-btn__light,
  html[data-theme-pref="dark"] .theme-btn__dark { display: inline; }
  .page {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); max-inline-size: 72rem; margin-inline: auto;
    padding: var(--space-6) var(--space-4);
  }
  /* широкая таблица внутри панели прокручивается сама, а не растягивает страницу */
  .page > *, .cols > * { min-inline-size: 0; }
  .cols { display: grid; gap: var(--space-5); align-items: start; }
  @media (min-width: 60rem) { .cols { grid-template-columns: 2fr 1fr; } }
  /* ─── Нижняя панель и офлайн-бейдж (телефон) ─── */
  :root { --tabbar-h: 3.5rem; }
  .tabbar { display: none; }
  .offline-badge {
    padding: var(--space-1) var(--space-4); text-align: center;
    background: var(--kb-warning-soft); color: var(--kb-warning-ink); font-size: var(--kb-t-xs);
  }
  .offline-badge[hidden] { display: none; }
  @media (max-width: 47.99rem) {
    .nav-dup { display: none; }
    body { padding-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    .tabbar {
      display: grid; grid-template-columns: repeat(4, 1fr);
      position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky);
      padding-block-end: env(safe-area-inset-bottom);
      background: var(--kb-surface); box-shadow: var(--kb-shadow-2);
    }
    .tabbar a {
      display: grid; justify-items: center; align-content: center; gap: 2px; min-block-size: var(--tabbar-h);
      font-size: var(--kb-t-2xs); color: var(--kb-text-muted); text-decoration: none;
    }
    .tabbar a[aria-current="page"] { color: var(--kb-brand); font-weight: var(--kb-weight-bold); }
    .tabbar svg {
      inline-size: 1.4rem; block-size: 1.4rem; fill: none; stroke: currentColor;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }
    .page { padding-inline: var(--space-3); padding-block: var(--space-4); gap: var(--space-4); }
    .panel { padding: var(--space-4); }
  }
  .head-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: baseline; justify-content: space-between; }
  .head-row h1, .head-row h2 { margin: 0; }
}

/* ─── Компоненты ─── */
@layer components {
  .panel {
    background: var(--kb-surface); border-radius: var(--r-lg); padding: var(--space-5);
    box-shadow: var(--kb-shadow-1);
  }
  .panel--head { padding-block: var(--space-4); }
  .note { border-radius: var(--r-md); padding: var(--space-3); margin-block-start: var(--space-3); display: grid; gap: var(--space-2); }
  .note--warn { background: var(--kb-warning-soft); color: var(--kb-warning-ink); }
  .note--ok { background: var(--kb-success-soft); color: var(--kb-success-ink); }

  .btn {
    cursor: pointer; border: 0; border-radius: var(--r-md); text-decoration: none; display: inline-block;
    padding: var(--space-2) var(--space-4); background: var(--kb-brand); color: var(--kb-text-on-brand);
    transition: background var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);
  }
  .btn:hover { background: var(--kb-brand-hover); }
  .btn:active { transform: translateY(1px); }
  .btn--lg { padding: var(--space-3) var(--space-5); font-size: var(--kb-t-lg); }
  .btn--ghost { background: transparent; color: var(--kb-brand); padding-inline: var(--space-2); }
  .btn--ghost:hover { background: var(--kb-brand-soft); }

  .chip {
    display: inline-block; padding: 2px var(--space-2); border-radius: var(--r-pill);
    background: var(--kb-surface-sunken); color: var(--kb-text-muted); font-size: var(--kb-t-xs);
    border: 1px solid transparent; cursor: inherit;
  }
  button.chip { cursor: pointer; }
  .chip--on { background: var(--kb-brand-soft); color: var(--kb-brand-ink); border-color: var(--kb-brand-line); }
  .chip--ok { background: var(--kb-success-soft); color: var(--kb-success-ink); }
  .chip--warn { background: var(--kb-warning-soft); color: var(--kb-warning-ink); }

  /* Метка предмета: аббревиатура вместо названия в три строки.
     Оттенок — из данных (--subj-h), светлота и цветность — из темы. */
  .subj {
    display: inline-block; flex: none; padding-inline: var(--space-2); border-radius: var(--r-sm);
    font: var(--kb-weight-bold) var(--kb-t-2xs) / 1.7 var(--kb-font-body);
    letter-spacing: var(--kb-tracking-caps); text-decoration: none; white-space: nowrap;
    background: oklch(var(--kb-subj-bg-l) var(--kb-subj-bg-c) var(--subj-h, 265));
    color: oklch(var(--kb-subj-l) var(--kb-subj-c) var(--subj-h, 265));
  }
  a.subj:hover { background: oklch(var(--kb-subj-bg-l) calc(var(--kb-subj-bg-c) * 2) var(--subj-h, 265)); }
  /* Полное название по наведению и с клавиатуры: сокращение нигде не остаётся
     единственным источником — рядом всегда есть способ его расшифровать. */
  .subj[data-full] { position: relative; }
  .subj[data-full]:hover::after,
  .subj[data-full]:focus-visible::after {
    content: attr(data-full); position: absolute; inset-block-start: calc(100% + var(--space-1));
    inset-inline-start: 0; z-index: var(--z-dropdown); white-space: nowrap;
    padding: var(--space-1) var(--space-2); border-radius: var(--r-sm);
    background: var(--kb-surface-raise); color: var(--kb-text); box-shadow: var(--kb-shadow-2);
    font: var(--kb-weight-regular) var(--kb-t-xs) / 1.3 var(--kb-font-body);
    letter-spacing: normal; text-transform: none;
  }

  .tag { display: inline-block; padding-inline: var(--space-2); border-radius: var(--r-pill); background: var(--kb-surface-sunken); color: var(--kb-text-muted); font-size: var(--kb-t-xs); }
  .tag--ready, .tag--done { background: var(--kb-success-soft); color: var(--kb-success-ink); }
  .tag--processing, .tag--running, .tag--waiting { background: var(--kb-warning-soft); color: var(--kb-warning-ink); }
  .tag--failed { background: var(--kb-danger-soft); color: var(--kb-danger-ink); }

  .checks { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-block-end: var(--space-4); }
  .check { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--r-md); }
  .check--ok { background: var(--kb-success-soft); color: var(--kb-success-ink); }
  .check--bad { background: var(--kb-warning-soft); color: var(--kb-warning-ink); }
  .check__title { font-weight: var(--kb-weight-medium); min-inline-size: min(12rem, 100%); }
  .check__detail { min-inline-size: 0; overflow-wrap: anywhere; }
  .check__hint { font-family: var(--kb-font-mono); font-size: var(--kb-t-sm); min-inline-size: 0; overflow-wrap: anywhere; }

  /* Полоска режима «Учиться»: где я в дне и что дальше. Не sticky — не прячет фокус под собой. */
  .flow {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center;
    padding: var(--space-3) var(--space-4); border-radius: var(--r-lg);
    background: var(--kb-brand-soft); border: 1px solid var(--kb-brand-line);
  }
  .flow__pos { font-weight: var(--kb-weight-bold); color: var(--kb-brand-ink); font-size: var(--kb-t-sm); }
  .flow__pos--ok { color: var(--kb-success-ink); }
  .flow__next { color: var(--kb-text-muted); font-size: var(--kb-t-sm); flex: 1 1 16rem; }
  .flow__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .flow__exit { color: var(--kb-text-muted); }

  .scroll-x { overflow-x: auto; }
  .table { inline-size: 100%; border-collapse: collapse; font-size: var(--kb-t-sm); }
  .table th { text-align: start; color: var(--kb-text-muted); font-weight: var(--kb-weight-medium); padding: var(--space-2); border-block-end: 1px solid var(--kb-border-strong); }
  .table td { padding: var(--space-2); border-block-end: 1px solid var(--kb-border); vertical-align: top; }
  /* таблица в прокручиваемой обёртке не сжимается до столбика из букв (на телефоне строка вырастала до 1400 px): тянется вбок */
  .scroll-x > .table { min-inline-size: 36rem; }
  .table td.name { min-inline-size: 12rem; }

  .player { inline-size: 100%; margin-block: var(--space-3); }
  .speed { display: inline-flex; gap: var(--space-2); align-items: center; }
  /* плеер прилипает только на широком экране: на телефоне он закрывал бы пятую часть текста */
  @media (min-width: 48rem) { .cloud-player { position: sticky; inset-block-start: var(--space-2); z-index: 2; } }
  .transcript { list-style: none; display: grid; gap: var(--space-2); max-inline-size: var(--kb-measure); }
  .stamp { font-family: var(--kb-font-mono); font-size: var(--kb-t-xs); cursor: pointer; border: 0; border-radius: var(--r-sm); background: var(--kb-brand-soft); color: var(--kb-brand-ink); padding-inline: var(--space-1); margin-inline-end: var(--space-1); }

  .list { padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); max-inline-size: var(--kb-measure); }
  .stack { display: grid; gap: var(--space-3); margin-block-start: var(--space-3); max-inline-size: var(--kb-measure); }
  .stack label { display: grid; gap: var(--space-1); }
  .stack .check-row { display: flex; gap: var(--space-2); align-items: center; }
  .inline-form { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
  .inline-form select { max-inline-size: 16rem; font-size: var(--kb-t-sm); }
  .mini { inline-size: 4.5rem; }
  summary { cursor: pointer; }
  summary .inline { display: inline; margin: 0; }
}

/* ─── Утилиты ─── */
@layer utilities {
  .muted { color: var(--kb-text-muted); }
  .small { font-size: var(--kb-t-xs); }
  .mt { margin-block-start: var(--space-5); }
  .name { overflow-wrap: anywhere; }
  .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Движение — только по делу и только для тех, кто его не отключил. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  /* Не внутри svg: transition на геометрии ломает замеры mermaid — схема
     раздувалась в 6 раз, узлы становились точками. */
  *:not(svg *), *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}