/* KurenaiOS — css/views/collection.css · @layer views
   View compositions for Collection: the Overview, the four vaults (one
   template, frame 11b), the season, the Shrine, the Planner and Sync.
   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 {

/* one status hue per record, read by the rail dot, the chips and charts */
[data-status="inProgress"] { --st: var(--st-inProgress); }
[data-status="completed"] { --st: var(--st-completed); }
[data-status="planned"] { --st: var(--st-planned); }
[data-status="onHold"] { --st: var(--st-onHold); }
[data-status="dropped"] { --st: var(--st-dropped); }
.k-status-chip { --chip-c: var(--st, var(--text-2)); }

/* ================= the spotlight hero (frame 11b) ================= */
.k-vhero { position: relative; display: flex; align-items: center; gap: var(--sp-26); block-size: var(--vhero-h); padding: var(--sp-24) var(--sp-28); border-radius: var(--r-26); overflow: hidden; background: color-mix(in oklch, oklch(var(--ph-l) var(--ph-c) var(--vh-hue, 250)) 70%, var(--s1)); isolation: isolate; }
.k-vhero-art { position: absolute; inset: 0; z-index: -3; }
.k-vhero-art > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* the vault's painting sits under the hero's own scrim (z -2), so the layer goes below it */
.k-vhero > .k-art { z-index: -3; --art-scrim: none; --art-pos: 80% 50%; }
.k-vhero[data-state~="vh-fromcover"] .k-vhero-art > img { filter: blur(var(--sp-18)) saturate(1.1); transform: scale(1.15); }
.k-vhero-scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, var(--vhero-scrim-0) 0%, var(--vhero-scrim-1) 42%, var(--vhero-scrim-2) 72%, var(--vhero-scrim-3)); }
.k-vhero-cover { inline-size: var(--vhero-cover-w); block-size: var(--vhero-cover-h); flex: 0 0 auto; margin-inline: auto var(--sp-24); transform: rotate(var(--cover-tilt)); display: grid; place-items: center; border-radius: var(--r-16); overflow: hidden; background: var(--s2); box-shadow: 0 0 0 var(--hairline) var(--mcard-edge), var(--elev-3); font: var(--weight-bold) var(--fs-38) var(--font-kanji); color: var(--muted); }
.k-vhero-cover > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-vhero-body { flex: 1 1 auto; min-inline-size: 0; max-inline-size: var(--vhero-body-w); display: flex; flex-direction: column; }
.k-vhero-kicker { margin: 0; color: var(--vh-accent, var(--crimson)); }
.k-vhero-title { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-30); font-weight: var(--weight-semibold); letter-spacing: var(--track-h1); line-height: var(--lh-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-vhero-line { margin: 0; font-size: var(--fs-14); color: var(--text-2); }
.k-vhero-chips { margin: var(--sp-12) 0 var(--sp-10); --cluster-gap: var(--sp-6); }
.k-vhero-bar { inline-size: min(var(--vhero-bar-w), 100%); --bar-h: var(--sp-4); --bar-c: var(--vh-accent, var(--crimson)); background: var(--mcard-track); }
.k-vhero-actions { margin-block-start: var(--sp-14); --cluster-gap: var(--sp-8); }
.k-vhero-open, .k-vhero-more { background: var(--mcard-glass); }

/* ================= the page: rail beside the controls + grid ================= */
.k-mlayout-grid { display: grid; grid-template-columns: var(--mrail-w) minmax(0, 1fr); gap: var(--sp-22); align-items: start; }
/* the rail rides with the grid (review A) */
.k-mrail { display: flex; flex-direction: column; gap: var(--sp-18); min-inline-size: 0; position: sticky; inset-block-start: var(--sp-16); max-block-size: calc(100dvh - var(--topbar-h) - var(--sp-32)); overflow-y: auto; scrollbar-width: thin; }
.k-mrail-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-mrail-h { display: flex; align-items: center; margin: 0; padding: 0 var(--sp-12) var(--sp-6); }
.k-mrail-manage, .k-mrail-fold { font-size: var(--fs-11-5); letter-spacing: 0; text-transform: none; font-weight: var(--weight-regular); }
.k-mrail-h > :nth-child(2) { margin-inline-start: auto; }
.k-mrail-fold { margin-inline-start: var(--sp-10); }
.k-mrail-h > .k-mrail-fold:nth-child(2) { margin-inline-start: auto; }
.k-mrail-row { display: flex; align-items: center; gap: var(--sp-10); inline-size: 100%; padding: var(--sp-7) 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-mrail-row:hover { background: var(--s1); color: var(--text); }
.k-mrail-row[aria-current="true"] { background: var(--s2); color: var(--text); font-weight: var(--weight-semibold); }
.k-mrail-dot { inline-size: var(--mdot); block-size: var(--mdot); flex: 0 0 auto; border-radius: 50%; background: var(--st, var(--muted)); }
.k-mrail-lbl { flex: 1 1 auto; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-mrail-lbl em { font-size: var(--fs-12); color: var(--muted); }
.k-mrail-n { font-size: var(--fs-11-5); font-weight: var(--weight-regular); color: var(--muted); }
.k-mrail-new { color: var(--muted); }
.k-mrail-empty { margin: 0; padding: var(--sp-4) var(--sp-12); font-size: var(--fs-12); color: var(--muted); }

.k-mmain { display: flex; flex-direction: column; gap: var(--sp-14); min-inline-size: 0; }
.k-mcontrols { display: flex; align-items: center; gap: var(--sp-8); }
.k-mcount { margin: 0; font-size: var(--fs-12-5); color: var(--muted); white-space: nowrap; }
.k-mtoolbar { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-8); min-inline-size: 0; }
.k-mtoolbar > * { flex-shrink: 0; }
/* the search takes the row's free space instead of leaving a gap (review A) */
.k-mtoolbar > .k-msearch { flex: 1 1 auto; max-inline-size: none; min-inline-size: 7rem; }
.k-msearch { flex: 1 1 auto; inline-size: var(--msearch-w); max-inline-size: var(--msearch-w); min-inline-size: 0; padding: var(--sp-8) var(--sp-14); border: 0; border-radius: var(--r-pill); background: var(--s1); font: inherit; font-size: var(--fs-13); color: var(--text); }
.k-msearch::placeholder { color: var(--muted); }
.k-msearch:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.k-mtool { background: var(--s1); box-shadow: none; color: var(--text-2); }
.k-mtool[data-state~="has-filters"] { color: var(--text); box-shadow: inset 0 0 0 var(--hairline) var(--crimson); }
.k-mlayout { font-size: var(--fs-12); }
.k-mlayout .k-seg-item { padding: var(--sp-4) var(--sp-10); }
.k-mfilters { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-8); }
.k-mfilters-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.k-mfilters-foot { display: flex; justify-content: flex-end; }
/* 15j: the phone's Filters sheet and ⋯ box exist only there */
.k-mfilter-sheet, .k-mtool-more { display: none; }
.k-msheet-slot > .k-mrail { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-msheet-slot .k-mfilters-foot { display: none; }
.k-msheet-slot > .k-pill-select { min-block-size: var(--hit-coarse); font-size: var(--fs-16); }
.k-msheet-tools > .k-mtool-more { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-mtool-more > .k-btn { justify-content: center; min-block-size: var(--hit-coarse); }
.k-mtool-more-h { margin: var(--sp-6) 0 0; }

/* ================= the overlay card (frame 11b) ================= */
.k-mgrid[data-layout="grid"], .k-mgrid:not([data-layout]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mcard-min), 1fr)); gap: var(--sp-16); }
.k-mgrid[data-layout="list"] { display: flex; flex-direction: column; gap: var(--sp-2); }
/* the VN vault's Chapter select (review B): a chapter menu per VN */
.k-mgrid[data-layout="chapters"] { display: flex; flex-direction: column; gap: var(--sp-16); }
.k-vn-chs { display: flex; flex-direction: column; gap: var(--sp-14); padding: var(--sp-18) var(--sp-20); border-radius: var(--r-24); background: var(--s1); }
.k-vn-chs-head { display: flex; align-items: center; gap: var(--sp-14); }
.k-vn-chs-cover { position: relative; isolation: isolate; display: block; inline-size: var(--vn-chs-cover-w); flex: 0 0 auto; aspect-ratio: 2 / 3; border-radius: var(--r-8); overflow: hidden; }
.k-vn-chs-cover > .k-mcover { position: absolute; inset: 0; }
.k-vn-chs-id { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.k-vn-chs-title { padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: var(--fs-17); font-weight: var(--weight-semibold); color: var(--text); text-align: start; cursor: pointer; }
.k-vn-chs-title:hover { background: none; color: var(--crimson-soft); }
.k-vn-chs-sub { font-size: var(--fs-12-5); color: var(--muted); }
.k-vn-chs-strip { display: grid; grid-auto-flow: column; grid-auto-columns: var(--vn-chs-w); gap: var(--sp-14); overflow-x: auto; scrollbar-width: none; padding-block-end: var(--sp-2); }
.k-vn-chs-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: 0; border: 0; background: none; box-shadow: none; font: inherit; color: inherit; text-align: start; cursor: pointer; min-inline-size: 0; }
.k-vn-chs-card:hover { background: none; }
.k-vn-chs-art { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: var(--r-14); overflow: hidden; background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--spine) 85%, var(--text) 6%) 0 var(--sp-10), var(--spine) var(--sp-10) var(--sp-20)); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-vn-chs-art > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-vn-chs-no { font: var(--weight-bold) var(--fs-34) / 1 var(--font-mono); color: color-mix(in oklch, var(--text) 70%, transparent); }
.k-vn-chs-next { position: absolute; inset-inline-start: var(--sp-8); inset-block-end: var(--sp-8); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); background: var(--vn); font-size: var(--fs-11-5); font-weight: var(--weight-bold); color: var(--bg); }
.k-vn-chs-card:hover .k-vn-chs-art { box-shadow: 0 0 0 var(--ring-1-5) var(--vn); }
.k-vn-chs-card[data-state~="missing"] .k-vn-chs-art { opacity: 0.4; }
.k-vn-chs-card[data-state~="done"] .k-vn-chs-t { color: var(--muted); }
.k-vn-chs-n { font-size: var(--fs-11); color: var(--muted); letter-spacing: var(--track-label); text-transform: uppercase; }
.k-vn-chs-t { font-size: var(--fs-13-5); font-weight: var(--weight-medium); }
.k-mcard { position: relative; min-inline-size: 0; aspect-ratio: var(--mcard-ratio); border-radius: var(--r-22); overflow: hidden; background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--mcard-edge); cursor: pointer; isolation: isolate; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.k-mcard:hover, .k-mcard:focus-within { box-shadow: inset 0 0 0 var(--hairline) var(--mcard-edge), 0 0 0 var(--focus-width) color-mix(in oklch, var(--st, var(--crimson)) 70%, transparent), var(--elev-3); }
.k-mcard::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(transparent 38%, var(--mcard-scrim) 70%, var(--mcard-scrim-deep)); }
.k-mcover { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; background: linear-gradient(160deg, oklch(calc(var(--ph-l) + 0.06) var(--ph-c) var(--ph-hue, 250)), oklch(var(--ph-l) var(--ph-c) calc(var(--ph-hue, 250) + 30))); }
.k-mcover > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity var(--dur) var(--ease); }
.k-mcover > img[data-state~="is-loading"] { opacity: 0; }
.k-mcover-ph { font: var(--weight-bold) var(--fs-40) var(--font-kanji); color: var(--mcard-edge); }
.k-mscore { position: absolute; inset-block-start: var(--sp-10); inset-inline-start: var(--sp-10); z-index: 2; inline-size: var(--mscore-w); min-inline-size: var(--mscore-w); block-size: var(--mscore-h); padding: 0 var(--sp-6); border: 0; border-radius: var(--r-pill); background: var(--mcard-glass); font: var(--weight-semibold) var(--fs-14) var(--font-mono); color: var(--gold); text-align: center; appearance: textfield; -moz-appearance: textfield; }
.k-mscore::-webkit-inner-spin-button, .k-mscore::-webkit-outer-spin-button { appearance: none; -webkit-appearance: none; margin: 0; }
.k-mscore::placeholder { color: var(--muted); }
.k-mscore:focus-visible { outline: var(--focus-width) solid var(--focus-ring); }
.k-mfav { position: absolute; inset-block-start: var(--sp-10); inset-inline-end: var(--sp-10); z-index: 2; inline-size: var(--mfav); block-size: var(--mfav); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--mcard-glass); font-size: var(--fs-15); color: var(--text-2); cursor: pointer; }
.k-mfav[aria-pressed="true"] { color: var(--crimson); }
.k-mcard-body { position: absolute; inset-inline: var(--sp-14); inset-block-end: var(--sp-18); z-index: 1; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-mcard-title { padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-15-5); font-weight: var(--weight-medium); line-height: var(--lh-snug); color: var(--text); text-align: start; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.k-mcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.k-mcard-prog { font-size: var(--fs-12-5); color: var(--text-2); }
.k-mchip { align-self: flex-start; display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-9); border-radius: var(--r-pill); background: var(--mcard-glass); font: var(--weight-semibold) var(--fs-11) var(--font-mono); letter-spacing: var(--track-label); color: var(--text-2); white-space: nowrap; }
.k-mchip[data-tone="airing"] { background: var(--airing-bg); box-shadow: inset 0 0 0 var(--hairline) var(--airing-edge); color: var(--airing-ink); }
.k-mchip[data-tone="crimson"] { color: var(--crimson); }
.k-mchip[data-tone="danger"] { color: var(--alarm); }
.k-mchip--btn { border: 0; cursor: pointer; }
.k-mquickrow { display: none; gap: var(--sp-8); }
.k-mcard:hover .k-mquickrow, .k-mcard:focus-within .k-mquickrow { display: flex; }
.k-mqsel { flex: 1 1 auto; min-inline-size: 0; padding: var(--sp-7) var(--sp-12); border: 0; border-radius: var(--r-12); background: color-mix(in oklch, var(--st, var(--anime)) 22%, var(--bg)); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--st, var(--anime)) 45%, transparent); font: inherit; font-size: var(--fs-12-5); color: var(--text); }
.k-mplus { flex: 0 0 auto; padding: var(--sp-7) var(--sp-12); border: 0; border-radius: var(--r-12); background: none; box-shadow: inset 0 0 0 var(--hairline) var(--text-2); font: inherit; font-size: var(--fs-12-5); color: var(--text-2); white-space: nowrap; cursor: pointer; }
.k-mplus:hover { color: var(--text); background: var(--mcard-glass); }
.k-mcard > .k-mbar { position: absolute; inset-inline: var(--sp-14); inset-block-end: var(--sp-6); z-index: 1; --bar-h: var(--sp-4); --bar-c: var(--vh-accent, var(--anime)); background: var(--mcard-track); }

