/* KurenaiOS — css/views/archive.css · @layer views
   View compositions for Archive: Backup & Restore, Help & Guide, attachments (M11).
   A view file may use tokens and primitives; it may not restyle a
   primitive's internals.

   Graphite step 8 (frames 14a–14c): Backup & Restore with the Account &
   Cloud Sync card (hub.js, cloudui.js), the notification centre — the
   page and the bell's popover (notifications.js) — and Help & Guide
   (help.js).

   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 tone vocabulary for the archive's tiles and marks */
:where(.k-bk-tile, .k-nt-mark)[data-tone="teal"] { --tone-c: var(--teal); }
:where(.k-bk-tile, .k-nt-mark)[data-tone="amber"] { --tone-c: var(--amber); }
:where(.k-bk-tile, .k-nt-mark)[data-tone="gold"] { --tone-c: var(--gold); }
:where(.k-bk-tile, .k-nt-mark)[data-tone="anime"] { --tone-c: var(--anime); }
:where(.k-bk-tile, .k-nt-mark)[data-tone="books"] { --tone-c: var(--books); }
:where(.k-bk-tile, .k-nt-mark)[data-tone="muted"] { --tone-c: var(--text-2); }

/* ---------- Backup & Restore (14a) ---------- */
.k-bk-top { display: grid; grid-template-columns: minmax(0, 1fr) var(--bk-side-w); gap: var(--sp-20); align-items: stretch; }
.k-bk-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: var(--sp-24) var(--sp-28); border-radius: var(--r-24); background: var(--bk-hero-bg); }
.k-bk-mark { inset-inline-end: calc(var(--sp-10) * -1); inset-block-end: calc(var(--sp-48) * -1); }
.k-bk-hero > :not(.k-bk-mark) { position: relative; }
.k-bk-kicker { color: var(--bk-kicker-ink); }
.k-bk-last { margin: var(--sp-8) 0 var(--sp-4); font-size: var(--fs-26); font-weight: var(--weight-semibold); letter-spacing: var(--track-head); }
.k-bk-last-sub { margin: 0; font-size: var(--fs-13-5); color: var(--text-2); }
.k-bk-facts { display: flex; flex-wrap: wrap; gap: var(--sp-10) var(--sp-24); margin: var(--sp-18) 0 var(--sp-20); }
.k-bk-fact-k { display: block; font-size: var(--fs-11-5); color: var(--muted); }
.k-bk-fact-v { display: block; margin-block-start: var(--sp-2); font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-bk-actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-block-start: auto; }
.k-bk-covers .k-card-head { margin-block-end: var(--sp-6); }
.k-bk-cover { display: grid; grid-template-columns: var(--sp-32) minmax(0, 1fr) auto; gap: var(--sp-14); align-items: center; padding-block: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-bk-tile { inline-size: var(--bk-tile); block-size: var(--bk-tile); display: grid; place-items: center; border-radius: var(--r-9); background: color-mix(in oklch, var(--tone-c, var(--text-2)) 16%, transparent); color: var(--tone-c, var(--text-2)); font: var(--weight-semibold) var(--fs-14) var(--font-kanji); }
.k-bk-cover-t { font-size: var(--fs-14); }
.k-bk-count { font: var(--fs-12) var(--font-mono); color: var(--muted); white-space: nowrap; }
.k-bk-note { margin: var(--sp-12) 0 0; font-size: var(--fs-12); color: var(--muted); }
.k-bk-danger { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-18) var(--sp-24); border-radius: var(--r-24); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--red) 40%, transparent); }
.k-bk-danger-txt { flex: 1 1 0; min-inline-size: 0; }
.k-bk-danger-txt b { font-size: var(--fs-15); font-weight: var(--weight-semibold); color: var(--red); }
.k-bk-danger-txt p { margin: var(--sp-2) 0 0; font-size: var(--fs-13); color: var(--text-2); }
/* the RESET confirmation (14a2) */
.k-bk-reset-mark { inline-size: var(--bk-reset-mark); block-size: var(--bk-reset-mark); display: grid; place-items: center; border-radius: var(--r-14); background: color-mix(in oklch, var(--red) 20%, transparent); color: var(--red); font: var(--weight-bold) var(--fs-20) var(--font-kanji); }
.k-bk-reset-p { margin: 0; font-size: var(--fs-13-5); line-height: 1.55; color: var(--text-2); }
.k-bk-type { font-family: var(--font-mono); letter-spacing: var(--track-label); }
.k-bk-reset-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-block-start: var(--sp-4); }
.k-bk-cancel { margin-inline-start: auto; }

