/* ---- Multiple choice mode (Governance): her multiple choice in runs of five.
   Plain: one column, the app's tokens, fades only ---- */
body.labmode #labcol { display: flex; }
body.labmode { overflow: hidden; }
body.labmode .app { display: none; }
body.labmode #openTasks { display: none !important; }
.labwrap { flex: 1; position: relative; min-height: 0; }
.labrun { position: absolute; inset: 0; overflow-y: auto; padding: 8px 16px 40px;
  max-width: 620px; margin: 0 auto; display: grid; align-content: start; gap: 14px; }
.labmuted { color: var(--dim); font-size: 13px; margin: 0; }

.labbig { font: 600 52px/1 Geist, Inter, system-ui, sans-serif; color: var(--text); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.labplay { min-height: 50px; border: 0; border-radius: 14px; background: var(--accent); color: #0c0b0f;
  font: 600 16px/1 Geist, Inter, system-ui, sans-serif; cursor: pointer; }

/* the run */
.labbar { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.labpips { flex: 1; display: flex; gap: 3px; }
.labpips i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.09); transition: background .2s; }
.labpips i.re { flex: .6; }
.labpips i.on { background: var(--accent); }
.labpips i.ok { background: var(--green); } .labpips i.no { background: var(--red); } .labpips i.sk { background: var(--dim); }
.labg { font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--accent); font-variant-numeric: tabular-nums; }
.labcard { display: grid; gap: 12px; animation: labin .22s ease both; }
@keyframes labin { from { opacity: 0; } to { opacity: 1; } }
.labsrc { font: 500 11px/1.3 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--dim); text-transform: uppercase; }
.labstem { margin: 0; font: 500 16.5px/1.5 Geist, Inter, system-ui, sans-serif; color: var(--text); }
.labopts { display: grid; gap: 8px; }
.labrow { position: relative; border-radius: 12px; overflow: hidden; }
.labbehind { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 16px;
  background: color-mix(in srgb, var(--amber) 20%, var(--panel)); color: var(--amber);
  font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; opacity: 0; }
