/* KurenaiOS — css/views/code.css · @layer views
   Code, the fourth study space (roadmap 5.3, design turn 26): the shared
   primitives of 26·kit (editor, results, error card, hint ladder, evidence,
   strands, freshness dot, stage path, listing, key bar), the desk (26a),
   the curriculum map (26b), the lesson's additions to the topic page
   (26c–26e), the task editor (26f), retrieval (26h), the skill map (26i),
   settings (26r), a track (26t) and the phone (26u–26w).

   The Code hue is --code (Sky). Pass and fail never use it: they keep the
   fixed --green and --alarm with a mark and a word. Code is JetBrains Mono
   with ligatures off, so >= shows as typed. Dawn is a token swap (26x).

   Convention for every layer file: its rules sit inside ONE @layer block,
   and the block's contents are not indented. */
@layer views {

/* ================= the editor (26·kit) ================= */
.k-ced { display: flex; flex-direction: column; min-inline-size: 0; border-radius: var(--r-14); background: var(--code-bg); overflow: hidden; }
.k-ced[data-state~="focused"] { box-shadow: 0 0 0 var(--focus-width) var(--bg), 0 0 0 calc(var(--focus-width) * 2) var(--code); }
.k-ced-head { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-6) var(--sp-12); border-block-end: var(--hairline) solid var(--line); font-size: var(--fs-12); color: var(--muted); }
.k-ced-lang { font: var(--weight-semibold) var(--fs-11) var(--font-mono); color: var(--code); }
.k-ced-file { font: var(--fs-12-5) var(--font-mono); color: var(--text); padding-block-end: var(--sp-2); border-block-end: var(--bar-3) solid var(--code); }
.k-ced-note { display: inline-flex; align-items: center; gap: var(--sp-6); margin-inline-start: auto; color: var(--text-2); }
.k-ced-note::before { content: ""; inline-size: var(--sp-6); block-size: var(--sp-6); border-radius: 50%; background: var(--code); }
.k-ced-actions { display: flex; align-items: center; gap: var(--sp-6); margin-inline-start: auto; }
.k-ced-note:not([hidden]) + .k-ced-actions { margin-inline-start: var(--sp-8); }
.k-ced-body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); max-block-size: var(--cx-ed-max-h); overflow: auto; }
.k-ced[data-state~="compact"] .k-ced-body { max-block-size: var(--cx-ed-compact-max-h); }
.k-ced-gutter { display: flex; flex-direction: column; min-inline-size: var(--cx-gutter-w); padding: var(--sp-10) var(--sp-8) var(--sp-10) var(--sp-10); text-align: end; font: var(--fs-12-5) / var(--cx-lh) var(--font-mono); color: var(--muted); user-select: none; border-inline-end: var(--hairline) solid var(--line); }
.k-ced-ln { block-size: var(--cx-lh); white-space: nowrap; }
.k-ced-ln[data-state~="err"] { color: var(--alarm); font-weight: var(--weight-bold); }
.k-ced-wrap { position: relative; min-inline-size: 100%; inline-size: max-content; }
.k-ced-wrap::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(var(--sp-10) + (var(--ced-err, 0) - 1) * var(--cx-lh)); block-size: var(--cx-lh); background: var(--alarm-wash); pointer-events: none; display: none; }
.k-ced[data-state~="has-err"] .k-ced-wrap::before { display: block; }
.k-ced-hl, .k-ced-ta { margin: 0; padding: var(--sp-10) var(--sp-14); font: var(--fs-13) / var(--cx-lh) var(--font-mono); font-variant-ligatures: none; white-space: pre; tab-size: 4; border: 0; letter-spacing: 0; }
.k-ced-hl { position: relative; color: var(--text-2); pointer-events: none; min-block-size: 100%; }
.k-ced-ta { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; resize: none; overflow: hidden; background: transparent; color: transparent; caret-color: var(--text); outline: none; }
.k-ced-ta::selection { background: color-mix(in oklch, var(--code) 35%, transparent); }
.k-ced-ta:focus-visible { outline: none; }
.k-ced[data-state~="ro"] .k-ced-ta { caret-color: transparent; }
.k-ced[data-state~="running"] .k-ced-hl { opacity: 0.7; }
.k-ced-squig { text-decoration: underline wavy var(--alarm); text-underline-offset: var(--sp-3); }
.k-ced-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-14); padding: var(--sp-6) var(--sp-12); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-11-5); color: var(--muted); }
.k-ced-state { color: var(--text-2); }
.k-ced[data-state~="pass"] .k-ced-state { color: var(--green); }
.k-ced[data-state~="fail"] .k-ced-state, .k-ced[data-state~="compile"] .k-ced-state, .k-ced[data-state~="exception"] .k-ced-state, .k-ced[data-state~="timeout"] .k-ced-state { color: var(--alarm); }
.k-ced[data-state~="running"] .k-ced-state { color: var(--code); }
.k-ced-pos, .k-ced-indent { font-family: var(--font-mono); }
.k-ced-hint { margin-inline-start: auto; }
.k-ced-hint kbd { padding: 0 var(--sp-4); border-radius: var(--r-6); background: var(--s2); font: var(--fs-11) var(--font-mono); color: var(--text-2); }
.k-t[data-t="ty"] { color: var(--syn-fn); }
.k-t[data-t="attr"] { color: var(--syn-num); }

/* ================= results, errors, the reward line ================= */
.k-cx-res { display: flex; flex-direction: column; gap: var(--sp-8); min-inline-size: 0; }
.k-cx-res-head { display: flex; align-items: baseline; gap: var(--sp-10); }
.k-cx-res-h { margin: 0; font-size: var(--fs-14); font-weight: var(--weight-semibold); }
.k-cx-res-sum { font-size: var(--fs-12-5); color: var(--muted); }
.k-cx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.k-cx-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-10); padding: var(--sp-8) var(--sp-10); border-radius: var(--r-10); background: var(--s2); font-size: var(--fs-13); }
.k-cx-row[data-state~="wait"] { grid-template-columns: auto minmax(0, 1fr); color: var(--muted); }
.k-cx-row[data-state~="skip"] { color: var(--muted); }
.k-cx-ph { inline-size: var(--sp-48); block-size: var(--sp-14); border-radius: var(--r-pill); background: var(--s3); }
.k-cx-pill { padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: var(--weight-medium); white-space: nowrap; }
.k-cx-pill[data-tone="pass"] { background: color-mix(in oklch, var(--green) 18%, transparent); color: var(--green); }
.k-cx-pill[data-tone="fail"] { background: var(--alarm-soft); color: var(--alarm-ink); }
.k-cx-pill[data-tone="muted"] { color: var(--muted); }
.k-cx-case { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted); }
.k-cx-ms { font-size: var(--fs-11-5); color: var(--muted); }
.k-cx-more { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-cx-note { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.k-cx-diff { display: flex; flex-direction: column; border-radius: var(--r-10); background: var(--s3); overflow: auto; }
.k-cx-diff-h, .k-cx-diff-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cx-diff-h span { padding: var(--sp-6) var(--sp-10); font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-cx-diff-r span { padding: var(--sp-2) var(--sp-10); font-size: var(--fs-12-5); white-space: pre; }
.k-cx-diff-r[data-state~="diff"] span:first-child { background: color-mix(in oklch, var(--green) 14%, transparent); }
.k-cx-diff-r[data-state~="diff"] span:last-child { background: var(--alarm-wash); }
.k-cx-err { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--alarm-wash); box-shadow: inset 0 0 0 var(--hairline) var(--alarm-soft); }
.k-cx-err-head { display: flex; align-items: baseline; gap: var(--sp-10); font-size: var(--fs-13); color: var(--alarm-ink); }
.k-cx-err-head .k-mono { color: var(--alarm); }
.k-cx-err-line { color: var(--text-2); font-size: var(--fs-12); }
.k-cx-err-raw { margin: 0; font-size: var(--fs-12-5); color: var(--text); }
.k-cx-err-plain { margin: 0; font-size: var(--fs-13); font-weight: var(--weight-semibold); color: var(--text); }
.k-cx-err-why { margin: 0; font-size: var(--fs-12-5); color: var(--text-2); }
.k-cx-err-after { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.k-cx-rule { padding: var(--sp-10) var(--sp-12); border-radius: var(--r-10); background: var(--alarm-wash); font-size: var(--fs-13); }
.k-cx-rule p { margin: var(--sp-4) 0 0; color: var(--text-2); }
.k-cx-reward { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8); margin: 0; padding: var(--sp-10) var(--sp-12); border-radius: var(--r-10); background: var(--s2); font-size: var(--fs-13); }
.k-cx-reward[data-state~="paid"] b { color: var(--gold); font-family: var(--font-mono); }
.k-cx-reward[data-state~="none"] { color: var(--text-2); }
.k-cx-reward-x { color: var(--muted); font-size: var(--fs-12); }

/* ================= hints, marks and chips ================= */
.k-cx-hints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-cx-hint { display: flex; gap: var(--sp-10); padding: var(--sp-10) var(--sp-12); border-radius: var(--r-12); background: var(--s2); }
.k-cx-hint[data-state~="closed"] { opacity: 0.6; }
.k-cx-hint-n { inline-size: var(--sp-22); block-size: var(--sp-22); flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--s3); font: var(--fs-11-5) var(--font-mono); }
.k-cx-hint[data-state~="open"] .k-cx-hint-n { background: var(--code); color: var(--code-ink); }
.k-cx-hint-txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); font-size: var(--fs-13); }
.k-cx-hint-txt p { margin: 0; color: var(--text-2); }
.k-cx-hint-wait { font-size: var(--fs-12); color: var(--muted); }
.k-cx-ev { display: inline-flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); font-size: var(--fs-12); background: var(--s2); white-space: nowrap; }
.k-cx-ev[data-level="app"] { color: var(--green); }
.k-cx-ev[data-level="self"] { color: var(--amber); }
.k-cx-ev[data-level="ci"] { color: var(--code); }
.k-cx-strands { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-cx-where { display: inline-flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-12); color: var(--text-2); white-space: nowrap; }
.k-cx-where[data-where="rider"], .k-cx-where[data-where="external"] { color: var(--muted); }
.k-cx-chip { display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-12); color: var(--text-2); white-space: nowrap; }
.k-cx-chip[data-tone="code"] { background: color-mix(in oklch, var(--code) 18%, transparent); color: var(--code); }
.k-cx-chip[data-tone="pass"] { background: color-mix(in oklch, var(--green) 18%, transparent); color: var(--green); }
.k-cx-chip[data-tone="amber"] { background: color-mix(in oklch, var(--amber) 18%, transparent); color: var(--amber); }
.k-cx-tier { padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); box-shadow: inset 0 0 0 var(--hairline) var(--code); font-size: var(--fs-11-5); color: var(--code); white-space: nowrap; font-weight: var(--weight-medium); }
.k-cx-cchips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-6); }
.k-cx-cchip { padding: var(--sp-2) var(--sp-8); border-radius: var(--r-8); background: var(--s2); font-size: var(--fs-12); color: var(--text); }
.k-cx-dot { display: inline-block; inline-size: var(--cx-dot); block-size: var(--cx-dot); flex: 0 0 auto; border-radius: 50%; background: var(--code); }
.k-cx-dot[data-band="b1"] { background: color-mix(in oklch, var(--code) 60%, var(--muted)); }
.k-cx-dot[data-band="b2"] { background: var(--muted); }
.k-cx-dot[data-band="b3"] { background: var(--amber); }
.k-cx-dot[data-band="np"] { background: none; box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); }
.k-cx-dot[data-band="later"] { background: none; outline: var(--hairline) dashed var(--muted); outline-offset: calc(var(--hairline) * -1); }
.k-cx-age { display: inline-grid; place-items: center; inline-size: var(--cx-age-w); block-size: var(--sp-28); flex: 0 0 auto; border-radius: var(--r-pill); background: var(--s2); font: var(--fs-11-5) var(--font-mono); color: var(--text-2); }
.k-cx-age[data-band="b3"] { box-shadow: inset 0 0 0 var(--hairline) var(--amber); color: var(--amber); }