/* the Account & Cloud Sync card */
.k-cloud { display: flex; flex-direction: column; }
.k-cloud-chip { margin-inline-start: auto; }
.k-cloud-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-cloud-p { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.k-cloud-p b { color: var(--text); font-weight: var(--weight-semibold); }
.k-cloud-note { font-size: var(--fs-12); color: var(--muted); }
.k-cloud-facts .k-card-row:first-of-type { border-block-start: var(--hairline) solid var(--line); }
.k-cloud-facts .k-card-row-v[data-tone="red"] { color: var(--red); }
.k-cloud-facts .k-card-row-v[data-tone="amber"] { color: var(--amber); }
.k-cloud-form { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-cloud-msg { margin: 0; font-size: var(--fs-12-5); color: var(--amber); }
.k-cloud-msg:empty { display: none; }
.k-cloud-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-block-start: auto; padding-block-start: var(--sp-10); }
.k-cloud-out { margin-inline-start: auto; font-size: var(--fs-12-5); }

/* ---------- Notifications (14b) and the bell (14b2) ---------- */
.k-nt { display: grid; grid-template-columns: minmax(0, 1fr) var(--nt-side-w); gap: var(--sp-20); align-items: start; }
.k-nt-feed { display: flex; flex-direction: column; gap: var(--sp-16); min-inline-size: 0; }
.k-nt-list { display: flex; flex-direction: column; }
.k-nt-day { margin: var(--sp-6) 0 0; padding: 0 var(--sp-4) var(--sp-8); font-size: var(--fs-11); font-weight: var(--weight-semibold); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-nt-day:first-child { margin-block-start: 0; }
.k-nt-day-rows { padding: var(--sp-4) var(--sp-18); border-radius: var(--r-24); background: var(--s1); margin-block-end: var(--sp-12); }
.k-nt-row { inline-size: 100%; display: grid; grid-template-columns: var(--sp-32) minmax(0, 1fr) auto; gap: var(--sp-14); align-items: center; padding: var(--sp-10) 0; border-block-start: var(--hairline) solid var(--line); text-align: start; }
.k-nt-row:first-child { border-block-start: 0; }
.k-nt-row:hover .k-nt-title { text-decoration: underline; text-decoration-color: var(--line); }
.k-nt-mark { inline-size: var(--nt-mark); block-size: var(--nt-mark); display: grid; place-items: center; overflow: hidden; border-radius: var(--r-10); background: color-mix(in oklch, var(--tone-c, var(--text-2)) 16%, transparent); color: var(--tone-c, var(--text-2)); font: var(--weight-semibold) var(--fs-14) var(--font-kanji); }
.k-nt-mark img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-nt-txt { display: flex; flex-direction: column; min-inline-size: 0; }
.k-nt-title { font-size: var(--fs-14); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-nt-row[data-state~="is-unread"] .k-nt-title { color: var(--text); font-weight: var(--weight-semibold); }
.k-nt-meta { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-nt-meta:empty { display: none; }
.k-nt-when { display: flex; align-items: center; gap: var(--sp-10); font: var(--fs-11-5) var(--font-mono); color: var(--muted); }
.k-nt-dot { inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--crimson); }
.k-nt-side { display: flex; flex-direction: column; gap: var(--sp-16); }
.k-nt-card { display: flex; flex-direction: column; }
.k-nt-card-p { margin: var(--sp-4) 0 var(--sp-8); font-size: var(--fs-12-5); line-height: 1.45; color: var(--muted); }
.k-nt-card .k-card-row:first-of-type { border-block-start: var(--hairline) solid var(--line); }
.k-nt-switch-row { display: flex; align-items: center; gap: var(--sp-10); padding-block: var(--sp-10); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); cursor: pointer; }
.k-nt-switch-row > span { flex: 1 1 0; }
.k-nt-card-title + .k-nt-switch-row, .k-nt-card > .k-card-title + .k-nt-switch-row { margin-block-start: var(--sp-8); }
.k-nt-quiet { display: flex; align-items: center; gap: var(--sp-8); padding-block-end: var(--sp-4); }
.k-nt-quiet[data-state~="off"] { opacity: 0.5; }
.k-nt-time { flex: 1 1 0; min-inline-size: 0; padding: var(--sp-6) var(--sp-10); font-family: var(--font-mono); font-size: var(--fs-12-5); }
.k-nt-clear { align-self: flex-start; padding-inline: var(--sp-6); color: var(--red); font-size: var(--fs-12-5); }
/* the popover */
.k-nt-pop { inline-size: min(var(--nt-pop-w), calc(100vw - var(--sp-32))); padding: var(--sp-12) var(--sp-8) var(--sp-8); }
.k-nt-pop-head { display: flex; align-items: center; gap: var(--sp-8); padding: 0 var(--sp-12) var(--sp-8); }
.k-nt-pop-head b { font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-nt-pop-mark { margin-inline-start: auto; }
.k-nt-pop-list .k-nt-row { padding: var(--sp-10) var(--sp-12); border-radius: var(--r-14); border-block-start: 0; }
.k-nt-pop-list .k-nt-row:hover { background: var(--s1); }
.k-nt-pop-list .k-nt-title { font-size: var(--fs-13); }
.k-nt-pop-list .k-nt-meta { font-size: var(--fs-11-5); }
.k-nt-pop-empty { margin: 0; padding: var(--sp-10) var(--sp-12); font-size: var(--fs-13); color: var(--muted); }
.k-nt-pop-all { inline-size: 100%; margin-block-start: var(--sp-4); padding: var(--sp-10) 0 var(--sp-4); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13); color: var(--text-2); text-align: center; }
.k-nt-pop-all:hover { color: var(--text); }

/* ---------- Help & Guide (14c) ---------- */
.k-help { display: grid; grid-template-columns: var(--help-nav-w) minmax(0, 1fr) var(--help-aside-w); gap: var(--sp-24); align-items: start; }
.k-help-nav { position: sticky; inset-block-start: 0; display: flex; flex-direction: column; gap: var(--sp-10); max-block-size: calc(100dvh - var(--topbar-h) - var(--sp-48)); overflow-y: auto; }
.k-help-search { font-size: var(--fs-13); }
.k-help-nav-list { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-help-group { display: flex; flex-direction: column; gap: var(--hairline); }
/* the rail is the sections, one row each (review A) */
.k-help-group-h { inline-size: 100%; display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-9) var(--sp-12); border-radius: var(--r-12); background: none; box-shadow: none; font-size: var(--fs-13-5); font-weight: var(--weight-medium); color: var(--text-2); text-align: start; }
.k-help-group-h:hover { background: var(--s1); color: var(--text); }
.k-help-group-h[aria-current="page"] { background: var(--s2); color: var(--text); font-weight: var(--weight-semibold); }
.k-help-count { margin-inline-start: auto; font-size: var(--fs-11-5); color: var(--muted); }
.k-help-mark { font-family: var(--font-kanji); letter-spacing: normal; }
.k-help-article { padding: var(--sp-26) var(--sp-32); min-inline-size: 0; }
.k-help-crumb { font-size: var(--fs-12-5); color: var(--muted); }
.k-help-title { margin: var(--sp-6) 0 var(--sp-14); font-size: var(--fs-26); font-weight: var(--weight-semibold); letter-spacing: var(--track-head); }
.k-help-body { display: flex; flex-direction: column; gap: var(--sp-22); max-inline-size: var(--help-read-w); }
.k-help-entry { scroll-margin-block-start: var(--sp-20); }
.k-help-entry-h { margin: 0 0 var(--sp-6); font-size: var(--fs-17); font-weight: var(--weight-semibold); }
.k-help-entry p { margin: 0; font: var(--fs-16) / 1.65 var(--font-read); color: var(--text); }
.k-help-related { display: inline-block; margin-block-start: var(--sp-8); color: var(--bloom); }
.k-help-hit { font: inherit; color: var(--text); text-align: start; }
.k-help-hit:hover { text-decoration: underline; }
.k-help-pager { display: flex; gap: var(--sp-10); max-inline-size: var(--help-read-w); margin-block-start: var(--sp-24); }
.k-help-pager > * { flex: 1 1 0; }
.k-help-page { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-12) var(--sp-16); border-radius: var(--r-16); box-shadow: inset 0 0 0 var(--hairline) var(--line); text-align: start; }
.k-help-page[data-dir="next"] { text-align: end; }
.k-help-page:hover { background: var(--s2); }
.k-help-page-k { font-size: var(--fs-11-5); color: var(--muted); }
.k-help-page b { font-size: var(--fs-14); font-weight: var(--weight-semibold); }
.k-help-aside { position: sticky; inset-block-start: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.k-help-card { display: flex; flex-direction: column; }
.k-help-card .k-kicker { margin-block-end: var(--sp-8); }
.k-help-toc { padding: var(--sp-6) 0 var(--sp-6) var(--sp-12); font-size: var(--fs-13); color: var(--text-2); text-align: start; box-shadow: inset var(--focus-width) 0 0 var(--line); }
.k-help-toc:hover, .k-help-toc[aria-current="page"] { color: var(--text); box-shadow: inset var(--focus-width) 0 0 var(--crimson); }

/* figures (review B): a small drawing of what the entry is about, marked
   with numbers the legend underneath explains */
.k-hfig { margin: var(--sp-20) 0 var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-14); }
.k-hfig-vis { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-18); border-radius: var(--r-18); background: var(--bg); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-hfig-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); }
.k-hfig-part { --t: var(--text-2); position: relative; display: inline-flex; flex-direction: column; justify-content: center; gap: var(--sp-2); min-block-size: var(--sp-40); padding: var(--sp-8) var(--sp-14); border-radius: var(--r-14); background: color-mix(in oklch, var(--t) 10%, var(--s1)); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--t) 40%, transparent); font-family: var(--font-ui); }
.k-hfig-part > b { font-size: var(--fs-14); font-weight: var(--weight-semibold); color: var(--t); }
.k-hfig-part > small { font-size: var(--fs-11-5); color: var(--muted); }
.k-hfig-part[data-tone="red"] { --t: var(--red-soft); }
.k-hfig-part[data-tone="amber"] { --t: var(--amber); }
.k-hfig-part[data-tone="green"] { --t: var(--green); }
.k-hfig-part[data-tone="teal"] { --t: var(--teal); }
.k-hfig-part[data-tone="crimson"] { --t: var(--crimson-soft); }
.k-hfig-part[data-tone="gold"] { --t: var(--amber); background: linear-gradient(135deg, color-mix(in oklch, var(--amber) 26%, var(--s1)), color-mix(in oklch, var(--green) 14%, var(--s1))); }
.k-hfig-part[data-kind="kbd"], .k-hfig-part[data-kind="key"] { min-block-size: 0; padding: var(--sp-4) var(--sp-10); border-radius: var(--r-8); background: var(--s2); box-shadow: inset 0 calc(-1 * var(--hairline)) 0 var(--line); }
.k-hfig-part[data-kind="kbd"] > b, .k-hfig-part[data-kind="key"] > b { font-family: var(--font-mono); font-size: var(--fs-12-5); color: var(--text); }
.k-hfig-part[data-kind="field"] { flex: 1 1 var(--help-fig-field); border-radius: var(--r-pill); background: var(--s1); box-shadow: none; }
.k-hfig-part[data-kind="field"] > b { font-weight: var(--weight-regular); color: var(--muted); }
.k-hfig-part[data-kind="chip"] { min-block-size: 0; padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill); }
.k-hfig-part[data-kind="chip"] > b { font-size: var(--fs-12-5); }
.k-hfig-part[data-kind="dot"], .k-hfig-part[data-kind="grade"] { inline-size: var(--sp-32); min-block-size: var(--sp-32); padding: 0; align-items: center; border-radius: 50%; }
.k-hfig-part[data-kind="grade"] { border-radius: var(--r-10); }
.k-hfig-part[data-kind="dot"] > b, .k-hfig-part[data-kind="grade"] > b { font-size: var(--fs-12-5); }
.k-hfig-part[data-kind="big"] > b { font-size: var(--fs-26); font-weight: var(--weight-bold); }
.k-hfig-part[data-kind="opt"] { flex: 1 1 auto; align-items: flex-start; flex-direction: row; justify-content: space-between; }
.k-hfig-part[data-kind="wide"] { flex: 1 1 auto; }
.k-hfig-part[data-kind="cta"] { --t: var(--bg); background: var(--crimson); box-shadow: none; border-radius: var(--r-pill); }
.k-hfig-part[data-kind="link"] { background: none; box-shadow: none; }
.k-hfig-part[data-kind="link"] > b { color: var(--crimson-soft); font-size: var(--fs-12-5); }
.k-hfig-part[data-kind="kick"] { min-block-size: 0; padding: 0; background: none; box-shadow: none; }
.k-hfig-part[data-kind="kick"] > b { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-hfig-part[data-kind="switch"] { inline-size: var(--sp-40); min-block-size: var(--sp-20); padding: 0; border-radius: var(--r-pill); background: var(--teal); }
.k-hfig-part[data-kind="switch"] > b { display: none; }
.k-hfig-part[data-kind="ring"] { inline-size: var(--help-fig-ring); block-size: var(--help-fig-ring); padding: 0; align-items: center; border-radius: 50%; box-shadow: inset 0 0 0 var(--sp-4) var(--crimson); }
.k-hfig-part[data-kind="ring"] > b { font-family: var(--font-mono); font-size: var(--fs-17); color: var(--text); }
.k-hfig-part[data-kind="bar"] { flex: 1 1 100%; }
.k-hfig-bar { display: block; block-size: var(--sp-8); border-radius: var(--r-pill); background: var(--s2); overflow: hidden; }
.k-hfig-bar > i { display: block; inline-size: var(--p); block-size: 100%; background: var(--t); }
.k-hfig-n { position: absolute; inset-block-start: calc(-1 * var(--sp-8)); inset-inline-end: calc(-1 * var(--sp-8)); display: grid; place-items: center; inline-size: var(--sp-18); block-size: var(--sp-18); border-radius: 50%; background: var(--crimson); color: var(--bg); font: var(--weight-bold) var(--fs-11) var(--font-mono); }
.k-hfig-svg { display: block; max-inline-size: 100%; block-size: auto; }
.k-hfig-line { stroke-width: 2; }
.k-hfig-line[data-line="class"], .k-hfig-node[data-line="class"] { stroke: oklch(var(--cal-l) var(--cal-c) var(--cal-iris)); }
.k-hfig-line[data-line="mine"], .k-hfig-node[data-line="mine"] { stroke: var(--teal); }
.k-hfig-node { fill: var(--bg); stroke-width: 2; }
.k-hfig-arc { fill: none; stroke-width: 1.5; stroke-dasharray: 4 4; }
.k-hfig-branch { stroke-dasharray: none; stroke-width: 2; }
.k-hfig-arc[data-tone="ahead"] { stroke: var(--teal); }
.k-hfig-arc[data-tone="same"] { stroke: var(--green); stroke-dasharray: none; stroke-width: 2; }
.k-hfig-arc[data-tone="behind"] { stroke: oklch(var(--cal-l) var(--cal-c) var(--cal-iris)); }
.k-hfig-notes { margin: 0; padding-inline-start: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-13); line-height: var(--lh-body); color: var(--text-2); }
.k-hfig-notes > li::marker { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--crimson); }
.k-help-kbd { padding: var(--sp-2) var(--sp-8); border-radius: var(--r-6); background: var(--s3); box-shadow: inset 0 0 0 var(--hairline) var(--line); font: var(--fs-11-5) var(--font-mono); color: var(--text); white-space: nowrap; }
.k-help-card .k-card-row { gap: var(--sp-10); }
.k-help-card .k-card-row:first-of-type { border-block-start: var(--hairline) solid var(--line); }
.k-help-ask { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-14) var(--sp-18); border-radius: var(--r-20); box-shadow: inset 0 0 0 var(--hairline) var(--line); font-size: var(--fs-12-5); line-height: 1.45; color: var(--text-2); text-align: start; }
.k-help-ask:hover { background: var(--s1); }
.k-help-ask img { inline-size: var(--sp-28); block-size: var(--sp-28); object-fit: contain; }
.k-help-ask b { color: var(--bloom); font-weight: var(--weight-semibold); }

/* ---------- the five tiers, widest first ---------- */
@media (max-width: 1240px) {
.k-bk-top { grid-template-columns: minmax(0, 1fr); }
.k-help { grid-template-columns: var(--help-nav-w) minmax(0, 1fr); }
.k-help-aside { display: none; }
}

@media (max-width: 1080px) {
.k-nt { grid-template-columns: minmax(0, 1fr); }
.k-nt-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); }
.k-nt-clear { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
.k-help { grid-template-columns: minmax(0, 1fr); }
.k-help-nav { position: static; max-block-size: none; }
.k-help-nav-list { flex-direction: row; flex-wrap: wrap; }
.k-help-group > :not(.k-help-group-h) { display: none; }
.k-help-group-h { padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill); background: var(--s1); }
.k-help-group-h[aria-current="page"] { background: var(--s2); }
.k-help-article { padding: var(--sp-20); }
.k-nt-side { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
.k-files-empty-hero { flex-direction: column; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-16); }
.k-files-empty-art { inline-size: var(--empty-art-sm); }
/* frame 15m: the alert settings are ⋯'s sheet; a title wraps to two lines */
.k-nt > .k-nt-side { display: none; }
.k-msheet-tools > .k-nt-side { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-nt-row { align-items: start; }
.k-nt-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.k-bk-hero { padding: var(--sp-20); }
.k-bk-danger { flex-direction: column; align-items: stretch; }
.k-bk-danger > .k-btn { justify-content: center; min-block-size: var(--hit-coarse); background: none; box-shadow: inset 0 0 0 var(--hairline) var(--red); color: var(--red); }
.k-bk-actions { flex-direction: column; margin-block-start: var(--sp-16); }
.k-bk-actions > .k-btn { justify-content: center; min-block-size: var(--hit-coarse); }
.k-bk-mark { display: none; }
.k-bk-cover { grid-template-columns: var(--sp-32) minmax(0, 1fr); }
.k-bk-count { grid-column: 2; white-space: normal; }
}

