/* 02-student.css — part 02/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. */

/* ── 13. Segmented tabs (Задания.dc.html) ────────────────────────────────── */
/* Muted-подложка control — distinct from the underlined rp-tab* hub tabs above (paттерн №2). */
.rp-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--muted);
  border-radius: var(--radius-md);
  width: fit-content;
}

.rp-seg-tab {
  padding: 7px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-foreground);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.rp-seg-tab--active {
  font-weight: 600;
  color: var(--foreground);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}

@media (max-width: 640px) {
  .rp-seg {
    width: 100%;
  }
  .rp-seg-tab {
    flex: 1;
    padding: 8px 0;
    font-size: 13px;
  }
}

/* ── 14. Assignment list/card (Задания.dc.html) ──────────────────────────── */
.rp-asg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-asg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 14px 18px;
}

/* Drip-lock treatment — the row stays visible with its reason, the CTA is simply never rendered. */
.rp-asg-row--locked {
  background: var(--muted);
  opacity: 0.75;
}

.rp-asg-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rp-asg-icon--info    { background: var(--info-muted);        color: var(--info-muted-foreground); }
.rp-asg-icon--warning { background: var(--warning-muted);     color: var(--warning-muted-foreground); }
.rp-asg-icon--danger  { background: var(--destructive-muted); color: var(--destructive-muted-foreground); }
.rp-asg-icon--success { background: var(--success-muted);     color: var(--success-muted-foreground); }
.rp-asg-icon--neutral { background: var(--secondary);         color: var(--muted-foreground); }

/* Optional child-initials avatar before the icon tile (parent aggregator, Задания детей.dc.html) —
   rendered only when AssignmentRow.AvatarText is set; --warm is the alternating per-child tint
   (same rule as rp-phome-avatar--warm). Carried on BOTH viewports (wave-6 LOCKED-12 hides only the
   FILTER-chip avatar on mobile, not the row's). */
.rp-asg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.rp-asg-avatar--warm {
  background: var(--warning-muted);
  color: var(--warning-muted-foreground);
}

.rp-asg-body {
  flex: 1;
  min-width: 160px;
}

.rp-asg-title {
  font-size: 14.5px;
  font-weight: 600;
}

.rp-asg-sub {
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.rp-asg-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.rp-asg-chip--info    { background: var(--info-muted);        color: var(--info-muted-foreground); }
.rp-asg-chip--warning { background: var(--warning-muted);     color: var(--warning-muted-foreground); }
.rp-asg-chip--danger  { background: var(--destructive-muted); color: var(--destructive-muted-foreground); }
.rp-asg-chip--success { background: var(--success-muted);     color: var(--success-muted-foreground); }
.rp-asg-chip--neutral { background: var(--secondary);         color: var(--muted-foreground); }

.rp-asg-cta {
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.rp-asg-cta--primary   { background: var(--primary);   color: var(--primary-foreground); }
.rp-asg-cta--secondary { background: var(--secondary); color: var(--secondary-foreground); }

/* Mobile: icon/title/chip stay on one line, the CTA drops to a full-width line below it.
   Achieved by forcing the CTA flex item onto its own line (flex-basis 100% > remaining row space)
   rather than splitting the markup into two DOM variants like rp-tabs-underline/rp-tabs-chips. */
@media (max-width: 640px) {
  .rp-asg-row {
    padding: 13px 14px;
    row-gap: 10px;
    column-gap: 11px;
  }
  .rp-asg-icon {
    width: 32px;
    height: 32px;
  }
  .rp-asg-avatar {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }
  .rp-asg-title {
    font-size: 13.5px;
    line-height: 1.35;
  }
  .rp-asg-sub {
    font-size: 12px;
  }
  .rp-asg-chip {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .rp-asg-cta {
    flex-basis: 100%;
    width: 100%;
    height: 40px;
    font-size: 13.5px;
  }
}

/* ── 15. Assignment empty state — "всё сдано" (Задания.dc.html) ─────────── */
/* NOT the dashed rp-empty2 variant: a success-tinted 64px circle for "nothing left to do". */
.rp-asg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
}

.rp-asg-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--success-muted);
  color: var(--success-muted-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.rp-asg-empty-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}

.rp-asg-empty-desc {
  font-size: 13.5px;
  color: var(--muted-foreground);
  line-height: 1.55;
  margin: 0 0 20px;
  max-width: 340px;
}

.rp-asg-empty-action {
  display: flex;
  justify-content: center;
}

/* Convenience outline CTA matching the empty-state action in the handoff («К курсам →»). */
.rp-asg-empty-cta {
  height: 44px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-md);
  color: var(--primary);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* ── 16. Success banner (Оплата.dc.html «После оплаты») ──────────────────── */
.rp-sban {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border));
  background: var(--success-muted);
  color: var(--success-muted-foreground);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}

.rp-sban-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--success);
  color: var(--success-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rp-sban-body { flex: 1; min-width: 0; }
.rp-sban-title { font-size: 14.5px; font-weight: 700; }
.rp-sban-desc { font-size: 13px; }

.rp-sban-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--success-muted-foreground);
  white-space: nowrap;
  text-decoration: none;
}

/* next step after a package purchase, under the success banner (UX-audit wave 4) */
.rp-pay-nextstep {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted-foreground);
}
.rp-pay-nextstep a { font-weight: 600; color: var(--primary); text-decoration: none; }
.rp-pay-nextstep a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .rp-sban { align-items: flex-start; padding: 12px 14px; gap: 10px; }
  .rp-sban-icon { width: 28px; height: 28px; }
}

/* ── 17. Course card (Мои курсы.dc.html) ─────────────────────────────────── */
.rp-crs {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
  text-decoration: none;
  color: var(--foreground);
}

/* Fallback cover (no CoverUrl) — diagonal stripe gradient copied verbatim from the handoff. */
.rp-crs-cover {
  height: 120px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent),
    var(--accent) 12px,
    color-mix(in srgb, var(--accent) 60%, var(--card)) 12px,
    color-mix(in srgb, var(--accent) 60%, var(--card)) 24px
  );
}

.rp-crs-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rp-crs-body { padding: 16px 18px; }
.rp-crs-title { font-size: 15.5px; font-weight: 700; margin-bottom: 3px; }
.rp-crs-meta { font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 12px; }

.rp-crs-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
  margin-bottom: 6px;
}

.rp-crs-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}

.rp-crs-foot { display: flex; align-items: center; }
.rp-crs-progress { font-size: 12px; color: var(--muted-foreground); }
.rp-crs-spacer { flex: 1; }
.rp-crs-cta { font-size: 12.5px; color: var(--primary); font-weight: 600; }

@media (max-width: 640px) {
  .rp-crs-cover { height: 88px; }
  .rp-crs-body { padding: 13px 14px; }
  .rp-crs-title { font-size: 14.5px; margin-bottom: 2px; }
  .rp-crs-meta { font-size: 12px; margin-bottom: 10px; }
  .rp-crs-bar { height: 5px; margin-bottom: 5px; }
  .rp-crs-progress { font-size: 11.5px; }
  .rp-crs-cta { font-size: 12px; }
}

/* ── Оплата (/pay) page layout — Task 6, Оплата.dc.html ──────────────────── */
/* Vertical rhythm between the page's sections (баланс / купить / история платежей). */
.rp-pay-section {
  margin-bottom: 26px;
}

/* Small uppercase section label above each section's content — Оплата.dc.html repeats this exact
   style (font-size/weight/letter-spacing/color) above the balance card, the shop grid, and the
   payments table; kept page-scoped rather than reusing rp-ph-eyebrow (that one is page-header-only). */
.rp-pay-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
}

/* Stack of per-tenant RpBalanceCard rows (a multi-tutor student gets one card per tenant). */
.rp-pay-balances {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Lesson-package + course shop — 3-column grid desktop, single column mobile (Оплата.dc.html). */
.rp-pay-shop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 900px) {
  .rp-pay-shop {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .rp-pay-shop {
    grid-template-columns: 1fr;
  }
}

.rp-pay-history-loading {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

/* ── /pay «За детей» blocks (wave 6, П-17 — Оплата.dc.html «Родитель») ─────────
   One rp-pay-kid per (child, tenant) guardian pair. Both layout variants live in
   the DOM (the rp-payrow idiom): desktop shows head + balance card + product grid,
   ≤768px (the shell mobile breakpoint) flips to an accordion card whose header
   carries the balance line and whose body lists compact product rows. */
.rp-pay-kid {
  margin-bottom: 30px;
}

/* Desktop block head: 36px initials avatar + child name + «Оплата за ребёнка · {площадка}»,
   underlined by the mockup's 2px divider. The --self variant is the «За себя» divider above
   the caller's own sections (shown only when kid blocks exist). */
.rp-pay-kid-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 14px;
}

.rp-pay-kid-head--self {
  margin-top: 2px;
}

.rp-pay-kid-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Warm alternation per distinct child — matches rp-phome-avatar--warm / rp-chw-chip-av--warm so the
   same child keeps one tone across /home/parent, /children-homework and /pay (final review F3). */
.rp-pay-kid-avatar--warm {
  background: var(--warning-muted);
  color: var(--warning-muted-foreground);
}

.rp-pay-kid-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.rp-pay-kid-sub {
  font-size: 12.5px;
  color: var(--muted-foreground);
}

/* Balance-card wrapper; --warn tints the inner rp-balcard toward --warning at a zero
   balance (LOCKED-4: the warning tone is the only "needs payment" signal — no forecasts). */
.rp-pay-kid-bal {
  margin-bottom: 14px;
}

.rp-pay-kid-bal--warn .rp-balcard {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: var(--warning-muted);
}

.rp-pay-kid-bal--warn .rp-balcard-num {
  color: var(--warning-muted-foreground);
}

/* Mobile accordion header button — hidden on desktop. */
.rp-pay-kid-acc {
  display: none;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 14px;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.rp-pay-kid-acc-txt {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.rp-pay-kid-acc-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

.rp-pay-kid-acc-bal {
  display: block;
  font-size: 12px;
  color: var(--muted-foreground);
}

.rp-pay-kid-acc-bal--warn {
  color: var(--warning-muted-foreground);
}

.rp-pay-kid-chev {
  width: 16px;
  height: 16px;
  display: inline-flex;
  color: var(--muted-foreground);
  transition: transform 0.15s;
}

.rp-pay-kid-chev--open {
  transform: rotate(180deg);
}

/* Mobile-only «Купить» label inside the accordion body (the desktop grid follows the
   balance card directly, mockup has no label there). */
.rp-pay-kid-shoplabel {
  display: none;
}

/* Compact product rows — the accordion body's mobile shop; hidden on desktop where the
   rp-pay-shop grid of RpProductCard renders instead. */
.rp-pay-kid-rows {
  display: none;
  flex-direction: column;
  gap: 9px;
}

.rp-pay-kid-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.rp-pay-kid-row-info {
  flex: 1;
  min-width: 0;
}

.rp-pay-kid-row-name {
  font-size: 13.5px;
  font-weight: 700;
}

.rp-pay-kid-row-sub {
  font-size: 11.5px;
  color: var(--muted-foreground);
}

.rp-pay-kid-row-buy {
  text-align: right;
  flex-shrink: 0;
}

.rp-pay-kid-row-price {
  font-size: 13.5px;
  font-weight: 700;
}

.rp-pay-kid-row-btn {
  margin-top: 6px;
  height: 34px;
  padding: 0 13px;
  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-pay-kid-row-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Honest empty shop («Площадка пока ничего не продаёт») — both viewports. */
.rp-pay-kid-none {
  font-size: 13px;
  color: var(--muted-foreground);
}
.rp-gw-banner-sub a {
  color: inherit;
  text-decoration: underline;
}

/* «Оплачивая, вы принимаете условия оферты» under a shop grid — shown only when the tenant's
   legal documents are published (payment-provider moderation requires the acceptance line). */
.rp-pay-offer-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted-foreground);
}
.rp-pay-offer-note a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .rp-pay-kid {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    margin-bottom: 12px;
    overflow: hidden;
  }

  /* Scoped to .rp-pay-kid so the standalone «За себя» divider (same head class, outside a
     kid block) stays visible on mobile. */
  .rp-pay-kid .rp-pay-kid-head,
  .rp-pay-kid .rp-pay-kid-bal {
    display: none;
  }

  .rp-pay-kid-acc {
    display: flex;
  }

  /* Mockup's mobile accordion avatar is a touch smaller than the desktop head's 36px. */
  .rp-pay-kid-acc .rp-pay-kid-avatar {
    width: 34px;
    height: 34px;
    font-size: 12.5px;
  }

  .rp-pay-kid-body {
    display: none;
  }

  .rp-pay-kid-body--open {
    display: block;
    padding: 0 14px 14px;
    border-top: 1px solid var(--border);
  }

  .rp-pay-kid .rp-pay-shop {
    display: none;
  }

  .rp-pay-kid-rows {
    display: flex;
  }

  .rp-pay-kid-shoplabel {
    display: block;
    font-size: 10.5px;
    margin: 12px 0 8px;
  }

  .rp-pay-kid-none {
    padding-top: 12px;
  }
}

/* ── Week calendar + booking (Занятия.dc.html, wave 1) ───────────────────────
   rp-wk-head (compact balance strip), rp-wknav* (week navigator), rp-wkg* (desktop
   7-col grid), rp-wk-ev* (cells: lesson/slot/reservation/past), rp-wkm* (mobile
   chip strip + day list), rp-book* (booking dialog). @media switches grid↔mobile
   at 768px. All colours via tokens. rp-wk-ev--live / rp-wkm-card--live(-hit/-actions/
   -action/-chip--success) are the live/«скоро» treatment (Расписание.dc.html) — see below. */

/* Фильтр свободного времени по преподавателю (TeacherFilterStrip). Сами чипы — чужие
   (rp-chips/rp-chip-toggle из 05-courses.css, нейтральный набор RpChipGroup); здесь только обёртка,
   подпись области действия и точка-ярлык. */
.rp-tfilter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rp-tfilter-label { font-size: 12.5px; color: var(--muted-foreground); }
.rp-tfilter-chips { margin-bottom: 0; }
.rp-tfilter-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--muted-foreground);
}
/* На залитом активном чипе тёмная точка теряется — обводка цветом текста чипа держит её читаемой
   в обоих состояниях, не меняя сам акцент. */