.labopt { position: relative; width: 100%; display: grid; grid-template-columns: 20px 1fr; gap: 10px; text-align: left;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  font: 400 14px/1.5 Geist, Inter, system-ui, sans-serif; cursor: pointer; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, opacity .3s ease, border-color .3s ease; }
.labopt:disabled { cursor: default; }
.labopt .k { font: 600 12px/1.9 "JetBrains Mono", ui-monospace, monospace; color: var(--dim); }
.labopt .b { min-width: 0; }
.labopt .b .dim { opacity: .45; }
.labopt .b b.w { color: #f4f1fb; font-weight: 700; }
.labopt .b b.r { color: #f0938e; font-weight: 700; }
.labopt.right { border-color: color-mix(in srgb, var(--green) 65%, transparent); }
.labopt.wrong { border-color: color-mix(in srgb, var(--red) 65%, transparent); }
.labopt.faded { opacity: .35; }
.labtag { position: absolute; top: 8px; right: 10px; font: 500 10px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.labact { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.labskip { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: none;
  color: var(--dim2); cursor: pointer; font: 500 13px/1 Geist, Inter, system-ui, sans-serif; }
.labafter { display: grid; gap: 10px; opacity: 0; transition: opacity .25s ease; }
.labafter.on { opacity: 1; }
.labarrows { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 14px; font-weight: 700; color: #f4f1fb; }
.labarrows .q { color: #c9bcf2; }
.labarrows i { font-style: normal; font-weight: 400; color: var(--dim); }
.labexpl { margin: 0; font-size: 13px; color: var(--dim2); line-height: 1.5; }
.labnext { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.labnext b { font: 600 14.5px/1.2 Geist, Inter, system-ui, sans-serif; }
.labnext b.ok { color: var(--green); } .labnext b.no { color: var(--red); } .labnext b.sk { color: var(--dim2); }
.labgo { min-height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--accent); color: #0c0b0f;
  font: 600 14px/1 Geist, Inter, system-ui, sans-serif; cursor: pointer; }

/* end of a run */
.labend { display: grid; gap: 10px; justify-items: start; padding-top: 16px; animation: labin .25s ease both; }
.labend .labplay { justify-self: stretch; margin-top: 8px; }
.labdelta { font: 600 18px/1 "JetBrains Mono", ui-monospace, monospace; }
.labdelta.up { color: var(--green); } .labdelta.down { color: var(--dim2); }
.labcross { margin: 0; color: var(--amber); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .labcard, .labend { animation: none; }
  .labafter, .labopt { transition: none; }
}
.labopt:has(.labtag) .b { padding-right: 44px; }
/* its card on Learn's Progress (Governance): the grade on a 1 to 10 line */
.lablearn { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--lsurf, var(--panel)); }
.labghead { display: flex; justify-content: space-between; align-items: baseline; }
.labtoday { font: 600 12.5px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--dim2); }
.labtoday.up { color: var(--green); }
.labgrow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.lablg { font: 600 34px/1 Geist, Inter, system-ui, sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
.labgo2 { font-size: 13px; color: var(--dim2); }
.labgo2 b { color: var(--text); font-weight: 600; }
.labscale { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); margin-top: 4px; }
.labscale i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--accent); transition: width .6s ease; }
.labscale b { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.labscale b em { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font: 500 10.5px/1 "JetBrains Mono", ui-monospace, monospace;
  font-style: normal; color: var(--dim2); }
.labscalek { position: relative; height: 14px; font: 500 11px/14px "JetBrains Mono", ui-monospace, monospace; color: var(--dim); }
.labscalek span { position: absolute; top: 0; }
.labscalek span:first-child { left: 0; } .labscalek span:last-child { right: 0; }
.labscalek span:nth-child(2) { transform: translateX(-50%); color: var(--dim2); }
.labwhy { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--dim2); }
.labwhy b { color: var(--text); font-weight: 600; }
.labgo3 { display: flex; gap: 8px; align-items: stretch; margin-top: 2px; }
.lablearn .labplay { flex: 1; display: grid; gap: 2px; place-items: center; min-height: 0; padding: 8px 12px;
  color: #0c0b0f; min-width: 0; }
.lablearn .labplay small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* the run size: 5, 10 or 20 questions */
.labsizes { display: flex; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.labsizes button { width: 40px; border: 0; background: none; color: var(--dim2); cursor: pointer;
  font: 600 13px/1 "JetBrains Mono", ui-monospace, monospace; }
.labsizes button + button { border-left: 1px solid var(--border); }
.labsizes button.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
.labplay small { font: 500 12px/1.2 Geist, Inter, system-ui, sans-serif; opacity: .7; }
/* a tile in Multiple choice mode: the rank on top, the lecture's number by its name */
.lptile.lpmc .no { color: var(--dim2); }
.lptile.lpmc.here .no { color: var(--accent); }
.lptile.lpmc .t { height: 2.5em; color: var(--text); font-weight: 500; overflow-wrap: normal; hyphens: manual; }
.lptile.lpmc { gap: 3px; padding: 7px 9px 8px; }
.lptile.lpmc .t { font-size: 12.5px; line-height: 1.2; height: 2.4em; }
.lptile.lpmc .st { color: var(--dim); }
/* the bottom row in Multiple choice mode: three small buttons */
.lpgrid.lpgrid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.lpgrid3 .lpbtn { min-height: 0; padding: 6px 10px; gap: 6px; }
.lpgrid3 .lpbtn .t { font-size: 13px; }
.lpgrid3 .lpbtn .s { font-size: 11.5px; }
/* a short phone: the same Progress, tighter, so it still fits one screen */
@media (max-height: 720px) {
  .lpwrap:has(.lablearn) { gap: 8px; }
  .lpwrap:has(.lablearn) .lptiles { gap: 5px; }
  .lablearn { gap: 4px; padding: 10px 12px; }
  .lablg { font-size: 28px; }
  .lablearn .labplay { padding: 9px 16px; }
  .lablearn .labplay small { display: none; }
  .lptile.lpmc { padding: 6px 9px 7px; }
}
/* in Multiple choice mode the bottom row follows the card, no gap above it */
.lpwrap:has(.lablearn) > .lpbottom { margin-top: 0; padding-top: 0; }
/* the tiles take the screen's spare height (a tall phone gets taller tiles,
   no gap), each with its known count by its bar */
.lpwrap:has(.lablearn) > .lpmcgrid { grid-auto-rows: 1fr; }
/* Play and the bottom row rest at the bottom, where the thumb is */
.lpwrap > .lablearn { margin-top: auto; }
.lptile.lpmc .bars { align-items: center; gap: 6px; }
.lptile.lpmc .bars .o { flex: 1; }
.lptile.lpmc .bars em { font: 500 10.5px/1 "JetBrains Mono", ui-monospace, monospace; font-style: normal;
  color: var(--dim); font-variant-numeric: tabular-nums; }
/* the Read card under a missed answer */
.labread { display: grid; gap: 8px; padding: 12px 14px 14px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--border); }
.labread h4 { margin: 0; font: 600 15px/1.3 Geist, Inter, system-ui, sans-serif; color: var(--text); }
.labread .rkdiag { gap: 14px; }
/* the projection as one small line over Play */
.lablearn { gap: 10px; padding: 12px; }
.labmini { display: flex; align-items: center; gap: 10px; padding: 0 2px;
  font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--dim2); font-variant-numeric: tabular-nums; }
.labmg { color: var(--text); font-weight: 600; }
.labmini .labscale { flex: 1; height: 4px; margin: 0; }
.labmini .labscale b { top: -3px; height: 10px; }
.labmt b { font-weight: 600; color: var(--dim2); } .labmt b.up { color: var(--green); }
.lablearn .labplay { min-height: 48px; padding: 0 16px; font-size: 16px; }
/* Test yourself: a row over Play, its last estimate, the sizes */
.labtest { display: flex; align-items: center; gap: 10px; }
.labtest .t { flex: 1; min-width: 0; display: grid; gap: 2px; font: 600 14px/1.2 Geist, Inter, system-ui, sans-serif; color: var(--text); }
.labtest small { font: 400 12px/1.3 Geist, Inter, system-ui, sans-serif; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labtest small b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.labtest .labsizes { height: 38px; }
.labtest .labsizes button.wide { width: auto; padding: 0 14px; font-family: Geist, Inter, system-ui, sans-serif; }
.labend .up { color: var(--green); }
/* the Test yourself row: a button to its sheet, the last estimate on the right */
button.labtest { width: 100%; border: 0; background: none; padding: 2px 2px 0; text-align: left; cursor: pointer; color: var(--text); }
.labtest .chev { color: var(--dim); flex-shrink: 0; }
.labtg { font: 600 18px/1 Geist, Inter, system-ui, sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
.labtg.ok { color: var(--green); }
.labtrend { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 10px; font-size: 13px; color: var(--dim2); }
.labtrend .k { flex-shrink: 0; color: var(--dim); }
.labtrend .v { flex: 1; min-width: 0; font: 500 12.5px/1.4 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.labtrend b { font: 600 12.5px "JetBrains Mono", ui-monospace, monospace; color: var(--dim2); }
.labtrend b.up { color: var(--green); } .labtrend b.dn { color: var(--red); }
/* a test's end: each lecture's right over asked */
.labby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; width: 100%; margin: 4px 0 6px; }
.labby div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--dim2);
  border-bottom: 1px solid var(--border); padding: 5px 0; }
.labby div b { font: 600 12px/1.5 "JetBrains Mono", ui-monospace, monospace; color: var(--text); }
.labby div.miss b { color: var(--red); }
/* Test yourself and Play: two separate buttons, no shared card */
.lpwrap > .lablearn { background: none; padding: 0; gap: 8px; }
button.labtest { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
button.labtest:hover { border-color: var(--hodb, var(--border)); }
/* Practice full width; Test yourself with its sizes beside it */
.lablearn > .labplay { min-height: 50px; font-size: 16px; }
.labtestrow { display: flex; gap: 8px; align-items: stretch; }
.labtestrow button.labtest { flex: 1; min-width: 0; }
.labtestrow .labsizes { height: auto; }
.labtest small b { font-weight: 600; color: var(--text); } .labtest small b.ok { color: var(--green); }
.lablearn > .labplay { display: grid; gap: 3px; place-items: center; padding: 8px 14px; }
.lablearn > .labplay small { font: 500 12px/1.25 Geist, Inter, system-ui, sans-serif; opacity: .72; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.labtestrow .labtest small { white-space: normal; }
/* ---- Progress's buttons in Multiple choice mode: one set of sizes,
   shapes and states (Practice, Test yourself with its sizes, the bottom
   row). Hover only where there is a pointer, a small press everywhere, a
   focus ring for the keyboard. A wide screen gets them a size up. ---- */
.lpwrap:has(.lablearn) {
  --mcb-h: 52px; --mcb-r: 14px; --mcb-t: 14px; --mcb-s: 12px; --mcb-seg: 44px; }
.lpwrap:has(.lablearn) :is(.labplay, button.labtest, .labsizes, .lpgrid3 .lpbtn) {
  border-radius: var(--mcb-r); }
.lpwrap:has(.lablearn) :is(.labplay, button.labtest, .labsizes button, .lpgrid3 .lpbtn) {
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent; }
.lpwrap:has(.lablearn) :is(.labplay, button.labtest, .labsizes button, .lpgrid3 .lpbtn):active {
  transform: scale(.98); }
.lpwrap:has(.lablearn) :is(.labplay, button.labtest, .labsizes button, .lpgrid3 .lpbtn):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.lpwrap:has(.lablearn) .labsizes button:focus-visible { outline-offset: -3px; border-radius: 10px; }
/* Practice: the one filled button */
.lpwrap:has(.lablearn) .lablearn > .labplay { min-height: calc(var(--mcb-h) + 4px); font-size: 16px; }
/* Test yourself and its sizes share a height */
.lpwrap:has(.lablearn) button.labtest { min-height: var(--mcb-h); padding: 8px 14px; }
.lpwrap:has(.lablearn) .labtest .t { font-size: var(--mcb-t); }
.lpwrap:has(.lablearn) .labtestrow .labtest small { font-size: var(--mcb-s); white-space: nowrap; }
.lpwrap:has(.lablearn) .labsizes { background: var(--panel); }
.lpwrap:has(.lablearn) .labsizes button { width: var(--mcb-seg); color: var(--text); }
.lpwrap:has(.lablearn) .labsizes button.wide { width: auto; }
/* the bottom row: the same height and type as Test yourself */
/* (on a phone a third of the width: a size down, so the names fit whole) */
.lpwrap:has(.lablearn) .lpgrid3 .lpbtn { min-height: var(--mcb-h); padding: 8px 10px; gap: 6px; }
.lpwrap:has(.lablearn) .lpgrid3 .lpbtn .t { font-size: var(--mcb-t3, 13px); font-weight: 600; }
.lpwrap:has(.lablearn) .lpgrid3 .lpbtn .s { font-size: var(--mcb-s); }
@media (hover: hover) {
  .lpwrap:has(.lablearn) .lablearn > .labplay:hover {
    background: color-mix(in srgb, var(--accent) 88%, white); }
  .lpwrap:has(.lablearn) :is(button.labtest, .lpgrid3 .lpbtn):hover {
    border-color: var(--hodb); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
  .lpwrap:has(.lablearn) .labsizes:hover { border-color: var(--hodb); }
  .lpwrap:has(.lablearn) .labsizes button:hover {
    background: color-mix(in srgb, var(--accent) 14%, transparent); }
}
@media (min-width: 900px) {
  .lpwrap:has(.lablearn) {
    --mcb-h: 60px; --mcb-t: 15px; --mcb-t3: 15px; --mcb-s: 13px; --mcb-seg: 60px; }
  .lpwrap:has(.lablearn) .lpgrid3 .lpbtn { padding: 8px 14px; }
  .lpwrap:has(.lablearn) .lablearn > .labplay { font-size: 17px; }
  .lpwrap:has(.lablearn) .lablearn > .labplay small { font-size: 13px; }
  .lpwrap:has(.lablearn) .labsizes button { font-size: 14px; }
  .lpwrap:has(.lablearn) .lablearn { gap: 10px; }
  .lpwrap:has(.lablearn) .lpgrid3 { gap: 10px; }
}
/* a desktop: no thumb to reach for, so the buttons follow the tiles and
   the whole page sits in the middle of the screen, not split top and
   bottom with an empty band between */
@media (min-width: 900px) and (hover: hover) {
  .lpwrap:has(.lablearn) { justify-content: center; gap: 10px; padding-block: 24px; }
  .lpwrap:has(.lablearn) > .lptop { margin-bottom: 4px; }
  .lpwrap:has(.lablearn) > .lpmcgrid { gap: 10px; }
  .lpwrap:has(.lablearn) > .lablearn { margin-top: 22px; }
  .lpwrap:has(.lablearn) > .lpbottom { margin-top: 0; padding-top: 0; }
}
/* a narrow phone (under 390px): the bottom row and the sizes a step tighter */
@media (max-width: 389px) {
  .lpwrap:has(.lablearn) { --mcb-t3: 12.5px; --mcb-s: 11.5px; --mcb-seg: 38px; }
  .lpwrap:has(.lablearn) .lpgrid3 { gap: 6px; }
  .lpwrap:has(.lablearn) .lpgrid3 .lpbtn { padding: 8px 8px; gap: 4px; }
  .lpwrap:has(.lablearn) button.labtest { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lpwrap:has(.lablearn) :is(.labplay, button.labtest, .labsizes button, .lpgrid3 .lpbtn):active { transform: none; }
}
/* ---- one Test yourself button (to its sheet, where the size is
   picked), and the open questions mode's Continue drawn as Practice ---- */
.lpwrap:has(.lablearn) .lablearn > button.labtest { width: 100%; }
.lpwrap:has(.lablearn) button.labtest .chev { color: var(--dim2); }
/* the bottom grid in threes; a row of two splits in halves, one alone
   takes the row */
.lpgrid.lpgrid6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lpgrid6 > * { grid-column: span 2; }
.lpgrid6 > :nth-child(3n+1):nth-last-child(2), .lpgrid6 > :nth-child(3n+1):nth-last-child(2) + * { grid-column: span 3; }
.lpgrid6 > :nth-child(3n+1):last-child { grid-column: span 6; }
.lpwrap:has(.lablearn) .lpgrid6 { row-gap: 7px; }
@media (min-width: 900px) { .lpwrap:has(.lablearn) .lpgrid6 { row-gap: 10px; } }
/* Test yourself's sheet: the three sizes as equal buttons, 30 (the
   exam's own count) filled */
.labpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 10px; }
.labpick button { display: grid; gap: 4px; place-items: center; min-height: 72px; padding: 10px 6px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--panel); color: var(--text);
  cursor: pointer; transition: transform .12s ease, background-color .15s ease, border-color .15s ease; }
.labpick b { font: 600 22px/1 Geist, Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.labpick span { font: 500 12px/1.2 Geist, Inter, system-ui, sans-serif; color: var(--dim2); }
.labpick button.exam { background: var(--accent); border-color: var(--accent); color: #0c0b0f; }
.labpick button.exam span { color: #0c0b0f; opacity: .7; }
.labpick button:active { transform: scale(.98); }
.labpick button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .labpick button:not(.exam):hover { border-color: var(--hodb); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
  .labpick button.exam:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
}
.labpick.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lpacts:empty { display: none; }
/* ---- Progress's two big buttons, side by side at one height: the way
   on (Practice, Continue) in lilac, filled; Test yourself lilac-tinted.
   Each: an icon and its name, what it does, its numbers ---- */
.lpduo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lpduo > :only-child { grid-column: span 2; }
.lpduob { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
  min-height: 104px; padding: 12px 14px 12px; border-radius: 16px; text-align: left; cursor: pointer;
  font-family: Geist, Inter, system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease; }
.lpduob .h { display: flex; align-items: center; gap: 8px; }
.lpduob .ic { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; }
.lpduob .t { font: 600 16px/1.2 Geist, Inter, system-ui, sans-serif; }
.lpduob .d { font: 400 12.5px/1.35 Geist, Inter, system-ui, sans-serif; }
.lpduob .m { margin-top: auto; padding-top: 4px; max-width: 100%; font: 600 12.5px/1.3 Geist, Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpduob .m b { font-weight: 700; }
.lpduob.play { border: 1px solid var(--accent); background: var(--accent); color: #0c0b0f; }
.lpduob.play .ic { background: rgba(12,11,15,.12); }
.lpduob.play .d { color: rgba(12,11,15,.72); }
.lpduob.play .m { color: rgba(12,11,15,.82); }
.lpduob.test { border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel)); color: var(--text); }
.lpduob.test .ic { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent2); }
.lpduob.test .t { color: var(--text); }
.lpduob.test .d { color: var(--dim2); }
.lpduob.test .m { color: var(--accent2); }
.lpduob.test .m b { color: var(--text); }
.lpduob:active { transform: scale(.98); }
.lpduob:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .lpduob.play:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
  .lpduob.test:hover { background: color-mix(in srgb, var(--accent) 14%, var(--panel));
    border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
}
@media (min-width: 900px) {
  .lpduo { gap: 10px; }
  .lpduob { min-height: 116px; padding: 14px 16px; }
  .lpduob .t { font-size: 17px; }
  .lpduob .d { font-size: 13.5px; }
  .lpduob .m { font-size: 12.5px; }
}
/* a short phone: what each does goes, the name and numbers stay */
@media (max-height: 720px) {
  .lpduob { min-height: 0; padding: 10px 12px; }
  .lpduob .d { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lpduob:active { transform: none; } }
/* ---- the run, calmer: a soft pill for the lecture, the question a size
   up, answers as rounded cards with a letter badge (a list answer as its
   lines), soft fills for right and wrong, an unhurried rise per card ---- */
.labrun { gap: 16px; padding-top: 4px; }
.labbar { min-height: 36px; gap: 12px; }
.labpips { gap: 4px; }
.labpips i { height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); transition: background .3s ease; }
.labg { font: 500 12.5px/1 Geist, Inter, system-ui, sans-serif; color: var(--dim2); white-space: nowrap; }
.labcard { gap: 14px; animation: labrise .35s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes labrise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.labsrcs { display: flex; flex-wrap: wrap; gap: 6px; }
.labsrc { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent2);
  font: 500 12px/1.2 Geist, Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.labsrc.tag { background: color-mix(in srgb, var(--amber) 13%, transparent); color: var(--amber); }
.labstem { font: 500 18px/1.45 Geist, Inter, system-ui, sans-serif; letter-spacing: -.005em; text-wrap: pretty; }
.labopts { gap: 10px; }
.labrow { border-radius: 16px; }
.labopt { grid-template-columns: 28px 1fr; gap: 12px; padding: 13px 16px 13px 12px; border-radius: 16px;
  background: color-mix(in srgb, white 2.5%, var(--panel)); border: 1px solid rgba(255,255,255,.055);
  font: 400 15px/1.5 Geist, Inter, system-ui, sans-serif;
  transition: transform .25s ease, opacity .35s ease, border-color .3s ease, background-color .3s ease; }
.labopt .k { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; align-self: start;
  background: rgba(255,255,255,.06); color: var(--dim2); font: 600 12.5px/1 Geist, Inter, system-ui, sans-serif;
  transition: background-color .3s ease, color .3s ease; }
.labopt .b { padding-top: 2px; }
.labopt:not(:disabled):active { transform: scale(.99); }
.labopt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .labopt:not(:disabled):hover { border-color: var(--hodb); } }
.labopt.right { background: color-mix(in srgb, var(--green) 11%, var(--panel)); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.labopt.right .k { background: var(--green); color: #0c0b0f; }
.labopt.wrong { background: color-mix(in srgb, var(--red) 9%, var(--panel)); border-color: color-mix(in srgb, var(--red) 42%, transparent); }
.labopt.wrong .k { background: var(--red); color: #0c0b0f; }
.labopt.faded { opacity: .38; }
.labopt .b b.w { color: #f4f1fb; }
.labopt .b .dim { opacity: .5; }
.labtag { top: 10px; right: 12px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 15%, transparent);
  font: 600 10.5px/1 Geist, Inter, system-ui, sans-serif; letter-spacing: .02em; text-transform: none; }
.labbehind { border-radius: 16px; font: 600 12.5px/1 Geist, Inter, system-ui, sans-serif; letter-spacing: .02em; text-transform: none; }
.labact { padding-top: 2px; }
.labhint { display: inline-flex; align-items: center; gap: 7px; color: var(--dim); font-size: 12.5px; }
.labskip { min-height: 40px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--panel2); color: var(--text);
  font: 500 13.5px/1 Geist, Inter, system-ui, sans-serif; transition: transform .12s ease, background-color .15s ease; }
.labskip:active { transform: scale(.97); }
@media (hover: hover) { .labskip:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel2)); } }
.labafter { gap: 12px; transition: opacity .35s ease; }
.labarrows { padding: 10px 14px; border-radius: 14px; background: var(--panel); font-size: 14px; font-weight: 600; gap: 4px 9px; }
.labexpl { font-size: 14px; line-height: 1.6; color: var(--dim2); padding: 0 2px; }
.labnext b { justify-self: start; padding: 7px 12px; border-radius: 999px; font: 600 13.5px/1 Geist, Inter, system-ui, sans-serif; }
.labnext b.ok { background: color-mix(in srgb, var(--green) 15%, transparent); }
.labnext b.no { background: color-mix(in srgb, var(--red) 14%, transparent); }
.labnext b.sk { background: rgba(255,255,255,.06); }
.labgo { min-height: 46px; padding: 0 24px; border-radius: 14px; font-size: 15px; transition: transform .12s ease, background-color .15s ease; }
.labgo:active { transform: scale(.97); }
@media (hover: hover) { .labgo:hover { background: color-mix(in srgb, var(--accent) 88%, white); } }
.labread { border-radius: 16px; border-color: rgba(255,255,255,.06); }
@media (prefers-reduced-motion: reduce) {
  .labcard { animation: none; }
  .labopt:not(:disabled):active, .labskip:active, .labgo:active { transform: none; }
}
/* four small buttons: two rows of two */
.lpgrid6 > :first-child:nth-last-child(4), .lpgrid6 > :first-child:nth-last-child(4) ~ * { grid-column: span 3; }
/* Test yourself's Past exams tab: a card per exam, its Start on the right */
.lppapers { display: grid; gap: 8px; margin: 4px 0 10px; }
.lppaper { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border); }
.lppaper.open { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.lppaper .tt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.lppaper .t { font: 600 14.5px/1.25 Geist, Inter, system-ui, sans-serif; color: var(--text); }
.lppaper .s { font: 400 12.5px/1.3 Geist, Inter, system-ui, sans-serif; color: var(--dim2); }
.lppaper .acts { display: flex; gap: 6px; flex-shrink: 0; }
.lppaper .lpgo { min-height: 38px; padding: 0 16px; flex: none; }
/* three tabs in Test yourself: the names alone, so none wraps to four lines */
.lptabs:has(> :nth-child(3)) small { display: none; }
.lptabs:has(> :nth-child(3)) > button { min-height: 44px; }
/* a past exam's last grade: a small mark, green from a pass */
.lpgrade { display: inline-block; vertical-align: 1px; margin-left: 8px; padding: 3px 7px; border-radius: 8px;
  font: 700 12.5px/1 Geist, Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.lplink { border: 0; background: none; padding: 0; color: var(--accent2); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }
.lpgrade.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.lpgrade.no { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.lpduob.test .m b.ok { color: var(--green); } .lpduob.test .m b.no { color: var(--red); }
/* ---- a run's end: one calm card in the middle, the score, a bar of
   right, wrong and skipped, the way on, and the way back ---- */
.labrun:has(> .labend) { align-content: center; min-height: 100%; }
.labend { justify-items: center; text-align: center; gap: 12px; padding: 28px 20px 22px; margin: 0 auto;
  width: min(100%, 420px); border-radius: 20px; background: var(--panel); border: 1px solid rgba(255,255,255,.055);
  animation: labrise .35s cubic-bezier(.16, 1, .3, 1) both; }
.labend .labbig { font-size: 56px; }
.labendbar { display: flex; gap: 3px; width: 100%; height: 8px; }
.labendbar i { border-radius: 4px; }
.labendbar .ok { background: var(--green); } .labendbar .no { background: var(--red); } .labendbar .sk { background: rgba(255,255,255,.14); }
.labtally { margin: 0; font-size: 13.5px; color: var(--dim2); }
.labtally .ok { color: var(--green); } .labtally .no { color: var(--red); }
.labend .labmuted { font-size: 13px; }
.labend .labplay { width: 100%; justify-self: stretch; margin-top: 6px; min-height: 50px; border-radius: 14px; }
.labback { min-height: 40px; padding: 0 14px; border: 0; background: none; color: var(--dim2); cursor: pointer;
  font: 500 14px/1 Geist, Inter, system-ui, sans-serif; border-radius: 10px; }
@media (hover: hover) { .labback:hover { color: var(--text); background: rgba(255,255,255,.04); } }
.labend .labby { text-align: left; }
#learnhomebtn.hidden { display: none; }
/* a list answer's shared lead, quiet; what differs per option, bright */
/* the question in the open questions' serif and colour (trainers.css .mcstem) */
.labstem { font: 400 17px/1.55 Literata, "Source Serif 4", Georgia, serif; color: var(--lstem); letter-spacing: 0; }
/* the card under a missed answer: a quiet "From the Read cards" label */
.labread::before { content: "From the Read cards"; font: 600 12px/1.2 Geist, Inter, system-ui, sans-serif; color: var(--accent2); }
.labread h4 { font: 600 16px/1.3 Geist, Inter, system-ui, sans-serif; }
.labread { gap: 10px; padding: 14px 16px 16px; border-radius: 16px; }
.lppaper.new { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
/* ---- the run, quieter (2026-10-16): the lecture as a small line over the
   question, pips in one muted tone with the current one lilac, answers as
   outlined cards with an outlined letter, Skip a quiet ghost button, the
   keys named on desktop ---- */
.labpips i { flex: 1; }
.labpips i.re { flex: 1; }
.labpips i.ok, .labpips i.sk { background: rgba(255,255,255,.26); }
.labpips i.no { background: color-mix(in srgb, var(--red) 55%, var(--panel)); }
.labcard { gap: 16px; }
.labsrcs { gap: 0; align-items: baseline; }
.labsrc { padding: 0; background: none; color: var(--dim); font: 500 12.5px/1.4 Geist, Inter, system-ui, sans-serif; }
.labsrc.tag { background: none; color: var(--accent2); }
.labsrc.tag::before { content: "·"; margin: 0 8px; color: var(--dim); }
.labstem { font-size: 18px; line-height: 1.55; text-wrap: pretty; margin-bottom: 4px; }
.labopts { gap: 8px; }
.labopt { background: transparent; border: 1px solid rgba(255,255,255,.075); border-radius: 14px;
  padding: 14px 18px 14px 14px; gap: 14px; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--text) 88%, transparent); }
.labopt .k { width: 26px; height: 26px; background: none; border: 1px solid rgba(255,255,255,.14);
  color: var(--dim2); font-size: 12px; }
.labopt .b { padding-top: 1px; }
@media (hover: hover) {
  .labopt:not(:disabled):hover { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.14); color: var(--text); }
  .labopt:not(:disabled):hover .k { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent2); }
}
.labopt.right .k, .labopt.wrong .k { border-color: transparent; }
.labact { padding-top: 6px; }
.labhint { font-size: 12.5px; color: var(--dim); }
.labhint .keys { display: none; }
.labhint kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.12); font: 600 10.5px/1 Geist, Inter, system-ui, sans-serif; color: var(--dim2); }
@media (hover: hover) and (pointer: fine) {
  .labhint .touch { display: none; }
  .labhint .keys { display: inline; }
}
.labskip { min-height: 38px; padding: 0 16px; border-radius: 12px; background: none; border: 1px solid rgba(255,255,255,.1);
  color: var(--dim2); }
@media (hover: hover) { .labskip:hover { background: rgba(255,255,255,.04); color: var(--text); } }
@media (min-width: 900px) {
  .labrun { padding-top: clamp(8px, 5vh, 56px); gap: 22px; }
  .labstem { font-size: 20px; }
  .labopt { font-size: 15.5px; padding: 15px 20px 15px 16px; }
}
.labrow, .labbehind { border-radius: 14px; }
.labbehind[style*="opacity: 0"], .labbehind:not([style]) { visibility: hidden; }
/* the tag after the lecture: a small lilac dot instead of a separator, so a wrap reads clean */
.labsrcs { gap: 2px 14px; align-items: center; }
.labsrc.tag::before { content: ""; width: 5px; height: 5px; margin: 0 7px 0 0; border-radius: 50%; background: currentColor; align-self: center; }
/* ---- Progress in Multiple choice mode, plainer (2026-10-16): each tile
   names its lecture (the order is the ranking; the next one is outlined and
   says so), Less relevant fills the grid's last cell, counts in the UI
   face, and everything flows from the top with no band pushed open ---- */
.lpwrap > .lablearn { margin-top: 4px; }
.lptile.lpmc .no { color: var(--dim2); font-weight: 500; }
.lptile.lpmc.here .no, .lptile.lpmc.here .st { color: var(--accent2); }
.lptile.lpmc .bars em { font: 500 11.5px/1 Geist, Inter, system-ui, sans-serif; color: var(--dim2); }
.lptile.lpless { background: transparent; border-style: dashed; border-color: rgba(255,255,255,.12); }
.lptile.lpless .t { color: var(--dim2); }
.lptile.lpless .bars { justify-content: flex-start; }
.lpgrid.lpgrid3:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lptile.lpmc .h .no, .lptile.lpmc .h .st { font: 500 12px/1.2 Geist, Inter, system-ui, sans-serif; letter-spacing: 0; }
/* ---- answers as the exam sets them (2026-10-16): the open questions'
   serif, a plain letter instead of a badge, a list as one sentence with
   its [n] quiet ---- */
.labopt { grid-template-columns: 14px 1fr; gap: 10px; padding: 13px 16px 13px 14px;
  font: 400 16px/1.5 Literata, "Source Serif 4", Georgia, serif; color: var(--lstem); }
.labopt .k { width: auto; height: auto; border: 0; border-radius: 0; background: none; display: block;
  font: 600 13px/1.85 Geist, Inter, system-ui, sans-serif; color: var(--dim); }
.labopt .b { padding-top: 0; }
.labopt .b .n { font: 500 .8em/1 Geist, Inter, system-ui, sans-serif; color: var(--dim); }
.labopt.right .k { background: none; color: var(--green); }
.labopt.wrong .k { background: none; color: var(--red); }
.labopt .b b.w, .labopt .b b.r { font-weight: 600; }
@media (hover: hover) { .labopt:not(:disabled):hover .k { border: 0; color: var(--accent2); } }
@media (min-width: 900px) { .labopt { font-size: 16.5px; padding: 14px 20px 14px 16px; } }
/* ---- after an answer, calmer (2026-10-16): the right answer is the one
   that stands out (a soft green edge, its deciding words a pale green),
   a wrong pick recedes (a faint edge, its wrong words struck in grey), the
   reason first, then the arrow line quiet, then a line that points to the
   slide's card below ---- */
.labopt.right { background: color-mix(in srgb, var(--green) 6%, transparent); border-color: color-mix(in srgb, var(--green) 38%, transparent); }
.labopt.right .k { color: var(--green); }
.labopt .b b.w { color: color-mix(in srgb, var(--green) 45%, var(--lstem)); font-weight: 600; }
.labopt.wrong { background: transparent; border-color: color-mix(in srgb, var(--red) 24%, transparent); opacity: .7; }
.labopt.wrong .k { color: color-mix(in srgb, var(--red) 60%, var(--dim)); }
.labopt .b b.r { color: inherit; font-weight: inherit; text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--red) 55%, transparent); text-decoration-thickness: 1.5px; }
.labopt .b .dim { opacity: .6; }
.labexpl { margin: 2px 0 0; padding: 0 2px; font: 400 15.5px/1.6 Literata, "Source Serif 4", Georgia, serif; color: var(--lstem); }
.labarrows { background: none; border: 1px solid rgba(255,255,255,.07); color: var(--dim2); font-weight: 500; font-size: 13.5px; }
.labarrows .q { color: var(--accent2); }
.labtoread { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); background: none; color: var(--dim2); text-align: left;
  font: 400 13.5px/1.35 Geist, Inter, system-ui, sans-serif; }
