/* KurenaiOS — css/components.css · @layer components
   One block per shared primitive (UI rebuild, Graphite design). Views
   compose these; a view file may not restyle a primitive's internals.

   The card language: surfaces are --s1 at radius 24, with no borders and
   no nested cards; rows inside a card are divided by a 1px --line top
   border. Buttons are pills: one crimson primary per region, the rest
   ghost. Chips are an accent at ~18% with the accent as text. State is
   read from attributes (aria-current, aria-selected, aria-pressed,
   aria-expanded, data-state), never from a class.

   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 components {

/* ---------- type helpers ---------- */
.k-kicker { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); font-weight: var(--weight-semibold); }
.k-muted { color: var(--muted); }
.k-soft { color: var(--text-2); }
.k-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.k-kanji { font-family: var(--font-kanji); font-weight: var(--weight-semibold); }
.k-link { color: var(--muted); font-size: var(--fs-12); text-decoration: none; white-space: nowrap; }
.k-link:hover { color: var(--text); }
.k-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
/* a button whose label may be long (a task's title): it never outgrows its
   row, and its label ends in … instead */
.k-fit-btn { max-inline-size: 100%; min-inline-size: 0; flex-shrink: 1; }

/* ---------- page head: kicker → H1 → subline; controls on the same row ---------- */
/* the actions wrap under the title before the title is squeezed: a long
   action row beside it left the Shrine's title one word a line at 820px */
.k-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-16); }
/* a main page's painted band (app.hero.page.*): the header's right, fading in from its words */
.k-pagehead[data-state~="has-art"] { position: relative; isolation: isolate; }
.k-pagehead > .k-art[data-slot="page"] { inset: calc(var(--sp-12) * -1) 0 calc(var(--sp-8) * -1) 40%; border-radius: var(--r-20); --art-pos: 60% 50%; --art-scrim: none;
  -webkit-mask: linear-gradient(90deg, transparent, var(--text) 45%); mask: linear-gradient(90deg, transparent, var(--text) 45%); }
.k-pagehead > .k-art[data-slot="page"] > img { opacity: calc(var(--art-op-hero) * 0.7); }
@media (max-width: 700px) { .k-pagehead > .k-art[data-slot="page"] { display: none; } }
.k-pagehead-txt { flex: 1 1 var(--pagehead-txt-min); min-inline-size: 0; }
.k-pagehead h1 { margin-block: var(--sp-6) var(--sp-4); }
.k-pagehead-sub { font-size: var(--fs-13-5); color: var(--text-2); }
.k-pagehead-actions { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; justify-content: flex-end; min-inline-size: 0; max-inline-size: 100%; }

/* ---------- section header (inside a page, above a group of cards) ---------- */
.k-sectionhead { display: flex; align-items: baseline; gap: var(--sp-10); }
.k-sectionhead h2 { font-size: var(--fs-17); letter-spacing: var(--track-head); }
.k-sectionhead-sub { font-size: var(--fs-12); color: var(--muted); }
.k-sectionhead-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-8); }

/* ---------- the pill segmented bar: sub-navigation and switchers ---------- */
.k-seg { display: inline-flex; flex-wrap: nowrap; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-pill); background: var(--s1); font-size: var(--fs-13-5); max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
.k-seg-item {
display: flex;
align-items: center;
gap: var(--sp-7);
padding: var(--sp-7) var(--sp-14);
border-radius: var(--r-pill);
color: var(--text-2);
white-space: nowrap;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.k-seg-item:hover { color: var(--text); background: var(--s2); }
/* a choice of four or more that must stay whole: the items share equal
   columns and wrap into rows rather than scrolling one out of sight */
.k-seg--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--seg-grid-min), 1fr)); border-radius: var(--r-20); overflow: visible; }
.k-seg--grid > .k-seg-item { justify-content: center; }
.k-seg-item[aria-current="page"], .k-seg-item[aria-selected="true"], .k-seg-item[aria-pressed="true"] { background: var(--text); color: var(--bg); font-weight: var(--weight-semibold); }
.k-seg-mark { font-family: var(--font-kanji); color: var(--muted); }
.k-seg-item[aria-current="page"] .k-seg-mark, .k-seg-item[aria-selected="true"] .k-seg-mark { color: inherit; }
.k-seg-count { font: var(--weight-semibold) var(--fs-11) var(--font-mono); padding: 0 var(--sp-6); border-radius: var(--r-pill); background: var(--wash-crimson); color: var(--crimson); }
.k-seg-count:empty { display: none; }
.k-seg-sep { flex: 0 0 auto; inline-size: var(--hairline); margin: var(--sp-6) var(--sp-4); background: var(--line); }
.k-seg-dot { inline-size: var(--sp-7); block-size: var(--sp-7); flex: 0 0 auto; border-radius: 50%; background: var(--dot, var(--muted)); }
.k-seg-count[data-tone="urgent"] { background: var(--alarm-wash); color: var(--alarm); }
.k-seg-count[data-tone="neutral"] { background: var(--s2); color: var(--muted); }
.k-seg-item[aria-current="page"] .k-seg-count, .k-seg-item[aria-selected="true"] .k-seg-count { background: var(--bg); color: var(--text); }
/* the section sub-navigation: the main group in a track, the rest loose
   pills after a divider (Study: subjects | Review · Assignments · Exams) */
.k-subnav { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-13-5); max-inline-size: 100%; }
.k-subnav > .k-seg-sep { block-size: var(--sp-22); margin: 0 var(--sp-8); }
.k-subnav > .k-seg-item { padding: var(--sp-7) var(--sp-14); }
/* the quiet switcher: a lifted pill rather than an inverted one */
.k-seg--quiet { font-size: var(--fs-13); }
.k-seg--quiet .k-seg-item { padding: var(--sp-6) var(--sp-14); }
.k-seg--quiet .k-seg-item[aria-selected="true"], .k-seg--quiet .k-seg-item[aria-current="page"], .k-seg--quiet .k-seg-item[aria-pressed="true"] { background: var(--s2); color: var(--text); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-seg--fill { display: flex; }
.k-seg--fill .k-seg-item { flex: 1 1 0; justify-content: center; }

/* ---------- card ---------- */
.k-card { background: var(--s1); border-radius: var(--r-24); padding: var(--sp-20) var(--sp-22); min-inline-size: 0; }
.k-card--hero { border-radius: var(--r-26); padding: var(--sp-24) var(--sp-26); position: relative; overflow: hidden; }
.k-card--tight { padding: var(--sp-16) var(--sp-18); }
/* a header with an action wraps the action under the title and meta on a
   narrow card, rather than crushing the meta into a one-word column */
.k-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-10); margin-block-end: var(--sp-8); }
.k-card-title { flex: 0 0 auto; font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-card-meta { flex: 1 1 var(--card-meta-min); min-inline-size: 0; font-size: var(--fs-12); color: var(--muted); }
.k-card-head .k-link { margin-inline-start: auto; }
.k-card-row { display: flex; align-items: center; gap: var(--sp-12); padding-block: var(--sp-10); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); min-inline-size: 0; }
.k-card-row:first-of-type { border-block-start: 0; }
.k-card-row .k-card-row-k { color: var(--muted); }
.k-card-row .k-card-row-v { margin-inline-start: auto; text-align: end; }
.k-watermark { position: absolute; pointer-events: none; font: 800 var(--watermark-size) / 1 var(--font-kanji); color: var(--kanji-watermark); }

/* ---------- image crop (invariant 26c): the source and {x,y,zoom} ---------- */
[data-state~="crop-media"] { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--crop-x, 50%) var(--crop-y, 50%); transform: scale(var(--crop-zoom, 1)); transform-origin: var(--crop-x, 50%) var(--crop-y, 50%); }
[data-state~="image-crop-host"] { position: relative; overflow: hidden; isolation: isolate; }
.k-crop-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.k-crop-shade { position: absolute; inset: 0; background: var(--shade, none); }
/* the cropper dialog (KOS.imageCrop.open) */
.k-dialog.k-crop { inline-size: min(var(--dialog-w-lg), 100%); }
.k-crop-titles { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
.k-crop-source { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-crop-url { flex: 1 1 var(--crop-url-min); }
.k-crop-remove { margin-inline-start: auto; }
.k-crop-work { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-20); align-items: start; }
.k-crop-canvas { display: flex; flex-direction: column; gap: var(--sp-8); min-inline-size: 0; }
.k-crop-preview { position: relative; aspect-ratio: var(--crop-aspect, 1); max-block-size: var(--crop-preview-max-h); overflow: hidden; border-radius: var(--r-16); background: var(--s3); cursor: crosshair; touch-action: none; user-select: none; }
.k-crop-preview[data-shape="circle"] { justify-self: center; max-inline-size: var(--crop-preview-max-h); border-radius: 50%; }
.k-crop-preview > img { position: absolute; inset: 0; pointer-events: none; }
.k-crop-focus { position: absolute; inset-inline-start: var(--fx, 50%); inset-block-start: var(--fy, 50%); inline-size: var(--sp-22); block-size: var(--sp-22); translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 0 var(--hairline) var(--text), 0 0 0 var(--rail-mark) var(--shadow-ink); pointer-events: none; }
.k-crop-focus::before, .k-crop-focus::after { content: ""; position: absolute; background: var(--text); }
.k-crop-focus::before { inset-inline: 50% auto; inset-block: calc(var(--sp-6) * -1); inline-size: var(--hairline); }
.k-crop-focus::after { inset-block: 50% auto; inset-inline: calc(var(--sp-6) * -1); block-size: var(--hairline); }
.k-crop-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-13); color: var(--muted); }
.k-crop-status { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.k-crop-controls { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-crop-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-4) var(--sp-8); }
.k-crop-range > input { grid-column: 1 / -1; inline-size: 100%; }
.k-crop-value { font-size: var(--fs-12); color: var(--text-2); }
.k-crop-small { display: flex; flex-wrap: wrap; gap: var(--sp-8); }

/* ---------- the kanji tile: a row's mark ---------- */
.k-tile { inline-size: var(--tile); block-size: var(--tile); flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-9); background: color-mix(in oklch, var(--tile-c, var(--text-2)) 16%, transparent); color: var(--tile-c, var(--text-2)); font: var(--weight-semibold) var(--fs-14) / 1 var(--font-kanji); }

/* ---------- buttons ---------- */
.k-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-6);
min-block-size: var(--hit);
padding: var(--sp-8) var(--sp-16);
border-radius: var(--r-pill);
box-shadow: inset 0 0 0 var(--hairline) var(--line);
color: var(--text);
font-size: var(--fs-13);
white-space: nowrap;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.k-btn:hover { background: var(--s2); }
.k-btn[aria-pressed="true"], .k-btn[aria-expanded="true"] { background: var(--s2); }
.k-btn--primary { background: var(--crimson); color: var(--crimson-ink); box-shadow: none; font-weight: var(--weight-semibold); font-size: var(--fs-13-5); padding-inline: var(--sp-18); }
.k-btn--primary:hover { background: var(--crimson-hi); }
.k-btn--danger { background: color-mix(in oklch, var(--red) 30%, transparent); color: var(--red-soft); box-shadow: none; font-weight: var(--weight-semibold); }
.k-btn--danger:hover { background: color-mix(in oklch, var(--red) 40%, transparent); }
.k-btn--quiet { box-shadow: none; color: var(--muted); }
.k-btn--quiet:hover { color: var(--text); background: var(--s2); }
.k-btn--sm { padding: var(--sp-6) var(--sp-14); font-size: var(--fs-12-5); }
/* a compact disclosure (invariant 72): mobile-shell.js adds the trigger,
   and only the compact tier shows it */
.k-btn.k-disclosure { display: none; }
.k-btn:disabled { opacity: 0.5; }
.k-btn-caret { font-size: var(--fs-11); color: var(--muted); }
.k-iconbtn { position: relative; inline-size: var(--icon-btn); block-size: var(--icon-btn); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; padding: 0; background: var(--s1); color: var(--text-2); font-size: var(--fs-18); line-height: 1; }
.k-iconbtn svg { inline-size: var(--icon-glyph); block-size: var(--icon-glyph); }
/* the phone's search trigger (mobile-shell.js) is a .k-iconbtn, so it is
   hidden HERE: a rule in the layout layer loses to this layer's display:grid
   and left a dead search button in the desktop header */
#mobile-search-trigger { display: none; }
.k-iconbtn:hover { background: var(--s2); color: var(--text); }
.k-iconbtn--sm { inline-size: var(--icon-btn-sm); block-size: var(--icon-btn-sm); font-size: var(--fs-15); }
.k-iconbtn--sm svg { inline-size: var(--icon-glyph-sm); block-size: var(--icon-glyph-sm); }
.k-iconbtn:disabled { opacity: 0.45; cursor: default; }
.k-iconbtn:disabled:hover { background: var(--s1); color: var(--text-2); }
.k-iconbtn img { inline-size: var(--sp-26); block-size: var(--sp-26); object-fit: contain; }
.k-dot { position: absolute; inset-block-start: var(--sp-6); inset-inline-end: var(--sp-7); inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 var(--focus-width) var(--s1); }

/* ---------- the dated row: Today, Upcoming, Deadlines ---------- */
.k-day-row { display: flex; align-items: center; gap: var(--sp-12); padding-block: var(--sp-12); border-block-start: var(--hairline) solid var(--line); inline-size: 100%; padding-inline: 0; border-radius: 0; background: none; box-shadow: none; text-align: start; }
button.k-day-row:hover { background: none; }
button.k-day-row:hover .k-day-title { text-decoration: underline; text-decoration-color: var(--line); }
.k-day-bar { inline-size: var(--sp-4); block-size: var(--sp-32); flex: 0 0 auto; border-radius: var(--sp-4); background: var(--row-c, var(--muted)); }
.k-day-txt { flex: 1 1 0; min-inline-size: 0; }
.k-day-title { display: block; font-size: var(--fs-14); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-day-sub { display: block; font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-day-when { font-size: var(--fs-11-5); color: var(--muted); white-space: nowrap; }
.k-day-when[data-state~="now"] { color: var(--alarm); }
.k-day-row[data-state~="done"] .k-day-title { color: var(--muted); }
.k-day-row[data-state~="done"] .k-day-bar { opacity: 0.4; }
.k-days-dot { inline-size: var(--day-dot); block-size: var(--day-dot); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--s2); font-size: var(--fs-14); font-weight: var(--weight-semibold); }
.k-days-dot[data-state~="now"] { background: var(--alarm); color: var(--alarm-ink); }
.k-days-dot[data-state~="late"] { background: color-mix(in oklch, var(--red) 30%, transparent); color: var(--red-soft); }

/* ---------- chips ---------- */
.k-chip { display: inline-flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-9); border-radius: var(--r-pill); background: color-mix(in oklch, var(--chip-c, var(--text-2)) 18%, transparent); color: var(--chip-c, var(--text-2)); font-size: var(--fs-11-5); white-space: nowrap; }
.k-chip[data-tone="crimson"] { --chip-c: var(--crimson); }
.k-chip[data-tone="danger"] { --chip-c: var(--alarm); }
.k-chip[data-tone="teal"] { --chip-c: var(--teal); }
.k-chip[data-tone="amber"] { --chip-c: var(--amber); }
.k-chip[data-tone="green"] { --chip-c: var(--green); }
.k-chip[data-tone="red"] { --chip-c: var(--red); }
.k-chip[data-tone="bloom"] { --chip-c: var(--bloom); }
.k-chip[data-tone="muted"] { --chip-c: var(--muted); }