.rp-chip-toggle--active .rp-tfilter-dot { box-shadow: 0 0 0 1.5px var(--primary-foreground); }

/* Палитра акцентов — единственное место, где индекс TeacherAccents превращается в цвет. */
.rp-tacc-1 { background: var(--tacc-1); }
.rp-tacc-2 { background: var(--tacc-2); }
.rp-tacc-3 { background: var(--tacc-3); }
.rp-tacc-4 { background: var(--tacc-4); }
.rp-tacc-5 { background: var(--tacc-5); }
.rp-tacc-6 { background: var(--tacc-6); }

/* Compact balance header strip */
.rp-wk-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rp-wk-head .rp-ph { margin-bottom: 0; }
.rp-wk-head-spacer { flex: 1; }
.rp-wk-balance { font-size: 13px; color: var(--muted-foreground); }
.rp-wk-balance b { color: var(--foreground); font-weight: 600; }
.rp-wk-topup {
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Week navigator */
.rp-wknav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.rp-wknav-arrows {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
}
.rp-wknav-arrow {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.rp-wknav-arrow--right { border-left: 1px solid var(--border); }
.rp-wknav-arrow:hover { background: var(--secondary); color: var(--foreground); }
.rp-wknav-range { font-size: 15px; font-weight: 600; }
.rp-wknav-today {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.rp-wknav-today:hover { background: var(--secondary); }
/* «Сегодня» seated between the ‹ › arrows: drop its own border/radius so the three read as one
   segmented control; the group container supplies the outer frame, a left divider splits ‹|Сегодня. */
.rp-wknav-arrows .rp-wknav-today {
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
}
.rp-wknav-spacer { flex: 1; }
.rp-wknav-legend {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted-foreground);
  align-items: center;
}
.rp-wknav-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.rp-wknav-dot { width: 10px; height: 10px; border-radius: 3px; }
.rp-wknav-dot--lesson { background: var(--primary); }
.rp-wknav-dot--open {
  border: 1.5px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--accent);
}

/* Desktop 7-column grid */
.rp-wkg {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.rp-wkg-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rp-wkg-head {
  text-align: center;
  padding: 8px 0 10px;
  border-bottom: 2px solid transparent;
}
.rp-wkg-head--today { border-bottom-color: var(--primary); }
.rp-wkg-dow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.rp-wkg-num { font-size: 16px; font-weight: 700; color: var(--foreground); }
.rp-wkg-num--today { color: var(--primary); }

/* Event cells (shared by grid; mobile has its own card shape) */
.rp-wk-ev {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--radius-md);
  padding: 9px 10px;
  font: inherit;
  cursor: pointer;
  border: 0;
}
.rp-wk-ev-time { font-size: 12px; font-weight: 700; }
.rp-wk-ev-title { font-size: 11.5px; line-height: 1.3; }
/* Spec 11.5: «Курс „X" · Поток „Y"» — optional line under the title, on both Day/Week desktop cell kinds. */
.rp-wk-cell-ctx { font-size: 10.5px; line-height: 1.3; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-wk-ev.rp-wk-ev--lesson { background: var(--primary); color: var(--primary-foreground); }
.rp-wk-ev.rp-wk-ev--lesson .rp-wk-ev-title { opacity: 0.9; }
/* Свободное время тише занятий и тише, чем было: заливка --accent вместе с пунктиром в --primary
   делала незанятую ячейку почти такой же громкой, как реальное занятие, а их на экране на порядок
   больше. Насыщенный цвет остаётся за тем, что уже состоялось. Касается и расписания преподавателя
   (класс общий) — там открытых занятий единицы, и «ещё не занятие» читается там точно так же. */
.rp-wk-ev.rp-wk-ev--open {
  border: 1px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  background: transparent;
  color: var(--muted-foreground);
}
.rp-wk-ev.rp-wk-ev--open .rp-wk-ev-time { color: var(--foreground); }

/* Группа окон одного преподавателя за день — контейнер, а не кнопка: кликабельны пилюли внутри. */
.rp-wk-ev.rp-wk-ev--slots {
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted-foreground);
  cursor: default;
  padding: 7px 8px;
}
.rp-wk-slots-head { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; min-width: 0; }
.rp-wk-slots-who {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-wk-slots-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.rp-wk-slot-pill {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
}
.rp-wk-slot-pill:hover { border-color: var(--primary); color: var(--primary); }
/* Уже отправленная заявка: приглушена, но остаётся кнопкой — клик по ней объясняет, где её отозвать. */
.rp-wk-slot-pill--sent {
  background: var(--muted);
  color: var(--muted-foreground);
  border-style: dashed;
  text-decoration: line-through;
}
/* Точка-ярлык преподавателя (TeacherAccents). Цвет — только точка: заливать им ячейку значило бы
   вернуть ту же пестроту с другой стороны. */
.rp-wk-ev-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-foreground);
}
.rp-wk-ev.rp-wk-ev--past {
  background: var(--muted);
  color: var(--muted-foreground);
  cursor: default;
}
/* Tutor kinds (Расписание.dc.html) */
.rp-wk-ev-top { display: flex; align-items: center; gap: 5px; }
.rp-wk-ev-time--struck { text-decoration: line-through; }
.rp-wk-ev-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 1px 6px;
}
.rp-wk-ev.rp-wk-ev--group { background: var(--brand-orange); color: var(--brand-orange-foreground); }
.rp-wk-ev.rp-wk-ev--group .rp-wk-ev-title { opacity: 0.95; }
.rp-wk-ev.rp-wk-ev--done {
  background: var(--muted);
  color: var(--muted-foreground);
  cursor: default;
}
.rp-wk-ev.rp-wk-ev--cancelled {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  cursor: default;
}
/* Live/«скоро» desktop tint (fix-wave) — two classes so it wins over the single-class .rp-wk-ev--lesson
   background without depending on source order. */
.rp-wk-ev.rp-wk-ev--live { background: var(--success-muted); color: var(--success-muted-foreground); }

/* Mobile: chip strip + day list */
.rp-wkm { display: none; }
.rp-wkm-chips {
  display: flex;
  gap: 4px;
  padding-bottom: 4px;
  margin-bottom: 14px;
}
.rp-wkm-chip {
  /* Equal-share, shrinkable columns so all 7 days fit any width without a horizontal scroll (was a fixed
     44px + flex-shrink:0, which overflowed and scrolled on phones). */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
}
.rp-wkm-chip-dow { font-size: 10px; font-weight: 600; text-transform: uppercase; }
.rp-wkm-chip-num { font-size: 15px; font-weight: 700; }
.rp-wkm-chip--today { color: var(--primary); }
.rp-wkm-chip--sel { background: var(--primary); color: var(--primary-foreground); }
/* «Where is my lesson» marker — a dot under the number on days with an own booked lesson.
   Absolutely positioned so dotted and dotless chips keep their numbers on one baseline;
   currentColor inherits the chip's own state colour (primary on today, primary-foreground when
   selected), so no per-state overrides are needed. .rp-wkm-chip is the positioning context. */
