/* KurenaiOS — css/views/creatives.css · @layer views
   Creatives, the sixth study space (roadmap 5.7 item 3, design turn 31): the desk (31a–31b), a
   lesson on the topic page (31c–31d), "Good for this unit" (31e), the Practice Log and the
   Portfolio (31j–31k), a unit's project, the Writing Desk (31m–31n), tracks and settings.

   The hue is --cr (萌黄 Moegi). It marks place (the current unit, the daily card, a study to do),
   never pass or fail: done is --green with ✓ and a word, current is --amber, alarm is --alarm.
   Prose for reading and writing takes --font-read. Dawn is a token swap.

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

/* ================= shared marks ================= */
.k-cr-emblem { font-family: var(--font-kanji); font-weight: var(--weight-semibold); color: var(--cr); }
.k-cr-kind { display: inline-grid; place-items: center; inline-size: var(--sp-32); block-size: var(--sp-32); flex: none; border-radius: 50%; font: var(--weight-semibold) var(--fs-13) var(--font-kanji); background: var(--s2); color: var(--cr); }
.k-cr-chip { --chip-c: var(--cr); }
.k-cr-grow { flex: 1; }
.k-cr-done { display: inline-flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-12-5); font-weight: var(--weight-semibold); white-space: nowrap; }
.k-cr-done[data-tone="done"] { color: var(--green); }
.k-cr-done[data-tone="now"] { color: var(--amber); }
.k-cr-tick { display: inline-grid; place-items: center; inline-size: var(--sp-22); block-size: var(--sp-22); flex: none; border-radius: 50%; font-size: var(--fs-11); color: var(--green); background: color-mix(in oklch, var(--green) 16%, transparent); }

