/* eLMS page layout on top of the Rigore token and component layers.
   Colours, type and spacing come from rigore.css tokens; only layout values are written here. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 2px; border-radius: var(--radius-sm); }

.skip-link {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-12));
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--blue-600); color: var(--text-primary); z-index: 1;
}
.skip-link:focus { top: var(--space-4); }

.page { max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-9); display: flex; flex-direction: column; min-height: 100vh; }
.page__main { flex: 1; }
.page__footer { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-hairline); font-size: var(--text-body-sm); }

.rg-navbar a { text-decoration: none; }
.rg-navbar__meta a:hover { text-decoration: underline; }

.hero { min-height: 32vh; padding: var(--space-10) 0 var(--space-9); }
.section { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }

.course-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.course-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); }
.course-card__top { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.course-card__category { color: var(--text-secondary); }
.course-card__link { text-decoration: none; }
.course-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); } /* whole card is clickable */
.course-card:hover { border-color: var(--line-strong); }
.course-card__description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.course-card__meta { margin: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.course-card__more { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-body-sm); }

.back { margin: var(--space-8) 0 var(--space-6); font-size: var(--text-body-sm); color: var(--text-secondary); }
.course { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.course > .rg-card { align-self: stretch; margin-top: var(--space-3); }
.course__title { max-width: 32ch; }
.course__description { max-width: 70ch; white-space: pre-line; }

.curriculum { list-style: none; margin: 0; padding: 0; }
.curriculum:not(.curriculum--nested) > .curriculum__item + .curriculum__item { border-top: 1px solid var(--border-hairline); }
.curriculum__item { padding: var(--space-3) 0; }
.curriculum__row { display: flex; align-items: center; gap: var(--space-3); }
.curriculum__number { color: var(--text-muted); font-size: var(--text-label); min-width: 2.5ch; }
.curriculum--nested { margin-top: var(--space-2); padding-left: calc(2.5ch + var(--space-3)); color: var(--text-secondary); }
.curriculum--nested .curriculum__item { padding: var(--space-1) 0; }
.curriculum--nested .curriculum--nested { padding-left: var(--space-6); }

@media (max-width: 640px) {
  .page { padding: var(--space-4) var(--space-4) var(--space-8); }
  .rg-navbar { padding: 0 var(--space-4); }
  .hero { min-height: 28vh; padding: var(--space-8) 0; }
  .rg-hero__eyebrow { font-size: var(--text-title); }
  .rg-hero__title { font-size: var(--text-display-3); }
  .course-grid { grid-template-columns: 1fr; }
}

/* Forms — not part of the Rigore package; built from its tokens. */
.narrow { max-width: 520px; }
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__input {
  height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-box);
  background: var(--fill-card); border: 1px solid var(--line-strong); color: var(--text-primary);
  font: var(--type-body);
}
.field__input:focus { outline: 2px solid var(--text-secondary); outline-offset: 1px; }
.field__input:disabled { opacity: 0.56; }
.form__hint { margin: 0; font-size: var(--text-body-sm); }
.form .rg-btn { align-self: flex-start; }
.rg-btn:disabled { opacity: 0.56; cursor: not-allowed; }
.form__status { margin: 0; min-height: 1.5em; color: var(--text-secondary); }
.form__status--error { color: var(--warning-text); }

/* Signed-in pages */
.nav-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.nav-button:hover { text-decoration: underline; }
.nav-button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: var(--radius-sm); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.progress-row { display: flex; align-items: center; gap: var(--space-3); }
.progress { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--line-row); overflow: hidden; }
.progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--text-secondary); }
.progress-row__count { font-size: var(--text-label); color: var(--text-muted); }

