/* plist13.css: the option 13 "up next" playlist (round 8, thumbs lane, 12 Nov 2026). One component for every numbered
   lesson list: learning paths (.pth-side.pl13) and the Academy "In this course" list (.ac-upnext.pl13).
   Each row: watched tick + number | 16:9 still with duration badge | title and channel. Current row is dark with a
   "Playing" flag on the still; the next row says "Up next". Headings in sentence case, no monospace, no uppercase.
   Thumbs: 144px desktop, 104px phone. Contrast: #4f4f55 on #fff 8.1:1; #d2d2d7 on #1d1d1f 12.6:1; badge #fff on rgba(0,0,0,.82). */
.pl13{--pl-th:144px}
@media (max-width:599px){.pl13{--pl-th:104px}}
/* paths: a wider list column on desktop so the stills and titles both fit (was 23rem) */
@media (min-width:1000px){.pth-body:has(.pth-side.pl13){grid-template-columns:minmax(0,1fr) 26rem}.pth-side.pl13{--pl-th:132px;padding:14px 12px}}
@media (min-width:1300px){.pth-body:has(.pth-side.pl13){grid-template-columns:minmax(0,1fr) 28rem}.pth-side.pl13{--pl-th:144px}}
body .pth-side.pl13 .pl13-h,.pl13-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:2px 4px 6px;font:800 19px/1.2 Archivo,Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:#1d1d1f;text-transform:none}
body .pth-side.pl13 .pl13-h span{font:600 14px/1 Archivo,Helvetica,Arial,sans-serif;color:#4f4f55}
/* section headings: sentence case, as written in the data */
body .pth-side.pl13 .pth-mod h3{font:700 15.5px/1.35 Archivo,Helvetica,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#1d1d1f;margin:20px 4px 8px;padding-top:14px;border-top:1px solid #e3e3e8}
body .pth-side.pl13 .pth-mod:first-child h3{border-top:0;padding-top:0;margin-top:10px}
body .pth-side.pl13 .pth-ls{display:grid;gap:4px}
/* the row */
.pl13 .pl13-i{display:grid;grid-template-columns:22px var(--pl-th) minmax(0,1fr);gap:12px;align-items:start;width:100%;min-height:44px;padding:8px;margin:0;border:0;border-radius:12px;background:transparent;color:#1d1d1f;text-align:left;text-decoration:none;font:inherit;cursor:pointer;transition:background .15s}
.pl13 .pl13-i:hover{background:#f5f5f7}
.pl13 .pl13-i:focus-visible{outline:3px solid #1d1d1f;outline-offset:2px;background:#f5f5f7}
.pl13 .pl13-i[aria-current]{background:#1d1d1f;color:#fff}
.pl13 .pl13-i[aria-current]:focus-visible{outline-color:#1d1d1f;box-shadow:0 0 0 2px #fff inset}
.pl13-k{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:2px}
body .pl13 .pth-tick{width:18px;height:18px;margin:0;border:2px solid currentColor;border-radius:5px;background:transparent;box-shadow:none;position:relative}
body .pl13 .is-done .pth-tick{background:#1d1d1f;border-color:#1d1d1f;box-shadow:none}
body .pl13 .is-done .pth-tick::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
body .pl13 .is-done[aria-current] .pth-tick{background:#fff;border-color:#fff}
body .pl13 .is-done[aria-current] .pth-tick::after{border-color:#1d1d1f}
body .pl13 .pth-ln{font:700 13px/1 Archivo,Helvetica,Arial,sans-serif!important;letter-spacing:0!important;color:inherit;padding:0}
/* the still */
.pl13-th{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#ececf0}
.pl13-th img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .15s}
.pl13-len{position:absolute;right:4px;bottom:4px;padding:2px 5px;border-radius:4px;background:rgba(0,0,0,.82);color:#fff;font:600 11.5px/1.2 Archivo,Helvetica,Arial,sans-serif;letter-spacing:.01em}
.pl13-on{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:5px;background:rgba(0,0,0,.55);color:#fff;font:700 12.5px/1 Archivo,Helvetica,Arial,sans-serif}
.pl13-on svg{width:16px;height:16px;color:#ffe600}
.pl13-i[aria-current] .pl13-on{display:flex}
.pl13-i[aria-current] .pl13-len{display:none}
.pl13-i.is-done:not([aria-current]) .pl13-th img{opacity:.62}
/* the words */
body .pl13 .pth-lt,.pl13-tx{display:block;min-width:0;font-weight:400}
.pl13-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:700 15px/1.3 Archivo,Helvetica,Arial,sans-serif;letter-spacing:-.005em}
body .pl13 .pth-lc,.pl13-m{display:block;margin-top:4px;font:400 13px/1.35 Archivo,Helvetica,Arial,sans-serif!important;letter-spacing:0!important;color:#4f4f55}
body .pl13 [aria-current] .pth-lc,.pl13 [aria-current] .pl13-m{color:#d2d2d7}
.pl13 .is-next .pth-lt::before{content:"Up next";display:block;margin-bottom:3px;font:700 12px/1 Archivo,Helvetica,Arial,sans-serif;color:#4f4f55}
@media (max-width:599px){.pl13 .pl13-i{gap:10px;padding:7px 6px}.pl13-t{font-size:14.5px}body .pl13 .pth-lc,.pl13-m{font-size:12.5px!important}}
/* Academy "In this course" */
.ac-upnext.pl13{padding:8px}
.ac-upnext.pl13 a.pl13-i{grid-template-columns:28px var(--pl-th) minmax(0,1fr);font-size:15px}
.ac-upnext.pl13 a.pl13-i:not(.has-th) .pl13-tx{grid-column:2/4}
.ac-upnext.pl13 .nn{margin-top:2px}
.ac-upnext.pl13 .s{grid-column:3;justify-self:start;margin-top:-4px}
.ac-upnext.pl13 a.pl13-i:not(.has-th) .s{grid-column:2/4}
.ac-upnext.pl13 .s:empty{display:none}
@media (min-width:1080px){.ac-upnext.pl13{--pl-th:112px}}
@media print{.pl13-th{display:none}.pl13 .pl13-i{grid-template-columns:22px minmax(0,1fr)}.ac-upnext.pl13 a.pl13-i{grid-template-columns:28px minmax(0,1fr)}.pl13 .pl13-tx,.pl13 .pth-lt,.ac-upnext.pl13 .s{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.pl13 .pl13-i,.pl13-th img{transition:none}}