/* ================= the desk (31a, on Code's 26a) ================= */
.k-subj-paper[data-state="later"] .k-mono { color: var(--muted); }
.k-cr-hero { grid-template-rows: minmax(0, 1fr) auto; row-gap: var(--sp-20); align-items: center; }
.k-cr-hero-path { grid-column: 1 / -1; align-self: end; min-inline-size: 0; padding-block-start: var(--sp-16); border-block-start: var(--hairline) solid var(--line); }
.k-cr-hpath { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding-block: var(--sp-6); }
.k-cr-hstage { grid-column: span var(--span); display: grid; grid-template-columns: subgrid; row-gap: var(--sp-10); min-inline-size: 0; }
.k-cr-hstage-h { grid-column: 1 / -1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-start: calc(50% / var(--span) - var(--cx-sq-compact) / 2); font-size: var(--fs-11-5); color: var(--muted); }
.k-cr-hstage-h b { color: var(--text); font-weight: var(--weight-medium); }
.k-cr-hstage-m { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.k-cr-hnode { position: relative; display: grid; place-items: center; min-block-size: var(--cx-sq-compact); }
.k-cr-hnode::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: calc(50% + var(--cx-sq-compact) / 2 + var(--sp-4)); inline-size: calc(100% - var(--cx-sq-compact) - var(--sp-8)); block-size: var(--hairline); background: color-mix(in oklch, var(--muted) 55%, transparent); }
.k-cr-hnode[data-state="last"]::after { content: none; }
.k-cr-hnode:has(> [data-state="done"])::after { background: var(--cr); }
.k-cr-hsq { display: inline-grid; place-items: center; inline-size: var(--cx-sq-compact); block-size: var(--cx-sq-compact); padding: 0; border: 0; border-radius: var(--r-8); background: var(--s2); font: var(--weight-semibold) var(--fs-11) var(--font-mono); color: var(--text-2); cursor: pointer; }
.k-cr-hsq:not([data-state]) { box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--muted) 60%, transparent); }
.k-cr-hsq[data-state="done"] { background: var(--cr); color: var(--cr-ink); }
.k-cr-hsq[data-state="current"] { box-shadow: 0 0 0 var(--focus-width) var(--bg), 0 0 0 calc(var(--focus-width) * 2) var(--cr); color: var(--text); }
.k-cr-hsq[data-state="later"] { background: none; outline: var(--hairline) dashed var(--muted); outline-offset: calc(var(--hairline) * -1); color: var(--muted); cursor: default; }
.k-cr-daily { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-cr-daily-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.k-cr-daily-t { margin: 0; font-size: var(--fs-18); line-height: var(--lh-snug); }
.k-cr-daily-why { margin: 0; font-size: var(--fs-13); color: var(--text-2); }
.k-cr-daily-go { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }
.k-cr-daily-phone { display: none; }
.k-cr-port { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-cr-portlist { display: flex; flex-direction: column; }
.k-cr-port > .k-btn { align-self: flex-start; margin-block-start: auto; }
.k-cr-path { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cr-units > .k-unit { flex: 1 0 var(--cr-unit-w); inline-size: auto; }
.k-cr-unit[data-state="later"] { cursor: default; }

/* ================= a lesson (31c–31d) ================= */
.k-cr-pathskill { color: var(--cr); }
.k-cr-spine-stage { display: flex; align-items: center; gap: var(--sp-6); }
.k-cr-notes { font-family: var(--font-read); }
.k-cr-page-t { margin: 0 0 var(--sp-12); font-family: var(--font-ui); }
.k-cr-page { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-cr-h { margin: var(--sp-6) 0 0; font-family: var(--font-ui); font-size: var(--fs-16); }
.k-cr-p { margin: 0; }
.k-cr-list { margin: 0; padding-inline-start: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-4); }
.k-cr-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-8); counter-reset: none; }
.k-cr-steps > li { display: flex; align-items: baseline; gap: var(--sp-10); }
/* the steps carry their own numbered badge: the notes' list counter stays off */
.k-prose .k-cr-steps > li { padding-inline-start: 0; }
.k-prose .k-cr-steps > li::before { content: none; }
.k-cr-steps[data-art] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); }
.k-cr-steps[data-art] > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: var(--sp-6) var(--sp-8); }
.k-cr-steps[data-art] > li > .k-cr-art { grid-column: 1 / -1; }
.k-cr-art { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-12); background: var(--s2); }
.k-cr-beginner > .k-cr-art { aspect-ratio: auto; max-block-size: var(--cr-paper-h); object-fit: contain; }
.k-cr-spot { display: block; inline-size: var(--cr-thumb-h); max-inline-size: 40%; }
.k-cr-step-n { display: inline-grid; place-items: center; inline-size: var(--sp-24); block-size: var(--sp-24); flex: none; border-radius: 50%; font-size: var(--fs-12); background: color-mix(in oklch, var(--cr) 18%, transparent); color: var(--text); }
.k-cr-callout { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--s2); border-inline-start: var(--bar-4) solid var(--cr); font-family: var(--font-ui); }
.k-cr-callout p { margin: 0; font-size: var(--fs-14); color: var(--text-2); }
.k-cr-pair { margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-cr-pair-row { display: grid; grid-template-columns: var(--sp-64) minmax(0, 1fr); align-items: baseline; gap: var(--sp-10); }
.k-cr-pair-row p { margin: 0; }
.k-cr-pair-row[data-state="before"] p { color: var(--text-2); }
.k-cr-pair-why { font-family: var(--font-ui); font-size: var(--fs-13); color: var(--muted); }
.k-cr-ex, .k-cr-beginner { margin: 0; display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-14); background: var(--s1); }
.k-cr-ex-text, .k-cr-beginner-text, .k-cr-mine-text { margin: 0; display: flex; flex-direction: column; gap: var(--sp-8); font-family: var(--font-read); font-size: var(--fs-16); line-height: var(--lh-read); }
.k-cr-ex-text p, .k-cr-beginner-text p, .k-cr-mine-text p { margin: 0; white-space: pre-wrap; }
.k-cr-ex-note, .k-cr-beginner-note { font-family: var(--font-ui); font-size: var(--fs-13); color: var(--muted); }
.k-cr-beginner { border: var(--hairline) dashed color-mix(in oklch, var(--text-2) 45%, transparent); }
.k-cr-beginner-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; }