.learn__header { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); max-width: 720px; }
.learn__header .rg-badge { margin: 0; align-self: flex-start; }
.learn__grid { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--space-5); align-items: start; }
.learn__nav { padding: var(--space-5); }
.learn__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.learn__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-box); background: none; color: var(--text-secondary); font: var(--type-body); text-align: left; cursor: pointer;
}
.learn__item:hover { background: var(--fill-card); color: var(--text-primary); }
.learn__item[aria-current] { background: var(--border-hairline); color: var(--text-primary); }
.learn__item:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: -2px; }
.learn__item--depth-1 { padding-left: calc(var(--space-3) + var(--space-5)); }
.learn__item--depth-2 { padding-left: calc(var(--space-3) + var(--space-9)); }
.learn__panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-height: 240px; }
.learn__panel .rg-badge { margin: 0; }
.resource-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 800px) {
  .learn__grid { grid-template-columns: 1fr; }
}

/* Exam */
.exam-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.learn .exam-card { margin-top: var(--space-5); }
.exam .rg-title { margin-bottom: var(--space-6); }
.rules { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); margin: 0; }
.rules__item { display: flex; flex-direction: column; gap: var(--space-1); }
.rules dd { margin: 0; }
.exam__clock { position: sticky; top: var(--space-4); z-index: 1; margin: 0 0 var(--space-5); background: var(--surface-canvas); }
.exam__form { display: flex; flex-direction: column; gap: var(--space-4); }
.question { display: flex; flex-direction: column; gap: var(--space-2); }
.question__legend { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; margin-bottom: var(--space-3); font: var(--weight-medium) var(--text-title-3)/var(--leading-tight) var(--font-display); }
.question__number { font-size: var(--text-label); font-weight: var(--weight-regular); }
.option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-box); cursor: pointer; color: var(--text-secondary); }
.option:hover { border-color: var(--line-strong); color: var(--text-primary); }
.option:has(input:checked) { border-color: var(--text-secondary); color: var(--text-primary); background: var(--fill-card); }
.option input { accent-color: var(--blue-600); width: 18px; height: 18px; margin: 0; flex: none; }
.exam__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.exam__score { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; font-size: var(--text-title); }

/* Administration */
.admin { display: flex; flex-direction: column; gap: var(--space-6); }
.admin-header { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0; color: var(--text-secondary); font-size: var(--text-body-sm); }
.admin-card { display: flex; flex-direction: column; gap: var(--space-5); }
[data-view="admin-courses"] { display: flex; flex-direction: column; gap: var(--space-6); }
.admin-notice { position: sticky; top: var(--space-4); z-index: 1; margin: 0; min-height: 1.5em; color: var(--text-secondary); }
.admin-form { max-width: 640px; }
.admin-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.admin-form__actions .form__status { min-height: 0; }
.admin-group { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); }
.admin-group:first-child, .admin-form__note + .admin-group { padding-top: 0; border-top: 0; }
.admin-group__title { margin: 0; font-size: var(--text-body); font-weight: 500; color: var(--text-primary); }
.admin-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: var(--space-4); align-items: start; }
.admin-form__note { margin: 0; font-size: var(--text-body-sm); }
@media (max-width: 640px) { .admin-row { grid-template-columns: 1fr; } }
.field__input--area { height: auto; min-height: 96px; padding: var(--space-3) var(--space-4); resize: vertical; }
select.field__input { appearance: auto; }
select.field__input option { background: var(--surface-canvas); color: var(--text-primary); }
.admin-status--draft { color: var(--text-muted); border-color: var(--line-row); background: none; }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-card); background: var(--fill-card); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: var(--space-3) var(--space-5); text-align: left; border-bottom: 1px solid var(--border-hairline); white-space: nowrap; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table th { font: var(--type-label); color: var(--text-secondary); }
.admin-table td .rg-badge { height: 26px; }

.admin-link-button { background: none; border: 0; padding: 0; font: var(--weight-medium) var(--text-body-sm)/1.5 var(--font-sans); color: var(--text-secondary); text-decoration: underline; cursor: pointer; }
.admin-link-button:hover { color: var(--text-primary); }
.admin-link-button:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 2px; border-radius: var(--radius-sm); }
.admin-item__row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.admin-item__title { flex: 1; min-width: 12em; }
.admin-disclosure__summary { cursor: pointer; width: fit-content; font-size: var(--text-body-sm); color: var(--text-secondary); }
.admin-disclosure__summary:hover { color: var(--text-primary); }
.admin-disclosure__summary:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 2px; border-radius: var(--radius-sm); }
.admin-disclosure[open] > .admin-form { margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-box); }