/* ---------- progress: 4–6px bars, radius = height, track --s2 ---------- */
.k-bar { position: relative; block-size: var(--bar-h, var(--bar-4)); border-radius: var(--bar-h, var(--bar-4)); background: var(--s2); overflow: hidden; }
.k-bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--p, 0%); border-radius: inherit; background: var(--bar-c, var(--crimson)); }
.k-bar[data-state~="open"] > i { inline-size: 50%; background: repeating-linear-gradient(90deg, var(--bar-c, var(--crimson)) 0 var(--sp-6), transparent var(--sp-6) var(--sp-10)); }
.k-bar--6 { --bar-h: var(--bar-6); }
/* the on/off switch (Focus penalty, Sync autonomous mode) */
.k-switch { appearance: none; -webkit-appearance: none; position: relative; inline-size: var(--fx-switch-w); block-size: var(--fx-switch-h); flex: 0 0 auto; margin: 0; border-radius: var(--r-pill); background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.k-switch::after { content: ""; position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2); inline-size: calc(var(--fx-switch-h) - 2 * var(--sp-2)); block-size: calc(var(--fx-switch-h) - 2 * var(--sp-2)); border-radius: 50%; background: var(--text); transition: transform var(--dur-fast) var(--ease); }
.k-switch:checked { background: var(--crimson); box-shadow: none; }
.k-switch:checked::after { transform: translateX(calc(var(--fx-switch-w) - var(--fx-switch-h))); }
.k-switch:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---------- stat: a label over a figure ---------- */
.k-stat-label { font-size: var(--fs-11-5); color: var(--muted); }
.k-stat-value { font-size: var(--fs-15); font-weight: var(--weight-semibold); margin-block-start: var(--sp-2); }
.k-stat-sub { font-size: var(--fs-11-5); color: var(--muted); }
.k-stats { display: flex; flex-wrap: wrap; gap: var(--sp-18); }
.k-stat--big .k-stat-value { font: var(--weight-semibold) var(--fs-32) / 1 var(--font-mono); letter-spacing: var(--track-head); }

/* ---------- the profile card and status editor (governor.js) ---------- */
/* the profile popover (governor.profileCard), anchored to the chip */
.k-menu-panel.k-profile-pop { inset-block-start: var(--pop-top, auto); inset-inline-start: var(--pop-left, auto); inset-inline-end: var(--pop-right, auto); inline-size: var(--pc-w); padding: 0; overflow: hidden; }
.k-pc { --ring: var(--teal); display: flex; flex-direction: column; gap: var(--sp-12); padding-block-end: var(--sp-16); }
.k-pc[data-hp="strained"] { --ring: var(--amber); }
.k-pc[data-hp="critical"] { --ring: var(--alarm); }
.k-pc-band { block-size: var(--pc-band-h); background: var(--gv-hero-bg); }
.k-pc-ident { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-pc-id { display: flex; align-items: flex-end; gap: var(--sp-12); margin-block-start: calc(var(--pc-band-h) * -0.5); padding-inline: var(--sp-16); }
.k-pc-ring { --frame-out: var(--sp-6); --frame-ground: var(--s2); inline-size: var(--pc-ring); block-size: var(--pc-ring); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring) 0 var(--hp, 100%), var(--line) var(--hp, 100%) 100%); box-shadow: 0 0 0 var(--rail-mark) var(--s2); }
.k-pc-who { display: flex; flex-direction: column; min-inline-size: 0; padding-block-end: var(--sp-4); line-height: var(--lh-snug); }
.k-pc-name { font-size: var(--fs-16); font-weight: var(--weight-semibold); }
.k-pc-rank { font-size: var(--fs-12); color: var(--muted); }
.k-pc-status { margin: 0 var(--sp-16); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-14); background: var(--s1); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--text); text-align: start; }
.k-pc-status--empty { box-shadow: inset 0 0 0 var(--hairline) var(--line); background: none; color: var(--muted); }
.k-pc-status--empty:hover { color: var(--text); background: var(--s1); }
.k-pc-meters { display: flex; flex-direction: column; gap: var(--sp-10); margin: 0; padding-inline: var(--sp-16); }
.k-pc-meter { display: grid; grid-template-columns: var(--pc-key-w) minmax(0, 1fr); align-items: baseline; gap: var(--sp-2) var(--sp-10); }
.k-pc-m-k { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-pc-m-v { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-8); margin: 0; font-size: var(--fs-13); }
.k-pc-m-h { font-size: var(--fs-11-5); color: var(--muted); }
.k-pc-meter[data-kind="gold"] .k-pc-m-v { color: var(--amber); }
.k-pc-bar { grid-column: 2; --bar-c: var(--ring); }
.k-pc-meter[data-kind="xp"] .k-pc-bar { --bar-c: var(--text); }
.k-pc-foot { display: flex; gap: var(--sp-8); padding-inline: var(--sp-16); }
.k-pc-foot > .k-btn { flex: 1 1 0; justify-content: center; }
/* the status editor (governor.editProfileText) */
.k-pe { inline-size: var(--pe-w); }
.k-pe-label { display: flex; justify-content: space-between; align-items: baseline; }

/* ---------- charts (js/core/charts.js): the card, the key, the multiples ---------- */
.k-chart { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-chart[data-span="wide"] { grid-column: 1 / -1; }
.k-chart[data-span="wide"] .k-chart-body > svg { max-block-size: var(--chart-wide-h); margin-inline: auto; }
.k-chart-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-4) var(--sp-10); }
.k-chart-title { margin: 0; font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-chart-sub { font-size: var(--fs-12); color: var(--muted); }
.k-chart-body > svg { display: block; max-inline-size: 100%; block-size: auto; }
.k-chart-body > svg.k-chart-fill { inline-size: 100%; }
.k-chart-big { font-family: var(--font-ui); letter-spacing: var(--track-head); }
.k-chart-note { margin: 0; font-size: var(--fs-12); color: var(--muted); }
/* a chart drawn at its box's size (KOS.charts.fit): the box fills what the
   card has left, and the drawing sits inside it without driving its height */
.k-chart-fit { position: relative; flex: 1 1 auto; min-block-size: var(--chart-fit-min); }
.k-chart-fit > svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.k-chart-multi { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-chart-multi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--chart-multi-min), 1fr)); gap: var(--sp-12); }
.k-chart-multi-panel { margin: 0; padding: var(--sp-12) var(--sp-14); border-radius: var(--r-16); background: var(--s2); }
.k-chart-multi-panel > svg { display: block; inline-size: 100%; block-size: auto; }
.k-chart-multi-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-8); margin-block-end: var(--sp-6); font-size: var(--fs-13); }
.k-legend { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-16); margin: 0; padding: 0; list-style: none; font-size: var(--fs-12); color: var(--text-2); }
.k-legend-item { display: flex; align-items: center; gap: var(--sp-6); }
.k-legend-item b { font-weight: var(--weight-medium); color: var(--text); }
.k-legend-swatch { inline-size: var(--sp-10); block-size: var(--sp-10); flex: 0 0 auto; border-radius: var(--r-2); background: var(--c, var(--crimson)); }
.k-hbar { display: flex; flex-direction: column; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
.k-hbar-row { display: grid; grid-template-columns: minmax(0, var(--hbar-label-w)) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-10); font-size: var(--fs-12-5); }
.k-hbar-label { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-hbar-bar { --bar-h: var(--bar-6); }
.k-hbar-v { min-inline-size: var(--sp-24); font-size: var(--fs-12); font-weight: var(--weight-medium); text-align: end; }
.k-chart-donut { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-16) var(--sp-32); flex: 1 1 auto; }
.k-chart-donut > svg { inline-size: var(--donut-w); flex: 0 0 auto; }
.k-chart-donut .k-legend { flex: 1 1 var(--chart-multi-min); flex-direction: column; flex-wrap: nowrap; gap: var(--sp-8); font-size: var(--fs-13); }
.k-chart-donut .k-legend-item b { margin-inline-start: auto; }
.k-legend--share { gap: var(--sp-12); }
.k-legend--share .k-legend-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto var(--sp-40); column-gap: var(--sp-8); row-gap: var(--sp-6); align-items: center; }
.k-legend--share .k-legend-item b { margin: 0; }
.k-legend-pct { font-size: var(--fs-11-5); color: var(--muted); text-align: end; }
.k-legend-bar { grid-column: 2 / -1; block-size: var(--bar-4); border-radius: var(--r-pill); background: linear-gradient(90deg, var(--c) var(--p), var(--s2) var(--p)); }