.k-mempty { grid-column: 1 / -1; }

/* the list layout: one table in every vault (frame 11f) — each value in
   a fixed column, so an empty one never shifts its neighbours */
.k-mgrid[data-layout="list"] { display: flex; flex-direction: column; padding: var(--sp-6) var(--sp-12) var(--sp-8); border-radius: var(--r-24); background: var(--s1); }
.k-mrow { display: grid; grid-template-columns: var(--mrow-cols); align-items: center; gap: var(--sp-12); padding: var(--sp-10) var(--sp-8); border-block-start: var(--hairline) solid var(--line); cursor: pointer; }
.k-mrow:hover { background: var(--s2); }
.k-mrow--head { padding-block: var(--sp-12) var(--sp-10); border: 0; cursor: default; }
.k-mrow--head:hover { background: none; }
.k-mrow-h { font-size: var(--fs-11); font-weight: var(--weight-semibold); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-mrow-fav { flex: 0 0 auto; color: var(--crimson); font-size: var(--fs-12); }
.k-mrow-cover { inline-size: var(--mrow-cover-w); block-size: var(--mrow-cover-h); flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-8); overflow: hidden; background: var(--s2); font-family: var(--font-kanji); color: var(--muted); }
.k-mrow-cover > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-mrow-main { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.k-mrow-tline { display: flex; align-items: center; gap: var(--sp-6); min-inline-size: 0; }
.k-mrow-title { min-inline-size: 0; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-14); font-weight: var(--weight-semibold); color: var(--text); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.k-mrow-title:hover { color: var(--crimson-soft); }
.k-mrow-sub { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-mrow-prio[data-tone="prio-high"] { color: var(--crimson); }
.k-mrow-prio[data-tone="prio-medium"] { color: var(--amber); }
.k-mrow-c { min-inline-size: 0; font-size: var(--fs-13); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-mrow-c[data-state~="empty"] { color: var(--muted); }
.k-mrow-c > .k-mono { font-size: var(--fs-12-5); color: var(--text); }
.k-mrow .k-mqsel { inline-size: 100%; padding: var(--sp-3) var(--sp-10); border-radius: var(--r-pill); font-size: var(--fs-12); }
.k-mrow .k-mqscore { inline-size: 100%; padding: var(--sp-4) var(--sp-6); border: 0; background: none; box-shadow: none; font-family: var(--font-mono); font-size: var(--fs-13); font-weight: var(--weight-semibold); color: var(--text); }
.k-mrow .k-mqscore:hover, .k-mrow .k-mqscore:focus { box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-mrow-act { display: flex; justify-content: flex-end; }
.k-mrow .k-mplus { padding: var(--sp-4) var(--sp-10); border-radius: var(--r-pill); background: var(--s2); box-shadow: none; font-size: var(--fs-12); font-weight: var(--weight-semibold); color: var(--text); }
.k-mrow .k-mchip { background: var(--s2); }

/* ================= the record drawer (frame 11c) ================= */
.k-dialog-overlay[data-state~="drawer"] { place-items: stretch end; padding: 0; }
.k-medit { inline-size: min(var(--medit-w), 100%); max-block-size: 100dvh; block-size: 100dvh; overflow: hidden; border-radius: var(--r-24) 0 0 var(--r-24); background: var(--s1); }
.k-medit-top { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-medit-heading { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
/* the banner: the record's own art as a dimmed wash, the cover over it */
.k-medit-banner { position: relative; display: grid; grid-template-columns: var(--medit-cover-w) minmax(0, 1fr); align-items: end; gap: var(--sp-20); margin: calc(-1 * var(--sp-26)) calc(-1 * var(--sp-28)) 0; padding: var(--sp-64) var(--sp-28) var(--sp-4); isolation: isolate; }
.k-medit-wash { position: absolute; inset: 0 0 var(--medit-wash-cut); z-index: -1; overflow: hidden; background: var(--s2); }
.k-medit-wash > img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.35; filter: blur(var(--sp-6)) saturate(1.1); transform: scale(1.08); }
.k-medit-wash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, var(--s1)); }
.k-medit-close { position: absolute; inset-block-start: var(--sp-16); inset-inline-end: var(--sp-16); background: color-mix(in oklch, var(--bg) 60%, transparent); }
.k-medit-art { inline-size: var(--medit-cover-w); aspect-ratio: 2 / 3; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-14); background: var(--s2); box-shadow: var(--elev-3); font-family: var(--font-kanji); font-size: var(--fs-32); color: var(--muted); }
.k-medit-art > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-medit-id { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-6); padding-block-end: var(--sp-4); }
.k-medit-chips { --cluster-gap: var(--sp-6); }
.k-medit-chips > .k-chip { background: var(--s3); color: var(--text-2); }
.k-medit-title { margin: 0; font-size: var(--fs-26); font-weight: var(--weight-bold); line-height: var(--lh-tight); color: var(--text); overflow-wrap: anywhere; }
.k-medit-alt { margin: 0; font-size: var(--fs-13); color: var(--muted); }
.k-medit-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-10); }
.k-medit-fav[aria-pressed="true"] { color: var(--crimson); box-shadow: inset 0 0 0 var(--hairline) var(--crimson); }
.k-medit-sync { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-12); color: var(--muted); }
.k-medit-sync[data-state~="linked"]::before { content: ""; inline-size: var(--sp-6); block-size: var(--sp-6); border-radius: 50%; background: var(--green); }
/* the tabs: underlined text, not pills */
.k-medit-tabs { padding: 0; border-radius: 0; background: none; border-block-end: var(--hairline) solid var(--line); gap: var(--sp-18); overflow-x: auto; }
.k-medit-tabs .k-seg-item { padding: var(--sp-8) 0; border-radius: 0; background: none; color: var(--muted); box-shadow: none; white-space: nowrap; }
.k-medit-tabs .k-seg-item:hover { background: none; color: var(--text); }
.k-medit-tabs .k-seg-item[aria-selected="true"] { background: none; color: var(--text); font-weight: var(--weight-semibold); box-shadow: inset 0 calc(-1 * var(--sp-2)) 0 var(--crimson); }
.k-medit-form { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-medit-tabbed, .k-medit-panel { display: flex; flex-direction: column; }
.k-medit-sec { display: flex; flex-direction: column; gap: var(--sp-12); padding-block: var(--sp-14); border-block-start: var(--hairline) solid var(--line); }
.k-medit-panel > .k-medit-sec:first-child { border-block-start: 0; padding-block-start: var(--sp-4); }
.k-medit-panel[data-state~="single"] .k-medit-index > .k-kicker { display: none; }
.k-medit-index > .k-kicker { margin: 0 0 var(--sp-4); }
.k-medit-index > p { margin: 0; font-size: var(--fs-12-5); line-height: var(--lh-body); color: var(--muted); }
.k-medit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12) var(--sp-14); }
.k-medit-wide { grid-column: 1 / -1; }
.k-medit-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-medit-span2 { grid-column: span 2; }
/* "12 of 40" as one field (review B), the shelf's own grammar */
.k-xofy { display: flex; align-items: center; gap: var(--sp-8); min-inline-size: 0; }
.k-xofy > .k-xofy-in { flex: 1 1 0; min-inline-size: 0; }
.k-xofy-of { flex: 0 0 auto; font-size: var(--fs-13); color: var(--muted); }
.k-xofy-ro { flex: 1 1 0; min-inline-size: 0; font-size: var(--fs-14); color: var(--text-2); }
/* the x.x / 10 score beside Favourite */
.k-medit-score { display: inline-flex; align-items: center; gap: var(--sp-6); }
.k-medit .k-medit-score-in { inline-size: var(--medit-score-w); min-block-size: var(--hit); padding-block: var(--sp-6); border-radius: var(--r-pill); text-align: center; font-weight: var(--weight-semibold); }
.k-medit-score-of { font-size: var(--fs-13); color: var(--muted); }
.k-field > .k-medit-score { display: flex; }
.k-medit .k-field > .k-medit-score > .k-medit-score-in { flex: 1 1 0; inline-size: auto; min-block-size: var(--hit); padding-block: var(--sp-10); border-radius: var(--r-14); text-align: start; font-weight: var(--weight-regular); }
.k-bk-find { --cluster-gap: var(--sp-10); }
/* a cover URL and its Position button on one line (review B) */
.k-medit-coverrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12); }
.k-medit-coverrow > .k-input { flex: 1 1 var(--medit-url-min); min-inline-size: 0; }
.k-bk-dnf { --stack-gap: var(--sp-8); }
.k-medit .k-input { background: var(--s3); }
.k-mro { padding: var(--sp-10) var(--sp-14); border-radius: var(--r-12); background: var(--s2); font-size: var(--fs-13-5); color: var(--text); overflow-wrap: anywhere; }
.k-medit-foot { justify-content: space-between; }
.k-mlist-chips { --cluster-gap: var(--sp-6); }
.k-mlists-pick { position: relative; }
.k-mlists-sum { display: block; list-style: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-mlists-sum::-webkit-details-marker { display: none; }
.k-mlists-sum[data-state~="empty"] { color: var(--muted); }
.k-mlists-menu { position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--sp-6)); z-index: var(--z-menu); display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-8); border-radius: var(--r-14); background: var(--s3); box-shadow: var(--elev-3); }
.k-mlists-opt { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-6) var(--sp-8); border-radius: var(--r-8); font-size: var(--fs-13); cursor: pointer; }
.k-mlists-opt:hover { background: var(--s2); }
.k-mlists-menu > .k-input { margin-block-start: var(--sp-4); background: var(--s2); }
.k-medit-prog { gap: var(--sp-6); }
.k-medit-prog-h { display: flex; justify-content: space-between; align-items: baseline; }
.k-medit-pct { font-size: var(--fs-12); color: var(--text-2); }
.k-medit-bar { display: block; block-size: var(--sp-6); border-radius: var(--r-pill); background: var(--s3); overflow: hidden; }
.k-medit-bar-fill { display: block; inline-size: var(--pct, 0%); block-size: 100%; border-radius: inherit; background: var(--vh-accent, var(--anime)); }
.k-mlists { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-mlists-row { display: flex; align-items: center; gap: var(--sp-8); }
.k-mlists-row > .k-input { flex: 1 1 auto; }

/* the spotlight picker and the numbers */
.k-mpick { display: flex; flex-direction: column; max-block-size: var(--menu-max-h); overflow-y: auto; margin-block-start: var(--sp-10); }
.k-mpick-row { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-6) var(--sp-4); border: 0; border-block-start: var(--hairline) solid var(--line); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.k-mpick-row:hover { background: var(--s2); }
.k-mstats-dialog { inline-size: min(var(--mstats-w), 100%); }
.k-mstats { display: flex; flex-direction: column; gap: var(--sp-16); }
.k-mstats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-14); }
/* the Analytics donut fills its card (review B): a bigger ring, the share
   legend beside it centred on the ring rather than hung from the top */
.k-mstats-grid .k-chart-donut { justify-content: center; }
.k-mstats-grid .k-chart-donut > svg { inline-size: var(--donut-w-lg); }
.k-mstats-grid .k-chart-donut .k-legend { gap: var(--sp-14); }
/* the numbers (review B, second pass): the band's first figure in the
   vault's colour; rows of equal-height cards whose charts fill them; the
   status ring with its key beside it across the row */
.k-mstat-band .k-mx-fig:first-child dd { color: var(--vh-accent, var(--text)); }
.k-mstats-grid--numbers .k-chart-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.k-mstats-grid--numbers .k-chart-body > svg { inline-size: 100%; }
.k-mstats-grid--numbers .k-chart-donut { justify-content: flex-start; gap: var(--sp-16) var(--sp-48); }
.k-mstats-grid--numbers .k-chart-donut > svg { inline-size: var(--donut-w); }
.k-mstats-grid--numbers .k-hbar { flex: 1 1 auto; justify-content: space-between; }

/* ================= This season (frame 11j) ================= */
.k-season { display: flex; flex-direction: column; gap: var(--sp-16); --season-c: var(--amber); }
.k-season[data-season="WINTER"] { --season-c: oklch(var(--cal-l) var(--cal-c) var(--cal-sky)); }
.k-season[data-season="SPRING"] { --season-c: var(--bloom); }
.k-season[data-season="SUMMER"] { --season-c: var(--teal); }
.k-season[data-season="FALL"] { --season-c: var(--amber); }
.k-season-hero { position: relative; block-size: var(--season-hero-h); border-radius: var(--r-26); overflow: hidden; background: var(--s1); isolation: isolate; }
.k-season-art { position: absolute; inset: 0; z-index: -3; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--art-pos, 50% 50%); }
.k-season-scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, var(--vhero-scrim-1) 30%, var(--vhero-scrim-3) 80%); }
.k-season-body { position: relative; block-size: 100%; padding: var(--sp-28) var(--sp-32); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6); }
.k-season-tools { position: absolute; inset-inline-end: var(--sp-20); inset-block-end: var(--sp-18); display: flex; align-items: center; gap: var(--sp-10); }
.k-season-step { display: flex; align-items: center; gap: var(--sp-10); }
.k-season-arrow { background: var(--mcard-glass); }
.k-season-kicker { color: var(--season-c); font-size: var(--fs-13); }
.k-season-title { margin: var(--sp-8) 0 var(--sp-10); font: var(--weight-bold) var(--fs-52) / 1.05 var(--font-kanji); }
.k-season-kanji { font-size: var(--fs-30); color: var(--text-2); }
.k-season-btn { background: var(--mcard-glass); }
.k-season-btn[hidden] { display: none; }
.k-season-credit { font-size: var(--fs-11-5); color: var(--muted); }
.k-season-yr { inline-size: 6rem; }
.k-season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: var(--sp-16); }
.k-season-grid > .k-empty { grid-column: 1 / -1; }
.k-scard { display: flex; gap: var(--sp-14); padding: var(--sp-14); border-radius: var(--r-24); background: var(--s1); cursor: pointer; }
.k-scard:hover { background: var(--s2); }
.k-scard > .k-mcover { position: relative; inset: auto; z-index: auto; inline-size: var(--scard-cover-w); block-size: var(--scard-cover-h); flex: 0 0 auto; border-radius: var(--r-12); overflow: hidden; }
.k-scard-body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.k-scard-title { padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-14-5); font-weight: var(--weight-semibold); color: var(--text); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.k-scard-sub { font-size: var(--fs-12); color: var(--muted); }
.k-scard-when { display: flex; align-items: baseline; gap: var(--sp-8); margin-block-start: auto; }
.k-scard-count { font-size: var(--fs-22); font-weight: var(--weight-semibold); color: var(--anime); }
.k-scard-meta { margin-block-start: var(--sp-6); --cluster-gap: var(--sp-6); }

/* ================= Visual novels (frame 11e) ================= */
.k-mcard-sub { font-size: var(--fs-12); color: var(--text-2); }
.k-medit-cover { --stack-gap: var(--sp-6); }
.k-vn-counting { font-size: var(--fs-12-5); color: var(--text-2); }
.k-vn-modes { display: flex; flex-direction: column; }
.k-vn-mode { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-8) 0; border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); color: var(--text); cursor: pointer; }
.k-vn-mode:first-child { border-block-start: 0; }
.k-vn-mode > small { margin-inline-start: auto; font-size: var(--fs-11-5); }
.k-vn-mode-in { appearance: none; -webkit-appearance: none; inline-size: var(--sp-16); block-size: var(--sp-16); margin: 0; border-radius: 50%; box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); cursor: pointer; }
.k-vn-mode-in:checked { box-shadow: inset 0 0 0 var(--sp-4) var(--vn); }
.k-vn-mode-in:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.k-vn-list { display: flex; flex-direction: column; }
.k-vn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-10); padding-block-end: var(--sp-6); }
.k-vn-head > b { font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-vn-head > .k-mono { margin-inline-start: auto; font-size: var(--fs-11-5); }
.k-vn-head > p { flex: 1 0 100%; margin: 0; }
.k-vn-row { display: flex; align-items: center; gap: var(--sp-12); padding-block: var(--sp-8); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
.k-vn-tickwrap { display: grid; place-items: center; cursor: pointer; }
.k-vn-tick { appearance: none; -webkit-appearance: none; inline-size: var(--rem-check); block-size: var(--rem-check); 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-vn-tick::after { content: "✓"; font-size: var(--fs-11); font-weight: var(--weight-bold); color: var(--bg); opacity: 0; }
.k-vn-tick:checked { background: var(--vn); box-shadow: none; }
.k-vn-tick:checked::after { opacity: 1; }
.k-vn-tick:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.k-vn-name { flex: 1 1 auto; min-inline-size: 0; padding: var(--sp-4) 0; border: 0; background: none; font: inherit; color: var(--text); }
.k-vn-name:focus-visible { outline: var(--focus-width) solid var(--focus-ring); }
.k-vn-name::placeholder { color: var(--muted); }
.k-vn-row[data-state~="cleared"] .k-vn-name { color: var(--muted); }
.k-vn-note { flex: 1.4 1 auto; font-size: var(--fs-12-5); color: var(--text-2); }
.k-vn-date { font-size: var(--fs-11-5); }
.k-vn-add { display: flex; align-items: center; gap: var(--sp-8); padding-block-start: var(--sp-8); border-block-start: var(--hairline) solid var(--line); }
.k-vn-qadd { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--sp-10); }
.k-vn-qadd > textarea { grid-column: 1 / -1; }
.k-vn-quotes { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-vn-quote { padding: var(--sp-14) var(--sp-18); border-radius: var(--r-16); background: var(--s3); box-shadow: inset var(--sp-3) 0 0 color-mix(in oklch, var(--vh-accent, var(--crimson)) 60%, var(--s3)); }
.k-vn-quote-text { margin: 0; font: italic var(--fs-16) / var(--lh-read) var(--font-read); color: var(--text); }
.k-vn-quote-meta { display: flex; align-items: center; gap: var(--sp-8); margin-block-start: var(--sp-10); font-size: var(--fs-12-5); color: var(--muted); }
.k-vn-quote-ctx { flex: 1 1 auto; min-inline-size: 0; }
.k-vn-quote-act { flex: 0 0 auto; background: none; box-shadow: inset 0 0 0 var(--hairline) var(--line); color: var(--muted); }
.k-vn-quote-act:hover { color: var(--text); }
.k-vn-qform { display: flex; flex-direction: column; gap: var(--sp-8); margin-block-start: var(--sp-10); padding: var(--sp-12); border-radius: var(--r-14); background: var(--s3); }

/* ================= Games (frame 11f) ================= */
.k-mwide { inline-size: min(var(--dialog-w-lg), 100%); }
.k-mchip[data-tone="platform"] { color: var(--games); }
.k-mchip[data-tone="tier-storyComplete"] { color: var(--green); }
.k-mchip[data-tone="tier-fullCompletion"] { color: var(--teal); }
.k-mchip[data-tone="tier-platinum"] { color: var(--gold); }
.k-mchip[data-tone="tier-abandoned"] { color: var(--red-soft); }
.k-mchip[data-tone="prio-high"] { color: var(--crimson); }
.k-mchip[data-tone="prio-medium"] { color: var(--amber); }
.k-mchip[data-tone="prio-low"] { color: var(--muted); }
.k-gm-steam { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-gm-steam [data-tone="crimson"] { color: var(--red-soft); }

/* ================= Books (frame 11d) and Mangaka ================= */
.k-mchip[data-tone="format"] { color: var(--books); }
.k-mchip[data-tone="owned"] { color: var(--text); }
.k-bk-stars { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-20); color: var(--line); }
.k-bk-stars:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-6); }
.k-bk-star[data-state~="full"] { color: var(--gold); }
.k-bk-star[data-state~="half"] { background: linear-gradient(90deg, var(--gold) 50%, var(--line) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-bk-stars > .k-mono { margin-inline-start: var(--sp-8); font-size: var(--fs-12); }
/* the physical vault (11d): one card per job, one gap between them */
.k-bk-phys { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-bk-box { margin: 0; padding: var(--sp-16) var(--sp-18); border-radius: var(--r-18); background: var(--s2); }
.k-bk-box-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-6) var(--sp-10); margin-block-end: var(--sp-14); }
.k-bk-box-h { margin: 0; font-size: var(--fs-15); font-weight: var(--weight-semibold); color: var(--text); }
.k-bk-box-sub { font-size: var(--fs-12-5); color: var(--muted); }
.k-bk-none { margin: 0; font-size: var(--fs-13); color: var(--muted); }
.k-bk-compare { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-bk-compare-row { display: grid; grid-template-columns: var(--bk-cmp-label-w) minmax(0, 1fr) auto; gap: var(--sp-12); align-items: center; font-size: var(--fs-12-5); }
.k-bk-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-12); }
.k-bk-fig { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
.k-bk-fig dt { font-size: var(--fs-12); color: var(--muted); }
.k-bk-fig dd { margin: 0; font-size: var(--fs-22); font-weight: var(--weight-semibold); }
.k-bk-fig dd[data-tone="amber"] { color: var(--amber); }
.k-bk-of { display: flex; align-items: baseline; gap: var(--sp-6); }
.k-bk-of-w { font-size: var(--fs-15); font-weight: var(--weight-regular); color: var(--muted); }
.k-medit .k-bk-of-in { inline-size: var(--bk-of-w); min-block-size: 0; padding: 0 var(--sp-2); border-radius: 0; background: none; box-shadow: inset 0 calc(-1 * var(--ring-1-5)) 0 var(--line); font: inherit; font-size: var(--fs-22); font-weight: var(--weight-semibold); color: var(--text); }
.k-medit .k-bk-of-in:focus { box-shadow: inset 0 calc(-1 * var(--ring-1-5)) 0 var(--crimson); outline: none; }
.k-bk-vols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-12); }
.k-bk-vol { display: flex; flex-direction: column; gap: var(--sp-6); padding: 0; border: 0; background: none; box-shadow: none; font: inherit; color: inherit; cursor: pointer; min-inline-size: 0; }
.k-bk-vol:hover { background: none; }
.k-bk-vol:disabled { cursor: default; }
.k-bk-vol-art { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--r-12); overflow: hidden; background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--spine) 85%, var(--text) 6%) 0 var(--sp-10), var(--spine) var(--sp-10) var(--sp-20)); }
.k-bk-vol[data-state~="missing"] .k-bk-vol-art { background: var(--s3); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-bk-vol-art > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-bk-vol-n { position: absolute; inset-inline-start: var(--sp-8); inset-block-end: var(--sp-8); min-inline-size: var(--rem-check); padding: var(--sp-2) var(--sp-6); border-radius: var(--r-pill); background: var(--mcard-glass); font-size: var(--fs-12); font-weight: var(--weight-semibold); color: var(--text); text-align: center; }
.k-bk-vol[data-state~="missing"] .k-bk-vol-n { background: none; color: var(--muted); }
.k-bk-vol-read { position: absolute; inset-block-start: var(--sp-7); inset-inline-end: var(--sp-7); inline-size: var(--rem-check); block-size: var(--rem-check); display: grid; place-items: center; border-radius: 50%; background: var(--green); font-size: var(--fs-11); font-weight: var(--weight-bold); color: var(--bg); }
.k-bk-vol-l { font-size: var(--fs-11); color: var(--muted); text-align: center; }
.k-bk-vol[data-state~="missing"] .k-bk-vol-l { opacity: 0.6; }
.k-bk-vol[aria-pressed="true"] .k-bk-vol-art { box-shadow: 0 0 0 var(--focus-width) var(--crimson); }
/* the selected volume: the number, four equal controls, Remove — every
   control on one baseline under its label */
.k-bk-volrec { display: grid; grid-template-columns: var(--bk-volrec-n-w) repeat(4, minmax(0, 1fr)) auto; gap: var(--sp-12); align-items: end; }
.k-bk-volrec > .k-field { min-inline-size: 0; }
/* every control in the volume row and the range form is one height, so
   the labels above them sit on one line (review B) */
.k-bk-volrec .k-input, .k-bk-range-grid .k-input, .k-bk-remove, .k-bk-range-go > .k-btn { inline-size: 100%; block-size: var(--bk-ctl-h); min-block-size: 0; padding-block: 0; }
.k-bk-volrec .k-field, .k-bk-range-grid .k-field { gap: var(--sp-6); }
/* a VN chapter's row adds the Owned tick before platform (review B) */
.k-bk-volrec .k-field-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-vn-chrec { grid-template-columns: var(--bk-volrec-n-w) auto repeat(4, minmax(0, 1fr)) auto; }
.k-vn-chrec .k-check { display: grid; place-items: center; block-size: var(--bk-ctl-h); }
.k-bk-volrec-n { align-self: center; font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-bk-cov { text-align: start; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-bk-remove { align-self: end; inline-size: auto; padding-inline: var(--sp-14); color: var(--red); }
.k-bk-range-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: var(--sp-10); align-items: end; margin-block-end: var(--sp-14); padding: var(--sp-14); border-radius: var(--r-14); background: var(--s1); }
.k-bk-range-go { display: flex; align-items: flex-end; }
.k-bk-lookup { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-bk-isbn > .k-input { flex: 1 1 12rem; }
.k-bk-scan[hidden] { display: none; }
.k-bk-scan { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-bk-scan-video { inline-size: 100%; max-block-size: 20rem; border-radius: var(--r-14); background: var(--s3); object-fit: cover; }
.k-bk-rank { display: flex; align-items: center; gap: var(--sp-8); }
.k-bk-rank > .k-mrow { flex: 1 1 auto; min-inline-size: 0; }
.k-bk-rank[data-state~="dragging"] { opacity: 0.5; }
.k-bk-rank[data-state~="dragover"] { box-shadow: inset 0 var(--ring-1-5) 0 var(--crimson); }
.k-bk-grip { cursor: grab; color: var(--muted); }

/* the virtual bookshelf */
.k-mgrid[data-layout="shelf"] { display: flex; flex-direction: column; gap: var(--sp-18); }
.k-bk-series { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-bk-series-h { display: flex; align-items: baseline; gap: var(--sp-10); font-size: var(--fs-13-5); }
.k-bk-series-h .k-muted { font-size: var(--fs-12); }
.k-bk-shelf { display: flex; align-items: flex-end; gap: var(--sp-2); padding: var(--sp-8) var(--sp-10) 0; border-block-end: var(--sp-6) solid var(--s2); border-radius: var(--r-8) var(--r-8) 0 0; background: linear-gradient(transparent, var(--s1)); overflow-x: auto; }
.k-bk-spine { position: relative; inline-size: var(--bk-spine-w); block-size: var(--bk-spine-h); flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); padding-block: var(--sp-8); border-radius: var(--r-2) var(--r-2) 0 0; background: linear-gradient(90deg, color-mix(in oklch, var(--spine, var(--s2)) 80%, var(--bg)), var(--spine, var(--s2)) 30%, color-mix(in oklch, var(--spine, var(--s2)) 85%, var(--bg))); color: var(--text); cursor: pointer; overflow: hidden; }
.k-bk-spine[data-state~="img"] { inline-size: calc(var(--bk-spine-h) * 2 / 3); padding: 0; }
.k-bk-spine > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-bk-spine-n { font-size: var(--fs-12); font-weight: var(--weight-semibold); }
.k-bk-spine-t { writing-mode: vertical-rl; font-size: var(--fs-11); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.k-bk-spine-cond { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: var(--sp-4); background: var(--amber); }
.k-bk-spine-cond[data-state~="damaged"] { background: var(--red); }

/* frame 22b: shelf skins paint only what is behind and around the spines —
   the back panel, the board they stand on and the sides. Spines, sizes,
   labels and hit targets are the same in every skin. */
.k-mgrid[data-skin="shelf-walnut"] .k-bk-shelf { padding-inline: var(--sp-14); border-block-end: var(--sp-8) solid var(--shelf-walnut-lt); border-radius: var(--r-12) var(--r-12) 0 0; background: repeating-linear-gradient(90deg, var(--shelf-walnut-dk) 0 var(--sp-2), var(--shelf-walnut) var(--sp-2) var(--sp-9), var(--shelf-walnut-md) var(--sp-9) var(--sp-12)); box-shadow: inset var(--sp-6) 0 0 var(--shelf-walnut-dk), inset calc(-1 * var(--sp-6)) 0 0 var(--shelf-walnut-dk), inset 0 var(--sp-6) 0 var(--shelf-walnut-dk), 0 var(--sp-2) 0 var(--shelf-walnut-dk); }
.k-mgrid[data-skin="shelf-lacquer"] .k-bk-shelf { padding-inline: var(--sp-14); border-block-end: var(--sp-6) solid var(--shelf-lacquer); border-radius: var(--r-12) var(--r-12) 0 0; background: linear-gradient(115deg, var(--shelf-lacquer) 0 38%, var(--shelf-lacquer-sheen) 50%, var(--shelf-lacquer) 62%); box-shadow: inset 0 0 0 var(--hairline) var(--gold), 0 var(--hairline) 0 var(--gold); }
.k-mgrid[data-skin="shelf-vermilion"] .k-bk-shelf { position: relative; padding: var(--sp-28) var(--sp-18) 0; border-block-end: var(--sp-8) solid var(--shelf-vermilion); border-radius: 0; background: linear-gradient(var(--shelf-kasagi) 0 var(--sp-6), var(--shelf-vermilion) var(--sp-6) var(--sp-14), var(--shelf-shrine-bg) var(--sp-14)); box-shadow: inset var(--sp-10) 0 0 var(--shelf-vermilion), inset calc(-1 * var(--sp-10)) 0 0 var(--shelf-vermilion); }
/* the shide: three folded paper strips hanging from the beam */
.k-mgrid[data-skin="shelf-vermilion"] .k-bk-shelf::before { content: ""; position: absolute; inset-block-start: var(--sp-14); inset-inline: 30%; block-size: var(--sp-10); background: repeating-linear-gradient(90deg, transparent 0 calc(16.6% - var(--sp-4)), var(--shelf-shide) calc(16.6% - var(--sp-4)) 16.6%, transparent 16.6% 33.3%); -webkit-mask: linear-gradient(var(--text) 0 40%, transparent 40% 55%, var(--text) 55%); mask: linear-gradient(var(--text) 0 40%, transparent 40% 55%, var(--text) 55%); pointer-events: none; }

/* Mangaka */
.k-mgrid[data-layout="wall"] { display: flex; flex-direction: column; gap: var(--sp-14); }
.k-mk-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.k-mk-jump[hidden] { display: none; }
.k-mk-key { min-inline-size: var(--hit); min-block-size: var(--hit); border: 0; border-radius: var(--r-8); background: none; font: inherit; font-size: var(--fs-12); color: var(--text-2); cursor: pointer; }
.k-mk-key:hover:not(:disabled) { background: var(--s1); }
.k-mk-key:disabled { color: var(--line); cursor: default; }
.k-mk-key[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.k-mk-letter { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); padding: var(--sp-4) var(--sp-8); background: var(--bg); font: var(--weight-semibold) var(--fs-15) var(--font-mono); color: var(--muted); }
.k-mk-card { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-mk-h { display: flex; align-items: center; gap: var(--sp-12); }
.k-mk-mark { inline-size: var(--mk-mark); block-size: var(--mk-mark); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--spine, var(--s2)); font-size: var(--fs-16); font-weight: var(--weight-semibold); color: var(--text); }
.k-mk-h-txt { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.k-mk-name { font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-mk-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mk-work-min), 1fr)); gap: var(--sp-8); }
.k-mk-work { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-6); border: 0; border-radius: var(--r-12); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; min-inline-size: 0; }
.k-mk-work:hover { background: var(--s2); }
.k-mk-cover { inline-size: var(--mk-cover-w); block-size: var(--mk-cover-h); flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-6); overflow: hidden; background: var(--spine, var(--s2)); font-family: var(--font-kanji); color: var(--text-2); }
.k-mk-cover > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-mk-work-body { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.k-mk-work-t { font-size: var(--fs-13); font-weight: var(--weight-medium); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-mk-card > .k-btn { align-self: flex-start; }

/* ================= Overview (frame 11a) ================= */
.k-mx { display: flex; flex-direction: column; gap: var(--sp-20); }
.k-mx-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--sp-18); margin: 0; padding: var(--sp-20) var(--sp-24); border-radius: var(--r-24); background: linear-gradient(120deg, var(--mx-wash), var(--s1) 55%); }
.k-mx-fig { display: flex; flex-direction: column; gap: var(--sp-4); }
.k-mx-fig dt { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-mx-fig dd { margin: 0; font-size: var(--fs-26); font-weight: var(--weight-semibold); letter-spacing: var(--track-head); }
.k-mx-head { margin: 0 var(--sp-4) var(--sp-12); }
.k-mx-title { margin: 0; font-size: var(--fs-17); font-weight: var(--weight-semibold); }
.k-mx-now-row { display: flex; gap: var(--sp-14); }
.k-mx-now-row > .k-mx-now-card { flex: 0 0 var(--mx-now-w); }
.k-mx-now-card { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; cursor: pointer; }
.k-mx-now-art { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--r-18); overflow: hidden; isolation: isolate; }
.k-mx-now-art > .k-mcover { position: absolute; inset: 0; }
.k-mx-now-kind { position: absolute; inset-block-start: var(--sp-8); inset-inline-start: var(--sp-8); z-index: 1; }
.k-mx-now-plus { position: absolute; inset-inline-end: var(--sp-8); inset-block-end: var(--sp-12); z-index: 1; padding: var(--sp-4) var(--sp-10); border: 0; border-radius: var(--r-pill); background: var(--text); font: var(--weight-semibold) var(--fs-11-5) var(--font-mono); color: var(--bg); cursor: pointer; }
.k-mx-now-art > .k-mbar { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; --bar-h: var(--sp-4); --bar-c: var(--vh-accent, var(--crimson)); border-radius: 0; background: var(--mcard-track); }
.k-mx-now-title { margin-block-start: var(--sp-8); padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-13-5); font-weight: var(--weight-semibold); color: var(--text); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
/* the two cards share a height whatever either holds (review A: they
   fell out of line when one was empty) */
.k-mx-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-20); align-items: stretch; }
.k-mx-quiet { margin: 0; font-size: var(--fs-12-5); }
.k-mx-day + .k-mx-day { margin-block-start: var(--sp-8); }
.k-mx-day-h { margin: var(--sp-8) 0 var(--sp-2); }
.k-mx-day-h > b { font-weight: var(--weight-semibold); }
.k-mx-day[data-state~="today"] .k-mx-day-h { color: var(--crimson); }
.k-mx-ep { display: flex; align-items: center; 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-mx-ep > .k-mrow-main { flex: 1 1 auto; min-inline-size: 0; }
/* the cover's z-index -1 placeholder needs its own stacking context, or
   the card's background paints over it */
.k-mx-ep-cover { position: relative; isolation: isolate; inline-size: var(--mx-ep-cover-w); block-size: var(--mx-ep-cover-h); flex: 0 0 auto; border-radius: var(--r-8); overflow: hidden; }
.k-mx-ep-cover > .k-mcover { position: absolute; inset: 0; }
.k-mx-ep-cover .k-mcover-ph { font-size: var(--fs-14); }
.k-mx-ep-count { flex: 0 0 var(--mx-ep-count-w); font-size: var(--fs-12-5); font-weight: var(--weight-semibold); color: var(--anime); white-space: nowrap; text-align: end; }
.k-mx-key { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-4) var(--sp-12); margin-inline-start: auto; font-size: var(--fs-11); color: var(--muted); }
.k-mx-key > span { display: inline-flex; align-items: center; gap: var(--sp-4); }
.k-mx-key i { inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: var(--r-2); background: var(--st); }
.k-mx-stand-row { display: grid; grid-template-columns: var(--mx-stand-name-w) minmax(0, 1fr) 3.5rem; gap: var(--sp-14); align-items: center; padding-block: var(--sp-9); border-block-start: var(--hairline) solid var(--line); }
.k-mx-stand-name { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-13-5); font-weight: var(--weight-medium); }
.k-mx-stand-name > i { inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--vh-accent); }
.k-mx-stack { display: flex; gap: var(--sp-2); block-size: var(--mx-stand-h); border-radius: var(--r-pill); overflow: hidden; }
.k-mx-stack > span { flex: var(--n) 1 0; background: var(--st); }
.k-mx-stand-row > .k-mono { text-align: end; font-size: var(--fs-12); }
.k-mx-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); }
.k-mx-door { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); border: 0; font: inherit; color: inherit; text-align: start; overflow: hidden; cursor: pointer; }
.k-mx-door:hover { background: var(--s2); }
.k-mx-door-mark { position: absolute; inset-inline-end: var(--sp-12); inset-block-start: var(--sp-6); font: var(--weight-bold) var(--mx-door-mark) / 1 var(--font-kanji); color: color-mix(in oklch, var(--vh-accent, var(--text)) 18%, transparent); pointer-events: none; }
.k-mx-door > .k-kicker { color: var(--vh-accent, var(--muted)); }
.k-mx-door-t { font-size: var(--fs-17); font-weight: var(--weight-semibold); }

/* ---------- the five tiers, widest first ---------- */
/* ================= the Shrine (frames 11g, 11k) ================= */
.k-shr { display: flex; flex-direction: column; gap: var(--sp-16); }
.k-shr-note { margin: 0 0 var(--sp-16); max-inline-size: 60ch; padding-inline-start: var(--sp-16); box-shadow: inset var(--sp-2) 0 0 var(--shr-gold); font: italic var(--fs-15) / 1.5 var(--font-read); color: var(--text-2); }
.k-shr-sort { display: inline-flex; }
.k-btn.k-shr-gold { background: var(--shr-gold); color: var(--shr-gold-ink); box-shadow: none; font-weight: var(--weight-semibold); }
.k-btn.k-shr-gold:hover { background: color-mix(in oklch, var(--shr-gold) 86%, var(--text)); }
.k-btn.k-shr-glass { background: color-mix(in oklch, var(--s3) 50%, transparent); }
.k-shr-hero-poster, .k-shr-pod-cover, .k-shr-tile-img { isolation: isolate; overflow: hidden; }
.k-shr-title, .k-shr-tile-title { display: block; max-inline-size: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.k-shr-module { font-size: var(--fs-12); color: var(--vh-accent, var(--muted)); }

/* rank one */
.k-shr-hero { position: relative; block-size: var(--shr-hero-h); border-radius: var(--r-30); overflow: hidden; isolation: isolate; cursor: pointer; background: color-mix(in oklch, var(--vh-accent, var(--shr-gold)) 20%, var(--s1)); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--shr-gold) 45%, transparent), var(--elev-4); }
.k-shr-hero::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: var(--sp-2); background: linear-gradient(90deg, transparent, var(--shr-gold), transparent); }
.k-shr-hero-art { z-index: -3; }
/* painted shelf skins and Shrine card styles (34g): the item's picture,
   the shelf behind its spines, the card frame round each cover */