.k-cr-intro { display: flex; flex-direction: column; gap: var(--sp-6); margin-block-end: var(--sp-14); }
.k-cr-intro p { margin: 0; font-size: var(--fs-14); }
.k-cr-studies { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cr-study { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-16) var(--sp-18); border-radius: var(--r-20); background: var(--s1); }
.k-cr-study[data-state="next"] { box-shadow: inset 0 0 0 var(--hairline) var(--cr); }
.k-cr-study-top { display: flex; align-items: baseline; gap: var(--sp-10); }
.k-cr-study-id { font-size: var(--fs-12-5); color: var(--muted); }
.k-cr-study[data-state="next"] .k-cr-study-id { color: var(--cr); }
.k-cr-study-t { margin: 0; flex: 1; min-inline-size: 0; font-size: var(--fs-16); }
.k-cr-study-min { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-cr-study-dl { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-13-5); }
.k-cr-study-dl > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: var(--sp-10); }
.k-cr-study-dl dt { color: var(--muted); }
.k-cr-study-dl dd { margin: 0; }
.k-cr-study-foot { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.k-cr-projteaser { display: flex; flex-direction: column; gap: var(--sp-6); align-items: flex-start; margin-block-start: var(--sp-14); padding: var(--sp-16) var(--sp-18); border-radius: var(--r-20); border: var(--hairline) dashed color-mix(in oklch, var(--text-2) 45%, transparent); }
.k-cr-projteaser p { margin: 0; }
.k-cr-check { display: flex; align-items: center; gap: var(--sp-8); }
.k-cr-check-t { display: flex; flex-direction: column; font-size: var(--fs-13); line-height: var(--lh-snug); }
.k-cr-check-t small { color: var(--muted); font-size: var(--fs-11-5); }
.k-cr-insp-skill { margin: 0 0 var(--sp-4); font-weight: var(--weight-semibold); }
.k-cr-insp-studies { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-13); }
.k-cr-insp-studies > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-8); align-items: baseline; }
.k-cr-insp-studies small { color: var(--muted); }
.k-cr-insp-studies > li[data-state="passed"] small { color: var(--green); }

/* ================= "Good for this unit" (31e) ================= */
.k-cr-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-20); align-items: start; }
.k-cr-checkcol { display: flex; flex-direction: column; gap: var(--sp-20); min-inline-size: 0; }
.k-cr-checkcard { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-cr-mine-img { display: block; max-inline-size: 100%; max-block-size: var(--cr-paper-h); object-fit: contain; border-radius: var(--r-12); }
.k-cr-calib { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-cr-calib-skill { margin: 0; font-size: var(--fs-18); line-height: var(--lh-snug); }
.k-cr-calib-text { margin: 0; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--text-2); text-wrap: pretty; }
.k-cr-ignore ul { margin: var(--sp-4) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-14); font-size: var(--fs-13); }
.k-cr-ignore s { color: var(--muted); }
.k-cr-checkform { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-cr-checkrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-14); flex-wrap: wrap; }
.k-cr-checkrow > b { font-weight: var(--weight-medium); }
.k-cr-choices { display: flex; gap: var(--sp-8); }
.k-cr-choice { min-block-size: var(--hit); padding: 0 var(--sp-16); border-radius: var(--r-pill); border: var(--hairline) solid var(--line); background: var(--s1); color: var(--text); font: inherit; cursor: pointer; }
.k-cr-choice[aria-pressed="true"] { font-weight: var(--weight-semibold); box-shadow: inset 0 0 0 var(--focus-width) var(--text); }
.k-cr-checknote { inline-size: 100%; box-sizing: border-box; }
.k-cr-band { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-14); background: var(--s2); border-inline-start: var(--bar-4) solid var(--amber); }
.k-cr-band p { margin: 0; }
.k-cr-band[data-tone="done"] { border-inline-start-color: var(--green); }

