/* KurenaiOS — css/views/home.css · @layer views
   Home (Graphite frame 7a/7b): the hero with the daily goal, Routines and
   Reminders, Up next beside Today/Upcoming, Study hours beside the week's
   plan, and the four Continue desks. A view file may use tokens and
   primitives; it may not restyle a primitive's internals.

   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 hero ---------- */
.k-home-hero { position: relative; min-block-size: var(--home-hero-h); border-radius: var(--r-26); overflow: hidden; background: var(--home-hero-bg); isolation: isolate; }
/* the uploaded banner carries its own scrim (governor.applyBanner, "hero");
   a second one here doubled it */
.k-home-hero-body { text-shadow: var(--hero-text-shadow); }
/* the season's painting (34k): the lamp and window right, under the hero's own scrim */
.k-home-hero > .k-art { --art-scrim: var(--home-hero-scrim); --art-pos: 78% 62%; }
.k-home-hero-body { position: relative; z-index: 1; block-size: 100%; min-block-size: var(--home-hero-h); display: flex; align-items: center; gap: var(--sp-24); padding: var(--sp-24) var(--sp-28); }
.k-home-ring { inline-size: var(--home-avatar-ring); block-size: var(--home-avatar-ring); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring, var(--teal)) 0 var(--hp, 100%), var(--home-ring-track) var(--hp, 100%) 100%); }
.k-home-ring[data-hp="strained"] { --ring: var(--amber); }
.k-home-ring[data-hp="critical"] { --ring: var(--alarm); }
.k-home-ring .k-avatar { box-shadow: 0 0 0 var(--rail-mark) var(--home-hero-bg); }
.k-home-ring { --frame-out: calc((var(--home-avatar-ring) - var(--home-avatar)) / 2); --frame-ground: var(--home-hero-bg); }
.k-home-hero-txt { flex: 1 1 0; min-inline-size: 0; }
.k-home-hero-txt .k-kicker { color: var(--home-hero-ink); }
.k-home-greet { font-size: var(--fs-26); letter-spacing: var(--track-head); margin-block: var(--sp-4) var(--sp-2); line-height: var(--lh-snug); }
.k-home-streak { color: var(--teal); }
.k-home-quote { display: block; padding: 0; background: none; box-shadow: none; font-size: var(--fs-13-5); font-style: italic; color: var(--text-2); text-align: start; border-radius: var(--r-6); }
.k-home-quote:hover { color: var(--text); background: none; }
.k-home-level { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-10); margin-block-start: var(--sp-16); font-size: var(--fs-12); color: var(--text-2); min-inline-size: 0; }
.k-home-level > * { flex: 0 0 auto; }
.k-home-level b { color: var(--text); white-space: nowrap; }
.k-home-level .k-bar { flex: 0 1 var(--home-xp-w); inline-size: auto; min-inline-size: var(--sp-40); --bar-h: var(--bar-6); background: var(--home-xp-track); --bar-c: var(--text); }
.k-home-hp { color: var(--teal); white-space: nowrap; }
.k-home-hp[data-hp="strained"] { color: var(--amber); }
.k-home-hp[data-hp="critical"] { color: var(--alarm); }
.k-home-goal { inline-size: var(--home-goal-w); flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-10); }
.k-home-goal-head { display: flex; align-items: baseline; }
.k-home-goal-head .k-kicker { color: var(--home-goal-ink); }
.k-home-goal-head .k-mono { margin-inline-start: auto; font-size: var(--fs-12); color: var(--text-2); }
.k-goal-item { display: flex; align-items: center; gap: var(--sp-10); padding: 0; background: none; box-shadow: none; font-size: var(--fs-13-5); color: var(--text); text-align: start; border-radius: var(--r-6); }
.k-goal-item:hover { background: none; color: var(--text); }
.k-goal-mark { inline-size: var(--check-sm); block-size: var(--check-sm); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 var(--ring-1-5) var(--teal); font-size: var(--fs-11); font-weight: var(--weight-bold); color: var(--bg); }
.k-goal-item[aria-pressed="true"] { color: var(--text-2); }
.k-goal-item[aria-pressed="true"] .k-goal-mark { background: var(--teal); box-shadow: none; }
.k-goal-item[aria-pressed="true"] .k-goal-text { text-decoration: line-through; text-decoration-color: var(--line); }
.k-goal-item .k-goal-text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-home-goal > .k-btn { align-self: flex-start; margin-block-start: var(--sp-4); }
/* Critical (7a·crit): the hero's hue swings from blue to crimson, the
   recovery wins are outlined crimson checks; nothing else changes */
.k-home-hero[data-hp="critical"] { --home-hero-bg: var(--home-crit-bg); --home-hero-scrim: var(--home-crit-scrim); --home-hero-ink: var(--home-crit-ink); --home-goal-ink: var(--alarm); --home-ring-track: var(--home-crit-track); --home-xp-track: var(--home-crit-track); }
.k-home-crit { color: var(--alarm); }
.k-home-hero[data-hp="critical"] .k-goal-mark { box-shadow: inset 0 0 0 var(--ring-1-5) var(--alarm); }
.k-home-hero[data-hp="critical"] .k-goal-item[aria-pressed="true"] .k-goal-mark { background: var(--alarm); box-shadow: none; }
.k-card[data-state~="overdue"] > .k-card-head .k-card-meta { color: var(--alarm); }
.k-home-goal-note { font-size: var(--fs-12-5); color: var(--text-2); }

/* ---------- Routines and Reminders ---------- */
.k-home-pair-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-20); }
.k-home-pair-top > .k-card { padding-block: var(--sp-14); }
.k-routines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-20); }
button.k-check-row { inline-size: 100%; padding-inline: 0; background: none; box-shadow: none; border-radius: 0; font: inherit; color: inherit; text-align: start; }
button.k-check-row:hover { background: none; }
button.k-check-row:hover .k-check-row-text { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: var(--sp-3); }
.k-check-row { display: flex; align-items: center; gap: var(--sp-10); padding-block: var(--sp-8); border-block-start: var(--hairline) solid var(--line); min-inline-size: 0; }
.k-check-row-text { flex: 1 1 0; min-inline-size: 0; font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-check-row-meta { font-size: var(--fs-11-5); color: var(--muted); white-space: nowrap; }
.k-check-row-meta.k-mono { font-size: var(--fs-11-5); }
.k-dotcheck { inline-size: var(--check); block-size: var(--check); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); font-size: var(--fs-11); font-weight: var(--weight-bold); color: var(--bg); }
.k-check-row[aria-pressed="true"] .k-dotcheck { background: var(--teal); box-shadow: none; }
.k-check-row[aria-pressed="true"] .k-check-row-text { color: var(--text-2); }
.k-boxcheck { inline-size: var(--check); block-size: var(--check); flex: 0 0 auto; border-radius: var(--r-6); box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); }
.k-check-row[data-state~="soon"] .k-boxcheck { box-shadow: inset 0 0 0 var(--ring-1-5) var(--amber); }
.k-check-row[data-state~="soon"] .k-check-row-meta { color: var(--amber); }
.k-check-row[data-state~="late"] .k-boxcheck { box-shadow: inset 0 0 0 var(--ring-1-5) var(--red); }
.k-check-row[data-state~="late"] .k-check-row-meta { color: var(--red); }

/* ---------- the middle: Up next · Today/Upcoming · Study hours · plan ---------- */
/* three columns: Up next | Today | Upcoming, then Study hours | the
   latest report | the week's plan under them (review after Reports: the
   report card had a row of its own with nothing beside it). The pair
   spans the two right columns with the same gap, so its cards line up
   with the report and the plan below. */
