/* KurenaiOS — css/views/study.css · @layer views
   View compositions for Study: spine, subject desk, topic page, editor, engines, Review (M7).
   A view file may use tokens and primitives; it may not restyle a
   primitive's internals.

   Graphite step 3: the subject desk (frame 8a) first.

   Convention for every layer file: its rules sit inside ONE @layer block,
   and the block's contents are not indented, so line-anchored tooling
   (tools/lib/css.js, the smoke suites) reads them like top-level rules. */
@layer views {

/* ================= the subject desk (frame 8a) ================= */
.k-subj-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--subj-side-w); gap: var(--sp-20); }
.k-subj-row--even { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

.k-subj-hero {
display: grid;
grid-template-columns: auto minmax(0, 1.35fr) minmax(0, 1fr);
gap: var(--sp-28);
align-items: center;
padding: var(--sp-24) var(--sp-28);
border-radius: var(--r-24);
background: linear-gradient(120deg, color-mix(in oklch, var(--subj-c) 14%, var(--s1)), var(--s1) 55%);
container-type: inline-size;
position: relative;
isolation: isolate;
overflow: hidden;
}
/* the desk's painting (34l): the focal side right, the hue on the ring only;
   a desk carries words on both sides, so its scrim holds the right half too */
.k-subj-hero > .k-art { --art-pos: 70% 50%; --art-scrim: var(--art-scrim-desk); }
.k-subj-ring { inline-size: var(--subj-ring); block-size: var(--subj-ring); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--subj-c) var(--p, 0%), var(--s2) 0); }
.k-subj-ring-in { inline-size: var(--subj-ring-hole); block-size: var(--subj-ring-hole); border-radius: 50%; background: var(--s1); display: grid; place-content: center; text-align: center; line-height: 1.1; }
.k-subj-ring-in b { font-size: var(--fs-32); font-weight: var(--weight-semibold); }
.k-subj-ring-in small { font-size: var(--fs-11); color: var(--muted); }
.k-subj-id { min-inline-size: 0; }
.k-subj-name { font-size: clamp(var(--fs-26), 4.4cqi, var(--fs-38)); letter-spacing: var(--track-name); line-height: 1.05; margin-block: var(--sp-6) var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-subj-board { display: flex; align-items: center; gap: var(--sp-10); margin-block-start: var(--sp-6); font: var(--fs-15) var(--font-mono); color: var(--text-2); }
.k-subj-board .k-chip { font-family: var(--font-ui); font-size: var(--fs-13); }
.k-subj-papers { display: flex; flex-direction: column; gap: var(--sp-12); min-inline-size: 0; }
.k-subj-paper-top { display: flex; align-items: baseline; gap: var(--sp-10); font-size: var(--fs-15-5); }
.k-subj-paper-top b { white-space: nowrap; }
.k-subj-paper-note { flex: 1 1 0; min-inline-size: 0; color: var(--muted); font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-subj-paper-top .k-mono { font-size: var(--fs-13); color: var(--text-2); }
.k-subj-paper .k-bar { display: block; --bar-h: var(--bar-7); --bar-c: var(--subj-c); margin-block-start: var(--sp-8); }

.k-subj-side { display: flex; flex-direction: column; gap: var(--sp-12); }
/* the first card grows, so the last one ends on the hero's bottom edge (no ragged foot) */
.k-subj-side > :first-child { flex: 1 1 auto; }
/* a study space's desk (Code, Japanese, Mind, Creatives: a hero with its path row): the side
   column never sets the row's height — the hero does, and the daily card and Continue fit
   inside it (asked for 30 October 2026) */
.k-subj-hero:is(.k-cx-hero, .k-ja-hero, .k-mind-hero, .k-cr-hero) + .k-subj-side { contain: size; min-block-size: 0; }
.k-subj-hero:is(.k-cx-hero, .k-ja-hero, .k-mind-hero, .k-cr-hero) + .k-subj-side > * { min-block-size: 0; overflow: hidden; }
.k-subj-next { flex: 1 1 0; display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-16) var(--sp-18); border-radius: var(--r-24); background: var(--s1); text-align: start; min-inline-size: 0; }
button.k-subj-next:hover { background: var(--s2); }
.k-subj-next-txt { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; }
.k-subj-next .k-kicker { letter-spacing: var(--track-label); font-weight: var(--weight-regular); }
.k-subj-next-t { font-size: var(--fs-14-5); font-weight: var(--weight-semibold); margin-block-start: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-subj-next-t .k-mono { font-size: var(--fs-11-5); font-weight: var(--weight-semibold); color: var(--subj-c); margin-inline-end: var(--sp-6); }
.k-subj-next-t .k-mono[data-band="r"] { color: var(--rag-r); }
.k-subj-next-t .k-mono[data-band="a"] { color: var(--rag-a); }
.k-subj-next-why { font-size: var(--fs-11-5); color: var(--muted); margin-block-start: var(--sp-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-subj-next .k-bar { --bar-h: var(--bar-3); margin-block-start: var(--sp-8); }
.k-subj-next-go { inline-size: var(--subj-go); block-size: var(--subj-go); flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--s2); font-weight: var(--weight-bold); }
.k-subj-next-go[data-state~="lit"] { background: var(--subj-c); color: var(--bg); }

/* analytics: four across, two rows, no hole */
.k-sa { position: relative; display: flex; flex-direction: column; padding: var(--sp-16) var(--sp-20) var(--sp-20); }
.k-sa .k-card-head { margin-block-end: var(--sp-14); }
.k-sa-help { margin-inline-start: auto; }
.k-sa-help > summary { list-style: none; cursor: pointer; }
.k-sa-help > summary::-webkit-details-marker { display: none; }
.k-sa-help-body { position: absolute; inset-inline: var(--sp-20); inset-block-start: calc(var(--sp-16) + var(--sp-28)); z-index: var(--z-menu); display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-16); background: var(--s3); box-shadow: var(--elev-2); font-size: var(--fs-13); color: var(--text-2); }
.k-sa-help-fact { color: var(--text); font-weight: var(--weight-medium); }
.k-sa-grid { flex: 1 1 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-20) var(--sp-22); }
.k-sa-tile { display: flex; flex-direction: column; justify-content: center; padding-block: var(--sp-4); min-inline-size: 0; }
.k-sa-k { font-size: var(--fs-12-5); color: var(--muted); }
.k-sa-v { font-size: var(--fs-27); font-weight: var(--weight-semibold); letter-spacing: var(--track-figure); margin-block-start: var(--sp-4); white-space: nowrap; }
.k-sa-tile .k-bar { --bar-h: var(--bar-3); margin-block-start: var(--sp-6); }
.k-sa-tile .k-bar[data-state~="na"] { background: none; }
.k-sa-tile[data-state~="empty"] .k-sa-v { color: var(--muted); }

.k-card-meta[data-state~="late"] { color: var(--alarm); }

/* the course units */
.k-sa-row { display: none; align-items: center; gap: var(--sp-10); inline-size: 100%; text-align: start; }
.k-sa-row-txt { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.k-sa-row-t { font-size: var(--fs-15); font-weight: var(--weight-medium); }
.k-sa-row-sub { font-size: var(--fs-12); color: var(--muted); }
.k-dialog .k-sa { background: none; padding: 0; }
.k-dialog .k-sa > .k-card-head .k-card-title { display: none; }
.k-subj-units .k-sectionhead { margin: 0 var(--sp-4) var(--sp-12); }
.k-units { display: flex; gap: var(--sp-14); }
.k-unit { flex: 0 0 auto; inline-size: var(--unit-w); display: flex; flex-direction: column; padding: var(--sp-18) var(--sp-20); border-radius: var(--r-20); background: var(--s1); text-align: start; }
.k-unit:hover { background: var(--s2); }
.k-unit[data-state~="current"] { background: linear-gradient(color-mix(in oklch, var(--subj-c) 16%, var(--s1)), var(--s1)); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--subj-c) 40%, transparent); }
.k-unit-ref { font: var(--weight-semibold) var(--fs-13) var(--font-mono); color: var(--muted); }
.k-unit[data-state~="current"] .k-unit-ref { color: var(--subj-c); }
.k-unit-title { font-size: var(--fs-16-5); font-weight: var(--weight-semibold); line-height: 1.25; margin-block: var(--sp-6) var(--sp-12); }
.k-unit-segs { display: flex; gap: var(--sp-2); margin-block-start: auto; }
.k-unit-segs span { flex: 1 1 0; block-size: var(--bar-6); border-radius: var(--r-2); background: var(--s2); }
.k-unit-segs span[data-state~="done"] { background: var(--green); }
.k-unit-segs span[data-state~="started"] { background: var(--amber); }
.k-unit-foot { font-size: var(--fs-13); color: var(--muted); margin-block-start: var(--sp-9); }
.k-unit-foot b { color: var(--text); font-weight: var(--weight-semibold); }