.labtoread svg { flex-shrink: 0; color: var(--accent2); }
.labtoread b { font-weight: 600; color: var(--accent2); }
@media (hover: hover) { .labtoread:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } }
.labnext b.no { color: color-mix(in srgb, var(--red) 70%, var(--dim2)); background: rgba(255,255,255,.05); }
.labnext b.ok { color: var(--green); }
.labread::before { content: "On the slide"; }
.labread { scroll-margin-top: 12px; }
.labopt .b b.r { text-decoration-color: color-mix(in srgb, var(--red) 30%, var(--dim)); text-decoration-thickness: 1px; }
.labopt.wrong .b .n { text-decoration: none; }
/* the card under a miss: its text in the question's soft tone, not white */
.labread, .labread :is(b, strong, .rkd-k, .rkd-t, h4) { color: var(--lstem); }
.labread .rkd :is(.rkd-nd, .rkd-mean), .labread .rkd :is(.rkd-nd, .rkd-mean) b { color: var(--lstem); }
/* after an answer: the verdict, Slide and Continue in a bar pinned to the
   screen's bottom, so the way on and the slide below are always in view */
.labnext { position: sticky; bottom: 0; z-index: 2; grid-template-columns: auto 1fr auto; gap: 10px;
  margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--chatbg) 22%); }