/* ================= the stage path ================= */
.k-cx-path { display: flex; align-items: flex-start; gap: var(--sp-18); padding: var(--sp-6); }
.k-cx-stage { display: flex; flex-direction: column; gap: var(--sp-8); flex: 0 0 auto; }
.k-cx-stage-h { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-cx-stage-h b { color: var(--text); font-weight: var(--weight-medium); }
.k-cx-stage-m { display: flex; align-items: center; gap: var(--sp-10); }
.k-cx-stage-m > * + *::before { content: none; }
.k-cx-sq { display: inline-grid; place-items: center; inline-size: var(--cx-sq); block-size: var(--cx-sq); flex: 0 0 auto; border-radius: var(--r-8); background: var(--s2); font: var(--weight-semibold) var(--fs-11-5) var(--font-mono); color: var(--text-2); }
.k-cx-sq[data-state~="done"] { background: var(--code); color: var(--code-ink); }
.k-cx-sq[data-state~="current"] { box-shadow: 0 0 0 var(--focus-width) var(--bg), 0 0 0 calc(var(--focus-width) * 2) var(--code); color: var(--text); }
.k-cx-sq[data-state~="started"] { box-shadow: inset 0 0 0 var(--hairline) var(--code); color: var(--text); }
.k-cx-sq[data-state~="later"] { background: none; outline: var(--hairline) dashed var(--muted); outline-offset: calc(var(--hairline) * -1); color: var(--muted); }
.k-cx-dia { display: inline-block; inline-size: var(--cx-dia); block-size: var(--cx-dia); flex: 0 0 auto; margin-inline: var(--sp-4); transform: rotate(45deg); border-radius: var(--r-2); box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); }
.k-cx-dia[data-state~="passed"] { background: var(--code); box-shadow: none; }
.k-cx-dia[data-state~="next"] { box-shadow: inset 0 0 0 var(--ring-1-5) var(--code); }
.k-cx-dia[data-state~="later"] { box-shadow: none; outline: var(--hairline) dashed var(--muted); }
.k-cx-path[data-state~="compact"] { gap: var(--sp-14); }
.k-cx-path[data-state~="compact"] .k-cx-sq { inline-size: var(--cx-sq-compact); block-size: var(--cx-sq-compact); font-size: var(--fs-11); }
.k-cx-path[data-state~="compact"] .k-cx-stage-m { gap: var(--sp-6); }
.k-cx-path[data-state~="compact"] .k-cx-stage-h { font-size: var(--fs-11-5); }
.k-cx-path[data-state~="compact"] .k-cx-dia { inline-size: var(--sp-16); block-size: var(--sp-16); }
.k-cx-pathcard { padding: var(--sp-14) var(--sp-18); }

/* ================= a runnable listing in notes ================= */
.k-cx-listing { margin: var(--sp-14) 0; display: flex; flex-direction: column; gap: 0; }
.k-cx-listing .k-ced { border-end-start-radius: 0; border-end-end-radius: 0; }
.k-cx-listing .k-ced:only-child { border-radius: var(--r-14); }
.k-cx-listing .k-ced-head .k-btn { min-block-size: var(--hit-dense); }
.k-cx-out { display: flex; align-items: baseline; gap: var(--sp-12); padding: var(--sp-8) var(--sp-14) var(--sp-10); border-end-start-radius: var(--r-14); border-end-end-radius: var(--r-14); background: var(--s3); }
.k-cx-out-k { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-cx-out-pre { margin: 0; white-space: pre-wrap; font-size: var(--fs-12-5); color: var(--text); }
.k-cx-out-err { margin: 0; font-size: var(--fs-12-5); color: var(--alarm); }
.k-cx-slot { display: contents; }

/* ================= the desk (26a) ================= */
/* the hero: ring, name and strands centred in the space above the path,
   the path pinned to the bottom across the full width */
.k-cx-hero { grid-template-rows: minmax(0, 1fr) auto; row-gap: var(--sp-20); align-items: center; }
.k-cx-hero-path { grid-column: 1 / -1; align-self: end; min-inline-size: 0; padding-block-start: var(--sp-16); border-block-start: var(--hairline) solid var(--line); }
/* the spread path: one column per stop, a line joining each to the next */
.k-cx-path[data-state~="spread"] { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; padding: var(--sp-6) 0; }
.k-cx-path[data-state~="spread"] .k-cx-stage { grid-column: span var(--span); display: grid; grid-template-columns: subgrid; row-gap: var(--sp-10); min-inline-size: 0; }
.k-cx-path[data-state~="spread"] .k-cx-stage-h { grid-column: 1 / -1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; padding-inline-start: calc(50% / var(--span) - var(--cx-sq-compact) / 2); }
.k-cx-path[data-state~="spread"] .k-cx-stage-m { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 0; }
.k-cx-node { position: relative; display: grid; place-items: center; min-block-size: var(--cx-sq-compact); }
.k-cx-node::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: calc(50% + var(--cx-sq-compact) / 2 + var(--sp-4)); inline-size: calc(100% - var(--cx-sq-compact) - var(--sp-8)); block-size: var(--hairline); background: color-mix(in oklch, var(--muted) 55%, transparent); }
.k-cx-node[data-state~="last"]::after { content: none; }
.k-cx-path[data-state~="spread"] .k-cx-stage[data-bridge] .k-cx-stage-h { padding-inline-start: 0; overflow: visible; text-align: center; }
.k-cx-node:has(> [data-state~="done"], > [data-state~="passed"])::after { background: var(--code); }
.k-cx-core .k-sectionhead { margin-block-end: var(--sp-12); }
.k-cx-unit .k-unit-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-block-size: calc(2 * 1.25em); }
.k-cx-unit .k-unit-segs span { background: var(--s3); }
.k-cx-unit[data-state~="later"] .k-unit-segs span { background: none; box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-cx-d20 { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-16) var(--sp-18); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--code) 40%, transparent); }
.k-cx-d20-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.k-cx-d20-t { margin: 0; font-size: var(--fs-17); font-weight: var(--weight-semibold); }
.k-cx-d20-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-cx-d20-why { margin: 0; font-size: var(--fs-12-5); color: var(--text-2); }
.k-cx-d20-go { display: flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-12-5); }
.k-cx-d20-done { margin: 0; font-size: var(--fs-13); }
.k-cx-d20-done b { color: var(--green); }
.k-cx-first { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); padding: var(--sp-20); }
.k-cx-first-t { margin: 0; font-size: var(--fs-18); }
.k-cx-first p { margin: 0; color: var(--text-2); }
.k-cx-rdue { display: flex; flex-direction: column; gap: var(--sp-4); }
.k-cx-rdue > .k-btn { align-self: flex-start; margin-block-start: var(--sp-8); }
.k-card-meta[data-tone="code"] { color: var(--code); }
.k-cx-rrow { gap: var(--sp-10); }
.k-cx-unit-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.k-cx-unit[data-state~="later"] { background: none; outline: var(--hairline) dashed var(--line); outline-offset: calc(var(--hairline) * -1); }
.k-cx-unit[data-state~="later"] .k-unit-title { color: var(--text-2); }
.k-cx-unit[data-state~="later"] .k-unit-foot { color: var(--muted); }
.k-cx-close { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-20); }
.k-cx-bandbar { display: flex; block-size: var(--bar-7); border-radius: var(--r-pill); overflow: hidden; background: var(--s2); }
.k-cx-bandbar span { inline-size: var(--w, 0%); background: var(--code); }
.k-cx-bandbar span[data-band="b1"] { background: color-mix(in oklch, var(--code) 60%, var(--muted)); }
.k-cx-bandbar span[data-band="b2"] { background: var(--muted); }
.k-cx-bandbar span[data-band="b3"] { background: var(--amber); }
.k-cx-bandbar span[data-band="np"] { background: none; box-shadow: inset 0 0 0 var(--hairline) var(--muted); }
.k-cx-bandbar--thin { block-size: var(--bar-3); margin-block: var(--sp-6) var(--sp-8); }
.k-cx-bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); margin-block: var(--sp-12) var(--sp-8); }
.k-cx-band { display: flex; flex-direction: column; }
.k-cx-band b { font-size: var(--fs-22); font-weight: var(--weight-semibold); }
.k-cx-band small { font-size: var(--fs-11-5); color: var(--muted); }
.k-cx-laterrow { display: flex; align-items: center; gap: var(--sp-6); }
.k-cx-laterrow > .k-day-row { flex: 1 1 0; min-inline-size: 0; }
.k-cx-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-20); padding: var(--sp-12) var(--sp-18); border-radius: var(--r-16); background: var(--s1); font-size: var(--fs-12-5); color: var(--text-2); }
.k-cx-status > :last-child { margin-inline-start: auto; }
.k-cx-live { display: inline-block; inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--green); }

/* ================= the spine and the topic page (26c–26e) ================= */
.k-cx-spineseg { margin: 0 0 var(--sp-10); }
.k-spine-stage { padding: var(--sp-14) var(--sp-14) var(--sp-4); font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-cx-aqa { font-size: var(--fs-12-5); }
.k-topic-tabrow > .k-cx-mode { flex: 0 0 auto; margin-inline-start: auto; margin-block-end: var(--sp-6); }
.k-cx-check { align-items: flex-start; cursor: default; }
.k-cx-check .k-box { margin-block-start: var(--sp-2); pointer-events: none; }
.k-cx-ts { gap: 0; }
.k-cx-insp-live { display: contents; }
/* a folded layer's heading inside a note page */
.k-n-sec { margin: var(--sp-28) 0 var(--sp-10); padding-block-start: var(--sp-18); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-18); font-weight: var(--weight-semibold); letter-spacing: var(--track-head); }
.k-notes > .k-n-sec:first-child, .k-cx-refsec > div > .k-n-sec:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.k-cx-check-t { display: flex; flex-direction: column; }
.k-cx-check-t small { font-size: var(--fs-11-5); color: var(--muted); }
.k-cx-ts-note { margin: 0 0 var(--sp-6); font-size: var(--fs-11-5); color: var(--muted); }
.k-cx-concepts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.k-cx-concepts li { display: flex; align-items: center; gap: var(--sp-8); min-block-size: var(--insp-row); font-size: var(--fs-13); }
.k-cx-concepts small { margin-inline-start: auto; font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-topic-dots span[data-state~="read"] { background: color-mix(in oklch, var(--code) 55%, var(--s2)); }
.k-cx-notes .k-cx-listing { max-inline-size: 100%; }
.k-cx-find { display: flex; align-items: center; gap: var(--sp-8); margin-block-end: var(--sp-14); padding: var(--sp-6) var(--sp-10); border-radius: var(--r-pill); background: var(--s1); }
.k-cx-find-in { flex: 1 1 0; min-inline-size: 0; background: none; box-shadow: none; }
.k-cx-find-n { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-cx-refcol { max-inline-size: var(--cx-refcol); }
.k-cx-refsec { scroll-margin-block-start: var(--sp-24); padding-block-end: var(--sp-20); }
.k-cx-refsec + .k-cx-refsec { border-block-start: var(--hairline) solid var(--line); padding-block-start: var(--sp-20); }
.k-cx-refh { display: flex; align-items: baseline; gap: var(--sp-8); margin: 0 0 var(--sp-10); font-size: var(--fs-20); }
.k-cx-refh .k-mono { color: var(--code); font-size: var(--fs-14); }
.k-cx-hit { border-radius: var(--r-2); background: color-mix(in oklch, var(--code) 30%, transparent); color: inherit; }
.k-cx-hit[data-state~="current"] { background: var(--code); color: var(--code-ink); }
.k-cx-otp { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-cx-otp-h { display: flex; align-items: baseline; justify-content: space-between; }
.k-cx-otp-h small { font-size: var(--fs-12); color: var(--muted); }
.k-cx-otp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.k-cx-otp-item { display: flex; align-items: center; gap: var(--sp-10); inline-size: 100%; padding: var(--sp-6) var(--sp-8); border-radius: var(--r-8); text-align: start; font-size: var(--fs-13); color: var(--text-2); }
.k-cx-otp-item:hover { background: var(--s2); color: var(--text); }
.k-cx-otp-item .k-mono { inline-size: var(--sp-20); color: var(--muted); }
.k-cx-otp-t { flex: 1 1 0; min-inline-size: 0; }
.k-cx-otp-n { padding: 0 var(--sp-6); border-radius: var(--r-pill); background: var(--code); color: var(--code-ink); font: var(--fs-11) var(--font-mono); }
.k-cx-qr { margin-block-start: var(--sp-16); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-14); background: var(--s1); box-shadow: inset var(--bar-3) 0 0 var(--code); }
.k-cx-qr-h { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--sp-8); }
.k-cx-qr-code { margin: 0; padding: var(--sp-10) var(--sp-12); border-radius: var(--r-10); background: var(--code-bg); font-size: var(--fs-12); line-height: 1.6; white-space: pre-wrap; }
.k-cx-qr-rules { margin: var(--sp-8) 0 0; padding-inline-start: var(--sp-18); font-size: var(--fs-12-5); color: var(--text-2); }

/* Practice (26e) */
.k-cx-pills { margin-block-end: var(--sp-14); }
.k-cx-q { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-18) var(--sp-20); }
.k-cx-q-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-10); }
.k-cx-q-how { font-size: var(--fs-12); color: var(--muted); }
.k-cx-q-t { margin: 0; font-size: var(--fs-16); }
.k-cx-q-sub { margin: 0; color: var(--text-2); font-size: var(--fs-13); }
.k-cx-q-code { margin: 0; padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--code-bg); font-size: var(--fs-13); line-height: var(--cx-lh); font-variant-ligatures: none; white-space: pre; overflow-x: auto; }
.k-cx-fill { white-space: pre-wrap; }
.k-cx-gap { inline-size: auto; min-inline-size: 6ch; padding: 0 var(--sp-6); border: 0; border-radius: var(--r-6); background: var(--s2); box-shadow: inset 0 calc(var(--hairline) * -2) 0 var(--code); font: inherit; color: var(--text); }
.k-cx-gap:focus-visible { outline: var(--focus-width) solid var(--code); outline-offset: var(--hairline); }
.k-cx-q-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); }
.k-cx-q-in { flex: 1 1 var(--sp-64); font-family: var(--font-mono); }
.k-cx-q-out { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.k-cx-q-out > .k-cx-res, .k-cx-q-out > .k-cx-err { align-self: stretch; }
.k-cx-q-end { font-size: var(--fs-12-5); color: var(--muted); }
.k-cx-verdict { margin: 0; font-size: var(--fs-14); }
.k-cx-verdict[data-state~="right"] b { color: var(--green); }
.k-cx-verdict[data-state~="wrong"] b, .k-cx-verdict[data-state~="wrong"] { color: var(--alarm); }
.k-cx-why { margin: 0; font-size: var(--fs-13); color: var(--text-2); }

/* Tasks tab */
.k-cx-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-cx-task { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-14); padding: var(--sp-12) var(--sp-16); border-radius: var(--r-16); background: var(--s1); }
.k-cx-task-txt { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
.k-cx-task-meta { font-size: var(--fs-12); color: var(--muted); }
.k-cx-task-st { font-size: var(--fs-12-5); color: var(--text-2); white-space: nowrap; }
.k-cx-task[data-state~="pass"] .k-cx-task-st { color: var(--green); }

/* ================= the task editor (26f) ================= */
.k-cx-taskpage { display: flex; flex-direction: column; gap: var(--sp-14); padding: var(--sp-18) var(--sp-22); min-block-size: 100%; }
.k-cx-taskhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-14); flex-wrap: wrap; }
.k-cx-taskhead-txt { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
.k-cx-crumb { font-size: var(--fs-12-5); color: var(--muted); }
.k-cx-crumb .k-link { font-size: inherit; }
.k-cx-task-title { display: flex; align-items: center; gap: var(--sp-10); margin: 0; font-size: var(--fs-22); }
.k-cx-taskhead-act { display: flex; align-items: center; gap: var(--sp-10); }
.k-cx-timer { font-size: var(--fs-12-5); color: var(--muted); white-space: nowrap; }
.k-cx-showtask { display: none; }
.k-cx-taskpage[data-state~="collapsed"] .k-cx-showtask { display: inline-flex; }
.k-cx-phonebadge { align-self: flex-start; padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); background: color-mix(in oklch, var(--amber) 18%, transparent); color: var(--amber); font-size: var(--fs-12); }
.k-cx-taskgrid { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--cx-task-w); gap: var(--sp-16); align-items: start; }
.k-cx-taskpage[data-state~="collapsed"] .k-cx-taskgrid { grid-template-columns: minmax(0, 1fr) var(--cx-strip-w); }
.k-cx-codecol { display: flex; flex-direction: column; gap: var(--sp-12); min-inline-size: 0; }
.k-cx-respanel { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-16); background: var(--s1); }
.k-cx-respanel-h { display: flex; align-items: center; gap: var(--sp-10); }
.k-cx-pane { display: flex; flex-direction: column; gap: var(--sp-10); max-block-size: var(--cx-res-max-h); overflow: auto; }
.k-cx-stdinrow { display: flex; align-items: center; gap: var(--sp-8); }
.k-cx-stdin-l { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-cx-stdin { flex: 1 1 0; min-inline-size: 0; }
.k-cx-outbody { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-cx-outbody > .k-cx-out-pre { padding: var(--sp-10) var(--sp-12); border-radius: var(--r-10); background: var(--code-bg); }
.k-cx-problems { margin: 0; padding-inline-start: var(--sp-18); font-size: var(--fs-13); }
.k-cx-taskpanel { position: sticky; inset-block-start: var(--sp-14); display: flex; flex-direction: column; min-inline-size: 0; }
.k-cx-strip { display: none; }
.k-cx-taskpage[data-state~="collapsed"] .k-cx-tp { display: none; }
.k-cx-taskpage[data-state~="collapsed"] .k-cx-strip { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); inline-size: var(--cx-strip-w); padding: var(--sp-12) 0; border-radius: var(--r-14); background: var(--s1); }
.k-cx-strip-t, .k-cx-strip-h { writing-mode: vertical-rl; font-size: var(--fs-12-5); color: var(--text-2); }
.k-cx-strip-h { color: var(--code); }
.k-cx-tp { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-18); background: var(--s1); }
.k-cx-tp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.k-cx-tp-body { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cx-stmt { font-size: var(--fs-14); }
.k-cx-exh { display: flex; align-items: baseline; justify-content: space-between; }
.k-cx-ex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-12); background: var(--s2); overflow: hidden; }
.k-cx-ex > div { padding: var(--sp-8) var(--sp-12); min-inline-size: 0; }
.k-cx-ex > div + div { border-inline-start: var(--hairline) solid var(--line); }
.k-cx-ex-k { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-cx-ex pre { margin: var(--sp-4) 0 0; font-size: var(--fs-12-5); white-space: pre-wrap; color: var(--text); }
.k-cx-hintcall p { margin: 0; }
.k-cx-answer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.k-cx-see { color: var(--muted); font-size: var(--fs-13); }
.k-cx-answer-pane { align-self: stretch; display: flex; flex-direction: column; gap: var(--sp-6); }

/* the phone's symbol key bar (26v) */
.k-cx-keys { position: sticky; inset-block-end: 0; z-index: var(--z-sticky); display: flex; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-12); background: var(--s2); overflow-x: auto; }
.k-cx-key { flex: 0 0 auto; min-inline-size: var(--cx-key-w); block-size: var(--cx-key-h); border-radius: var(--r-8); background: var(--s1); font: var(--fs-16) var(--font-mono); color: var(--text); }
.k-cx-phonelater { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-18); }
.k-cx-phonelater > .k-cx-files { align-self: stretch; }

/* ================= retrieval (26h) ================= */
.k-cx-rgrid { display: grid; grid-template-columns: var(--cx-rlist-w) minmax(0, 1fr); gap: var(--sp-18); align-items: start; }
.k-cx-rlistcard { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-cx-rpos { margin-inline-start: auto; font-size: var(--fs-12); color: var(--muted); }
.k-cx-rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.k-cx-rlist:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-10); }
.k-cx-ritem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-10); padding: var(--sp-8) var(--sp-10); border-radius: var(--r-10); cursor: pointer; }
.k-cx-ritem:hover { background: var(--s2); }
.k-cx-ritem[aria-selected="true"] { background: var(--s2); box-shadow: inset var(--bar-3) 0 0 var(--code); }
.k-cx-ritem[data-state~="done"] { opacity: 0.55; }
.k-cx-ritem-n { color: var(--muted); font-size: var(--fs-12); }
.k-cx-ritem-t { display: flex; flex-direction: column; min-inline-size: 0; }
.k-cx-ritem-t b { font-size: var(--fs-13-5); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-cx-ritem-t small { font-size: var(--fs-11-5); color: var(--muted); }
.k-cx-ritem-d { display: inline-flex; align-items: center; gap: var(--sp-4); font: var(--fs-12) var(--font-mono); color: var(--text-2); white-space: nowrap; }
.k-cx-rstage { display: flex; flex-direction: column; gap: var(--sp-14); min-inline-size: 0; }
.k-cx-rcard { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-18) var(--sp-20); }
.k-cx-rcard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); }
.k-cx-rcard-t { margin: 0; font-size: var(--fs-18); }
.k-cx-params { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); font-size: var(--fs-12-5); }
.k-cx-outcome { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--s2); }
.k-cx-outcome p { margin: 0; }
.k-cx-outcome[data-state~="proven"] > p:first-child b { color: var(--green); }
.k-cx-outcome[data-state~="again"] > p:first-child b { color: var(--alarm); }
.k-cx-outcome .k-cx-reward { background: var(--s1); }
.k-cx-try { align-self: stretch; display: flex; flex-direction: column; gap: var(--sp-6); }
.k-cx-rnext-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.k-cx-rnext-l li { display: grid; grid-template-columns: var(--cx-when-w) var(--cx-mapcol-w) minmax(0, 1fr); gap: var(--sp-10); padding: var(--sp-8) 0; border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13); }
.k-cx-rnext-l .k-mono { color: var(--muted); font-size: var(--fs-12); }

/* ================= the skill map (26i) ================= */
.k-cx-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-12); }
.k-cx-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); padding: var(--sp-12) var(--sp-16); border-radius: var(--r-16); background: var(--s1); text-align: start; }
.k-cx-tile:hover { background: var(--s2); }
.k-cx-tile[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--hairline) var(--code); }
.k-cx-tile-k { display: inline-flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-12); color: var(--muted); }
.k-cx-tile b { font-size: var(--fs-26); font-weight: var(--weight-semibold); }
.k-cx-skills { display: grid; grid-template-columns: minmax(0, 1fr) var(--cx-skside-w); gap: var(--sp-18); align-items: start; margin-block-start: var(--sp-14); }
/* the skill map (16 October 2026): one stack of unit cards that fold open,
   every row on the same columns, every status pill the same size */
.k-cx-units { display: flex; flex-direction: column; gap: var(--sp-10); min-inline-size: 0; }
.k-cx-unitcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.k-cx-acc-h { display: grid; grid-template-columns: var(--cx-acc-ref-w) minmax(0, var(--cx-acc-t-w)) minmax(var(--cx-acc-bar-min), 1fr) auto var(--cx-acc-n-w) var(--cx-acc-chev); align-items: center; gap: var(--sp-12); inline-size: 100%; padding: var(--sp-12) var(--sp-16); background: none; border: 0; color: var(--text); text-align: start; cursor: pointer; font-size: var(--fs-14); }
.k-cx-acc-h:hover { background: var(--s2); }
.k-cx-acc-h:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(var(--focus-width) * -1); }
.k-cx-acc-ref { color: var(--code); font-size: var(--fs-12); }
.k-cx-acc-t { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semibold); }
.k-cx-acc-bar { margin: 0 0 0 var(--sp-12); }
.k-cx-acc-ring { inline-size: var(--cx-acc-ring); block-size: var(--cx-acc-ring); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--code) var(--p, 0%), var(--line) 0); }
.k-cx-acc-ring > span { inline-size: calc(var(--cx-acc-ring) - var(--sp-6)); block-size: calc(var(--cx-acc-ring) - var(--sp-6)); border-radius: 50%; background: var(--s1); }
.k-cx-acc-n { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.k-cx-acc-n b { font-size: var(--fs-13); font-weight: var(--weight-semibold); }
.k-cx-acc-n small { font-size: var(--fs-11); color: var(--muted); }
.k-cx-acc-chev { justify-self: end; color: var(--muted); font-size: var(--fs-16); transition: transform var(--dur-fast) ease; transform: rotate(-90deg); }
.k-cx-acc-h[aria-expanded="true"] .k-cx-acc-chev { transform: none; }
.k-cx-unitcard[data-state~="open"] .k-cx-acc-h { border-block-end: var(--hairline) solid var(--line); }
.k-cx-later-units { display: grid; grid-template-columns: var(--cx-acc-ref-w) auto minmax(0, 1fr); align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); background: none; outline: var(--hairline) dashed var(--line); outline-offset: calc(var(--hairline) * -1); text-align: start; font-size: var(--fs-14); }
.k-cx-later-units .k-muted { justify-self: end; font-size: var(--fs-12); }
.k-cx-skl { list-style: none; margin: 0; padding: var(--sp-6); display: flex; flex-direction: column; }
.k-cx-skl[hidden] { display: none; }
.k-cx-skrow { display: grid; grid-template-columns: var(--cx-dot) minmax(0, var(--cx-skname-w)) minmax(0, 1fr) var(--cx-spill-w) var(--cx-age-w) var(--cx-acc-chev); align-items: center; gap: var(--sp-12); inline-size: 100%; min-block-size: var(--cx-skrow-h); padding: 0 var(--sp-10); border: 0; border-radius: var(--r-8); background: none; color: var(--text); cursor: pointer; text-align: start; font-size: var(--fs-13); }
.k-cx-skl li + li .k-cx-skrow { box-shadow: inset 0 var(--hairline) 0 var(--line); }
.k-cx-skrow:hover { background: var(--s2); }
.k-cx-skrow:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(var(--focus-width) * -1); }
.k-cx-skrow[aria-pressed="true"] { background: var(--s2); box-shadow: inset var(--bar-3) 0 0 var(--code); }
.k-cx-skrow-n { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-cx-skrow-l { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); color: var(--muted); }
.k-cx-skrow-l .k-mono { color: var(--text-2); }
.k-cx-skrow-d { text-align: end; font-size: var(--fs-12); color: var(--text-2); }
.k-cx-skrow-go { justify-self: end; color: var(--muted); }
.k-cx-skrow-d[data-band="b3"], .k-cx-rusty-l [data-band="b3"] { color: var(--amber); }
/* the status pill: one size for every state; the band sets only its tone */
.k-cx-spill { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-4); inline-size: var(--cx-spill-w); block-size: var(--cx-spill-h); border-radius: var(--r-pill); font-size: var(--fs-11-5); white-space: nowrap; color: var(--code); background: color-mix(in oklch, var(--code) 14%, transparent); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--code) 45%, transparent); }
.k-cx-spill[data-band="b1"] { color: color-mix(in oklch, var(--code) 70%, var(--text-2)); }
.k-cx-spill[data-band="b2"] { color: var(--text-2); background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-cx-spill[data-band="b3"] { color: var(--amber); background: color-mix(in oklch, var(--amber) 12%, transparent); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--amber) 45%, transparent); }
.k-cx-spill[data-band="np"] { color: var(--text-2); background: none; box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-cx-spill[data-band="later"] { color: var(--muted); background: none; box-shadow: none; outline: var(--hairline) dashed var(--line); outline-offset: calc(var(--hairline) * -1); }
/* the side column's band legend, which also filters */
.k-cx-sksum { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-16) var(--sp-18); }
.k-cx-bandlist { display: flex; flex-direction: column; }
.k-cx-bandrow { display: grid; grid-template-columns: var(--cx-dot) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-10); min-block-size: var(--insp-row); padding: 0 var(--sp-8); border: 0; border-radius: var(--r-8); background: none; color: var(--text-2); cursor: pointer; text-align: start; font-size: var(--fs-13); }
.k-cx-bandrow:hover { background: var(--s2); }
.k-cx-bandrow[aria-pressed="true"] { background: var(--s2); color: var(--text); box-shadow: inset var(--bar-3) 0 0 var(--code); }
.k-cx-bandrow b { color: var(--text); font-weight: var(--weight-semibold); }
.k-cx-skside { display: flex; flex-direction: column; gap: var(--sp-14); position: sticky; inset-block-start: var(--sp-14); }
.k-cx-concept { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-16) var(--sp-18); }
.k-cx-concept-h { display: flex; align-items: center; justify-content: space-between; }
.k-cx-concept-n { margin: 0; font-size: var(--fs-18); }
.k-cx-concept p { margin: 0; font-size: var(--fs-12-5); }
.k-cx-concept-days { color: var(--text-2); }
.k-cx-concept-days b { font-size: var(--fs-32); font-weight: var(--weight-semibold); color: var(--text); margin-inline-end: var(--sp-6); }
.k-cx-rusty-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.k-cx-rusty-l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-10); padding-block: var(--sp-6); font-size: var(--fs-13); }

/* ================= the curriculum map (26b) and a track (26t) ================= */
.k-cx-mapbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); margin-block-end: var(--sp-12); }
.k-cx-banner { flex: 1 1 var(--cx-set-min); display: flex; align-items: baseline; gap: var(--sp-6); margin: 0; padding: var(--sp-10) var(--sp-14); border-radius: var(--r-12); background: var(--s1); font-size: var(--fs-13); color: var(--text-2); }
.k-cx-mapbar { margin-block-end: var(--sp-16); }
.k-cx-map { display: flex; flex-direction: column; gap: var(--sp-24); }
.k-cx-mapcore { padding: var(--sp-16) var(--sp-18); }
.k-cx-maptbl { display: flex; flex-direction: column; }
.k-cx-maprow { display: grid; grid-template-columns: minmax(0, 1fr) var(--cx-mapcol-n) var(--cx-mapcol-s) var(--cx-mapcol-w) var(--cx-mapcol-st); align-items: center; gap: var(--sp-10); inline-size: 100%; padding: var(--sp-8) var(--sp-6); border-radius: var(--r-10); text-align: start; font-size: var(--fs-13); }
button.k-cx-maprow:hover { background: var(--s2); }
.k-cx-maprow--h { padding-block: var(--sp-4); font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-cx-mapstage { padding: var(--sp-14) var(--sp-6) var(--sp-4); font-size: var(--fs-12); color: var(--muted); }
.k-cx-mapstage b { color: var(--text); font-size: var(--fs-13-5); }
.k-cx-mapunit { display: flex; align-items: center; gap: var(--sp-10); min-inline-size: 0; }
.k-cx-mapunit .k-cx-sq { inline-size: var(--cx-sq-compact); block-size: var(--cx-sq-compact); }
.k-cx-mapst { font-size: var(--fs-12-5); color: var(--text-2); }
.k-cx-maprow[data-state~="done"] .k-cx-mapst { color: var(--green); }
.k-cx-maprow[data-state~="current"] .k-cx-mapst { color: var(--code); }
.k-cx-maprow[data-state~="later"] .k-cx-mapst { color: var(--muted); }
.k-cx-mapcap { color: var(--text-2); }
.k-cx-mapcap .k-cx-mapst { color: var(--muted); }
.k-cx-mapside { display: flex; flex-direction: column; gap: var(--sp-24); }
.k-cx-branchgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cx-set-min), 1fr)); gap: var(--sp-12); align-items: stretch; }
.k-cx-branchgrid > .k-cx-branch { block-size: 100%; }
.k-cx-branches { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-cx-branch { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-14); background: none; outline: var(--hairline) dashed var(--line); outline-offset: calc(var(--hairline) * -1); text-align: start; }
.k-cx-branch:hover { background: var(--s1); }
.k-cx-branch-h { display: flex; align-items: baseline; gap: var(--sp-8); inline-size: 100%; font-size: var(--fs-14); }
.k-cx-branch-h .k-mono { color: var(--muted); font-size: var(--fs-12); }
.k-cx-branch-h small { margin-inline-start: auto; font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-cx-needs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); font-size: var(--fs-12); color: var(--muted); }
.k-cx-need { padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); box-shadow: inset 0 0 0 var(--hairline) var(--line); color: var(--text-2); font-size: var(--fs-12); }
.k-cx-need[data-state~="met"] { background: color-mix(in oklch, var(--code) 16%, transparent); box-shadow: none; color: var(--code); }
.k-cx-branch-f { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); font-size: var(--fs-12); color: var(--text-2); }
.k-cx-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-18); }
.k-cx-track > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* a track's parts (T1…): one card each, three across */
.k-cx-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-18); margin-block-start: var(--sp-18); }
.k-cx-part { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-16) var(--sp-18); }
.k-cx-part[data-state~="later"] { opacity: 0.78; }
.k-cx-partlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-13); }
.k-cx-partlesson { display: inline; text-align: start; }
.k-cx-partlesson .k-mono { color: var(--text-2); }
.k-cx-partproj { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-10); padding: var(--sp-10) var(--sp-12); border-radius: var(--r-12); background: var(--s2); font-size: var(--fs-13); }
.k-cx-partproj .k-kicker { flex: 0 0 100%; }
.k-cx-partproj .k-btn { margin-inline-start: auto; }
.k-cx-track .k-card { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-16) var(--sp-18); }
.k-cx-track-about { margin: 0; font-size: var(--fs-14); }

