/* PRACTICE (pr-), the KATA runner (kt-) and the Bench's problem write-up (bench-prob, bench-sol). Built from the shared sheet: .part-h for the two parts, .mod-h for each
   level or unit, .filters for the level switch, .seg for marks, and the Bench's editor classes untouched, so a kata
   looks exactly like the Bench in a lesson. Only existing tokens. */

/* ---------- the page ---------- */
.pr-part { margin: 0 0 72px; }
.pr-part .part-h { flex-wrap: wrap; }
.pr-part .part-h span { white-space: nowrap; }
.pr-part .part-h i { margin-left: auto; font: 0.8125rem/1 var(--font-ui); font-style: normal; letter-spacing: 0; color: var(--ink-3); }
.pr-part .part-note { max-width: 46em; }
.pr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 22px 0 6px; padding: 0 0 12px; border-bottom: 1px solid var(--rule); }
.pr-bar[hidden] { display: none; }
.pr-fc { margin-left: 7px; font: 500 0.6875rem/1 var(--font-data); color: var(--ink-3); }
.filters [aria-pressed="true"] .pr-fc { color: inherit; }
.pr-tally { font: 0.75rem/1 var(--font-data); color: var(--ink-3); white-space: nowrap; }
.pr-rung { max-width: 46em; margin: 18px 0 0; padding: 12px 18px; background: var(--leaf); border-left: 3px solid var(--rubric); font: italic 1.0625rem/1.45 var(--font-serif); color: var(--ink-2); }
.pr-rung[hidden] { display: none; }
.pr-rung b { margin-right: 4px; font: 600 0.6875rem/1 var(--font-ui); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubric); }
.pr-wait, .pr-empty { margin: 26px 0 0; font: italic 1.25rem/1.45 var(--font-serif); color: var(--ink-3); }
.pr-wait { animation: pr-breathe 1.6s var(--ease-out) infinite alternate; }
@keyframes pr-breathe { from { opacity: 1; } to { opacity: 0.45; } }

/* a level, or a unit */
.pr-group { margin-top: 44px; }
.pr-group[hidden] { display: none; }
details.pr-group > summary { list-style: none; cursor: pointer; }
details.pr-group > summary::-webkit-details-marker { display: none; }
details.pr-group > summary .mod-h i::after { content: "  +"; font-family: var(--font-data); color: var(--rubric); }
details.pr-group[open] > summary .mod-h i::after { content: "  −"; }
details.pr-group > summary:hover .mod-h { color: var(--rubric); }
.pr-can { max-width: 44em; margin: 10px 0 2px; font: italic 1.0625rem/1.45 var(--font-serif); color: var(--ink-2); text-wrap: pretty; }
.pr-rows { list-style: none; margin: 0; padding: 0; }
.pr-item { border-bottom: 1px solid var(--rule-2); scroll-margin-top: calc(var(--mast-h) + 16px); }
.pr-item[hidden] { display: none; }

