/* 05-courses.css — part 05/10 of the ordered bp bundle (the former single bp.css,
   split by surface; the content is UNREORDERED). ORDER IS LOAD-BEARING: cascade ties
   resolve by document order, so hosts must link 01→10 in exactly this sequence —
   CssHygieneTests pins both the list and the order in both hosts. */

/* ── rp-crsl* (wave 4 Task 3 — /courses list, Курсы.dc.html) ─────────────────────────────────── */
.rp-crsl-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.rp-crsl-toolbar .rp-ph { margin-bottom: 0; }
.rp-crsl-toolbar-spacer { flex: 1; }
.rp-crsl-btn {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
}
.rp-crsl-btn--primary { border: 0; background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.rp-crsl-btn--primary:hover { background: var(--primary); opacity: 0.92; }
.rp-crsl-btn-compact { display: none; }

.rp-crsl-filters { display: flex; align-items: center; gap: 8px; margin: 20px 0 18px; flex-wrap: wrap; }
.rp-crsl-chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--secondary);
  color: var(--secondary-foreground);
  cursor: pointer;
  user-select: none;
}
.rp-crsl-chip--active { background: var(--foreground); color: var(--background); font-weight: 600; }

.rp-crsl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.rp-crsl-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
  text-decoration: none;
  color: var(--foreground);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.rp-crsl-card:hover { box-shadow: var(--shadow-md); border-color: var(--input); }
.rp-crsl-card--archived { opacity: 0.62; }

.rp-crsl-cover {
  height: 112px;
  background: repeating-linear-gradient(45deg, var(--muted), var(--muted) 7px, var(--secondary) 7px, var(--secondary) 14px);
}
.rp-crsl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rp-crsl-body { padding: 13px 14px 14px; }
.rp-crsl-name {
  font-size: 14.5px;
  font-weight: 650;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-crsl-meta { font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 10px; }
/* flex-wrap + nowrap children: a card with two status chips + «N учеников» + price is wider than
   the card body — without wrap the price clips at the card edge (desktop) and the counter/price
   break mid-text into two lines (mobile). Wrapped rows keep the price right-aligned via its own
   auto margin, since the spacer only pushes within the first line. */
.rp-crsl-row { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.rp-crsl-students { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.rp-crsl-spacer { flex: 1; }
.rp-crsl-price { font-size: 13px; font-weight: 650; white-space: nowrap; margin-left: auto; }

.rp-crsl-info {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted-foreground);
}

/* Shared course-dialog chrome (originally CreateCourseDialog, now also CourseHeaderDialog,
   CourseTrackWizardDialog, TrackResyncDialog and CourseCreateWizard) — field/label/input REUSED from
   rp-sched-dlg*; only the header, note row, textarea sizing and full-width submit are page-specific. */
.rp-crsl-dlg { max-width: 440px; }
.rp-crsl-dlg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.rp-crsl-dlg-title { font-size: 17px; font-weight: 700; }
.rp-crsl-dlg-spacer { flex: 1; }
.rp-crsl-dlg-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.rp-crsl-dlg-close:hover { background: var(--secondary); }
.rp-crsl-field { margin-bottom: 14px; }
.rp-crsl-dlg-optional { font-weight: 400; color: var(--muted-foreground); }
.rp-crsl-dlg-textarea { height: 66px; padding: 10px 12px; resize: vertical; }
.rp-crsl-dlg-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin: 4px 0 16px;
}
.rp-crsl-dlg-submit {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.rp-crsl-dlg-submit:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 768px) {
  .rp-crsl-btn-full { display: none; }
  .rp-crsl-btn-compact { display: inline; }
  .rp-crsl-grid { grid-template-columns: 1fr; }
  .rp-crsl-cover { height: 96px; }
}

/* ── Task 4 (wave 4) — /courses/{Id} course overview (rp-covw*), Обзор курса.dc.html ───────────────
   Product hub: publication banner, header (cover + status + name + kebab), «Продукт» card (price/
   duration/validity/sequential-unlock + per-module lesson-count steppers). All colours via tokens. */
.rp-covw-loading { display: flex; justify-content: center; padding: 48px 0; }
/* Wide enough for the structure column plus the 344px product panel; collapses to one column at 1279px,
   the same breakpoint the C# tab set uses (viewport.js). */
.rp-covw { max-width: 1240px; margin: 0 auto; }

/* breadcrumb */
.rp-covw-crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 16px; }
.rp-covw-crumb-link { color: var(--muted-foreground); text-decoration: none; }
.rp-covw-crumb-link:hover { color: var(--foreground); }
.rp-covw-crumb-back { display: none; align-items: center; justify-content: center; }
.rp-covw-crumb-sep { color: var(--input); }
.rp-covw-crumb-cur { font-weight: 650; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* header */
.rp-covw-head { display: flex; gap: 20px; margin-bottom: 20px; }
.rp-covw-cover {
  width: 220px; height: 142px; border-radius: 16px; flex-shrink: 0;
  background-size: cover; background-position: center; background-color: var(--muted);
}
.rp-covw-cover--placeholder {
  background-image: repeating-linear-gradient(45deg, var(--muted), var(--muted) 7px, var(--secondary) 7px, var(--secondary) 14px);
}
.rp-covw-head-main { flex: 1; min-width: 0; }
.rp-covw-title-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rp-covw-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; flex: 1; min-width: 0; }
.rp-covw-desc { font-size: 13px; color: var(--muted-foreground); margin: 5px 0 12px; line-height: 1.5; }
.rp-covw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-covw-btn {
  height: 38px; gap: 8px; padding: 0 16px; font: inherit; font-size: 13px; text-decoration: none;
}
.rp-covw-btn--primary { border: 0; background: var(--primary); color: var(--primary-foreground); }
.rp-covw-btn--outline { border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-weight: 500; }
.rp-covw-btn--outline:hover { background: var(--secondary); }
/* «Ещё» — the course menu trigger as the third action button (BbDropdownMenuTrigger renders a <button>,
   so the anchor-sized rules above need the button resets here). */
.rp-covw-more { display: inline-flex; align-items: center; cursor: pointer; }
/* Icon-collapse подписей «Изменить содержание»/«Как ученик» на узком экране — иконки pencil/eye
   уже в кнопках; aria-label + title остаются на самих <a>. */
@media (max-width: 560px) {
  .rp-covw-actions .rp-covw-btn { padding: 0 11px; }
  .rp-covw-actions .rp-covw-btn-caption { display: none; }
}

/* Hub shell: the structure (or the active tab's card) beside a sticky product panel. The page scrolls as
   one document — an independently scrolling right column would need the `:has()` shell override that
   exists for the chat and nothing else, and the app bar already owns 56px of permanent chrome. */
/* margin-top: the RpHubTabs strip above ends in a bare border-bottom — without the gap the first
   tab-pane row («N модулей · План курса», the cards of Ученики/Расписание) sits flush against it. */
.rp-covw-cols { display: flex; gap: 18px; align-items: flex-start; margin-top: 18px; }
.rp-covw-main { flex: 1; min-width: 0; }
/* No max-height/overflow here: capping the column made it scroll on its own (a second scrollbar next to
   the product cards) as soon as the stack outgrew the viewport. Sticky alone is enough — a panel taller
   than the viewport simply releases at the end of the flex container and scrolls with the document. */
.rp-covw-side { flex: 0 0 344px; position: sticky; top: 12px; align-self: flex-start; }
/* The product panel's own stack — ONE fragment, rendered here on a wide viewport and as the «Продукт»
   tab body on a narrow one, so the two mount points cannot drift. */
