/* Learn, the course page and the player (A3): layout only; every value is a kit token. */
.learn-continue__grid { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .learn-continue__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.learn-continue__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.learn-courses { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); }

.learn-libbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.learn-libbar .k-search { flex: 1 1 280px; max-width: 420px; }
.learn-docs { display: flex; flex-direction: column; gap: var(--space-6); }
.learn-docs:has(> li > .learn-doc) { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.learn-group { display: flex; flex-direction: column; gap: var(--space-3); }
.learn-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.learn-group__title { font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--weight-medium); color: var(--color-ink); }
.learn-docs__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.learn-docs__empty { grid-column: 1 / -1; }
.learn-doc { display: flex; width: 100%; min-height: 72px; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); text-align: left; transition: box-shadow var(--duration-ui) var(--ease-standard), transform var(--duration-ui) var(--ease-out); }
.learn-doc:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.learn-doc__thumb { position: relative; display: inline-flex; width: 48px; height: 48px; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-md); background: var(--mat-stone-hi); color: var(--mat-stone-deep); }
.learn-doc__thumb[data-type="handout"] { background: var(--mat-sage-hi); color: var(--mat-sage-deep); }
.learn-doc__thumb[data-type="form"] { background: var(--mat-slate-hi); color: var(--mat-slate-deep); }
.learn-doc__thumb[data-type="template"] { background: var(--mat-sand-hi); color: var(--mat-sand-deep); }
.learn-doc__thumb--video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.learn-doc__thumb--video .k-icon { position: relative; }
.learn-doc__thumb--video::after { content: ""; position: absolute; inset: 0; background: var(--color-cover-veil); }
.learn-doc__thumb--video .k-icon { z-index: 1; }
.learn-doc__text { display: flex; min-width: 0; flex-direction: column; }
.learn-doc__title { font-weight: var(--weight-medium); color: var(--color-ink); }
.learn-doc__meta { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }
.learn-docpage { width: 100%; max-width: 420px; }

/* The course page */
[data-screen="course"] { gap: var(--space-8); }
.course-hero { position: relative; display: flex; min-height: 280px; align-items: flex-end; overflow: hidden; border-radius: var(--radius-xl); background: var(--mat-stone); }
.course-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.course-hero__veil { position: absolute; inset: 0; background: linear-gradient(to top, var(--color-cover-veil), var(--color-cover-veil-0) 80%); }
.course-hero__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-8); color: var(--color-on-cover); }
.course-hero__back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-3) 0 var(--space-2); margin-bottom: var(--space-2); border-radius: var(--radius-full); background: var(--color-cover-veil); color: var(--color-on-cover); font-size: var(--text-meta); font-weight: var(--weight-medium); }
.course-hero__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--display-l); line-height: var(--display-l-leading); letter-spacing: var(--tracking-display); }
.course-hero__meta { font-size: var(--text-body); line-height: var(--leading-body); }
.course-grid { display: grid; gap: var(--space-8); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .course-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.course-main { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }
.course-now { display: flex; flex-direction: column; gap: var(--space-1); }
.course-now__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-weight: var(--weight-regular); font-size: var(--display-s); line-height: var(--display-s-leading); }
.course-sub { margin-bottom: var(--space-3); font-size: var(--text-body); font-weight: var(--weight-medium); }
.course-chapters, .course-transcript { padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-1); }
.course-transcript summary { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; font-weight: var(--weight-medium); list-style: none; }
.course-transcript summary::-webkit-details-marker { display: none; }
.course-transcript[open] summary { margin-bottom: var(--space-4); }
.course-side { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-1); }
/* The badge a course earns: a medallion with what it takes (P18.9), above the list of videos */
.course-badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-6); text-align: center; box-shadow: 0 1px 0 var(--color-hairline); }
.course-badge__text { display: flex; flex-direction: column; gap: var(--space-2); }
.course-badge__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-title); line-height: var(--leading-title); color: var(--color-ink); }
.course-badge__line { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink-2); }
.course-badge--none { align-items: flex-start; text-align: left; }
.course-mods { display: flex; flex-direction: column; gap: var(--space-1); }
.course-mod { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); transition: background-color var(--duration-ui) var(--ease-standard); }
.course-mod:hover { background: var(--color-surface-2); }
.course-mod[aria-current="true"] { background: var(--color-brand-tint); }
.course-mod__img { display: inline-flex; width: 64px; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-ground-2); color: var(--color-brand); }
.course-mod__img img { width: 100%; height: 100%; object-fit: cover; }
.course-mod__text { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.course-mod__n { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ink-3); }
.course-mod__title { font-weight: var(--weight-medium); color: var(--color-ink); }
.course-check { display: flex; max-width: 760px; flex-direction: column; gap: var(--space-6); scroll-margin-top: calc(var(--topbar) + var(--space-4)); }
.course-check__head { display: flex; flex-direction: column; gap: var(--space-1); }
.course-q { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.course-q__q { padding: 0; margin-bottom: var(--space-2); font-weight: var(--weight-medium); color: var(--color-ink); }
.course-q__fb { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-warning-tint); color: var(--color-ink-2); }
.course-q__fb.is-right { background: var(--color-success-tint); }
.course-earned { display: grid; gap: var(--space-6); align-items: center; padding: var(--space-8); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .course-earned { grid-template-columns: auto minmax(0, 1fr) 180px; } .course-earned--plain { grid-template-columns: minmax(0, 1fr); } }
.course-earned__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.course-earned__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--display-s); line-height: var(--display-s-leading); }
.course-earned__page { width: 180px; }
@media (max-width: 767px) {
  .course-hero { min-height: 220px; }
  .course-hero__text { padding: var(--space-5); }
  .course-hero__title { font-size: var(--display-m); line-height: var(--display-m-leading); }
}