/* ================= settings (26r) ================= */
.k-cx-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-18); align-items: stretch; }
.k-cx-settings > .k-card { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-16) var(--sp-18); }
.k-cx-set-wide { grid-column: 1 / -1; }
.k-cx-runstates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
.k-cx-runstate { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--s2); }
.k-cx-runstate[data-state~="on"] b { color: var(--green); }
.k-cx-runstate small { font-size: var(--fs-12); color: var(--muted); }
.k-cx-runstate-acts { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-block-start: var(--sp-6); }
.k-cx-runstate[data-state~="failed"] b { color: var(--alarm); }
.k-cx-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); min-block-size: var(--hit); font-size: var(--fs-13); }
.k-cx-range { inline-size: 100%; accent-color: var(--code); }
.k-cx-never { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-13); }
.k-cx-never span { color: var(--green); }

/* ================= a capstone checkpoint (26l, 26k) ================= */
button.k-cx-dia { padding: 0; border: 0; background: transparent; cursor: pointer; }
button.k-cx-dia[data-state~="passed"] { background: var(--code); }
.k-cx-mapcap[data-state~="next"] .k-cx-mapst { color: var(--code); }
.k-cx-capmini { display: none; margin: 0; font-size: var(--fs-14); color: var(--text-2); }
.k-cx-cap { display: flex; flex-direction: column; gap: var(--sp-18); }
.k-cx-steps { display: flex; gap: var(--sp-4); margin: 0; padding: var(--sp-4); list-style: none; border-radius: var(--r-14); background: var(--s1); overflow-x: auto; }
.k-cx-stepli { flex: 1 1 0; min-inline-size: 0; }
.k-cx-step { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); inline-size: 100%; min-block-size: var(--sp-40); padding: var(--sp-6) var(--sp-10); border: 0; border-radius: var(--r-10); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-13); cursor: pointer; }
.k-cx-step:hover { background: var(--s2); }
.k-cx-step[data-state~="current"] { background: var(--s2); color: var(--text); font-weight: var(--weight-semibold); }
.k-cx-step-n { flex: 0 0 auto; display: grid; place-items: center; inline-size: var(--cx-step-n); block-size: var(--cx-step-n); border-radius: 50%; box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); font: var(--weight-semibold) var(--fs-12) var(--font-mono); }
.k-cx-step[data-state~="current"] .k-cx-step-n { box-shadow: none; background: var(--code); color: var(--bg); }
.k-cx-step[data-state~="done"] .k-cx-step-n { box-shadow: none; background: color-mix(in oklch, var(--green) 20%, transparent); color: var(--green); }
.k-cx-step-t { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-cx-capbody { display: flex; flex-direction: column; gap: var(--sp-16); min-inline-size: 0; }
.k-cx-capacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); }
/* a step: the work and a side panel, filling the width */
.k-cx-capgrid { display: grid; grid-template-columns: minmax(0, 1fr) var(--cx-cap-side-w); gap: var(--sp-18); align-items: stretch; }
.k-cx-capmain { display: flex; flex-direction: column; gap: var(--sp-14); min-inline-size: 0; }
.k-cx-capside { display: flex; flex-direction: column; gap: var(--sp-14); min-inline-size: 0; position: sticky; inset-block-start: var(--sp-14); align-self: start; }
.k-cx-capcard { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-cx-capcover { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-8); font-size: var(--fs-13); }
.k-cx-capcover li { display: flex; align-items: center; gap: var(--sp-10); }
.k-cx-capcover-m { flex: 0 0 auto; display: grid; place-items: center; inline-size: var(--cx-step-n); block-size: var(--cx-step-n); border-radius: 50%; background: var(--s2); font: var(--weight-semibold) var(--fs-12) var(--font-mono); color: var(--muted); }
.k-cx-capcover li[data-state~="right"] .k-cx-capcover-m { background: color-mix(in oklch, var(--green) 20%, transparent); color: var(--green); }
.k-cx-capcover li[data-state~="wrong"] .k-cx-capcover-m { background: var(--alarm-soft); color: var(--alarm-ink); }
.k-cx-capqres { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cx-capmiss, .k-cx-capleft, .k-cx-capprompts { margin: 0; padding-inline-start: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-14); }
/* brief & build: the 26k workspace — toolbar, centre, milestones, status */
.k-cx-ws { display: grid; grid-template-columns: minmax(0, 1fr) var(--cx-ws-ms-w); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar bar" "centre ms" "status status"; border-radius: var(--r-14); background: var(--s1); overflow: hidden; }
.k-cx-ws-bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); padding: var(--sp-8) var(--sp-12); border-block-end: var(--hairline) solid var(--line); }
.k-cx-ws-name { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); }
.k-cx-ws-count { color: var(--muted); font-size: var(--fs-12); }
.k-cx-ws-acts { display: flex; gap: var(--sp-8); margin-inline-start: auto; }
.k-cx-ws-centre { grid-area: centre; display: flex; flex-direction: column; min-inline-size: 0; border-inline-end: var(--hairline) solid var(--line); }
.k-cx-ws-centre > .k-ced { border-radius: 0; }
.k-cx-ws-tool { display: flex; flex-direction: column; border-block-start: var(--hairline) solid var(--line); }
.k-cx-ws-tool-h { padding: var(--sp-6) var(--sp-10); border-block-end: var(--hairline) solid var(--line); }
.k-cx-ws-pane { padding: var(--sp-10) var(--sp-12); max-block-size: var(--cx-res-max-h); overflow: auto; }
.k-cx-caprun { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-12); }
.k-cx-caprun-in, .k-cx-caprun-out { display: flex; flex-direction: column; gap: var(--sp-6); min-inline-size: 0; }
.k-cx-capstdin { resize: vertical; font-size: var(--fs-13); }
/* the column takes the centre's height (block-size 0, min 100%) and scrolls inside */
.k-cx-ws-ms { grid-area: ms; display: flex; flex-direction: column; min-inline-size: 0; block-size: 0; min-block-size: 100%; }
.k-cx-ws-ms-h { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-12); border-block-end: var(--hairline) solid var(--line); }
.k-cx-ws-nums { display: flex; gap: var(--sp-6); }
.k-cx-ws-num { flex: 1 1 0; display: grid; place-items: center; min-block-size: var(--sp-32); text-align: center; border: 0; border-radius: var(--r-8); background: var(--s2); color: var(--text-2); font: var(--weight-semibold) var(--fs-13) var(--font-mono); cursor: pointer; }
.k-cx-ws-num[data-state~="done"] { background: color-mix(in oklch, var(--green) 20%, transparent); color: var(--green); }
.k-cx-ws-num[data-state~="fail"] { box-shadow: inset 0 0 0 var(--ring-1-5) var(--alarm); }
.k-cx-ws-num[data-state~="current"] { background: var(--code); color: var(--bg); }
.k-cx-ws-ms-body { flex: 1 1 0; min-block-size: 0; display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-12); overflow: auto; }
.k-cx-ws-ms-body > * { flex-shrink: 0; }
.k-cx-ws-mt { margin: 0; font-size: var(--fs-16); }
.k-cx-ws-ex { grid-template-columns: minmax(0, 1fr); }
.k-cx-ws-ex > div + div { border-inline-start: 0; border-block-start: var(--hairline) solid var(--line); }
.k-cx-ws-last { margin: 0; padding: var(--sp-8) var(--sp-10); border-radius: var(--r-10); background: var(--s2); font-size: var(--fs-13); color: var(--text-2); }
.k-cx-ws-last[data-state~="pass"] { color: var(--green); }
.k-cx-ws-last[data-state~="fail"] { color: var(--alarm-ink); background: var(--alarm-soft); }
.k-cx-ws-ms-f { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.k-cx-ws-bt { margin: var(--sp-10) 0 0; padding-block-start: var(--sp-14); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-15); }
.k-cx-ws-status { grid-area: status; display: flex; flex-wrap: wrap; gap: var(--sp-16); padding: var(--sp-6) var(--sp-12); border-block-start: var(--hairline) solid var(--line); font: var(--fs-12) var(--font-mono); color: var(--muted); }
.k-cx-ws-saved { margin-inline-end: auto; }
.k-cx-capbrief table { font-size: var(--fs-13); }
/* the rubric: a full-width table */
.k-cx-rubric { display: flex; flex-direction: column; border: var(--hairline) solid var(--line); border-radius: var(--r-12); overflow: hidden; }
.k-cx-rubrow { display: grid; grid-template-columns: minmax(0, 1.2fr) var(--cx-mapcol-st) var(--cx-rub-mark-w) minmax(0, 1.6fr); align-items: center; gap: var(--sp-16); padding: var(--sp-12) var(--sp-16); }
.k-cx-rubrow + .k-cx-rubrow { border-block-start: var(--hairline) solid var(--line); }
.k-cx-rubrow--h { padding-block: var(--sp-8); font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-cx-rubrow--total { background: var(--s1); font-weight: var(--weight-semibold); }
.k-cx-rub-t { font-weight: var(--weight-semibold); }
.k-cx-rub-k, .k-cx-rub-g { color: var(--muted); font-size: var(--fs-13); }
.k-cx-rub-v { justify-self: start; }
.k-cx-rubrow--total .k-cx-rub-g { font-weight: var(--weight-regular); }
.k-cx-rubseg .k-seg-item[aria-checked="true"] { background: var(--code); color: var(--bg); font-weight: var(--weight-semibold); }
/* review, write-up, result */
.k-cx-capwait, .k-cx-capfail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); margin: 0; padding: var(--sp-10) var(--sp-12); border-radius: var(--r-10); background: var(--s1); font-size: var(--fs-13); }
.k-cx-capfail { color: var(--alarm-ink); background: var(--alarm-soft); }
.k-cx-capintro { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6); }
.k-cx-capintro-h { margin: 0; font-size: var(--fs-16); font-weight: var(--weight-semibold); }
.k-cx-sentlist { margin: var(--sp-8) 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-cx-sentlist--quiet { margin: 0; font-size: var(--fs-13); }
.k-cx-sentlist--quiet li { display: flex; gap: var(--sp-8); }
.k-cx-sent-m { color: var(--code); }
.k-cx-sentitem { display: flex; align-items: center; gap: var(--sp-8); }
.k-cx-capwrite { flex: 1 1 auto; inline-size: 100%; min-block-size: var(--cx-capwrite-h); resize: vertical; font-size: var(--fs-15); line-height: var(--lh-body); }
.k-cx-capwords { margin: 0 auto 0 0; font-size: var(--fs-13); color: var(--muted); }
.k-cx-capwords[data-state~="enough"] { color: var(--green); }
.k-cx-capmini-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); margin: 0; }
.k-cx-capmini-facts dt { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-cx-capmini-facts dd { margin: var(--sp-2) 0 0; font-size: var(--fs-14); }
.k-cx-capresult { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-18) var(--sp-20); border-radius: var(--r-14); background: var(--s1); }
.k-cx-capresult[data-state~="passed"] { background: color-mix(in oklch, var(--green) 12%, var(--s1)); }
.k-cx-capresult-h { margin: 0 0 var(--sp-4); font-size: var(--fs-20); font-weight: var(--weight-semibold); }
.k-cx-capresult[data-state~="passed"] .k-cx-capresult-h { color: var(--green); }
.k-cx-capresult .k-cx-note { margin: 0; }
.k-cx-capresult .k-cx-reward { margin: 0; background: var(--s1); color: var(--gold); font-family: var(--font-mono); }
.k-cx-capresult-act { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-6); }
.k-cx-capfacts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-10); margin: 0; }
.k-cx-capfact { padding: var(--sp-12) var(--sp-14); border-radius: var(--r-10); background: var(--s1); }
.k-cx-capfact dt { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-cx-capfact dd { margin: var(--sp-4) 0 0; font-size: var(--fs-15); }

/* ================= files on the in-app disk (unit 6) ================= */
.k-cx-files { border-radius: var(--r-10); background: var(--s2); margin-block-end: var(--sp-8); }
.k-cx-files-s { padding: var(--sp-8) var(--sp-12); font-size: var(--fs-13); color: var(--text-2); cursor: pointer; }
.k-cx-files-b { display: flex; flex-direction: column; gap: var(--sp-8); padding: 0 var(--sp-12) var(--sp-12); }
.k-cx-file { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
.k-cx-file-h { display: flex; align-items: baseline; gap: var(--sp-8); font-size: var(--fs-13); }
.k-cx-file-ic { color: var(--code); }
.k-cx-file-n { margin-inline-start: auto; color: var(--muted); font-size: var(--fs-12); }
.k-cx-file-tag { padding: 0 var(--sp-6); border-radius: var(--r-pill); background: var(--s2); color: var(--code); font-size: var(--fs-11); }
.k-cx-file-pre { margin: 0; padding: var(--sp-8) var(--sp-10); border-radius: var(--r-8); background: var(--code-bg); font-size: var(--fs-12-5); white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: var(--cx-res-max-h); overflow: auto; }
.k-cx-written { display: flex; flex-direction: column; gap: var(--sp-8); margin-block-start: var(--sp-10); }

/* ================= GitHub (settings) ================= */
.k-cx-gh { display: flex; flex-direction: column; gap: var(--sp-10); grid-column: span 2; }
.k-cx-gh-steps { margin: 0; padding-inline-start: var(--sp-18); display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-13); color: var(--text-2); }
.k-cx-gh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.k-cx-gh-act { display: flex; gap: var(--sp-10); align-items: center; }
.k-cx-gh-act .k-input { flex: 1 1 auto; }
.k-cx-gh .k-cx-note[data-tone="warn"] { color: var(--amber); }
/* v1 tucked under the App (docs/github-app-plan.md §4) */
.k-cx-gh-token { display: flex; flex-direction: column; gap: var(--sp-10); padding-block-start: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-cx-gh-token > summary { cursor: pointer; font-size: var(--fs-13); color: var(--text-2); }
.k-cx-gh-token[open] > summary { margin-block-end: var(--sp-10); }

/* ================= katas ================= */
.k-cx-kata { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-cx-kata-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-18); align-items: stretch; }
.k-cx-kata-start, .k-cx-kata-end, .k-cx-kata-hist { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-18) var(--sp-20); }
.k-cx-kata-t { margin: 0; font-size: var(--fs-22); }
.k-cx-kata-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); margin-block-start: var(--sp-6); }
.k-cx-kata-bar { display: flex; align-items: center; gap: var(--sp-14); }
.k-cx-kata-bar .k-kicker { flex: 1 1 auto; min-inline-size: 0; }
.k-cx-kata-clock { font-size: var(--fs-15); color: var(--text-2); }
.k-cx-kata-bar [hidden] { display: none; }

