/* ═══════════════════════════════════════════════════════════════════════════
   ki_mc.css — Session 58 page-group sheet: the Masterclass ENTRY pages.
   Loaded after ki_app.css on every non-chalkboard page; scope every rule.

   Pages: the hub (.mc--hub), the four section lists (.cb--list quant,
   .mx--list abstract, .rd--list reading, .wk--list writing), the week list
   (.mw--list) and the week strip (.mw-strip) the hub and lists include.

   ⚑ THE LESSON BOARDS NEVER LOAD THIS SHEET (they set `ki_off`), and the four
   mc_<section>.css sheets are SHARED with those boards, so nothing is edited
   there: every rule below is scoped to a list-page root and outranks the
   section sheet by specificity (`body.ki.theme-kid` = (0,2,1) on the front).

   ⚑ SESSION 59: THESE PAGES SIT ON THE PRACTICE BLUE (#1D3A56, ki.css §13).
   Session 58 wrote this sheet for an ivory ground; every white panel is now a
   --ki-panel sheet with light ink, and the top bar is a --ki-navy bar.

   ⚑ THE SECTION COLOUR IS A RULE, NOT A GROUND — and on blue the identity
   values themselves are too dark to read (quant #3D7BA8 is 2.22:1 on the panel,
   abstract #B85450 2.14). So each section carries TWO light values of its own
   hue, declared once in section 0 as --kmc-tint / --kmc-ink:
                 --kmc-tint (rules, marks, bar fill)  --kmc-ink (words)
     quant       #6FA8D4  3.98:1 on #24445F           #9CC8EA  5.74:1
     abstract    #E58C87  4.08                        #F2A9A5  5.32
     reading     #C99E2E  4.07 (the identity itself)  #E9C46A  6.08
     writing     #7CC08F  4.74                        #9FD8AE  6.24
   Every tint clears the 3:1 non-text floor on the panel (the lightest ground
   any of it sits on); every ink clears 4.5 there. The row HOVER is #284A67,
   not lighter: --ki-ink-3 is 4.75:1 on it, and 4.46 on the obvious #2B4E6C. --vb-fill-deep is no longer
   read here: it is a dark value for a white ground.

   ⚑ mc_week.css IS LINKED INSIDE <body> BY _mc_week_strip.html, i.e. AFTER this
   sheet in document order, so strip rules here must win on specificity, not on
   order. Every strip selector carries `body.ki`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. THE FOUR SECTION VALUES ON BLUE ───────────────────────────────────── */