/* ---------- empty state ---------- */
.k-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-14); padding: var(--sp-18) var(--sp-22); border-radius: var(--r-24); background: var(--s1); color: var(--text-2); font-size: var(--fs-13-5); }
.k-empty[data-state~="compact"] { background: none; padding: var(--sp-10) 0; }
.k-empty-mark { font: var(--weight-semibold) var(--fs-26) / 1 var(--font-kanji); color: var(--muted); }
.k-empty-txt { flex: 1 1 var(--empty-txt-min); min-inline-size: 0; }
.k-empty-txt b { display: block; color: var(--text); font-size: var(--fs-15); }
.k-empty-action { flex: 0 0 auto; }
.k-empty[data-state~="has-spot"] { gap: var(--sp-28); padding: var(--sp-28) var(--sp-32); }
.k-empty[data-state~="has-spot"] .k-empty-txt b { font-size: var(--fs-20); letter-spacing: var(--track-name); margin-block-end: var(--sp-6); }

/* ---------- declared horizontal scroller (invariant 50) ---------- */
/* the arrows float over the track's edges, so the first item lines up with
   the page's edge like every other block (Graphite review) */
.k-scroller { position: relative; display: flex; align-items: center; min-inline-size: 0; }
.k-scroller-track { flex: 1 1 0; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
.k-scroller-arrow { position: absolute; z-index: 2; inset-block-start: 50%; translate: 0 -50%; inline-size: var(--sp-28); block-size: var(--sp-28); border-radius: 50%; background: var(--s2); color: var(--text-2); font-size: var(--fs-16); display: grid; place-items: center; box-shadow: var(--elev-2); }
.k-scroller-arrow[data-edge="start"] { inset-inline-start: 0; }
.k-scroller-arrow[data-edge="end"] { inset-inline-end: 0; }
.k-scroller-arrow:hover { color: var(--text); background: var(--s3); }
.k-scroller[data-state~="at-start"] .k-scroller-arrow[data-edge="start"], .k-scroller[data-state~="at-end"] .k-scroller-arrow[data-edge="end"] { visibility: hidden; }
.k-scroller::before, .k-scroller::after { content: ""; position: absolute; z-index: 1; inset-block: 0; inline-size: var(--sp-32); pointer-events: none; }
.k-scroller::before { inset-inline-start: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.k-scroller::after { inset-inline-end: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.k-scroller[data-state~="at-start"]::before, .k-scroller[data-state~="at-end"]::after { opacity: 0; }
/* the edge-marked tab track (15n): the pill track is the scroller, its
   fades are the track's own colour and its arrows sit inside it */
.k-scroller--track { border-radius: var(--r-pill); background: var(--s1); overflow: hidden; }
.k-scroller--track > .k-seg { flex: 1 1 0; max-inline-size: none; background: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--sp-4); }
.k-scroller--track .k-seg-item { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
.k-scroller--track::before { background: linear-gradient(90deg, var(--s1) 45%, transparent); inline-size: var(--sp-48); }
.k-scroller--track::after { background: linear-gradient(270deg, var(--s1) 45%, transparent); inline-size: var(--sp-48); }
.k-scroller--track > .k-scroller-arrow { inline-size: var(--icon-btn); block-size: var(--icon-btn); margin-inline: var(--sp-3); box-shadow: none; background: var(--s2); }
.k-scroller--track[data-state~="at-start"] > .k-scroller-arrow[data-edge="start"], .k-scroller--track[data-state~="at-end"] > .k-scroller-arrow[data-edge="end"] { display: none; }

/* ---------- menus: a floating panel of commands or controls ---------- */
.k-menu-panel {
position: fixed;
inset-inline-start: var(--menu-x, auto);
inset-block-start: var(--menu-y, auto);
z-index: var(--z-menu);
inline-size: var(--menu-w);
max-block-size: min(70vh, var(--menu-max-h));
overflow-y: auto;
padding: var(--sp-8);
border-radius: var(--r-22);
background: var(--s2);
box-shadow: var(--elev-3);
}
.k-menu-panel[data-state~="measuring"] { visibility: hidden; }
.k-menu-heading { padding: var(--sp-10) var(--sp-12) var(--sp-4); font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); font-weight: var(--weight-semibold); }
.k-menu-item { inline-size: 100%; display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-9) var(--sp-12); border-radius: var(--r-14); text-align: start; }
.k-menu-item:hover, .k-menu-item:focus-visible { background: var(--s1); }
.k-menu-item-mark { inline-size: var(--sp-24); flex: 0 0 auto; text-align: center; font-family: var(--font-kanji); color: var(--muted); }
.k-menu-item-label { display: block; font-size: var(--fs-13-5); font-weight: var(--weight-medium); }
.k-menu-item-hint { display: block; font-size: var(--fs-11-5); color: var(--muted); }
.k-menu-sep { block-size: var(--hairline); margin: var(--sp-6) var(--sp-12); background: var(--line); }
.k-menu-count { font: var(--weight-semibold) var(--fs-11) var(--font-mono); padding: 0 var(--sp-6); border-radius: var(--r-pill); background: var(--wash-crimson); color: var(--crimson); }
.k-menu-count:empty { display: none; }

/* ---------- dialogs (invariant 49: behaviour lives in openDialog) ---------- */
.k-dialog-overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: grid;
place-items: center;
padding: var(--sp-16);
background: var(--shadow-ink);
}
.k-dialog {
inline-size: min(var(--dialog-w), 100%);
max-block-size: calc(100dvh - var(--sp-32));
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--sp-14);
padding: var(--sp-26) var(--sp-28);
border-radius: var(--r-26);
background: var(--s2);
color: var(--text);
box-shadow: var(--elev-4);
}
.k-dialog-head { display: flex; align-items: center; gap: var(--sp-12); }
.k-dialog-head > .k-iconbtn:last-child { margin-inline-start: auto; }
.k-dialog-title { font-size: var(--fs-22); font-weight: var(--weight-semibold); letter-spacing: var(--track-head); }
.k-dialog-body { font-size: var(--fs-13-5); line-height: var(--lh-body); color: var(--text-2); }
.k-dialog-foot { display: flex; align-items: center; gap: var(--sp-8); margin-block-start: var(--sp-4); }
.k-dialog-foot > :first-child:not(:only-child) { margin-inline-end: auto; }
.k-dialog-mark { inline-size: var(--hit-coarse); block-size: var(--hit-coarse); flex: 0 0 auto; border-radius: var(--r-14); display: grid; place-items: center; background: color-mix(in oklch, var(--mark-c, var(--crimson)) 20%, transparent); color: var(--mark-c, var(--crimson)); font: var(--weight-bold) var(--fs-20) / 1 var(--font-kanji); }
.k-dialog[data-intent~="danger"] { --mark-c: var(--red); }
/* the page behind a modal does not scroll (openDialog sets the lock) */
:root[data-scroll-lock] #stage { overflow: hidden; }

/* ---------- toast (the visible half; KOS.a11y speaks it) ---------- */
#toast {
position: fixed;
inset-inline-start: 50%;
inset-block-end: var(--sp-24);
z-index: var(--z-toast);
max-inline-size: min(var(--toast-max), calc(100% - var(--sp-32)));
padding: var(--sp-10) var(--sp-18);
border-radius: var(--r-pill);
background: var(--s2);
color: var(--text);
font-size: var(--fs-13);
box-shadow: var(--elev-3);
transform: translate(-50%, var(--sp-8));
opacity: 0;
pointer-events: none;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
#toast[data-state~="show"] { opacity: 1; transform: translate(-50%, 0); }
#toast[data-state~="bad"] { background: color-mix(in oklch, var(--red) 30%, var(--s2)); }
#toast[data-state~="action"] { display: flex; align-items: center; gap: var(--sp-12); padding-inline-end: var(--sp-10); pointer-events: auto; }
.k-toast-act { background: var(--s1); }

/* ---------- fields: a label over an inset control ---------- */
.k-field { display: flex; flex-direction: column; gap: var(--sp-6); min-inline-size: 0; }
.k-field-label { font-size: var(--fs-12); color: var(--muted); }
.k-input {
inline-size: 100%;
min-block-size: var(--hit);
padding: var(--sp-10) var(--sp-14);
border: 0;
border-radius: var(--r-14);
background: var(--s3);
color: var(--text);
font-size: var(--fs-13-5);
}
.k-input:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 0; }
.k-pill-select { min-block-size: 0; padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill); background: var(--s1); font-size: var(--fs-12-5); color: var(--text-2); }
/* a toggle pill: a multi-select option that says whether it is on */
.k-qz-pill { padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill); background: var(--s1); font-size: var(--fs-12-5); color: var(--text-2); white-space: nowrap; }
.k-qz-pill:hover { background: var(--s2); color: var(--text); }
.k-card .k-qz-pill, .k-dialog .k-qz-pill { background: var(--s2); }
.k-qz-pill[aria-pressed="true"] { background: var(--text); color: var(--bg); font-weight: var(--weight-semibold); }
textarea.k-input { min-block-size: calc(var(--hit) * 2.6); line-height: var(--lh-body); }
.k-input[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--hairline) var(--red); }
.k-field-hint { font-size: var(--fs-11-5); color: var(--muted); }
.k-field-error { font-size: var(--fs-11-5); color: var(--red); }
.k-box { appearance: none; -webkit-appearance: none; inline-size: var(--box); block-size: var(--box); flex: 0 0 auto; margin: 0; display: grid; place-items: center; border-radius: var(--r-6); box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); cursor: pointer; }
.k-box::after { content: "✓"; font-size: var(--fs-11); font-weight: var(--weight-bold); color: var(--bg); opacity: 0; }
.k-box:checked { background: var(--teal); box-shadow: none; }
.k-box:checked::after { opacity: 1; }
.k-check { display: inline-flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-13-5); cursor: pointer; }
.k-check input { inline-size: var(--sp-18); block-size: var(--sp-18); }