.rp-wkm-chip { position: relative; }
.rp-wkm-chip-dot {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}
.rp-wkm-daylabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.rp-wkm-empty { font-size: 13px; color: var(--muted-foreground); }
.rp-wkm-empty-hint { margin-top: 4px; font-size: 12.5px; color: var(--muted-foreground); }
.rp-wkm-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 14px 16px;
  margin-bottom: 10px;
  font: inherit;
  cursor: pointer;
}
.rp-wkm-card-top { display: flex; align-items: center; gap: 8px; }
.rp-wkm-card-time { font-size: 14.5px; font-weight: 700; }
.rp-wkm-card-time--struck { text-decoration: line-through; }
.rp-wkm-card-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
}
.rp-wkm-card-chip--info { background: var(--info-muted); color: var(--info-muted-foreground); }
.rp-wkm-card-chip--group {
  background: color-mix(in srgb, var(--brand-orange) 16%, transparent);
  color: var(--warning-muted-foreground);
}
.rp-wkm-card-chip--done { background: var(--muted); color: var(--muted-foreground); }
.rp-wkm-card-title { font-size: 14px; font-weight: 600; margin-top: 4px; }
.rp-wkm-card-sub { font-size: 12.5px; color: var(--muted-foreground); margin-top: 2px; }
/* Spec 11.5: «Курс „X" · Поток „Y"» — optional line under the subtitle. */
.rp-wkm-card-ctx { font-size: 11.5px; color: var(--muted-foreground); opacity: 0.85; margin-top: 2px; }
.rp-wkm-card.rp-wk-ev--open {
  border: 1px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  background: transparent;
  color: var(--muted-foreground);
}
.rp-wkm-card.rp-wk-ev--open .rp-wkm-card-title { color: var(--foreground); font-weight: 600; }
.rp-wkm-card.rp-wk-ev--slots {
  border: 1px dashed var(--border);
  border-left: 1px dashed var(--border);
  background: transparent;
  cursor: default;
}
.rp-wkm-card-slots-title { font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.rp-wkm-card.rp-wk-ev--slots .rp-wk-slots-pills { margin-top: 8px; }
.rp-wkm-card.rp-wk-ev--slots .rp-wk-slot-pill { font-size: 13px; padding: 7px 11px; }
.rp-wkm-card.rp-wk-ev--group { border-left-color: var(--brand-orange); }
.rp-wkm-card.rp-wk-ev--done { border-left-color: var(--muted-foreground); color: var(--muted-foreground); cursor: default; }
.rp-wkm-card.rp-wk-ev--done .rp-wkm-card-title { color: var(--muted-foreground); }
.rp-wkm-card.rp-wk-ev--cancelled { border-left-color: var(--border); color: var(--muted-foreground); cursor: default; }
.rp-wkm-card.rp-wk-ev--cancelled .rp-wkm-card-title { color: var(--muted-foreground); }
.rp-wkm-card.rp-wk-ev--past { border-left-color: var(--muted-foreground); opacity: 0.8; cursor: default; }

/* Live/«скоро» mobile card (fix-wave, Расписание.dc.html lines ~171-177): success-tinted border + chip,
   plus a below-title «Войти в занятие»/«Перенести» action row. Two classes on rp-wkm-card--live so it
   wins over the single-class kind borders above (e.g. rp-wk-ev--lesson has none of its own, but this
   stays robust if a future kind adds one). rp-wkm-card-hit carries the click-to-open-dialog handler once
   the outer card becomes a plain <div> (RpWeekCalendar.razor) — the action row is its sibling, never a
   descendant, so button clicks can't bubble into it. */
.rp-wkm-card.rp-wkm-card--live { border-left-color: var(--success); }
.rp-wkm-card-hit { cursor: pointer; }
.rp-wkm-card-chip--success { background: var(--success-muted); color: var(--success-muted-foreground); }
.rp-wkm-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.rp-wkm-card-action {
  flex: 1;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.rp-wkm-card-action--primary { background: var(--primary); color: var(--primary-foreground); }
.rp-wkm-card-action--outline {
  flex: none;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-weight: 500;
}

@media (max-width: 768px) {
  .rp-wkg { display: none; }
  .rp-wkm { display: block; }
}

/* Empty-state CTA */
.rp-wk-empty-cta {
  height: 44px;
  padding: 0 24px;
  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;
}

/* ── Wave 3 Task 5 — tutor schedule page (/schedule, Расписание.dc.html) ──────
   Toolbar + nav row + legend + «День» single-day list + the two Bb dialog bodies.
   All colours via tokens; the week grid itself is rp-wkg/rp-wk-ev (shared, above). */
.rp-sched-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.rp-sched-toolbar .rp-ph { margin-bottom: 0; }
.rp-sched-toolbar-spacer { flex: 1; }
.rp-sched-btn {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
}
.rp-sched-btn:hover { background: var(--secondary); }
/* «Свободное время» carries an icon so the caption can collapse on a narrow screen — the full
   text pushed the «+ Занятие» split-button onto a second toolbar row (owner feedback, 2026-08-08). */
.rp-sched-btn--availability { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 560px) {
  .rp-sched-btn--availability { padding: 0 10px; }
  .rp-sched-btn--availability .rp-sched-btn-caption { display: none; }
}

/* SP3 — «+ Занятие» split-button (SchedulePage toolbar + TutorHome header). Main half matches
   rp-sched-btn--primary's height/padding/font so it doesn't diverge from the neighbouring toolbar
   button; the arrow half shares the same chrome with a thin translucent divider instead of a hard
   border, so the two halves read as one control. */
.rp-splitbtn { display: inline-flex; align-items: stretch; }
.rp-splitbtn-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.rp-splitbtn-arrow {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 8px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--primary-foreground) 25%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
}
.rp-splitbtn-main:hover, .rp-splitbtn-arrow:hover { background: var(--primary); opacity: 0.92; }
/* Icon-collapse ТОЛЬКО в тулбаре расписания (availability-паттерн выше) — в хиро TutorHome
   split-button делит ряд лишь с приветствием, там подпись остаётся. */
@media (max-width: 560px) {
  .rp-sched-toolbar .rp-splitbtn-main { padding: 0 10px; }
  .rp-sched-toolbar .rp-splitbtn-caption { display: none; }
}

/* SP3 — lesson wizard (step-1 cards) */
.rp-lwz { max-width: 440px; }
.rp-lwz-lead { margin: 4px 0 10px; font-size: 13.5px; color: var(--muted-foreground); }
.rp-lwz-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.rp-lwz-card:hover { border-color: var(--primary); background: var(--secondary); }
.rp-lwz-card-title { font-size: 14px; font-weight: 600; color: var(--foreground); }
.rp-lwz-card-desc { font-size: 12.5px; color: var(--muted-foreground); }
.rp-lwz-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted-foreground); }

/* Nav row: reuses rp-wknav* for arrows/range/today; adds the view segment + legend. */
.rp-sched-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.rp-sched-nav-spacer { flex: 1; }
.rp-sched-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
}
/* Standalone view toggle on «Занятия» (student) — needs its own spacing, unlike the schedule toolbar. */
.rp-mylessons-seg { margin-bottom: 12px; }
.rp-sched-seg-btn {
  height: 34px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.rp-sched-seg-btn + .rp-sched-seg-btn { border-left: 1px solid var(--border); }
.rp-sched-seg-btn--active { background: var(--secondary); color: var(--secondary-foreground); font-weight: 600; }
.rp-sched-legend {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted-foreground);
  align-items: center;
}
.rp-sched-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.rp-sched-legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.rp-sched-legend-dot--lesson { background: var(--primary); }
.rp-sched-legend-dot--group { background: var(--brand-orange); }
.rp-sched-legend-dot--open {
  border: 1.5px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--accent);
}
/* Legend is desktop-only (mockup). */
@media (max-width: 768px) { .rp-sched-legend { display: none; } }

/* «День» view: force RpWeekCalendar's mobile day-chip + card list to show on desktop too, so the
   single-day list reuses the exact same markup (no duplication). Week view leaves the @media default. */
.rp-sched-dayforce { max-width: 680px; }
.rp-sched-dayforce .rp-wkg { display: none; }
.rp-sched-dayforce .rp-wkm { display: block; }

/* Week view: the desktop time-grid (WeekGrid) vs the mobile day-list fallback (RpWeekCalendar). A 7-column
   time-grid is unreadable at phone widths — the design mandates «День/список» there — so ≤768px hides the
   grid and shows the day-list (whose own @media already flips .rp-wkg→.rp-wkm inside .rp-sched-weekmob). */
.rp-sched-weekmob { display: none; }
@media (max-width: 768px) {
  .rp-sched-weekgrid { display: none; }
  .rp-sched-weekmob { display: block; }
}

/* Details dialog body */
.rp-sched-dlg { max-width: 420px; }
/* Reschedule mode: the body is always short but hosts the date/time popovers, which the global
   [role="dialog"] overflow:auto cap (see far below) would either turn into a stray panel scrollbar
   (date, opening down) or clip (time, flipped up into cramped in-panel space). Dropping the clip
   lets those popovers spill into the viewport, unclipped and scrollbar-free; popover-flip.js then
   measures against the viewport (panelClips() is false here) so the time grid opens downward.
   Higher specificity than the global rule via the extra class — no !important needed. */
.blazorblueprint-portal [role="dialog"].rp-sched-dlg--pop,
.blazorblueprint-portal [role="alertdialog"].rp-sched-dlg--pop { overflow: visible; }
.rp-sched-dlg-title { font-size: 17px; font-weight: 700; }
.rp-sched-dlg-sub { font-size: 13.5px; color: var(--muted-foreground); margin: 4px 0 14px; }
/* SP2 T8: «Урок курса: …» line, right under rp-sched-dlg-sub — pulled up to sit close under it,
   with its own bottom gap before the next section. */
.rp-ldd-course { font-size: 13px; color: var(--muted-foreground); margin: -8px 0 12px; }
/* Lesson topic line — what the lesson is ABOUT, so it reads at full ink weight above the muted
   «Урок курса: …» line rather than beside it. */
/* Р-9: display:flex lays the pencil button beside the text (topic-edit affordance below). */
.rp-ldd-topic { font-size: 14.5px; font-weight: 600; color: var(--foreground); margin: -6px 0 12px;
  display: flex; align-items: center; gap: 6px; }
.rp-ldd-topic-edit { display: inline-flex; align-items: center; border: 0; background: none;
  padding: 2px; cursor: pointer; color: var(--muted-foreground); border-radius: 6px; }