.k-mgrid[data-painted] .k-bk-shelf { background: var(--skin-art) center / cover; border-radius: var(--r-12); box-shadow: none; border: 0; }
.k-shr[data-painted] :is(.k-shr-pod-cover, .k-shr-tile-cover, .k-shr-hero-cover) { position: relative; }
.k-shr[data-painted] :is(.k-shr-pod-cover, .k-shr-tile-cover, .k-shr-hero-cover)::after { content: ""; position: absolute; inset: -9% -12%; background: var(--skin-art) center / 100% 100% no-repeat; pointer-events: none; }
.k-shr-hero > .k-art { z-index: -3; --art-scrim: none; }
.k-shr-hero-art > img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: blur(var(--sp-4)) saturate(1.1); transform: scale(1.08); }
/* lighter on the left so the banner reads through, and a second scrim on
   the right behind the score, which vanished over a pale banner (review A) */
.k-shr-hero-scrim { position: absolute; inset: 0; z-index: -2; background: radial-gradient(50% 100% at 70% 50%, color-mix(in oklch, var(--shr-gold) 14%, transparent), transparent 70%), linear-gradient(90deg, color-mix(in oklch, var(--shr-scrim) 82%, transparent) 20%, color-mix(in oklch, var(--shr-scrim) 38%, transparent) 50%, color-mix(in oklch, var(--shr-scrim) 30%, transparent) 64%, color-mix(in oklch, var(--shr-scrim) 78%, transparent) 88%); }
.k-shr-hero-grid { block-size: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--shr-poster-col) var(--shr-score-w); gap: var(--sp-32); align-items: center; padding: var(--sp-32) var(--sp-40); }
.k-shr-hero-body { min-inline-size: 0; }
.k-shr-hero-rank { display: flex; align-items: center; gap: var(--sp-10); }
.k-shr-rank-tag { font: var(--weight-bold) var(--fs-12) var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--shr-gold); white-space: nowrap; }
.k-shr-rule { inline-size: var(--sp-40); block-size: var(--hairline); background: var(--shr-gold); opacity: 0.5; }
.k-shr-hall { font-size: var(--fs-12); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.k-shr-hero-title { margin: var(--sp-16) 0 var(--sp-10); font: 800 var(--fs-52) / 1.02 var(--font-kanji); letter-spacing: -0.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.k-shr-hero-meta { margin: 0; font-size: var(--fs-14); color: var(--text-2); }
.k-shr-hero-quote { margin: var(--sp-18) 0 0; max-inline-size: 32rem; padding-inline-start: var(--sp-16); box-shadow: inset var(--sp-2) 0 0 var(--shr-gold); font: italic var(--fs-17) / 1.5 var(--font-read); color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.k-shr-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-block-start: var(--sp-22); }
.k-shr-hero-cover { position: relative; justify-self: center; }
.k-shr-hero-cover::before { content: ""; position: absolute; inset: calc(var(--sp-14) * -1); border-radius: var(--r-24); transform: rotate(var(--cover-tilt)); background: radial-gradient(closest-side, color-mix(in oklch, var(--shr-gold) 35%, transparent), transparent); }
.k-shr-hero-poster { position: relative; display: block; inline-size: var(--shr-poster-w); block-size: var(--shr-poster-h); border-radius: var(--r-18); overflow: hidden; background: var(--s2); transform: rotate(var(--cover-tilt)); box-shadow: 0 0 0 var(--sp-2) var(--shr-gold), 0 0 0 var(--sp-7) color-mix(in oklch, var(--shr-gold) 15%, transparent), var(--elev-3); }
.k-shr-hero-facts { margin: 0; display: flex; flex-direction: column; gap: var(--sp-18); text-align: center; }
.k-shr-hero-facts dd { margin: 0; }
.k-shr-hero-score { display: flex; flex-direction: column-reverse; gap: var(--sp-6); padding-block-end: var(--sp-18); border-block-end: var(--hairline) solid color-mix(in oklch, var(--shr-gold) 25%, transparent); }
.k-shr-hero-score dd { font: var(--weight-semibold) var(--fs-76) / 1 var(--font-mono); letter-spacing: var(--track-huge); color: var(--shr-gold); }
.k-shr-hero-score dt { font-size: var(--fs-11); letter-spacing: 0.08em; white-space: nowrap; text-transform: uppercase; color: var(--muted); }
.k-shr-fact { font-size: var(--fs-12); line-height: 1.7; color: var(--text-2); }
.k-shr-fact dd { color: var(--text); font-weight: var(--weight-semibold); }

/* ranks two and three, beside the ledger */
.k-shr-podium { display: grid; grid-template-columns: repeat(var(--podium-n, 2), minmax(0, 1fr)) var(--shr-ledger-w); gap: var(--sp-16); }
.k-shr[data-single] .k-shr-podium { grid-template-columns: minmax(0, 1fr); }
/* ranks two and three (review B): small heroes in their metal */
.k-shr-pod { --metal: var(--shr-silver); position: relative; isolation: isolate; overflow: hidden; min-inline-size: 0; display: grid; grid-template-columns: var(--shr-pod-cover-w) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-20); min-block-size: var(--shr-pod-h); padding: var(--sp-20) var(--sp-24) var(--sp-20) var(--sp-28); border-radius: var(--r-24); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--metal) 45%, transparent), var(--elev-2); cursor: pointer; }
.k-shr-pod[data-rank="3"] { --metal: var(--shr-bronze); }
.k-shr-pod::before { content: ""; position: absolute; inset: 0 0 auto; block-size: var(--sp-3); background: linear-gradient(90deg, transparent, var(--metal), transparent); }
.k-shr-pod-art { z-index: -3; }
.k-shr-pod-art > img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: blur(var(--sp-6)) saturate(1.1); transform: scale(1.1); opacity: 0.55; }
.k-shr-pod-scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, color-mix(in oklch, var(--shr-scrim) 55%, transparent), color-mix(in oklch, var(--shr-scrim) 85%, transparent) 55%); }
.k-shr-pod-cover { position: relative; display: block; inline-size: var(--shr-pod-cover-w); block-size: var(--shr-pod-cover-h); border-radius: var(--r-12); overflow: hidden; background: var(--s2); transform: rotate(var(--cover-tilt)); box-shadow: 0 0 0 var(--ring-1-5) var(--metal), var(--elev-3); }
.k-shr-pod-body { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-shr-pod-rank { font: var(--weight-bold) var(--fs-13) var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--metal); }
.k-shr-pod-title { margin: 0; font: var(--weight-bold) var(--fs-26) / 1.15 var(--font-kanji); }
.k-shr-pod-title .k-shr-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-align: start; }
.k-shr-pod-meta { margin: 0; font-size: var(--fs-15); color: var(--text-2); }
.k-shr-pod-foot { display: flex; flex-direction: column; align-items: center; gap: var(--sp-10); }
.k-shr-pod-medal { display: grid; place-items: center; align-content: center; inline-size: var(--shr-pod-medal); block-size: var(--shr-pod-medal); border-radius: 50%; background: color-mix(in oklch, var(--shr-scrim) 70%, transparent); box-shadow: inset 0 0 0 var(--sp-3) color-mix(in oklch, var(--metal) 70%, transparent); }
.k-shr-pod-medal > small { font: var(--fs-12-5) var(--font-mono); color: var(--muted); }
.k-shr-pod-score { font: var(--weight-semibold) var(--fs-30) / 1 var(--font-mono); color: var(--shr-gold); }
/* the ledger (review B): two figures, then the hall by medium */
/* frame 23d: the tied tiers, and their order dialog */
.k-shr-ties { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8); font-size: var(--fs-13); }
.k-shr-ties b { color: var(--shr-gold); }
.k-shr-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.k-shr-order-row { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-6) var(--sp-10) var(--sp-6) var(--sp-4); border-radius: var(--r-12); background: var(--s1); }
.k-shr-order-cover { flex: 0 0 auto; inline-size: var(--shr-order-cover); aspect-ratio: 2 / 3; border-radius: var(--r-6); overflow: hidden; }
.k-shr-order-t { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; font-size: var(--fs-13-5); }
.k-shr-order-t > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--weight-semibold); }
.k-shr-ledger { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-16) var(--sp-18); border-radius: var(--r-24); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--shr-gold) 22%, transparent); }
.k-shr-ledger-h { margin: 0; font-size: var(--fs-14); font-weight: var(--weight-semibold); }
.k-shr-ledger-figs { display: flex; gap: var(--sp-18); }
.k-shr-ledger-fig { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-shr-ledger-fig > b { font-size: var(--fs-26); line-height: 1; color: var(--text); }
.k-shr-ledger-fig[data-tone="gold"] > b { color: var(--shr-gold); }
.k-shr-ledger-fig > span { font-size: var(--fs-11-5); color: var(--muted); }
.k-shr-ledger-bar { display: flex; gap: var(--sp-2); block-size: var(--sp-8); border-radius: var(--r-pill); overflow: hidden; }
.k-shr-ledger-seg { flex: var(--n, 1) 1 0%; background: var(--vh-accent); }
.k-shr-ledger-legend { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-14); }
.k-shr-ledger-row { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-12-5); }
.k-shr-ledger-dot { inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--vh-accent); }
.k-shr-ledger-k { color: var(--text-2); }
.k-shr-ledger-row > b { margin-inline-start: auto; font-size: var(--fs-12-5); }
.k-shr-ledger-pct { font-size: var(--fs-11); color: var(--muted); min-inline-size: var(--sp-28); text-align: end; }

/* four onward */
.k-shr-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-14); }
.k-shr-tile { min-inline-size: 0; cursor: pointer; }
.k-shr-tile-cover { position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-14); overflow: hidden; background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--shr-gold) 15%, transparent); }
.k-shr-tile-img { position: absolute; inset: 0; }
.k-shr-tile-rank { position: absolute; inset-block-start: var(--sp-7); inset-inline-start: var(--sp-7); padding: var(--sp-2) var(--sp-7); border-radius: var(--r-pill); background: color-mix(in oklch, var(--s3) 80%, transparent); font: var(--weight-semibold) var(--fs-11) var(--font-mono); color: var(--shr-gold); }
.k-shr-tile-title { margin-block-start: var(--sp-7); font-size: var(--fs-12-5); font-weight: var(--weight-semibold); }
.k-shr-tile-foot { display: flex; gap: var(--sp-6); font-size: var(--fs-11); color: var(--muted); }
.k-shr-tile-foot .k-shr-module { font-size: var(--fs-11); }
.k-shr-tile-score { margin-inline-start: auto; font-family: var(--font-mono); color: var(--text-2); }
.k-shr-count { margin: var(--sp-16) 0 0; font-size: var(--fs-12); }

/* Gold Shop shrine styles: one attribute on the hall */
.k-shr[data-skin="shrine-gilded"] .k-shr-pod, .k-shr[data-skin="shrine-gilded"] .k-shr-tile-cover { outline: var(--sp-4) double var(--shr-gold); outline-offset: var(--sp-2); }
.k-shr[data-skin="shrine-ink"] { --shr-gold: var(--text-2); }
.k-shr[data-skin="shrine-ink"] img { filter: grayscale(1) contrast(1.05); }
/* frame 22c: each style carried through the hall. Gilded torii: the
   double border on every card and gold rank marks and scores. Ink brush:
   an offset ink shadow, a brush stroke under each rank mark, bone type on
   an ink wash. Neon shrine: glowing cyan edges (pink for rank 01), neon
   rank marks and a faint grid behind the hall. */