/* The player (v2's, on v3 tokens) */
.pl { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-2); }
.pl-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-ink); cursor: pointer; }
.pl-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pl-captions { position: absolute; left: 0; right: 0; bottom: var(--space-4); display: flex; justify-content: center; padding: 0 var(--space-6); pointer-events: none; }
.pl[data-captions="off"] .pl-captions { display: none; }
.pl-caption { max-width: 720px; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--color-cover-veil); color: var(--color-on-cover); font-size: var(--text-lead); line-height: var(--leading-lead); text-align: center; }
.pl-caption[hidden] { display: none; }
.pl-poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pl[data-started="true"] .pl-poster { display: none; }
.pl-bigplay { position: relative; box-shadow: var(--shadow-3); }
.pl-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); background: var(--color-cover-veil); color: var(--color-on-cover); cursor: default; animation: k-fade var(--duration-ui) var(--ease-out) both; }
.pl-end[hidden] { display: none; }
.pl-end__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--display-s); line-height: var(--display-s-leading); }
.pl-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.pl-bar__end { display: flex; align-items: center; gap: var(--space-1); }
.pl-time { flex-shrink: 0; min-width: 88px; font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }
.pl-speed { min-width: 48px; }
.pl .k-btn[aria-pressed="true"] { background: var(--color-brand-tint); color: var(--color-brand); }
.pl-scrub { position: relative; flex: 1; min-width: 80px; height: 24px; margin: 0 var(--space-2); border-radius: var(--radius-full); cursor: pointer; touch-action: none; }
.pl-scrub__track { position: absolute; left: 0; right: 0; top: 10px; height: 4px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-brand-tint-2); }
.pl-scrub__fill { position: absolute; inset: 0 auto 0 0; background: var(--color-brand); }
.pl-scrub__tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--color-surface); }
.pl-scrub__knob { position: absolute; top: 4px; width: 16px; height: 16px; margin-left: -8px; border-radius: var(--radius-full); background: var(--color-brand); box-shadow: var(--shadow-1); transform: scale(0); transition: transform var(--duration-fast) var(--ease-out); }
.pl-scrub:hover .pl-scrub__knob, .pl-scrub:focus-visible .pl-scrub__knob { transform: scale(1); }
.pl:fullscreen { background: var(--color-ink); }
.pl:fullscreen .pl-stage { flex: 1; aspect-ratio: auto; }
.pl:fullscreen .pl-video { object-fit: contain; }
.pl-chapters { display: flex; flex-direction: column; gap: var(--space-1); }
.pl-chapter { display: grid; width: 100%; min-height: 40px; align-items: center; gap: var(--space-3); grid-template-columns: 24px minmax(0, 1fr) auto; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-ink-2); transition: background-color var(--duration-ui) var(--ease-standard); }
.pl-chapter:hover { background: var(--color-surface-2); color: var(--color-ink); }
.pl-chapter[aria-current="true"] { background: var(--color-brand-tint); color: var(--color-ink); }
.pl-chapter__n, .pl-chapter__time { color: var(--color-ink-3); font-size: var(--text-meta); }
.pl-chapter[aria-current="true"] .pl-chapter__n { color: var(--color-brand); }
.pl-chapter__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-transcript { display: flex; max-height: 296px; flex-direction: column; gap: var(--space-1); overflow-y: auto; scrollbar-width: thin; }
.pl-cue { display: grid; width: 100%; gap: var(--space-3); grid-template-columns: 48px minmax(0, 1fr); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-ink-2); text-align: left; }
.pl-cue:hover { background: var(--color-surface-2); }
.pl-cue[aria-current="true"] { background: var(--color-brand-tint); color: var(--color-ink); }
.pl-cue__time { color: var(--color-ink-3); font-size: var(--text-meta); }
@media (max-width: 639px) {
  .pl-bar { flex-wrap: wrap; row-gap: 0; }
  .pl-scrub { order: -1; flex-basis: 100%; margin: 0 var(--space-1); }
  .pl-time { flex: 1; }
  .pl-caption { font-size: var(--text-meta); line-height: var(--leading-meta); }
  .pl-captions { bottom: var(--space-2); padding: 0 var(--space-3); }
}
.pl[data-started="false"] .pl-captions { display: none; }
.course-about { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-1); }
.course-about__grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .course-about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.course-refs { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-5); list-style: decimal; font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); }
.course-about__by { padding-top: var(--space-4); box-shadow: 0 -1px 0 var(--color-hairline); }
@media (max-width: 767px) { .course-about { padding: var(--space-5); } }