.rp-covw-panel { display: flex; flex-direction: column; gap: 14px; }
.rp-covw-cardbody { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.rp-covw-cover-btn,
.rp-covw-publish-btn {
  height: 34px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--card); color: var(--foreground); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.rp-covw-cover-btn:hover:not(:disabled),
.rp-covw-publish-btn:hover:not(:disabled) { background: var(--secondary); }
.rp-covw-publish-btn { border: 0; background: var(--primary); color: var(--primary-foreground); }
.rp-covw-publish-btn:hover:not(:disabled) { background: var(--primary); opacity: 0.92; }
.rp-covw-publish-btn:disabled, .rp-covw-cover-btn:disabled { opacity: 0.6; cursor: default; }
.rp-covw-panel .rp-covw-cover { width: 100%; height: 150px; }

/* «Структура» tab header: what the course is made of + the AI outline generator. «+ Модуль» is NOT
   repeated here — the shared tree owns creation (dashed row, per-module «+», empty-state card). */
.rp-covw-strhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rp-covw-strhead-meta { flex: 1; min-width: 0; font-size: 13px; color: var(--muted-foreground); }
.rp-covw-strbtn {
  height: 32px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-md);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: var(--accent-foreground);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.rp-covw-strbtn:disabled { opacity: 0.6; cursor: default; }

/* «Публикация» card (Task 5, spec 11.2) — a permanent card (архив included) collapsing готовность/
   витрина/цена into a human title + note + consequence-labeled actions. Reuses rp-covw-card/-card-head/
   -cardbody/-publish-btn/-hint from the cards around it; only the title/note/action/manual-line rows below
   are new. */
.rp-covw-pub-title { font-size: 15px; font-weight: 700; }
.rp-covw-pub-note { font-size: 13px; color: var(--muted-foreground); line-height: 1.45; }
/* rp-covw-cardbody is already a flex column with a 10px gap — this only adds the SPACING BETWEEN the
   button and its own hint underneath, not between one action and the next (the parent gap owns that). */
.rp-covw-pub-action { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rp-covw-pub-hint { font-size: 12px; color: var(--muted-foreground); line-height: 1.4; }
.rp-covw-pub-manual { font-size: 13px; color: var(--muted-foreground); padding-top: 10px; border-top: 1px solid var(--border); }

/* «Интерес» block (courses phase 5, task-4-brief.md §3) — «Сообщить о старте» signups, nested inside
   the same rp-covw-cardbody as the actions above it; a border-top separates it the same way the manual
   line below it is separated, so the eye reads three visually distinct groups (actions / interest /
   manual link) without a nested card-in-a-card. The banner ABOVE the card (rp-covw-interest-banner)
   reuses the shared rp-banner-card shape — only the outer margin here is new, matching the out-of-sync
   banner row idiom on the «Потоки» tab (rp-trk-banner-row). */
.rp-covw-interest {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.rp-covw-interest-count { font-size: 13px; font-weight: 650; }
.rp-covw-interest-rows { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.rp-covw-interest-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.rp-covw-interest-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-covw-interest-row-date { flex-shrink: 0; color: var(--muted-foreground); }
.rp-covw-interest-sent { font-size: 12.5px; color: var(--muted-foreground); }
.rp-covw-interest-banner { margin-bottom: 14px; }

/* «Продукт» card */
.rp-covw-card { border: 1px solid var(--border); border-radius: 16px; background: var(--card); overflow: hidden; }
.rp-covw-card-head { padding: 13px 16px 11px; border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 650; }
.rp-covw-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.rp-covw-row-label { flex: 1; font-size: 13px; color: var(--muted-foreground); }
.rp-covw-row-val { font-size: 13.5px; font-weight: 650; }
.rp-covw-row-val--muted { font-weight: 550; }
/* A venue default (address / meet link) is free text — one line, ellipsis, full value in title. */
.rp-covw-row-val--trunc { min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Groups inside the «Продукт» card: a small caption + ONE «Изменить» per group (= one dialog), the
   rows of that group below. The group head carries the top border of its section; the last row's
   border-bottom closes it. */
.rp-covw-group { border-bottom: 1px solid var(--border); }
.rp-covw-group:last-child { border-bottom: 0; }
.rp-covw-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 4px; }
.rp-covw-group-title { flex: 1; font-size: 11.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }
.rp-covw-group-edit {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 0;
  border-radius: 8px; background: transparent; color: var(--primary); font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer;
}
.rp-covw-group-edit:hover { background: var(--secondary); }
.rp-covw-group .rp-covw-row { padding: 8px 16px; border-bottom: 0; }
.rp-covw-group .rp-covw-row:last-child { padding-bottom: 11px; }
.rp-covw-group .rp-covw-hint { padding-top: 0; }
.rp-covw-empty { padding: 8px 16px 12px; font-size: 12.5px; color: var(--muted-foreground); }

/* dialog bodies (price + name/desc + cover). Chrome for labels/inputs reuses rp-sched-dlg-*. */
.rp-covw-dlg { max-width: 440px; }
.rp-covw-dlg-head { display: flex; align-items: center; margin-bottom: 16px; }
.rp-covw-dlg-title { font-size: 17px; font-weight: 700; }
.rp-covw-dlg-spacer { flex: 1; }
.rp-covw-dlg-close {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; border-radius: 8px;
}
.rp-covw-dlg-close:hover { background: var(--secondary); color: var(--foreground); }
.rp-covw-dlg-fields { display: grid; gap: 12px; margin-bottom: 14px; }
.rp-covw-field { margin-bottom: 12px; }
.rp-covw-dlg-textarea { min-height: 72px; resize: vertical; }
.rp-covw-dlg-hint-inline { display: block; font-size: 12px; color: var(--muted-foreground); margin-top: 4px; }
.rp-covw-dlg-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; margin-bottom: 16px; padding: 10px 12px; background: var(--muted); border-radius: var(--radius-md);
}
.rp-covw-dlg-summary-label { color: var(--muted-foreground); }
.rp-covw-dlg-summary-val { font-weight: 600; }
.rp-covw-dlg-note {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--muted-foreground); margin-bottom: 16px;
}
.rp-covw-dlg-submit {
  width: 100%; height: 44px; border: 0; border-radius: var(--radius-md);
  background: var(--primary); color: var(--primary-foreground);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.rp-covw-dlg-submit:disabled { opacity: 0.6; cursor: default; }
.rp-covw-err { display: block; font-size: 12px; color: var(--destructive); margin-top: 4px; }
.rp-covw-err-banner {
  font-size: 12.5px; color: var(--destructive); background: var(--destructive-muted, var(--muted));
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 12px;
}

/* ── rp-gen-dlg-btn: the inline ghost/primary buttons of SlideDeckEditor's per-slide image row. The
   dialog chrome that used to share this prefix lives in rp-ai-dlg (below). ── */
.rp-gen-dlg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border: 0; border-radius: var(--radius-md);
  background: var(--primary); color: var(--primary-foreground);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rp-gen-dlg-btn:disabled { opacity: 0.7; cursor: default; }
.rp-gen-dlg-btn--ghost {
  background: var(--card); color: var(--foreground); border: 1px solid var(--border);
}
.rp-gen-dlg-btn--ghost:hover { background: var(--secondary); }
/* Honest AI-spend notice (RpAiSpendNote) shared by the generation dialogs. */
.rp-ai-spend-note { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.55; margin: 12px 0 10px; }
/* «План курса» preview list */
.rp-gen-out-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; max-height: 46vh; overflow-y: auto; }
.rp-gen-out-mod {
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); padding: 10px;
}
.rp-gen-out-modrow, .rp-gen-out-lesrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rp-gen-out-lesrow { padding-left: 20px; margin-bottom: 6px; }
.rp-gen-out-lesrow:last-child { margin-bottom: 0; }
.rp-gen-out-del {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted-foreground); cursor: pointer;
}
.rp-gen-out-del:hover { background: var(--secondary); color: var(--destructive); }

/* ── RpAiDialog — the single chrome of every AI generation dialog (text AND image). rp-ai-dlg-* is
   the panel/head/body/footer; rp-ai-tabs/-tab the image dialog's «✦ Сгенерировать · Загрузить» row;
   rp-ai-drop its upload zone; rp-chips/rp-chip-toggle the neutral toggle chips (RpChipGroup). Phones
   (≤600px) get the bottom-sheet variant — same overrides rp-anncmp uses, see 03-chat.css. ── */
.rp-ai-dlg { max-width: 480px; }
.rp-ai-dlg--wide { max-width: 560px; }
.rp-ai-dlg-grabber {
  display: none; width: 40px; height: 4px; border-radius: 999px; background: var(--border); margin: 0 auto 14px;
}
/* The gradient hairline + ✦ tile are the AI «signature» of the handoff (Библиотека обложек.dc.html):
   --rp-ai-g1/g2 are the two gradient stops, brand blue → sky. */
.rp-ai-dlg { --rp-ai-g1: var(--primary); --rp-ai-g2: #4FC3F7; padding-top: 0; }
.rp-ai-dlg::before { content: ""; display: block; height: 2.5px; margin: 0 -24px 18px; background: linear-gradient(90deg, var(--rp-ai-g1), var(--rp-ai-g2)); }
.rp-ai-dlg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rp-ai-dlg-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, var(--rp-ai-g1), var(--rp-ai-g2));
  display: inline-flex; align-items: center; justify-content: center;
}
.rp-ai-dlg-titles { display: flex; flex-direction: column; min-width: 0; }
.rp-ai-dlg-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.rp-ai-dlg-subtitle { font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-ai-dlg-spacer { flex: 1; }
/* The balance chip: the same quiet outline the top-bar rp-tbw-ai wears, so the tutor recognises the
   number as the one they can see in the app bar — it links to the same place. */
.rp-ai-dlg-credits {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  color: var(--muted-foreground); font-size: 12.5px; font-weight: 600; text-decoration: none; flex-shrink: 0;
}
.rp-ai-dlg-credits:hover { color: var(--foreground); border-color: var(--ring); }
.rp-ai-dlg-credits svg { color: var(--primary); }
.rp-ai-dlg-credits--empty { color: var(--destructive); border-color: var(--destructive); }
.rp-ai-dlg-credits--empty svg { color: var(--destructive); }
.rp-ai-dlg-close {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted-foreground); cursor: pointer;
}
.rp-ai-dlg-close:hover { background: var(--secondary); color: var(--foreground); }
.rp-ai-dlg-lead { font-size: 13px; line-height: 1.5; color: var(--muted-foreground); margin: 0 0 12px; }
.rp-ai-dlg-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.rp-ai-dlg-fields { display: grid; gap: 12px; margin-bottom: 12px; }
.rp-ai-dlg-row { display: flex; gap: 10px; }
.rp-ai-dlg-col { flex: 1; min-width: 0; }
.rp-ai-dlg-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 4px; }
.rp-ai-dlg-input {
  width: 100%; box-sizing: border-box; height: 40px;
  border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card);
  padding: 0 12px; font: inherit; font-size: 13.5px; color: var(--foreground);
}
.rp-ai-dlg-hint {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card);
  padding: 10px 12px; font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--foreground); resize: vertical;
}
.rp-ai-dlg-input:focus, .rp-ai-dlg-hint:focus { outline: none; border-color: var(--ring); }
.rp-ai-dlg-note { font-size: 12.5px; color: var(--muted-foreground); margin: -4px 0 12px; }
.rp-ai-dlg-error {
  font-size: 12.5px; color: var(--destructive-muted-foreground); background: var(--destructive-muted);
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 12px;
}
.rp-ai-dlg-wait { font-size: 12.5px; color: var(--muted-foreground); margin: -4px 0 10px; }
.rp-ai-dlg-foot { display: flex; align-items: center; gap: 10px; }
.rp-ai-dlg-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px;
  border: 0; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rp-ai-dlg-btn:disabled { opacity: 0.7; cursor: default; }
