/* ЛЕНТА КУРСА — общие стили для /course (каркас приложения) и public/proto_grammar_u1.html
   (статическая обёртка для локальной приёмки). Источник — этот файл; страницы его только подключают.
   Разрез сделан tools/split_course_page.js 27.08 (PO: «топбар как в остальном приложении»). */

  /* СТРАНИЦА STEP 2 (Grammar Presentation) юнита курса грамматики.
     Данные — /proto_grammar_u1.json (сборщик tools/build_grammar_step2.js).
     Урок = чарт книги + нюансы его Grammar Notes; уроков столько, сколько чартов.
     Механика: пояснение строки — в окне сверху с выделением ячейки; ключевая конструкция
     выделена в ячейке; сводные таблички не звучат (контур строки + немая подсветка слов);
     плеер внизу показывает время и гонит текущий урок; «Далее» открывает следующий урок
     и стартует его сам; пройденные уроки сворачиваются полосками сверху, кнопка ↓ возвращает;
     играет всегда одна дорожка; ⧉ копирует текст урока для вычитки.
     Правила и история решений — 03_analysis/specification/grammar_steps/step2_presentation.md */
  :root{ --bg:var(--color-bg); --surface:var(--color-surface); --ink:var(--color-text); --muted:var(--color-text-muted);
    --primary:#2f6fed; --border:var(--color-border); --chart:#2c5f8a; --chart-soft:#e7eff6;
    --note-bg:#eaf1fd;
  }
  .wrap{ max-width:640px; margin:0 auto; padding:16px 16px 110px; }
  .lesson[hidden]{ display:none; }
  /* Пройденный урок сворачивается в полоску с темой и остаётся СВЕРХУ (PO S38-30):
     проскроллив вверх, видно всё пройденное; тап по полоске разворачивает урок обратно */
  .lesson.done > *{ display:none; }
  .lesson.done{ display:block; margin:0 0 10px; }
  .ltab{ display:none; width:100%; text-align:left; padding:12px 14px; border:1px solid var(--border);
         border-radius:12px; background:var(--surface); color:var(--muted);
         font:600 13px/1.35 inherit; cursor:pointer; }
  .lesson.done > .ltab{ display:block; }
  .ltab .arr{ float:right; color:var(--primary); }
  .ltab .lnum{ color:var(--primary); font-weight:800; }
  /* Раздел в ленте (GRAMMAR-NAV-21.08): заголовок «Раздел N · Part — Раздел» + уроки раздела одной
     группой: общая подложка с тонкой рамкой и линией слева, между разделами отступ */
  .pgrp{ margin:0 0 22px; padding:12px 10px 2px; border:1px solid var(--border); border-left:3px solid var(--primary);
         border-radius:14px; background:color-mix(in srgb, var(--surface) 55%, transparent); }
  /* заголовок раздела — заметно крупнее полосок (PO S38-50: «чтобы было наглядно, что начался новый раздел») */
  .phead{ margin:0 0 12px 2px; font-size:17px; font-weight:700; line-height:1.3; color:var(--ink); }
  .phead b{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); margin-bottom:2px; }
  .mini .mtr{ font-size:12.5px; color:var(--muted); margin-top:2px; }
  /* переключатель темы (PO S38-50): ☼/☾ в шапке; выбор хранится в браузере, без выбора — как в системе */
  :root[data-theme="dark"]{ --bg:var(--color-bg); --surface:var(--color-surface); --ink:var(--color-text); --muted:var(--color-text-muted);
    --primary:#5b8def; --border:var(--color-border); --chart:#7fb0d8; --chart-soft:#1d2a38; --note-bg:#1e2a42; }
  /* Название открытого урока — две строки: номер, заголовок (суть), пояснение (формы) */
  .lhead{ margin:0 0 14px; padding:12px 14px; border:1px solid var(--primary); border-radius:12px;
          background:var(--surface); }
  .lhead h2{ font-size:20px; line-height:1.3; margin:0; color:var(--ink); font-weight:600; }
  .lhead h2 .lnum{ color:var(--primary); font-weight:800; }
  .lhead .lsub{ font-size:15px; color:var(--muted); line-height:1.4; margin-top:4px; }
  .lesson.done > .lhead{ display:none; }
  .mini .mru{ font-family:inherit; }
  /* Кнопка «вернуться к текущему уроку» — появляется, когда ушли скроллом вверх */
  #back{ position:fixed; right:14px; bottom:96px; z-index:6; width:48px; height:48px;
         border:0; border-radius:50%; background:color-mix(in srgb, var(--primary) 72%, transparent);
         color:#fff; font-size:22px; line-height:48px; cursor:pointer;
         box-shadow:0 4px 14px rgba(0,0,0,.2); }
  #back[hidden]{ display:none; }
  .chart{ margin:0 0 20px; background:var(--surface); border:1px solid var(--border);
          border-radius:12px; overflow:hidden; }
  .chart .cap{ background:var(--chart); color:#fff; font-weight:700; font-size:13px;
               letter-spacing:.05em; text-transform:uppercase; padding:8px 12px; }
  /* PO 30.08: не помещается по ширине — горизонтальный скролл у САМОЙ таблицы (шапка чарта
     остаётся на месте, контент страницы не скроллится). Содержательной ячейке — минимум
     96px, чтобы колонку с предложением нельзя было зажать в нечитаемый столбик; узкие
     колонки (tight/lcol/wcol) остаются узкими. */
  .chart .tblwrap{ overflow-x:auto; }
  .chart td:not(.tight):not(.lcol):not(.wcol){ min-width:96px; }
  table{ border-collapse:collapse; width:100%; }
  th{ background:var(--chart-soft); color:var(--chart); text-align:left; font-size:12px;
      letter-spacing:.04em; text-transform:uppercase; padding:7px 10px; border:1px solid var(--border); }
  td{ border:1px solid var(--border); padding:9px 10px; vertical-align:top; cursor:pointer; width:50%; }
  td.wcol{ width:1%; white-space:nowrap; }
  /* ярлык строки (27.08): тот же вид, что у заголовка колонки th */
  /* vertical-align:middle — объединённый ярлык стоит посредине своих строк (PO 30.08, урок 28) */
  td.lcol{ width:1%; white-space:nowrap; background:var(--chart-soft); vertical-align:middle; }
  /* колонка сплошь коротких ячеек (одно слово/имя) жмётся к содержимому — ширина уходит
     колонкам с предложениями (PO 29.08, урок 18) */
  /* nowrap (PO 30.08, планшет): без него браузер жмёт короткую колонку до min-content и рвёт
     «To the garage.» на две строки; порог tight 16 знаков делает nowrap безопасным, широкая
     колонка получает остаток («правые шире за счёт левой»), при нехватке места — скролл .tblwrap. */
  td.tight{ width:1%; white-space:nowrap; }
  .ltxt{ color:var(--chart); font-size:12px; font-weight:700; }
  .wtxt{ font-weight:700; color:var(--primary); font-size:17px; border-radius:6px; padding:1px 4px; }
  .entxt{ font-size:16px; border-radius:6px; padding:1px 4px; display:inline-block; }
  .rutxt{ font-size:13px; color:var(--muted); margin-top:3px; border-radius:6px; padding:1px 4px; }
  .play{ background:color-mix(in srgb, var(--primary) 16%, transparent); }
  /* Ячейка, к которой сейчас звучит/показано пояснение (S38-26) */
  td.ncell{ outline:2px solid var(--primary); outline-offset:-2px;
            background:color-mix(in srgb, var(--primary) 7%, transparent); }
  /* Блоки в ленте (шапка чарта, ОБРАТИ ВНИМАНИЕ, ЗАПОМНИ, подводка) */
  .blk{ margin:0 0 14px; }
  .blk-title{ font-weight:800; font-size:17px; line-height:1.4; margin-top:4px; }
  .blk-lead{ color:var(--ink); }
  .blk-callout{ background:var(--surface); border:1px solid var(--border);
                border-left:4px solid var(--primary); border-radius:10px; padding:10px 12px; }
  .blk-outro{ color:var(--ink); font-weight:600; text-align:center; margin-top:18px; }
  /* Подзаголовок ВНУТРИ урока: нюансы из Grammar Notes — не отдельные упражнения,
     а части объяснения своей таблицы (решение PO S38-37) */
  .blk-subtitle{ font-weight:800; font-size:15.5px; line-height:1.4; margin-top:22px;
                 color:var(--chart); }
  .blk .lbl{ font-weight:800; letter-spacing:.03em; margin-right:6px; }
  /* Ключевая конструкция в ячейке чарта — выделена (S38-28) */
  .hl{ font-weight:700; color:var(--chart); background:var(--chart-soft); border-radius:5px; padding:0 3px; }
  /* Сводная табличка: НЕ звучит, читается глазами по бегущей подсветке (S38-29) */
  .mini{ margin:0 0 14px; background:var(--surface); border:1px solid var(--border);
         border-radius:10px; overflow-x:auto; }
  /* PO 30.08 (скрин урока 22): fixed-раскладка жала колонки поровну — длинные слова
     («подлежащее») наезжали на соседние ячейки, а скроллу (.mini overflow-x) нечего было
     скроллить, т.к. таблица не росла. Авто-раскладка: колонка не уже своего длиннейшего
     слова; не влезло на экран — таблица шире контейнера, работает горизонтальный скролл. */
  .mini table{ min-width:100%; }
  /* Заголовки строчными и мельче: КАПС делает «УТВЕРЖДЕНИЕ» шире колонки (89px при 4
     колонках на 390px) и слово рвётся посреди — «УТВЕРЖДЕН|ИЕ» */
  .mini th{ font-size:10px; padding:6px 4px; white-space:normal; overflow-wrap:break-word;
            text-align:center; line-height:1.25; text-transform:none; letter-spacing:0; }
  .mini td{ padding:8px; text-align:center; width:auto; }
  .mini .mseg{ color:var(--primary); font-weight:700; border-radius:6px; padding:1px 4px;
               display:inline-block; }
  /* Строка таблички, которую читаем сейчас: контур держится, пока не подсветятся все её
     слова (мигание убрано — PO S38-30). Рамка ТОЛЬКО ВНЕШНЯЯ у строки: внутренние границы
     ячеек не подсвечиваем (PO S38-31) — поэтому верх/низ у всех ячеек, а боковые линии
     только у первой и последней. */
  .mini tr.mrow td{ box-shadow:inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary); }
  .mini tr.mrow td:first-child{ box-shadow:inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary),
                                inset 2px 0 0 var(--primary); }
  .mini tr.mrow td:last-child{ box-shadow:inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary),
                               inset -2px 0 0 var(--primary); }
  .bseg{ border-radius:6px; padding:1px 3px; cursor:pointer; }
  .ben{ color:var(--primary); font-weight:600; }
  .bsep{ color:var(--muted); padding:0 2px; }
  /* Кнопка перехода к следующему уроку */
  .next{ display:block; width:100%; margin:0 0 8px; padding:14px 18px; border:0;
         border-radius:12px; background:var(--primary); color:#fff; font:600 16px/1.2 inherit;
         cursor:pointer; }
  .next[hidden]{ display:none; }
  /* Окно пояснения строки — как окно перевода в ридере (.sentence-tr): сверху, под шапкой */
  #note{ position:fixed; top:calc(56px + var(--sticky-h, 0px)); left:50%; transform:translate(-50%,0); z-index:5;
         width:min(608px, 100vw - 24px); padding:12px 16px;
         background:var(--note-bg); border:1px solid var(--border); border-radius:12px;
         box-shadow:0 6px 20px rgba(0,0,0,.15); text-align:center; line-height:1.5; }
  #note[hidden]{ display:none; }
  #note:not([hidden]){ animation:noteIn .15s cubic-bezier(.4,0,.2,1); }
  @keyframes noteIn{ from{ opacity:0; transform:translate(-50%,-6px);} to{ opacity:1; transform:translate(-50%,0);} }
  @media (prefers-reduced-motion: reduce){ #note:not([hidden]){ animation:none; } }
  #player{ position:fixed; left:0; right:0; bottom:0; z-index:7; background:var(--surface);
           border-top:1px solid var(--border);
           padding:10px 16px calc(10px + env(safe-area-inset-bottom));
           display:flex; align-items:center; gap:12px; }
  #player button{ flex:none; width:52px; height:52px; border-radius:50%; border:0;
                  background:var(--primary); color:#fff; font-size:20px; cursor:pointer; }
  #player .info{ flex:1; min-width:0; }
  #player .pos{ font-size:12.5px; color:var(--muted); }
  #player .track{ height:5px; background:var(--border); border-radius:3px; overflow:hidden; margin-top:5px; }
  #player .fill{ height:100%; background:var(--primary); width:0; transition:width .25s; }

  /* ⧉ и ✎ — над лентой (раньше жили в своей шапке; шапка теперь общая, топбар приложения) */
  .gcourse .tools{ max-width:640px; margin:0 auto; padding:10px 16px 0; display:flex; justify-content:flex-end; gap:8px; }
  .gcourse .tool{ width:34px; height:34px; border:1px solid var(--border); border-radius:9px; cursor:pointer;
                  background:var(--surface); color:var(--primary); font-size:16px; line-height:32px; }
  .gcourse .tool:active{ background:var(--chart-soft); }

  /* ЛИПКАЯ СТРОКА ПОД ТОПБАРОМ (PO 28.08): раздел — всегда, одной строкой; название текущего урока —
     когда его большой заголовок ушёл вверх (.compact), мельче заголовка, одной строкой, без пояснения */
  .gcourse .sticky{ position:sticky; top:48px; z-index:5; background:var(--bg); border-bottom:1px solid var(--border);
                    padding:6px 16px 5px; max-width:640px; margin:0 auto; }
  .gcourse .spart{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary);
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
  .gcourse .slesson{ display:none; font-size:14px; font-weight:700; color:var(--ink); line-height:1.3; margin-top:2px;
                     white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gcourse .sticky.compact .slesson{ display:block; }

  /* «Загружается…» в открытом уроке-каркасе (PO 31.08: вход сразу в урок; данные юнита в пути) */
  .lload{ color:var(--muted, #888); font-size:14px; padding:10px 2px 18px; }
  .lesson.done > .lload{ display:none; }

  /* Появление курса той же анимацией, что окна приложения (overlayIn — components.css; PO 31.08).
     Курс скрыт (.gwait), пока стартовый урок не загружен ЦЕЛИКОМ («чтобы точно всё загружалось
     до отображения»), затем плавно проявляется (.greveal). Дубль keyframes — на случай страницы
     без components.css (обёртка proto). */
  .gcourse.gwait { opacity: 0; }
  .gcourse.greveal { animation: overlayIn var(--overlay-fade, .22s) var(--ease-enter, ease); }
  @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }