/* KurenaiOS — css/views/productivity.css · @layer views
   View compositions for Productivity: Focus, Calendar, Reminders, Habits, Pacing.
   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 {

/* ================= Focus Timer · setup (frame 10a) ================= */
.k-fx-setup { display: grid; grid-template-columns: minmax(0, 1fr) var(--fx-side-w); gap: var(--sp-20); align-items: stretch; }
.k-fx-hero { display: grid; grid-template-columns: var(--fx-dial-w) minmax(0, 1fr); gap: var(--sp-32); align-items: center; padding: var(--sp-26) var(--sp-32); border-radius: var(--r-24); background: linear-gradient(135deg, var(--fx-wash), var(--s1) 55%); min-inline-size: 0; }
.k-fx-dial { display: flex; flex-direction: column; align-items: center; gap: var(--sp-18); }

/* one ring for the dial and the stage: a conic track filled to --pct */
.k-fx-ring { --ring: var(--fx-dial); --ring-w: var(--fx-ring-w); --ring-fill: var(--crimson); --ring-track: var(--s2); --ring-well: var(--s1); inline-size: var(--ring); block-size: var(--ring); flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ring-fill) 0 var(--pct, 0%), var(--ring-track) var(--pct, 0%) 100%); }
.k-fx-ring--full { --pct: 100%; }
.k-fx-ring-in { inline-size: calc(var(--ring) - 2 * var(--ring-w)); block-size: calc(var(--ring) - 2 * var(--ring-w)); border-radius: 50%; background: var(--ring-well); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-8); }
.k-fx-dial-time { font: var(--weight-medium) var(--fs-58) / 1 var(--font-mono); letter-spacing: var(--track-huge); }
.k-fx-dial-sub { font-size: var(--fs-12-5); color: var(--muted); }

.k-fx-form { display: flex; flex-direction: column; gap: var(--sp-14); min-inline-size: 0; }
.k-fx-form > .k-seg { align-self: flex-start; }
.k-fx-form > .k-seg--grid { align-self: stretch; }
.k-fx-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
.k-fx-pair[hidden], .k-fx-form [hidden] { display: none; }
.k-fx-wide { grid-column: 1 / -1; }
.k-fx-form .k-input { background: var(--s3); }
.k-fx-check { display: flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-13); color: var(--text-2); cursor: pointer; }
.k-fx-go { margin-block-start: var(--sp-4); flex-wrap: nowrap; --cluster-gap: var(--sp-12) var(--sp-14); }
.k-fx-go > .k-fx-check { flex: 0 1 auto; min-inline-size: 0; }
.k-fx-go > .k-btn { flex: 0 0 auto; }
.k-fx-start { padding: var(--sp-12) var(--sp-26); font-size: var(--fs-15); }

/* frames 16a/16b — the time-paid modes: the stopwatch's two settings,
   the study-until picker and the award ticks */
.k-fx-dial-note { margin: 0; max-inline-size: var(--fx-dial); text-align: center; }
.k-fx-hero[data-rule="blocks"] .k-fx-dial .k-fx-ring { --ring-fill: var(--teal); }
.k-fx-hero[data-mode="stopwatch"] .k-fx-dial .k-fx-ring { --pct: 0%; }
.k-fx-until { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-12) var(--sp-16); align-items: end; }
.k-fx-hm-pick { display: flex; align-items: center; gap: var(--sp-8); }
.k-fx-hm-col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.k-fx-form .k-fx-hm { inline-size: var(--fx-hm-w); padding-inline: 0; text-align: center; font-size: var(--fs-26); font-weight: var(--weight-medium); }
.k-fx-form .k-fx-hm:focus { box-shadow: inset 0 0 0 var(--ring-1-5) var(--crimson); }
.k-fx-hm-sep { font-size: var(--fs-26); color: var(--muted); }
.k-fx-until-side { display: flex; min-inline-size: 0; align-self: stretch; }
/* the quick times: 2 × 2, filling the side of the clock, on the inputs' ground */
.k-fx-until-chips { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-6); padding: var(--sp-6); border-radius: var(--r-20); background: var(--s3); overflow: visible; }
.k-fx-until-chips > .k-seg-item { justify-content: center; font-size: var(--fs-16); border-radius: var(--r-14); }
.k-fx-until-sumfield { display: flex; align-items: flex-end; }
.k-fx-until-sumfield[hidden] { display: none; }
.k-fx-until-sum { flex: 1 1 auto; margin: 0; min-block-size: var(--hit); padding: var(--sp-10) var(--sp-14); border-radius: var(--r-14); background: var(--s3); font-size: var(--fs-13); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the session types: one row across the form, on the inputs' ground */
.k-fx-form > .k-fx-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: stretch; border-radius: var(--r-pill); background: var(--s3); }
.k-fx-modes > .k-seg-item { justify-content: center; white-space: nowrap; }
.k-fx-until-sum[data-state~="warn"] { color: var(--amber); }
.k-fx-rw-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-10); margin: var(--sp-8) 0 var(--sp-12); }
.k-fx-rw-big > b { font-size: var(--fs-20); font-weight: var(--weight-semibold); color: var(--teal); }
.k-fx-rw-big > span { font-size: var(--fs-13); }
.k-fx-ticks { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-fx-tick-bar { display: flex; gap: var(--sp-4); }
.k-fx-tick { flex: 1 1 0; block-size: var(--fx-seg-h); border-radius: var(--fx-seg-h); background: var(--line); }
.k-fx-tick[data-state~="done"] { background: var(--teal); }
.k-fx-tick[data-state~="live"] { background: linear-gradient(90deg, var(--teal) var(--pct, 0%), var(--line) var(--pct, 0%)); }
.k-fx-tick-lab { display: flex; justify-content: space-between; font-size: var(--fs-11); color: var(--muted); }

/* a switch is a checkbox that says so (role="switch") */

.k-fx-side { display: flex; flex-direction: column; gap: var(--sp-20); min-inline-size: 0; }
.k-fx-deal { flex: 1 1 auto; }
.k-fx-kvs { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.k-fx-kv { display: flex; align-items: baseline; gap: var(--sp-12); padding-block: var(--sp-9); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
.k-fx-kv > span { flex: 1 1 auto; min-inline-size: 0; color: var(--muted); }
/* a value wraps rather than truncating (review A: the award read "…") */
.k-fx-kv > strong { flex: 0 1 auto; max-inline-size: 62%; margin-inline-start: auto; font-weight: var(--weight-regular); text-align: end; text-wrap: balance; }
.k-fx-kv > strong[data-tone="good"] { color: var(--green); }
.k-fx-kv > strong[data-tone="bad"] { color: var(--red); }
.k-fx-kv > strong[data-tone="warn"] { color: var(--amber); }
.k-fx-kv > strong[data-tone="muted"] { color: var(--text-2); }
.k-fx-caption { margin: var(--sp-10) 0 0; font-size: var(--fs-12); line-height: var(--lh-body); color: var(--muted); }

.k-fx-rows { list-style: none; margin: 0; padding: 0; }
.k-fx-row { display: grid; grid-template-columns: var(--fx-when-w) var(--fx-row-bar-w) minmax(0, 1fr) var(--fx-dur-w) var(--fx-result-w); gap: var(--sp-14); align-items: center; padding-block: var(--sp-9); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
.k-fx-row > .k-mono { font-size: var(--fs-12); }
.k-fx-row > .k-chip { justify-self: start; }
.k-fx-row-bar { block-size: var(--fx-row-bar-h); border-radius: var(--r-2); background: var(--row-hue, var(--line)); }
.k-fx-row-bar--split { display: flex; flex-direction: column; gap: var(--sp-2); overflow: hidden; background: none; }
.k-fx-row-bar--split > span { flex: var(--f) 1 0; min-block-size: var(--sp-2); background: var(--row-hue); }
.k-fx-row-t { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.k-fx-row-sub { font-size: var(--fs-12); }
.k-fx-live { display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap; }
.k-fx-live > .k-btn { margin-inline-start: auto; }

/* ================= Focus Timer · the stage (frame 10b) ================= */
:root[data-focus="stage"] body { overflow: hidden; }
.k-fx-stage { position: fixed; inset: 0; z-index: var(--z-focus); display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-24) var(--sp-32); background: radial-gradient(var(--fx-glow-w) var(--fx-glow-h) at 50% 40%, var(--fx-stage-glow), var(--bg) 70%); color: var(--text); overflow-y: auto; }
:root:not([data-focus="stage"]) .k-fx-stage { display: none; }
/* the scene (34m): the room itself, fixed behind the scrolling stage */
.k-fx-stage > .k-art { position: fixed; border-radius: 0; }
.k-fx-top { display: flex; align-items: center; gap: var(--sp-12); }
.k-fx-logo { inline-size: var(--sp-32); block-size: var(--sp-32); object-fit: contain; }
.k-fx-top-t { font-size: var(--fs-13); color: var(--muted); }
.k-fx-end { color: var(--crimson); }
.k-fx-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--fx-stage-mid) minmax(0, 1fr); gap: var(--sp-40); align-items: center; }
.k-fx-col { display: flex; flex-direction: column; gap: var(--sp-12); min-inline-size: 0; }
.k-fx-left { align-items: flex-end; text-align: end; }
.k-fx-left > * { max-inline-size: var(--fx-stage-side); }
.k-fx-notes { inline-size: 100%; max-inline-size: var(--fx-stage-side); }
.k-fx-objective { font-size: var(--fs-20); font-weight: var(--weight-semibold); line-height: var(--lh-snug); text-align: inherit; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; }
.k-fx-objective:hover { color: var(--crimson-soft); }
.k-fx-objective[data-state~="empty"] { font-size: var(--fs-14); font-weight: var(--weight-regular); color: var(--muted); }
.k-fx-ctx { display: flex; flex-direction: column; align-items: inherit; gap: var(--sp-6); }
.k-fx-ctx > .k-cluster { justify-content: flex-end; }
.k-fx-stats { display: flex; gap: var(--sp-22); margin: var(--sp-16) 0 0; text-align: center; }
.k-fx-stat { display: flex; flex-direction: column-reverse; }
.k-fx-stat dd { margin: 0; font-size: var(--fs-22); font-weight: var(--weight-medium); }
.k-fx-stat dt { font-size: var(--fs-11-5); color: var(--muted); }
.k-fx-elig { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-12-5); color: var(--muted); }
.k-fx-elig b { font-weight: var(--weight-semibold); color: var(--green); }
.k-fx-elig[data-state~="warn"] b { color: var(--amber); }

.k-fx-centre { display: flex; flex-direction: column; align-items: center; gap: var(--sp-26); }
.k-fx-centre > .k-fx-ring { --ring: var(--fx-stage-ring); --ring-w: var(--fx-stage-ring-w); --ring-track: var(--fx-stage-track); --ring-well: var(--fx-stage-well); box-shadow: 0 var(--sp-32) var(--sp-64) var(--crimson-glow); }
.k-fx-clock { font: var(--weight-medium) var(--fs-96) / 1 var(--font-mono); letter-spacing: var(--track-clock); margin-block: var(--sp-6); }
.k-fx-clock[data-long] { font-size: var(--fs-76); }
.k-fx-at { font-size: var(--fs-13); color: var(--muted); }
.k-fx-stage[data-phase="break"] .k-fx-ring { --ring-fill: var(--teal); }
.k-fx-stage[data-phase="paused"] .k-fx-ring { --ring-fill: var(--amber); }
.k-fx-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-12); }
.k-fx-big { padding: var(--sp-12) var(--sp-28); font-size: var(--fs-15); }

.k-fx-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-fx-note { display: flex; align-items: flex-start; gap: var(--sp-8); padding: var(--sp-10) var(--sp-14); border-radius: var(--r-16); background: var(--fx-note-fill); font-size: var(--fs-13-5); line-height: var(--lh-body); }
.k-fx-note > span { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
.k-fx-note-in { border-radius: var(--r-16); background: transparent; box-shadow: inset 0 0 0 var(--hairline) var(--line); }

.k-fx-progress { display: flex; justify-content: center; }
.k-fx-segs { display: flex; gap: var(--sp-4); }
.k-fx-seg { inline-size: var(--fx-seg-w); block-size: var(--fx-seg-h); border-radius: var(--fx-seg-h); background: var(--fx-stage-seg); }
.k-fx-seg[data-state~="done"] { background: var(--crimson); }
.k-fx-seg[data-state~="live"] { background: linear-gradient(90deg, var(--crimson) var(--pct, 0%), var(--fx-stage-seg) var(--pct, 0%)); }
.k-fx-foot { margin: 0; text-align: center; font-size: var(--fs-12); color: var(--muted); }

/* the time-paid modes (frame 16c): a teal stage, and "earned so far" */
.k-fx-stage[data-rule="blocks"] { background: radial-gradient(var(--fx-glow-w) var(--fx-glow-h) at 50% 40%, var(--fx-teal-glow), var(--bg) 70%); }
.k-fx-stage[data-rule="blocks"] .k-fx-centre > .k-fx-ring { --ring-fill: var(--teal); --ring-track: var(--fx-teal-track); --ring-well: var(--fx-teal-well); box-shadow: 0 var(--sp-32) var(--sp-64) var(--wash-teal); }
.k-fx-stage[data-rule="blocks"][data-phase="paused"] .k-fx-centre > .k-fx-ring { --ring-fill: var(--amber); }
.k-fx-what { display: flex; flex-direction: column; align-items: inherit; gap: var(--sp-12); }
.k-fx-earned { display: flex; flex-direction: column; gap: var(--sp-8); inline-size: 100%; margin-block-start: var(--sp-16); text-align: start; }
.k-fx-earned-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-12); }
.k-fx-earned-head > b { font-size: var(--fs-15); font-weight: var(--weight-semibold); color: var(--teal); }
.k-fx-earned-foot { font-size: var(--fs-12-5); color: var(--muted); }
.k-fx-earned-foot[data-tone="warn"] { color: var(--amber); }

/* the idle watch's warning (frame 16g): the stage dims, one calm card */
.k-fx-stage[data-idle] > :not(.k-fx-idle) { opacity: 0.45; filter: saturate(0.6); }
.k-fx-idle { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); inline-size: min(var(--fx-idle-w), calc(100% - 2 * var(--sp-16))); display: flex; align-items: center; gap: var(--sp-20); padding: var(--sp-20) var(--sp-24); border-radius: var(--r-24); background: var(--s1); box-shadow: var(--elev-4), inset 0 0 0 var(--hairline) var(--amber); }
.k-fx-idle-txt { display: flex; flex-direction: column; gap: var(--sp-8); min-inline-size: 0; flex: 1 1 auto; }
.k-fx-idle-title { margin: 0; font-size: var(--fs-22); font-weight: var(--weight-bold); }
.k-fx-idle-line { margin: 0; font-size: var(--fs-13-5); line-height: var(--lh-body); color: var(--text-2); }
.k-fx-idle-line b { color: var(--text); }
.k-fx-idle-act { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-12); margin-block-start: var(--sp-4); font-size: var(--fs-12-5); }
/* the countdown: an amber ring that empties over the five minutes */
.k-fx-cd { --cd: var(--fx-cd); inline-size: var(--cd); block-size: var(--cd); flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--amber) 0 var(--pct, 100%), var(--line) var(--pct, 100%) 100%); }
.k-fx-cd-t { inline-size: calc(var(--cd) - 2 * var(--fx-cd-w)); block-size: calc(var(--cd) - 2 * var(--fx-cd-w)); border-radius: 50%; display: grid; place-items: center; background: var(--s1); font-size: var(--fs-20); font-weight: var(--weight-semibold); }
.k-fx-dock .k-fx-cd { --cd: var(--fx-cd-sm); }
.k-fx-dock .k-fx-cd-t { font-size: var(--fs-11-5); background: var(--s2); }

/* ---- minimised: the floating player (frame 16d) ---- */
.k-fx-dock { display: none; }
:root[data-focus="minimised"] .k-fx-dock { position: fixed; inset-inline-start: var(--mini-x, auto); inset-block-start: var(--mini-y, auto); z-index: var(--z-focus); display: flex; flex-direction: column; gap: var(--sp-8); inline-size: var(--fx-mini-compact); padding: var(--sp-10) var(--sp-12); border-radius: var(--r-20); background: var(--s2); box-shadow: var(--elev-3); font-size: var(--fs-13); transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
:root[data-focus="minimised"] .k-fx-dock[data-size="large"] { inline-size: var(--fx-mini-large); padding: var(--sp-12) var(--sp-16) var(--sp-16); gap: var(--sp-10); }
:root[data-focus="minimised"] .k-fx-dock[data-size="compact"][data-idle] { inline-size: var(--fx-mini-warn); }
:root[data-focus="minimised"] .k-fx-dock[data-idle] { box-shadow: var(--elev-3), inset 0 0 0 var(--hairline) var(--amber); }
:root[data-fx-drag] .k-fx-dock { transform: scale(1.02) rotate(-1deg); box-shadow: var(--elev-4); }
.k-fx-mini-row { display: flex; align-items: center; gap: var(--sp-10); min-inline-size: 0; }
.k-fx-mini-row > .k-fx-dock-clock { flex: 1 1 auto; }
.k-fx-grip { flex: 0 0 auto; padding: var(--sp-4) var(--sp-2); border: 0; background: none; color: var(--muted); cursor: grab; touch-action: none; font-size: var(--fs-15); line-height: 1; }
:root[data-fx-drag] .k-fx-grip { cursor: grabbing; }
.k-fx-resize { position: absolute; z-index: 1; inline-size: var(--sp-14); block-size: var(--sp-14); padding: 0; border: 0; background: none; cursor: nwse-resize; touch-action: none; border-block-start: var(--ring-1-5) solid var(--muted); border-inline-start: var(--ring-1-5) solid var(--muted); border-start-start-radius: var(--r-2); opacity: 0.6; inset-block-start: var(--sp-6); inset-inline-start: var(--sp-6); }
.k-fx-dock[data-dock~="left"] .k-fx-resize { inset-inline-start: auto; inset-inline-end: var(--sp-6); border-inline-start: 0; border-inline-end: var(--ring-1-5) solid var(--muted); border-start-start-radius: 0; border-start-end-radius: var(--r-2); cursor: nesw-resize; }
.k-fx-dock[data-dock~="top"] .k-fx-resize { inset-block-start: auto; inset-block-end: var(--sp-6); border-block-start: 0; border-block-end: var(--ring-1-5) solid var(--muted); }
.k-fx-dock[data-size="compact"] .k-fx-resize { opacity: 0; }
.k-fx-dock:hover .k-fx-resize, .k-fx-resize:focus-visible { opacity: 0.8; }
.k-fx-mini-ring { flex: 0 0 auto; inline-size: var(--fx-mini-ring); block-size: var(--fx-mini-ring); border-radius: 50%; background: radial-gradient(closest-side, var(--s2) calc(100% - var(--fx-mini-ring-w)), transparent calc(100% - var(--fx-mini-ring-w) + var(--hairline))), conic-gradient(var(--crimson) 0 var(--pct, 0%), var(--line) var(--pct, 0%) 100%); }
.k-fx-dock[data-rule="blocks"] .k-fx-mini-ring { background: radial-gradient(closest-side, var(--s2) calc(100% - var(--fx-mini-ring-w)), transparent calc(100% - var(--fx-mini-ring-w) + var(--hairline))), conic-gradient(var(--teal) 0 var(--pct, 0%), var(--line) var(--pct, 0%) 100%); }
.k-fx-dock[data-phase="paused"] .k-fx-mini-ring { background: radial-gradient(closest-side, var(--s2) calc(100% - var(--fx-mini-ring-w)), transparent calc(100% - var(--fx-mini-ring-w) + var(--hairline))), conic-gradient(var(--amber) 0 var(--pct, 0%), var(--line) var(--pct, 0%) 100%); }
.k-fx-dock-clock { font-size: var(--fs-20); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.k-fx-dock .k-iconbtn.k-fx-mini-primary { background: var(--crimson); color: var(--bg); }
.k-fx-mini-head { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-12); min-inline-size: 0; }
.k-fx-mini-head .k-iconbtn { inline-size: var(--sp-28); block-size: var(--sp-28); }
.k-fx-mini-mode { color: var(--crimson-soft); font-weight: var(--weight-semibold); }
.k-fx-dock[data-rule="blocks"] .k-fx-mini-mode { color: var(--teal); }
.k-fx-dock[data-idle] .k-fx-mini-mode { color: var(--amber); }
.k-fx-mini-time { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-10); }
.k-fx-mini-time > .k-fx-dock-clock { font-size: var(--fs-38); letter-spacing: var(--track-clock); }
.k-fx-mini-earned { font-size: var(--fs-13); color: var(--teal); }
.k-fx-mini-topic { font-size: var(--fs-13); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-fx-mini-next { display: flex; justify-content: space-between; gap: var(--sp-10); font-size: var(--fs-12); color: var(--muted); }
.k-fx-mini-act { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-8); }
.k-fx-mini-title { font-size: var(--fs-14); font-weight: var(--weight-semibold); white-space: nowrap; }
.k-fx-mini-row > .k-fx-mini-title { flex: 1 1 auto; }
.k-fx-dock-line { block-size: var(--fx-seg-h); border-radius: var(--fx-seg-h); background: linear-gradient(90deg, var(--crimson) var(--pct, 0%), var(--line) var(--pct, 0%)); }
.k-fx-dock[data-rule="blocks"] .k-fx-dock-line { background: linear-gradient(90deg, var(--teal) var(--pct, 0%), var(--line) var(--pct, 0%)); }
.k-fx-dock-txt { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; flex: 1 1 auto; }
.k-fx-dock-phase { font-size: var(--fs-11-5); color: var(--teal); white-space: nowrap; }
.k-fx-dock-title { font-size: var(--fs-13-5); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-fx-dock-meta { flex: 1 1 auto; min-inline-size: 0; font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-fx-dot { inline-size: var(--sp-8); block-size: var(--sp-8); flex: 0 0 auto; border-radius: 50%; background: var(--crimson); }
.k-fx-dock[data-rule="blocks"] .k-fx-dot, .k-fx-dock[data-phase="break"] .k-fx-dot { background: var(--teal); }
.k-fx-dock[data-phase="paused"] .k-fx-dot { background: var(--amber); }

/* the drag (frame 16e): the page dims, guides mark the edge it will land
   on, a ghost where, and rings the other corners */
.k-fx-drag { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--sheet-scrim); pointer-events: none; }
.k-fx-drag-ghost { position: absolute; inset-inline-start: var(--gx); inset-block-start: var(--gy); inline-size: var(--gw); block-size: var(--gh); border-radius: var(--r-20); border: var(--ring-1-5) dashed var(--crimson); }
.k-fx-drag-guide { position: absolute; border: 0 dashed var(--crimson); opacity: 0.7; }
.k-fx-drag-guide[data-edge="x"] { inset-block: 0; inset-inline-start: var(--at); border-inline-start-width: var(--hairline); }
.k-fx-drag-guide[data-edge="y"] { inset-inline: 0; inset-block-start: var(--at); border-block-start-width: var(--hairline); }
.k-fx-drag-guide[hidden] { display: none; }
.k-fx-drag-corner { position: absolute; inset-inline-start: var(--cx); inset-block-start: var(--cy); inline-size: var(--fx-drag-corner); block-size: var(--fx-drag-corner); border-radius: 50%; border: var(--ring-1-5) solid var(--crimson); transform: translate(-50%, -50%); opacity: 0.8; }

/* ================= Focus Timer · the review dialog ================= */
/* frames 16f/16j: the time leads, then one card of results, then the
   objective and the notes; the dialog wears the stage's glow */
.k-dialog.k-fx-review-dialog { inline-size: min(var(--dialog-w-lg), 100%); background: radial-gradient(var(--fx-glow-w) var(--fx-glow-h) at 50% 0%, var(--fx-teal-glow), var(--s2) 60%); }
.k-fx-review { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-fx-rev-hero { display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); padding-block: var(--sp-8) var(--sp-4); text-align: center; }
.k-fx-rev-hero > .k-kicker { color: var(--teal); }
.k-fx-rev-hero[data-rule="cycle"] > .k-kicker { color: var(--crimson-soft); }
.k-fx-rev-time { font-size: var(--fs-64); font-weight: var(--weight-medium); line-height: 1; letter-spacing: var(--track-clock); color: var(--text); }
.k-fx-rev-span { font-size: var(--fs-13-5); color: var(--text-2); }
.k-fx-rev-card { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-16) var(--sp-20); border-radius: var(--r-20); background: var(--s1); }
.k-fx-rev-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-12); margin: 0; }
.k-fx-rev-fig { display: flex; flex-direction: column-reverse; gap: var(--sp-2); min-inline-size: 0; }
.k-fx-rev-fig dd { margin: 0; font-size: var(--fs-26); font-weight: var(--weight-medium); color: var(--text); white-space: nowrap; }
.k-fx-rev-fig dt { font-size: var(--fs-12); color: var(--muted); }
.k-fx-rev-fig[data-tone="teal"] dd { color: var(--teal); }
.k-fx-rev-fig[data-tone="gold"] dd { color: var(--gold); }
.k-fx-rev-award { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
.k-fx-rev-fig dd { overflow: hidden; text-overflow: ellipsis; }
/* the three answers sit on a track of their own — on the card's ground a
   quiet group read as three loose words */
.k-fx-rev-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--s2); }
.k-fx-rev-none { grid-column: 1 / -1; align-self: center; margin: 0; font-size: var(--fs-13); color: var(--muted); }
.k-fx-rev-foot { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-6) var(--sp-16); font-size: var(--fs-12-5); color: var(--muted); }
.k-fx-rev-foot > :first-child { flex: 1 1 auto; }
.k-fx-rev-hp { color: var(--teal); }
.k-fx-rev-level { color: var(--gold); }
.k-fx-rev-why { display: flex; align-items: center; gap: var(--sp-12); margin: 0; padding: var(--sp-10) var(--sp-14); border-radius: var(--r-14); background: var(--s2); font-size: var(--fs-13-5); color: var(--text); }
.k-fx-rev-why > .k-fx-dot { background: var(--amber); }
.k-fx-rev-tlbox { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-fx-rev-tl { position: relative; block-size: var(--sp-8); border-radius: var(--sp-8); background: repeating-linear-gradient(135deg, var(--line) 0 var(--sp-4), transparent var(--sp-4) var(--sp-8)); }
.k-fx-rev-tl::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--paid); border-radius: inherit; background: var(--teal); }
.k-fx-rev-tl-mark { position: absolute; inset-block: calc(-1 * var(--sp-4)); inset-inline-start: var(--at); inline-size: var(--hairline); background: var(--text-2); }
.k-fx-rev-tl-lab { position: relative; block-size: var(--sp-16); font-size: var(--fs-11); color: var(--muted); }
.k-fx-rev-tl-lab > span { position: absolute; inset-inline-start: 0; white-space: nowrap; }
.k-fx-rev-tl-lab > .k-fx-rev-tl-at { inset-inline-start: var(--at); transform: translateX(-50%); }
.k-fx-rev-tl-lab > .k-fx-rev-tl-at:last-child { transform: translateX(-100%); }
.k-fx-rev-q { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-6) var(--sp-12); }
.k-fx-rev-qt { margin: 0; font-size: var(--fs-15); font-weight: var(--weight-semibold); color: var(--text); }
.k-fx-rev-obj { font-size: var(--fs-12-5); color: var(--muted); }
.k-fx-rev-card > .k-seg { align-self: flex-start; }
.k-fx-rev-card > .k-fx-rev-reflect { min-block-size: var(--hit-coarse); block-size: var(--hit-coarse); resize: vertical; background: var(--s2); }
.k-fx-rev-notes { display: flex; align-items: center; gap: var(--sp-10); padding-block-start: var(--sp-12); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13); }
.k-fx-rev-note-t { flex: 1 1 auto; min-inline-size: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-fx-rev-block > .k-kicker { margin: 0; }
.k-fx-rev-asg { display: flex; flex-direction: column; margin: 0; }
.k-fx-rev-subs { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-fx-rev-act { justify-content: center; gap: var(--sp-16); }
.k-dialog-foot.k-fx-rev-act > :first-child:not(:only-child) { margin-inline-end: 0; }
.k-fx-range { flex: 1 1 auto; accent-color: var(--crimson); }

/* ================= Reminders (frame 10c) ================= */
.k-rem { display: grid; grid-template-columns: var(--rem-side-w) minmax(0, 1fr) var(--rem-insp-w); gap: var(--sp-20); align-items: start; }
.k-rem-side { display: flex; flex-direction: column; gap: var(--sp-16); min-inline-size: 0; }
.k-rem-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-rem-group > .k-kicker { margin: 0; padding: 0 var(--sp-12) var(--sp-6); }
.k-rem-group-h { display: flex; align-items: center; }
.k-rem-group-h > .k-iconbtn { margin-inline-start: auto; }
.k-rem-item { display: flex; align-items: center; gap: var(--sp-10); inline-size: 100%; padding: var(--sp-8) var(--sp-12); border: 0; border-radius: var(--r-12); background: none; font: inherit; font-size: var(--fs-13-5); color: var(--text-2); text-align: start; cursor: pointer; }
.k-rem-item:hover { background: var(--s1); color: var(--text); }
.k-rem-item[aria-current="true"] { background: var(--s2); color: var(--text); font-weight: var(--weight-semibold); }
.k-rem-glyph { inline-size: var(--rem-glyph-w); flex: 0 0 auto; text-align: center; font-family: var(--font-kanji); color: var(--muted); }
.k-rem-item-l { flex: 1 1 auto; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-rem-n { font-size: var(--fs-11-5); color: var(--muted); }
.k-rem-item[data-tone="crimson"] .k-rem-glyph, .k-rem-item[data-tone="crimson"] .k-rem-n { color: var(--alarm); }
.k-rem-item[data-state~="list"] .k-rem-n { color: oklch(var(--cal-l) var(--cal-c) var(--list-hue)); }
.k-rem-item[data-state~="list"] .k-rem-glyph::before { content: ""; display: inline-block; inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: oklch(var(--cal-l) var(--cal-c) var(--list-hue)); }
.k-rem-list-row { position: relative; display: flex; align-items: center; }
.k-rem-list-ctl { position: absolute; inset-inline-end: var(--sp-4); display: none; gap: var(--sp-2); padding-inline-start: var(--sp-4); background: var(--s1); border-radius: var(--r-pill); }
.k-rem-list-row:hover .k-rem-list-ctl, .k-rem-list-row:focus-within .k-rem-list-ctl { display: flex; }
.k-rem-tags { padding: 0 var(--sp-12); --cluster-gap: var(--sp-6); }
.k-rem-tag { border: 0; font: inherit; font-size: var(--fs-11-5); cursor: pointer; }
.k-rem-tag[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--hairline) var(--teal); }
.k-rem-hint { margin: 0; padding: 0 var(--sp-12); font-size: var(--fs-12); line-height: var(--lh-body); color: var(--muted); }

.k-rem-main { display: flex; flex-direction: column; gap: var(--sp-8); min-inline-size: 0; }
.k-rem-quick { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-16) var(--sp-6) var(--sp-8); border-radius: var(--r-18); background: var(--s1); }
.k-rem-quick:focus-within { box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-rem-quick-add { inline-size: var(--hit); block-size: var(--hit); flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; color: var(--crimson); font-size: var(--fs-20); font-weight: var(--weight-medium); line-height: 1; cursor: pointer; }
.k-rem-quick-add:hover { background: var(--s2); }
.k-rem-quick-in { flex: 1 1 auto; min-inline-size: 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: var(--fs-14); color: var(--text); padding: var(--sp-6) 0; }
.k-rem-quick-in:focus { outline: none; }
.k-rem-quick-in::placeholder { color: var(--muted); }
.k-rem-quick-list { border: 0; background: none; font-size: var(--fs-11); color: var(--muted); cursor: pointer; }
.k-rem-quick-list[hidden] { display: none; }
.k-rem-tools { padding: var(--sp-4) var(--sp-4) 0; --cluster-gap: var(--sp-8); }
.k-rem-count { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.k-rem-items { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-rem-when { margin: 0; padding: var(--sp-10) var(--sp-14) var(--sp-2); }
.k-rem-when[data-tone="crimson"] { color: var(--alarm); }

.k-rem-row { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-6) var(--sp-10) var(--sp-6) var(--sp-14); border-radius: var(--r-16); cursor: pointer; }
.k-rem-row:hover { background: var(--s1); }
.k-rem-row[data-state~="selected"] { background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-rem-check { inline-size: var(--rem-check); block-size: var(--rem-check); flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; 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); cursor: pointer; }
.k-rem-check[data-state~="urgent"] { box-shadow: inset 0 0 0 var(--ring-1-5) var(--alarm); }
.k-rem-check[aria-pressed="true"] { background: var(--teal); box-shadow: none; }
.k-rem-row-body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-rem-title { font-size: var(--fs-14); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-rem-row[data-state~="done"] .k-rem-title { color: var(--muted); text-decoration: line-through; }
.k-rem-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); font-size: var(--fs-12); color: var(--muted); }
.k-rem-due[data-tone="crimson"] { color: var(--alarm); }
.k-rem-due[data-tone="amber"] { color: var(--amber); }
.k-rem-tagtext { color: var(--teal); }
.k-chip[data-tone="muted"] { --chip-c: var(--muted); }
/* 15h: the phone's section switch, sort button and Completed (in ⋯) */
.k-rem-secs, .k-rem-sortbtn, .k-rem-completed, .k-rem-filter-phone { display: none; }
.k-rem-sortbox { display: contents; }
.k-msheet-slot > .k-rem-sortbox { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-msheet-slot > .k-rem-sortbox > .k-pill-select { min-block-size: var(--hit-coarse); font-size: var(--fs-16); }
.k-rem-del { opacity: 0; }
.k-rem-row:hover .k-rem-del, .k-rem-del:focus-visible { opacity: 1; }

.k-rem-insp { position: sticky; inset-block-start: 0; display: flex; flex-direction: column; gap: var(--sp-14); padding: var(--sp-20) var(--sp-22); border-radius: var(--r-24); background: var(--s1); min-inline-size: 0; }
.k-rem-insp[data-state~="empty"] { background: none; box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-rem-insp-head { display: flex; align-items: center; }
.k-rem-insp-head > .k-kicker { margin: 0; }
.k-rem-insp-head > .k-iconbtn { margin-inline-start: auto; }
.k-rem-insp-body { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-rem-i-top { display: flex; align-items: flex-start; gap: var(--sp-12); }
.k-rem-i-top > .k-rem-check { margin-block-start: var(--sp-4); }
.k-rem-i-top > .k-field { flex: 1 1 auto; min-inline-size: 0; }
.k-rem-i-title { inline-size: 100%; padding: 0; border: 0; background: none; resize: none; field-sizing: content; font: inherit; font-size: var(--fs-17); font-weight: var(--weight-semibold); line-height: var(--lh-snug); color: var(--text); }
.k-rem-i-title:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.k-rem-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.k-rem-wide { grid-column: 1 / -1; }
.k-rem-insp .k-input { background: var(--s3); }
.k-rem-block { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-rem-alerts { position: relative; }
.k-rem-alerts-sum { display: flex; align-items: center; list-style: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-rem-alerts-sum::-webkit-details-marker { display: none; }
.k-rem-alerts-sum::after { content: "▾"; margin-inline-start: auto; padding-inline-start: var(--sp-8); color: var(--muted); font-size: var(--fs-11); }
.k-rem-alerts[data-state~="disabled"] .k-rem-alerts-sum { color: var(--muted); cursor: default; }
.k-rem-alerts-pop { position: absolute; inset-inline: 0 auto; inset-block-start: calc(100% + var(--sp-4)); z-index: var(--z-menu); min-inline-size: 100%; display: flex; flex-direction: column; padding: var(--sp-6); border-radius: var(--r-14); background: var(--s2); box-shadow: var(--elev-3); }
.k-rem-alerts-opt { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-6) var(--sp-8); border-radius: var(--r-8); font-size: var(--fs-13); white-space: nowrap; cursor: pointer; }
.k-rem-alerts-opt:hover { background: var(--s3); }
.k-rem-block > .k-field-label { margin: 0; }
.k-rem-block .k-rem-hint { padding: 0; }
.k-rem-subs { display: flex; flex-direction: column; }
.k-rem-sub { display: flex; align-items: center; gap: var(--sp-10); padding-block: var(--sp-4); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
.k-rem-sub[data-state~="done"] .k-rem-sub-t { color: var(--muted); text-decoration: line-through; }
.k-rem-sub-t { flex: 1 1 auto; min-inline-size: 0; }
.k-rem-box { inline-size: var(--box); block-size: var(--box); flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-6); background: none; 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); cursor: pointer; }
.k-rem-box[aria-pressed="true"] { background: var(--teal); box-shadow: none; }
.k-rem-sub-in { padding: var(--sp-8) 0; border: 0; border-block-start: var(--hairline) solid var(--line); background: none; font: inherit; font-size: var(--fs-13); color: var(--text); }
.k-rem-sub-in::placeholder { color: var(--muted); }
.k-rem-sub-in:focus { outline: none; }
.k-rem-insp .k-rem-hint { padding: 0; }
.k-rem-i-foot { --cluster-gap: var(--sp-8); }


/* ================= Habits (frame 10d) ================= */
/* the habits card runs the full height of the side column, so its foot
   lines up with the 12-week grid's (review A) */
.k-hb { display: grid; grid-template-columns: minmax(0, 1fr) var(--hb-side-w); gap: var(--sp-20); align-items: stretch; }
.k-hb > .k-card:first-child { display: flex; flex-direction: column; }
.k-hb > .k-card:first-child > .k-hb-add { margin-block-start: auto; }
.k-hb-side { display: flex; flex-direction: column; gap: var(--sp-20); min-inline-size: 0; }
.k-hb-title { display: flex; align-items: center; gap: var(--sp-10); min-inline-size: 0; }
.k-hb-title > .k-card-title { margin: 0; font-size: var(--fs-16); white-space: nowrap; }
.k-hb-weeknav { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; font-size: var(--fs-12-5); color: var(--text-2); }
.k-hb-week { white-space: nowrap; padding-inline: var(--sp-4); }
.k-hb-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--hb-days-w) var(--hb-streak-w) var(--hb-act-w); gap: var(--sp-14); align-items: center; padding: var(--sp-12) var(--sp-4); border-block-start: var(--hairline) solid var(--line); }
.k-hb-cols { align-items: end; padding-block: 0 var(--sp-12); border-block-start: 0; }
.k-hb-streak-h { padding-block-end: var(--sp-6); }
.k-hb-name { display: flex; align-items: center; gap: var(--sp-14); min-inline-size: 0; font-size: var(--fs-14-5); font-weight: var(--weight-medium); }
.k-hb-tick { inline-size: var(--hb-tick); block-size: var(--hb-tick); flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); font-size: var(--fs-12); font-weight: var(--weight-bold); color: var(--bg); cursor: pointer; }
.k-hb-tick[aria-pressed="true"] { background: var(--teal); box-shadow: none; }
.k-hb-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-6); text-align: center; }
/* one header line: the weekday initial beside the date (review A: the
   two-line header read as two rows) */
.k-hb-dayh { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding-block: var(--sp-6); border-radius: var(--r-8); color: var(--muted); white-space: nowrap; }
.k-hb-dnum { font-size: var(--fs-15); font-weight: var(--weight-semibold); color: var(--text-2); font-variant-numeric: tabular-nums; }
.k-hb-dayh[data-state~="today"] { background: var(--s2); color: var(--text); }
.k-hb-dayh[data-state~="today"] .k-hb-dnum { color: var(--text); }
.k-hb-dow { font-size: var(--fs-11); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: var(--weight-semibold); }
.k-hb-cell { block-size: var(--hb-cell-h); border-radius: var(--r-8); background: var(--s2); }
.k-hb-cell[data-state~="on"] { background: color-mix(in oklch, var(--teal) 35%, transparent); }
.k-hb-cell[data-state~="today"] { box-shadow: inset 0 0 0 var(--ring-1-5) var(--text-2); }
.k-hb-cell[data-state~="today"][data-state~="on"] { background: color-mix(in oklch, var(--teal) 60%, transparent); }
.k-hb-cell[data-state~="future"] { background: none; box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-hb-streak { font-size: var(--fs-13); color: var(--muted); }
.k-hb-streak b { font-weight: var(--weight-semibold); color: var(--teal); }
.k-hb-del { opacity: 0; }
.k-hb-row:hover .k-hb-del, .k-hb-del:focus-visible { opacity: 1; }
.k-hb-hint { margin: var(--sp-8) 0 0; font-size: var(--fs-12-5); line-height: var(--lh-body); color: var(--muted); }
.k-hb-add { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-8) var(--sp-4) 0; border-block-start: var(--hairline) solid var(--line); }
.k-hb-add-go { display: inline-grid; place-items: center; line-height: 1; inline-size: var(--hb-tick); flex: 0 0 auto; padding: 0; border: 0; background: none; color: var(--crimson); font-size: var(--fs-16); cursor: pointer; }
.k-hb-add-in { flex: 1 1 auto; min-inline-size: 0; padding: var(--sp-6) 0; border: 0; background: none; font: inherit; font-size: var(--fs-14); color: var(--text); }
.k-hb-add-in::placeholder { color: var(--muted); }
.k-hb-add-in:focus { outline: none; }

.k-hb-dir { 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); }
.k-hb-dir-tick { inline-size: var(--dir-tick); block-size: var(--dir-tick); flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; 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); cursor: pointer; }
.k-hb-dir-tick[aria-pressed="true"] { background: var(--teal); box-shadow: none; }
.k-hb-dir-go { flex: 1 1 auto; min-inline-size: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-hb-dir-go:hover { color: var(--crimson-soft); }
.k-hb-dir[data-state~="done"] .k-hb-dir-go { color: var(--muted); text-decoration: line-through; }
.k-hb-reward { flex: 0 0 auto; font-size: var(--fs-11-5); color: var(--amber); white-space: nowrap; }
.k-hb-heat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); grid-auto-flow: column; gap: var(--sp-4); block-size: var(--hb-heat-h); margin-block-start: var(--sp-12); }
.k-hb-heat-cell { border-radius: var(--r-2); background: color-mix(in oklch, var(--teal) calc(var(--lvl, 0%) * 0.85 + 15%), transparent); }
.k-hb-heat-cell[data-state~="future"] { background: none; }
.k-hb-dir-sum, .k-hb-heat-dows, .k-hb-heat-months { display: none; }
.k-hb-dir-sum { align-items: center; gap: var(--sp-12); inline-size: 100%; min-block-size: var(--hit-coarse); padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-hb-dir-sum-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.k-hb-dir-sum-t > b { font-size: var(--fs-15); font-weight: var(--weight-medium); }
.k-hb-dir-sum-m { font-size: var(--fs-12); color: var(--muted); }
.k-hb-dir-sum-go { color: var(--muted); }
.k-msheet-slot > .k-hb-dir-list { display: flex; flex-direction: column; }

/* ================= Calendar (frame 10e) ================= */
/* one hue per record, from --ev-hue (invariant 46): the type sets it, a
   chosen colour overrides it, and every mark reads it */
[data-type="exam"] { --ev-hue: var(--cal-clay); }
[data-type="deadline"] { --ev-hue: var(--cal-brass); }
[data-type="study"] { --ev-hue: var(--cal-jade); }
[data-type="lesson"] { --ev-hue: var(--cal-iris); }
[data-type="personal"] { --ev-hue: var(--cal-plum); }
[data-type="assignment"] { --ev-hue: var(--cal-brass); }
[data-type="reminder"] { --ev-hue: var(--cal-sky); }
[data-colour="iris"] { --ev-hue: var(--cal-iris); }
[data-colour="brass"] { --ev-hue: var(--cal-brass); }
[data-colour="sage"] { --ev-hue: var(--cal-sage); }
[data-colour="clay"] { --ev-hue: var(--cal-clay); }
[data-colour="sky"] { --ev-hue: var(--cal-sky); }
[data-colour="plum"] { --ev-hue: var(--cal-plum); }
[data-colour="jade"] { --ev-hue: var(--cal-jade); }
[data-colour="slate"] { --ev-hue: var(--cal-slate); }

.k-cal-head { display: flex; align-items: center; gap: var(--sp-14); flex-wrap: wrap; }
.k-cal-title { margin: 0; font-size: var(--fs-32); font-weight: var(--weight-semibold); letter-spacing: var(--track-h1); }
.k-cal-step { --cluster-gap: var(--sp-6); }
.k-cal { display: grid; grid-template-columns: minmax(0, 1fr) var(--cal-side-w); gap: var(--sp-20); align-items: start; }
.k-cal-side { display: flex; flex-direction: column; gap: var(--sp-20); min-inline-size: 0; }
.k-cal-board { display: flex; flex-direction: column; padding: var(--sp-10) var(--sp-12) var(--sp-12); min-inline-size: 0; }
.k-cal-dows { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: var(--sp-6) var(--sp-4) var(--sp-8); font-size: var(--fs-11); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.k-cal-dows > span { padding-inline-start: var(--sp-8); }
.k-cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(var(--weeks, 5), minmax(var(--cal-cell-h), auto)); gap: var(--sp-4); }
.k-cal-cell { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; padding: var(--sp-7); border-radius: var(--r-14); background: var(--s2); overflow: hidden; cursor: pointer; }
.k-cal-cell[data-state~="other"] { background: none; }
.k-cal-cell[data-state~="other"] .k-cal-daynum { color: var(--line); }
/* a neighbouring month's day keeps its items, greyed with it (review A) */
.k-cal-cell[data-state~="other"] .k-cal-stack { opacity: 0.4; filter: saturate(0.3); }
.k-cal-cell[data-state~="other"]:hover .k-cal-stack, .k-cal-cell[data-state~="other"]:focus-within .k-cal-stack { opacity: 0.75; }
.k-cal-cell[data-state~="today"] { background: color-mix(in oklch, var(--crimson) 12%, transparent); box-shadow: inset 0 0 0 var(--ring-1-5) color-mix(in oklch, var(--crimson) 60%, transparent); }
.k-cal-cell[data-state~="today"] .k-cal-daynum { color: var(--crimson); font-weight: var(--weight-semibold); }
.k-cal-cell-h { display: flex; align-items: center; }
.k-cal-daynum { font-size: var(--fs-12); }
.k-cal-add { margin-inline-start: auto; inline-size: var(--hit-dense); block-size: var(--hit-dense); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: var(--fs-14); opacity: 0; cursor: pointer; }
.k-cal-cell:hover .k-cal-add, .k-cal-add:focus-visible { opacity: 1; }
.k-cal-add:hover { background: var(--s3); color: var(--text); }
.k-cal-stack { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }

/* The chip is the one documented 24px exception to the 32px hit floor
   (invariant 69): a month cell cannot give each chip 44px — 44px per chip
   would show one title per day — so chips stay 24px tall with 2px of
   spacing, and every chip also opens from the day sheet's full-size rows. */
.k-ev { display: flex; align-items: center; gap: var(--sp-4); min-inline-size: 0; min-block-size: var(--hit-dense); padding: var(--sp-2) var(--sp-6); border: 0; border-radius: var(--r-6); background: color-mix(in oklch, oklch(var(--cal-l) var(--cal-c) var(--ev-hue)) 16%, transparent); font: inherit; font-size: var(--fs-11); color: var(--text); text-align: start; cursor: pointer; }
.k-ev:hover { background: color-mix(in oklch, oklch(var(--cal-l) var(--cal-c) var(--ev-hue)) 26%, transparent); }
.k-ev[data-type="exam"] { background: color-mix(in oklch, oklch(var(--cal-l) var(--cal-c) var(--ev-hue)) 28%, transparent); }
.k-ev-dot { inline-size: var(--cal-dot); block-size: var(--cal-dot); flex: 0 0 auto; border-radius: 50%; background: oklch(var(--cal-l) var(--cal-c) var(--ev-hue)); }
.k-ev-time { flex: 0 0 auto; font-size: var(--fs-11); color: var(--text-2); }
.k-cal-month .k-ev-time { display: none; }
.k-ev-t { flex: 1 1 auto; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-ev-mark { flex: 0 0 auto; color: var(--muted); }
.k-ev[data-state~="overdue"] .k-ev-t { color: var(--alarm); }
.k-ev[data-state~="handed-in"] .k-ev-t { color: var(--muted); text-decoration: line-through; }
/* 27p: a derived chip (Money, Goals) is outlined, never filled, so it never
   looks like something you scheduled; its source glyph leads */
.k-ev--derived { --ev-hue: var(--cal-slate); background: color-mix(in oklch, oklch(var(--cal-l) var(--cal-c) var(--ev-hue)) 8%, transparent); box-shadow: inset 0 0 0 var(--hairline) oklch(var(--cal-l) var(--cal-c) var(--ev-hue)); }
.k-ev--derived[data-kind="goal"], .k-ev--derived[data-kind="startby"] { background: color-mix(in oklch, var(--text-2) 8%, transparent); box-shadow: inset 0 0 0 var(--hairline) var(--text-2); }
.k-ev-glyph { flex: 0 0 auto; font: var(--weight-semibold) var(--fs-11) var(--font-kanji); color: oklch(var(--cal-l) var(--cal-c) var(--ev-hue)); }
.k-ev--derived[data-kind="goal"] .k-ev-glyph, .k-ev--derived[data-kind="startby"] .k-ev-glyph { color: var(--text-2); }
.k-ev--derived[data-state~="skipped"] .k-ev-t { color: var(--muted); text-decoration: line-through; }
.k-cal-toggle { cursor: pointer; }
.k-cal-toggle-t { flex: 1 1 auto; font-size: var(--fs-13); }
.k-cal-show { inline-size: var(--menu-w-wide); }
.k-cal-show .k-cal-toggle { padding-inline: var(--sp-12); }
.k-cal-show .k-cal-toggle > .k-kanji { inline-size: var(--sp-16); text-align: center; }
.k-cal-show .k-menu-heading + .k-cal-toggle { border-block-start: 0; }
.k-cal-derived-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-10); }
.k-cal-more { align-self: flex-start; min-block-size: var(--hit-dense); padding: 0 var(--sp-6); border: 0; background: none; font: inherit; font-size: var(--fs-11); color: var(--muted); cursor: pointer; }
.k-cal-more:hover { color: var(--text); }

.k-cal-legend { display: flex; flex-wrap: wrap; gap: var(--sp-14); padding: var(--sp-10) var(--sp-6) 0; font-size: var(--fs-11-5); color: var(--muted); }
.k-cal-key { display: inline-flex; align-items: center; gap: var(--sp-6); }
.k-cal-key::before { content: ""; inline-size: var(--cal-key-dot); block-size: var(--cal-key-dot); border-radius: 50%; background: oklch(var(--cal-l) var(--cal-c) var(--ev-hue)); }