.k-home-mid { display: grid; grid-template-columns: var(--home-next-w) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-20); align-items: stretch; }
.k-home-mid > .k-home-pair { grid-column: span 2; }
.k-home-mid:has(> .k-rp-home[hidden]) > .k-plan, .k-home-mid > .k-rp-home:last-child { grid-column: span 2; }
.k-upnext { display: flex; flex-direction: column; padding: var(--sp-22) var(--sp-24); }
.k-upnext-head { display: flex; align-items: center; gap: var(--sp-8); }
.k-upnext-head .k-seg { margin-inline-start: auto; background: var(--s2); padding: var(--sp-2); font-size: var(--fs-12); }
.k-upnext-head .k-seg-item { padding: var(--sp-2) var(--sp-10); }
.k-upnext-title { font-size: var(--fs-20); font-weight: var(--weight-semibold); letter-spacing: -0.01em; margin-block: var(--sp-12) var(--sp-2); }
.k-upnext-open { padding: 0; background: none; box-shadow: none; font: inherit; color: inherit; text-align: start; border-radius: var(--r-6); }
.k-upnext-open:hover { background: none; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: var(--sp-4); }
.k-upnext-why { font-size: var(--fs-12-5); color: var(--text-2); margin-block-end: var(--sp-12); }
.k-upnext .k-card-row { font-size: var(--fs-13); }
.k-upnext .k-card-row:first-of-type { border-block-start: var(--hairline) solid var(--line); }
.k-kv-k { inline-size: var(--kv-k-w); flex: 0 0 auto; color: var(--muted); }
.k-kv-v { flex: 1 1 0; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-kv-bar { inline-size: var(--row-bar-w); flex: 0 0 auto; --bar-h: var(--bar-6); }
.k-upnext-foot { display: flex; align-items: center; gap: var(--sp-8); margin-block-start: auto; padding-block-start: var(--sp-14); }
.k-upnext-foot > .k-btn--primary { flex: 1 1 0; }
.k-durations { display: flex; gap: var(--sp-4); font-size: var(--fs-12); }
.k-durations .k-btn { padding: var(--sp-6) var(--sp-10); box-shadow: none; color: var(--muted); font-size: var(--fs-12); }
.k-durations .k-btn[aria-pressed="true"] { background: var(--s2); color: var(--text); }
.k-upnext[data-state~="live"] .k-upnext-head .k-kicker { color: var(--crimson); }

.k-home-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-20); min-inline-size: 0; }
.k-home-pair[data-state~="one-up"] { grid-template-columns: minmax(0, 1fr); }
.k-home-pair > .k-card { padding: var(--sp-20) var(--sp-24); }

.k-hours { display: flex; flex-direction: column; padding: var(--sp-22) var(--sp-24); }
.k-hours-big { display: flex; align-items: baseline; gap: var(--sp-8); margin-block-start: var(--sp-6); }
.k-hours-big .k-hours-n { font-size: var(--fs-32); font-weight: var(--weight-semibold); letter-spacing: -0.03em; line-height: 1; }
.k-hours-big .k-hours-u { color: var(--muted); font-size: var(--fs-12-5); }
.k-hours-big .k-hours-d { margin-inline-start: auto; font-size: var(--fs-12); color: var(--teal); }
.k-hours-big .k-hours-d[data-state~="down"] { color: var(--muted); }
.k-hours-chart { flex: 1 1 0; min-block-size: var(--home-chart-h); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) auto; column-gap: var(--sp-12); margin-block-start: var(--sp-14); }
.k-hours-day { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-6); min-inline-size: 0; }
/* the track: the value label's room at the top, then the scale */
.k-hours-track { position: relative; flex: 1 1 auto; margin-block-start: var(--sp-18); }
.k-hours-bar { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--h, 0%); min-block-size: var(--sp-8); border-radius: var(--r-10) var(--r-10) var(--r-6) var(--r-6); background: var(--s2); }
.k-hours-v { position: absolute; z-index: 1; inset-inline-start: 50%; inset-block-end: calc(var(--h, 0%) + var(--sp-4)); transform: translateX(-50%); padding-inline: var(--sp-4); border-radius: var(--sp-4); background: var(--s1); font: var(--fs-11) var(--font-mono); color: var(--muted); white-space: nowrap; }
/* the goal: one dashed segment per track, bridging the column gap so the
   segments read as one line */
