/* ============================================================
   LevioClass · Компоненты
   Требует tokens.css и base.css.
   База вёрстки — 390px. Ховеры есть только под указателем
   (@media hover), фокус с клавиатуры — в base.css.
   ============================================================ */

/* ── Корпус и секции ─────────────────────────────────────── */

.screen {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  background: var(--paper);
  min-height: 100dvh;
}
/* Демонстрационный «телефон» — только для стайлгайда и канваса */
.screen--framed {
  min-height: 0;
  border-radius: var(--r-screen);
  overflow: hidden;
  box-shadow: var(--shadow-screen);
}

.section         { padding: 24px var(--pad-x); }
.section--tight  { padding: 16px var(--pad-x); }
.section--paper2 { background: var(--paper-2); }
.section--ink    { background: var(--ink); color: var(--on-ink); }
.section--reader { padding-inline: var(--pad-x-reader); }

.hairline    { height: 1px; background: var(--hairline-2); border: 0; margin: 0; }
.stack       { display: flex; flex-direction: column; gap: var(--gap, 12px); }
.row         { display: flex; align-items: center; gap: var(--gap, 10px); }
.row--between{ justify-content: space-between; }

/* ── Шапка ───────────────────────────────────────────────── */

.appbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px var(--pad-x);
  background: rgba(244,241,234,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline-2);
}
.appbar--ink {
  background: rgba(18,16,14,0.92);
  border-bottom-color: var(--ink-border);
  color: var(--on-ink);
}

/* Вордмарк: latin только здесь и в футере */
.wordmark {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.wordmark span { color: var(--muted); }
.on-ink .wordmark      { color: var(--on-ink); }
.on-ink .wordmark span { color: var(--on-ink-muted-2); }

/* ── Кнопки ──────────────────────────────────────────────────
   Все хит-таргеты ≥ 44px. Размер задаётся модификатором.
   ──────────────────────────────────────────────────────────── */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding-inline: 18px;
  border-radius: var(--r-btn);
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-align: center;
}

.btn--md { height: 54px; font-size: 16.5px; }
.btn--sm { height: 52px; font-size: 16px; }
.btn--xs { height: 50px; font-size: 15.5px; border-radius: var(--r-btn-sm); gap: 8px; }

.btn--primary   { background: var(--ink); color: var(--on-ink); }
.btn--accent    { background: var(--accent); color: var(--ink); }
.btn--secondary { border: 1px solid var(--hairline-btn); color: var(--ink); font-weight: 500; }
.btn--secondary.btn--sm { border-color: var(--hairline-btn-2); }

/* Disabled живёт на тёмном фоне */
.btn--disabled {
  border: 1px solid var(--ink-border);
  color: var(--on-ink-disabled);
  cursor: default;
}

/* Квадратная кнопка «назад» и бургер */
.btn--square {
  width: 54px;
  flex: 0 0 54px;
  height: 54px;
  padding: 0;
  font-size: 18px;
}
.btn--square.btn--xs { width: 54px; flex-basis: 54px; height: 50px; }

/* Стрелка в primary — лаймом */
.btn--primary .arrow { color: var(--accent); }

/* Sticky-CTA внизу экрана */
.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  gap: 10px;
  padding: 12px var(--pad-x) 16px;
  background: linear-gradient(to top, var(--paper) 62%, transparent);
}
.sticky-cta .btn--accent { box-shadow: var(--shadow-cta); }

/* ── Чипы ────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
  white-space: nowrap;
}
.chip--upper   { text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 9px; }
.chip--accent  { background: var(--accent); color: var(--ink); }
.chip--ink     { background: var(--ink); color: var(--on-ink); }
.chip--outline { border: 1px solid var(--hairline-chip); }
.chip--muted   { border: 1px solid var(--hairline-strong); color: var(--muted); }
.on-ink .chip--outline { border-color: var(--ink-border); color: var(--on-ink); }
/* Кликабельный чип — хит-таргет 44px */
.chip--tap { min-height: 44px; padding-inline: 16px; font-size: 11.5px; }

/* ── Карточки ────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Активная / выбранная карточка — граница ink */
.card--active  { border-color: var(--ink); }
.card--tight   { border-radius: var(--r-btn); padding: 14px 16px; }
.card--dashed  { background: none; border: 1px dashed var(--hairline-chip); }

