/* Pinebridge · the lesson player.
   Pushed by livewire/course-player after site.css and app.css, whose tokens, buttons,
   forms, panels, progress bars, ticks and status chips it reuses. The same markup is
   shown in two frames: the workspace (anyone signed in) and learn/layouts/preview
   (a guest on a free preview, under the public header).
   Frame → header → lesson → side column → preview frame → responsive → print. */

.player { min-width: 0; }
.player .btn { min-height: 46px; padding: 0 20px; font-size: 14.5px; }
.player .btn--sm { min-height: 38px; padding: 0 16px; font-size: 13.5px; }
.player .btn:disabled { cursor: wait; opacity: .65; transform: none; box-shadow: none; }
.player .btn:disabled .btn__dot { transform: none; }
/* A label that wraps inside its pill must not squeeze the round dot beside it. */
.player .btn__dot { flex: none; }

/* The workspace's top bar carries the lesson title here: one line, cut with an ellipsis, never a stack of lines. */
.app-top .where { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.player__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.player__crumbs a { transition: color .18s; }
.player__crumbs a:hover { color: var(--green-700); }
.player__crumbs .ico { font-size: 13px; color: var(--green-600); }

/* Lesson header: the programme's photograph, where the lesson sits, and the way across. */
.lhead { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 26px; align-items: center; padding: 14px; }
.lhead__pic { position: relative; align-self: stretch; min-height: 168px; border-radius: 12px; overflow: hidden; background: var(--navy-800); }
.lhead__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.lhead:hover .lhead__pic img { transform: scale(1.05); }
.lhead__body { min-width: 0; padding: 10px 16px 10px 0; }
.lhead__where { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.lhead__where a { color: var(--green-700); }
.lhead__where a:hover { color: var(--navy-700); }
.lhead__where span::before { content: "·"; margin-right: 10px; color: var(--line-2); }
.lhead h1 { font-size: clamp(24px, 2.5vw, 33px); line-height: 1.18; }
.lhead__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 12px 0 0; font-size: 14px; }
.lhead__facts > span:not(.status) { display: inline-flex; align-items: center; gap: 7px; }
.lhead__facts .ico { font-size: 17px; color: var(--green-600); }
.lhead__progress { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.lhead__bars { display: flex; gap: 6px; }
.lhead__bars .pbar { flex: 1 1 0; min-width: 8px; height: 10px; }
.lhead__count { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; margin: 10px 0 0; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lhead__count b { color: var(--ink); font-weight: 600; }
.lhead__count--plain { justify-content: flex-start; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.lhead__count--plain span::before { content: "·"; margin-right: 16px; color: var(--line-2); }

/* The lesson beside its curriculum.
   The lesson sets the height of the row. The side column takes that height and no more (its own
   contents are left out of the sum), so a short lesson is not followed by an empty column under it;
   the list scrolls inside whatever height it is given and stays in view beside a long lesson. */
.lgrid { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 20px; align-items: stretch; margin-top: 20px; }
.lmain { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-self: start; min-width: 0; }
.lmain > .pan + .pan { margin-top: 0; }
.lside { contain: size; display: flex; flex-direction: column; min-width: 0; min-height: min(460px, 100vh - 110px); }

.lvideo { aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--navy-900); box-shadow: var(--shadow-1); }
.lvideo iframe { display: block; width: 100%; height: 100%; border: 0; }

.lbody { padding: clamp(22px, 2.6vw, 38px); }
.lbody .prose { max-width: 720px; font-size: 16.5px; overflow-wrap: anywhere; }
.lbody .prose table { display: block; max-width: 100%; overflow-x: auto; }
.lbody .prose .lead { font-size: 19px; line-height: 1.6; color: var(--ink); }
.lbody .prose h2 { font-size: clamp(21px, 2vw, 26px); }
.lbody .prose h3 { font-size: 19px; }
.lbody .empty { padding: 34px 20px; }
.lbody .empty p { margin: 0; }
/* A lesson of a line or two: its own words, set as a notice. */
.lbody .lbrief { padding: 38px 24px; }
.lbody .lbrief .prose { max-width: 50ch; margin: 0 auto; font-size: 16.5px; line-height: 1.6; font-weight: 500; color: var(--ink); }

/* Mark complete: a strip at the foot of the lesson. */
.ldone { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 32px; padding: 16px 18px; border-radius: var(--r); background: var(--green-50); box-shadow: inset 0 0 0 1px #D5E8B5; transition: background .3s, box-shadow .3s; }
.ldone.is-done { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.ldone__txt { flex: 1 1 220px; margin: 0; line-height: 1.45; }
.ldone__txt b { display: block; color: var(--ink); font-size: 15.5px; font-weight: 600; }
.ldone__txt span { font-size: 13.5px; }
.ldone .btn.is-done { background: #fff; }
.ldone .btn.is-done:hover { background: var(--navy-900); }
.ldone .btn.is-done .btn__dot { background: var(--green); color: var(--navy-900); }

/* Previous and next. A long title wraps inside its pill rather than being cut. */
.lnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.ldone + .lnav { margin-top: 14px; padding-top: 0; border-top: 0; }
.lnav .btn { min-height: 52px; padding: 9px 20px; border-radius: 26px; white-space: normal; line-height: 1.3; text-align: left; }
.lnav__t { min-width: 0; text-wrap: balance; }
.lnav__prev { grid-column: 1; justify-self: start; }
.lnav__prev .ico { transform: rotate(180deg); }
.lnav__prev:hover .btn__dot { transform: translateX(-3px); }
.lnav__next, .lnav__locked { grid-column: 2; justify-self: end; }
.lnav__locked { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 9px 20px; border-radius: 26px; background: var(--soft); color: var(--muted); font-size: 14px; line-height: 1.3; }
.lnav__locked .ico { font-size: 17px; }

/* Programme complete. */
.lfinish { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 22px; align-items: center; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r); color: rgba(255, 255, 255, .82); background: linear-gradient(120deg, var(--navy-950), #0B2E50 55%, var(--navy-700)); }
.lfinish::after { content: ""; position: absolute; right: -8%; top: -90%; z-index: -1; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 198, 63, .32), transparent); }
.lfinish h2 { color: #fff; font-size: 22px; letter-spacing: -.01em; }
.lfinish p { margin: 6px 0 16px; max-width: 62ch; font-size: 14.5px; }

/* Downloads and notes. */
.lfile__get { color: var(--green-700); font-size: 20px; }
.lnotes .note { display: inline-flex; align-items: center; gap: 6px; }
.lnotes .note .ico { font-size: 14px; }
.lnotes .textarea { min-height: 124px; }
.lnotes__state { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; color: var(--muted); }
.lnotes__state.is-saved { color: var(--green-700); font-weight: 600; }
.lnotes__state .ico { font-size: 17px; }

/* A viewer without a place: what a preview is and the ways in, side by side under the lesson. */
.gate { position: relative; isolation: isolate; overflow: hidden; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r); color: rgba(255, 255, 255, .82); background: linear-gradient(120deg, var(--navy-950), #0B2E50 55%, var(--navy-700)); font-size: 14.5px; line-height: 1.55; }
.gate::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='60' width='60' height='60' opacity='.035'/%3E%3Crect x='120' y='0' width='60' height='60' opacity='.025'/%3E%3Crect x='180' y='120' width='60' height='60' opacity='.04'/%3E%3Crect x='300' y='60' width='60' height='60' opacity='.03'/%3E%3Crect x='60' y='240' width='60' height='60' opacity='.03'/%3E%3Crect x='360' y='180' width='60' height='60' opacity='.04'/%3E%3Crect x='420' y='300' width='60' height='60' opacity='.025'/%3E%3Crect x='240' y='300' width='60' height='60' opacity='.03'/%3E%3C/g%3E%3C/svg%3E"); }
.gate::after { content: ""; position: absolute; right: -10%; top: -70%; z-index: -1; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 198, 63, .3), transparent); }
.gate__top { display: flex; align-items: center; gap: 16px; }
.gate h2 { color: #fff; font-size: 22px; letter-spacing: -.01em; }
.gate__top p { margin: 4px 0 0; max-width: 62ch; }
.gate__routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin-top: 20px; }
/* A way in: what it is, and its button. Side by side where there is room, stacked where there is not. */
.gate__route { display: flex; flex-wrap: wrap; align-items: center; align-content: space-between; gap: 16px 28px; padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.gate__say { flex: 3 1 250px; min-width: 0; }
.gate__do { flex: 1 1 250px; min-width: 0; }
.gate .gate__route h3 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 16px; }
.gate__route h3 .ico { font-size: 19px; color: var(--green); }
.gate__say > p { margin: 8px 0 0; }
.gate .btn { white-space: normal; padding: 10px 18px; line-height: 1.3; text-align: center; }
.gate .gate__alt { margin: 12px 0 0; font-size: 13.5px; text-align: center; }
.gate__alt a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gate__alt a:hover { color: #fff; }
.gate__cohort { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; }
.gate__cohort p { margin: 0; }
.gate__cohort .datetile { width: 66px; }
.gate__cohort .datetile b { font-size: 24px; }

/* The curriculum: modules and their lessons, with ticks, the lesson in hand and locks. */
.pan.curric { position: sticky; top: 90px; display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; max-height: calc(100vh - 110px); padding: 0; overflow: hidden; }
.curric__head { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.curric__head h2 { font-size: 19px; letter-spacing: -.01em; }
.curric__toggle { display: none; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 18px; text-align: left; color: var(--ink); }
.curric__toggle-t { flex: 1; min-width: 0; line-height: 1.35; }
.curric__toggle-t b { display: block; font-size: 16px; font-weight: 600; }
.curric__toggle-t small { font-size: 13.5px; color: var(--muted); }
.curric__toggle > .ico { font-size: 20px; color: var(--muted); transition: transform .3s var(--ease); }
.curric__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0 10px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.curric__mod + .curric__mod { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
.curric .curric__mod h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 22px 6px; font-size: 13.5px; line-height: 1.35; }
.curric__mod h3 small { flex: none; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.curric__item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 22px 10px 19px; border-left: 3px solid transparent; font-size: 14px; line-height: 1.4; color: var(--body); transition: background .15s, color .15s; }
a.curric__item:hover { background: var(--green-50); color: var(--ink); }
.curric__item[aria-current="page"] { background: var(--green-50); border-left-color: var(--green); color: var(--ink); font-weight: 600; }
.curric__item[aria-current="page"] .tick:not(.done) { background: var(--green-600); box-shadow: inset 0 0 0 2px var(--green-600), inset 0 0 0 6px #fff; }
.curric__item .tick, .curric__lock { margin-top: -1px; }
.curric__item small { padding-top: 1px; font-size: 12.5px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.curric__item.is-locked { color: var(--muted); }
.curric__lock { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-50); color: var(--muted); font-size: 12px; }
.curric__tag { display: table; margin-top: 4px; padding: 1px 9px; border-radius: 999px; background: var(--green-100); color: var(--green-700); font-size: 12px; font-weight: 600; }
.curric__key { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 12px 22px 4px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* The preview frame: a navy opening under the public header, the player drawn up over its foot. */
.pv__top.phero { padding: 150px 0 132px; text-align: left; }
.pv__top-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 22px 48px; }
.pv__line { margin: 18px 0 10px; color: #fff; font-size: clamp(27px, 3.1vw, 40px); font-weight: 600; line-height: 1.16; letter-spacing: -.012em; text-wrap: balance; }
.pv__lede { max-width: 640px; margin: 0; color: rgba(255, 255, 255, .8); font-size: 16px; line-height: 1.65; }
.pv__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pv__wrap { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), var(--container)); margin: -96px auto 0; padding-bottom: clamp(56px, 7vw, 100px); }
.pv .player__crumbs { color: rgba(255, 255, 255, .72); }
.pv .player__crumbs a { color: #fff; }
.pv .player__crumbs a:hover { color: var(--green); }
.pv .player__crumbs .ico { color: var(--green); }
.pv .lhead { box-shadow: var(--shadow-2); }

/* Responsive ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
    /* One column: the lesson list first, folded under its button, then the lesson. */
    .lgrid { display: flex; flex-direction: column; align-items: stretch; }
    .lside { contain: none; order: -1; min-height: 0; }
    .pan.curric { position: static; max-height: none; }
    .curric__body { overflow: visible; }
    .lessons-js .curric__head { display: none; }
    .lessons-js .curric__toggle { display: flex; }
    .lessons-js:not(.lessons-open) .curric__body { display: none; }
    .lessons-open .curric__toggle { box-shadow: 0 1px 0 var(--line); }
    .lessons-open .curric__toggle > .ico { transform: rotate(180deg); }
}
@media (max-width: 680px) {
    .lhead { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
    .lhead__pic { min-height: 132px; }
    .lhead__body { padding: 0 6px 8px; }
    .lhead__where { display: block; font-size: 14px; }
    .lhead__where span { display: block; }
    .lhead__where span::before, .lhead__count--plain span::before { display: none; }
    .lhead__count { font-size: 14px; }
    .lhead__count--plain { display: block; }
    .lhead__count--plain span { display: block; }
    /* The lesson title in the top bar: two lines at most. */
    .app-top .where { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 15px; line-height: 1.25; }
    /* Tap targets of 44px and text of 14px and over. */
    .player .btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
    .player .field__hint, .lnotes .note, .lnotes__state { font-size: 14px; }
    /* The way back on one line: the programme's name is cut rather than wrapped. */
    .player__crumbs { flex-wrap: nowrap; gap: 8px; margin-bottom: 2px; }
    .player__crumbs a { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; line-height: 44px; white-space: nowrap; text-overflow: ellipsis; }
    .player__crumbs a:first-child { flex: none; }
    .player__crumbs .ico { flex: none; }
    .player__crumbs .player__here { display: none; }
    .lhead__where a { display: inline-block; margin: -12px 0; padding: 12px 0; }
    .gate__top { align-items: flex-start; }
    .gate .gate__alt { margin-top: 6px; font-size: 14px; }
    .gate__alt a { display: inline-block; padding: 12px 4px; }
    .lbody .prose { font-size: 16px; }
    .lbody .lbrief { padding: 30px 18px; }
    .ldone { padding: 16px; }
    .ldone__txt span { font-size: 14px; }
    .ldone .btn { width: 100%; }
    .lnav { grid-template-columns: 1fr; }
    .lnav .btn, .lnav__locked { grid-column: 1; justify-self: stretch; }
    .lnav__next, .lnav__locked { order: -1; }
    .lnav__next { justify-content: space-between; }
    .lfinish { grid-template-columns: 1fr; }
    .curric__item { padding: 12px 18px 12px 15px; }
    .curric .curric__mod h3 { padding: 14px 18px 6px; font-size: 14px; }
    .curric__mod h3 small, .curric__item small, .curric__toggle-t small { font-size: 14px; }
    .curric__item { font-size: 14.5px; }
    .curric__key { padding: 12px 18px 4px; font-size: 14px; }
    .pv__top.phero { padding: 108px 0 128px; }
    .pv__line { margin-top: 14px; }
    .pv__lede { font-size: 15px; }
    .pv__actions { width: 100%; gap: 10px; }
    .pv__actions .btn { flex: 1 1 auto; min-height: 50px; padding: 0 16px; font-size: 14.5px; gap: 8px; }
    .pv__wrap { margin-top: -108px; }
}
@media print {
    .player__crumbs, .lside, .lnav, .ldone, .lnotes, .pv__top, .lhead__pic { display: none !important; }
    .lgrid, .lhead { display: block; }
    .pv__wrap { margin-top: 0; }
}