.k-shr[data-skin="shrine-gilded"] .k-shr-hero-cover, .k-shr[data-skin="shrine-gilded"] .k-shr-pod-cover { outline: var(--sp-4) double var(--shr-gold); outline-offset: var(--sp-2); }
.k-shr[data-skin="shrine-gilded"] .k-shr-pod-rank, .k-shr[data-skin="shrine-gilded"] .k-shr-pod-score, .k-shr[data-skin="shrine-gilded"] .k-shr-hero-rank, .k-shr[data-skin="shrine-gilded"] .k-shr-hero-score, .k-shr[data-skin="shrine-gilded"] .k-shr-tile-score { color: var(--shr-gold); }
.k-shr[data-skin="shrine-ink"] .k-shr-pod, .k-shr[data-skin="shrine-ink"] .k-shr-tile-cover { box-shadow: var(--sp-6) var(--sp-6) 0 var(--shr-ink-shadow); }
.k-shr[data-skin="shrine-ink"] .k-shr-pod-rank, .k-shr[data-skin="shrine-ink"] .k-shr-tile-rank { background-image: linear-gradient(transparent 70%, var(--shr-ink-stroke) 70% 88%, transparent 88%); }
.k-shr[data-skin="shrine-ink"] .k-shr-ledger { background: var(--shr-ink-wash); color: var(--shr-bone); }
.k-shr[data-skin="shrine-neon"] { background-image: linear-gradient(var(--shr-neon-grid) var(--hairline), transparent var(--hairline)), linear-gradient(90deg, var(--shr-neon-grid) var(--hairline), transparent var(--hairline)); background-size: var(--sp-24) var(--sp-24); }
.k-shr[data-skin="shrine-neon"] .k-shr-hero, .k-shr[data-skin="shrine-neon"] .k-shr-pod, .k-shr[data-skin="shrine-neon"] .k-shr-tile-cover { box-shadow: 0 0 var(--sp-16) var(--shr-neon-glow), inset 0 0 0 var(--hairline) var(--shr-neon); }
.k-shr[data-skin="shrine-neon"] .k-shr-hero { box-shadow: 0 0 var(--sp-18) var(--shr-neon-glow2), inset 0 0 0 var(--hairline) var(--shr-neon2); }
.k-shr[data-skin="shrine-neon"] .k-shr-pod-rank, .k-shr[data-skin="shrine-neon"] .k-shr-tile-rank, .k-shr[data-skin="shrine-neon"] .k-shr-hero-rank { color: var(--shr-neon); text-shadow: 0 0 var(--sp-8) var(--shr-neon-glow); }

/* the share card dialog (frame 11k) */
.k-dialog.k-shr-share { inline-size: min(var(--shr-dialog-w), 100%); display: grid; grid-template-columns: var(--shr-preview-col) minmax(0, 1fr); gap: var(--sp-32); padding: var(--sp-28) var(--sp-32); background: var(--bg); }
.k-shr-preview { display: grid; place-items: center; padding: var(--sp-6); }
.k-shr-card-img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-22); box-shadow: var(--elev-4); }
.k-shr-controls { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.k-shr-lede { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--muted); }
.k-shr-styles { display: flex; flex-wrap: wrap; gap: var(--sp-14); }
.k-shr-style { display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); padding: 0; border: 0; background: none; color: var(--text-2); font-size: var(--fs-12); cursor: pointer; }
.k-shr-style[aria-pressed="true"] { color: var(--card-accent); font-weight: var(--weight-semibold); }
.k-shr-style[data-style="gold"] { --card-accent: var(--card-gold-accent); --card-bg: var(--card-gold-bg); --card-edge: conic-gradient(from 200deg, var(--card-foil-1), var(--card-foil-2), var(--card-foil-3), var(--card-foil-4), var(--card-foil-5), var(--card-foil-1)); }
.k-shr-style[data-style="crimson"] { --card-accent: var(--card-crimson-accent); --card-bg: var(--card-crimson-bg); --card-edge: var(--card-crimson-accent); }
.k-shr-style[data-style="ink"] { --card-accent: var(--card-ink-accent); --card-bg: var(--card-ink-bg); --card-edge: var(--card-ink-accent); }
.k-shr-style[data-style="gilded"] { --card-accent: var(--card-gilded-accent); --card-bg: var(--card-gilded-bg); --card-edge: var(--card-gilded-accent); }
.k-shr-style[data-style="inkbrush"] { --card-accent: var(--card-inkbrush-accent); --card-bg: var(--card-inkbrush-bg); --card-edge: var(--card-inkbrush-accent); }
.k-shr-style[data-style="neon"] { --card-accent: var(--card-neon-accent); --card-bg: var(--card-neon-bg); --card-edge: linear-gradient(135deg, var(--card-neon-accent), var(--card-neon-accent2)); }
.k-shr-swatch { position: relative; display: block; inline-size: var(--shr-swatch-w); block-size: var(--shr-swatch-h); border-radius: var(--r-6); overflow: hidden; background: var(--card-edge); box-shadow: var(--elev-2); outline: var(--sp-2) solid transparent; outline-offset: var(--sp-4); }
.k-shr-style[aria-pressed="true"] .k-shr-swatch { outline-color: var(--card-accent); }
.k-shr-swatch::before { content: ""; position: absolute; inset: var(--hairline); border-radius: var(--r-6); background: radial-gradient(60% 45% at 70% 30%, color-mix(in oklch, var(--card-accent) 22%, transparent), transparent 70%), var(--card-bg); }
.k-shr-swatch-num { position: absolute; inset-inline-start: var(--sp-4); inset-block-end: var(--sp-6); font: 800 1.9rem / 0.8 var(--font-kanji); color: transparent; -webkit-text-stroke: var(--hairline) var(--card-accent); }
.k-shr-shows { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.k-shr-show { padding: var(--sp-4) var(--sp-12); border: 0; border-radius: var(--r-pill); background: var(--s1); color: var(--text-2); font-size: var(--fs-12-5); cursor: pointer; }
.k-shr-show[aria-pressed="true"] { background: color-mix(in oklch, var(--shr-gold) 20%, transparent); color: var(--shr-gold); }
.k-shr-show[aria-pressed="true"]::before { content: "✓ "; }
.k-shr-notice > p { margin: 0; font-size: var(--fs-12-5); }
.k-shr-share-foot { margin-block-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-shr-spacer { flex: 1 1 auto; }

/* ================= the Budget Planner (frame 11h) ================= */
.k-pl-top { display: grid; grid-template-columns: minmax(0, 1fr) var(--pl-allow-w); gap: var(--sp-20); }
.k-pl-herowrap { min-inline-size: 0; display: flex; }
.k-pl-hero { position: relative; flex: 1 1 auto; min-block-size: var(--pl-hero-min); border-radius: var(--r-26); overflow: hidden; isolation: isolate; background: color-mix(in oklch, var(--vh-accent, var(--books)) 16%, var(--s1)); }
.k-pl-hero-art { z-index: -2; }
.k-pl-hero-art > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-pl-hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--bg) 0%, color-mix(in oklch, var(--bg) 85%, transparent) 50%, color-mix(in oklch, var(--bg) 30%, transparent)); }
/* the cover runs the height of the text beside it — from the queue label
   to the Mark purchased row (review A): sized to that block */
.k-pl-hero-in { block-size: 100%; display: flex; align-items: center; gap: var(--sp-24); padding: var(--sp-24) var(--sp-28); }
.k-pl-hero-cover { position: relative; flex: 0 0 auto; inline-size: var(--pl-cover-w); block-size: var(--pl-cover-h); border-radius: var(--r-14); overflow: hidden; isolation: isolate; box-shadow: 0 0 0 var(--sp-2) color-mix(in oklch, var(--vh-accent, var(--books)) 70%, transparent), var(--elev-3); }
.k-pl-hero-ph { display: grid; place-items: center; background: var(--s2); font: var(--weight-bold) var(--fs-40) var(--font-kanji); color: var(--muted); }
.k-pl-hero-body { flex: 1 1 auto; min-inline-size: 0; }
.k-pl-badge { display: inline-block; padding: var(--sp-4) var(--sp-10); border-radius: var(--r-pill); background: color-mix(in oklch, var(--vh-accent, var(--books)) 22%, transparent); font: var(--weight-semibold) var(--fs-11-5) var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--vh-accent, var(--books)); white-space: nowrap; }
.k-pl-hero-title { margin: var(--sp-12) 0 var(--sp-4); font-size: var(--fs-30); font-weight: var(--weight-semibold); letter-spacing: var(--track-h1); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.k-pl-hero-meta { margin: 0; font-size: var(--fs-13-5); color: var(--text-2); }
.k-pl-countdown { display: flex; align-items: baseline; gap: var(--sp-10); margin-block-start: var(--sp-16); }
.k-pl-countdown > b { font: var(--weight-semibold) var(--fs-40) / 1 var(--font-mono); color: var(--vh-accent, var(--books)); }
.k-pl-countdown > span { font-size: var(--fs-14); color: var(--text-2); }
.k-pl-hero-state { margin: var(--sp-16) 0 0; font-size: var(--fs-14); color: var(--text-2); }
.k-pl-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-block-start: var(--sp-16); }
.k-btn.k-pl-glass { background: color-mix(in oklch, var(--s3) 50%, transparent); }
.k-pl-hero-price { margin-inline-start: var(--sp-6); font-size: var(--fs-15); font-weight: var(--weight-semibold); }

.k-pl-allow { display: flex; flex-direction: column; padding: var(--sp-20) var(--sp-22); border-radius: var(--r-24); background: var(--s1); }
.k-pl-allow-head { display: flex; align-items: baseline; gap: var(--sp-8); }
.k-pl-allow-head > h2 { margin: 0; }
.k-pl-allow-head > .k-muted { margin-inline-start: auto; font-size: var(--fs-12); }
.k-pl-allow-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-10); margin: var(--sp-10) 0 var(--sp-12); }
.k-pl-allow-figure > b { font-size: var(--fs-40); font-weight: var(--weight-semibold); letter-spacing: var(--track-h1); }
.k-pl-allow-figure > span { font-size: var(--fs-13); color: var(--text-2); }
.k-pl-allow-figure[data-state~="over"] > b { color: var(--alarm); }
.k-pl-allow-bar { display: flex; gap: var(--sp-2); block-size: var(--sp-10); border-radius: var(--r-pill); overflow: hidden; background: var(--s2); }
.k-pl-allow-seg { flex: var(--n, 1) 1 0%; }
.k-pl-allow [data-tone="spent"] { --pl-tone: var(--green); }
.k-pl-allow [data-tone="paper"] { --pl-tone: var(--gold); }
.k-pl-allow [data-tone="committed"] { --pl-tone: var(--muted); }
.k-pl-allow-seg[data-tone="spent"], .k-pl-allow-seg[data-tone="paper"] { background: var(--pl-tone); }
.k-pl-allow-seg[data-tone="paper"] { opacity: 0.7; }
.k-pl-ledger { margin: var(--sp-12) 0 0; }
.k-pl-ledger-line { display: flex; align-items: center; gap: var(--sp-10); padding-block: var(--sp-8); border-block-start: var(--hairline) solid var(--line); }
.k-pl-dot { flex: 0 0 auto; inline-size: var(--sp-7); block-size: var(--sp-7); border-radius: 50%; background: var(--pl-tone, var(--muted)); }
.k-pl-ledger-copy { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; }
.k-pl-ledger-copy > dt { font-size: var(--fs-13); }
.k-pl-ledger-copy > .k-muted { font-size: var(--fs-11-5); }
.k-pl-ledger-line > dd { margin: 0; font-size: var(--fs-13); font-weight: var(--weight-semibold); }
.k-pl-allow-foot { margin-block-start: auto; padding-block-start: var(--sp-10); }