/* ================= the Practice Log and the Portfolio (31j–31k) ================= */
.k-cr-loglist { display: flex; flex-direction: column; }
.k-cr-work { display: flex; align-items: center; gap: var(--sp-12); padding-block: var(--sp-10); border-block-end: var(--hairline) solid var(--line); }
.k-cr-work:last-child { border-block-end: 0; }
.k-cr-work[data-state="open"] { background: color-mix(in oklch, var(--cr) 6%, transparent); }
.k-cr-work-t { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.k-cr-work-t small { font-size: var(--fs-12); }
.k-cr-workview { max-block-size: 60vh; overflow: auto; }
.k-cr-dialog--wide { inline-size: min(92vw, var(--cr-paper-h) * 2); }
.k-cr-form { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cr-field { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-13); color: var(--text-2); }
.k-cr-portgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cr-unit-w), 1fr)); gap: var(--sp-16); }
.k-cr-piece { display: flex; flex-direction: column; gap: var(--sp-6); text-align: start; border: 0; color: inherit; font: inherit; cursor: pointer; }
.k-cr-thumb { display: grid; place-items: center; block-size: var(--cr-thumb-h); border-radius: var(--r-12); background: var(--s2); overflow: hidden; font: var(--weight-semibold) var(--fs-32) var(--font-kanji); color: var(--cr); }
.k-cr-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-cr-thumb-text { margin: 0; padding: var(--sp-12); align-self: start; font: var(--fs-12-5) / var(--lh-body) var(--font-read); color: var(--text-2); }

/* ================= a project ================= */
.k-cr-project { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cr-project-t { margin: 0; font-size: var(--fs-22); }
.k-cr-project p { margin: 0; }
.k-cr-milestones { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.k-cr-milestones > li { display: flex; align-items: center; gap: var(--sp-12); min-block-size: var(--sp-48); border-block-end: var(--hairline) solid var(--line); }
.k-cr-milestones > li:last-child { border-block-end: 0; }
.k-cr-milestones .k-cr-tick { color: var(--text-2); background: var(--s2); }
.k-cr-milestones > li[data-state="done"] .k-cr-tick { color: var(--green); background: color-mix(in oklch, var(--green) 16%, transparent); }
.k-cr-ms-t { flex: 1; min-inline-size: 0; }

/* ================= tracks and settings ================= */
.k-cr-trackgrid { display: flex; flex-direction: column; gap: var(--sp-20); }
.k-cr-trackcard { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cr-trackcard[data-state="focus"] { box-shadow: inset 0 0 0 var(--hairline) var(--cr); }
.k-cr-trackpct { margin-inline-start: auto; font-size: var(--fs-13); color: var(--text-2); }
.k-cr-unitlist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cr-side-w), 1fr)); column-gap: var(--sp-24); }
.k-cr-unitrow { display: grid; grid-template-columns: var(--sp-32) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-10); inline-size: 100%; min-block-size: var(--hit-coarse); padding: var(--sp-4) 0; border: 0; border-block-end: var(--hairline) solid var(--line); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.k-cr-unitrow:disabled { cursor: default; color: var(--text-2); }
.k-cr-unitrow-t { min-inline-size: 0; font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-cr-settings { display: flex; flex-direction: column; gap: var(--sp-16); }
.k-cr-setrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-20); flex-wrap: wrap; padding-block-end: var(--sp-14); border-block-end: var(--hairline) solid var(--line); }
.k-cr-setrow:last-child { padding-block-end: 0; border-block-end: 0; }
.k-cr-setrow p { margin: var(--sp-2) 0 0; font-size: var(--fs-13); }
.k-cr-days { display: flex; gap: var(--sp-6); }
.k-cr-day { inline-size: var(--cr-day); block-size: var(--cr-day); border-radius: 50%; border: var(--hairline) solid var(--line); background: none; color: var(--text-2); font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }
.k-cr-day[aria-pressed="true"] { background: var(--cr); border-color: var(--cr); color: var(--cr-ink); }
.k-cr-addform { max-inline-size: var(--cr-paper-measure); }

