/* ==== area:learn ==== Styles for the learn area only (courses, lessons, the plain plate activity, the course studio). */

/* headers */
.learn-crumbs{margin-bottom:20px;gap:8px;align-items:center}
.learn-crumbs span[aria-hidden]{color:var(--line-2)}
.learn-crumbs [aria-current]{color:var(--ink-2)}
.learn-head .h1{max-width:16ch}
.learn-head .row-end .btn-row{flex:none}
.learn-preview{margin-bottom:28px}
.learn-sec-s{padding-bottom:64px}

/* learner: courses */
.learn-my .card-h p{max-width:56ch}
.learn-my .mods{margin-top:6px}
.learn-prog12{margin:6px 0 10px}
.learn-prog12 i{height:8px}
.learn-soon-in{display:flex;gap:20px;align-items:flex-start}
.learn-glyph{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink-2)}
.learn-course-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);overflow:hidden;text-decoration:none;color:inherit}
.learn-cc-ph{min-height:260px;background:#3b2a1a}
.learn-cc-ph img{width:100%;height:100%;object-fit:cover}
.learn-cc-b{padding:28px}
.learn-cc-b .h3{margin:6px 0 10px}
@media (hover:hover){.learn-course-card:hover .btn.primary{background:var(--accent-hv)}}
.learn-rules{display:grid;gap:10px;margin-top:20px;font-size:15px}
.learn-rules li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.learn-rules .ic{margin-top:3px;color:var(--ink-2)}
.learn-fix .fx .t{min-width:0}
.learn-unit{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.learn-fxb{width:calc(100% + 28px);text-align:left;font:inherit;color:inherit;cursor:pointer}
@media (hover:hover){.learn-fxb:hover{background:var(--hover);box-shadow:none}}
.learn-tnotes ul{display:grid;gap:12px;font-size:14px;color:var(--ink-2);line-height:1.5}
.learn-tnotes li{padding-left:16px;position:relative}
.learn-tnotes li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.learn-mside .learn-rules{margin-top:0;font-size:14px}

/* video player */
.learn-player{cursor:pointer;box-shadow:var(--sh-card)}
.learn-player:focus-visible{box-shadow:var(--ring),var(--sh-card);border-radius:var(--r-card)}
.learn-player > img{transition:transform 9s linear}
.learn-player.is-playing > img{transform:scale(1.045)}
.learn-player .play{transition:opacity var(--t),transform var(--t-fast)}
.learn-player.is-playing .play{opacity:0;pointer-events:none}
.learn-player .bar{background:linear-gradient(0deg,rgba(10,8,4,.55),rgba(10,8,4,0))}
.learn-player .lp-time{white-space:nowrap;min-width:84px}
.learn-player .lp-speed{width:auto!important;min-width:40px;padding:0 8px;font-size:13px;font-weight:700}
.learn-player .scrub{cursor:pointer;touch-action:none}
.learn-player .scrub::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.learn-player .scrub:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.5);border-radius:2px}
.learn-player .scrub b{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(10,8,4,.6)}
.learn-player .cc[aria-pressed="false"]{opacity:.55}
.learn-player .caption{pointer-events:none}
.learn-player:fullscreen{border-radius:0}
.learn-vnote{display:flex;align-items:center;gap:6px;margin:12px 0 56px}
.learn-ch .fx .st{color:var(--ink-3)}
.learn-ch .fx.now{background:var(--inset)}
.learn-ch .fx.now .t{color:var(--accent)}
.learn-tx{padding:20px 14px 14px}
.learn-tx-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 10px 12px;border-bottom:1px solid var(--line)}
.learn-tx-list{padding-top:8px} /* no inner scroll: a 6-line window follows playback; the full transcript opens in place */
.learn-tx-f{padding:10px 10px 0;border-top:1px solid var(--line);margin-top:8px}
.rail .sticky:has(.learn-tx.is-open){position:static}
.learn-next{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media (max-width:720px){
  .learn-player .caption{font-size:13px;bottom:52px;max-width:90%}
  .learn-player .lp-time{min-width:0;font-size:12px}
  .learn-player .bar{gap:6px;padding:10px 10px}
  .learn-player .play{width:60px;height:60px}
  .learn-course-card{grid-template-columns:minmax(0,1fr)}
  .learn-cc-ph{min-height:180px;height:180px}
  .learn-cc-b{padding:20px 18px}
  .learn-soon-in{flex-direction:column;gap:14px}
}

/* plate activity (plain version) */
.learn-tray{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.learn-refuse,.learn-does{margin-top:12px}
.learn-slot .what b{font-weight:650}
.learn-slot.is-target{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.learn-slot.is-target + .fx{box-shadow:0 -1px 0 var(--line)}
.learn-slot .t.mute{color:var(--line-2)}
.learn-v{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink-2);font-weight:420}
.learn-v .ic{margin-top:1px;flex:none}
.learn-v.ok{color:var(--ok)}
.learn-kick{background:var(--night);color:var(--night-ink);box-shadow:none!important;margin-top:4px;margin-bottom:4px}
.learn-kick + .fx{box-shadow:none}
.learn-kick .what{color:var(--night-ink-2);font-weight:420}
.learn-kick .what b{color:var(--night-ink);font-weight:650}
.learn-kick .what small{color:var(--night-ink-2)}
.learn-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.learn-done .label{color:var(--ok)}
.learn-clock-card{border-radius:var(--r-hero);padding:40px 28px 24px;box-shadow:var(--sh-card)}
.learn-clock-card .clock{width:min(calc(100% - 60px),260px)}
.learn-clock-cap{margin-top:32px;font-size:14px;color:var(--night-ink-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.learn-clock-cap b{color:var(--night-ink);font-family:var(--display);font-stretch:80%;font-weight:800;font-size:17px}
.learn-plate-honest{margin-top:16px;line-height:1.5}
@media (max-width:1099px){ .learn-plate .rail{order:-1;padding-bottom:40px} .learn-clock-card{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:24px;padding:28px 24px} .learn-clock-card .clock{width:180px} .learn-clock-cap{margin:0;flex-direction:column} }
@media (max-width:720px){ .learn-tray{grid-template-columns:minmax(0,1fr)} .learn-clock-card{grid-template-columns:120px minmax(0,1fr);padding:22px 18px;gap:20px} .learn-clock-card .clock{width:104px} .learn-slot .end{grid-column:2} }

/* check-in */
.learn-quiz{padding:32px}
.learn-qprog{margin:0 0 22px}
.learn-qtop{margin-bottom:10px}
.learn-score .num{font-size:96px;line-height:.9;display:block;margin:10px 0 14px}
.learn-qsum{margin-top:22px}
.learn-qsum .lr{grid-template-columns:28px minmax(0,1fr) auto;align-items:start}
.learn-qsum .lr .t1 small{white-space:normal}
.learn-qn{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:20px;color:var(--ink-3);padding-top:1px}
.learn-qsum .st{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-2)}
.learn-qsum .st.ok{color:var(--ok)}
.learn-fin .fx{margin-top:20px}
@media (max-width:720px){ .learn-quiz{padding:22px 18px} .learn-score .num{font-size:72px} .quiz-q{font-size:26px} .learn-qsum .lr{grid-template-columns:24px minmax(0,1fr)} .learn-qsum .lr .end{grid-column:2} }

/* studio */
.learn-hist .lr{grid-template-columns:44px minmax(0,1fr)}
.learn-hist .lr .t1 small{white-space:normal}
.learn-v-n{font-size:20px}
.learn-warn{color:var(--warn);font-weight:600}
.learn-form{display:grid;gap:18px}
.learn-pend{display:grid;gap:8px;margin-top:10px;font-size:14px;color:var(--ink-2)}
.learn-pend li{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.learn-pend .ic{margin-top:2px;flex:none;color:var(--ink-3)}
.learn-reach{display:grid;margin-top:12px}
.learn-reach li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.learn-reach li span:last-child{color:var(--ink-2)}
.learn-blocks{padding:12px 28px}
.learn-blk{width:calc(100% + 28px)}
.learn-blk .end .ic{color:var(--ink-3)}
.learn-blk{text-align:left;font:inherit;color:inherit;cursor:pointer;background:none;border:0}
.learn-blk .what small .learn-warn{font-weight:600}
.learn-blk[aria-selected="true"]{background:var(--sel);box-shadow:none}
.learn-blk[aria-selected="true"] + .fx{box-shadow:none}
.learn-blk[aria-selected="true"] .day{color:var(--ink)}
.learn-ed{display:grid;gap:18px}
.learn-vid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center}
.learn-vthumb{position:relative;border-radius:var(--r-ctl);overflow:hidden;aspect-ratio:16/9;background:#2b2116}
.learn-vthumb img{width:100%;height:100%;object-fit:cover}
.learn-vthumb span{position:absolute;right:8px;bottom:8px;font-size:12px;font-weight:700;color:#fff;background:rgba(10,8,4,.7);padding:2px 6px;border-radius:4px}
.learn-caps{display:grid;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.learn-upbox:empty{display:none}
.learn-upbox{margin-top:4px}
.learn-actlist .lr .t1 small{white-space:normal}
.learn-resnote{display:flex;gap:8px;align-items:center}
.learn-drop{display:flex;align-items:center;gap:16px;margin-top:12px;padding:22px;border-radius:var(--r-panel);box-shadow:inset 0 0 0 1.5px var(--line-2);background:var(--field);cursor:pointer;color:var(--ink-2);transition:background-color var(--t-fast),box-shadow var(--t-fast)}
.learn-drop b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.learn-drop small{display:block;font-size:13px;color:var(--ink-3)}
@media (hover:hover){.learn-drop:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3)}}
.learn-drop:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink),var(--ring)}
.learn-drop.is-over{background:var(--sel);box-shadow:inset 0 0 0 2px var(--ink)}
.learn-qtabs{flex-wrap:wrap}
.learn-ans{border:0;display:grid;gap:10px;min-width:0}
.learn-ans legend{margin-bottom:8px}
.learn-ans-r{display:grid;grid-template-columns:auto minmax(0,1fr) 36px;align-items:center;gap:10px}
.learn-ans-r .radio{padding:0}
.learn-ans .btn.quiet{justify-self:start}
.learn-ord-ed li{padding-left:12px}
.learn-ord-ed .input{min-height:40px}
.learn-qprev .label{margin-bottom:8px}
.learn-qprev .quiz-why{margin-top:0}
.learn-filt{flex-wrap:wrap;gap:6px}
.learn-code{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--ink)}
.learn-inv{display:grid}
.learn-inv .lr .t1 small{white-space:normal}
.learn-why{margin-bottom:40px}
.learn-why p{max-width:96ch}
.tbl tfoot td{border-top:1px solid var(--line-2);border-bottom:0;font-weight:650;background:var(--card)}
.tbl tfoot td.n{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:15px}
.learn-libbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.learn-libq{width:280px}
.learn-libn .t1{display:block;font-size:15px;font-weight:560;line-height:1.3}
.learn-libn small{display:block;font-size:13px;font-weight:420;color:var(--ink-3);margin-top:2px}
.learn-kind{font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.learn-len{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:20px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.learn-len .learn-unit{font-size:12px}
.learn-cap{font-size:13px;color:var(--ink-2)}
a.learn-cap{text-decoration:underline;text-underline-offset:3px}
.learn-libk{width:84px}
.learn-libt{width:110px}
.learn-libempty{padding:16px}
.learn-libempty .empty{margin:0 auto}
@media (max-width:1099px){ .learn-vid{grid-template-columns:160px minmax(0,1fr)} }
@media (max-width:1099px){
  /* tables become stacked team-sheet rows below 1100 px */
  .tbl.learn-stack thead{display:none}
  .tbl.learn-stack,.tbl.learn-stack tbody,.tbl.learn-stack tfoot,.tbl.learn-stack tr{display:block;width:100%}
  .tbl.learn-stack tr{padding:12px 16px;border-bottom:1px solid var(--line)}
  .tbl.learn-stack td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:3px 0;white-space:normal;text-align:right;position:static}
  .tbl.learn-stack td::before{content:attr(data-l);font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-3);text-align:left;letter-spacing:0}
  .tbl.learn-stack td:first-child{display:block;text-align:left;padding-bottom:6px}
  .tbl.learn-stack td:first-child::before{content:none}
  .tbl.learn-stack tfoot td:not(:first-child){display:none}
  .tbl.learn-stack .bar{display:none}
}
@media (max-width:720px){
  .learn-blocks{padding:8px 18px}
  .learn-vid{grid-template-columns:minmax(0,1fr)}
  .learn-head .row-end .btn-row{width:100%}
  .learn-head .row-end .btn-row .btn{flex:1}
  .learn-libq{width:100%}
  .learn-ans-r{grid-template-columns:auto minmax(0,1fr) 36px}
}
.learn-quiz .opt.again .k{background:none;color:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--ink-3)}