.k-pl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-pl-tools { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-pl-tools > .k-msearch { inline-size: var(--pl-search-w); }
/* the status tabs are the shared edge scroller (15n): their host may
   shrink below its content, so the strip scrolls instead of spilling */
.k-pl-tabs { min-inline-size: 0; max-inline-size: 100%; }
.k-pl-list { padding: var(--sp-6) var(--sp-12); border-radius: var(--r-24); background: var(--s1); }
/* the queue as columns (review B): lead · priority · item · type ·
   release · price · collection · actions, one header row */
.k-pl-row { display: grid; grid-template-columns: var(--pl-lead-w) var(--pl-prio-w) minmax(0, 1fr) var(--pl-type-w) var(--pl-rel-w) var(--pl-price-w) var(--pl-aux-w) var(--pl-act-w); gap: var(--sp-14); align-items: center; padding: var(--sp-10); }
.k-pl-row--head { padding-block: var(--sp-10) var(--sp-6); }
.k-pl-h { min-inline-size: 0; white-space: nowrap; font-size: var(--fs-11); font-weight: var(--weight-semibold); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-pl-row--head > .k-pl-h:nth-child(6) { text-align: end; }
.k-pl-item { min-inline-size: 0; display: flex; align-items: center; gap: var(--sp-12); }
.k-pl-prio { justify-self: start; padding: var(--sp-2) var(--sp-8); border-radius: var(--r-8); background: var(--s2); font-size: var(--fs-12); color: var(--text-2); }
.k-pl-prio[data-tone="high"] { background: color-mix(in oklch, var(--crimson) 20%, var(--s2)); color: var(--crimson-soft); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--crimson) 40%, transparent); }
.k-pl-prio[data-tone="mid"] { background: color-mix(in oklch, var(--amber) 16%, var(--s2)); color: var(--amber); }
.k-pl-type > .k-pl-module { display: inline-block; padding: var(--sp-2) var(--sp-8); border-radius: var(--r-8); background: color-mix(in oklch, var(--vh-accent, var(--muted)) 14%, var(--s2)); font-size: var(--fs-12); }
.k-pl-rel { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-12-5); color: var(--text-2); }
.k-pl-rel > small { font-size: var(--fs-11); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.k-pl-rel > small[data-state~="soon"] { color: var(--amber); }
.k-pl-row + .k-pl-row { border-block-start: var(--hairline) solid var(--line); }
.k-pl-row[data-state~="draggable"] { cursor: grab; }
.k-pl-row[data-state~="dragging"] { opacity: 0.5; }
.k-pl-check { inline-size: var(--sp-18); block-size: var(--sp-18); margin: 0; accent-color: var(--teal); }
.k-pl-grip { font-size: var(--fs-12); letter-spacing: -0.2em; color: var(--muted); }
.k-pl-rank { font-size: var(--fs-12); color: var(--muted); }
.k-pl-cover { position: relative; flex: 0 0 auto; display: block; inline-size: var(--pl-thumb-w); block-size: var(--pl-thumb-h); border-radius: var(--r-6); overflow: hidden; isolation: isolate; }
.k-pl-cover .k-mcover-ph, .k-pl-linkhit-cover .k-mcover-ph { font-size: var(--fs-16); }
.k-pl-main { min-inline-size: 0; }
.k-pl-title { font-size: var(--fs-14); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-pl-sub { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-pl-module { color: var(--vh-accent, var(--muted)); }
.k-pl-facts { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-block-start: var(--sp-4); }
.k-mchip[data-tone="linked"], .k-mchip[data-tone="link"] { color: var(--teal); }
.k-pl-link { justify-self: start; padding: 0; border: 0; background: none; font-size: var(--fs-12-5); color: var(--muted); text-align: start; cursor: pointer; }
.k-pl-link:hover { color: var(--text); }
.k-pl-link[data-state~="linked"] { color: var(--teal); }
.k-pl-price { font-size: var(--fs-13-5); font-weight: var(--weight-semibold); text-align: end; }
.k-pl-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-6); }
.k-pl-hint { margin: var(--sp-8) var(--sp-4) 0; font-size: var(--fs-12); }
.k-pl-history { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-pl-spacer { flex: 1 1 auto; }
.k-dialog.k-pl-dialog { inline-size: min(var(--pl-dialog-w), 100%); }
.k-pl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12) var(--sp-16); }
.k-pl-guidance { margin: var(--sp-6) 0 0; font-size: var(--fs-12-5); }
.k-pl-image-field { display: flex; align-items: center; gap: var(--sp-8); }
.k-pl-image-field > .k-input { flex: 1 1 auto; min-inline-size: 0; }
.k-pl-linkbox { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-pl-linkcur { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-13); }
.k-pl-linkhits { display: flex; flex-direction: column; gap: var(--sp-4); }
.k-pl-linkhit { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-6); border: 0; border-radius: var(--r-10); background: var(--s1); color: var(--text); text-align: start; cursor: pointer; }
.k-pl-linkhit:hover { background: var(--s3); }
.k-pl-linkhit-cover { position: relative; flex: 0 0 auto; inline-size: var(--sp-28); block-size: var(--sp-40); border-radius: var(--r-6); overflow: hidden; isolation: isolate; }
.k-pl-onlist { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); padding: var(--sp-10) var(--sp-12); border-radius: var(--r-14); background: color-mix(in oklch, var(--gold) 10%, var(--s1)); }
.k-pl-onlist-h { font: var(--weight-semibold) var(--fs-12) var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); }

/* 27n: Mark purchased — what it will do */
.k-pl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); }
.k-pl-will { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-14); background: var(--s1); }
.k-pl-will-row { display: flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-13); color: var(--text); }
.k-pl-will-row > .k-kanji { inline-size: var(--sp-18); flex: 0 0 auto; }
/* the mini chip's tones (the Wishlist's release desk) */
.k-mchip[data-tone="auto"] { color: var(--teal); }
.k-mchip[data-tone="manual"] { color: var(--gold); }
.k-mchip[data-tone="soon"] { color: var(--amber); }

/* ================= Sync & Import (frame 11i) ================= */
.k-sy { display: flex; flex-direction: column; gap: var(--sp-20); }
.k-sy-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-20); }
.k-sy-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-20); }
.k-sy-card { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-20) var(--sp-22); border-radius: var(--r-24); background: var(--s1); }
.k-sy-head { display: flex; align-items: center; gap: var(--sp-12); }
.k-sy-badge { flex: 0 0 auto; display: grid; place-items: center; inline-size: var(--sy-badge); block-size: var(--sy-badge); border-radius: var(--r-12); background: color-mix(in oklch, var(--vh-accent, var(--muted)) 22%, transparent); font: var(--weight-bold) var(--fs-14) var(--font-mono); color: var(--vh-accent, var(--text-2)); }
.k-sy-titles { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; }
.k-sy-title { margin: 0; font-size: var(--fs-16); font-weight: var(--weight-semibold); }
.k-sy-tag { font-size: var(--fs-12); color: var(--muted); }
.k-sy-pill { flex: 0 0 auto; padding: var(--sp-2) var(--sp-9); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-11-5); color: var(--muted); white-space: nowrap; }
.k-sy-pill[data-tone="ok"] { background: color-mix(in oklch, var(--green) 16%, transparent); color: var(--green); }
.k-sy-note { display: none; margin: 0; padding: var(--sp-10) var(--sp-12); border-radius: var(--r-14); background: var(--s2); font-size: var(--fs-12-5); line-height: 1.55; color: var(--text-2); }
.k-sy[data-state~="notes"] .k-sy-note { display: block; }
.k-sy-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-10); }
.k-sy-facts { margin: 0; }
.k-sy-fact { display: flex; gap: var(--sp-10); padding-block: var(--sp-9); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
.k-sy-fact > dt { color: var(--muted); white-space: nowrap; }
.k-sy-fact > dd { min-inline-size: 0; margin: 0 0 0 auto; text-align: end; overflow-wrap: anywhere; }
.k-sy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-block-start: auto; }
.k-sy-end { margin-inline-start: auto; }
.k-sy-status { margin: 0; font-size: var(--fs-12-5); color: var(--text-2); }
.k-sy-status:empty { display: none; }
.k-sy-status[data-state~="is-error"] { color: var(--alarm); }
.k-sy-small { margin: 0; font-size: var(--fs-12-5); }
.k-sy-setup { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-14); border-radius: var(--r-18); background: var(--s2); }
.k-sy-setup > .k-btn { align-self: stretch; }
.k-sy-formrow { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-sy-step-h { display: flex; align-items: baseline; gap: var(--sp-8); }
.k-sy-step-h > .k-field-label { margin: 0; }
.k-sy-steplink { margin-inline-start: auto; font-size: var(--fs-12); }
.k-sy-step-row { display: flex; align-items: center; gap: var(--sp-8); }
.k-sy-step-row > .k-input { flex: 1 1 auto; min-inline-size: 0; background: var(--s3); }
.k-sy-step-row > .k-btn { flex: 0 0 var(--sy-btn-w); justify-content: center; }
/* the fallback's two actions stack, each the card's width (review A) */
.k-sy-card--xml .k-sy-actions { flex-direction: column; align-items: stretch; }
.k-sy-mode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-12); font-size: var(--fs-12-5); }
.k-sy-mode-opt { display: inline-flex; align-items: center; gap: var(--sp-6); color: var(--text-2); cursor: pointer; }
.k-sy-mode-opt > input { margin: 0; accent-color: var(--crimson); }
.k-sy-auto { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-10); }
.k-sy-auto-row { display: flex; align-items: center; gap: var(--sp-16); }
.k-sy-auto-copy { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; }
.k-sy-auto-copy > b { font-size: var(--fs-15); }
.k-sy-auto-copy > .k-muted { font-size: var(--fs-12-5); }
.k-sy-auto-last { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-12); }
.k-sy-auto-last > b { font-size: var(--fs-13); font-weight: var(--weight-medium); }
.k-sy-enrich { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); }
.k-sy-enrich-block { display: flex; flex-direction: column; gap: var(--sp-8); padding-block-start: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-sy-enrich-h { font-size: var(--fs-13-5); }
.k-sy-enrich-block > .k-btn { align-self: flex-start; }
.k-sy-log-row { display: grid; grid-template-columns: var(--sy-log-when) var(--sy-log-svc) minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-14); padding-block: var(--sp-9); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13); }
.k-sy-log-what { min-inline-size: 0; color: var(--text-2); overflow-wrap: anywhere; }
.k-sy-log-err { color: var(--crimson); }
.k-sy-log-mark { color: var(--green); }
.k-sy-log-row[data-state~="failed"] .k-sy-log-mark { color: var(--crimson); }
.k-sy-history > summary { padding-block: var(--sp-8); font-size: var(--fs-12-5); color: var(--muted); cursor: pointer; }