/* ---------- Money and Goals primitives (design 27, "Primitives") ---------- */
/* category colour: a NAME (money.js TONES) on the calendar's hue tokens */
[data-cat-tone] { --cat-c: var(--muted); }
[data-cat-tone="sage"] { --cat-c: oklch(var(--cal-l) var(--cal-c) var(--cal-sage)); }
[data-cat-tone="sky"] { --cat-c: oklch(var(--cal-l) var(--cal-c) var(--cal-sky)); }
[data-cat-tone="iris"] { --cat-c: oklch(var(--cal-l) var(--cal-c) var(--cal-iris)); }
[data-cat-tone="slate"] { --cat-c: oklch(var(--cal-l) var(--cal-c) var(--cal-slate)); }
[data-cat-tone="plum"] { --cat-c: oklch(var(--cal-l) var(--cal-c) var(--cal-plum)); }
[data-cat-tone="jade"] { --cat-c: oklch(var(--cal-l) var(--cal-c) var(--cal-jade)); }
[data-cat-tone="brass"] { --cat-c: oklch(var(--cal-l) var(--cal-c) var(--cal-brass)); }
[data-cat-tone="clay"] { --cat-c: oklch(var(--cal-l) var(--cal-c) var(--cal-clay)); }
[data-cat-tone="collection"] { --cat-c: var(--collection-hue); }
[data-cat-tone="green"] { --cat-c: var(--green); }
[data-cat-tone="muted"] { --cat-c: var(--muted); }
/* the amount: tabular, the mask keeps the width */
.k-amount { position: relative; display: inline-block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-13-5); font-weight: var(--weight-semibold); white-space: nowrap; line-height: var(--lh-snug); }
.k-amount[data-w="500"] { font-weight: var(--weight-medium); }
.k-amount[data-tone="in"] { color: var(--green); }
.k-amount[data-tone="transfer"], .k-amount[data-tone="muted"] { color: var(--text-2); }
.k-amount[data-tone="alarm"] { color: var(--alarm); }
.k-amount[data-size="11-5"] { font-size: var(--fs-11-5); }
.k-amount[data-size="12"] { font-size: var(--fs-12); }
.k-amount[data-size="12-5"] { font-size: var(--fs-12-5); }
.k-amount[data-size="13"] { font-size: var(--fs-13); }
.k-amount[data-size="14"] { font-size: var(--fs-14); }
.k-amount[data-size="14-5"] { font-size: var(--fs-14-5); }
.k-amount[data-size="15"] { font-size: var(--fs-15); }
.k-amount[data-size="20"] { font-size: var(--fs-20); letter-spacing: var(--track-head); }
.k-amount[data-size="22"] { font-size: var(--fs-22); letter-spacing: var(--track-head); }
.k-amount[data-size="24"] { font-size: var(--fs-24); letter-spacing: var(--track-head); }
.k-amount[data-size="26"] { font-size: var(--fs-26); letter-spacing: var(--track-head); }
.k-amount[data-size="28"] { font-size: var(--fs-28); letter-spacing: var(--track-head); }
.k-amount[data-size="30"] { font-size: var(--fs-30); letter-spacing: var(--track-head); }
.k-amount[data-size="40"] { font-size: var(--fs-40); letter-spacing: var(--track-h1); line-height: 1; }
.k-amount[data-size="46"] { font-size: var(--fs-46); letter-spacing: var(--track-h1); line-height: 1; }
.k-amount[data-size="52"] { font-size: var(--fs-52); letter-spacing: var(--track-h1); line-height: 1; }
.k-amount[data-size="60"] { font-size: var(--fs-60); letter-spacing: var(--track-huge); line-height: 1; }
.k-amount[data-state~="hidden"] { color: transparent; background: var(--s2); border-radius: var(--r-6); }
.k-amount[data-state~="hidden"]::after { content: "••••"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: min(1em, var(--fs-14)); letter-spacing: 0.2em; }
/* the amount field */
.k-amount-wrap { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
.k-amount-field { display: flex; align-items: center; gap: var(--sp-10); min-block-size: var(--amount-field-h); padding: var(--sp-6) var(--sp-14); border-radius: var(--r-14); background: var(--s3); }
.k-amount-field:focus-within { outline: var(--focus-width) solid var(--focus-ring); }
.k-amount-field[data-state~="invalid"] { box-shadow: inset 0 0 0 var(--hairline) var(--red); }
.k-amount-cur { font: var(--fs-18) var(--font-mono); color: var(--muted); }
.k-amount-input { flex: 1 1 0; min-inline-size: 0; border: 0; padding: 0; background: none; color: var(--text); text-align: end; font: var(--weight-semibold) var(--fs-22) var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--track-head); }
.k-amount-input:focus { outline: none; }
.k-amount-input:disabled { opacity: 0.5; }
.k-amount-field[data-size="lg"] { min-block-size: var(--amount-field-h-lg); border-radius: var(--r-16); }
.k-amount-field[data-size="lg"] .k-amount-input { font-size: var(--fs-28); }
.k-amount-field[data-size="lg"] .k-amount-cur { font-size: var(--fs-22); }
/* the category bar: both figures, over is the fixed alarm */
.k-catbar { display: flex; flex-direction: column; gap: var(--sp-7); padding-block: var(--sp-10); border-block-start: var(--hairline) solid var(--line); min-inline-size: 0; }
.k-catbar:first-child, .k-catbar[data-state~="first"] { border-block-start: 0; }
.k-catbar-head { display: flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-13-5); min-inline-size: 0; }
.k-catbar-dot { inline-size: var(--catbar-dot); block-size: var(--catbar-dot); flex: 0 0 auto; border-radius: 50%; background: var(--cat-c); }
.k-catbar-name { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.k-catbar-sub { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.k-catbar-figs { display: flex; align-items: baseline; gap: var(--sp-5); margin-inline-start: auto; white-space: nowrap; }
.k-catbar-of { font-size: var(--fs-12); color: var(--muted); }
.k-catbar-bar { position: relative; block-size: var(--bar-6); border-radius: var(--bar-6); background: var(--s2); overflow: hidden; }
.k-catbar-bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--p, 0%); border-radius: inherit; background: var(--cat-c); }
.k-catbar[data-state~="over"] .k-catbar-bar { overflow: visible; }
.k-catbar[data-state~="over"] .k-catbar-bar > i { inline-size: 100%; background: var(--alarm); }
.k-catbar-bar > b { position: absolute; inset-block: calc(-1 * var(--sp-3)); inset-inline-start: var(--tick, 100%); inline-size: var(--sp-2); border-radius: var(--sp-2); background: var(--text); }
.k-catbar-foot { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-12); color: var(--muted); min-inline-size: 0; }
.k-catbar-over { display: inline-flex; align-items: center; gap: var(--sp-4); color: var(--alarm); font-weight: var(--weight-semibold); }
.k-catbar-left { display: inline-flex; align-items: center; gap: var(--sp-4); }
.k-catbar-note { margin-inline-start: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
/* the period-history strip */
.k-periods { display: flex; align-items: center; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; --sq: var(--period); }
.k-periods[data-size="sm"] { --sq: var(--period-sm); gap: var(--sp-3); }
.k-periods[data-size="xs"] { --sq: var(--period-xs); gap: var(--sp-3); }
.k-periods[data-size="lg"] { --sq: var(--period-lg); }
.k-periods[data-size="xl"] { --sq: var(--period-xl); gap: var(--sp-5); }
.k-period { inline-size: var(--sq); block-size: var(--sq); flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-6); background: var(--s2); color: var(--muted); font-size: calc(var(--sq) * 0.6); font-weight: var(--weight-bold); line-height: 1; }
.k-period[data-state="met"] { background: var(--teal); color: var(--bg); }
.k-period[data-state="missed"] { background: none; box-shadow: inset 0 0 0 var(--ring-1-5) var(--alarm); color: var(--alarm); }
.k-period[data-state="open"] { box-shadow: inset 0 0 0 var(--ring-1-5) var(--text); color: var(--text); background: linear-gradient(0deg, color-mix(in oklch, var(--text) 30%, transparent) var(--fill, 0%), transparent var(--fill, 0%)); }
/* the goal ring */
.k-ring { position: relative; inline-size: var(--ring-md); block-size: var(--ring-md); flex: 0 0 auto; }
.k-ring[data-size="164"] { inline-size: var(--ring-hero); block-size: var(--ring-hero); }
.k-ring[data-size="92"] { inline-size: var(--ring-sm); block-size: var(--ring-sm); }
.k-ring > svg { display: block; inline-size: 100%; block-size: 100%; }
.k-ring-track { fill: none; stroke: var(--s2); }
.k-ring-fill { fill: none; stroke: var(--crimson); stroke-linecap: round; }
.k-ring[data-state~="met"] .k-ring-fill { stroke: var(--teal); }
.k-ring-tick { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.k-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: var(--lh-snug); }
/* a picture the user chose (KOS.imageCrop), or its empty slot */
.k-pic { position: relative; overflow: hidden; isolation: isolate; background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--cat-c, var(--muted)) 34%, var(--s2)) 0 var(--sp-8), color-mix(in oklch, var(--cat-c, var(--muted)) 24%, var(--s2)) var(--sp-8) var(--sp-16)); }
.k-pic[data-state~="filled"] { background: var(--s2); }
.k-pic-img { position: absolute; inset: 0; }
.k-pic-add { position: absolute; inset-inline-start: var(--sp-10); inset-block-end: var(--sp-10); background: var(--bg); }
.k-pic-label { position: absolute; inset-inline-end: var(--sp-10); inset-block-start: var(--sp-10); font: var(--weight-medium) var(--fs-11) var(--font-mono); color: var(--muted); }
.k-pic-change { position: absolute; inset-inline-end: var(--sp-10); inset-block-end: var(--sp-10); inline-size: var(--pic-btn); block-size: var(--pic-btn); border-radius: 50%; background: var(--shadow-ink); color: var(--text); display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.k-pic:hover .k-pic-change, .k-pic-change:focus-visible { opacity: 1; }
/* no hover (an iPad, a phone): the change button is always there */
@media (hover: none) {
.k-pic-change { opacity: 1; }
}
/* a domain wash with its kanji */
.k-wash { --wash-c: var(--text-2); position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 130% at 0% 0%, color-mix(in oklch, var(--wash-c) 34%, transparent), transparent 70%), color-mix(in oklch, var(--wash-c) 9%, var(--s1)); }
.k-wash-mark { position: absolute; inset-inline-end: var(--sp-14); inset-block-end: calc(-1 * var(--sp-16)); font: var(--weight-semibold) var(--gl-wash-kanji) / 1 var(--font-kanji); color: var(--wash-c); opacity: 0.24; }
.k-wash[data-mono] .k-wash-mark { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: calc(var(--gl-wash-kanji) * 0.8); inset-block-end: calc(-1 * var(--sp-10)); }
.k-wash[data-tone="maths"] { --wash-c: var(--maths); }
.k-wash[data-tone="cs"] { --wash-c: var(--cs); }
.k-wash[data-tone="it"] { --wash-c: var(--it); }
.k-wash[data-tone="code"] { --wash-c: var(--code); }
.k-wash[data-tone="anime"] { --wash-c: var(--anime); }
.k-wash[data-tone="books"] { --wash-c: var(--books); }
.k-wash[data-tone="vn"] { --wash-c: var(--vn); }
.k-wash[data-tone="games"] { --wash-c: var(--games); }
.k-wash[data-tone="collection"] { --wash-c: var(--collection-hue); }
.k-wash[data-tone="jade"] { --wash-c: oklch(var(--cal-l) var(--cal-c) var(--cal-jade)); }

@media (max-width: 860px) {
.k-crop-work { grid-template-columns: minmax(0, 1fr); }
:root[data-shell="ready"] .k-btn.k-disclosure { display: inline-flex; align-self: flex-start; }
}

/* ---------- the phone tier ---------- */
/* ---------- reorder: the drag pattern (frame 23b) ----------
   The handle, the lifted copy that follows the pointer, the faded dashed
   ghost left behind, and the crimson drop line with its dot. */
.k-grip { flex: 0 0 auto; display: inline-grid; place-items: center; inline-size: var(--sp-20); min-block-size: var(--sp-28); padding: 0; border: 0; border-radius: var(--r-6); background: none; color: var(--muted); font-size: var(--fs-14); line-height: 1; cursor: grab; touch-action: none; }
.k-grip:hover { color: var(--text); background: var(--s2); }
.k-grip:focus-visible { outline: var(--focus-width) solid var(--crimson); outline-offset: var(--hairline); }
:root[data-reordering] { cursor: grabbing; user-select: none; }
[data-rid][data-state~="ghost"] { opacity: 0.35; outline: var(--ring-1-5) dashed var(--line); outline-offset: calc(-1 * var(--ring-1-5)); border-radius: var(--r-12); }
[data-rid][data-state~="lifted"] { position: relative; z-index: 1; border-radius: var(--r-12); box-shadow: var(--elev-3), inset 0 0 0 var(--ring-1-5) var(--crimson); }
.k-reorder-float { position: fixed; z-index: var(--z-menu); inset-inline-start: var(--rx, -999px); inset-block-start: var(--ry, -999px); inline-size: var(--rw); margin: 0; border-radius: var(--r-12); background: var(--s2); box-shadow: var(--elev-4); opacity: 0.96; transform: rotate(-1.2deg) scale(1.02); pointer-events: none; }
.k-reorder-line { position: fixed; z-index: var(--z-menu); inset-inline-start: var(--lx, -999px); inset-block-start: var(--ly, -999px); inline-size: var(--lw, 0); block-size: var(--ring-1-5); background: var(--crimson); pointer-events: none; transform: translateY(-50%); }
.k-reorder-line::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--sp-4)); inset-block-start: 50%; inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--crimson); transform: translateY(-50%); }

/* ---------- the topic picker (frames 17a–17d) ----------
   A 44px well of chips; the panel opens fixed under it so no scrolling
   dialog clips it. Subject dots use the three subject hues. */
.k-tp { position: relative; min-inline-size: 0; }
.k-tp-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-8); }
.k-tp-meta { display: inline-flex; align-items: baseline; gap: var(--sp-4); font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-tp-clear { font-size: var(--fs-12); color: var(--text-2); }
.k-tp-clear[hidden] { display: none; }
.k-tp-well { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-8); min-block-size: var(--hit-coarse); padding: var(--sp-6) var(--sp-32) var(--sp-6) var(--sp-8); position: relative; border-radius: var(--r-14); background: var(--s3); cursor: pointer; }
.k-tp[data-state~="open"] > .k-tp-well { box-shadow: inset 0 0 0 var(--ring-1-5) var(--crimson); }
.k-tp-chip { display: inline-flex; align-items: center; gap: var(--sp-6); min-inline-size: 0; max-inline-size: 100%; padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-10); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-13); color: var(--text); cursor: default; }
.k-tp-chip[hidden] { display: none; }
.k-tp-dot { inline-size: var(--sp-6); block-size: var(--sp-6); flex: 0 0 auto; border-radius: 50%; background: var(--tp-hue, var(--muted)); }
[data-subject="compsci"] { --tp-hue: var(--cs); }
[data-subject="maths"] { --tp-hue: var(--maths); }
[data-subject="it"] { --tp-hue: var(--it); }
[data-subject="code"] { --tp-hue: var(--code); }
.k-tp-ref { color: var(--text-2); font-size: var(--fs-12); white-space: nowrap; }
.k-tp-title { min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-tp-tag { font-size: var(--fs-11); color: var(--muted); white-space: nowrap; }
.k-tp-x { display: inline-grid; place-items: center; inline-size: var(--sp-20); block-size: var(--sp-20); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: var(--fs-14); line-height: 1; cursor: pointer; }
.k-tp-x:hover { color: var(--text); background: var(--s3); }
.k-tp-more { padding-inline: var(--sp-10); border: 0; color: var(--text-2); font: inherit; font-size: var(--fs-12-5); cursor: pointer; }
.k-tp-add { padding: var(--sp-4) var(--sp-6); border: 0; background: none; font: inherit; font-size: var(--fs-13); color: var(--muted); cursor: pointer; }
.k-tp-add:hover { color: var(--text); }
.k-tp-add[data-state~="empty"] { flex: 1 1 auto; text-align: start; font-size: var(--fs-14); }
.k-tp-add[data-state~="caret"] { position: absolute; inset-block: 0; inset-inline-end: var(--sp-6); font-size: var(--fs-11); }
.k-tp-caret { position: absolute; inset-inline-end: var(--sp-14); inset-block-start: 50%; transform: translateY(-50%); font-size: var(--fs-11); color: var(--muted); pointer-events: none; }

.k-tp-panel { position: fixed; z-index: var(--z-menu); inset-inline-start: var(--tp-x); inset-block-start: var(--tp-y); inline-size: var(--tp-w); max-block-size: min(var(--tp-max), var(--tp-panel-h)); display: flex; flex-direction: column; border-radius: var(--r-18); background: var(--s2); box-shadow: var(--elev-4); overflow: hidden; cursor: default; }
.k-tp-panel[data-side="top"] { transform: translateY(-100%); }
.k-tp-searchbox { display: flex; align-items: center; gap: var(--sp-8); margin: var(--sp-12) var(--sp-12) 0; padding-inline: var(--sp-12); border-radius: var(--r-12); background: var(--s3); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-tp-searchbox:focus-within { box-shadow: inset 0 0 0 var(--ring-1-5) var(--crimson); }
.k-tp-glass { color: var(--muted); font-size: var(--fs-13); }
.k-tp-panel .k-tp-search { flex: 1 1 auto; min-inline-size: 0; padding-inline: 0; background: none; box-shadow: none; }
.k-tp-panel .k-tp-search:focus-visible { outline: none; }
.k-tp-hits { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-tp-switches { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-8); padding: var(--sp-10) var(--sp-12); border-block-end: var(--hairline) solid var(--line); }
.k-tp-seg { font-size: var(--fs-12-5); }
.k-tp-seg .k-seg-item { gap: var(--sp-6); }
.k-tp-select-by { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-12-5); }
.k-tp-list { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: var(--sp-6) var(--sp-6) var(--sp-8); }
.k-tp-h { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-10) var(--sp-8) var(--sp-4); font-size: var(--fs-11); font-weight: var(--weight-semibold); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.k-tp-h[data-level="parent"] { padding: var(--sp-6) var(--sp-8) var(--sp-2) var(--sp-24); font-size: var(--fs-12); font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.k-tp-h .k-mono { color: var(--muted); }
.k-tp-row { position: relative; display: flex; align-items: center; gap: var(--sp-10); min-block-size: var(--hit); padding: var(--sp-6) var(--sp-8) var(--sp-6) var(--sp-24); border-radius: var(--r-10); font-size: var(--fs-13-5); color: var(--text); cursor: pointer; }
.k-tp-row:hover, .k-tp-row[data-state~="active"] { background: var(--s1); }
.k-tp-row[data-state~="active"]::before { content: ""; position: absolute; inset-block: var(--sp-4); inset-inline-start: calc(-1 * var(--sp-6)); inline-size: var(--sp-2); border-radius: var(--r-2); background: var(--crimson); }
.k-tp-row[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.k-tp-rt { flex: 1 1 auto; min-inline-size: 0; }
.k-tp-n { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-tp-hit { background: none; color: var(--crimson); font-weight: var(--weight-semibold); }
.k-tp-box { flex: 0 0 auto; inline-size: var(--sp-18); block-size: var(--sp-18); border-radius: var(--r-6); box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); display: grid; place-items: center; font-size: var(--fs-12); color: var(--bg); }
.k-tp-box[data-state="on"], .k-tp-box[data-state="covered"] { background: var(--teal); box-shadow: none; }
.k-tp-box[data-state="on"]::after, .k-tp-box[data-state="covered"]::after { content: "✓"; }
.k-tp-box[data-state="part"] { background: var(--wash-teal); box-shadow: inset 0 0 0 var(--ring-1-5) var(--teal); color: var(--teal); }
.k-tp-box[data-state="part"]::after { content: "–"; }
.k-tp-empty { margin: 0; padding: var(--sp-16) var(--sp-12); font-size: var(--fs-13); color: var(--muted); }
.k-tp-foot { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-10) var(--sp-12); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-12-5); }
.k-tp-foot > .k-btn { margin-inline-start: auto; }
.k-tp-keys { flex: 1 1 auto; min-inline-size: 0; text-align: end; font-size: var(--fs-11); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 700px) {
:root[data-shell="ready"] #mobile-search-trigger { display: grid; }
.k-tp-panel { inset-inline: var(--sp-8); inset-block: auto calc(var(--sp-8) + env(safe-area-inset-bottom)); inline-size: auto; max-block-size: 75dvh; transform: none; }
.k-tp-panel[data-side="top"] { transform: none; }
.k-tp-keys { display: none; }
.k-pagehead { flex-wrap: wrap; }
.k-pagehead-txt { flex-basis: 100%; }
.k-sr-scope[aria-pressed="true"] { background: var(--text); color: var(--bg); }
/* 15a: under the phone title bar (mobile-shell.js) the page's own heading
   gives way; its actions row stays, full width. A page's section tabs
   ([data-phone-tabs]) are the bar's switch, and its ⋯ tools
   ([data-phone-more]) wait in the bar's sheet, not on the page. */
#main[data-phone-title] > .k-pagehead > .k-pagehead-txt { display: none; }
#main[data-phone-title] > .k-pagehead:not(:has(> .k-pagehead-actions > :not([data-phone-tabs], [data-phone-more], [data-phone-action]))) { display: none; }
#main[data-phone-title] > .k-pagehead > .k-pagehead-actions { inline-size: 100%; justify-content: flex-start; }
#main[data-phone-title] [data-phone-tabs], #main[data-phone-title] [data-phone-more] { display: none; }
/* 15a: the Assistant emblem leaves the phone header (it lives in More) */
:root[data-shell="ready"] #assistant-trigger { display: none; }
/* every dialog is a bottom sheet (15a): --s1, 28px at the top, a grabber,
   a 52px header with its ✕, and the footer pinned above the home indicator */
.k-dialog-overlay { place-items: end stretch; padding: 0; background: var(--sheet-scrim); }
.k-dialog { inline-size: 100%; max-block-size: calc(100dvh - var(--sp-24)); gap: var(--sp-12); padding: var(--sp-10) var(--sp-20) calc(var(--sp-20) + env(safe-area-inset-bottom)); border-radius: var(--r-28) var(--r-28) 0 0; background: var(--s1); }
.k-dialog::before { content: ""; flex: 0 0 auto; align-self: center; inline-size: var(--sheet-grabber-w); block-size: var(--sheet-grabber-h); border-radius: var(--r-pill); background: var(--line); }
.k-dialog-head { min-block-size: var(--sp-40); }
.k-dialog-title { font-size: var(--fs-18); }
.k-dialog-foot { flex-wrap: wrap; position: sticky; inset-block-end: calc(-1 * (var(--sp-20) + env(safe-area-inset-bottom))); margin-inline: calc(-1 * var(--sp-20)); margin-block-end: calc(-1 * (var(--sp-20) + env(safe-area-inset-bottom))); padding: var(--sp-12) var(--sp-20) calc(var(--sp-12) + env(safe-area-inset-bottom)); border-block-start: var(--hairline) solid var(--line); background: var(--s1); }
.k-dialog-foot > .k-btn { flex: 1 1 0; justify-content: center; min-block-size: var(--hit-coarse); }
.k-msheet--full { block-size: 100dvh; max-block-size: none; border-radius: 0; padding-block-start: calc(var(--sp-12) + env(safe-area-inset-top)); }
.k-msheet--full::before { display: none; }
.k-msheet--tall { block-size: calc(100dvh - var(--sp-24)); }
#toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-12)); }
}

/* ---------- touch ---------- */
/* 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-btn, .k-seg-item, .k-menu-item, .k-rail-item { min-block-size: var(--hit-coarse); }
.k-btn { min-inline-size: var(--hit-coarse); }
.k-iconbtn, .k-ptitle-tools > .k-btn, .k-syncdot { min-inline-size: var(--hit-coarse); min-block-size: var(--hit-coarse); }
/* the scroller's arrow is a hint (the strip swipes): a 32px circle, its
   chevron large enough to read */
.k-scroller-arrow { min-inline-size: var(--hit); min-block-size: var(--hit); font-size: var(--fs-20); line-height: 1; }
.k-tp-x { min-inline-size: var(--hit-dense); min-block-size: var(--hit-dense); }
}