/* rows: Today, the day sheet and the countdowns share one row grammar */
.k-cal-today-date { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.k-cal-side .k-card > .k-card-title { margin-block: var(--sp-2) var(--sp-8); font-size: var(--fs-16); }
.k-cal-row { display: flex; gap: var(--sp-12); inline-size: 100%; padding: var(--sp-9) 0; border: 0; border-block-start: var(--hairline) solid var(--line); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-cal-row:hover .k-cal-row-t { color: var(--crimson-soft); }
.k-cal-row-bar { inline-size: var(--cal-row-bar-w); flex: 0 0 auto; border-radius: var(--cal-row-bar-w); background: oklch(var(--cal-l) var(--cal-c) var(--ev-hue)); }
.k-cal-row-body { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.k-cal-row-t { font-size: var(--fs-13-5); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-cal-row-m { font-size: var(--fs-11-5); color: var(--muted); }
.k-cal-cd-row { display: flex; align-items: center; gap: var(--sp-12); inline-size: 100%; padding: var(--sp-8) 0; border: 0; border-block-start: var(--hairline) solid var(--line); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-cal-cd-row:hover .k-cal-row-t { color: var(--crimson-soft); }
.k-cal-cd-days { inline-size: var(--cal-cd-days-w); flex: 0 0 auto; font-size: var(--fs-20); font-weight: var(--weight-semibold); }
.k-cal-cd-days > span { font-size: var(--fs-11); color: var(--muted); }
.k-cal-cd-row[data-state~="hot"] .k-cal-cd-days { color: var(--crimson); }
.k-cal-cd-body { display: flex; flex-direction: column; min-inline-size: 0; }
.k-cal-cd-empty { margin: 0; font-size: var(--fs-12-5); }

/* the week: a gutter and seven columns; geometry in hours (--at, --span) */
.k-cal-week { display: flex; flex-direction: column; min-inline-size: 0; }
.k-cw-row { display: grid; grid-template-columns: var(--cal-gutter-w) repeat(7, minmax(0, 1fr)); gap: var(--sp-4); }
.k-cw-gutter { font-size: var(--fs-11); color: var(--muted); text-align: end; padding-inline-end: var(--sp-6); }
.k-cw-day { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) 0; border: 0; border-radius: var(--r-12); background: none; font: inherit; color: var(--muted); cursor: pointer; }
.k-cw-day:hover { background: var(--s2); color: var(--text); }
.k-cw-day[data-state~="today"] { color: var(--crimson); }
.k-cw-dow { font-size: var(--fs-11); letter-spacing: var(--track-label); text-transform: uppercase; }
.k-cw-num { font-size: var(--fs-15); }
.k-cw-band { padding-block: var(--sp-6); border-block-end: var(--hairline) solid var(--line); }
.k-cw-band .k-cw-gutter { align-self: center; }
.k-cw-band-col { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; min-block-size: var(--hit-dense); }
.k-cw-body { padding-block-start: var(--sp-6); max-block-size: calc(var(--cal-hour-h) * 11); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* the header, all-day band and body share one column grid, so all three
   reserve the body's scrollbar gutter */
.k-cal-week > .k-cw-row { scrollbar-gutter: stable; }
.k-cal-week > .k-cw-row:not(.k-cw-body) { overflow-y: hidden; }
.k-cw-hours { display: flex; flex-direction: column; }
.k-cw-hour { block-size: var(--cal-hour-h); flex: 0 0 auto; transform: translateY(calc(var(--sp-6) * -1)); }
.k-cw-col { position: relative; block-size: calc(var(--hours) * var(--cal-hour-h)); border-radius: var(--r-8); background: repeating-linear-gradient(to bottom, var(--s2) 0 var(--hairline), transparent var(--hairline) var(--cal-hour-h)); cursor: pointer; }
.k-cw-col[data-state~="today"] { background-color: color-mix(in oklch, var(--crimson) 6%, transparent); }
.k-cw-col > .k-ev { position: absolute; inset-block-start: calc(var(--at) * var(--cal-hour-h)); block-size: calc(var(--span) * var(--cal-hour-h) - var(--sp-2)); inset-inline-start: calc(var(--lane) * 100% / var(--lanes) + var(--sp-2)); inline-size: calc(100% / var(--lanes) - var(--sp-4)); align-items: flex-start; overflow: hidden; }
.k-cw-now { position: absolute; inset-inline: 0; inset-block-start: calc(var(--at) * var(--cal-hour-h)); block-size: var(--ring-1-5); background: var(--crimson); pointer-events: none; }

/* frame 15g: the phone Calendar — Agenda/Month, a strip or a dot grid,
   then the chosen day's list. The pick is filled, today is crimson. */
.k-cal-phone { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cal-modes { flex: 1 1 100%; }
.k-cal-period { display: flex; align-items: center; gap: var(--sp-6); }
.k-cal-period-t { flex: 1 1 auto; margin: 0; font-size: var(--fs-18); font-weight: var(--weight-semibold); }
.k-cal-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-4); }
.k-cal-sday, .k-cal-mday { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-inline-size: 0; padding: 0; border: 0; font: inherit; color: var(--text); cursor: pointer; }
.k-cal-sday { block-size: var(--cal-sday-h); border-radius: var(--r-14); background: var(--s1); }
.k-cal-sday-dow { font-size: var(--fs-11); color: var(--muted); }
.k-cal-sday-num { font-size: var(--fs-17); font-weight: var(--weight-semibold); }
.k-cal-sday[data-state~="today"] { color: var(--crimson); }
.k-cal-sday[aria-pressed="true"] { background: var(--crimson); color: var(--bg); }
.k-cal-sday[aria-pressed="true"] > .k-cal-sday-dow { color: inherit; }
.k-cal-dots { display: flex; justify-content: center; gap: var(--sp-2); min-block-size: var(--cal-dot); }
.k-cal-dot { inline-size: var(--cal-dot); block-size: var(--cal-dot); border-radius: 50%; background: oklch(var(--cal-l) var(--cal-c) var(--ev-hue)); }
.k-cal-sday[aria-pressed="true"] .k-cal-dot { background: var(--bg); }
.k-cal-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: var(--sp-2); }
.k-cal-mgrid-dow { padding-block-end: var(--sp-6); font-size: var(--fs-11); color: var(--muted); text-align: center; }
.k-cal-mday { block-size: var(--cal-mday-h); border-block-start: var(--hairline) solid var(--line); background: none; }
.k-cal-mday-num { display: grid; place-items: center; inline-size: var(--cal-mday-num); block-size: var(--cal-mday-num); border-radius: 50%; font-size: var(--fs-14); }
.k-cal-mday[data-state~="other"] { color: var(--muted); }
.k-cal-mday[data-state~="other"] .k-cal-dots { opacity: 0.5; }
.k-cal-mday[data-state~="today"] > .k-cal-mday-num { color: var(--crimson); font-weight: var(--weight-semibold); }
.k-cal-mday[aria-pressed="true"] > .k-cal-mday-num { background: var(--crimson); color: var(--bg); font-weight: var(--weight-semibold); }
.k-cal-phone > .k-cal-legend { padding: 0; gap: var(--sp-6) var(--sp-12); }
.k-cal-days { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cal-dcard { display: flex; flex-direction: column; padding: var(--sp-14) var(--sp-16) var(--sp-6); }
.k-cal-dcard-h { display: flex; align-items: center; gap: var(--sp-8); margin: 0 0 var(--sp-8); font-size: var(--fs-16); font-weight: var(--weight-semibold); }
.k-cal-dcard-h > .k-chip { --chip-c: var(--crimson); }
.k-cal-dcard > .k-cal-cd-empty { padding-block: var(--sp-4) var(--sp-10); }
.k-cal-arow { display: grid; grid-template-columns: var(--cal-when-w) auto minmax(0, 1fr); gap: var(--sp-12); align-items: stretch; inline-size: 100%; min-block-size: var(--hit-coarse); padding: var(--sp-10) 0; border: 0; border-block-start: var(--hairline) solid var(--line); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-cal-arow-when { align-self: center; font-size: var(--fs-11); color: var(--muted); }
.k-cal-arow[data-state~="overdue"] .k-cal-row-t { color: var(--alarm); }
.k-cal-arow .k-cal-row-t { font-size: var(--fs-15); white-space: normal; }
.k-cal-arow .k-cal-row-m { font-size: var(--fs-12); }

/* the dialogs */
.k-cal-dialog[data-state~="wide"] { inline-size: min(var(--dialog-w-lg), 100%); }
.k-cal-dialog-t { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.k-cal-dialog-t > .k-kicker { color: oklch(var(--cal-l) var(--cal-c) var(--ev-hue, var(--cal-slate))); }
.k-cal-detail { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cal-swatch-bar { block-size: var(--sp-4); border-radius: var(--sp-4); background: oklch(var(--cal-l) var(--cal-c) var(--ev-hue)); }
.k-cal-kvs { display: flex; flex-direction: column; margin: 0; }
.k-cal-kv { display: grid; grid-template-columns: var(--cal-kv-w) minmax(0, 1fr); gap: var(--sp-12); padding-block: var(--sp-8); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
.k-cal-kv > dt { color: var(--muted); }
.k-cal-kv > dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.k-cal-desc { margin: 0; font-size: var(--fs-13-5); line-height: var(--lh-body); white-space: pre-wrap; }
.k-cal-foot > .k-btn--danger:first-child { margin-inline-end: auto; }
.k-cal-form { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-cal-sec { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-cal-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
.k-cal-fgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-cal-fgrid[data-state~="allday"] > .k-field:not(:first-child) { opacity: 0.5; }
.k-cal-span { grid-column: 1 / -1; }
.k-cal-swatches { --cluster-gap: var(--sp-6); min-block-size: var(--hit); }
.k-cal-swatch { inline-size: var(--hit-dense); block-size: var(--hit-dense); padding: 0; border: 0; border-radius: 50%; background: oklch(var(--cal-l) var(--cal-c) var(--ev-hue)); cursor: pointer; }
.k-cal-swatch[data-state~="auto"] { background: none; box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); }
.k-cal-swatch[aria-pressed="true"] { outline: var(--focus-width) solid var(--text); outline-offset: var(--focus-offset); }
.k-cal-disc { border-block-start: var(--hairline) solid var(--line); }
.k-cal-disc-h { display: flex; align-items: baseline; gap: var(--sp-8); inline-size: 100%; padding: var(--sp-10) 0; border: 0; background: none; font: inherit; color: var(--text); text-align: start; cursor: pointer; }
.k-cal-disc-caret { display: inline-block; color: var(--muted); transition: transform var(--dur-fast) var(--ease); }
.k-cal-disc[data-state~="open"] .k-cal-disc-caret { transform: rotate(90deg); }
.k-cal-disc-hint { font-size: var(--fs-12); color: var(--muted); }
.k-cal-disc:not([data-state~="open"]) > .k-cal-disc-body { display: none; }
.k-cal-disc-body { padding-block-end: var(--sp-12); }
.k-cal-errs { padding: var(--sp-10) var(--sp-14); border-radius: var(--r-12); background: var(--wash-red); color: var(--red-soft); font-size: var(--fs-13); }
.k-cal-errs[hidden] { display: none; }
.k-cal-errs > p { margin: 0; }
.k-cal-form .k-input[data-state~="bad"] { box-shadow: inset 0 0 0 var(--ring-1-5) var(--red); }
.k-cal-form .k-check[hidden] { display: none; }

/* ================= Pacing (frames 10f, 10g) ================= */
.k-pace { display: flex; flex-direction: column; gap: var(--sp-20); }
.k-pace-ribbon { display: flex; gap: var(--sp-6); align-items: stretch; }
.k-pace-wk { flex: 1 0 var(--pace-wk-w); display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-10); border: 0; border-radius: var(--r-14); background: var(--s1); font: inherit; color: var(--muted); text-align: start; cursor: pointer; }
.k-pace-wk:hover { background: var(--s2); }
.k-pace-wk[aria-current="true"] { background: var(--text); color: var(--bg); }
.k-pace-wk[data-state~="is-now"]:not([aria-current]) { box-shadow: inset 0 0 0 var(--hairline) var(--crimson); }
.k-pace-wk[data-state~="is-break"] { flex-grow: 0.6; background: repeating-linear-gradient(135deg, var(--s1) 0 var(--sp-6), var(--bg) var(--sp-6) var(--sp-12)); }
.k-pace-wk--add { flex: 0 0 auto; justify-content: center; color: var(--text-2); box-shadow: inset 0 0 0 var(--hairline) var(--line); background: none; }
.k-pace-wk-d { font-size: var(--fs-11); white-space: nowrap; }
.k-pace-wk-n { font-size: var(--fs-11); opacity: 0.8; }
.k-pace-wk-segs { display: flex; gap: var(--sp-2); margin-block-start: auto; }
.k-pace-wk-seg { flex: 1 1 0; block-size: var(--pace-seg-h); border-radius: var(--sp-2); background: var(--s2); }
.k-pace-wk-seg[data-state~="done"] { background: var(--green); }
.k-pace-wk-seg[data-state~="missed"] { background: var(--red); }
.k-pace-wk[aria-current="true"] .k-pace-wk-seg { background: color-mix(in oklch, var(--bg) 25%, var(--text)); }
.k-pace-wk[aria-current="true"] .k-pace-wk-seg[data-state~="done"] { background: var(--green); }

/* the banner (10f): kicker, the one figure as the title with the week's
   actions beside it, the rule as the sub-line; ticks and "behind" right */
.k-pace-hero { display: flex; align-items: center; gap: var(--sp-24); padding: var(--sp-20) var(--sp-24); border-radius: var(--r-24); background: var(--s1); }
.k-pace-hero[data-state~="behind"] { background: linear-gradient(120deg, var(--pace-wash), var(--s1) 55%); }
.k-pace-hero-main { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.k-pace-hero-main > .k-kicker { margin: 0; }
.k-pace-hero .k-sectionhead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); margin: 0; }
.k-pace-hero .k-sectionhead h2 { margin: 0; font-size: var(--fs-22); }
.k-pace-hero-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-12); }
.k-pace-hero-stat { display: flex; align-items: center; gap: var(--sp-16); }
.k-pace-hero-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-8); }
.k-pace-hero-segs { display: flex; gap: var(--sp-3); inline-size: var(--pace-hero-segs-w); }
.k-pace-hero-seg { flex: 1 1 0; block-size: var(--pace-hero-seg-h); border-radius: var(--sp-4); background: var(--s2); }
.k-pace-hero-seg[data-state~="done"] { background: var(--green); }

/* three subject columns of one height (review B: they did not line up) */
.k-pace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-20); align-items: stretch; }
.k-pace-col { display: flex; flex-direction: column; background: linear-gradient(color-mix(in oklch, var(--pace-hue) 10%, var(--s1)), var(--s1) 34%); padding: var(--sp-18) var(--sp-20); }
.k-pace-col-h { display: flex; align-items: center; gap: var(--sp-10); margin: 0 0 var(--sp-8); font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-pace-col-dot { inline-size: var(--pace-dot); block-size: var(--pace-dot); flex: 0 0 auto; border-radius: 50%; background: var(--pace-hue); }
.k-pace-col-n { margin-inline-start: auto; font-size: var(--fs-12); font-weight: var(--weight-regular); color: var(--muted); }
.k-pace-reg { display: flex; flex-direction: column; }
.k-pace-reg + .k-pace-reg { margin-block-start: var(--sp-14); }
.k-pace-reg-k { margin: 0 0 var(--sp-4); padding-block-end: var(--sp-6); border-block-end: var(--hairline) solid var(--line); }
.k-pace-reg-k[data-state~="hued"] { color: var(--pace-hue); }
.k-pace-none { margin: 0; padding-block: var(--sp-8); font-size: var(--fs-12-5); color: var(--muted); }

/* one row: the circular tick, the title over its refs, a carried chip */
.k-pace-plan { display: flex; align-items: center; gap: var(--sp-8); }
.k-pace-plan + .k-pace-plan { border-block-start: var(--hairline) solid var(--line); }
.k-pace-row-btn { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-10) 0; border: 0; background: none; box-shadow: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-pace-row-btn:hover { background: none; }
.k-pace-row-btn:hover .k-pace-row-title { color: var(--crimson-soft); }
.k-pace-row-title { font-size: var(--fs-14); font-weight: var(--weight-medium); line-height: var(--lh-snug); }
.k-pace-row-t { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; min-inline-size: 0; }
.k-pace-row-t > b { font-size: var(--fs-13-5); font-weight: var(--weight-medium); line-height: var(--lh-snug); }
.k-pace-row-m { font-family: var(--font-mono); font-size: var(--fs-11-5); color: var(--muted); }
.k-pace-plan[data-state~="is-done"] .k-pace-row-title { color: var(--muted); text-decoration: line-through; }
.k-pace-carry { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.k-pace-move { font-size: var(--fs-11-5); opacity: 0; }
.k-pace-carried-from { display: none; }
.k-pace-plan:hover .k-pace-move, .k-pace-move:focus-visible { opacity: 1; }
.k-pace-tick { display: grid; place-items: center; min-inline-size: var(--hit-dense); min-block-size: var(--hit); cursor: pointer; }
.k-pace-tick-in { appearance: none; -webkit-appearance: none; inline-size: var(--pace-tick); block-size: var(--pace-tick); margin: 0; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); cursor: pointer; }
.k-pace-tick-in::after { content: "✓"; font-size: var(--fs-11); font-weight: var(--weight-bold); color: var(--bg); opacity: 0; }
.k-pace-tick-in:checked { background: var(--teal); box-shadow: none; }
.k-pace-tick-in:checked::after { opacity: 1; }
.k-pace-tick-in:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.k-pace-cls + .k-pace-plan, .k-pace-plan + .k-pace-cls, .k-pace-cls + .k-pace-cls { border-block-start: var(--hairline) solid var(--line); }
.k-pace-cls-head { padding-block: var(--sp-10) var(--sp-2); }
.k-pace-cls-lessons { margin: 0; padding: 0 0 var(--sp-6); list-style: none; }
.k-pace-cls-lessons > .k-pace-lesson-row + .k-pace-lesson-row { border-block-start: 0; }
.k-pace-lesson-row .k-pace-tick { min-block-size: var(--hit-dense); }
.k-pace-lesson-t { flex: 1 1 auto; min-inline-size: 0; font-size: var(--fs-13-5); line-height: var(--lh-snug); color: var(--text-2); }
.k-pace-lesson-row[data-state~="is-done"] .k-pace-lesson-t { color: var(--muted); text-decoration: line-through; }
.k-pace-lesson-row[data-state~="is-assess"] .k-pace-lesson-t { color: var(--amber); font-weight: var(--weight-medium); }
.k-pace-lesson-row[data-state~="is-nea"] .k-pace-lesson-t { color: var(--bloom); }
/* the lesson's day — from the class timetable unless moved */
.k-pace-lesson-day { flex: 0 0 auto; inline-size: auto; min-block-size: var(--hit-dense); padding-block: 0; padding-inline-start: var(--sp-8); font-size: var(--fs-12); color: var(--muted); }
.k-pace-lesson-day[data-state~="moved"] { color: var(--text); }
/* the Class days dialog: one subject per row */
.k-pace-tt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap; padding-block: var(--sp-8); border-block-start: var(--hairline) solid var(--line); }
.k-pace-tt-subj { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); }
.k-pace-tt-subj::before { content: ""; inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--pace-hue, var(--muted)); }
.k-pace-cls[data-state~="is-done"] .k-pace-cls-head .k-pace-row-title { color: var(--muted); }
.k-pace-lessons { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.k-pace-lesson { display: flex; gap: var(--sp-8); font-size: var(--fs-13); color: var(--text-2); }
.k-pace-lesson-n { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-11-5); }

/* the foot: Due this week and the week's note, always two cards */
.k-pace-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-20); align-items: stretch; }
.k-pace-due { display: flex; align-items: center; gap: var(--sp-10); inline-size: 100%; padding: var(--sp-9) 0; border: 0; border-block-start: var(--hairline) solid var(--line); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-pace-due-bar { inline-size: var(--cal-row-bar-w); block-size: var(--hit); flex: 0 0 auto; border-radius: var(--cal-row-bar-w); background: var(--pace-hue, var(--amber)); }
.k-pace-due[data-state~="is-done"] b { color: var(--muted); text-decoration: line-through; }
.k-pace-note-in { inline-size: 100%; margin-block-start: var(--sp-8); padding: 0; border: 0; background: none; box-shadow: none; resize: vertical; font: inherit; font-size: var(--fs-13-5); line-height: var(--lh-body); color: var(--text-2); }
.k-pace-note-in:focus { outline: none; color: var(--text); }
.k-pace-note-in::placeholder { color: var(--muted); }

.k-pace-dlg { inline-size: min(var(--dialog-w-lg), 100%); }
.k-pace-dlg-body { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-pace-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }
.k-pace-dlg .k-field[hidden] { display: none; }
.k-pace-dlg-sec { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-pace-dlg-h { margin: 0; }
.k-pace-dlg-refs { display: flex; flex-direction: column; }
.k-pace-dlg-ref { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-8) 0; border: 0; border-block-start: var(--hairline) solid var(--line); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-pace-dlg-ref-t { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; font-size: var(--fs-13); }
.k-pace-dlg-danger { display: flex; justify-content: flex-start; margin-block-start: var(--sp-12); padding-block-start: var(--sp-12); border-block-start: var(--hairline) solid var(--line); }

/* the braid (10g): one subject, two lines and the arcs between them */
.k-pace-subj .k-seg-item { display: inline-flex; align-items: center; gap: var(--sp-6); }
.k-pace-braid-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-8) var(--sp-24); margin-block-end: var(--sp-8); }
.k-pace-braid-head > .k-card-title { margin: 0; max-inline-size: var(--pace-braid-title-w); }
.k-pace-braid-sub { margin: 0; font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-snug); }
.k-pace-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-6) var(--sp-16); font-size: var(--fs-11-5); color: var(--muted); }
.k-pace-key { display: inline-flex; align-items: center; gap: var(--sp-6); }
.k-pace-key::before { content: ""; inline-size: var(--sp-14); block-size: var(--ring-1-5); border-radius: var(--ring-1-5); background: var(--tone); }
.k-pace-key[data-tone="open"]::before { display: none; }
.k-pace-key[data-tone="open"] { color: var(--crimson); }
[data-tone="ahead"] { --tone: var(--teal); }
[data-tone="same"] { --tone: var(--green); }
[data-tone="behind"] { --tone: oklch(var(--cal-l) var(--cal-c) var(--cal-iris)); }
.k-pace-braid-frame { display: grid; grid-template-columns: var(--pace-keycol-w) minmax(0, 1fr); align-items: start; }
.k-braid { display: block; max-inline-size: none; font-family: var(--font-ui); }
.k-pace-braid-wrap { align-items: flex-start; }
.k-pace-braid-wrap > .k-scroller-arrow { align-self: center; }
.k-braid-hit { fill: transparent; cursor: pointer; }
.k-braid-hit:hover { fill: var(--s2); }
.k-braid-wk { font-size: var(--fs-11); font-weight: var(--weight-medium); fill: var(--text-2); }
.k-braid-wk--now { font-weight: var(--weight-bold); fill: var(--crimson); }
.k-braid-date { font-size: var(--fs-11); fill: var(--muted); }
.k-braid-now { stroke: var(--crimson); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.5; }
.k-braid-band { fill: var(--s2); opacity: 0.35; }
.k-braid-band--alt { opacity: 0.6; }
.k-braid-name { font-size: var(--fs-11); font-weight: var(--weight-bold); fill: var(--text); }
.k-braid-rule { fill: var(--lane-hue); }
.k-braid-lab { font-size: var(--fs-11); fill: var(--muted); }
.k-braid-spine { stroke: var(--lane-hue); stroke-width: 2; opacity: 0.55; }
.k-braid-mine { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.k-braid-link { fill: none; stroke: var(--tone); stroke-width: var(--w, 1.5); stroke-linecap: round; opacity: 0.85; }
.k-braid-link:hover { opacity: 1; }
.k-braid-tip { fill: var(--tone); opacity: 0.85; }
.k-braid-open { font-size: var(--fs-11); font-weight: var(--weight-semibold); fill: var(--crimson); }
.k-braid-node { fill: var(--lane-hue); stroke: var(--s1); stroke-width: 2; }
.k-braid-node--mine { fill: var(--s1); stroke: var(--lane-hue); }

/* the merges: the design's five columns */
.k-pace-merge { display: grid; grid-template-columns: var(--pace-merge-ref-w) minmax(0, 1.1fr) minmax(0, 1.2fr) var(--pace-merge-tone-w) auto; gap: var(--sp-16); align-items: center; inline-size: 100%; padding: var(--sp-10) 0; border: 0; border-block-start: var(--hairline) solid var(--line); background: none; box-shadow: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-pace-merge:hover { background: none; }
.k-pace-merge:hover .k-pace-merge-t { color: var(--crimson-soft); }
.k-pace-merge-ref { font-size: var(--fs-12); font-weight: var(--weight-semibold); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-pace-merges .k-card-meta { margin-inline-start: auto; }
.k-pace-merge-t { font-size: var(--fs-13-5); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
.k-pace-merge-when { font-size: var(--fs-13); color: var(--text-2); }
.k-pace-merge-tone { justify-self: stretch; --chip-c: var(--tone); }
.k-pace-merge-open { font-size: var(--fs-13); color: var(--muted); white-space: nowrap; }

/* ---------- the five tiers, widest first ---------- */
@media (max-width: 1240px) {
.k-pace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cal { grid-template-columns: minmax(0, 1fr); }
.k-cal-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.k-hb { grid-template-columns: minmax(0, 1fr); }
.k-hb-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-rem { grid-template-columns: var(--rem-side-w) minmax(0, 1fr); }
.k-rem-insp { grid-column: 2; position: static; }
.k-fx-setup { grid-template-columns: minmax(0, 1fr); }
.k-fx-side { flex-direction: row; }
.k-fx-side > * { flex: 1 1 0; }
}

@media (max-width: 1080px) {
.k-pace-merge { grid-template-columns: var(--pace-merge-ref-w) minmax(0, 1fr) minmax(0, 1fr) auto; }
.k-pace-merge-open { display: none; }
.k-fx-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.k-fx-form { justify-self: stretch; }
}

@media (max-width: 860px) {
.k-pace-grid, .k-pace-foot { grid-template-columns: minmax(0, 1fr); }
.k-pace-braid-head { grid-template-columns: minmax(0, 1fr); }
.k-pace-legend { justify-content: flex-start; }
.k-pace-merge { grid-template-columns: var(--pace-merge-ref-w) minmax(0, 1fr) auto; row-gap: var(--sp-2); }
.k-pace-merge-when { grid-column: 2; grid-row: 2; }
.k-pace-hero { flex-direction: column; align-items: stretch; }
.k-pace-hero-segs { flex: 1 1 auto; inline-size: auto; }
.k-pace-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cal-side { grid-template-columns: minmax(0, 1fr); }
.k-cal-month { grid-template-rows: repeat(var(--weeks, 5), minmax(var(--cal-cell-h), auto)); }
.k-hb-side { grid-template-columns: minmax(0, 1fr); }
.k-rem { grid-template-columns: minmax(0, 1fr); }
.k-rem-insp { grid-column: auto; }
:root[data-shell="ready"] .k-rem > .k-rem-side { display: none; }
.k-fx-side { flex-direction: column; }
.k-fx-body { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; }
.k-fx-body > .k-fx-centre { order: -1; }
.k-fx-left { align-items: center; text-align: center; }
.k-fx-ctx > .k-cluster { justify-content: center; }
.k-fx-row { grid-template-columns: var(--fx-row-bar-w) minmax(0, 1fr) var(--fx-dur-w); }
.k-fx-row > :first-child, .k-fx-row > .k-chip { display: none; }
}

@media (max-width: 700px) {
/* frame 15h: Reminders — the section switch over the list, lists/tags and
   sort as two sheet buttons, the detail as a tall sheet on tap */
.k-rem > .k-rem-insp { display: none; }
.k-msheet-slot > .k-rem-insp { position: static; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.k-msheet-slot > .k-rem-insp .k-rem-insp-head { display: none; }
.k-rem-secs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-rem-secs > .k-seg-item { justify-content: center; gap: var(--sp-4); padding-inline: var(--sp-4); }
.k-rem-secs .k-rem-n[data-tone="crimson"] { color: var(--alarm); }
.k-rem-secs > .k-seg-item[aria-pressed="true"] > .k-rem-n { color: inherit; }
.k-rem-tools { flex-wrap: nowrap; padding: 0; }
.k-rem-tools > .k-rem-filter { flex: 1 1 auto; justify-content: center; min-inline-size: 0; }
.k-rem-filter-wide, .k-rem-sortbox { display: none; }
.k-rem-filter-phone { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-rem-sortbtn { display: inline-flex; flex: 0 0 auto; }
.k-msheet-tools > .k-rem-completed { display: inline-flex; }
.k-rem-group--sections { display: none; }
.k-rem-quick-list { display: none; }
.k-rem-del { display: none; }
.k-rem-row { padding-inline: var(--sp-8) var(--sp-4); }
.k-rem-meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
/* Habits — each habit shows its week as seven squares under its name;
   today's directives become one row that opens its sheet */
.k-hb-cols { grid-template-columns: minmax(0, 1fr); }
.k-hb-cols > :not(:first-child) { display: none; }
.k-hb-title { flex-wrap: wrap; row-gap: var(--sp-6); }
.k-hb-weeknav { flex: 1 1 100%; justify-content: space-between; margin-inline-start: 0; }
.k-hb-row:not(.k-hb-cols) { grid-template-columns: var(--hb-tick) minmax(0, max-content) max-content minmax(0, 1fr) auto; column-gap: var(--sp-10); row-gap: var(--sp-6); padding-inline: 0; }
.k-hb-row:not(.k-hb-cols) > .k-hb-name { display: contents; }
.k-hb-row > .k-hb-name > .k-hb-tick { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.k-hb-row > .k-hb-name > .k-ellipsis { grid-column: 2; grid-row: 1; }
.k-hb-row:not(.k-hb-cols) > :nth-child(2) { grid-column: 2 / 5; grid-row: 2; }
.k-hb-row > .k-hb-streak { grid-column: 3; grid-row: 1; font-size: var(--fs-12); }
.k-hb-row:not(.k-hb-cols) > :nth-child(4) { grid-column: 5; grid-row: 1 / span 2; }
.k-hb-row .k-hb-days { grid-template-columns: repeat(7, var(--hb-sq)); gap: var(--sp-4); justify-content: start; }
.k-hb-row .k-hb-cell { block-size: var(--hb-sq); border-radius: var(--r-2); }
.k-hb-del { opacity: 1; color: var(--muted); }
.k-hb-dircard { order: 2; }
.k-hb-dir-sum { display: flex; }
.k-hb-dircard > .k-card-head, .k-hb-dircard > .k-hb-dir-list { display: none; }
.k-hb-heatwrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6) var(--sp-8); margin-block-start: var(--sp-12); }
.k-hb-heat { block-size: auto; margin: 0; grid-template-rows: repeat(7, auto); }
.k-hb-heat-cell { aspect-ratio: 1; }
.k-hb-heat-dows { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: var(--sp-4); font-size: var(--fs-11); color: var(--muted); }
.k-hb-heat-dows > span { display: flex; align-items: center; }
.k-hb-heat-months { grid-column: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: var(--fs-11); color: var(--muted); }
.k-hb-heat-months > span { grid-column: var(--col) / span 3; }
/* frame 15i: Pacing — a full-width Week/Braid switch, the week's add and
   edit in ⋯, a carried row naming its week with a 44px "→ here" under it,
   and a narrow pinned braid key (the subject switch names the subject) */
.k-pace-tabs { order: -1; flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-pace-tabs > * { justify-content: center; }
.k-pace-subj { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-pace-subj > .k-seg-item { justify-content: center; }
.k-msheet-tools > [data-phone-more] { justify-content: center; min-block-size: var(--hit-coarse); }
.k-pace-plan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--sp-8); }
.k-pace-carry { display: contents; }
.k-pace-carried-chip { grid-column: 2; grid-row: 2; justify-self: start; margin-block: calc(-1 * var(--sp-6)) var(--sp-10); white-space: normal; }
.k-pace-carried-from { display: inline; }
.k-pace-move { grid-column: 3; grid-row: 1 / span 2; align-self: center; opacity: 1; min-block-size: var(--hit-coarse); padding-inline: var(--sp-12); border-radius: var(--r-pill); background: var(--s2); color: var(--text); text-decoration: none; }
.k-pace-plan > .k-pace-tick { grid-row: 1 / span 2; align-self: center; }
.k-pace-braid-frame { grid-template-columns: var(--pace-keycol-w-sm) minmax(0, 1fr); }
.k-pace-braid-keycol { overflow: hidden; }
.k-braid-name, .k-braid-rule { display: none; }
.k-cal-title { font-size: var(--fs-22); }
.k-cal-month { grid-template-rows: none; grid-auto-rows: minmax(var(--hit), auto); }
.k-cal-cell { padding: var(--sp-4); }
.k-cal-add { display: none; }
.k-fx-stage { padding: var(--sp-16); gap: var(--sp-14); }
/* the desktop ring and clock hold down to 701 (an iPad in portrait); a
   phone takes the setup dial's size */
.k-fx-centre > .k-fx-ring { --ring: var(--fx-dial); --ring-w: var(--fx-ring-w); }
.k-fx-clock { font-size: var(--fs-58); }
/* frame 15f: the running session stacks — the objective card, the ring,
   the counts, the controls, then the notes — and the tab note goes */
.k-fx-top-t { flex: 1 1 auto; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-fx-top > .k-spacer { display: none; }
.k-fx-top > .k-fx-end { box-shadow: none; background: none; color: var(--muted); }
.k-fx-body { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-16); }
.k-fx-body > .k-fx-left, .k-fx-body > .k-fx-centre { display: contents; }
.k-fx-left > * { max-inline-size: none; }
.k-fx-min { flex: 0 0 auto; inline-size: var(--hit-coarse); block-size: var(--hit-coarse); padding: 0; justify-content: center; border-radius: 50%; }
.k-fx-min > .k-btn-label { display: none; }
.k-fx-ring-in > .k-kicker { max-inline-size: 84%; text-wrap: balance; }
.k-fx-what { order: 1; align-items: flex-start; text-align: start; padding: var(--sp-14) var(--sp-16); border-radius: var(--r-16); background: var(--fx-note-fill); gap: var(--sp-6); }
.k-fx-what .k-fx-ctx > .k-cluster { justify-content: flex-start; }
.k-fx-what .k-fx-objective { font-size: var(--fs-16); text-align: start; }
.k-fx-centre > .k-fx-ring { order: 2; align-self: center; }
.k-fx-left > .k-fx-stats { order: 3; justify-content: space-around; margin: 0; }
.k-fx-left > .k-fx-elig, .k-fx-left > .k-fx-earned { order: 4; margin: 0; align-items: center; text-align: center; }
.k-fx-left > .k-fx-earned { align-items: stretch; text-align: start; }
.k-fx-centre > .k-fx-controls { order: 5; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.k-fx-left > .k-link { order: 6; align-self: center; }
.k-fx-body > .k-fx-notes { order: 7; max-inline-size: none; padding: var(--sp-14) var(--sp-16); border-radius: var(--r-16); background: var(--fx-note-fill); }
.k-fx-stage > .k-fx-foot { display: none; }
.k-fx-idle { flex-direction: column; text-align: center; }
.k-fx-idle-act { justify-content: center; }
:root[data-focus="minimised"] .k-fx-dock { inset-inline: var(--sp-8); inset-block-start: auto; inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-8)); inline-size: auto; padding: var(--sp-12) var(--sp-14); border-radius: var(--r-20); gap: var(--sp-10); }
:root[data-focus="minimised"] .k-fx-dock[data-size="phone"][data-idle] { inline-size: auto; }
:root[data-focus="minimised"] #main { padding-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--fx-dock-phone-h) + var(--sp-8)); }
:root[data-focus="minimised"] #toast { inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-8) + var(--fx-dock-phone-h) + var(--sp-10)); }
.k-fx-dock-row { display: flex; align-items: center; gap: var(--sp-10); min-inline-size: 0; }
.k-fx-dock-row > .k-fx-dock-clock { font-size: var(--fs-22); }
.k-fx-dock-row > .k-iconbtn { inline-size: var(--hit-coarse); block-size: var(--hit-coarse); border-radius: 50%; background: var(--s3); }
.k-fx-dock-row > .k-btn { min-block-size: var(--hit-coarse); }
.k-fx-dock-here { flex: 1 1 auto; }
}

@media (max-width: 560px) {
.k-fx-go { flex-wrap: wrap; }
.k-fx-form > .k-fx-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-20); }
.k-fx-until { grid-template-columns: minmax(0, 1fr); }
/* a phone fits two figures a row, not four: four 26px mono figures in
   ~300px overlapped each other ("40 min" over "4", "+48 XP+4 gold") */
.k-fx-rev-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-14); }
.k-fx-rev-award { grid-column: 1 / -1; }
.k-fx-rev-fig dd { font-size: var(--fs-22); }
.k-pace-fgrid { grid-template-columns: minmax(0, 1fr); }
.k-pace-merge { grid-template-columns: minmax(0, 1fr); }
.k-pace-merge-when { grid-column: auto; grid-row: auto; }
.k-pace-merge-tone { justify-self: start; }
.k-cal-fgrid, .k-cal-fgrid--3 { grid-template-columns: minmax(0, 1fr); }
.k-fx-pair { grid-template-columns: minmax(0, 1fr); }
.k-fx-hero { padding: var(--sp-20); }
}

/* 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-rem-quick-add { min-inline-size: var(--hit-coarse); min-block-size: var(--hit-coarse); }
.k-rem-check, .k-hb-tick { min-inline-size: var(--hit); min-block-size: var(--hit); }
.k-hb-dir-tick, .k-cal-add { min-inline-size: var(--hit-dense); min-block-size: var(--hit-dense); }
}

/* no hover (an iPad wider than the phone tier): a row's delete and the
   plan's move are always there rather than found by a first tap */
@media (hover: none) {
.k-rem-del, .k-hb-del, .k-pace-move { opacity: 1; }
}

}