.rp-ai-dlg-btn--ghost { background: var(--card); color: var(--foreground); border: 1px solid var(--border); }
.rp-ai-dlg-btn--ghost:hover:not(:disabled) { background: var(--secondary); }
.rp-ai-dlg-btn .rp-spin { border-color: color-mix(in srgb, var(--primary-foreground) 35%, transparent); border-top-color: var(--primary-foreground); }
/* Image dialog: tab row + generate/upload bodies */
/* Segmented control (the mockup's muted-backed pill row, same family as rp-seg). */
.rp-ai-tabs { display: flex; gap: 4px; padding: 3px; background: var(--muted); border-radius: 10px; margin: 0 0 14px; }
.rp-ai-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--muted-foreground); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.rp-ai-tab svg { color: var(--primary); }
.rp-ai-tab--active { color: var(--foreground); background: var(--card); box-shadow: var(--shadow-xs); font-weight: 650; }
.rp-ai-tab:disabled { opacity: 0.5; cursor: default; }
/* Library tab */
.rp-ai-lib-palettes { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.rp-ai-lib-palettes-label { font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
.rp-ai-lib-palettes-hint { font-size: 11.5px; color: var(--muted-foreground); }
.rp-ai-lib-dot { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--border); padding: 0; cursor: pointer; flex-shrink: 0; }
.rp-ai-lib-dot--active { border: 2px solid var(--primary); }
.rp-ai-lib-dot--add { border: 1px dashed var(--input); background: var(--card); color: var(--muted-foreground); font: inherit; font-size: 15px; line-height: 1; }
.rp-ai-lib-custom { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 12px; margin-bottom: 12px; }
.rp-ai-lib-custom-row { display: flex; gap: 8px; margin-bottom: 10px; }
.rp-ai-lib-custom-swatch { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--muted); }
.rp-ai-lib-custom-input { font-family: var(--font-mono, monospace); }
.rp-ai-lib-custom-roles { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.rp-ai-lib-custom-roles span { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); }
.rp-ai-lib-custom-roles em { font-style: normal; font-size: 11px; color: var(--muted-foreground); margin-left: 4px; }
.rp-ai-lib-custom-preview { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); line-height: 0; margin-bottom: 10px; max-height: 120px; }
.rp-ai-lib-custom-preview svg { width: 100%; height: auto; display: block; }
.rp-ai-lib-custom-apply { width: 100%; justify-content: center; height: 38px; }
.rp-ai-lib-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rp-ai-lib-tile {
  position: relative; aspect-ratio: 16 / 10; padding: 0; line-height: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
}
.rp-ai-lib-tile svg { width: 100%; height: 100%; display: block; }
.rp-ai-lib-tile:hover { border-color: var(--ring); }
.rp-ai-lib-tile--active { border: 2px solid var(--primary); }
.rp-ai-lib-tile-check {
  position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground); display: inline-flex; align-items: center; justify-content: center;
}
.rp-ai-lib-free { font-size: 11.5px; color: var(--muted-foreground); }
.rp-ai-drop-title { font-size: 13.5px; font-weight: 600; color: var(--foreground); }
.rp-ai-drop-btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; margin-top: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); font-size: 13px; font-weight: 600;
}
.rp-ai-preview { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 12px; }
.rp-ai-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 132px; padding: 16px; margin-bottom: 12px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--border); border-radius: var(--radius-md); background: var(--card);
  color: var(--muted-foreground); font-size: 13px;
}
.rp-ai-drop:hover, .rp-ai-drop:focus-within { border-color: var(--primary); color: var(--foreground); }
.rp-ai-drop svg { color: var(--primary); }
.rp-ai-drop-hint { font-size: 12px; }
/* The native input spans the whole zone (transparent), so a drop anywhere on it IS a drop on the
   <input type=file> — browsers accept dropped files there without any JS. */
.rp-ai-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rp-ai-drop--busy { pointer-events: none; opacity: 0.6; }
/* RpChipGroup */
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rp-chip-toggle {
  min-width: 40px; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--muted-foreground); font: inherit; font-size: 12.5px; cursor: pointer;
}
.rp-chip-toggle:hover:not(:disabled) { border-color: var(--ring); color: var(--foreground); }
.rp-chip-toggle--active { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.rp-chip-toggle:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 600px) {
  .rp-ai-dlg {
    position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    transform: none !important; translate: none !important;
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    max-height: 92vh; overflow-y: auto;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
    padding: 10px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .rp-ai-dlg-grabber { display: block; }
  .rp-ai-dlg::before { margin: 0 -18px 12px; }
  .rp-ai-lib-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .rp-ai-lib-palettes-hint { display: none; }
  .rp-ai-lib-free { text-align: center; }
  .rp-ai-dlg-foot { flex-direction: column-reverse; align-items: stretch; }
  .rp-ai-dlg-foot .rp-ai-dlg-spacer { display: none; }
  .rp-ai-dlg-btn { width: 100%; height: 48px; font-size: 14.5px; justify-content: center; }
  .rp-ai-dlg-row { flex-direction: column; }
}

/* ── Task 5 (wave 4) — «Озвучка уроков» card ────────────────────────────────────────────────────── */
.rp-covw-audio-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px 11px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.rp-covw-audio-title { flex: 1; font-size: 13.5px; font-weight: 650; color: var(--foreground); }
.rp-covw-voice { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.rp-covw-voice-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-foreground); margin-bottom: 8px;
}
.rp-covw-voice-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-covw-voice-chip {
  padding: 6px 13px; border: 0; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--secondary); color: var(--secondary-foreground); cursor: pointer;
}
.rp-covw-voice-chip:disabled { opacity: 0.6; cursor: default; }
.rp-covw-voice-chip--active { background: var(--accent); color: var(--accent-foreground); }
.rp-covw-audio-refresh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.rp-covw-audio-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card);
  color: var(--foreground); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.rp-covw-audio-btn:disabled { opacity: 0.6; cursor: default; }
.rp-covw-audio-est { font-size: 12px; color: var(--muted-foreground); }
.rp-covw-hint { padding: 8px 16px 12px; font-size: 12px; color: var(--muted-foreground); }

/* «Ученики» card */
.rp-covw-card--students { min-width: 0; }
.rp-covw-students-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px 11px; border-bottom: 1px solid var(--border); }
.rp-covw-students-title { font-size: 13.5px; font-weight: 650; }
.rp-covw-students-sub { flex: 1; font-size: 12.5px; color: var(--muted-foreground); }
.rp-covw-enroll-btn {
  height: 32px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
}
.rp-covw-enroll-btn:disabled { opacity: 0.6; cursor: default; }
.rp-covw-students-rows { display: flex; flex-direction: column; }
.rp-covw-student-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.rp-covw-student-row:last-child { border-bottom: 0; }
.rp-covw-student-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--accent-foreground);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.rp-covw-student-name {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 550; color: var(--foreground);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-covw-student-name:hover { text-decoration: underline; }
.rp-covw-student-date { font-size: 12.5px; color: var(--muted-foreground); flex-shrink: 0; }
.rp-covw-student-progress { width: 120px; height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; flex-shrink: 0; }
.rp-covw-student-progress-fill { height: 100%; background: var(--primary); border-radius: 999px; }
.rp-covw-student-progress-pct {
  min-width: 32px; text-align: right; font-size: 12px; color: var(--muted-foreground);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.rp-covw-student-progress-none { min-width: 32px; text-align: right; font-size: 12px; color: var(--muted-foreground); flex-shrink: 0; }
.rp-covw-student-unenroll {
  height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); color: var(--destructive); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
}
.rp-covw-student-unenroll:disabled { opacity: 0.6; cursor: default; }

/* Mobile compact student cards — hidden on desktop; swapped in at ≤768px below. */
.rp-covw-students-cards { display: none; }
.rp-covw-student-card {
  display: flex; align-items: center; gap: 11px; padding: 10px 16px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.rp-covw-student-card:last-child { border-bottom: 0; }
.rp-covw-student-card-main { flex: 1; min-width: 0; }
.rp-covw-student-card-name { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); }
.rp-covw-student-card-meta { font-size: 11.5px; color: var(--muted-foreground); }

/* «Записать ученика» dialog — chrome reuses rp-covw-dlg, rp-covw-student-avatar. */
.rp-covw-enroll-search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card);
  color: var(--muted-foreground); margin-bottom: 12px;
}
.rp-covw-enroll-search-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: 13px; outline: none; }
.rp-covw-enroll-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.rp-covw-enroll-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.rp-covw-enroll-row:hover:not(:disabled) { background: var(--secondary); }
.rp-covw-enroll-row--disabled, .rp-covw-enroll-row:disabled { opacity: 0.55; cursor: default; }
.rp-covw-enroll-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-covw-enroll-chip {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--muted); color: var(--muted-foreground); flex-shrink: 0;
}
.rp-covw-enroll-grant {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: 13px; color: var(--foreground); cursor: pointer;
}

/* ≤1279px: the product panel is normally not rendered at all (the C# tab set moves it behind «Продукт»),
   but a JS-less render — prerender, or a host without viewport.js — still reaches here. Stack it under the
   main column instead of squeezing a 344px rail into a phone. */
@media (max-width: 1279px) {
  /* align-items:stretch is load-bearing: the base rule's flex-start is about the ROW layout (the
     sticky side panel must top-align), but once the axis flips to column it acts on the CROSS axis —
     i.e. horizontally — and the main column shrinks to its widest CONTENT. A course whose rows are
     all short («Новый модуль» + one empty lesson) rendered as a ~64%-wide tree with dead space on
     the right; a course with long titles happened to stretch to full width, which is why it hid. */
  .rp-covw-cols { flex-direction: column; align-items: stretch; }
  .rp-covw-side { flex: 1 1 auto; width: 100%; position: static; }
}

/* Mobile: back-arrow crumb, vertical card stack (single 768 shell breakpoint). */
@media (max-width: 768px) {
  .rp-covw-crumb-back { display: inline-flex; }
  .rp-covw-crumb-link:not(.rp-covw-crumb-back),
  .rp-covw-crumb-sep { display: none; }
  .rp-covw-head { flex-direction: column; gap: 12px; }
  .rp-covw-panel .rp-covw-cover { height: 120px; }
  .rp-covw-students-rows { display: none; }
  .rp-covw-students-cards { display: flex; flex-direction: column; }
  /* П-8 fix: title+sub keep a row, «Записать ученика» drops to its own full-width row instead
     of overflowing the card (flex-shrink:0 button + no wrap clipped it at 375px). */
  .rp-covw-students-head { flex-wrap: wrap; }
  .rp-covw-enroll-btn { flex: 1 1 100%; }
  /* 2026-08-02 (владелец): панели модулей «Структуры» не использовали ширину телефона — full-bleed
     по образцу «Мой сайт»: карточка пробивается сквозь 16px padding каркаса (.rp-shell__content —
     величины связаны, меняются только парой) до края экрана, боковые границы и скругления долой.
     Заголовок вкладки и поиск остаются с обычными полями — прилипший к краю текст читается как
     дефект, а карточным панелям edge-to-edge идёт (тот же паттерн, что списки-секции iOS). */
  .rp-covw-main .rp-cstr--comfortable .rp-cstr-mod {
    margin-left: -16px;
    margin-right: -16px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  /* the header row's hand-made corners (see the rp-cstr-mod block) follow the card's full-bleed shape */
  .rp-covw-main .rp-cstr--comfortable .rp-cstr-modrow { border-radius: 0; }
}

/* ── SP2 T6 (task-6-brief.md, спека 11.3/§4) — the course overview «Потоки» card (full-span, reuses
   rp-covw-card) + the CourseTrackWizardDialog. Card: header rp-trk-head/-title (no button any more — «+
   Новый поток» moved BELOW the list, rp-trk-open-btn--below), card-rows rp-trk-rows/-row, each split into
   rp-trk-row-head (name/chips/kebab), rp-trk-row-meta (format · pattern) and rp-trk-row-members (avatar
   stack + count) — rp-trk-row--simple collapses back to a single head line for trackless/completed/
   individual rows, which carry no meta/members line of their own. The status/warning chips reuse
   RpStatusChip; the row kebab reuses rp-covw-kebab/rp-menu (own trigger class rp-trk-kebab so it doesn't
   collide with the page-level course kebab in a single-selector Find()). rp-trk-acc* is the «Завершённые»/
   «Индивидуальные расписания» collapsed-section idiom, copied from rp-adm-accordion (AdminStudentsPanel).
   Dialog: rp-trk-dlg (reuses rp-crsl-dlg / rp-psd-day* / rp-sched-dlg* chrome from CreateCohortDialog), the
   кому segmented-tabs picker (RpSegmentedTabs, no new CSS), the unenrolled-student hint rp-trk-hint (+
   rp-covw-enroll-grant reused — rp-trk-grant only tweaks the top margin), and the client preview
   rp-trk-preview/-preview-row/-preview-more. ── */
.rp-covw-card--tracks { min-width: 0; }
.rp-trk-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px 11px; border-bottom: 1px solid var(--border); }
.rp-trk-title { flex: 1; font-size: 13.5px; font-weight: 650; }
.rp-trk-open-btn {
  height: 32px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
}
.rp-trk-open-btn:disabled { opacity: 0.6; cursor: default; }
/* Item 3 of the layout: the button lives under the row list now, not the card header. */
.rp-trk-open-btn--below { margin: 12px 16px; }
.rp-trk-rows { display: flex; flex-direction: column; }
.rp-trk-row {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.rp-trk-row:last-child { border-bottom: 0; }
/* Trackless / «Завершённые» / individual rows have only one line — collapse the column gap. */
.rp-trk-row--simple { gap: 0; }
.rp-trk-row-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.rp-trk-row-meta, .rp-trk-row-members { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-foreground); }
.rp-trk-row-name { font-weight: 600; }
/* The row-name button (opens CohortDialog) also carries rp-btn-textlink for its clickable affordance,
   but that class's muted color + 13px + padding made a поток name read as meta text next to the plain
   span used by individual-track names (final review finding). Override back to plain text styling;
   rp-btn-textlink's border/background/cursor/hover-color click affordance still applies. */
.rp-trk-row-name.rp-btn-textlink { color: var(--foreground); font-size: inherit; font-weight: 600; padding: 0; text-decoration: none; }
.rp-trk-row-sep { color: var(--muted-foreground); }
.rp-trk-row-pattern { color: var(--muted-foreground); }
/* Pushes the kebab (or the trackless row's «Задать» link) to the row's right edge without a second flex
   wrapper — the head line is a wrap-capable row/chips/kebab strip and needs exactly one flexible spacer. */
.rp-trk-row-spacer { flex: 1; }
.rp-trk-kebab {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted-foreground); cursor: pointer;
  flex-shrink: 0;
}
.rp-trk-kebab:hover { background: var(--secondary); color: var(--foreground); }

/* Avatar stack (up to 3, спека 11.3 item 1) — overlapping circles with a card-colour ring so they read
   as a stack rather than a row of touching dots. */
.rp-trk-row-members .rp-covw-student-avatar { margin-left: -8px; border: 2px solid var(--card); }
.rp-trk-row-members .rp-covw-student-avatar:first-child { margin-left: 0; }
.rp-trk-row-membercount { margin-left: 4px; }

/* «Завершённые» / «Индивидуальные расписания» collapsed sections — same idiom as rp-adm-accordion
   (AdminStudentsPanel), own class prefix since this card already owns rp-trk-*. */
.rp-trk-acc { margin: 4px 16px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
.rp-trk-acc:first-of-type { margin-top: 12px; }
.rp-trk-acc-summary { display: flex; align-items: center; gap: 6px; padding: 13px 16px; cursor: pointer; font-size: 13px; font-weight: 700; list-style: none; }
.rp-trk-acc-summary::-webkit-details-marker { display: none; }
.rp-trk-acc-count { font-weight: 500; color: var(--muted-foreground); }
.rp-trk-acc-body { border-top: 1px solid var(--border); padding: 0; }
.rp-trk-acc-body .rp-trk-row:last-child { border-bottom: 0; }
/* Once an outline button (гибридная схема кнопок), the full-width text-row padding would stretch
   the button across the accordion — keep only the outer offset. */
.rp-trk-acc-addbtn { margin: 12px 16px; }

/* Empty state (спека 11.3 item 6) — explains the term, offers both entry points. */
.rp-trk-empty { padding: 16px; }
.rp-trk-empty p { margin: 0 0 12px; }
.rp-trk-empty-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rp-trk-empty-actions .rp-trk-open-btn { margin: 0; }

/* wizard dialog */
.rp-trk-dlg { max-width: 480px; }
.rp-trk-field-top { margin-top: 12px; }
.rp-trk-hint {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-foreground);
  margin: -4px 0 10px;
}
.rp-trk-grant { margin-top: 0; }
.rp-trk-preview {
  display: flex; flex-direction: column; gap: 4px; margin: 4px 0 14px; padding: 10px 12px;
  background: var(--muted); border-radius: var(--radius-md); font-size: 12.5px; color: var(--foreground);
  max-height: 180px; overflow-y: auto;
}
.rp-trk-preview-row { padding: 1px 0; }
.rp-trk-preview-more { font-size: 12px; color: var(--muted-foreground); padding-top: 2px; }

/* ── courses-phase2 Task 7 (task-7-brief.md, спека 11.3 «Мастер потока») — the wizard's three-step
   chrome layered onto the existing rp-trk-dlg, rp-crsl-field and rp-sched-dlg-/rp-psd-day- fields: step
   indicator rp-trk-wiz-steps, the per-format schedule block rp-trk-wiz-block/-block-title (Онлайн-
   встречи / Очные встречи — one block when the effective format set is single, two when the course
   mixes both under "как в курсе"), the confirmation summary rp-trk-confirm-who/-confirm-list, and the
   Назад/Далее/submit footer rp-trk-wiz-nav (reuses rp-sched-dlg-actions, rp-sched-dlg-btn and
   rp-sched-dlg-spacer — no new button chrome). ── */