/* practice and resources */
.k-practice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-24); }
.k-practice-row, .k-res-row { display: flex; align-items: center; gap: var(--sp-12); padding-block: var(--sp-10); border-block-start: var(--hairline) solid var(--line); min-inline-size: 0; text-align: start; }
.k-practice-row:hover .k-practice-name { text-decoration: underline; text-decoration-color: var(--line); }
.k-practice-txt { flex: 1 1 0; min-inline-size: 0; }
.k-practice-name { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); font-weight: var(--weight-semibold); }
.k-practice-desc { display: block; font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-link[data-tone="crimson"] { color: var(--crimson); font-size: var(--fs-12-5); }
.k-res-name { flex: 1 1 0; min-inline-size: 0; font-size: var(--fs-14); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-res-name:hover { text-decoration: underline; }
.k-res-host { font: var(--fs-11) var(--font-mono); color: var(--muted); white-space: nowrap; }
.k-res-del { color: var(--muted); font-size: var(--fs-11); opacity: 0; }
.k-res-row:hover .k-res-del, .k-res-del:focus-visible { opacity: 1; }


/* ================= the spec spine (frame 8b) ================= */
.k-spine-top { display: flex; align-items: center; gap: var(--sp-6); margin-block-end: var(--sp-10); }
.k-spine-subjects { flex: 1 1 0; padding: var(--sp-2); font-size: var(--fs-12-5); }
.k-spine-subjects .k-seg-item { padding: var(--sp-4); }
.k-spine-filter-wrap { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-12); margin-block-end: var(--sp-14); border-radius: var(--r-pill); background: var(--s1); color: var(--muted); font-size: var(--fs-13); }
.k-spine-filter { flex: 1 1 0; min-inline-size: 0; min-block-size: 0; padding: 0; border: 0; background: none; color: var(--text); font-size: var(--fs-13); outline: none; }
.k-spine-filter-wrap > .k-icon { flex: 0 0 auto; inline-size: var(--icon-glyph-sm); block-size: var(--icon-glyph-sm); color: var(--muted); }
.k-spine-filter-wrap:focus-within { box-shadow: inset 0 0 0 var(--focus-width) var(--focus-ring); }
.k-spine-board { display: flex; flex-direction: column; gap: var(--sp-6); padding: 0 var(--sp-10) var(--sp-12); }
.k-spine-board-row { display: flex; font-size: var(--fs-12); color: var(--muted); }
.k-spine-board-row .k-mono { margin-inline-start: auto; }
.k-spine-board .k-bar { --bar-h: var(--bar-3); --bar-c: var(--subj-c); }
.k-spine-list { display: flex; flex-direction: column; }
.k-spine-head { inline-size: 100%; display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-10); border-radius: var(--r-12); text-align: start; }
.k-spine-head:hover { background: var(--s1); }
.k-spine-ref { inline-size: var(--spine-ref-w); flex: 0 0 auto; font: var(--weight-semibold) var(--fs-12) var(--font-mono); color: var(--subj-c); }
.k-spine-title { flex: 1 1 0; min-inline-size: 0; font-size: var(--fs-14); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-spine-bar { display: none; }
.k-spine-pc { font: var(--fs-11) var(--font-mono); color: var(--muted); }
.k-spine-arr::before { content: "›"; font-size: var(--fs-11); color: var(--muted); }
.k-spine-sec[data-state~="open"] .k-spine-arr::before { content: "▾"; }
.k-spine-sec:not([data-state~="open"]):not([data-state~="filtered"]) > .k-spine-kids { display: none; }
.k-spine-kids { padding-block-end: var(--sp-6); }
.k-spine-grp { inline-size: 100%; display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-9) var(--sp-10) var(--sp-4); font-size: var(--fs-11); letter-spacing: var(--track-spine); text-transform: uppercase; color: var(--muted); text-align: start; }
.k-spine-grp:hover { color: var(--text-2); }
.k-spine-grp-arr::before { content: "▾"; font-size: var(--fs-11); }
.k-spine-grp[data-state~="closed"] .k-spine-grp-arr::before { content: "▸"; }
.k-spine-grp-t { flex: 1 1 0; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-spine-grp .k-mono { letter-spacing: 0; }
.k-spine-leaf { inline-size: calc(100% - var(--sp-10)); margin-inline-start: var(--sp-10); display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-7) var(--sp-10); border-radius: var(--r-12); text-align: start; }
.k-spine-leaf:hover { background: var(--s1); }
.k-spine-leaf[data-state~="active"] { background: var(--s2); }
.k-spine-mastery { inline-size: var(--spine-bar); block-size: var(--spine-bar-h); flex: 0 0 auto; border-radius: var(--spine-bar); background: linear-gradient(to top, var(--green) var(--p, 0%), var(--s2) var(--p, 0%)); }
.k-spine-leaf-txt { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; }
.k-spine-leaf-t { font-size: var(--fs-13-5); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-spine-leaf[data-state~="active"] .k-spine-leaf-t { color: var(--text); font-weight: var(--weight-semibold); }
.k-spine-leaf-ref { font: var(--fs-11) var(--font-mono); color: var(--muted); margin-block-start: var(--hairline); }
.k-spine-deep { margin-inline-start: var(--sp-6); color: var(--subj-c); }
.k-spine-dot { inline-size: var(--spine-dot); block-size: var(--spine-dot); flex: 0 0 auto; border-radius: 50%; background: var(--s3); }
.k-spine-dot[data-band="r"] { background: var(--rag-r); }
.k-spine-dot[data-band="a"] { background: var(--rag-a); }
.k-spine-dot[data-band="g"] { background: var(--rag-g); }
.k-spine-open { display: none; }
.k-spine-strip { display: none; }
.k-spine-home { align-self: flex-start; font-size: var(--fs-12); }
#cols[data-tree="closed"] #tree > :not(.k-spine-strip) { display: none; }
#cols[data-tree="closed"] .k-spine-strip { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.k-spine-strip-l { writing-mode: vertical-rl; font-size: var(--fs-12); color: var(--muted); }

/* ================= the topic page (frame 8b) ================= */
/* flex-shrink 0: min-block-size 100% replaces the flex item's automatic
   minimum, so without it the grid was squeezed to the viewport and the
   editor overflowed it — which ended every sticky child at one screen */
.k-topic { display: grid; grid-template-columns: minmax(0, 1fr) var(--inspector-w); min-block-size: 100%; flex-shrink: 0; }
.k-topic[data-state~="insp-closed"] { grid-template-columns: minmax(0, 1fr) var(--sp-48); }
.k-topic[data-state~="editing"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.k-topic-col { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-22) var(--sp-28) var(--sp-40); }
/* one centred measure for the whole column (review B): with the spine and
   the inspector closed the page used to keep its 620px reading width at
   the left and leave half the screen empty */
.k-topic-col > * { inline-size: 100%; max-inline-size: var(--topic-w); margin-inline: auto; }
.k-topic-col .k-prose, .k-topic-col .k-note-foot { max-inline-size: none; }
.k-topic-head { display: flex; align-items: flex-start; gap: var(--sp-16); }
.k-topic-titles { flex: 1 1 0; min-inline-size: 0; }
.k-topic-titlerow { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; }
.k-topic-title { font-size: var(--fs-32); letter-spacing: var(--track-name); line-height: 1.1; }
.k-topic-ref { font: var(--weight-semibold) var(--fs-12) var(--font-mono); padding: var(--sp-4) var(--sp-10); border-radius: var(--r-pill); background: color-mix(in oklch, var(--subj-c) 18%, transparent); color: var(--subj-c); }
.k-topic-path { margin-block-start: var(--sp-6); font-size: var(--fs-12-5); color: var(--muted); }
.k-topic-sep { opacity: 0.5; margin-inline: var(--sp-6); }
.k-topic-steps { display: flex; gap: var(--sp-6); }
/* the phone header row (15d): above the phone tier only its spine opener
   takes part (a head item, shown at the compact tier) */
.k-topic-prow { display: contents; }
.k-topic-pparent, .k-topic-pchip, .k-topic-pmeta { display: none; }
.k-topic-pdot { inline-size: var(--sp-8); block-size: var(--sp-8); flex: 0 0 auto; border-radius: 50%; background: var(--muted); }
.k-topic-pdot[data-band="r"] { background: var(--rag-r); }
.k-topic-pdot[data-band="a"] { background: var(--rag-a); }
.k-topic-pdot[data-band="g"] { background: var(--rag-g); }
.k-insp-sheet-sub { display: block; font: var(--fs-12) var(--font-mono); color: var(--muted); }
.k-insp-sheet .k-insp { padding: 0; border: 0; }
.k-insp-sheet .k-insp-head { display: none; }
.k-topic-steps .k-iconbtn { inline-size: var(--topic-step); block-size: var(--topic-step); }

.k-topic-nav { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-topic-tabrow { display: flex; align-items: flex-end; gap: var(--sp-10); min-inline-size: 0; border-block-end: var(--hairline) solid var(--line); }
/* the tabs take the row; the tools (Working, Edit, a reading mode) sit together at its right end,
   lifted off the underline so they centre on the tab labels instead of touching the line */
.k-topic-tabrow > .k-scroller { flex: 1 1 auto; min-inline-size: 0; }
.k-topic-tabrow > :not(.k-scroller):not(.k-topic-more) { flex: none; margin-block-end: var(--sp-6); }
.k-topic-tabs { flex: 1 1 0; min-inline-size: 0; display: flex; gap: var(--sp-18); overflow: hidden; font-size: var(--fs-13-5); }
/* the label sits on the underline: a tab is 44px tall on touch, and with
   its line at the TOP the label floated far above the underline (phone
   review) — the one line is packed to the bottom, baselines kept */
.k-topic-tab { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: baseline; gap: var(--sp-6); padding: 0 0 var(--sp-10); white-space: nowrap; color: var(--muted); }
.k-topic-tabrow .k-scroller-arrow { inset-block-start: auto; inset-block-end: var(--sp-6); translate: none; }
.k-topic-tab:hover { color: var(--text); }
.k-topic-tab[aria-selected="true"] { color: var(--text); font-weight: var(--weight-semibold); box-shadow: inset 0 calc(var(--sp-2) * -1) 0 var(--crimson); }
.k-topic-tab .k-mono { font-size: var(--fs-11); opacity: 0.8; }
.k-topic-more .k-btn { padding: 0 0 var(--sp-10); box-shadow: none; background: none; font-size: var(--fs-13-5); color: var(--muted); }
.k-topic-more .k-btn:hover { color: var(--text); }
/* the fold sits on the tabs' baseline whatever height touch gives the
   button, and its menu drops from it at the width of its labels */
.k-topic-more { align-self: stretch; display: flex; }
.k-topic-more .k-btn { align-items: flex-end; }
.k-topic-more-pop { inline-size: max-content; min-inline-size: calc(var(--sp-48) * 4); }
.k-topic-edit[aria-pressed="true"] { background: var(--s2); }
.k-topic-reader { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-12-5); }
.k-topic-page-select { min-block-size: 0; padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill); background: var(--s1); font-size: var(--fs-12-5); max-inline-size: 100%; }
.k-topic-dots { margin-inline-start: auto; display: flex; gap: var(--sp-4); min-inline-size: 0; overflow: hidden; }
.k-topic-dots span { inline-size: var(--dot-narrow); block-size: var(--bar-6); border-radius: var(--r-2); background: var(--s2); }
.k-topic-dots span[data-state~="on"] { inline-size: var(--dot-wide); background: var(--subj-c); }
.k-topic-panel { display: flex; flex-direction: column; gap: var(--sp-16); min-inline-size: 0; }
.k-topic-card .k-kicker { display: block; margin-block-end: var(--sp-10); }
.k-topic-note { inline-size: 100%; min-block-size: calc(var(--sp-48) * 2); resize: vertical; }
.k-topic-lab .k-card-title { display: block; margin-block-end: var(--sp-8); }
.k-topic-simlink { display: flex; flex-direction: column; gap: var(--sp-4); text-align: start; }
.k-topic-simlink:hover { background: var(--s2); }

/* the spec tab (frame 8c) */
/* the cards flow down two balanced columns (review B): the wording card
   used to hold the left alone while every other card stacked on the right */
.k-spec-split { columns: 2; column-gap: var(--sp-16); }
.k-spec-side { display: contents; }
.k-spec-split > *, .k-spec-side > * { break-inside: avoid; margin-block-end: var(--sp-16); }
.k-spec ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); margin-block-start: var(--sp-8); }
.k-spec li { position: relative; padding-inline-start: var(--sp-16); }
.k-spec li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; inline-size: var(--sp-6); block-size: var(--sp-6); border-radius: 50%; background: var(--subj-c); }
.k-spec li.k-spec-sub { margin-inline-start: var(--sp-16); }
.k-spec li.k-spec-sub::before { background: var(--muted); }
.k-spec-h { font-weight: var(--weight-semibold); color: var(--text); margin-block-start: var(--sp-10); }

/* ================= note blocks (frame 8j) ================= */
.k-prose { max-inline-size: var(--prose-w); display: flex; flex-direction: column; gap: var(--sp-16); font-size: var(--fs-15); line-height: 1.7; color: var(--text-2); }
.k-topic-card .k-prose, .k-spec { max-inline-size: none; gap: var(--sp-8); }
.k-blk { display: contents; }
/* frame 23a: the newest quick note, until it has been seen */
.k-blk[data-state~="fresh"] > * { border-radius: var(--r-12); background: var(--wash-amber); box-shadow: 0 0 0 var(--sp-6) var(--wash-amber); }
.k-blk[data-state~="n-blk-sel"] > * { box-shadow: 0 0 0 var(--focus-width) var(--focus-ring); border-radius: var(--r-12); }
.k-prose b, .k-prose strong { color: var(--text); font-weight: var(--weight-semibold); }
.k-prose code { font: var(--fs-13) var(--font-mono); padding: var(--hairline) var(--sp-6); border-radius: var(--r-6); background: var(--s2); color: var(--subj-c, var(--teal)); }
.k-prose a { color: var(--teal); }
.k-n-h, .k-prose h2, .k-prose h3, .k-prose h4 { color: var(--text); font-size: var(--fs-17); font-weight: var(--weight-semibold); letter-spacing: var(--track-head); line-height: 1.3; }
.k-prose ul, .k-prose ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); line-height: 1.6; }
.k-prose ul > li { position: relative; padding-inline-start: var(--sp-16); }
.k-prose ul > li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.65em; inline-size: var(--sp-6); block-size: var(--sp-6); border-radius: 50%; background: var(--subj-c, var(--teal)); }
.k-prose ol { counter-reset: k-ol; }
.k-prose ol > li { position: relative; padding-inline-start: var(--sp-28); counter-increment: k-ol; }
.k-prose ol > li::before { content: counter(k-ol) "."; position: absolute; inset-inline-start: 0; font: var(--weight-semibold) var(--fs-12) var(--font-mono); color: var(--subj-c, var(--teal)); padding-block-start: var(--sp-2); }
.k-prose ul > li.k-n-task { padding-inline-start: 0; }
.k-prose ul > li.k-n-task::before { content: none; }
.k-n-task[data-state~="done"] { color: var(--muted); text-decoration: line-through; }
.k-n-md { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-n-quote { margin: 0; padding: var(--sp-4) 0 var(--sp-4) var(--sp-16); box-shadow: inset var(--sp-2) 0 0 var(--line); font-style: italic; }
.k-n-math { text-align: center; }
.k-n-copy { margin-inline-start: auto; padding: var(--sp-2) var(--sp-9); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-12); color: var(--muted); }
.k-n-copy:hover, .k-n-copy[data-state~="copied"] { color: var(--text); }
.k-n-kv > .k-n-copy, .k-n-tablewrap > .k-n-copy, .k-callout > .k-n-copy, .k-n-steps > .k-n-copy, .k-n-worked > .k-n-copy { position: absolute; inset-block-start: var(--sp-8); inset-inline-end: var(--sp-8); opacity: 0; }
.k-n-kv:hover > .k-n-copy, .k-n-tablewrap:hover > .k-n-copy, .k-callout:hover > .k-n-copy, .k-n-steps:hover > .k-n-copy, .k-n-worked:hover > .k-n-copy, .k-n-copy:focus-visible { opacity: 1; }
/* no hover on a touch screen: a tap on the block reveals its Copy (the
   block takes data-state="copy" from content.js), so a page of notes is
   not a column of Copy buttons */
@media (hover: none) {
/* a row's own controls that a mouse finds on hover: on an iPad, wider
   than the phone tier that already shows them, they are always there */
.k-res-del, .k-asg-x, .k-asg-open { opacity: 1; }
.k-n-kv[data-state~="copy"] > .k-n-copy, .k-n-tablewrap[data-state~="copy"] > .k-n-copy, .k-callout[data-state~="copy"] > .k-n-copy, .k-n-steps[data-state~="copy"] > .k-n-copy, .k-n-worked[data-state~="copy"] > .k-n-copy { opacity: 1; }
.k-n-kv > .k-n-copy, .k-n-tablewrap > .k-n-copy, .k-callout > .k-n-copy, .k-n-steps > .k-n-copy, .k-n-worked > .k-n-copy { pointer-events: none; }
.k-n-kv[data-state~="copy"] > .k-n-copy, .k-n-tablewrap[data-state~="copy"] > .k-n-copy, .k-callout[data-state~="copy"] > .k-n-copy, .k-n-steps[data-state~="copy"] > .k-n-copy, .k-n-worked[data-state~="copy"] > .k-n-copy { pointer-events: auto; }
}
.k-n-kv { position: relative; display: grid; grid-template-columns: var(--kv-key-w) minmax(0, 1fr); border-radius: var(--r-16); overflow: hidden; background: var(--s1); font-size: var(--fs-14); line-height: 1.5; }
.k-n-kv dt, .k-n-kv dd { padding: var(--sp-10) var(--sp-16); border-block-start: var(--hairline) solid var(--line); }
.k-n-kv dt { color: var(--text); font-weight: var(--weight-semibold); }
.k-n-kv dd { margin: 0; }
.k-n-kv dt:first-of-type, .k-n-kv dt:first-of-type + dd { border-block-start: 0; }
.k-n-tablewrap { position: relative; border-radius: var(--r-16); overflow: auto; background: var(--s1); }
/* the wide table's scroller (content.js scrollTables): fades in the
   table's own surface; the arrows sit mid-height, clear of Copy */