.admin-exam { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-questions { margin: 0; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.admin-question { display: flex; flex-direction: column; gap: var(--space-2); }
.admin-question__prompt { margin: 0; }
.admin-question__options { margin: 0; padding-left: var(--space-6); color: var(--text-secondary); list-style: upper-alpha; }
.admin-question__correct { color: var(--text-primary); }
.admin-question__correct .rg-icon { vertical-align: -3px; }
.admin-question__correct::marker { color: var(--text-secondary); }

/* Companies */
.admin-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.admin-tabs a { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--border-hairline); color: var(--text-secondary); text-decoration: none; font-size: var(--text-body-sm); }
.admin-tabs a:hover { color: var(--text-primary); border-color: var(--line-strong); }
.admin-tabs a[aria-current="page"] { color: var(--text-primary); background: var(--fill-card); border-color: var(--text-secondary); }
.org-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.checkbox { display: flex; align-items: center; gap: var(--space-3); color: var(--text-secondary); cursor: pointer; }
.checkbox input { accent-color: var(--blue-600); width: 18px; height: 18px; margin: 0; }
.admin-table__progress { min-width: 180px; }
.admin-table__progress .progress-row { gap: var(--space-2); }
.admin > .form__status:empty, .admin-notice:empty { display: none; }
.page__main > .admin:first-child { margin-top: var(--space-8); }

/* Account and certificates */
.account { display: flex; flex-direction: column; gap: var(--space-5); }
.certificate-warning { height: auto; min-height: 30px; padding: var(--space-2) var(--space-4); white-space: normal; margin: 0 0 var(--space-5); }
.certificate {
  position: relative; margin-top: var(--space-8); padding: var(--space-9); border-radius: var(--radius-card);
  border: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: var(--space-8); min-height: 520px;
}
.certificate__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.certificate__hero { flex: 1; }
.certificate .rg-hero__eyebrow { color: var(--blue-600); }
.certificate .rg-hero__title { color: var(--text-primary); overflow-wrap: anywhere; }
.certificate .rg-hero__lede { color: var(--text-body-light); max-width: 48ch; }
.certificate__no-name { color: var(--text-muted); }
.certificate__meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-9); margin: 0; }
.certificate__meta div { display: flex; flex-direction: column; gap: var(--space-1); }
.certificate__meta dt { color: var(--text-muted); }
.certificate__meta dd { margin: 0; color: var(--text-primary); }
.certificate__top { justify-content: flex-start; min-height: 40px; }
.certificate__logo { display: block; max-height: 56px; max-width: 200px; object-fit: contain; }
.certificate__organization { font-size: var(--text-title-3); font-weight: 500; color: var(--text-primary); }
.certificate__signers { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-9); }
.certificate__signer { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 200px; }
.certificate__signature { display: block; height: 56px; max-width: 220px; object-fit: contain; object-position: left bottom; padding-bottom: var(--space-1); border-bottom: 1px solid var(--text-muted); }
.certificate__signature--empty { width: 200px; }
.certificate__signer figcaption { display: flex; flex-direction: column; gap: var(--space-1); }
.certificate__signer-name { color: var(--text-primary); font-weight: 500; }
.certificate__signer-title { color: var(--text-muted); font-size: var(--text-body-sm); }
.certificate__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); }
.certificate__issuer { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; color: var(--text-muted); font-size: var(--text-body-sm); }
.certificate__issuer p { margin: 0; }
.certificate__url { overflow-wrap: anywhere; }
.qr { display: block; flex: none; width: 104px; height: 104px; }
.certificate-revoked { margin: var(--space-8) 0 calc(-1 * var(--space-4)); padding: var(--space-4) var(--space-5); border: 1px solid var(--warning-500); border-radius: var(--radius-box); color: var(--warning-text); }
.certificate__actions { margin-top: var(--space-6); }
@media (max-width: 640px) {
  .certificate { padding: var(--space-6); min-height: 0; gap: var(--space-6); }
  .certificate .rg-hero__title { font-size: var(--text-title); }
  .certificate .rg-hero__eyebrow { font-size: var(--text-title-3); }
  .certificate__footer { flex-direction: column; align-items: flex-start; }
}
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .page__header, .page__footer, .skip-link, .no-print { display: none !important; }
  html, body.rg-aurora { background: none !important; }
  body.rg-aurora::after { display: none; }
  .page { padding: 0; min-height: 0; }
  .certificate { margin: 0; min-height: 180mm; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .certificate-revoked { margin: 0 0 4mm; color: var(--text-on-light); }
  /* One A4 landscape page (190 mm inside the margins): compact type and spacing, natural height. */
  .certificate { min-height: 0; padding: 11mm 15mm; gap: 5mm; }
  .certificate > * { flex-shrink: 0; }
  .certificate__hero { padding: 0; min-height: 0; flex: 0 0 auto; gap: 2mm; }
  .certificate .rg-hero__eyebrow { font-size: 24px; }
  .certificate .rg-hero__title { font-size: 42px; }
  .certificate-revoked { padding: 2mm 4mm; }
  .certificate__signature { height: 13mm; }
  .qr { width: 22mm; height: 22mm; }
}