.labtoread { width: auto; justify-self: start; padding: 0 14px; min-height: 40px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent2); font-weight: 500; }
.labtoread span { white-space: nowrap; }
.labnext { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 620px; padding-top: 22px; }
.labrun:has(.labnext) { padding-bottom: 96px; }
/* Slide asks to be seen: the button hops three times, its arrow points down */
@keyframes labhop { 0%, 100% { transform: none; } 30% { transform: translateY(-5px); } 55% { transform: translateY(1px); } 75% { transform: translateY(-2px); } }
@keyframes labpoint { 0%, 100% { transform: none; } 40% { transform: translateY(3px); } }
@media (prefers-reduced-motion: no-preference) {
  .labtoread { animation: labhop .7s cubic-bezier(.3, .7, .4, 1) .5s 3 both; }
  .labtoread svg { animation: labpoint 1.1s ease-in-out 2.6s infinite; }
}
/* Slide, gently: it rises in once with a soft lilac glow that fades, then rests */
@keyframes labhelp { 0% { opacity: 0; transform: translateY(4px); box-shadow: 0 0 0 0 transparent; }
  45% { opacity: 1; transform: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .labtoread { animation: labhelp 1.1s cubic-bezier(.16, 1, .3, 1) .35s both; }
  .labtoread svg { animation: none; }
}
/* ---- Test yourself (Programming): the real exams, then the generator,
   then the exam profile: the coach's note, the parts of the exam with
   their share and trend, where the points go, and the path forward ---- */
.lpgenh { margin-top: 18px; }
#ppprofile { display: grid; gap: 8px; }
#ppprofile:empty { display: none; }
#ppprofile > .lpgenh { margin-top: 22px; }
#ppprofile .lpnote b { color: var(--text); font-weight: 600; }
.ppcoach { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.ppcoach.stale { opacity: .75; }
.ppclabel { font: 600 12px/1.2 Geist, Inter, system-ui, sans-serif; color: var(--accent2); }
.ppcoach.stale .ppclabel { animation: ppbreath 1.8s ease-in-out infinite; }
@keyframes ppbreath { 50% { opacity: .45; } }
.ppcsum { margin: 0; font: 400 15.5px/1.6 Literata, "Source Serif 4", Georgia, serif; color: var(--lstem); text-wrap: pretty; }
.ppcfocus { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ppcfocus li { display: grid; gap: 2px; padding-left: 12px; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.ppcfocus b { font: 600 14px/1.3 Geist, Inter, system-ui, sans-serif; color: var(--text); }
.ppcfocus span { font: 400 14.5px/1.5 Literata, "Source Serif 4", Georgia, serif; color: var(--dim2); }
.ppcnext { margin: 0; font: 500 14px/1.45 Geist, Inter, system-ui, sans-serif; color: var(--accent2); }
.pfsecs, .ppskills { display: grid; gap: 2px; }
.pfsec { display: grid; grid-template-columns: minmax(0, 1fr) 72px 52px; align-items: center; gap: 10px; padding: 7px 0; }
.pfsec .t { font: 500 13.5px/1.3 Geist, Inter, system-ui, sans-serif; color: var(--text); min-width: 0; }
.pfsec.weak .t::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%;
  vertical-align: 1px; background: color-mix(in srgb, var(--red) 70%, var(--dim)); }
.pfsec .bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.pfsec .bar i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--accent) 75%, transparent); }
.pfsec .v { text-align: right; font: 500 12.5px/1 Geist, Inter, system-ui, sans-serif; color: var(--dim2); font-variant-numeric: tabular-nums; }
.pptr { display: block; margin-top: 3px; font-size: 11px; }
.pptr.up { color: var(--green); } .pptr.dn { color: color-mix(in srgb, var(--red) 70%, var(--dim2)); }
.ppskill { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--lhair); }
.ppskill:first-child { border-top: 0; }
.ppskill .t { font: 500 13.5px/1.3 Geist, Inter, system-ui, sans-serif; color: var(--text); }
.ppskill .s { font: 400 12.5px/1.3 Geist, Inter, system-ui, sans-serif; color: var(--dim2); text-align: right; font-variant-numeric: tabular-nums; }
.pppath { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: pp; }
.pppath li { counter-increment: pp; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border); }
.pppath li::before { content: counter(pp); flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); font: 600 11.5px/1 Geist, Inter, system-ui, sans-serif; color: var(--accent2); }
.pppath .tt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pppath .t { font: 600 14px/1.3 Geist, Inter, system-ui, sans-serif; color: var(--text); }
.pppath .s { font: 400 12.5px/1.4 Geist, Inter, system-ui, sans-serif; color: var(--dim2); }
.pppath .s i { font-style: normal; color: var(--dim2); font-family: Literata, "Source Serif 4", Georgia, serif; }
.pppath .lpgo { min-height: 38px; padding: 0 16px; flex: none; }
@media (prefers-reduced-motion: reduce) { .ppcoach.stale .ppclabel { animation: none; } }
.lptab[data-tab="past"] > .lpgenh { margin-top: 26px; }
.ppwhy { margin: 0 0 6px; font: 500 12.5px/1.35 Geist, Inter, system-ui, sans-serif; color: var(--accent2); }
/* ---- Test yourself (Programming), on one screen (2026-10-16): the real
   exams as three tiles, the two made-for-you sets side by side, and the
   profile as one card (the coach's line, six bars, the next step; the
   rest folds open under Full profile) ---- */