/* ================= the Writing Desk (31m–31n) ================= */
.k-cr-write-top { display: flex; align-items: center; gap: var(--sp-14); flex-wrap: wrap; margin-block-end: var(--sp-14); }
.k-cr-write-top p { margin: 0; font-size: var(--fs-13); }
.k-cr-drafts .k-card-head > .k-btn { margin-inline-start: auto; }
.k-cr-draftlist { display: flex; flex-direction: column; }
.k-cr-draftrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-16); align-items: center; min-block-size: var(--sp-48); border: 0; border-block-end: var(--hairline) solid var(--line); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.k-cr-draftrow-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-cr-write-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--cr-side-w); gap: var(--sp-20); align-items: start; }
.k-cr-write-main { display: flex; flex-direction: column; align-items: center; gap: var(--sp-10); min-inline-size: 0; padding: var(--sp-20) var(--sp-24); border-radius: var(--r-24); background: var(--s1); }
.k-cr-write-main > * { inline-size: 100%; max-inline-size: var(--cr-paper-measure); }
.k-cr-write-title { font-size: var(--fs-20); font-weight: var(--weight-semibold); border: 0; background: none; padding-inline: 0; }
.k-cr-paper { display: block; min-block-size: var(--cr-paper-h); box-sizing: border-box; resize: vertical; padding: var(--sp-12) 0; border: 0; background: none; color: var(--text); font: var(--fs-18) / var(--lh-read) var(--font-read); outline: none; }
.k-cr-paper:focus-visible { box-shadow: 0 var(--hairline) 0 0 var(--line); }
.k-cr-write-foot { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; padding-block-start: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-cr-write-foot .k-bar { flex: 0 1 var(--cr-unit-w); }
.k-cr-count { font-size: var(--fs-13); }
.k-cr-savednote { font-size: var(--fs-12); }
.k-cr-write-side { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-cr-brief, .k-cr-sprint, .k-cr-versions { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-cr-brief p, .k-cr-sprint p, .k-cr-versions p { margin: 0; font-size: var(--fs-13); }
.k-cr-brief > .k-link { align-self: flex-start; }
.k-cr-brief .k-cr-study-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.k-cr-sprint-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--sp-10); font-size: var(--fs-13); }
.k-cr-sprint-row > label { display: flex; align-items: center; gap: var(--sp-8); }
.k-cr-num { inline-size: 100%; min-inline-size: 0; }
.k-cr-versions-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.k-cr-verlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-13); }
.k-cr-verlist > li { display: flex; align-items: baseline; gap: var(--sp-8); flex-wrap: wrap; }
.k-cr-diff { font: var(--fs-16) / var(--lh-read) var(--font-read); white-space: pre-wrap; max-block-size: 60vh; overflow: auto; }
.k-cr-diff-ins { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: var(--focus-width); background: color-mix(in oklch, var(--green) 14%, transparent); color: var(--text); }
.k-cr-diff-del { color: var(--text-2); background: color-mix(in oklch, var(--alarm) 10%, transparent); }

/* ================= Graphic design's drills (31o–31p) ================= */
.k-crd-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-20); }
.k-crd-tile { display: flex; flex-direction: column; gap: var(--sp-6); text-align: start; border: 0; color: inherit; font: inherit; cursor: pointer; }
.k-crd-tile:hover { background: var(--s2); }
.k-crd-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); margin-block-start: auto; padding-block-start: var(--sp-10); }
.k-crd { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-crd-head { display: flex; align-items: baseline; gap: var(--sp-10); flex-wrap: wrap; }
.k-crd-stage { display: flex; flex-direction: column; gap: var(--sp-20); }
.k-crd-board { display: flex; flex-direction: column; gap: var(--sp-16); }
.k-crd-board > p { margin: 0; }
.k-crd-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-14); padding-block-start: var(--sp-14); border-block-start: var(--hairline) solid var(--line); }
.k-crd-verdict { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; font-size: var(--fs-13); }
.k-crd-verdict b[data-state="good"], .k-crd-rules li[data-state="good"], .k-crd-pal-live [data-state="good"], .k-crd-results li[data-state="good"] > span:first-child { color: var(--green); }
.k-crd-verdict b[data-state="off"] { color: var(--amber); }
.k-crd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); align-items: start; }
.k-crd-col { display: flex; flex-direction: column; gap: var(--sp-14); min-inline-size: 0; }
.k-crd-opt { min-block-size: var(--hit); padding: 0 var(--sp-14); border-radius: var(--r-pill); border: var(--hairline) solid var(--line); background: var(--s1); color: var(--text); font: inherit; font-size: var(--fs-13); cursor: pointer; }
.k-crd-opt[aria-checked="true"], .k-crd-opt[aria-pressed="true"] { font-weight: var(--weight-semibold); box-shadow: inset 0 0 0 var(--focus-width) var(--text); }