/* Тёмный блок */
.block-ink {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-block);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Врезка внутри тёмного блока */
.inset-ink {
  border: 1px solid var(--ink-border);
  border-radius: var(--r-btn);
  padding: 14px;
}
/* Врезка на бумаге */
.inset-paper {
  background: var(--paper-2);
  border-radius: var(--r-btn);
  padding: 14px 16px;
}

/* Список в общем контейнере с 1px-зазорами */
.stack-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--divider);
  border-radius: var(--r-block);
  overflow: hidden;
}
.stack-list__row { background: var(--surface); padding: 16px; }
.stack-list--ink        { background: var(--ink-border); }
.stack-list--ink .stack-list__row { background: var(--ink); color: var(--on-ink); }
.stack-list--ink .stack-list__row--alt { background: var(--ink-alt); }

/* Цитата-врезка с лаймовой границей */
.pullquote {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  font-style: italic;
  color: var(--ink-2);
}

/* ── Полосы прогресса ────────────────────────────────────── */

.bar {
  --h: 6px;
  height: var(--h);
  border-radius: calc(var(--h) / 2);
  background: var(--track);
  overflow: hidden;
}
.bar__fill { height: 100%; border-radius: inherit; background: var(--ink); }
.bar--h3  { --h: 3px; }
.bar--h8  { --h: 8px; }
.bar--h12 { --h: 12px; border-radius: 6px; }
:is(.on-ink, .block-ink, .tile--ink, .inset-ink) .bar { background: var(--ink-border); }
:is(.on-ink, .block-ink, .tile--ink, .inset-ink) .bar__fill { background: var(--accent); }

/* Индикатор шагов онбординга: N полос h3 */
.steps { display: flex; align-items: center; gap: 10px; }
.steps__seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--track-2);
}
.steps__seg--done { background: var(--ink); }
.on-ink .steps__seg      { background: var(--ink-border); }
.on-ink .steps__seg--done{ background: var(--accent); }

/* Сегментированная полоса (прогресс курса из 6 уроков) */
.segbar { display: flex; gap: 4px; }
.segbar__seg {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--track);
}
.segbar__seg--done    { background: var(--moss); }
.segbar__seg--current { background: linear-gradient(to right, var(--accent) 40%, var(--track) 40%); }