/* ---------- painted art behind live content (KOS.art, design 34k–34n) ----------
   The host is positioned and isolated; the layer sits behind its content
   (z-index -1 inside the isolation), the picture at its slot's opacity and
   focal point, then the slot's scrim. Decorative art off: nothing drawn. */
.k-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; --art-op: var(--art-op-hero); --art-scrim: var(--art-scrim-l); --art-pos: 80% 50%; }
.k-art > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--art-pos); opacity: var(--art-op); filter: var(--art-filter); }
.k-art::after { content: ""; position: absolute; inset: 0; background: var(--art-scrim); }
.k-art:is([data-slot="focus"], [data-slot="exam"]) { --art-op: var(--art-op-stage); --art-scrim: var(--art-scrim-stage); --art-pos: 50% 55%; }
.k-art[data-slot="shrine"] { --art-op: var(--art-op-hall); --art-pos: 50% 50%; }
:root[data-art="off"] .k-art, :root[data-art="off"] .k-art-spot { display: none; }
.k-art-spot { inline-size: var(--art-spot); block-size: var(--art-spot); flex: none; object-fit: contain; }
@media (max-width: 700px) {
.k-art-spot { inline-size: var(--art-spot-ph); block-size: var(--art-spot-ph); }
}

/* ---------- a slot's chip and the picture drawer (34n) ---------- */
.k-art-chip { position: absolute; inset-block-start: var(--sp-14); inset-inline-end: var(--sp-16); z-index: 2; display: inline-flex; align-items: center; gap: var(--sp-4); min-block-size: var(--hit); padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill); background: var(--art-glass); box-shadow: inset 0 0 0 var(--hairline) var(--art-glass-edge); font-size: var(--fs-12); color: var(--text); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
:is(:hover, :focus-within) > .k-art-chip, .k-art-chip:focus-visible { opacity: 1; }
@media (hover: none) { .k-art-chip { opacity: 1; } }
.k-art-drawer-overlay { justify-content: flex-end; align-items: stretch; padding: 0; }
.k-art-drawer { inline-size: min(var(--art-drawer-w), 100vw); max-inline-size: none; max-block-size: none; block-size: 100%; border-radius: 0; margin: 0; }
.k-art-drawer-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-12-5); }
.k-art-drawer-body { display: flex; flex-direction: column; gap: var(--sp-16); }
.k-art-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
.k-art-thumb { display: flex; flex-direction: column; gap: var(--sp-6); padding: 0; border: 0; background: none; text-align: start; font-size: var(--fs-12-5); color: var(--text-2); }
.k-art-thumb > img { inline-size: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-12); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-art-thumb[data-slot="focus"] > img { aspect-ratio: 16 / 9; }
.k-art-thumb[aria-pressed="true"] > img { box-shadow: 0 0 0 var(--ring-2) var(--text); }
.k-art-conds { display: flex; flex-direction: column; }
.k-art-cond { display: flex; align-items: center; gap: var(--sp-12); padding-block: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-art-cond:first-child { border-block-start: 0; }
.k-art-cond > div { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; font-size: var(--fs-13-5); }
.k-art-small { margin: 0; font-size: var(--fs-12); }
.k-art-now { margin: 0; padding: var(--sp-10) var(--sp-14); border-radius: var(--r-14); background: var(--s2); font-size: var(--fs-12-5); color: var(--text-2); }
.k-art-now > span { color: var(--gold); }
.k-art-lock { display: flex; align-items: center; gap: var(--sp-14); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-18); background: var(--s2); flex-wrap: wrap; }
.k-art-lock > div { flex: 1 1 var(--empty-txt-min); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-14); min-inline-size: 0; }
.k-art-lock-k { inline-size: var(--sp-40); aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-12); background: var(--s3); color: var(--muted); font: var(--weight-semibold) var(--fs-16) / 1 var(--font-kanji); }
.k-art-lock-p { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.k-art-lock-p b { color: var(--gold); }

}