.rp-ldd-topic-edit:hover { color: var(--foreground); background: var(--muted); }
.rp-ldd-topic-add { align-self: flex-start; }
.rp-ldd-booking { display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.rp-ldd-booking-label { font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-foreground); }
.rp-ldd-copylink { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.rp-ldd-kebab { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; }
/* «Ученики» block of the details dialog — where a manager takes ONE student off a lesson or seats one
   on it. Same label idiom as .rp-ldd-booking-label above; rows are label→action, so the name may wrap
   while the «Убрать» link stays put. */
.rp-ldd-people { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.rp-ldd-people-label { font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-foreground); }
.rp-ldd-people-row { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.rp-ldd-people-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rp-ldd-people-remove { flex: 0 0 auto; }
/* «+ Добавить ученика» — a standalone row action, hence the outline button (design-system.md
   → «Кнопки»); align-self keeps it at its own width instead of stretching across the column. */
.rp-ldd-people-add { align-self: flex-start; margin-top: 4px; }
/* The mode heading of an inline confirm step (ConfirmRemove) — the dialog's own title keeps naming the
   lesson, so the step needs its own line. */
.rp-sched-dlg-title-sub { font-size: 14px; font-weight: 600; margin: 12px 0 6px; }
/* SP2: label/value row (e.g. «Цена» — price/trial) — same generic row idiom as rp-covw-row, sized for
   the compact details dialog. */
.rp-sched-dlg-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; margin: -6px 0 14px; }
.rp-sched-dlg-row span:first-child { color: var(--muted-foreground); }
.rp-sched-dlg-row span:last-child { font-weight: 600; }
.rp-sched-dlg-note {
  font-size: 13px;
  color: var(--foreground);
  background: var(--muted);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.rp-sched-dlg-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.rp-sched-dlg-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.rp-sched-dlg-input {
  height: 42px;
  font: inherit;
  font-size: 13.5px;
}
.rp-sched-dlg-tz { font-size: 12px; color: var(--muted-foreground); margin: -6px 0 14px; }
.rp-sched-dlg-confirm { font-size: 13.5px; color: var(--foreground); margin-bottom: 12px; }
.rp-sched-dlg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-sched-dlg-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.rp-sched-dlg-btn--primary { border: 0; background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.rp-sched-dlg-btn--success { border: 0; background: var(--success); color: var(--primary-foreground); font-weight: 600; }
.rp-sched-dlg-btn--danger { border: 0; background: var(--destructive); color: var(--destructive-foreground); font-weight: 600; }
.rp-sched-dlg-btn--ghost { border: 0; background: transparent; color: var(--muted-foreground); }
.rp-sched-dlg-btn:disabled { opacity: 0.6; cursor: default; }
.rp-sched-dlg-spacer { flex: 1; }
.rp-sched-dlg-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 14px;
}

/* Conduct dialog body */
.rp-sched-conduct { max-width: 420px; }
.rp-sched-conduct-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.rp-sched-conduct-hint { font-size: 13px; color: var(--muted-foreground); margin-bottom: 14px; }
.rp-sched-conduct-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.rp-sched-conduct-name { flex: 1; font-size: 13.5px; font-weight: 500; }
.rp-sched-conduct-att {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
}
.rp-sched-conduct-note {
  width: 100%;
  min-height: 72px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13.5px;
  resize: vertical;
}
.rp-sched-conduct-debt {
  font-size: 12.5px;
  color: var(--warning-muted-foreground);
  background: var(--warning-muted);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-top: 12px;
}

@media (max-width: 600px) {
  .rp-sched-dlg-fields { grid-template-columns: 1fr; }
}

/* ── Task 6 — create-lesson (rp-cld*) + publish-slots (rp-psd*) Bb dialogs ─────────
   The create-lesson dialog owns the shared form chrome (head/close, segment, picker list, weekly-repeat
   switch, balance strip, «Дополнительно» collapse, full-width submit); the publish-slots dialog reuses it
   and adds only rp-psd* (hint + weekday multiselect). Field/label/input styles come from rp-sched-dlg-*. */
.rp-cld { max-width: 440px; }
.rp-cld-head { display: flex; align-items: center; margin-bottom: 16px; }
.rp-cld-title { font-size: 17px; font-weight: 700; }
.rp-cld-spacer { flex: 1; }
.rp-cld-x {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.rp-cld-x:hover { background: var(--secondary); }

/* SP3 wizard back affordance in dialog headers (CreateLessonDialog, AvailabilityDialog) */
.rp-cld-backbtn {
  border: 0;
  background: none;
  color: var(--muted-foreground);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px 2px 0;
}
.rp-cld-backbtn:hover { color: var(--foreground); }

.rp-cld-field { margin-bottom: 12px; }

/* Assignees — chips + «+ Назначить учеников» (Task 8, lesson-dialog redesign handoff §Screens).
   Replaces the old segment-toggle/searchable-list student picker (dead since the Task 7
   single-form rewrite introduced AssignStudentsDialog; its remaining classes were removed by the
   wave-4 dead-class sweep). */
.rp-cld-assignees { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rp-cld-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 6px 0 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
}
.rp-cld-chip-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 10px;
  font-weight: 700;
}
.rp-cld-chip-name { font-size: 13px; font-weight: 500; white-space: nowrap; }
.rp-cld-chip-x {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.rp-cld-chip-x:hover { background: var(--muted); }
.rp-cld-assign {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1.5px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.rp-cld-assign:hover { border-color: var(--ring); color: var(--foreground); }

.rp-cld-tz { font-size: 12px; color: var(--muted-foreground); margin: -4px 0 14px; }

/* Онлайн/Публичное/Бесплатное toggles (bespoke role="switch", per П-9 — BbSwitch presets don't
   hit the mockup size). */
.rp-cld-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  cursor: pointer;
  margin-bottom: 14px;
  user-select: none;
}
.rp-cld-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-md); }
.rp-cld-toggle-label { flex: 1; color: var(--foreground); font-size: 13.5px; font-weight: 500; }
/* The hint must WRAP: with nowrap the long off-state hint of «Показывать на сайте» forced the
   440px dialog wider than its viewport and produced a horizontal scrollbar (owner feedback,
   2026-08-08). min-width: 0 lets the flex item actually shrink below its content width. */
.rp-cld-toggle-hint { font-size: 12.5px; color: var(--muted-foreground); text-align: right; min-width: 0; max-width: 55%; }

/* Toggle switch — 34×20 track / 16px thumb, per this dialog's high-fidelity reference. Deliberately
   NOT joined to the app's canonical 36×21 switch group (global controls section, below) — see the
   note there. Markup drives the on-state via a class (rp-cld-switch--on), not [aria-checked] on
   this element (the parent .rp-cld-toggle carries the aria-checked/role=switch pair instead). */
.rp-cld-switch {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.rp-cld-switch-thumb {
  position: absolute;
  top: 1.5px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: left 0.15s;
}
.rp-cld-switch--on { background: var(--primary); border-color: var(--primary); }
.rp-cld-switch--on .rp-cld-switch-thumb { left: 16px; }

/* Вместимость stepper («− N +») */
.rp-cld-stepper {
  display: flex;
  align-items: center;
  height: 42px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
}
.rp-cld-stepper button {
  width: 40px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 16px;
  cursor: pointer;
}
.rp-cld-stepper button:hover { background: var(--muted); }
.rp-cld-stepper span { flex: 1; text-align: center; font-size: 14px; font-weight: 600; }

/* Balance strip */
.rp-cld-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin: 0 0 8px;
  padding: 10px 12px;
  background: var(--muted);
  border-radius: var(--radius-md);
}
.rp-cld-balance--warn {
  background: var(--warning-muted);
}

/* «Дополнительно» collapse */
.rp-cld-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

/* «Где пройдёт занятие» — the built-in-room / own-link radio pair under the «Онлайн» switch. Rows
   are bordered and full-width so the choice reads as a choice; the previous single .rp-cld-more row
   was invisible as an affordance (owner feedback 2026-08-12). */
.rp-cld-radios {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.rp-cld-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.rp-cld-radio:hover { background: var(--muted); }
.rp-cld-radio:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.rp-cld-radio input { margin: 2px 0 0; accent-color: var(--primary); cursor: pointer; }
.rp-cld-radio-body { display: flex; flex-direction: column; gap: 1px; }
.rp-cld-radio-title { font-size: 13.5px; font-weight: 500; color: var(--foreground); }
.rp-cld-radio-desc { font-size: 12.5px; color: var(--muted-foreground); }

/* Заметка textarea — .rp-sched-dlg-input's canonical height:42px is wrong for a multi-line note,
   and this textarea sits outside any .rp-field wrapper (the existing `.rp-field textarea…`
   override doesn't apply here), so it needs its own height override. */
.rp-cld-note {
  height: auto;
  min-height: 60px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}

.rp-cld-error {
  font-size: 13px;
  color: var(--destructive);
  margin: 4px 0 12px;
}

/* «What will be created» summary above the submit CTA (2026-07-24 dialog UX); late dates
   inside it go destructive-red and pair with the rp-cld-timehint line below. */
.rp-cld-summary { font-size: 13px; color: var(--muted-foreground); margin: 10px 0 2px; line-height: 1.45; }
.rp-cld-summary--late { color: var(--destructive); font-weight: 600; }
.rp-cld-timehint { font-size: 12.5px; color: var(--destructive); margin: 4px 0 2px; }
/* Neutral helper line under a field (the публикация description) — the same size as the destructive
   .rp-cld-timehint above it, muted rather than red: it explains, it does not warn. */
.rp-cld-hint { font-size: 12.5px; color: var(--muted-foreground); margin: 4px 0 2px; line-height: 1.45; }

/* Pre-flight clash banner list (Task 12) — sits inside .rp-banner-card__body, so reset the UA <ul>
   margin/padding and match .rp-banner-card__text's size/line-height instead of inheriting the bullet
   defaults. */
.rp-cld-clash-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.rp-cld-clash-list li { margin: 2px 0; }

/* Canonical primary-submit look, shared by the dialog's own CTA (rp-cld-submit) and the two
   popover "apply" buttons (rp-asd-apply / rp-dmp-done) it used to piggy-back on for styling —
   task-8-brief.md mandated un-coupling that collision (.rp-cld-submit matched 3 nodes). Height/
   width/font-size stay local per the file's "canonical shared, size stays local" convention
   (see the "Canonical text field" comment above) since the three buttons are sized differently
   in the reference. */
.rp-cld-submit,
.rp-asd-apply,
.rp-dmp-done {
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.rp-cld-submit:hover, .rp-asd-apply:hover, .rp-dmp-done:hover { opacity: 0.92; }
.rp-cld-submit:disabled, .rp-asd-apply:disabled, .rp-dmp-done:disabled { opacity: 0.6; cursor: default; }
.rp-cld-submit { width: 100%; height: 44px; margin-top: 8px; font-size: 14.5px; }
.rp-asd-apply { width: 100%; height: 42px; font-size: 14px; }
.rp-dmp-done { height: 32px; padding: 0 16px; font-size: 13px; }

/* ── «Новое занятие», ход 1b: шапка/подвал липнут, тело скроллится ──────────────────
   Класс приезжает на [role="dialog"] внутри .blazorblueprint-portal (см. .rp-siteaddr-dlg рядом).
   Диалог становится флекс-колонкой без собственного padding: отступы раздают шапка, тело и подвал —
   иначе padding самого окна прокручивался бы вместе с телом и подвал не смог бы прилипнуть. */
.rp-cld--steps {
  width: 600px;
  max-width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rp-cld--steps .rp-cld-head {
  flex-shrink: 0;
  gap: 10px;
  margin: 0;
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--border);
}
.rp-cld-step { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
/* min-height:0 обязателен: без него флекс-ребёнок не даёт себя сжать ниже содержимого,
   overflow-y не включается, и вместо тела скроллится всё окно вместе с подвалом. */
.rp-cld-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 22px 4px;
}
.rp-cld-foot {
  flex-shrink: 0;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--border);
  background: var(--card);
}
.rp-cld-foot .rp-cld-summary { margin-top: 0; }

/* Секция с капслок-подписью. Последняя не рисует разделитель — линия перед липким подвалом
   читалась бы как его собственная рамка. */
.rp-cld-sec {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.rp-cld-sec:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.rp-cld-sec-cap {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

/* Подпись поля со второй, пояснительной половиной справа («Заметка для себя» — «ученики её не увидят») */
.rp-cld-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rp-cld-labelrow-aside { font-size: 12px; color: var(--muted-foreground); }

/* «Где пройдёт» — три варианта одним рядом. Заменили тумблер «Онлайн», у которого выключенное
   состояние И БЫЛО «очно»: безымянный вариант без описания и без места под адрес. */
.rp-cld-where { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-cld-where-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.rp-cld-where-opt:hover { background: var(--muted); }
.rp-cld-where-opt:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.rp-cld-where-dot {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 50%;
}
.rp-cld-where-opt--on {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--foreground);
  font-weight: 600;
}
.rp-cld-where-opt--on .rp-cld-where-dot {
  border-color: var(--primary);
  background: radial-gradient(circle, var(--primary) 0 45%, transparent 46%);
}
.rp-cld-where-input { margin-top: 8px; }

/* «Сколько мест и за сколько» — одна фраза с полями внутри. Раньше это была коробка «Вместимость»
   и коробка «Цена за место, ₽», которые на экране ни во что не складывались. */
.rp-cld-seats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 15px;
  color: var(--foreground);
  margin-bottom: 12px;
}
.rp-cld-seats-word { color: var(--foreground); }
.rp-cld-seats-sum { display: inline-flex; align-items: center; gap: 10px; }
.rp-cld-stepper--inline { display: inline-flex; height: 44px; }
.rp-cld-stepper--inline input,
.rp-cld-price input {
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  appearance: textfield;
}
.rp-cld-stepper--inline input { width: 52px; }
.rp-cld-price input { width: 84px; }
/* Стрелки number-поля крадут ширину у трёхзначной цены и предлагают шагать по рублю. */
.rp-cld-stepper--inline input::-webkit-outer-spin-button,
.rp-cld-stepper--inline input::-webkit-inner-spin-button,
.rp-cld-price input::-webkit-outer-spin-button,
.rp-cld-price input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.rp-cld-price {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-right: 11px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
}
.rp-cld-price-cur { font-size: 15px; color: var(--muted-foreground); }
.rp-cld-seats-free,
.rp-cld-seats-total {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
}
.rp-cld-seats-free { background: var(--success-muted); color: var(--success-muted-foreground); }
.rp-cld-seats-total { background: var(--accent); color: var(--accent-foreground); }

/* Телефон: окно во весь экран. Высоту НЕ переопределяем — общее правило
   .blazorblueprint-portal [role="dialog"] специфичнее (0,2,0 против 0,1,0) и просит себя не дублировать;
   тот же приём, что у .rp-siteaddr-dlg. */
@media (max-width: 640px) {
  .rp-cld--steps { width: 100%; height: 100%; border-radius: 0; }
  .rp-cld--steps .rp-cld-head { padding: 12px 16px; }
  .rp-cld-body { padding: 14px 16px 4px; }
  .rp-cld-foot { padding: 10px 16px 14px; }
  /* В колонку — три варианта в ряд на 360px переносятся по одному и выглядят как обрывки. */
  .rp-cld-where { flex-direction: column; }
  .rp-cld-where-opt { width: 100%; justify-content: flex-start; }
}

/* Publish-slots extras */
.rp-psd-days { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rp-psd-day {
  min-width: 40px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.rp-psd-day--active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}

/* ── Lesson-dialog redesign (Task 8, task-8-brief.md) — rp-asd-* (assign-students modal),
   rp-dmp-* (date-multi-picker popover) and rp-tdp-* (time/duration popover). rp-cld-chip,
   -assign, -toggle, -switch, -stepper, -note-empty and -note live in the rp-cld* block above
   (interleaved with the Task 6 rules they extend). Values are transplanted 1:1 from
   docs/design/design_handoff_lesson_dialog (README §Screens + the interactive .dc.html),
   mapped onto this codebase's own token set (identical names/values to the handoff's
   tokens.css, so no re-mapping table is needed). ── */

/* Assign-students modal (AssignStudentsDialog.razor) */
.rp-asd { max-width: 400px; }
.rp-asd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rp-asd-title { flex: 1; font-size: 16px; font-weight: 700; }
.rp-asd-search {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13.5px;
  margin-bottom: 4px;
}
.rp-asd-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin: 10px 0 6px;
}
.rp-asd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  text-align: left;
  cursor: pointer;
  margin-bottom: 4px;
}
.rp-asd-row:hover:not(:disabled) { background: var(--muted); }
.rp-asd-row:disabled { cursor: not-allowed; opacity: 0.45; }
.rp-asd-row--active { background: var(--accent); }
.rp-asd-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 11px;
  font-weight: 600;
}
.rp-asd-ava--group {
  border-radius: var(--radius-md);
  background: var(--brand-orange);
  color: var(--brand-orange-foreground);
  font-weight: 700;
}
.rp-asd-name { flex: 1; font-size: 13.5px; font-weight: 500; }
/* Paid-lessons badge on a roster row: advisory, so it stays quiet — until it is zero, which is the
   one number the tutor is seating against. */
.rp-asd-bal { flex: none; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.rp-asd-bal--warn { color: var(--destructive); }
[data-group] .rp-asd-name { font-weight: 600; }
.rp-asd-meta { flex-shrink: 0; font-size: 12px; color: var(--muted-foreground); }
.rp-asd-students {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.rp-asd-students--disabled { opacity: 0.45; }
.rp-asd-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin-bottom: 14px;
}
/* .rp-asd-apply's primary-button look is in the shared .rp-cld-submit/-asd-apply/-dmp-done
   rule above (rp-cld* block) — task-8-brief.md's mandated un-coupling from .rp-cld-submit. */

/* Date-multi-picker popover (DateMultiPicker.razor) */
.rp-dmp { position: relative; }
.rp-dmp-field.rp-sched-dlg-input {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.rp-dmp-overlay { position: fixed; inset: 0; z-index: 25; background: transparent; }
.rp-dmp-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: min(308px, calc(100vw - 48px));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  padding: 14px;
}
/* Flip-up variant — see .rp-tdp--up. */
.rp-dmp--up .rp-dmp-pop { top: auto; bottom: calc(100% + 6px); }
.rp-dmp-nav { display: flex; align-items: center; margin-bottom: 10px; }
.rp-dmp-nav button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  cursor: pointer;
}
.rp-dmp-month { flex: 1; text-align: center; font-size: 13.5px; font-weight: 600; }
.rp-dmp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rp-dmp-wd {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 4px 0;
}
.rp-dmp-day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.rp-dmp-day:disabled { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); cursor: default; }
.rp-dmp-day--today { border: 1.5px solid var(--primary); font-weight: 700; }
.rp-dmp-day--sel {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
  border-color: transparent;
}
.rp-dmp-dot {
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-orange);
}
.rp-dmp-day--sel .rp-dmp-dot { background: rgba(255, 255, 255, 0.85); }
.rp-dmp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* .rp-dmp-done's primary-button look is in the shared rule above (rp-cld* block). */
/* The footer holds nothing but «Готово» — the selection now lives in the chip row above it. */
.rp-dmp-foot--end { justify-content: flex-end; }