/* Course introduction: summary beside the sections on wide screens, above them on narrow ones. */
.course__header { display: flex; flex-direction: column; gap: var(--space-4); }
.course__layout { align-self: stretch; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; margin-top: var(--space-3); }
.course__sections { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.course-summary { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.course-summary__price { margin: 0; font-size: var(--text-title); line-height: 1.2; color: var(--text-primary); }
.course-summary__note { margin: 0; font-size: var(--text-body-sm); }
.course-summary__facts { margin: var(--space-3) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.course-summary__facts > div { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); }
.course-summary__facts dd { margin: 0; }
.course-section { display: flex; flex-direction: column; gap: var(--space-4); }
.course-section > h2 { margin: 0; }
.detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.detail-list li { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.5; }
.detail-list:not(.detail-list--checked) li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.6em; border-radius: 50%; background: var(--text-muted); }
.detail-list--checked .rg-icon { flex: none; margin-top: 0.2em; color: var(--blue-600); }
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); text-decoration: none; font-size: var(--text-body-sm); color: var(--text-secondary); }
.tag:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.tag:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.tag-heading { color: var(--blue-600); }
@media (max-width: 860px) {
  .course__layout { grid-template-columns: 1fr; }
  .course-summary { grid-column: 1; position: static; }
  .course__sections { grid-row: 2; }
}

/* Administrators' preview of a course page. */
.preview-banner { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); border-color: var(--blue-400); }
.preview-banner > p { margin: 0; }
.preview-banner__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.preview-banner__missing { color: var(--text-primary); }
.preview-banner__links { font-size: var(--text-body-sm); color: var(--text-secondary); }
.preview-empty { margin: 0; font-style: italic; }

/* Catalog category filter and the category field of the course form. */
.category-filter { margin: var(--space-4) 0 var(--space-6); }
.tag[aria-current="page"] { color: var(--text-primary); border-color: var(--blue-400); background: color-mix(in srgb, var(--blue-600) 18%, transparent); }
.tag__count { margin-left: var(--space-2); color: var(--text-muted); font-size: var(--text-label); }
.category-field { display: flex; flex-direction: column; gap: var(--space-3); }
.category-adder { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-box); }
.category-adder[hidden] { display: none; }
.category-notice { margin: 0; min-height: 0; }
.category-notice:empty { display: none; }

.admin-category-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin-category { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; }
.admin-category + .admin-category { border-top: 1px solid var(--border-hairline); }
.admin-category .form__status:empty, .admin-categories .admin-notice:empty { display: none; }
.admin-category-list + .admin-disclosure { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); }

/* Courses of a package on its introduction page. */
.course__kind { align-self: flex-start; }
.package-courses { list-style: none; margin: 0; padding: 0; }
.package-course { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; }
.package-course + .package-course { border-top: 1px solid var(--border-hairline); }
.package-course__body { display: flex; flex-direction: column; gap: var(--space-1); }
.package-course__meta { font-size: var(--text-body-sm); }