.k-n-tablescroll { align-items: stretch; border-radius: var(--r-16); }
.k-n-tablescroll::before { background: linear-gradient(90deg, var(--s1) 20%, transparent); border-start-start-radius: var(--r-16); border-end-start-radius: var(--r-16); }
.k-n-tablescroll::after { background: linear-gradient(270deg, var(--s1) 20%, transparent); border-start-end-radius: var(--r-16); border-end-end-radius: var(--r-16); }
.k-n-tablescroll > .k-scroller-arrow { margin-inline: var(--sp-4); }
.k-n-table { inline-size: 100%; font-size: var(--fs-13-5); line-height: 1.5; }
.k-n-table th { padding: var(--sp-9) var(--sp-14); background: var(--s2); font-size: var(--fs-12); color: var(--muted); font-weight: var(--weight-semibold); }
.k-n-table td { padding: var(--sp-9) var(--sp-14); border-block-start: var(--hairline) solid var(--line); vertical-align: top; }
.k-n-table td:first-child { color: var(--text); font-weight: var(--weight-medium); }
.k-n-code { margin: 0; border-radius: var(--r-16); overflow: hidden; background: var(--code-bg); }
.k-n-code-head { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-8) var(--sp-14); border-block-end: var(--hairline) solid var(--line); font-size: var(--fs-12); color: var(--muted); }
.k-n-lang { font: var(--weight-semibold) var(--fs-11) var(--font-mono); color: var(--teal); }
.k-n-code pre { margin: 0; padding: var(--sp-14) var(--sp-16); font: var(--fs-12-5) / 1.65 var(--font-mono); color: var(--text-2); overflow-x: auto; }
.k-n-code pre code { padding: 0; background: none; color: inherit; font: inherit; }
.k-t[data-t="kw"] { color: var(--syn-kw); }
.k-t[data-t="fn"] { color: var(--syn-fn); }
.k-t[data-t="op"] { color: var(--syn-op); }
.k-t[data-t="num"] { color: var(--syn-num); }
.k-t[data-t="str"] { color: var(--syn-str); }
.k-t[data-t="com"] { color: var(--syn-com); font-style: italic; }
.k-t[data-t="self"] { color: var(--syn-self); font-style: italic; }
.k-callout { --co: var(--teal); position: relative; padding: var(--sp-14) var(--sp-18); border-radius: var(--r-16); background: color-mix(in oklch, var(--co) 12%, var(--s1)); font-size: var(--fs-14); line-height: 1.6; color: var(--text); }
.k-callout[data-kind="def"] { --co: var(--maths); }
.k-callout[data-kind="warn"] { --co: var(--amber); }
.k-callout-head { display: flex; align-items: center; gap: var(--sp-8); margin-block-end: var(--sp-6); font-size: var(--fs-12); font-weight: var(--weight-semibold); color: var(--co); }
.k-callout-mark { inline-size: var(--sp-20); block-size: var(--sp-20); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklch, var(--co) 25%, transparent); font-size: var(--fs-11); }
.k-spec-side .k-callout ul { padding-inline-start: var(--sp-18); display: flex; flex-direction: column; gap: var(--sp-4); }
.k-callout-dl dt { font-weight: var(--weight-semibold); }
.k-callout-dl dd { margin: 0 0 var(--sp-8); color: var(--text-2); }
.k-callout .k-n-kv { background: color-mix(in oklch, var(--co) 6%, var(--s1)); }
.k-callout[data-kind="info"], .k-callout[data-kind="formula"] { --co: var(--teal); }
.k-callout[data-kind="tip"] { --co: var(--green); }
.k-callout[data-kind="miscon"] { --co: var(--red-soft); }
.k-callout[data-kind="mnemonic"] { --co: var(--it); }
.k-callout[data-kind="memorise"] { --co: var(--crimson); }
.k-callout-body { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-callout-body code { color: var(--co); }
.k-n-steps { position: relative; display: flex; flex-direction: column; }
.k-n-step { position: relative; display: grid; grid-template-columns: var(--step-dot) minmax(0, 1fr); gap: var(--sp-14); padding-block-end: var(--sp-16); }
.k-n-step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(var(--step-dot) / 2 - var(--hairline)); inset-block: calc(var(--step-dot) - var(--sp-2)) 0; inline-size: var(--sp-2); background: var(--line); }
.k-n-step-n { position: relative; z-index: 1; inline-size: var(--step-dot); block-size: var(--step-dot); display: grid; place-items: center; border-radius: 50%; background: var(--s2); font: var(--weight-semibold) var(--fs-13) var(--font-mono); color: var(--subj-c, var(--teal)); }
.k-n-step-body { padding-block-start: var(--sp-4); min-inline-size: 0; }
.k-n-step-h { font-size: var(--fs-14-5); font-weight: var(--weight-semibold); color: var(--text); }
.k-n-step-m { margin-block-start: var(--sp-4); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-10); background: var(--code-bg); font: var(--fs-12-5) var(--font-mono); color: var(--text-2); white-space: pre-wrap; }
.k-n-step-note { margin-block-start: var(--sp-6); font-size: var(--fs-12-5); color: var(--muted); }
.k-n-worked { position: relative; margin: 0; padding: var(--sp-16) var(--sp-18); border-radius: var(--r-18); background: var(--s1); font-size: var(--fs-13-5); line-height: 1.6; }
.k-n-worked-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-block-end: var(--sp-10); }
.k-n-worked-title { font-size: var(--fs-14); font-weight: var(--weight-semibold); color: var(--text); }
.k-n-worked-src { font-size: var(--fs-12); color: var(--muted); }
.k-n-wsteps { list-style: none; padding: 0; display: flex; flex-direction: column; }
.k-n-wsteps > li::before { content: none; }
.k-n-wrow { display: grid; grid-template-columns: var(--wk-label-w) minmax(0, 1fr) auto; gap: var(--sp-12); padding-block: var(--sp-7); border-block-start: var(--hairline) solid var(--line); }
.k-prose ol > li.k-n-wrow { padding-inline-start: 0; }
/* the row already says "Step n"; the list counter doubled it (review A) */
.k-prose ol > li.k-n-wrow::before { content: none; }
.k-n-wlabel { font: var(--weight-semibold) var(--fs-11) var(--font-mono); color: var(--muted); text-transform: uppercase; padding-block-start: var(--sp-2); }
.k-n-wbody { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.k-n-wh { color: var(--text); font-weight: var(--weight-semibold); }
.k-n-wn { font-size: var(--fs-12-5); color: var(--muted); }
.k-n-wmk { align-self: start; font: var(--weight-semibold) var(--fs-11) var(--font-mono); padding: var(--hairline) var(--sp-8); border-radius: var(--r-pill); background: var(--s2); color: var(--amber); }
.k-n-answer { display: flex; gap: var(--sp-10); align-items: baseline; margin-block-start: var(--sp-8); padding: var(--sp-10) var(--sp-14); border-radius: var(--r-12); background: color-mix(in oklch, var(--green) 14%, transparent); font-size: var(--fs-14); color: var(--text); }
.k-n-answer b { color: var(--green); }
.k-n-diagram { display: flex; align-items: center; gap: var(--sp-14); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-18); background: var(--s1); text-align: start; }
.k-n-diagram:hover { background: var(--s2); }
.k-n-diagram-art { inline-size: var(--diagram-art-w); block-size: var(--diagram-art-h); flex: 0 0 auto; border-radius: var(--r-12); background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--teal) 22%, var(--s2)) 0 var(--sp-6), var(--s2) var(--sp-6) var(--sp-12)); }
.k-n-diagram-txt { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; line-height: 1.4; }
.k-n-diagram-txt b { font-size: var(--fs-14-5); color: var(--text); }
.k-n-diagram-txt span:last-child { font-size: var(--fs-12-5); color: var(--muted); }
.k-n-diagram-go { padding: var(--sp-7) var(--sp-14); border-radius: var(--r-pill); box-shadow: inset 0 0 0 var(--hairline) var(--line); font-size: var(--fs-13); color: var(--text); white-space: nowrap; }
.k-n-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.k-n-fig svg { max-inline-size: 100%; block-size: auto; }
/* authored figures (js/core/figures.js): each element carries its paint in
   --fg-* custom properties; these rules apply it (UI rebuild M14) */
.k-n-fig .k-fig-svg { inline-size: 100%; max-inline-size: min(100%, var(--fg-maxw)); display: block; margin-inline: auto; overflow: visible; }
.k-fig { fill: var(--fg-f, none); fill-opacity: var(--fg-fo, 1); stroke: var(--fg-s, none); stroke-width: var(--fg-w, 1); stroke-dasharray: var(--fg-d, none); stroke-linecap: var(--fg-lc, butt); stroke-linejoin: var(--fg-lj, miter); }
.k-fig-t { font-family: var(--font-ui); font-size: var(--fg-ts); font-style: var(--fg-ti, normal); font-weight: var(--fg-tb, normal); fill: var(--fg-f, var(--text-2)); paint-order: stroke; stroke: var(--fg-s, none); stroke-width: var(--fg-w, 0); stroke-linejoin: round; }
.k-n-fig figcaption { font-size: var(--fs-12-5); color: var(--muted); text-align: center; }

/* the note-page foot */
.k-note-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-12); max-inline-size: var(--prose-w); padding-block-start: var(--sp-16); border-block-start: var(--hairline) solid var(--line); }
.k-note-step { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-10) var(--sp-14); border-radius: var(--r-14); text-align: start; }
.k-note-step:hover { background: var(--s1); }
.k-note-step[data-state~="next"] { text-align: end; }
.k-note-step-t { font-size: var(--fs-13-5); color: var(--text); }

/* ================= the inspector ================= */
.k-insp { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-18) var(--sp-20); border-inline-start: var(--hairline) solid var(--line); }
.k-insp-head { display: flex; align-items: center; }
.k-insp-title { font-size: var(--fs-26); font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.1; }
.k-insp-head .k-iconbtn { margin-inline-start: auto; }
.k-insp-spine { display: none; }
/* the whole panel rides with a long page (review A): sticky under the
   top of the scroller, scrolling itself only if it outgrows the view */
.k-insp-body { display: flex; flex-direction: column; gap: var(--sp-18); position: sticky; inset-block-start: var(--sp-16); max-block-size: calc(100dvh - var(--topbar-h) - var(--sp-32)); overflow-y: auto; scrollbar-width: thin; }
.k-topic[data-state~="insp-closed"] .k-insp { padding-inline: var(--sp-8); align-items: center; }
.k-topic[data-state~="insp-closed"] .k-insp-body, .k-topic[data-state~="insp-closed"] .k-insp-title { display: none; }
.k-topic[data-state~="insp-closed"] .k-insp-head { flex-direction: column; gap: var(--sp-12); }
.k-topic[data-state~="insp-closed"] .k-insp-head .k-iconbtn { margin: 0; }
.k-topic[data-state~="insp-closed"] .k-insp-spine { display: block; writing-mode: vertical-rl; font-size: var(--fs-12); color: var(--muted); }
/* iPad landscape, rail and tree open: the inspector opens over the page
   (hub.js FLOAT_AT) and the reading column keeps the width */
.k-topic[data-state~="insp-float"] { position: relative; grid-template-columns: minmax(0, 1fr) var(--sp-48); }
.k-topic[data-state~="insp-float"]:not([data-state~="insp-closed"]) .k-insp { position: absolute; inset-block: 0; inset-inline-end: 0; z-index: var(--z-drawer); inline-size: var(--inspector-w); background: var(--bg); box-shadow: var(--elev-3); }
.k-insp-sec .k-kicker { display: block; margin-block-end: var(--sp-4); }
.k-insp-list { list-style: none; padding: 0; }
.k-insp-list li { display: flex; padding-block: var(--sp-7); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-14); }
.k-insp-list span { color: var(--muted); }
.k-insp-list strong { margin-inline-start: auto; font-weight: var(--weight-regular); }
.k-insp-list li[data-state~="na"] strong { color: var(--muted); }
/* the four asks as a 2 × 2 grid, so they line up (review B) */
.k-insp-qn { min-block-size: var(--insp-qn-h); resize: vertical; font-size: var(--fs-13-5); background: var(--s1); }
.k-insp-qn-hint { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.k-insp-asst .k-asst-ctx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.k-insp-asst .k-asst-ctx-mark { display: none; }
.k-insp-asst button { justify-content: center; min-block-size: var(--hit); padding: var(--sp-6) var(--sp-10); border-radius: var(--r-12); background: var(--s1); box-shadow: none; font-size: var(--fs-13); color: var(--text-2); text-align: center; }

/* the Topic Status component */
.k-ts { --ts-c: var(--rag-r); display: flex; flex-direction: column; }
.k-ts[data-state~="mid"] { --ts-c: var(--rag-a); }
.k-ts[data-state~="high"] { --ts-c: var(--rag-g); }
.k-ts-head { display: flex; align-items: baseline; gap: var(--sp-8); }
.k-ts-checks { margin-inline-start: auto; font-size: var(--fs-11-5); color: var(--muted); }
.k-ts-pct { font-size: var(--fs-22); font-weight: var(--weight-semibold); }
.k-ts > .k-bar { --bar-c: var(--ts-c); margin-block: var(--sp-8) var(--sp-12); }
.k-ts-row { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-block-end: var(--sp-12); }
/* the status keeps a readable width: with touch-sized RAG picks it takes
   its own line rather than reading "Not st" */
.k-ts-row > .k-ts-field:first-child { flex: 1 1 calc(var(--sp-48) * 2.5); min-inline-size: 0; }
.k-ts-select { inline-size: 100%; min-block-size: var(--rag-pick); padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill); background: var(--s1); font-size: var(--fs-13); }
.k-ts-checkgrid { display: flex; flex-direction: column; }
.k-ts-check { display: flex; align-items: center; gap: var(--sp-10); padding-block: var(--sp-6); font-size: var(--fs-14); color: var(--text-2); cursor: pointer; }
.k-ts-check[data-state~="on"] { color: var(--text); }
.k-rag { display: inline-flex; flex-direction: column; }
.k-rag-picks { display: flex; gap: var(--sp-4); }
.k-rag-pick { --rag-c: var(--muted); inline-size: var(--rag-pick); block-size: var(--rag-pick); display: grid; place-items: center; border-radius: 50%; font: var(--weight-semibold) var(--fs-11) var(--font-mono); color: var(--rag-c); box-shadow: inset 0 0 0 var(--ring-1-5) var(--rag-c); }
.k-rag-pick[data-band="r"] { --rag-c: var(--rag-r); }
.k-rag-pick[data-band="a"] { --rag-c: var(--rag-a); }
.k-rag-pick[data-band="g"] { --rag-c: var(--rag-g); }
.k-rag-pick[aria-pressed="true"] { background: var(--rag-c); color: var(--bg); box-shadow: none; }
.k-rag-auto { margin-block-start: var(--sp-6); font-size: var(--fs-11-5); color: var(--muted); }
.k-rag-auto b[data-band="r"] { color: var(--rag-r); }
.k-rag-auto b[data-band="a"] { color: var(--rag-a); }
.k-rag-auto b[data-band="g"] { color: var(--rag-g); }
.k-rag-disagree { color: var(--text-2); }