/* «Несколько дат» switch + the chip echo of what is picked. The popover opens single-date; these
   two only exist once the tutor opts into multi, and the chips are what makes a multi-date
   selection impossible to miss before «Готово» closes the popover. Switch visuals are reused from
   the .rp-cld-switch pair so every toggle in the lesson flow looks identical. */
.rp-dmp-multi {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.rp-dmp-multi-label { font-size: 13px; color: var(--foreground); }
.rp-dmp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rp-dmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  border-radius: var(--radius-md);
  background: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.rp-dmp-chip button {
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 2px;
  cursor: pointer;
}
.rp-dmp-chip button:hover { color: var(--destructive); }

/* Month/year panes — the caption becomes two buttons when RpMonthGrid.EnableJump is on, each
   swapping the day grid for its own picker. Targets are deliberately large (36-40px): the year pane
   exists for people entering a birth year, and small hit areas are exactly what fails them. */
.rp-dmp-nav-spacer { width: 28px; }
.rp-dmp-cap {
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 4px 6px;
  cursor: pointer;
}
.rp-dmp-cap:hover { background: var(--muted); }
.rp-dmp-cap--year { text-decoration: underline; text-underline-offset: 3px; }
.rp-dmp-cap-static { font-size: 13.5px; font-weight: 600; }

.rp-dmp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rp-dmp-mon {
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.rp-dmp-mon:hover { background: var(--muted); }
.rp-dmp-mon:disabled { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); cursor: default; }
.rp-dmp-mon--sel {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: transparent;
  font-weight: 700;
}

.rp-dmp-year-entry { margin-bottom: 8px; }
.rp-dmp-year-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 16px;           /* ≥16px keeps iOS Safari from zooming the popover on focus */
  font-weight: 600;
  text-align: center;
  padding: 0 8px;
}
.rp-dmp-years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-height: 216px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rp-dmp-year {
  height: 36px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.rp-dmp-year:hover { background: var(--muted); }
.rp-dmp-year:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.rp-dmp-year--sel {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
}

/* Single-date field (RpDateField.razor) — one mask (дд.мм.гггг) + the shared rp-dmp popover. */
.rp-df { position: relative; }
.rp-df-label { display: block; font-size: 13px; color: var(--muted-foreground); margin-bottom: 4px; }
/* Standalone look; a host block that has its own field style passes it via InputClass (e.g.
   rp-sched-dlg-input, rp-adm-field-input) and overrides border/height/background from there —
   only the flex layout + zero padding below are non-negotiable (the input and the calendar button
   own the padding). */
.rp-df-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  font-size: 14px;
  padding: 0;
  overflow: hidden;
}
.rp-df-box:focus-within { border-color: var(--primary); }
.rp-df-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  padding: 0 10px;
  outline: none;
}
.rp-df-input::placeholder { color: var(--muted-foreground); }
.rp-df-cal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.rp-df-cal:hover { background: var(--muted); color: var(--foreground); }
.rp-df-cal:disabled { cursor: default; opacity: 0.5; }
/* The field's own popover is the rp-dmp one; it only needs a slightly denser footer since it has
   up to three actions (Сегодня / Очистить / Готово) instead of two. */
.rp-df-pop .rp-dmp-foot { gap: 8px; }
.rp-df-hint { display: block; font-size: 12.5px; color: var(--muted-foreground); margin-top: 4px; }
.rp-df-err { display: block; font-size: 12.5px; color: var(--destructive); margin-top: 4px; }

/* Time/duration popover (TimeDurationPicker.razor) */
.rp-tdp { position: relative; }
.rp-tdp-field.rp-sched-dlg-input {
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}
.rp-tdp-zone-time, .rp-tdp-zone-dur {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.rp-tdp-zone-time:hover, .rp-tdp-zone-dur:hover { background: var(--muted); }
.rp-tdp-zone-time { color: var(--foreground); font-weight: 600; }
.rp-tdp-zone-dur { color: var(--muted-foreground); }
.rp-tdp-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.rp-tdp-overlay { position: fixed; inset: 0; z-index: 25; background: transparent; }
.rp-tdp-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: min(300px, calc(100vw - 48px));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  padding: 14px;
}
/* Flip-up variant (popover-flip.js): opens above the field when the dialog panel has less room
   below than the pop needs — otherwise the absolutely-positioned pop stretches the panel's
   overflow-y scroll (the "dropdown causes dialog scrollbar" bug). */
.rp-tdp--up .rp-tdp-pop { top: auto; bottom: calc(100% + 6px); }
.rp-tdp-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.rp-tdp-tabs button {
  flex: 1;
  padding: 8px 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.rp-tdp-tab--active { color: var(--foreground); border-bottom-color: var(--primary); }
.rp-tdp-hours {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.rp-tdp-mins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
/* Manual time entry under the grids (UX-audit wave 2) — same free-input idiom as the duration tab. */
.rp-tdp-custom-time { margin-top: 8px; }
.rp-tdp-hours button,
.rp-tdp-mins button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--foreground);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.rp-tdp-durs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.rp-tdp-durs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--foreground);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
/* Higher specificity than "…-hours button" etc. above is required: TimeDurationPicker.razor
   swaps a BARE class attribute per cell (selected → class="rp-tdp-cell--sel", unselected →
   class="") — no base class survives alongside the modifier — so a flat `.rp-tdp-cell--sel { … }`
   rule (0,1,0) would lose the specificity tie against `.rp-tdp-hours button` (0,1,1) and the
   selected cell would render with the unselected grey background. */
.rp-tdp-hours .rp-tdp-cell--sel,
.rp-tdp-mins .rp-tdp-cell--sel,
.rp-tdp-durs .rp-tdp-cell--sel {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
}

/* Popover safety net at narrow widths: the width:min(…) above already clamps to the viewport:
   this centers both popovers under their (now full-width, .rp-sched-dlg-fields stacks to 1fr
   below 600px) field instead of anchoring left/right, so a popover slightly wider than its field
   doesn't lean toward whichever viewport edge it's anchored to. */
