/* RMI learn pages: courses.html, course.html, lesson.html. Black and white brand tokens only. */

.learn-main { max-width: 1080px; margin: 0 auto; padding: 32px 16px 120px; }
.learn-main.is-narrow { max-width: 760px; }
.learn-eyebrow { font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin: 0 0 10px; }
.learn-sub { color: var(--mist); font-size: 0.95rem; line-height: 1.6; margin: 8px 0 24px; max-width: 640px; }
.learn-back { display: inline-flex; align-items: center; gap: 6px; color: var(--mist); font-size: 0.85rem; text-decoration: none; margin-bottom: 20px; }
.learn-back:hover { color: var(--porcelain); }

/* Toolbar and filters */
.learn-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.learn-toolbar .rmi-input, .learn-toolbar select { min-width: 0; }
.learn-search { flex: 1 1 220px; }
.learn-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.learn-chip { flex: 0 0 auto; background: transparent; color: var(--mist); border: 1px solid var(--smoke); border-radius: 999px; padding: 7px 14px; font: 500 0.82rem/1 var(--font-sans); cursor: pointer; }
.learn-chip[aria-pressed="true"] { background: var(--porcelain); color: var(--onyx); border-color: var(--porcelain); }
.learn-group-title { font: 400 1.5rem/1.2 var(--font-serif); color: var(--porcelain); margin: 30px 0 4px; }
.learn-group-sub { color: var(--steel); font-size: 0.85rem; margin: 0 0 14px; }

/* Course cards */
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.learn-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; color: inherit; text-decoration: none; min-height: 210px; transition: border-color 0.15s; }
.learn-card:hover, .learn-card:focus-visible { border-color: var(--steel); }
.learn-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--porcelain); }
.learn-card h3 { font: 400 1.2rem/1.2 var(--font-serif); margin: 0; }
.learn-card-meta { font: 400 0.75rem/1.4 var(--font-mono); color: var(--steel); }
.learn-card-desc { color: var(--mist); font-size: 0.86rem; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.learn-card-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.learn-state { font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--smoke); border-radius: 999px; padding: 5px 10px; white-space: nowrap; color: var(--mist); }
.learn-state.is-strong { background: var(--porcelain); color: var(--onyx); border-color: var(--porcelain); }
.learn-lock { color: var(--steel); font-size: 0.8rem; line-height: 1.45; margin: 0; }
.learn-empty { color: var(--mist); padding: 28px 0; }

.learn-progress { height: 6px; background: var(--smoke); border-radius: 999px; overflow: hidden; }
.learn-progress span { display: block; height: 100%; background: var(--porcelain); }

/* Notices */
.learn-notice { padding: 16px 18px; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.learn-notice p { margin: 0; color: var(--mist); font-size: 0.9rem; line-height: 1.5; flex: 1 1 260px; }

/* Course page */
.learn-hero { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.learn-hero-icon { flex: 0 0 auto; width: 64px; height: 64px; border: 1px solid var(--smoke); border-radius: 16px; display: grid; place-items: center; color: var(--porcelain); }
.learn-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 28px; }
.learn-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.learn-lesson { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; color: inherit; text-decoration: none; }
.learn-lesson:hover, .learn-lesson:focus-visible { border-color: var(--steel); }
.learn-lesson.is-next { border-color: var(--porcelain); }
.learn-lesson-num { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--smoke); display: grid; place-items: center; font: 500 0.8rem/1 var(--font-mono); color: var(--mist); }
.learn-lesson.is-passed .learn-lesson-num { background: var(--porcelain); color: var(--onyx); border-color: var(--porcelain); }
.learn-lesson-title { color: var(--porcelain); font-weight: 500; }
.learn-lesson-meta { font: 400 0.74rem/1.4 var(--font-mono); color: var(--steel); }

/* Lesson page */
.learn-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--graphite); border: 1px solid var(--smoke); margin: 18px 0 22px; }
.learn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.learn-video-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--mist); padding: 16px; gap: 8px; }
.learn-text { color: var(--mist); line-height: 1.75; white-space: pre-line; }
.learn-points { margin: 10px 0 0; padding-left: 20px; color: var(--mist); line-height: 1.7; }
.learn-section-title { font: 400 1.35rem/1.2 var(--font-serif); color: var(--porcelain); margin: 30px 0 10px; }

.learn-quiz { padding: 20px; margin-top: 12px; }
.learn-q-count { font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); margin: 0 0 10px; }
.learn-q { font-size: 1.05rem; color: var(--porcelain); line-height: 1.5; margin: 0 0 14px; }
.learn-options { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.learn-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--smoke); border-radius: 10px; cursor: pointer; color: var(--mist); line-height: 1.45; }
.learn-option:hover { border-color: var(--steel); }
.learn-option { transition: background .15s, color .15s, border-color .15s; }
/* Custom radio: hollow ring when empty, solid dot when chosen, so the choice
   never depends on telling two shades of white apart. */
.learn-option input {
  appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--steel); border-radius: 50%; background: transparent; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.learn-option input:focus-visible { outline: 2px solid var(--porcelain); outline-offset: 3px; }
/* The chosen answer inverts: white card, black text, black dot with a white centre. */
.learn-option:has(input:checked) { background: var(--porcelain); border-color: var(--porcelain); color: var(--onyx); }
.learn-option input:checked { background: var(--onyx); border-color: var(--onyx); box-shadow: inset 0 0 0 5px var(--onyx), inset 0 0 0 10px var(--porcelain); }
.learn-quiz-nav { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.learn-result-score { font: 400 2.4rem/1 var(--font-serif); color: var(--porcelain); margin: 4px 0 6px; }
.learn-result-list { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.learn-result-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--mist); font-size: 0.9rem; line-height: 1.5; }
.learn-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 32px; flex-wrap: wrap; }
.learn-image { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--smoke); margin: 16px 0; }

/* Save for offline (lesson and course pages) */
.learn-save { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 0; }
.learn-save:empty { display: none; }
.learn-save-status { display: inline-flex; align-items: center; gap: 6px; font: 400 0.78rem/1.4 var(--font-mono); color: var(--steel); }
.learn-notice .ri { vertical-align: -3px; }

@media (max-width: 560px) {
  .learn-hero { flex-direction: column; }
  .learn-lesson { grid-template-columns: 32px 1fr; }
  .learn-lesson > :last-child { grid-column: 2; }
}

/* Screen reader only text */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }