/* 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. */

/* 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; }
.rp-wk-ev.rp-wk-ev--open {
  border: 1.5px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--accent);
  color: var(--accent-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); }
.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: 1.5px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--accent);
  color: var(--accent-foreground);
}
.rp-wkm-card.rp-wk-ev--open .rp-wkm-card-title { color: var(--accent-foreground); }
.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; }
/* 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); }
.rp-cld-radio-url { margin-top: 2px; }

/* Заметка 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; }

/* 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; }

/* 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; }
[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; }

.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; }

.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;
}

/* ── SP2 Task 5 — /my-lessons: MyRequestsStrip («Мои заявки») + RequestSlotDialog — rp-myreq-
   classes / rp-reqdlg. Mirrors rp-lrq-* (SP1 Task 9's tutor-side LessonRequestsStrip) card-for-card — same
   width/border/radius, only the action differs (single «Отозвать» textlink instead of a three-button
   row, since the student is resolving their OWN request, not reviewing someone else's). 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: 10px; }

.rp-myreq-list { display: flex; flex-wrap: wrap; gap: 12px; }
.rp-myreq-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 260px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 12px;
}

.rp-myreq-tenant { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-myreq-when { font-size: 12.5px; color: var(--muted-foreground); flex: 1; }

.rp-myreq-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--muted);
  color: var(--muted-foreground);
}
.rp-myreq-chip[data-status="confirmed"] { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.rp-myreq-chip[data-status="declined"],
.rp-myreq-chip[data-status="superseded"] { background: color-mix(in srgb, var(--destructive) 12%, transparent); color: var(--destructive); }

.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 — «Скоро начнётся». Accent-tinted, distinct from the neutral rp-card cards. */
.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-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; }
}