@media (max-width: 560px) {
.k-help-pager { flex-direction: column; }
}

/* ---------- Files (files plan §8, Archive › Files) ---------- */
.k-files { display: grid; grid-template-columns: minmax(0, 1fr) var(--files-side-w); gap: var(--sp-20); align-items: start; }
.k-files[data-state~="drop-over"], .k-att[data-state~="drop-over"], .k-ex-card[data-state~="drop-over"], .k-asg-block[data-state~="drop-over"] { outline: var(--sp-2) dashed var(--teal); outline-offset: var(--sp-4); border-radius: var(--r-16); }
.k-files-main { display: flex; flex-direction: column; gap: var(--sp-14); min-inline-size: 0; }
.k-files-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-files-search { flex: 1 1 var(--files-card-min); }
.k-files-subj { gap: var(--sp-4); }
.k-files-chip[aria-pressed="true"] { --chip-c: var(--text); background: var(--s3); }
.k-files-inkf { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-13); color: var(--text-2); }
.k-files-list[data-view="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--files-card-min), 1fr)); gap: var(--sp-12); }
.k-files-list[data-view="list"] { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-files-item { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-12); border-radius: var(--r-16); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); min-inline-size: 0; }
.k-files-list[data-view="list"] .k-files-item { flex-direction: row; align-items: center; padding: var(--sp-8) var(--sp-12); }
.k-files-open { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-10); align-items: start; inline-size: 100%; padding: 0; background: none; box-shadow: none; text-align: start; color: var(--text); }
.k-files-list[data-view="list"] .k-files-open { flex: 1 1 auto; align-items: center; }
.k-files-txt { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.k-files-name { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-files-meta, .k-files-where-l { font-size: var(--fs-12); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-files-snip { font-size: var(--fs-12); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-files-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.k-files-list[data-view="list"] .k-files-foot { flex: 0 0 auto; }
.k-files-side { display: flex; flex-direction: column; gap: var(--sp-14); position: sticky; inset-block-start: var(--sp-16); }
.k-files-facts { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-files-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4) var(--sp-12); margin: 0; font-size: var(--fs-13); }
.k-files-dl dt { color: var(--text-2); }
.k-files-dl dd { margin: 0; text-align: end; }
.k-files-howto { margin: 0; padding-inline-start: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-13); color: var(--text-2); }
.k-files-where { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.k-files-where li { display: flex; align-items: center; gap: var(--sp-8); }
.k-files-where-t { flex: 1 1 auto; min-inline-size: 0; }
.k-files[data-state~="empty"] { grid-template-columns: minmax(0, 1fr); }
.k-files[data-state~="empty"] .k-files-side { display: none; }
.k-files[data-state~="empty"] .k-files-bar { opacity: 0.55; }
.k-files-empty { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-16); }
.k-files-empty-hero { display: flex; align-items: center; gap: var(--sp-24); padding: var(--sp-20) var(--sp-24); border-radius: var(--r-20); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-files-empty-art { inline-size: var(--empty-art); block-size: auto; flex: none; }
.k-files-empty-title { margin: 0 0 var(--sp-8); font-family: var(--font-read); font-size: var(--fs-26); font-weight: var(--weight-semibold); }
.k-files-empty-hero p { margin: 0; }
.k-files-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--files-card-min), 1fr)); gap: var(--sp-12); }
.k-files-way { display: flex; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-16); border: var(--hairline) dashed var(--line); border-radius: var(--r-16); background: none; color: var(--text); font: inherit; text-align: start; }
button.k-files-way { cursor: pointer; border-style: solid; background: var(--s1); }
button.k-files-way:hover { background: var(--s2); }
.k-files-way-mark { display: grid; place-items: center; flex: none; inline-size: var(--sp-32); block-size: var(--sp-32); border-radius: var(--r-10); background: var(--s2); color: var(--teal); font-size: var(--fs-15); }
.k-files-way-t { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; font-size: var(--fs-13); }
.k-files-way-t b { font-size: var(--fs-14); }
.k-files-kindbtn { justify-content: flex-start; inline-size: 100%; margin-block-end: var(--sp-4); }
.k-files-kindbtn[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--sp-2) var(--crimson); }
/* a topic's PDF previews as its first page and opens in the viewer (invariant 152) */
.k-att-pdfcard { display: flex; flex-direction: column; align-items: center; gap: var(--sp-10); inline-size: 100%; padding: var(--sp-12); border-radius: var(--r-14); background: var(--s2); box-shadow: none; color: var(--text); }
.k-att-pdfpage { display: block; inline-size: 100%; max-inline-size: var(--att-pdfcard-max); min-block-size: var(--sp-64); }
.k-att-pdfcanvas { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-6); background: var(--ex-paper); box-shadow: var(--elev-2); }
.k-att-pdfcta { font-weight: var(--weight-semibold); color: var(--crimson); }
.k-ex-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-13); }