@media (max-width: 480px) {
  .rp-dmp-pop, .rp-tdp-pop {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* ── SP1 Task 8 — AvailabilityDialog («Свободное время», task-8-brief.md) — rp-avl-* ──────────
   Head/close reuse rp-cld-head/-title/-spacer/-x (AssignStudentsDialog idiom); weekday chips reuse
   rp-psd-day (CourseTrackWizardDialog); time/duration/step fields reuse rp-sched-dlg-fields/-label/
   -input (RpSelect already carries its own look); the footer reuses rp-sched-dlg-actions/-btn
   (ConductLessonDialog/AdjustBalanceDialogBb idiom, not the full-width rp-cld-submit — this dialog is
   a settings form, not a create-flow CTA). Only the rule-row shell, its delete button, the row error
   line, the settings disclosure and the closed-dates chips are new. ── */
.rp-avl { max-width: 560px; }
.rp-avl-intro { font-size: 13px; color: var(--muted-foreground); line-height: 1.45; margin: 2px 0 14px; }
.rp-avl-empty { font-size: 13px; color: var(--muted-foreground); margin: 4px 0 14px; }

.rp-avl-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.rp-avl-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}
.rp-avl-row--invalid { border-color: var(--destructive); }
.rp-avl-days { margin-bottom: 10px; align-items: center; }
.rp-avl-row-spacer { flex: 1; }
.rp-avl-row-x {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.rp-avl-row-x:hover { background: var(--muted); color: var(--destructive); }
.rp-avl-field-row:last-of-type { margin-bottom: 0; }
.rp-avl-field-row { margin-bottom: 8px; }
.rp-avl-row-error { font-size: 12.5px; color: var(--destructive); margin-top: 6px; }

.rp-avl-add { margin-bottom: 4px; }

/* Settings disclosure — mirrors GatewayPanel's rp-gw-details. */
.rp-avl-settings { margin: 14px 0; }
.rp-avl-settings > summary { cursor: pointer; font-weight: 600; color: var(--muted-foreground); font-size: 13.5px; }
.rp-avl-settings-body { padding-top: 12px; }

.rp-avl-closed { margin: 14px 0; }
.rp-avl-closed-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rp-avl-closed-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
}
.rp-avl-closed-chip button {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.rp-avl-closed-chip button:hover { background: var(--muted); color: var(--destructive); }

/* ── SP1 Task 9 — LessonRequestsStrip + GroupRequestConfirmDialog (task-9-brief.md) — rp-lrq-* ──
   The pending-request queue strip above /schedule's calendar, plus its «Как групповое…» dialog.
   The dialog's head/fields/toggle/actions reuse rp-cld-head/-field/-toggle and rp-sched-dlg-fields/
   -label/-input/-actions/-btn (CreateLessonDialog/AvailabilityDialog idiom) — only the strip itself,
   its cards and the join-checkbox list are new. ── */
.rp-lrq-strip { margin: 0 0 16px; }
.rp-lrq-head { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.rp-lrq-count { color: var(--muted-foreground); font-weight: 600; }

.rp-lrq-list { display: flex; flex-wrap: wrap; gap: 12px; }
.rp-lrq-card {
  width: 260px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rp-lrq-card--highlight { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }

.rp-lrq-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rp-lrq-name { font-weight: 600; font-size: 13.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rp-lrq-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.rp-lrq-chip--new { background: var(--secondary); color: var(--secondary-foreground); }
.rp-lrq-chip--taken { background: color-mix(in srgb, var(--destructive) 12%, transparent); color: var(--destructive); margin: 6px 0 0; }

.rp-lrq-time { font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 4px; }
.rp-lrq-comment {
  font-size: 12.5px;
  color: var(--foreground);
  background: var(--muted);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin-bottom: 6px;
  overflow-wrap: break-word;
}

.rp-lrq-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rp-lrq-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}
.rp-lrq-btn:disabled { opacity: 0.5; cursor: default; }
.rp-lrq-btn--confirm { border: 0; background: var(--primary); color: var(--primary-foreground); }
.rp-lrq-btn--group { color: var(--foreground); }
.rp-lrq-btn--decline { border: 0; background: transparent; color: var(--destructive); }
.rp-lrq-btn--decline:hover { text-decoration: underline; }

/* GroupRequestConfirmDialog */
.rp-lrq-group { max-width: 480px; }
.rp-lrq-join-list { display: flex; flex-direction: column; gap: 8px; }
.rp-lrq-join-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.rp-lrq-join-row input[type="checkbox"] { width: 16px; height: 16px; }

/* ── Task 8 — Занятие entity page (/lesson/{id}, Занятие.dc.html) ─────────
   Self-contained per the codebase's per-feature card convention (rp-balcard/rp-book above don't
   compose .rp-card either) — every visual value here is transplanted 1:1 from the handoff. */
.rp-les { max-width: 640px; margin: 0 auto; }

.rp-les-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  margin-bottom: 16px;
}
.rp-les-back:hover { color: var(--foreground); }

.rp-les-badge { margin-bottom: 16px; }

.rp-les-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.rp-les-charge-note { font-size: 12.5px; color: var(--muted-foreground); }

.rp-les-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

/* SP2 T8: «Урок курса: …» line under the title — same content as LessonDetailsDialog's rp-ldd-course,
   pulled up under the title with its own bottom gap before the details card. */
.rp-les-course { font-size: 13.5px; color: var(--muted-foreground); margin: -16px 0 20px; }

.rp-les-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  padding: 20px 22px;
  margin-bottom: 14px;
}

.rp-les-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rp-les-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rp-les-field-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rp-les-field-icon--avatar {
  border-radius: 50%;
  font-size: 12.5px;
  font-weight: 700;
}

.rp-les-field-icon--muted {
  background: var(--secondary);
  color: var(--muted-foreground);
}

.rp-les-field-text { min-width: 0; }
.rp-les-field-label { font-size: 12px; color: var(--muted-foreground); }
.rp-les-field-value { font-size: 14.5px; font-weight: 600; }

.rp-les-where {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.rp-les-where-text { flex: 1; min-width: 160px; }

.rp-les-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  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;
  text-decoration: none;
}
.rp-les-join:disabled { opacity: 0.6; cursor: default; }

.rp-les-hint { font-size: 13px; color: var(--muted-foreground); }

.rp-les-hw-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.rp-les-hw-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rp-les-hw-row + .rp-les-hw-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

.rp-les-hw-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--info-muted);
  color: var(--info-muted-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rp-les-hw-text { flex: 1; min-width: 0; }
.rp-les-hw-title { font-size: 14px; font-weight: 600; }
.rp-les-hw-sub { font-size: 12.5px; color: var(--muted-foreground); margin-top: 1px; }

.rp-les-hw-open {
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
}

/* Materials-link footer row inside «К этому занятию» — always present when content is linked (even
   with zero homework blocks), so the card never dead-ends without a path to the lesson's materials. */
.rp-les-materials-row { margin-top: 4px; }
.rp-les-materials-row--divider { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

.rp-les-materials-link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.rp-les-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.rp-les-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--destructive);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.rp-les-cancel-note { font-size: 12.5px; color: var(--muted-foreground); }

.rp-les-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 6px 0;
}
.rp-les-summary-row + .rp-les-summary-row { border-top: 1px solid var(--border); }
.rp-les-summary-label { color: var(--muted-foreground); }
.rp-les-summary-value { font-weight: 600; }

.rp-les-note-text { font-size: 13.5px; line-height: 1.55; margin: 0; }


@media (max-width: 480px) {
  .rp-les-title { font-size: 21px; margin-bottom: 16px; }
  .rp-les-card { padding: 16px; }
  .rp-les-grid { grid-template-columns: 1fr; gap: 13px; }
  .rp-les-field-icon { width: 32px; height: 32px; }
  .rp-les-join { width: 100%; }
}

/* ── Задания (/homework) hub layout — Task 9, Задания.dc.html ────────────── */
/* Spacing glue only — the segmented control, rows, chips, and empty state all come free from the
   rp-seg* and rp-asg* blocks above (§13/14/15); this page is their first real consumer. */
.rp-hwh-tabs {
  margin-bottom: 22px;
}

.rp-hwh-section {
  margin-bottom: 24px;
}

/* Uppercase section label above each bucket («К выполнению» / «На проверке» / «Принято» /
   «Назначенные») — same look as rp-pay-label, kept page-scoped per that class's own precedent. */
.rp-hwh-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
}

@media (max-width: 640px) {
  .rp-hwh-section { margin-bottom: 18px; }
  .rp-hwh-label { font-size: 11px; margin: 0 0 8px; }
}

/* ── Сдача ДЗ (/homework/block/{id}) focus-mode page — Task 10, Сдача ДЗ.dc.html ──────────── */
.rp-hws { min-height: 100vh; }

.rp-hws-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.rp-hws-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  flex-shrink: 0;
}
.rp-hws-back:hover { color: var(--foreground); }

.rp-hws-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }

.rp-hws-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-hws-spacer { flex: 1; min-width: 8px; }

.rp-hws-autosave { font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; flex-shrink: 0; }
.rp-hws-autosave--error { color: var(--destructive); }
.rp-hws-autosave-short { display: none; }

.rp-hws-content { max-width: 760px; margin: 0 auto; padding: 32px 24px 60px; }

.rp-hws-loading { display: flex; justify-content: center; padding: 48px 0; }

.rp-hws-crumb { font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 6px; }

.rp-hws-title-lg {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.rp-hws-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 20px 22px;
  margin-bottom: 18px;
}

.rp-hws-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.rp-hws-textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px 14px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  resize: vertical;
}

.rp-hws-files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.rp-hws-file-token {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--secondary);
  font-size: 13px;
}

.rp-hws-file-name {
  color: inherit;
  text-decoration: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-hws-file-name:hover { text-decoration: underline; }

.rp-hws-file-remove {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 0;
}
.rp-hws-file-remove:hover { color: var(--destructive); }

.rp-hws-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  margin-top: 12px;
  border: 1px dashed var(--input);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.rp-hws-attach-input { display: none; }
/* The tutor preview's stand-in: the same row, with nothing behind it to click. */
.rp-hws-attach--static { cursor: default; }

.rp-hws-hint { font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }

.rp-hws-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

/* The answer area's wrapper. A <fieldset> is what makes the tutor preview inert in ONE place — the
   disabled attribute propagates natively to every nested control, including those inside the composite
   quiz widgets, which have no Disabled parameter of their own. It carries no look of its own: the
   browser's default border/padding/margin are cleared, and min-width:0 undoes the fieldset's built-in
   min-content width, which otherwise stops its flex/grid children from shrinking on a narrow screen. */
.rp-hws-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* Deliberately NO opacity on :disabled — the screen's whole promise is «так это видит ученик», and a
   tutor judging their own questions' wording would be reading a washed-out rendering nobody else gets.
   Being inert is said by the badge above, the note below and the browser's own disabled controls. */

.rp-hws-preview-badge { margin-bottom: 12px; }

.rp-hws-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 26px;
  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-hws-cta:disabled { opacity: 0.6; cursor: default; }

.rp-hws-error {
  border: 1px solid color-mix(in srgb, var(--destructive) 35%, var(--border));
  border-radius: var(--radius-md);
  background: var(--destructive-muted);
  color: var(--destructive-muted-foreground);
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.rp-hws-info {
  border-radius: var(--radius-md);
  background: var(--info-muted);
  color: var(--info-muted-foreground);
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.rp-hws-decision { border-radius: var(--radius-md); padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; }
.rp-hws-decision--success { background: var(--success-muted); color: var(--success-muted-foreground); }
.rp-hws-decision--error { background: var(--destructive-muted); color: var(--destructive-muted-foreground); }
.rp-hws-decision-title { font-weight: 600; margin-bottom: 2px; }
/* «Отклонено» way-out (UX-audit wave 4): closing line + chat CTA inside the decision banner. */
.rp-hws-decision-followup { margin-top: 8px; }
.rp-hws-chat-cta { display: inline-flex; margin-top: 10px; text-decoration: none; }

.rp-hws-feedback {
  border: 1px solid color-mix(in srgb, var(--destructive) 35%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--destructive-muted);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.rp-hws-feedback-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }

.rp-hws-feedback-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rp-hws-feedback-title { font-size: 12.5px; font-weight: 700; color: var(--destructive-muted-foreground); }
.rp-hws-feedback-text { font-size: 13.5px; line-height: 1.55; color: var(--destructive-muted-foreground); margin: 0; }

.rp-hws-prev-text { font-size: 13.5px; line-height: 1.6; color: var(--muted-foreground); margin: 0; }

.rp-hws-quiz-q {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.rp-hws-quiz-q:last-child { margin-bottom: 0; }

.rp-hws-quiz-prompt { font-size: 14.5px; margin: 0 0 10px; }

/* Redo take-screen: marks a question the student answered wrong on the PREVIOUS attempt (Task 2, tests/
   homework UX fixes) — never the current attempt's own answer key, which stays gated by the usual
   reveal rule. --warning is token-driven (light/dark both defined in tokens.css); the literal fallback
   only guards a future theme that forgets to define it. */
.rp-hws-quiz-prevwrong { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--warning, #b45309); margin:2px 0 6px; }

.rp-hws-quiz-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 6px 0;
  cursor: pointer;
}
.rp-hws-quiz-option input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }

.rp-hws-quiz-text { min-height: 80px; margin-top: 4px; }

.rp-hws-quiz-result-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rp-hws-quiz-correct { font-size: 13px; color: var(--muted-foreground); margin: 6px 0 0 24px; }
/* Разбор от учителя — панелька с акцентной кромкой, чтобы отличаться от строки «Правильный ответ». */
.rp-hws-quiz-expl {
  font-size: 13px;
  line-height: 1.55;
  color: var(--foreground);
  background: var(--muted);
  border-left: 2px solid var(--primary);
  border-radius: 0 6px 6px 0;
  padding: 7px 10px;
  margin: 6px 0 0 24px;
  white-space: pre-line;
}

@media (max-width: 640px) {
  .rp-hws-header { height: 56px; padding: 0 12px; gap: 10px; }
  .rp-hws-back-label, .rp-hws-sep { display: none; }
  .rp-hws-back { width: 38px; height: 38px; justify-content: center; }
  .rp-hws-content { padding: 18px 16px 24px; }
  .rp-hws-title-lg { font-size: 20px; margin-bottom: 14px; }
  .rp-hws-card { padding: 16px; }
  .rp-hws-autosave-full { display: none; }
  .rp-hws-autosave-short { display: inline; }
  .rp-hws-cta-row {
    position: sticky;
    bottom: 0;
    margin: 24px -16px -24px;
    padding: 12px 16px 18px;
    border-top: 1px solid var(--border);
    background: var(--card);
  }
  .rp-hws-cta { width: 100%; height: 48px; font-size: 15px; }
}

/* ── Тест (/tests/take/{id}, /placement/{id} alias) focus-mode page — Task 11, Тест.dc.html ─── */
.rp-quiz { min-height: 100vh; }

.rp-quiz-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.rp-quiz-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  flex-shrink: 0;
}
.rp-quiz-back:hover { color: var(--foreground); }

.rp-quiz-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }

.rp-quiz-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-quiz-spacer { flex: 1; min-width: 8px; }

.rp-quiz-counter { font-size: 13px; color: var(--muted-foreground); white-space: nowrap; flex-shrink: 0; }
.rp-quiz-counter b { color: var(--foreground); }
.rp-quiz-counter-short { display: none; }

/* Sticky right below the header so it stays visible on scroll (mirrors the mock's fixed-frame demo
   without needing to lock the whole page into a flex/height-constrained shell). */
.rp-quiz-progress { position: sticky; top: 60px; z-index: 4; height: 4px; background: var(--muted); }
.rp-quiz-progress-fill { height: 100%; background: var(--primary); transition: width .2s ease; }

.rp-quiz-loading { display: flex; justify-content: center; padding: 48px 0; }

.rp-quiz-question { max-width: 680px; margin: 0 auto; padding: 40px 24px 60px; }

.rp-quiz-prompt { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; margin: 0 0 24px; }

.rp-quiz-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }

.rp-quiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 15.5px;
  text-align: left;
  cursor: pointer;
}
.rp-quiz-option--selected { border-color: var(--primary); background: var(--accent); }

.rp-quiz-option-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--input);
  background: transparent;
  color: var(--primary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rp-quiz-option-dot--multi { border-radius: var(--radius-sm); }
.rp-quiz-option--selected .rp-quiz-option-dot { border-color: var(--primary); background: var(--primary); }

.rp-quiz-textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px 14px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  resize: vertical;
  margin-bottom: 28px;
}

.rp-quiz-error {
  border: 1px solid color-mix(in srgb, var(--destructive) 35%, var(--border));
  border-radius: var(--radius-md);
  background: var(--destructive-muted);
  color: var(--destructive-muted-foreground);
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.rp-quiz-nav { display: flex; align-items: center; gap: 12px; }
.rp-quiz-nav-spacer { flex: 1; }

.rp-quiz-nav-back {
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.rp-quiz-nav-back:disabled { opacity: 0.5; cursor: default; }

.rp-quiz-nav-next {
  height: 44px;
  padding: 0 26px;
  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-quiz-nav-next:disabled { opacity: 0.6; cursor: default; }

/* ── Result screen ─────────────────────────────────────────────────────────────────────────── */
.rp-quiz-result {
  max-width: 420px;
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rp-quiz-result-ring { position: relative; width: 120px; height: 120px; margin-bottom: 20px; }
.rp-quiz-result-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rp-quiz-result-title { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.rp-quiz-result-sub { font-size: 13.5px; color: var(--muted-foreground); line-height: 1.55; margin: 0 0 14px; }
.rp-quiz-result-chip { margin-bottom: 14px; }

.rp-quiz-result-actions { display: flex; flex-direction: column; gap: 9px; width: 100%; margin-top: 6px; }

.rp-quiz-result-cta {
  height: 46px;
  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-quiz-result-cta--secondary { background: var(--secondary); color: var(--foreground); }

.rp-quiz-result-link {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.rp-quiz-result-link:hover { color: var(--foreground); }

/* Past-attempt strip above question 1 (Task 5 follow-up, 2026-07-26 final review): CanTake stays true
   for offer-tests/open re-assignments, so a student with a past result needs a way back into its
   review without the take page rejecting entry outright (that's the separate gate screen above). */
.rp-quiz-past-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--secondary);
  font-size: 13.5px;
}
.rp-quiz-past-strip-text { color: var(--muted-foreground); }
.rp-quiz-past-strip-cta {
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.rp-quiz-past-strip-cta:hover { text-decoration: underline; }

/* Per-question review (existing render carried over from the old MudBlazor page, restyled). */
.rp-quiz-review { width: 100%; text-align: left; margin-top: 20px; }

.rp-quiz-review-q {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.rp-quiz-review-q:last-child { margin-bottom: 0; }

/* Почему в разборе нет правильных ответов (ключ не раскрыт сервером) — над списком вопросов. */
.rp-quiz-review-locked {
  font-size: 13px;
  color: var(--muted-foreground);
  margin: 0 0 12px;
}
.rp-quiz-review-row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.rp-quiz-review-row svg { flex-shrink: 0; margin-top: 2px; }
/* Верно/неверно должно читаться цветом, а не формой глифа: без модификатора circle-check и circle-x
   рисовались одним --foreground, и в списке из пяти вопросов ошибку приходилось искать глазами. */
.rp-quiz-review-row--ok svg { color: var(--success); }
.rp-quiz-review-row--bad svg { color: var(--destructive); }
.rp-quiz-review-own { font-size: 13px; color: var(--muted-foreground); margin: 6px 0 0 24px; }
.rp-quiz-review-correct { font-size: 13px; color: var(--muted-foreground); margin: 6px 0 0 24px; }
/* Разбор от учителя — панелька с акцентной кромкой (та же форма, что rp-hws-quiz-expl). */
.rp-quiz-review-expl {
  font-size: 13px;
  line-height: 1.55;
  color: var(--foreground);
  background: var(--muted);
  border-left: 2px solid var(--primary);
  border-radius: 0 6px 6px 0;
  padding: 7px 10px;
  margin: 6px 0 0 24px;
  white-space: pre-line;
}

/* Разбор составных вопросов (пропуски/сопоставление/порядок) — Task 11, spec 2026-08-05. Reuses
   .rp-quiz-review-row/-correct above for the match/order rows and key hints; these are the classes the
   two composite types add on top (CompositeAnswerReview.razor, shared by all three review surfaces). */
.rp-quiz-review-gaptext { font-size: 15px; line-height: 2.1; margin: 6px 0 0; white-space: pre-wrap; }

.rp-quiz-review-gap {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px;
  border-radius: var(--radius-sm);
  background: var(--muted);
  font-weight: 600;
}
.rp-quiz-review-gap--ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.rp-quiz-review-gap--bad { background: color-mix(in srgb, var(--destructive) 16%, transparent); color: var(--destructive); }
.rp-quiz-review-gapkey { font-size: 12px; color: var(--muted-foreground); margin-left: 2px; }

.rp-quiz-review-match { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.rp-quiz-review-order { margin-top: 6px; }
.rp-quiz-review-orderlist { list-style: decimal; margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.rp-quiz-review-orderkey { margin-top: 10px; margin-left: 24px; }
.rp-quiz-review-orderkey .rp-quiz-review-orderlist--key {
  color: var(--muted-foreground);
  font-size: 13px;
  margin-top: 4px;
}

/* ── /my-lessons: MyRequestsStrip («Ждут ответа преподавателя») + RequestSlotDialog — rp-myreq-
   classes / rp-reqdlg. The strip carries only still-pending requests, one COMPACT ROW each: площадка ·
   время · «Отозвать». It used to mirror the tutor-side rp-lrq-* card-for-card (a stacked 260px card per
   request, plus a status chip for anything resolved in the last week) — but this block sits above the
   calendar on the page whose whole point is the calendar, and a screenful of read-only chips echoing
   what the chat already said pushed the week below the fold. One bordered list, one row per request,
   ~38px each. The dialog itself reuses rp-cld-head/-title/-spacer/-x (GroupRequestConfirmDialog idiom)
   for its chrome and RequestSlotCard's own rp-reqcard-* (06-finance.css) for the body. ── */
.rp-myreq-strip { margin: 0 0 16px; }
.rp-myreq-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }

/* One border around the LIST, not around every row — N bordered cards read as N things to deal with,
   which is exactly the weight this block must not carry. Sized to its content (capped), never to the
   page: stretched full-width above the calendar the rows read as a table whose «Отозвать» column sits
   half a screen away from the request it belongs to. */
.rp-myreq-list {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: min(100%, 620px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.rp-myreq-row {
  display: flex;
  align-items: center;
  /* Wraps rather than squeezing: at ~390px «Отозвать» drops to its own line (still right-aligned via
     the margin-left below) instead of crushing the time into one word per line. */
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 8px 12px;
}
.rp-myreq-row + .rp-myreq-row { border-top: 1px solid var(--border); }

/* The name yields first (min-width:0 + ellipsis): a long площадка must not be what pushes the button
   onto a second line. */
.rp-myreq-tenant {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13.5px;
}
.rp-myreq-when { flex: 0 0 auto; font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; }
.rp-myreq-row .rp-btn-outline { flex: 0 0 auto; margin-left: auto; }

.rp-reqdlg { max-width: 420px; }

/* ── Составные вопросы (пропуски/сопоставление/порядок) — Task 9, spec 2026-08-05 ─────────── */

.rp-quiz-gap-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

/* Чипы банка слов НЕ гаснут и не блокируются после использования: одно и то же слово может быть
   верным ответом сразу для двух пропусков (например повторяющийся союз), и убрать чип после
   первого клика лишило бы ученика возможности вписать его во второй раз. */
.rp-quiz-gap-chip {
  height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
}
.rp-quiz-gap-chip:hover { border-color: var(--primary); background: var(--accent); }

.rp-quiz-gap-body { font-size: 17px; line-height: 2.3; white-space: pre-wrap; }

.rp-quiz-gap-input {
  display: inline-block;
  min-width: 88px;
  height: 38px;
  margin: 2px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid var(--input);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--muted);
  color: var(--foreground);
  font: inherit;
  font-size: inherit;
  font-weight: 600;
  text-align: center;
}
.rp-quiz-gap-input:focus { outline: none; border-bottom-color: var(--primary); background: var(--accent); }

.rp-quiz-match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px; }
.rp-quiz-match-col { display: flex; flex-direction: column; gap: 10px; }

.rp-quiz-match-item {
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
.rp-quiz-match-item--armed { border-color: var(--primary); background: var(--accent); }
.rp-quiz-match-item--done { border-color: var(--success); }
.rp-quiz-match-item--right:disabled { opacity: 0.45; cursor: default; }

.rp-quiz-match-pairs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }

.rp-quiz-match-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--muted);
  font-size: 14px;
}
.rp-quiz-match-pair-left, .rp-quiz-match-pair-right { flex: 1; min-width: 0; overflow-wrap: break-word; }
.rp-quiz-match-pair-dash { color: var(--muted-foreground); flex-shrink: 0; }

.rp-quiz-match-pair-del {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.rp-quiz-match-pair-del:hover { background: var(--secondary); color: var(--destructive); }

.rp-quiz-order { display: flex; flex-direction: column; gap: 8px; }

.rp-quiz-order-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.rp-quiz-order-num {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
}
.rp-quiz-order-text { flex: 1; min-width: 0; font-size: 14.5px; }
.rp-quiz-order-arrows { display: flex; gap: 4px; flex-shrink: 0; }

.rp-quiz-order-arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--foreground);
  font-size: 15px;
  cursor: pointer;
}
.rp-quiz-order-arrow:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 640px) {
  .rp-quiz-header { height: 56px; padding: 0 12px; gap: 8px; }
  .rp-quiz-back-label, .rp-quiz-sep { display: none; }
  .rp-quiz-back { width: 38px; height: 38px; justify-content: center; }
  .rp-quiz-title { flex: 1; min-width: 0; }
  .rp-quiz-progress { top: 56px; }
  .rp-quiz-counter-full { display: none; }
  .rp-quiz-counter-short { display: inline; }
  .rp-quiz-question { padding: 24px 16px 24px; }
  .rp-quiz-prompt { font-size: 19px; margin-bottom: 18px; }
  .rp-quiz-option { padding: 15px; gap: 12px; font-size: 15px; }
  .rp-quiz-option-dot { width: 24px; height: 24px; }
  .rp-quiz-nav-back-label { display: none; }
  .rp-quiz-nav {
    position: sticky;
    bottom: 0;
    margin: 24px -16px -24px;
    padding: 12px 16px 18px;
    border-top: 1px solid var(--border);
    background: var(--card);
  }
  .rp-quiz-nav-back { height: 48px; padding: 0 18px; }
  .rp-quiz-nav-next { flex: 1; height: 48px; font-size: 15px; }
  .rp-quiz-match-cols { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Мои курсы (/my-courses) page layout — Task 12, Мои курсы.dc.html ────── */
.rp-mycrs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rp-mycrs-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.rp-mycrs-note a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

@media (max-width: 640px) {
  .rp-mycrs-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Плеер курса + Урок (/my-courses/{id}, /content/{id}) — Task 13, Плеер курса.dc.html ─── */
/* The player is the desktop two-pane surface (wide); the standalone content page stays a single column. */
.rp-plr { max-width: 1200px; margin: 0 auto; }
.rp-plr-content { max-width: 760px; margin: 0 auto; }

/* Desktop two-pane: 300px structure aside (border-right) + inline lesson panel (mock §desktop). */
.rp-plr-body { display: flex; align-items: flex-start; min-height: 0; }
.rp-plr-aside {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  position: sticky;
  top: 72px;
  align-self: flex-start;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}
.rp-plr-panel { flex: 1; min-width: 0; }
.rp-plr-panel-inner { max-width: 720px; margin: 0 auto; padding: 24px 28px 60px; }

@media (max-width: 768px) {
  /* Mobile two-screen stack: the aside is the whole screen; the inline panel is hidden and a lesson click
     navigates to /content/{id} (the anchor's href — preventDefault is off on narrow). */
  .rp-plr-body { display: block; }
  .rp-plr-aside {
    width: 100%;
    border-right: 0;
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: 8px 0;
  }
  .rp-plr-panel { display: none; }
}

/* header: back · name · progress */
.rp-plr-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.rp-plr-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
}
.rp-plr-back:hover { color: var(--foreground); }

.rp-plr-head-sep { width: 1px; height: 20px; background: var(--border); }
.rp-plr-name { font-size: 15px; font-weight: 600; color: var(--foreground); }
.rp-plr-spacer { flex: 1; }

.rp-plr-progress { display: inline-flex; align-items: center; gap: 10px; }

/* LessonContentBody's loading state (wave-9 T3 — replaces MudProgressCircular + Mud's d-flex/pa-8 utilities). */
.rp-plr-loading { display: flex; justify-content: center; padding: 32px; }
.rp-plr-progress-bar {
  width: 120px;
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.rp-plr-progress-fill { height: 100%; border-radius: 999px; background: var(--primary); }
.rp-plr-progress-count { font-size: 12.5px; color: var(--muted-foreground); }

/* structure: modules → lessons */
.rp-plr-mod {
  padding: 14px 4px 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.rp-plr-mod-empty { padding: 4px 10px 8px; font-size: 13px; color: var(--muted-foreground); }

.rp-plr-lesson {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  margin-bottom: 1px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--foreground);
  cursor: pointer;
}
a.rp-plr-lesson:hover { background: var(--secondary); }

.rp-plr-dot {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--secondary);
  color: var(--muted-foreground);
}
.rp-plr-lesson-title { flex: 1; font-size: 13.5px; font-weight: 500; line-height: 1.35; }

.rp-plr-lesson--done .rp-plr-dot { background: var(--success-muted); color: var(--success-muted-foreground); }

.rp-plr-lesson--current { background: var(--accent); }
.rp-plr-lesson--current .rp-plr-dot { background: var(--primary); color: var(--primary-foreground); }
.rp-plr-lesson--current .rp-plr-lesson-title { font-weight: 600; color: var(--accent-foreground); }

.rp-plr-lesson--locked { opacity: 0.7; cursor: default; color: var(--muted-foreground); }

.rp-plr-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--warning-muted);
  color: var(--warning-muted-foreground);
}

/* SP2 T9: the caller's nearest scheduled live lesson for a course-tree unit — purely informational
   (drip still gates on homework progress, not this date). */
.rp-cpl-date {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* lesson content page */
.rp-plr-preview { margin-bottom: 12px; }
.rp-plr-crumb { font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 6px; }
.rp-plr-lesson-h { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; }

.rp-plr-locked-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin: 8px 0 4px;
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 13.5px;
}

.rp-plr-lesson-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

/* audio pill */
.rp-plr-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  flex: 1;
  max-width: 360px;
}
.rp-plr-audio-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.rp-plr-audio-body { flex: 1; min-width: 0; }
.rp-plr-audio-label { font-size: 12px; font-weight: 600; line-height: 1.2; }
.rp-plr-audio-track {
  height: 4px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.rp-plr-audio-fill { height: 100%; border-radius: 999px; background: var(--primary); }
.rp-plr-audio-time { font-size: 11.5px; color: var(--muted-foreground); font-family: var(--font-mono); flex-shrink: 0; }

/* reader link */
.rp-plr-reader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
}
.rp-plr-reader:hover { background: var(--secondary); }

/* content blocks */
.rp-plr-block { margin: 0 0 18px; }
.rp-plr-block.rp-markdown { font-size: 15.5px; line-height: 1.7; }

.rp-plr-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.rp-plr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Recognized-but-unembeddable link (VK — see LessonBlockParsing.ToEmbedUrl): fills the same
   16:9 box the iframe would, instead of leaving it visually empty. */
.rp-plr-video-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--card);
  color: var(--foreground);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.rp-plr-video-link:hover { background: var(--secondary); }

.rp-plr-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.rp-plr-file-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--secondary);
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rp-plr-file-body { flex: 1; min-width: 0; }
.rp-plr-file-name { font-size: 13.5px; font-weight: 600; }
.rp-plr-file-size { font-size: 12px; color: var(--muted-foreground); }
.rp-plr-file-dl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
}
.rp-plr-file-dl:hover { background: var(--secondary); }