.k-hours-goal { position: absolute; inset-inline: calc(var(--sp-6) * -1); inset-block-end: var(--goal-y, 0%); border-block-start: var(--hairline) dashed var(--muted); opacity: 0.6; pointer-events: none; }
.k-hours-goalcol .k-hours-track { min-inline-size: var(--hours-goal-w); }
.k-hours-goal-l { position: absolute; inset-inline-start: 0; inset-block-end: var(--goal-y, 0%); transform: translateY(50%); font: var(--fs-11) var(--font-mono); color: var(--muted); white-space: nowrap; }
.k-hours-day[data-state~="today"] .k-hours-bar { background: linear-gradient(var(--crimson), var(--crimson-lo)); }
.k-hours-day[data-state~="today"] .k-hours-v, .k-hours-day[data-state~="today"] .k-hours-l { color: var(--text); font-weight: var(--weight-semibold); }
.k-hours-day[data-state~="future"] .k-hours-bar { block-size: var(--sp-12); min-block-size: 0; background: none; border: var(--hairline) dashed var(--line); border-radius: var(--r-8); }
.k-hours-l { font-size: var(--fs-11-5); color: var(--muted); text-align: center; }
.k-hours-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-16); margin-block-start: var(--sp-12); padding-block-start: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-hours-fact { display: block; align-self: start; padding: 0; background: none; box-shadow: none; text-align: start; border-radius: var(--r-8); font-size: inherit; line-height: inherit; }
button.k-hours-fact:hover { background: none; }
button.k-hours-fact:hover .k-hours-fact-v { color: var(--crimson); }
.k-hours-fact-top { display: flex; align-items: baseline; gap: var(--sp-4); }
.k-hours-fact-v { font-size: var(--fs-22); font-weight: var(--weight-semibold); }
.k-hours-fact-u { font-size: var(--fs-12-5); color: var(--muted); }
.k-hours-fact-c { display: block; font-size: var(--fs-11-5); color: var(--muted); }
.k-split-bar { display: flex; block-size: var(--bar-6); border-radius: var(--r-pill); overflow: hidden; gap: var(--rail-mark); margin-block-start: var(--sp-12); }
.k-split-bar > span { flex: var(--f, 1) 1 0; background: var(--c); }
.k-split-legend { display: flex; gap: var(--sp-14); font-size: var(--fs-11-5); color: var(--muted); margin-block-start: var(--sp-7); }
.k-split-legend b { color: var(--c); font-weight: var(--weight-semibold); margin-inline-end: var(--sp-4); }