/* a row: numeral, title and where it was taught, status */
.pr-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 17px 0; cursor: pointer; }
.pr-n { font: 400 1.375rem/1.1 var(--font-serif); color: var(--ink-3); font-variant-numeric: lining-nums; transition: color var(--dur-micro); }
.pr-main { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.pr-t { text-align: left; font: 400 1.3125rem/1.25 var(--font-serif); transition: color var(--dur-micro); }
.pr-row:hover .pr-t { color: var(--rubric); }
.pr-from { font-size: 0.8125rem; color: var(--ink-3); }
.pr-side { display: inline-flex; align-items: baseline; gap: 22px; }
.pr-st { min-width: 64px; font: 0.75rem/1.3 var(--font-data); color: var(--ink-3); text-align: right; white-space: nowrap; }
.pr-st[data-st="tried"] { color: var(--ink-2); }
.pr-st[data-st="solved"] { color: var(--verdigris); }
.pr-st[data-st="helped"] { color: var(--ink-2); font-style: italic; }
.pr-item[data-open] .pr-n { color: var(--rubric); }
.pr-item[data-open] .pr-t { font-style: italic; }

/* Invariant's problems: denser, with the LeetCode number and a difficulty mark */
.is-prob .pr-row { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 13px 0; }
.is-prob .pr-n { font: 500 0.75rem/1 var(--font-data); color: var(--ink-3); }
.is-prob .pr-t { font-size: 1.1875rem; }
.is-prob .pr-main { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 14px; }
.pr-diff { width: 58px; font: 500 0.9375rem/1 var(--font-serif); font-variant-caps: all-small-caps; letter-spacing: 0.06em; color: var(--ink-3); }
.pr-diff[data-d="M"] { color: var(--ink); }
.pr-diff[data-d="H"] { color: var(--rubric); }

/* the open row: the work sits on a leaf, under the title */
.pr-panel { margin: 0 0 26px 54px; padding: 22px 24px 24px; background: var(--leaf); border: 1px solid var(--rule); border-radius: 3px; animation: pr-in var(--dur-state) var(--ease-out); }
.is-prob .pr-panel { margin-left: 82px; }
.pr-panel[hidden] { display: none; }
@keyframes pr-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- written practice: one row per lesson, folded; open one to write ---------- */
.pr-wl { border-bottom: 1px solid var(--rule-2); }
.pr-wl > summary { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 14px; gap: 18px; align-items: baseline; padding: 17px 0; list-style: none; cursor: pointer; }
.pr-wl > summary::-webkit-details-marker { display: none; }
.pr-wl > summary::after { content: "+"; font: 500 0.875rem/1 var(--font-data); color: var(--rubric); text-align: right; }
.pr-wl[open] > summary::after { content: "−"; }
.pr-wl-n { font: 600 0.6875rem/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pr-wl-t { min-width: 0; font: 400 1.3125rem/1.25 var(--font-serif); transition: color var(--dur-micro); }
.pr-wl > summary:hover .pr-wl-t { color: var(--rubric); }
.pr-wl[open] .pr-wl-n { color: var(--rubric); }
.pr-wl[open] .pr-wl-t { font-style: italic; }
.pr-wl-c { font: 0.75rem/1.3 var(--font-data); color: var(--ink-3); white-space: nowrap; }
.pr-wlist { list-style: none; margin: 4px 0 0 110px; padding: 0; }
.pr-wl-go { margin: 20px 0 28px 110px; font-size: 0.8125rem; }
.pr-w + .pr-w { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule-2); }
.pr-wk { margin: 0 0 6px; font: 600 0.65625rem/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubric); }
.pr-wq { max-width: 40em; margin: 0 0 8px; font: 400 1.1875rem/1.45 var(--font-serif); text-wrap: pretty; }
.pr-wd { max-width: 40em; }
.pr-wd summary, .bench-hint summary { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 0; list-style: none; font: 500 0.8125rem/1.2 var(--font-ui); color: var(--ink-2); cursor: pointer; transition: color var(--dur-micro); }
.pr-wd summary::-webkit-details-marker, .bench-hint summary::-webkit-details-marker { display: none; }
.pr-wd summary::before, .bench-hint summary::before { content: "+"; width: 10px; font: 500 0.8125rem/1 var(--font-data); color: var(--rubric); }
.pr-wd[open] summary::before, .bench-hint[open] summary::before { content: "−"; }
.pr-wd summary:hover, .bench-hint summary:hover { color: var(--ink); }
.pr-hint, .pr-model { margin: 4px 0 10px; font: 1.03125rem/1.55 var(--font-serif); }
.pr-hint { font-style: italic; color: var(--ink-2); }
.pr-model { padding: 10px 14px; background: var(--leaf); border-left: 2px solid var(--ink); }
.pr-model:focus { outline: none; }
.pr-wlab { display: block; margin: 14px 0 6px; font: 600 0.6875rem/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pr-wa { display: block; width: 100%; max-width: 42rem; min-height: 112px; margin: 0; padding: 12px 14px; resize: vertical; background: var(--leaf); border: 1px solid var(--rule); border-radius: 3px; font: 1.0625rem/1.5 var(--font-serif); color: var(--ink); transition: border-color var(--dur-micro), box-shadow var(--dur-micro); }
.pr-wa::placeholder { font-style: italic; color: var(--ink-3); }
.pr-wa:hover { border-color: var(--ink-3); }
.pr-wa:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--wash); }
.pr-reveal { margin-top: 12px; }
.pr-wm { max-width: 42rem; }
.pr-wm[hidden] { display: none; }
.pr-self { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.pr-self-k { font: 600 0.6875rem/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pr-self-why { font-size: 0.78125rem; color: var(--ink-3); }
.pr-self .seg button:hover:not(:disabled) { color: var(--ink); }
.pr-self .seg button:disabled { opacity: 0.45; cursor: default; }
.pr-self .seg button + button { border-left: 1px solid var(--rule); }
.pr-self .seg button[data-self="2"][aria-pressed="true"] { background: var(--verdigris); color: var(--leaf); }

/* ---------- Mixed: name the pattern, then solve it ---------- */
.pr-bar .filters[hidden], .pr-mx[hidden] { display: none; }
.pr-mx { margin-top: 26px; }
.pr-mx-from { max-width: 46em; margin: 0 0 14px; font: italic 1rem/1.4 var(--font-serif); color: var(--ink-3); }
.pr-mx-card { padding: 22px 24px 24px; background: var(--leaf); border: 1px solid var(--rule); border-radius: 3px; animation: pr-in var(--dur-state) var(--ease-out); }
.pr-mx-card > .label { margin-bottom: 8px; }
.pr-mx-card > .label:focus, .pr-mx-res:focus { outline: none; }
.pr-mx-q { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.pr-mx-ask { margin: 0 0 12px; font: 400 1.4375rem/1.2 var(--font-serif); }
.pr-mx-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.pr-mx-picks button { min-height: 44px; padding: 10px 14px; text-align: left; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; font: 500 0.875rem/1.25 var(--font-ui); color: var(--ink-2); transition: border-color var(--dur-micro), color var(--dur-micro); }
.pr-mx-picks button:hover { border-color: var(--ink); color: var(--ink); }
.pr-mx-picks button:active { background: var(--wash); }
.pr-mx-res { max-width: 42em; margin: 0 0 20px; font: 400 1.1875rem/1.45 var(--font-serif); text-wrap: pretty; }
.pr-mx-ok { color: var(--verdigris); }
.pr-mx-no { color: var(--rubric); }
.pr-mx-next { margin: 18px 0 0; }

/* ---------- the kata ---------- */
.kt-prompt { max-width: 40em; margin: 0 0 18px; font: 400 1.1875rem/1.5 var(--font-serif); text-wrap: pretty; }
.kt-one { font: 500 0.78125rem/1 var(--font-ui); color: var(--ink-2); }
.kt .bench-act { align-items: center; }
.kt-sol-ask, .bench-sol-ask { margin-left: auto; font-size: 0.8125rem; }
.bench-sol-ask[hidden] { display: none; }
:is(.kt-sol-ask, .bench-sol-ask) .link + .link { margin-left: 12px; }
.bench-ask-q { font: italic 0.9375rem/1.4 var(--font-serif); color: var(--ink-2); }
.bench-keys { font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }
.bench-keys kbd { font-size: 0.65625rem; }
.kt-diff { width: 100%; margin: 0 0 4px; border-collapse: collapse; background: var(--paper); font: 0.75rem/1.5 var(--font-data); }
.kt-diff th { padding: 9px 12px 7px; border-bottom: 1px solid var(--rule); font: 600 0.625rem/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: var(--ink-3); }
.kt-diff td { padding: 6px 12px; border-bottom: 1px solid var(--rule-2); vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.kt-diff th:first-child, .kt-diff td:first-child { width: 52px; }
.kt-diff td:first-child { color: var(--ink-3); }
.kt-diff i { font-family: var(--font-serif); color: var(--ink-3); }
.kt-off td:first-child { color: var(--rubric); box-shadow: inset 3px 0 0 var(--rubric); }
.kt-off td:last-child { color: var(--rubric); }
.kt-hid { margin: 8px 0 0; font: italic 0.90625rem/1.45 var(--font-serif); color: var(--ink-3); }
.kt .bench-stderr { margin-top: 8px; }
.kt-sol, .bench-sol { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.kt-sol[hidden], .bench-sol[hidden] { display: none; }
:is(.kt-sol, .bench-sol) > summary { display: inline-flex; align-items: baseline; gap: 8px; list-style: none; font: 600 0.6875rem/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; }
:is(.kt-sol, .bench-sol) > summary::-webkit-details-marker { display: none; }
:is(.kt-sol, .bench-sol) > summary::before { content: "+"; width: 10px; font: 500 0.8125rem/1 var(--font-data); letter-spacing: 0; color: var(--rubric); }
:is(.kt-sol, .bench-sol)[open] > summary::before { content: "−"; }
:is(.kt-sol, .bench-sol) > summary:hover { color: var(--ink); }
.kt-sol-pre { max-height: 420px; color: var(--ink); }

/* ---------- the Bench on an Invariant problem: its statement above the editor, its worked solution behind a fold ----------
   The Bench is shared with the lesson page, and this sheet loads app-wide, so these rules serve both. Invariant's own
   marks (code.inl, the hl and kw spans) are drawn in our ink: a wash for its highlights, weight for its keywords. */
.bench-prob { margin: 0 0 20px; }
/* the day after a peek: the editor opens on the starter, and says why */
.bench-cold { margin: 0 0 12px; padding-left: 10px; border-left: 2px solid var(--rubric); font: italic 1rem/1.45 var(--font-serif); color: var(--ink-2); }
.bench-prob .label { margin-bottom: 8px; }
.bench-stmt { max-width: 42em; font: 400 1.125rem/1.55 var(--font-serif); color: var(--ink); text-wrap: pretty; }
:is(.bench-stmt, .bench-hint, .bench-sol-body) code { padding: 1px 4px; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px; font: 0.8em/1.3 var(--font-data); }
:is(.bench-stmt, .bench-hint, .bench-sol-body) :is(.hl, .hlp, .hlg, .hlr, .hla, .hlb) { padding: 0 2px; background: var(--wash); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(.bench-stmt, .bench-hint, .bench-sol-body) [class^="kw"] { font-weight: 600; }
.bench-hint { max-width: 42em; margin-top: 8px; }
.bench-hint > div { margin: 4px 0 6px; padding-left: 18px; font: italic 1.03125rem/1.55 var(--font-serif); color: var(--ink-2); }
.bench-sol-body { max-width: 46em; }
.bench-sol-body > .label { margin: 24px 0 8px; }
.bench-sol-body > .label:first-child { margin-top: 14px; }
.bench-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.bench-steps li { counter-increment: st; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.bench-step-h { margin: 0 0 4px; font: 600 0.71875rem/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.bench-step-h::before { content: counter(st); display: inline-block; width: 22px; font: 500 0.75rem/1 var(--font-data); color: var(--rubric); }
.bench-step-h span { margin-left: 8px; font: 0.75rem/1 var(--font-data); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.bench-steps li > div { padding-left: 22px; font: 1.03125rem/1.55 var(--font-serif); }
.bench-inv { margin: 0; padding: 12px 16px; background: var(--paper); border-left: 3px solid var(--rubric); font: italic 1.0625rem/1.55 var(--font-serif); }
.bench-pre.bench-code { max-height: 480px; color: var(--ink); }
.bench-cap { margin: 6px 0 12px; font: italic 0.90625rem/1.5 var(--font-serif); color: var(--ink-3); }
.bench-big { margin: 16px 0 0; font: 0.96875rem/1.55 var(--font-serif); color: var(--ink-2); }
.bench-big b { font: 500 0.8125rem/1 var(--font-data); color: var(--ink); }
.bench-hook { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2); font: italic 1.125rem/1.45 var(--font-serif); }
.bench-act { align-items: center; }

/* ---------- the Bench in a narrow column (the lesson margin, a phone): nothing wider than its box ----------
   The editor wraps long lines instead of scrolling sideways. Both layers wrap alike: the same font, width and padding,
   and each keeps a scrollbar's gutter, so a scrollbar can never narrow the textarea alone and pull the caret off its
   letters. The statement's examples and the tests' values wrap or scroll inside. */
.ed { container-type: inline-size; }
@container (max-width: 560px) {
  .ed-hl, .bench-ed { white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-gutter: stable; }
}
.bench-top > *, .bench-act > *, .tests li, .t-row { min-width: 0; }
.bench-stmt, .bench-hint > div, .bench-sol-body, .tests code { overflow-wrap: anywhere; }
/* a highlight's 2px of padding can hang past the end of a line: trim it rather than let it widen the box */
.bench-stmt, .bench-hint > div, .bench-sol-body { overflow-x: clip; }
:is(.bench-stmt, .bench-hint, .bench-sol-body) pre { max-width: 100%; overflow-x: auto; }

/* ---------- narrower ---------- */
@media (max-width: 760px) {
  .pr-row { grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; padding: 15px 0; }
  .pr-side { grid-column: 2; gap: 16px; }
  .pr-st { min-width: 0; text-align: left; }
  .is-prob .pr-row { grid-template-columns: 52px minmax(0, 1fr); }
  .is-prob .pr-main { grid-auto-flow: row; gap: 2px; }
  .is-prob .pr-t { font-size: 1.125rem; }
  .pr-diff { width: auto; }
  .pr-panel, .is-prob .pr-panel { margin: 0 calc(var(--gut) * -1) 20px; padding: 18px var(--gut) 20px; border-left: 0; border-right: 0; border-radius: 0; }
  .pr-tally { display: none; }
  .pr-part .part-h i { flex-basis: 100%; margin: 2px 0 0; }
  .pr-wl > summary { grid-template-columns: minmax(0, 1fr) auto 14px; gap: 2px 12px; padding: 15px 0; }
  .pr-wl-n { grid-column: 1 / -1; }
  .pr-wlist, .pr-wl-go { margin-left: 0; }
  .pr-mx-card { margin: 0 calc(var(--gut) * -1); padding: 18px var(--gut) 20px; border-left: 0; border-right: 0; border-radius: 0; }
  .pr-mx-picks { grid-template-columns: 1fr 1fr; }
  .kt-sol-ask, .bench-sol-ask { margin-left: 0; flex-basis: 100%; }
  .kt-prompt { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-panel, .pr-wait, .pr-mx-card { animation: none; }
  .pr-n, .pr-t, .pr-wd summary, .pr-wl-t, .pr-wa, .pr-mx-picks button { transition: none; }
}
/* no keyboard to press them on */
@media (hover: none) { .bench-run .key, .bench-keys { display: none; } }
/* a finger needs 44px */
@media (pointer: coarse) {
  .bench-top .seg button, .kt .seg button, .pr-self .seg button, .pr-mode button, .pr-bar .filters button { min-height: 44px; }
  .bench-act .btn, .bench-act .ghost, .pr-reveal { height: 44px; }
  :is(.kt-sol-ask, .bench-sol-ask) .link, .pr-wd summary, .bench-hint summary, :is(.kt-sol, .bench-sol) > summary { display: inline-flex; align-items: center; min-height: 44px; }
  .pr-from .link, .pr-wl-go .link, .pr-mx-res .link { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
.kt-bill { margin-left: 6px; font: 0.75rem/1.4 var(--font-data); color: var(--ink-2); }