/* homework card (DZBlock) */
.rp-plr-dz {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--accent);
}
.rp-plr-dz-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rp-plr-dz-body { flex: 1; min-width: 0; }
.rp-plr-dz-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent-foreground);
}
.rp-plr-dz-sub { font-size: 13px; color: var(--accent-foreground); }
.rp-plr-dz-cta {
  height: 38px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
}
.rp-plr-dz-cta:hover { filter: brightness(0.95); }

/* prev/next nav */
.rp-plr-nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.rp-plr-nav-btn {
  height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  font-family: inherit;  /* the desktop-player prev/next render as <button> (in-place swap) */
  cursor: pointer;
}
.rp-plr-nav-btn:hover { background: var(--secondary); }

@media (max-width: 640px) {
  .rp-plr-reader { width: 42px; padding: 0; justify-content: center; border-radius: 50%; }
  .rp-plr-reader-label { display: none; }
  .rp-plr-lesson-h { font-size: 21px; }
  .rp-plr-dz { flex-wrap: wrap; }
  .rp-plr-dz-cta { width: 100%; justify-content: center; }
}

/* ── Главная ученика (/home/student) — Task 14, Главная ученика.dc.html ─────────────────────────── */

.rp-shome-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}

/* Shared header row for the two plain rp-card widgets in the grid (assignments + course-resume) —
   uppercase muted label + a trailing text-link, no bottom border (unlike the generic .rp-card-header). */
.rp-shome-card-head {
  display: flex;
  align-items: baseline;
  margin-bottom: 14px;
}

.rp-shome-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rp-shome-card-link {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.rp-shome-assignments {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  .rp-shome-grid { grid-template-columns: 1fr; }
}

/* RpNextLessonCard — next-lesson card. Accent-tinted, distinct from the neutral rp-card cards.
   Mode variants (RpNextLessonMode): --live = the lesson is running right now (success-tinted border,
   live dot in the eyebrow); default accent = «Скоро начнётся», a lesson later TODAY; --calm =
   tomorrow or farther (and the empty state) — neutral card, muted eyebrow, so the accent stops
   promising «скоро» for a lesson days away. */
.rp-nlc {
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--accent);
  padding: 20px;
}

.rp-nlc--live { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }

.rp-nlc--calm { border-color: var(--border); background: var(--card); }
.rp-nlc--calm .rp-nlc-eyebrow,
.rp-nlc--calm .rp-nlc-sub,
.rp-nlc--calm .rp-nlc-ctx,
.rp-nlc--calm .rp-nlc-foot,
.rp-nlc--calm .rp-nlc-foot-link,
.rp-nlc--calm .rp-nlc-empty { color: var(--muted-foreground); }
.rp-nlc--calm .rp-nlc-foot { border-top-color: var(--border); }

.rp-nlc-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.rp-nlc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rp-nlc-main { flex: 1; min-width: 0; }
.rp-nlc-title { font-size: 17px; font-weight: 600; }
.rp-nlc-sub { font-size: 13.5px; color: var(--accent-foreground); }
/* Spec 11.5: «Курс „X" · Поток „Y"» — optional line under the subtitle. */
.rp-nlc-ctx { font-size: 12.5px; color: var(--accent-foreground); opacity: 0.8; margin-top: 1px; }
.rp-nlc-cta { flex-shrink: 0; }

.rp-nlc-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  font-size: 13px;
  color: var(--accent-foreground);
}

.rp-nlc-foot-link {
  color: var(--accent-foreground);
  font-weight: 600;
  text-decoration: none;
}

.rp-nlc-empty {
  font-size: 14px;
  color: var(--accent-foreground);
  margin: 0 0 10px;
}

@media (max-width: 640px) {
  .rp-nlc-row { flex-direction: column; align-items: stretch; }
  .rp-nlc-cta { width: 100%; height: 44px; }
}

/* RpCourseResumeWidget — «Продолжить курс», desktop-only per the mock (dropped below 640px, not just
   visually squeezed — the mobile mock's card list has 3 cards, not 4). Reuses .rp-crs-bar/-bar-fill
   (identical 6px token values) so the progress bar isn't redefined twice. */
.rp-crw {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.rp-crw-title { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.rp-crw-progress { font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }
.rp-crw-spacer { flex: 1; }
.rp-crw-empty { font-size: 13.5px; color: var(--muted-foreground); margin: 0; }

.rp-crw-cta {
  margin-top: 14px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

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

/* ── Spec 2026-08-25 — UnmarkedLessonsStrip (очередь «Не отмечено») · rp-unm-* ─────────────── */
.rp-unm-strip { margin-bottom: 16px; border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: 10px; padding: 12px 14px; background: var(--card); }
.rp-unm-head { font-weight: 600; margin-bottom: 8px; }
.rp-unm-count { color: var(--muted-foreground); font-weight: 400; }
.rp-unm-list { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-unm-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-width: 220px; flex: 0 1 auto; }
.rp-unm-time { font-weight: 600; font-size: .92rem; }
.rp-unm-names { font-size: .92rem; margin-top: 2px; }
.rp-unm-context { color: var(--muted-foreground); font-size: .85rem; margin-top: 2px; }
.rp-unm-actions { display: flex; gap: 8px; margin-top: 8px; }
.rp-unm-btn { border-radius: 7px; padding: 5px 10px; font-size: .88rem; cursor: pointer; }
.rp-unm-btn--all { border: 1px solid transparent; background: var(--primary); color: var(--primary-foreground); }
.rp-unm-btn--refine { border: 1px solid var(--border); background: transparent; color: inherit; }
.rp-unm-btn:disabled { opacity: .55; cursor: default; }
@media (max-width: 640px) { .rp-unm-card { flex-basis: 100%; } }

/* ── Spec 2026-08-25 Task 7 — MyLessonsPage «Прошедшие» segment · rp-past-* ─────────────────────── */
.rp-past { display: flex; flex-direction: column; gap: 10px; }
.rp-past-counters { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: var(--muted-foreground); margin-bottom: 4px; }

.rp-past-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  text-decoration: none;
  color: inherit;
}
.rp-past-row:hover { background: var(--muted); }

.rp-past-when { font-size: 13px; color: var(--muted-foreground); flex-shrink: 0; min-width: 96px; }
.rp-past-topic { font-size: 14.5px; font-weight: 600; flex: 1; min-width: 0; }
.rp-past-child, .rp-past-tenant { font-size: 12.5px; color: var(--muted-foreground); }
.rp-past-mark { font-size: 13px; font-weight: 600; flex-shrink: 0; }

@media (max-width: 640px) {
  .rp-past-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rp-past-when { min-width: 0; }
}