.rp-trk-wiz-steps { font-size: 12px; font-weight: 600; color: var(--muted-foreground); margin: -4px 0 12px; }
.rp-trk-wiz-block {
  margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--muted);
}
.rp-trk-wiz-block-title { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; }
.rp-trk-wiz-block .rp-psd-days { margin-bottom: 10px; }
.rp-trk-wiz-block .rp-crsl-field:last-child { margin-bottom: 0; }
.rp-trk-confirm-who { font-size: 13.5px; font-weight: 600; margin: 0 0 8px; }
.rp-trk-confirm-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--foreground); }
.rp-trk-confirm-list li { padding: 2px 0; }
.rp-trk-wiz-nav { margin-top: 4px; }

/* ── SP2 T7 (task-7-brief.md) — TrackResyncDialog («Обновить расписание») + the tracks card's
   out-of-sync banner row. Diff list rp-trk-diff/-diff-row (tone modifiers --ok/--rebind/--remove/--add)
   reuses the rp-trk-preview box look; the collapsed «изменить шаблон» toggle is a plain rp-btn-textlink
   (rp-trk-edit-toggle only tweaks spacing) revealing the existing rp-psd-day*, rp-sched-dlg* pattern
   fields + an existing rp-banner-card--warning tone (no new banner chrome). The card's own out-of-sync
   banner row (rp-trk-banner-row) is the same rp-banner-card--warning + rp-btn-textlink pattern
   TestBanner/BookPage already use, just spaced under the track row. ── */
.rp-trk-diff {
  display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; padding: 10px 12px;
  background: var(--muted); border-radius: var(--radius-md); font-size: 12.5px;
  max-height: 220px; overflow-y: auto;
}
.rp-trk-diff-row { padding: 2px 0; color: var(--foreground); }
.rp-trk-diff-row--ok { color: var(--muted-foreground); }
.rp-trk-diff-row--rebind { color: var(--warning-muted-foreground); }
.rp-trk-diff-row--remove { color: var(--destructive-muted-foreground); }
.rp-trk-diff-row--add { color: var(--success-muted-foreground); }
.rp-trk-edit-toggle { display: inline-block; margin: 0 0 12px; padding: 0; }
.rp-trk-banner-row { margin: 0 16px 10px; }

/* ── Content editor shell (wave 4 Task 6 — /courses/{Id}/content, Редактор содержания.dc.html) ──────────
   Full-screen authoring surface on ReaderLayout (no cabinet shell). Tokens only → dual-theme free. */
.rp-ced {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--background);
  color: var(--foreground);
}
.rp-ced-loading { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 32px; }

/* header */
.rp-ced-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}
.rp-ced-crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.rp-ced-crumb-link {
  color: var(--muted-foreground);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 360px;
}
.rp-ced-crumb-link:hover { color: var(--foreground); }
.rp-ced-crumb-sep { color: var(--input); }
.rp-ced-crumb-cur { font-weight: 650; }
.rp-ced-head-spacer { flex: 1; }
.rp-ced-credits {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-foreground);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
}

/* body split */
.rp-ced-body { flex: 1; display: flex; min-height: 0; }

/* tree pane */
.rp-ced-tree {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--card);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.rp-ced-tree-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.rp-ced-course-row { display: flex; align-items: center; gap: 8px; }
.rp-ced-course-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-ced-course-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.rp-ced-course-counts { font-size: 12px; color: var(--muted-foreground); }
.rp-ced-course-actions { display: flex; gap: 6px; margin-top: 10px; }
.rp-ced-course-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.rp-ced-course-btn:hover { background: var(--secondary); }
.rp-ced-course-btn--disabled { opacity: 0.5; pointer-events: none; }

/* kebab trigger (shared: course/module/lesson) */
.rp-ced-kebab {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--muted-foreground);
  cursor: pointer;
  flex-shrink: 0;
}
.rp-ced-kebab:hover { background: var(--secondary); color: var(--foreground); }

/* scroll area — the module/lesson rows inside it are the shared rp-cstr-* tree, not this block */
.rp-ced-tree-scroll { flex: 1; overflow-y: auto; padding: 8px 10px; }

/* footer */
.rp-ced-tree-foot { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--border); }
.rp-ced-foot-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.rp-ced-foot-btn:hover { background: var(--secondary); }
.rp-ced-foot-btn--accent { background: var(--accent); color: var(--accent-foreground); border-color: var(--border); }

/* canvas host */
.rp-ced-canvas { flex: 1; overflow-y: auto; background: var(--background); min-height: 0; }
.rp-ced-canvas-inner { max-width: 820px; margin: 0 auto; padding: 28px 32px 140px; }
.rp-ced-canvas-context { font-size: 12px; color: var(--muted-foreground); margin-bottom: 8px; }

/* mobile pane headers — hidden on desktop */
.rp-ced-mhead { display: none; }
.rp-ced-mhead-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}
.rp-ced-mhead-main { flex: 1; min-width: 0; }
.rp-ced-mhead-title { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-ced-mhead-sub { font-size: 11.5px; color: var(--muted-foreground); }
/* ≤768px: two-pane stack (structure ↔ lesson), toggled by [data-mobile-pane].
   The page scrolls as ONE document here — the desktop's inner scroll panes (.rp-ced-tree-scroll /
   .rp-ced-canvas) are opened up, because an inner scrollport CLIPS the row kebabs' inline dropdowns at
   its bottom edge (a menu opened near the tree footer lost its tail rows behind the bar — владелец,
   2026-08-03). The pane header becomes sticky so «назад» never scrolls away, and the tree footer sticks
   to the viewport bottom instead of ending the flex column. */
@media (max-width: 768px) {
  .rp-ced { height: auto; min-height: 100dvh; }
  .rp-ced-head { display: none; }
  .rp-ced-body { min-height: auto; }
  .rp-ced-tree, .rp-ced-canvas { width: 100%; border-right: 0; }
  .rp-ced-tree-head { display: none; }
  .rp-ced-mhead {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .rp-ced[data-mobile-pane="structure"] .rp-ced-canvas { display: none; }
  .rp-ced[data-mobile-pane="lesson"] .rp-ced-tree { display: none; }
  .rp-ced-tree-scroll { overflow: visible; }
  .rp-ced-canvas { overflow: visible; }
  .rp-ced-tree-foot {
    position: sticky;
    bottom: 0;
    background: var(--card);
    z-index: 20;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  /* the rail search sticks under the now-sticky 56px pane header, not behind it */
  .rp-cstr--compact .rp-cstr-searchwrap { top: 60px; }
  /* narrower gutters: on a phone the canvas needs the width more than the framing (владелец) */
  .rp-ced-canvas-inner { padding: 14px 12px 120px; }
  /* the module line duplicates the sticky pane header, whose title IS the module on the phone stack */
  .rp-ced-canvas-context { display: none; }
}

/* ── Shared course-structure tree (CourseStructureTree.razor) ────────────────────────────────────────
   ONE block for both hosts: the content editor's narrow rail (.rp-cstr--compact, flat rows) and the
   course overview's wide primary column (.rp-cstr--comfortable, modules as cards). Lesson titles WRAP
   to as many lines as they need and carry no title= tooltip — truncation-plus-tooltip is the pain this
   component exists to remove, so nothing here sets text-overflow on a title. Tokens only, both themes. */
.rp-cstr { display: flex; flex-direction: column; gap: 5px; }
.rp-cstr--comfortable { gap: 12px; }

/* search field (own chrome, mirroring rp-adm-search: a wrapper carries the icon, the input is bare) */
.rp-cstr-searchwrap {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.rp-cstr-searchwrap:focus-within { border-color: var(--primary); }
.rp-cstr-search {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.rp-cstr-search::placeholder { color: var(--muted-foreground); }
.rp-cstr-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted-foreground);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.rp-cstr-search-clear:hover { color: var(--foreground); background: var(--secondary); }
/* Compact only: the rail's list is the long one, and a search field that scrolls away is useless on
   exactly the lists it exists for — so it sticks to the top of .rp-ced-tree-scroll. The backdrop must be
   opaque and must match the pane it sits in (.rp-ced-tree is var(--card), which differs from --background
   in BOTH themes). On the overview (comfortable) the column scrolls with the page, so nothing sticks.
   The opaque band below the field is a box-shadow, NOT padding: the wrapper is content-box with a fixed
   34px height (there is no global border-box reset), so a padding-bottom would inflate the field to 44px
   with dead space inside its own border — and still leave .rp-cstr's 5px flex gap transparent for rows to
   scroll through. A 5px shadow covers exactly that gap. */
.rp-cstr--compact .rp-cstr-searchwrap {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  box-shadow: 0 5px 0 var(--card);
}
.rp-cstr-noresults { padding: 14px 8px; font-size: 12.5px; color: var(--muted-foreground); }

/* module: a flat row in the rail, a bordered card with a tinted header in the wide column */
.rp-cstr-mod { display: flex; flex-direction: column; }
/* No overflow:hidden here on purpose: the row kebab's dropdown renders INLINE inside the card, and a
   clip at the card edge cut the menu off for collapsed/short modules. The rounded corners are done by
   hand instead: the header row rounds its top (and, when it is the only child — collapsed module — its
   bottom); everything below the header is transparent-backgrounded rows, so nothing else can poke out. */
.rp-cstr--comfortable .rp-cstr-mod {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}
.rp-cstr--comfortable .rp-cstr-modrow { border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; }
.rp-cstr--comfortable .rp-cstr-modrow:last-child {
  border-radius: calc(var(--radius-xl) - 1px);
  border-bottom: 0;
}
/* module row: whole-row click toggles expansion (children with own clicks stop propagation) */
.rp-cstr-modrow { display: flex; align-items: flex-start; gap: 6px; padding: 8px 2px 5px 4px; cursor: pointer; }
.rp-cstr--comfortable .rp-cstr-modrow {
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  background: var(--secondary);
  border-bottom: 1px solid var(--border);
}
.rp-cstr-mod-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  flex-shrink: 0;
}
.rp-cstr-mod-toggle:hover { color: var(--foreground); }
.rp-cstr-mod-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-cstr-mod-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.rp-cstr--comfortable .rp-cstr-mod-title {
  font-size: 14px;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  color: var(--foreground);
}
.rp-cstr-mod-meta { font-size: 11.5px; font-weight: 400; color: var(--muted-foreground); }
.rp-cstr-mod-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--muted-foreground);
  cursor: pointer;
  flex-shrink: 0;
}
.rp-cstr-mod-add:hover { background: var(--accent); border-color: var(--border); color: var(--accent-foreground); }
.rp-cstr-mod-add:disabled { opacity: 0.45; cursor: default; }

/* Boxless wrapper around each row's BbDropdownMenu: it exists only so menu clicks stop propagating
   before they reach the row's own whole-row click handler. display:contents keeps the menu a direct
   flex participant — events still bubble through boxless elements, so stopPropagation works. */
.rp-cstr-menuwrap { display: contents; }

/* kebab trigger, shared by module and lesson rows (same shape as rp-ced-kebab) */
.rp-cstr-kebab {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--muted-foreground);
  cursor: pointer;
  flex-shrink: 0;
}
.rp-cstr-kebab:hover { background: var(--secondary); color: var(--foreground); }