/* ================= breakpoints, widest first ================= */
@media (max-width: 1240px) {
.k-cx-hero-path { grid-column: 1 / -1; }
/* a narrower hero: the stage titles drop their "Stage n" prefix */
.k-cx-path[data-state~="spread"] .k-cx-stage-h .k-mono { display: none; }
/* …and Bridge B, one stop wide, is named by its square alone */
.k-cx-path[data-state~="spread"] .k-cx-stage[data-bridge] .k-cx-stage-h { visibility: hidden; }
}

@media (max-width: 1080px) {
.k-cx-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cx-capgrid { grid-template-columns: minmax(0, 1fr); }
.k-cx-capside { position: static; }
.k-cx-ws { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "centre" "ms" "status"; }
.k-cx-ws-centre { border-inline-end: 0; border-block-end: var(--hairline) solid var(--line); }
.k-cx-ws-ms { block-size: auto; min-block-size: 0; }
.k-cx-ws-ms-body { max-block-size: var(--cx-ws-ms-max-h); }
.k-cx-capfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-cx-rubrow { grid-template-columns: minmax(0, 1fr) var(--cx-rub-mark-w) minmax(0, 1fr); }
.k-cx-rub-k { display: none; }
.k-cx-taskgrid { grid-template-columns: minmax(0, 1fr) var(--cx-task-w-1080); }
.k-cx-rgrid { grid-template-columns: minmax(0, 1fr); }
.k-cx-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cx-settings > .k-cx-gh { grid-column: auto; }
.k-cx-settings > :last-child { grid-column: 1 / -1; }
.k-cx-close { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cx-close > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
.k-cx-gh-form { grid-template-columns: minmax(0, 1fr); }
.k-cx-kata-grid { grid-template-columns: minmax(0, 1fr); }
.k-cx-skills { grid-template-columns: minmax(0, 1fr); }
.k-cx-skside { position: static; }
.k-cx-bandlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-12); }
.k-cx-step-t { display: none; }
.k-cx-step[data-state~="current"] .k-cx-step-t { display: inline; }
.k-cx-stepli:has(> [data-state~="current"]) { flex: 2 1 auto; }
.k-cx-caprun { grid-template-columns: minmax(0, 1fr); }
.k-cx-taskgrid, .k-cx-taskpage[data-state~="collapsed"] .k-cx-taskgrid { grid-template-columns: minmax(0, 1fr); }
.k-cx-taskpanel { position: static; order: -1; }
.k-cx-showtask { display: none; }
.k-cx-maprow { grid-template-columns: minmax(0, 1fr) var(--cx-mapcol-s) var(--cx-mapcol-st); }
.k-cx-maprow > :nth-child(2), .k-cx-maprow > :nth-child(4) { display: none; }
.k-cx-settings { grid-template-columns: minmax(0, 1fr); }
.k-cx-track { grid-template-columns: minmax(0, 1fr); }
.k-cx-parts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
/* the phone shows the current stage alone, so the path is a plain row */
.k-cx-path[data-state~="spread"], .k-cx-path[data-state~="spread"] .k-cx-stage-m { display: flex; gap: var(--sp-6); }
.k-cx-path[data-state~="spread"] .k-cx-stage { display: flex; }
.k-cx-path[data-state~="spread"] .k-cx-stage-h { padding-inline-start: 0; }
.k-cx-node::after { content: none; }
.k-cx-capmini { display: block; }
.k-cx-maprow { grid-template-columns: minmax(0, 1fr) auto; }
.k-cx-maprow > :nth-child(3) { display: none; }
.k-cx-mapst { text-align: end; }
.k-cx-capstdin, .k-cx-capwrite { font-size: var(--fs-16); }
.k-cx-stage:not([data-state~="current"]) { display: none; }
.k-cx-long { display: none; }
.k-ced-hl, .k-ced-ta, .k-ced-gutter { font-size: var(--fs-16); line-height: var(--cx-lh-phone); }
.k-ced-ln { block-size: var(--cx-lh-phone); }
.k-ced-wrap::before { inset-block-start: calc(var(--sp-10) + (var(--ced-err, 0) - 1) * var(--cx-lh-phone)); block-size: var(--cx-lh-phone); }
.k-ced-hint { display: none; }
.k-cx-gap, .k-cx-q-in, .k-cx-stdin { font-size: var(--fs-16); }
.k-cx-taskpage { padding: var(--sp-12); }
.k-cx-close { grid-template-columns: minmax(0, 1fr); }
.k-cx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-cx-skrow { grid-template-columns: var(--cx-dot) minmax(0, 1fr) var(--cx-spill-w-sm) var(--cx-age-w-sm); gap: var(--sp-8); padding: 0 var(--sp-6); }
.k-cx-spill { inline-size: var(--cx-spill-w-sm); }
.k-cx-skrow-l, .k-cx-skrow-go { display: none; }
.k-cx-acc-h { grid-template-columns: var(--cx-acc-ref-w) minmax(0, 1fr) var(--cx-acc-n-w) var(--cx-acc-chev); }
.k-cx-acc-ring, .k-cx-acc-bar { display: none; }
.k-cx-bandlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cx-path .k-cx-stage:not([data-current]) { flex: 0 0 auto; }
.k-cx-taskhead-act { inline-size: 100%; }
.k-cx-taskhead-act .k-btn { flex: 1 1 0; }
.k-cx-task { grid-template-columns: minmax(0, 1fr) auto; }
.k-cx-task-st { grid-column: 1 / -1; grid-row: 2; }
.k-cx-runstates { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
.k-cx-rubrow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.k-cx-rubrow--h { display: none; }
.k-cx-capfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cx-capresult-act { align-items: flex-start; }
.k-cx-key { min-inline-size: var(--cx-key-w-sm); block-size: var(--cx-key-h-sm); }
.k-cx-sq { inline-size: var(--cx-sq-phone); block-size: var(--cx-sq-phone); }
.k-cx-rnext-l li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.k-cx-ex { grid-template-columns: minmax(0, 1fr); }
.k-cx-ex > div + div { border-inline-start: 0; border-block-start: var(--hairline) solid var(--line); }
.k-cx-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- the full runtime (26g) and compiler warnings ---------------- */
.k-cx-rtcard { background: color-mix(in oklch, var(--code) 12%, transparent); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--code) 40%, transparent); }
.k-cx-rtcard-acts { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.k-dialog.k-cx-rt { inline-size: min(var(--dialog-w), 100%); }
.k-cx-rt-pkg { display: flex; align-items: center; gap: var(--sp-12); margin-block: var(--sp-12); padding: var(--sp-12); border-radius: var(--r-12); background: var(--s2); }
.k-cx-rt-pkg > div { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-cx-rt-ic { display: grid; place-items: center; inline-size: var(--cx-rt-ic); block-size: var(--cx-rt-ic); flex: 0 0 auto; border-radius: var(--r-10); background: color-mix(in oklch, var(--code) 20%, transparent); color: var(--code); font: var(--weight-bold) var(--fs-12) / 1 var(--font-mono); }
.k-cx-rt-n { margin: 0 0 var(--sp-8); font: var(--weight-semibold) var(--fs-16) var(--font-mono); color: var(--text); }
.k-cx-rt-bar { block-size: var(--cx-rt-bar-h); border-radius: var(--r-pill); background: var(--s2); overflow: hidden; }
.k-cx-rt-bar > span { display: block; inline-size: var(--pct, 0%); block-size: 100%; background: var(--code); transition: inline-size var(--dur) var(--ease); }
.k-cx-warns { display: flex; flex-direction: column; gap: var(--sp-4); margin-block-start: var(--sp-8); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-10); background: var(--wash-amber); }
.k-cx-warns ul { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-12-5); color: var(--text-2); }
.k-cx-warns li { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: baseline; }
.k-cx-warn-m { color: var(--amber); }