/* ================= flashcards (frame 8d) ================= */
.k-fc-modes { display: flex; justify-content: center; gap: var(--sp-8); }
.k-seg--loose { padding: 0; background: none; gap: var(--sp-8); }
.k-seg--loose .k-seg-item, .k-fc-new { padding: var(--sp-4) var(--sp-14); border-radius: var(--r-pill); background: var(--s1); font-size: var(--fs-12-5); color: var(--text-2); }
.k-seg--loose .k-seg-item[aria-selected="true"] { background: var(--text); color: var(--bg); font-weight: var(--weight-semibold); }
.k-fc-body { margin-block-start: var(--sp-14); }
.k-fc { max-inline-size: var(--fc-w); margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.k-fc-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-block-end: var(--sp-16); }
.k-fc-pips span { inline-size: var(--fc-pip); block-size: var(--bar-4); border-radius: var(--r-pill); background: var(--s2); }
.k-fc-pips span[data-state~="done"] { background: var(--green); }
.k-fc-pips span[data-state~="cur"] { background: var(--teal); }
.k-fc-stack { position: relative; inline-size: 100%; min-block-size: var(--fc-h); }
.k-fc-under { position: absolute; inset: var(--sp-10) calc(var(--sp-8) * -1) calc(var(--sp-8) * -1) var(--sp-8); border-radius: var(--r-22); background: var(--s1); opacity: 0.5; }
/* the card turns over (review B): the faces share one grid cell inside a
   3D stage, each with its own border and 札 in the corner */
.k-fc-card { position: relative; inline-size: 100%; min-block-size: var(--fc-h); display: grid; padding: 0; border: 0; border-radius: var(--r-22); background: none; box-shadow: none; perspective: var(--fc-persp); text-align: center; }
.k-fc-inner { display: grid; transform-style: preserve-3d; transition: transform var(--fc-flip) cubic-bezier(0.3, 0.8, 0.3, 1); }
.k-fc-card[data-state~="flipped"] .k-fc-inner { transform: rotateY(180deg); }
.k-fc-face { position: relative; grid-area: 1 / 1; min-block-size: var(--fc-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-14); padding: var(--sp-32); border-radius: var(--r-22); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(165deg, color-mix(in oklch, var(--teal) 6%, var(--s1)), var(--s1)); box-shadow: inset 0 0 0 var(--ring-1-5) color-mix(in oklch, var(--text) 14%, transparent), var(--elev-2); }
.k-fc-face[data-side="back"] { transform: rotateY(180deg); background: linear-gradient(165deg, color-mix(in oklch, var(--teal) 14%, var(--s1)), var(--s1)); box-shadow: inset 0 0 0 var(--ring-1-5) color-mix(in oklch, var(--teal) 38%, transparent), var(--elev-2); }
.k-fc-mark { position: absolute; inset-block-start: var(--sp-16); inset-inline-end: var(--sp-20); font-family: var(--font-kanji); font-size: var(--fs-26); line-height: 1; color: var(--muted); opacity: 0.45; }
.k-fc-face[data-side="back"] .k-fc-mark { color: var(--teal); }
@media (prefers-reduced-motion: reduce) {
.k-fc-inner { transition: none; }
}
.k-fc-kind { font-size: var(--fs-11); letter-spacing: var(--track-kind); text-transform: uppercase; color: var(--muted); font-weight: var(--weight-bold); }
.k-fc-count { padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill); background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-fc-face[data-side="back"] .k-fc-kind { color: var(--teal); }
.k-fc-text { white-space: pre-line; font-size: var(--fs-20); line-height: 1.45; font-weight: var(--weight-medium); color: var(--text); }
.k-fc-text code { font: var(--fs-14) var(--font-mono); padding: var(--hairline) var(--sp-6); border-radius: var(--r-6); background: var(--s2); color: var(--teal); }
.k-fc-q, .k-fc-hint { font-size: var(--fs-12); color: var(--muted); }
.k-fc-rate { inline-size: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-10); margin-block-start: var(--sp-18); }
.k-fc-rate[data-state~="concealed"] { visibility: hidden; }
.k-fc-r { --r-c: var(--red-soft); min-inline-size: var(--fc-rate-w); padding: var(--sp-9) var(--sp-12); border-radius: var(--r-16); background: var(--s1); text-align: center; box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--r-c) 35%, transparent); }
.k-fc-r:hover { background: var(--s2); }
.k-fc-r[data-kind="hard"] { --r-c: var(--amber); }
.k-fc-r[data-kind="good"] { --r-c: var(--green); }
.k-fc-r[data-kind="easy"] { --r-c: var(--teal); }
.k-fc-r-top { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-14); color: var(--r-c); }
.k-fc-r-ivl { display: block; font-size: var(--fs-11); color: var(--muted); margin-block-start: var(--sp-2); }
.k-kbd { display: inline-flex; justify-content: center; min-inline-size: var(--sp-16); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-6); background: var(--s2); color: var(--muted); font: var(--fs-11) var(--font-mono); }
/* the panel under the card: this card, this deck, the keys — then the
   deck's actions (review B: the loose lines under the buttons went) */
.k-fc-panel { inline-size: 100%; display: flex; flex-direction: column; gap: var(--sp-12); margin-block-start: var(--sp-18); padding: var(--sp-16) var(--sp-18); border-radius: var(--r-18); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); text-align: start; }
.k-fc-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); }
.k-fc-pgroup { display: flex; flex-direction: column; gap: var(--sp-6); min-inline-size: 0; }
.k-fc-pgroup > .k-kicker { margin: 0; }
.k-fc-badges { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.k-fc-history { margin: 0; font: var(--fs-11-5) var(--font-mono); color: var(--text-2); line-height: var(--lh-body); }
.k-fc-deck { font: var(--fs-12-5) var(--font-mono); color: var(--text-2); }
.k-fc-keys { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; font-size: var(--fs-12); color: var(--muted); }
.k-fc-foot { display: flex; flex-wrap: wrap; gap: var(--sp-8); padding-block-start: var(--sp-12); border-block-start: var(--hairline) solid var(--line); }
.k-fc-foot-btn { padding: var(--sp-5) var(--sp-12); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-12); color: var(--text-2); }
.k-fc-foot-btn:hover, .k-fc-foot-btn[aria-expanded="true"] { color: var(--text); background: var(--s3); }
.k-fc-info { inline-size: 100%; padding: var(--sp-12) var(--sp-14); border-radius: var(--r-14); background: var(--s2); }
.k-fc-metrics { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-16); font-size: var(--fs-13); margin-block-start: var(--sp-8); }
.k-fc-metrics dt { color: var(--muted); }
.k-fc-life { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.k-fc-life:empty { display: none; }
.k-fc-manage { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-fc-form { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-fc-form-actions { display: flex; justify-content: flex-end; gap: var(--sp-8); }
.k-fc-list { list-style: none; padding: 0; display: flex; flex-direction: column; border-radius: var(--r-20); background: var(--s1); overflow: hidden; }
.k-fc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-6) var(--sp-14); align-items: start; padding: var(--sp-12) var(--sp-16); border-block-start: var(--hairline) solid var(--line); }
.k-fc-row:first-child { border-block-start: 0; }
.k-fc-row-n { color: var(--muted); font-size: var(--fs-12); padding-block-start: var(--sp-2); }
.k-fc-row-q { white-space: pre-line; font-size: var(--fs-14); font-weight: var(--weight-medium); }
.k-fc-row-a { white-space: pre-line; font-size: var(--fs-13); color: var(--text-2); margin-block-start: var(--sp-2); }
.k-fc-row-side { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; justify-content: flex-end; }
.k-fc-row-info { font-size: var(--fs-12); color: var(--muted); }
.k-fc-row-info:hover, .k-fc-row-info[aria-expanded="true"] { color: var(--text); }
.k-fc-row-due { font: var(--fs-11) var(--font-mono); color: var(--muted); }
.k-fc-row-detail { grid-column: 2 / -1; }


/* ================= quiz and exam questions (frames 8e, 8f) ================= */
.k-qz-head { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; margin-block-end: var(--sp-14); }
.k-qz-title { font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-qz-meta { font-size: var(--fs-12-5); color: var(--muted); }
.k-qz-tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-6); }
.k-qz-chips { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.k-qz-card, .k-qz-exam { padding: var(--sp-22) var(--sp-24); }
.k-qz-q { font-size: var(--fs-17); font-weight: var(--weight-semibold); line-height: 1.35; margin-block-end: var(--sp-16); }
.k-qz-opts { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-qz-opt { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-16); background: var(--s2); text-align: start; font-size: var(--fs-14-5); }
.k-qz-opt:hover:not(:disabled) { background: var(--s3); }
.k-qz-opt:disabled { cursor: default; }
.k-qz-key { display: none; }
.k-qz-letter { inline-size: var(--sp-26); block-size: var(--sp-26); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font: var(--weight-semibold) var(--fs-12) var(--font-mono); color: var(--muted); box-shadow: inset 0 0 0 var(--ring-1-5) var(--line); }
.k-qz-opt-t { flex: 1 1 0; min-inline-size: 0; }
.k-qz-verdict { margin-inline-start: auto; font-size: var(--fs-12-5); }
.k-qz-opt[data-state~="right"] { background: color-mix(in oklch, var(--green) 16%, transparent); box-shadow: inset 0 0 0 var(--ring-1-5) var(--green); }
.k-qz-opt[data-state~="right"] .k-qz-letter { background: var(--green); color: var(--bg); box-shadow: none; }
.k-qz-opt[data-state~="right"] .k-qz-verdict { color: var(--green); }
.k-qz-opt[data-state~="wrong"] { background: color-mix(in oklch, var(--red) 14%, transparent); box-shadow: inset 0 0 0 var(--ring-1-5) var(--red-soft); }
.k-qz-opt[data-state~="wrong"] .k-qz-letter { background: var(--red-soft); color: var(--bg); box-shadow: none; }
.k-qz-opt[data-state~="wrong"] .k-qz-verdict { color: var(--red-soft); }
.k-qz-why { margin-block-start: var(--sp-14); font-size: var(--fs-13-5); color: var(--text-2); }
.k-qz-why b { color: var(--text); }
.k-qz-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-10); margin-block-start: var(--sp-14); }
.k-qz-enter { margin-inline-start: var(--sp-8); background: color-mix(in oklch, var(--bg) 30%, transparent); color: inherit; opacity: 0.75; }
.k-qz-result { margin-block-start: var(--sp-14); }
.k-qz-score { display: flex; align-items: baseline; gap: var(--sp-12); }
.k-qz-score b { font-size: var(--fs-26); font-weight: var(--weight-semibold); }
.k-qz-score span { color: var(--text-2); }
.k-qz-exam { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-qz-exam-top { display: flex; align-items: baseline; gap: var(--sp-10); }
.k-qz-src { font-size: var(--fs-12); color: var(--muted); }
.k-qz-marks { margin-inline-start: auto; white-space: nowrap; font: var(--weight-semibold) var(--fs-12) var(--font-mono); padding: var(--sp-2) var(--sp-9); border-radius: var(--r-pill); background: var(--s2); }
.k-qz-part { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-qz-part + .k-qz-part { padding-block-start: var(--sp-14); border-block-start: var(--hairline) solid var(--line); }
.k-qz-part-q { display: flex; align-items: baseline; gap: var(--sp-10); }
.k-qz-part-t { flex: 1 1 0; min-inline-size: 0; font-size: var(--fs-15-5); line-height: 1.5; }
.k-qz-part-q .k-qz-marks { margin-inline-start: 0; }
.k-qz-answer { inline-size: 100%; background: var(--code-bg); border-radius: var(--r-14); }
.k-qz-ms .k-kicker { display: block; margin-block-end: var(--sp-6); }
.k-qz-self { display: flex; flex-direction: column; }
.k-qz-point { display: flex; align-items: center; gap: var(--sp-10); padding-block: var(--sp-8); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); cursor: pointer; }
.k-qz-point-t { flex: 1 1 0; color: var(--text-2); }
.k-qz-award { display: flex; align-items: center; gap: var(--sp-8); padding-block-start: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-qz-award .k-kicker { margin-inline-end: var(--sp-4); }
.k-qz-award-n { min-inline-size: var(--icon-btn-sm); block-size: var(--icon-btn-sm); display: grid; place-items: center; padding-inline: var(--sp-6); border-radius: var(--r-pill); background: var(--wash-teal); color: var(--teal); font: var(--weight-semibold) var(--fs-13) var(--font-mono); }
.k-qz-step { inline-size: var(--icon-btn-sm); block-size: var(--icon-btn-sm); display: grid; place-items: center; padding: 0; border-radius: 50%; background: var(--s2); box-shadow: none; font: var(--fs-14) var(--font-mono); line-height: 1; }
.k-qz-note { margin-block-start: var(--sp-8); font-size: var(--fs-13); color: var(--amber); }
.k-qz-exam-foot { justify-content: flex-start; }
.k-qz-sum { font-size: var(--fs-13); color: var(--muted); }
.k-qz-logged { font-size: var(--fs-12); color: var(--green); }
.k-qz-exam-foot .k-qz-logged + .k-btn { margin-inline-start: auto; }
.k-qz-tally { margin-block-start: var(--sp-10); font-size: var(--fs-12-5); color: var(--muted); }
.k-qz-tally:empty { display: none; }


/* ================= a gated lab (frame 8h) ================= */
.k-lock { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); text-align: center; padding: var(--sp-32) var(--sp-28); }
.k-lock-mark { inline-size: var(--sp-40); block-size: var(--sp-40); display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklch, var(--amber) 22%, transparent); color: var(--amber); font-size: var(--fs-17); }
.k-lock-title { font-size: var(--fs-22); }
.k-lock-why { max-inline-size: var(--prose-w); color: var(--text-2); }
.k-lock-actions { display: flex; gap: var(--sp-8); }
.k-lock[data-state~="compact"] { flex-direction: row; text-align: start; padding: var(--sp-16) var(--sp-18); }
.k-lock[data-state~="compact"] .k-lock-mark { inline-size: var(--sp-32); block-size: var(--sp-32); font-size: var(--fs-13); }
.k-lock-txt { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; }
.k-lock-txt b { font-size: var(--fs-15); }
.k-lock-txt span { font-size: var(--fs-12-5); color: var(--muted); }