/* lesson row: two lines — the wrapping title, then its meta / «пусто» chip. The WHOLE row is the
   click target (it opens the lesson), hence the cursor on the row itself, not just the title. */
.rp-cstr-lesson {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 4px 7px 28px;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
}
.rp-cstr--comfortable .rp-cstr-lesson { padding: 10px 12px 10px 34px; border-radius: var(--radius-lg); }
.rp-cstr-lesson:hover { background: var(--secondary); }
.rp-cstr-lesson--active {
  background: var(--accent);
  color: var(--accent-foreground);
  box-shadow: inset 2.5px 0 0 var(--primary);
}
.rp-cstr-lesson-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* Title + meeting-type icon on one line (phase-4 task 4) — the title still wraps to as many lines as
   it needs, so the icon sits at the START of the flow rather than pinned to a fixed corner. */
.rp-cstr-lesson-titlerow { display: flex; align-items: flex-start; gap: 5px; }
.rp-cstr-lesson-title {
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.35;
  color: var(--foreground);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.rp-cstr-lesson--active .rp-cstr-lesson-title { color: var(--accent-foreground); font-weight: 650; }
/* Meeting-only chip (спека: «иконка/чип у уроков-встреч») — material rows render none. Nudged down a
   touch to sit on the title's own first-line baseline instead of its own box top. */
.rp-cstr-kind { flex: none; margin-top: 2px; color: var(--muted-foreground); }
.rp-cstr-lesson--active .rp-cstr-kind { color: var(--accent-foreground); }
.rp-cstr-lesson-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rp-cstr-lesson-meta { font-size: 11.5px; font-weight: 400; color: var(--muted-foreground); }

/* the single row currently in inline-rename mode (RpInlineText + rp-inline-edit base) */
.rp-cstr-edit { font-size: 13.5px; font-weight: 550; line-height: 1.35; }

/* drag-and-drop. The grip is the ONLY drag source — a draggable row would turn a click that drifts a
   few pixels into a reorder, and opening a lesson is the most frequent action in this tree. The wave
   that added wrapping titles deliberately shipped no grip at all, because a grip with no behaviour
   behind it is worse than none. */
.rp-cstr-grip {
  flex: none;
  display: flex;
  align-items: center;
  padding-top: 2px;
  color: var(--input);
  cursor: grab;
}
.rp-cstr-grip:active { cursor: grabbing; }
/* A LESSON grip is lifted out of the row's flow and pinned to the row's left edge, on the same
   vertical line as the module grip above it — in flow it started after the lesson's indent, which
   left a wide empty gutter to its left and read as a second, unexplained column. The row keeps its
   padding-left, so the title stays exactly where it was (and where it is when the grips are hidden
   on touch); `top` repeats the row's padding-top so the pinned grip lands where flow put it. */
.rp-cstr-lesson .rp-cstr-grip { position: absolute; left: 4px; top: 7px; }
.rp-cstr--comfortable .rp-cstr-lesson .rp-cstr-grip { left: 12px; top: 10px; }
/* --nodrag (set by the component when no grips render — touch, or a host that disabled drag): the
   comfortable 34px left inset exists ONLY as grip clearance (lesson content at 34 never aligned with
   the module title at ~53 anyway), so without grips it's a dead gutter eating ~10% of a phone's width —
   roll it back to a plain indent. Compact is deliberately untouched: its 28px puts lesson titles
   exactly under the module title once the grip is gone, i.e. there it IS the hierarchy, not clearance. */
.rp-cstr--comfortable.rp-cstr--nodrag .rp-cstr-lesson { padding-left: 16px; }
.rp-cstr--comfortable.rp-cstr--nodrag .rp-cstr-modempty { padding-left: 16px; }
.rp-cstr-modrow:hover .rp-cstr-grip,
.rp-cstr-lesson:hover .rp-cstr-grip { color: var(--muted-foreground); }
.rp-cstr-lesson--dragging, .rp-cstr-mod--dragging { opacity: 0.5; }
/* Drop lines carry their own height but cancel it with a negative margin, so inserting them at
   dragstart does not push the list down under the cursor mid-gesture. */
.rp-cstr-drop, .rp-cstr-moddrop {
  height: 9px;
  margin: -4px 0;
  border-radius: 2px;
}
.rp-cstr-drop--over, .rp-cstr-moddrop--over { box-shadow: inset 0 2px 0 var(--primary); }
/* A module ROW accepting a lesson: the drop target for a COLLAPSED module, which shows no lines. */
.rp-cstr-mod--dropinto { outline: 1.5px dashed color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: -2px; }

/* empty module: the two honest ways forward */
.rp-cstr-modempty { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 8px 8px 28px; }
.rp-cstr--comfortable .rp-cstr-modempty { padding: 10px 12px 12px 34px; }
.rp-cstr-addlesson,
.rp-cstr-genlessons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.rp-cstr-addlesson:hover { color: var(--foreground); background: var(--secondary); }
.rp-cstr-genlessons { color: var(--accent-foreground); background: var(--accent); border-color: var(--border); }
.rp-cstr-addlesson:disabled { opacity: 0.45; cursor: default; }

/* «+ Урок» type-pick menu (spec §3, phase-4 task 4) — a course with 2+ format ingredients opens this
   instead of creating straight away. Reuses .rp-menu's item skin (icon + label already flex/gap'd
   there); the modifier only trims the width down from .rp-menu's 200px default — three short labels
   («Встреча онлайн» is the longest) don't need it. */
.rp-cstr-typepick { min-width: 176px; }

/* «+ Модуль» — a dashed full-width row closing the list */
.rp-cstr-addmod {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 38px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.rp-cstr-addmod:hover { border-color: var(--primary); color: var(--primary); }
.rp-cstr-addmod:disabled { opacity: 0.45; cursor: default; }

/* empty course: the three-step first-run card */
.rp-cstr-empty {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}
.rp-cstr-empty-title { font-size: 13.5px; font-weight: 650; color: var(--foreground); }
.rp-cstr-empty-steps {
  margin: 8px 0 14px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted-foreground);
}
.rp-cstr-empty-steps b { font-weight: 650; color: var(--foreground); }
.rp-cstr-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-cstr-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  width: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.rp-cstr-empty-btn:hover { background: var(--secondary); border-color: var(--border); color: var(--foreground); }
.rp-cstr-empty-btn--accent { background: var(--accent); color: var(--accent-foreground); }
/* The card's «+ Модуль» carries BOTH rp-cstr-addmod (so the dispatch selector is the same in every
   state) and rp-cstr-empty-btn; equal specificity means the block above must stay AFTER the dashed
   full-width row's rules for the auto-width solid look to win. Don't reorder these two groups. */

/* ── LessonCanvas block document (Task 7) — inside rp-ced-canvas-inner ─────── */
.rp-lc-titlebar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rp-lc-title {
  flex: 1; min-width: 0;
  font-size: 23px; font-weight: 700; letter-spacing: -0.01em; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-lc-titlebar .rp-inline-edit.rp-lc-title { flex: 1 1 auto; min-width: 0; background: transparent; }
/* Type chip (phase-4 task 4) — outline pill, deliberately lighter than the accent-filled rp-lc-ai/
   rp-lc-print pair next to it: it states a fact (the lesson's own type) rather than offering an
   action, so it reads as secondary chrome even though its click opens the same kind of menu. */
.rp-lc-typechip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding: 0 10px 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground);
  font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.rp-lc-typechip:hover { background: var(--secondary); }
.rp-lc-ai {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-foreground);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
/* Offline export (Task 10): same size/colors as rp-lc-ai, but a square icon-only button — no label. */
.rp-lc-print {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-foreground);
  cursor: pointer;
}
/* Save state: a dot + a short line under the lesson title. It reports, it doesn't ask — the only case
   that needs an action is the error, and only then does «Повторить» appear. */