/* ---------------- a Rider project: the hub (26m) and the import (26n) ---------------- */
.k-cx-rp { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-cx-rp-tabs { align-self: flex-start; }
/* the two columns end together: the shorter column's last card grows */
.k-cx-rp .k-cx-capmain, .k-cx-rp .k-cx-capside { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-cx-rp .k-cx-capmain > :last-child, .k-cx-rp .k-cx-capside > :last-child { flex: 1 1 auto; }
/* the project hub's columns stretch and fill instead of riding along */
.k-cx-rp .k-cx-capside { position: static; align-self: stretch; }
.k-cx-rp-ms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cx-cap-side-w)), 1fr)); gap: var(--sp-10); }
.k-cx-rp-ms > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.k-cx-rp-m { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--s2); box-shadow: inset var(--rail-mark) 0 0 var(--line); }
.k-cx-rp-m[data-state~="pass"] { box-shadow: inset var(--rail-mark) 0 0 var(--green); }
.k-cx-rp-m[data-state~="fail"] { box-shadow: inset var(--rail-mark) 0 0 var(--alarm); }
.k-cx-rp-mh { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8); }
.k-cx-rp-badge { margin-inline-start: auto; font-size: var(--fs-12); color: var(--muted); }
.k-cx-rp-m[data-state~="pass"] .k-cx-rp-badge { color: var(--green); }
.k-cx-rp-checks { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-12-5); }
.k-cx-rp-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-8); align-items: baseline; color: var(--text-2); }
.k-cx-rp-checks li[data-state~="pass"] > span:first-child { color: var(--green); }
.k-cx-rp-checks li[data-state~="fail"] > span:first-child { color: var(--alarm); }
.k-cx-rp-checks small { color: var(--muted); font-size: var(--fs-12); text-align: end; }
.k-cx-rp-lessons, .k-cx-rp-zip { display: flex; flex-direction: column; gap: var(--sp-6); margin: 0; padding: 0; list-style: none; }
.k-cx-rp-zip li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-8); font-size: var(--fs-12-5); color: var(--text-2); }
.k-cx-rp-steps { display: flex; flex-direction: column; gap: var(--sp-14); margin: 0; padding: 0; list-style: none; }
.k-cx-rp-steps > li { display: grid; grid-template-columns: var(--cx-rp-n) minmax(0, 1fr); gap: var(--sp-12); }
.k-cx-rp-steps h3 { margin: 0 0 var(--sp-4); font-size: var(--fs-15); }
.k-cx-rp-steps p { margin: 0 0 var(--sp-8); color: var(--text-2); }
.k-cx-rp-n { display: grid; place-items: center; inline-size: var(--cx-rp-n); block-size: var(--cx-rp-n); border-radius: var(--r-pill); background: color-mix(in oklch, var(--code) 20%, transparent); color: var(--code); font: var(--weight-semibold) var(--fs-13) var(--font-mono); }
.k-cx-rp-copy { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-12); border-radius: var(--r-10); background: var(--s2); }
.k-cx-rp-copy code { flex: 1 1 auto; min-inline-size: 0; overflow-x: auto; white-space: nowrap; }
.k-cx-rp-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-8); min-block-size: var(--cx-rp-drop-h); padding: var(--sp-18); border-radius: var(--r-14); border: var(--hairline) dashed var(--line); text-align: center; }
.k-cx-rp-drop[data-state~="over"] { border-style: solid; border-color: var(--code); background: color-mix(in oklch, var(--code) 8%, transparent); }
.k-cx-rp-banner { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--s2); }
.k-cx-rp-banner p { margin: 0; color: var(--text-2); }
.k-cx-rp-banner[data-tone~="ok"] { box-shadow: inset var(--rail-mark) 0 0 var(--green); }
.k-cx-rp-banner[data-tone~="warn"] { background: var(--wash-amber); box-shadow: inset var(--rail-mark) 0 0 var(--amber); }
.k-cx-rp-banner[data-tone~="bad"] { background: var(--alarm-wash); box-shadow: inset var(--rail-mark) 0 0 var(--alarm); }
.k-dialog.k-cx-rp-prev { inline-size: min(var(--dialog-w-lg), 100%); }
.k-cx-rp-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4) var(--sp-14); margin: 0 0 var(--sp-12); }
.k-cx-rp-dl dt { color: var(--muted); }
.k-cx-rp-dl dd { margin: 0; color: var(--text); }
.k-cx-rp-will { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.k-cx-rp-will li[data-state~="pass"] { color: var(--green); }
.k-cx-rp-hist { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.k-cx-rp-hist th, .k-cx-rp-hist td { padding: var(--sp-8) var(--sp-6); border-block-end: var(--hairline) solid var(--line); text-align: start; }
.k-cx-rp-hist th { color: var(--muted); font-weight: var(--weight-medium); }
.k-cx-rp-hist tr[data-state~="practice"] td { color: var(--muted); }
}