/* Stacked bar — «куда идут 690 c» */
.stacked { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.stacked__seg:first-child { border-radius: 6px 0 0 6px; }
.stacked__seg:last-child  { border-radius: 0 6px 6px 0; }

/* Точка легенды / статуса */
.dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.dot--moss   { background: var(--moss); }
.dot--ochre  { background: var(--ochre); }
.dot--idle   { background: rgba(18,16,14,0.2); }
.dot--accent { background: var(--accent); }

/* Недельная полоса стрика: 7 столбиков */
.weekbar { display: flex; gap: 6px; }
.weekbar__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.weekbar__bar {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  background: var(--ink-border);
}
.weekbar__bar--done  { background: var(--accent); }
.weekbar__bar--today { border: 1px dashed var(--on-ink-disabled); }

/* ── Плитки ──────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-tile); }
.tile {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tile--ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ── Поля ввода ──────────────────────────────────────────── */

.field {
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--r-btn);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field--soft { border-color: rgba(18,16,14,0.14); border-radius: var(--r-card); }
.field__input {
  width: 100%;
  border: 0;
  outline: none;
  background: none;
  font-size: 16px;
  line-height: 1.65;
  resize: vertical;
}
.field__input::placeholder { color: var(--muted-2); }
/* У input снят outline, поэтому кольцо фокуса показывает рамка поля:
   визуально «полем» выглядит именно она. */
.field--soft:focus-within { border-color: var(--ink); }
.field:has(.field__input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* Каретка-блок 2×20 — декоративная, для статичных макетов */
.caret {
  display: inline-block;
  width: 2px;
  height: 20px;
  background: var(--ink);
  vertical-align: -4px;
}

/* ── Переключатели ───────────────────────────────────────── */

.toggle {
  width: 44px;
  height: 26px;
  flex: 0 0 44px;
  border-radius: 13px;
  background: var(--ink-border);
  padding: 3px;
  display: flex;
  justify-content: flex-start;
}
.toggle--on { background: var(--accent); justify-content: flex-end; }
.toggle__knob { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); }

.checkbox {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 6px;
  border: 1px solid var(--hairline-chip);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.checkbox--on { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.checkbox--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.radio {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  border: 1px solid rgba(18,16,14,0.3);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.radio--on { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.on-ink .radio { border-color: var(--on-ink-muted-2); }
.on-ink .radio--on { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* Строка-вариант выбора. Обёртка даёт хит-таргет ≥44px. */
.option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-btn);
}
.option--on      { border-color: var(--ink); background: var(--accent-soft); }
.on-ink .option  { border-color: var(--ink-border); }
.on-ink .option--on { border-color: var(--accent); background: var(--accent-soft-dark); }

/* ── Шит и затемнение ────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  width: 100%;
  max-width: 390px;
  background: var(--paper);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 12px var(--pad-x) 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(18,16,14,0.2);
  align-self: center;
}

/* ── Оверлей теста ───────────────────────────────────────── */

.test-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--paper);
  overflow-y: auto;
  display: none;
}
.test {
  max-width: 390px;
  margin: 0 auto;
  padding: 28px var(--pad-x) 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  user-select: none;
}

/* ── Ховер · только под указателем ────────────────────────────
   В макете ховеров нет — приоритет мобильный. Хендофф задаёт для
   десктопа два состояния: primary светлеет до ink-2, secondary
   получает заливку rgba(18,16,14,0.04).

   Заливку кладём фоновой картинкой-плёнкой, а не background-color:
   так под ней остаётся собственный фон элемента — белый surface у
   карточки, лайм у accent, — и одно правило работает на всех
   подложках. На тёмном чернильная плёнка не видна, поэтому там
   зеркальная: 6% бумаги.

   Всё внутри @media (hover: hover): на тач-экране ховер залипает
   после тапа и состояние остаётся висеть на уже нажатой кнопке.
   ──────────────────────────────────────────────────────────── */

@media (hover: hover) {
  :root {
    --veil:     linear-gradient(rgba(18,16,14,0.04), rgba(18,16,14,0.04));
    --veil-2:   linear-gradient(rgba(18,16,14,0.06), rgba(18,16,14,0.06));
    --veil-ink: linear-gradient(rgba(244,241,234,0.06), rgba(244,241,234,0.06));
  }

  /* Ховер вешаем только на то, что действительно нажимается:
     те же классы носят и статичные чипы, и карточки-плашки. */
  :is(button, a, [data-action]):is(.btn, .chip, .card, .tile,
      .stack-list__row, .option, .mini__option, .reader__size) {
    transition: background-color 120ms ease;
  }

  /* primary — осветление ink до ink-2 */
  :is(button, a, [data-action]):is(.btn--primary, .chip--ink):hover:not([disabled]) {
    background-color: var(--ink-2);
  }

  /* secondary и прочие светлые поверхности — плёнка 4% */
  :is(button, a, [data-action]):is(.btn--secondary, .btn--square, .chip--outline,
      .chip--tap, .card, .tile, .stack-list__row, .option, .mini__option,
      .reader__size):hover:not([disabled]):not(.btn--disabled):not(.chip--off) {
    background-image: var(--veil);
  }

  /* accent на лайме 4% почти не видно — берём следующую ступень */
  :is(button, a, [data-action]):is(.btn--accent, .chip--accent):hover:not([disabled]) {
    background-image: var(--veil-2);
  }

  /* На тёмном чернильная плёнка невидима — кладём бумажную */
  :is(.on-ink, .block-ink, .tile--ink, .inset-ink, .section--ink,
      .appbar--ink, .stack-list--ink)
    :is(button, a, [data-action]):is(.btn--secondary, .btn--square, .chip--outline,
        .chip--tap, .tile, .inset-ink, .stack-list__row,
        .option):hover:not([disabled]):not(.btn--disabled) {
    background-image: var(--veil-ink);
  }

  /* Нерабочее не должно притворяться нажимаемым */
  :is(.btn--disabled, .chip--off, [disabled]):hover { background-image: none; }
}

/* ── Адаптив ─────────────────────────────────────────────────
   До 480px — как в макете. Выше — шире горизонтальные поля,
   сетки плиток разворачиваются, читаемая колонка не растёт
   вместе с корпусом. Десктоп проектируется отдельно: здесь
   задача — чтобы на планшете и широком экране было опрятно.
   ──────────────────────────────────────────────────────────── */

@media (min-width: 481px) {
  .screen { max-width: 560px; }
  :root { --pad-x: 28px; --pad-x-reader: 32px; }
  .sheet { max-width: 520px; }
  .test  { max-width: 520px; }
  /* Семь столбиков стрика во всю ширину превращаются в плашки */
  .weekbar { max-width: 420px; }
}

@media (min-width: 768px) {
  .screen { max-width: 720px; }
  :root { --pad-x: 40px; }
  .test  { max-width: 600px; }

  /* Сетки 2×2 разворачиваем, но не в дырку: групп по две и по
     четыре плитки в проекте больше, чем по три (по три — только
     инлайновые строки статистики, они сюда не попадают). Три
     колонки достаются шести обложкам каталога. */
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tiles:has(> :last-child:nth-child(2)),
  .tiles:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }

  /* Мера чтения. Корпус растёт, строка — нет: на 720px абзац во
     всю ширину даёт под 90 знаков. Ограничиваем сплошной текст,
     а карточки, списки и полосы оставляем во всю колонку.
     .prose живёт в prose.css, но своей ширины там нет, и мера —
     общесистемная вещь, поэтому она здесь, рядом с остальными. */
  p.t-lead,
  p.t-body,
  .prose { max-width: 60ch; }

  /* Поле, в котором пишут работу, — тоже текст: строки в 700px в
     нём не набирают. Сужаем не коробку, а колонку внутри неё:
     рамка остаётся на месте, в одну линию с кнопкой и карточкой
     рядом, а строка получается той же меры, что и абзацы. */
  .field:has(textarea) {
    padding-inline: max(14px, calc((100% - 60ch) / 2));
  }
}

@media (min-width: 1024px) {
  .screen { max-width: 820px; }
  :root { --pad-x: 56px; }
  /* Четыре плитки на широком экране встают в один ряд */
  .tiles:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}

/* ── Обложка урока ───────────────────────────────────────────
   Постер 4:5. Свой хром на картинку не кладём — номер и название
   урока идут текстом рядом (правило хендоффа). Исключение —
   короткая метка статуса: она нужна, чтобы состояние читалось
   в сетке, и ставится по нижнему краю, а не в угол.
   ──────────────────────────────────────────────────────────── */

.cover-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-btn-sm);
  overflow: hidden;
  background: var(--paper-2);
}
.cover-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Пройденный и текущий — затемнение снизу, чтобы метка читалась */
.cover-art--done::after,
.cover-art--current::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,16,14,0.6), transparent 50%);
}
/* Текущий урок обведён — это состояние, а не украшение места */
.cover-art--current { box-shadow: 0 0 0 1px var(--ink); }

/* Закрытый — бумажная вуаль поверх всей обложки */
.cover-art--locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(244,241,234,0.55);
}

.cover-art__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-mark);
}
.cover-art__tag--done   { background: var(--accent); color: var(--ink); }
.cover-art__tag--locked { background: var(--paper); color: var(--muted); }

/* Полоса прогресса поверх нижнего края текущей обложки */
.cover-art__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  height: 4px;
  background: rgba(244,241,234,0.35);
}
.cover-art__bar span { display: block; height: 100%; background: var(--accent); }

/* Мелкие размеры из макета 22 */
.cover-art--thumb { width: 76px;  flex: 0 0 76px;  border-radius: 10px; }
.cover-art--rail  { width: 116px; flex: 0 0 116px; }
.cover-art--micro { width: 44px;  flex: 0 0 44px;  border-radius: 8px; }

/* Горизонтальная лента обложек */
.cover-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: var(--pad-x);
  margin-inline: calc(var(--pad-x) * -1);
  scrollbar-width: none;
}
.cover-rail::-webkit-scrollbar { display: none; }
.cover-rail > * { scroll-snap-align: start; }