.rp-lc-dotline { display: flex; align-items: center; gap: 7px; margin: 2px 0 12px; }
.rp-lc-dot {
  width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%;
  background: var(--muted-foreground); opacity: 0.5;
}
.rp-lc-dot--saving { background: var(--primary); opacity: 1; }
.rp-lc-dot--error { background: var(--destructive); opacity: 1; }
.rp-lc-dot-text { font-size: 12.5px; color: var(--muted-foreground); }
.rp-lc-dot-retry {
  border: 0; background: none; padding: 0;
  color: var(--primary); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}

/* block cards */
.rp-lc-block {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 16px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--card);
}
.rp-lc-block-icon { display: inline-flex; flex-shrink: 0; color: var(--muted-foreground); margin-top: 3px; }
.rp-lc-block-body { flex: 1; min-width: 0; }
.rp-lc-kebab {
  width: 28px; height: 28px; flex-shrink: 0; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--muted-foreground); cursor: pointer;
}
.rp-lc-kebab:hover { background: var(--secondary); color: var(--foreground); }
.rp-menu .rp-lc-danger { color: var(--destructive); }
.rp-menu .rp-lc-danger:hover { background: var(--destructive-muted, var(--secondary)); color: var(--destructive); }

/* «Задание» tab's own creation tiles (AddPartTiles) — 3 answer modes, always on screen (both when the
   tab is empty and below the existing parts, no popover of their own). auto-fit, not a fixed column
   count, so a lone tile after wrapping doesn't strand itself. */
.rp-lc-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-bottom: 10px; }
.rp-lc-add-tile {
  /* justify-content centers the shorter labels vertically — the full «Домашнее задание (с файлом)»
     labels (UX-audit wave 5) wrap to 2–3 lines and stretch their grid row. */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 4px 10px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--card);
  color: var(--foreground); font: inherit; cursor: pointer;
}
.rp-lc-add-tile span { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }
.rp-lc-add-tile:hover { background: var(--accent); border-color: var(--ring); }
.rp-lc-add-tile:disabled { opacity: 0.5; cursor: default; }

/* ── «+ Часть урока» permanent strip (спека §11.4, phase-4 Task 3) — replaces the old in-canvas
   popover: seven tiles always on screen at the foot of the content document (Content types + «Задание»
   cross-tab + «Заполнить с ИИ»). No overlay, so none of the old popover's z-index/backdrop/focus-trap
   plumbing is needed. */
.rp-lc-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px; margin-top: 4px;
}
.rp-lc-strip-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 6px 10px; text-align: center;
  border: 1px solid var(--border); border-radius: 13px; background: var(--card);
  color: var(--foreground); font: inherit; cursor: pointer;
}
.rp-lc-strip-tile:hover { background: var(--accent); border-color: var(--ring); }
.rp-lc-strip-tile:disabled { opacity: 0.5; cursor: default; }
.rp-lc-strip-label { font-size: 11px; font-weight: 600; line-height: 1.2; }
/* Visible by default — spec 11.4 gives the hints to the strip in general, not only the roomy
   empty-lesson variant; the ONLY width-conditional rule is the narrow-screen query below («на узких
   экранах ... остаются иконка + название»), which hides them at ≤640px. */
.rp-lc-strip-hint { display: block; font-size: 10.5px; color: var(--muted-foreground); line-height: 1.25; }
/* «✦ Заполнить с ИИ» keeps the accent treatment the old rp-lc-add-ai button had. */
.rp-lc-strip-tile--ai { background: var(--accent); color: var(--accent-foreground); border-color: transparent; }
.rp-lc-strip-tile--ai:hover { filter: brightness(0.97); }

/* Roomy variant: strip sits under the empty-lesson AI presets (ShowPresets) — bigger tiles/labels
   only; hint visibility is the shared rule above. */
.rp-lc-strip--roomy {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 14px;
}
.rp-lc-strip--roomy .rp-lc-strip-tile { padding: 16px 10px 14px; gap: 8px; }
.rp-lc-strip--roomy .rp-lc-strip-label { font-size: 13px; }

@media (max-width: 640px) {
  .rp-lc-strip-hint { display: none; }
}

@media (max-width: 600px) {
  .rp-lc-title { font-size: 19px; }
  /* rp-lc-strip / rp-lc-add-grid are auto-fit — they reflow on their own, no mobile override needed. */
}

/* ≤768px: the canvas already IS the phone's whole width — spend it on the editors, not the framing.
   The per-block type icon goes: on a narrow card it reads as a drag handle (there is none here — the
   kebab's «Выше/Ниже» orders blocks) and costs a 30px column on every row (владелец, 2026-08-03). */
@media (max-width: 768px) {
  .rp-lc-block { padding: 10px; gap: 8px; }
  .rp-lc-block-icon { display: none; }
  .rp-lc-part-head { padding: 10px; }
  .rp-lc-part-body { padding: 10px; }
}

/* ── Lesson tabs (wave 3): the strip under the title bar + the body it switches ── */
.rp-lc-tabs { margin: 0 0 18px; }
.rp-lc-tabbody { min-width: 0; }

/* ── «Задание»: карточки частей. Шапка называет РЕЖИМ ОТВЕТА (тип блока не показывается), тело —
   существующий редактор этого типа. Автотест рендерится здесь же, а не подменяет канвас. ── */
.rp-lc-part {
  margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--card);
}
.rp-lc-part-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.rp-lc-part-mode { font-size: 13.5px; font-weight: 600; }
.rp-lc-part-spacer { flex: 1; }
.rp-lc-part-body { padding: 14px; }
.rp-lc-part-hint { font-size: 12.5px; color: var(--muted-foreground); margin: 0 0 12px; }
.rp-lc-part-add { margin-top: 4px; }

/* Пустое состояние таба: заголовок, объяснение и плитки создания. */
.rp-lc-tabempty {
  padding: 22px 18px;
  border: 1.5px dashed var(--input); border-radius: 14px;
  text-align: center;
}
.rp-lc-tabempty-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.rp-lc-tabempty-text {
  font-size: 13px; color: var(--muted-foreground);
  max-width: 46ch; margin: 0 auto 16px;
}

/* ИИ-заготовки пустого урока: плитка показывает САМ ТЕКСТ запроса, поэтому она выше и текстовее обычной
   rp-lc-add-tile — читать её нужно до клика, а не после. Внутри плитки текст левый, хотя пустое
   состояние центрировано: три абзаца по центру читаются как лозунги. */
.rp-lc-preset-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; text-align: left;
}
.rp-lc-preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--foreground);
  font: inherit; text-align: left; cursor: pointer;
}
.rp-lc-preset:hover:not(:disabled) { background: var(--accent); border-color: var(--ring); }
.rp-lc-preset:disabled { opacity: 0.5; cursor: default; }
.rp-lc-preset-icon { display: inline-flex; color: var(--primary); }
.rp-lc-preset-label { font-size: 13.5px; font-weight: 650; line-height: 1.25; }
.rp-lc-preset-text { font-size: 12px; color: var(--muted-foreground); line-height: 1.35; }

/* ── «Обложка и озвучка»: обложка слева, состояние озвучки справа ── */
.rp-lc-media { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.rp-lc-media-cover { flex: 0 1 320px; min-width: 220px; }
.rp-lc-narr {
  flex: 1 1 260px; min-width: 0;
  border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 14px 16px;
}
.rp-lc-narr-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; margin-bottom: 8px;
}
.rp-lc-narr-state { font-size: 13px; color: var(--muted-foreground); margin-bottom: 10px; }
.rp-lc-narr-link { font-size: 13px; color: var(--primary); text-decoration: none; }
.rp-lc-narr-link:hover { text-decoration: underline; }
.rp-lc-narr-btn {
  height: 34px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: transparent; color: var(--foreground);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rp-lc-narr-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.rp-lc-narr-btn:disabled { opacity: 0.6; cursor: default; }

/* ── «✦ ИИ» menu: credits header + items (Task 9). The header is a non-menuitem row inside rp-menu. ── */
.rp-lc-ai-menu { min-width: 250px; }
.rp-lc-ai-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 10px; margin: -2px -2px 4px;
  border-bottom: 1px solid var(--border); background: var(--background);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.rp-lc-ai-head-bolt { display: inline-flex; color: var(--warning, var(--primary)); }
.rp-lc-ai-head-bal { flex: 1; font-size: 13px; font-weight: 650; }
.rp-lc-ai-head-top { font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: none; }
.rp-lc-ai-head-top:hover { text-decoration: underline; }

/* ── Inline AI drafts (Task 9): primary-tinted card border + «✦ ЧЕРНОВИК ИИ» badge ── */
.rp-lc-block--draft { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); border-width: 1.5px; }
.rp-lc-draft-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 7px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  background: var(--accent); color: var(--accent-foreground);
}
.rp-lc-draft-md { font-size: 14px; line-height: 1.6; }
.rp-lc-draft-at { font-size: 13.5px; color: var(--muted-foreground); }

/* ── Sticky «Черновики ИИ: N» accept/discard bar. Sticky inside the scrolling canvas (rp-ced-canvas). ── */
.rp-lc-draftbar {
  position: sticky; bottom: 18px; z-index: 14;
  display: flex; align-items: center; gap: 10px;
  width: min(440px, 100%); margin: 16px auto 0;
  padding: 10px 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg);
}
.rp-lc-draftbar-icon { display: inline-flex; color: var(--primary); flex-shrink: 0; }
.rp-lc-draftbar-label { flex: 1; font-size: 13px; font-weight: 600; min-width: 0; }
.rp-lc-draftbar-discard {
  height: 34px; padding: 0 13px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); color: var(--destructive);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.rp-lc-draftbar-discard:hover { background: var(--secondary); }