/* ================= the Files tab (frame 8i) ================= */
.k-att { display: grid; grid-template-columns: var(--att-side-w) minmax(0, 1fr); gap: var(--sp-14); align-items: start; }
.k-att-side { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-att-add { inline-size: 100%; background: none; }
.k-att-files { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-att-file { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-10) var(--sp-8); border-radius: var(--r-14); text-align: start; }
.k-att-file:hover { background: var(--s1); }
.k-att-file[aria-selected="true"] { background: var(--s2); }
.k-att-badge { inline-size: var(--att-badge); block-size: var(--att-badge); flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-8); background: var(--s1); font: var(--weight-semibold) var(--fs-11) var(--font-mono); color: var(--muted); }
.k-att-badge[data-kind="PDF"] { color: var(--crimson); }
.k-att-badge[data-kind="IMG"] { color: var(--teal); }
.k-att-file-txt { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; }
.k-att-name { font-size: var(--fs-14); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-att-file-meta { font-size: var(--fs-12); color: var(--muted); }
.k-att-lead, .k-att-empty { font-size: var(--fs-12); color: var(--muted); padding-inline: var(--sp-4); }
.k-att-stage { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-16) var(--sp-18); }
.k-att-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-8) var(--sp-12); }
.k-att-title { flex: 1 1 var(--sp-64); min-inline-size: min(100%, calc(var(--sp-64) * 3)); font-size: var(--fs-15); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.k-att-actions, .k-att-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.k-att-act { padding: var(--sp-4) var(--sp-10); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-12); color: var(--text-2); white-space: nowrap; }
.k-att-act:hover { color: var(--text); background: var(--s3); }
.k-att-act[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.k-att-act[data-intent~="danger"]:hover { color: var(--red-soft); }
.k-att-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-16); font-size: var(--fs-12); }
.k-att-meta dt { color: var(--muted); }
.k-att-meta dd { margin: 0 0 0 calc(var(--sp-4) * -3); color: var(--text-2); }
.k-att-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-att-zoom { font-size: var(--fs-12); min-inline-size: var(--sp-40); text-align: center; }
.k-att-preview { border-radius: var(--r-16); background: var(--code-bg); overflow: auto; max-block-size: var(--att-preview-h); display: grid; place-items: start center; }
.k-att-preview[data-fit="page"] { place-items: center; }
.k-att-img { inline-size: 100%; block-size: auto; }
.k-att-preview[data-fit="zoom"] .k-att-img { inline-size: var(--att-img-width, 100%); max-inline-size: none; }
.k-att-preview[data-fit="page"] .k-att-img { inline-size: auto; max-block-size: var(--att-preview-h); }
.k-att-pdf { inline-size: 100%; block-size: var(--att-preview-h); border: 0; }
.k-att-text { inline-size: 100%; margin: 0; padding: var(--sp-14) var(--sp-16); font-size: calc(var(--fs-12-5) * var(--att-zoom, 1)); white-space: pre-wrap; }
.k-att-collapsed { font-size: var(--fs-13); color: var(--muted); }
.k-att-unusable { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); padding: var(--sp-24); border-radius: var(--r-16); background: var(--code-bg); text-align: center; color: var(--text-2); font-size: var(--fs-13); }
.k-att-unusable b { color: var(--text); font-size: var(--fs-15); }
.k-att-notes .k-kicker { display: block; margin-block-end: var(--sp-6); }
.k-att-note { inline-size: 100%; }
/* openDialog gives every overlay the dialog frame, whose centring
   (place-items) squeezed this flex column into a strip — review A */
.k-att-fs { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--sp-10); padding: var(--sp-16); background: var(--bg); }
.k-att-fs .k-att-preview { inline-size: 100%; min-block-size: 0; }
.k-att-fs .k-att-preview[data-fit="page"] .k-att-img { max-block-size: 100%; }
.k-att-fs .k-att-preview { flex: 1 1 0; max-block-size: none; }
.k-att-fs .k-att-pdf { block-size: 100%; }


/* ================= worked examples (frame 8g) ================= */
.k-wk-head { display: flex; align-items: center; gap: var(--sp-10); margin-block-end: var(--sp-6); }
.k-wk-title { flex: 1 1 0; font-size: var(--fs-16); }
.k-wk-blurb { font-size: var(--fs-13); color: var(--text-2); }
.k-wk-spec { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); margin-block: var(--sp-6) var(--sp-10); font-size: var(--fs-12); color: var(--muted); }
.k-wk-inputs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-10); padding: var(--sp-10) var(--sp-14); border-radius: var(--r-12); background: var(--code-bg); }
.k-wk-field { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-12); color: var(--muted); }
.k-wk-field .k-input { min-block-size: var(--icon-btn-sm); padding: var(--sp-4) var(--sp-10); font: var(--fs-14) var(--font-mono); inline-size: calc(var(--wk-field, 90) * 1px); }
.k-wk-out { margin-block-start: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-12); }
.k-wk-steps { list-style: none; padding: 0; border-radius: var(--r-16); overflow: hidden; background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-wk-step { display: grid; grid-template-columns: var(--wk-step-n) minmax(0, 1fr); gap: var(--sp-2) var(--sp-14); padding: var(--sp-12) var(--sp-14); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
/* 20g: the newest step carries a soft crimson wash and a lit number */
.k-wk-step[data-state~="latest"] { background: color-mix(in oklch, var(--crimson) 8%, transparent); }
.k-wk-step:first-child { border-block-start: 0; }
.k-wk-step-n { grid-row: span 3; align-self: start; display: grid; place-items: center; inline-size: var(--wk-step-n); block-size: var(--wk-step-n); border-radius: 50%; box-shadow: inset 0 0 0 var(--hairline) var(--line); font-size: var(--fs-11-5); color: var(--text-2); }
.k-wk-step[data-state~="latest"] > .k-wk-step-n { background: var(--crimson); box-shadow: none; color: var(--crimson-ink); font-weight: var(--weight-bold); }
.k-wk-step-h { font-weight: var(--weight-semibold); }
.k-wk-step-m { color: var(--text-2); white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--fs-13); }
.k-wk-step-note { color: var(--muted); font-size: var(--fs-12-5); }
.k-wk-answer { display: flex; gap: var(--sp-10); align-items: baseline; padding: var(--sp-10) var(--sp-14); border-radius: var(--r-12); background: color-mix(in oklch, var(--green) 14%, transparent); font-size: var(--fs-14); }
.k-wk-answer b { color: var(--green); }
.k-wk-reveal { display: flex; gap: var(--sp-8); }
.k-topic-fold > summary { display: flex; align-items: center; list-style: none; cursor: pointer; }
.k-topic-fold > summary::-webkit-details-marker { display: none; }
.k-topic-fold > summary .k-card-meta { margin-inline-start: auto; }
.k-topic-fold[open] > summary { margin-block-end: var(--sp-10); }
.k-topic-fold[open] > summary .k-card-meta { visibility: hidden; }


/* ================= the study editor (frame 8k) ================= */
.k-topic[data-state~="editing"] .k-topic-editor { order: -1; min-inline-size: 0; border-inline-end: var(--hairline) solid var(--line); }
.k-topic[data-state~="editing"] .k-topic-col::before { content: "Live preview"; font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); font-weight: var(--weight-semibold); }
.k-ed { display: flex; flex-direction: column; gap: var(--sp-14); padding: var(--sp-18) var(--sp-20) var(--sp-40); }
.k-ed-head { display: flex; align-items: flex-start; gap: var(--sp-12); }
.k-ed-head-l { flex: 1 1 0; min-inline-size: 0; }
.k-ed-where { font-size: var(--fs-12); color: var(--muted); }
.k-ed-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); margin-block-start: var(--sp-2); }
.k-ed-title { font-size: var(--fs-20); }
.k-ed-state { display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-2) var(--sp-10); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-11-5); color: var(--muted); }
.k-ed-state[data-state~="on"] { background: color-mix(in oklch, var(--amber) 16%, transparent); color: var(--amber); }
.k-ed-state[data-state~="on"]::before { content: ""; inline-size: var(--sp-6); block-size: var(--sp-6); border-radius: 50%; background: currentColor; }
.k-ed-bar { display: flex; align-items: center; gap: var(--sp-10); }
.k-ed-bar .k-ed-reset { margin-inline-start: auto; }
.k-ed-help > summary { cursor: pointer; font-size: var(--fs-12-5); color: var(--muted); }
.k-ed-help dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-12); margin-block-start: var(--sp-8); font-size: var(--fs-12); }
.k-ed-help dd { margin: 0; color: var(--muted); }
.k-ed-blocks, .k-ed-rows { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-ed-list { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-ed-pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.k-ed-pagechip { padding: var(--sp-4) var(--sp-10); border-radius: var(--r-pill); background: var(--s1); font-size: var(--fs-12); color: var(--text-2); }
.k-ed-pagechip[aria-pressed="true"] { background: var(--text); color: var(--bg); font-weight: var(--weight-semibold); }
/* the preview beside the editor stays in view however far down the
   block list the editing goes (review A) */
.k-topic[data-state~="editing"] > .k-topic-col { position: sticky; inset-block-start: 0; align-self: start; max-block-size: calc(100dvh - var(--topbar-h)); overflow-y: auto; scrollbar-width: thin; }
.k-ed-block { border-radius: var(--r-16); background: var(--s1); }
.k-ed-block[data-state~="sel"] { box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--crimson) 60%, transparent); }
.k-ed-block[data-kind="page"] { background: none; box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-ed-block-row { display: flex; align-items: center; gap: var(--sp-6); padding-inline-end: var(--sp-8); }
.k-ed-block-h { flex: 1 1 0; min-inline-size: 0; display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-10) var(--sp-14); text-align: start; }
/* frame 23c: the column break, a row among the blocks */
.k-ed-break { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-2); font-size: var(--fs-12); color: var(--crimson-soft); }
.k-ed-break::after { content: ""; flex: 1 1 auto; border-block-start: var(--ring-1-5) dashed var(--crimson-soft); opacity: 0.7; }
.k-ed-break[data-state~="auto"] { color: var(--muted); }
.k-ed-break[data-state~="auto"]::after { border-color: var(--line); }
.k-ed-break-l { white-space: nowrap; font-weight: var(--weight-semibold); letter-spacing: var(--track-label); text-transform: uppercase; font-size: var(--fs-11); }
.k-ed-breaknote { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-12); background: var(--s1); font-size: var(--fs-12-5); color: var(--text-2); }
.k-ed-breaknote > .k-btn { margin-inline-start: auto; }
.k-ed-type { flex: 0 0 auto; padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-11-5); color: var(--text-2); }
.k-ed-block[data-state~="sel"] .k-ed-type { background: color-mix(in oklch, var(--crimson) 22%, transparent); color: var(--crimson); }
.k-ed-sum { flex: 1 1 0; min-inline-size: 0; font-size: var(--fs-13-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-ed-tools { display: flex; gap: var(--sp-4); }
.k-ed-block:not([data-state~="sel"]) .k-ed-tools { opacity: 0; }
.k-ed-block:hover .k-ed-tools, .k-ed-block:focus-within .k-ed-tools { opacity: 1; }
.k-ed-ib { inline-size: var(--icon-btn-sm); block-size: var(--icon-btn-sm); display: grid; place-items: center; border-radius: 50%; background: var(--s2); font-size: var(--fs-11); color: var(--muted); }
.k-ed-ib:hover { color: var(--text); }
.k-ed-ib[data-intent~="danger"]:hover { color: var(--red-soft); }
.k-ed-form { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-4) var(--sp-14) var(--sp-14); }
.k-ed-field { display: grid; grid-template-columns: calc(var(--sp-48) * 2) minmax(0, 1fr); gap: var(--sp-4) var(--sp-12); align-items: start; font-size: var(--fs-13); }
.k-ed-lbl { color: var(--muted); padding-block-start: var(--sp-8); }
.k-ed-hint { grid-column: 2; font-size: var(--fs-11-5); color: var(--muted); }
.k-ed-ta, .k-ed-in, .k-ed-sel { inline-size: 100%; border-radius: var(--r-12); background: var(--code-bg); font-size: var(--fs-13); }
.k-ed-ta { block-size: var(--ed-h, auto); font-family: var(--font-mono); line-height: 1.55; resize: vertical; }
.k-ed-steps { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-ed-step, .k-ed-row { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-10) var(--sp-12); border-radius: var(--r-14); background: var(--s1); }
.k-ed-step { background: var(--s2); }
.k-ed-step-h, .k-ed-row-h { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-12-5); }
.k-ed-step-h .k-ed-ib:first-of-type, .k-ed-row-h .k-ed-tools { margin-inline-start: auto; }
.k-ed-meta { font-size: var(--fs-11-5); color: var(--muted); }
.k-ed-row[data-state~="custom"] { box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--bloom) 40%, transparent); }
.k-ed-opts { display: flex; flex-direction: column; gap: var(--sp-4); }
.k-ed-opt { display: flex; align-items: center; gap: var(--sp-8); }
.k-ed-opt[data-state~="right"] .k-ed-in { box-shadow: inset 0 0 0 var(--hairline) var(--green); }
.k-ed-inline { display: flex; flex-wrap: wrap; gap: var(--sp-10); align-items: flex-end; }
/* a short field in a row sits beside its label, not a label column away
   (review A: Source and Level floated far from their labels) */
