/* РКМенеджер · вариант В «Маршрут»: сайт как курс. Уроки выстроены шагами одного пути, пройденное отмечается
   в этом браузере, в конце урока — самопроверка карточками-перевёртышами. Движение обучающее: круговой
   индикатор хода, печатающаяся строка, отскок отметки, бегущий пунктир маршрута, морфинг за первым экраном. */

/* ══ Первый экран: две колонки ══ */
.rk-hero-c { position: relative; padding-block: clamp(24px, 4vw, 56px) 8px; }
.rk-hero-c__blob { position: absolute; z-index: -1; left: -6vw; top: 8%; width: min(620px, 80vw); aspect-ratio: 1.15; opacity: .9; }
.rk-hero-c__in { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1100px) { .rk-hero-c__in { grid-template-columns: 1fr 1.02fr; } }
.rk-hero-c__text h1 { margin-top: 12px; }
.rk-hero-c__text .rk-lead { margin-top: 18px; }
.rk-hero-c__drum .rk-drum-title { font-size: 20px; margin: 0 0 4px; text-align: center; }
.rk-hero-c .er-type { color: var(--rk-accent-ink); }

/* ══ Маршрут: шаги на одной линии, пунктир бежит по пути ══ */
.rk-route { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.rk-route::before { content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px;
  background-image: repeating-linear-gradient(180deg, var(--border-hover) 0 8px, transparent 8px 16px); background-size: 2px 16px;
  animation: gl-march-rk 1.2s linear infinite; }                       /* приём gl-ants: сдвиг равен периоду */
.rk-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.rk-step__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--border-default); font: 800 16px var(--font-heading); color: var(--text-secondary); }
.rk-step__ok { display: none; width: 26px; height: 26px; color: var(--action-primary-text); }
.rk-step[data-done] .rk-step__dot { background: var(--action-primary); border-color: var(--action-primary); }
.rk-step[data-done] .rk-step__n { display: none; }
.rk-step[data-done] .rk-step__ok { display: block; }
.rk-step__card { position: relative; padding: 18px 20px; border-radius: var(--rk-radius); background: var(--bg-card); border: 1px solid var(--border-divider); box-shadow: var(--elev-1); display: grid; gap: 6px; }
.rk-step__body { display: grid; gap: 6px; align-content: start; }
.rk-step[data-done] .rk-step__card { border-color: color-mix(in oklch, var(--action-primary) 45%, var(--border-divider)); }
.rk-step__state:not(:empty) { margin-left: 10px; color: var(--state-success); font-weight: 600; }
.rk-step[data-lesson="7"] .rk-step__card { background: color-mix(in oklch, var(--bg-card) 88%, var(--action-primary)); }
/* отскок точки шага при наведении на карточку — мелкий предмет, перелёт уместен (скил ui-feedback-motion) */
.rk-step:hover .rk-step__dot, .rk-step:focus-within .rk-step__dot { transform: translateY(-6px); }
.rk-done__ic { display: inline-grid; }
@media (min-width: 1100px) {
  .rk-route::before { left: 50%; translate: -1px 0; }
  .rk-step { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0; }
  .rk-step__dot { grid-column: 2; grid-row: 1; justify-self: center; }
  .rk-step__card { grid-row: 1; }
  .rk-step:nth-child(odd) .rk-step__card { grid-column: 1; }
  .rk-step:nth-child(even) .rk-step__card { grid-column: 3; }
  .rk-step + .rk-step { margin-top: -54px; }                          /* шаги заходят друг за друга ёлочкой */
}

/* ══ Каталог: карточки выровнены по внутренним линиям — приём subgrid ══
   Четыре строки карточки — обложка, номер, заголовок, описание — наследуются из общей сетки, поэтому заголовки
   соседних карточек стоят на одних линиях при любой длине текста. Строки сведений с датой и временем чтения нет —
   решение владельца 05.10.2026. */
.rk-cards--sub.gk-subgrid { grid-template-rows: none; grid-auto-rows: auto; row-gap: 20px; }
.rk-cards--sub.gk-subgrid > .rk-lcard { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
.rk-lcard--sub .rk-lcard__body { display: contents; }
.rk-lcard--sub .rk-lcard__body > * { padding-inline: 20px; }
.rk-lcard--sub .rk-lcard__num { padding-top: 16px; }
.rk-lcard--sub .rk-lcard__title { padding-top: 6px; }
.rk-lcard--sub .rk-lcard__text { padding-block: 6px 18px; }
@supports not (grid-template-rows: subgrid) {
  .rk-cards--sub.gk-subgrid > .rk-lcard { grid-row: auto; display: flex; flex-direction: column; }
}
.rk-lcard[data-done] .rk-lcard__num::after { content: " · пройден"; color: var(--state-success); font-weight: 600; }
.rk-filter { display: inline-flex; margin-top: 18px; padding: 3px; gap: 2px; border-radius: 999px; background: var(--action-secondary); }
.rk-filter button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font: 500 14px var(--font-text); color: var(--text-secondary); cursor: pointer; }
.rk-filter button[aria-pressed="true"] { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--elev-1); }

/* ══ Урок: шаг курса ══ */
.rk-lesson-c__head { padding-top: 20px; }
.rk-stepbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; font-size: 15px; }
.rk-ring--read { display: grid; place-items: center; }
.rk-ring--read b { position: absolute; font: 700 12px var(--font-mono); color: var(--text-primary); }
.rk-chips-rail { --sr-item: auto; margin-top: 20px; padding-bottom: 10px; scroll-snap-type: x proximity; }
.rk-chips-rail .rk-chip { flex: 0 0 auto; scroll-snap-align: start; font-size: 14px; }
.rk-lesson-c__grid { --gk-gap: 48px; margin-top: 12px; }
.rk-lesson-c__side { padding-top: 30px; max-height: calc(100vh - var(--rk-header-h) - 48px); overflow: auto; }
@media (min-width: 1100px) { .rk-chips-rail { display: none; } }
@media (max-width: 1099px) { .rk-lesson-c__grid { display: block; } .rk-lesson-c__side { display: none; } }
.rk-quiz { margin-top: 72px; padding: clamp(20px, 3vw, 32px); border-radius: calc(var(--rk-radius) + 6px); background: var(--bg-menu); }
.rk-done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
/* отмеченный урок: основные цвета переопределяются только на корне — отметка видна кольцом и надписью */
.rk-done__btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--state-success), var(--fb-shadow-rest); }

@media (prefers-reduced-motion: reduce) { .rk-route::before { animation: none !important; } }