/* kerning: the outline is the typeface's own spacing */
.k-crd-wordwrap { display: grid; justify-content: center; padding-block: var(--sp-24); border-radius: var(--r-16); background: var(--s2); overflow-x: auto; }
.k-crd-wordwrap > * { grid-area: 1 / 1; justify-self: start; }
.k-crd-word { display: flex; font: var(--weight-semibold) var(--fs-64) / 1 var(--font-read); font-kerning: normal; white-space: nowrap; }
.k-crd-l { margin-inline-end: calc(var(--ls, 0) * 1em); }
.k-crd-ghost { color: transparent; -webkit-text-stroke: var(--hairline) var(--cr); opacity: 0; pointer-events: none; }
.k-crd-stage[data-state~="reference"] .k-crd-ghost { opacity: 1; }
.k-crd-gaps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); }
.k-crd-gap { display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-12); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-13); }
.k-crd-gap .k-mono { min-inline-size: var(--sp-32); text-align: center; font-size: var(--fs-12); }

/* pairing */
.k-crd-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.k-crd-pick > .k-kicker { flex-basis: 100%; }
.k-crd-preview, .k-crd-flyer { align-self: stretch; }
.k-crd-preview { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-24); border-radius: var(--r-16); background: var(--s2); }
.k-crd-preview h3 { margin: 0; font-size: var(--fs-32); line-height: var(--lh-tight); }
.k-crd-preview p { margin: 0; font-size: var(--fs-16); line-height: var(--lh-body); }
[data-face="read"] { font-family: var(--font-read); }
[data-face="ui"] { font-family: var(--font-ui); }
[data-face="kanji"] { font-family: var(--font-kanji); }
[data-face="hand"] { font-family: var(--font-hand); }
[data-face="mono"] { font-family: var(--font-mono); }

/* hierarchy */
.k-crd-ctrls { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-crd-ctrl { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--sp-24) auto auto; align-items: center; gap: var(--sp-6); }
.k-crd-ctrl-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); }
.k-crd-ctrl .k-mono { text-align: center; font-size: var(--fs-12); }
.k-crd-flyer { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-24); border-radius: var(--r-16); background: var(--s2); }
.k-crd-fl { line-height: var(--lh-snug); }
.k-crd-fl[data-size="1"] { font-size: var(--fs-12); }
.k-crd-fl[data-size="2"] { font-size: var(--fs-14); }
.k-crd-fl[data-size="3"] { font-size: var(--fs-18); }
.k-crd-fl[data-size="4"] { font-size: var(--fs-26); }
.k-crd-fl[data-size="5"] { font-size: var(--fs-38); }
.k-crd-fl[data-bold] { font-weight: var(--weight-bold); }
.k-crd-rules { margin: var(--sp-4) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); color: var(--text-2); }

/* palette: the colours come only from the sliders' custom properties */
.k-crd-swrow { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: var(--sp-4) var(--sp-12); }
.k-crd-swrow > b { grid-column: 2 / -1; font-size: var(--fs-13); }
.k-crd-sw { grid-row: 1 / -1; inline-size: var(--sp-32); block-size: var(--sp-32); border-radius: var(--r-8); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-crd-sw[data-sw="bg"] { background: oklch(var(--bg-l) var(--bg-c) var(--bg-h)); }
.k-crd-sw[data-sw="fg"] { background: oklch(var(--fg-l) var(--fg-c) var(--fg-h)); }
.k-crd-sw[data-sw="ac"] { background: oklch(var(--ac-l) var(--ac-c) var(--ac-h)); }
.k-crd-slider { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-12); color: var(--muted); }
.k-crd-range { inline-size: 100%; accent-color: var(--cr); }
.k-crd-pal { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-10); padding: var(--sp-24); border-radius: var(--r-16); background: oklch(var(--bg-l) var(--bg-c) var(--bg-h)); color: oklch(var(--fg-l) var(--fg-c) var(--fg-h)); }
.k-crd-pal p { margin: 0; }
.k-crd-pal-ac { padding: var(--sp-8) var(--sp-16); border-radius: var(--r-pill); background: oklch(var(--ac-l) var(--ac-c) var(--ac-h)); color: oklch(var(--bg-l) var(--bg-c) var(--bg-h)); font-weight: var(--weight-semibold); }
.k-crd-pal-live { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-16); font-size: var(--fs-13); font-family: var(--font-mono); color: var(--text-2); }