.k-ed-inline > .k-ed-field { grid-template-columns: auto minmax(0, 1fr); align-items: center; flex: 1 1 calc(var(--sp-48) * 3); }
.k-ed-inline > .k-ed-field:last-child { flex: 0 1 auto; }
.k-ed-sub { font-size: var(--fs-12); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-kicker); margin-block-start: var(--sp-8); }
.k-ed-empty { font-size: var(--fs-13); color: var(--muted); }
.k-ed-add-step, .k-ed-add { align-self: flex-start; }
.k-ed-addmenu { border-radius: var(--r-16); }
.k-ed-addsum { cursor: pointer; list-style: none; padding: var(--sp-8) var(--sp-14); border-radius: var(--r-pill); box-shadow: inset 0 0 0 var(--hairline) var(--line); font-size: var(--fs-12-5); color: var(--text-2); display: inline-block; }
.k-ed-addsum::-webkit-details-marker { display: none; }
.k-ed-addmenu[open] { padding: var(--sp-12) var(--sp-14); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
/* inside the selected block it is a nested tray, kept within the block's
   own padding so it cannot spill over the block's edge (review A) */
.k-ed-block > .k-ed-addmenu { margin: 0 var(--sp-14) var(--sp-14); }
.k-ed-block > .k-ed-addmenu[open] { background: var(--s2); box-shadow: none; }
.k-ed-addmenu[open] > .k-ed-addsum { display: none; }
.k-ed-addhead { display: flex; align-items: center; gap: var(--sp-10); margin-block-end: var(--sp-8); font-size: var(--fs-13); }
.k-ed-addfilter { margin-inline-start: auto; inline-size: calc(var(--sp-48) * 3); min-block-size: 0; padding: var(--sp-4) var(--sp-10); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-12); }
.k-ed-addgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--sp-48) * 2 + var(--sp-16)), 1fr)); gap: var(--sp-4); }
.k-ed-addbtn { padding: var(--sp-6) var(--sp-8); border-radius: var(--r-10); font-size: var(--fs-12-5); color: var(--text-2); text-align: start; }
.k-ed-addbtn:hover, .k-ed-addbtn:focus-visible { background: var(--s2); color: var(--text); }


/* ================= Review · Due today (frame 9a) ================= */
.k-review { display: flex; flex-direction: column; gap: var(--sp-20); }
.k-rv-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--rv-side-w); gap: var(--sp-20); align-items: start; }
.k-rv-hero { display: flex; align-items: center; gap: var(--sp-28); padding: var(--sp-24) var(--sp-28); border-radius: var(--r-24); background: var(--s1); align-self: stretch; }
/* overdue is a critical state, and critical states read red (9a) */
.k-rv-hero[data-state~="overdue"] { background: var(--crit-wash); }
.k-rv-hero-main { flex: 1 1 0; min-inline-size: 0; }
.k-rv-count { display: flex; align-items: baseline; gap: var(--sp-12); flex-wrap: wrap; }
.k-rv-n { font-size: var(--fs-64); font-weight: var(--weight-semibold); letter-spacing: var(--track-huge); line-height: 1; }
.k-rv-u { font-size: var(--fs-17); font-weight: var(--weight-semibold); }
.k-rv-late { font-size: var(--fs-13-5); color: var(--alarm); }
.k-rv-split { display: flex; gap: var(--sp-2); block-size: var(--sp-8); border-radius: var(--r-pill); overflow: hidden; margin-block: var(--sp-18) var(--sp-10); }
.k-rv-split span { flex: var(--f) 1 0; background: var(--c); }
.k-rv-legend { display: flex; flex-wrap: wrap; gap: var(--sp-18); font-size: var(--fs-13); color: var(--text-2); }
.k-rv-legend b { color: var(--c); font-weight: var(--weight-semibold); }
.k-rv-clear { display: flex; align-items: center; gap: var(--sp-12); margin-block-start: var(--sp-12); color: var(--text-2); font-size: var(--fs-13-5); }
.k-rv-clear .k-kanji { font-size: var(--fs-26); color: var(--muted); }
.k-rv-go { inline-size: var(--rv-go-w); display: flex; flex-direction: column; gap: var(--sp-8); }
.k-rv-go .k-btn--primary { padding-block: var(--sp-12); font-size: var(--fs-14-5); }
.k-rv-week { display: flex; flex-direction: column; align-self: stretch; }
.k-rv-chart { flex: 1 1 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-8); align-items: end; min-block-size: var(--rv-chart-h); }
.k-rv-day { block-size: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-4); }
.k-rv-day-n { font: var(--fs-11) var(--font-mono); color: var(--muted); }
.k-rv-day-bar { inline-size: 100%; block-size: max(var(--sp-4), calc(var(--h) - var(--sp-32))); border-radius: var(--r-8) var(--r-8) var(--r-6) var(--r-6); background: var(--s2); }
.k-rv-day-l { font-size: var(--fs-11); color: var(--muted); }
.k-rv-day[data-state~="today"] .k-rv-day-bar { background: var(--crimson); }
.k-rv-day[data-state~="today"] .k-rv-day-n, .k-rv-day[data-state~="today"] .k-rv-day-l { color: var(--text); }
.k-rv-topics { padding: var(--sp-16) var(--sp-22); }
.k-rv-topic { display: flex; align-items: center; gap: var(--sp-14); padding-block: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-rv-topic-bar { inline-size: var(--sp-4); block-size: var(--sp-28); flex: 0 0 auto; border-radius: var(--sp-4); background: var(--c); }
.k-rv-topic-ref { inline-size: var(--rv-ref-w); flex: 0 0 auto; font-size: var(--fs-12); font-weight: var(--weight-semibold); color: var(--c); }
.k-rv-topic-t { flex: 1 1 0; min-inline-size: 0; font-size: var(--fs-14); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-rv-topic-n { inline-size: var(--sp-64); text-align: end; font-size: var(--fs-13); }
.k-rv-side { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-rv-side-p { font-size: var(--fs-13); color: var(--text-2); margin-block-end: var(--sp-10); }
.k-rv-leech { display: flex; flex-direction: column; gap: var(--sp-6); padding-block: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-rv-leech-q { font-size: var(--fs-13); color: var(--text); }
.k-rv-leech-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); font-size: var(--fs-12); }
.k-rv-leech-acts > :first-child { margin-inline-end: auto; }
.k-rv-warn { background: color-mix(in oklch, var(--amber) 12%, var(--s1)); }
.k-rv-warn b { color: var(--amber); font-size: var(--fs-13); }
.k-rv-warn p { margin-block-start: var(--sp-6); font-size: var(--fs-13); color: var(--text); }
.k-rv-runhead { display: flex; align-items: center; gap: var(--sp-12); }
.k-rv-runwhat { font-size: var(--fs-13); color: var(--muted); }


/* ================= Review · Card stats (frame 9b) ================= */
.k-cs-strip { display: flex; flex-wrap: wrap; gap: var(--sp-16) var(--sp-28); padding: var(--sp-16) var(--sp-22); }
.k-cs-strip > * { flex: 1 1 0; min-inline-size: calc(var(--sp-48) * 2); }
.k-cs-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--rv-side-w); gap: var(--sp-20); align-items: stretch; }
.k-cs-row--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cs-card { min-inline-size: 0; display: flex; flex-direction: column; }
.k-cs-card > svg { inline-size: 100%; block-size: auto; }
.k-cs-mixbar { display: flex; gap: var(--sp-2); block-size: var(--sp-8); border-radius: var(--r-pill); overflow: hidden; margin-block: var(--sp-10) var(--sp-14); background: var(--s2); }
.k-cs-mixbar span { flex: var(--f) 1 0; background: var(--c); }
.k-cs-legend { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-10); font-size: var(--fs-13); }
.k-cs-legend li { display: flex; align-items: center; gap: var(--sp-10); }
/* the rating mix fills a card stretched to its neighbour: the rows share the height */
.k-cs-legend--fill { flex: 1 1 auto; justify-content: space-around; }
.k-cs-dot { inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--c); }
.k-cs-legend-n { margin-inline-start: auto; font-size: var(--fs-12); color: var(--muted); }
.k-cs-target { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); font-size: var(--fs-13); color: var(--text-2); margin-block-end: var(--sp-12); }
.k-cs-legend li[data-state="current"] { color: var(--text); font-weight: var(--weight-semibold); }
.k-cs-exam { margin-block-start: var(--sp-12); padding-block-start: var(--sp-12); border-block-start: var(--hairline) solid var(--line); }
/* fitted to your reviews (FSRS phase 3): the status beside its actions,
   one row on a wide screen, stacked when they do not fit */