/* Landing page requests (administration). */
.request td { vertical-align: top; }
.request__contact { display: flex; flex-direction: column; gap: var(--space-1); }
.request__details { display: flex; flex-direction: column; gap: var(--space-1); white-space: normal; min-width: 260px; max-width: 420px; }
.request__message { white-space: pre-wrap; }
.request--handled { color: var(--text-secondary); }

/* Course introduction page: light page, dark title panel, summary card beside (above on phones). */
.page--light .rg-navbar { border: 1px solid var(--border-hairline); box-shadow: 0 12px 32px -24px rgba(14, 21, 33, 0.35); }
.page--light .back a { color: var(--blue-600); }
.course__layout { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "hero summary" "sections summary"; gap: var(--space-5) var(--space-6); }
.course-hero { grid-area: hero; position: relative; overflow: hidden; gap: var(--space-4); padding: clamp(28px, 4vw, 44px); border-radius: 24px; color: #FFFFFF;
  background: radial-gradient(60% 90% at 92% 0%, rgba(90, 120, 207, 0.55) 0%, rgba(90, 120, 207, 0) 70%), radial-gradient(50% 80% at 0% 100%, rgba(47, 82, 180, 0.45) 0%, rgba(47, 82, 180, 0) 70%), #0B1222; }
.course-hero .course__title { margin: 0; max-width: 24ch; color: #FFFFFF; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; }
.course-hero .course__description { margin: 0; color: #DCE3F5; font-size: var(--text-lede); line-height: 1.6; }
.course-hero .preview-empty { color: #B9C4DD; }
.course-hero__chips { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.course-hero__chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 30px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.28); color: #DCE3F5; font-size: var(--text-body-sm); text-decoration: none; }
a.course-hero__chip:hover { border-color: #C0D1F6; color: #FFFFFF; }
.course-hero__chip .rg-mono { color: #FFFFFF; }
.course-hero .course__kind { margin: 0; background: rgba(192, 209, 246, 0.16); color: #C0D1F6; }
.course-hero .course__kind .rg-badge__dot { background: #C0D1F6; }
.course-summary { grid-area: summary; top: var(--space-6); gap: var(--space-3); padding: 28px; border-radius: 20px; box-shadow: 0 30px 60px -48px rgba(14, 21, 33, 0.45); }
.course-summary > .rg-label, .course-summary__facts .rg-label { color: var(--text-muted); }
/* Course image and introduction video, at the top of the summary card (16:9). */
.course-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: var(--space-2); border-radius: 14px; background: radial-gradient(70% 100% at 85% 0%, rgba(90, 120, 207, 0.6) 0%, rgba(90, 120, 207, 0) 70%), #0B1222; }
.course-media__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.course-media__player { display: block; width: 100%; height: 100%; border: 0; }
.course-media__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: #FFFFFF; text-decoration: none; background: linear-gradient(180deg, rgba(11, 18, 34, 0) 35%, rgba(11, 18, 34, 0.55) 100%); }
.course-media__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: #183079; box-shadow: 0 10px 30px -10px rgba(11, 18, 34, 0.6); transition: transform 150ms ease; }
.course-media__icon .rg-icon { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.course-media__label { font-size: var(--text-body-sm); font-weight: 500; text-shadow: 0 1px 8px rgba(11, 18, 34, 0.7); }
.course-media__play:hover .course-media__icon { transform: scale(1.06); }
.course-media__play:focus-visible { outline: 3px solid #8EA6E6; outline-offset: -3px; }
.course-media--plain .course-media__play { background: none; }
.course-media--empty { display: grid; place-items: center; padding: var(--space-4); background: #F3F6FD; border: 1px dashed #8EA6E6; text-align: center; }
.course-media--empty p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .course-media__icon { transition: none; } }
.course-summary__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); font-family: var(--font-mono); font-size: 36px; font-weight: 500; letter-spacing: -0.02em; }
.course-summary__price .course-summary__note { font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: 400; letter-spacing: 0; color: var(--text-body-light); }
.course-summary__actions { margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.course-summary__cta { justify-content: center; min-height: 52px; background: #183079; border-color: #183079; color: #FFFFFF; text-decoration: none; }
.course-summary__cta:hover { background: #2F52B4; border-color: #2F52B4; }
.course-summary__hint { font-size: var(--text-body-sm); line-height: 1.5; color: var(--text-body-light); }
.course-summary__facts > div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.course-summary__facts dd { text-align: right; }
.course-summary__facts dd a { color: var(--blue-600); }
.course__sections { grid-area: sections; }
.page--light .course-section { padding: 32px; border-radius: 20px; }
.page--light .course-section > h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.page--light .detail-list--checked { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px 32px; }
.page--light .detail-list--checked .rg-icon { box-sizing: content-box; width: 14px; height: 14px; padding: 4px; margin-top: 0.05em; border-radius: 50%; background: #E6ECFB; color: #2F52B4; }
.page--light .detail-list:not(.detail-list--checked) li::before { background: #5A78CF; }
.page--light .curriculum__item { padding: var(--space-4) 0; }
.page--light .curriculum__row { font-weight: 500; }
.page--light .curriculum__number { display: inline-grid; place-items: center; min-width: 34px; height: 26px; border-radius: var(--radius-pill); background: #E6ECFB; color: #183079; }
.page--light .curriculum--nested { padding-left: calc(34px + var(--space-3)); font-weight: 400; }
.page--light .curriculum--nested .curriculum__row { font-weight: 400; }
.page--light .curriculum--nested .curriculum__item { padding: var(--space-1) 0; }
.page--light .tag { border-color: #C0D1F6; color: #183079; background: #FFFFFF; }
.page--light .tag:hover { background: #E6ECFB; color: #183079; }
.page--light .preview-banner { border-color: #8EA6E6; }
@media (max-width: 900px) {
  .course__layout { grid-template-columns: 1fr; grid-template-areas: "hero" "summary" "sections"; }
  .course-summary { position: static; }
  .page--light .course-section { padding: 24px; }
}
.request td:last-child { white-space: normal; min-width: 140px; }

/* Certificate administration. */
.cert-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: end; }
.cert-filters .admin-form__actions { grid-column: 1 / -1; }
.cert-count { margin: var(--space-4) 0 0; }
.cert-item__meta { margin: 0; font-size: var(--text-body-sm); overflow-wrap: anywhere; }
.cert-history { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--text-secondary); font-size: var(--text-body-sm); }
.cert-image { display: flex; align-items: center; gap: var(--space-4); }
.cert-image__preview { max-height: 56px; max-width: 200px; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--text-primary); object-fit: contain; }
.cert-image__preview[hidden], .cert-image .admin-link-button[hidden] { display: none; }
.cert-image__file { padding-top: var(--space-2); }
.admin-checks { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.admin-checks legend { padding: 0; margin-bottom: var(--space-2); }
@media (max-width: 640px) { .cert-filters { grid-template-columns: 1fr; } }

/* Course image in the editor. */
.course-image-admin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.course-image-admin__preview { display: block; width: min(100%, 320px); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-hairline); }

/* Curriculum outline in the course editor: numbered rows, one open at a time. */
.outline-editor { display: flex; flex-direction: column; gap: var(--space-3); }
.outline-editor > p { margin: 0; }
.outline__summary { font-size: var(--text-body-sm); color: var(--text-muted); }
.outline-box { position: relative; border: 1px solid var(--border-hairline); border-radius: 12px; overflow: hidden; }
.outline__handle { flex: none; display: inline-grid; place-items: center; width: 28px; height: 44px; margin-left: -8px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-muted); cursor: grab; touch-action: none; }
.outline__handle:hover { background: rgba(192, 209, 246, 0.10); color: var(--text-primary); }
.outline__handle:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: -2px; }
.outline__handle .rg-icon { width: 18px; height: 18px; stroke-width: 3; }
.outline__handle-space { flex: none; width: 20px; }
.outline__item.is-dragging { opacity: 0.45; }
.outline__drop { position: absolute; right: 12px; height: 3px; border-radius: 2px; background: #8EA6E6; pointer-events: none; z-index: 1; }
body.is-reordering, body.is-reordering * { cursor: grabbing; user-select: none; }
.outline { list-style: none; margin: 0; padding: 0; }
.outline__item + .outline__item { border-top: 1px solid var(--border-hairline); }
.outline__item--level-0 { --outline-indent: 16px; }
.outline__item--level-1 { --outline-indent: 52px; }
.outline__item--level-2 { --outline-indent: 88px; }
.outline__row { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) 0 var(--outline-indent); }
.outline__item.is-selected > .outline__row { background: rgba(90, 120, 207, 0.16); }
.outline__toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.outline__toggle > .rg-icon { flex: none; width: 18px; height: 18px; color: var(--text-muted); }
.outline__item.is-selected .outline__toggle > .rg-icon { color: var(--text-secondary); }
.outline__toggle:hover .outline__title { text-decoration: underline; text-underline-offset: 3px; }
.outline__toggle:focus-visible, .icon-button:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: -2px; border-radius: 8px; }
.outline__number { flex: none; display: inline-grid; place-items: center; min-width: 44px; height: 26px; padding: 0 8px; box-sizing: border-box; border-radius: var(--radius-pill); background: rgba(192, 209, 246, 0.12); color: var(--text-secondary); font-family: var(--font-mono); font-size: 13px; }
.outline__title { min-width: 0; overflow-wrap: anywhere; padding: var(--space-2) 0; }
.outline__item--level-0 .outline__title { font-weight: 600; }
.outline__kind { flex: none; font-size: 13px; color: var(--text-muted); }
.outline__chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: rgba(253, 253, 255, 0.06); font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.outline__chip .rg-icon { width: 13px; height: 13px; fill: currentColor; }
.icon-button { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text-secondary); cursor: pointer; }
.icon-button:hover { background: rgba(192, 209, 246, 0.12); color: var(--text-primary); }
.icon-button .rg-icon { width: 20px; height: 20px; }
.outline__add { padding: var(--space-3) var(--space-4) var(--space-4) calc(var(--outline-indent) + 66px); border-top: 1px solid var(--border-hairline); background: rgba(253, 253, 255, 0.03); }
.outline__panel { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--outline-indent) + 30px); border-top: 1px solid var(--border-hairline); background: rgba(90, 120, 207, 0.06); }
.outline__panel > .form__status:empty { display: none; }
.outline__group { display: flex; flex-direction: column; gap: var(--space-3); }
.outline__note { margin: 0; font-size: var(--text-body-sm); }
.outline__resources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.outline__resources li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: 6px 12px; border-radius: 10px; background: rgba(253, 253, 255, 0.05); }
.outline__resource-icon { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(90, 120, 207, 0.25); color: var(--text-secondary); }
.outline__resource-icon .rg-icon { width: 16px; height: 16px; }
.outline__resource-name { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.outline__resource-name .rg-mono { font-size: 13px; color: var(--text-muted); }
.outline__resources a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-secondary); }
.outline__resources a .rg-icon { width: 14px; height: 14px; }
.outline__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); }
.outline__moves { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.outline__move { gap: 6px; }
.outline__move .rg-icon, .outline__danger .rg-icon { width: 16px; height: 16px; }
.outline__move:disabled { opacity: 0.45; cursor: default; }
.outline__danger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #F2A7A0; }
.outline__new > * { max-width: 640px; }
.outline__new { max-width: none; padding: var(--space-4); border-top: 1px solid var(--border-hairline); background: rgba(253, 253, 255, 0.02); }
.outline-box > .outline__new:first-child { border-top: 0; }
@media (max-width: 600px) {
  .outline__item--level-1 { --outline-indent: 32px; }
  .outline__item--level-2 { --outline-indent: 48px; }
  .outline__kind { display: none; }
  .outline__chip { padding: 0 10px; }
  .outline__chip-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .outline__panel, .outline__add { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* Question builder (final exam and section tests). */
.builder-area { display: flex; flex-direction: column; gap: var(--space-3); }
.builder-area > p { margin: 0; }
.builder-rows-box { display: flex; flex-direction: column; gap: var(--space-2); }
.builder-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.builder-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.builder-row__label { flex: 0 0 5.5em; }
.builder-row > .field__input { flex: 1 1 180px; min-width: 0; }
.builder-row__arrow { color: var(--text-muted); }
.builder-row__mark { flex: none; }
.builder-row__remove:disabled { opacity: 0.4; cursor: default; text-decoration: none; }
.builder-rows__add { align-self: flex-start; min-height: 44px; }
.admin-question__head { margin: 0; }
.admin-question__answer { margin: 0; color: var(--text-secondary); }
.admin-question__pairs, .admin-question__order { margin: 0; padding-left: var(--space-6); color: var(--text-secondary); }
.outline__group h4 { margin: var(--space-2) 0 0; }
@media (max-width: 600px) { .builder-row__label { flex-basis: 100%; } }

/* Question types (learners) and the section test card. */
.question__hint { margin: 0 0 var(--space-1); font-size: var(--text-body-sm); }
.question__short { max-width: 32rem; }
.matching { display: flex; flex-direction: column; gap: var(--space-2); }
.matching__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-hairline); border-radius: var(--radius-box); }
.matching__left { color: var(--text-primary); overflow-wrap: anywhere; }
.ordering { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: ordering; }
.ordering__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-box); counter-increment: ordering; }
.ordering__item::before { content: counter(ordering); flex: none; min-width: 1.5em; font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--text-muted); }
.ordering__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); }
.ordering .icon-button:disabled { opacity: 0.35; cursor: default; background: none; }
.section-test { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); }
.section-test > h3 { margin: 0; }
.section-test > p { margin: 0; }
.section-test .exam__form { align-self: stretch; }
.test-results { list-style: none; margin: 0; padding: 0; align-self: stretch; display: flex; flex-direction: column; gap: var(--space-2); }
.test-result { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-box); }
.test-result p { margin: 0; }
.test-result__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.test-result__mark { flex: none; padding: 0 10px; border-radius: var(--radius-pill); font-size: var(--text-body-sm); font-weight: 500; }
.test-result--right .test-result__mark { background: rgba(120, 200, 160, 0.16); color: #A8E6C4; }
.test-result--wrong .test-result__mark { background: rgba(242, 167, 160, 0.14); color: #F2A7A0; }
.test-result__answer { margin-top: var(--space-2) !important; color: var(--text-secondary); }
@media (max-width: 600px) { .matching__row { grid-template-columns: 1fr; } }
.section-test .exam__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
.section-test .exam__actions .form__status { flex-basis: 100%; }
.learn__grid > * { min-width: 0; }
.matching__row select { min-width: 0; width: 100%; }
.admin-question > .admin-link-button { align-self: flex-start; }

/* Announcements. */
.nav-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: #5A78CF; color: #FFFFFF; font-size: 12px; font-weight: 600; line-height: 1; vertical-align: 1px; }
.my-announcements { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0 var(--space-6); }
.my-announcements > h2 { margin: 0; }
.my-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 36rem; }
.my-empty > p { margin: 0; }
.announcement-list { display: flex; flex-direction: column; gap: var(--space-3); }
.announcement { display: flex; flex-direction: column; gap: var(--space-2); }
.announcement--new { border-color: #5A78CF; }
.announcement__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-body-sm); color: var(--text-muted); }
.announcement__meta .rg-badge { margin: 0; }
.announcement__from { color: var(--text-secondary); font-weight: 500; }
.announcement__title { margin: 0; font-size: var(--text-title-3); line-height: 1.25; }
.announcement__body, .sent-announcement__body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.sent-announcements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sent-announcement { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--border-hairline); }
.sent-announcement:first-child { border-top: 0; padding-top: 0; }
.sent-announcement p { margin: 0; }
.sent-announcement__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sent-announcement__meta { font-size: var(--text-body-sm); }
.sent-announcement__body { color: var(--text-secondary); }