/* grid: twelve columns, blocks placed by --x and --w */
.k-crd-grid { position: relative; block-size: calc(4 * var(--sp-48) + var(--sp-8)); border-radius: var(--r-12); background: var(--s2); overflow: hidden; }
.k-crd-col12 { position: absolute; inset-block: 0; inset-inline-start: calc(var(--x) / 12 * 100%); inline-size: calc(100% / 12); box-shadow: inset calc(var(--hairline) * -1) 0 0 color-mix(in oklch, var(--muted) 35%, transparent); }
.k-crd-col12:nth-child(odd) { background: color-mix(in oklch, var(--cr) 6%, transparent); }
.k-crd-block { position: absolute; inset-block-start: calc(var(--y) * var(--sp-48) + var(--sp-8)); inset-inline-start: calc(var(--x) / 12 * 100%); inline-size: calc(var(--w) / 12 * 100%); block-size: var(--sp-40); padding: 0 var(--sp-10); border-radius: var(--r-8); border: var(--hairline) dashed var(--amber); background: color-mix(in oklch, var(--amber) 16%, var(--s1)); color: var(--text); font: inherit; font-size: var(--fs-13); text-align: start; cursor: pointer; overflow: hidden; white-space: nowrap; }
.k-crd-block[data-state="on"] { border-style: solid; border-color: var(--green); background: color-mix(in oklch, var(--green) 14%, var(--s1)); }
.k-crd-block[aria-pressed="true"] { box-shadow: 0 0 0 var(--focus-width) var(--text); }
.k-crd-gridctl { display: flex; flex-wrap: wrap; gap: var(--sp-8); }

/* measure */
.k-crd-parabox { padding: var(--sp-24); border-radius: var(--r-16); background: var(--s2); overflow-x: auto; }
.k-crd-para { margin: 0; max-inline-size: calc(var(--mw) * 1ch); line-height: var(--lh); font: var(--fs-16) / var(--lh) var(--font-read); }

.k-crd-summary { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-crd-results { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-14); }
.k-crd-results li { display: flex; gap: var(--sp-10); }

/* ================= the reference generator (31i) ================= */
.k-lab[data-subject="creatives"] { --sim-hue: var(--cr); }
.k-cr-refs .k-lab-bar > .k-scroller { flex: 0 1 auto; min-inline-size: 0; }
.k-sv-edge.k-crg { stroke-linejoin: round; }
.k-sv-edge.k-crg-form { stroke: var(--text); stroke-width: 2.2; }
.k-sv-edge.k-crg-hidden { stroke: var(--teal); stroke-width: 1.3; stroke-dasharray: 4 5; opacity: 0.75; }
.k-sv-edge.k-crg-cons { stroke: var(--teal); stroke-width: 1.2; stroke-dasharray: 6 6; }