.lptab[data-tab="past"] { display: grid; gap: 8px; }
.lptab[data-tab="past"] > h3 { margin: 0 0 2px; }
.lptab[data-tab="past"] > .llabel { margin: 4px 2px -2px; }
.ppreal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ppgen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ppx, .ppg { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 11px 12px; border-radius: 14px; text-align: left;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); cursor: pointer;
  transition: border-color .15s ease, transform .12s ease; }
.ppx:active, .ppg:active { transform: scale(.98); }
@media (hover: hover) { .ppx:hover, .ppg:not(:disabled):hover { border-color: var(--hodb); } }
.ppx:focus-visible, .ppg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ppx.open, .ppg.open { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ppx .t, .ppg .t { font: 600 13.5px/1.25 Geist, Inter, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppx .s, .ppg .s { font: 400 12px/1.35 Geist, Inter, system-ui, sans-serif; color: var(--dim2); }
.ppx .lpgrade, .ppg .lpgrade { margin-left: 0; }
.ppg .t .lpgrade { margin-left: 6px; }
.ppg { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.ppg .t { white-space: normal; }
.ppg:disabled { opacity: .5; cursor: default; }
#ppprofile { margin-top: 4px; }
.ppempty { padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--border); font: 400 13px/1.45 Geist, Inter, system-ui, sans-serif; color: var(--dim2); }
.ppcoach { gap: 9px; padding: 13px 14px; }
.ppcsum { font-size: 14.5px; line-height: 1.5; }
.ppcsum.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ppcnext { font-size: 13px; }
.ppbars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-top: 2px; }
.ppbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; align-items: baseline; }
.ppbar .t { font: 500 12px/1.2 Geist, Inter, system-ui, sans-serif; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppbar.weak .t { color: color-mix(in srgb, var(--red) 55%, var(--text)); }
.ppbar .v { font: 500 11.5px/1 Geist, Inter, system-ui, sans-serif; color: var(--dim2); font-variant-numeric: tabular-nums; }
.ppbar .pptr { display: inline; margin: 0; font-size: 10.5px; }
.ppbar .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.ppbar .bar i { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 75%, transparent); }
.ppnext { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ppnext .lpgo { flex: 1 1 auto; min-height: 40px; padding: 0 14px; }
.ppnext .lpgo.ghost { background: none; color: var(--accent2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.ppmore { justify-self: center; padding: 4px 10px; border: 0; background: none; color: var(--dim2); cursor: pointer;
  font: 500 12.5px/1.2 Geist, Inter, system-ui, sans-serif; }
@media (hover: hover) { .ppmore:hover { color: var(--text); } }
.ppfull { display: grid; gap: 8px; padding-top: 4px; border-top: 1px solid var(--lhair); }
.ppfull > .llabel { margin: 6px 0 -2px; }
.ppalso { display: grid; gap: 6px; }
.ppskill .lplink { font-size: 12.5px; }
.ppcnext.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the grade strip: the last twelve grades, the pass line dashed */
.ppgrades { display: grid; gap: 4px; }
.ppgrades svg { width: 100%; height: auto; overflow: visible; }
.ppgrades .pass { stroke: color-mix(in srgb, var(--green) 45%, transparent); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ppgrades polyline { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ppgrades circle { fill: var(--panel); stroke: color-mix(in srgb, var(--accent) 80%, transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ppgrades circle.ok { stroke: var(--green); }
.ppgrades circle.last { fill: var(--accent); }
.ppgrades circle.last.ok { fill: var(--green); }
.ppgrades .k { font: 500 11px/1.2 Geist, Inter, system-ui, sans-serif; color: var(--dim); }
.ppdate { display: inline-block; min-width: 3.6em; margin-right: 8px; font: 500 11.5px/1 Geist, Inter, system-ui, sans-serif;
  color: var(--dim); font-variant-numeric: tabular-nums; }
/* Practice / Continue no brighter than Test yourself: the exams weigh as
   much, so both are the same soft lilac card; Practice keeps a slightly
   stronger edge as the default way in */
.lpduob.play { border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--text); }
.lpduob.play .ic { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent2); }
.lpduob.play .t { color: var(--text); }
.lpduob.play .d { color: var(--dim2); }
.lpduob.play .m { color: var(--accent2); }
@media (hover: hover) { .lpduob.play:hover { background: color-mix(in srgb, var(--accent) 17%, var(--panel)); } }
/* ---- the coach card, v2 (2026-10-20): the verdict line, the pattern,
   the grades, the plan as numbered buttons into what it names, and the
   exam parts as bars you tap to train ---- */
.ppchead { margin: 0; font: 500 17px/1.4 Literata, "Source Serif 4", Georgia, serif; color: var(--text); text-wrap: pretty; }
.ppcoach .ppcsum { font-size: 14.5px; line-height: 1.55; color: var(--dim2); }
.ppchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ppchips .lpgrade { margin: 0; }
.ppchips .ppto { color: var(--dim); font-size: 12px; }
.ppchips .k, .ppgrades .k, .ppplanh .k { font: 400 12px/1.2 Geist, Inter, system-ui, sans-serif; color: var(--dim2);
  text-transform: none; letter-spacing: 0; }
.ppchips .k { margin-left: 6px; }
.ppplanh { margin: 6px 0 -2px; }
.ppplanh .k { margin-left: 6px; }
.ppplan { display: grid; gap: 6px; }
.ppstep { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 13px; text-align: left;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); cursor: pointer;
  transition: border-color .15s ease, transform .12s ease; }
.ppstep.first { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.ppstep:active { transform: scale(.985); }
@media (hover: hover) { .ppstep:hover { border-color: var(--hodb); } }
.ppstep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ppstep .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); font: 600 11.5px/1 Geist, Inter, system-ui, sans-serif; color: var(--accent2); }
.ppstep.first .n { background: var(--accent); color: var(--bg); box-shadow: none; }
.ppstep .tt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ppstep .t { font: 600 14px/1.3 Geist, Inter, system-ui, sans-serif; }
.ppstep .t .m { margin-left: 8px; font-weight: 500; font-size: 12.5px; color: var(--dim2); font-variant-numeric: tabular-nums; }
.ppstep .s { font: 400 13px/1.45 Geist, Inter, system-ui, sans-serif; color: var(--dim2); text-wrap: pretty; }
.ppstep .go { flex: none; font-size: 20px; line-height: 1; color: var(--dim); }
.ppbars .ppbar { padding: 6px 4px 4px; margin: -6px -4px -4px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; cursor: pointer; }
.ppbars .ppbar:disabled { cursor: default; }
@media (hover: hover) { .ppbars .ppbar:not(:disabled):hover { background: rgba(255,255,255,.04); } }
.ppbars .ppbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ppbar.weak .t { color: var(--text); }
.ppbar.weak .v { color: color-mix(in srgb, var(--red) 60%, var(--text)); }
.ppbar .v .pptr { margin-left: 3px; font-size: 9px; vertical-align: 1px; }
.ppgrades svg { max-height: 56px; }