.k-cs-fit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-12); font-size: var(--fs-13); }
.k-cs-fit > p { flex: 1 1 auto; margin: 0; }
.k-cs-fit-list { display: grid; gap: var(--sp-10); margin: 0 0 var(--sp-12); font-size: var(--fs-13); }
.k-cs-fit-list > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4) var(--sp-12); }
.k-cs-fit-list dt { color: var(--text-2); }
.k-cs-fit-list dd { margin: 0; color: var(--text); }
.k-cs-crumb { display: flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-13); color: var(--text-2); }
.k-cs-tablewrap { overflow-x: auto; }
.k-cs-table { inline-size: 100%; font-size: var(--fs-13); }
.k-cs-table th { padding: var(--sp-8) var(--sp-10); font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); font-weight: var(--weight-semibold); }
.k-cs-table td { padding: var(--sp-9) var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-cs-ref { color: var(--c); font-weight: var(--weight-semibold); }
.k-cs-table td[data-state~="hot"] { color: var(--red-soft); }


/* ================= Assignments (frame 9c) ================= */
.k-asg { display: grid; grid-template-columns: minmax(0, 1fr) var(--asg-panel-w); gap: var(--sp-20); align-items: start; }
.k-asg-col { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-18); }
.k-asg-tools { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.k-asg-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-asg-group { padding: var(--sp-16) var(--sp-14) var(--sp-6); font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); font-weight: var(--weight-semibold); }
.k-asg-group:first-child { padding-block-start: var(--sp-4); }
.k-asg-group[data-state~="late"] { color: var(--alarm); }
.k-asg-row { display: grid; grid-template-columns: var(--sp-4) minmax(0, 1fr) var(--asg-prog-w) var(--asg-due-w) var(--asg-status-w) auto; gap: var(--sp-14); align-items: center; padding: var(--sp-10) var(--sp-14); border-radius: var(--r-16); cursor: pointer; }
.k-asg-row:hover { background: var(--s1); }
.k-asg-row[data-state~="selected"] { background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-asg-row[data-state~="done"] .k-asg-title, .k-asg-row[data-state~="done"] .k-asg-sub { color: var(--muted); }
.k-asg-bar { block-size: var(--sp-32); border-radius: var(--sp-4); background: var(--c); }
.k-asg-row[data-state~="done"] .k-asg-bar { opacity: 0.5; }
.k-asg-main { min-inline-size: 0; }
.k-asg-titlerow { display: flex; align-items: center; gap: var(--sp-8); min-inline-size: 0; }
.k-asg-title { min-inline-size: 0; font-size: var(--fs-14); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.k-asg-prio { font: var(--weight-bold) var(--fs-11) var(--font-mono); color: var(--amber); }
.k-asg-major { flex: 0 0 auto; font-size: var(--fs-11); color: var(--crimson); }
.k-asg-sub { font-size: var(--fs-12); color: var(--muted); margin-block-start: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-asg-prog { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-11); }
.k-asg-track { --bar-h: var(--bar-4); background: var(--code-bg); }
.k-asg-due { font-size: var(--fs-12-5); color: var(--text-2); white-space: nowrap; }
.k-asg-due[data-state~="late"] { color: var(--alarm); }
.k-asg-due[data-state~="soon"] { color: var(--amber); }
.k-asg-open { opacity: 0; }
.k-asg-row:hover .k-asg-open, .k-asg-open:focus-visible { opacity: 1; }
.k-asg-panel { position: sticky; inset-block-start: 0; display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-20) var(--sp-22); border-inline-start: var(--hairline) solid var(--line); min-block-size: 100%; }
.k-asg-dhead { display: flex; align-items: center; gap: var(--sp-8); }
.k-asg-dhead .k-kanji { font: var(--weight-semibold) var(--fs-16) var(--font-kanji); color: var(--crimson); }
.k-asg-dtitle { font-size: var(--fs-20); letter-spacing: var(--track-figure); line-height: 1.2; }
.k-asg-chips { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-block-start: var(--sp-10); }
.k-asg-chips .k-chip button { margin-inline-start: var(--sp-4); }
.k-asg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hairline); border-radius: var(--r-16); overflow: hidden; background: var(--line); }
.k-asg-stat { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-12) var(--sp-14); background: var(--s1); }
.k-asg-stat span { font-size: var(--fs-11-5); color: var(--muted); }
.k-asg-stat b { font-size: var(--fs-17); }
.k-asg-block .k-kicker { display: block; margin-block-end: var(--sp-6); }
.k-asg-blockhead { display: flex; align-items: baseline; }
.k-asg-blockhead .k-mono { margin-inline-start: auto; font-size: var(--fs-11); }
.k-asg-text { font-size: var(--fs-13-5); line-height: 1.55; color: var(--text-2); white-space: pre-wrap; }
.k-asg-subs { display: flex; flex-direction: column; }
.k-asg-sub { display: flex; align-items: center; gap: var(--sp-10); padding-block: var(--sp-7); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
.k-asg-sub[data-state~="done"] .k-asg-sub-t { color: var(--muted); text-decoration: line-through; }
.k-asg-sub-t { flex: 1 1 0; min-inline-size: 0; }
.k-asg-x { color: var(--muted); font-size: var(--fs-11); opacity: 0; }
.k-asg-sub:hover .k-asg-x, .k-asg-x:focus-visible, .k-chip .k-asg-x { opacity: 1; }
.k-asg-subin { min-block-size: 0; padding: var(--sp-7) 0; border-block-start: var(--hairline) solid var(--line); border-radius: 0; background: none; font-size: var(--fs-13); }
.k-asg-att { display: flex; flex-direction: column; align-items: flex-start; }
.k-asg-foot { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-asg-foot > .k-btn--primary { inline-size: 100%; }
.k-asg-actions { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.k-asg-dialog { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-20) var(--sp-22); inline-size: min(var(--asg-panel-w) * 1.4, 100%); max-block-size: 90dvh; overflow-y: auto; }
.k-asg-form { inline-size: min(var(--dialog-w-lg), 100%); }
.k-asg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); max-block-size: 70dvh; overflow-y: auto; }
.k-field--wide { grid-column: 1 / -1; }
.k-asg-grid .k-check { font-size: var(--fs-13); }


/* ================= Exams & Papers (frames 9d, 9e) ================= */
.k-trk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); }
.k-trk { display: flex; flex-direction: column; gap: var(--sp-20); }
/* the tiles share the row whatever their number, the trend a wider share (no gap at the end) */
.k-trk-figs { display: flex; gap: var(--sp-20); }
.k-trk-figs > .k-trk-fig { flex: 1 1 0; min-inline-size: 0; }
.k-trk-figs > .k-trk-trend { flex: 1.6 1 0; min-inline-size: 0; }
.k-trk-fig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); text-align: center; padding: var(--sp-16) var(--sp-20); }
.k-trk-fig-v { font-size: var(--fs-32); font-weight: var(--weight-semibold); letter-spacing: var(--track-figure); color: var(--c, var(--text)); }
.k-trk-fig-l { font-size: var(--fs-12-5); color: var(--muted); }
.k-trk-trend { grid-column: -2; padding: var(--sp-16) var(--sp-20); }
.k-trk-trend-head { display: flex; font-size: var(--fs-12); color: var(--muted); }
.k-trk-bars { display: flex; gap: var(--sp-8); align-items: flex-end; block-size: var(--trk-trend-h); margin-block-start: var(--sp-10); }
.k-trk-bars span { flex: 1 1 0; block-size: var(--h); border-radius: var(--r-6) var(--r-6) var(--sp-2) var(--sp-2); background: var(--c); opacity: 0.85; }
.k-trk-table { padding: var(--sp-8); }
/* the grade, coloured by its tier (review B) */
.k-trk-grade { --g: var(--muted); display: inline-grid; place-items: center; min-inline-size: var(--sp-32); block-size: var(--sp-28); padding-inline: var(--sp-8); border-radius: var(--r-10); background: color-mix(in oklch, var(--g) 18%, var(--s2)); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--g) 45%, transparent); font-size: var(--fs-13); font-weight: var(--weight-bold); color: var(--g); }
.k-trk-grade[data-tier="top"] { --g: var(--amber); background: linear-gradient(135deg, color-mix(in oklch, var(--amber) 30%, var(--s2)), color-mix(in oklch, var(--green) 18%, var(--s2))); }
.k-trk-grade[data-tier="high"] { --g: var(--green); }
.k-trk-grade[data-tier="good"] { --g: var(--teal); }
.k-trk-grade[data-tier="mid"] { --g: var(--amber); }
.k-trk-grade[data-tier="low"] { --g: color-mix(in oklch, var(--amber) 50%, var(--red-soft)); }
.k-trk-grade[data-tier="fail"] { --g: var(--red-soft); }
.k-trk-grid { display: grid; grid-template-columns: var(--sp-4) var(--trk-date-w) minmax(0, 1fr) var(--trk-score-w) var(--trk-marks-w) var(--trk-grade-w) var(--sp-20) var(--icon-btn-sm); gap: var(--sp-14); align-items: center; padding: var(--sp-10) var(--sp-16); }
.k-trk-headrow { padding-block: var(--sp-8) var(--sp-6); font-size: var(--fs-11); letter-spacing: var(--track-spine); text-transform: uppercase; color: var(--muted); }
.k-trk-row { border-radius: var(--r-18); }
.k-trk-row[data-state~="open"] { box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-trk-bar { block-size: var(--sp-32); border-radius: var(--sp-4); background: var(--s); }
.k-trk-cell { min-inline-size: 0; }
.k-trk-title { display: flex; flex-direction: column; min-inline-size: 0; max-inline-size: 100%; text-align: start; }
.k-trk-name { font-size: var(--fs-14); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-trk-title:hover .k-trk-name { text-decoration: underline; text-decoration-color: var(--line); }
.k-trk-sub { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-trk-month { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-14) var(--sp-16) var(--sp-4); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-12); }
.k-trk-headrow + .k-trk-month { border-block-start: 0; }
.k-trk-month > [role="rowheader"] { font-weight: var(--weight-semibold); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--text-2); }
.k-trk-tag { display: inline-block; margin-inline-start: var(--sp-6); padding: 0 var(--sp-6); border-radius: var(--r-6); background: var(--s2); color: var(--text-2); font-size: var(--fs-11); }
.k-trk-subm { display: none; margin-inline-start: var(--sp-6); }
.k-trk-grade[data-state~="estimate"] { box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--g) 30%, transparent); background: transparent; }
.k-trk-score { display: flex; align-items: center; gap: var(--sp-10); }
.k-trk-scorebar { flex: 1 1 0; block-size: var(--bar-6); border-radius: var(--bar-6); background: var(--s2); overflow: hidden; }
.k-trk-scorebar i { display: block; block-size: 100%; inline-size: var(--p); background: var(--c); border-radius: inherit; }
.k-trk-score b { font-size: var(--fs-13); color: var(--c); inline-size: var(--sp-32); text-align: end; }
.k-trk-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); padding: var(--sp-4) var(--sp-16) var(--sp-16) calc(var(--trk-date-w) + var(--sp-32) + var(--sp-2)); }
.k-trk-detail > .k-link, .k-trk-detail > p { grid-column: 1 / -1; justify-self: start; }
.k-trk-block { --t: var(--green); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-16); background: color-mix(in oklch, var(--t) 10%, transparent); }
.k-trk-block b { display: block; font-size: var(--fs-12); color: var(--t); margin-block-end: var(--sp-4); }
.k-trk-block p { font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.k-trk-badly { --t: var(--red-soft); }
.k-trk-notes { --t: var(--amber); }
.k-trk-dialog { inline-size: min(var(--dialog-w-lg), 100%); }
.k-trk-mark { font-size: var(--fs-17); color: var(--crimson); }
.k-trk-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-12); max-block-size: 72dvh; overflow-y: auto; }
.k-trk-half { grid-column: span 2; }
.k-trk-preview { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); border-radius: var(--r-16); background: color-mix(in oklch, var(--c, var(--amber)) 12%, var(--s1)); font-size: var(--fs-13); color: var(--text-2); }
.k-trk-preview b { font-size: var(--fs-22); color: var(--c, var(--amber)); }
.k-trk-reflect { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10); }
.k-trk-reflect .k-field-label { font-weight: var(--weight-semibold); }
.k-trk-well .k-field-label { color: var(--green); }
.k-trk-badly .k-field-label { color: var(--red-soft); }
.k-trk-notes .k-field-label { color: var(--amber); }