/* ==== R1 · round 1 fixes ==== */
/* plate (plain): 48 px title, 13 px chips */
.learn-plate-head .h1{font-size:48px;line-height:.92;max-width:none}
.learn-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.learn-chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);white-space:nowrap}
/* finished activity: sort groups */
.learn-done-sum .label{color:var(--ok)}
.learn-done-sum .label.learn-preview-l{color:var(--ink-2)}
.learn-sort{display:grid;grid-template-columns:repeat(var(--g,3),minmax(0,1fr));gap:16px}
.learn-grp{padding:22px 20px}
.learn-grp-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.learn-grp-h .num{font-size:26px;color:var(--ink-3)}
.learn-grp > .small{margin-top:2px}
.learn-cards{display:grid;margin-top:14px}
.learn-card{padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.35}
.learn-card b{font-weight:600;display:block}
.learn-card small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.learn-card.move b{color:var(--ink-2)}
.learn-actsort .fx{grid-template-columns:110px minmax(0,1fr) auto}
.learn-actsort .fx .t{display:none}
/* check-in: answers, saved answers, preview switch */
.learn-qa{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:14px;font-weight:420;color:var(--ink-2);line-height:1.4}
.learn-qa b{font-weight:600;color:var(--ink)}
.learn-qa .ic,.learn-qa .ic-sp{flex:none;width:14px;height:14px;margin-top:3px}
.learn-qa.ok,.learn-qa.ok .ic{color:var(--ok)}
.learn-qsum .lr .t1 small{margin-top:6px}
.learn-score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.learn-score-u{font-size:15px;color:var(--ink-2)}
.learn-kseg{margin-bottom:22px}
.learn-kseg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh-card)}
.learn-nextc .btn{width:100%;justify-content:center}
/* results: inverted module cells (as #/school/reports) */
.learn-rc{padding-left:6px!important;padding-right:6px!important}
.learn-rcell{display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 8px;border-radius:var(--r-chip);font-family:var(--display);font-stretch:80%;font-weight:800;font-size:15px;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line);font-variant-numeric:tabular-nums}
.learn-rcell.d{background:var(--ink);color:var(--field);box-shadow:none}
.learn-rcell.n{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.learn-rcell.t{box-shadow:none;background:var(--inset)}
.learn-of{font-size:13px;color:var(--ink-3);font-weight:420;font-family:var(--ui);white-space:nowrap}
#res-q .end{gap:10px}
.learn-invr{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:1099px){ .learn-sort{grid-template-columns:minmax(0,1fr)} }
@media (max-width:720px){
  .learn-plate-head .h1{font-size:44px}
  .learn-kseg{width:100%} .learn-kseg button{flex:1}
  .learn-libk,.learn-libt{width:auto}
  #lib-tbl tr{display:grid!important;grid-template-columns:72px minmax(0,1fr);column-gap:12px}
  #lib-tbl td{grid-column:1 / -1}
  #lib-tbl td.learn-libk{grid-column:1;grid-row:1;display:block;padding:0}
  #lib-tbl td.learn-libt{grid-column:1;grid-row:2;display:block;text-align:left}
  #lib-tbl td.learn-libn{grid-column:2;grid-row:1 / span 2;display:block;text-align:left}
  #lib-tbl td.learn-libk::before,#lib-tbl td.learn-libt::before,#lib-tbl td.learn-libn::before{content:none}
  .learn-actsort .fx{grid-template-columns:84px minmax(0,1fr)}
  #res-q .end{grid-column:2;justify-content:flex-start}
}
@media (max-width:1099px){ .learn .rail .learn-nextc,.learn .rail .learn-tnotes{margin-top:28px} }
/* no-scroll · tablet: stacked rows lay their facts out in a wrapped line of label/value pairs */
@media (min-width:721px) and (max-width:1099px){
  .tbl.learn-stack tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 24px}
  .tbl.learn-stack td{justify-content:flex-start;text-align:left}
  .tbl.learn-stack td:first-child{grid-column:1 / -1}
  .tbl.learn-stack tfoot tr{display:block}
}