/* ================= the provider profiles (AniList, VNDB) ================= */
.k-pf { display: flex; flex-direction: column; gap: var(--sp-16); }
.k-pf-hero { position: relative; min-block-size: var(--pf-hero-min); border-radius: var(--r-26); overflow: hidden; isolation: isolate; background: linear-gradient(120deg, var(--mx-wash), var(--s1) 60%); }
.k-pf-hero-art { z-index: -2; }
.k-pf-hero-art > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-pf-hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--bg) 0%, color-mix(in oklch, var(--bg) 80%, transparent) 50%, color-mix(in oklch, var(--bg) 35%, transparent)); }
.k-pf-hero-in { block-size: 100%; min-block-size: inherit; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-20) var(--sp-24); padding: var(--sp-24) var(--sp-28); }
.k-pf-avatar { position: relative; flex: 0 0 auto; display: grid; place-items: center; inline-size: var(--pf-avatar); block-size: var(--pf-avatar); border-radius: 50%; overflow: hidden; background: var(--s2); box-shadow: 0 0 0 var(--sp-2) color-mix(in oklch, var(--text) 18%, transparent), var(--elev-3); font: var(--weight-bold) var(--fs-38) var(--font-kanji); color: var(--muted); }
.k-pf-avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-pf-id { flex: 1 1 14rem; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.k-pf-id-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); }
.k-pf-name { margin: 0; font-size: var(--fs-30); font-weight: var(--weight-semibold); letter-spacing: var(--track-h1); }
.k-pf-since { font-size: var(--fs-13); color: var(--text-2); }
.k-pf-link { align-self: flex-start; font-size: var(--fs-13); color: var(--teal); }
.k-pf-figs { display: flex; flex-wrap: wrap; gap: var(--sp-24); margin: 0; }
.k-pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-pf-fetched { margin-inline-end: auto; font-size: var(--fs-12); }
.k-pf-pane { display: flex; flex-direction: column; gap: var(--sp-18); }
.k-pf-sec { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-pf-about { margin: 0; max-inline-size: 60ch; padding-inline-start: var(--sp-16); box-shadow: inset var(--sp-2) 0 0 var(--crimson); font: italic var(--fs-15) / 1.55 var(--font-read); color: var(--text-2); white-space: pre-line; }
/* the profiles' cards (review B: the sections were bare text) */
.k-pf-sec { padding: var(--sp-18) var(--sp-20); border-radius: var(--r-22); background: var(--s1); }
.k-pf-sec > .k-sectionhead { margin: 0; }
.k-pf-band { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--pf-tile-min), 1fr)); gap: var(--sp-10); }
.k-pf-band > .k-stat { padding: var(--sp-12) var(--sp-14); border-radius: var(--r-14); background: var(--s2); }
.k-pf-band .k-stat-value { font: var(--weight-semibold) var(--fs-22) / 1.1 var(--font-mono); }
.k-pf-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-16); align-items: start; }
.k-pf-stack { display: flex; flex-direction: column; gap: var(--sp-16); }
.k-pf-labels { display: flex; flex-direction: column; }
.k-pf-label { display: grid; grid-template-columns: var(--sp-10) minmax(0, 1fr) minmax(0, 1.1fr) var(--sp-32); align-items: center; gap: var(--sp-10); padding-block: var(--sp-9); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
.k-pf-label:first-child { border-block-start: 0; }
.k-pf-label[data-state~="empty"] { color: var(--muted); }
.k-pf-label-dot { inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--vh-accent, var(--vn)); }
.k-pf-label-name { min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.k-pf-tag { padding: 0 var(--sp-6); border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-11); color: var(--muted); }
.k-pf-label-bar { display: block; block-size: var(--sp-6); border-radius: var(--r-pill); background: var(--s2); overflow: hidden; }
.k-pf-label-bar > i { display: block; inline-size: var(--p); block-size: 100%; border-radius: inherit; background: var(--vh-accent, var(--vn)); }
.k-pf-label > b { text-align: end; font-size: var(--fs-13); }
.k-pf-spread { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--sp-6); align-items: end; block-size: var(--pf-spread-h); }
.k-pf-spread-col { block-size: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--sp-4); }
.k-pf-spread-bar { inline-size: 100%; block-size: var(--p); min-block-size: var(--sp-2); border-radius: var(--r-6) var(--r-6) 0 0; background: var(--vn); }
.k-pf-spread-bar[data-state~="empty"] { background: var(--s2); }
.k-pf-spread-col > small { font-size: var(--fs-11); color: var(--muted); }
.k-pf-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--pf-fav-w), 1fr)); gap: var(--sp-12); }
.k-pf-fav { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.k-pf-fav-art { display: grid; place-items: center; aspect-ratio: 2 / 3; border-radius: var(--r-12); overflow: hidden; background: var(--s2); }
.k-pf-fav[data-kind="person"] .k-pf-fav-art { aspect-ratio: 1; border-radius: 50%; }
.k-pf-fav-art > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-pf-fav-t { font-size: var(--fs-12); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-pf-ph { font: var(--weight-bold) var(--fs-22) var(--font-kanji); color: var(--muted); }
.k-pf-chips { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.k-mchip[data-tone="studio"] { color: var(--vn); }
.k-pf-users { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.k-pf-user { display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-4); border-radius: var(--r-pill); background: var(--s1); font-size: var(--fs-13); color: var(--text); }
.k-pf-user > img, .k-pf-user > .k-pf-ph { inline-size: var(--pf-person); block-size: var(--pf-person); border-radius: 50%; object-fit: cover; font-size: var(--fs-14); display: grid; place-items: center; background: var(--s2); }
.k-pf-feed { padding: var(--sp-4) var(--sp-16); border-radius: var(--r-24); background: var(--s1); }
.k-pf-row { display: flex; align-items: center; gap: var(--sp-12); padding-block: var(--sp-9); font-size: var(--fs-13); }
.k-pf-row + .k-pf-row { border-block-start: var(--hairline) solid var(--line); }
.k-pf-row-img { flex: 0 0 auto; inline-size: var(--pf-row-img); block-size: calc(var(--pf-row-img) * 1.4); border-radius: var(--r-6); object-fit: cover; }
.k-pf-row-t { flex: 1 1 auto; min-inline-size: 0; }
.k-pf-row > .k-mono { flex: 0 0 auto; font-size: var(--fs-12); }
.k-pf-note { margin: 0; font-size: var(--fs-13); }

/* ================= Find new: the provider search dialog ================= */
/* the search field stays put; the result list is what scrolls */
.k-dialog.k-fs-dialog { inline-size: min(var(--pl-dialog-w), 100%); overflow: hidden; }
.k-fs-dialog > .k-fs { flex: 1 1 auto; min-block-size: 0; }
.k-fs-results { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.k-fs { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-fs-in { max-inline-size: none; inline-size: 100%; }
.k-fs-results { display: flex; flex-direction: column; }
.k-fs-results > * { flex: 0 0 auto; }
.k-fs-row { display: grid; grid-template-columns: var(--pl-thumb-col) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-12); padding-block: var(--sp-10); }
.k-fs-row + .k-fs-row { border-block-start: var(--hairline) solid var(--line); }
.k-fs-row[data-state~="msch-added"] { opacity: 0.7; }
.k-fs-cover { position: relative; display: block; inline-size: var(--pl-thumb-w); block-size: var(--pl-thumb-h); border-radius: var(--r-6); overflow: hidden; isolation: isolate; }
.k-fs-cover .k-mcover-ph { font-size: var(--fs-16); }
.k-fs-body { min-inline-size: 0; }
.k-fs-title { font-size: var(--fs-14); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-fs-meta { font-size: var(--fs-12); }
.k-fs-act { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-6); }
.k-fs-picker { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-4); }
.k-fs-picker:empty { display: none; }
.k-fs-picker > .k-btn[data-status] { color: var(--st); }

@media (max-width: 1240px) {
.k-shr-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
.k-mrow { --mrow-cols: var(--mrow-cover-w) minmax(0, 2fr) var(--mrow-status-w) minmax(0, 1.2fr) minmax(0, 0.7fr) var(--mrow-score-w) var(--mrow-act-w); }
.k-mrow-c3 { display: none; }
.k-sy-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-sy-row, .k-sy-enrich { grid-template-columns: minmax(0, 1fr); }
.k-pl-top { grid-template-columns: minmax(0, 1fr); }
.k-pl-row { grid-template-columns: var(--pl-lead-w) var(--pl-prio-w) minmax(0, 1fr) var(--pl-rel-w) var(--pl-price-w) var(--pl-act-w); }
.k-pl-type, .k-pl-link, .k-pl-row--head > .k-pl-h:nth-child(4), .k-pl-row--head > .k-pl-h:nth-child(7) { display: none; }
.k-pl-link { display: none; }
.k-shr-hero { block-size: auto; }
.k-shr-hero-grid { grid-template-columns: minmax(0, 1fr) var(--shr-poster-col); }
.k-shr-hero-facts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-24); text-align: start; }
.k-shr-hero-score { flex-direction: column-reverse; padding: 0; border: 0; }
.k-shr-hero-score dd { font-size: var(--fs-42); }
.k-shr-podium { grid-template-columns: repeat(var(--podium-n, 2), minmax(0, 1fr)); }
.k-shr-ledger { grid-column: 1 / -1; }
.k-shr-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-dialog.k-shr-share { grid-template-columns: minmax(0, 1fr); }
.k-shr-preview { justify-self: center; inline-size: min(var(--shr-preview-col), 100%); }
.k-mx-pair { grid-template-columns: minmax(0, 1fr); }
.k-mx-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-medit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-mstats-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
.k-pf-cols { grid-template-columns: minmax(0, 1fr); }
.k-mrow { --mrow-cols: var(--mrow-cover-w) minmax(0, 1fr) var(--mrow-status-w) minmax(0, 0.8fr) var(--mrow-act-w); }
.k-mrow-c2, .k-mrow-score { display: none; }
.k-pl-tools { margin-inline-start: 0; inline-size: 100%; }
.k-pl-tools > .k-msearch { flex: 1 1 auto; inline-size: auto; }
.k-shr-hero-title { font-size: var(--fs-40); }
/* the podium from 860 down: cover, title and medal side by side left the
   title ~50px ("F… B…") on a phone and two letters a line in the two
   pods of an iPad in portrait. The medal drops under the title, small. */
.k-shr-pod { grid-template-columns: calc(var(--shr-pod-cover-w) * 0.72) minmax(0, 1fr); gap: var(--sp-14); }
.k-shr-pod-cover { grid-row: span 2; inline-size: calc(var(--shr-pod-cover-w) * 0.72); block-size: calc(var(--shr-pod-cover-h) * 0.72); }
.k-shr-pod-title { font-size: var(--fs-20); }
.k-shr-pod-meta { font-size: var(--fs-13); }
.k-shr-pod-foot { grid-column: 2; flex-direction: row; justify-content: flex-start; }
.k-shr-pod-medal { inline-size: auto; block-size: auto; padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill); flex-direction: row; display: inline-flex; align-items: baseline; gap: var(--sp-4); }
.k-shr-pod-score { font-size: var(--fs-20); }
.k-shr-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-mlayout-grid { grid-template-columns: minmax(0, 1fr); }
.k-mrail { position: static; max-block-size: none; overflow: visible; }
:root[data-shell="ready"] .k-mlayout-grid > .k-mrail { display: none; }
.k-vhero { block-size: auto; min-block-size: var(--vhero-h); }
.k-vhero-cover { inline-size: calc(var(--vhero-cover-w) * 0.7); block-size: calc(var(--vhero-cover-h) * 0.7); }
/* the toolbar takes its own line under the count, so its controls are never
   squeezed into the column beside it */
.k-mtoolbar { flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; }
.k-mcontrols { flex-wrap: wrap; }
.k-msearch { max-inline-size: none; }
}

@media (max-width: 700px) {
.k-mgrid[data-layout="list"] { padding-inline: var(--sp-6); }
/* frame 15j: search and one Filters button, then the count and the
   layout; Actions and the primary wait in ⋯ */
.k-mmain > .k-btn.k-disclosure { display: none; }
.k-mcontrols { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-10) var(--sp-8); }
.k-season-picker { grid-template-areas: "sel yr" "today show" "refresh vault" "asof asof"; }
.k-season-picker > .k-spacer { display: none; }
.k-season-sel { grid-area: sel; }
.k-season-yr { grid-area: yr; }
.k-season-today { grid-area: today; }
.k-season-show { grid-area: show; }
.k-season-refresh { grid-area: refresh; }
.k-season-vault { grid-area: vault; }
.k-season-asof { grid-area: asof; }
.k-season-asof:empty { display: none; }
.k-mtoolbar { display: contents; }
.k-mtoolbar > .k-mtool:not(.k-mfilter-sheet), .k-mtoolbar > .k-pill-select, .k-mtoolbar > .k-btn--primary { display: none; }
.k-msearch { order: 1; inline-size: auto; min-block-size: var(--hit-coarse); font-size: var(--fs-16); }
.k-mfilter-sheet { order: 2; display: inline-flex; min-block-size: var(--hit-coarse); }
.k-mcount { order: 3; white-space: normal; }
.k-mlayout { order: 4; justify-self: end; }
/* the spotlight: the cover beside its title, the bar and actions under */
.k-vhero { display: grid; grid-template-columns: var(--vhero-cover-w-sm) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 0 var(--sp-14); align-items: start; }
.k-vhero-body { display: contents; }
.k-vhero-body > * { grid-column: 2; }
.k-vhero-cover { grid-column: 1; grid-row: 1 / span 4; inline-size: var(--vhero-cover-w-sm); block-size: var(--vhero-cover-h-sm); margin: 0; transform: none; font-size: var(--fs-22); }
.k-vhero-body > .k-vhero-bar, .k-vhero-body > .k-vhero-actions { grid-column: 1 / -1; }
.k-vhero-bar { inline-size: 100%; margin-block-start: var(--sp-12); }
.k-vhero-chips { margin-block-end: 0; }
.k-vhero-actions { flex-wrap: wrap; }
.k-vhero-actions > .k-btn:not(.k-vhero-more) { flex: 1 1 0; justify-content: center; min-block-size: var(--hit-coarse); }
/* a cover's +1 is a 44px-tall pill on its corner (a 44px circle crammed
   "+1 ep" to its edges); its status is the editor's */
.k-mcard .k-mquickrow > select { display: none; }
.k-mcard .k-mplus { position: absolute; inset-inline-end: 0; inset-block-end: 0; min-inline-size: var(--hit-coarse); block-size: var(--hit-coarse); padding: 0 var(--sp-12); border-radius: var(--r-pill); white-space: nowrap; background: var(--vh-accent, var(--anime)); box-shadow: none; font-size: var(--fs-11); font-weight: var(--weight-bold); color: var(--bg); }
.k-mcard:has(.k-mplus) .k-mcard-meta, .k-mcard:has(.k-mplus) .k-mcard-title { padding-inline-end: calc(var(--hit-coarse) + var(--sp-24)); }
.k-mrow { --mrow-cols: var(--mrow-cover-w) minmax(0, 1fr) auto; gap: var(--sp-10); }
.k-mrow--head, .k-mrow-status, .k-mrow-c1 { display: none; }
.k-pf-hero-in { padding: var(--sp-20); }
.k-pf-name { font-size: var(--fs-22); }
.k-sy-providers { grid-template-columns: minmax(0, 1fr); }
.k-sy-log-row { grid-template-columns: var(--sy-log-when) minmax(0, 1fr) auto; }
.k-sy-log-row > b { display: none; }
.k-sy-step-row { flex-direction: column; align-items: stretch; }
.k-sy-step-row > .k-btn { flex-basis: auto; }
.k-pl-hero-in { flex-direction: column; align-items: flex-start; }
.k-pl-row { grid-template-columns: var(--pl-lead-w) minmax(0, 1fr) auto; }
.k-pl-prio, .k-pl-rel, .k-pl-row--head { display: none; }
.k-pl-rank { display: none; }
.k-pl-row-actions { grid-column: 2 / -1; }
.k-pl-form { grid-template-columns: minmax(0, 1fr); }
.k-shr-hero-grid { grid-template-columns: minmax(0, 1fr); padding: var(--sp-24); }
.k-shr-hero-cover { display: none; }
.k-shr-podium { grid-template-columns: minmax(0, 1fr); }
.k-dialog.k-shr-share { padding: var(--sp-20); }
.k-bk-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-bk-volrec, .k-vn-chrec { grid-template-columns: minmax(0, 1fr); }
.k-bk-vols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-bk-range-grid { grid-template-columns: minmax(0, 1fr); }
.k-vhero { min-block-size: 0; padding: var(--sp-18); }
.k-vhero-title { white-space: normal; font-size: var(--fs-18); }
.k-mgrid[data-layout="grid"], .k-mgrid:not([data-layout]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.k-mquickrow { display: flex; }
.k-medit { border-radius: var(--r-24) var(--r-24) 0 0; }
.k-dialog-overlay[data-state~="drawer"] { place-items: end stretch; }
.k-medit { block-size: auto; max-block-size: 92dvh; }
.k-medit-grid, .k-mfilters-grid { grid-template-columns: minmax(0, 1fr); }
.k-medit-span2 { grid-column: auto; }
.k-medit-banner { --medit-cover-w: var(--medit-cover-w-sm); gap: var(--sp-14); padding-block-start: var(--sp-48); }
.k-medit-title { font-size: var(--fs-20); }
.k-season-title { font-size: var(--fs-30); }
}

@media (max-width: 560px) {
.k-fs-row { grid-template-columns: var(--pl-thumb-col) minmax(0, 1fr); }
.k-fs-act { grid-column: 1 / -1; align-items: flex-start; }
.k-fs-picker { justify-content: flex-start; }
.k-pl-hero-title { font-size: var(--fs-22); }
.k-pl-allow-figure > b { font-size: var(--fs-30); }
.k-shr-hero-title { font-size: var(--fs-32); }
.k-shr-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-mx-doors { grid-template-columns: minmax(0, 1fr); }
.k-mx-stand-row { grid-template-columns: 5rem minmax(0, 1fr); }
.k-mx-stand-row > .k-mono { display: none; }
}

/* 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-mfav, .k-mscore, .k-mlayout .k-seg-item { min-inline-size: var(--hit-coarse); min-block-size: var(--hit-coarse); }
.k-mlayout .k-seg-item { padding-inline: 0; justify-content: center; }
}

}