/* the week's plan (KOS.pacingHomeCard) */
.k-plan { padding: var(--sp-22) var(--sp-24); }
.k-plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-12); margin-block-end: var(--sp-6); }
.k-plan-head .k-card-title { white-space: nowrap; }
.k-plan-status { font-size: var(--fs-12); color: var(--teal); white-space: nowrap; }
.k-plan-status[data-state~="behind"] { color: var(--amber); }
.k-plan-count { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-plan-segs { flex: 1 1 0; display: flex; gap: var(--rail-mark); margin-inline: var(--sp-8); min-inline-size: var(--sp-40); }
/* in Home's narrower third column the week's ticks and "Pacing →" share
   the line under the heading instead of leaving it half empty */
.k-home-mid > .k-plan .k-plan-head .k-link { order: 10; }
.k-home-mid > .k-plan .k-plan-segs { flex: 1 1 var(--sp-64); order: 9; margin-inline: 0; }
.k-plan-segs > span { flex: 1 1 0; block-size: var(--bar-6); border-radius: var(--rail-mark); background: var(--s2); }
.k-plan-segs > span[data-state~="done"] { background: var(--teal); }
.k-plan-list { margin-block-start: var(--sp-8); }
.k-plan-row { display: flex; align-items: center; gap: var(--sp-14); padding-block: var(--sp-12); border-block-start: var(--hairline) solid var(--line); }
.k-plan-tick { inline-size: var(--sp-18); block-size: var(--sp-18); flex: 0 0 auto; position: relative; }
.k-plan-tick input { appearance: none; margin: 0; inline-size: var(--sp-18); block-size: var(--sp-18); border-radius: 50%; box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); cursor: pointer; }
.k-plan-tick input:checked { background: var(--teal); box-shadow: none; }
.k-plan-title { flex: 1 1 0; min-inline-size: 0; padding: 0; background: none; box-shadow: none; font-size: var(--fs-14); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: var(--r-6); display: block; }
.k-plan-title:hover { background: none; text-decoration: underline; text-decoration-color: var(--line); }
.k-plan-row[data-state~="is-done"] .k-plan-title { color: var(--muted); text-decoration: line-through; }
.k-plan-subj { font-size: var(--fs-11-5); font-weight: var(--weight-semibold); color: var(--row-c, var(--muted)); }
.k-plan-row .k-chip { --chip-c: var(--text-2); background: var(--s2); }
.k-plan-row[data-state~="is-carried"] .k-chip { --chip-c: var(--amber); background: var(--wash-amber); }
.k-plan-day { inline-size: var(--tile); text-align: end; font-size: var(--fs-12); color: var(--muted); }
.k-plan-foot { font-size: var(--fs-12-5); color: var(--muted); padding-block-start: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-plan-foot .k-soft { color: var(--text-2); }
/* a link inside a sentence: on touch the 44px button minimum made it a
   tall inline box the wrapped line beside it ran into (phone review) */
.k-plan-more { padding: 0; background: none; box-shadow: none; color: var(--muted); font-size: var(--fs-12-5); min-block-size: 0; line-height: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: var(--sp-3); }
.k-plan-more:hover { background: none; color: var(--text); }

/* ---------- Continue: the four desks ---------- */
.k-continue-head { display: flex; align-items: baseline; margin: var(--sp-14) var(--sp-4) var(--sp-12); }
.k-continue-head h2 { font-size: var(--fs-17); }
.k-continue-head .k-link { margin-inline-start: auto; font-size: var(--fs-12-5); }
.k-desks { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--sp-14)) / 4); gap: var(--sp-14); align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-block-end: var(--sp-6); }
/* the four study desks and the Collection in ONE row that scrolls sideways */
.k-desks > * { scroll-snap-align: start; }
.k-desk { display: flex; flex-direction: column; min-inline-size: 0; padding: var(--sp-18) var(--sp-20) var(--sp-16); border-radius: var(--r-24); background: linear-gradient(color-mix(in oklch, var(--desk-c) 12%, var(--s1)) 0%, var(--s1) 55%); }
.k-desk-top { display: flex; align-items: flex-start; gap: var(--sp-12); }
.k-desk-name { flex: 1 1 0; min-inline-size: 0; }
.k-desk-open { display: block; max-inline-size: 100%; padding: 0; background: none; box-shadow: none; font-size: var(--fs-17); font-weight: var(--weight-semibold); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; border-radius: var(--r-6); }
.k-desk-open:hover { background: none; color: var(--desk-c); }
.k-desk-open .k-kanji { color: var(--desk-c); margin-inline-end: var(--sp-6); }
.k-desk-board { display: flex; min-inline-size: 0; align-items: center; gap: var(--sp-8); margin-block-start: var(--sp-4); font: var(--fs-11) var(--font-mono); color: var(--muted); white-space: nowrap; }
.k-desk-meta { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.k-desk-board .k-chip { flex: none; --chip-c: var(--desk-c); padding: var(--hairline) var(--sp-7); font-family: var(--font-mono); font-size: var(--fs-11); }
.k-desk-ring { inline-size: var(--desk-ring); block-size: var(--desk-ring); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--desk-c) 0 var(--p, 0%), var(--s2) var(--p, 0%) 100%); }
.k-desk-ring > span { inline-size: var(--desk-ring-hole); block-size: var(--desk-ring-hole); border-radius: 50%; background: var(--s1); display: grid; place-items: center; font: var(--weight-semibold) var(--fs-11-5) var(--font-mono); }
.k-desk .k-bar { margin-block: var(--sp-14) var(--sp-6); --bar-c: var(--desk-c); }
.k-desk-row { display: flex; align-items: center; gap: var(--sp-10); min-block-size: var(--desk-row-h); border-block-start: var(--hairline) solid var(--line); min-inline-size: 0; }
.k-desk-row-k { inline-size: var(--desk-k-w); flex: 0 0 auto; font-size: var(--fs-12); color: var(--muted); }
.k-desk-row-v { flex: 1 1 0; min-inline-size: 0; font-size: var(--fs-12-5); text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-desk-row-v--start { text-align: start; }
button.k-desk-row-v { padding: 0; background: none; box-shadow: none; border-radius: var(--r-6); display: block; }
button.k-desk-row-v:hover { background: none; color: var(--desk-c); }
.k-desk-cover { inline-size: var(--sp-20); block-size: var(--sp-26); flex: 0 0 auto; border-radius: var(--r-6); overflow: hidden; background: color-mix(in oklch, var(--desk-c) 25%, var(--s2)); }
.k-desk-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-desk-row .k-desk-when { font: var(--fs-11) var(--font-mono); color: var(--desk-c); white-space: nowrap; }
.k-desk-foot { display: flex; align-items: center; gap: var(--sp-12); margin-block-start: auto; padding-block-start: var(--sp-12); border-block-start: var(--hairline) solid var(--line); }
.k-desk-foot-txt { flex: 1 1 0; min-inline-size: 0; }
.k-desk-foot-k { font-size: var(--fs-11); color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
.k-desk-foot-v { font-size: var(--fs-14); font-weight: var(--weight-semibold); margin-block-start: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-desk-go { inline-size: var(--desk-arrow); block-size: var(--desk-arrow); flex: 0 0 auto; display: grid; place-items: center; padding: 0; border-radius: 50%; background: var(--desk-c); color: var(--bg); box-shadow: none; font-weight: var(--weight-bold); }
.k-desk-go:hover { background: var(--desk-c); filter: brightness(1.1); }

/* ---------- the tiers, widest first ---------- */
@media (max-width: 1240px) {
.k-home-mid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-home-mid > .k-upnext, .k-home-mid > .k-plan, .k-home-mid:has(> .k-rp-home[hidden]) > .k-hours { grid-column: 1 / -1; }
.k-desks { grid-auto-columns: calc((100% - var(--sp-14)) / 2); }
}

@media (max-width: 1080px) {
.k-home-goal { display: none; }
}

@media (max-width: 860px) {
.k-home-pair-top, .k-home-pair { grid-template-columns: minmax(0, 1fr); }
.k-home-mid { grid-template-columns: minmax(0, 1fr); }
.k-home-mid > *, .k-home-mid > .k-home-pair { grid-column: 1 / -1; }
.k-home-hero-body { flex-wrap: wrap; }
}

/* 15b: one scrolling column. The hero stacks — the ring beside the date,
   the greeting, the quote and the level line, then the day's list and its
   Start focus at full width — and Continue becomes a scroller at the foot */
@media (max-width: 700px) {
.k-home-hero-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-10) var(--sp-14); padding: var(--sp-20); }
.k-home-hero-txt { display: contents; }
.k-home-hero-txt > :not(.k-kicker) { grid-column: 1 / -1; }
.k-home-ring { inline-size: var(--home-ring-sm); block-size: var(--home-ring-sm); }
.k-home-ring .k-avatar { inline-size: calc(var(--home-ring-sm) - var(--sp-8)); block-size: calc(var(--home-ring-sm) - var(--sp-8)); }
.k-home-ring { --frame-out: var(--sp-4); }
.k-home-greet { font-size: var(--fs-22); }
.k-home-dot { display: none; }
.k-home-goal { display: flex; grid-column: 1 / -1; inline-size: auto; margin-block-start: var(--sp-6); }
.k-home-goal > .k-btn { align-self: stretch; justify-content: center; min-block-size: var(--hit-coarse); }
.k-desks { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.k-desks > * { flex: 0 0 var(--home-desk-phone-w); scroll-snap-align: start; }
}

@media (max-width: 560px) {
.k-routines { grid-template-columns: minmax(0, 1fr); }
}

/* 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-desk-go { min-inline-size: var(--hit-coarse); min-block-size: var(--hit-coarse); }
}

/* ---------- 27m: the Upcoming card's Goals view ---------- */
.k-home-upswitch { margin-inline-start: auto; font-size: var(--fs-12-5); background: var(--s2); }
.k-home-upswitch .k-seg-item { padding: var(--sp-5) var(--sp-12); }
.k-home-goals { display: flex; flex-direction: column; }
.k-home-goal-list { flex: 1 1 auto; }
.k-home-goal-list > .k-day-row:first-child { border-block-start: 0; }
.k-home-goalnum { inline-size: var(--goal-num); block-size: var(--goal-num); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--crimson) 0 var(--p, 0%), var(--s2) var(--p, 0%) 100%); }
.k-home-goalnum > span { inline-size: var(--goal-num-in); block-size: var(--goal-num-in); display: grid; place-items: center; border-radius: 50%; background: var(--s1); font: var(--weight-semibold) var(--fs-14) var(--font-mono); }
.k-home-goal-sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-6) var(--sp-8); margin-block-start: var(--sp-4); }
.k-home-goals-all { align-self: flex-end; margin-block-start: var(--sp-10); }

}