/* ================= a critique on request (31r) ================= */
.k-cr-sent { display: flex; flex-direction: column; gap: var(--sp-12); max-block-size: 64vh; overflow: auto; }
.k-cr-sent > p { margin: 0; }
.k-cr-sent-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-16); align-items: start; }
.k-cr-sent-piece { margin: 0; padding: var(--sp-12); border-radius: var(--r-12); background: var(--s2); max-block-size: var(--cr-paper-h); overflow: auto; font-size: var(--fs-14); }
.k-cr-sent-piece img { display: block; max-inline-size: 100%; border-radius: var(--r-8); }
.k-cr-sent-list { margin: 0; display: flex; flex-direction: column; gap: var(--sp-10); }
.k-cr-sent-list > div { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-cr-sent-list dt { font-size: var(--fs-12); font-weight: var(--weight-semibold); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-kicker); }
.k-cr-sent-list dd { margin: 0; font-size: var(--fs-14); line-height: var(--lh-body); text-wrap: pretty; }
.k-cr-crit-head { display: flex; align-items: center; gap: var(--sp-10); }
.k-cr-crit-mark { inline-size: var(--sp-28); block-size: var(--sp-28); object-fit: contain; }
.k-cr-crit { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cr-crit section { display: flex; flex-direction: column; gap: var(--sp-4); }
.k-cr-crit p { margin: 0; line-height: var(--lh-body); text-wrap: pretty; }
.k-cr-kept { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--s2); border-inline-start: var(--bar-4) solid var(--teal); }
.k-cr-checkcard-foot { display: flex; justify-content: flex-end; }
.k-cr-tip { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-10); margin: 0; padding: var(--sp-8) var(--sp-12); border-radius: var(--r-12); background: color-mix(in oklch, var(--teal) 10%, transparent); font-size: var(--fs-14); }
.k-cr-tip > span { flex: 1; min-inline-size: 0; }

/* ================= the sketchbook (31f–31h) ================= */
.k-crs { display: grid; grid-template-columns: minmax(0, 1fr) var(--cr-side-w); gap: var(--sp-20); align-items: start; }
.k-crs-stage { min-inline-size: 0; }
.k-crs-side { display: flex; flex-direction: column; gap: var(--sp-16); position: sticky; top: var(--sp-16); min-inline-size: 0; }
.k-crs-brief, .k-crs-refcard { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-crs-t { margin: 0; font-size: var(--fs-18); line-height: var(--lh-snug); }
.k-crs-row { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }
.k-crs-clock { font-size: var(--fs-22); font-variant-numeric: tabular-nums; min-inline-size: var(--cr-num-w); }
.k-crs-mom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-10); cursor: pointer; }
.k-crs-mom > span { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-crs-mom small { font-size: var(--fs-12); }
.k-crs-ref { margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.k-crs-ref svg { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-12); background: var(--s2); }
.k-crs-ref figcaption { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-12); }
.k-crs-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.k-crs-steps li { display: flex; flex-direction: column; gap: var(--sp-4); }
.k-crs-steps small { font-size: var(--fs-12); color: var(--text-2); line-height: var(--lh-snug); }
.k-crs-step { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-8); }

/* ================= narrower ================= */
@media (max-width: 1080px) {
.k-cr-write-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
.k-crd-two { grid-template-columns: minmax(0, 1fr); }
.k-crd-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cr-check { grid-template-columns: minmax(0, 1fr); }
.k-crs { grid-template-columns: minmax(0, 1fr); }
.k-crs-side { position: static; }
.k-cr-sent-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
/* the phone desk (31s): review and read here; the path is the Tracks page, the Practice Log the iPad's */
.k-cr-hero-path, .k-cr-path, .k-cr-loglink, .k-cr-hero + .k-subj-side > .k-subj-next { display: none; }
.k-cr-hero + .k-subj-side { grid-template-columns: minmax(0, 1fr); }
.k-cr-daily[data-phone] > .k-cr-daily-main { display: none; }
.k-cr-daily-phone { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-cr-refs .k-lab-bar > .k-scroller { flex-basis: 100%; }
.k-crd-index { grid-template-columns: minmax(0, 1fr); }
.k-crd-word { font-size: var(--fs-38); }
.k-cr-hpath, .k-cr-hstage, .k-cr-hstage-m { display: flex; gap: var(--sp-6); }
.k-cr-hpath { flex-wrap: wrap; gap: var(--sp-10) var(--sp-14); }
.k-cr-hstage { flex-direction: column; }
.k-cr-hstage-h { padding-inline-start: 0; }
.k-cr-hnode::after { content: none; }
.k-cr-write-main { padding: var(--sp-14); }
.k-cr-study-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 560px) {
.k-cr-steps[data-art] { grid-template-columns: minmax(0, 1fr); }
}

  /* attach a piece from the Practice Log to a project milestone (CR-20) */
  .k-cr-attach { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }
  .k-cr-attach > li { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-8) var(--sp-12); border: 1px solid var(--line); border-radius: var(--r-8); background: var(--s1); }
}