/* ---------- Compare topics (the desk's ⇆ Compare; no frame, the Study vocabulary) ---------- */
.k-cmp { inline-size: min(var(--cmp-w), 100%); gap: var(--sp-16); overflow: hidden; }
.k-cmp > * { flex-shrink: 0; }
.k-cmp-intro { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-cmp-sub { font-size: var(--fs-12-5); color: var(--muted); }
.k-cmp-picks { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
.k-cmp-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
.k-cmp-topic { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-18); background: var(--s1); }
.k-cmp-topic[data-side="b"] { box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-cmp-code { font: var(--fs-11-5) var(--font-mono); color: var(--subj-c, var(--teal)); }
.k-cmp-title { font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-cmp-metrics { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-12); margin-block-start: var(--sp-6); font-size: var(--fs-12); color: var(--text-2); }
.k-cmp > .k-cmp-body { flex: 1 1 auto; flex-shrink: 1; display: flex; flex-direction: column; gap: var(--sp-12); min-block-size: 0; overflow-y: auto; }
.k-cmp-signals { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.k-cmp-row { border-radius: var(--r-18); background: var(--s1); padding: var(--sp-12) var(--sp-16); }
.k-cmp-row > summary { font-size: var(--fs-13-5); font-weight: var(--weight-semibold); cursor: pointer; }
.k-cmp-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); margin-block-start: var(--sp-10); }
.k-cmp-cell { display: flex; flex-direction: column; gap: var(--sp-8); min-inline-size: 0; font-size: var(--fs-13); line-height: 1.55; color: var(--text-2); }
.k-cmp-cell p { margin: 0; }
.k-cmp-empty { margin: 0; font-size: var(--fs-12-5); color: var(--muted); }
.k-cmp-term, .k-cmp-q, .k-cmp-progress { display: flex; flex-direction: column; gap: var(--sp-2); padding-block-start: var(--sp-6); border-block-start: var(--hairline) solid var(--line); }
.k-cmp-term b, .k-cmp-q b, .k-cmp-progress b { color: var(--text); font-weight: var(--weight-semibold); }
.k-cmp-term[data-shared] b { color: var(--teal); }
.k-cmp-notes { max-inline-size: none; font-size: var(--fs-13-5); }
.k-cmp-foot { flex-wrap: wrap; }
.k-cmp-note { inline-size: min(var(--dialog-w-lg), 100%); }
.k-cmp-note-in { inline-size: 100%; margin-block-start: var(--sp-8); }

/* ---------- the five tiers, widest first ---------- */
/* ================= the IT desk (frames 18a–18c) =================
   The qualification aggregate, then the units table. Grades take their
   own hue: Distinction* gold, Distinction the IT hue, Merit teal, Pass
   muted. */
[data-grade="gold"] { --g-c: var(--gold); }
[data-grade="it"] { --g-c: var(--it); }
[data-grade="teal"] { --g-c: var(--teal); }
[data-grade="muted"] { --g-c: var(--muted); }
.k-it-grade { --chip-c: var(--g-c); font-size: var(--fs-13); font-weight: var(--weight-semibold); padding: var(--sp-4) var(--sp-12); }
.k-it-agg { display: grid; grid-template-columns: minmax(0, var(--it-agg-l)) minmax(0, 1fr) minmax(0, var(--it-agg-r)); gap: var(--sp-32); align-items: center; }
.k-it-agg-l { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.k-it-total { display: flex; align-items: baseline; gap: var(--sp-4); }
.k-it-total > b { font-size: var(--fs-38); font-weight: var(--weight-medium); line-height: 1; }
.k-it-sub { font-size: var(--fs-12-5); color: var(--muted); }
.k-it-agg-m { display: flex; flex-direction: column; gap: var(--sp-10); min-inline-size: 0; }
.k-it-cap { font-size: var(--fs-12-5); color: var(--muted); }
.k-it-agg-r { display: flex; flex-direction: column; gap: var(--sp-10); min-inline-size: 0; }
.k-it-r-h { font-size: var(--fs-12-5); color: var(--muted); }
.k-it-target { align-self: stretch; }
.k-it-needbox { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-it-need { margin: 0; font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--text); }
.k-it-need b { font-weight: var(--weight-semibold); }
.k-it-it { color: var(--gold); }
.k-it-gold { color: var(--gold); }
.k-it-warn { margin: 0; font-size: var(--fs-12-5); color: var(--amber); }
.k-it-note { margin: 0; font-size: var(--fs-12-5); color: var(--muted); }

/* a bar out of the maximum with a tick at each boundary */
.k-it-bar { position: relative; display: block; block-size: var(--sp-6); border-radius: var(--sp-6); background: linear-gradient(90deg, var(--it) var(--fill, 0%), var(--line) var(--fill, 0%)); }
.k-it-bar[data-state="empty"] { background: var(--s3); }
.k-it-bar--big { block-size: var(--sp-8); margin-block-end: var(--sp-32); }
.k-it-run { position: absolute; inset-block: 0; inset-inline-start: var(--fill); inline-size: calc(var(--run) - var(--fill)); background: repeating-linear-gradient(90deg, var(--it-run) 0 var(--sp-4), transparent var(--sp-4) var(--sp-6)); }
.k-it-tick { position: absolute; inset-block: calc(-1 * var(--sp-4)); inset-inline-start: var(--at); inline-size: var(--ring-1-5); background: var(--g-c); }
.k-it-tick-l { position: absolute; inset-block-start: calc(100% + var(--sp-6)); inset-inline-start: var(--at); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: var(--fs-11); line-height: 1.2; color: var(--g-c); white-space: nowrap; }
.k-it-tick-l > span { color: var(--muted); }

.k-it-units { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-it-units-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-6) var(--sp-12); }
.k-it-nt { display: inline-flex; align-items: center; gap: var(--sp-8); margin-inline-start: auto; font-size: var(--fs-13); color: var(--text-2); cursor: pointer; }
.k-it-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-16); margin: 0; font-size: var(--fs-12-5); }
.k-it-key { display: inline-flex; align-items: baseline; gap: var(--sp-4); color: var(--text-2); }
.k-it-key::before { content: ""; align-self: center; inline-size: var(--sp-10); block-size: var(--sp-6); border-radius: var(--r-2); background: var(--g-c); }
.k-it-key > b { color: var(--g-c); font-weight: var(--weight-semibold); }
.k-it-table { display: flex; flex-direction: column; }
.k-it-tr { position: relative; display: grid; grid-template-columns: minmax(0, 2.2fr) var(--it-year-w) minmax(0, 1.6fr) var(--it-mark-w) var(--it-grade-w) minmax(0, 1.6fr); gap: var(--sp-14); align-items: center; min-block-size: var(--it-row-h); padding: var(--sp-6) var(--sp-12); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
.k-it-th { min-block-size: 0; padding-block: var(--sp-8); border-block-start: 0; font-size: var(--fs-11); font-weight: var(--weight-semibold); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.k-it-tr[data-state~="editing"] { border-radius: var(--r-12); background: var(--s2); }
.k-it-tr[data-state~="editing"]::before { content: ""; position: absolute; inset-block: var(--sp-6); inset-inline-start: 0; inline-size: var(--sp-2); border-radius: var(--r-2); background: var(--crimson); }
.k-it-tr[data-state~="not-taken"] { opacity: 0.5; }
.k-it-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-it-name > b { color: var(--it); font-weight: var(--weight-semibold); }
.k-it-year { color: var(--text-2); }
.k-it-status { color: var(--text-2); }
.k-it-status[data-state~="quiet"] { color: var(--muted); }
.k-it-tr[data-state~="editing"] .k-it-status { color: var(--crimson-soft); }
.k-it-mark { display: flex; align-items: baseline; gap: var(--sp-6); }
.k-it-mark--edit { align-items: center; }
.k-it-markbtn { display: inline-flex; align-items: baseline; gap: var(--sp-4); padding: 0; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; }
.k-it-markbtn > b { font-size: var(--fs-18); font-weight: var(--weight-medium); }
.k-it-markbtn:hover > b { color: var(--it); }
.k-it-mark-in { inline-size: var(--it-mark-in-w); text-align: center; box-shadow: inset 0 0 0 var(--ring-1-5) var(--crimson); }
.k-it-mark-in[data-state~="bad"] { box-shadow: inset 0 0 0 var(--ring-1-5) var(--red); }
.k-it-mode { font-size: var(--fs-12); color: var(--muted); }
.k-it-mark-in { appearance: textfield; }
.k-it-mark-in::-webkit-inner-spin-button, .k-it-mark-in::-webkit-outer-spin-button { appearance: none; margin: 0; }
.k-it-barcell { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8); }
.k-it-tr[data-state~="editing"] .k-it-barcell > .k-it-bar { flex-basis: 100%; }
.k-it-tr[data-state~="editing"] .k-it-barcell > .k-btn--quiet { margin-inline-start: auto; }
.k-it-barcell > .k-it-bar { flex: 1 1 auto; min-inline-size: var(--it-bar-min); }

@media (max-width: 1240px) {
.k-asg { grid-template-columns: minmax(0, 1fr); }
.k-asg-panel { position: static; border-inline-start: 0; border-radius: var(--r-24); background: var(--s1); }
.k-topic-col { padding-inline: var(--sp-22); }
.k-subj-hero { grid-template-columns: auto minmax(0, 1fr); }
.k-subj-papers { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
.k-trk-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-trk-figs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.k-trk-trend { grid-column: 1 / -1; }
.k-rv-row, .k-cs-row { grid-template-columns: minmax(0, 1fr); }
.k-topic, .k-topic[data-state~="insp-closed"], .k-topic[data-state~="editing"] { grid-template-columns: minmax(0, 1fr); }
.k-insp { border-inline-start: 0; border-block-start: var(--hairline) solid var(--line); }
.k-spec-split { columns: 1; }
.k-subj-row, .k-subj-row--even { grid-template-columns: minmax(0, 1fr); }
.k-subj-side { flex-direction: row; }
.k-subj-hero:is(.k-cx-hero, .k-ja-hero, .k-mind-hero, .k-cr-hero) + .k-subj-side { contain: none; }
.k-subj-side > *, .k-subj-side > :first-child { flex: 1 1 0; min-inline-size: 0; }
}

@media (max-width: 860px) {
.k-cmp-head, .k-cmp-cells { grid-template-columns: minmax(0, 1fr); }
.k-cmp-picks { grid-template-columns: minmax(0, 1fr); }
.k-cmp-picks > :nth-child(2) { justify-self: center; rotate: 90deg; }
.k-cmp-topic[data-side="a"] { box-shadow: inset 0 0 0 var(--hairline) var(--line); }
/* stacked, the fixed parts (two pickers, two topic cards, the tabs and
   the actions) filled the whole sheet and left the scrolling body no
   height at all, so the comparison never showed (phone review). The
   sheet scrolls as one instead, with the actions at its end. */
.k-cmp { overflow-y: auto; }
.k-cmp > .k-cmp-body { flex: 0 0 auto; overflow: visible; }
.k-cmp-foot > .k-btn { flex: 1 1 auto; }
.k-cmp > .k-cmp-foot { position: static; }
.k-spine-open { display: grid; }
/* five cells stay on the row: bar, name, score, reviewed, edit */
.k-trk-grid { grid-template-columns: var(--sp-4) minmax(0, 1fr) auto auto var(--icon-btn-sm); }
/* each entry reads as its own card on the phone, its marks on the sub-line */
.k-trk-row { margin-block: var(--sp-4); background: var(--s1); }
.k-trk-subm { display: inline; }
.k-trk-grid > :nth-child(2), .k-trk-grid > :nth-child(5), .k-trk-grid > :nth-child(6), .k-trk-headrow { display: none; }
.k-trk-detail, .k-trk-reflect, .k-trk-form { grid-template-columns: minmax(0, 1fr); padding-inline-start: var(--sp-16); }
.k-trk-half { grid-column: auto; }
.k-asg-row { grid-template-columns: var(--sp-4) minmax(0, 1fr) auto; }
.k-asg-prog, .k-asg-open { display: none; }
.k-asg-due { grid-column: 2; grid-row: 2; }
.k-asg-grid { grid-template-columns: minmax(0, 1fr); }
.k-cs-row--even { grid-template-columns: minmax(0, 1fr); }
.k-ed-addgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-ed-field { grid-template-columns: minmax(0, 1fr); }
.k-ed-hint { grid-column: 1; }
.k-att { grid-template-columns: minmax(0, 1fr); }
.k-sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-practice { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
/* a topic row on a phone or a narrow Split View: the chips and the count
   take a second line (with touch-sized buttons the one line ran ~60px
   past a 375px screen) */
.k-rv-topic { flex-wrap: wrap; row-gap: var(--sp-6); }
.k-rv-topic::after { content: ""; order: 1; flex-basis: 100%; }
.k-rv-topic > .k-chip, .k-rv-topic-n { order: 2; }
.k-rv-topic-t + .k-chip { margin-inline-start: calc(var(--sp-4) + var(--sp-14)); }
.k-rv-topic-n { inline-size: auto; margin-inline-start: auto; }
.k-it-agg { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); }
.k-it-th { display: none; }
.k-it-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name grade" "status mark" "bar bar"; row-gap: var(--sp-6); padding-block: var(--sp-12); }
.k-it-name { grid-area: name; }
.k-it-year { display: none; }
.k-it-status { grid-area: status; font-size: var(--fs-12-5); }
.k-it-mark { grid-area: mark; }
.k-it-gcell { grid-area: grade; }
.k-it-barcell { grid-area: bar; }
.k-rv-hero { flex-direction: column; align-items: stretch; }
.k-rv-go { inline-size: auto; }
/* 15e: the four ratings stay one row where the thumb reaches, 60px tall;
   a phone has no keyboard legend */
.k-fc-rate { gap: var(--sp-6); }
.k-fc-rate > * { min-block-size: var(--fc-rate-h); }
.k-fc-pgroup:has(> .k-fc-keys) { display: none; }
.k-fc-r { min-inline-size: 0; }
.k-fc-pgrid { grid-template-columns: minmax(0, 1fr); }
.k-topic-col { padding: var(--sp-16); }
.k-topic-title { font-size: var(--fs-26); }
/* 15d: ☰, the parent unit and the status chip; the title over one mono
   line; the neighbours, the full path and the inspector leave the page
   (the inspector opens as a sheet from the chip) */
.k-topic-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.k-topic-prow { display: flex; min-inline-size: 0; align-items: center; gap: var(--sp-10); margin-block-end: var(--sp-10); }
.k-topic-pparent { display: block; }
.k-topic-pchip { display: inline-flex; }
.k-topic-reader > .k-kicker, .k-topic-dots { display: none; }
.k-topic-reader { gap: var(--sp-6); }
.k-topic-reader .k-iconbtn { inline-size: var(--hit-coarse); block-size: var(--hit-coarse); flex: 0 0 auto; }
.k-topic-reader select { flex: 1 1 0; min-inline-size: 0; }
.k-insp-sheet .k-insp { inline-size: auto; min-inline-size: 0; }
.k-topic-prow .k-spine-open { display: grid; flex: 0 0 auto; }
.k-topic-pparent { flex: 1 1 0; min-inline-size: 0; font-size: var(--fs-13); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-topic-pchip { flex: 0 0 auto; gap: var(--sp-6); min-block-size: var(--hit-coarse); padding-inline: var(--sp-12); font: var(--weight-semibold) var(--fs-13) var(--font-ui); }
.k-topic-steps, .k-topic-path, .k-topic-ref { display: none; }
.k-topic-pmeta { display: block; margin-block-start: var(--sp-4); font: var(--fs-12) var(--font-mono); color: var(--muted); }
.k-topic > .k-insp { display: none; }
/* 15c: the hero stacks — a small ring beside the desk and board, the
   papers under it; the name is the title bar's. Continue and Weakest sit
   side by side; the analytics are a summary row that opens a sheet */
.k-subj-hero { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-16) var(--sp-14); padding: var(--sp-18); }
.k-subj-ring { inline-size: var(--home-ring-sm); block-size: var(--home-ring-sm); }
.k-subj-ring-in { inline-size: calc(var(--home-ring-sm) - var(--sp-10)); block-size: calc(var(--home-ring-sm) - var(--sp-10)); }
.k-subj-ring-in b { font-size: var(--fs-17); }
.k-subj-name { display: none; }
.k-subj-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.k-subj-next { padding: var(--sp-14); gap: var(--sp-8); }
.k-subj-next-t, .k-subj-next-why { white-space: normal; }
.k-subj-row > .k-sa { display: none; }
.k-sa-row { display: flex; }
.k-res-del { opacity: 1; }
/* a notes table keeps its columns: tighter cells first, then the shared
   scroller takes what still does not fit */
.k-n-table th, .k-n-table td { padding: var(--sp-8) var(--sp-10); }
}

/* touch: the 44px minimum (base.css) raised the HEIGHT of every button,
   so a round control drew as a 28×44 oval (phone review, after part 2).
   A round control grows as a circle; a tiny inline mark keeps the
   documented dense size (invariant 69) instead of stretching. */
@media (pointer: coarse) {
.k-ed-ib, .k-qz-step { min-inline-size: var(--hit-coarse); min-block-size: var(--hit-coarse); }
.k-rag-pick { min-inline-size: var(--hit-coarse); min-block-size: var(--hit-coarse); }
}

}