.rp-lc-draftbar-discard:disabled { opacity: 0.6; cursor: default; }
.rp-lc-draftbar-accept {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 15px; flex-shrink: 0;
  border: 0; border-radius: var(--radius-md);
  background: var(--primary); color: var(--primary-foreground);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.rp-lc-draftbar-accept:disabled { opacity: 0.7; cursor: default; }
.rp-lc-draft-help { margin: 8px 0 4px; font-size: 12.5px; color: var(--muted-foreground); }
.rp-lc-draft-anchor { scroll-margin-top: 72px; outline: none; height: 0; }

@media (max-width: 768px) {
  /* Mobile: the bar floats above the content edge (mockup 390px), safe-area padded (П-15 doesn't apply —
     the editor canvas has no bottom nav — but keep the inset so it clears the home indicator). */
  .rp-lc-draftbar {
    width: auto; margin: 12px 4px 0;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Formula block editor (rp-frm, Формула-мини-волна Task 3): rendered INLINE in the rp-lc-block card
   body, alongside text/video/file/image — no full-canvas takeover (unlike the autotest editor below). ── */
.rp-frm { display: flex; flex-direction: column; gap: 8px; }
.rp-frm-input {
  width: 100%; min-height: 88px; resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground);
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.5;
}
.rp-frm-count { align-self: flex-end; font-size: 12px; color: var(--muted-foreground); }
.rp-frm-count--over { color: var(--destructive); font-weight: 600; }
.rp-frm-preview {
  display: flex; justify-content: center;
  min-height: 44px; padding: 14px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--background);
}
.rp-frm-foot { display: flex; align-items: center; gap: 10px; }
.rp-frm-error { font-size: 12.5px; color: var(--destructive); min-width: 0; }
.rp-frm-spacer { flex: 1; }

/* ── Formula display card (rp-formula, Формула-мини-волна Task 4): katex-render.js's render target,
   shared verbatim by the editor preview (Task 3, above) and every student surface (LessonContentBody,
   ReaderDocument). ── */
.rp-formula {
  display: flex; justify-content: center;
  padding: 14px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card);
}

/* ── Autotest editor IN THE CANVAS (rp-atc chrome + rp-atf settings; questions reuse rp-ted-*) ── */
.rp-atc { display: flex; flex-direction: column; gap: 14px; }
.rp-atc-back {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--muted-foreground); font: inherit; font-size: 13px; font-weight: 500;
}
.rp-atc-back:hover { color: var(--foreground); }
.rp-atc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-atc-titlewrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-atc-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.rp-atc-meta { font-size: 12.5px; color: var(--muted-foreground); }
.rp-atc-head-spacer { flex: 1; }

.rp-atf { display: flex; flex-direction: column; gap: 12px; }
.rp-atf-settings {
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
}
.rp-atf-set { display: flex; align-items: center; gap: 10px; }
.rp-atf-set-label { font-size: 13.5px; font-weight: 600; }
/* UX wave 4: toggle + its one-line hint stacked (label row keeps the compact settings-row look) */
.rp-atf-setcol { display: flex; flex-direction: column; gap: 3px; }
.rp-atf-set-hint { font-size: 12px; color: var(--muted-foreground); }
.rp-atf-thr { display: flex; align-items: center; gap: 6px; }
.rp-atf-thr .rp-ted-input { width: 84px; height: 34px; }
.rp-atf-thr-unit { font-size: 13px; color: var(--muted-foreground); }
.rp-atf-correct-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--success-muted-foreground); flex-shrink: 0; }
.rp-atf-ansdot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-foreground); flex-shrink: 0; }
.rp-atf-desc { display: flex; flex-direction: column; gap: 8px; }
.rp-atf-desc-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left; padding: 2px 0;
  color: var(--muted-foreground); font: inherit;
}
.rp-atf-desc-toggle:hover { color: var(--foreground); }
.rp-atf-desc-label { font-size: 13.5px; font-weight: 600; color: var(--foreground); }
.rp-atf-desc-excerpt {
  font-size: 13px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.rp-atf-desc-text {
  width: 100%; min-height: 64px; padding: 10px 12px;
  border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card);
  color: var(--foreground); font: inherit; font-size: 14px; line-height: 1.5; resize: vertical;
}
.rp-ted-opt--correct { border-radius: 11px; padding: 6px 8px; border: 1px solid var(--success); background: var(--success-muted); }
.rp-ted-opt--correct .rp-ted-input { color: var(--success-muted-foreground); }

/* ── Slide deck editor IN THE CANVAS (rp-sde chrome; cards reuse rp-ted grip/num/kebab/drop bits) ── */
.rp-sde { display: flex; flex-direction: column; gap: 14px; }
.rp-sde-head { display: flex; align-items: center; gap: 12px; }
.rp-sde-meta { font-size: 13px; color: var(--muted-foreground); }
.rp-sde-head-spacer { flex: 1; }
/* Offline export (Task 10): a little breathing room before the primary «Сохранить» next to it. */
/* Icon-only download button — same idiom as .rp-lc-print; the text form wrapped on narrow phones. */
.rp-sde-pptx {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; padding: 0; margin-right: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-foreground);
  cursor: pointer;
}
.rp-sde-empty { font-size: 14px; color: var(--muted-foreground); margin: 0; }
.rp-sde-card {
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.rp-sde-card--dragging { opacity: .5; }
.rp-sde-chead { display: flex; align-items: center; gap: 8px; }
.rp-sde-chead-spacer { flex: 1; }
.rp-sde-img { max-height: 120px; max-width: 100%; border-radius: 8px; display: block; }
.rp-sde-imgrow { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* ── Course-creation wizard (CourseCreateWizard, phase-4 Task 2, task-2-brief.md — спека §11.1) ──
   Reuses rp-crsl-dlg chrome (header/close/field/textarea/note), rp-sched-dlg-* buttons/labels/inputs
   (donor: CourseTrackWizardDialog) and rp-cld-radio* (donor: LessonDetailsDialog's format toggle) — the
   only NEW surface is the step indicator, the ingredient/content tiles (rp-lc-preset's checkbox/radio
   sibling — a toggled STATE, not a momentary action, hence the --active modifier instead of :hover-only
   feedback) and the final «Курс создан» screen. rp-cwiz--full is the mobile fullscreen modifier — the
   class rides on the dialog unconditionally, its rule only takes effect under the media query below. */
.rp-cwiz-dlg { max-width: 480px; }
.rp-cwiz-steps { font-size: 12px; font-weight: 600; color: var(--muted-foreground); margin: -4px 0 12px; }
.rp-cwiz-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.rp-cwiz-subtitle { font-size: 12.5px; color: var(--muted-foreground); margin: 0 0 12px; }
.rp-cwiz-nav { margin-top: 4px; }

.rp-cwiz-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; margin: 4px 0 14px;
}
.rp-cwiz-tile {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); cursor: pointer;
}
.rp-cwiz-tile:hover { background: var(--muted); }
.rp-cwiz-tile--active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.rp-cwiz-tile input { margin: 2px 0 0; accent-color: var(--primary); cursor: pointer; }
.rp-cwiz-tile-body { display: flex; flex-direction: column; gap: 2px; }
.rp-cwiz-tile-title { font-size: 13.5px; font-weight: 650; line-height: 1.25; }
.rp-cwiz-tile-text { font-size: 12px; color: var(--muted-foreground); line-height: 1.35; }

/* Playlist-import tile (courses phase 6, task-4-brief.md) — the URL field reuses rp-sched-dlg-input's
   height/radius but overrides its 13.5px font: a paste-heavy field is more likely to be touched on a
   phone, where anything under 16px triggers Safari/Chrome's auto-zoom-on-focus. */
.rp-cwiz-url-input { font-size: 16px; }
.rp-cwiz-url-hint { display: block; font-size: 12px; color: var(--destructive); margin-top: 4px; }

/* «Импортируем плейлист…» busy screen (Screen.Importing) — a synchronous command with a spinner, not a
   numbered step (no job/poll infra exists — see plan ruling #4), hence its own block instead of reusing
   rp-cwiz-done's checkmark layout. */
.rp-cwiz-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 0 26px; text-align: center; }
.rp-cwiz-progress-title { font-size: 14.5px; font-weight: 650; }
.rp-cwiz-progress-sub { font-size: 12.5px; color: var(--muted-foreground); }

.rp-cwiz-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0 24px; text-align: center; }
.rp-cwiz-done-icon { display: inline-flex; color: var(--success); }
.rp-cwiz-done-title { font-size: 17px; font-weight: 700; }
.rp-cwiz-done-stat { font-size: 12.5px; color: var(--muted-foreground); }
.rp-cwiz-done-err {
  font-size: 12.5px; color: var(--destructive); background: var(--destructive-muted, var(--muted));
  border-radius: var(--radius-md); padding: 8px 12px; margin: 0 0 12px; text-align: left;
}
.rp-cwiz-done-actions { display: flex; flex-direction: column; gap: 8px; }

/* ≤640px: the wizard fills the viewport instead of floating as a centered card — a 4-step form with
   optional venue/price fields is too tall for a small modal on a phone. */
@media (max-width: 640px) {
  .rp-cwiz--full {
    width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
    border-radius: 0; display: flex; flex-direction: column;
  }
}