/* ---------- Storage (files plan §7) ---------- */
.k-st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--st-card-min), 1fr)); gap: var(--sp-16); align-items: stretch; }
.k-st-card { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-st-row { display: flex; align-items: center; gap: var(--sp-10); justify-content: space-between; font-size: var(--fs-13); }
.k-st-row-t { flex: 1 1 auto; color: var(--text-2); }
.k-st-note { margin: 0; font-size: var(--fs-13); color: var(--text-2); }
.k-st-big { margin: 0; font-size: var(--fs-15); }
.k-st-meter { block-size: var(--sp-8); border-radius: var(--r-pill); background: var(--s3); overflow: hidden; }
.k-st-meter-fill { display: block; block-size: 100%; inline-size: var(--st-pct, 0%); background: var(--teal); }
.k-st-meter[data-state~="full"] .k-st-meter-fill { background: var(--alarm); }
.k-st-actions { display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-start; }
.k-st-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.k-st-file { display: flex; align-items: center; gap: var(--sp-8); }
.k-st-file-open { display: flex; align-items: center; gap: var(--sp-10); flex: 1 1 auto; min-inline-size: 0; padding: 0; background: none; box-shadow: none; text-align: start; color: var(--text); }
.k-st-file-t { display: flex; flex-direction: column; min-inline-size: 0; }

/* ---------- Connections (roadmap 5.15): on Storage's card grid ---------- */
.k-cx-toggle { display: flex; align-items: center; gap: var(--sp-10); justify-content: space-between; font-size: var(--fs-13); }
.k-cx-toggle-t { flex: 1 1 auto; color: var(--text); }
.k-cx-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cx-kind-min), 1fr)); gap: var(--sp-6) var(--sp-14); padding-inline-start: var(--sp-4); }
.k-cx-kind { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-12-5); color: var(--text-2); }
.k-cx-btns { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-block-start: auto; padding-block-start: var(--sp-4); }
.k-cx-facts { margin: 0; padding-inline-start: var(--sp-18); display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-13); color: var(--text-2); }
.k-cx-wide { grid-column: 1 / -1; }
.k-cx-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.k-cx-link { display: flex; align-items: center; gap: var(--sp-10); justify-content: space-between; padding-block: var(--sp-8); border-block-start: var(--hairline) solid var(--line); }
.k-cx-link-t { flex: 1 1 auto; min-inline-size: 0; font-size: var(--fs-13-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the camera scan (files plan §6, kept light) ---------- */
.k-scan-add { gap: var(--sp-8); margin-block-end: var(--sp-12); }
.k-scan-body { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--scan-thumb) + var(--sp-24)); gap: var(--sp-14); align-items: start; }
.k-scan-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); min-inline-size: 0; }
.k-scan-empty { padding: var(--sp-40) var(--sp-16); text-align: center; }
.k-scan-frame { position: relative; inline-size: var(--scan-w); block-size: var(--scan-h); max-inline-size: 100%; touch-action: none; }
.k-scan-photo { display: block; inline-size: 100%; block-size: 100%; border-radius: var(--r-8); }
.k-scan-quad { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.k-scan-quad polygon { fill: var(--wash-teal); stroke: var(--teal); stroke-width: 2; }
.k-scan-handle { position: absolute; inset-inline-start: var(--hx); inset-block-start: var(--hy); translate: -50% -50%; inline-size: var(--scan-handle); block-size: var(--scan-handle); min-inline-size: 0; min-block-size: 0; padding: 0; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 var(--sp-3) var(--bg), var(--elev-2); touch-action: none; cursor: grab; }
.k-scan-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-8); max-block-size: 60vh; overflow-y: auto; }
.k-scan-pg { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-8); background: var(--s2); box-shadow: none; }
.k-scan-pg[aria-current="true"] { box-shadow: inset 0 0 0 var(--sp-2) var(--teal); }
.k-scan-thumb { display: block; inline-size: var(--scan-thumb); block-size: auto; border-radius: var(--r-6); }
.k-scan-actions { gap: var(--sp-8); justify-content: center; }

@media (max-width: 1080px) {
.k-files { grid-template-columns: minmax(0, 1fr); }
.k-files-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--files-card-min), 1fr)); }
}
@media (max-width: 700px) {
.k-scan-body { grid-template-columns: minmax(0, 1fr); }
.k-scan-strip { flex-direction: row; max-block-size: none; overflow-x: auto; }
}
}