body.ki { --kmc-tint: #8CCBE6; --kmc-ink: #8CCBE6; }
body.ki [data-section="quantitative"], body.ki .mc-tile--quant    { --kmc-tint: #6FA8D4; --kmc-ink: #9CC8EA; }
body.ki [data-section="abstract"],     body.ki .mc-tile--abstract { --kmc-tint: #E58C87; --kmc-ink: #F6B8B4; }  /* 59b: was #F2A9A5, 4.41 on the lifted panel; now 4.99 */
body.ki [data-section="reading"],      body.ki .mc-tile--reading  { --kmc-tint: #C99E2E; --kmc-ink: #E9C46A; }
body.ki [data-section="writing"],      body.ki .mc-tile--writing  { --kmc-tint: #7CC08F; --kmc-ink: #9FD8AE; }

/* ── 1. GROUND — the practice blue on every entry page, no gradients ─────── */
body.ki.theme-kid :is(.mc--hub, .cb--list, .mx--list, .rd--list, .wk--list, .mw--list) {
  background: var(--ki-ground);
  background-image: none;
  color: var(--ki-ink);
  font-family: var(--ki-sans);
}

/* ── 2. THE TOP BAR — a navy bar, white title, section rule underneath ───── */
body.ki.theme-kid :is(.mc--hub, .cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  :is(.mc-top, .cb-top, .mx-top, .rd-top, .wk-top, .mw-top) {
  background: var(--ki-navy);
  border-bottom: 1px solid var(--ki-rule);
  box-shadow: inset 0 -3px 0 var(--kmc-tint);
  min-height: 52px; height: auto;
  padding: 0 16px;
}
body.ki.theme-kid :is(.mc--hub, .mw--list) :is(.mc-top, .mw-top) {
  box-shadow: inset 0 -3px 0 var(--ki-blue);
}
/* Every word in the bar light. The section sheets set `.xx-top *` white at
   (0,3,1) for their old saturated bar; this is (0,4,1). */
body.ki.theme-kid :is(.mc--hub, .cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  :is(.mc-top, .cb-top, .mx-top, .rd-top, .wk-top, .mw-top) * {
  color: var(--ki-ink);
}
body.ki.theme-kid :is(.mc--hub, .cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  :is(.mc-top__back, .cb-top__back, .mx-top__back, .rd-top__back, .wk-top__back, .mw-top__back) {
  border-radius: 0; color: var(--ki-blue); font: 600 15px/1.2 var(--ki-sans);
  min-height: 44px; padding: 0 10px 0 4px;
}
body.ki.theme-kid :is(.mc--hub, .cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  :is(.mc-top__back, .cb-top__back, .mx-top__back, .rd-top__back, .wk-top__back, .mw-top__back) * {
  color: var(--ki-blue);
}
body.ki.theme-kid :is(.mc--hub, .cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  :is(.mc-top__back, .cb-top__back, .mx-top__back, .rd-top__back, .wk-top__back, .mw-top__back):hover {
  background: var(--ki-blue-50); color: var(--ki-blue-dk); text-decoration: underline;
}
body.ki.theme-kid :is(.mc--hub, .cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  :is(.mc-top__back, .cb-top__back, .mx-top__back, .rd-top__back, .wk-top__back, .mw-top__back):focus-visible {
  outline: 3px solid var(--ki-ochre-ink); outline-offset: 2px;
}
body.ki.theme-kid :is(.mc--hub, .cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  :is(.mc-top__title, .cb-top__title, .mx-top__title, .rd-top__title, .wk-top__title, .mw-top__title) {
  font: 700 16px/1.2 var(--ki-serif); color: var(--ki-head);
  padding-left: 14px; border-left: 1px solid var(--ki-rule);
}
body.ki.theme-kid :is(.mc--hub, .cb--list, .mx--list, .rd--list, .wk--list, .mw--list) .kg__btn {
  background: transparent; border: 1px solid var(--ki-rule-2); color: var(--ki-head);
}

/* ── 3. THE PAGE HEAD — eyebrow, serif title, standfirst, left-aligned ──── */
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  :is(.cb-list, .mx-list, .rd-list, .wk-list, .mw-list) {
  width: 100%; max-width: 820px; margin: 0 auto; padding: 40px 24px 28px; box-sizing: border-box;
}
body.ki .kmc-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  color: var(--kmc-ink);
}
body.ki .mw--list .kmc-eyebrow, body.ki .mc--hub .kmc-eyebrow { color: var(--ki-blue); }
body.ki .kmc-mark {
  width: 12px; height: 12px; flex: none; background: var(--kmc-tint);
}
body.ki .mw--list .kmc-mark { background: var(--ki-ochre-ink); }

body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  h1:is(.cb-list__h, .mx-list__h, .rd-list__h, .wk-list__h, .mw-list__h) {
  font: 700 clamp(26px, 3.2vw, 34px)/1.22 var(--ki-serif);
  color: var(--ki-head); text-align: left; letter-spacing: 0; margin: 0 0 10px;
}
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  :is(.cb-list__sub, .mx-list__sub, .rd-list__sub, .wk-list__sub, .mw-list__sub) {
  font: 400 18px/1.55 var(--ki-sans); color: var(--ki-ink-2); opacity: 1; margin: 0 0 8px;
}
/* The column heads of the index: a printed table header, ink rule beneath. */
body.ki .kmc-colhead {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px;
  margin-top: 26px; padding: 0 16px 8px;
  border-bottom: 2px solid rgba(255, 255, 255, .55);
  font: 700 12.5px/1.3 var(--ki-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ki-ink-3);
}
body.ki .mx--list .kmc-colhead { grid-template-columns: 108px minmax(0, 1fr) auto; }
body.ki .kmc-colhead span:last-child { text-align: right; }

/* ── 4. THE LESSON INDEX — square ruled rows ─────────────────────────────── */
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  :is(.cb-lessons, .mx-lessons, .rd-lessons, .wk-lessons) {
  display: block; margin: 0 0 28px; padding: 0; list-style: none; gap: 0;
  background: var(--ki-panel); border: 1px solid var(--ki-rule); border-top: 0;
}
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  :is(.cb-lesson, .rd-lesson, .wk-lesson) {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  min-height: 72px; margin: 0; padding: 14px 16px;
  background: var(--ki-panel); color: var(--ki-ink);
  border: 0; border-bottom: 1px solid var(--ki-rule); border-radius: 0;
  box-shadow: none; transform: none; text-decoration: none;
  transition: background-color .12s;
}
body.ki.theme-kid .mx--list .mx-lesson {
  grid-template-columns: 92px minmax(0, 1fr) auto; gap: 2px 16px;
  min-height: 84px; margin: 0; padding: 14px 16px;
  background: var(--ki-panel); color: var(--ki-ink);
  border: 0; border-bottom: 1px solid var(--ki-rule); border-radius: 0;
  box-shadow: none; transform: none; text-decoration: none;
}
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  :is(.cb-lesson, .mx-lesson, .rd-lesson, .wk-lesson):hover {
  background: var(--ki-panel-hover); box-shadow: none; transform: none; border-color: var(--ki-rule);
}
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  :is(.cb-lesson, .mx-lesson, .rd-lesson, .wk-lesson):focus-visible {
  outline: 3px solid var(--ki-ochre-ink); outline-offset: -3px;
}
/* The lesson that is next carries the section rule down its left edge. */
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  :is(.cb-lesson, .mx-lesson, .rd-lesson, .wk-lesson).is-now {
  background: var(--ki-panel); box-shadow: inset 5px 0 0 var(--kmc-tint);
}
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  :is(.cb-lesson, .mx-lesson, .rd-lesson, .wk-lesson).is-now:hover { background: var(--ki-panel-hover); }
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  :is(.cb-lesson, .mx-lesson, .rd-lesson, .wk-lesson).is-done { background: var(--ki-panel); }

/* The number: a printed numeral in the section's light ink. */
body.ki.theme-kid :is(.cb--list, .rd--list, .wk--list) :is(.cb-lesson__n, .rd-lesson__n, .wk-lesson__n) {
  display: block; width: auto; height: auto; padding: 0; border-radius: 0; background: none;
  font: 700 26px/1 var(--ki-serif); color: var(--kmc-ink);
  font-variant-numeric: lining-nums;
}
body.ki.theme-kid :is(.cb--list, .rd--list, .wk--list) :is(.cb-lesson, .rd-lesson, .wk-lesson).is-done
  :is(.cb-lesson__n, .rd-lesson__n, .wk-lesson__n) { background: none; color: var(--kmc-ink); }
/* The title. */
body.ki.theme-kid :is(.cb--list, .rd--list, .wk--list) :is(.cb-lesson__learn, .rd-lesson__learn, .wk-lesson__learn) {
  font: 700 18px/1.35 var(--ki-serif); color: var(--ki-head);
}
body.ki.theme-kid .rd--list .rd-lesson__src {
  display: block; margin-top: 4px; font: italic 400 14.5px/1.45 var(--ki-serif); color: var(--ki-ink-3);
}
/* Abstract keeps its thumbnail on a WHITE plate: it is a figure drawn in dark
   ink for a white ground, which is the one white mount the brief allows. */
body.ki.theme-kid .mx--list .mx-lesson__thumb svg {
  background: #fff; border: 1px solid var(--ki-rule-2); padding: 3px; box-sizing: border-box;
}
body.ki.theme-kid .mx--list .mx-lesson__n {
  align-self: end; font: 700 12.5px/1.3 var(--ki-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--kmc-ink);
}
body.ki.theme-kid .mx--list .mx-lesson__learn {
  align-self: start; font: 700 18px/1.35 var(--ki-serif); color: var(--ki-head);
}
/* The status column: words, not a pill. Done earns a tick. */
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  :is(.cb-lesson__state, .mx-lesson__state, .rd-lesson__state, .wk-lesson__state) {
  justify-self: end; text-align: right; white-space: nowrap;
  font: 600 14.5px/1.3 var(--ki-sans); color: var(--ki-ink-3);
}
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list) .is-now
  :is(.cb-lesson__state, .mx-lesson__state, .rd-lesson__state, .wk-lesson__state) {
  color: var(--ki-blue); font-weight: 700;
}
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list) .is-done
  :is(.cb-lesson__state, .mx-lesson__state, .rd-lesson__state, .wk-lesson__state) {
  color: var(--ki-green); font-weight: 700;
}
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list) .is-done
  :is(.cb-lesson__state, .mx-lesson__state, .rd-lesson__state, .wk-lesson__state)::before {
  content: ''; display: inline-block; width: 10px; height: 5px; margin: 0 8px 4px 0;
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg);
}

/* ── 5. THE CALL TO ACTION — the primary on blue: white fill, Korva-blue ink ─ */
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  a:is(.cb-go, .mx-go, .rd-go, .wk-go) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; min-height: 48px; padding: 10px 26px; line-height: 1.2;
  font: 700 17px/1.2 var(--ki-sans); letter-spacing: .01em;
  background: #FFFFFF; color: var(--ki-brand); border: 2px solid #FFFFFF; border-radius: var(--ki-r);
  box-shadow: none; transform: none; text-decoration: none;
}
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  a:is(.cb-go, .mx-go, .rd-go, .wk-go):hover {
  background: #E3F1F7; border-color: #E3F1F7; color: var(--ki-brand); transform: none; box-shadow: none;
}
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list)
  a:is(.cb-go, .mx-go, .rd-go, .wk-go):focus-visible { outline: 3px solid var(--ki-ochre-ink); outline-offset: 2px; }
@media (max-width: 600px) {
  body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list) a:is(.cb-go, .mx-go, .rd-go, .wk-go) { width: 100%; }
}
/* Empty state: the system's note. */
body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
  :is(.cb-empty, .mx-empty, .rd-empty, .wk-empty, .mw-empty) {
  border: 1px solid var(--ki-rule); border-left: 4px solid var(--ki-ochre-ink); border-radius: 0;
  background: var(--ki-panel); padding: 14px 16px; font: 400 16px/1.6 var(--ki-sans); color: var(--ki-ink-2);
}

/* ── 6. THE HUB — a course index of four ruled section panels ────────────── */
/* The hub stops being a fixed frame: the old centred group scrolled inside a
   100dvh box and clipped the second row of tiles once they grew a ruled foot. */
body.ki.theme-kid .mc--hub { height: auto; min-height: 100dvh; overflow: visible; }
body.ki.theme-kid .mc--hub .mc-hub { flex: 0 0 auto; overflow: visible; padding: 40px 24px 16px; }
body.ki.theme-kid .mc--hub .mc-hub__in { max-width: 772px; margin-inline: auto; margin-block: 0; }
body.ki.theme-kid .mc--hub h1.mc-hub__h {
  font: 700 clamp(28px, 3.4vw, 38px)/1.22 var(--ki-serif); color: var(--ki-head);
  text-align: left; letter-spacing: 0; margin: 0 0 10px;
}
body.ki.theme-kid .mc--hub .mc-hub__sub {
  text-align: left; font: 400 18px/1.55 var(--ki-sans); color: var(--ki-ink-2); margin: 0 0 28px;
  padding-bottom: 22px; border-bottom: 2px solid rgba(255, 255, 255, .55);
}
body.ki.theme-kid .mc--hub .mc-hub__sub--miss {
  color: var(--ki-ink); background: var(--ki-panel); border: 1px solid var(--ki-rule); border-left: 4px solid var(--ki-ochre-ink);
  border-bottom: 1px solid var(--ki-rule); padding: 12px 14px; border-radius: 0;
}
body.ki.theme-kid .mc--hub .mc-hub__grid { max-width: none; gap: 20px; }
body.ki.theme-kid .mc--hub .mc-tile {
  min-height: 0; gap: 8px; padding: 22px 24px 20px;
  background: var(--ki-panel); color: var(--kmc-ink);
  border: 1px solid var(--ki-rule); border-top: 4px solid var(--kmc-tint); border-radius: 0;
  box-shadow: none; transform: none;
}
body.ki.theme-kid .mc--hub a.mc-tile:hover {
  background: var(--ki-panel-hover); border-color: var(--ki-rule-2); border-top-color: var(--kmc-tint);
  transform: none; box-shadow: none;
}
body.ki.theme-kid .mc--hub a.mc-tile:hover .mc-tile__name { text-decoration: underline; text-underline-offset: 3px; }
body.ki.theme-kid .mc--hub a.mc-tile:focus-visible { outline: 3px solid var(--ki-ochre-ink); outline-offset: 2px; }
body.ki.theme-kid .mc--hub .mc-tile__ico {
  width: 40px; height: 40px; border-radius: 0; background: var(--ki-stone); border: 1px solid var(--ki-rule);
}
body.ki.theme-kid .mc--hub .mc-tile__name {
  margin-top: 6px; font: 700 23px/1.25 var(--ki-serif); color: var(--kmc-ink);
}
body.ki.theme-kid .mc--hub .mc-tile__blurb { font: 400 16.5px/1.5 var(--ki-sans); color: var(--ki-ink-2); }
body.ki.theme-kid .mc--hub .mc-tile__prog {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ki-rule); gap: 12px;
}
/* the track is an inset well with a light hairline, so an empty bar still reads as a bar */
body.ki.theme-kid .mc--hub .mc-tile__bar {
  height: 8px; border-radius: 0; background: var(--ki-stone); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30);
}
body.ki.theme-kid .mc--hub .mc-tile__bar-fill { border-radius: 0; background: var(--kmc-tint); }
body.ki.theme-kid .mc--hub .mc-tile__count { font: 700 14.5px/1.3 var(--ki-sans); color: var(--ki-ink-2); white-space: nowrap; }
body.ki.theme-kid .mc--hub .mc-tile.is-pending { opacity: 1; background: var(--ki-stone); }
@media (max-width: 700px) {
  body.ki.theme-kid .mc--hub .mc-hub { padding: 28px 16px 8px; }
  body.ki.theme-kid .mc--hub .mc-hub__grid { gap: 14px; }
}

/* ── 7. THE WEEK STRIP — a ruled "this week" block under the index ───────── */
body.ki .mw-strip {
  max-width: 820px; margin: 12px auto 44px; padding: 0 24px; box-sizing: border-box;
}
body.ki .mw-strip .mw-strip__h {
  margin: 0 0 14px; padding-top: 16px; border-top: 2px solid rgba(255, 255, 255, .55);
  font: 700 20px/1.3 var(--ki-serif); color: var(--ki-head);
}
body.ki .mw-strip .mw-strip__row { gap: 8px; }
body.ki .mw-strip a.mw-strip__a {
  min-height: 44px; padding: 0 14px; gap: 10px;
  background: var(--ki-panel); border: 1px solid var(--ki-rule-2); border-radius: var(--ki-r);
  color: var(--ki-ink); font: 600 15.5px/1.2 var(--ki-sans); box-shadow: none; transform: none;
}
body.ki .mw-strip a.mw-strip__a:hover { background: var(--ki-panel-hover); border-color: var(--ki-blue); color: #FFFFFF; }
body.ki .mw-strip a.mw-strip__a:focus-visible { outline: 3px solid var(--ki-ochre-ink); outline-offset: 2px; }
body.ki .mw-strip .mw-strip__dot { width: 10px; height: 10px; border-radius: 0; background: var(--kmc-tint); }
body.ki .mw-strip a.mw-strip__all {
  background: transparent; border-color: transparent; color: var(--ki-blue); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
body.ki .mw-strip a.mw-strip__all:hover { background: var(--ki-blue-50); border-color: transparent; color: var(--ki-blue-dk); }
@media (max-width: 600px) {
  body.ki .mw-strip { padding: 0 16px; }
}

/* ── 8. THE WEEK LIST — grouped ruled index, same row as the lessons ─────── */
body.ki.theme-kid .mw--list .mw-group { margin: 32px 0 0; }
body.ki.theme-kid .mw--list .mw-group:first-of-type { margin-top: 24px; }
body.ki.theme-kid .mw--list h2.mw-group__h {
  margin: 0; padding: 0 0 10px; gap: 10px; border-bottom: 2px solid rgba(255, 255, 255, .55);
  font: 700 21px/1.3 var(--ki-serif); color: var(--ki-head);
}
body.ki.theme-kid .mw--list .mw-group__h::before { border-radius: 0; background: var(--kmc-tint); }
body.ki.theme-kid .mw--list .mw-group__n {
  font: 600 14px/1 var(--ki-sans); color: var(--ki-ink-3); margin-left: auto;
}
body.ki.theme-kid .mw--list .mw-group__n::after { content: ' this week'; }
body.ki.theme-kid .mw--list .mw-items { display: block; gap: 0; background: var(--ki-panel); border: 1px solid var(--ki-rule); border-top: 0; }
body.ki.theme-kid .mw--list a.mw-item {
  grid-template-columns: 64px minmax(0, 1fr) auto; gap: 2px 16px; min-height: 72px; padding: 14px 16px;
  background: var(--ki-panel); color: var(--ki-ink); border: 0; border-bottom: 1px solid var(--ki-rule); border-radius: 0;
  box-shadow: none; transform: none;
}
body.ki.theme-kid .mw--list a.mw-item:hover { background: var(--ki-panel-hover); }
body.ki.theme-kid .mw--list a.mw-item:focus-visible { outline: 3px solid var(--ki-ochre-ink); outline-offset: -3px; }
body.ki.theme-kid .mw--list a.mw-item.is-now { box-shadow: inset 5px 0 0 var(--kmc-tint); }
body.ki.theme-kid .mw--list .mw-item__n {
  width: auto; height: auto; border-radius: 0; background: none; justify-content: flex-start;
  font: 700 26px/1 var(--ki-serif); color: var(--kmc-ink);
}
body.ki.theme-kid .mw--list .mw-item__name { font: 700 18px/1.35 var(--ki-serif); color: var(--ki-head); }
body.ki.theme-kid .mw--list .mw-item__meta { font: 400 14.5px/1.4 var(--ki-sans); color: var(--ki-ink-3); }
body.ki.theme-kid .mw--list .mw-item__state { justify-self: end; font: 600 14.5px/1.3 var(--ki-sans); color: var(--ki-ink-3); }
body.ki.theme-kid .mw--list .mw-item.is-now .mw-item__state { color: var(--ki-blue); font-weight: 700; }
body.ki.theme-kid .mw--list .mw-item.is-done .mw-item__state { color: var(--ki-green); font-weight: 700; }
body.ki.theme-kid .mw--list .mw-list { padding-bottom: 56px; }

/* ── 9. PHONE ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body.ki.theme-kid :is(.cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
    :is(.cb-list, .mx-list, .rd-list, .wk-list, .mw-list) { padding: 28px 16px 20px; }
  body.ki .kmc-colhead { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 0 12px 8px; }
  body.ki .mx--list .kmc-colhead { grid-template-columns: 68px minmax(0, 1fr); }
  body.ki .mx--list .kmc-colhead span:last-child { display: none; }
  body.ki.theme-kid :is(.cb--list, .rd--list, .wk--list) :is(.cb-lesson, .rd-lesson, .wk-lesson),
  body.ki.theme-kid .mw--list a.mw-item {
    grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 12px;
  }
  body.ki.theme-kid .mx--list .mx-lesson { grid-template-columns: 68px minmax(0, 1fr); gap: 2px 12px; padding: 12px; }
  body.ki.theme-kid .mx--list .mx-lesson__state { justify-self: start; text-align: left; grid-column: 2; grid-row: auto; }
  body.ki.theme-kid :is(.cb--list, .rd--list, .wk--list) :is(.cb-lesson__learn, .rd-lesson__learn, .wk-lesson__learn),
  body.ki.theme-kid .mx--list .mx-lesson__learn,
  body.ki.theme-kid .mw--list .mw-item__name { font-size: 16.5px; }
  body.ki.theme-kid :is(.cb--list, .rd--list, .wk--list) :is(.cb-lesson__n, .rd-lesson__n, .wk-lesson__n),
  body.ki.theme-kid .mw--list .mw-item__n { font-size: 22px; }
  body.ki.theme-kid :is(.cb--list, .rd--list, .wk--list) :is(.cb-lesson__state, .rd-lesson__state, .wk-lesson__state),
  body.ki.theme-kid .mw--list .mw-item__state { font-size: 13.5px; }
  body.ki.theme-kid :is(.mc--hub, .cb--list, .mx--list, .rd--list, .wk--list, .mw--list)
    :is(.mc-top, .cb-top, .mx-top, .rd-top, .wk-top, .mw-top) { padding: 0 8px; }
}